# AI 对话

把对话面板嵌进带标题栏的页面骨架，并自定义欢迎语与角色名。

## 组合演示

:::preview 完整对话 || 回答由本地假流逐块吐出，可随时点「停止」或用「清空」重开

demo-preview=../demos/scenarios/ai.vue

:::

## 这个场景覆盖了什么

- **会话接线**：`useAiChat` 提供 `messages` 与生成状态，面板只负责渲染
- **页面骨架**：标题栏与面板组合成完整页面，`清空` 调用 `resetConversation`
- **自定义文案**：`roleNames` 把「助手」换成「分析助手」，`welcome` 插槽替换空态
- **流式呈现**：思考过程、工具状态、回答与引用按事件依次出现

## 换成真实后端

示例里的 `request` 返回的是本地构造的假流。接真实接口时只要返回一个 SSE 流式的 `Response` 即可，其余不用改：

```ts
const chat = useAiChat({
	request: ({ message, signal }) => fetch("/api/chat", {
		method: "POST",
		headers: { "Content-Type": "application/json" },
		body: JSON.stringify({ message }),
		signal
	})
});
```

事件名与载荷字段见 [AiChatPanel](/components/ai-chat-panel) 的协议表；后端用的是另一套事件名时，用 `parseEvent` 转换。

## 相关组件

- [AiChatPanel](/components/ai-chat-panel)
- [AiChatMessageList](/components/ai-chat-message-list)
- [AiChatComposer](/components/ai-chat-composer)
- [AiChatThinking](/components/ai-chat-thinking)