@bcc-code/vue-bcc-chat-ui 3.40.2 → 4.0.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": "4.0.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 },
@@ -32,6 +34,10 @@ const componentId = ref(
   `component-${Math.random().toString(36).substring(2, 11)}`
 );
 const chatGroup = ref<Group>();
+const chatGroupNotFound = ref(false);
+
+const emit = defineEmits(['groupMembersFetched']);
+const groupMembers = ref<ParticipantInfo[]>();
 
 const chatInstance: Ref<ChatInstance> = ref({
   componentId: componentId,
@@ -48,30 +54,39 @@ const chatInstance: Ref<ChatInstance> = ref({
 provide("chatInstance", chatInstance);
 
 const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(({ message, status }) => {
-  if (status === MessageStatus.inprogress) {
-    let metadata: any = (message as any)?.getMetadata() || {};
-    let scope: string | undefined = chatGroup.value?.getScope();
+  if (status !== MessageStatus.inprogress) {
+    return
+  }
 
-    if (chatInstance.value.replyToMessage) {
-      metadata.replyToMessageId = chatInstance.value.replyToMessage?.getId();
-      chatInstance.value.replyToMessage = null;
-    }
+  let metadata: any = (message as any)?.getMetadata() || {};
+  let scope: string | undefined = chatGroup.value?.getScope();
 
-    if (props.senderDisplayName && scope == "moderator") {
-      metadata.senderDisplayName = props.senderDisplayName
-    }
+  if (chatInstance.value.replyToMessage) {
+    metadata.replyToMessageId = chatInstance.value.replyToMessage?.getId();
+    chatInstance.value.replyToMessage = null;
+  }
 
-    (message as any)?.setMetadata(metadata);
+  if (props.senderDisplayName && scope == "moderator") {
+    metadata.senderDisplayName = props.senderDisplayName
   }
+
+  const muid = window.crypto.randomUUID();
+  message.setMuid(muid);
+  const tags = (message as any).getTags() ?? [];
+  tags.push(muid);
+  (message as any).setTags(tags);
+  (message as any).setMetadata(metadata);
 });
 
-watch([loggedIn, () => props.chatUid, chat.initialized, () => props.groupMessageGetter], async ([_loggedIn, _chatUid, _initialized, _groupMessageGetter]) => {
+watch([loggedIn, chat.onlineStatus, () => props.chatUid, chat.initialized, () => props.groupMessageGetter], async ([_loggedIn, _online, _chatUid, _initialized, _groupMessageGetter]) => {
   if (_loggedIn && _chatUid && _initialized) {
+    chatGroupNotFound.value = false;
     const [_, group] = await Promise.all([
       connect(componentId.value),
       chat.getGroup(props.chatUid)
     ])
     chatGroup.value = group ?? undefined;
+    chatGroupNotFound.value = group === undefined;
 
     if (_groupMessageGetter && !chatGroup.value?.getHasJoined()) {
       chat.updateGetGroupMessages(_groupMessageGetter)
@@ -86,6 +101,8 @@ watch([loggedIn, () => props.chatUid, chat.initialized, () => props.groupMessage
           }
         }
       ])
+
+      getGroupMembersInfo(_chatUid).then((participants) => groupMembers.value = participants);
     }
 
     await chat.clearGroupChatCount(props.chatUid);
@@ -94,7 +111,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 +138,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 +172,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,14 +216,20 @@ 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>
+    <div v-else-if="chat.onlineStatus.value === 'offline'" class="bcc-chat-message-list-offline">
+      <span>Waiting for network...</span>
+    </div>
     <div v-else-if="!chat.connected.value" class="bcc-chat-message-list-offline">
       <span>Connecting...</span>
     </div>
+    <div v-else-if="chatGroupNotFound" class="bcc-chat-message-list-offline">
+      <span>Chat not found...</span>
+    </div>
     <div v-else-if="!chatGroup" class="bcc-chat-message-list-offline">
       <span>Loading chat...</span>
     </div>
@@ -165,8 +243,6 @@ function closeScheduledMessage() {
 body {
   background: #fff;
   color: #000;
-
-  
 }
 
 :host.dark body {
@@ -230,8 +306,11 @@ accent900: text in avatar
   --cc__link-color: #cfeac8;
 }
 
+
+
 .bcc-chat-message-list {
   height: 100%;
+
   /* 1. Wrapper for Messages component */
   .cc-messages-wrapper {
 
@@ -284,26 +363,35 @@ accent900: text in avatar
     }
   }
 
+
   /* 2. Message for Messages Composer when offline */
   .bcc-chat-message-composer-offline {
     position: relative;
-    top: -96px;
-    height: 96px;
+    bottom: 38px;
+    text-align: center;
+    //height: 96px;
     width: 100%;
-    backdrop-filter: blur(4px);
+    //backdrop-filter: blur(4px);
     color: var(--cc__text-color);
-    font: 700 1rem sans-serif;
+    font: 500 11px sans-serif;
 
     /* 2.1 Text of Messages Composer offline view */
     span {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      border-radius: 8px 8px 0 0;
+      width: 150px;
+      display: inline;
+      padding: 5px;
+      background-color: #eee;
+      border-radius: 8px;
     }
   }
+
+  /* Hide send button when offline */
+  &.offline .messageinput__primaryactions,
+  &.offline .messageinput__auxiliaryactions,
+  &.offline .messageinput__secondaryactions {
+    opacity: 0.2;
+  }
+
 }
 
 .bcc-chat-message-list-offline {

package/src/components/BccChatMessages.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import chat from "../chat";
 import { Group } from "@cometchat/chat-sdk-javascript";
-import { inject, nextTick, onMounted, Ref, ref, watch, watchEffect } from 'vue';
+import { computed, inject, nextTick, onMounted, Ref, ref, watch, watchEffect } from 'vue';
 import { ChatInstance } from '../chat/types';
 import BccAttachmentBox from "./BccAttachmentBox.vue";
 import BccChatSendButton from "./BccChatSendButton.vue";
@@ -15,6 +15,8 @@ const props = defineProps({
     hideDeletedMessages: { type: Boolean, required: false, default: false }
 })
 
+const isOffline = computed(() => chat.onlineStatus.value === 'offline');
+
 const chatGroup = ref<Group>();
 
 const chatInstance = inject<Ref<ChatInstance>>("chatInstance");
@@ -185,16 +187,16 @@ function isParticipant(): boolean {
 </script>
 
 <template>
-    <div class="bcc-chat-message-list">
+    <div :class="'bcc-chat-message-list' + (isOffline ? ' offline' : '')">
         <CometChatMessages :hideMessageHeader="true" :disableSoundForMessages="true"
             :messageComposerConfiguration="messageComposerConfiguration"
             :messageListConfiguration="messageListConfiguration"
             :threadedMessagesConfiguration="threadedMessagesConfiguration"
-            :hideMessageComposer="isParticipant() && isChannel()" :hideDetails="true" :group="chatGroup" />
+            :hideMessageComposer="(isParticipant() && isChannel())" :hideDetails="true" :group="chatGroup" />
         <div v-if="chat.onlineStatus.value === 'offline' || !chat.connected.value"
             class="bcc-chat-message-composer-offline">
-            <span v-if="chat.onlineStatus.value === 'offline'">Waiting for network...</span>
-            <span v-else>Connecting...</span>
+            <span v-if="isOffline">Waiting for network...</span>
+            <span v-else>Connecting... </span>
         </div>
         <!-- <BccScheduledMessageModal v-if="showModal" @close="closeModal()" @send="scheduleMessage">
         </BccScheduledMessageModal>

package/src/components/BccChatSendButton.vue

@@ -4,6 +4,7 @@ import { SendIcon } from "@cometchat/chat-uikit-vue";
 import { sendMediaMessage } from "../chat/captionedAttachment";
 import { ChatInstance } from "../chat/types";
 import { getCurrentInstance, inject, onBeforeUnmount, onMounted, Ref } from "vue";
+import chat from "../chat";
 
 const sendButtonIconURL = SendIcon;
 const sendButtonStyle = {
@@ -21,6 +22,8 @@ const msgComposerData = vueInstance?.parent?.type?.name === "CometChatMessageCom
 const msgComposerProps = vueInstance?.parent?.type?.name === "CometChatMessageComposer" && vueInstance?.parent?.props;
 
 function sendMessage() {
+    debugger;
+    if (chat.onlineStatus.value === "offline") return;
     if (!msgComposerData) return false;
     if (!chatInstance?.value.captionedAttachment?.fileObject) return false;
     if (!msgComposerProps?.group && !msgComposerProps?.user) return false;
@@ -44,6 +47,8 @@ function sendMessage() {
 }
 
 function sendMessageOnEnter(textEnteredEvent: CustomEventInit) {
+    debugger;
+    if (chat.onlineStatus.value === "offline") return;
     if (!msgComposerData) return;
     msgComposerData.messageText = textEnteredEvent.detail.value;
     if (sendMessage()) {
@@ -66,7 +71,7 @@ if (chatInstance) {
     // Here we add an additional onKeyDown event on the input field that sends our image when pressing Enter if the input field **is empty**.
     // We need this in addition to hooking into the "cc-text-input-entered" event because that event isn't triggered if the input field is empty.
     const ccTextInput = msgComposerData.inputRef.querySelector(".messageinput-input");
-    ccTextInput.addEventListener("keydown", function(event: KeyboardEvent) {
+    ccTextInput.addEventListener("keydown", function (event: KeyboardEvent) {
         if (msgComposerData.messageText?.trim() == "" && event.keyCode === 13 && !event.shiftKey) sendMessage();
     });
 }
@@ -74,7 +79,8 @@ if (chatInstance) {
 </script>
 
 <template>
-    <div class="cc-messagecomposer-wrapper__sendbutton" ref="sendButton" :style="{ 'background': !msgComposerData || !msgComposerProps ? '#f00' : 'unset'}">
+    <div class="cc-messagecomposer-wrapper__sendbutton" ref="sendButton"
+        :style="{ 'background': !msgComposerData || !msgComposerProps ? '#f00' : 'unset' }">
         <cometchat-button :iconURL="sendButtonIconURL" :buttonStyle="sendButtonStyle"
             :hoverText="localize('SEND_MESSAGE')" @click=sendMessage() />
     </div>

package/src/components/BccScheduledMessages.vue

@@ -85,7 +85,7 @@ onUnmounted(() => {
             <div v-if="chat.onlineStatus.value === 'offline' || !chat.connected.value"
                 class="bcc-chat-message-composer-offline">
                 <span v-if="chat.onlineStatus.value === 'offline'">Waiting for network...</span>
-                <span v-else>Connecting...</span>
+                <span v-else>Connecting... </span>
             </div>
             <BccAlert class="absolute top-0 w-[97%] mx-2 mt-11" icon closeButton context="danger"
                 :open="chatInstance!.showAlert" @close="chatInstance!.showAlert = false">

package/dist/chat/token.d.ts

@@ -1,10 +0,0 @@
-interface ChatToken {
-    sub: string;
-    token: string;
-    time: number;
-    authToken: string;
-}
-export declare const retrieveCcToken: () => ChatToken | null;
-export declare const clearToken: () => Promise<void>;
-export declare const getToken: (authToken: string, chatApiBaseUrl: string) => Promise<string | null>;
-export {};