ORBCAFE AgentUI 聊天组件

工作流程

1. 1. 首先对照 skills/orbcafe-ui-component-usage/references/module-contracts.md，确认此为 Component-first 模块。
2. 使用 references/component-selection.md 选择 AgentPanel / StdChat / CopilotChat。
3. 执行安装与最小接入。
4. 使用 references/recipes.md 输出最小可运行代码。
5. 使用 references/guardrails.md 检查消息状态、流式传输、卡片钩子及 copilot 外壳边界。
6. 输出验收步骤与“无效果”排障指南。

安装与引导（必选）

bash
npm install orbcafe-ui @mui/material @mui/icons-material @mui/x-date-pickers @emotion/react @emotion/styled dayjs

本仓库联调：

bash
npm run build
cd examples
npm install
npm run dev

参考实现：

• - examples/app/chat/ChatExampleClient.tsx
• examples/app/copilot/CopilotExampleClient.tsx
• src/components/AgentUI/README.md

输出约定

1. 0. 模式：Component-first。
2. 聊天决策：选择 AgentPanel / StdChat / CopilotChat 并说明选择依据。
3. 最小代码：可直接粘贴的最小代码片段，仅允许从 orbcafe-ui 导入公共 API。
4. 状态结构：messages、isResponding 以及 copilot 外壳状态的最小结构。
5. 验证：至少 3 条可执行的验收步骤，覆盖发送、流式传输、卡片操作；若为 copilot，还需覆盖打开/关闭及拖拽/缩放。
6. 排障指南：至少 3 条“UI 可见但无效果”的排查项。

基于示例的经验总结

• - StdChat 是标准聊天布局层，负责消息区域和输入区域，不负责标题、浮动窗口、拖拽和缩放。
• AgentPanel 是 StdChat 的带头部封装，适用于工作台或全页聊天场景。
• CopilotChat 仅负责 copilot 面板内容层；浮动按钮、定位、吸附、拖拽和尺寸调整必须在页面外壳层实现。
• 助手打字流程的稳定基线为：以 isStreaming: true 追加助手消息，然后在 onMessageStreamingComplete 中将其改回 false。
• 卡片交互统一通过 AgentUICardHooks.onCardEvent 处理，不要直接耦合内部渲染器。