@bcc-code/vue-bcc-chat-ui 3.11.0 → 3.12.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "type": "module",
   "private": false,
   "files": [
@@ -34,22 +34,23 @@
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
-    "@types/markdown-it": "^14.1.1",
+    "@types/markdown-it": "^14.1.2",
     "@types/node": "^20.14.9",
-    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue": "^5.1.3",
     "path": "^0.12.7",
-    "sass": "^1.77.6",
-    "typescript": "^5.5.2",
-    "vite": "^5.3.2",
-    "vite-plugin-dts": "^3.9.1",
-    "vue": "^3.4.31"
+    "sass": "^1.77.8",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.2",
+    "vite-plugin-dts": "^4.1.0",
+    "vue": "^3.4.38"
   },
   "dependencies": {
-    "@cometchat/chat-sdk-javascript": "4.0.7",
-    "@cometchat/chat-uikit-vue": "4.3.11",
-    "@cometchat/uikit-resources": "4.3.9",
-    "@cometchat/uikit-shared": "4.3.12",
-    "dompurify": "^3.1.5",
+    "@cometchat/chat-sdk-javascript": "4.0.10",
+    "@cometchat/chat-uikit-vue": "4.3.16",
+    "@cometchat/uikit-elements": "4.3.15",
+    "@cometchat/uikit-resources": "4.3.11",
+    "@cometchat/uikit-shared": "4.3.17",
+    "dompurify": "^3.1.6",
     "jwt-decode": "^4.0.0",
     "markdown-it": "^14.1.0",
     "panzoom": "^9.4.3"

package/src/components/BccChatMessageList.vue

@@ -8,7 +8,7 @@ import {
   provide,
   ref,
   watch,
-watchEffect,
+  watchEffect,
 } from "vue";
 import chat from "../chat";
 import { connect, disconnect } from "../chat/connection";
@@ -40,8 +40,8 @@ const chatInstance: Ref<ChatInstance> = ref({
 });
 
 const messageComposerConfiguration = getMessageComposerConfiguration();
-const messageListConfiguration = getMessageListConfiguration(chatInstance);
-const threadedMessagesConfiguration = getThreadedMessagesConfiguration();
+const messageListConfiguration = getMessageListConfiguration(chatInstance, chatGroup);
+const threadedMessagesConfiguration = getThreadedMessagesConfiguration(chatGroup);
 
 provide("chatInstance", chatInstance);
 
@@ -79,10 +79,10 @@ watchEffect(() => {
   }
 });
 
-watch([loggedIn, ()=> props.chatUid, chat.initialized], async ([_loggedIn, _chatUid, _initialized]) => {
+watch([loggedIn, () => props.chatUid, chat.initialized], async ([_loggedIn, _chatUid, _initialized]) => {
   if (_loggedIn && _chatUid && _initialized) {
     chatGroup.value = (await chat.getGroup(props.chatUid)) ?? undefined;
-    await chat.clearGroupChatCount(props.chatUid);  
+    await chat.clearGroupChatCount(props.chatUid);
   } else if (chatGroup.value) {
     chatGroup.value = undefined;
   }
@@ -101,7 +101,7 @@ onMounted(() => {
     },
     {
       selector: ".cc__preview__subtitle",
-      style: { 
+      style: {
         "overflow": "hidden",
         "display": "-webkit-box",
         "-webkit-box-orient": "vertical",
@@ -121,6 +121,14 @@ onUnmounted(async () => {
   await disconnect(componentId.value);
 });
 
+function isChannel(): boolean {
+  return chatGroup.value?.getMetadata()?.isChannel;
+}
+
+function isParticipant(): boolean {
+  return chatGroup.value?.getScope() == "participant";
+}
+
 </script>
 
 <template>
@@ -134,18 +142,14 @@ onUnmounted(async () => {
       <div>CometChat: {{cometChatStatus}} <button @click="getCometChatStatus()">[refresh]</button></div>
     </div> -->
     <div v-if="chatGroup" class="bcc-chat-message-list">
-      <CometChatMessages
-        :hideMessageHeader="true"
-        :disableSoundForMessages="true"
+      <CometChatMessages :hideMessageHeader="true" :disableSoundForMessages="true"
         :messageComposerConfiguration="messageComposerConfiguration"
         :messageListConfiguration="messageListConfiguration"
         :threadedMessagesConfiguration="threadedMessagesConfiguration"
-        :hideMessageComposer="false"
-        :hideDetails="true"
-        :group="chatGroup"
-      />
-      
-      <div v-if="chat.onlineStatus.value === 'offline' || !chat.connected.value" class="bcc-chat-message-composer-offline">
+        :hideMessageComposer="isParticipant() && isChannel()" :hideDetails="true" :group="chatGroup" />
+
+      <div v-if="chat.onlineStatus.value === 'offline' || !chat.connected.value"
+        class="bcc-chat-message-composer-offline">
         <span v-if="chat.onlineStatus.value === 'offline'">Waiting for network...</span>
         <span v-else>Connecting...</span>
       </div>
@@ -229,11 +233,13 @@ accent900: text in avatar
 
   /* 1. Wrapper for Messages component */
   .cc-messages-wrapper {
+
     /* 1.1 Messages component */
     .cc-messages-wrapper__messages {
+
       /* 1.1.1 Wrapper for Messages List */
       .cc-messages-wrapper__messages-list {
-        height: calc(100% - 96px);
+        height: 100%;
       }
 
       /* 1.1.2 Wrapper for Messages Composer */
@@ -254,10 +260,12 @@ accent900: text in avatar
 
   .cc-messagebubble-wrapper__messageoptions {
     border-radius: 8px;
+
     .cc-context-menu__top-menu {
       border: 1px var(--cc__secondary) solid !important;
     }
   }
+
   /* 2. Message for Messages Composer when offline */
   .bcc-chat-message-composer-offline {
     position: relative;