From e44e2c1e203886db5f839d7ceac1b093baf4c76d Mon Sep 17 00:00:00 2001
From: Nic D <n_drolet@hotmail.ca>
Date: Wed, 14 Jan 2026 16:05:05 -0500
Subject: [PATCH] fix(chatbot): fix chatbot speech formatting, will need to do
 more work, change from drawer setup

---
 .../chatbot/components/chatbot-drawer.vue     |  2 +-
 .../chatbot/components/dialogue-phrase.vue    | 69 +++++++++++--------
 2 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/src/modules/chatbot/components/chatbot-drawer.vue b/src/modules/chatbot/components/chatbot-drawer.vue
index 59ea63f..3ad5725 100644
--- a/src/modules/chatbot/components/chatbot-drawer.vue
+++ b/src/modules/chatbot/components/chatbot-drawer.vue
@@ -71,7 +71,7 @@
 
 <style scoped>
 :deep(.q-drawer--right) {
-    background: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.7);
     width: 50vw !important;
 }
 
diff --git a/src/modules/chatbot/components/dialogue-phrase.vue b/src/modules/chatbot/components/dialogue-phrase.vue
index c6a4f45..5ff9c19 100644
--- a/src/modules/chatbot/components/dialogue-phrase.vue
+++ b/src/modules/chatbot/components/dialogue-phrase.vue
@@ -3,7 +3,7 @@
     lang="ts"
 >
     import { computed } from 'vue';
-    import MarkdownIt from 'markdown-it'
+    // import MarkdownIt from 'markdown-it'
     import { useAuthStore } from 'src/stores/auth-store';
     import type { Message } from 'src/modules/chatbot/models/dialogue-message.model';
     import { useI18n } from 'vue-i18n';
@@ -15,41 +15,54 @@
         message: Message;
     }>();
 
+    const message_text = computed(() => message.text.includes('chatbot.') ? t(message.text) : message.text)
+
+    const is_error = computed(() => message.text.includes('NO_REPLY_RECEIVED') || message.text.includes('NO_REPLY_RECEIVED'));
     // Initialize Markdown parser
-    const md = new MarkdownIt({
-        breaks: false,       // Support line breaks
-        linkify: true,      // Make URLs clickable
-        html: false         // Prevent raw HTML injection
-    })
+    // const md = new MarkdownIt({
+    //     // breaks: false,       // 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(/\r\n/g, '\n')                         // normalize Windows line endings
-            .replace(/([.!?])(\s+)(?=[A-Z])/g, '$1\n')      // insert line break after sentence-ending punctuation
-            .replace(/\n{3,}/g, '\n\n')                     // squash triple+ line breaks
-            .replace(/^#{1,3}\s(.*)$/gm, '#### $1')         // downgrade headings
-    }
+    // // Removes all the h1,h2,h3 to make the Md more user friendly
+    // const cleanMarkdown = (markdown: string): string => {
+    //     if (!markdown) return ''
+    //     return markdown
+    //         .replace(/\r\n/g, '\n')                         // normalize Windows line endings
+    //         .replace(/([.!?])(\s+)(?=[A-Z])/g, '$1\n')      // insert line break after sentence-ending punctuation
+    //         .replace(/\n{3,}/g, '\n\n')                     // squash triple+ line breaks
+    //         .replace(/^#{1,3}\s(.*)$/gm, '#### $1')         // downgrade headings
+    // }
 
-    // Compute parsed content
-    const parsedText = computed((): string => {
-        const cleaned = cleanMarkdown(message.text || '')
-        if (cleaned.includes('chatbot.')) {
-            const translated_message = t(message.text);
-            return md.render(translated_message);
-        }
-        return md.render(cleaned);
-    })
+    // // Compute parsed content
+    // const parsedText = computed((): string => {
+    //     const cleaned = cleanMarkdown(message.text || '')
+    //     if (cleaned.includes('chatbot.')) {
+    //         const translated_message = t(message.text);
+    //         return md.render(translated_message);
+    //     }
+    //     return md.render(cleaned);
+    // })
 </script>
 
 <template>
     <q-chat-message
         :sent="message.sent"
         :name="message.sent ? auth_store.user?.first_name : 'TargoBot'"
-        :bg-color="message.sent ? 'accent' : 'white'"
+        :bg-color="message.sent ? 'accent' : 'info'"
         :text-color="message.sent ? 'white' : ''"
-    >
-        <div v-html="parsedText"></div>
-    </q-chat-message>
+        :text="[message_text]"
+    />
 </template>
+
+<style scoped>
+:deep(.q-message-name) {
+    color: white;
+    font-weight: bold;
+}
+
+:deep(.q-message-text) {
+    white-space: pre-wrap;
+}
+</style>
\ No newline at end of file