@bcc-code/vue-bcc-chat-ui 2.2.3 → 3.0.0-alpha.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "2.2.3",
+  "version": "3.0.0-alpha.1",
   "type": "module",
   "private": false,
   "files": [
@@ -23,20 +23,20 @@
   },
   "devDependencies": {
     "@types/markdown-it": "^13.0.7",
-    "@types/node": "^20.11.25",
+    "@types/node": "^20.11.30",
     "@vitejs/plugin-vue": "^4.6.2",
     "path": "^0.12.7",
-    "sass": "^1.71.1",
-    "typescript": "^5.4.2",
-    "vite": "^5.1.5",
+    "sass": "^1.72.0",
+    "typescript": "^5.4.3",
+    "vite": "^5.2.6",
     "vite-plugin-dts": "^3.7.3",
     "vue": "^3.4.21"
   },
   "dependencies": {
-    "@cometchat/chat-sdk-javascript": "^4.0.3",
-    "@cometchat/chat-uikit-vue": "^4.2.1",
-    "@cometchat/uikit-resources": "^4.2.2",
-    "@cometchat/uikit-shared": "^4.2.2",
+    "@cometchat/chat-sdk-javascript": "^4.0.4",
+    "@cometchat/chat-uikit-vue": "^4.3.1",
+    "@cometchat/uikit-resources": "^4.3.1",
+    "@cometchat/uikit-shared": "^4.3.2",
     "jwt-decode": "^4.0.0",
     "markdown-it": "^14.1.0"
   },

package/src/components/BccChatMessageBubble.vue

@@ -8,17 +8,17 @@ defineProps<{
 
 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;
+    const urlRegex = /([^\]]\(|[^\(]|^\(?)((?:https?|ftp):\/\/[^\s\]\)]*|www\.[^\s\]\)]+)(?=[\s\]\)](?!\()|$)/g;
 
     // Function to format a URL into a Markdown link
-    const formatUrlToMarkdown = (match: string) => {
-        let url = match;
+    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 `[${hostname}](${url})`;
+        return `${group1}[${hostname}](${url})`;
     };
 
 	// Replacing URLs in the string with Markdown links
@@ -33,14 +33,14 @@ function toMarkdownHtml(str: string) {
 </script>
 
 <template>
-	<div v-if="metadata.translated_message"
+	<div v-if="metadata && metadata.translated_message"
 		v-html="toMarkdownHtml(metadata.translated_message)"
 		class="bcc-chat-msg-bubble bcc-chat-msg-bubble--translation"
 	/>
 	<div
 		v-html="toMarkdownHtml(text)"
 		class="bcc-chat-msg-bubble"
-		:class="{'bcc-chat-msg-bubble--translated': !!metadata.translated_message}"
+		:class="{'bcc-chat-msg-bubble--translated': metadata && !!metadata.translated_message}"
 	/>  
 </template>
 

package/src/components/BccChatMessageList.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import {
+  onBeforeMount,
   onMounted,
   onUnmounted,
   ref,
@@ -15,7 +16,6 @@ import {
   messageComposerConfiguration,
   messageListConfiguration,
 } from "../chat/uiKit";
-import { OnlineStatus } from "../offline/types";
 
 const props = defineProps({
   chatUid: { type: String, required: true },
@@ -25,7 +25,6 @@ const componentId = ref(
   `component-${Math.random().toString(36).substring(2, 11)}`
 );
 const chatGroup = ref<Group>();
-const chatReady = ref(false);
 
 watch([loggedIn, ()=>props.chatUid, chat.initialized], async ([_loggedIn, _chatUid, _initialized]) => {
   if (_loggedIn && _chatUid && _initialized) {
@@ -36,12 +35,19 @@ watch([loggedIn, ()=>props.chatUid, chat.initialized], async ([_loggedIn, _chatU
   }
 }, { immediate: true });
 
-watch(chat.onlineStatus, async (status: OnlineStatus) => {
-  if (status === "online") {
+watch(chat.onlineStatus, async () => {
+  await tryConnect(false);
+});
+
+async function tryConnect(force: boolean) {
+  if (chat.onlineStatus.value === "online" || force) {
     await connect(componentId.value);
   }
-  if (!chatReady.value) chatReady.value = true;
-}, { immediate: true });
+}
+
+onBeforeMount(() => {
+  tryConnect(true);
+});
 
 onMounted(() => {
   watchAndApplyStyle(".bcc-chat-message-list-wrapper", [
@@ -71,23 +77,21 @@ onMounted(() => {
       shadowDomSelector: "link-preview",
     },
     {
-      selector: ".cc__messageinput",
+      selector: ".messageinput",
       style: {
         "border-radius": "8px 8px 0 0",
         "box-shadow":
           "0px -1px 2px 0px rgba(17, 24, 39, 0.05), 1px -1px 3px 0px rgba(17, 24, 39, 0.1)",
       },
-      shadowDomSelector: "cometchat-message-input",
     },
     {
-      selector: ".cc__messageinput-input",
+      selector: ".messageinput-input",
       style: {
         "font-size": "16px",
         padding: "8px",
         "max-height": "none",
         height: "64px",
       },
-      shadowDomSelector: "cometchat-message-input",
     },
   ]);
 });
@@ -100,7 +104,7 @@ onUnmounted(async () => {
 
 <template>
   <div class="bcc-chat-message-list-wrapper">
-    <div v-if="chatGroup && chatReady" class="bcc-chat-message-list">
+    <div v-if="chatGroup && (chat.connected.value || chat.onlineStatus.value === 'offline')" class="bcc-chat-message-list">
       <CometChatMessages
         :hideMessageHeader="true"
         :disableSoundForMessages="true"