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>
:deep(.q-drawer--right) {
background: rgba(0, 0, 0, 0.6);
background: rgba(0, 0, 0, 0.7);
width: 50vw !important;
}

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

@ -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>