- name
- orbcafe-agentui-chat
- description
- Build ORBCAFE chat and copilot experiences with AgentPanel, StdChat, CopilotChat, ChatMessage typing flow, and AgentUICardHooks using official examples patterns. Use for full-page chat, floating copilot, streaming replies, markdown/cards rendering, and when chat UI appears but send, stream, card actions, drag, or resize behavior has no effect.
ORBCAFE AgentUI Chat
Workflow
- 先对照
skills/orbcafe-ui-component-usage/references/module-contracts.md，确认这是Component-first模块。 - 用
references/component-selection.md选择AgentPanel/StdChat/CopilotChat。 - 执行安装与最小接入。
- 用
references/recipes.md输出最小可运行代码。 - 用
references/guardrails.md检查消息状态、streaming、card hooks 和 copilot 外壳边界。 - 输出验收步骤与“没效果”排障。
Installation and Bootstrapping (Mandatory)
npm install orbcafe-ui @mui/material @mui/icons-material @mui/x-date-pickers @emotion/react @emotion/styled dayjs本仓库联调：
npm run build
cd examples
npm install
npm run dev参考实现：
examples/app/chat/ChatExampleClient.tsxexamples/app/copilot/CopilotExampleClient.tsxsrc/components/AgentUI/README.md
Output Contract
Mode:Component-first.Chat decision: 选择AgentPanel/StdChat/CopilotChat并说明依据。Minimal code: 一个可直接粘贴的最小片段，只允许从orbcafe-ui导入公共 API。State shape:messages、isResponding以及 copilot 外壳状态的最小结构。Verify: 至少 3 条可执行验收步骤，覆盖发送、streaming、card action；如果是 copilot，还要覆盖打开/关闭和拖拽/缩放。Troubleshooting: 至少 3 条“UI 看得到但没有效果”的排查项。
Examples-Based Experience Summary
StdChat是标准聊天布局层，负责消息区和输入区，不负责标题、浮窗、拖拽和缩放。AgentPanel是StdChat的带头部封装，适合工作台或整页聊天。CopilotChat只负责 copilot 面板内容层；浮动按钮、定位、吸附、拖拽和 resize 必须在页面壳层实现。- assistant typing flow 的稳定基线是：append assistant message with
isStreaming: true，然后在onMessageStreamingComplete中改回false。 - 卡片交互统一走
AgentUICardHooks.onCardEvent，不要直接耦合内部 renderer。