<template>
    <div class="chatBody">
        <ChatBubble>Hi, how can I assist you today?</ChatBubble>

    </div>
</template>

<script>
import ChatBubble from "../elements/bubble.vue";
export default {
    name: 'chatBody',
    components: {ChatBubble},
    mounted() {
        window.Echo.channel('agent-channel')
            .listen('ChatGenerated', (e) => {
                console.log('Received ChatGenerated:', e);
                // Handle the incoming message here
            });
    }

}
</script>

<style lang="less" scoped>
.chatBody {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

</style>
