1.4 KiB
1.4 KiB
AI 对话
把对话面板嵌进带标题栏的页面骨架，并自定义欢迎语与角色名。
组合演示
:::preview 完整对话 || 回答由本地假流逐块吐出，可随时点「停止」或用「清空」重开
demo-preview=../demos/scenarios/ai.vue
:::
这个场景覆盖了什么
- 会话接线：
useAiChat提供messages与生成状态，面板只负责渲染 - 页面骨架：标题栏与面板组合成完整页面，
清空调用resetConversation - 自定义文案：
roleNames把「助手」换成「分析助手」，welcome插槽替换空态 - 流式呈现：思考过程、工具状态、回答与引用按事件依次出现
换成真实后端
示例里的 request 返回的是本地构造的假流。接真实接口时只要返回一个 SSE 流式的 Response 即可，其余不用改：
const chat = useAiChat({
request: ({ message, signal }) => fetch("/api/chat", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message }),
signal
})
});
事件名与载荷字段见 AiChatPanel 的协议表；后端用的是另一套事件名时，用 parseEvent 转换。