OpenMuse 聊天交互深度体验发送即停止、消息队列与草稿保留的设计细节【免费下载链接】openmuseA personal agent with a browser, terminal, files, and work that keeps going built with CopilotKit and AG-UI.项目地址: https://gitcode.com/gh_mirrors/op/openmuseOpenMuse 是一个自带浏览器、终端和文件的个人智能体应用基于 CopilotKit 与 AG-UI 构建支持 iOS、Android 和 Web。这篇文章聚焦它聊天界面里三个不起眼却极影响体验的设计发送与停止共用同一个按钮、追问消息进入可见队列、点停止后草稿原样保留。为什么聊天输入框值得细看很多 AI 聊天应用只回答怎么发消息很少处理消息发出去之后怎么办。OpenMuse 在这几件事上给出了相当克制、可预期的答案适合任何做聊天交互的开发者参考场景OpenMuse 的做法智能体正在回复我想打断发送箭头原地变成停止方块一点即停智能体正在回复我有追问追问进入可见队列回复结束后按顺序自动发送我点了停止正在输入的草稿一字不丢某条回复中途失败队列暂停绝不悄悄重发由你决定重试完整交互设计说明见 docs/EXPERIENCE.md。发送按钮变停止按钮同一个位置两种状态聊天输入区是一个圆角输入胶囊左侧是附件按钮中间是多行输入框右侧是主操作按钮。按钮位置在整个回复过程中始终不动——智能体空闲时它是向上的发送箭头一旦开始回复箭头在同一位置变成实心停止方块结束后再切回箭头。这种设计的好处是你的大拇指不需要换位置打断回复的心智成本极低。按钮的可访问性标签也会从Send message同步变为Stop reply对屏幕阅读器同样友好。相关实现在 chat.tsxreplying状态为真时渲染Square停止否则渲染ArrowUp发送。Web 端还有个小细节——Enter直接发送ShiftEnter换行chat.tsx#L755-L767。消息队列回复还没说完追问已经排好队OpenMuse 遵循一次只跑一个对话回合的原则但输入框在你等待回复时从不锁定。这时你点发送消息不会被丢弃也不会触发并发请求而是进入一个可见的消息队列outbox输入框上方会出现Up next列表逐条展示排队中的追问每条右侧有X可随时移除当前回复结束后队列按顺序自动逐条发送发完一条再发下一条队列保存在打开中的应用里而非服务端收件箱所以提示语会提醒你发完前请保持应用开着。队列核心是一个不到 50 行的小类ConversationQueue源码在 conversation-queue.ts配合 conversation-run.ts 完成单回合执行。它的行为被三条测试严格约束conversation-queue.test.ts回复过程中排入的消息只发一次、按顺序发点停止会暂停队列而不是取消消息之后可恢复回复失败时队列进入暂停态——失败的那条消息已经进入对话记录绝不自动重发避免同一请求被悄悄执行两遍。草稿保留点停止不会丢字stop()的动作只有两步暂停队列、调用停止智能体chat.tsx#L308-L315——它从不触碰输入框里的草稿。也就是说你正在回复途中输入的新内容点停止后原封不动留在输入框停止只是中断本次回复不会取消已委派的服务端任务——后台的持久任务继续走自己的流程之后直接点发送新消息立即继续如果还有被暂停的排队消息则会出现Send queued messages按钮由你显式确认后再继续。新发送可直接继续、被暂停的旧队列需显式恢复——这条区分写得很细新意图不需要被旧事故拖延而旧事故不该自动替你冒险。如何上手体验这三个细节本地跑通后需要 Node 24 与 pnpm克隆仓库git clone https://gitcode.com/gh_mirrors/op/openmuse然后pnpm install并pnpm devpnpm dev:web打开 localhost:8081按 docs/DEMO.md 给出的中断自查步骤验证发送一条支持类提示词如Check out Hacker News for cool stuff等智能体开始回复回复途中继续输入一段追问观察发送按钮变成停止方块点击停止方块确认输入框里草稿还在继续输入并再发一条观察它进入Up next队列等本轮结束后看队列消息按顺序发出。演示视频38 秒移动端 / 42 秒桌面端完整展示了发送↔停止的按钮切换docs/DEMO.md。关键源码与文档索引 文件说明apps/mobile/src/chat.tsx聊天界面输入胶囊、发送/停止按钮、队列 UIapps/mobile/src/conversation-queue.ts消息队列核心入队、暂停、按序 flushapps/mobile/src/conversation-run.ts单回合执行与错误捕获apps/mobile/test/conversation-queue.test.ts队列行为三条核心测试docs/EXPERIENCE.md官方交互设计说明docs/DEMO.md演示录制细节与复现步骤这套发送即停止 可见队列 草稿保留 失败不静默重试的组合本质上是在回答同一个问题当 AI 的回复速度不可控时如何让用户始终握有确定感。对于正在打磨聊天体验的团队这套不到千行的实现是非常值得拆解的范本。✨【免费下载链接】openmuseA personal agent with a browser, terminal, files, and work that keeps going built with CopilotKit and AG-UI.项目地址: https://gitcode.com/gh_mirrors/op/openmuse创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考