BISHENG 灵思任务模式前端 UI 规格落地指南：从设计稿到 Track H 组件树实现解析

BISHENG 灵思任务模式前端 UI 规格落地指南从设计稿到 Track H 组件树实现解析【免费下载链接】bishengBISHENG is an open LLM devops platform for next generation Enterprise AI applications. Powerful and comprehensive features include: GenAI workflow, RAG, Agent, Unified model management, Evaluation, SFT, Dataset Management, Enterprise-level System Management, Observability and more.项目地址: https://gitcode.com/GitHub_Trending/bi/bisheng本文基于仓库中 Track H · Client 任务模式 UI 规格 展开结合 BISHENG 开源项目 2.6 版本灵思Linsight任务模式的真实前端实现进行深度解读。读者读完可以掌握任务模式 UI 的整体架构决策、统一输入区/执行流/澄清卡/任务面板/工作区的完整规格以及这些规格在src/frontend/client/src/components/Linsight/组件树与后端 WS 事件协议中是如何一一落地的可直接用于二次开发、UI 验收与功能扩展。一、背景Track H 是什么灵思任务模式/linsight是 BISHENG 平台中基于 WS 事件流驱动的深度任务执行能力。Track H 是 2.6 版本规划中前端 · Client 端的专属工作流其唯一真相来源于 12 张产品设计稿2026-06-13 由 shanghang 提供本文档即设计稿的规格固化。Track H 最关键的三个决策已确认、不可回退彻底去 SOP 化旧components/Sop/双栏布局左 SOP、右 TaskFlow不复用、整体替换无 generate-sop / SOP 编辑 / 重新规划能力全新开发所有执行视图组件在components/Linsight/新目录下从零实现不依赖旧组件边界划分Skill 管理页归他人 Track但输入区「添加 Skill」选择器归 Track H 负责。本文所引用的全部实现均已落在当前仓库src/frontend/client/src/components/Linsight/下 Input / Execution / Artifacts 三组组件树规格与代码一一对应。二、架构决策任务模式与日常模式分开实现规格文档明确了两条路线的隔离策略2026-06-13 与产品确认分开实现、视觉对齐、小件复用日常对话走/cLibreChat 体系任务模式走/linsightWS 事件流两者的路由、视图、数据链路完全分开任务模式输入区在components/Linsight/全新实现日常输入框只加一个「任务模式」入口点击跳转/linsight不塞任何任务模式逻辑知识空间下拉、工具下拉、模型选择器等小件抽成共享组件两边视觉一致「退出任务模式」 路由切回/c「进入」 跳/linsight。设计稿中的统一输入区是视觉概念不强制代码共用。这一决策在源码中体现得极为彻底ExecutionTimeline.tsx的注释明确声明It does NOT import or touch any Chat/Messages (daily /c) component执行流组件只依赖任务模式自有原语CollapsibleTimelineItem/TimelineRail/useElapsedTicker。输入区的TaskModeInput.tsx同样独立于日常输入框仅复用底层通用 UI 原子组件TextareaAutosize、AlertDialog、Sheet等。路由守卫/linsight入口带插件/菜单权限守卫linsight_task_mode菜单 key对应后端 C6 契约无权限时隐藏入口并拦截路由而非手写 403 页面——具体见 tasks.md 中 TH-4「路由守卫C6」。三、总体布局变化任务模式页面相较旧版有以下结构性变化区域变化统一聊天界面普通对话与任务模式共用同一输入区与同一会话流取消旧的「对话/任务」分置是否任务模式由输入框工具栏上的「任务模式」toggle 决定执行视图 对话流不再是左 SOP 右 TaskFlow 双栏执行过程以「步骤行」逐条嵌入对话流类 Manus 风格任务清单面板浮在输入框正上方收起 一行进度展开 全任务列表右侧抽屉工作区产物文件列表与文件预览面板从右侧滑出左侧边栏首页 / 新建对话 / 新建任务两个入口会话列表中任务模式会话执行中带转圈图标四、统一输入区4.1 布局与元素行为输入区布局从左到右[ ] [ 知识空间 ∨] [⊕ 工具 ∨] [ 任务模式] [GPT-4o ∨] [/发送]各元素行为规格元素行为「」菜单弹出菜单三项上传文件 / 任务模式 / 添加 Skill子菜单▸。「添加 Skill」展开 Skill 选择列表来自 D 的 /skill API仅启用项多选知识空间 ∨下拉多选知识空间/组织知识库已选生成 chip 流展示在输入框上方每个 chip 可 × 移除工具 ∨下拉面板每个工具一行 toggle 开关如联网搜索/天眼查/绘图工具不生成 chip任务模式 toggle工具栏上的文字按钮带图标未激活 普通文字激活 蓝色高亮hover 激活态显示「× 任务模式」可点除退出。显式开关收到消息不自动退出模型选择器右侧下拉如 GPT-4o ∨候选 工作台对话模型列表默认选中管理员标的「灵思默认模型」对应 E 的linsight_default_model_id用户可切换随 submit 传 model 字段语音/发送按钮最右蓝色圆钮默认麦克风语音输入输入文字后变发送按钮4.2 源码实现对照TaskModeInput.tsxsrc/frontend/client/src/components/Linsight/Input/TaskModeInput.tsx是统一输入区的载体规格中的每个元素都有对应实现工具栏从前往后依次渲染PlusMenu、KnowledgeSpaceSelect、ToolsSelect、TaskModeToggle右侧为ModelSelector与发送/麦克风/停止按钮与规格图完全一致提交链路handleSend通过setLinsightSubmission(new, {...})提交payload 中显式携带model模型选择器值随 submit 传model字段、skills仅已勾选 skill 的 name 列表、tools含伪条目pro_knowledge→ 后端映射为org_knowledge_enabled、files、question且sessionId在执行视图下传真实会话 id 以支持多轮续问会话级记忆PRD §4.1.2知识空间/工具/文件存于按会话 key 隔离的 Recoil atomtaskModeContextState(sessionKey)/taskModeSkillsState(sessionKey)。handleExitTaskMode退出时只setSkills([])清空 Skill 选择知识/工具/文件保留在 atom 中再次进入任务模式自动回填——与规格退出任务模式 → Skill 选择清空知识空间/工具/文件选择保留在会话内完全一致文件解析状态轮询对parsing_status未完成的文件每 2s 调用checkFileParseStatus轮询失败文件自动移除并 toast 提示多轮续问执行视图中输入框通过onFollowUp把新一轮问题路由到/workbench/continue同一 session_version agent 线程上下文保留而不是新建会话停止能力任务执行中发送按钮变灰色停止钮点击弹出AlertDialog二次确认终止不可恢复故需确认语音占位本期麦克风为视觉占位点击仅 toast「即将上线」。TaskModeToggle.tsxsrc/frontend/client/src/components/Linsight/Input/TaskModeToggle.tsx实现 toggle 的细节默认图标为Outlined.Binoculars双筒望远镜hover 时换成 ×在紧凑布局useContainerCompact测量工具栏宽度或无 hover 能力的触屏设备上则常驻显示一个灰色 × 作为退出入口。激活态文字蓝色高亮text-blue-500与规格未激活 普通文字激活 蓝色高亮吻合。SkillSelector.tsxsrc/frontend/client/src/components/Linsight/Input/SkillSelector.tsx对接GET /api/v1/linsight/skill/selectable仅返回本租户已启用技能普通登录鉴权即可支持按 display_name / description 关键词过滤选择结果在ContextChips.tsx中渲染为可移除的 chip。五、提交后意图澄清卡提交问题后执行流先出现澄清卡对应 HITLuser_input事件的前置意图澄清┌──────────────────────────────────────────────┐ │ 为了开展高质量调研,请确认以下几个问题: ×│ │ 报告深度与受众 单选 ‹ 1/3 › │ │ 1. 内部管理层决策参考(偏战略、简洁) │ │ 2. 行业分析/研究用途(偏数据详尽、含图表…) │ │ 3. 自行输入 │ │ 跳过 → │ └──────────────────────────────────────────────┘规格要点多问题分页‹ 1/3 ›每页一个问题问题类型单选 / 多选 / 自行输入文本右下「跳过 →」可跳过当前问题到下一页右上 × 关闭跳过剩余并提交已收集答案数据来源user_input事件的tool_calls.args对应契约 C1选项结构由后端 interrupt payload 给出回答后卡片收起为摘要行「已经明确用户意图 ›」可展开回看。源码实现对照ClarifyCard.tsxsrc/frontend/client/src/components/Linsight/Execution/ClarifyCard.tsx完整实现了上述交互通过parseClarifyRequest从user_input事件数据中解析问题列表解析不到可解析问题时payload 格式异常自动降级为ClarifyFallbackCard纯文本 textarea单选点击选项立即前进到下一题无确认按钮符合设计稿图 1多选toggle 勾选后需点「下一题/确定」每题末尾带「自行输入」内联输入框CUSTOM_KEY标记支持 ShiftEnter 换行、Enter 确认并前进选项文本支持标题 (描述)格式拆分展示分页器支持左右翻页回看最后一页只有「确定」隐藏「跳过」所有答案由composeClarifyAnswer合并为一段结构化文本通过既有 user-input API一次性提交窗口级 Enter 快捷键确认输入框内 Enter 走原生行为避免冲突IME 组合输入 Enter 被守卫避免误提交。六、执行流步骤行对话流中逐条出现的行类型自上而下追加行类型视觉展开内容意图已明确 已经明确用户意图 ∨/›展开列确认项如1. 报告深度与受众 行业分析/研究用途…规划中≡ 正在规划任务 ●圆点放大缩小动效 输出中—任务步骤行✓/↻ 调研2025年中国大豆进口依存度… ∨/›完成 ✓ 灰进行中 转圈展开显示该任务的子步骤流子智能体委派行♻ 自动委派 · 2 个 research-agent 子智能体(含知识库检索联网搜索权限) ›子 agent 卡片并排子 agent 卡片小卡图标名称如「知识库检索」执行中 显示当前调用的工具名如● think_tool完成 ✓ 已调用 3 个工具—工具调用行 COFCO_retrieve ∨/ think_tool ∨/ emit_research_card ∨展开知识库命中条目列表 / 思考文本 / 卡片参数(title: …)产物就绪行已为您整理好 2025年…分析报告蓝链接点开预览—输出文件卡 已整理输出文件 N卡片内列文件行文件名 预览图标/「另存为」—报告摘要完成后正文区直接渲染几段摘要文字—通用规则所有行可展开/收起›/∨默认进行中展开、完成后收起用户手动切换后以手动选择为准。事件映射任务步骤行 ←task_start/task_end todo子 agent ←step_typesubagent工具行 ←step_typetool/knowledge思考 ←step_typethinking卡片 ←step_typeui_card产物 ←final_result。源码实现对照StepRow.tsxsrc/frontend/client/src/components/Linsight/Execution/StepRow.tsx是通用的可折叠步骤行原语运行中默认展开、完成自动收起、手动覆盖优先通过StepDepthContext实现嵌套深度仅嵌套子步骤depth ≥ 1显示左侧连接线stepTypeIcon根据工具名正则匹配图标agent/subagent → 人形、knowledge/检索 → 书本、think → 灯泡、research → 仪表盘、websearch → 地球、write → 书写展开动画用grid-template-rows 0fr→1fr平滑过渡ExecutionTimeline.tsxsrc/frontend/client/src/components/Linsight/Execution/ExecutionTimeline.tsx是执行流的单一聚合入口mergeStepFrames(history)合并 start/end 两帧 →buildTimelineGroups构建时间线节点树四类载体ExecutionFlow / TaskTurnPanel / ConversationRound / TaskStepRow全部收敛到这一个组件保证实时渲染 vs 刷新回放 / 单任务 / 会话级视图永不漂移用「长度 最后一帧 status/call_id」组合签名作为 memo 失效键避免 WS 原地变更数组导致的重建浪费子 agent 组subagent_group在 2026-06 迭代中做了完全拆平解散团队外壳每个子 agent 渲染为独立的顶层片段explodeSubagentGroup以委派目标 活动摘要为标题头附独立的 agent 导轨图标——这是「灵思任务模式执行流渲染优化方案」在代码中的落地形态组件族还包括IntentRow意图摘要行、KnowledgeRow知识库命中列表样式、ToolRow/ToolRowLite工具调用展开、ThinkingRow思考文本、BreathingRow规划中呼吸动效、QueueCard排队态、TaskErrorCard错误展示等均位于 src/frontend/client/src/components/Linsight/Execution/ 目录。七、任务清单面板任务清单面板浮在输入框正上方任务模式执行期间常驻收起态一行≡ 任务 调研2025年大豆与豆粕价格走势 3/6 ⌃当前进行中任务名 进度展开态全列表每行✓ 完成置灰删除线感/ ↻ 进行中转圈/ ○ 未开始 任务名完成态≡ 任务已完成 撰写markdown报告并导出docx 6/6。源码实现对照TaskPanel.tsxsrc/frontend/client/src/components/Linsight/Execution/TaskPanel.tsx实现了规格细节默认收起每次会话切换通过 versionId 重挂载、重置为收起态保持输入区上方整洁收起态 header 内联展示当前运行中任务名渐隐 shimmer 动画 进度数字N/Mtabular-nums 对齐展开态则省略内联名列表已展示状态图标done 灰色 CheckCircle、running 蓝色转圈 Loading、未开始 灰色空心 Circle终止态terminated特殊处理不再转圈header 图标换成静态ListSuccess文案切换为「任务已终止」——对应规格中error_message / task_terminated事件终止保留已产出的语义全部完成时 header 图标升级为DoubleCheck文案「任务已完成」。八、产物与工作区规格定义了四级产物交互报告链接行已为您整理好 报告名蓝链接→ 点击右侧滑出文件预览输出文件卡已整理输出文件 N每行文件名 右侧操作预览图标 /「另存为」工作区抽屉右侧滑出面板标题「工作区」列出所有产物文件docx/md…每行预览入口顶部对话区右上有入口图标文件预览面板右侧大面板渲染文件内容md 渲染顶部下载 / 放大 / 关闭。源码实现对照WorkspaceDrawer.tsxsrc/frontend/client/src/components/Linsight/Artifacts/WorkspaceDrawer.tsx右侧 Sheet 面板宽 480px按产品分区把文件分为**用户上传upload与智能体产出generated**两组行内按扩展名渲染 FileIconhover 显示预览眼睛图标点击切换右侧为文件预览面板配套组件FilePreviewPanelmd 渲染 下载/放大/关闭、SaveAsButton「另存为」、ResultSection、artifactUtils.ts文件类型工具与单测artifactUtils.test.tsuseArtifactsPanel/useWorkspacePanel两个 hook 负责抽屉与预览的联动状态。九、侧边栏顶部首页 /新建对话/新建任务两个新建入口会话列表按时间分组任务模式会话执行中显示转圈图标命名如「任务模式对话」「日常普通对话」区分两类会话。十、事件 → UI 映射总表任务模式前端全部由 WS 事件驱动映射关系是前端开发的核心契约对应后端 state_message_manager.py 中MessageEventType枚举的 10 类事件前端消费不新增类型WS 事件UI 落点task_generate任务清单面板全列表 规划中行结束task_start/task_status_update任务步骤行状态转圈/点亮 面板进度 N/Mtask_execute_stepstep_typetool工具调用行名称 展开输入输出task_execute_stepstep_typeknowledge工具行知识库样式展开命中条目列表task_execute_stepstep_typethinkingthink_tool 行展开思考文本task_execute_stepstep_typesubagent子智能体委派行 子 agent 卡嵌套在所属任务行下task_execute_stepstep_typeui_cardemit_research_card 行展开参数未注册 name 走文本降级user_input澄清/追问卡分页单选/多选/文本可跳过user_input_completed卡片收起为「已经明确用户意图 ›」摘要行task_end任务步骤行打勾收起final_result报告链接行 摘要 输出文件卡 面板「任务已完成」error_message/task_terminated错误展示 / 终止态终止保留已产出排队queue index 轮询排队态卡排队中 位次 取消排队——设计稿未给按通用样式实现后端侧这 10 类事件在 state_message_manager.py 中逐一枚举task_start/task_generate/task_status_update/user_input/user_input_completed/task_execute_step/task_end/error_message/final_result/task_terminated事件负载统一为{event_type, data, timestamp}task_terminated作为终止时的唯一末帧见 stream_event_mapper.py。WS 桥MessageStreamHandleRedis pop → 转发对前端零改动前端只需按上表消费。十一、开发阶段划分全新组件树的分期落地规格建议在components/Linsight/新目录下分五期落地与 tasks.md 中 TH-1 ~ TH-5 任务一一对应阶段内容对应 Track 任务P1 地基路由守卫 pluginId →linsight_task_mode新组件目录提交链路submit 带 model → start-execute → WS去 SOP 化新路径不调 generate-sopRecoil 新 store—P2 输入区任务模式 toggle、「」菜单上传/任务模式/添加Skill、知识空间/工具下拉、模型选择器、chip 一览、会话级记忆TH-1P3 执行流步骤行族、任务面板、澄清/追问卡、排队态TH-2 / TH-3 / TH-5P4 产物报告链接、输出文件卡、工作区抽屉、文件预览TH-4P5 清理删旧 Sop 组件 / generate-sop 链路 / 星级评分 / 重新执行入口侧边栏入口与会话列表图标—十二、当前仓库的落地验证将规格与仓库现状对照可以看到 Track H 的完整组件树已落地于 src/frontend/client/src/components/Linsight/Input/TaskModeInput统一输入区、TaskModeToggle任务模式开关、PlusMenu 菜单、KnowledgeSpaceSelect/ToolsSelect/ModelSelector三个下拉小件、SkillSelector添加 Skill、ContextChipschip 一览Execution/StepRow步骤行原语、ClarifyCard/ClarifyFallbackCard澄清卡与降级、TaskPanel任务清单面板、ExecutionTimeline聚合时间线、TaskStepRow/IntentRow/ToolRow/KnowledgeRow/ThinkingRow/BreathingRow/QueueCard/TaskErrorCard/ResultPanel等执行流行族、stepUtils.ts帧合并与分组含单测stepUtils.test.tsArtifacts/WorkspaceDrawer工作区抽屉、FilePreviewPanel文件预览、SaveAsButton另存为、ResultSection、artifactUtils.ts含单测。配套的契约与依赖说明见 依赖与契约约定.mdC1–C8 接口契约其中 C1 即本规格依赖的 10 类 WS 事件协议C3 即 Skill API /skill/selectable 的契约设计全貌见 design.md任务拆分见 tasks.md跨模式会话上下文共享的设计见 跨模式会话上下文共享设计.md。十三、二次开发与验收要点新增步骤行类型在ExecutionTimeline.tsx的节点分发处buildTimelineGroups产物节点树注册新kind并在stepUtils.ts中补充帧合并规则保持单测同步新增事件消费以后端MessageEventType枚举为真相源任何新事件必须先落到state_message_manager.py的类型枚举再在 UI 侧映射表补充落点会话级记忆扩展知识/工具/文件存储于taskModeContextState(sessionKey)Skill 存于taskModeSkillsState(sessionKey)——新增加的会话内保留选择项应放入 context atom退出即清空的应放入 skills atom去 SOP 化验收新任务模式下不应再出现旧 Sop 双栏、generate-sop 链路、星级评分与重新执行入口权限边界/linsight路由守卫依赖菜单 keylinsight_task_mode角色权限在管理端「工作台菜单 → 首页 → 任务模式」配置无权限用户入口隐藏。说明文中引用的组件行为与事件映射均以当前仓库src/frontend/client/src/components/Linsight/与src/backend/bisheng/linsight/domain/services/state_message_manager.py的代码为准规格文档中「语音输入」在本次迭代为占位实现点击仅提示即将上线模型选择器的候选列表与默认值依赖后端工作台对话模型配置linsight_default_model_id实际部署时请以对应租户配置为准。【免费下载链接】bishengBISHENG is an open LLM devops platform for next generation Enterprise AI applications. Powerful and comprehensive features include: GenAI workflow, RAG, Agent, Unified model management, Evaluation, SFT, Dataset Management, Enterprise-level System Management, Observability and more.项目地址: https://gitcode.com/GitHub_Trending/bi/bisheng创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考