fix(chatbot): correct formatting issue with text display, now displays markdown properly as html
This commit is contained in:
Nic D
parent
67132857ac
commit
883e6f8a3d
|
|
@ -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 }) => {
|
||||
|
|
|
|||
|
|
@ -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.",
|
||||
},
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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.",
|
||||
},
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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 ">
|
||||
<q-card-section class="text-center text-uppercase">
|
||||
<div class="text-h6 text-weight-bold">
|
||||
{{ $t('login.page_header') }}
|
||||
</div>
|
||||
</q-card-section>
|
||||
<div class="q-px-xl q-pb-lg ">
|
||||
<div class="text-h6 text-weight-bold text-center text-uppercase q-py-sm">
|
||||
{{ $t('login.page_header') }}
|
||||
</div>
|
||||
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
const auth_store = useAuthStore();
|
||||
// ========== state ========================================
|
||||
|
||||
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 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
|
||||
// }
|
||||
|
||||
// // 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);
|
||||
// })
|
||||
const message_text = computed(() => message.text.includes('chatbot.') ?
|
||||
t(message.text) :
|
||||
message.text.replaceAll("\\n", "\n")
|
||||
);
|
||||
const is_error = computed(() => message.text.includes('chatbot.error.'));
|
||||
</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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user