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