Merge pull request #5259 from simplex-chat/reaction-members

view member reactions
2026-08-07 01:50:05 +00:00 · 2024-11-30 12:25:33 +00:00
parent b0f3f0a523 03bc4e5d01
commit 879c117269
15 changed files with 284 additions and 22 deletions
@@ -446,6 +446,13 @@ func apiChatItemReaction(type: ChatType, id: Int64, itemId: Int64, add: Bool, re
    throw r
 }

+func apiGetReactionMembers(groupId: Int64, itemId: Int64, reaction: MsgReaction) async throws -> [MemberReaction] {
+    let userId = try currentUserId("apiGetReactionMemebers")
+    let r = await chatSendCmd(.apiGetReactionMembers(userId: userId, groupId: groupId, itemId: itemId, reaction: reaction ))
+    if case let .reactionMembers(_, memberReactions) = r { return memberReactions }
+    throw r
+}
+
 func apiDeleteChatItems(type: ChatType, id: Int64, itemIds: [Int64], mode: CIDeleteMode) async throws -> [ChatItemDeletion] {
    let r = await chatSendCmd(.apiDeleteChatItem(type: type, id: id, itemIds: itemIds, mode: mode), bgDelay: msgDelay)
    if case let .chatItemsDeleted(_, items, _) = r { return items }
@@ -901,7 +901,7 @@ struct ChatView: View {
        @State private var showChatItemInfoSheet: Bool = false
        @State private var chatItemInfo: ChatItemInfo?
        @State private var msgWidth: CGFloat = 0
-        
+
        @Binding var selectedChatItems: Set<Int64>?
        @Binding var forwardedChatItems: [ChatItem]

@@ -1117,14 +1117,12 @@ struct ChatView: View {
                            HStack(alignment: .top, spacing: 10) {
                                MemberProfileImage(member, size: memberImageSize, backgroundColor: theme.colors.background)
                                    .onTapGesture {
-                                        if let member =  m.getGroupMember(member.groupMemberId) {
-                                            selectedMember = member
+                                        if let mem = m.getGroupMember(member.groupMemberId) {
+                                            selectedMember = mem
                                        } else {
-                                            Task {
-                                                await m.loadGroupMembers(groupInfo) {
-                                                    selectedMember = m.getGroupMember(member.groupMemberId)
-                                                }
-                                            }
+                                            let mem = GMember.init(member)
+                                            m.groupMembers.append(mem)
+                                            selectedMember = mem
                                        }
                                    }
                                chatItemWithMenu(ci, range, maxWidth, itemSeparation)
@@ -1244,11 +1242,20 @@ struct ChatView: View {
                    }
                    .padding(.horizontal, 6)
                    .padding(.vertical, 4)
-
-                    if chat.chatInfo.featureEnabled(.reactions) && (ci.allowAddReaction || r.userReacted) {
+                    .if(chat.chatInfo.featureEnabled(.reactions) && (ci.allowAddReaction || r.userReacted)) { v in
                        v.onTapGesture {
                            setReaction(ci, add: !r.userReacted, reaction: r.reaction)
                        }
+                    }
+                    if case let .group(groupInfo) = chat.chatInfo {
+                        v.contextMenu {
+                            ReactionContextMenu(
+                                groupInfo: groupInfo,
+                                itemId: ci.id,
+                                reactionCount: r,
+                                selectedMember: $selectedMember
+                            )
+                        }
                    } else {
                        v
                    }
@@ -1838,6 +1845,108 @@ private func buildTheme() -> AppTheme {
    }
 }

+struct ReactionContextMenu: View {
+    @EnvironmentObject var m: ChatModel
+    let groupInfo: GroupInfo
+    var itemId: Int64
+    var reactionCount: CIReactionCount
+    @Binding var selectedMember: GMember?
+    @State private var memberReactions: [MemberReaction] = []
+    @AppStorage(DEFAULT_PROFILE_IMAGE_CORNER_RADIUS) private var radius = defaultProfileImageCorner
+
+    var body: some View {
+        groupMemberReactionList()
+            .task {
+                logger.debug("ReactionContextMenu task \(radius)")
+                await loadChatItemReaction()
+            }
+    }
+
+    @ViewBuilder private func groupMemberReactionList() -> some View {
+        if memberReactions.isEmpty {
+            ForEach(Array(repeating: 0, count: reactionCount.totalReacted), id: \.self) { _ in
+                Text(verbatim: " ")
+            }
+        } else {
+            ForEach(memberReactions, id: \.groupMember.groupMemberId) { mr in
+                let mem = mr.groupMember
+                let userMember = mem.groupMemberId == groupInfo.membership.groupMemberId
+                Button {
+                    if let member = m.getGroupMember(mem.groupMemberId) {
+                        selectedMember = member
+                    } else {
+                        let member = GMember.init(mem)
+                        m.groupMembers.append(member)
+                        selectedMember = member
+                    }
+                } label: {
+                    HStack {
+                        Text(mem.displayName)
+                        if let img = cropImage(mem.image) {
+                            Image(uiImage: img)
+                        } else {
+                            Image(systemName: "person.crop.circle")
+                        }
+                    }
+                }
+                .disabled(userMember)
+            }
+        }
+    }
+        
+    private func cropImage(_ img: String?) -> UIImage? {
+        return if let originalImage = imageFromBase64(img) {
+            maskToCustomShape(originalImage, size: 30, radius: radius)
+        } else {
+            nil
+        }
+    }
+
+    private func loadChatItemReaction() async {
+        do {
+            let memberReactions = try await apiGetReactionMembers(
+                groupId: groupInfo.groupId,
+                itemId: itemId,
+                reaction: reactionCount.reaction
+            )
+            await MainActor.run {
+                self.memberReactions = memberReactions
+            }
+        } catch let error {
+            logger.error("apiGetReactionMembers error: \(responseError(error))")
+        }
+    }
+}
+
+func maskToCustomShape(_ image: UIImage, size: CGFloat, radius: CGFloat) -> UIImage {
+    let path = Path { path in
+        if radius >= 50 {
+            path.addEllipse(in: CGRect(x: 0, y: 0, width: size, height: size))
+        } else if radius <= 0 {
+            path.addRect(CGRect(x: 0, y: 0, width: size, height: size))
+        } else {
+            let cornerRadius = size * CGFloat(radius) / 100
+            path.addRoundedRect(
+                in: CGRect(x: 0, y: 0, width: size, height: size),
+                cornerSize: CGSize(width: cornerRadius, height: cornerRadius),
+                style: .continuous
+            )
+        }
+    }
+
+    return UIGraphicsImageRenderer(size: CGSize(width: size, height: size)).image { context in
+        context.cgContext.addPath(path.cgPath)
+        context.cgContext.clip()
+        let scale = size / max(image.size.width, image.size.height)
+        let imageSize = CGSize(width: image.size.width * scale, height: image.size.height * scale)
+        let imageOrigin = CGPoint(
+            x: (size - imageSize.width) / 2,
+            y: (size - imageSize.height) / 2
+        )
+        image.draw(in: CGRect(origin: imageOrigin, size: imageSize))
+    }
+}
+
 struct ToggleNtfsButton: View {
    @ObservedObject var chat: Chat

@@ -49,6 +49,7 @@ public enum ChatCommand {
    case apiDeleteChatItem(type: ChatType, id: Int64, itemIds: [Int64], mode: CIDeleteMode)
    case apiDeleteMemberChatItem(groupId: Int64, itemIds: [Int64])
    case apiChatItemReaction(type: ChatType, id: Int64, itemId: Int64, add: Bool, reaction: MsgReaction)
+    case apiGetReactionMembers(userId: Int64, groupId: Int64, itemId: Int64, reaction: MsgReaction)
    case apiPlanForwardChatItems(toChatType: ChatType, toChatId: Int64, itemIds: [Int64])
    case apiForwardChatItems(toChatType: ChatType, toChatId: Int64, fromChatType: ChatType, fromChatId: Int64, itemIds: [Int64], ttl: Int?)
    case apiGetNtfToken
@@ -212,6 +213,7 @@ public enum ChatCommand {
            case let .apiDeleteChatItem(type, id, itemIds, mode): return "/_delete item \(ref(type, id)) \(itemIds.map({ "\($0)" }).joined(separator: ",")) \(mode.rawValue)"
            case let .apiDeleteMemberChatItem(groupId, itemIds): return "/_delete member item #\(groupId) \(itemIds.map({ "\($0)" }).joined(separator: ","))"
            case let .apiChatItemReaction(type, id, itemId, add, reaction): return "/_reaction \(ref(type, id)) \(itemId) \(onOff(add)) \(encodeJSON(reaction))"
+            case let .apiGetReactionMembers(userId, groupId, itemId, reaction): return "/_reaction members \(userId) #\(groupId) \(itemId) \(encodeJSON(reaction))"
            case let .apiPlanForwardChatItems(type, id, itemIds): return "/_forward plan \(ref(type, id)) \(itemIds.map({ "\($0)" }).joined(separator: ","))"
            case let .apiForwardChatItems(toChatType, toChatId, fromChatType, fromChatId, itemIds, ttl):
                let ttlStr = ttl != nil ? "\(ttl!)" : "default"
@@ -375,6 +377,7 @@ public enum ChatCommand {
            case .apiConnectContactViaAddress: return "apiConnectContactViaAddress"
            case .apiDeleteMemberChatItem: return "apiDeleteMemberChatItem"
            case .apiChatItemReaction: return "apiChatItemReaction"
+            case .apiGetReactionMembers: return "apiGetReactionMembers"
            case .apiPlanForwardChatItems: return "apiPlanForwardChatItems"
            case .apiForwardChatItems: return "apiForwardChatItems"
            case .apiGetNtfToken: return "apiGetNtfToken"
@@ -629,6 +632,7 @@ public enum ChatResponse: Decodable, Error {
    case chatItemUpdated(user: UserRef, chatItem: AChatItem)
    case chatItemNotChanged(user: UserRef, chatItem: AChatItem)
    case chatItemReaction(user: UserRef, added: Bool, reaction: ACIReaction)
+    case reactionMembers(user: UserRef, memberReactions: [MemberReaction])
    case chatItemsDeleted(user: UserRef, chatItemDeletions: [ChatItemDeletion], byUser: Bool)
    case contactsList(user: UserRef, contacts: [Contact])
    // group events
@@ -805,6 +809,7 @@ public enum ChatResponse: Decodable, Error {
            case .chatItemUpdated: return "chatItemUpdated"
            case .chatItemNotChanged: return "chatItemNotChanged"
            case .chatItemReaction: return "chatItemReaction"
+            case .reactionMembers: return "reactionMembers"
            case .chatItemsDeleted: return "chatItemsDeleted"
            case .contactsList: return "contactsList"
            case .groupCreated: return "groupCreated"
@@ -983,6 +988,7 @@ public enum ChatResponse: Decodable, Error {
            case let .chatItemUpdated(u, chatItem): return withUser(u, String(describing: chatItem))
            case let .chatItemNotChanged(u, chatItem): return withUser(u, String(describing: chatItem))
            case let .chatItemReaction(u, added, reaction): return withUser(u, "added: \(added)\n\(String(describing: reaction))")
+            case let .reactionMembers(u, reaction): return withUser(u, "memberReactions: \(String(describing: reaction))")
            case let .chatItemsDeleted(u, items, byUser):
                let itemsString = items.map { item in
                    "deletedChatItem:\n\(String(describing: item.deletedChatItem))\ntoChatItem:\n\(String(describing: item.toChatItem))" }.joined(separator: "\n")
@@ -2311,6 +2311,11 @@ public struct ACIReaction: Decodable, Hashable {
    public var chatReaction: CIReaction
 }

+public struct MemberReaction: Decodable, Hashable {
+    public var groupMember: GroupMember
+    public var reactionTs: Date
+}
+
 public struct CIReaction: Decodable, Hashable {
    public var chatDir: CIDirection
    public var chatItem: ChatItem
@@ -138,7 +138,7 @@ private func reduceSize(_ image: UIImage, ratio: CGFloat, hasAlpha: Bool) -> UII
    return resizeImage(image, newBounds: bounds, drawIn: bounds, hasAlpha: hasAlpha)
 }

-private func resizeImage(_ image: UIImage, newBounds: CGRect, drawIn: CGRect, hasAlpha: Bool) -> UIImage {
+public func resizeImage(_ image: UIImage, newBounds: CGRect, drawIn: CGRect, hasAlpha: Bool) -> UIImage {
    let format = UIGraphicsImageRendererFormat()
    format.scale = 1.0
    format.opaque = !hasAlpha
@@ -1962,6 +1962,12 @@ class ACIReaction(
  val chatReaction: CIReaction
 )

+@Serializable
+data class MemberReaction(
+  val groupMember: GroupMember,
+  val reactionTs: Instant
+)
+
@Serializable
 class CIReaction(
  val chatDir: CIDirection,
@@ -951,6 +951,14 @@ object ChatController {
    return null
  }

+  suspend fun apiGetReactionMembers(rh: Long?, groupId: Long, itemId: Long, reaction: MsgReaction): List<MemberReaction>? {
+    val userId = currentUserId("apiGetReactionMembers")
+    val r = sendCmd(rh, CC.ApiGetReactionMembers(userId, groupId, itemId, reaction))
+    if (r is CR.ReactionMembers) return r.memberReactions
+    Log.e(TAG, "apiGetReactionMembers bad response: ${r.responseType} ${r.details}")
+    return null
+  }
+
  suspend fun apiDeleteChatItems(rh: Long?, type: ChatType, id: Long, itemIds: List<Long>, mode: CIDeleteMode): List<ChatItemDeletion>? {
    val r = sendCmd(rh, CC.ApiDeleteChatItem(type, id, itemIds, mode))
    if (r is CR.ChatItemsDeleted) return r.chatItemDeletions
@@ -3092,6 +3100,7 @@ sealed class CC {
  class ApiDeleteChatItem(val type: ChatType, val id: Long, val itemIds: List<Long>, val mode: CIDeleteMode): CC()
  class ApiDeleteMemberChatItem(val groupId: Long, val itemIds: List<Long>): CC()
  class ApiChatItemReaction(val type: ChatType, val id: Long, val itemId: Long, val add: Boolean, val reaction: MsgReaction): CC()
+  class ApiGetReactionMembers(val userId: Long, val groupId: Long, val itemId: Long, val reaction: MsgReaction): CC()
  class ApiPlanForwardChatItems(val fromChatType: ChatType, val fromChatId: Long, val chatItemIds: List<Long>): CC()
  class ApiForwardChatItems(val toChatType: ChatType, val toChatId: Long, val fromChatType: ChatType, val fromChatId: Long, val itemIds: List<Long>, val ttl: Int?): CC()
  class ApiNewGroup(val userId: Long, val incognito: Boolean, val groupProfile: GroupProfile): CC()
@@ -3253,6 +3262,7 @@ sealed class CC {
    is ApiDeleteChatItem -> "/_delete item ${chatRef(type, id)} ${itemIds.joinToString(",")} ${mode.deleteMode}"
    is ApiDeleteMemberChatItem -> "/_delete member item #$groupId ${itemIds.joinToString(",")}"
    is ApiChatItemReaction -> "/_reaction ${chatRef(type, id)} $itemId ${onOff(add)} ${json.encodeToString(reaction)}"
+    is ApiGetReactionMembers -> "/_reaction members $userId #$groupId $itemId ${json.encodeToString(reaction)}"
    is ApiForwardChatItems -> {
      val ttlStr = if (ttl != null) "$ttl" else "default"
      "/_forward ${chatRef(toChatType, toChatId)} ${chatRef(fromChatType, fromChatId)} ${itemIds.joinToString(",")} ttl=${ttlStr}"
@@ -3409,6 +3419,7 @@ sealed class CC {
    is ApiDeleteChatItem -> "apiDeleteChatItem"
    is ApiDeleteMemberChatItem -> "apiDeleteMemberChatItem"
    is ApiChatItemReaction -> "apiChatItemReaction"
+    is ApiGetReactionMembers -> "apiGetReactionMembers"
    is ApiForwardChatItems -> "apiForwardChatItems"
    is ApiPlanForwardChatItems -> "apiPlanForwardChatItems"
    is ApiNewGroup -> "apiNewGroup"
@@ -5429,6 +5440,7 @@ sealed class CR {
  @Serializable @SerialName("chatItemUpdated") class ChatItemUpdated(val user: UserRef, val chatItem: AChatItem): CR()
  @Serializable @SerialName("chatItemNotChanged") class ChatItemNotChanged(val user: UserRef, val chatItem: AChatItem): CR()
  @Serializable @SerialName("chatItemReaction") class ChatItemReaction(val user: UserRef, val added: Boolean, val reaction: ACIReaction): CR()
+  @Serializable @SerialName("reactionMembers") class ReactionMembers(val user: UserRef, val memberReactions: List<MemberReaction>): CR()
  @Serializable @SerialName("chatItemsDeleted") class ChatItemsDeleted(val user: UserRef, val chatItemDeletions: List<ChatItemDeletion>, val byUser: Boolean): CR()
  @Serializable @SerialName("forwardPlan") class ForwardPlan(val user: UserRef, val itemsCount: Int, val chatItemIds: List<Long>, val forwardConfirmation: ForwardConfirmation? = null): CR()
  // group events
@@ -5610,6 +5622,7 @@ sealed class CR {
    is ChatItemUpdated -> "chatItemUpdated"
    is ChatItemNotChanged -> "chatItemNotChanged"
    is ChatItemReaction -> "chatItemReaction"
+    is ReactionMembers -> "reactionMembers"
    is ChatItemsDeleted -> "chatItemsDeleted"
    is ForwardPlan -> "forwardPlan"
    is GroupCreated -> "groupCreated"
@@ -5783,6 +5796,7 @@ sealed class CR {
    is ChatItemUpdated -> withUser(user, json.encodeToString(chatItem))
    is ChatItemNotChanged -> withUser(user, json.encodeToString(chatItem))
    is ChatItemReaction -> withUser(user, "added: $added\n${json.encodeToString(reaction)}")
+    is ReactionMembers -> withUser(user, "memberReactions: ${json.encodeToString(memberReactions)}")
    is ChatItemsDeleted -> withUser(user, "${chatItemDeletions.map { (deletedChatItem, toChatItem) -> "deletedChatItem: ${json.encodeToString(deletedChatItem)}\ntoChatItem: ${json.encodeToString(toChatItem)}" }} \nbyUser: $byUser")
    is ForwardPlan -> withUser(user, "itemsCount: $itemsCount\nchatItemIds: ${json.encodeToString(chatItemIds)}\nforwardConfirmation: ${json.encodeToString(forwardConfirmation)}")
    is GroupCreated -> withUser(user, json.encodeToString(groupInfo))
@@ -1062,7 +1062,7 @@ fun BoxScope.ChatItemsList(
                  highlightedItems.value = setOf()
                }
            }
-            ChatItemView(remoteHostId, chatInfo, cItem, composeState, provider, useLinkPreviews = useLinkPreviews, linkMode = linkMode, revealed = revealed, highlighted = highlighted, range = range, fillMaxWidth = fillMaxWidth, selectedChatItems = selectedChatItems, selectChatItem = { selectUnselectChatItem(true, cItem, revealed, selectedChatItems) }, deleteMessage = deleteMessage, deleteMessages = deleteMessages, receiveFile = receiveFile, cancelFile = cancelFile, joinGroup = joinGroup, acceptCall = acceptCall, acceptFeature = acceptFeature, openDirectChat = openDirectChat, forwardItem = forwardItem, updateContactStats = updateContactStats, updateMemberStats = updateMemberStats, syncContactConnection = syncContactConnection, syncMemberConnection = syncMemberConnection, findModelChat = findModelChat, findModelMember = findModelMember, scrollToItem = scrollToItem, scrollToQuotedItemFromItem = scrollToQuotedItemFromItem, setReaction = setReaction, showItemDetails = showItemDetails, reveal = reveal, developerTools = developerTools, showViaProxy = showViaProxy, itemSeparation = itemSeparation, showTimestamp = itemSeparation.timestamp)
+            ChatItemView(remoteHostId, chatInfo, cItem, composeState, provider, useLinkPreviews = useLinkPreviews, linkMode = linkMode, revealed = revealed, highlighted = highlighted, range = range, fillMaxWidth = fillMaxWidth, selectedChatItems = selectedChatItems, selectChatItem = { selectUnselectChatItem(true, cItem, revealed, selectedChatItems) }, deleteMessage = deleteMessage, deleteMessages = deleteMessages, receiveFile = receiveFile, cancelFile = cancelFile, joinGroup = joinGroup, acceptCall = acceptCall, acceptFeature = acceptFeature, openDirectChat = openDirectChat, forwardItem = forwardItem, updateContactStats = updateContactStats, updateMemberStats = updateMemberStats, syncContactConnection = syncContactConnection, syncMemberConnection = syncMemberConnection, findModelChat = findModelChat, findModelMember = findModelMember, scrollToItem = scrollToItem, scrollToQuotedItemFromItem = scrollToQuotedItemFromItem, setReaction = setReaction, showItemDetails = showItemDetails, reveal = reveal, showMemberInfo = showMemberInfo, developerTools = developerTools, showViaProxy = showViaProxy, itemSeparation = itemSeparation, showTimestamp = itemSeparation.timestamp)
          }
        }

@@ -20,6 +20,7 @@ import androidx.compose.ui.text.*
 import dev.icerock.moko.resources.compose.painterResource
 import dev.icerock.moko.resources.compose.stringResource
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.*
 import chat.simplex.common.model.*
 import chat.simplex.common.model.ChatModel.controller
@@ -28,6 +29,7 @@ import chat.simplex.common.ui.theme.*
 import chat.simplex.common.views.chat.*
 import chat.simplex.common.views.helpers.*
 import chat.simplex.res.MR
+import kotlinx.coroutines.launch
 import kotlinx.datetime.Clock
 import kotlin.math.*

@@ -84,6 +86,7 @@ fun ChatItemView(
  setReaction: (ChatInfo, ChatItem, Boolean, MsgReaction) -> Unit,
  showItemDetails: (ChatInfo, ChatItem) -> Unit,
  reveal: (Boolean) -> Unit,
+  showMemberInfo: (GroupInfo, GroupMember) -> Unit,
  developerTools: Boolean,
  showViaProxy: Boolean,
  showTimestamp: Boolean,
@@ -116,14 +119,54 @@ fun ChatItemView(
    fun ChatItemReactions() {
      Row(verticalAlignment = Alignment.CenterVertically, modifier = Modifier.chatItemOffset(cItem, itemSeparation.largeGap, inverted = true, revealed = true)) {
        cItem.reactions.forEach { r ->
+          val showReactionMenu = remember { mutableStateOf(false) }
+          val reactionMembers = remember { mutableStateOf(emptyList<MemberReaction>()) }
+
          var modifier = Modifier.padding(horizontal = 5.dp, vertical = 2.dp).clip(RoundedCornerShape(8.dp))
-          if (cInfo.featureEnabled(ChatFeature.Reactions) && (cItem.allowAddReaction || r.userReacted)) {
-            modifier = modifier.clickable {
-              setReaction(cInfo, cItem, !r.userReacted, r.reaction)
-            }
+          if (cInfo.featureEnabled(ChatFeature.Reactions)) {
+            modifier = modifier
+              .combinedClickable(
+                onClick = {
+                  if (cItem.allowAddReaction || r.userReacted) {
+                    setReaction(cInfo, cItem, !r.userReacted, r.reaction)
+                  }
+                },
+                onLongClick = {
+                  if (cInfo is ChatInfo.Group) {
+                    withBGApi {
+                      try {
+                        val members = controller.apiGetReactionMembers(rhId, cInfo.groupInfo.groupId, cItem.id, r.reaction)
+                        if (members != null) {
+                          showReactionMenu.value = true
+                          reactionMembers.value = members
+                        }
+                      } catch (e: Exception) {
+                        Log.d(TAG, "hatItemView ChatItemReactions onLongClick: unexpected exception: ${e.stackTraceToString()}")
+                      }
+                    }
+                  }
+                }
+              )
          }
          Row(modifier.padding(2.dp), verticalAlignment = Alignment.CenterVertically) {
            ReactionIcon(r.reaction.text, fontSize = 12.sp)
+            DefaultDropdownMenu(showMenu = showReactionMenu) {
+              reactionMembers.value.forEach { m ->
+                ItemAction(
+                  text = m.groupMember.displayName,
+                  composable = { ProfileImage(44.dp, m.groupMember.image) },
+                  onClick = {
+                    if (cInfo is ChatInfo.Group && cInfo.groupInfo.membership.groupMemberId != m.groupMember.groupMemberId) {
+                      showMemberInfo(cInfo.groupInfo, m.groupMember)
+                      showReactionMenu.value = false
+                    } else {
+                      showReactionMenu.value = false
+                    }
+                  },
+                  lineLimit = 1
+                )
+              }
+            }
            if (r.totalReacted > 1) {
              Spacer(Modifier.width(4.dp))
              Text(
@@ -781,6 +824,34 @@ fun ItemAction(text: String, icon: Painter, color: Color = Color.Unspecified, on
  }
 }

+@Composable
+fun ItemAction(
+  text: String,
+  composable: @Composable () -> Unit,
+  color: Color = Color.Unspecified,
+  onClick: () -> Unit,
+  lineLimit: Int = Int.MAX_VALUE
+) {
+  val finalColor = if (color == Color.Unspecified) {
+    MenuTextColor
+  } else color
+  DropdownMenuItem(onClick, contentPadding = PaddingValues(horizontal = DEFAULT_PADDING * 1.5f)) {
+    Row(verticalAlignment = Alignment.CenterVertically) {
+      Text(
+        text,
+        modifier = Modifier
+          .fillMaxWidth()
+          .weight(1F)
+          .padding(end = 15.dp),
+        color = finalColor,
+        maxLines = lineLimit,
+        overflow = TextOverflow.Ellipsis
+      )
+      composable()
+    }
+  }
+}
+
@Composable
 fun ItemAction(text: String, icon: ImageVector, onClick: () -> Unit, color: Color = Color.Unspecified) {
  val finalColor = if (color == Color.Unspecified) {
@@ -1101,6 +1172,7 @@ fun PreviewChatItemView(
    setReaction = { _, _, _, _ -> },
    showItemDetails = { _, _ -> },
    reveal = {},
+    showMemberInfo = { _, _ ->},
    developerTools = false,
    showViaProxy = false,
    showTimestamp = true,
@@ -1145,6 +1217,7 @@ fun PreviewChatItemViewDeletedContent() {
      setReaction = { _, _, _, _ -> },
      showItemDetails = { _, _ -> },
      reveal = {},
+      showMemberInfo = { _, _ ->},
      developerTools = false,
      showViaProxy = false,
      preview = true,
@@ -316,7 +316,7 @@ newChatController
    randomPresetServers <- chooseRandomServers presetServers'
    let rndSrvs = L.toList randomPresetServers
        operatorWithId (i, op) = (\o -> o {operatorId = DBEntityId i}) <$> pOperator op
-        opDomains = operatorDomains $ mapMaybe operatorWithId $ zip [1..] rndSrvs
+        opDomains = operatorDomains $ mapMaybe operatorWithId $ zip [1 ..] rndSrvs
    agentSMP <- randomServerCfgs "agent SMP servers" SPSMP opDomains rndSrvs
    agentXFTP <- randomServerCfgs "agent XFTP servers" SPXFTP opDomains rndSrvs
    let randomAgentServers = RandomAgentServers {smpServers = agentSMP, xftpServers = agentXFTP}
@@ -1078,6 +1078,11 @@ processChatCommand' vr = \case
          throwChatError (CECommandError $ "reaction already " <> if add then "added" else "removed")
        when (add && length rs >= maxMsgReactions) $
          throwChatError (CECommandError "too many reactions")
+  APIGetReactionMembers userId groupId itemId reaction -> withUserId userId $ \user -> do
+    memberReactions <- withStore $ \db -> do
+      CChatItem _ ChatItem {meta = CIMeta {itemSharedMsgId = Just itemSharedMId}} <- getGroupChatItem db user groupId itemId
+      liftIO $ getReactionMembers db vr user groupId itemSharedMId reaction
+    pure $ CRReactionMembers user memberReactions
  APIPlanForwardChatItems (ChatRef fromCType fromChatId) itemIds -> withUser $ \user -> case fromCType of
    CTDirect -> planForward user . snd =<< getCommandDirectChatItems user fromChatId itemIds
    CTGroup -> planForward user . snd =<< getCommandGroupChatItems user fromChatId itemIds
@@ -1631,7 +1636,7 @@ processChatCommand' vr = \case
      liftIO $ fmap (opsConds,) . mapM (getServers db as ops' opDomains) =<< getUsers db
    lift $ withAgent' $ \a -> forM_ srvs $ \(auId, (smp', xftp')) -> do
      setProtocolServers a auId smp'
-      setProtocolServers a auId xftp'      
+      setProtocolServers a auId xftp'
    pure $ CRServerOperatorConditions opsConds
    where
      getServers :: DB.Connection -> RandomAgentServers -> [Maybe ServerOperator] -> [(Text, ServerOperator)] -> User -> IO (UserId, (NonEmpty (ServerCfg 'PSMP), NonEmpty (ServerCfg 'PXFTP)))
@@ -1940,7 +1945,7 @@ processChatCommand' vr = \case
      canKeepLink (CRInvitationUri crData _) newUser = do
        let ConnReqUriData {crSmpQueues = q :| _} = crData
            SMPQueueUri {queueAddress = SMPQueueAddress {smpServer}} = q
-        newUserServers <- 
+        newUserServers <-
          map protoServer' . L.filter (\ServerCfg {enabled} -> enabled)
            <$> getKnownAgentServers SPSMP newUser
        pure $ smpServer `elem` newUserServers
@@ -3428,7 +3433,7 @@ processChatCommand' vr = \case
      msgInfo <- withFastStore' (`getLastRcvMsgInfo` connId)
      CRQueueInfo user msgInfo <$> withAgent (`getConnectionQueueInfo` acId)

-protocolServers :: UserProtocol p => SProtocolType p -> ([Maybe ServerOperator], [UserServer 'PSMP],  [UserServer 'PXFTP]) -> ([Maybe ServerOperator], [UserServer 'PSMP],  [UserServer 'PXFTP])
+protocolServers :: UserProtocol p => SProtocolType p -> ([Maybe ServerOperator], [UserServer 'PSMP], [UserServer 'PXFTP]) -> ([Maybe ServerOperator], [UserServer 'PSMP], [UserServer 'PXFTP])
 protocolServers p (operators, smpServers, xftpServers) = case p of
  SPSMP -> (operators, smpServers, [])
  SPXFTP -> (operators, [], xftpServers)
@@ -8267,6 +8272,7 @@ chatCommandP =
      "/_delete item " *> (APIDeleteChatItem <$> chatRefP <*> _strP <* A.space <*> ciDeleteMode),
      "/_delete member item #" *> (APIDeleteMemberChatItem <$> A.decimal <*> _strP),
      "/_reaction " *> (APIChatItemReaction <$> chatRefP <* A.space <*> A.decimal <* A.space <*> onOffP <* A.space <*> jsonP),
+      "/_reaction members " *> (APIGetReactionMembers <$> A.decimal <* " #" <*> A.decimal <* A.space <*> A.decimal <* A.space <*> jsonP),
      "/_forward plan " *> (APIPlanForwardChatItems <$> chatRefP <*> _strP),
      "/_forward " *> (APIForwardChatItems <$> chatRefP <* A.space <*> chatRefP <*> _strP <*> sendMessageTTLP),
      "/_read user " *> (APIUserRead <$> A.decimal),
@@ -304,6 +304,7 @@ data ChatCommand
  | APIDeleteChatItem ChatRef (NonEmpty ChatItemId) CIDeleteMode
  | APIDeleteMemberChatItem GroupId (NonEmpty ChatItemId)
  | APIChatItemReaction {chatRef :: ChatRef, chatItemId :: ChatItemId, add :: Bool, reaction :: MsgReaction}
+  | APIGetReactionMembers UserId GroupId ChatItemId MsgReaction
  | APIPlanForwardChatItems {fromChatRef :: ChatRef, chatItemIds :: NonEmpty ChatItemId}
  | APIForwardChatItems {toChatRef :: ChatRef, fromChatRef :: ChatRef, chatItemIds :: NonEmpty ChatItemId, ttl :: Maybe Int}
  | APIUserRead UserId
@@ -621,6 +622,7 @@ data ChatResponse
  | CRChatItemUpdated {user :: User, chatItem :: AChatItem}
  | CRChatItemNotChanged {user :: User, chatItem :: AChatItem}
  | CRChatItemReaction {user :: User, added :: Bool, reaction :: ACIReaction}
+  | CRReactionMembers {user :: User, memberReactions :: [MemberReaction]}
  | CRChatItemsDeleted {user :: User, chatItemDeletions :: [ChatItemDeletion], byUser :: Bool, timed :: Bool}
  | CRChatItemDeletedNotFound {user :: User, contact :: Contact, sharedMsgId :: SharedMsgId}
  | CRBroadcastSent {user :: User, msgContent :: MsgContent, successes :: Int, failures :: Int, timestamp :: UTCTime}
@@ -474,6 +474,12 @@ deriving instance Show ACIReaction

 data JSONCIReaction c d = JSONCIReaction {chatInfo :: ChatInfo c, chatReaction :: CIReaction c d}

+data MemberReaction = MemberReaction
+  { groupMember :: GroupMember,
+    reactionTs :: UTCTime
+  }
+  deriving (Show)
+
 type family ChatTypeQuotable (a :: ChatType) :: Constraint where
  ChatTypeQuotable 'CTDirect = ()
  ChatTypeQuotable 'CTGroup = ()
@@ -1465,6 +1471,8 @@ instance ToJSON ACIReaction where
  toJSON (ACIReaction _ _ cInfo reaction) = J.toJSON $ JSONCIReaction cInfo reaction
  toEncoding (ACIReaction _ _ cInfo reaction) = J.toEncoding $ JSONCIReaction cInfo reaction

+$(JQ.deriveJSON defaultJSON ''MemberReaction)
+
 $(JQ.deriveJSON defaultJSON ''MsgMetaJSON)

 msgMetaJson :: MsgMeta -> Text
@@ -76,6 +76,7 @@ module Simplex.Chat.Store.Messages
    getGroupCIReactions,
    getGroupReactions,
    setGroupReaction,
+    getReactionMembers,
    getChatItemIdsByAgentMsgId,
    getDirectChatItem,
    getDirectCIWithReactions,
@@ -2852,6 +2853,24 @@ setGroupReaction db GroupInfo {groupId} m itemMemberId itemSharedMId sent reacti
        |]
        (groupId, groupMemberId' m, itemSharedMId, itemMemberId, sent, reaction)

+getReactionMembers :: DB.Connection -> VersionRangeChat -> User -> GroupId -> SharedMsgId -> MsgReaction -> IO [MemberReaction]
+getReactionMembers db vr user groupId itemSharedMId reaction = do
+  reactions <-
+    DB.query
+      db
+      [sql|
+        SELECT group_member_id, reaction_ts
+        FROM chat_item_reactions
+        WHERE group_id = ? AND shared_msg_id = ? AND reaction = ?
+      |]
+      (groupId, itemSharedMId, reaction)
+  rights <$> mapM (runExceptT . toMemberReaction) reactions
+  where
+    toMemberReaction :: (GroupMemberId, UTCTime) -> ExceptT StoreError IO MemberReaction
+    toMemberReaction (groupMemberId, reactionTs) = do
+      groupMember <- getGroupMemberById db vr user groupMemberId
+      pure MemberReaction {groupMember, reactionTs}
+
 getTimedItems :: DB.Connection -> User -> UTCTime -> IO [((ChatRef, ChatItemId), UTCTime)]
 getTimedItems db User {userId} startTimedThreadCutoff =
  mapMaybe toCIRefDeleteAt
@@ -154,6 +154,7 @@ responseToView hu@(currentRH, user_) ChatConfig {logLevel, showReactions, showRe
      ttyUser u $ unmuted u chat deletedItem $ viewItemDelete chat deletedItem toItem byUser timed ts tz testView
    deletions' -> ttyUser u [sShow (length deletions') <> " messages deleted"]
  CRChatItemReaction u added (ACIReaction _ _ chat reaction) -> ttyUser u $ unmutedReaction u chat reaction $ viewItemReaction showReactions chat reaction added ts tz
+  CRReactionMembers u memberReactions -> ttyUser u $ viewReactionMembers memberReactions
  CRChatItemDeletedNotFound u Contact {localDisplayName = c} _ -> ttyUser u [ttyFrom $ c <> "> [deleted - original message not found]"]
  CRBroadcastSent u mc s f t -> ttyUser u $ viewSentBroadcast mc s f ts tz t
  CRMsgIntegrityError u mErr -> ttyUser u $ viewMsgIntegrityError mErr
@@ -847,6 +848,9 @@ viewItemReactions ChatItem {reactions} = ["      " <> viewReactions reactions |
    viewReaction CIReactionCount {reaction = MREmoji (MREmojiChar emoji), userReacted, totalReacted} =
      plain [emoji, ' '] <> (if userReacted then styled Italic else plain) (show totalReacted)

+viewReactionMembers :: [MemberReaction] -> [StyledString]
+viewReactionMembers memberReactions = [sShow (length memberReactions) <> " member(s) reacted"]
+
 directQuote :: forall d'. MsgDirectionI d' => CIDirection 'CTDirect d' -> CIQuote 'CTDirect -> [StyledString]
 directQuote _ CIQuote {content = qmc, chatDir = quoteDir} =
  quoteText qmc $ if toMsgDirection (msgDirection @d') == quoteMsgDirection quoteDir then ">>" else ">"
@@ -1226,7 +1230,7 @@ viewUserServers UserOperatorServers {operator, smpServers, xftpServers} =
    viewServers p srvs
      | maybe True (\ServerOperator {enabled} -> enabled) operator =
          ["  " <> protocolName p <> " servers" <> maybe "" ((" " <>) . viewRoles) operator]
-            <> map (plain . ("    " <> ) . viewServer) srvs
+            <> map (plain . ("    " <>) . viewServer) srvs
      | otherwise = []
      where
        viewServer UserServer {server, preset, tested, enabled} = safeDecodeUtf8 (strEncode server) <> serverInfo
@@ -1279,7 +1283,7 @@ viewOperator op@ServerOperator {tradeName, legalName, serverDomains, conditionsA
  viewOpIdTag op
    <> tradeName
    <> maybe "" parens legalName
-    <> (", domains: "  <> T.intercalate ", " serverDomains)
+    <> (", domains: " <> T.intercalate ", " serverDomains)
    <> (", servers: " <> viewOpEnabled op)
    <> (", conditions: " <> viewOpConditions conditionsAcceptance)

@@ -3738,6 +3738,9 @@ testSetGroupMessageReactions =
      cath ##> "/tail #team 1"
      cath <# "#team alice> hi"
      cath <## "      👍 2 🚀 1"
+      itemId' <- lastItemId alice
+      alice ##> ("/_reaction members 1 #1 " <> itemId' <> " {\"type\": \"emoji\", \"emoji\": \"👍\"}")
+      alice <## "2 member(s) reacted"
      bob ##> "-1 #team hi"
      bob <## "removed 👍"
      alice <# "#team bob> > alice hi"