<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">
        <div
            v-for="(msg, index) in chatbot_store.messages"
            :key="index"
            class="column 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>