@bcc-code/vue-bcc-chat-ui 5.6.4 → 5.7.0

package/package.json

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

package/src/components/BccChatMessageBubble.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import MarkdownIt from 'markdown-it'
-import { BaseMessage, CometChat, MediaMessage, User } from '@cometchat/chat-sdk-javascript'
-import DOMPurify from 'dompurify';
-import { inject, ref } from 'vue';
+import { BaseMessage, CometChat, MediaMessage, User } from '@cometchat/chat-sdk-javascript';
 import { CometChatTheme, fontHelper } from '@cometchat/uikit-resources';
-import BccReplyPreview from "./BccReplyPreview.vue";
-import BccImageBubble from './BccImageBubble.vue';
+import { inject, ref } from 'vue';
+import chat from "../chat";
 import { offlineStore } from '../offline';
+import BccImageBubble from './BccImageBubble.vue';
+import BccReplyPreview from "./BccReplyPreview.vue";
 
 const props = defineProps({
 	id: {
@@ -42,51 +41,6 @@ const props = defineProps({
   }
 })
 
-function toMarkdownHtml(str: string) {
-	str = formatMentionsInText(str);
-
-	const md = new MarkdownIt({
-		breaks: true,
-		typographer: true,
-		linkify: true,
-		html: true
-	});
-
-	str = md.render(str);
-
-	str = DOMPurify.sanitize(str, {
-		ALLOWED_TAGS: [
-			"a", // links
-			"ul", "ol", "li", // lists
-			"p", // paragraphs
-			"b", "strong", // bold
-			"i", "em", // italics
-			"u", // underline
-			"s", // strikethrough
-			"img", // images
-			"blockquote", // indented text
-			"hr", // horizontal line
-			"pre", // constant width text
-			"br", // newline 
-			"div" // newline on mobile 
-		]
-	})
-
-	return str
-}
-
-function formatMentionsInText(text: string) {
-	return text.replace(/<@uid:(.*?)>/g, (_match: string, uid: string) => {
-		const user = (props.mentionedUsers || []).find((user) => user.getUid() === uid);
-		// Check if a userName exists for the given uid; if not, keep the original match
-		if (user) {
-			return `**${user.getName()}**`;
-		} else {
-			return `**@unknown**`;
-		}
-	});
-}
-
 let parentMsgRef = ref<BaseMessage>();
 if (props.metadata?.replyToMessageId) {
 	let guidString = props.guid?.toString()
@@ -141,9 +95,9 @@ const replyPreviewStyle = {
 				:src="src"
 			/>
 		</div>
-		<div v-if="text && metadata && metadata.translated_message" v-html="toMarkdownHtml(metadata.translated_message)"
+		<div v-if="text && metadata && metadata.translated_message" v-html="chat.toMarkdownHtml(metadata.translated_message, mentionedUsers)"
 			class="bcc-chat-msg-bubble bcc-chat-msg-bubble--translation" />
-		<div v-if="text" v-html="toMarkdownHtml(text)" class="bcc-chat-msg-bubble" :id="id"
+		<div v-if="text" v-html="chat.toMarkdownHtml(text, mentionedUsers)" class="bcc-chat-msg-bubble" :id="id"
 			:class="{ 'bcc-chat-msg-bubble--translated': metadata && !!metadata.translated_message }" />
 	</div>
 </template>

package/src/components/BccChatMessageList.vue

@@ -32,6 +32,7 @@ const props = defineProps({
     required: false,
   },
   loadMessageId: { type: String, required: false, default: "" },
+  displayNoMessagesText: { type: Boolean, required: false, default: true },
 });
 
 const componentId = ref(
@@ -42,7 +43,7 @@ const chatGroupNotFound = ref(false);
 
 const isChatMessagesEmpty = ref(false);
 
-const emit = defineEmits(['groupMembersFetched']);
+const emit = defineEmits(['groupMembersFetched', 'chatEmpty']);
 const groupMembers = ref<ParticipantInfo[]>();
 
 const chatInstance: Ref<ChatInstance> = ref({
@@ -136,6 +137,7 @@ watch([loggedIn, chat.onlineStatus, () => props.chatUid, chat.initialized, () =>
             affix: 'prepend'
           }).total === 0) {
             isChatMessagesEmpty.value = true;
+            emit('chatEmpty');
           } else {
             isChatMessagesEmpty.value = false;
           }
@@ -294,8 +296,8 @@ function closeScheduledMessage() {
     <div v-else class="bcc-chat-message-list-offline">
       <span>Loading...</span>
     </div>
-    <div v-if="isChatMessagesEmpty && chatGroup" class="bcc-chat-message-list-offline pointer-events-none">
-      <span>No messages have been sent yet</span>
+    <div v-if="isChatMessagesEmpty && chatGroup && displayNoMessagesText" class="bcc-chat-message-list-offline pointer-events-none">
+        <span>No messages have been sent yet</span>
     </div>
   </div>
 </template>

package/src/components/BccReplyPreview.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import { BaseMessage, MediaMessage } from "@cometchat/chat-sdk-javascript";
 import { CometChatTheme, CometChatUIKitConstants } from "@cometchat/uikit-resources";
 import { inject, ref } from "vue";
+import chat from '../chat';
+import { getMessageTextPreview, getSenderDisplayName, proxyImage } from "../chat/data";
 import { ReplyPreviewStyle } from "../chat/replyStyle";
-import { BaseMessage, MediaMessage } from "@cometchat/chat-sdk-javascript";
-import { getMessageTextPreview, proxyImage, getSenderDisplayName } from "../chat/data";
 
 const props = defineProps({
   replyToMessage: { type: BaseMessage },
@@ -64,9 +65,7 @@ function getThumbnailURL() {
       <p class="bcc__reply_preview__title" :style="titleStyle()">
         {{ props.titlePrefix + ( getSenderDisplayName(props.replyToMessage) || "" ) || "Reply to ..." }}
       </p>
-      <p class="cc__preview__subtitle" :style="subtitleStyle()">
-        {{ getMessageTextPreview(props?.replyToMessage) || "‎" }}
-      </p>
+      <p class="cc__preview__subtitle" v-html="chat.toMarkdownHtml(getMessageTextPreview(props?.replyToMessage), props.replyToMessage?.getMentionedUsers()) || '‎'" :style="subtitleStyle()"/>
     </div>
   </div>
 </template>
@@ -92,7 +91,7 @@ function getThumbnailURL() {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  -webkit-line-clamp: 1;
+  -webkit-line-clamp: 8;
   word-break: break-all;
 }
 .bcc__reply_preview__content > .bcc__reply_preview__title {