@bcc-code/vue-bcc-chat-ui 1.4.2 → 1.6.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "1.4.2",
+  "version": "1.6.0",
   "type": "module",
   "private": false,
   "files": [
@@ -22,12 +22,13 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@types/node": "^20.11.24",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20.11.25",
     "@vitejs/plugin-vue": "^4.6.2",
     "path": "^0.12.7",
     "sass": "^1.71.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.4",
+    "typescript": "^5.4.2",
+    "vite": "^5.1.5",
     "vite-plugin-dts": "^3.7.3",
     "vue": "^3.4.21"
   },

package/src/components/BccChatMessageList.vue

@@ -1,29 +1,36 @@
 <script setup lang="ts">
 import { onBeforeMount, onMounted, onUnmounted, ref, nextTick, watch, Ref  } from "vue";
-import chat from '../chat';
-import { 
+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 {
+  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 { ThreadedMessagesStyle } from '@cometchat/uikit-shared';
-
 const props = defineProps({
-  chatUid:  {type: String, required: true},
-})
+  chatUid: { type: String, required: true },
+});
 
-const componentId = ref(`component-${Math.random().toString(36).substring(2, 11)}`);
-const chatGroup = ref<Group>();
+const componentId = ref(
+  `component-${Math.random().toString(36).substring(2, 11)}`
+);
+const chatGroup = ref<Group | null>(null);
 
-watch(chatGroup, (exists: any) => {
+watch(chatGroup, (exists: null) => {
   if (!exists) return;
+
   nextTick(() => {
     watchAndApplyStyle(
       ".bcc-chat-message-list",
@@ -34,58 +41,54 @@ watch(chatGroup, (exists: any) => {
   });
 })
 
-onBeforeMount(async() => {
-    try {
-      await connect();
-      await loadData();
-    } catch (error) {
-      console.error('Failed to connect when mounting chat component', error);
-    }
-});
-
-watch(chat.connection.connected, async () => {
-    if (chat.connection.connected.value) {
-      await loadData();
-    }
-});
-
-watch(() => props.chatUid, async () => {
-    if (chat.connection.connected.value) {
-      await loadData();
-    }
+onBeforeMount(async () => {
+  await connect(componentId.value);
+  await loadData();
 });
 
 onUnmounted(async () => {
-  await disconnect();
+  await disconnect(componentId.value);
 });
 
-// Disconnects from chat server
-const disconnect = async () => {
-  await chat.connection.disconnect(componentId.value);
-};
-
-// Connect to chat server
-const connect = async() => {
-  await chat.connection.connect(componentId.value);
-};
+watch(
+  [loggedIn, chat.connection.connected, chat.initialized, () => props.chatUid],
+  () => {
+    loadData();
+  }
+);
 
 // Loads data if chat is connected
-const loadData = async () => {  
-    if (chat.connection.connected.value && props.chatUid) {
-      initTemplates();
+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);
-      await chat.data.clearGroupChatCount(props.chatUid);
+
+      // Clear group chat count - assume user is viewing chat
+      if (chatGroup.value) {
+        await chat.data.clearGroupChatCount(props.chatUid);
+      }
     } else {
-      chatGroup.value = undefined;
+      chatGroup.value = null;
     }
+  } else {
+    if (!loggedIn.value) {
+      chatGroup.value = null;
+    }
+  }
 };
 
 const messageComposerConfiguration = new MessageComposerConfiguration({
   hideLiveReaction: true,
-  hideVoiceRecording: true
+  hideVoiceRecording: true,
 });
-const messageListConfiguration:Ref<any> = ref(null);
-  
+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
@@ -100,16 +103,25 @@ const initTemplates = () => {
 
 // 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;
-  });
+  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,
@@ -132,40 +144,48 @@ function getMessageListConfiguration(): MessageListConfiguration {
         }),
       },
     };
-  };
+  }
 
-  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");
+  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
+    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"
-      />
+    <CometChatMessages
+      :hideMessageHeader="true"
+      :disableSoundForMessages="true"
+      :messageComposerConfiguration="messageComposerConfiguration"
+      :messageListConfiguration="messageListConfiguration"
+      :hideMessageComposer="false"
+      :hideDetails="true"
+      :group="chatGroup"
+    />
   </div>
 </template>
 
-<style lang="scss" >
-  
+<style lang="scss">
 .bcc-chat-message-list {
   height: 100%;
   /* 1. Wrapper for Messages component */
@@ -180,13 +200,14 @@ function getMessageListConfiguration(): MessageListConfiguration {
   }
 }
 
-.cc-messagecomposer__emojikeyboard { 
-    display: none;
+.cc-messagecomposer__emojikeyboard {
+  display: none;
 }
 
 // Hide emoji keyboard
-.cc-messagecomposer__emojikeyboard { display: none; }
-
+.cc-messagecomposer__emojikeyboard {
+  display: none;
+}
 
 .cc-threadedmessages-wrapper__bubbleview::-webkit-scrollbar,
 .cc__message-list::-webkit-scrollbar {
@@ -199,5 +220,4 @@ function getMessageListConfiguration(): MessageListConfiguration {
   background: rgb(232, 229, 229);
   border-radius: 8px;
 }
-
-</style>
+</style>