@bcc-code/vue-bcc-chat-ui 3.1.0 → 3.2.0

package/package.json

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

package/src/components/BccChatMessageBubble.vue

@@ -1,28 +1,27 @@
 <script setup lang="ts">
 import MarkdownIt from 'markdown-it'
+import { User } from '@cometchat/chat-sdk-javascript'
 
-defineProps<{
+const props = defineProps<{
 	text: string,
 	metadata: Record<string, any>,
+	mentionedUsers: User[],
 }>()
 
 function toMarkdownHtml(str: string) {
-    // Regex to match URLs that may or may not start with "www." and are not already part of a Markdown link
-    const urlRegex = /([^\]]\(|[^\(]|^\(?)((?:https?|ftp):\/\/[^\s\]\)]*|www\.[^\s\]\)]+)(?=[\s\]\)](?!\()|$)/g;
-
-    // Function to format a URL into a Markdown link
-    const formatUrlToMarkdown = (_match: string, group1: string, group2: string) => {
-        let url = group2;
-        // Prepend "http://" to URLs starting with "www."
-        if (url.startsWith('www.')) {
-            url = 'http://' + url;
-        }
-        const hostname = new URL(url).hostname;
-        return `${group1}[${hostname}](${url})`;
-    };
+	// Regex to match URLs that may or may not start with "www." and are not already part of a Markdown link
+	const urlRegex = /([^\]]\(|[^\(]|^\(?)((?:https?|ftp):\/\/[^\s\]\)]*|www\.[^\s\]\)]+)(?=[\s\]\)](?!\()|$)/g;
 
 	// Replacing URLs in the string with Markdown links
-	const outStr = str.replace(urlRegex, formatUrlToMarkdown);
+	let outStr = str.replace(urlRegex, formatUrlToMarkdown);
+
+	outStr = formatMentionsInText(outStr);
+
+	outStr = cleanUpHTML(outStr);
+		if (outStr.includes('<div>')) {
+			console.log('outStr', outStr);
+		}
+
 	const md = new MarkdownIt({
 		breaks: true,
 		typographer: true,
@@ -30,6 +29,43 @@ function toMarkdownHtml(str: string) {
 
 	return md.render(outStr);
 }
+
+// Function to format a URL into a Markdown link
+function formatUrlToMarkdown(_match: string, group1: string, group2: string) {
+	let url = group2;
+	// Prepend "http://" to URLs starting with "www."
+	if (url.startsWith('www.')) {
+		url = 'http://' + url;
+	}
+	const hostname = new URL(url).hostname;
+	return `${group1}[${hostname}](${url})`;
+};
+
+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**`;
+    }
+  });
+}
+
+// Due to how mobile adds line breaks we need to remove them
+function cleanUpHTML(input: string) {
+  // Step 1: Replace <div><br></div> with <br>
+  let cleaned = input.replace(/<div><br><\/div>/g, '\n');
+  
+  // Step 2: Replace opening <div> that follows any content or at the start with <br>
+  cleaned = cleaned.replace(/(^|<\/div>)(<div>)/g, '$1\n');
+  
+  // Step 3: Remove all remaining <div> and </div> tags
+  cleaned = cleaned.replace(/<\/?div>/g, '');
+  
+  return cleaned;
+}
 </script>
 
 <template>
@@ -58,7 +94,7 @@ function toMarkdownHtml(str: string) {
 		line-height: 1.2;		
 		word-break: break-word;
 		text-align: left;
-		white-space: pre-line;
+		white-space: normal;
 		margin: 8px 0;
 	}
 

package/src/components/BccChatMessageList.vue

@@ -13,7 +13,6 @@ import { loggedIn } from "../chat/login";
 import { CometChatMessages } from "@cometchat/chat-uikit-vue";
 import { Group } from "@cometchat/chat-sdk-javascript";
 import { watchAndApplyStyle } from "../chat/styleFix";
-//import { CometChat } from "@cometchat/chat-sdk-javascript";
 import {
   messageComposerConfiguration,
   messageListConfiguration,
@@ -29,7 +28,7 @@ const componentId = ref(
 );
 const chatGroup = ref<Group>();
 
-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);  
@@ -49,8 +48,8 @@ watch(chat.onlineMode, () => {
 });
 
 const showChat = ref(false);
-watchEffect(() => {
-  if (chatGroup && (chat.connected.value || chat.onlineStatus.value == 'offline')){
+watch([chat.connected, chat.onlineStatus], () => {
+  if (chatGroup.value && (chat.connected.value || chat.onlineStatus.value == 'offline')){
     showChat.value = true;
   } else {
     // This line is a trade-off.
@@ -61,7 +60,7 @@ watchEffect(() => {
     // wouldn't be lost...
     showChat.value = false;
   }
-})
+}, { immediate: true });
 
 let _connecting = false;
 async function tryConnect(force: boolean) {
@@ -130,11 +129,6 @@ onUnmounted(async () => {
   await disconnect(componentId.value);
 });
 
-// const cometChatStatus = ref('');
-// function getCometChatStatus(){
-//   cometChatStatus.value = new Date().getTime() + CometChat.getConnectionStatus();
-// }
-
 </script>
 
 <template>
@@ -148,8 +142,7 @@ onUnmounted(async () => {
       <div>CometChat: {{cometChatStatus}} <button @click="getCometChatStatus()">[refresh]</button></div>
     </div> -->
     <div v-if="showChat" class="bcc-chat-message-list">
-
-      <CometChatMessages          
+      <CometChatMessages
         :hideMessageHeader="true"
         :disableSoundForMessages="true"
         :messageComposerConfiguration="messageComposerConfiguration"
@@ -274,7 +267,8 @@ accent900: text in avatar
     top: -96px;
     height: 96px;
     width: 100%;
-    color: rgb(176, 176, 176);
+    backdrop-filter: blur(4px);
+    color: var(--cc__text-color);
     font: 700 1rem sans-serif;
 
     /* 2.1 Text of Messages Composer offline view */
@@ -284,7 +278,6 @@ accent900: text in avatar
       display: flex;
       justify-content: center;
       align-items: center;
-      background: rgba(255, 255, 255, 0.75);
       border-radius: 8px 8px 0 0;
     }
   }