@bcc-code/vue-bcc-chat-ui 3.40.2 → 3.41.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "3.40.2",
+  "version": "3.41.0",
   "type": "module",
   "private": false,
   "files": [

package/src/components/BccChatMessageList.vue

@@ -8,16 +8,18 @@ import {
   provide,
   ref,
   watch,
+  watchEffect,
 } from "vue";
 import chat from "../chat";
 import { connect, disconnect } from "../chat/connection";
 import { loggedIn } from "../chat/login";
-import { Group } from "@cometchat/chat-sdk-javascript";
+import { CometChat, Group, GroupMember } from "@cometchat/chat-sdk-javascript";
 import { watchAndApplyStyle } from "../chat/styleFix";
-import { ChatInstance } from "../chat/types";
+import { ChatInstance, ParticipantInfo } from "../chat/types";
 import { CometChatMessageEvents, MessageStatus } from "@cometchat/uikit-resources";
 import BccChatMessages from "./BccChatMessages.vue";
 import BccScheduledMessages from "./BccScheduledMessages.vue";
+import { getGroupMembersInfo } from "../chat/data";
 const props = defineProps({
   chatUid: { type: String, required: true },
   senderDisplayName: { type: String, required: false },
@@ -33,6 +35,9 @@ const componentId = ref(
 );
 const chatGroup = ref<Group>();
 
+const emit = defineEmits(['groupMembersFetched']);
+const groupMembers = ref<ParticipantInfo[]>();
+
 const chatInstance: Ref<ChatInstance> = ref({
   componentId: componentId,
   replyToMessage: null,
@@ -86,6 +91,8 @@ watch([loggedIn, () => props.chatUid, chat.initialized, () => props.groupMessage
           }
         }
       ])
+
+      getGroupMembersInfo(_chatUid).then((participants) => groupMembers.value = participants);
     }
 
     await chat.clearGroupChatCount(props.chatUid);
@@ -94,7 +101,13 @@ watch([loggedIn, () => props.chatUid, chat.initialized, () => props.groupMessage
   }
 }, { immediate: true });
 
-
+watchEffect(() => {
+  if (groupMembers.value && groupMembers.value.length) {
+    emit('groupMembersFetched', groupMembers.value);
+  } else {
+    emit('groupMembersFetched', []);
+  }
+})
 
 onMounted(() => {
   watchAndApplyStyle(".bcc-chat-message-list-wrapper", [
@@ -115,6 +128,30 @@ onMounted(() => {
       shadowDomSelector: "cometchat-preview",
     }
   ]);
+
+  CometChat.addGroupListener("groupListener", new CometChat.GroupListener({
+    onGroupMemberScopeChanged: (_action: any, changedUser: GroupMember, newScope: any, _oldScope: any, _changedGroup: GroupMember) => {
+      handleGroupMemberChanges(changedUser, "update", newScope);
+    },
+    onGroupMemberKicked: (_action: any, changedUser: GroupMember, _Ye: any, _group: any) => {
+      handleGroupMemberChanges(changedUser, "remove");
+    },
+    onGroupMemberBanned: (_action: any, user: GroupMember, _Ye: any, _group: any) => {
+      handleGroupMemberChanges(user, "remove");
+    },
+    onGroupMemberUnbanned: (_action: any, user: GroupMember, _Ye: any, _group: any) => {
+      handleGroupMemberChanges(user, "add");
+    },
+    onMemberAddedToGroup: (_action: any, user: GroupMember, _Ye: any, _group: any) => {
+      handleGroupMemberChanges(user, "add");
+    },
+    onGroupMemberLeft: (_action: any, user: GroupMember, _group: any) => {
+      handleGroupMemberChanges(user, "remove");
+    },
+    onGroupMemberJoined: (_action: any, user: GroupMember, _group: any) => {
+      handleGroupMemberChanges(user, "add");
+    }
+  }))
 });
 
 onBeforeUnmount(() => {
@@ -125,6 +162,31 @@ onUnmounted(async () => {
   await disconnect(componentId.value);
 });
 
+function handleGroupMemberChanges(changedUser: GroupMember, action: string, newScope?: string) {
+  let participant: ParticipantInfo = {
+    uid: changedUser.getUid(),
+    displayName: changedUser.getName(),
+    avatar: changedUser.getAvatar(),
+    role: newScope ? newScope : CometChat.GROUP_MEMBER_SCOPE.PARTICIPANT
+  }
+
+  if (action === "add" && !existsInGroup(changedUser.getUid())) {
+    groupMembers.value?.push(participant)
+  }
+
+  if (action === "remove" && existsInGroup(changedUser.getUid())) {
+    groupMembers.value = groupMembers.value?.filter(participant => participant.uid !== changedUser.getUid());
+  }
+
+  if (action === "update" && existsInGroup(changedUser.getUid())) {
+    groupMembers.value = groupMembers.value?.map(p => p.uid === changedUser.getUid() ? { ...p, ...participant } : p);
+  }
+}
+
+function existsInGroup(uid: string): boolean {
+  return groupMembers.value?.some(p => p.uid === uid) ?? false;
+}
+
 function closeScheduledMessage() {
   chatInstance.value.captionedAttachment = null
   chatInstance.value.replyToMessage = null
@@ -144,8 +206,8 @@ function closeScheduledMessage() {
       <div>Connecting: {{chat.connecting.value}}</div>
       <div>CometChat: {{cometChatStatus}} <button @click="getCometChatStatus()">[refresh]</button></div>
     </div> -->
-    <BccChatMessages v-if="chatGroup && !chatInstance.showScheduledMessagesChat" :chatGroup="chatGroup" :hide-deleted-messages="props.hideDeletedMessages"
-      :chatUid="props.chatUid"></BccChatMessages>
+    <BccChatMessages v-if="chatGroup && !chatInstance.showScheduledMessagesChat" :chatGroup="chatGroup"
+      :hide-deleted-messages="props.hideDeletedMessages" :chatUid="props.chatUid"></BccChatMessages>
     <BccScheduledMessages v-else-if="chatGroup && chatInstance.showScheduledMessagesChat"
       class="bcc-scheduled-message-list" :chatGroup="chatInstance.scheduledMessageChat!"
       :originalChatUid="props.chatUid" @close="closeScheduledMessage()"></BccScheduledMessages>
@@ -165,8 +227,6 @@ function closeScheduledMessage() {
 body {
   background: #fff;
   color: #000;
-
-  
 }
 
 :host.dark body {
@@ -232,6 +292,7 @@ accent900: text in avatar
 
 .bcc-chat-message-list {
   height: 100%;
+
   /* 1. Wrapper for Messages component */
   .cc-messages-wrapper {