<template>
    <div class="chatBody" ref="chatContainer">


            <ChatBubble
                v-for="(message, index) in messages"
                :key="index"
                :isUser="message.isUser"
            >
                <p class="chatBubble__text">
                    {{ message.text }}
                </p>

                <a
                    v-if="message.productData && message.productData.url"
                    class="chatBubble__link"
                    target="_blank"
                    :href="message.productData.url"
                >
                    {{ message.productName }}
                </a>
            </ChatBubble>
            <transition>
                <Thinking
                    v-if="thinking"
                >
                    <template #message>Thinking...</template>
                </Thinking>
            </transition>


    </div>
</template>

<script>
import ChatBubble from "../elements/bubble.vue";
import Thinking from "../elements/thinking.vue";
export default {
    name: 'chatBody',
    components: {Thinking, ChatBubble},
    props: {
        messages: {
            type: Array,
            required: true,
        },
        thinking: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        scrollDown() {
            this.$nextTick(() => {
                const chatBody = this.$refs.chatContainer;
                chatBody.scrollTop = chatBody.scrollHeight;
            });
        },

    },
    watch: {
        messages: {
            handler() {
                this.scrollDown();
            },
            deep: true,
        }
    },
    mounted() {
        this.scrollDown();
    },
}
</script>

<style lang="less" scoped>
@import "../../../styles/structure/body.less";

</style>
