51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
import DialoguePhrase from './dialogue-phrase.vue';
|
|
|
|
import { ref, watch } from 'vue';
|
|
import { useChatbotStore } from 'src/stores/chatbot-store';
|
|
import type { QScrollArea } from 'quasar';
|
|
|
|
|
|
const chatbot_store = useChatbotStore();
|
|
const scroll_area = ref<QScrollArea | null>(null);
|
|
|
|
watch(chatbot_store.messages, () => {
|
|
if (scroll_area.value) {
|
|
scroll_area.value.setScrollPosition('vertical', 999999999, 300);
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<q-scroll-area ref="scroll_area" class="no-wrap">
|
|
<div
|
|
v-for="(msg, index) in chatbot_store.messages"
|
|
:key="index"
|
|
class="col-auto q-px-md no-wrap"
|
|
>
|
|
<DialoguePhrase
|
|
v-if="!msg.isThinking"
|
|
:message="msg"
|
|
class="col-auto"
|
|
/>
|
|
<!-- thinking bubble while awaiting chatbot reply -->
|
|
<q-chat-message
|
|
v-else
|
|
name="TargoBot"
|
|
bg-color="white"
|
|
:stamp="$t('chatbot.chat_thinking')"
|
|
>
|
|
<div class="row flex-center">
|
|
<q-spinner-dots
|
|
size="20px"
|
|
color="primary"
|
|
class="col-auto self-center"
|
|
/>
|
|
</div>
|
|
</q-chat-message>
|
|
</div>
|
|
</q-scroll-area>
|
|
</template> |