louis/targo-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(chatbot): fix chatbot speech formatting, will need to do more work, change from drawer setup

Browse Source
This commit is contained in:
Nic D 2026-01-14 16:05:05 -05:00
parent 82e805fa60
commit e44e2c1e20
2 changed files with 42 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/modules/chatbot/components/chatbot-drawer.vue
View File

@ -71,7 +71,7 @@
<style scoped> <style scoped>
:deep(.q-drawer--right) { :deep(.q-drawer--right) {
background: rgba(0, 0, 0, 0.6); background: rgba(0, 0, 0, 0.7);
width: 50vw !important; width: 50vw !important;
} }

69
src/modules/chatbot/components/dialogue-phrase.vue
View File

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