@bcc-code/vue-bcc-chat-ui 2.2.3 → 2.3.0

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": "2.3.0",
   "type": "module",
   "private": false,
   "files": [

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", [
@@ -100,7 +106,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"