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 与产品确认）：

分开实现、视觉对齐、小件复用：日常对话走/c（LibreChat 体系），任务模式走/linsight（WS 事件流），两者的路由、视图、数据链路完全分开；
任务模式输入区在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.tsx（src/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 atom（taskModeContextState(sessionKey)/taskModeSkillsState(sessionKey)）。handleExitTaskMode退出时只setSkills([])清空 Skill 选择，知识/工具/文件保留在 atom 中，再次进入任务模式自动回填——与规格"退出任务模式 → Skill 选择清空；知识空间/工具/文件选择保留在会话内"完全一致；
文件解析状态轮询：对parsing_status未完成的文件每 2s 调用checkFileParseStatus轮询，失败文件自动移除并 toast 提示；
多轮续问：执行视图中输入框通过onFollowUp把新一轮问题路由到/workbench/continue（同一 session_version + agent 线程，上下文保留），而不是新建会话；
停止能力：任务执行中发送按钮变灰色停止钮，点击弹出AlertDialog二次确认（终止不可恢复，故需确认）；
语音占位：本期麦克风为视觉占位，点击仅 toast「即将上线」。

TaskModeToggle.tsx（src/frontend/client/src/components/Linsight/Input/TaskModeToggle.tsx）实现 toggle 的细节：默认图标为Outlined.Binoculars（双筒望远镜），hover 时换成 ×；在紧凑布局（useContainerCompact测量工具栏宽度）或无 hover 能力的触屏设备上，则常驻显示一个灰色 × 作为退出入口。激活态文字蓝色高亮（text-blue-500），与规格"未激活 = 普通文字，激活 = 蓝色高亮"吻合。

SkillSelector.tsx（src/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.tsx（src/frontend/client/src/components/Linsight/Execution/ClarifyCard.tsx）完整实现了上述交互：

通过parseClarifyRequest从user_input事件数据中解析问题列表；解析不到可解析问题时（payload 格式异常）自动降级为ClarifyFallbackCard（纯文本 textarea）；
单选：点击选项立即前进到下一题（无确认按钮，符合设计稿图 1）；多选：toggle 勾选后需点「下一题/确定」；每题末尾带「自行输入」内联输入框（CUSTOM_KEY标记），支持 Shift+Enter 换行、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_type=subagent；工具行 ←step_type=tool/knowledge；思考 ←step_type=thinking；卡片 ←step_type=ui_card；产物 ←final_result。

源码实现对照

StepRow.tsx（src/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.tsx（src/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.tsx（src/frontend/client/src/components/Linsight/Execution/TaskPanel.tsx）实现了规格细节：

默认收起（每次会话切换通过 versionId 重挂载、重置为收起态，保持输入区上方整洁）；
收起态 header 内联展示当前运行中任务名（渐隐 shimmer 动画）+ 进度数字N/M（tabular-nums 对齐），展开态则省略内联名（列表已展示）；
状态图标：done = 灰色 CheckCircle、running = 蓝色转圈 Loading、未开始 = 灰色空心 Circle；
终止态（terminated）特殊处理：不再转圈，header 图标换成静态ListSuccess，文案切换为「任务已终止」——对应规格中error_message / task_terminated事件"终止保留已产出"的语义；
全部完成时 header 图标升级为DoubleCheck，文案「任务已完成」。

八、产物与工作区

规格定义了四级产物交互：

报告链接行：已为您整理好 📄 <报告名>（蓝链接）→ 点击右侧滑出文件预览；
输出文件卡：已整理输出文件 N，每行文件名 + 右侧操作（预览图标 /「另存为」）；
工作区抽屉：右侧滑出面板，标题「工作区」，列出所有产物文件（docx/md…），每行预览入口；顶部对话区右上有入口图标；
文件预览面板：右侧大面板渲染文件内容（md 渲染），顶部：下载 / 放大 / 关闭。

源码实现对照

WorkspaceDrawer.tsx（src/frontend/client/src/components/Linsight/Artifacts/WorkspaceDrawer.tsx）：右侧 Sheet 面板（宽 480px），按产品分区把文件分为**用户上传（upload）与智能体产出（generated）**两组，行内按扩展名渲染 FileIcon，hover 显示预览眼睛图标，点击切换右侧为文件预览面板；
配套组件：FilePreviewPanel（md 渲染 + 下载/放大/关闭）、SaveAsButton（「另存为」）、ResultSection、artifactUtils.ts（文件类型工具与单测artifactUtils.test.ts），useArtifactsPanel/useWorkspacePanel两个 hook 负责抽屉与预览的联动状态。

九、侧边栏

顶部：首页 /新建对话/新建任务两个新建入口；
会话列表：按时间分组；任务模式会话执行中显示转圈图标；命名如「任务模式对话」「日常普通对话」区分两类会话。

十、事件 → UI 映射总表

任务模式前端全部由 WS 事件驱动，映射关系是前端开发的核心契约（对应后端 state_message_manager.py 中MessageEventType枚举的 10 类事件，前端消费不新增类型）：

WS 事件	UI 落点
`task_generate`	任务清单面板（全列表）+ 规划中行结束
`task_start`/`task_status_update`	任务步骤行状态（转圈/点亮）+ 面板进度 N/M
`task_execute_step`step_type=tool	工具调用行（名称 + 展开输入输出）
`task_execute_step`step_type=knowledge	工具行知识库样式（展开命中条目列表）
`task_execute_step`step_type=thinking	think_tool 行（展开思考文本）
`task_execute_step`step_type=subagent	子智能体委派行 + 子 agent 卡（嵌套在所属任务行下）
`task_execute_step`step_type=ui_card	emit_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 桥MessageStreamHandle（Redis pop → 转发）对前端零改动，前端只需按上表消费。

十一、开发阶段划分：全新组件树的分期落地

规格建议在components/Linsight/新目录下分五期落地，与 tasks.md 中 TH-1 ~ TH-5 任务一一对应：

阶段	内容	对应 Track 任务
P1 地基	路由守卫 pluginId →`linsight_task_mode`；新组件目录；提交链路（submit 带 model → start-execute → WS）；去 SOP 化（新路径不调 generate-sop）；Recoil 新 store	—
P2 输入区	任务模式 toggle、「+」菜单（上传/任务模式/添加Skill）、知识空间/工具下拉、模型选择器、chip 一览、会话级记忆	TH-1
P3 执行流	步骤行族、任务面板、澄清/追问卡、排队态	TH-2 / TH-3 / TH-5
P4 产物	报告链接、输出文件卡、工作区抽屉、文件预览	TH-4
P5 清理	删旧 Sop 组件 / generate-sop 链路 / 星级评分 / 重新执行入口；侧边栏入口与会话列表图标	—

十二、当前仓库的落地验证

将规格与仓库现状对照，可以看到 Track H 的完整组件树已落地于 src/frontend/client/src/components/Linsight/：

Input/：TaskModeInput（统一输入区）、TaskModeToggle（任务模式开关）、PlusMenu（+ 菜单）、KnowledgeSpaceSelect/ToolsSelect/ModelSelector（三个下拉小件）、SkillSelector（添加 Skill）、ContextChips（chip 一览）；
Execution/：StepRow（步骤行原语）、ClarifyCard/ClarifyFallbackCard（澄清卡与降级）、TaskPanel（任务清单面板）、ExecutionTimeline（聚合时间线）、TaskStepRow/IntentRow/ToolRow/KnowledgeRow/ThinkingRow/BreathingRow/QueueCard/TaskErrorCard/ResultPanel等（执行流行族）、stepUtils.ts（帧合并与分组，含单测stepUtils.test.ts）；
Artifacts/：WorkspaceDrawer（工作区抽屉）、FilePreviewPanel（文件预览）、SaveAsButton（另存为）、ResultSection、artifactUtils.ts（含单测）。

配套的契约与依赖说明见依赖与契约约定.md（C1–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），实际部署时请以对应租户配置为准。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考