<template>
  <layout>
    <div class="flex h-full w-full flex-col md:flex-row">
      <ChatHistory class="flex-none w-50" @new-chat="handleNewChat" @select-chat="handleSelectChat" />
      <div class="flex-1 mr-2 overflow-hidden bg-white rounded-xl">
        <ChatBox v-model:guide="guide" :conversationId="selectedConversationId" />
      </div>
      <TaskList />
    </div>

    <TaskOperationDialog ref="taskOperationDialogRef" />
  </layout>
</template>

<script setup lang="ts">
import TaskList from '@renderer/components/TaskList/index.vue'
import TaskOperationDialog from '@renderer/views/home/components/TaskOperationDialog.vue'
import ChatHistory from './ChatHistory.vue'
import ChatBox from './ChatBox.vue'
import { ref } from 'vue'
import emitter from '@utils/emitter'

// 是否显示引导页
const guide = ref(true)
// 选择的历史会话ID
const selectedConversationId = ref('')
// 任务操作弹窗引用
const taskOperationDialogRef = ref()

/// 处理新对话事件：切换到引导页并清空选中的历史会话ID
const handleNewChat = () => {
  guide.value = true;
  selectedConversationId.value = '';
};

/// 选择历史会话
const handleSelectChat = (conversationId: string) => {
  guide.value = false;
  selectedConversationId.value = conversationId;
};

// 监听任务操作弹窗关闭事件
emitter.on('OPERATION_CHANNEL', (item) => {
  taskOperationDialogRef.value?.open(item);
});
</script>
