<template>
    <div class="chat-history">
        <div class="history-title">历史对话</div>
        <div class="history-list">
            <div 
                v-for="chat in chatHistory" 
                :key="chat.id"
                class="history-item"
                :class="{ active: currentChatId === chat.id }"
                @click="handleLoadChat(chat.id)"
            >
                <ElIcon><ChatLineRound /></ElIcon>
                <div class="history-info">
                    <div class="history-name">{{ chat.title }}</div>
                    <div class="history-time">{{ chat.time }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { MessageCircle } from 'lucide-vue-next'

const ChatLineRound = MessageCircle

interface ChatItem {
    id: number;
    title: string;
    time: string;
}

interface Props {
    chatHistory: ChatItem[];
    currentChatId: number;
}

interface Emits {
    (e: 'loadChat', chatId: number): void;
}

defineProps<Props>();
const emit = defineEmits<Emits>();

const handleLoadChat = (chatId: number) => {
    emit('loadChat', chatId);
};
</script>

<style scoped lang="scss">
@import url("./ChatHistory.scss");
</style>
