43 lines
1.4 KiB
Markdown
43 lines
1.4 KiB
Markdown
# 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)
|