@bcc-code/vue-bcc-chat-ui 4.7.0 → 5.0.0

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "4.7.0",
+  "version": "5.0.0",
   "type": "module",
   "private": false,
   "files": [
@@ -59,6 +59,7 @@
     "@cometchat/uikit-resources": "4.3.13",
     "@cometchat/uikit-shared": "4.3.19",
     "dompurify": "^3.1.7",
+    "fuse.js": "^7.0.0",
     "jwt-decode": "^4.0.0",
     "markdown-it": "^14.1.0",
     "panzoom": "^9.4.3"

package/src/components/BccChatMessageBubble.vue

@@ -9,6 +9,11 @@ import BccImageBubble from './BccImageBubble.vue';
 import { offlineStore } from '../offline';
 
 const props = defineProps({
+	id: {
+		type: String,
+		required: false,
+		default: ""
+	},
 	text: {
 		type: String,
 		required: true
@@ -138,7 +143,7 @@ const replyPreviewStyle = {
 		</div>
 		<div v-if="text && metadata && metadata.translated_message" v-html="toMarkdownHtml(metadata.translated_message)"
 			class="bcc-chat-msg-bubble bcc-chat-msg-bubble--translation" />
-		<div v-if="text" v-html="toMarkdownHtml(text)" class="bcc-chat-msg-bubble"
+		<div v-if="text" v-html="toMarkdownHtml(text)" class="bcc-chat-msg-bubble" :id="id"
 			:class="{ 'bcc-chat-msg-bubble--translated': metadata && !!metadata.translated_message }" />
 	</div>
 </template>

package/src/components/BccChatMessageList.vue

@@ -30,6 +30,7 @@ const props = defineProps({
     type: Function as PropType<(guid: string, query: string) => Promise<any>>,
     required: false,
   },
+  loadMessageId: { type: String, required: false, default: "" },
 });
 
 const componentId = ref(
@@ -55,6 +56,11 @@ const chatInstance: Ref<ChatInstance> = ref({
 
 provide("chatInstance", chatInstance);
 
+const localLoadMessageId = ref(props.loadMessageId);
+watch(() => props.loadMessageId, (newVal) => {
+  localLoadMessageId.value = newVal;
+});
+
 const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(({ message, status }) => {
   if (status !== MessageStatus.inprogress) {
     return
@@ -80,9 +86,8 @@ const onMessageSend = CometChatMessageEvents.ccMessageSent.subscribe(({ message,
   (message as any).setMetadata(metadata);
 });
 
-watch([loggedIn, chat.onlineStatus, () => props.chatUid, chat.initialized, () => props.groupMessageGetter], async ([_loggedIn, _online, _chatUid, _initialized, _groupMessageGetter]) => {
+watch([loggedIn, chat.onlineStatus, () => props.chatUid, chat.initialized, () => props.groupMessageGetter, chat.scrollToMessageId, localLoadMessageId], async ([_loggedIn, _online, _chatUid, _initialized, _groupMessageGetter, _scrollToMessageId, _localLoadMessageId]) => {
   logger.debug("ChatMessageList watch changed", { chatUid: _chatUid, loggedIn: _loggedIn, online: _online, initialized: _initialized });
-
   try {
     if (_loggedIn && _chatUid && _initialized) {
       chatGroupNotFound.value = false;
@@ -97,6 +102,15 @@ watch([loggedIn, chat.onlineStatus, () => props.chatUid, chat.initialized, () =>
         chat.updateGetGroupMessages(_groupMessageGetter)
       }
 
+      if (_scrollToMessageId) {
+        chat.scrollToMessage(_scrollToMessageId);
+      }
+
+      if (_localLoadMessageId) {
+        chat.loadMessageId.value = _localLoadMessageId;
+        localLoadMessageId.value = "";
+      }
+
       if (chatGroup.value) {
 
         let isChannel = (chatGroup.value.getMetadata() as any).isChannel;
@@ -117,7 +131,6 @@ watch([loggedIn, chat.onlineStatus, () => props.chatUid, chat.initialized, () =>
         }
 
       }
-
       await chat.clearGroupChatCount(props.chatUid);
     } else if (chatGroup.value) {
       chatGroup.value = undefined;