@bcc-code/vue-bcc-chat-ui 2.1.0 → 2.1.2

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.2",
   "type": "module",
   "private": false,
   "files": [
@@ -22,6 +22,7 @@
     "vue": "^3.0.0"
   },
   "devDependencies": {
+    "@types/markdown-it": "^13.0.7",
     "@types/node": "^20.11.25",
     "@vitejs/plugin-vue": "^4.6.2",
     "path": "^0.12.7",
@@ -37,7 +38,7 @@
     "@cometchat/uikit-resources": "^4.2.2",
     "@cometchat/uikit-shared": "^4.2.2",
     "jwt-decode": "^4.0.0",
-    "vue-markdown-render": "^2.1.1"
+    "markdown-it": "npm:@esm-bundle/markdown-it@^13.0.1"
   },
   "scripts": {
     "dev": "vite",

package/src/components/BccChatMessageBubble.vue

@@ -1,16 +1,37 @@
 <script setup lang="ts">
-import VueMarkdown from 'vue-markdown-render'
+import markdownit from 'markdown-it/esm';
 
 defineProps<{
 	text: string
 }>()
+
+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) => {
+        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})`;
+    };
+
+	// Replacing URLs in the string with Markdown links
+	const outStr = str.replace(urlRegex, formatUrlToMarkdown);
+	const md = new markdownit({
+		typographer: true,
+	});
+
+	return md.render(outStr);
+}
 </script>
 
 <template>
-	<vue-markdown :source="text" :options="{
-		linkify: true,
-		typographer: true,
-	}" class="bcc-chat-msg-bubble" />  
+	<div v-html="toMarkdownHtml(text)" class="bcc-chat-msg-bubble" />  
 </template>
 
 <style lang="scss">
@@ -18,11 +39,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;