@bcc-code/vue-bcc-chat-ui 2.1.0 → 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.1.0",
+  "version": "2.1.1",
   "type": "module",
   "private": false,
   "files": [

package/src/components/BccChatMessageBubble.vue

@@ -4,11 +4,29 @@ 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="text" :options="{
-		linkify: true,
+	<vue-markdown :source="linkify(text)" :options="{
 		typographer: true,
 	}" class="bcc-chat-msg-bubble" />  
 </template>
@@ -18,11 +36,12 @@ defineProps<{
 	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;