Merge origin/master into ji
This commit is contained in:
吉鑫升 committed
commit
e96cc97462
54 files changed
+4900
-334
No files matched your search
@@ -24,10 +24,16 @@ VITE_AIPI_B2ACTOR_XWT_PATH=/fromB/toXWT?isFrame=1
|
||||
VITE_AIPI_KNOWLEDGE_IFRAME_API_URL=https://ch1.b.uat.4.cn/knowes/api/iframeKnowledgeUrl
|
||||
VITE_AIPI_KNOWLEDGE_IFRAME_SKIN=red
|
||||
VITE_AIPI_MOPECHAT_URL=https://ch1.b.uat.4.cn/likun_b1_mope
|
||||
VITE_AIPI_BACKENP_URL=https://knowledgetoolserver.b.uat.4.cn
|
||||
# 我的笔记前端
|
||||
VITE_AIPI_FRONTEND_URL=https://knowledgetoolserver.b.uat.4.cn
|
||||
VITE_AIPI_BACKENP_URL=http://47.88.25.99:8000
|
||||
# 工作室/笔记本后端接口（侧边栏“工作室”列表、笔记本详情等都走这里，不是 VITE_NOTE_API_BASE_URL）
|
||||
# 工作室/笔记本前端地址（用于 auth/callback 等跳转）
|
||||
# VITE_AIPI_FRONTEND_URL=https://knowledgetoolserver.b.uat.4.cn
|
||||
VITE_NOTEBOOK_API_BASE_URL=http://47.88.25.99:8000
|
||||
# 工作室侧边栏显示开关；仅控制入口显示，展开内容仍依赖 notebook 接口成功返回数据
|
||||
VITE_STUDIO_ENABLED=true
|
||||
VITE_AIPI_FRONTEND_URL=http://47.88.25.99:3000
|
||||
VITE_AIPI_CONSUMER_URL=https://ch1.b.uat.4.cn/consumer
|
||||
|
||||
# MaxKey 鉴权（getTokenByOnlineTicket）
|
||||
VITE_AUTH_BASE_URL=https://auth.y.sit.4.cn
|
||||
VITE_AIPI_PGLINKTO_URL=https://pg.b.uat.4.cn
|
||||
@@ -35,5 +41,3 @@ VITE_AIPI_XKLINKTO_URL=https://kz.b.uat.4.cn
|
||||
# 可选：Canvas 独立 LangGraph 地址（不设则回退到 VITE_LANGGRAPH_BASE_URL）
|
||||
# VITE_CANVAS_LANGGRAPH_BASE_URL=
|
||||
|
||||
# 我的笔记是否显示，侧边栏
|
||||
VITE_STUDIO_ENABLED=false
|
||||
@@ -15,10 +15,15 @@ VITE_AIPI_B2ACTOR_XWT_PATH=/fromB/toXWT?isFrame=1
|
||||
VITE_AIPI_KNOWLEDGE_IFRAME_API_URL=https://ch1.b.uat.4.cn/knowes/api/iframeKnowledgeUrl
|
||||
VITE_AIPI_KNOWLEDGE_IFRAME_SKIN=red
|
||||
VITE_AIPI_MOPECHAT_URL=https://ch1.b.uat.4.cn/likun_b1_mope
|
||||
# 工作室/笔记本后端接口（侧边栏“工作室”列表、笔记本详情等都走这里，不是 VITE_NOTE_API_BASE_URL）
|
||||
VITE_AIPI_BACKENP_URL=https://knowledgetoolserver.b.uat.4.cn
|
||||
# 工作室/笔记本前端地址（用于 auth/callback 等跳转）
|
||||
VITE_AIPI_FRONTEND_URL=https://knowledgetoolserver.b.uat.4.cn
|
||||
VITE_AIPI_CONSUMER_URL=https://ch1.b.uat.4.cn/consumer
|
||||
VITE_AUTH_BASE_URL=https://auth.y.sit.4.cn
|
||||
VITE_AIPI_PGLINKTO_URL=https://pg.b.uat.4.cn
|
||||
VITE_AIPI_XKLINKTO_URL=https://kz.b.uat.4.cn
|
||||
|
||||
# VITE_NOTE_API_BASE_URL=http://127.0.0.1:8000
|
||||
# 工作室侧边栏显示开关；仅控制入口显示，展开内容仍依赖 notebook 接口成功返回数据
|
||||
VITE_STUDIO_ENABLED=true
|
||||
@@ -21,6 +21,9 @@
|
||||
# VITE_BACKEND_BASE_URL=https://ch1.b.uat.4.cn/deerflow
|
||||
# VITE_LANGGRAPH_BASE_URL=https://ch1.b.uat.4.cn/deerflow/api
|
||||
# VITE_NOTE_API_BASE_URL=http://47.88.25.99:8000
|
||||
# VITE_AIPI_BACKENP_URL=https://knowledgetoolserver.b.uat.4.cn
|
||||
# VITE_AIPI_FRONTEND_URL=https://knowledgetoolserver.b.uat.4.cn
|
||||
# VITE_STUDIO_ENABLED=true # 仅控制“工作室”入口显示，列表内容仍依赖 notebook 接口数据
|
||||
|
||||
# --- 生产打包（见 .env.production）---
|
||||
# 部署前修改 .env.production 中的地址，再执行 pnpm build
|
||||
|
||||
+32
-21
@@ -1,32 +1,43 @@
|
||||
# 内网 / 局域网生产打包（npm run build:network 或 pnpm build:network）
|
||||
# 打包前请将 192.168.1.100 改为实际服务器 IP；变量会写入 dist，运行时不可再改
|
||||
# 本地开发（pnpm dev）— 与原先 .env 保持一致
|
||||
# 个人覆盖请新建 .env.development.local（已 gitignore，优先级更高）
|
||||
|
||||
# Gateway / DeerFlow API（与 offline-backend DEPLOY 文档一致）
|
||||
# Gateway / DeerFlow API
|
||||
VITE_BACKEND_BASE_URL=http://47.88.25.99:7001
|
||||
VITE_LANGGRAPH_BASE_URL=http://47.88.25.99:7001/api
|
||||
|
||||
# 轻应用「新建笔记」系列接口
|
||||
VITE_NOTE_API_BASE_URL=http://192.168.1.100:8000
|
||||
# CMZS 后端接口
|
||||
VITE_API_BASE_URL=http://192.168.1.100/zncm
|
||||
VITE_NOTE_API_BASE_URL=http://47.88.25.99:8000
|
||||
# CMZS后端接口
|
||||
VITE_API_BASE_URL=https://ch1.b.uat.4.cn/zncm
|
||||
# 佳来模型对话接口
|
||||
VITE_AIPI_CHAT_URL=http://192.168.1.100/gpt
|
||||
VITE_AIPI_CHAT_URL=https://ch1.b.uat.4.cn/gpt
|
||||
# 多轮检索接口
|
||||
VITE_AIPI_GENERATE_CHAT_URL=http://192.168.1.100/jialai_b1_chat
|
||||
VITE_AIPI_TASK_CHAT_URL=http://192.168.1.100/qq_b1_chat
|
||||
VITE_AIPI_KNOWLEDGE_URL=http://192.168.1.100/knowlibrary
|
||||
VITE_AIPI_B1COH_URL=http://192.168.1.100/web
|
||||
VITE_AIPI_B2ACTOR_URL=http://192.168.1.100
|
||||
VITE_AIPI_GENERATE_CHAT_URL=https://ch1.b.uat.4.cn/jialai_b1_chat
|
||||
VITE_AIPI_TASK_CHAT_URL=https://ch1.b.uat.4.cn/qq_b1_chat
|
||||
VITE_AIPI_KNOWLEDGE_URL=https://chlib.b.uat.4.cn/knowlibrary
|
||||
VITE_AIPI_B1COH_URL=https://ch1.b.uat.4.cn/web
|
||||
VITE_AIPI_B2ACTOR_URL=https://ty.b.uat.4.cn
|
||||
VITE_AIPI_B2ACTOR_XWT_PATH=/fromB/toXWT?isFrame=1
|
||||
VITE_AIPI_KNOWLEDGE_IFRAME_API_URL=http://192.168.1.100/knowes/api/iframeKnowledgeUrl
|
||||
VITE_AIPI_KNOWLEDGE_IFRAME_API_URL=https://ch1.b.uat.4.cn/knowes/api/iframeKnowledgeUrl
|
||||
VITE_AIPI_KNOWLEDGE_IFRAME_SKIN=red
|
||||
VITE_AIPI_MOPECHAT_URL=http://192.168.1.100/likun_b1_mope
|
||||
VITE_AIPI_BACKENP_URL=http://192.168.1.100
|
||||
VITE_AIPI_CONSUMER_URL=http://192.168.1.100/consumer
|
||||
# MaxKey 鉴权（getTokenByOnlineTicket，内网部署请改为实际地址）
|
||||
VITE_AUTH_BASE_URL=https://auth.y.sit.4.cn
|
||||
VITE_AIPI_PGLINKTO_URL=http://192.168.1.100
|
||||
VITE_AIPI_XKLINKTO_URL=http://192.168.1.100
|
||||
VITE_AIPI_B2ACTOR_XWT_PATH=/fromB/toXWT?isFrame=1
|
||||
VITE_AIPI_KNOWLEDGE_IFRAME_API_URL=https://ch1.b.uat.4.cn/knowes/api/iframeKnowledgeUrl
|
||||
VITE_AIPI_KNOWLEDGE_IFRAME_SKIN=red
|
||||
VITE_AIPI_MOPECHAT_URL=https://ch1.b.uat.4.cn/likun_b1_mope
|
||||
VITE_AIPI_BACKENP_URL=http://47.88.25.99:8000
|
||||
# 工作室/笔记本后端接口（侧边栏“工作室”列表、笔记本详情等都走这里，不是 VITE_NOTE_API_BASE_URL）
|
||||
# 工作室/笔记本前端地址（用于 auth/callback 等跳转）
|
||||
# VITE_AIPI_FRONTEND_URL=https://knowledgetoolserver.b.uat.4.cn
|
||||
VITE_NOTEBOOK_API_BASE_URL=http://47.88.25.99:8000
|
||||
# 工作室侧边栏显示开关；仅控制入口显示，展开内容仍依赖 notebook 接口成功返回数据
|
||||
VITE_STUDIO_ENABLED=true
|
||||
VITE_AIPI_FRONTEND_URL=http://47.88.25.99:3000
|
||||
VITE_AIPI_CONSUMER_URL=https://ch1.b.uat.4.cn/consumer
|
||||
|
||||
# 可选：Canvas 独立 LangGraph 地址
|
||||
# MaxKey 鉴权（getTokenByOnlineTicket）
|
||||
VITE_AUTH_BASE_URL=https://auth.y.sit.4.cn
|
||||
VITE_AIPI_PGLINKTO_URL=https://pg.b.uat.4.cn
|
||||
VITE_AIPI_XKLINKTO_URL=https://kz.b.uat.4.cn
|
||||
# 可选：Canvas 独立 LangGraph 地址（不设则回退到 VITE_LANGGRAPH_BASE_URL）
|
||||
# VITE_CANVAS_LANGGRAPH_BASE_URL=
|
||||
|
||||
@@ -19,13 +19,17 @@ VITE_AIPI_B2ACTOR_XWT_PATH=/fromB/toXWT?isFrame=1
|
||||
VITE_AIPI_KNOWLEDGE_IFRAME_API_URL=https://ch1.b.uat.4.cn/knowes/api/iframeKnowledgeUrl
|
||||
VITE_AIPI_KNOWLEDGE_IFRAME_SKIN=red
|
||||
VITE_AIPI_MOPECHAT_URL=https://ch1.b.uat.4.cn/likun_b1_mope
|
||||
# 工作室/笔记本后端接口（侧边栏“工作室”列表、笔记本详情等都走这里，不是 VITE_NOTE_API_BASE_URL）
|
||||
VITE_AIPI_BACKENP_URL=https://knowledgetoolserver.b.uat.4.cn
|
||||
VITE_AIPI_CONSUMER_URL=https://ch1.b.uat.4.cn/consumer
|
||||
# MaxKey 鉴权（getTokenByOnlineTicket）
|
||||
VITE_AUTH_BASE_URL=https://auth.y.uat.4.cn
|
||||
VITE_AIPI_PGLINKTO_URL=https://pg.b.uat.4.cn
|
||||
VITE_AIPI_XKLINKTO_URL=https://kz.b.uat.4.cn
|
||||
# 工作室/笔记本前端地址（用于 auth/callback 等跳转）
|
||||
VITE_AIPI_FRONTEND_URL=https://knowledgetoolserver.b.uat.4.cn
|
||||
# 工作室侧边栏显示开关；仅控制入口显示，展开内容仍依赖 notebook 接口成功返回数据
|
||||
VITE_STUDIO_ENABLED=true
|
||||
|
||||
# 可选：Canvas 独立 LangGraph 地址
|
||||
# VITE_CANVAS_LANGGRAPH_BASE_URL=
|
||||
@@ -3,3 +3,6 @@
|
||||
# VITE_BACKEND_BASE_URL=https://your-intranet-host/deerflow
|
||||
# VITE_LANGGRAPH_BASE_URL=https://your-intranet-host/deerflow/api
|
||||
# VITE_NOTE_API_BASE_URL=https://your-intranet-host/note-api
|
||||
# VITE_AIPI_BACKENP_URL=https://your-notebook-backend-host
|
||||
# VITE_AIPI_FRONTEND_URL=https://your-notebook-frontend-host
|
||||
# VITE_STUDIO_ENABLED=true
|
||||
@@ -19,12 +19,17 @@ VITE_AIPI_B2ACTOR_XWT_PATH=/fromB/toXWT?isFrame=1
|
||||
VITE_AIPI_KNOWLEDGE_IFRAME_API_URL=https://ch1.b.sit.4.cn/knowes/api/iframeKnowledgeUrl
|
||||
VITE_AIPI_KNOWLEDGE_IFRAME_SKIN=red
|
||||
VITE_AIPI_MOPECHAT_URL=https://ch1.b.sit.4.cn/likun_b1_mope
|
||||
# 工作室/笔记本后端接口（侧边栏“工作室”列表、笔记本详情等都走这里，不是 VITE_NOTE_API_BASE_URL）
|
||||
VITE_AIPI_BACKENP_URL=https://knowledgetoolserver.b.sit.4.cn
|
||||
VITE_AIPI_CONSUMER_URL=https://ch1.b.sit.4.cn/consumer
|
||||
# MaxKey 鉴权（getTokenByOnlineTicket）
|
||||
VITE_AUTH_BASE_URL=https://auth.y.sit.4.cn
|
||||
VITE_AIPI_PGLINKTO_URL=https://pg.b.sit.4.cn
|
||||
VITE_AIPI_XKLINKTO_URL=https://kz.b.sit.4.cn
|
||||
# 工作室/笔记本前端地址（用于 auth/callback 等跳转）
|
||||
VITE_AIPI_FRONTEND_URL=https://knowledgetoolserver.b.sit.4.cn
|
||||
# 工作室侧边栏显示开关；仅控制入口显示，展开内容仍依赖 notebook 接口成功返回数据
|
||||
VITE_STUDIO_ENABLED=true
|
||||
|
||||
# 可选：Canvas 独立 LangGraph 地址
|
||||
# VITE_CANVAS_LANGGRAPH_BASE_URL=
|
||||
@@ -0,0 +1,514 @@
|
||||
# 多智能体规划 · 后台挂起执行 + 进度可视化 —— 分步实现方案
|
||||
|
||||
> 目标：在「多智能体规划」第二步增加**后台挂起**能力——把当前任务挂到后台，自动一路跑到
|
||||
> 最后一步（Step3 结果绘制完成）为止；历史记录下拉框里进行中的任务显示加载动画；点击进行中
|
||||
> 的任务弹出一个**大弹窗**，里面是**横向的智能体派活链路流程图**（节点 = 各席位智能体，图标 +
|
||||
> 名称，不同颜色，正在发言的节点和它的连接线带加载动画）；弹窗里有「查看」按钮，点击进入正在
|
||||
> 进行中的任务实时观察。
|
||||
|
||||
---
|
||||
|
||||
## 0. 现状与架构事实（动手前必读）
|
||||
|
||||
研究自现有代码，决定了整套方案的形态。**关键结论：当前编排循环跑在前端，离开页面即中断。**
|
||||
|
||||
### 0.1 前端现状
|
||||
|
||||
| 事实 | 位置 |
|
||||
|------|------|
|
||||
| Step2 编排循环（leader → 顺序派 special → leader … 直到 `dispatched===[]` 共识 / `MAX_CYCLES=8`）**完全由前端 hook 驱动** | `src/roundtable-planning/hooks/useStep2Orchestration.ts:992-1204`（recommend）、`1228-1439`（chain） |
|
||||
| 循环由 `currentStep===2` 的 `useEffect` 启停；离开 Step2 的 cleanup 会 `orchestrationCancelRef.current=true` + `abortAllInFlight()` 中断 | `useStep2Orchestration.ts:1468-1541`（尤其 cleanup `1534-1537`、`1471-1477`） |
|
||||
| 共识判定：`leaderRes.dispatched.length===0` → `setHasConsensus(true)` | `useStep2Orchestration.ts:1091-1099` |
|
||||
| 进入 Step3：手动点按钮，前置 `hasConsensus===true` | `Step2Panel.tsx:370-381`、`RoundtablePlanningPage.tsx:586-595` |
|
||||
| Step3「结果绘制」：前端流式调 `roundtable-report` 智能体，写出 `outputs/方案总览.html`，`phase→"done"` 即完成 | `src/roundtable-planning/hooks/useStep3Report.ts:36,51,165,560-596,636-652` |
|
||||
| 草稿持久化：`/api/roundtable-drafts`，含 step1/step2/step3 三段快照 + `furthestStep(1|2|3)`，**无显式 status 字段** | `src/roundtable-planning/api/drafts.ts:25-110,112,184-225` |
|
||||
| 历史下拉 UI（触发按钮 + 列表 + 重命名/删除） | `RoundtablePlanningPage.tsx:771-892` |
|
||||
| 自动保存触发点（Step1 回复完 / Step2 每轮气泡收尾 / Step3 报告保存 / 步骤前进） | `useDraftPersistence.ts:248-316` |
|
||||
| 加载草稿恢复：`handleLoadDraft` → `getDraft` → `cancelAllStreams` → hydrate → `setCurrentStep(furthestStep)` | `useDraftPersistence.ts:308-368` |
|
||||
|
||||
### 0.2 后端现状
|
||||
|
||||
| 事实 | 位置 |
|
||||
|------|------|
|
||||
| `/api/multi-agent/init`：为各席位并行建 thread + 单例总控 `roundtable-coordinator`，SSE 返回 `seat_ready`/`coordinator_ready`/`init_done(thread_ids)` | `app/gateway/routers/multi_agent.py:647-823` |
|
||||
| `/api/multi-agent/run/stream`：驱动**单轮** leader 或 special 的 LLM 执行，末尾 JSON 帧 `status`（派活列表 / `[]` 共识 / `clarification` / `error`） | `multi_agent.py:1076-1142` |
|
||||
| `/api/multi-agent/report/init`：为 Step3 报告建 thread | `multi_agent.py`（report/init） |
|
||||
| **后端不存在编排循环**——leader 派活由前端解释后再逐个发 `run/stream`；后端只做单轮执行 + 把派活/完成「广播」追加进各 thread 历史消息 | `multi_agent.py:24-29,487-502,1108-1142` |
|
||||
| 派活格式：`agent_orchestration` 工具调用 `{agent_name, task}`（旧式 bash 解析兼容） | `multi_agent.py:525-552` |
|
||||
|
||||
### 0.3 可复用模板：AI 写作的「后台多阶段流程」
|
||||
|
||||
AI 写作已经把「后台跑多阶段流程 + 前端 SSE 订阅 + 可 resume + 定时清理」跑通了，**圆桌后台作业直接照搬这套**：
|
||||
|
||||
| 模板要素 | 位置 |
|
||||
|------|------|
|
||||
| LangGraph 图驱动多阶段（researching/writing_outline/writing_draft/reviewing/…），条件路由推进，`interrupt()` 暂停点等用户输入 | `packages/harness/deerflow/agents/ai_writing/graph.py`、`nodes/*`（`pause_material_confirm` 等 `45-290`） |
|
||||
| Session 持久化表 `ai_writing_sessions`：`id/user_id/title/status/draft_*/transcript(LONGTEXT)/...`，`status∈{in_progress,done,error}` | `packages/harness/deerflow/persistence/ai_writing_sessions/model.py:14-39` |
|
||||
| `transcript` 用 `PortableLongText`（MySQL LONGTEXT，避开 64KB），时间用 `BeijingDateTime` | 同上 `27-38` |
|
||||
| 进度走 LangGraph Server 标准流 `stream_mode=["messages-tuple","values"]`，**graph 在 langgraph runtime 里跑，任意 worker 可 join stream**（这是后台健壮性的关键） | `ai_writing.py:1-17`、`langgraph.json:16-18` |
|
||||
| Checkpointer 共享 `AsyncSqliteSaver`，落 `.deer-flow/data/checkpoints.db`（需挂数据卷） | `runtime/checkpointer/async_provider.py` |
|
||||
| Cleanup cron（leader 文件锁、活跃保护、先删 CP 再删 DB、admin 手动触发） | `app/gateway/ai_writing_cleanup.py:26,34-59,111-135,193-215,307-367` |
|
||||
| **多 worker 坑**：模块级内存 dict（`_event_queues`）每 worker 一份会丢会话；SSE 进程内直调会整段 buffer。解法：状态进 DB+checkpointer、SSE 走真 TCP loopback `127.0.0.1`（`trust_env=False` 禁代理） | `multi_agent.py:271-293`、`AIWritingPage.tsx` 文件头注释 §3/§5 |
|
||||
|
||||
### 0.4 决策（已与产品确认）
|
||||
|
||||
1. **后端真后台执行**：把编排循环搬到后端 run，刷新 / 关页 / 换设备都不中断。
|
||||
2. **流程图节点 = 智能体派活链路**：横向排列的席位节点，正在发言的节点 + 连接线加载动画。
|
||||
|
||||
> ⚠️ **本方案最大的工作量在 Phase 2**：把目前跑在前端 TS 里的编排循环（`runOrchestration`/`runChainOrchestration`）
|
||||
> 移植成一个后端 **LangGraph「圆桌总控编排图」**。这是与 AI 写作一致、可在 LangGraph runtime 里
|
||||
> 后台跑且天然 checkpoint 的健壮路径。下文每个阶段都给出验收标准，可独立提测。
|
||||
|
||||
---
|
||||
|
||||
## 1. 总体架构
|
||||
|
||||
```
|
||||
┌─────────────────────────────── 前端 (frontend-web) ───────────────────────────────┐
|
||||
│ Step2Panel ──「后台挂起」按钮──▶ POST /api/roundtable-jobs (start) │
|
||||
│ HistoryDropdown ── 进行中任务显示 spinner ──▶ 点击 ──▶ DispatchChainModal(大弹窗) │
|
||||
│ DispatchChainModal ── 订阅 GET /api/roundtable-jobs/{id}/stream(SSE) │
|
||||
│ 横向派活链路流程图(节点=席位, 活动节点+连线动画) ──「查看」──▶ 进入任务实时观察 │
|
||||
└───────────────────────────────────────────────────────────────────────────────────┘
|
||||
│ SSE 进度 / 快照
|
||||
┌─────────────────────────────── 后端 (backend) ─────────────────────────────────────┐
|
||||
│ /api/roundtable-jobs 路由层(start/get/stream/resume/cancel) ── 仿 ai_writing.py │
|
||||
│ │ 启动后台 run │
|
||||
│ LangGraph「圆桌总控编排图」 roundtable_orchestrator ── 仿 ai_writing graph │
|
||||
│ init → leader_call → parse_dispatch → dispatch_seats(顺序) → loop ↺ │
|
||||
│ → consensus → report_draw(写 HTML) → done （clarification 点 interrupt()) │
|
||||
│ │ 每次状态转移持久化进度 │
|
||||
│ roundtable_jobs 表(status/phase/dispatch_chain/active_speaker/...) + 共享 checkpointer│
|
||||
│ cleanup cron (仿 ai_writing_cleanup.py) │
|
||||
└───────────────────────────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**核心思路**：后台作业 = 一个 LangGraph 图的一次 run。图节点内部复用现有的单轮执行能力
|
||||
（`multi_agent.py` 里 leader/special 的 run 逻辑），把「解释派活 → 顺序派活 → 回到 leader」的
|
||||
循环从前端搬进图节点。前端从「驱动者」退化为「观察者」：通过 SSE 订阅进度渲染。
|
||||
|
||||
---
|
||||
|
||||
## 2. 数据契约（前后端共享，先定义后实现）
|
||||
|
||||
### 2.1 作业状态机 `JobStatus`
|
||||
|
||||
```
|
||||
queued # 已创建，等待 worker 拉起
|
||||
running # 编排进行中（Step2 派活循环 / Step3 绘制）
|
||||
awaiting_input # 命中 clarification，等用户回答（interrupt 挂起）
|
||||
done # 已跑到 Step3 绘制完成
|
||||
error # 出错终止
|
||||
cancelled # 用户取消
|
||||
```
|
||||
|
||||
### 2.2 作业阶段 `JobPhase`（细化给流程图/进度条用）
|
||||
|
||||
```
|
||||
initializing # 建 thread / 总控就绪
|
||||
leader_thinking # 总控在决策派活
|
||||
dispatching # 正在顺序派活给席位（配合 active_speaker）
|
||||
consensus # 共识达成（dispatched=[]）
|
||||
report_drawing # Step3 报告绘制中
|
||||
report_done # 绘制完成
|
||||
```
|
||||
|
||||
### 2.3 派活链路节点 `DispatchChainNode`（流程图核心数据）
|
||||
|
||||
```ts
|
||||
interface DispatchChainNode {
|
||||
agentId: string; // 席位 agent_id（小写）
|
||||
name: string; // 显示名
|
||||
avatarType: string; // 复用 getAvatarTypeFor(agentId, index) → 决定颜色
|
||||
order: number; // 横向排列次序（chain 模式=链条顺序；recommend 模式=席位/发言顺序）
|
||||
state: 'pending' | 'active' | 'done'; // 节点状态（驱动颜色/动画）
|
||||
lastSpokeCycle?: number; // 最近发言轮次（可选，做 tooltip）
|
||||
}
|
||||
```
|
||||
|
||||
### 2.4 进度事件 `JobProgressEvent`（SSE 推送的归一化事件）
|
||||
|
||||
```ts
|
||||
type JobProgressEvent =
|
||||
| { type: 'status'; status: JobStatus }
|
||||
| { type: 'phase'; phase: JobPhase; cycle: number }
|
||||
| { type: 'chain'; nodes: DispatchChainNode[] } // 派活链路全量/增量
|
||||
| { type: 'active'; agentId: string | null } // 当前发言席位（null=总控/无）
|
||||
| { type: 'consensus'; percentage: number }
|
||||
| { type: 'dialogue'; bubble: Step2DialogueLike } // 新增/收尾的对话气泡（供「查看」实时渲染）
|
||||
| { type: 'clarification'; question: string } // 命中澄清
|
||||
| { type: 'done'; step3: DraftStep3Snapshot } // 终态：最终报告快照
|
||||
| { type: 'error'; detail: string };
|
||||
```
|
||||
|
||||
> SSE 通道可直接复用 LangGraph Server 的 `values` 流（图状态快照），由前端 hook 把 `values`
|
||||
> 映射成上述归一化事件；也可在路由层做映射后再下发。**推荐前端映射**（少一层后端耦合）。
|
||||
|
||||
### 2.5 作业记录 `RoundtableJob`（持久化 + 列表展示）
|
||||
|
||||
```ts
|
||||
interface RoundtableJob {
|
||||
id: string;
|
||||
draftId: string; // 关联的草稿
|
||||
userId: string;
|
||||
status: JobStatus;
|
||||
phase: JobPhase;
|
||||
cycle: number; // 当前轮次（0..MAX_CYCLES）
|
||||
dispatchChain: DispatchChainNode[];
|
||||
activeAgentId: string | null;
|
||||
consensusPercentage: number;
|
||||
pendingClarification: string | null;
|
||||
threadIds: Record<string,string> | null; // 复用 ThreadIdMap
|
||||
coordinatorName: string | null;
|
||||
orchestrationMode: 'recommend' | 'chain';
|
||||
chain?: { id: string; title: string } | null;
|
||||
error: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Phase 1 —— 后端：圆桌作业持久化模型
|
||||
|
||||
**目标**：建一张 `roundtable_jobs` 表（仿 `ai_writing_sessions`），存作业状态/阶段/派活链路，
|
||||
并在 `roundtable_drafts` 列表里能 join 出当前作业状态。
|
||||
|
||||
**涉及文件（新增/改）**
|
||||
- 新增 `packages/harness/deerflow/persistence/roundtable_jobs/model.py`（ORM 模型，仿 `ai_writing_sessions/model.py:14-39`）
|
||||
- 新增 `.../roundtable_jobs/sql.py`（Repository：`create / get / update_progress / list_by_user / list_older_than / delete`，仿 `ai_writing_sessions/sql.py`）
|
||||
- 新增 alembic 迁移 `persistence/migrations/versions/<date>_create_roundtable_jobs.py`
|
||||
- 改 `roundtable_drafts` 的列表查询：返回里带上 `status`/`jobId`（LEFT JOIN roundtable_jobs，或在 draft 行上冗余一个 `status` 字段，二选一，见下）
|
||||
|
||||
**步骤**
|
||||
1. 字段设计（对齐 §2.5）：`id(PK)`、`draft_id`、`user_id`、`status`、`phase`、`cycle(Int)`、
|
||||
`dispatch_chain(PortableLongText/JSON)`、`active_agent_id`、`consensus_percentage(Int)`、
|
||||
`pending_clarification(Text)`、`thread_ids(JSON)`、`coordinator_name`、`orchestration_mode`、
|
||||
`chain(JSON)`、`error(Text)`、`created_at/updated_at(BeijingDateTime)`。
|
||||
2. `dispatch_chain` / `thread_ids` / `chain` 用 `PortableLongText` 存 JSON 字符串，repo 层序列化。
|
||||
3. 列表 join：给 `DraftMeta` 增加 `status?: JobStatus` 与 `jobId?: string`。
|
||||
**推荐方案**：草稿与作业 1:1（一个草稿最多一个活跃作业），在 draft 列表查询 LEFT JOIN
|
||||
`roundtable_jobs` 取最新作业的 `status`。
|
||||
4. 索引：`(user_id, updated_at)`、`(draft_id)`、`(status)`（cleanup/列表用）。
|
||||
|
||||
**验收**
|
||||
- 迁移可 `alembic upgrade head` 跑通，MySQL 上 `dispatch_chain` 为 `longtext`。
|
||||
- 单测：create→update_progress→get 往返；`list_by_user` 按 `updated_at` 倒序；`list_older_than` 分批。
|
||||
|
||||
---
|
||||
|
||||
## Phase 2 —— 后端：圆桌总控编排 LangGraph 图（核心 / 最大工作量）
|
||||
|
||||
**目标**：把前端的编排循环移植成一个后端 LangGraph 图，可在 LangGraph runtime 里后台跑、天然
|
||||
checkpoint，一路跑到 Step3 绘制完成。
|
||||
|
||||
**涉及文件（新增）**
|
||||
- `packages/harness/deerflow/agents/roundtable_orchestrator/graph.py`（图装配，仿 `ai_writing/graph.py`）
|
||||
- `.../roundtable_orchestrator/state.py`（图状态 schema：intent、selectedAgents、threadIds、coordinatorName、
|
||||
mode/chain、dialogues、dispatchChain、activeAgentId、cycle、consensus、phase、step3 等）
|
||||
- `.../roundtable_orchestrator/nodes/*.py`（各节点）
|
||||
- 在 `langgraph.json` 注册新 assistant `roundtable_orchestrator`（仿 ai_writing assistant 注册，参考 `langgraph.json:16-18`）
|
||||
|
||||
**图节点设计（把前端循环逐段翻译过来）**
|
||||
|
||||
| 节点 | 职责 | 对应前端逻辑 |
|
||||
|------|------|------|
|
||||
| `init` | 复用 `_create_thread_direct` 批量建席位 thread + 总控就绪（或接收前端已建好的 `threadIds` 直接用） | `useStep2Orchestration.ts:1485-1531` / `multi_agent.py:647-823` |
|
||||
| `leader_call` | 跑一轮总控（agent_type=leader），拿 `status`（派活列表 / `[]` / `clarification`） | 单轮逻辑 `multi_agent.py:1076-1142` |
|
||||
| `route_after_leader`（条件边） | `clarification`→`interrupt`；有派活→`dispatch_seats`；`[]`→`consensus` | `useStep2Orchestration.ts:1091-1181` |
|
||||
| `dispatch_seats` | **顺序**派活：对 dispatched 里每个席位依次跑 special run；每开始一个就更新 `activeAgentId` + 进度持久化 | `useStep2Orchestration.ts:1101-1181`（务必串行，勿并行，详见前端 §5.4 注释） |
|
||||
| `clarification_pause` | `interrupt()` 挂起，`status→awaiting_input`，写 `pending_clarification` | 仿 ai_writing `pause_*` `45-290` |
|
||||
| `consensus` | `setHasConsensus`、`consensus=100`，落库后进入 `report_draw` | `1091-1099` |
|
||||
| `report_draw` | 跑 `roundtable-report`（先 report/init 建 thread），流式写 `outputs/方案总览.html`，产出 `DraftStep3Snapshot` | `useStep3Report.ts:91-149,636-652,560-596` |
|
||||
| `done` | `status→done`、写 `step3` 进作业 + 回写草稿 step3 快照 | `RoundtablePlanningPage.tsx:613-617` |
|
||||
|
||||
**关键实现要点**
|
||||
1. **复用单轮执行**：节点内部不要重写 LLM 调用，抽出 `multi_agent.py` 里 leader/special/report 的
|
||||
单轮 run 为可被图节点直接 `await` 的内部函数（去掉 HTTP 层，进程内调 LangGraph）。
|
||||
2. **派活广播**：保留现有把「总控给 X 派了活 / X 完成」追加进各 thread 历史的广播
|
||||
（`multi_agent.py:487-502`），让席位读到全局上下文。
|
||||
3. **MAX_CYCLES 兜底**：图里维护 `cycle`，≥8 强制收敛（对齐 `roundtable-constants.ts:13`）。
|
||||
4. **chain 模式**：`orchestration_mode==='chain'` 时按 `chain.seats` 固定顺序派活，跳过总控自由决策的
|
||||
部分（对齐 `runChainOrchestration` `1228-1439`）。
|
||||
5. **进度落库**：每个节点结束 `update_progress(jobId, {phase, cycle, dispatchChain, activeAgentId,
|
||||
consensus, dialogues_delta})`，前端 SSE 才有实时数据。
|
||||
6. **dialogues 累积**：把每轮气泡写进图状态 `dialogues`，既供「查看」实时渲染，也供作业结束回写草稿 step2。
|
||||
|
||||
**验收**
|
||||
- 用脚本（仿 `scripts/probe_ai_writing_assistant.py`）直接对图发起一次 run，不开前端，能从 intent +
|
||||
selectedAgents 一路跑到写出 `方案总览.html`，作业 `status` 终态 `done`。
|
||||
- 命中 clarification 时图 `interrupt`，`status=awaiting_input`，`pending_clarification` 有值。
|
||||
- chain 模式按链条顺序派活，recommend 模式由总控自由派活，两条路径都能收敛。
|
||||
|
||||
---
|
||||
|
||||
## Phase 3 —— 后端：作业控制 + 进度 SSE 接口
|
||||
|
||||
**目标**：暴露 start/get/stream/resume/cancel，后台 run 走 LangGraph Server（任意 worker 可 join）。
|
||||
|
||||
**涉及文件（新增/改）**
|
||||
- 新增 `app/gateway/routers/roundtable_jobs.py`（仿 `ai_writing.py` 的 CRUD + 控制壳）
|
||||
- 在 gateway `app.py` 注册路由
|
||||
- 新增 `app/gateway/roundtable_jobs_cleanup.py`（仿 `ai_writing_cleanup.py`）+ 在启动处挂 cron
|
||||
|
||||
**接口契约**
|
||||
|
||||
| 方法 | 路径 | 说明 |
|
||||
|------|------|------|
|
||||
| `POST` | `/api/roundtable-jobs` | 入参：`{draftId, intent, selectedAgents, threadIds?, coordinatorName?, model, orchestrationMode, chain?}`。建作业记录(`queued`) + 启动图 run（LangGraph Server thread），返回 `RoundtableJob` |
|
||||
| `GET` | `/api/roundtable-jobs/{id}` | 作业快照（轮询兜底 / 弹窗首帧） |
|
||||
| `GET` | `/api/roundtable-jobs/{id}/stream` | SSE 进度流：透传图 `values`/`messages-tuple`，或映射成 §2.4 事件下发。**走真 TCP loopback**（`multi_agent.py:271-293`），禁代理 |
|
||||
| `POST` | `/api/roundtable-jobs/{id}/resume` | 入参 `{answer}`，回填 clarification → 图 resume，`status→running` |
|
||||
| `POST` | `/api/roundtable-jobs/{id}/cancel` | 取消图 run，`status→cancelled` |
|
||||
| `GET` | `/api/roundtable-jobs?draftId=` | 按草稿查活跃作业（页面恢复用） |
|
||||
| `POST` | `/api/roundtable-jobs/admin/cleanup` | 管理员手动清理（仿 ai_writing admin cleanup `307-367`） |
|
||||
|
||||
**多 worker 健壮性（务必遵守，照搬 ai_writing 教训）**
|
||||
- 作业状态只存 **DB + checkpointer**，**不要**用模块级内存 dict 存 per-session 状态。
|
||||
- SSE 必须经真 TCP `127.0.0.1` loopback，不能 `httpx.ASGITransport(app=...)` 进程内直调（会整段 buffer）。
|
||||
- 图 run 跑在 LangGraph runtime（独立于处理 HTTP 的 worker），刷新/换 worker 都能重新 join stream。
|
||||
- 数据卷：`.deer-flow/data/checkpoints.db` 必须挂出，否则容器重启丢状态。
|
||||
|
||||
**验收**
|
||||
- `POST /start` 后立刻 `GET /{id}` 能拿到 `queued/running`；关掉 SSE 再重连能继续收进度。
|
||||
- 杀掉发起 start 的 worker（或多 worker 轮询），`resume`/`stream` 仍命中同一作业。
|
||||
- cleanup 干跑：活跃作业永不删，先删 CP 再删 DB。
|
||||
|
||||
---
|
||||
|
||||
## Phase 4 —— 前端：作业 API 客户端 + 数据模型扩展
|
||||
|
||||
**目标**：前端有一层干净的作业 API 与类型，历史列表能拿到 status。
|
||||
|
||||
**涉及文件（新增/改）**
|
||||
- 新增 `src/roundtable-planning/api/roundtable-jobs.ts`：
|
||||
```ts
|
||||
export async function startJob(payload: StartJobPayload): Promise<RoundtableJob>
|
||||
export async function getJob(id: string): Promise<RoundtableJob>
|
||||
export function streamJob(id: string, on: (e: JobProgressEvent) => void): () => void // 返回 unsubscribe
|
||||
export async function resumeJob(id: string, answer: string): Promise<void>
|
||||
export async function cancelJob(id: string): Promise<void>
|
||||
```
|
||||
- `streamJob` 复用项目现有 SSE/`streamMultiAgent` 的封装方式（`api/multi-agent.ts:403+`），把
|
||||
LangGraph `values` 映射成 §2.4 的归一化事件。
|
||||
- 改 `src/roundtable-planning/api/drafts.ts`：`DraftMeta` 增 `status?: JobStatus; jobId?: string`
|
||||
（`drafts.ts:76-83` + 字段映射 `122-178` 加 snake_case 转换）。
|
||||
- 新增 `src/roundtable-planning/lib/job-types.ts`：把 §2.1–2.5 的类型集中导出。
|
||||
|
||||
**验收**：`pnpm typecheck` 通过；`getJob`/`streamJob` 能拉到 Phase 3 的数据。
|
||||
|
||||
---
|
||||
|
||||
## Phase 5 —— 前端：Step2「后台挂起」按钮
|
||||
|
||||
**目标**：Step2 顶栏/底栏加按钮，点击把当前任务交给后端后台跑，前端停止本地循环、转为观察者。
|
||||
|
||||
**涉及文件（改）**
|
||||
- `src/roundtable-planning/components/Step2Panel.tsx`（按钮放在现有「进入第三步」附近 `370-381`）
|
||||
- `src/roundtable-planning/pages/RoundtablePlanningPage.tsx`（接线 + 观察者模式）
|
||||
- `src/roundtable-planning/hooks/useStep2Orchestration.ts`（暴露「停止本地循环并交后台」的方法）
|
||||
|
||||
**步骤**
|
||||
1. Step2Panel 加「⏼ 后台挂起」按钮，`onBackgroundSuspend` 回调。
|
||||
2. 页面 `handleBackgroundSuspend`：
|
||||
- `ensureDraft(2)` 拿到 `draftId`（`useDraftPersistence.ts` ensureDraft）。
|
||||
- 收集当前状态：`intentReady`、`selectedAgents`、`threadIds`、`coordinatorName`、`model`、
|
||||
`orchestrationMode`、`chain`（全部来自 `step2`/`step1` 现有状态）。
|
||||
- `startJob(...)` → 拿到 `jobId`。
|
||||
- **停止前端本地编排**：调用 `step2.stopOrchestration()` + 置一个 `backgroundedJobId` 标记，
|
||||
让 `currentStep===2` 的 useEffect **不再自启本地循环**（在 `useStep2Orchestration.ts:1468-1541`
|
||||
的启动条件里加 `&& !backgrounded`）。
|
||||
- toast「已转入后台，可离开页面，任务会自动跑到结果绘制完成」。
|
||||
- 刷新历史列表（`drafts` 重新拉，进行中项即出现 spinner）。
|
||||
3. **观察者模式**：若当前停留在 Step2 且该 draft 有 running 作业，订阅 `streamJob`，把进度事件渲染成
|
||||
对话气泡/活动席位（复用现有 Step2 渲染），而不是本地驱动。
|
||||
|
||||
**注意：避免「双跑」**——后台已接管后，前端绝不能再并行驱动同一批 thread。用 `backgroundedJobId`
|
||||
互斥；加载草稿时若发现有 running 作业，直接进观察者模式。
|
||||
|
||||
**验收**：点「后台挂起」→ 可立即切到别的任务/路由；回来仍在跑；不会出现前后端同时派活。
|
||||
|
||||
---
|
||||
|
||||
## Phase 6 —— 前端：历史下拉框「进行中」加载动画
|
||||
|
||||
**目标**：历史下拉里 `status==='running'`（或 `awaiting_input`）的草稿条目显示加载动画；点击进行中
|
||||
条目不直接 load，而是打开流程图弹窗。
|
||||
|
||||
**涉及文件（改）**
|
||||
- `src/roundtable-planning/pages/RoundtablePlanningPage.tsx` 的 `HistoryDropdown`（`771-892`）
|
||||
|
||||
**步骤**
|
||||
1. 列表项左侧名称前/后，按 `d.status` 渲染状态标记：
|
||||
- `running` → 旋转的 `Loader2`（`animate-spin`）+「进行中」。
|
||||
- `awaiting_input` → 呼吸点 +「待澄清」（琥珀色）。
|
||||
- `done`/无 → 维持现状（显示 `Step {furthestStep}`）。
|
||||
- `error` → 红点 +「出错」。
|
||||
2. 点击行为分流：
|
||||
- `running`/`awaiting_input` → `openDispatchChainModal(d.jobId)`（Phase 7），**不**直接 `onLoad`。
|
||||
- 其它 → 维持 `onLoad(id)`。
|
||||
3. 列表需要 `status`，确保 Phase 4 的 `DraftMeta.status` 已就位；下拉打开时 `refresh()` 拉最新。
|
||||
|
||||
**验收**：后台挂起后，历史下拉对应条目转圈；点击弹出流程图弹窗。
|
||||
|
||||
---
|
||||
|
||||
## Phase 7 —— 前端：派活链路流程图弹窗（横向 / 大弹窗 / 动画）
|
||||
|
||||
**目标**：大弹窗，横向排列的智能体派活链路。节点 = 席位（图标 + 名称），不同颜色；正在发言的
|
||||
节点和它的连接线带加载动画；含「查看」按钮。
|
||||
|
||||
**涉及文件（新增）**
|
||||
- `src/roundtable-planning/components/DispatchChainModal.tsx`
|
||||
|
||||
**实现选型**：链路是「总控 → 席位序列」的线性结构 + 需要对**单个节点和单条连线**做精确动画，
|
||||
**推荐手写 flex 横向布局 + CSS 动画连接线**（轻、可控）。项目已装 `@xyflow/react@12`（带 `animated`
|
||||
边）作为备选，但手写对本场景的「节点 loading + 连线流动」更直接。
|
||||
|
||||
**结构（手写方案草图）**
|
||||
```tsx
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="flex max-h-[88vh] flex-col gap-0 sm:max-w-5xl"> {/* 大弹窗 */}
|
||||
<DialogHeader>… 任务标题 + 阶段标签（leader_thinking/dispatching/report_drawing…） …</DialogHeader>
|
||||
|
||||
{/* 横向链路：总控 ──▶ 席位1 ──▶ 席位2 ──▶ … ──▶ [共识] ──▶ [报告绘制] */}
|
||||
<div className="custom-scrollbar overflow-x-auto py-8">
|
||||
<div className="flex items-center gap-0 min-w-max px-6">
|
||||
<CoordinatorNode active={phase==='leader_thinking'} />
|
||||
{nodes.map((n,i)=>(
|
||||
<Fragment key={n.agentId}>
|
||||
<Connector active={n.state==='active'} /> {/* 活动连线：流动虚线动画 */}
|
||||
<ChainNode node={n} /> {/* 活动节点：彩色+脉冲光环 */}
|
||||
</Fragment>
|
||||
))}
|
||||
<Connector active={phase==='consensus'} />
|
||||
<MilestoneNode label="共识" done={consensus===100} />
|
||||
<Connector active={phase==='report_drawing'} />
|
||||
<MilestoneNode label="报告绘制" active={phase==='report_drawing'} done={phase==='report_done'} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="border-t pt-3 sm:justify-between">
|
||||
<span className="text-xs text-muted-foreground">轮次 {cycle}/8 · {statusLabel}</span>
|
||||
<Button onClick={onView}>查看</Button> {/* Phase 8 */}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
```
|
||||
|
||||
**节点颜色**：`avatarType = getAvatarTypeFor(agentId, order)` → `chainTagClasses(avatarType)`
|
||||
（复用 `lib/business-chain.ts:56-72` + `lib/roundtable-constants.ts`），与业务链条卡片同一套色。
|
||||
|
||||
**节点状态样式**
|
||||
- `pending`：灰色描边、低透明度。
|
||||
- `active`：席位色填充 + 外圈 `animate-ping`/脉冲光环 + 图标旋转或呼吸。
|
||||
- `done`：席位色实心 + 右上角 ✓。
|
||||
|
||||
**连接线加载动画（active 连线）**：CSS 流动虚线（marching-ants）或渐变扫光：
|
||||
```css
|
||||
/* roundtable-planning.css 追加 */
|
||||
@keyframes chain-flow { to { background-position: 20px 0; } }
|
||||
.chain-connector--active {
|
||||
background-image: linear-gradient(90deg, var(--brand-500) 50%, transparent 50%);
|
||||
background-size: 20px 100%;
|
||||
animation: chain-flow 0.6s linear infinite;
|
||||
}
|
||||
```
|
||||
|
||||
**数据来源**：弹窗 mount 时 `getJob(jobId)` 取首帧，随后 `streamJob(jobId, onEvent)` 实时更新
|
||||
`nodes`/`activeAgentId`/`phase`/`consensus`/`cycle`；`done` 事件后停止动画、全节点置 `done`。
|
||||
弹窗关闭时 `unsubscribe`。
|
||||
|
||||
**验收**：弹窗够大、横向滚动；活动席位节点和它左侧连线在动；阶段推进时高亮顺移；`done` 后静止。
|
||||
|
||||
---
|
||||
|
||||
## Phase 8 —— 前端：「查看」进入进行中任务并实时观察
|
||||
|
||||
**目标**：弹窗「查看」→ 进入该任务，停在 Step2 实时看后台进度（气泡/活动席位随 SSE 刷新），
|
||||
跑完自动呈现 Step3 结果。
|
||||
|
||||
**涉及文件（改）**
|
||||
- `RoundtablePlanningPage.tsx`（接 `onView`）
|
||||
- `useDraftPersistence.ts`（`handleLoadDraft` 增「带作业」分支）
|
||||
- `useStep2Orchestration.ts`（观察者渲染）
|
||||
|
||||
**步骤**
|
||||
1. `onView`：关弹窗 → `handleLoadDraft(draftId)` 恢复该草稿到 Step2（`useDraftPersistence.ts:308-368`），
|
||||
但**跳过本地编排自启**（识别到有 running 作业 → 进观察者模式，对齐 Phase 5 的互斥标记）。
|
||||
2. 订阅 `streamJob(jobId)`，把 `dialogue` 事件 append 进 `step2RoundtableDialogues`、`active` 事件
|
||||
驱动 `activeSpeakerId` 高亮、`consensus` 更新百分比。
|
||||
3. 命中 `awaiting_input`：在 Step2 弹出澄清输入（复用现有 `pendingClarification` UI），用户回答 →
|
||||
`resumeJob(jobId, answer)`（而非本地 `submitClarification`）。
|
||||
4. `done` 事件：用返回的 `DraftStep3Snapshot` 走 `hydrateStep3` + 允许切到 Step3 查看报告
|
||||
（`useStep3Report.hydrateSaved` `708-767`）；作业列表该项变「已完成」。
|
||||
|
||||
**验收**：从历史「查看」进入能实时看到后台在跑；澄清能在前端回答并续跑；跑完能看到最终报告。
|
||||
|
||||
---
|
||||
|
||||
## Phase 9 —— 边界、健壮性与收尾
|
||||
|
||||
1. **双跑互斥**：任一 draft 同一时刻只允许一个执行者（前端本地 or 后台作业）。加载草稿/进入 Step2
|
||||
前先 `GET /api/roundtable-jobs?draftId=`，有 running 就进观察者模式。
|
||||
2. **后台命中澄清**：`awaiting_input` 时历史下拉显示「待澄清」徽标；流程图弹窗显示「等待澄清」；
|
||||
只有「查看」进去才能回答（或在弹窗里直接给一个回答框，调用 `resumeJob`）。
|
||||
3. **取消**：流程图弹窗/Step2 提供「停止后台」→ `cancelJob`，`status→cancelled`，前端可恢复本地编辑。
|
||||
4. **错误恢复**：`error` 事件展示 detail；允许「重试」= 重新 `startJob`（沿用已建 threadIds）。
|
||||
5. **MAX_CYCLES / 预算**：后台图内兜底（对齐前端 `MAX_CYCLES=8`），到顶强制收敛并照常进 Step3。
|
||||
6. **多 worker**：严格遵守 Phase 3 的「状态进 DB+checkpointer、SSE 走 loopback」；部署若多 worker
|
||||
需 sticky 或全靠 DB 态（推荐后者）。
|
||||
7. **清理**：`roundtable_jobs` cleanup cron（活跃保护、先删 CP 再删 DB），与 draft 生命周期对齐。
|
||||
8. **历史列表性能**：draft 列表 join 作业 status 时注意 N+1；用一次 LEFT JOIN 取最新作业。
|
||||
|
||||
---
|
||||
|
||||
## 端到端验证清单（提测前逐条过）
|
||||
|
||||
- [ ] Step2 点「后台挂起」→ 立刻可离开页面 / 切到别的任务，后台继续跑。
|
||||
- [ ] 历史下拉里该任务显示加载动画（转圈）。
|
||||
- [ ] 点击进行中任务 → 大弹窗、横向派活链路、活动节点+连线在动、节点不同颜色。
|
||||
- [ ] 阶段推进（leader→派活→共识→报告绘制）时弹窗高亮顺移。
|
||||
- [ ] 弹窗「查看」→ 进入任务实时观察气泡/活动席位。
|
||||
- [ ] 后台命中澄清 → 列表「待澄清」+ 弹窗提示 + 可回答续跑（`resumeJob`）。
|
||||
- [ ] 一路自动跑到 Step3「绘制完成」，最终报告可在 Step3 查看，作业 `done`。
|
||||
- [ ] 浏览器刷新 / 关页重开后，任务仍在后台跑、状态可恢复（真后台验证）。
|
||||
- [ ] 取消后台 → `cancelled`，无残留双跑。
|
||||
- [ ] 多 worker（或杀 worker）下 stream/resume 不丢会话。
|
||||
- [ ] cleanup 干跑不误删活跃作业。
|
||||
|
||||
---
|
||||
|
||||
## 工作量与排期建议
|
||||
|
||||
| 阶段 | 内容 | 粗估 | 依赖 |
|
||||
|------|------|------|------|
|
||||
| P0 | 数据契约定型（本文 §2） | 0.5d | — |
|
||||
| P1 | 后端作业表 + repo + 迁移 | 1d | P0 |
|
||||
| **P2** | **后端编排图（移植循环）** | **3–5d（核心难点）** | P0,P1 |
|
||||
| P3 | 后端控制 + SSE + cleanup | 1.5d | P1,P2 |
|
||||
| P4 | 前端作业 API + 类型 + draft status | 0.5d | P3 |
|
||||
| P5 | Step2 后台挂起按钮 + 互斥 | 1d | P4 |
|
||||
| P6 | 历史下拉 loading 动画 | 0.5d | P4 |
|
||||
| P7 | 派活链路流程图弹窗 | 1.5d | P4 |
|
||||
| P8 | 「查看」实时观察 + 澄清续跑 | 1.5d | P5,P7 |
|
||||
| P9 | 边界/健壮性/清理 | 1d | 全部 |
|
||||
|
||||
> 建议先打通 **P1→P2→P3** 的后端最小闭环（脚本验证图能后台跑到出报告），再做前端 P4–P8。
|
||||
> P2 是整条链路成败的关键，务必先用脱离前端的探针脚本（仿 `scripts/probe_ai_writing_assistant.py`）跑通。
|
||||
|
||||
---
|
||||
|
||||
## 附：关键参考代码索引
|
||||
|
||||
- 前端编排循环（待移植到后端）：`useStep2Orchestration.ts:992-1204,1228-1439,1468-1541`
|
||||
- 共识判定 / 进 Step3：`useStep2Orchestration.ts:1091-1099`、`Step2Panel.tsx:370-381`、`RoundtablePlanningPage.tsx:586-595`
|
||||
- Step3 绘制完成标志：`useStep3Report.ts:51,165,560-596,636-652`
|
||||
- 草稿模型 / API / 自动保存 / 加载恢复：`api/drafts.ts:25-110,184-225`、`useDraftPersistence.ts:248-316,308-368`
|
||||
- 历史下拉 UI：`RoundtablePlanningPage.tsx:771-892`
|
||||
- 后端单轮执行 / 派活 / 广播：`multi_agent.py:647-823,1076-1142,525-552,487-502`、loopback `271-293`
|
||||
- AI 写作模板：`agents/ai_writing/graph.py`、`ai_writing_sessions/model.py:14-39`、`ai_writing.py`、`ai_writing_cleanup.py:307-367`、`AIWritingPage.tsx` 文件头注释
|
||||
- 颜色体系复用：`lib/business-chain.ts:56-72`、`lib/roundtable-constants.ts`（`getAvatarTypeFor`）
|
||||
- 流程图备选库：`@xyflow/react@12`（已安装）
|
||||
```
|
||||
@@ -44,18 +44,23 @@ import {
|
||||
useArtifactContent,
|
||||
useUpdateArtifactContent,
|
||||
} from "@/core/artifacts/hooks";
|
||||
import { urlOfArtifact } from "@/core/artifacts/utils";
|
||||
import { resolveArtifactURL, urlOfArtifact } from "@/core/artifacts/utils";
|
||||
import { useI18n } from "@/core/i18n/hooks";
|
||||
import { downloadMarkdownAsDocx } from "@/core/scheduled-tasks/markdown-docx";
|
||||
import { installSkill } from "@/core/skills/api";
|
||||
import { streamdownPlugins } from "@/core/streamdown";
|
||||
import { checkCodeFile, getFileName } from "@/core/utils/files";
|
||||
import {
|
||||
createMarkdownAnchorResolver,
|
||||
injectInPageAnchorHandler,
|
||||
isInPageAnchor,
|
||||
scrollToInPageAnchor,
|
||||
} from "@/core/utils/markdown";
|
||||
import {
|
||||
checkCodeFile,
|
||||
getFileName,
|
||||
isImageFile,
|
||||
} from "@/core/utils/files";
|
||||
import {
|
||||
createMarkdownAnchorResolver,
|
||||
injectInPageAnchorHandler,
|
||||
isInPageAnchor,
|
||||
scrollToInPageAnchor,
|
||||
} from "@/core/utils/markdown";
|
||||
import { getBackendBaseURL } from "@/core/config";
|
||||
import { env } from "@/env";
|
||||
import { desensitize } from "@/lib/desensitize";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -98,29 +103,36 @@ export function ArtifactFileDetail({
|
||||
className,
|
||||
filepath: filepathFromProps,
|
||||
threadId,
|
||||
onClose,
|
||||
}: {
|
||||
className?: string;
|
||||
filepath: string;
|
||||
threadId: string;
|
||||
/** 覆盖默认关闭行为（仅 setOpen(false)）；圆桌 Step3 文件预览用于退出沙箱模式。 */
|
||||
onClose?: () => void;
|
||||
}) {
|
||||
const { t } = useI18n();
|
||||
const { artifacts, setOpen, select } = useArtifacts();
|
||||
const { isMock, thread, publicShareCode } = useThread();
|
||||
const isWriteFile = useMemo(() => {
|
||||
const isWriteFileVirtual = useMemo(() => {
|
||||
return filepathFromProps.startsWith("write-file:");
|
||||
}, [filepathFromProps]);
|
||||
const filepath = useMemo(() => {
|
||||
if (isWriteFile) {
|
||||
if (isWriteFileVirtual) {
|
||||
const url = new URL(filepathFromProps);
|
||||
return decodeURIComponent(url.pathname);
|
||||
}
|
||||
return filepathFromProps;
|
||||
}, [filepathFromProps, isWriteFile]);
|
||||
}, [filepathFromProps, isWriteFileVirtual]);
|
||||
/** write_file 流式预览走 tool args 文本；图片等二进制产物始终走 artifacts API。 */
|
||||
const useWriteFileStreaming = useMemo(() => {
|
||||
return isWriteFileVirtual && !isImageFile(filepath);
|
||||
}, [filepath, isWriteFileVirtual]);
|
||||
const isSkillFile = useMemo(() => {
|
||||
return filepath.endsWith(".skill");
|
||||
}, [filepath]);
|
||||
const { isCodeFile, language } = useMemo(() => {
|
||||
if (isWriteFile) {
|
||||
if (useWriteFileStreaming) {
|
||||
let nextLanguage = checkCodeFile(filepath).language;
|
||||
nextLanguage ??= "text";
|
||||
return { isCodeFile: true, language: nextLanguage };
|
||||
@@ -129,18 +141,21 @@ export function ArtifactFileDetail({
|
||||
return { isCodeFile: true, language: "markdown" };
|
||||
}
|
||||
return checkCodeFile(filepath);
|
||||
}, [filepath, isWriteFile, isSkillFile]);
|
||||
}, [filepath, useWriteFileStreaming, isSkillFile]);
|
||||
const isSupportPreview = useMemo(() => {
|
||||
return language === "html" || language === "markdown";
|
||||
}, [language]);
|
||||
const { content, isApplyingEdit } = useArtifactContent({
|
||||
threadId,
|
||||
filepath: filepathFromProps,
|
||||
enabled: isCodeFile && !isWriteFile,
|
||||
enabled: isCodeFile && !useWriteFileStreaming,
|
||||
});
|
||||
|
||||
const canEditArtifact =
|
||||
language === "markdown" && !isWriteFile && !isSkillFile && !isMock;
|
||||
language === "markdown" &&
|
||||
!useWriteFileStreaming &&
|
||||
!isSkillFile &&
|
||||
!isMock;
|
||||
const [draftContent, setDraftContent] = useState("");
|
||||
const [hasLocalEdits, setHasLocalEdits] = useState(false);
|
||||
const updateArtifact = useUpdateArtifactContent();
|
||||
@@ -148,12 +163,13 @@ export function ArtifactFileDetail({
|
||||
const isHtmlStreaming = language === "html" && thread.isLoading;
|
||||
const hasMultipleArtifacts = (artifacts?.length ?? 0) > 1;
|
||||
const fileTypeLabel = useMemo(() => {
|
||||
if (isImageFile(filepath)) return "IMG";
|
||||
if (language === "html") return "HTML";
|
||||
if (language === "markdown") return "MD";
|
||||
if (isSkillFile) return "SKILL";
|
||||
if (language) return language.toUpperCase();
|
||||
return "FILE";
|
||||
}, [isSkillFile, language]);
|
||||
}, [filepath, isSkillFile, language]);
|
||||
|
||||
const [viewMode, setViewMode] = useState<"code" | "preview">("code");
|
||||
const [allowAutoViewSwitch, setAllowAutoViewSwitch] = useState(true);
|
||||
@@ -463,7 +479,7 @@ export function ArtifactFileDetail({
|
||||
{fileTypeLabel}
|
||||
</span>
|
||||
<ArtifactTitle className="min-w-0">
|
||||
{isWriteFile ? (
|
||||
{useWriteFileStreaming ? (
|
||||
<div className="truncate px-3">{getFileName(filepath)}</div>
|
||||
) : hasMultipleArtifacts ? (
|
||||
<Select value={filepath} onValueChange={select}>
|
||||
@@ -540,7 +556,7 @@ export function ArtifactFileDetail({
|
||||
onClick={handleSaveArtifact}
|
||||
/>
|
||||
)}
|
||||
{!isWriteFile && filepath.endsWith(".skill") && (
|
||||
{!useWriteFileStreaming && filepath.endsWith(".skill") && (
|
||||
<Tooltip content={t.toolCalls.skillInstallTooltip}>
|
||||
<ArtifactAction
|
||||
icon={isInstalling ? LoaderIcon : PackageIcon}
|
||||
@@ -559,7 +575,7 @@ export function ArtifactFileDetail({
|
||||
label={t.common.openInNewWindow}
|
||||
tooltip={t.common.openInNewWindow}
|
||||
onClick={async () => {
|
||||
if (isWriteFile) {
|
||||
if (useWriteFileStreaming) {
|
||||
handleOpenWriteFileInNewTab();
|
||||
return;
|
||||
}
|
||||
@@ -597,7 +613,7 @@ export function ArtifactFileDetail({
|
||||
tooltip={t.clipboard.copyToClipboard}
|
||||
/>
|
||||
)}
|
||||
{!isWriteFile && language === "markdown" && (
|
||||
{!useWriteFileStreaming && language === "markdown" && (
|
||||
<ArtifactAction
|
||||
icon={isExportingWord ? LoaderIcon : FileType2Icon}
|
||||
label="另存为 Word"
|
||||
@@ -611,7 +627,7 @@ export function ArtifactFileDetail({
|
||||
label={t.common.download}
|
||||
tooltip={t.common.download}
|
||||
onClick={async () => {
|
||||
if (isWriteFile) {
|
||||
if (useWriteFileStreaming) {
|
||||
handleDownloadWriteFile();
|
||||
return;
|
||||
}
|
||||
@@ -636,7 +652,7 @@ export function ArtifactFileDetail({
|
||||
className="hover:bg-background"
|
||||
icon={XIcon}
|
||||
label={t.common.close}
|
||||
onClick={() => setOpen(false)}
|
||||
onClick={() => (onClose ? onClose() : setOpen(false))}
|
||||
tooltip={t.common.close}
|
||||
/>
|
||||
</ArtifactActions>
|
||||
@@ -669,6 +685,8 @@ export function ArtifactFileDetail({
|
||||
<ArtifactFilePreview
|
||||
content={desensitize(displayContent ?? "")}
|
||||
language={language ?? "text"}
|
||||
threadId={threadId}
|
||||
publicShareCode={publicShareCode}
|
||||
animated={showPreviewSwitchPulse}
|
||||
activeCursor={isApplyingEdit}
|
||||
/>
|
||||
@@ -709,14 +727,57 @@ export function ArtifactFileDetail({
|
||||
);
|
||||
}
|
||||
|
||||
function SandboxPreviewImage({
|
||||
src,
|
||||
alt,
|
||||
threadId,
|
||||
publicShareCode,
|
||||
...props
|
||||
}: React.ImgHTMLAttributes<HTMLImageElement> & {
|
||||
threadId: string;
|
||||
publicShareCode?: string;
|
||||
}) {
|
||||
if (!src || typeof src !== "string") {
|
||||
return null;
|
||||
}
|
||||
|
||||
let url = src;
|
||||
if (src.startsWith("/mnt/")) {
|
||||
if (publicShareCode) {
|
||||
const normalized = src.startsWith("/") ? src : `/${src}`;
|
||||
url = `${getBackendBaseURL()}/api/public/shares/${encodeURIComponent(
|
||||
publicShareCode,
|
||||
)}/files${normalized}`;
|
||||
} else {
|
||||
url = resolveArtifactURL(src, threadId);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<img
|
||||
{...props}
|
||||
className={cn(
|
||||
"my-3 max-w-full overflow-hidden rounded-lg",
|
||||
props.className,
|
||||
)}
|
||||
src={url}
|
||||
alt={alt}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function ArtifactFilePreview({
|
||||
content,
|
||||
language,
|
||||
threadId,
|
||||
publicShareCode,
|
||||
animated = false,
|
||||
activeCursor = false,
|
||||
}: {
|
||||
content: string;
|
||||
language: string;
|
||||
threadId: string;
|
||||
publicShareCode?: string;
|
||||
animated?: boolean;
|
||||
activeCursor?: boolean;
|
||||
}) {
|
||||
@@ -812,11 +873,20 @@ export function ArtifactFilePreview({
|
||||
animated && "animate-[sandbox-preview-enter_320ms_ease-out]",
|
||||
)}
|
||||
>
|
||||
<Streamdown
|
||||
className="size-full"
|
||||
{...streamdownPlugins}
|
||||
components={markdownComponents}
|
||||
>
|
||||
<Streamdown
|
||||
className="size-full"
|
||||
{...streamdownPlugins}
|
||||
components={{
|
||||
...markdownComponents,
|
||||
img: (props) => (
|
||||
<SandboxPreviewImage
|
||||
{...props}
|
||||
threadId={threadId}
|
||||
publicShareCode={publicShareCode}
|
||||
/>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{content ?? ""}
|
||||
</Streamdown>
|
||||
{activeCursor && (
|
||||
|
||||
@@ -0,0 +1,93 @@
|
||||
import { apiFetch } from "@/core/api/fetch-client";
|
||||
import { getBackendBaseURL } from "@/core/config";
|
||||
import { downloadMarkdownAsDocx } from "@/core/scheduled-tasks/markdown-docx";
|
||||
|
||||
function filenameFromContentDisposition(header: string | null): string | null {
|
||||
if (!header) return null;
|
||||
const star = /filename\*=(?:UTF-8'')?([^;]+)/i.exec(header);
|
||||
if (star) {
|
||||
const raw = star[1].replace(/["']/g, "").trim();
|
||||
try {
|
||||
return decodeURIComponent(raw);
|
||||
} catch {
|
||||
return raw;
|
||||
}
|
||||
}
|
||||
const plain = /filename="?([^";\n]+)"?/i.exec(header);
|
||||
return plain ? plain[1].trim() : null;
|
||||
}
|
||||
|
||||
function sanitizeFallbackFilename(title: string | undefined): string {
|
||||
const base = (title?.trim() || "document").replace(/[<>:"/\\|?*\x00-\x1f]+/g, "_");
|
||||
return base.toLowerCase().endsWith(".docx") ? base : `${base}.docx`;
|
||||
}
|
||||
|
||||
async function downloadBlobResponse(response: Response, fallbackFilename: string) {
|
||||
if (!response.ok) {
|
||||
const error = await response
|
||||
.json()
|
||||
.catch(() => ({ detail: "导出 Word 失败" }));
|
||||
const detail = error.detail;
|
||||
if (typeof detail === "string") throw new Error(detail);
|
||||
throw new Error("导出 Word 失败");
|
||||
}
|
||||
|
||||
const blob = await response.blob();
|
||||
const filename =
|
||||
filenameFromContentDisposition(response.headers.get("Content-Disposition")) ??
|
||||
fallbackFilename;
|
||||
const url = URL.createObjectURL(blob);
|
||||
const anchor = document.createElement("a");
|
||||
anchor.href = url;
|
||||
anchor.download = filename;
|
||||
anchor.rel = "noopener";
|
||||
document.body.appendChild(anchor);
|
||||
anchor.click();
|
||||
anchor.remove();
|
||||
window.setTimeout(() => URL.revokeObjectURL(url), 30_000);
|
||||
}
|
||||
|
||||
/**
|
||||
* 通用 Markdown → Word 导出（Gateway `writing` 路由，与 `/api/writing/rewrite` 同级）。
|
||||
*
|
||||
* POST /api/writing/export/docx
|
||||
* Body: { title?: string, markdown: string }
|
||||
*
|
||||
* 返回 `application/vnd.openxmlformats-officedocument.wordprocessingml.document`，
|
||||
* 文件名在 `Content-Disposition` 中。
|
||||
*/
|
||||
export async function downloadMarkdownDocxFromBackend(options: {
|
||||
title?: string;
|
||||
markdown: string;
|
||||
}): Promise<void> {
|
||||
const markdown = options.markdown.trim();
|
||||
if (!markdown) {
|
||||
throw new Error("文档内容为空");
|
||||
}
|
||||
|
||||
const fallbackFilename = sanitizeFallbackFilename(options.title);
|
||||
|
||||
try {
|
||||
const response = await apiFetch(`${getBackendBaseURL()}/api/writing/export/docx`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
title: options.title?.trim() || undefined,
|
||||
markdown,
|
||||
}),
|
||||
});
|
||||
|
||||
if (response.status === 404) {
|
||||
await downloadMarkdownAsDocx(markdown, options.title?.trim() || "document", options.title);
|
||||
return;
|
||||
}
|
||||
|
||||
await downloadBlobResponse(response, fallbackFilename);
|
||||
} catch (err) {
|
||||
if (err instanceof TypeError) {
|
||||
await downloadMarkdownAsDocx(markdown, options.title?.trim() || "document", options.title);
|
||||
return;
|
||||
}
|
||||
throw err;
|
||||
}
|
||||
}
|
||||
@@ -60,7 +60,12 @@ export async function downloadArtifactFile({
|
||||
filenameFromContentDisposition(cd) ?? getFileName(filepath);
|
||||
|
||||
const blob = await res.blob();
|
||||
const objectUrl = URL.createObjectURL(blob);
|
||||
const contentType = res.headers.get("Content-Type")?.split(";")[0]?.trim();
|
||||
const downloadBlob =
|
||||
contentType && blob.type !== contentType
|
||||
? new Blob([await blob.arrayBuffer()], { type: contentType })
|
||||
: blob;
|
||||
const objectUrl = URL.createObjectURL(downloadBlob);
|
||||
const a = document.createElement("a");
|
||||
a.href = objectUrl;
|
||||
a.download = filename;
|
||||
|
||||
@@ -3,9 +3,24 @@ import { useMemo } from "react";
|
||||
|
||||
import { useThread } from "@/components/workspace/messages/context";
|
||||
|
||||
import { isImageFile } from "../utils/files";
|
||||
|
||||
import { loadArtifactContent, loadArtifactContentFromToolCall } from "./loader";
|
||||
import { updateArtifactContent } from "./api";
|
||||
|
||||
function isWriteFileStreamingUrl(filepath: string): boolean {
|
||||
if (!filepath.startsWith("write-file:")) {
|
||||
return false;
|
||||
}
|
||||
try {
|
||||
const url = new URL(filepath);
|
||||
const path = decodeURIComponent(url.pathname);
|
||||
return !isImageFile(path);
|
||||
} catch {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
function hasToolResult(thread: ReturnType<typeof useThread>["thread"], toolCallId?: string) {
|
||||
if (!toolCallId) {
|
||||
return false;
|
||||
@@ -70,16 +85,16 @@ export function useArtifactContent({
|
||||
threadId: string;
|
||||
enabled?: boolean;
|
||||
}) {
|
||||
const isWriteFile = useMemo(() => {
|
||||
return filepath.startsWith("write-file:");
|
||||
const useWriteFileStreaming = useMemo(() => {
|
||||
return isWriteFileStreamingUrl(filepath);
|
||||
}, [filepath]);
|
||||
const { thread, isMock, publicShareCode } = useThread();
|
||||
const content = useMemo(() => {
|
||||
if (isWriteFile) {
|
||||
if (useWriteFileStreaming) {
|
||||
return loadArtifactContentFromToolCall({ url: filepath, thread });
|
||||
}
|
||||
return null;
|
||||
}, [filepath, isWriteFile, thread]);
|
||||
}, [filepath, useWriteFileStreaming, thread]);
|
||||
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: ["artifact", filepath, threadId, isMock, publicShareCode],
|
||||
@@ -92,7 +107,7 @@ export function useArtifactContent({
|
||||
staleTime: 5 * 60 * 1000,
|
||||
});
|
||||
const pendingEdit = useMemo(() => {
|
||||
if (isWriteFile) {
|
||||
if (useWriteFileStreaming) {
|
||||
return null;
|
||||
}
|
||||
return applyPendingTextEdit({
|
||||
@@ -100,11 +115,13 @@ export function useArtifactContent({
|
||||
filepath,
|
||||
thread,
|
||||
});
|
||||
}, [data?.content, filepath, isWriteFile, thread]);
|
||||
}, [data?.content, filepath, useWriteFileStreaming, thread]);
|
||||
|
||||
return {
|
||||
content: isWriteFile ? content : (pendingEdit?.content ?? data?.content),
|
||||
url: isWriteFile ? undefined : data?.url,
|
||||
content: useWriteFileStreaming
|
||||
? content
|
||||
: (pendingEdit?.content ?? data?.content),
|
||||
url: useWriteFileStreaming ? undefined : data?.url,
|
||||
isLoading,
|
||||
isApplyingEdit: pendingEdit?.kind === "editing",
|
||||
error,
|
||||
|
||||
@@ -151,6 +151,23 @@ export function getFileExtension(filepath: string) {
|
||||
return filepath.split(".").pop()!.toLocaleLowerCase();
|
||||
}
|
||||
|
||||
const IMAGE_EXTENSIONS = new Set([
|
||||
"png",
|
||||
"jpg",
|
||||
"jpeg",
|
||||
"gif",
|
||||
"webp",
|
||||
"svg",
|
||||
"bmp",
|
||||
"ico",
|
||||
"tiff",
|
||||
"heic",
|
||||
]);
|
||||
|
||||
export function isImageFile(filepath: string): boolean {
|
||||
return IMAGE_EXTENSIONS.has(getFileExtension(filepath));
|
||||
}
|
||||
|
||||
export function checkCodeFile(
|
||||
filepath: string,
|
||||
):
|
||||
|
||||
@@ -1,69 +1,12 @@
|
||||
import { apiFetch } from "@/core/api/fetch-client";
|
||||
import { getBackendBaseURL } from "@/core/config";
|
||||
import { downloadMarkdownDocxFromBackend } from "@/core/api/markdown-docx-export";
|
||||
|
||||
function filenameFromContentDisposition(header: string | null): string | null {
|
||||
if (!header) return null;
|
||||
const star = /filename\*=(?:UTF-8'')?([^;]+)/i.exec(header);
|
||||
if (star) {
|
||||
const raw = star[1].replace(/["']/g, "").trim();
|
||||
try {
|
||||
return decodeURIComponent(raw);
|
||||
} catch {
|
||||
return raw;
|
||||
}
|
||||
}
|
||||
const plain = /filename="?([^";\n]+)"?/i.exec(header);
|
||||
return plain ? plain[1].trim() : null;
|
||||
}
|
||||
|
||||
function sanitizeFallbackFilename(title: string | undefined): string {
|
||||
const base = (title?.trim() || "document").replace(/[<>:"/\\|?*\x00-\x1f]+/g, "_");
|
||||
return base.toLowerCase().endsWith(".docx") ? base : `${base}.docx`;
|
||||
}
|
||||
|
||||
async function downloadBlobResponse(response: Response, fallbackFilename: string) {
|
||||
if (!response.ok) {
|
||||
const error = await response
|
||||
.json()
|
||||
.catch(() => ({ detail: "导出 Word 失败" }));
|
||||
const detail = error.detail;
|
||||
if (typeof detail === "string") throw new Error(detail);
|
||||
throw new Error("导出 Word 失败");
|
||||
}
|
||||
|
||||
const blob = await response.blob();
|
||||
const filename =
|
||||
filenameFromContentDisposition(response.headers.get("Content-Disposition")) ??
|
||||
fallbackFilename;
|
||||
const url = URL.createObjectURL(blob);
|
||||
const anchor = document.createElement("a");
|
||||
anchor.href = url;
|
||||
anchor.download = filename;
|
||||
anchor.rel = "noopener";
|
||||
document.body.appendChild(anchor);
|
||||
anchor.click();
|
||||
anchor.remove();
|
||||
window.setTimeout(() => URL.revokeObjectURL(url), 30_000);
|
||||
}
|
||||
|
||||
/** 调用后端导出 AI 写作草稿为 Word，仅传正文 markdown，不传目录/大纲。 */
|
||||
/** AI 写作草稿导出 Word（走通用 `/api/writing/export/docx`）。 */
|
||||
export async function downloadAIWritingDocx(options: {
|
||||
title?: string;
|
||||
draftMarkdown: string;
|
||||
}): Promise<void> {
|
||||
const draftMarkdown = options.draftMarkdown.trim();
|
||||
if (!draftMarkdown) {
|
||||
throw new Error("文档内容为空");
|
||||
}
|
||||
|
||||
const response = await apiFetch(`${getBackendBaseURL()}/api/ai-writing/export/docx`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
title: options.title?.trim() || undefined,
|
||||
draft_markdown: draftMarkdown,
|
||||
}),
|
||||
await downloadMarkdownDocxFromBackend({
|
||||
title: options.title,
|
||||
markdown: options.draftMarkdown,
|
||||
});
|
||||
|
||||
await downloadBlobResponse(response, sanitizeFallbackFilename(options.title));
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { FileText, PenLine } from 'lucide-react';
|
||||
|
||||
import { useAIWritingOptional } from '../../contexts/AIWritingContext';
|
||||
import { useAIWritingHistoryOptional } from '../../contexts/AIWritingHistoryContext';
|
||||
import { useCanvasGraphContext } from '../../contexts/CanvasGraphContext';
|
||||
import { useCanvasUIContext } from '../../contexts/CanvasUIContext';
|
||||
import { assembleStreamingDraftMarkdown } from '../../hooks/useAIWritingStream';
|
||||
@@ -32,8 +33,12 @@ function DraftWaitingPlaceholder() {
|
||||
|
||||
export function AIWritingDraftPanel() {
|
||||
const writing = useAIWritingOptional();
|
||||
const history = useAIWritingHistoryOptional();
|
||||
const isHistoryMode = history?.isHistoryMode ?? false;
|
||||
const { artifact } = useCanvasGraphContext();
|
||||
const { isDraftEditable } = useCanvasUIContext();
|
||||
// 历史回看与写作完成态一致：Tiptap + 目录；流式生成中仍走 Markdown 预览
|
||||
const showCompletedDraftView = isDraftEditable || isHistoryMode;
|
||||
|
||||
const writingStatus = writing?.state.status;
|
||||
// 仅当章节仍在累积时走流式 Markdown；draft_ready 清空 sections 后即使 status 尚未切走也进画布
|
||||
@@ -96,7 +101,8 @@ export function AIWritingDraftPanel() {
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<TextArtifactRenderer
|
||||
content={textContent}
|
||||
isStreaming={!isDraftEditable}
|
||||
isStreaming={!showCompletedDraftView}
|
||||
readOnly={isHistoryMode}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,8 +13,8 @@ import {
|
||||
} from '@/components/ui/dialog';
|
||||
import { useArticleTypes } from '../../hooks/useArticleTypes';
|
||||
|
||||
import { useCanvasGraphContext } from '../../contexts/CanvasGraphContext';
|
||||
import { useAIWriting } from '../../contexts/AIWritingContext';
|
||||
import { useAIWritingHistory } from '../../contexts/AIWritingHistoryContext';
|
||||
import { useAIWritingSessions } from '../../hooks/useAIWritingSessions';
|
||||
import { adminCleanupAIWritingSessions } from '../../api/ai-writing-sessions';
|
||||
|
||||
@@ -74,15 +74,13 @@ export function AIWritingPanel({
|
||||
hideAdvancedFields?: boolean;
|
||||
} = {}) {
|
||||
const navigate = useNavigate();
|
||||
const { setArtifact } = useCanvasGraphContext();
|
||||
const { state, startWriting, submitIntervention, pauseWriting, resumeWriting, reset } = useAIWriting();
|
||||
const { historySession, isHistoryMode, openHistory, closeHistory } = useAIWritingHistory();
|
||||
const { sessions, loading: sessionsLoading, refresh, rename, remove } = useAIWritingSessions();
|
||||
const { articleTypes, refresh: refreshArticleTypes } = useArticleTypes();
|
||||
|
||||
useEffect(() => { refreshArticleTypes(); }, [refreshArticleTypes]);
|
||||
|
||||
// History view state — null means normal writing mode
|
||||
const [historySession, setHistorySession] = useState<AIWritingSessionSummary | null>(null);
|
||||
const [reqDialogOpen, setReqDialogOpen] = useState(false);
|
||||
|
||||
const isIdle = state.status === 'idle';
|
||||
@@ -178,27 +176,13 @@ export function AIWritingPanel({
|
||||
}, []);
|
||||
|
||||
const handleSelectHistory = useCallback((session: AIWritingSessionSummary) => {
|
||||
setHistorySession(session);
|
||||
// Push historical draft to the right panel
|
||||
if (session.draft_markdown) {
|
||||
setArtifact({
|
||||
currentIndex: 0,
|
||||
contents: [{
|
||||
index: 0,
|
||||
type: 'text',
|
||||
title: session.draft_title ?? session.title,
|
||||
fullMarkdown: session.draft_markdown,
|
||||
}],
|
||||
});
|
||||
} else {
|
||||
setArtifact(null);
|
||||
}
|
||||
}, [setArtifact]);
|
||||
void openHistory(session);
|
||||
}, [openHistory]);
|
||||
|
||||
const handleNewSession = useCallback(() => {
|
||||
setHistorySession(null);
|
||||
closeHistory();
|
||||
reset();
|
||||
}, [reset]);
|
||||
}, [closeHistory, reset]);
|
||||
|
||||
// ── 侧边栏"最近写作"通信：两种路径 ────────────────────────────────────────
|
||||
// 用 ref 包住 handler，保证事件监听器始终能拿到最新版本
|
||||
@@ -246,60 +230,27 @@ export function AIWritingPanel({
|
||||
}
|
||||
}, [refresh]);
|
||||
|
||||
const showNewButton = historySession !== null || state.status !== 'idle';
|
||||
|
||||
// History view mode
|
||||
if (historySession) {
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-hidden bg-background">
|
||||
<DraftSync status={state.status} markdown={state.currentDraftMarkdown} title={state.currentDraftTitle} />
|
||||
<div className="flex items-center justify-between px-4 py-2.5 border-b shrink-0">
|
||||
<span className="text-sm font-semibold truncate flex-1 min-w-0 mr-2">
|
||||
{historySession.draft_title ?? historySession.title}
|
||||
</span>
|
||||
<div className="flex items-center gap-1.5 shrink-0">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-7 w-7"
|
||||
onClick={() => navigate('/page/canvas/article-types')}
|
||||
title="文章类型配置"
|
||||
>
|
||||
<Settings2 className="size-3.5" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="h-7 px-2 text-xs gap-1" onClick={handleNewSession}>
|
||||
<Plus className="size-3" />
|
||||
新建对话
|
||||
</Button>
|
||||
<AIWritingHistoryDropdown
|
||||
sessions={sessions}
|
||||
selectedId={historySession.id}
|
||||
loading={sessionsLoading}
|
||||
onSelect={handleSelectHistory}
|
||||
onDelete={remove}
|
||||
onRename={rename}
|
||||
onRefresh={refresh}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<AIWritingHistoryView session={historySession} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
const showNewButton = isHistoryMode || state.status !== 'idle';
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-hidden bg-background">
|
||||
<DraftSync status={state.status} markdown={state.currentDraftMarkdown} title={state.currentDraftTitle} />
|
||||
{!isHistoryMode && (
|
||||
<DraftSync status={state.status} markdown={state.currentDraftMarkdown} title={state.currentDraftTitle} />
|
||||
)}
|
||||
{/* 头部 */}
|
||||
<div className="flex items-center justify-between px-4 py-2.5 border-b shrink-0">
|
||||
<span
|
||||
className={cn(
|
||||
'text-sm font-semibold shrink-0',
|
||||
!isIdle && 'cursor-pointer hover:text-primary transition-colors',
|
||||
'text-sm font-semibold shrink-0 min-w-0 truncate',
|
||||
isHistoryMode && 'flex-1 mr-2',
|
||||
!isIdle && !isHistoryMode && 'cursor-pointer hover:text-primary transition-colors',
|
||||
)}
|
||||
onClick={() => { if (!isIdle && state.request) setReqDialogOpen(true); }}
|
||||
onClick={() => { if (!isIdle && !isHistoryMode && state.request) setReqDialogOpen(true); }}
|
||||
title={isHistoryMode ? (historySession?.draft_title ?? historySession?.title) : undefined}
|
||||
>
|
||||
AI 智能写作
|
||||
{isHistoryMode
|
||||
? (historySession?.draft_title ?? historySession?.title ?? '写作历史')
|
||||
: 'AI 智能写作'}
|
||||
</span>
|
||||
<div className="flex items-center gap-1.5">
|
||||
{/* ⚠️ 临时调试：admin 一键清理 —— 阶段 7 删冗余时移除 */}
|
||||
@@ -365,7 +316,7 @@ export function AIWritingPanel({
|
||||
)}
|
||||
<AIWritingHistoryDropdown
|
||||
sessions={sessions}
|
||||
selectedId={null}
|
||||
selectedId={historySession?.id ?? null}
|
||||
loading={sessionsLoading}
|
||||
onSelect={handleSelectHistory}
|
||||
onDelete={remove}
|
||||
@@ -378,8 +329,13 @@ export function AIWritingPanel({
|
||||
{/* 主体：relative 父容器 + absolute 滚动容器，确保滚动容器尺寸始终正确 */}
|
||||
<div className="flex-1 min-h-0 relative">
|
||||
<div ref={scrollRef} className="absolute inset-0 overflow-y-auto">
|
||||
{/* 历史回看：左侧时间线（与实时写作同一套 AIWritingTimeline） */}
|
||||
{isHistoryMode && historySession && (
|
||||
<AIWritingHistoryView session={historySession} />
|
||||
)}
|
||||
|
||||
{/* 未开始时显示表单 */}
|
||||
{isIdle && (
|
||||
{isIdle && !isHistoryMode && (
|
||||
<AIWritingForm
|
||||
onSubmit={startWriting}
|
||||
hideAdvancedFields={hideAdvancedFields}
|
||||
@@ -402,7 +358,7 @@ export function AIWritingPanel({
|
||||
)}
|
||||
|
||||
{/* 运行中或完成后显示时间线 */}
|
||||
{!isIdle && (
|
||||
{!isIdle && !isHistoryMode && (
|
||||
<AIWritingTimeline
|
||||
events={state.progressEvents}
|
||||
completedInterventions={state.completedInterventions}
|
||||
@@ -507,7 +463,7 @@ export function AIWritingPanel({
|
||||
</div>{/* 相对定位容器结束 */}
|
||||
|
||||
{/* 状态栏 */}
|
||||
{!isIdle && (
|
||||
{!isIdle && !isHistoryMode && (
|
||||
<div
|
||||
className={cn(
|
||||
'shrink-0 px-4 py-2 border-t text-xs flex items-center gap-2',
|
||||
|
||||
@@ -22,6 +22,8 @@ import type { RewriteAction, RewriteTone } from "../../api/rewrite";
|
||||
interface TextArtifactRendererProps {
|
||||
content: CanvasArtifactText;
|
||||
isStreaming?: boolean;
|
||||
/** 完成态只读（如历史回看）：保留目录 + 排版，禁用编辑与 AI 润色 */
|
||||
readOnly?: boolean;
|
||||
}
|
||||
|
||||
interface PanelPos {
|
||||
@@ -38,7 +40,7 @@ interface LastAction {
|
||||
customInstruction?: string;
|
||||
}
|
||||
|
||||
export function TextArtifactRenderer({ content, isStreaming }: TextArtifactRendererProps) {
|
||||
export function TextArtifactRenderer({ content, isStreaming, readOnly = false }: TextArtifactRendererProps) {
|
||||
const { artifact, setArtifact } = useCanvasGraphContext();
|
||||
const { writingSelection } = useCanvasUIContext();
|
||||
|
||||
@@ -72,7 +74,7 @@ export function TextArtifactRenderer({ content, isStreaming }: TextArtifactRende
|
||||
const editor = useWritingEditor({
|
||||
markdown: content.fullMarkdown,
|
||||
onChange: handleEditorChange,
|
||||
editable: !isStreaming,
|
||||
editable: !isStreaming && !readOnly,
|
||||
placeholder: "开始写作…",
|
||||
});
|
||||
|
||||
@@ -270,10 +272,15 @@ export function TextArtifactRenderer({ content, isStreaming }: TextArtifactRende
|
||||
);
|
||||
}
|
||||
|
||||
// ── Edit mode ─────────────────────────────────────────────────────────
|
||||
// ── Edit mode（写作完成态 / 历史回看只读）────────────────────────────────
|
||||
return (
|
||||
<div className="h-full flex flex-col overflow-hidden">
|
||||
<WritingToolbar editor={editor} markdown={content.fullMarkdown} title={content.title} />
|
||||
<WritingToolbar
|
||||
editor={editor}
|
||||
markdown={content.fullMarkdown}
|
||||
title={content.title}
|
||||
readOnly={readOnly}
|
||||
/>
|
||||
|
||||
<div className="flex-1 flex min-h-0 overflow-hidden">
|
||||
{/* 左侧目录栏（仿豆包）：文档标题层级导航 */}
|
||||
@@ -282,7 +289,7 @@ export function TextArtifactRenderer({ content, isStreaming }: TextArtifactRende
|
||||
{/* 文档滚动区 */}
|
||||
<div ref={setDocScrollEl} className="flex-1 overflow-y-auto">
|
||||
<div className="max-w-2xl mx-auto px-10 pt-10">
|
||||
{editor && (
|
||||
{editor && !readOnly && (
|
||||
<>
|
||||
<WritingBubbleMenu editor={editor} onAiRewrite={openAiMenu} />
|
||||
<WritingParagraphMenu editor={editor} onAiRewrite={openAiMenu} />
|
||||
@@ -294,7 +301,7 @@ export function TextArtifactRenderer({ content, isStreaming }: TextArtifactRende
|
||||
</div>
|
||||
|
||||
{/* Phase: AI action menu */}
|
||||
{phase === "menu" && (
|
||||
{!readOnly && phase === "menu" && (
|
||||
<WritingAiMenu
|
||||
pos={panelPos}
|
||||
status={status}
|
||||
@@ -307,7 +314,7 @@ export function TextArtifactRenderer({ content, isStreaming }: TextArtifactRende
|
||||
)}
|
||||
|
||||
{/* Phase: result preview */}
|
||||
{phase === "preview" && (
|
||||
{!readOnly && phase === "preview" && (
|
||||
<WritingRewritePreview
|
||||
pos={panelPos}
|
||||
status={status}
|
||||
|
||||
@@ -69,9 +69,11 @@ interface WritingToolbarProps {
|
||||
markdown?: string;
|
||||
/** 文档标题，用作 .docx 文件名与封面 */
|
||||
title?: string;
|
||||
/** 历史回看等场景：仅保留导出，隐藏格式工具 */
|
||||
readOnly?: boolean;
|
||||
}
|
||||
|
||||
export function WritingToolbar({ editor, markdown, title }: WritingToolbarProps) {
|
||||
export function WritingToolbar({ editor, markdown, title, readOnly = false }: WritingToolbarProps) {
|
||||
const [exporting, setExporting] = useState(false);
|
||||
|
||||
if (!editor) return null;
|
||||
@@ -94,6 +96,42 @@ export function WritingToolbar({ editor, markdown, title }: WritingToolbarProps)
|
||||
}
|
||||
};
|
||||
|
||||
if (readOnly) {
|
||||
return (
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 border-b bg-background/80 backdrop-blur-sm shrink-0">
|
||||
<span className="text-xs text-muted-foreground">历史文稿（只读）</span>
|
||||
<div className="ml-auto flex items-center gap-1">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={(e) => {
|
||||
e.preventDefault();
|
||||
void handleExport();
|
||||
}}
|
||||
disabled={!canExport}
|
||||
className={cn(
|
||||
"inline-flex h-7 w-7 items-center justify-center rounded-md text-sm transition-colors",
|
||||
"hover:bg-accent hover:text-accent-foreground",
|
||||
"disabled:pointer-events-none disabled:opacity-40",
|
||||
)}
|
||||
>
|
||||
{exporting ? (
|
||||
<Loader2 className="h-3.5 w-3.5 animate-spin" />
|
||||
) : (
|
||||
<Download className="h-3.5 w-3.5" />
|
||||
)}
|
||||
</button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" className="text-xs">
|
||||
导出 Word
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-0.5 px-3 py-1.5 border-b bg-background/80 backdrop-blur-sm shrink-0 flex-wrap">
|
||||
{/* Block type */}
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
import { createContext, useCallback, useContext, useMemo, useState, type ReactNode } from 'react';
|
||||
|
||||
import { getAIWritingSession } from '../api/ai-writing-sessions';
|
||||
import type { AIWritingSessionSummary } from '../api/ai-writing-sessions';
|
||||
import { useCanvasGraphContext } from './CanvasGraphContext';
|
||||
import { useCanvasUIContext } from './CanvasUIContext';
|
||||
|
||||
type AIWritingHistoryContextValue = {
|
||||
historySession: AIWritingSessionSummary | null;
|
||||
isHistoryMode: boolean;
|
||||
openHistory: (session: AIWritingSessionSummary) => Promise<void>;
|
||||
closeHistory: () => void;
|
||||
};
|
||||
|
||||
const AIWritingHistoryContext = createContext<AIWritingHistoryContextValue | null>(null);
|
||||
|
||||
export function AIWritingHistoryProvider({ children }: { children: ReactNode }) {
|
||||
const { setArtifact } = useCanvasGraphContext();
|
||||
const { setIsDraftEditable } = useCanvasUIContext();
|
||||
const [historySession, setHistorySession] = useState<AIWritingSessionSummary | null>(null);
|
||||
|
||||
const openHistory = useCallback(async (session: AIWritingSessionSummary) => {
|
||||
let full = session;
|
||||
if (!session.draft_markdown || !session.transcript) {
|
||||
try {
|
||||
full = await getAIWritingSession(session.id);
|
||||
} catch {
|
||||
// 列表项已够用，拉详情失败则继续用摘要
|
||||
}
|
||||
}
|
||||
setHistorySession(full);
|
||||
// 完成态布局（Tiptap + 左侧目录），由 DraftPanel 根据 isHistoryMode 只读展示
|
||||
setIsDraftEditable(true);
|
||||
if (full.draft_markdown) {
|
||||
setArtifact({
|
||||
currentIndex: 0,
|
||||
contents: [{
|
||||
index: 0,
|
||||
type: 'text',
|
||||
title: full.draft_title ?? full.title,
|
||||
fullMarkdown: full.draft_markdown,
|
||||
}],
|
||||
});
|
||||
} else {
|
||||
setArtifact(null);
|
||||
}
|
||||
}, [setArtifact, setIsDraftEditable]);
|
||||
|
||||
const closeHistory = useCallback(() => {
|
||||
setHistorySession(null);
|
||||
setArtifact(null);
|
||||
setIsDraftEditable(true);
|
||||
}, [setArtifact, setIsDraftEditable]);
|
||||
|
||||
const value = useMemo(
|
||||
() => ({
|
||||
historySession,
|
||||
isHistoryMode: historySession !== null,
|
||||
openHistory,
|
||||
closeHistory,
|
||||
}),
|
||||
[historySession, openHistory, closeHistory],
|
||||
);
|
||||
|
||||
return (
|
||||
<AIWritingHistoryContext.Provider value={value}>
|
||||
{children}
|
||||
</AIWritingHistoryContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useAIWritingHistory() {
|
||||
const ctx = useContext(AIWritingHistoryContext);
|
||||
if (!ctx) {
|
||||
throw new Error('useAIWritingHistory must be used within AIWritingHistoryProvider');
|
||||
}
|
||||
return ctx;
|
||||
}
|
||||
|
||||
export function useAIWritingHistoryOptional() {
|
||||
return useContext(AIWritingHistoryContext);
|
||||
}
|
||||
@@ -92,6 +92,7 @@ import { AIWritingPanel } from '../components/ai-writing/AIWritingPanel';
|
||||
import { AIWritingDraftPanel } from '../components/ai-writing/AIWritingDraftPanel';
|
||||
import { WritingSetupChat } from '../components/ai-writing/WritingSetupChat';
|
||||
import { AIWritingProvider, useAIWriting } from '../contexts/AIWritingContext';
|
||||
import { AIWritingHistoryProvider, useAIWritingHistory } from '../contexts/AIWritingHistoryContext';
|
||||
import { WritingFormProvider } from '../contexts/WritingFormContext';
|
||||
import {
|
||||
ResizableHandle,
|
||||
@@ -131,8 +132,10 @@ function WritingFormPanel({ hideAdvancedFields }: { hideAdvancedFields: boolean
|
||||
function AIWritingLayout({ hideAdvancedFields }: { hideAdvancedFields: boolean }) {
|
||||
const layoutRef = useRef<GroupImperativeHandle>(null);
|
||||
const { state } = useAIWriting();
|
||||
const { isHistoryMode } = useAIWritingHistory();
|
||||
|
||||
if (state.status === 'idle') {
|
||||
// 初始问答阶段：无历史查看；查看历史时与「正在写作」相同左右分栏（左时间线、右草稿）
|
||||
if (state.status === 'idle' && !isHistoryMode) {
|
||||
return (
|
||||
<ResizablePanelGroup
|
||||
orientation="horizontal"
|
||||
@@ -206,6 +209,7 @@ export default function AIWritingPage({
|
||||
<CanvasThreadProvider>
|
||||
<CanvasGraphProvider>
|
||||
<CanvasUIProvider>
|
||||
<AIWritingHistoryProvider>
|
||||
<AIWritingProvider>
|
||||
<WritingFormProvider>
|
||||
<TooltipProvider delayDuration={300}>
|
||||
@@ -217,6 +221,7 @@ export default function AIWritingPage({
|
||||
</TooltipProvider>
|
||||
</WritingFormProvider>
|
||||
</AIWritingProvider>
|
||||
</AIWritingHistoryProvider>
|
||||
</CanvasUIProvider>
|
||||
</CanvasGraphProvider>
|
||||
</CanvasThreadProvider>
|
||||
|
||||
@@ -41,6 +41,7 @@ import StudioNotebooksPage from './StudioNotebooksPage';
|
||||
import StudioNotebookDetailPage from './StudioNotebookDetailPage';
|
||||
import RoundtablePlanningPage from '@/roundtable-planning/pages/RoundtablePlanningPage';
|
||||
import BusinessChainEditorPage from '@/roundtable-planning/pages/BusinessChainEditorPage';
|
||||
import DispatchChainPreviewPage from '@/roundtable-planning/pages/DispatchChainPreviewPage';
|
||||
import '@/roundtable-planning/styles/roundtable-planning.css';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
@@ -324,6 +325,15 @@ export default function WorkspaceRoutes({
|
||||
</WorkspaceLayout>
|
||||
}
|
||||
/>
|
||||
{/* Phase 7 临时预览入口：派活链路流程图弹窗（假数据自测，接通后台后可删） */}
|
||||
<Route
|
||||
path="roundtable/chain-preview"
|
||||
element={
|
||||
<WorkspaceLayout {...layoutProps}>
|
||||
<DispatchChainPreviewPage />
|
||||
</WorkspaceLayout>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path="scheduled"
|
||||
element={<Navigate to="/page/workspace/scheduled/tasks" replace />}
|
||||
|
||||
@@ -17,6 +17,7 @@ import { getBackendBaseURL } from "@/core/config";
|
||||
|
||||
import type { IntentSummary } from "@/roundtable-planning/api/intent";
|
||||
import type { ThreadIdMap } from "@/roundtable-planning/api/multi-agent";
|
||||
import type { JobStatus } from "@/roundtable-planning/lib/job-types";
|
||||
|
||||
/**
|
||||
* Step 1 snapshot. Shapes for the chat / timeline lists stay loose (`unknown[]`)
|
||||
@@ -80,6 +81,13 @@ export interface DraftMeta {
|
||||
furthestStep: 1 | 2 | 3;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
/**
|
||||
* Latest background-job status for this draft (Phase 6 history-dropdown
|
||||
* loading badge). Undefined/null when the draft has never been backgrounded.
|
||||
*/
|
||||
status?: JobStatus | null;
|
||||
/** Latest background job id (for opening the dispatch-chain modal / 查看). */
|
||||
jobId?: string | null;
|
||||
}
|
||||
|
||||
/** Full record including the step snapshots. */
|
||||
@@ -129,6 +137,8 @@ interface ServerDraftMeta {
|
||||
furthest_step: number;
|
||||
created_at: string | null;
|
||||
updated_at: string | null;
|
||||
status?: string | null;
|
||||
job_id?: string | null;
|
||||
}
|
||||
|
||||
interface ServerDraftFull extends ServerDraftMeta {
|
||||
@@ -145,6 +155,8 @@ function toMeta(s: ServerDraftMeta): DraftMeta {
|
||||
furthestStep: step,
|
||||
createdAt: s.created_at ?? "",
|
||||
updatedAt: s.updated_at ?? "",
|
||||
status: (s.status as JobStatus | null | undefined) ?? null,
|
||||
jobId: s.job_id ?? null,
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,195 @@
|
||||
/**
|
||||
* 圆桌后台作业 API 客户端（Phase 4）。
|
||||
*
|
||||
* 对接后端 `/api/roundtable-jobs`（Phase 3a）：启动「后台挂起」作业、查快照、订阅
|
||||
* SSE 进度、回答澄清续跑、取消。后端响应已是 camelCase（`RoundtableJobResponse`），
|
||||
* 故无需 snake_case 转换；唯一加工是给 `dispatchChain` 节点补 `avatarType`（后端不下发，
|
||||
* 由前端 `getAvatarTypeFor(agentId, order)` 派生，避免把配色表移植到后端而漂移）。
|
||||
*
|
||||
* SSE 走「后端轮询 job 表后下发整份快照」的模型（见后端注释）：每帧 `data: {event:
|
||||
* "progress", ...job}`，前端拿到的就是最新整份 `RoundtableJob`，直接渲染即可，无需做
|
||||
* 增量事件归并。
|
||||
*/
|
||||
|
||||
import { apiFetch } from "@/core/api/fetch-client";
|
||||
import { getBackendBaseURL } from "@/core/config";
|
||||
|
||||
import { getAvatarTypeFor } from "../lib/roundtable-constants";
|
||||
import {
|
||||
isTerminalJobStatus,
|
||||
type DispatchChainNode,
|
||||
type RoundtableJob,
|
||||
type StartJobPayload,
|
||||
} from "../lib/job-types";
|
||||
|
||||
const BASE = () => `${getBackendBaseURL()}/api/roundtable-jobs`;
|
||||
|
||||
async function readJson<T>(res: Response, ctx: string): Promise<T> {
|
||||
if (!res.ok) {
|
||||
const text = await res.text().catch(() => "");
|
||||
throw new Error(`${ctx} failed (${res.status}): ${text}`);
|
||||
}
|
||||
return (await res.json()) as T;
|
||||
}
|
||||
|
||||
/** 给链路节点补 avatarType（后端不下发）。 */
|
||||
function withAvatar(nodes: unknown): DispatchChainNode[] {
|
||||
if (!Array.isArray(nodes)) return [];
|
||||
return nodes.map((n, i) => {
|
||||
const node = (n ?? {}) as Partial<DispatchChainNode> & { agentId?: string; order?: number };
|
||||
const agentId = String(node.agentId ?? "");
|
||||
const order = typeof node.order === "number" ? node.order : i + 1;
|
||||
return {
|
||||
agentId,
|
||||
name: String(node.name ?? agentId),
|
||||
order,
|
||||
state: (node.state as DispatchChainNode["state"]) ?? "pending",
|
||||
avatarType: node.avatarType || getAvatarTypeFor(agentId, order - 1),
|
||||
...(node.lastSpokeCycle != null ? { lastSpokeCycle: node.lastSpokeCycle } : {}),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/** 后端快照 → 前端 RoundtableJob（容错 + 补 avatarType）。 */
|
||||
function mapJob(raw: Record<string, unknown>): RoundtableJob {
|
||||
return {
|
||||
id: String(raw.id ?? ""),
|
||||
draftId: (raw.draftId as string | null) ?? null,
|
||||
status: (raw.status as RoundtableJob["status"]) ?? "queued",
|
||||
phase: (raw.phase as RoundtableJob["phase"]) ?? "initializing",
|
||||
cycle: typeof raw.cycle === "number" ? raw.cycle : 0,
|
||||
dispatchChain: withAvatar(raw.dispatchChain),
|
||||
activeAgentId: (raw.activeAgentId as string | null) ?? null,
|
||||
consensusPercentage: typeof raw.consensusPercentage === "number" ? raw.consensusPercentage : 0,
|
||||
pendingClarification: (raw.pendingClarification as string | null) ?? null,
|
||||
orchestrationMode: (raw.orchestrationMode as RoundtableJob["orchestrationMode"]) ?? "recommend",
|
||||
chain: (raw.chain as RoundtableJob["chain"]) ?? null,
|
||||
error: (raw.error as string | null) ?? null,
|
||||
createdAt: (raw.createdAt as string | null) ?? null,
|
||||
updatedAt: (raw.updatedAt as string | null) ?? null,
|
||||
};
|
||||
}
|
||||
|
||||
function toStartBody(p: StartJobPayload) {
|
||||
return {
|
||||
draftId: p.draftId ?? null,
|
||||
intent: p.intent,
|
||||
agents: p.agents,
|
||||
model: p.model,
|
||||
orchestrationMode: p.orchestrationMode ?? "recommend",
|
||||
chain: p.chain ?? null,
|
||||
seedMessage: p.seedMessage,
|
||||
threadIds: p.threadIds ?? null,
|
||||
coordinatorName: p.coordinatorName ?? "roundtable-coordinator",
|
||||
};
|
||||
}
|
||||
|
||||
// ── CRUD / 控制 ───────────────────────────────────────────────────────────────
|
||||
|
||||
/** 启动一个后台作业。 */
|
||||
export async function startJob(payload: StartJobPayload): Promise<RoundtableJob> {
|
||||
const res = await apiFetch(BASE(), {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(toStartBody(payload)),
|
||||
});
|
||||
return mapJob(await readJson<Record<string, unknown>>(res, "start job"));
|
||||
}
|
||||
|
||||
/** 查作业快照。404 → null。 */
|
||||
export async function getJob(jobId: string): Promise<RoundtableJob | null> {
|
||||
const res = await apiFetch(`${BASE()}/${encodeURIComponent(jobId)}`, { method: "GET" });
|
||||
if (res.status === 404) return null;
|
||||
return mapJob(await readJson<Record<string, unknown>>(res, "get job"));
|
||||
}
|
||||
|
||||
/** 查某草稿最近一个作业。无 → null。 */
|
||||
export async function getJobByDraft(draftId: string): Promise<RoundtableJob | null> {
|
||||
const res = await apiFetch(`${BASE()}?draft_id=${encodeURIComponent(draftId)}`, { method: "GET" });
|
||||
const data = await readJson<Record<string, unknown> | null>(res, "get job by draft");
|
||||
return data ? mapJob(data) : null;
|
||||
}
|
||||
|
||||
/** 回答澄清后续跑。 */
|
||||
export async function resumeJob(jobId: string, answer: string): Promise<RoundtableJob> {
|
||||
const res = await apiFetch(`${BASE()}/${encodeURIComponent(jobId)}/resume`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ answer }),
|
||||
});
|
||||
return mapJob(await readJson<Record<string, unknown>>(res, "resume job"));
|
||||
}
|
||||
|
||||
/** 取消作业。 */
|
||||
export async function cancelJob(jobId: string): Promise<RoundtableJob> {
|
||||
const res = await apiFetch(`${BASE()}/${encodeURIComponent(jobId)}/cancel`, { method: "POST" });
|
||||
return mapJob(await readJson<Record<string, unknown>>(res, "cancel job"));
|
||||
}
|
||||
|
||||
// ── SSE 进度订阅 ─────────────────────────────────────────────────────────────
|
||||
|
||||
export interface StreamJobHandlers {
|
||||
/** 每收到一帧整份快照就回调（含首帧）。 */
|
||||
onProgress: (job: RoundtableJob) => void;
|
||||
/** 终态（done/error/cancelled）时回调一次（在对应的 onProgress 之后）。 */
|
||||
onDone?: (job: RoundtableJob) => void;
|
||||
/** 流错误 / 作业不存在。 */
|
||||
onError?: (detail: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 订阅作业 SSE 进度。返回 unsubscribe（中断连接）。
|
||||
*
|
||||
* 终态帧后后端会主动关闭流；本函数也在收到终态快照时调 onDone，调用方可据此 unsubscribe。
|
||||
*/
|
||||
export function streamJob(jobId: string, handlers: StreamJobHandlers): () => void {
|
||||
const controller = new AbortController();
|
||||
|
||||
void (async () => {
|
||||
try {
|
||||
const res = await apiFetch(`${BASE()}/${encodeURIComponent(jobId)}/stream`, {
|
||||
method: "GET",
|
||||
signal: controller.signal,
|
||||
});
|
||||
if (!res.ok || !res.body) {
|
||||
handlers.onError?.(`stream failed (${res.status})`);
|
||||
return;
|
||||
}
|
||||
const reader = res.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let buffer = "";
|
||||
while (true) {
|
||||
const { done, value } = await reader.read();
|
||||
if (done) break;
|
||||
buffer += decoder.decode(value, { stream: true });
|
||||
const lines = buffer.split("\n");
|
||||
buffer = lines.pop() ?? "";
|
||||
for (const raw of lines) {
|
||||
const line = raw.trim();
|
||||
if (!line.startsWith("data:")) continue;
|
||||
const json = line.slice("data:".length).trim();
|
||||
if (!json) continue;
|
||||
let frame: Record<string, unknown>;
|
||||
try {
|
||||
frame = JSON.parse(json) as Record<string, unknown>;
|
||||
} catch {
|
||||
continue;
|
||||
}
|
||||
if (frame.event === "error") {
|
||||
handlers.onError?.(String(frame.detail ?? "unknown stream error"));
|
||||
continue;
|
||||
}
|
||||
const job = mapJob(frame);
|
||||
handlers.onProgress(job);
|
||||
if (isTerminalJobStatus(job.status)) handlers.onDone?.(job);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
if (!controller.signal.aborted) {
|
||||
handlers.onError?.(err instanceof Error ? err.message : String(err));
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
||||
return () => controller.abort();
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
import { FileText, Loader2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
import { downloadMarkdownDocxFromBackend } from "@/core/api/markdown-docx-export";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function ConsensusDocxDownloadButton({
|
||||
markdown,
|
||||
title = "圆桌总控最终结论",
|
||||
className,
|
||||
size = "sm",
|
||||
}: {
|
||||
markdown: string;
|
||||
title?: string;
|
||||
className?: string;
|
||||
size?: "sm" | "md";
|
||||
}) {
|
||||
const [busy, setBusy] = useState(false);
|
||||
const canExport = Boolean(markdown?.trim());
|
||||
|
||||
const handleClick = async () => {
|
||||
if (!canExport) {
|
||||
toast.error("暂无可导出的结论内容");
|
||||
return;
|
||||
}
|
||||
setBusy(true);
|
||||
try {
|
||||
await downloadMarkdownDocxFromBackend({ title, markdown });
|
||||
toast.success("Word 文件已生成");
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : "导出 Word 失败");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void handleClick()}
|
||||
disabled={!canExport || busy}
|
||||
title={canExport ? "下载为 Word" : "暂无结论内容"}
|
||||
className={cn(
|
||||
"inline-flex items-center gap-1 rounded-xl border border-slate-200 bg-white font-bold text-slate-700 transition",
|
||||
"hover:bg-slate-50 hover:border-primary/30 disabled:cursor-not-allowed disabled:opacity-50",
|
||||
size === "sm" ? "px-2.5 py-1 text-[10px]" : "px-3 py-1.5 text-[10.5px]",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{busy ? (
|
||||
<Loader2 className={cn("animate-spin", size === "sm" ? "h-3 w-3" : "h-3.5 w-3.5")} />
|
||||
) : (
|
||||
<FileText className={cn(size === "sm" ? "h-3 w-3" : "h-3.5 w-3.5", "text-primary")} />
|
||||
)}
|
||||
下载 Word
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
/**
|
||||
* 派活链路流程图弹窗 · 真后台作业容器（Phase 6/8）。
|
||||
*
|
||||
* 给定 ``jobId``：先拉一帧快照让弹窗立刻有内容，随后订阅 SSE（``streamJob``）实时刷新，
|
||||
* 把最新 ``RoundtableJob`` 喂给纯展示组件 ``DispatchChainModal``。关闭/卸载时退订。
|
||||
*
|
||||
* ``onView`` 透传给 footer「查看」按钮（Phase 8 接「进入正在进行的任务」）。
|
||||
*/
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { DispatchChainModal } from "./DispatchChainModal";
|
||||
import { cancelJob, getJob, resumeJob, streamJob } from "../api/roundtable-jobs";
|
||||
import type { RoundtableJob } from "../lib/job-types";
|
||||
|
||||
export interface DispatchChainJobModalProps {
|
||||
jobId: string | null;
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
title?: string;
|
||||
onView?: (job: RoundtableJob) => void;
|
||||
}
|
||||
|
||||
export function DispatchChainJobModal({
|
||||
jobId,
|
||||
open,
|
||||
onOpenChange,
|
||||
title,
|
||||
onView,
|
||||
}: DispatchChainJobModalProps) {
|
||||
const [job, setJob] = useState<RoundtableJob | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open || !jobId) {
|
||||
setJob(null);
|
||||
return;
|
||||
}
|
||||
let cancelled = false;
|
||||
// 首帧快照：弹窗一打开就有内容，不必等 SSE 第一帧。
|
||||
void getJob(jobId)
|
||||
.then((j) => {
|
||||
if (!cancelled && j) setJob(j);
|
||||
})
|
||||
.catch(() => {});
|
||||
const unsubscribe = streamJob(jobId, {
|
||||
onProgress: (j) => {
|
||||
if (!cancelled) setJob(j);
|
||||
},
|
||||
onError: () => {
|
||||
/* 流错误静默：保留已拿到的最后一帧；可后续加 toast */
|
||||
},
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
unsubscribe();
|
||||
};
|
||||
}, [open, jobId]);
|
||||
|
||||
return (
|
||||
<DispatchChainModal
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
title={title}
|
||||
status={job?.status ?? "queued"}
|
||||
phase={job?.phase ?? "initializing"}
|
||||
cycle={job?.cycle ?? 0}
|
||||
nodes={job?.dispatchChain ?? []}
|
||||
consensusPercentage={job?.consensusPercentage ?? 0}
|
||||
onView={job && onView ? () => onView(job) : undefined}
|
||||
error={job?.error}
|
||||
pendingClarification={job?.pendingClarification}
|
||||
onResume={
|
||||
jobId
|
||||
? (answer) => {
|
||||
// 乐观更新为 running，随后 SSE 会推真状态续上。
|
||||
void resumeJob(jobId, answer)
|
||||
.then((j) => setJob(j))
|
||||
.catch(() => {});
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
onCancel={
|
||||
jobId
|
||||
? () => {
|
||||
void cancelJob(jobId)
|
||||
.then((j) => setJob(j))
|
||||
.catch(() => {});
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,402 @@
|
||||
/**
|
||||
* 派活链路流程图弹窗（Phase 7）。
|
||||
*
|
||||
* 大弹窗 + 横向流程图：总控 ──▶ 席位1 ──▶ 席位2 ──▶ … ──▶[共识]──▶[报告绘制]。
|
||||
* - 节点 = 智能体席位（头像 + 名称），按 `getAvatarTypeFor` 取不同颜色；
|
||||
* - 正在发言的节点（state==='active'）和它**左侧的连接线**带加载动画（脉冲光环 + 流动虚线）；
|
||||
* - 已完成节点打勾，未开始节点置灰；
|
||||
* - footer 显示 轮次/状态 + 「查看」按钮 → 进入正在进行的任务（onView）。
|
||||
*
|
||||
* 本组件是**纯展示组件**：所有状态由 props 传入。Phase 8 会接 `streamJob` 把后台 SSE
|
||||
* 进度喂进来；当前可由 `DispatchChainPreviewPage` 用假数据 + 定时器模拟驱动预览。
|
||||
*
|
||||
* 颜色 / 头像复用圆桌既有体系：`getAvatar`（Avatars.tsx）+ `chainTagClasses`
|
||||
* （business-chain.ts）。连线动画 CSS 在 `styles/roundtable-planning.css` 全局段
|
||||
* （Radix Dialog portal 到 body，不在 .roundtable-planning 作用域内，故用全局类 + 语义 token）。
|
||||
*/
|
||||
import { Fragment, useState } from "react";
|
||||
import { CheckIcon, ChevronRightIcon, EyeIcon, Loader2Icon, SendIcon } from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
import { getAvatar } from "./Avatars";
|
||||
import { chainTagClasses } from "../lib/business-chain";
|
||||
import type {
|
||||
ChainNodeState,
|
||||
DispatchChainNode,
|
||||
JobPhase,
|
||||
JobStatus,
|
||||
} from "../lib/job-types";
|
||||
|
||||
export interface DispatchChainModalProps {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
/** 任务标题。 */
|
||||
title?: string;
|
||||
status: JobStatus;
|
||||
phase: JobPhase;
|
||||
/** 当前轮次（0..maxCycles）。 */
|
||||
cycle: number;
|
||||
/** 最大轮次（默认 8，对齐 MAX_CYCLES）。 */
|
||||
maxCycles?: number;
|
||||
/** 派活链路节点（横向排列）。 */
|
||||
nodes: DispatchChainNode[];
|
||||
/** 共识百分比（0..100）。 */
|
||||
consensusPercentage: number;
|
||||
/** 「查看」按钮回调 → 进入正在进行的任务 / 查看报告。 */
|
||||
onView?: () => void;
|
||||
/** 命中澄清时的问题文本（status==='awaiting_input'）。 */
|
||||
pendingClarification?: string | null;
|
||||
/** 提交澄清回答 → 续跑。 */
|
||||
onResume?: (answer: string) => void;
|
||||
/** 停止/取消作业。 */
|
||||
onCancel?: () => void;
|
||||
/** 出错详情（status==='error'）。 */
|
||||
error?: string | null;
|
||||
}
|
||||
|
||||
const _NON_TERMINAL: ReadonlySet<JobStatus> = new Set<JobStatus>(["queued", "running", "awaiting_input"]);
|
||||
|
||||
const STATUS_LABEL: Record<JobStatus, string> = {
|
||||
queued: "排队中",
|
||||
running: "进行中",
|
||||
awaiting_input: "等待澄清",
|
||||
done: "已完成",
|
||||
error: "出错",
|
||||
cancelled: "已取消",
|
||||
};
|
||||
|
||||
const PHASE_LABEL: Record<JobPhase, string> = {
|
||||
initializing: "初始化席位…",
|
||||
leader_thinking: "总控决策派活中…",
|
||||
dispatching: "席位发言中…",
|
||||
consensus: "共识达成",
|
||||
report_drawing: "结果绘制中…",
|
||||
report_done: "绘制完成",
|
||||
};
|
||||
|
||||
export function DispatchChainModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
title = "多智能体研讨",
|
||||
status,
|
||||
phase,
|
||||
cycle,
|
||||
maxCycles = 8,
|
||||
nodes,
|
||||
consensusPercentage,
|
||||
onView,
|
||||
pendingClarification,
|
||||
onResume,
|
||||
onCancel,
|
||||
error,
|
||||
}: DispatchChainModalProps) {
|
||||
const [answer, setAnswer] = useState("");
|
||||
// 总控节点：初始化 / 决策派活阶段高亮
|
||||
const coordinatorState: ChainNodeState =
|
||||
phase === "initializing" || phase === "leader_thinking" ? "active" : "done";
|
||||
|
||||
// 共识里程碑
|
||||
const consensusDone =
|
||||
consensusPercentage >= 100 ||
|
||||
phase === "consensus" ||
|
||||
phase === "report_drawing" ||
|
||||
phase === "report_done" ||
|
||||
status === "done";
|
||||
const consensusActive = phase === "consensus";
|
||||
|
||||
// 报告绘制里程碑
|
||||
const reportActive = phase === "report_drawing";
|
||||
const reportDone = phase === "report_done" || status === "done";
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="flex max-h-[88vh] flex-col gap-0 sm:max-w-5xl">
|
||||
<DialogHeader className="shrink-0">
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
{status === "running" && (
|
||||
<Loader2Icon className="size-5 shrink-0 animate-spin text-primary" />
|
||||
)}
|
||||
<span className="truncate">{title}</span>
|
||||
<span
|
||||
className={cn(
|
||||
"ml-1 shrink-0 rounded-full px-2 py-0.5 text-[11px] font-semibold",
|
||||
status === "running" && "bg-primary/10 text-primary",
|
||||
status === "awaiting_input" &&
|
||||
"bg-amber-500/10 text-amber-600 dark:text-amber-400",
|
||||
status === "done" &&
|
||||
"bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
|
||||
status === "error" && "bg-destructive/10 text-destructive",
|
||||
(status === "queued" || status === "cancelled") &&
|
||||
"bg-muted text-muted-foreground",
|
||||
)}
|
||||
>
|
||||
{STATUS_LABEL[status]}
|
||||
</span>
|
||||
</DialogTitle>
|
||||
<DialogDescription>{PHASE_LABEL[phase]}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
{/* 横向流程图（横向滚动） */}
|
||||
<div className="custom-scrollbar min-h-0 flex-1 overflow-x-auto overflow-y-hidden py-10">
|
||||
<div className="flex min-w-max items-start gap-0 px-6">
|
||||
{/* 总控节点 */}
|
||||
<FlowNode
|
||||
label="总控协调"
|
||||
avatarType="human"
|
||||
state={coordinatorState}
|
||||
/>
|
||||
|
||||
{/* 席位节点 */}
|
||||
{nodes.map((node) => (
|
||||
<Fragment key={node.agentId}>
|
||||
<Connector
|
||||
active={node.state === "active"}
|
||||
done={node.state === "done"}
|
||||
/>
|
||||
<FlowNode
|
||||
label={node.name}
|
||||
avatarType={node.avatarType}
|
||||
state={node.state}
|
||||
order={node.order}
|
||||
/>
|
||||
</Fragment>
|
||||
))}
|
||||
|
||||
{/* 共识里程碑 */}
|
||||
<Connector active={consensusActive} done={consensusDone} />
|
||||
<MilestoneNode
|
||||
label="共识达成"
|
||||
emoji="🤝"
|
||||
state={
|
||||
consensusActive ? "active" : consensusDone ? "done" : "pending"
|
||||
}
|
||||
/>
|
||||
|
||||
{/* 报告绘制里程碑 */}
|
||||
<Connector active={reportActive} done={reportDone} />
|
||||
<MilestoneNode
|
||||
label="结果绘制"
|
||||
emoji="📊"
|
||||
state={reportActive ? "active" : reportDone ? "done" : "pending"}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 出错详情 */}
|
||||
{status === "error" && error && (
|
||||
<div className="shrink-0 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 澄清作答（status==='awaiting_input'）→ resumeJob 续跑 */}
|
||||
{status === "awaiting_input" && pendingClarification && onResume && (
|
||||
<div className="shrink-0 pt-3">
|
||||
<div className="rounded-xl border border-amber-300/50 bg-amber-50/60 p-3 dark:border-amber-700/40 dark:bg-amber-950/20">
|
||||
<div className="mb-1.5 flex items-center gap-1.5 text-xs font-semibold text-amber-600 dark:text-amber-400">
|
||||
<span className="inline-block size-1.5 rounded-full bg-amber-400 animate-pulse" />
|
||||
总控需要补充信息，请回答后继续
|
||||
</div>
|
||||
<p className="mb-2 whitespace-pre-wrap text-sm text-foreground/80">{pendingClarification}</p>
|
||||
<textarea
|
||||
value={answer}
|
||||
onChange={(e) => setAnswer(e.target.value)}
|
||||
rows={2}
|
||||
placeholder="输入你的回答…"
|
||||
className="mb-2 w-full resize-none rounded-lg border border-border bg-background px-3 py-2 text-sm outline-none focus:border-primary focus:ring-1 focus:ring-primary/30"
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<Button
|
||||
size="sm"
|
||||
disabled={!answer.trim()}
|
||||
onClick={() => {
|
||||
onResume(answer.trim());
|
||||
setAnswer("");
|
||||
}}
|
||||
className="gap-1.5"
|
||||
>
|
||||
<SendIcon className="size-3.5" />
|
||||
提交并继续
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<DialogFooter className="shrink-0 flex-row items-center justify-between gap-2 border-t pt-3 sm:justify-between">
|
||||
<span className="text-xs text-muted-foreground">
|
||||
轮次 {Math.min(cycle, maxCycles)}/{maxCycles}
|
||||
<span className="mx-2 text-muted-foreground/40">·</span>
|
||||
共识 {Math.round(consensusPercentage)}%
|
||||
<span className="mx-2 text-muted-foreground/40">·</span>
|
||||
{PHASE_LABEL[phase]}
|
||||
</span>
|
||||
<div className="flex items-center gap-2">
|
||||
{onCancel && _NON_TERMINAL.has(status) && (
|
||||
<Button variant="outline" size="sm" onClick={onCancel} className="text-muted-foreground">
|
||||
停止
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={onView} disabled={!onView} className="gap-1.5">
|
||||
<EyeIcon className="size-4" />
|
||||
{status === "done" ? "查看报告" : "查看"}
|
||||
</Button>
|
||||
</div>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
// ── 链路节点（席位 / 总控）─────────────────────────────────────────────────
|
||||
|
||||
function FlowNode({
|
||||
label,
|
||||
avatarType,
|
||||
state,
|
||||
order,
|
||||
}: {
|
||||
label: string;
|
||||
avatarType: string;
|
||||
state: ChainNodeState;
|
||||
order?: number;
|
||||
}) {
|
||||
const tag = chainTagClasses(avatarType);
|
||||
return (
|
||||
<div className="flex w-24 shrink-0 flex-col items-center gap-2 text-center">
|
||||
<div className="relative flex size-16 items-center justify-center">
|
||||
{/* 活动光环：脉冲 ping */}
|
||||
{state === "active" && (
|
||||
<span className="absolute inset-0 animate-ping rounded-full bg-primary/30" />
|
||||
)}
|
||||
{/* 头像 + 状态描边 */}
|
||||
<span
|
||||
className={cn(
|
||||
"relative flex size-16 items-center justify-center rounded-full border-2 transition-all",
|
||||
state === "active" &&
|
||||
"border-primary shadow-[0_0_0_4px_rgba(22,119,255,0.12)]",
|
||||
state === "done" && "border-emerald-400/70",
|
||||
state === "pending" && "border-border opacity-45 grayscale",
|
||||
)}
|
||||
>
|
||||
{getAvatar(avatarType, "h-14 w-14")}
|
||||
{/* 完成打勾 */}
|
||||
{state === "done" && (
|
||||
<span className="absolute -right-0.5 -top-0.5 flex size-5 items-center justify-center rounded-full bg-emerald-500 text-white shadow">
|
||||
<CheckIcon className="size-3" />
|
||||
</span>
|
||||
)}
|
||||
{/* 进行中转圈 */}
|
||||
{state === "active" && (
|
||||
<span className="absolute -right-0.5 -top-0.5 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground shadow">
|
||||
<Loader2Icon className="size-3 animate-spin" />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
className={cn(
|
||||
"max-w-full truncate rounded border px-1.5 py-0.5 text-[11px] font-medium",
|
||||
state === "pending" ? "border-border bg-muted text-muted-foreground" : tag,
|
||||
)}
|
||||
title={label}
|
||||
>
|
||||
{order != null ? `${order}. ` : ""}
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── 里程碑节点（共识 / 报告绘制）─────────────────────────────────────────────
|
||||
|
||||
function MilestoneNode({
|
||||
label,
|
||||
emoji,
|
||||
state,
|
||||
}: {
|
||||
label: string;
|
||||
emoji: string;
|
||||
state: ChainNodeState;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex w-24 shrink-0 flex-col items-center gap-2 text-center">
|
||||
<div className="relative flex size-16 items-center justify-center">
|
||||
{state === "active" && (
|
||||
<span className="absolute inset-0 animate-ping rounded-full bg-primary/30" />
|
||||
)}
|
||||
<span
|
||||
className={cn(
|
||||
"relative flex size-16 items-center justify-center rounded-full border-2 text-2xl transition-all",
|
||||
state === "active" &&
|
||||
"border-primary bg-primary/5 shadow-[0_0_0_4px_rgba(22,119,255,0.12)]",
|
||||
state === "done" && "border-emerald-400/70 bg-emerald-500/5",
|
||||
state === "pending" && "border-border bg-muted opacity-45 grayscale",
|
||||
)}
|
||||
>
|
||||
{emoji}
|
||||
{state === "done" && (
|
||||
<span className="absolute -right-0.5 -top-0.5 flex size-5 items-center justify-center rounded-full bg-emerald-500 text-white shadow">
|
||||
<CheckIcon className="size-3" />
|
||||
</span>
|
||||
)}
|
||||
{state === "active" && (
|
||||
<span className="absolute -right-0.5 -top-0.5 flex size-5 items-center justify-center rounded-full bg-primary text-primary-foreground shadow">
|
||||
<Loader2Icon className="size-3 animate-spin" />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
className={cn(
|
||||
"rounded border px-1.5 py-0.5 text-[11px] font-semibold",
|
||||
state === "pending"
|
||||
? "border-border bg-muted text-muted-foreground"
|
||||
: state === "active"
|
||||
? "border-primary/40 bg-primary/10 text-primary"
|
||||
: "border-emerald-400/40 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── 连接线（带流动动画）─────────────────────────────────────────────────────
|
||||
|
||||
function Connector({ active, done }: { active: boolean; done: boolean }) {
|
||||
return (
|
||||
<div className="flex h-16 w-16 shrink-0 items-center justify-center">
|
||||
<div className="relative flex w-full items-center">
|
||||
<span
|
||||
className={cn(
|
||||
"rt-chain-connector",
|
||||
active && "rt-chain-connector--active",
|
||||
done && !active && "rt-chain-connector--done",
|
||||
)}
|
||||
/>
|
||||
<ChevronRightIcon
|
||||
className={cn(
|
||||
"absolute -right-1 size-4 transition-colors",
|
||||
active
|
||||
? "text-primary"
|
||||
: done
|
||||
? "text-primary/70"
|
||||
: "text-muted-foreground/40",
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -21,7 +21,8 @@ import {
|
||||
type SessionArtifactFile,
|
||||
type ThreadIdMap,
|
||||
} from "@/roundtable-planning/api/multi-agent";
|
||||
import { ArtifactPreviewModal } from "@/roundtable-planning/components/ArtifactPreviewModal";
|
||||
import { ConsensusDocxDownloadButton } from "@/roundtable-planning/components/ConsensusDocxDownloadButton";
|
||||
import { Step3FileBrowseMode } from "@/roundtable-planning/components/Step3FileBrowseMode";
|
||||
import { markdownComponents } from "@/roundtable-planning/components/markdown-components";
|
||||
import {
|
||||
Step3ReportMode,
|
||||
@@ -30,20 +31,6 @@ import {
|
||||
import type { DraftStep3Snapshot } from "@/roundtable-planning/api/drafts";
|
||||
import type { ReportIntent } from "@/roundtable-planning/hooks/useStep3Report";
|
||||
|
||||
/**
|
||||
* Text-ish files we render in an in-app preview modal. Other types (pdf,
|
||||
* images, html) keep the original window.open behaviour so the browser's
|
||||
* native viewer handles them.
|
||||
*/
|
||||
function shouldPreviewInModal(file: { name: string; mimeType: string | null }): boolean {
|
||||
const mime = file.mimeType ?? "";
|
||||
if (mime === "text/markdown" || mime === "text/plain" || mime === "text/csv" || mime === "application/json") {
|
||||
return true;
|
||||
}
|
||||
if (mime.startsWith("text/")) return true;
|
||||
return /\.(md|markdown|txt|json|csv|log|yml|yaml|xml)$/i.test(file.name);
|
||||
}
|
||||
|
||||
interface SeatDelivery {
|
||||
/** Display name of the seat (e.g. "情报收集"). */
|
||||
sender: string;
|
||||
@@ -78,6 +65,8 @@ interface HighFidelityReportProps {
|
||||
onReportSaved?: (snapshot: DraftStep3Snapshot) => void;
|
||||
/** Resets state and navigates back to Step 1. */
|
||||
onReset: () => void;
|
||||
openArtifactPreview: (threadId: string, path: string) => void;
|
||||
seatStubMessages: Record<string, unknown[]>;
|
||||
}
|
||||
|
||||
interface SeatArtifacts {
|
||||
@@ -116,9 +105,23 @@ export const HighFidelityReport: React.FC<HighFidelityReportProps> = ({
|
||||
savedReport,
|
||||
onReportSaved,
|
||||
onReset,
|
||||
openArtifactPreview,
|
||||
seatStubMessages,
|
||||
}) => {
|
||||
// 「结果绘制」模式：把现有报告内容收起到左栏，右侧由方案可视化智能体绘制图表 HTML。
|
||||
const consensusDocTitle = useMemo(() => {
|
||||
const objective = intentReady?.objective?.trim();
|
||||
if (!objective) return "圆桌总控最终结论";
|
||||
const short = objective.length > 40 ? `${objective.slice(0, 40)}…` : objective;
|
||||
return `圆桌总控结论-${short}`;
|
||||
}, [intentReady?.objective]);
|
||||
|
||||
const [drawMode, setDrawMode] = useState(false);
|
||||
const [fileSandboxMode, setFileSandboxMode] = useState(false);
|
||||
const [fileSandboxTarget, setFileSandboxTarget] = useState<{
|
||||
threadId: string;
|
||||
file: SessionArtifactFile;
|
||||
} | null>(null);
|
||||
|
||||
// 进入第三步即关闭并清空第二步遗留的沙箱（artifacts 面板全局共享，第二步打开后
|
||||
// 不会自动关）。点「结果绘制」后 Step3ReportMode 会按需开自己的沙箱，互不串扰。
|
||||
@@ -151,10 +154,6 @@ export const HighFidelityReport: React.FC<HighFidelityReportProps> = ({
|
||||
const [artifactsBySeat, setArtifactsBySeat] = useState<SeatArtifacts[]>([]);
|
||||
const [expandedSeats, setExpandedSeats] = useState<Set<string>>(new Set());
|
||||
const [reloadKey, setReloadKey] = useState(0);
|
||||
// Active preview target — non-null means the modal is open. We carry the
|
||||
// owning threadId so the modal can fetch + build download URLs without
|
||||
// needing a second prop drill.
|
||||
const [previewing, setPreviewing] = useState<{ threadId: string; file: SessionArtifactFile } | null>(null);
|
||||
const generatedAt = useMemo(() => formatGeneratedAt(new Date()), []);
|
||||
|
||||
// Fetch artifact listings for every seat thread in parallel. Re-runs when
|
||||
@@ -222,23 +221,16 @@ export const HighFidelityReport: React.FC<HighFidelityReportProps> = ({
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handlePreview = useCallback(
|
||||
(threadId: string, file: SessionArtifactFile) => {
|
||||
// Text-ish artifacts (markdown / txt / json / csv / yaml / ...) open
|
||||
// in our in-app modal so the user can read the content without leaving
|
||||
// the planning page. Binary or active content (pdf / png / html) still
|
||||
// hands off to the browser's native viewer via the original tab.
|
||||
if (shouldPreviewInModal({ name: file.name, mimeType: file.mimeType })) {
|
||||
setPreviewing({ threadId, file });
|
||||
return;
|
||||
}
|
||||
if (typeof window !== "undefined") {
|
||||
const url = buildArtifactDownloadUrl(threadId, file.path);
|
||||
window.open(url, "_blank", "noopener,noreferrer");
|
||||
}
|
||||
},
|
||||
[],
|
||||
);
|
||||
const handleViewInSandbox = useCallback((threadId: string, file: SessionArtifactFile) => {
|
||||
setFileSandboxTarget({ threadId, file });
|
||||
setFileSandboxMode(true);
|
||||
}, []);
|
||||
|
||||
const handleBackFromFileSandbox = useCallback(() => {
|
||||
setFileSandboxMode(false);
|
||||
setFileSandboxTarget(null);
|
||||
deselectArtifact();
|
||||
}, [deselectArtifact]);
|
||||
|
||||
const handleDownload = useCallback(
|
||||
(threadId: string, file: SessionArtifactFile) => {
|
||||
@@ -250,6 +242,22 @@ export const HighFidelityReport: React.FC<HighFidelityReportProps> = ({
|
||||
[],
|
||||
);
|
||||
|
||||
if (fileSandboxMode && fileSandboxTarget) {
|
||||
return (
|
||||
<Step3FileBrowseMode
|
||||
consensusText={consensusText}
|
||||
hasConsensus={hasConsensus}
|
||||
consensusDocTitle={consensusDocTitle}
|
||||
seatDeliveries={seatDeliveries}
|
||||
artifactsBySeat={artifactsBySeat}
|
||||
seatStubMessages={seatStubMessages}
|
||||
openArtifactPreview={openArtifactPreview}
|
||||
initialFile={fileSandboxTarget}
|
||||
onBack={handleBackFromFileSandbox}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (drawMode) {
|
||||
return (
|
||||
<Step3ReportMode
|
||||
@@ -351,10 +359,17 @@ export const HighFidelityReport: React.FC<HighFidelityReportProps> = ({
|
||||
<div className="p-6 space-y-6">
|
||||
{/* Section 1: Coordinator consensus conclusion */}
|
||||
<section className="bg-white border border-slate-200 rounded-2xl p-5 shadow-[0_2px_8px_rgba(0,0,0,0.02)]">
|
||||
<h4 className="text-xs font-black text-slate-900 uppercase tracking-widest mb-3 flex items-center gap-2">
|
||||
<CheckCircle className="w-4 h-4 text-emerald-500" />
|
||||
总控最终结论
|
||||
</h4>
|
||||
<div className="mb-3 flex items-center justify-between gap-2">
|
||||
<h4 className="text-xs font-black text-slate-900 uppercase tracking-widest flex items-center gap-2 min-w-0">
|
||||
<CheckCircle className="w-4 h-4 text-emerald-500 shrink-0" />
|
||||
<span className="truncate">总控最终结论</span>
|
||||
</h4>
|
||||
<ConsensusDocxDownloadButton
|
||||
markdown={consensusText}
|
||||
title={consensusDocTitle}
|
||||
className="shrink-0"
|
||||
/>
|
||||
</div>
|
||||
{consensusText ? (
|
||||
<div className="text-xs text-slate-700 leading-relaxed">
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
|
||||
@@ -420,7 +435,7 @@ export const HighFidelityReport: React.FC<HighFidelityReportProps> = ({
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Section 3: Generated files per seat —— 各席位产出的 md 文件，点击预览弹窗查看内容 */}
|
||||
{/* Section 3: Generated files per seat —— 点击「查看」进入沙箱分栏预览 */}
|
||||
<section className="bg-white border border-slate-200 rounded-2xl p-5 shadow-[0_2px_8px_rgba(0,0,0,0.02)]">
|
||||
<h4 className="text-xs font-black text-slate-900 uppercase tracking-widest mb-3 flex items-center gap-2">
|
||||
<Download className="w-4 h-4 text-primary" />
|
||||
@@ -475,9 +490,9 @@ export const HighFidelityReport: React.FC<HighFidelityReportProps> = ({
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handlePreview(seat.threadId, f)}
|
||||
onClick={() => handleViewInSandbox(seat.threadId, f)}
|
||||
className="text-slate-600 hover:text-primary transition p-1 rounded hover:bg-slate-100"
|
||||
title="预览"
|
||||
title="在沙箱中查看"
|
||||
>
|
||||
<Eye className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
@@ -515,15 +530,6 @@ export const HighFidelityReport: React.FC<HighFidelityReportProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{previewing && (
|
||||
<ArtifactPreviewModal
|
||||
threadId={previewing.threadId}
|
||||
path={previewing.file.path}
|
||||
name={previewing.file.name}
|
||||
mimeType={previewing.file.mimeType}
|
||||
onClose={() => setPreviewing(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -23,6 +23,7 @@ import {
|
||||
Loader2,
|
||||
Pause,
|
||||
Play,
|
||||
Rocket,
|
||||
Sparkles,
|
||||
} from "lucide-react";
|
||||
|
||||
@@ -98,6 +99,8 @@ export interface Step2PanelProps {
|
||||
onSubmitClarification: (answer: string) => void;
|
||||
onSavePersona: (id: number) => void;
|
||||
onProceedToStep3: () => void;
|
||||
/** 「后台挂起」：把当前研讨转入后端自动跑到结果绘制完成。 */
|
||||
onBackgroundSuspend: () => void;
|
||||
onTriggerToast: (msg: string) => void;
|
||||
}
|
||||
|
||||
@@ -133,6 +136,7 @@ export function Step2Panel(props: Step2PanelProps) {
|
||||
onSubmitClarification,
|
||||
onSavePersona,
|
||||
onProceedToStep3,
|
||||
onBackgroundSuspend,
|
||||
onTriggerToast,
|
||||
} = props;
|
||||
|
||||
@@ -365,6 +369,16 @@ export function Step2Panel(props: Step2PanelProps) {
|
||||
|
||||
<div className="h-6 w-[1px] bg-slate-200 shrink-0" />
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onBackgroundSuspend}
|
||||
title="把当前研讨转入后台自动跑到结果绘制完成；可离开页面，进度在历史记录里查看"
|
||||
className="bg-white border border-slate-200 hover:bg-slate-50 text-slate-700 text-xs font-bold px-4 py-2.5 rounded-xl transition shrink-0 flex items-center gap-1 active:scale-95 cursor-pointer dark:bg-secondary dark:text-foreground dark:border-border"
|
||||
>
|
||||
<Rocket className="w-3.5 h-3.5 text-primary" />
|
||||
后台挂起
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={onProceedToStep3}
|
||||
|
||||
@@ -27,11 +27,14 @@ import { cn } from "@/lib/utils";
|
||||
|
||||
const CLOSE_MODE = { chat: 100, artifacts: 0 };
|
||||
const OPEN_MODE = { chat: 60, artifacts: 40 };
|
||||
|
||||
interface Step2SandboxLayoutProps {
|
||||
children: React.ReactNode;
|
||||
children?: React.ReactNode;
|
||||
/** 当前预览文件所属的席位 thread id。 */
|
||||
activeThreadId: string | null;
|
||||
/** 为 true 时右侧区域仅展示沙箱预览，占满可用宽度（无中间说明/对话区）。 */
|
||||
artifactsFill?: boolean;
|
||||
/** artifactsFill 模式下用户点击沙箱关闭时的回调（退出预览、收起沙箱）。 */
|
||||
onArtifactsClose?: () => void;
|
||||
/** 是否有流式 run 进行中 —— 开启 artifacts API 轮询。 */
|
||||
isStreaming?: boolean;
|
||||
/**
|
||||
@@ -43,10 +46,12 @@ interface Step2SandboxLayoutProps {
|
||||
}
|
||||
|
||||
export function Step2SandboxLayout({
|
||||
children,
|
||||
children = null,
|
||||
activeThreadId,
|
||||
isStreaming = false,
|
||||
seatMessages,
|
||||
artifactsFill = false,
|
||||
onArtifactsClose,
|
||||
}: Step2SandboxLayoutProps) {
|
||||
const layoutRef = useRef<GroupImperativeHandle>(null);
|
||||
const {
|
||||
@@ -54,18 +59,22 @@ export function Step2SandboxLayout({
|
||||
open: artifactsOpen,
|
||||
setOpen: setArtifactsOpen,
|
||||
selectedArtifact,
|
||||
deselect,
|
||||
} = useArtifacts();
|
||||
const artifacts = rawArtifacts ?? [];
|
||||
|
||||
const artifactPanelOpen = artifactsOpen;
|
||||
|
||||
useEffect(() => {
|
||||
if (layoutRef.current) {
|
||||
layoutRef.current.setLayout(
|
||||
artifactPanelOpen ? OPEN_MODE : CLOSE_MODE,
|
||||
);
|
||||
}
|
||||
}, [artifactPanelOpen]);
|
||||
if (artifactsFill || !layoutRef.current) return;
|
||||
layoutRef.current.setLayout(artifactPanelOpen ? OPEN_MODE : CLOSE_MODE);
|
||||
}, [artifactPanelOpen, artifactsFill]);
|
||||
|
||||
const handleArtifactsClose = () => {
|
||||
deselect();
|
||||
setArtifactsOpen(false);
|
||||
onArtifactsClose?.();
|
||||
};
|
||||
|
||||
const threadStub = useMemo(() => {
|
||||
const messages = seatMessages ?? [];
|
||||
@@ -83,6 +92,70 @@ export function Step2SandboxLayout({
|
||||
|
||||
const previewThreadId = activeThreadId ?? "";
|
||||
|
||||
const artifactPanelBody = (
|
||||
<div
|
||||
className={cn(
|
||||
"h-full bg-[#fffdfa] p-4",
|
||||
!artifactsFill &&
|
||||
"transition-transform duration-300 ease-in-out",
|
||||
!artifactsFill && (artifactPanelOpen ? "translate-x-0" : "translate-x-full"),
|
||||
)}
|
||||
>
|
||||
{selectedArtifact && previewThreadId ? (
|
||||
<ArtifactFileDetail
|
||||
className="size-full"
|
||||
filepath={selectedArtifact}
|
||||
threadId={previewThreadId}
|
||||
onClose={artifactsFill && onArtifactsClose ? handleArtifactsClose : undefined}
|
||||
/>
|
||||
) : (
|
||||
<div className="relative flex size-full justify-center">
|
||||
{!artifactsFill && (
|
||||
<div className="absolute top-1 right-1 z-30">
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
onClick={() => setArtifactsOpen(false)}
|
||||
>
|
||||
<XIcon />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{artifacts.length === 0 ? (
|
||||
<ConversationEmptyState
|
||||
icon={<FilesIcon />}
|
||||
title="未选择文件"
|
||||
description="智能体写入文件后将在此预览"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex size-full max-w-(--container-width-sm) flex-col justify-center p-4 pt-8">
|
||||
<header className="shrink-0">
|
||||
<h2 className="text-lg font-medium">产出文件</h2>
|
||||
</header>
|
||||
<main className="min-h-0 grow">
|
||||
{previewThreadId ? (
|
||||
<ArtifactFileList
|
||||
className="max-w-(--container-width-sm) p-4 pt-12"
|
||||
files={artifacts}
|
||||
threadId={previewThreadId}
|
||||
/>
|
||||
) : null}
|
||||
</main>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
if (artifactsFill) {
|
||||
return (
|
||||
<ThreadContext.Provider value={{ thread: threadStub, isMock: false }}>
|
||||
<div className="h-full min-h-0 flex-1 bg-[#fffdfa]">{artifactPanelBody}</div>
|
||||
</ThreadContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThreadContext.Provider value={{ thread: threadStub, isMock: false }}>
|
||||
<ResizablePanelGroup
|
||||
@@ -109,54 +182,7 @@ export function Step2SandboxLayout({
|
||||
)}
|
||||
id="artifacts"
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"h-full bg-[#fffdfa] p-4 transition-transform duration-300 ease-in-out",
|
||||
artifactPanelOpen ? "translate-x-0" : "translate-x-full",
|
||||
)}
|
||||
>
|
||||
{selectedArtifact && previewThreadId ? (
|
||||
<ArtifactFileDetail
|
||||
className="size-full"
|
||||
filepath={selectedArtifact}
|
||||
threadId={previewThreadId}
|
||||
/>
|
||||
) : (
|
||||
<div className="relative flex size-full justify-center">
|
||||
<div className="absolute top-1 right-1 z-30">
|
||||
<Button
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
onClick={() => setArtifactsOpen(false)}
|
||||
>
|
||||
<XIcon />
|
||||
</Button>
|
||||
</div>
|
||||
{artifacts.length === 0 ? (
|
||||
<ConversationEmptyState
|
||||
icon={<FilesIcon />}
|
||||
title="未选择文件"
|
||||
description="智能体写入文件后将在此预览"
|
||||
/>
|
||||
) : (
|
||||
<div className="flex size-full max-w-(--container-width-sm) flex-col justify-center p-4 pt-8">
|
||||
<header className="shrink-0">
|
||||
<h2 className="text-lg font-medium">产出文件</h2>
|
||||
</header>
|
||||
<main className="min-h-0 grow">
|
||||
{previewThreadId ? (
|
||||
<ArtifactFileList
|
||||
className="max-w-(--container-width-sm) p-4 pt-12"
|
||||
files={artifacts}
|
||||
threadId={previewThreadId}
|
||||
/>
|
||||
) : null}
|
||||
</main>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{artifactPanelBody}
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ThreadContext.Provider>
|
||||
|
||||
@@ -0,0 +1,351 @@
|
||||
/**
|
||||
* Step 3「文件沙箱预览」模式 —— 布局对齐「结果绘制」：左栏研讨内容 + 文件清单，右栏 Step 2 沙箱。
|
||||
*/
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import {
|
||||
ArrowLeft,
|
||||
CheckCircle,
|
||||
Download,
|
||||
Eye,
|
||||
FileText,
|
||||
Loader2,
|
||||
PanelLeftClose,
|
||||
PanelLeftOpen,
|
||||
} from "lucide-react";
|
||||
|
||||
import {
|
||||
ResizableHandle,
|
||||
ResizablePanel,
|
||||
ResizablePanelGroup,
|
||||
} from "@/components/ui/resizable";
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
buildArtifactDownloadUrl,
|
||||
type SessionArtifactFile,
|
||||
} from "@/roundtable-planning/api/multi-agent";
|
||||
import { ConsensusDocxDownloadButton } from "@/roundtable-planning/components/ConsensusDocxDownloadButton";
|
||||
import { markdownComponents } from "@/roundtable-planning/components/markdown-components";
|
||||
import { Step2SandboxLayout } from "@/roundtable-planning/components/Step2SandboxLayout";
|
||||
|
||||
interface SeatDelivery {
|
||||
sender: string;
|
||||
content: string;
|
||||
}
|
||||
|
||||
interface SeatArtifacts {
|
||||
agentName: string;
|
||||
displayName: string;
|
||||
threadId: string;
|
||||
files: SessionArtifactFile[];
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
function formatBytes(n: number): string {
|
||||
if (n < 1024) return `${n} B`;
|
||||
if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
|
||||
return `${(n / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
export interface Step3FileBrowseModeProps {
|
||||
consensusText: string;
|
||||
hasConsensus: boolean;
|
||||
consensusDocTitle: string;
|
||||
seatDeliveries: SeatDelivery[];
|
||||
artifactsBySeat: SeatArtifacts[];
|
||||
seatStubMessages: Record<string, unknown[]>;
|
||||
openArtifactPreview: (threadId: string, path: string) => void;
|
||||
/** 进入模式时默认打开的文件（由「查看」触发）。 */
|
||||
initialFile: { threadId: string; file: SessionArtifactFile };
|
||||
onBack: () => void;
|
||||
}
|
||||
|
||||
export function Step3FileBrowseMode({
|
||||
consensusText,
|
||||
hasConsensus,
|
||||
consensusDocTitle,
|
||||
seatDeliveries,
|
||||
artifactsBySeat,
|
||||
seatStubMessages,
|
||||
openArtifactPreview,
|
||||
initialFile,
|
||||
onBack,
|
||||
}: Step3FileBrowseModeProps) {
|
||||
const [activeFile, setActiveFile] = useState(initialFile);
|
||||
const [leftCollapsed, setLeftCollapsed] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
openArtifactPreview(activeFile.threadId, activeFile.file.path);
|
||||
}, [activeFile.file.path, activeFile.threadId, openArtifactPreview]);
|
||||
|
||||
const handleSelectFile = useCallback(
|
||||
(threadId: string, file: SessionArtifactFile) => {
|
||||
setActiveFile({ threadId, file });
|
||||
openArtifactPreview(threadId, file.path);
|
||||
},
|
||||
[openArtifactPreview],
|
||||
);
|
||||
|
||||
const handleDownload = useCallback((threadId: string, file: SessionArtifactFile) => {
|
||||
const url = buildArtifactDownloadUrl(threadId, file.path, { download: true });
|
||||
if (typeof window !== "undefined") {
|
||||
window.open(url, "_blank", "noopener,noreferrer");
|
||||
}
|
||||
}, []);
|
||||
|
||||
const activeSeatMessages = useMemo(
|
||||
() => seatStubMessages[activeFile.threadId] ?? [],
|
||||
[seatStubMessages, activeFile.threadId],
|
||||
);
|
||||
|
||||
const activeDisplayName = useMemo(() => {
|
||||
const seat = artifactsBySeat.find((s) => s.threadId === activeFile.threadId);
|
||||
return seat?.displayName ?? "席位";
|
||||
}, [artifactsBySeat, activeFile.threadId]);
|
||||
|
||||
return (
|
||||
<div className="flex h-full min-h-0 flex-col text-slate-800">
|
||||
<div className="shrink-0 flex items-center justify-between gap-3 border-b border-slate-100 bg-gradient-to-r from-slate-50 to-white px-6 py-3.5 flex-wrap">
|
||||
<div className="flex items-center gap-2.5 min-w-0">
|
||||
<FileText className="w-5 h-5 text-primary shrink-0" />
|
||||
<h3 className="text-sm font-black text-slate-900 tracking-tight truncate">
|
||||
文件预览 · 沙箱查看
|
||||
</h3>
|
||||
<span className="text-[10px] font-mono text-slate-500 bg-slate-100 px-2 py-0.5 rounded-lg truncate max-w-[240px]">
|
||||
{activeDisplayName} / {activeFile.file.name}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onBack}
|
||||
className="bg-white border border-slate-200 text-slate-700 hover:bg-slate-50 text-[10.5px] font-bold px-3 py-1.5 rounded-xl flex items-center gap-1 transition shrink-0"
|
||||
>
|
||||
<ArrowLeft className="w-3.5 h-3.5 text-slate-500" />
|
||||
返回报告
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-h-0 p-3">
|
||||
{leftCollapsed ? (
|
||||
<div className="h-full min-h-0 flex gap-3">
|
||||
<aside className="w-[52px] shrink-0 flex flex-col gap-3 overflow-y-auto pr-0.5">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setLeftCollapsed(false)}
|
||||
title="展开侧栏"
|
||||
className="w-full shrink-0 flex h-10 items-center justify-center rounded-2xl border border-slate-200/50 bg-white text-slate-500 hover:text-primary hover:border-primary/30 transition-colors shadow-[0_2px_8px_rgba(0,0,0,0.01)]"
|
||||
>
|
||||
<PanelLeftOpen className="h-4 w-4" />
|
||||
</button>
|
||||
<CollapsedIconButton
|
||||
icon={<CheckCircle className="w-4 h-4 text-emerald-500" />}
|
||||
title="总控最终结论"
|
||||
onClick={() => setLeftCollapsed(false)}
|
||||
/>
|
||||
<CollapsedIconButton
|
||||
icon={<FileText className="w-4 h-4 text-primary" />}
|
||||
title="生成的报告文件"
|
||||
onClick={() => setLeftCollapsed(false)}
|
||||
/>
|
||||
</aside>
|
||||
<section className="flex-1 min-w-0 rounded-2xl border border-slate-200/60 bg-[#fffdfa] overflow-hidden">
|
||||
<Step2SandboxLayout
|
||||
artifactsFill
|
||||
activeThreadId={activeFile.threadId}
|
||||
seatMessages={activeSeatMessages}
|
||||
onArtifactsClose={onBack}
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
) : (
|
||||
<ResizablePanelGroup
|
||||
orientation="horizontal"
|
||||
className="h-full min-h-0 gap-3"
|
||||
autoSaveId="roundtable-step3-file-browse-layout"
|
||||
>
|
||||
<ResizablePanel defaultSize={42} minSize={26} className="min-w-0">
|
||||
<aside className="h-full min-h-0 flex flex-col gap-3 overflow-y-auto pr-0.5">
|
||||
<div className="shrink-0 flex items-center justify-between gap-2 px-1">
|
||||
<span className="text-[11px] font-bold text-slate-500 uppercase tracking-widest">
|
||||
方案内容
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setLeftCollapsed(true)}
|
||||
title="收起侧栏"
|
||||
className="shrink-0 flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200/50 bg-white text-slate-500 hover:text-primary hover:border-primary/30 transition-colors"
|
||||
>
|
||||
<PanelLeftClose className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section className="rounded-2xl border border-slate-200/60 bg-white p-3.5 shadow-[0_2px_8px_rgba(0,0,0,0.01)]">
|
||||
<div className="mb-2 flex items-center justify-between gap-2">
|
||||
<h4 className="text-xs font-bold text-slate-900 flex items-center gap-1.5">
|
||||
<CheckCircle className="w-3.5 h-3.5 text-emerald-500" />
|
||||
总控最终结论
|
||||
</h4>
|
||||
{hasConsensus && (
|
||||
<span className="text-[9px] font-bold text-emerald-700 bg-emerald-50 border border-emerald-200 px-1.5 py-0.5 rounded-full">
|
||||
已共识
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mb-2 flex justify-end">
|
||||
<ConsensusDocxDownloadButton
|
||||
markdown={consensusText}
|
||||
title={consensusDocTitle}
|
||||
size="sm"
|
||||
/>
|
||||
</div>
|
||||
{consensusText ? (
|
||||
<div className="max-h-32 overflow-y-auto text-[11px] text-slate-700 leading-relaxed">
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
|
||||
{consensusText}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-[11px] text-slate-400 italic">暂无总控结论。</p>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{seatDeliveries.length > 0 && (
|
||||
<section className="rounded-2xl border border-slate-200/60 bg-white p-3.5 shadow-[0_2px_8px_rgba(0,0,0,0.01)]">
|
||||
<h4 className="text-xs font-bold text-slate-900 mb-2">
|
||||
各席位交付
|
||||
<span className="ml-1.5 text-[10px] font-mono text-slate-400">
|
||||
{seatDeliveries.length}
|
||||
</span>
|
||||
</h4>
|
||||
<ul className="space-y-1 max-h-24 overflow-y-auto">
|
||||
{seatDeliveries.map((s, i) => (
|
||||
<li key={`${s.sender}-${i}`} className="text-[11px] text-slate-600 truncate">
|
||||
{s.sender}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<section className="rounded-2xl border border-slate-200/60 bg-white p-3.5 shadow-[0_2px_8px_rgba(0,0,0,0.01)] flex-1 min-h-0 flex flex-col">
|
||||
<h4 className="text-xs font-bold text-slate-900 mb-2 flex items-center gap-1.5 shrink-0">
|
||||
<Download className="w-3.5 h-3.5 text-primary" />
|
||||
生成的报告文件
|
||||
</h4>
|
||||
<div className="flex-1 min-h-0 overflow-y-auto space-y-2">
|
||||
{artifactsBySeat.map((seat) => (
|
||||
<div key={seat.agentName} className="border border-slate-150 rounded-xl overflow-hidden">
|
||||
<div className="px-2.5 py-1.5 bg-slate-50 border-b border-slate-100 text-[10.5px] font-bold text-slate-800 truncate">
|
||||
{seat.displayName}
|
||||
</div>
|
||||
{seat.loading ? (
|
||||
<div className="flex items-center gap-1.5 px-2.5 py-2 text-[10px] text-slate-500">
|
||||
<Loader2 className="w-3 h-3 animate-spin" />
|
||||
加载中…
|
||||
</div>
|
||||
) : seat.error ? (
|
||||
<p className="px-2.5 py-2 text-[10px] text-rose-600">{seat.error}</p>
|
||||
) : seat.files.length === 0 ? (
|
||||
<p className="px-2.5 py-2 text-[10px] text-slate-400 italic">无文件</p>
|
||||
) : (
|
||||
<ul className="divide-y divide-slate-100">
|
||||
{seat.files.map((f) => {
|
||||
const isActive =
|
||||
activeFile.threadId === seat.threadId &&
|
||||
activeFile.file.path === f.path;
|
||||
return (
|
||||
<li key={f.path}>
|
||||
<div
|
||||
className={cn(
|
||||
"px-2 py-1.5 flex items-center justify-between gap-1",
|
||||
isActive && "bg-[var(--brand-200)]/25",
|
||||
)}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleSelectFile(seat.threadId, f)}
|
||||
className="flex items-center gap-1.5 min-w-0 text-left flex-1"
|
||||
title={f.name}
|
||||
>
|
||||
<FileText className="w-3 h-3 text-slate-400 shrink-0" />
|
||||
<span className="text-[10.5px] font-medium text-slate-800 truncate">
|
||||
{f.name}
|
||||
</span>
|
||||
</button>
|
||||
<div className="flex items-center gap-0.5 shrink-0">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleSelectFile(seat.threadId, f)}
|
||||
className={cn(
|
||||
"p-1 rounded transition",
|
||||
isActive
|
||||
? "text-primary bg-white/80"
|
||||
: "text-slate-500 hover:text-primary hover:bg-slate-100",
|
||||
)}
|
||||
title="在沙箱中查看"
|
||||
>
|
||||
<Eye className="w-3 h-3" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleDownload(seat.threadId, f)}
|
||||
className="text-slate-500 hover:text-primary p-1 rounded hover:bg-slate-100 transition"
|
||||
title="下载"
|
||||
>
|
||||
<Download className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
</ResizablePanel>
|
||||
|
||||
<ResizableHandle className="w-2 rounded-full bg-slate-200/70 hover:bg-slate-300 transition" />
|
||||
|
||||
<ResizablePanel defaultSize={58} minSize={30} className="min-w-0">
|
||||
<section className="h-full min-h-0 rounded-2xl border border-slate-200/60 bg-[#fffdfa] overflow-hidden">
|
||||
<Step2SandboxLayout
|
||||
artifactsFill
|
||||
activeThreadId={activeFile.threadId}
|
||||
seatMessages={activeSeatMessages}
|
||||
onArtifactsClose={onBack}
|
||||
/>
|
||||
</section>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CollapsedIconButton({
|
||||
icon,
|
||||
title,
|
||||
onClick,
|
||||
}: {
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
onClick: () => void;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
title={title}
|
||||
onClick={onClick}
|
||||
className="w-full shrink-0 flex items-center justify-center rounded-2xl border border-slate-200/50 bg-white p-2.5 text-slate-500 shadow-[0_2px_8px_rgba(0,0,0,0.01)] transition hover:text-primary hover:border-primary/30"
|
||||
>
|
||||
{icon}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -35,6 +35,9 @@ export interface Step3PanelProps {
|
||||
savedReport?: DraftStep3Snapshot | null;
|
||||
onReportSaved?: (snapshot: DraftStep3Snapshot) => void;
|
||||
onReset: () => void;
|
||||
/** Step 2 沙箱预览产出文件（与第二步相同）。 */
|
||||
openArtifactPreview: (threadId: string, path: string) => void;
|
||||
seatStubMessages: Record<string, unknown[]>;
|
||||
}
|
||||
|
||||
export function Step3Panel(props: Step3PanelProps) {
|
||||
@@ -53,6 +56,8 @@ export function Step3Panel(props: Step3PanelProps) {
|
||||
savedReport,
|
||||
onReportSaved,
|
||||
onReset,
|
||||
openArtifactPreview,
|
||||
seatStubMessages,
|
||||
} = props;
|
||||
|
||||
const seatDeliveries = step2RoundtableDialogues
|
||||
@@ -83,6 +88,8 @@ export function Step3Panel(props: Step3PanelProps) {
|
||||
savedReport={savedReport}
|
||||
onReportSaved={onReportSaved}
|
||||
onReset={onReset}
|
||||
openArtifactPreview={openArtifactPreview}
|
||||
seatStubMessages={seatStubMessages}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -36,6 +36,7 @@ import {
|
||||
type ThreadIdMap,
|
||||
} from "@/roundtable-planning/api/multi-agent";
|
||||
import { ArtifactPreviewModal } from "@/roundtable-planning/components/ArtifactPreviewModal";
|
||||
import { ConsensusDocxDownloadButton } from "@/roundtable-planning/components/ConsensusDocxDownloadButton";
|
||||
import { ScrollToBottomButton } from "@/roundtable-planning/components/ScrollToBottomButton";
|
||||
import { Step2Message } from "@/roundtable-planning/components/Step2Panel";
|
||||
import { Step2SandboxLayout } from "@/roundtable-planning/components/Step2SandboxLayout";
|
||||
@@ -100,6 +101,13 @@ export function Step3ReportMode({
|
||||
[seatDeliveries],
|
||||
);
|
||||
|
||||
const consensusDocTitle = useMemo(() => {
|
||||
const objective = intentReady?.objective?.trim();
|
||||
if (!objective) return "圆桌总控最终结论";
|
||||
const short = objective.length > 40 ? `${objective.slice(0, 40)}…` : objective;
|
||||
return `圆桌总控结论-${short}`;
|
||||
}, [intentReady?.objective]);
|
||||
|
||||
const {
|
||||
phase,
|
||||
error,
|
||||
@@ -316,7 +324,16 @@ export function Step3ReportMode({
|
||||
|
||||
{/* 弹窗 */}
|
||||
{modal === "consensus" && (
|
||||
<ContentModal title="总控最终结论" onClose={() => setModal(null)}>
|
||||
<ContentModal
|
||||
title="总控最终结论"
|
||||
onClose={() => setModal(null)}
|
||||
headerAction={
|
||||
<ConsensusDocxDownloadButton
|
||||
markdown={consensusText}
|
||||
title={consensusDocTitle}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{consensusText ? (
|
||||
<ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
|
||||
{consensusText}
|
||||
@@ -543,10 +560,12 @@ function ContentModal({
|
||||
title,
|
||||
children,
|
||||
onClose,
|
||||
headerAction,
|
||||
}: {
|
||||
title: string;
|
||||
children: React.ReactNode;
|
||||
onClose: () => void;
|
||||
headerAction?: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
@@ -557,15 +576,18 @@ function ContentModal({
|
||||
className="bg-white border border-slate-200 rounded-2xl shadow-xl w-full max-w-2xl max-h-[80vh] flex flex-col overflow-hidden"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="shrink-0 flex items-center justify-between px-5 py-3.5 border-b border-slate-100 bg-slate-50">
|
||||
<h3 className="text-sm font-bold text-slate-900">{title}</h3>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="p-1 text-slate-400 hover:text-slate-600 rounded-md hover:bg-slate-100"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
<div className="shrink-0 flex items-center justify-between gap-2 px-5 py-3.5 border-b border-slate-100 bg-slate-50">
|
||||
<h3 className="text-sm font-bold text-slate-900 min-w-0 truncate">{title}</h3>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{headerAction}
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="p-1 text-slate-400 hover:text-slate-600 rounded-md hover:bg-slate-100"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-5">{children}</div>
|
||||
</div>
|
||||
|
||||
@@ -29,6 +29,7 @@ import {
|
||||
updateDraft,
|
||||
type DraftStep3Snapshot,
|
||||
} from "@/roundtable-planning/api/drafts";
|
||||
import type { JobStatus } from "@/roundtable-planning/lib/job-types";
|
||||
|
||||
/** 历史下拉渲染用的轻量列表项（`name` 映射自后端 `title`）。 */
|
||||
export interface DraftListItem {
|
||||
@@ -37,6 +38,10 @@ export interface DraftListItem {
|
||||
furthestStep: 1 | 2 | 3;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
/** 最近一次后台作业状态（Phase 6 历史下拉「进行中」loading）。 */
|
||||
status?: JobStatus | null;
|
||||
/** 最近一次后台作业 id（点击进行中项打开流程图弹窗用）。 */
|
||||
jobId?: string | null;
|
||||
}
|
||||
|
||||
export interface UseDraftPersistenceOptions {
|
||||
@@ -101,6 +106,8 @@ export interface UseDraftPersistenceReturn {
|
||||
* 推荐弹窗打开前调用，确保推荐历史有 draft_id 可归属。
|
||||
*/
|
||||
ensureDraft: (furthestStep?: 1 | 2 | 3) => Promise<string | null>;
|
||||
/** 强制刷新草稿列表。 */
|
||||
refresh: () => Promise<void>;
|
||||
}
|
||||
|
||||
export function useDraftPersistence(
|
||||
@@ -165,6 +172,8 @@ export function useDraftPersistence(
|
||||
furthestStep: m.furthestStep,
|
||||
createdAt: m.createdAt,
|
||||
updatedAt: m.updatedAt,
|
||||
status: m.status ?? null,
|
||||
jobId: m.jobId ?? null,
|
||||
})),
|
||||
);
|
||||
} catch (err) {
|
||||
@@ -457,5 +466,7 @@ export function useDraftPersistence(
|
||||
handleCommitRename,
|
||||
handleCancelRename,
|
||||
ensureDraft,
|
||||
/** 强制刷新草稿列表（如后台挂起后让「进行中」状态立刻出现）。 */
|
||||
refresh: refreshList,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
/**
|
||||
* 圆桌后台作业（roundtable job）共享类型。
|
||||
*
|
||||
* 对应 `docs/multi-agent-background-run-dev.md` §2「数据契约」。本文件只放纯类型，
|
||||
* 不含请求逻辑（后续 Phase 4 的 `api/roundtable-jobs.ts` 会引用这些类型）。
|
||||
*
|
||||
* Phase 7（派活链路流程图弹窗）只用到其中的 `JobStatus` / `JobPhase` /
|
||||
* `DispatchChainNode`，其余类型为后续阶段预留，先一并定义好避免反复改动。
|
||||
*/
|
||||
|
||||
/** 作业状态机（§2.1）。 */
|
||||
export type JobStatus =
|
||||
| "queued" // 已创建，等待 worker 拉起
|
||||
| "running" // 编排进行中（Step2 派活循环 / Step3 绘制）
|
||||
| "awaiting_input" // 命中 clarification，等用户回答（interrupt 挂起）
|
||||
| "done" // 已跑到 Step3 绘制完成
|
||||
| "error" // 出错终止
|
||||
| "cancelled"; // 用户取消
|
||||
|
||||
/** 作业阶段（§2.2）——给流程图 / 进度条用。 */
|
||||
export type JobPhase =
|
||||
| "initializing" // 建 thread / 总控就绪
|
||||
| "leader_thinking" // 总控在决策派活
|
||||
| "dispatching" // 正在顺序派活给席位（配合 activeAgentId）
|
||||
| "consensus" // 共识达成（dispatched=[]）
|
||||
| "report_drawing" // Step3 报告绘制中
|
||||
| "report_done"; // 绘制完成
|
||||
|
||||
/** 派活链路单节点状态（驱动颜色 / 动画）。 */
|
||||
export type ChainNodeState = "pending" | "active" | "done";
|
||||
|
||||
/** 派活链路节点（§2.3）——流程图核心数据。 */
|
||||
export interface DispatchChainNode {
|
||||
/** 席位 agent_id（小写）。 */
|
||||
agentId: string;
|
||||
/** 显示名。 */
|
||||
name: string;
|
||||
/** 复用 getAvatarTypeFor(agentId, order) → 决定颜色 / 头像。 */
|
||||
avatarType: string;
|
||||
/** 横向排列次序（chain 模式=链条顺序；recommend 模式=席位/发言顺序）。 */
|
||||
order: number;
|
||||
/** 节点状态。 */
|
||||
state: ChainNodeState;
|
||||
/** 最近发言轮次（可选，做 tooltip）。 */
|
||||
lastSpokeCycle?: number;
|
||||
}
|
||||
|
||||
/** 一条后台作业的完整快照（§2.5）——对齐后端 `RoundtableJobResponse`（camelCase）。 */
|
||||
export interface RoundtableJob {
|
||||
id: string;
|
||||
draftId: string | null;
|
||||
status: JobStatus;
|
||||
phase: JobPhase;
|
||||
cycle: number;
|
||||
dispatchChain: DispatchChainNode[];
|
||||
activeAgentId: string | null;
|
||||
consensusPercentage: number;
|
||||
pendingClarification: string | null;
|
||||
orchestrationMode: "recommend" | "chain";
|
||||
chain: { id: string; title: string } | null;
|
||||
error: string | null;
|
||||
createdAt: string | null;
|
||||
updatedAt: string | null;
|
||||
}
|
||||
|
||||
/** 启动一个后台作业的入参（对齐后端 `StartJobRequest`）。 */
|
||||
export interface StartJobPayload {
|
||||
draftId?: string | null;
|
||||
/** 任务意图；缺省 seedMessage 时用它作第一轮 leader prompt。 */
|
||||
intent: string;
|
||||
/** 有序席位（recommend=选择顺序 / chain=链条顺序）。 */
|
||||
agents: Array<{ agentId: string; name: string }>;
|
||||
model?: string;
|
||||
orchestrationMode?: "recommend" | "chain";
|
||||
chain?: { id: string; title: string } | null;
|
||||
/** 显式第一轮 leader prompt（覆盖 intent）。 */
|
||||
seedMessage?: string;
|
||||
/** 预建好的 thread 映射（Phase 3b 真网关用；模拟网关忽略）。 */
|
||||
threadIds?: Record<string, string> | null;
|
||||
coordinatorName?: string;
|
||||
}
|
||||
|
||||
/** 终态集合——SSE/轮询判定作业是否结束。 */
|
||||
export const TERMINAL_JOB_STATUSES: readonly JobStatus[] = ["done", "error", "cancelled"];
|
||||
|
||||
export function isTerminalJobStatus(status: JobStatus): boolean {
|
||||
return TERMINAL_JOB_STATUSES.includes(status);
|
||||
}
|
||||
|
||||
/** 归一化进度事件（§2.4）——SSE 推送。Phase 7 暂未用到，先占位。 */
|
||||
export type JobProgressEvent =
|
||||
| { type: "status"; status: JobStatus }
|
||||
| { type: "phase"; phase: JobPhase; cycle: number }
|
||||
| { type: "chain"; nodes: DispatchChainNode[] }
|
||||
| { type: "active"; agentId: string | null }
|
||||
| { type: "consensus"; percentage: number }
|
||||
| { type: "clarification"; question: string }
|
||||
| { type: "error"; detail: string };
|
||||
@@ -0,0 +1,165 @@
|
||||
/**
|
||||
* 派活链路流程图弹窗 —— 预览/自测页（Phase 7 临时入口）。
|
||||
*
|
||||
* 路由：/page/workspace/roundtable/chain-preview
|
||||
*
|
||||
* 用假数据 + 定时器模拟后台作业推进（初始化 → 总控派活 → 席位逐个发言 → 共识 →
|
||||
* 结果绘制 → 完成），驱动 `DispatchChainModal` 演示节点 / 连线的加载动画与状态流转。
|
||||
* 后续 Phase 8 接通真实 `streamJob` 后，本页可删除（连同 WorkspaceRoutes 里的路由）。
|
||||
*/
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { DispatchChainModal } from "../components/DispatchChainModal";
|
||||
import {
|
||||
DEFAULT_SELECTED_AGENTS,
|
||||
getAvatarTypeFor,
|
||||
getDisplayNameFor,
|
||||
} from "../lib/roundtable-constants";
|
||||
import type {
|
||||
DispatchChainNode,
|
||||
JobPhase,
|
||||
JobStatus,
|
||||
} from "../lib/job-types";
|
||||
import "../styles/roundtable-planning.css";
|
||||
|
||||
interface SimFrame {
|
||||
phase: JobPhase;
|
||||
status: JobStatus;
|
||||
cycle: number;
|
||||
consensus: number;
|
||||
activeAgentId: string | null;
|
||||
doneAgentIds: string[];
|
||||
}
|
||||
|
||||
const AGENTS = DEFAULT_SELECTED_AGENTS;
|
||||
|
||||
/** 预先生成一条完整的推进时间线（每帧约 1.1s）。 */
|
||||
function buildFrames(): SimFrame[] {
|
||||
const ids = AGENTS.map((a) => a.agent_id);
|
||||
const frames: SimFrame[] = [];
|
||||
|
||||
frames.push({ phase: "initializing", status: "running", cycle: 0, consensus: 0, activeAgentId: null, doneAgentIds: [] });
|
||||
frames.push({ phase: "leader_thinking", status: "running", cycle: 1, consensus: 12, activeAgentId: null, doneAgentIds: [] });
|
||||
|
||||
// 第 1 轮：逐个席位发言
|
||||
ids.forEach((id, i) => {
|
||||
frames.push({
|
||||
phase: "dispatching",
|
||||
status: "running",
|
||||
cycle: 1,
|
||||
consensus: 12 + Math.round(((i + 1) / ids.length) * 50),
|
||||
activeAgentId: id,
|
||||
doneAgentIds: ids.slice(0, i),
|
||||
});
|
||||
});
|
||||
|
||||
// 第 2 轮：总控再决策（此时第 1 轮席位都已发言）
|
||||
frames.push({ phase: "leader_thinking", status: "running", cycle: 2, consensus: 78, activeAgentId: null, doneAgentIds: [...ids] });
|
||||
// 共识达成
|
||||
frames.push({ phase: "consensus", status: "running", cycle: 2, consensus: 100, activeAgentId: null, doneAgentIds: [...ids] });
|
||||
// 结果绘制中
|
||||
frames.push({ phase: "report_drawing", status: "running", cycle: 2, consensus: 100, activeAgentId: null, doneAgentIds: [...ids] });
|
||||
// 完成
|
||||
frames.push({ phase: "report_done", status: "done", cycle: 2, consensus: 100, activeAgentId: null, doneAgentIds: [...ids] });
|
||||
|
||||
return frames;
|
||||
}
|
||||
|
||||
export default function DispatchChainPreviewPage() {
|
||||
const frames = useMemo(buildFrames, []);
|
||||
const [idx, setIdx] = useState(0);
|
||||
const [playing, setPlaying] = useState(true);
|
||||
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
|
||||
// 自动播放：逐帧推进，跑到最后一帧停 2.2s 再循环
|
||||
useEffect(() => {
|
||||
if (!playing) return;
|
||||
const isLast = idx >= frames.length - 1;
|
||||
timerRef.current = setTimeout(
|
||||
() => setIdx((i) => (i >= frames.length - 1 ? 0 : i + 1)),
|
||||
isLast ? 2200 : 1100,
|
||||
);
|
||||
return () => {
|
||||
if (timerRef.current) clearTimeout(timerRef.current);
|
||||
};
|
||||
}, [idx, playing, frames.length]);
|
||||
|
||||
const frame = frames[idx];
|
||||
|
||||
// 由当前帧推导各席位节点状态
|
||||
const nodes: DispatchChainNode[] = AGENTS.map((a, i) => {
|
||||
const state =
|
||||
frame.doneAgentIds.includes(a.agent_id)
|
||||
? "done"
|
||||
: frame.activeAgentId === a.agent_id
|
||||
? "active"
|
||||
: "pending";
|
||||
return {
|
||||
agentId: a.agent_id,
|
||||
name: getDisplayNameFor(a),
|
||||
avatarType: getAvatarTypeFor(a.agent_id, i),
|
||||
order: i + 1,
|
||||
state,
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex h-full min-h-0 flex-col items-center justify-center gap-6 bg-muted/30 p-8">
|
||||
<div className="text-center">
|
||||
<h1 className="text-lg font-bold">派活链路流程图 · 预览</h1>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
模拟后台作业推进（假数据）。帧 {idx + 1}/{frames.length} · {frame.phase}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={() => setPlaying((p) => !p)}>
|
||||
{playing ? "暂停" : "继续"}
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setIdx((i) => (i > 0 ? i - 1 : i));
|
||||
setPlaying(false);
|
||||
}}
|
||||
>
|
||||
上一帧
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setIdx((i) => (i < frames.length - 1 ? i + 1 : i));
|
||||
setPlaying(false);
|
||||
}}
|
||||
>
|
||||
下一帧
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setIdx(0);
|
||||
setPlaying(true);
|
||||
}}
|
||||
>
|
||||
重新播放
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<DispatchChainModal
|
||||
open
|
||||
onOpenChange={() => {}}
|
||||
title="新能源汽车出口策略研讨（预览）"
|
||||
status={frame.status}
|
||||
phase={frame.phase}
|
||||
cycle={frame.cycle}
|
||||
nodes={nodes}
|
||||
consensusPercentage={frame.consensus}
|
||||
onView={() => toast.info("（预览）点击「查看」→ Phase 8 会进入正在进行的任务")}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -56,6 +56,7 @@ import { useModels } from "@/core/models/hooks";
|
||||
import { getAvatar, Man1Avatar, RobotAvatar } from "@/roundtable-planning/components/Avatars";
|
||||
import { RecommendAgentsDialog } from "@/roundtable-planning/components/RecommendAgentsDialog";
|
||||
import { BusinessChainListDialog } from "@/roundtable-planning/components/BusinessChainListDialog";
|
||||
import { DispatchChainJobModal } from "@/roundtable-planning/components/DispatchChainJobModal";
|
||||
import { Step1Panel } from "@/roundtable-planning/components/Step1Panel";
|
||||
import { Step2Panel } from "@/roundtable-planning/components/Step2Panel";
|
||||
import { Step3Panel } from "@/roundtable-planning/components/Step3Panel";
|
||||
@@ -74,6 +75,7 @@ import {
|
||||
type SelectedAgent,
|
||||
} from "@/roundtable-planning/lib/roundtable-constants";
|
||||
import type { SeatSelectionResult } from "@/roundtable-planning/lib/business-chain";
|
||||
import { getJobByDraft, startJob } from "@/roundtable-planning/api/roundtable-jobs";
|
||||
|
||||
export default function RoundtablePlanningPage() {
|
||||
const { theme } = useTheme();
|
||||
@@ -88,6 +90,8 @@ export default function RoundtablePlanningPage() {
|
||||
const [isRecommendDialogOpen, setIsRecommendDialogOpen] = useState<boolean>(false);
|
||||
// 「业务链条」按钮 → 打开链条列表弹窗（弹窗里再决定进配置页 / 切到某条链条）。
|
||||
const [isChainListOpen, setIsChainListOpen] = useState<boolean>(false);
|
||||
// 历史下拉点击「进行中」任务 → 打开派活链路流程图弹窗（订阅该作业 SSE）。
|
||||
const [chainModalJobId, setChainModalJobId] = useState<string | null>(null);
|
||||
const [selectedModel, setSelectedModel] = useState<string>("");
|
||||
// Step 2 编排模式：recommend = 总控自由派活；chain = 总控按业务链条顺序派活。
|
||||
// 由推荐弹窗确认时的 SeatSelectionResult.mode 决定（见 handleConfirmAgents）。
|
||||
@@ -321,7 +325,11 @@ export default function RoundtablePlanningPage() {
|
||||
[step2, triggerToast],
|
||||
);
|
||||
|
||||
const handleStartNewTask = useCallback(() => {
|
||||
// 把页面重置回「第一步全新任务」——新建任务 + 后台挂起后都复用。
|
||||
// 注意：只清前端状态，不删后端已建的草稿 / 已挂起的后台作业（它们继续在后台跑，
|
||||
// 在历史记录里可见）。
|
||||
const resetToStep1 = useCallback(() => {
|
||||
step2.stopOrchestration();
|
||||
step2.resetStep2State();
|
||||
setOrchestrationMode("recommend");
|
||||
setChainMeta(null);
|
||||
@@ -333,8 +341,61 @@ export default function RoundtablePlanningPage() {
|
||||
// 同步触发 Step 1 init,而不是依赖 useEffect —— 已经在 Step 1 时
|
||||
// currentStep 不变,useEffect 不会 re-fire。
|
||||
step1.runStep1Init();
|
||||
}, [drafts, step1, step2]);
|
||||
|
||||
const handleStartNewTask = useCallback(() => {
|
||||
resetToStep1();
|
||||
triggerToast("✨ 已开始新任务,请在第一步与任务理解智能体澄清需求");
|
||||
}, [drafts, step1, step2, triggerToast]);
|
||||
}, [resetToStep1, triggerToast]);
|
||||
|
||||
// 「后台挂起」：把当前研讨交给后端自动跑到 Step3 结果绘制完成；模型沿用第二步选择。
|
||||
// 挂起后页面像「新建任务」一样重置回第一步（后台作业继续在历史记录里跑）。
|
||||
const handleBackgroundSuspend = useCallback(async () => {
|
||||
const agents = step2.selectedAgents.map((a) => ({ agentId: a.agent_id, name: a.name }));
|
||||
if (agents.length === 0) {
|
||||
triggerToast("⚠️ 请先选择研讨席位再后台挂起");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
// 确保后端存在对应草稿（作业按 draftId 关联，历史下拉据此显示「进行中」）。
|
||||
const draftId = await drafts.ensureDraft(2);
|
||||
// 防重复：该草稿已有在跑作业就不再新建（避免重复作业 / 前后端双跑）。
|
||||
const existing = draftId ? await getJobByDraft(draftId).catch(() => null) : null;
|
||||
const alreadyRunning =
|
||||
existing &&
|
||||
(existing.status === "running" ||
|
||||
existing.status === "awaiting_input" ||
|
||||
existing.status === "queued");
|
||||
if (!alreadyRunning) {
|
||||
await startJob({
|
||||
draftId: draftId ?? undefined,
|
||||
intent: buildInitialIntent(),
|
||||
agents,
|
||||
model: selectedModel || undefined, // 模型沿用第二步选择
|
||||
orchestrationMode,
|
||||
chain: chainMeta,
|
||||
threadIds: step2.threadIds ?? undefined,
|
||||
coordinatorName: step2.coordinatorName ?? undefined,
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
triggerToast(`❌ 后台挂起失败：${(err as Error).message}`);
|
||||
return;
|
||||
}
|
||||
// 重置回第一步（同新建任务）；后台作业在历史记录里继续跑、可点开看进度。
|
||||
resetToStep1();
|
||||
triggerToast("🚀 已转入后台，任务会自动跑到结果绘制完成；可在「历史记录」查看进度");
|
||||
void drafts.refresh();
|
||||
}, [
|
||||
step2,
|
||||
drafts,
|
||||
selectedModel,
|
||||
orchestrationMode,
|
||||
chainMeta,
|
||||
buildInitialIntent,
|
||||
resetToStep1,
|
||||
triggerToast,
|
||||
]);
|
||||
|
||||
// 本地 demo handler:继续追问 / 跳过此项 —— 不发请求,只本地 push 一条气泡。
|
||||
const handleSkipQuestion = useCallback(() => {
|
||||
@@ -390,6 +451,26 @@ export default function RoundtablePlanningPage() {
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 派活链路流程图弹窗（订阅进行中作业的真实 SSE 进度） */}
|
||||
<DispatchChainJobModal
|
||||
jobId={chainModalJobId}
|
||||
open={chainModalJobId !== null}
|
||||
onOpenChange={(o) => {
|
||||
if (!o) setChainModalJobId(null);
|
||||
}}
|
||||
onView={(job) => {
|
||||
// 「查看」：进入该任务。done → 加载草稿（含 step3）落到 Step3 看报告；
|
||||
// 进行中 / 待澄清 → 进去后置暂停态，避免前后端「双跑」同一批 thread。
|
||||
setChainModalJobId(null);
|
||||
if (!job.draftId) return;
|
||||
if (job.status === "running" || job.status === "awaiting_input") {
|
||||
step2.setIsRoundTableRunning(false);
|
||||
step2.stopOrchestration();
|
||||
}
|
||||
drafts.handleLoadDraft(job.draftId);
|
||||
}}
|
||||
/>
|
||||
|
||||
{showToast && (
|
||||
<div className="fixed top-4 left-1/2 transform -translate-x-1/2 z-50 bg-primary text-white text-xs px-4 py-2.5 rounded-xl shadow-lg border border-primary/40 font-medium flex items-center gap-2 animate-bounce">
|
||||
<Sparkles className="h-4 w-4 shrink-0" />
|
||||
@@ -483,6 +564,11 @@ export default function RoundtablePlanningPage() {
|
||||
renameDraftValue={drafts.renameDraftValue}
|
||||
setRenameDraftValue={drafts.setRenameDraftValue}
|
||||
onLoad={drafts.handleLoadDraft}
|
||||
onOpen={() => void drafts.refresh()}
|
||||
onOpenJob={(jobId) => {
|
||||
drafts.setIsHistoryOpen(false);
|
||||
setChainModalJobId(jobId);
|
||||
}}
|
||||
onDelete={drafts.handleDeleteDraft}
|
||||
onStartRename={drafts.handleStartRename}
|
||||
onCommitRename={drafts.handleCommitRename}
|
||||
@@ -593,6 +679,7 @@ export default function RoundtablePlanningPage() {
|
||||
"🎉 多角色智能体博弈共识达成，最终交付全套路线成果文档及方案图！",
|
||||
);
|
||||
}}
|
||||
onBackgroundSuspend={handleBackgroundSuspend}
|
||||
onTriggerToast={triggerToast}
|
||||
/>
|
||||
)}
|
||||
@@ -616,6 +703,8 @@ export default function RoundtablePlanningPage() {
|
||||
setStep3SavedTick((t) => t + 1);
|
||||
}}
|
||||
onReset={handleStartNewTask}
|
||||
openArtifactPreview={step2.openArtifactPreview}
|
||||
seatStubMessages={step2.seatStubMessages}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
@@ -762,6 +851,10 @@ interface HistoryDropdownProps {
|
||||
renameDraftValue: string;
|
||||
setRenameDraftValue: React.Dispatch<React.SetStateAction<string>>;
|
||||
onLoad: (id: string) => void;
|
||||
/** 下拉展开时回调（刷新列表拿最新作业状态）。 */
|
||||
onOpen?: () => void;
|
||||
/** 点击「进行中 / 待澄清」的任务 → 打开派活链路流程图弹窗。 */
|
||||
onOpenJob: (jobId: string) => void;
|
||||
onDelete: (id: string) => void;
|
||||
onStartRename: (d: ReturnType<typeof useDraftPersistence>["drafts"][number]) => void;
|
||||
onCommitRename: (id: string) => void;
|
||||
@@ -779,6 +872,8 @@ function HistoryDropdown(props: HistoryDropdownProps) {
|
||||
renameDraftValue,
|
||||
setRenameDraftValue,
|
||||
onLoad,
|
||||
onOpen,
|
||||
onOpenJob,
|
||||
onDelete,
|
||||
onStartRename,
|
||||
onCommitRename,
|
||||
@@ -790,7 +885,13 @@ function HistoryDropdown(props: HistoryDropdownProps) {
|
||||
<button
|
||||
id="history-dropdown-btn"
|
||||
type="button"
|
||||
onClick={() => setIsOpen((open) => !open)}
|
||||
onClick={() =>
|
||||
setIsOpen((open) => {
|
||||
const next = !open;
|
||||
if (next) onOpen?.();
|
||||
return next;
|
||||
})
|
||||
}
|
||||
className="bg-white hover:bg-slate-50 border border-[#e2e8f0] text-[#334155] text-xs font-bold px-3 py-2 rounded-xl flex items-center gap-1.5 transition dark:border-border dark:bg-secondary dark:text-foreground dark:hover:bg-accent"
|
||||
>
|
||||
<History className="w-3.5 h-3.5 text-slate-500" />
|
||||
@@ -815,6 +916,11 @@ function HistoryDropdown(props: HistoryDropdownProps) {
|
||||
{drafts.map((d) => {
|
||||
const isCurrent = d.id === currentDraftId;
|
||||
const isRenaming = d.id === renamingDraftId;
|
||||
// 「进行中 / 待澄清」且有 jobId → 点击打开流程图弹窗，而非加载草稿。
|
||||
const isActiveJob =
|
||||
(d.status === "running" || d.status === "awaiting_input") && !!d.jobId;
|
||||
const openOrLoad = () =>
|
||||
isActiveJob && d.jobId ? onOpenJob(d.jobId) : onLoad(d.id);
|
||||
return (
|
||||
<li key={d.id} className={`px-3 py-2.5 ${isCurrent ? "bg-emerald-50/40" : ""}`}>
|
||||
<div className="flex items-start gap-2">
|
||||
@@ -835,15 +941,30 @@ function HistoryDropdown(props: HistoryDropdownProps) {
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onLoad(d.id)}
|
||||
onClick={openOrLoad}
|
||||
className="block w-full text-left"
|
||||
title="点击加载"
|
||||
title={isActiveJob ? "点击查看进度" : "点击加载"}
|
||||
>
|
||||
<span className="text-[11.5px] font-semibold text-slate-800 line-clamp-2 dark:text-foreground">
|
||||
{d.name}
|
||||
</span>
|
||||
<span className="text-[10px] text-slate-400 mt-0.5 block font-mono">
|
||||
Step {d.furthestStep} ·{" "}
|
||||
<span className="text-[10px] text-slate-400 mt-0.5 flex items-center gap-1 font-mono">
|
||||
{d.status === "running" ? (
|
||||
<span className="inline-flex items-center gap-1 text-primary font-semibold">
|
||||
<Loader2 className="w-3 h-3 animate-spin" />
|
||||
进行中
|
||||
</span>
|
||||
) : d.status === "awaiting_input" ? (
|
||||
<span className="inline-flex items-center gap-1 text-amber-500 font-semibold">
|
||||
<span className="inline-block w-1.5 h-1.5 rounded-full bg-amber-400 animate-pulse" />
|
||||
待澄清
|
||||
</span>
|
||||
) : d.status === "error" ? (
|
||||
<span className="text-rose-500 font-semibold">出错</span>
|
||||
) : (
|
||||
<span>Step {d.furthestStep}</span>
|
||||
)}
|
||||
<span className="text-slate-300">·</span>
|
||||
{new Date(d.updatedAt).toLocaleString("zh-CN", { hour12: false })}
|
||||
</span>
|
||||
</button>
|
||||
@@ -854,11 +975,15 @@ function HistoryDropdown(props: HistoryDropdownProps) {
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onLoad(d.id)}
|
||||
onClick={openOrLoad}
|
||||
className="p-1 text-slate-500 hover:text-primary hover:bg-slate-100 rounded transition"
|
||||
title="加载"
|
||||
title={isActiveJob ? "查看进度" : "加载"}
|
||||
>
|
||||
<Upload className="w-3.5 h-3.5" />
|
||||
{isActiveJob ? (
|
||||
<Activity className="w-3.5 h-3.5 text-primary" />
|
||||
) : (
|
||||
<Upload className="w-3.5 h-3.5" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
|
||||
@@ -360,6 +360,50 @@
|
||||
color: var(--foreground) !important;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
* 派活链路流程图连接线（DispatchChainModal）。
|
||||
*
|
||||
* 弹窗经 Radix Dialog portal 到 <body>，**不在** .roundtable-planning 作用域内，
|
||||
* 因此这些类必须是**全局**（无作用域前缀），并用语义 token（--primary/--border）
|
||||
* 自适应明暗。连线三态：pending(灰虚线静止) / done(主色实线) / active(主色流动虚线)。
|
||||
* ========================================================================== */
|
||||
@keyframes rt-chain-flow {
|
||||
to {
|
||||
background-position: 18px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.rt-chain-connector {
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
border-radius: 9999px;
|
||||
/* 默认（pending）：灰色等距虚线 */
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
var(--border) 45%,
|
||||
transparent 45%
|
||||
);
|
||||
background-size: 12px 100%;
|
||||
background-repeat: repeat-x;
|
||||
}
|
||||
|
||||
.rt-chain-connector--done {
|
||||
background-image: none;
|
||||
background-color: var(--primary);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.rt-chain-connector--active {
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
var(--primary) 45%,
|
||||
transparent 45%
|
||||
);
|
||||
background-size: 18px 100%;
|
||||
background-repeat: repeat-x;
|
||||
animation: rt-chain-flow 0.55s linear infinite;
|
||||
}
|
||||
|
||||
/* Custom elegant scrollbar styling */
|
||||
::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
|
||||
Reference in new issue
Block a user