@bcc-code/vue-bcc-chat-ui 1.6.2 → 2.0.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "1.6.2",
+  "version": "2.0.0",
   "type": "module",
   "private": false,
   "files": [
@@ -22,7 +22,6 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.11.25",
     "@vitejs/plugin-vue": "^4.6.2",
     "path": "^0.12.7",
@@ -37,8 +36,7 @@
     "@cometchat/chat-uikit-vue": "^4.2.1",
     "@cometchat/uikit-resources": "^4.2.2",
     "@cometchat/uikit-shared": "^4.2.2",
-    "jwt-decode": "^4.0.0",
-    "lodash-es": "^4.17.21"
+    "jwt-decode": "^4.0.0"
   },
   "scripts": {
     "dev": "vite",

package/src/components/BccChatMessageList.vue

@@ -1,23 +1,12 @@
 <script setup lang="ts">
-import { onBeforeMount, onMounted, onUnmounted, ref, nextTick, watch, Ref  } from "vue";
+import { onBeforeMount, onMounted, onUnmounted, ref, watchEffect } from "vue";
 import chat from "../chat";
 import { connect, disconnect } from "../chat/connection";
 import { loggedIn } from "../chat/login";
-
-import {
-  CometChatMessages,
-  CometChatMessageTemplate,
-  CometChatUIKit,
-  ImageBubbleStyle,
-  MessageBubbleAlignment,
-} from "@cometchat/chat-uikit-vue";
-import {
-  MessageListConfiguration,
-  MessageComposerConfiguration,
-} from "@cometchat/uikit-shared";
-import { CometChatTheme } from "@cometchat/uikit-resources";
-import { BaseMessage, Group, User } from "@cometchat/chat-sdk-javascript";
-import { watchAndApplyStyle } from "../chat/mobileView";
+import { CometChatMessages } from "@cometchat/chat-uikit-vue";
+import { Group } from "@cometchat/chat-sdk-javascript";
+import { watchAndApplyStyle } from "../chat/styleFix";
+import { messageComposerConfiguration, messageListConfiguration } from "../chat/uiKit";
 
 const props = defineProps({
   chatUid: { type: String, required: true },
@@ -26,172 +15,60 @@ const props = defineProps({
 const componentId = ref(
   `component-${Math.random().toString(36).substring(2, 11)}`
 );
-const chatGroup = ref<Group | null>(null);
-
-watch(chatGroup, (exists: null) => {
-  if (!exists) return;
-
-  nextTick(() => {
-    watchAndApplyStyle(
-      ".bcc-chat-message-list",
-      [{
-        selector: '.cc__imageviewer__close-button',
-        style: { "padding-top": "env(safe-area-inset-top)" },
-        shadowDomSelector: 'cometchat-full-screen-viewer'
-      }, {
-        selector: '.cc__text',
-        style: { color: 'var(--cc__text-color)' },
-        shadowDomSelector: 'cometchat-text-bubble'
-      }, {
-        selector: '.cc__linkpreview-title',
-        style: { color: 'var(--cc__text-color)' },
-        shadowDomSelector: 'link-preview'
-      }]
-    );
-  });
+const chatGroup = ref<Group>();
+
+onMounted(() => {
+  watchAndApplyStyle(
+    ".bcc-chat-message-list-wrapper",
+    [{
+      selector: '.cc__imageviewer__close-button',
+      style: { "padding-top": "env(safe-area-inset-top)" },
+      shadowDomSelector: 'cometchat-full-screen-viewer'
+    }, {
+      selector: '.cc__text',
+      style: { color: 'var(--cc__text-color)' },
+      shadowDomSelector: 'cometchat-text-bubble'
+    }, {
+      selector: '.cc__linkpreview-title',
+      style: { color: 'var(--cc__text-color)' },
+      shadowDomSelector: 'link-preview'
+    }]
+  );
 })
 
 onBeforeMount(async () => {
   await connect(componentId.value);
-  await loadData();
 });
 
 onUnmounted(async () => {
   await disconnect(componentId.value);
 });
 
-watch(
-  [loggedIn, chat.connection.connected, chat.initialized, () => props.chatUid],
-  () => {
-    loadData();
-  }
-);
-
-// Loads data if chat is connected
-const loadData = async () => {
-  if (
-    loggedIn.value &&
-    chat.initialized.value &&
-    chat.connection.connected.value
-  ) {
-    initTemplates();
-    if (props.chatUid) {
-      // Retreive group
-      chatGroup.value = await chat.data.getGroup(props.chatUid);
-
-      // Clear group chat count - assume user is viewing chat
-      if (chatGroup.value) {
-        await chat.data.clearGroupChatCount(props.chatUid);
-      }
-    } else {
-      chatGroup.value = null;
-    }
+watchEffect(async () => {
+  if (loggedIn.value && props.chatUid && chat.initialized.value) {
+    chatGroup.value = await chat.getGroup(props.chatUid) ?? undefined;
+    await chat.clearGroupChatCount(props.chatUid);  
   } else {
-    if (!loggedIn.value) {
-      chatGroup.value = null;
-    }
-  }
-};
-
-const messageComposerConfiguration = new MessageComposerConfiguration({
-  hideLiveReaction: true,
-  hideVoiceRecording: true,
-});
-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
-let templatesInitialized = false;
-const initTemplates = () => {
-  if (templatesInitialized) {
-    return;
-  }
-  templatesInitialized = true;
-  messageListConfiguration.value = getMessageListConfiguration();
-};
-
-// Override message list configuration
-function getMessageListConfiguration(): MessageListConfiguration {
-  let templates = CometChatUIKit.getDataSource()
-    .getAllMessageTemplates()
-    .map((template: CometChatMessageTemplate) => {
-      // Override options
-      template.options = (
-        loggedInUser: User,
-        message: BaseMessage,
-        theme: CometChatTheme,
-        group: Group | undefined
-      ) => {
-        return getOptionsView(loggedInUser, message, theme, group);
-      };
-
-      // Override image styling
-      if (template.category === "message" && template.type === "image") {
-        template.contentView = getImageMessageContentView;
-      }
-      return template;
-    });
-
-  function getImageMessageContentView(
-    message: CometChat.BaseMessage,
-    _alignment: MessageBubbleAlignment
-  ) {
-    if (message.getDeletedAt()) {
-      return CometChatUIKit.getDataSource().getDeleteMessageBubble(
-        message,
-        new CometChatTheme({})
-      );
-    }
-    return {
-      componentName: "CometChatImageBubble",
-      props: {
-        src: message.getData().url,
-        imageStyle: new ImageBubbleStyle({
-          // you can adjust image styles here
-          width: "100%",
-          height: "100%",
-        }),
-      },
-    };
+    chatGroup.value = undefined;
   }
+})
 
-  const getOptionsView = (
-    loggedInUser: User,
-    message: BaseMessage,
-    theme: any,
-    group: Group | undefined
-  ) => {
-    const optionsData = CometChatUIKit.getDataSource().getMessageOptions(
-      loggedInUser,
-      message,
-      theme,
-      group
-    );
-    const customOptionsView = optionsData.filter(
-      (ele) => ele.id !== "sendMessagePrivately"
-    );
-    return customOptionsView;
-  };
-
-  return new MessageListConfiguration({
-    scrollToBottomOnNewMessages: true,
-    templates: templates,
-  });
-}
 </script>
 
 <template>
-  <div v-if="chatGroup" class="bcc-chat-message-list">
-    <CometChatMessages
-      :hideMessageHeader="true"
-      :disableSoundForMessages="true"
-      :messageComposerConfiguration="messageComposerConfiguration"
-      :messageListConfiguration="messageListConfiguration"
-      :hideMessageComposer="false"
-      :hideDetails="true"
-      :group="chatGroup"
-    />
+  <div class="bcc-chat-message-list-wrapper">
+    <div v-if="chatGroup" class="bcc-chat-message-list">
+      <CometChatMessages 
+          :hideMessageHeader="true" 
+          :disableSoundForMessages="true"
+          :messageComposerConfiguration="messageComposerConfiguration"
+          :messageListConfiguration="messageListConfiguration"
+          :hideMessageComposer="false" 
+          :hideDetails="true" 
+          :group="chatGroup"
+        />
+    </div>
+    <div class="bcc-chat-message-list-offline"><span>Waiting for connection...</span></div>
   </div>
 </template>
 
@@ -206,6 +83,11 @@ body {
   }
 }
 
+.bcc-chat-message-list-wrapper {
+  position: relative;
+  height: 100%;
+}
+
 /*
 primary: my bubble
 accent: message bar text
@@ -270,6 +152,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 {