@bcc-code/vue-bcc-chat-ui 2.0.2 → 2.1.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@bcc-code/vue-bcc-chat-ui",
   "author": "bcc-code",
   "license": "Apache-2.0",
-  "version": "2.0.2",
+  "version": "2.1.1",
   "type": "module",
   "private": false,
   "files": [
@@ -36,7 +36,8 @@
     "@cometchat/chat-uikit-vue": "^4.2.1",
     "@cometchat/uikit-resources": "^4.2.2",
     "@cometchat/uikit-shared": "^4.2.2",
-    "jwt-decode": "^4.0.0"
+    "jwt-decode": "^4.0.0",
+    "vue-markdown-render": "^2.1.1"
   },
   "scripts": {
     "dev": "vite",

package/src/components/BccChatMessageBubble.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import VueMarkdown from 'vue-markdown-render'
+
+defineProps<{
+	text: string
+}>()
+
+// Replacing URLs in the string with Markdown links
+function linkify(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) => {
+        let url = match;
+        // Prepend "http://" to URLs starting with "www."
+        if (url.startsWith('www.')) {
+            url = 'http://' + url;
+        }
+        const hostname = new URL(url).hostname;
+        return `[${hostname}](${url})`;
+    };
+
+    return str.replace(urlRegex, formatUrlToMarkdown);
+}
+</script>
+
+<template>
+	<vue-markdown :source="linkify(text)" :options="{
+		typographer: true,
+	}" class="bcc-chat-msg-bubble" />  
+</template>
+
+<style lang="scss">
+.bcc-chat-msg-bubble {
+	padding: 8px 12px;
+	width: auto;
+	max-width: 500px;
+	line-height: 1.2;
+	font: 400 14px Archivo, sans-serif, Inter;
+
+	p {
+		color: var(--cc__text-color);
+		line-height: 1.2;		
+		word-break: break-word;
+		text-align: left;
+		white-space: pre-line;
+	}
+
+	p:first-child {
+		margin-top: 0;
+	}
+	p:last-child {
+		margin-bottom: 0;
+	}
+
+	a {
+		color: var(--cc__link-color);
+		text-decoration: underline;
+		font-weight: 500;
+	}
+
+	ul {
+		padding-left: 16px;
+	}
+}
+</style>

package/src/components/BccChatMessageList.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import {
-  nextTick,
-  onBeforeMount,
   onMounted,
   onUnmounted,
   ref,
-  watchEffect,
+  watch,
 } from "vue";
 import chat from "../chat";
 import { connect, disconnect } from "../chat/connection";
@@ -17,6 +15,7 @@ import {
   messageComposerConfiguration,
   messageListConfiguration,
 } from "../chat/uiKit";
+import { OnlineStatus } from "../offline/types";
 
 const props = defineProps({
   chatUid: { type: String, required: true },
@@ -26,6 +25,23 @@ 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) {
+    chatGroup.value = (await chat.getGroup(props.chatUid)) ?? undefined;
+    await chat.clearGroupChatCount(props.chatUid);  
+  } else if (chatGroup.value) {
+    chatGroup.value = undefined;
+  }
+}, { immediate: true });
+
+watch(chat.onlineStatus, async (status: OnlineStatus) => {
+  if (status === "online") {
+    await connect(componentId.value);
+  }
+  if (!chatReady.value) chatReady.value = true;
+}, { immediate: true });
 
 onMounted(() => {
   watchAndApplyStyle(".bcc-chat-message-list-wrapper", [
@@ -39,11 +55,21 @@ onMounted(() => {
       style: { color: "var(--cc__text-color)" },
       shadowDomSelector: "cometchat-text-bubble",
     },
+    {
+      selector: ".cc__linkpreview",
+      style: { height: "auto" },
+      shadowDomSelector: "link-preview",
+    },
     {
       selector: ".cc__linkpreview-title",
       style: { color: "var(--cc__text-color)" },
       shadowDomSelector: "link-preview",
     },
+    {
+      selector: ".cc__linkpreview-favicon",
+      style: { 'flex-shrink': '0' },
+      shadowDomSelector: "link-preview",
+    },
     {
       selector: ".cc__messageinput",
       style: {
@@ -66,27 +92,15 @@ onMounted(() => {
   ]);
 });
 
-onBeforeMount(async () => {
-  await connect(componentId.value);
-});
-
 onUnmounted(async () => {
   await disconnect(componentId.value);
 });
 
-watchEffect(async () => {
-  if (loggedIn.value && props.chatUid && chat.initialized.value) {
-    chatGroup.value = (await chat.getGroup(props.chatUid)) ?? undefined;
-    await chat.clearGroupChatCount(props.chatUid);
-  } else {
-    chatGroup.value = undefined;
-  }
-});
 </script>
 
 <template>
   <div class="bcc-chat-message-list-wrapper">
-    <div v-if="chatGroup" class="bcc-chat-message-list">
+    <div v-if="chatGroup && chatReady" class="bcc-chat-message-list">
       <CometChatMessages
         :hideMessageHeader="true"
         :disableSoundForMessages="true"
@@ -96,6 +110,9 @@ watchEffect(async () => {
         :hideDetails="true"
         :group="chatGroup"
       />
+      <div v-if="chat.onlineStatus.value === 'offline' || !chat.connected.value" class="bcc-chat-message-composer-offline">
+        <span>Waiting for connection...</span>
+      </div>
     </div>
     <div class="bcc-chat-message-list-offline">
       <span>Waiting for connection...</span>
@@ -147,6 +164,7 @@ accent900: text in avatar
   --cc__accent800: rgba(62, 142, 117, 0.82);
   --cc__accent900: #f3faf7;
   --cc__text-color: #000;
+  --cc__link-color: #57639e;
 
   @media (prefers-color-scheme: dark) {
     --cc__primary: #57639e;
@@ -164,6 +182,7 @@ accent900: text in avatar
     --cc__accent800: rgba(98, 116, 174, 0.92);
     --cc__accent900: #f3faf7;
     --cc__text-color: #fff;
+    --cc__link-color: #cfeac8;
   }
 
   /* 1. Wrapper for Messages component */
@@ -194,8 +213,6 @@ accent900: text in avatar
     top: -96px;
     height: 96px;
     width: 100%;
-    box-sizing: border-box;
-    padding: 16px 14px;
     color: rgb(176, 176, 176);
     font: 700 1rem sans-serif;
 
@@ -207,7 +224,7 @@ accent900: text in avatar
       justify-content: center;
       align-items: center;
       background: rgba(255, 255, 255, 0.75);
-      border-radius: 12px;
+      border-radius: 8px 8px 0 0;
     }
   }
 }