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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-alpha.3",
   "type": "module",
   "private": false,
   "files": [

package/src/components/BccChatMessageList.vue

@@ -5,7 +5,6 @@ import {
   onUnmounted,
   ref,
   watch,
-  watchEffect,
 } from "vue";
 import chat from "../chat";
 import { connect, disconnect } from "../chat/connection";
@@ -13,7 +12,6 @@ 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,
@@ -38,41 +36,13 @@ watch([loggedIn, ()=>props.chatUid, chat.initialized], async ([_loggedIn, _chatU
   }
 }, { immediate: true });
 
-watch(chat.onlineStatus, () => {
-  tryConnect(false);
+watch(chat.onlineStatus, async () => {
+  await 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) {
-    console.log('CONNECTING::::');
-    if (!_connecting){
-      try {
-        await connect(componentId.value);
-      } catch {  }
-      _connecting = false;
-    }
+    await connect(componentId.value);
   }
 }
 
@@ -131,26 +101,12 @@ 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>
-      <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          
+    <div v-if="chatGroup && (chat.connected.value || chat.onlineStatus.value === 'offline')" class="bcc-chat-message-list">
+      <CometChatMessages
         :hideMessageHeader="true"
         :disableSoundForMessages="true"
         :messageComposerConfiguration="messageComposerConfiguration"
@@ -160,20 +116,12 @@ function getCometChatStatus(){
         :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>Waiting for connection...</span>
       </div>
     </div>
-    <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 class="bcc-chat-message-list-offline">
+      <span>Waiting for connection...</span>
     </div>
   </div>
 </template>
@@ -259,10 +207,6 @@ accent900: text in avatar
     }
   }
 
-  .cc-messagebubble-wrapper__container {
-    max-width: 80%;
-  }
-
   .cc-messagebubble-wrapper__messageoptions {
     border-radius: 8px;
     .cc-context-menu__top-menu {
@@ -302,6 +246,7 @@ accent900: text in avatar
   align-items: center;
   font: 700 22px sans-serif;
   color: #bcbcbc;
+  z-index: -1;
 }
 
 .cc-messagecomposer__emojikeyboard {