fix(chatbot): correct formatting issue with text display, now displays markdown properly as html

src/boot/axios.ts

@@ -16,7 +16,8 @@ declare module 'vue' {
 // for each client)
 const api = axios.create({ 
     baseURL: import.meta.env.VITE_TARGO_BACKEND_URL, 
-    withCredentials: true 
+    withCredentials: true,
+    timeout: 5 * 60 * 1000, 
 });
 
 export default defineBoot(({ app }) => {

src/i18n/en-ca/index.ts

@@ -7,6 +7,7 @@ export default {
         error: {
             NO_REPLY_RECEIVED: "encountered an error while waiting for chatbot to reply",
             SEND_MESSAGE_FAILED: "unable to send message to chatbot",
+            GENERIC_RESPONSE_ERROR: "An error was encountered while waiting for the chatbot to reply, please try again.",
         },
     },
 

src/i18n/fr-ca/index.ts

@@ -6,7 +6,8 @@ export default {
         chat_thinking: "Réflexion en cours...",
         error: {
             NO_REPLY_RECEIVED: "Une erreur est survenu lors de la réception de la réponse du chatbot",
-            SEND_MESSAGE_FAILED: "Une erreur est survenu lors de l'envoi de votre message",
+            SEND_MESSAGE_FAILED: "Une erreur est survenue lors de l'envoi de votre message",
+            GENERIC_RESPONSE_ERROR: "Le chatbot ne réponds pas pour le moment, veuillez réessayer.",
         },
     },
 

src/modules/auth/components/login-connection-panel.vue

@@ -12,6 +12,15 @@
     // const is_remembered = ref<boolean>(false);
     const is_employee_email = computed(() => email.value.includes('@targ'));
     const is_game_time = computed(() => email.value.includes('allumette'));
+
+    const onSubmitConnectionRequest = () => {
+        console.log('submit requested');
+        if (is_employee_email.value) return;
+    }
+
+    const onClickEmployeeConnect = () => {
+        auth_api.oidcLogin();
+    }
 </script>
 
 <template>
@@ -27,28 +36,31 @@
             />
         </div>
 
-        <div class="q-pt-sm q-px-xl q-pb-lg ">
+        <div class="q-px-xl q-pb-lg ">
-            <q-card-section class="text-center text-uppercase">
+            <div class="text-h6 text-weight-bold text-center text-uppercase q-py-sm">
-                <div class="text-h6 text-weight-bold">
+                {{ $t('login.page_header') }}
-                    {{ $t('login.page_header') }}
+            </div>
-                </div>
-            </q-card-section>
 
-            <q-form @submit="auth_api.login">
+            <q-form
+                @submit="onSubmitConnectionRequest"
+                autocomplete="on"
+            >
                 <q-input
                     v-model="email"
                     dense
                     outlined
+                    label-slot
+                    name="email"
                     color="accent"
                     label-color="accent"
                     class="rounded-5 inset-shadow bg-white"
-                    label-slot
                     input-class="text-h6 text-primary"
                 >
                     <template #label>
                         <span class="text-weight-bolder text-uppercase text-overline"> {{ $t('login.email') }} </span>
                     </template>
                 </q-input>
+
                 <!-- Stay-logged-in section, removed temporarly until customer module is up -->
                 <!-- <q-card-section
                     horizontal
@@ -86,58 +98,59 @@
                 <!-- <q-card-section class="text-center q-pa-none q-mt-none">
                     <RouterLink disabled class="text-primary" to="/signup">{{ $t('loginPage.signUp') }}</RouterLink>
                 </q-card-section> -->
+
+                <q-card-section class="row q-pt-sm">
+                    <q-separator
+                        size="2px"
+                        color="accent"
+                        class="col self-center"
+                    />
+                    <span class="col text-accent text-weight-bolder text-center text-uppercase self-center">{{
+                        $t('shared.misc.or') }}</span>
+                    <q-separator
+                        size="2px"
+                        color="accent"
+                        class="col self-center"
+                    />
+                </q-card-section>
+
+                <q-card-section class="column q-px-sm q-pt-none">
+                    <q-btn
+                        rounded
+                        push
+                        disabled
+                        color="blue-grey-7"
+                        icon="img:src/assets/Facebook-f_Logo-White-Logo.wine.svg"
+                        :label="$t('login.button.facebook')"
+                        class="full-width row q-mb-sm"
+                    >
+                        <q-tooltip
+                            anchor="top middle"
+                            class="bg-primary"
+                        >{{ $t('login.tooltip.coming_soon') }}</q-tooltip>
+                    </q-btn>
+                    <q-slide-transition>
+                        <div v-if="is_employee_email">
+                            <transition
+                                slow
+                                enter-active-class="animated zoomIn"
+                                leave-active-class="animated zoomOut"
+                            >
+                                <q-btn
+                                    push
+                                    rounded
+                                    type="submit"
+                                    color="accent"
+                                    icon="img:src/assets/logo-targo-simple.svg"
+                                    :label="$t('login.button.employee')"
+                                    class="full-width row"
+                                    @click="onClickEmployeeConnect"
+                                />
+                            </transition>
+                        </div>
+                    </q-slide-transition>
+                </q-card-section>
             </q-form>
-
-            <q-card-section class="row q-pt-sm">
-                <q-separator
-                    size="2px"
-                    color="accent"
-                    class="col self-center"
-                />
-                <span class="col text-accent text-weight-bolder text-center text-uppercase self-center">{{
-                    $t('shared.misc.or') }}</span>
-                <q-separator
-                    size="2px"
-                    color="accent"
-                    class="col self-center"
-                />
-            </q-card-section>
-
-            <q-card-section class="column q-px-sm q-pt-none">
-                <q-btn
-                    rounded
-                    push
-                    disabled
-                    color="blue-grey-7" 
-                    icon="img:src/assets/Facebook-f_Logo-White-Logo.wine.svg"
-                    :label="$t('login.button.facebook')"
-                    class="full-width row q-mb-sm"
-                >
-                    <q-tooltip
-                        anchor="top middle"
-                        class="bg-primary"
-                    >{{ $t('login.tooltip.coming_soon') }}</q-tooltip>
-                </q-btn>
-                <q-slide-transition>
-                    <div v-if="is_employee_email">
-                        <transition
-                            slow
-                            enter-active-class="animated zoomIn"
-                            leave-active-class="animated zoomOut"
-                        >
-                            <q-btn
-                                push
-                                rounded
-                                color="accent"
-                                icon="img:src/assets/logo-targo-simple.svg"
-                                :label="$t('login.button.employee')"
-                                class="full-width row"
-                                @click="auth_api.oidcLogin"
-                            />
-                        </transition>
-                    </div>
-                </q-slide-transition>
-            </q-card-section>
         </div>
     </q-card>
     <div v-if="is_game_time">

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

@@ -2,49 +2,33 @@
     setup
     lang="ts"
 >
+    import MarkdownIt from 'markdown-it';
+
     import { computed } from 'vue';
-    // import MarkdownIt from 'markdown-it'
+    import { useI18n } from 'vue-i18n';
     import { useAuthStore } from 'src/stores/auth-store';
     import type { Message } from 'src/modules/chatbot/models/dialogue-message.model';
-    import { useI18n } from 'vue-i18n';
 
-    const { t } = useI18n();
+    // ========== state ========================================
-    const auth_store = useAuthStore();
 
     const { message } = defineProps<{
         message: Message;
     }>();
 
-    const message_text = computed(() => message.text.includes('chatbot.') ? t(message.text) : message.text)
+    const { t } = useI18n();
+    const authStore = useAuthStore();
+    const md = new MarkdownIt({
+        linkify: true,
+        typographer: true,
+    })
 
-    const is_error = computed(() => message.text.includes('NO_REPLY_RECEIVED') || message.text.includes('SEND_MESSAGE_FAILED'));
+    // ========== computed ========================================
 
-    // Initialize Markdown parser
+    const message_text = computed(() => message.text.includes('chatbot.') ? 
-    // const md = new MarkdownIt({
+        t(message.text) : 
-    //     // breaks: false,       // Support line breaks
+        message.text.replaceAll("\\n", "\n")
-    //     linkify: true,      // Make URLs clickable
+    );
-    //     html: false         // Prevent raw HTML injection
+    const is_error = computed(() => message.text.includes('chatbot.error.'));
-    // })
-
-    // // 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);
-    // })
 </script>
 
 <template>
@@ -67,11 +51,12 @@
 
     <q-chat-message
         v-else
+        text-html
         :sent="message.sent"
-        :name="message.sent ? auth_store.user?.first_name : 'TargoBot'"
+        :name="message.sent ? authStore.user?.first_name : 'TargoBot'"
         :bg-color="message.sent ? 'accent' : 'info'"
         :text-color="message.sent ? 'white' : ''"
-        :text="[message_text]"
+        :text="[md.renderInline(message_text)]"
     />
 </template>