@bcc-code/vue-bcc-chat-ui 1.2.7 → 1.2.9

package/package.json

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

package/src/components/BccChatMessageList.vue

@@ -9,8 +9,9 @@ import {
   MessageBubbleAlignment,
 } from "@cometchat/chat-uikit-vue";
 import {  MessageListConfiguration, MessageComposerConfiguration } from "@cometchat/uikit-shared";
+import { CometChatTheme } from '@cometchat/uikit-resources'
 import { Group } from '@cometchat/chat-sdk-javascript';
-import { watch, Ref } from 'vue';
+import { watch } from 'vue';
 //import { ThreadedMessagesStyle } from '@cometchat/uikit-shared';
 
 const props = defineProps({
@@ -21,7 +22,7 @@ const componentId = ref(`component-${Math.random().toString(36).substring(2, 11)
 const chatGroup = ref<Group>();
 
 onBeforeMount(async() => {
-    await connnect();
+    await connect();
     await loadData();
 });
 
@@ -48,14 +49,13 @@ const disconnect = async () => {
 };
 
 // Connect to chat server
-const connnect = async() => {
+const connect = async() => {
   await chat.connection.connect(componentId.value);
 };
 
 // Loads data if chat is connected
 const loadData = async () => {  
     if (chat.connection.connected.value && props.chatUid) {
-      initTemplates();
       chatGroup.value = await chat.data.getGroup(props.chatUid);
       await chat.data.clearGroupChatCount(props.chatUid);
     } else {
@@ -63,57 +63,65 @@ const loadData = async () => {
     }
 };
 
-const messageListConfiguration:Ref<any> = ref(null);
-const messageComposerConfiguration:Ref<any> = ref(new MessageComposerConfiguration({
+const messageComposerConfiguration = new MessageComposerConfiguration({
   hideLiveReaction: true,
   hideVoiceRecording: true
-}));
+});
 
-let templatesInitialized = false;
-const initTemplates = () => {
-  if (templatesInitialized) {
-    return;
-  }
-  templatesInitialized = true;
-  let definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
-  definedTemplates.map((template: CometChatMessageTemplate) => {
+const messageListConfiguration = getMessageListConfiguration()
+
+function getMessageListConfiguration(): MessageListConfiguration {
+  let templates = CometChatUIKit.getDataSource().getAllMessageTemplates().map((template: CometChatMessageTemplate) => {
     if (template.category === "message" && template.type === "image") {
-      template.contentView = (
-        message: CometChat.BaseMessage,
-        _alignment: MessageBubbleAlignment
-      ) => getImageMessageContentView(message, _alignment);
+      template.contentView = getImageMessageContentView
     }
     return template;
   });
 
-  const getImageMessageContentView = (
-        message: CometChat.BaseMessage,
-        _alignment: MessageBubbleAlignment
-      ) => {
-      return {
-        componentName: "CometChatImageBubble",
-        props: {
-          src: message.getData().url,
-          imageStyle: new ImageBubbleStyle({
-            // you can adjust image styles here
-            width: "100%",
-            height: "100%",
-          }),
-        },
-      };
+  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%",
+        }),
+      },
     };
+  };
 
-    messageListConfiguration.value =  new MessageListConfiguration({
-      scrollToBottomOnNewMessages: true,
-      templates: definedTemplates,
-    });
+  return new MessageListConfiguration({
+    scrollToBottomOnNewMessages: true,
+    templates: templates
+  });
 }
 
+
 </script>
 
 <template>
   <div v-if="chatGroup" class="bcc-chat-message-list">
-    <CometChatMessages v-if="chatGroup" :hideMessageHeader="true" :disableSoundForMessages="true" :messageComposerConfiguration="messageComposerConfiguration" :messageListConfiguration="messageListConfiguration" :hideMessageComposer="false" :hideDetails="true" :group="chatGroup"></CometChatMessages>
+    <CometChatMessages 
+        v-if="chatGroup" 
+        :hideMessageHeader="true" 
+        :disableSoundForMessages="true"
+        :messageComposerConfiguration="messageComposerConfiguration" 
+        :messageListConfiguration="messageListConfiguration" 
+        :hideMessageComposer="false" 
+        :hideDetails="true" 
+        :group="chatGroup"
+      />
   </div>
 </template>