47 lines
1.2 KiB
Vue
47 lines
1.2 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.setScrollPercentage('vertical', 1.0, 500);
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<q-scroll-area ref="scroll_area">
|
|
<div
|
|
v-for="(msg, index) in chatbot_store.messages"
|
|
:key="index"
|
|
class="q-px-md"
|
|
>
|
|
<DialoguePhrase
|
|
v-if="!msg.isThinking"
|
|
:message="msg"
|
|
/>
|
|
|
|
<!-- thinking bubble while awaiting chatbot reply -->
|
|
<div
|
|
v-else
|
|
class="row flex-center q-px-md q-py-sm"
|
|
>
|
|
<q-spinner-dots
|
|
size="20px"
|
|
color="primary"
|
|
/>
|
|
<span class="q-ml-sm text-grey-7">{{ $t('chatbot.chat_thinking') }}</span>
|
|
</div>
|
|
</div>
|
|
</q-scroll-area>
|
|
</template> |