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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "type": "module",
   "private": false,
   "files": [
@@ -18,7 +18,8 @@
   "exports": {
     ".": {
       "import": "./dist/vue-bcc-chat-ui.js",
-      "require": "./dist/vue-bcc-chat-ui.js"
+      "require": "./dist/vue-bcc-chat-ui.js",
+      "types": "./dist/index.d.ts"
     },
     "./style.css": {
       "import": "./dist/style.css",
@@ -34,20 +35,20 @@
   "devDependencies": {
     "@types/dompurify": "^3.0.5",
     "@types/markdown-it": "^14.1.1",
-    "@types/node": "^20.12.13",
+    "@types/node": "^20.14.9",
     "@vitejs/plugin-vue": "^5.0.5",
     "path": "^0.12.7",
-    "sass": "^1.77.4",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.12",
+    "sass": "^1.77.6",
+    "typescript": "^5.5.2",
+    "vite": "^5.3.2",
     "vite-plugin-dts": "^3.9.1",
-    "vue": "^3.4.27"
+    "vue": "^3.4.31"
   },
   "dependencies": {
-    "@cometchat/chat-sdk-javascript": "4.0.5",
-    "@cometchat/chat-uikit-vue": "4.3.8",
-    "@cometchat/uikit-resources": "4.3.8",
-    "@cometchat/uikit-shared": "4.3.10",
+    "@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",
     "jwt-decode": "^4.0.0",
     "markdown-it": "^14.1.0",

package/src/components/BccChatMessageList.vue

@@ -26,6 +26,7 @@ import { CometChatMessageEvents, MessageStatus } from "@cometchat/uikit-resource
 
 const props = defineProps({
   chatUid: { type: String, required: true },
+  senderDisplayName: { type: String, required: false}
 });
 
 const componentId = ref(
@@ -43,11 +44,25 @@ const messageListConfiguration = getMessageListConfiguration(chatInstance);
 const threadedMessagesConfiguration = getThreadedMessagesConfiguration();
 
 provide("chatInstance", chatInstance);
+
 const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(({ message, status }) => {
-  if (status === MessageStatus.inprogress && chatInstance.value.replyToMessage) {
-    (message as any).setMetadata({
-      replyToMessageId: chatInstance.value.replyToMessage?.getId()
-    });
+  if (status === MessageStatus.inprogress) {
+    let metadata: any = {};
+    let scope: string | undefined = chatGroup.value?.getScope()
+
+    if (chatInstance.value.replyToMessage) {
+      metadata.replyToMessageId = chatInstance.value.replyToMessage?.getId()
+    }
+
+    if (props.senderDisplayName && (scope == "moderator" || scope == "admin")) {
+      metadata.senderDisplayName = props.senderDisplayName
+    }
+
+    if (Object.keys(metadata).length === 0) {
+      return
+    }
+
+    (message as any).setMetadata(metadata);
   }
 });
 
@@ -129,7 +144,7 @@ onUnmounted(async () => {
         :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>

package/src/components/BccReplyPreview.vue

@@ -3,7 +3,7 @@ import { CometChatTheme, CometChatUIKitConstants } from "@cometchat/uikit-resour
 import { inject, ref } from "vue";
 import { ReplyPreviewStyle } from "../chat/replyStyle";
 import { BaseMessage, MediaMessage } from "@cometchat/chat-sdk-javascript";
-import { getMessageTextPreview, proxyImage } from "../chat/data";
+import { getMessageTextPreview, proxyImage, getSenderDisplayName } from "../chat/data";
 
 const props = defineProps({
   replyToMessage: { type: BaseMessage },
@@ -62,7 +62,7 @@ function getThumbnailURL() {
     </div>
     <div class="bcc__reply_preview__content">
       <p class="bcc__reply_preview__title" :style="titleStyle()">
-        {{ props.titlePrefix + ( props?.replyToMessage?.getSender()?.getName() || "" ) || "Reply to ..." }}
+        {{ props.titlePrefix + ( getSenderDisplayName(props.replyToMessage) || "" ) || "Reply to ..." }}
       </p>
       <p class="cc__preview__subtitle" :style="subtitleStyle()">
         {{ getMessageTextPreview(props?.replyToMessage) || "‎" }}