<template>
  <div class="s5">
    <div class="s5__messages">
      <MessageShell role="user" name="用户" meta="11:10">
        <UserBubble content="查看一下 src/services 目录下有哪些文件" />
      </MessageShell>

      <MessageShell role="assistant" name="AI Agent" meta="11:10">
        <AssistantText :message="toolMessage" />
      </MessageShell>
    </div>
  </div>
</template>

<script setup lang="ts">
import { MessageShell, UserBubble, AssistantText } from '@/components/chat/messages'
import type { IChatMessage, IToolCallData } from '@/api/types'

const toolCalls: IToolCallData[] = [
  {
    id: 'tc-1',
    name: 'Glob',
    status: 'completed',
    params: 'pattern: "src/services/**/*.py"',
    result: 'src/services/__init__.py\nsrc/services/order.py\nsrc/services/payment.py\nsrc/services/inventory.py',
    duration: 80,
    children: [
      {
        id: 'tc-1-1',
        name: 'Read',
        status: 'completed',
        params: 'path: "src/services/order.py"',
        result: '# order service implementation...',
        duration: 45,
      },
      {
        id: 'tc-1-2',
        name: 'Read',
        status: 'error',
        params: 'path: "src/services/inventory.py"',
        error: 'File not found: src/services/inventory.py',
        duration: 20,
      },
    ],
  },
]

const toolMessage: IChatMessage = {
  id: 's5-tool',
  role: 'assistant',
  content: '正在扫描 `src/services` 目录并读取关键文件：\n\n- 成功读取 `order.py`\n- 读取 `inventory.py` 失败，文件不存在',
  timestamp: new Date().toISOString(),
  status: 'completed',
  tool_calls: toolCalls,
}
</script>

<style scoped>
.s5 {
  max-width: var(--max-chat-width);
  margin: 0 auto;
  padding: 48px var(--space-4) 24px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.s5__messages {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
</style>
