@bcc-code/vue-bcc-chat-ui 1.6.1 → 1.6.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "type": "module",
   "private": false,
   "files": [

package/src/components/BccChatMessageList.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { onBeforeMount, onMounted, onUnmounted, ref, nextTick, watch, Ref  } from "vue";
 import chat from "../chat";
-import { connect, disconnect } from "../chat/connection";
+import { connect, disconnect, connected } from "../chat/connection";
 import { loggedIn } from "../chat/login";
 
 import {
@@ -61,18 +61,17 @@ onUnmounted(async () => {
 });
 
 watch(
-  [loggedIn, chat.connection.connected, chat.initialized, () => props.chatUid],
+  [loggedIn, connected, chat.initialized, () => props.chatUid],
   () => {
     loadData();
   }
 );
 
-// Loads data if chat is connected
+// Loads data if logged in
 const loadData = async () => {
   if (
     loggedIn.value &&
-    chat.initialized.value &&
-    chat.connection.connected.value
+    chat.initialized.value
   ) {
     initTemplates();
     if (props.chatUid) {
@@ -101,7 +100,7 @@ const messageListConfiguration: Ref<any> = ref(null);
 
 // Templates cannot be initialized before CometChat is initiazlied
 // CometChatUIKit.getDataSource().getAllMessageTemplates() will return null before cometchat is initialized
-// So we postpone overriding the templates until cometchat is connected
+// So we postpone overriding the templates until cometchat is logged in
 let templatesInitialized = false;
 const initTemplates = () => {
   if (templatesInitialized) {
@@ -192,7 +191,11 @@ function getMessageListConfiguration(): MessageListConfiguration {
       :hideDetails="true"
       :group="chatGroup"
     />
+    <div v-if="!connected" class="bcc-chat-message-composer-offline">
+      <span>Offline</span>
+    </div>
   </div>
+  <div class="bcc-chat-message-list-offline"><span>Waiting for connection...</span></div>
 </template>
 
 <style lang="scss">
@@ -219,7 +222,7 @@ accent900: text in avatar
 
 .bcc-chat-message-list {
   height: 100%;
-  --cc__primary: linear-gradient(45deg, #CFEAC8 0%, #E7F5E3 100%);
+  --cc__primary: #CFEAC8;
   --cc__background: #F3FAF7;
   --cc__secondary: white;
   --cc__accent: #004e48;
@@ -236,15 +239,12 @@ accent900: text in avatar
   --cc__text-color: #000;
 
   @media (prefers-color-scheme: dark) {
-    --cc__primary: linear-gradient(45deg, #3F4669 0%, #57639E 100%);
-    --cc__background: linear-gradient(45deg, transparent 0%, rgba(63,70,105,0.8) 100%),
-            linear-gradient(315deg, transparent 0%, #020A0B 100%),
-            linear-gradient(135deg, transparent 0%, #020A0B 100%),
-            #020A0B;
+    --cc__primary: #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, hsl(221, 39%, 6%) 0%, #111827 100%);
+    --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);
@@ -273,6 +273,42 @@ accent900: text in avatar
       border: 1px var(--cc__secondary) solid !important;
     }
   }
+  /* 2. Message for Messages Composer when offline */
+  .bcc-chat-message-composer-offline {
+    position: relative;
+    top: -96px;
+    height: 96px;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 16px 14px;
+    color: rgb(176, 176, 176);
+    font: 700 1rem sans-serif;
+
+    /* 2.1 Text of Messages Composer offline view */
+    span {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: rgba(255,255,255,0.75);
+      border-radius: 12px;
+    }
+  }
+}
+
+.bcc-chat-message-list-offline {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font: 700 22px sans-serif;
+  color: #bcbcbc;
+  z-index: -1;
 }
 
 .cc-messagecomposer__emojikeyboard {