@bcc-code/vue-bcc-chat-ui 1.1.0 → 1.1.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "module",
   "private": false,
   "files": [
@@ -22,20 +22,20 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
-    "@types/node": "^20.11.16",
-    "@vitejs/plugin-vue": "^4.5.2",
+    "@types/node": "^20.11.22",
+    "@vitejs/plugin-vue": "^4.6.2",
     "path": "^0.12.7",
-    "typescript": "^5.2.2",
-    "vite": "^5.0.8",
-    "vite-plugin-dts": "^3.7.2",
-    "vue": "^3.3.11",
-    "sass": "^1.70.0"
+    "sass": "^1.71.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4",
+    "vite-plugin-dts": "^3.7.3",
+    "vue": "^3.4.21"
   },
   "dependencies": {
     "@cometchat/chat-sdk-javascript": "^4.0.3",
-    "@cometchat/chat-uikit-vue": "^4.2.0",
+    "@cometchat/chat-uikit-vue": "^4.2.1",
     "@cometchat/uikit-resources": "^4.2.2",
-    "@cometchat/uikit-shared": "^4.2.1"
+    "@cometchat/uikit-shared": "^4.2.2"
   },
   "scripts": {
     "dev": "vite",

package/src/components/BccChatMessageList.vue

@@ -1,39 +1,111 @@
 <script setup lang="ts">
-import { onUnmounted, ref, watchEffect } from 'vue'
+import { onBeforeMount, onUnmounted, ref } from 'vue'
 import chat from '../chat';
-import { CometChatMessages } from '@cometchat/chat-uikit-vue'
+import { 
+  CometChatMessages,
+  CometChatMessageTemplate,
+  CometChatUIKit,
+  ImageBubbleStyle,
+  MessageBubbleAlignment,
+} from "@cometchat/chat-uikit-vue";
+import {  MessageListConfiguration } from "@cometchat/uikit-shared";
 import { Group } from '@cometchat/chat-sdk-javascript';
+import { watch, Ref } from 'vue';
 //import { ThreadedMessagesStyle } from '@cometchat/uikit-shared';
 
 const props = defineProps({
-  accessToken: {type: String, required: true},
   chatUid:  {type: String, required: true},
 })
 
-const connected = ref(false);
+const componentId = ref(`component-${Math.random().toString(36).substring(2, 11)}`);
 const chatGroup = ref<Group>();
-const user = ref();
 
-watchEffect(async () => {
-  if (props.accessToken) {
-    user.value = await chat.connection.connect(props.accessToken);
-    chatGroup.value = await chat.data.getGroup(props.chatUid);
-    connected.value = true
-  }
-})
+onBeforeMount(async() => {
+    await connnect();
+    await loadData();
+});
+
+watch(chat.connection.connected, async () => {
+    if (chat.connection.connected.value) {
+      await loadData();
+    }
+});
 
 onUnmounted(async () => {
-  if (connected.value){
-    await chat.connection.disconnect();
-    connected.value = false;
+  await disconnect();
+});
+
+// Disconnects from chat server
+const disconnect = async () => {
+  await chat.connection.disconnect(componentId.value);
+};
+
+// Connect to chat server
+const connnect = 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);
+    } else {
+      chatGroup.value = undefined;
+    }
+};
+
+const messageListConfiguration:Ref<any> = ref(null);
+let templatesInitialized = false;
+const initTemplates = () => {
+  if (templatesInitialized) {
+    return;
   }
-})
+  templatesInitialized = true;
+  let definedTemplates = CometChatUIKit.getDataSource().getAllMessageTemplates();
+  definedTemplates.map((template: CometChatMessageTemplate) => {
+    if (template.category === "message" && template.type === "image") {
+      template.contentView = (
+        message: CometChat.BaseMessage,
+        _alignment: MessageBubbleAlignment
+      ) => getImageMessageContentView(message, _alignment);
+    }
+    return template;
+  });
+
+  const getImageMessageContentView = (
+        message: CometChat.BaseMessage,
+        _alignment: MessageBubbleAlignment
+      ) => {
+      console.log("my image", message.getData());
+      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({
+      templates: definedTemplates,
+    });
+
+}
+
+
+
+
 
 </script>
 
 <template>
-  <div v-if="connected" class="bcc-chat-message-list">
-    <CometChatMessages :hideMessageHeader="true" :hideMessageComposer="false" :hideDetails="true" :group="chatGroup"></CometChatMessages>
+  <div v-if="chatGroup" class="bcc-chat-message-list">
+    <CometChatMessages v-if="chatGroup" :hideMessageHeader="true" :messageListConfiguration="messageListConfiguration" :hideMessageComposer="false" :hideDetails="true" :group="chatGroup"></CometChatMessages>
   </div>
 </template>