style: parsed some of the incomming markdown such that headers bigger than h4 will be reduced to enhance readibilty.

package-lock.json

@@ -12,6 +12,7 @@
         "@quasar/extras": "^1.17.0",
         "axios": "^1.11.0",
         "chart.js": "^4.5.0",
+        "markdown-it": "^14.1.0",
         "pinia": "^3.0.3",
         "pinia-plugin-persistedstate": "^4.4.1",
         "quasar": "^2.18.2",
@@ -24,6 +25,7 @@
         "@eslint/js": "^9.14.0",
         "@intlify/unplugin-vue-i18n": "^4.0.0",
         "@quasar/app-vite": "^2.1.0",
+        "@types/markdown-it": "^14.1.2",
         "@types/node": "^20.5.9",
         "@vue/eslint-config-typescript": "^14.4.0",
         "@vue/test-utils": "^2.4.6",
@@ -1900,6 +1902,31 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/markdown-it": {
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
+      "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/linkify-it": "^5",
+        "@types/mdurl": "^2"
+      }
+    },
+    "node_modules/@types/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/mime": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz",
@@ -2900,7 +2927,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
       "license": "Python-2.0"
     },
     "node_modules/array-flatten": {
@@ -6540,6 +6566,15 @@
         "url": "https://github.com/sponsors/antonk52"
       }
     },
+    "node_modules/linkify-it": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+      "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+      "license": "MIT",
+      "dependencies": {
+        "uc.micro": "^2.0.0"
+      }
+    },
     "node_modules/lint-staged": {
       "version": "16.1.2",
       "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-16.1.2.tgz",
@@ -7057,6 +7092,23 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/markdown-it": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+      "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1",
+        "entities": "^4.4.0",
+        "linkify-it": "^5.0.0",
+        "mdurl": "^2.0.0",
+        "punycode.js": "^2.3.1",
+        "uc.micro": "^2.1.0"
+      },
+      "bin": {
+        "markdown-it": "bin/markdown-it.mjs"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -7066,6 +7118,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/mdurl": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+      "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==",
+      "license": "MIT"
+    },
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -7971,6 +8029,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/punycode.js": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+      "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/qs": {
       "version": "6.14.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz",
@@ -9634,6 +9701,12 @@
         "typescript": ">=4.8.4 <5.9.0"
       }
     },
+    "node_modules/uc.micro": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+      "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+      "license": "MIT"
+    },
     "node_modules/ufo": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.1.tgz",

package.json

@@ -17,6 +17,7 @@
     "@quasar/extras": "^1.17.0",
     "axios": "^1.11.0",
     "chart.js": "^4.5.0",
+    "markdown-it": "^14.1.0",
     "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.4.1",
     "quasar": "^2.18.2",
@@ -29,6 +30,7 @@
     "@eslint/js": "^9.14.0",
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@quasar/app-vite": "^2.1.0",
+    "@types/markdown-it": "^14.1.2",
     "@types/node": "^20.5.9",
     "@vue/eslint-config-typescript": "^14.4.0",
     "@vue/test-utils": "^2.4.6",

src/modules/chatbot/components/dialogue-phrase.vue

@@ -1,10 +1,30 @@
 <script setup lang="ts">
-
+import { computed } from 'vue';
+import MarkdownIt from 'markdown-it'
 
 const props = defineProps<{
     text: string;
     sent: boolean;
 }>();
+
+// Initialize Markdown parser
+const md = new MarkdownIt({
+    breaks: true,       // Support line breaks
+    linkify: true,      // Make URLs clickable
+    html: false         // Prevent raw HTML injection
+})
+
+// Removes all the h1,h2,h3 to make the Md more user friendly
+const cleanMarkdown = (markdown: string): string => {
+    if (!markdown) return ''
+    return markdown.replace(/^#{1,3}\s.*$/gm, '')
+}
+
+// Compute parsed content
+const parsedText = computed((): string => {
+    const cleaned = cleanMarkdown(props.text || '')
+    return md.render(cleaned)
+})
 </script>
 
 <template>
@@ -15,6 +35,7 @@ const props = defineProps<{
         class="bubble"
         :class="sent ? 'user' : 'ai'"
     >
+        <div v-html="parsedText"></div>
     </q-chat-message>
 </template>