Eigent ChatBox 组件架构解析从消息线程到任务规划的执行式聊天界面【免费下载链接】eigentEigent: The Open Source Cowork Desktop - Local and Free Alternative to Claude Cowork and Codex项目地址: https://gitcode.com/GitHub_Trending/ei/eigent本文基于 Eigent 仓库中 ChatBox 组件说明文档系统讲解 Eigent 桌面客户端主聊天界面ChatBox的目录分层、数据流向与扩展方式。读完本文后你将掌握 Eigent 如何将「项目 聊天状态chat store」映射为消息时间线、任务规划/执行 UI 与输入框BottomBox三大块并能在不破坏现有分层的前提下为聊天界面新增消息类型或任务 UI。ChatBox 的定位与整体布局ChatBox 是 Eigent 的主聊天表面它把项目 聊天 store的数据接入消息线程、任务/劳动力workforceUI与BottomBox 输入区支持多轮对话、任务规划、任务拆分splitting与执行并提供滚动与时间线等交互细节引自 README。文档中给出的目录结构如下路径相对于src/components/ChatBox/ChatBox/ ├── index.tsx # 主壳层布局、聊天时间线、发送/停止、BottomBox ├── ChatTimeline.tsx # 每个项目的任务/聊天栏或气泡窄布局 ├── ProjectChatContainer.tsx # 滚动区域 当前项目的所有聊天 store ├── ProjectSection.tsx # 单个 chat store查询分组query groups、FloatingAction ├── UserQueryGroup.tsx # 单次用户查询 → 消息、任务 UI、agent 结果 │ ├── TaskBox/ # 规划/执行任务 UI │ ├── TaskCard.tsx # 计划列表、进度、筛选、展开workforce 子任务 │ ├── TaskItem.tsx # 计划中的单行可编辑 │ ├── TaskType.tsx # 任务类型指示器 │ ├── TypeCardSkeleton.tsx # 计划形成中的加载骨架 │ └── StreamingTaskList.tsx │ ├── MessageItem/ # 所有消息与日志相关的 UI │ ├── UserMessageCard.tsx │ ├── UserMessageRichContent.tsx │ ├── AgentMessageCard.tsx │ ├── NoticeCard.tsx │ ├── FeedbackCard.tsx │ ├── TaskCompletionCard.tsx │ ├── SplittingProgressRow.tsx # “Splitting tasks” 分解期间的 token 跳动 │ ├── TaskWorkLogAccordion.tsx # 工作日志工具/agent 行workforce │ ├── FloatingAction.tsx # 暂停/跳过由 ProjectSection 使用 │ ├── MarkDown.tsx │ ├── SummaryMarkDown.tsx │ └── TokenUtils.tsx # token 动画 splitting 耗时格式化 │ └── BottomBox/ # 输入框及其上方的界面 ├── index.tsx ├── InputBox.tsx ├── RichChatInput.tsx ├── ModelSelect.tsx ├── BoxHeader.tsx └── QueuedBox.tsx这套布局的核心设计原则是把传输与布局index、Project*和消息渲染MessageItem/、任务规划/执行TaskBox/、输入器行为BottomBox/解耦引自 README 末尾。补充说明从当前仓库目录的实际文件看TaskBox/下还新增了PlanTaskBox/含ExpandedOverlay.tsx、FoldedView.tsx、StatusRow.tsx、SubtaskEditor.tsx等BottomBox/下新增了ApprovalModeSelect.tsx、ThinkingEffortSelect.tsx、UsageLimitBanner.tsx等文件UserQueryGroup.tsx中已改为引用 PlanTaskBox。这说明文档中的目录树是分层设计的基线描述具体文件以仓库当前目录为准。核心组件职责index.tsx主壳层与高层任务操作根据 README 的描述index.tsx负责组合ProjectChatContainer、BottomBox以及按需ChatTimeline连接useChatStoreAdapter、projectStore、导航与会话界面滚动 padding、任务耗时显示、暂停/恢复等拥有高层任务操作发送、停止、分享、历史钩子并通过 props 向下传递。从源码可以印证这一点index.tsx 引入了useChatStoreAdapter、projectStore、导航useNavigate/useSearchParams等依赖并定义了滚动相关常量如CHAT_SCROLL_BOTTOM_MIN_PX 128、CHAT_SCROLL_BOTTOM_GAP_PX 8用于给最后一条消息与 BottomBox 之间留出稳定间距。发送入口handleSend的实现也体现了多轮流程的控制逻辑它先校验模型是否已选择、当前项目是否存在再通过 index.tsx 中的isTaskBusy判定任务是否正忙运行中、暂停、to_sub_tasks尚未确认、正在分解等从而决定新消息进入排队queued流程还是直接发送。ProjectChatContainer.tsx滚动区域与全部聊天 storeProjectChatContainer渲染当前项目下按 chat-id 分层的 section 堆栈并拥有滚动行为“stick to bottom”、为最后一条消息和 BottomBox 预留的 padding。源码层面可以看到几个值得注意的实现细节见 ProjectChatContainer.tsx多 chatStore 防御性去重通过projectStore.getAllChatStores(activeProjectId)取出当前项目的全部 chatStore遍历其tasks时用一个seenTaskIds集合保证同一个taskId只渲染一次最早创建的 chatStore 胜出与插入顺序一致。注释中说明这是多 chatStore 向单 chatStore 迁移期间的防御性处理节流刷新对所有 chatStore 的subscribe回调做 100ms 节流setTimeoutsetChatRevision避免高频 store 更新导致过度重渲染滚动到底部scrollToBottom使用root.scrollTo({ top: root.scrollHeight, behavior: smooth })并监听新用户消息实现自动滚动。ProjectSection.tsx单个 chat store 的渲染单元ProjectSection对应一个 vanillachatStore实例订阅它并把messages映射为query groups交给UserQueryGroup渲染同时为主任务托管FloatingAction暂停、跳过。ProjectSection.tsx 中同样采用 100ms 节流的 store 订阅模式并在 cleanup 阶段应用最后一次未刷新的状态保证状态不丢失。真正的“查询分组”算法在文件末尾的groupMessagesByQueryL146-L249其规则是遇到role user的消息开启新的 query group遇到step AgentStep.TO_SUB_TASKS任务规划消息时优先挂到当前 group若当前 group 已有任务则向前回溯寻找尚未分配任务的最近用户消息为其新建 group并用processedTaskMessages集合去重其余消息进入当前 group 的otherMessages若开头就出现无用户消息可归属的 agent/error 消息则创建orphan-前缀的匿名 group 兜底保证消息一定能被渲染。分组结果以motion.div呈现带 0.3s 淡入淡出动画每个 group 渲染一个 UserQueryGroupsection 末尾挂载FloatingAction把task.status、跳过回调等传入见 ProjectSection.tsx。UserQueryGroup.tsx单次用户轮次的消息路由UserQueryGroup负责一次用户轮次先是用户内容然后由AgentStep/ChatTaskStatus驱动后续 UIsplitting、任务卡片、agent 完成、通知等。它是新增消息“形态”的主要路由点。源码印证了几个关键路由行为流式分解文本单独订阅使用useSyncExternalStore只订阅tasks[taskId].streamingDecomposeText使流式更新高效且不触发整组重渲染UserQueryGroup.tsx人工回复场景识别通过activeAsk或检查上一条消息是否为role agent step AgentStep.ASK判断当前用户消息是对 agent 提问的回复从而改变任务卡片的显示策略L163-L198打字机效果限定shouldUseLiveAgentTypewriter只在任务RUNNING且该 agent 消息是最后一条时启用 typewriter避免历史消息重复打字机动画L83-L101agent 结果折叠卡文件内定义了AgentResultCard用于 workforce/非单 agent 轮次中展示单个 agent 的可折叠结果L37-L80。这些 UI 分支依赖的状态常量定义在 src/types/constants.tsAgentStepSSE 从后端下发的步骤值如TO_SUB_TASKS: to_sub_tasks、DECOMPOSE_TEXT、CREATE_AGENT、ACTIVATE_AGENT、ACTIVATE_TOOLKIT、DEACTIVATE_TOOLKIT、TERMINAL、WRITE_FILE、TODO_STATE、ASK、NOTICE、ERROR、AGENT_END等ChatTaskStatus顶层任务状态RUNNING/FINISHED/PENDING/PAUSETaskStatus单个子任务进度completed、failed、skipped、waiting、running、blocked。TaskBox任务规划与执行 UI按 README 对TaskBox/的说明TaskCard任务类型 1/2/3 流程——计划文本、taskRunning行、筛选 tabs、跳转到拥有某子任务的聊天、基于会话session偏好记忆的展开/折叠TaskItem计划中单行的编辑/删除TypeCardSkeleton模型分解中、to_sub_tasks尚未就绪时展示StreamingTaskList流式/更新期间渲染运行中的子任务。从源码结构看当前实现中的计划面板主体已演进为TaskBox/PlanTaskBox/子模块由 UserQueryGroup.tsx 导入PlanTaskBox与isPlanSplittingPhase判断工具index.tsx还引用了其中的 PLAN_OVERLAY_SLOT_ID用于计划覆盖层的插槽定位。TaskCard.tsx、TaskItem.tsx、TaskType.tsx仍然保留在TaskBox/下与文档描述一致。MessageItem消息与日志卡片文档对MessageItem/各卡片的职责说明如下引自 README并结合仓库中对应文件文件职责UserMessageCard.tsx / UserMessageRichContent.tsx用户气泡 富内容块AgentMessageCard.tsx助手 Markdown、可选打字机、附件TaskCompletionCard.tsx任务完成/汇总样式的卡片NoticeCard.tsx思维链或通知样式内容FeedbackCard.tsx启用时的点赞/反馈FloatingAction.tsx紧凑悬浮控制由ProjectSection接入TaskWorkLogAccordion.tsx运行/完成/暂停任务的可折叠工作日志工具激活/去激活、agent 行TokenUtils.tsx动画 token 数字与formatSplittingElapsed耗时格式化PreparingToExecuteTasks.tsx准备执行任务阶段的提示当前仓库中存在属对 README 树的新增补充其中TaskWorkLogAccordion的实现要点文档原话使用 Framer 的height: auto实现展开动画并使用合并后日志的稳定 segment key。UserQueryGroup.tsx确实直接引用了TaskWorkLogAccordionL28-L35验证了 README 中“UserQueryGroup从TaskBox/与MessageItem/导入”的说法。BottomBox输入区与输入框外壳文档对BottomBox/的说明index.tsx把BoxHeader、InputBox/RichChatInput、QueuedBox接入任务状态pending、running、confirm 等InputBox/RichChatInput/ModelSelect文本输入、模型选择器、富文本输入适用时BoxHeader任务摘要、计时与头部交互QueuedBox任务管道繁忙时排队中的用户消息。这与index.tsx中handleSend的排队逻辑呼应当检测到executionId对应的消息已在project.queuedMessages中时直接跳过本次发送并交由后台任务处理器处理index.tsx保证队列消息不会被重复提交。数据流概览README 给出的三条数据流可以完整继承并补充状态常量来源用户输入→BottomBox→index.tsx/ store → API 或 store 更新。发送路径的入口是 handleSend它先做模型/项目校验再依据ChatTaskStatus与AgentStep.TO_SUB_TASKS的确认状态判断任务是否忙碌SSE / store 更新→ProjectChatContainer→ProjectSection→UserQueryGroup→ 按 step 和 status 分发到MessageItem/TaskBox。后端 SSE 步骤值由 AgentStep 常量表定义UserQueryGroup按step如to_sub_tasks、ask、notice选择渲染哪类卡片状态→chatStore每个 chat 一个VanillaChatStore、projectStore项目 哪个 chat 处于激活态再加本地组件状态展开、滚动、当前激活 query。VanillaChatStore来自 src/store/chatStore.ts通过 useChatStoreAdapter 在组件层统一获取。扩展指南如何在这个架构上添加新 UIREADME 的 “Extending the UI” 一节给出了三条扩展规则结合源码路径可以直接落地新增 agent 或系统消息类型在 UserQueryGroup.tsx 中按AgentStep/ChatTaskStatus分支路由如果分组规则本身要变才需要动 ProjectSection.tsx 中的groupMessagesByQuery新增任务 UI在TaskBox/下添加组件再从UserQueryGroup或TaskCard按需挂载现有PlanTaskBox子模块即为此模式的实例新增气泡内容在MessageItem/下新增卡片并从UserQueryGroup或拥有该消息列表的父组件导入。这套“传输/布局与渲染分离”的分层约束使得消息卡片、任务面板与输入器可以独立演进——例如流式分解文本只走useSyncExternalStore的窄订阅、store 更新统一 100ms 节流——都是在该分层下为控制重渲染而做的局部优化不需要改动整体结构。参考文件ChatBox 组件说明文档主壳层 index.tsxProjectChatContainer.tsxProjectSection.tsx 与分组算法UserQueryGroup.tsxTaskBox 目录、MessageItem 目录、BottomBox 目录状态常量 AgentStep / ChatTaskStatus【免费下载链接】eigentEigent: The Open Source Cowork Desktop - Local and Free Alternative to Claude Cowork and Codex项目地址: https://gitcode.com/GitHub_Trending/ei/eigent创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考