@bcc-code/vue-bcc-chat-ui 3.41.0 → 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.41.0",
+  "version": "4.0.0",
   "type": "module",
   "private": false,
   "files": [

package/src/components/BccChatMessageList.vue

@@ -34,6 +34,7 @@ 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[]>();
@@ -53,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)
@@ -211,9 +221,15 @@ function closeScheduledMessage() {
     <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>
@@ -290,6 +306,8 @@ accent900: text in avatar
   --cc__link-color: #cfeac8;
 }
 
+
+
 .bcc-chat-message-list {
   height: 100%;
 
@@ -345,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 {};