@bcc-code/vue-bcc-chat-ui 3.40.1 → 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.1",
+  "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,11 +227,11 @@ function closeScheduledMessage() {
 body {
   background: #fff;
   color: #000;
+}
 
-  @media (prefers-color-scheme: dark) {
-    background: #000;
-    color: #fff;
-  }
+:host.dark body {
+  background: #000;
+  color: #fff;
 }
 
 .bcc-chat-message-list-wrapper {
@@ -189,7 +251,6 @@ accent900: text in avatar
 */
 
 .bcc-chat-message-list {
-  height: 100%;
   --cc__primary: #cfeac8;
   --cc__primary150: #004e48;
   --cc__background: #f3faf7;
@@ -207,26 +268,30 @@ accent900: text in avatar
   --cc__accent900: #f3faf7;
   --cc__text-color: #000;
   --cc__link-color: #57639e;
+}
 
-  @media (prefers-color-scheme: dark) {
-    --cc__primary: #57639e;
-    --cc__primary150: #57639e;
-    --cc__background: hsl(230, 25%, 15%);
-    --cc__secondary: #111827;
-    --cc__accent: #6274ae;
-    --cc__accent50: rgba(98, 116, 174, 0.24);
-    --cc__accent100: linear-gradient(45deg, #05070b 0%, #0c111c 100%);
-    --cc__accent200: rgba(98, 116, 174, 0.35);
-    --cc__accent300: rgba(98, 116, 174, 0.44);
-    --cc__accent400: rgba(98, 116, 174, 0.53);
-    --cc__accent500: rgba(98, 116, 174, 0.66);
-    --cc__accent600: #758abc;
-    --cc__accent700: #6274ae;
-    --cc__accent800: rgba(98, 116, 174, 0.92);
-    --cc__accent900: #f3faf7;
-    --cc__text-color: #fff;
-    --cc__link-color: #cfeac8;
-  }
+:root.dark .bcc-chat-message-list {
+  --cc__primary: #57639e;
+  --cc__primary150: #57639e;
+  --cc__background: hsl(230, 25%, 15%);
+  --cc__secondary: #111827;
+  --cc__accent: #6274ae;
+  --cc__accent50: rgba(98, 116, 174, 0.24);
+  --cc__accent100: linear-gradient(45deg, #05070b 0%, #0c111c 100%);
+  --cc__accent200: rgba(98, 116, 174, 0.35);
+  --cc__accent300: rgba(98, 116, 174, 0.44);
+  --cc__accent400: rgba(98, 116, 174, 0.53);
+  --cc__accent500: rgba(98, 116, 174, 0.66);
+  --cc__accent600: #758abc;
+  --cc__accent700: #6274ae;
+  --cc__accent800: rgba(98, 116, 174, 0.92);
+  --cc__accent900: #f3faf7;
+  --cc__text-color: #fff;
+  --cc__link-color: #cfeac8;
+}
+
+.bcc-chat-message-list {
+  height: 100%;
 
   /* 1. Wrapper for Messages component */
   .cc-messages-wrapper {

package/src/components/BccScheduledMessageModal.vue

@@ -84,26 +84,26 @@ function scheduleMessage() {
     --cc__accent900: #f3faf7;
     --cc__text-color: #000;
     --cc__link-color: #57639e;
+}
 
-    @media (prefers-color-scheme: dark) {
-        --cc__primary: #57639e;
-        --cc__primary150: #57639e;
-        --cc__background: hsl(230, 25%, 15%);
-        --cc__secondary: #111827;
-        --cc__accent: #6274ae;
-        --cc__accent50: rgba(98, 116, 174, 0.24);
-        --cc__accent100: linear-gradient(45deg, #05070b 0%, #0c111c 100%);
-        --cc__accent200: rgba(98, 116, 174, 0.35);
-        --cc__accent300: rgba(98, 116, 174, 0.44);
-        --cc__accent400: rgba(98, 116, 174, 0.53);
-        --cc__accent500: rgba(98, 116, 174, 0.66);
-        --cc__accent600: #758abc;
-        --cc__accent700: #6274ae;
-        --cc__accent800: rgba(98, 116, 174, 0.92);
-        --cc__accent900: #f3faf7;
-        --cc__text-color: #fff;
-        --cc__link-color: #cfeac8;
-    }
+:root.dark {
+    --cc__primary: #57639e;
+    --cc__primary150: #57639e;
+    --cc__background: hsl(230, 25%, 15%);
+    --cc__secondary: #111827;
+    --cc__accent: #6274ae;
+    --cc__accent50: rgba(98, 116, 174, 0.24);
+    --cc__accent100: linear-gradient(45deg, #05070b 0%, #0c111c 100%);
+    --cc__accent200: rgba(98, 116, 174, 0.35);
+    --cc__accent300: rgba(98, 116, 174, 0.44);
+    --cc__accent400: rgba(98, 116, 174, 0.53);
+    --cc__accent500: rgba(98, 116, 174, 0.66);
+    --cc__accent600: #758abc;
+    --cc__accent700: #6274ae;
+    --cc__accent800: rgba(98, 116, 174, 0.92);
+    --cc__accent900: #f3faf7;
+    --cc__text-color: #fff;
+    --cc__link-color: #cfeac8;
 }
 
 .modal {

package/src/components/BccScheduledMessages.vue

@@ -74,7 +74,7 @@ onUnmounted(() => {
 <template>
     <div class="bcc-chat-message-list">
         <div class="title-bar">
-            <p class="chatName"> {{ localize("SCHEDULED_MESSAGES") }} </p>
+            <p class="title"> {{ localize("SCHEDULED_MESSAGES") }} </p>
             <CloseIcon @click="closeList()" class="closeIcon" />
         </div>
         <div v-if="chatGroup" class="bcc-chat-message-list scheduled-list">
@@ -99,25 +99,21 @@ onUnmounted(() => {
     </div>
 </template>
 
-<style>
+<style scoped>
 .title-bar {
     display: flex;
-    background: var(--cc__accent200, #111827);
-    min-height: 40px;
-    padding: 5px;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--cc__secondary, #111827);
+    padding: 0.4rem 0.6rem;
 
-    .chatName {
-        width: 92%;
-        font-size: large;
-        vertical-align: middle;
-        margin-top: 4px;
-        margin-left: 6px;
+
+    .title {
         color: var(--cc__text-color);
     }
 
     .closeIcon {
-        max-height: 35px;
-        width: 8%;
+        width: 1.2rem;
         cursor: pointer;
         color: var(--cc__text-color);
     }