<template>
    <div class="agentAdminContainer">
        <h1 class="agentAdminContainer__title">AI Chatbot</h1>
        <AdminTabs :data="data"/>
    </div>
</template>

<script>

import AdminTabs from "./tabs.vue";

export default {
    name:'AgentAdminContainer',
    components: {AdminTabs},
    data() {
        return {
            data: []
        };
    },
    methods: {
        fetchData() {
            // fetch data
            fetch('/admin/agent/chat-history')
                .then(response => response.json())
                .then(data => {
                    this.data = (data.messages || []).map(item => {
                        // Truncate message for preview
                        const messagePreview = JSON.parse(item.messages)[0].content;
                        console.log(item.updated_at);

                        return {
                            id: item.id,
                            chat: messagePreview,
                            email: item.updated_at,
                            messages: item.messages,
                            created_at: item.created_at
                        };
                    });
                });
        }
    },
    mounted() {
        this.fetchData();
    }
}
</script>

<style lang="less">
@import "../../styles/admin/container.less";
</style>
