@bcc-code/vue-bcc-chat-ui 2.3.0 → 3.0.0-alpha.10

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "2.3.0",
+  "version": "3.0.0-alpha.10",
   "type": "module",
   "private": false,
   "files": [
@@ -23,20 +23,20 @@
   },
   "devDependencies": {
     "@types/markdown-it": "^13.0.7",
-    "@types/node": "^20.11.25",
+    "@types/node": "^20.11.30",
     "@vitejs/plugin-vue": "^4.6.2",
     "path": "^0.12.7",
-    "sass": "^1.71.1",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.5",
+    "sass": "^1.72.0",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.6",
     "vite-plugin-dts": "^3.7.3",
     "vue": "^3.4.21"
   },
   "dependencies": {
-    "@cometchat/chat-sdk-javascript": "^4.0.3",
-    "@cometchat/chat-uikit-vue": "^4.2.1",
-    "@cometchat/uikit-resources": "^4.2.2",
-    "@cometchat/uikit-shared": "^4.2.2",
+    "@cometchat/chat-sdk-javascript": "^4.0.4",
+    "@cometchat/chat-uikit-vue": "^4.3.1",
+    "@cometchat/uikit-resources": "^4.3.1",
+    "@cometchat/uikit-shared": "^4.3.2",
     "jwt-decode": "^4.0.0",
     "markdown-it": "^14.1.0"
   },

package/src/components/BccChatMessageList.vue

@@ -5,6 +5,7 @@ import {
   onUnmounted,
   ref,
   watch,
+  watchEffect,
 } from "vue";
 import chat from "../chat";
 import { connect, disconnect } from "../chat/connection";
@@ -12,9 +13,11 @@ import { loggedIn } from "../chat/login";
 import { CometChatMessages } from "@cometchat/chat-uikit-vue";
 import { Group } from "@cometchat/chat-sdk-javascript";
 import { watchAndApplyStyle } from "../chat/styleFix";
+import { CometChat } from "@cometchat/chat-sdk-javascript";
 import {
   messageComposerConfiguration,
   messageListConfiguration,
+  threadedMessagesConfiguration
 } from "../chat/uiKit";
 
 const props = defineProps({
@@ -35,13 +38,41 @@ watch([loggedIn, ()=>props.chatUid, chat.initialized], async ([_loggedIn, _chatU
   }
 }, { immediate: true });
 
-watch(chat.onlineStatus, async () => {
-  await tryConnect(false);
+watch(chat.onlineStatus, () => {
+  tryConnect(false);
 });
 
+watch(chat.onlineMode, () => {
+  if (chat.onlineMode.value == 'online'){
+    tryConnect(true);
+  }
+});
+
+const showChat = ref(false);
+watchEffect(() => {
+  if (chatGroup && (chat.connected.value || chat.onlineStatus.value == 'offline')){
+    showChat.value = true;
+  } else {
+    // This line is a trade-off.
+    // With it, the entire chat will be hidden and then reloaded when a connection is being established.
+    // The advantage is that the chat should then scroll to the latest message after reconnecting.
+    // Without it, the chat window won't reload. New messages should still be loaded, but the chat won't scroll down.
+    // The advantage with removing this line would be that half finished messages that were being composed when the user went offline
+    // wouldn't be lost...
+    showChat.value = false;
+  }
+})
+
+let _connecting = false;
 async function tryConnect(force: boolean) {
   if (chat.onlineStatus.value === "online" || force) {
-    await connect(componentId.value);
+    console.log('CONNECTING::::');
+    if (!_connecting){
+      try {
+        await connect(componentId.value);
+      } catch {  }
+      _connecting = false;
+    }
   }
 }
 
@@ -76,25 +107,23 @@ onMounted(() => {
       style: { 'flex-shrink': '0' },
       shadowDomSelector: "link-preview",
     },
-    {
-      selector: ".cc__messageinput",
-      style: {
-        "border-radius": "8px 8px 0 0",
-        "box-shadow":
-          "0px -1px 2px 0px rgba(17, 24, 39, 0.05), 1px -1px 3px 0px rgba(17, 24, 39, 0.1)",
-      },
-      shadowDomSelector: "cometchat-message-input",
-    },
-    {
-      selector: ".cc__messageinput-input",
-      style: {
-        "font-size": "16px",
-        padding: "8px",
-        "max-height": "none",
-        height: "64px",
-      },
-      shadowDomSelector: "cometchat-message-input",
-    },
+    // {
+    //   selector: ".messageinput",
+    //   style: {
+    //     "border-radius": "8px 8px 0 0",
+    //     "box-shadow":
+    //       "0px -1px 2px 0px rgba(17, 24, 39, 0.05), 1px -1px 3px 0px rgba(17, 24, 39, 0.1)",
+    //   },
+    // },
+    // {
+    //   selector: ".messageinput-input",
+    //   style: {
+    //     "font-size": "16px",
+    //     padding: "8px",
+    //     "max-height": "none",
+    //     height: "64px",
+    //   },
+    // },
   ]);
 });
 
@@ -102,26 +131,49 @@ onUnmounted(async () => {
   await disconnect(componentId.value);
 });
 
+const cometChatStatus = ref('');
+function getCometChatStatus(){
+  cometChatStatus.value = new Date().getTime() + CometChat.getConnectionStatus();
+}
+
 </script>
 
 <template>
   <div class="bcc-chat-message-list-wrapper">
-    <div v-if="chatGroup && (chat.connected.value || chat.onlineStatus.value === 'offline')" class="bcc-chat-message-list">
-      <CometChatMessages
+    <div>
+      <div>Connecting... <button @click="tryConnect(true)">[retry]</button></div>
+      <div>Online status: {{chat.onlineStatus}}</div>
+      <div>Online mode: {{chat.onlineMode}}</div>
+      <div>Connected: {{chat.connected.value}}</div>
+      <div>Connecting: {{chat.connecting.value}}</div>
+      <div>CometChat: {{cometChatStatus}} <button @click="getCometChatStatus()">[refresh]</button></div>
+    </div>
+    <div v-if="showChat" class="bcc-chat-message-list">
+
+      <CometChatMessages          
         :hideMessageHeader="true"
         :disableSoundForMessages="true"
         :messageComposerConfiguration="messageComposerConfiguration"
         :messageListConfiguration="messageListConfiguration"
+        :threadedMessagesConfiguration="threadedMessagesConfiguration"
         :hideMessageComposer="false"
         :hideDetails="true"
         :group="chatGroup"
       />
+
       <div v-if="chat.onlineStatus.value === 'offline' || !chat.connected.value" class="bcc-chat-message-composer-offline">
-        <span>Waiting for connection...</span>
+        <span v-if="chat.onlineStatus.value === 'offline'">Waiting for network...</span>
+        <span v-else>Connecting...</span>
       </div>
     </div>
-    <div class="bcc-chat-message-list-offline">
-      <span>Waiting for connection...</span>
+    <div v-else-if="!chat.connected.value" class="bcc-chat-message-list-offline">
+      <span>Connecting... <button @click="tryConnect(true)">[retry]</button></span>
+    </div>
+    <div v-else-if="!chatGroup" class="bcc-chat-message-list-offline">
+      <span>Loading chat...</span>
+    </div>
+    <div v-else class="bcc-chat-message-list-offline">
+      <span>Loading...</span>
     </div>
   </div>
 </template>
@@ -202,11 +254,15 @@ accent900: text in avatar
 
       /* 1.1.2 Wrapper for Messages Composer */
       .cc-messagecomposer-wrapper {
-        padding: 0;
+        //padding: 0; //Use to remove side padding on composer
       }
     }
   }
 
+  .cc-messagebubble-wrapper__container {
+    max-width: 80%;
+  }
+
   .cc-messagebubble-wrapper__messageoptions {
     border-radius: 8px;
     .cc-context-menu__top-menu {
@@ -246,7 +302,6 @@ accent900: text in avatar
   align-items: center;
   font: 700 22px sans-serif;
   color: #bcbcbc;
-  z-index: -1;
 }
 
 .cc-messagecomposer__emojikeyboard {