Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
428588f1c4 | ||
|
|
1a080311bd | ||
|
|
ddf83f7728 | ||
|
|
d93cc62806 | ||
|
|
4fcd96af29 | ||
|
|
99642fca6c | ||
|
|
df408831e5 | ||
|
|
e939dc4548 | ||
|
|
1ffead7ee2 | ||
|
|
889a97a04d | ||
|
|
a55992e31c | ||
|
|
f82363d81f | ||
|
|
21c4c898e7 | ||
|
|
bd4131b4e2 | ||
|
|
e690475e6e | ||
|
|
a0a75a9964 | ||
|
|
37964d1f95 | ||
|
|
a9d66536c3 | ||
|
|
a968c3b5cd | ||
|
|
e52261fc3d | ||
|
|
4450f342d8 | ||
|
|
213dd841b5 | ||
|
|
816c46d447 | ||
|
|
db857ddd4d | ||
|
|
9be0c6555f | ||
|
|
e475c37f1d | ||
|
|
d86c9d48a6 | ||
|
|
008c9ede6e | ||
|
|
151ecceb85 | ||
|
|
1555d5344b | ||
|
|
bd8ec41914 | ||
|
|
1e21e559fb | ||
|
|
e496221dc3 | ||
|
|
5bf3955b26 | ||
|
|
1ab3329f6d | ||
|
|
e70bb4aa6f | ||
|
|
b22d0200c3 | ||
|
|
fb73ae0471 | ||
|
|
75aad4eef6 | ||
|
|
cec2996861 | ||
|
|
239b798c5d | ||
|
|
f1e53ef5c0 | ||
|
|
a368037e81 | ||
|
|
59f2f56124 | ||
|
|
3779bb69ef | ||
|
|
25153dbd84 | ||
|
|
91ba47bf47 | ||
|
|
28bf1ac7b2 | ||
|
|
45df500a9c | ||
|
|
f32de510fe | ||
|
|
21722b9f5a | ||
|
|
f49def09ea | ||
|
|
4948a80c56 | ||
|
|
7d249a81ce | ||
|
|
1d07025f74 | ||
|
|
91c5d43c48 | ||
|
|
b60d9ed09e | ||
|
|
56740ecf56 | ||
|
|
9f788e37de | ||
|
|
0634337858 | ||
|
|
08ce3dda73 | ||
|
|
c8f69781e4 | ||
|
|
13bfa719ee | ||
|
|
359bd28f2c | ||
|
|
7bd032ec77 | ||
|
|
790267ac43 | ||
|
|
d9844e0180 | ||
|
|
6ade3b69b9 | ||
|
|
ae184f434d | ||
|
|
055523bf33 | ||
|
|
866bc0f8d8 | ||
|
|
1bc203b5cd | ||
|
|
1cd99a5a90 | ||
|
|
2ca8a23102 | ||
|
|
97ce19973d | ||
|
|
783774d3f3 | ||
|
|
85e119db08 | ||
|
|
5436719bfb | ||
|
|
e571caaf2c | ||
|
|
5d2997b6a0 | ||
|
|
f8cb7be18c | ||
|
|
b93b82fcaf | ||
|
|
d0b4832ed7 | ||
|
|
4ffd5a3c94 | ||
|
|
2d6992d656 | ||
|
|
bb7291a97c | ||
|
|
a699545c4c | ||
|
|
2c331aa744 | ||
|
|
82dd9fb08f | ||
|
|
b97aa77adc | ||
|
|
d7d101814f | ||
|
|
871d98e6f2 | ||
|
|
3cd093a8a2 | ||
|
|
4a59da7ff0 | ||
|
|
d7ad0624b7 | ||
|
|
27e6b0b23e | ||
|
|
55b5c2cc9f | ||
|
|
d5d5199f6d | ||
|
|
0bd0ac41cd | ||
|
|
b1c396717b | ||
|
|
388a9133fc | ||
|
|
221e947488 | ||
|
|
a1c63a1fe5 | ||
|
|
db2f21191c | ||
|
|
195ef3ee40 | ||
|
|
f3511e5cd0 | ||
|
|
96947d7636 | ||
|
|
034a379ecd | ||
|
|
da856f2b58 | ||
|
|
845c87e3ee | ||
|
|
7d9c0894f8 | ||
|
|
ae30a20739 | ||
|
|
7e7d3c9846 | ||
|
|
daff70c34f | ||
|
|
94188db9ea | ||
|
|
b12497898a | ||
|
|
3e51208024 | ||
|
|
36a3851233 | ||
|
|
54190d7a83 | ||
|
|
2215ec3c49 | ||
|
|
d21dbeb214 | ||
|
|
ba0c32dcee | ||
|
|
f5efe9b041 | ||
|
|
a4a44e1154 | ||
|
|
cef08638af | ||
|
|
025e43f4c5 | ||
|
|
fa04ab8b5a | ||
|
|
f3e5a3bb35 | ||
|
|
0547fb1715 | ||
|
|
bb6b9bd84b | ||
|
|
f485d4fff3 | ||
|
|
4bfaeb728b | ||
|
|
2b0ba2a68b | ||
|
|
c8cdd1d0b2 | ||
|
|
8fbfd35296 | ||
|
|
dfb745a5e4 | ||
|
|
c23350f17b | ||
|
|
124eb04a6b | ||
|
|
b4206d6421 | ||
|
|
537e2e4d06 | ||
|
|
9268c73776 | ||
|
|
6378cd33bd | ||
|
|
8c6d08d6bf | ||
|
|
29082b349d | ||
|
|
7d8656bfde | ||
|
|
45ce14e15a | ||
|
|
8947223255 | ||
|
|
5a420189b1 | ||
|
|
17650afe96 | ||
|
|
80fce34c1a | ||
|
|
ae31c50424 | ||
|
|
794aab1007 | ||
|
|
be06cac223 | ||
|
|
b0db8cc3d8 | ||
|
|
0dab5a8121 | ||
|
|
c012146c18 | ||
|
|
6851c96a45 | ||
|
|
f75f4f9db1 | ||
|
|
f22a6a9957 | ||
|
|
210cb5117f | ||
|
|
0c663f5f7c | ||
|
|
75e8a90ac7 | ||
|
|
d8af6c8f48 | ||
|
|
1ab4216ccb | ||
|
|
d39b58255d | ||
|
|
cd2ca406a5 | ||
|
|
637be00946 | ||
|
|
0dd93421c4 | ||
|
|
e27321cb23 | ||
|
|
6157b42f5a | ||
|
|
be4b180d92 | ||
|
|
e9e4c181b9 | ||
|
|
eb61b332a2 | ||
|
|
4fce6f9104 | ||
|
|
bcd656fb49 | ||
|
|
2d3033434b | ||
|
|
d522498cc9 | ||
|
|
65449ffd71 | ||
|
|
006c5bc4c1 | ||
|
|
a046d19ce1 | ||
|
|
aca089e8ef | ||
|
|
24eb629773 | ||
|
|
1847eb9d6a | ||
|
|
44d7304f8e | ||
|
|
5de74e90dc | ||
|
|
6fdca41a1d | ||
|
|
c978a25b7f | ||
|
|
c11307aa67 | ||
|
|
199269712f | ||
|
|
9572b66ecb | ||
|
|
45315f18d2 | ||
|
|
e889cc25cf | ||
|
|
8385d1913a | ||
|
|
9f462beec5 | ||
|
|
4f0c75e76e | ||
|
|
2097587b42 | ||
|
|
53af352ce8 | ||
|
|
0089af94d3 | ||
|
|
26ab6f663c | ||
|
|
bce0abba6e | ||
|
|
c732fd75e4 | ||
|
|
89232d7521 | ||
|
|
9ef8b1990e | ||
|
|
26f8010a57 | ||
|
|
abf97cdc78 | ||
|
|
4d10590511 | ||
|
|
3d60651491 | ||
|
|
a400989f64 | ||
|
|
2a1f50f726 | ||
|
|
158d157af4 | ||
|
|
1ed004fbb1 | ||
|
|
38f98cdf5c | ||
|
|
a417124c21 | ||
|
|
f3f11461de | ||
|
|
2e79cee24a | ||
|
|
1fd997303e | ||
|
|
cc017a22c7 | ||
|
|
5f01e8dd03 | ||
|
|
ce69905950 | ||
|
|
71e7b9dd63 | ||
|
|
58357547c9 | ||
|
|
fe7c6cb8f7 | ||
|
|
dc5b83e8cd | ||
|
|
27fffbec61 | ||
|
|
d35d121261 | ||
|
|
368673c3b4 | ||
|
|
854de9b43c | ||
|
|
0aa55eb333 | ||
|
|
1d1ab384ef | ||
|
|
864224e07c | ||
|
|
04b38a4a25 | ||
|
|
f8b40353ef | ||
|
|
893f1e6933 | ||
|
|
04e6d0aa00 | ||
|
|
1d6659f9e7 | ||
|
|
a4a67c1a00 | ||
|
|
8f773d3f1b | ||
|
|
c0305c9269 | ||
|
|
6989dd45f1 | ||
|
|
d8b43e7579 | ||
|
|
4f68235c94 | ||
|
|
c1143564ef | ||
|
|
ea2ea9783e | ||
|
|
e3e93712b6 | ||
|
|
afb78a6943 | ||
|
|
1a127ef602 | ||
|
|
acc29c8121 | ||
|
|
ca31490241 | ||
|
|
6c42f86e30 | ||
|
|
5b818836d7 | ||
|
|
3ea8e73389 | ||
|
|
c117e296cb | ||
|
|
42f55251f2 | ||
|
|
304e1b637a | ||
|
|
49173d9c28 | ||
|
|
8678ceb422 | ||
|
|
31cd19aabb | ||
|
|
60029ae3dc | ||
|
|
4f62703477 | ||
|
|
c0af23aefe | ||
|
|
6a6195f883 | ||
|
|
1a87077642 | ||
|
|
e9c8d1cea2 | ||
|
|
d2c76100f2 | ||
|
|
6aff165d09 | ||
|
|
5ecf28e60c | ||
|
|
fb103b6ad9 | ||
|
|
71a865dc0c | ||
|
|
8ed54448c2 | ||
|
|
5a2441cc9f | ||
|
|
089d3e171f | ||
|
|
ed71df1b60 | ||
|
|
85cd2c888e | ||
|
|
6673121f3f | ||
|
|
4898ea0a85 | ||
|
|
7d9a0637ca | ||
|
|
ba885ca201 | ||
|
|
ec60b77a71 | ||
|
|
ae3788a87d | ||
|
|
3e68260afa | ||
|
|
f551c7af9b | ||
|
|
b1ef4ccb1a | ||
|
|
e3631a9fd6 | ||
|
|
8241f8dd6b | ||
|
|
3d2cc9e5cd | ||
|
|
e263d86fc3 | ||
|
|
151384b26d | ||
|
|
030ede6887 | ||
|
|
e6ca2bf64f | ||
|
|
47cff9e2f9 | ||
|
|
6742346eb4 | ||
|
|
b5e682cfd2 | ||
|
|
2193c4484b | ||
|
|
4fc3d7dae2 | ||
|
|
6f0f9fb1fc | ||
|
|
df9c59e21c | ||
|
|
6131eda219 | ||
|
|
14082b3e7b | ||
|
|
00181ebde8 | ||
|
|
320f2ef814 | ||
|
|
8b022bffc5 | ||
|
|
5fddb08e04 | ||
|
|
0fedb6ffd8 | ||
|
|
498e3c6a84 | ||
|
|
85aa242fd5 | ||
|
|
6f94a40303 | ||
|
|
34893007a7 | ||
|
|
053d3e300e | ||
|
|
a1fbfaf864 | ||
|
|
b8c78ba06e | ||
|
|
cd33aaeded | ||
|
|
5aa66fc07d | ||
|
|
23d170cde1 | ||
|
|
d2be3b206d | ||
|
|
1a2ef0a537 | ||
|
|
ce3a5b6bf9 | ||
|
|
91a6183757 | ||
|
|
076cdc746e | ||
|
|
1c2e524b28 | ||
|
|
42ce20b4df | ||
|
|
1cbc0e2dd6 | ||
|
|
fc632f26e9 | ||
|
|
adabfa2fe3 | ||
|
|
ec56fa671b | ||
|
|
f144a59c97 | ||
|
|
dd942cdd60 | ||
|
|
fbec222eb4 | ||
|
|
7c55a577ad | ||
|
|
57ffe1a706 | ||
|
|
06b169d7a1 | ||
|
|
7487395e44 | ||
|
|
26557b30a0 | ||
|
|
f8228847ab | ||
|
|
6b480fdbe9 | ||
|
|
0a456e9146 | ||
|
|
b59cbd51d9 | ||
|
|
23743ee193 | ||
|
|
7748661963 | ||
|
|
e28277b21b | ||
|
|
32476c7ad4 | ||
|
|
16ba5deb0e | ||
|
|
2b6424b3ff | ||
|
|
79f1a004a0 | ||
|
|
548cfd1719 | ||
|
|
7d32b41e90 |
No files matched your search
@@ -0,0 +1,35 @@
|
|||||||
|
# Never send source-control history, local dependencies, runtime state, or
|
||||||
|
# credentials to the Docker daemon. The offline images are built from the
|
||||||
|
# repository root by deploy/1panel-offline/Dockerfile.*.
|
||||||
|
.git
|
||||||
|
.runtime
|
||||||
|
.history
|
||||||
|
tmp
|
||||||
|
dist
|
||||||
|
|
||||||
|
# Credentials and environment-specific configuration are supplied at runtime
|
||||||
|
# through the offline delivery package, never copied into an image layer.
|
||||||
|
**/.env
|
||||||
|
**/.env.*
|
||||||
|
offline-backend-20260512/backend/.deer-flow
|
||||||
|
offline-backend-20260512/backend/logs
|
||||||
|
offline-backend-20260512/backend/docker-data
|
||||||
|
offline-backend-20260512/backend/dist
|
||||||
|
offline-backend-20260512/backend/wheelhouse
|
||||||
|
offline-backend-20260512/backend/offline-wheels
|
||||||
|
offline-backend-20260512/backend/.venv
|
||||||
|
offline-backend-20260512/backend/.pytest_cache
|
||||||
|
offline-backend-20260512/backend/.ruff_cache
|
||||||
|
|
||||||
|
# Reproducibly install frontend dependencies inside the image instead.
|
||||||
|
frontend-web/node_modules
|
||||||
|
frontend-web/dist
|
||||||
|
frontend-web/.vite
|
||||||
|
frontend-web/.offline-pack-build
|
||||||
|
frontend-web/.offline-extract-test
|
||||||
|
frontend-web/node_modules-offline-*.tar.gz
|
||||||
|
|
||||||
|
# Editor and operating-system metadata.
|
||||||
|
**/__pycache__
|
||||||
|
**/*.py[cod]
|
||||||
|
**/.DS_Store
|
||||||
@@ -81,6 +81,9 @@ skills/
|
|||||||
hermes-agent-main/
|
hermes-agent-main/
|
||||||
.gitignore
|
.gitignore
|
||||||
offline-backend-20260512/backend/tests/*
|
offline-backend-20260512/backend/tests/*
|
||||||
|
# MAF roundtable tests must be tracked (excepted from the broad tests/* ignore above)
|
||||||
|
!offline-backend-20260512/backend/tests/test_maf_*.py
|
||||||
|
!offline-backend-20260512/backend/tests/maf_test_helpers.py
|
||||||
deploy
|
deploy
|
||||||
.history
|
.history
|
||||||
|
|
||||||
@@ -90,12 +93,13 @@ git-clone/
|
|||||||
# Repo-root offline dependency pack (local only)
|
# Repo-root offline dependency pack (local only)
|
||||||
/dist/
|
/dist/
|
||||||
|
|
||||||
# Frontend offline pack working directories
|
# Frontend offline pack working directories
|
||||||
frontend-web/.offline-pack-build/
|
frontend-web/.offline-pack-build/
|
||||||
frontend-web/.offline-extract-test/
|
frontend-web/.offline-extract-test/
|
||||||
|
frontend-web-node_modules-offline-*.tar.gz
|
||||||
.codegraph
|
|
||||||
codegraph.mdc
|
.codegraph
|
||||||
|
codegraph.mdc
|
||||||
|
|
||||||
docs/aidev-docs
|
docs/aidev-docs
|
||||||
docs/backups
|
docs/backups
|
||||||
@@ -105,5 +109,11 @@ docs/backups
|
|||||||
# uv lockfile (not tracked per project preference)
|
# uv lockfile (not tracked per project preference)
|
||||||
offline-backend-20260512/backend/uv.lock
|
offline-backend-20260512/backend/uv.lock
|
||||||
|
|
||||||
|
# Local-only scratch directory (not committed)
|
||||||
|
0622/
|
||||||
|
|
||||||
|
# Python bytecode cache
|
||||||
|
__pycache__/
|
||||||
|
|
||||||
# misc
|
# misc
|
||||||
.DS_Store
|
.DS_Store
|
||||||
@@ -0,0 +1,122 @@
|
|||||||
|
# MAF 多智能体会商 Phase-4 前端实施计划
|
||||||
|
|
||||||
|
## 决策回顾(已与用户确认)
|
||||||
|
- **入口**:独立顶级菜单 `/page/maf/*`,新增侧边栏一级项「MAF 会商」
|
||||||
|
- **实时更新**:纯前端轮询,`GET /runs/{id}/events?after_seq=N&limit=1000`,间隔 1.8s,复用现有后端,零 SSE、零后端改动
|
||||||
|
- **流程图**:要。基于 `confirmed_facts`(来自 `run.maf_checkpoint.fact_ledger`)+ 末轮 `final_result.content` 解析的 `flow-json`,复用 `@xyflow/react` + `flow-graph.ts` + `FlowGraphPanel`
|
||||||
|
- **审批**:卡片式,仿 `IntentClarificationCard` 的视觉/交互模式(参数摘要 + 批准/拒绝按钮 + 备注 textarea),落到 `POST /approvals/{id}/decision`
|
||||||
|
|
||||||
|
## 关键数据契约(已核实后端源码)
|
||||||
|
- **后端只读**:16 个端点全部命中,无改动。`GET /health` 返回 `enabled` 决定页面内容(入口仍可见,未启用时显示空态)。
|
||||||
|
- **事件流**:单调 `(run_id, seq)`,`GET /events?after_seq=N` 返回 `{events:[...], latest_seq}`;前端推进 `after_seq=latest_seq`。payload 已在后端**写入时脱敏**(`sanitize_payload`),前端直接渲染。
|
||||||
|
- **事件分类**(`event_normalizer.py`):`run.started/completed/failed/cancelled`、`agent.turn_started/message.delta/message.completed`、`tool.requested/started/completed/failed`、`skill.started/completed/failed/selected`、`artifact.created`、`action.waiting_approval/approved/rejected`、`workflow.checkpointed`。
|
||||||
|
- **事实账本**(`fact_ledger.empty_ledger`):`candidate_facts`/`confirmed_facts`/`evidence`/`tool_results`/`executed_actions`/`pending_actions`/`failed_or_unknown_actions`/`conflicts`。`confirmed_facts` 条目含 `{candidate_id, text, agent_id, confirmed_by, evidence_refs[]}`。
|
||||||
|
- **Run 字段**(`run_to_dict`):`id, session_id, status, maf_checkpoint(含 fact_ledger + final_result + seat_outcomes), last_event_seq, started_at, finished_at, error_code, error_message_safe, token_usage, latency_ms`。
|
||||||
|
- **终态判定**:`runIsLive(status) = ["pending","running","waiting_approval","cancelling","cancel_failed"].includes(status)`,非 live 即停轮询。
|
||||||
|
- **Action/Approval**:`GET /runs/{id}/actions`、`GET /runs/{id}/approvals`;`POST /approvals/{id}/decision` `{decision:"approved"|"rejected"}`。
|
||||||
|
|
||||||
|
## 复用清单(已定位到文件:行)
|
||||||
|
- `apiFetch`(`core/api/fetch-client.ts`):内部自动注入 `Authorization`(`getAuthorizationHeaderValue()`)+ `credentials:"include"`,**返回 Response 不解析、不拼 URL**。调用方拼 `${getBackendBaseURL()}/api/maf-roundtable/...`,自行 `res.ok` 检查 + `res.json()`。
|
||||||
|
- `getBackendBaseURL`(`core/config/index.ts`):未设时返回 `""`,相对路径同源可用。
|
||||||
|
- TanStack Query 模式(`strategy-components/api/task-buttons.ts`):`useQuery`+`refetchOnWindowFocus:false`;`useMutation`+`onSuccess invalidate`;queryKey 用嵌套数组 `["maf-roundtable", runId, "events"]`。
|
||||||
|
- 轮询模式(`core/scheduled-tasks/hooks.ts:105-115`):函数式 `refetchInterval: (query) => runIsLive(query.state.data?.status) ? ms : false`。
|
||||||
|
- `FlowGraphPanel`(`roundtable-planning/components/FlowGraphPanel.tsx`):props `{data: FlowGraphData, streaming, onClose, ...}`,自动 `useTheme()` 取明暗。`FlowGraphData = {title, nodes:[{id,label,type,detail?,group?}], edges:[{from,to,label?}]}`。`extractFlowGraph(text)`(`flow-graph.ts:263`)容错解析 ```flow-json``` 代码块(含半截 JSON)。
|
||||||
|
- `IntentClarificationCard`(`roundtable-planning/components/IntentClarificationCard.tsx`):卡片视觉模板(`rounded-xl border-red-100` + 「需要确认」徽标 + 选项按钮 + textarea + 提交)。
|
||||||
|
- 时间线 feed(`roundtable-planning/components/Step1Panel.tsx` + `MessageBubble` + `useAutoScroll` + `ScrollToBottomButton`):数组入、按 seq 序渲染。
|
||||||
|
- `useDesensitizeSubtree`(`roundtable-planning/lib/use-desensitize-subtree.ts`):仅挂 header/面板框架;时间线 body 不挂(payload 已脱敏 + hook 自身警告勿用于消息列表)。
|
||||||
|
- 路由(`pages/PageRoutes.tsx:143-169`):`<Route path="maf/*" element={<MafRoutes/>}/>`(仿 `RoundtableRoutes.tsx`)。
|
||||||
|
- 菜单(`core/page-layout/sidebar-menu.ts`):在 `sidebarMenuItems` 数组加一级项,`icon` 用 lucide 组件(非字符串 key)。新节点经 `use-sidebar-menu.ts` 自动走 static→inject→override→role→desensitize 流水线,无需额外注册。
|
||||||
|
|
||||||
|
## 文件夹结构(镜像 `roundtable-planning/`,全新 `src/maf-roundtable/`)
|
||||||
|
```
|
||||||
|
frontend-web/src/maf-roundtable/
|
||||||
|
├── api/
|
||||||
|
│ ├── types.ts # TS 类型(snake_case 直传,后端即 snake_case)
|
||||||
|
│ ├── client.ts # BASE()=getBackendBaseURL()+"/api/maf-roundtable";apiFetch 封装 + readJson<T>/parseDetail
|
||||||
|
│ ├── sessions.ts # 会话 CRUD hooks(list/get/create/update/delete)
|
||||||
|
│ ├── runs.ts # run hooks(get/list/create/cancel/resume/recover)+ useMafHealth
|
||||||
|
│ ├── events.ts # listEvents(runId, afterSeq) 原始 fetch(供轮询 hook 用)
|
||||||
|
│ └── approvals.ts # 审批 hooks(list + decide mutation)
|
||||||
|
├── hooks/
|
||||||
|
│ ├── use-maf-run-status.ts # GET /runs/{id} useQuery,函数式 refetchInterval 停终态
|
||||||
|
│ └── use-maf-events.ts # ★ cursor 轮询 hook(核心)
|
||||||
|
├── lib/
|
||||||
|
│ ├── event-timeline.ts # 纯函数:events[] → TimelineEntry[](delta 聚合、tool 生命周期折叠、approval 锚点)
|
||||||
|
│ └── fact-flow-graph.ts # 纯函数:confirmed_facts+evidence → FlowGraphData
|
||||||
|
├── components/
|
||||||
|
│ ├── MafRunHeader.tsx # 状态徽标 + token/延迟 + 取消/恢复/重试
|
||||||
|
│ ├── MafEventTimeline.tsx # 时间线 feed(MessageBubble + useAutoScroll)
|
||||||
|
│ ├── MafSeatStatusPanel.tsx # 席位状态矩阵 + execution_stage 徽标
|
||||||
|
│ ├── MafFactFlowPanel.tsx # 包一层 FlowGraphPanel,数据来自 fact-flow-graph
|
||||||
|
│ ├── MafApprovalCard.tsx # 卡片式审批(批准/拒绝 + 备注)
|
||||||
|
│ └── MafHealthGate.tsx # health.enabled=false → 空态
|
||||||
|
├── pages/
|
||||||
|
│ ├── MafSessionsPage.tsx # 会话列表 + 新建
|
||||||
|
│ └── MafRunDetailPage.tsx # 单 run 工作区(三栏)
|
||||||
|
└── index.ts
|
||||||
|
```
|
||||||
|
|
||||||
|
## 核心:cursor 轮询 hook(`hooks/use-maf-events.ts`)
|
||||||
|
不用纯 `useQuery+refetchInterval`:cursor `after_seq` 需每次推进,queryFn 不持有「上次 latest_seq」,塞 queryKey 会抖动。**用自定义 hook**(结合 scheduled-tasks 的 refetchInterval 思路 + roundtable-planning 的 reader-loop 家族):
|
||||||
|
```ts
|
||||||
|
export function useMafEvents(runId?: string, active=false) {
|
||||||
|
const [events, setEvents] = useState<MafEvent[]>([]);
|
||||||
|
const afterSeqRef = useRef(0); // 避免 setInterval 闭包旧值
|
||||||
|
useEffect(() => {
|
||||||
|
if (!runId || !active) return;
|
||||||
|
let cancelled = false;
|
||||||
|
const poll = async () => {
|
||||||
|
const res = await listEvents(runId, afterSeqRef.current);
|
||||||
|
if (cancelled || !res.events.length) return;
|
||||||
|
setEvents(prev => mergeBySeq(prev, res.events)); // seq 去重
|
||||||
|
afterSeqRef.current = res.latest_seq;
|
||||||
|
};
|
||||||
|
poll(); // 进入即补拉(after_seq=0 全量历史)
|
||||||
|
const id = setInterval(poll, 1800);
|
||||||
|
return () => { cancelled = true; clearInterval(id); };
|
||||||
|
}, [runId, active]);
|
||||||
|
return events;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
- **补拉历史**:进入页面 `after_seq=0` 立即拉全部已落库事件 → 天然支持断线补拉/刷新恢复。
|
||||||
|
- **终态停止**:`active` 由 `useMafRunStatus` 的 `runIsLive(status)` 传入,终态时 effect 清理 interval。
|
||||||
|
- **去重**:后端 `(run_id,seq)` + `source_event_id` 双重去重,前端再按 `seq` 做 `mergeBySeq`,幂等。
|
||||||
|
- **切换 run**:`runId` 变 → effect 重置(events 清空、afterSeq 归零)。
|
||||||
|
|
||||||
|
## 流程图数据流(`lib/fact-flow-graph.ts`)
|
||||||
|
两源按优先级合并 → `FlowGraphData`:
|
||||||
|
1. **`confirmed_facts`(主)**:每条已确认事实 → `task` 节点(label=text 截断、detail=全文、group=confirmed_by);`evidence_refs` 连到 `evidence`(→ `role`)或 `tool_results`(`tool:{name}:{turn}` → `deliverable`)节点;证据根用 `start`。
|
||||||
|
2. **`final_result.content` 的 ```flow-json```(次)**:用现成 `extractFlowGraph(text)` 解析叠加为「结论流程图」。
|
||||||
|
|
||||||
|
输出喂 `<FlowGraphPanel data={...} streaming={!terminal}/>`(非终态蚂蚁线动)。两源皆空 → 空态「尚无可绘制事实」。
|
||||||
|
|
||||||
|
## 页面布局(`MafRunDetailPage`,三栏 / 窄屏堆叠)
|
||||||
|
- **左:时间线**(`MafEventTimeline`)—— `event-timeline.ts` 折叠成可读条目(delta 聚合气泡、tool 折叠「调用 X→完成」、action.waiting_approval 插锚点),复用 MessageBubble + useAutoScroll + ScrollToBottomButton。
|
||||||
|
- **中上:席位状态**(`MafSeatStatusPanel`)—— `maf_checkpoint.seat_outcomes` 的 agent × status 矩阵 + `execution_stage` 徽标。
|
||||||
|
- **中下:事实/结论流程图**(`MafFactFlowPanel`)—— 折叠面板,默认展开。
|
||||||
|
- **右:审批卡片**(`MafApprovalCard` 列表)—— 仅 pending 时显示;含工具名、参数摘要(脱敏)、批准/拒绝按钮 + 备注 textarea → `POST /approvals/{id}/decision`,成功后 invalidate `["maf-roundtable","approvals",runId]`,事件轮询自然看到 `action.approved/rejected`。
|
||||||
|
|
||||||
|
## 路由 + 菜单接入(3 处)
|
||||||
|
1. **新建** `pages/MafRoutes.tsx`(仿 `RoundtableRoutes.tsx`):`index→MafSessionsPage`、`runs/:runId→MafRunDetailPage`、`*→重定向`。
|
||||||
|
2. **改** `pages/PageRoutes.tsx`:加 `import MafRoutes` + `<Route path="maf/*" element={<MafRoutes/>}/>`(插 `notebook` 后)。
|
||||||
|
3. **改** `core/page-layout/sidebar-menu.ts`:数组末尾加 `{ id:"maf-center", label:"MAF 会商", icon:Network, children:[{id:"maf-roundtable", label:"会商列表", icon:MessageSquareText, path:"/page/maf"}] }`。**不加 `adminOnly`**(全员可见;`/health.enabled=false` 由 `MafHealthGate` 客户端控制页面空态)。
|
||||||
|
|
||||||
|
## 实施顺序
|
||||||
|
1. `api/types.ts` + `api/client.ts`(地基)
|
||||||
|
2. `api/{sessions,runs,events,approvals}.ts`(端点 hook)
|
||||||
|
3. `hooks/{use-maf-run-status,use-maf-events}.ts`(轮询核心)
|
||||||
|
4. `lib/{event-timeline,fact-flow-graph}.ts`(纯函数)
|
||||||
|
5. `components/*`(6 个组件)
|
||||||
|
6. `pages/*`(2 个页面)+ `index.ts`
|
||||||
|
7. `pages/MafRoutes.tsx` + 接入 `PageRoutes.tsx` + `sidebar-menu.ts`
|
||||||
|
8. `pnpm typecheck` + 手动核对路由/菜单显隐
|
||||||
|
|
||||||
|
## 文件清单
|
||||||
|
- **新建**(14):`maf-roundtable/api/{types,client,sessions,runs,events,approvals}.ts`、`maf-roundtable/hooks/{use-maf-run-status,use-maf-events}.ts`、`maf-roundtable/lib/{event-timeline,fact-flow-graph}.ts`、`maf-roundtable/components/{MafRunHeader,MafEventTimeline,MafSeatStatusPanel,MafFactFlowPanel,MafApprovalCard,MafHealthGate}.tsx`、`maf-roundtable/pages/{MafSessionsPage,MafRunDetailPage}.tsx`、`maf-roundtable/index.ts`、`pages/MafRoutes.tsx`
|
||||||
|
- **改动**(2):`pages/PageRoutes.tsx`、`core/page-layout/sidebar-menu.ts`
|
||||||
|
- **后端**:无改动
|
||||||
|
|
||||||
|
## 验证
|
||||||
|
- `pnpm typecheck`(tsc --noEmit)通过
|
||||||
|
- 手动:菜单「MAF 会商」→ 列表 → 新建会话 → 启动 run → 时间线滚动 → 席位状态更新 → 流程图随 confirmed_facts 增长 → 审批可批准 → 终态停轮询
|
||||||
|
- 退路:`/health.enabled=false` → 入口可见但页面显示未启用提示;旧 `roundtable-planning` 零改动
|
||||||
@@ -0,0 +1,103 @@
|
|||||||
|
# AGENTS.md
|
||||||
|
|
||||||
|
This file provides guidance to Codex (Codex.ai/code) when working with code in this repository.
|
||||||
|
|
||||||
|
## Project Overview
|
||||||
|
|
||||||
|
This is a customized offline deployment of **DeerFlow** — a LangGraph-based AI super agent platform. The repo contains two sub-projects:
|
||||||
|
|
||||||
|
- `offline-backend-20260512/backend/` — Python backend (FastAPI Gateway + LangGraph agent runtime)
|
||||||
|
- `frontend-web/` — Vite + React 19 frontend (TypeScript, pnpm)
|
||||||
|
|
||||||
|
Managed together via shell scripts in `scripts/`.
|
||||||
|
|
||||||
|
## Commands
|
||||||
|
|
||||||
|
### Full Application (from repo root)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
./scripts/start-all.sh # Start backend + frontend as background daemons
|
||||||
|
./scripts/stop-all.sh # Stop both
|
||||||
|
./scripts/restart-all.sh # Restart both
|
||||||
|
./scripts/status.sh # Check running status
|
||||||
|
```
|
||||||
|
|
||||||
|
Logs and PID files are written to `.runtime/logs/` and `.runtime/pids/`.
|
||||||
|
|
||||||
|
### Backend Only (from `offline-backend-20260512/backend/`)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
make install # Install Python dependencies (uv)
|
||||||
|
make dev # Run Gateway API with hot-reload on port 8001
|
||||||
|
make gateway # Run Gateway API without reload
|
||||||
|
make test # Run all tests: PYTHONPATH=. uv run pytest tests/ -v
|
||||||
|
make lint # Lint with ruff
|
||||||
|
make format # Format with ruff
|
||||||
|
```
|
||||||
|
|
||||||
|
Run a single test file:
|
||||||
|
```bash
|
||||||
|
PYTHONPATH=. uv run pytest tests/test_<feature>.py -v
|
||||||
|
```
|
||||||
|
|
||||||
|
### Frontend Only (from `frontend-web/`)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm install # Install dependencies
|
||||||
|
pnpm dev # Start Vite dev server on port 5174
|
||||||
|
pnpm build # Production build
|
||||||
|
pnpm typecheck # TypeScript type checking (tsc --noEmit)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Service Ports
|
||||||
|
|
||||||
|
| Service | Port | Notes |
|
||||||
|
|---------|------|-------|
|
||||||
|
| Backend (Gateway API) | 8001 | FastAPI + LangGraph runtime |
|
||||||
|
| Frontend (Vite) | 5174 | React SPA |
|
||||||
|
|
||||||
|
Frontend connects to backend via env vars `VITE_BACKEND_BASE_URL` and `VITE_LANGGRAPH_BASE_URL` (injected by `scripts/start-frontend.sh`).
|
||||||
|
|
||||||
|
## Architecture
|
||||||
|
|
||||||
|
### Backend
|
||||||
|
|
||||||
|
The backend (`offline-backend-20260512/backend/`) is split into two layers:
|
||||||
|
|
||||||
|
- **`packages/harness/deerflow/`** — publishable agent framework (`deerflow.*` imports): LangGraph lead agent, middleware chain, sandbox, tools, MCP, memory, models, skills. **Never imports from `app.*`.**
|
||||||
|
- **`app/`** — application layer (`app.*` imports): FastAPI Gateway routers, IM channel integrations (Feishu, Slack, Telegram, DingTalk).
|
||||||
|
|
||||||
|
The **Lead Agent** (`deerflow/agents/lead_agent/`) is the single LangGraph graph entry point. It wraps a middleware chain (~18 middlewares assembled in strict order) around LLM calls, handling: thread isolation, sandbox lifecycle, uploads, memory, plan mode, vision, subagent delegation, and loop detection.
|
||||||
|
|
||||||
|
**Middleware order matters** — middlewares are appended in a fixed sequence; `ClarificationMiddleware` must always be last. See `offline-backend-20260512/backend/AGENTS.md` for the full ordered list.
|
||||||
|
|
||||||
|
**Harness → App import firewall** is enforced by `tests/test_harness_boundary.py` (runs in CI).
|
||||||
|
|
||||||
|
### Frontend
|
||||||
|
|
||||||
|
The frontend (`frontend-web/`) is a React 19 + Vite SPA:
|
||||||
|
|
||||||
|
- **Routing**: React Router v7; top-level routes in `src/pages/PageRoutes.tsx`, workspace sub-routes in `src/pages/WorkspaceRoutes.tsx`
|
||||||
|
- **Pages**: `ChatPage` (thread chat), `AgentChatPage` (custom agent chat), `AgentsPage`/`NewAgentPage` (agent management), `ScheduledTasksPage`/`ScheduledTaskRunDetailPage` (scheduled tasks), `LightAppManagementPage`/`LightAppListPage`/`LightAppIframeView` (轻应用中心 — register/list/embed mini-apps)
|
||||||
|
- **AI 写作·对话版(对话驱动写作台)**: a **parallel new entry** beside the classic AI-writing page (classic page/routes untouched) — route `/page/canvas/ai-writing-chat`, sidebar 「问答管理 → 课题研究(对话版)」. Page `open-canvas/pages/AIWritingChatPage.tsx` reuses the engine (`AIWritingContext` + `useStream` + `AIWritingDraftPanel`); **idle keeps the classic setup layout** (`WritingSetupChat` + collapsible form) and switches to the chat workbench once writing starts; left panel `components/ai-writing-chat/WritingChatPanel.tsx` = **unified chronological feed** (`ChatFlowTimeline.tsx`, chat bubbles anchor-interleaved into the progress timeline so triggered events render below the user's message) + button-only intervention cards (`ChatInterventionCards.tsx`, inline textareas removed) + bottom unified smart composer. Intent resolution: frontend fast path + `POST /api/ai-writing/sessions/{id}/intent` → `deerflow/agents/ai_writing/intent_router.py` (per-pause action whitelist, high-cost confidence gates, payload cleaning); supports QA bypass, clarify follow-ups, control intents, and material-stage auto re-search + pending-intent resume. Tests `tests/test_ai_writing_intent.py`; plan doc `frontend-web/docs/ai-writing-对话驱动写作台-实现方案.md`.
|
||||||
|
- **轻应用中心 (Light App Center)**: a sibling of 任务管理 in the sidebar with two pages — 应用管理 (admin registers `window_open` or `iframe` mini-apps with a route-param builder: login params resolved from `localStorage.userInfo`, theme params literal) and 应用列表 (card grid of `window_open` apps, `window.open` launch). `iframe` apps are mounted under a chosen parent menu (XK/PG/TY/综合管理) and **dynamically injected into the sidebar** by `core/page-layout/use-sidebar-menu.ts` (`useSidebarMenuItems`), opening in the `LightAppIframeView` host. Client + React Query hooks in `strategy-components/api/light-apps.ts`; URL builder/constants in `strategy-components/lib/light-app.ts`. Backend: `/api/light-apps` (global/shared, admin-gated writes).
|
||||||
|
- **菜单管理 (Menu Management, admin-only)**: an **overlay** over the static sidebar menu — `MenuManagementPage` (`pages/MenuManagementPage.tsx`, route `/page/strategy/admin/menu-management`, opened from the admin-only 「菜单管理」 item in the **bottom-left settings dropdown** of `components/page-sidebar.tsx`). Admins rename / 停用·启用 / reorder (↑↓ or @dnd-kit drag) / re-parent (horizontal drag **or** the edit dialog's 「移动到」parent selector) any node across 一级/二级/三级, **including injected iframe light-app nodes** (`light-app-<appId>`). The static tree (`core/page-layout/sidebar-menu.ts`) stays the source of icons/routes; only per-node deltas (`label`/`disabled`/`parentId`/`sortOrder`) persist to the backend. Merge logic in `core/page-layout/menu-overrides.ts` (`applyMenuOverrides`, applied in `use-sidebar-menu.ts` after light-app injection, before role filter; disabling a node hides its whole subtree) — strict **3-level cap** (`wouldExceedDepth`). Client `strategy-components/api/menu-overrides.ts`. Backend: `/api/menu-overrides` (global/shared; open read, admin atomic replace-all).
|
||||||
|
- **敏感词管理 (Sensitive Word Management)**: configures the **展示层脱敏映射** (原始词 → 替换词). **Gated on the username `lqq`** (not the admin role) — `getAccountDisplayName().toLowerCase() === "lqq"` (username = email `@` prefix, else `user_id`, same as the profile page); the dropdown entry, the route guard, and the page-level guard all use this check. `src/lib/desensitize.ts` ships a frozen seed map `SEED_DESENSITIZE_MAP` (the deployment seed) plus a live mutable `DESENSITIZE_MAP` (initialized from the seed so `desensitize()` works before any fetch). `DesensitizeWordsLoader` (mounted in `App.tsx` `AppProviders`) fetches `/api/sensitive-words` on startup and, if non-empty, calls `replaceDesensitizeMap(...)` to make the backend config the source of truth (empty/failed → keep seed). Page `SensitiveWordsPage.tsx` (route `/page/strategy/admin/sensitive-words`, opened from the 「敏感词管理」 item in the **bottom-left settings dropdown** of `components/page-sidebar.tsx`, present in **both** full + collapsed sidebar modes) lists/adds/edits/启停/deletes words and saves the **whole set atomically** (replace-all); a 「导入种子词」 button merges any missing `SEED_DESENSITIZE_MAP` entries into the editor. Client + hooks in `strategy-components/api/sensitive-words.ts` (`wordsToMap` folds enabled rows into the runtime map). Backend: `/api/sensitive-words` (global/shared; open read, write allowed for admin **or** the `lqq` account), mirroring 菜单管理's store shape. **侧边栏 + 导航栏 menu labels are desensitized** at the data source: `useSidebarMenuItems`/`useActiveThirdLevel` (`core/page-layout/use-sidebar-menu.ts`) map every node's `label` through a desensitizer built **directly from the `/api/sensitive-words` query** (`makeDesensitizer(wordsToMap(words))`, falling back to the global seed `desensitize` while empty) — this sidesteps the `replaceDesensitizeMap` effect-timing race. Only `label` is rewritten; `path`/`id`/`icon` are untouched so routing/highlight are unaffected. All nav surfaces (`page-sidebar.tsx`, `page-sidebar-dark.tsx`, `page-sidebar-v1.tsx`, `strategy-components/Header.tsx`, `PageRoutes.tsx`) consume this hook and are covered; `MenuManagementPage` uses the raw tree so admins still edit real labels.
|
||||||
|
- **技能地址管理 (Skill Address Management, admin-only)**: 扫描运行中的技能(`skills/{public,custom}` 下所有 `.md`/`.py`)里的 **http(s) URL 与 IP/IP:端口**,按唯一地址聚合全部出现位置(跨 .md/.py),支持**批量替换**(如把 UAT 地址一次性改成生产)。主体抽成可复用组件 `SkillAddressesPanel`(`pages/SkillAddressesPage.tsx` 导出,默认导出 `SkillAddressesPage` 仍保留旧路由 `/page/strategy/admin/skill-addresses` 作直链回退),**作为「技能地址管理」标签页嵌入管理员「技能管理」页 `pages/AdminSkillsPage.tsx`**(该页加 Tabs:「技能列表」+「技能地址管理」;入口在「设置和更多」下拉的「技能管理」`workspace-nav-menu.tsx` → `/page/workspace/admin/skills`,不再单列于 `components/page-sidebar.tsx` 左下角设置下拉):打开自动扫描并带**进度条**(扫描逐技能 / 应用逐文件 X/N,应对 150+ 技能),URL/IP 类型过滤 + 搜索 + 「片段批量套用」(如所有 `uat.4.cn` → `prod.4.cn`)、每地址「替换为」输入框(可展开看 `file:line` 片段)、内联**预览**、**应用**、**多关键词检索**(空格分隔全部命中),以及**修改记录**面板——每次应用生成一条记录(显示时间/改了哪些地址 from→to/文件数/处数),可**针对单次记录回退**(二次确认)。client + NDJSON 流式解析在 `strategy-components/api/skill-addresses.ts`。后端 `/api/skill-addresses`(**仅管理员**):所有文件 IO 走 `asyncio.to_thread` 不阻塞事件循环;`GET /scan`(+`/scan/stream`)、`POST /preview`、`POST /apply`(+`/apply/stream`)、`GET /backups`、`POST /rollback/{id}`;**子串安全替换**(基于 token span,不会误伤子串)、`expected_total` 乐观锁(409)、写前自动磁盘备份到 `{skills_root}/.address-edits/`(同时写一份 `{id}.manifest.json` 记录本次替换明细,供修改记录展示)、应用后刷新技能系统提示缓存。纯引擎 `deerflow/skills/address_scan.py`,router `app/gateway/routers/skill_addresses.py`,tests `tests/test_skill_addresses.py`。范围仅运行中技能,不动 `deploy/minimal/skills/`。
|
||||||
|
- **按钮管理 (Task Button Management, admin-only)**: configures the **可配置跳转按钮** rendered in the left task panel of the task deep-link workspaces (rwfx / 3qfx / xdfx, see `TaskFxWorkspace`). Each button = `{business, label, linkType, target, appendTaskId, idParam, idKind, enabled, sortOrder}`; `linkType` is `url` (外链 `window.open`, optional append of `?{idParam}={id}` — **`idParam` is the editable query-param name**, e.g. `id`/`task_id`), `business` (内部切换到另一业务, reuses `resolveTaskDeeplinkTarget`, always task id), or `purpose` (弹出当前任务的「任务目的」表格 via the shared `TaskPurposeDialog`, no target — configurable for any page incl. xdfx). **`idKind` (`task`/`action`) only matters for xdfx**: its deep-link `?taskId=` is an 行动id and the 任务id is resolved at login (`fetchTaskIdFromAction`) — `TaskContext` now also stashes the raw `actionId`, so a url button can append either (default `task`). Page `TaskButtonsPage.tsx` (route `/page/strategy/admin/task-buttons`, **admin-gated**, entry「按钮管理」in the bottom-left settings dropdown of `components/page-sidebar.tsx`, both full + collapsed modes) has per-business tabs, edits name/type/target/启停/排序/增删, saves the **whole set atomically** (replace-all), plus 「导入默认」 to merge code-seed defaults. **Seed/fallback** (like 敏感词管理): only when the whole table is empty (fresh deploy, never saved) do the workspace + page fall back to `defaultTaskButtons(cfg)` — rwfx's url buttons (编辑/下一步/3q详情) built from the **live** `/api/public/config/task-deeplink` plus cross-business switch buttons for **all three** businesses (each switches to the other two — rwfx→三情/行动, 3qfx→任务/行动, xdfx→任务/三情). Once saved, the store is the sole source of truth. The old hardcoded jump buttons were migrated out: `TaskFxWorkspace` no longer hardcodes 切换到三情分析, `TaskActionsPanel` keeps only the non-jump 清除记录, and `TaskPurposePanel` dropped its 3q详情 button (now configurable) **and defaults the 目的树 table to collapsed** (chevron toggle). Helpers `core/auth/task-buttons.ts` (`TaskButton`, `defaultTaskButtons`, `resolveTaskButtons`, `buttonsForBusiness`, `runTaskButton`), client+hooks `strategy-components/api/task-buttons.ts`. Backend: `/api/task-buttons` (global/shared; open read, admin replace-all), store `deerflow.persistence.task_buttons` (table `task_buttons`, auto-created by `create_all`), wired `app.state.task_button_store`. Tests: `tests/test_task_buttons.py`.
|
||||||
|
- **State**: TanStack Query for server state, context providers (`SubtasksProvider`, `ArtifactsProvider`, `PromptInputProvider`) scoped to `WorkspaceRoutes`
|
||||||
|
- **LLM streaming**: `@langchain/langgraph-sdk` streams messages from the backend via SSE
|
||||||
|
- **UI**: Radix UI primitives + TailwindCSS v4 + shadcn-style components in `src/components/ui/`
|
||||||
|
- **Shims**: `src/shims/` provides `next/link` and `next/navigation` polyfills (original code was Next.js)
|
||||||
|
- **Login URL params** (`LoginPage.tsx`, frontend-only — the backend never sees these): besides the auth params (`ticket`/`userId`/`env`/`theme`/`yUserId`/`token`/`access_token`/`authToken`/`password`), the page supports a **task deep-link** via `?taskId=&goPath=`. After login it calls the consumer API `GET {VITE_AIPI_CONSUMER_URL}/taskAnalyseSearch/cop-task-detail?taskId=` (header `Authorization: Bearer admin`, auto-injected by `utils/request.ts`), stashes the full `data` (`id/overview/taskDirection/taskName/taskContent`) into `sessionStorage["login.copTaskDetail"]`, then routes by `goPath`: base codes `3qfx`/`rwfx`/`xdfx` → that business's configured **single agent** Q&A inside a **任务工作区** (resolved via `/api/business-mapping`; `resolveTaskDeeplinkTarget` calls `persistTaskContext({taskId, agentId, openingText})` and navigates to the `…/chats` **index**, which opens the latest task conversation or 新建 — a 1:N task↔对话 workspace, NOT `pendingAgentMessage`); the `-A` suffix (`3qfx-A`/…) → **multi-agent roundtable** with `roundtablePrefill.businessCode` so the page auto-selects the configured 业务链条. **xdfx's deep-link `?taskId=` is actually an 行动id, not a 任务id** — `resolveDeeplinkTaskId(goPath, rawId)` (called in `LoginPage` before everything) detects `xdfx`/`xdfx-A` and resolves it via `GET {action_detail_url}/{actionId}` → `data.taskId` (`fetchTaskIdFromAction`; `action_test`+`mock.action_detail` for offline testing); the resolved 任务id then drives `cop-task-detail`, the purpose tree, and the 1:N binding (other businesses pass the id through unchanged). **xdfx additionally partitions its chat records by 行动id (action_id), NOT by task_id**: `resolveTaskDeeplinkTarget` sets `partitionByAction:true` + keeps the raw action_id as `TaskContext.actionId`, so new threads are tagged `metadata.{taskId,actionId}` (taskId kept only to preserve the backend「任务深链对话全局共享」semantics, which keys off `metadata.taskId`) and the conversation list filters by `actionId` (+`agent_id`) — different actions of the same task get separate lists. xdfx's first-question opening text also appends `行动id(action_id)为…` (see `buildOpeningText` / `taskThreadMetadata`). goPath→businessCode: `3qfx`→`3Q`, `rwfx`→`6BF`, `xdfx`→`7BF`. The roundtable target also threads the URL `taskId` into `roundtablePrefill.taskId` (`resolveTaskDeeplinkTarget(goPath, detail, taskId)`), which turns on two taskId-scoped behaviors: (1) **separate, unpartitioned per-task storage** — taskId 会商聊天记录 live in their **own** store/table (`roundtable_task_drafts`), keyed **only by `task_id`** (one taskId = many records, shared across users, **no user 分权** at all; `created_by` is audit-only), kept entirely out of the per-user personal store (`roundtable_drafts`, now strictly per-user) so the two never mix. Backend router `/api/roundtable-task-drafts` (`GET /by-task/{id}` + `/by-task/{id}/latest`, `POST`, `GET/PUT/DELETE /{id}` — all user-agnostic); frontend client `roundtable-planning/api/task-drafts.ts`, and `useDraftPersistence`/`useRoundtableDrafts` route **all** CRUD to it when a `taskId` is present (else the personal `drafts.ts`). The matching **background jobs** are shared by task too: `roundtable_jobs.task_id` marks a task job; reads/dedup/stream/resume/cancel pass `?task_id=` so any user opening the task sees the same running 研讨 (progress/flowchart), and the executor writes the final report back to the task-draft store. Existing rows are moved over by `scripts/migrate_roundtable_task_drafts.py` (migration `20260618_01`). The history dropdown filters to the task and 新建 keeps the binding; (2) **Step-3 auto structured output** — after the `roundtable-summary` agent writes the Markdown report it automatically runs a second round emitting a `flow-json` flowchart (`useStep3Summary` `autoFlow`+`chainLevels`), whose hierarchy follows the business chain's stage goals (任务 → 目的 → 行为体 → …; coordinatorPrompt-specified hierarchy wins) and whose nodes never carry 阶段编号/阶段名 (the prior bug). **Both targets render embedded under the 任务管理 layout** — nested routes under `task-management/<business-path>/{roundtable,agent/:agent_id/chats}` in `StrategyRoutes.tsx` (`<business-path>` = `plan-task-sentiment` / `plan-task/plan-task-fx` / `plan-task/plan-task-action`, matching the COH中任务 menu paths in `sidebar-menu.ts`) so the global sidebar keeps 任务管理 → COH中任务 → the matching business highlighted. **All three single-agent businesses share `TaskFxWorkspace`** (`task-components/TaskFxWorkspace.tsx`): left = a「当前任务」card (`readCopTaskDetail()` 任务名称 + 简介, desensitized, 留存 above 新建对话) + per-task 1:N conversation list (`useTaskThreads(taskId, agentId, actionId?)` — filtered by **both** `metadata.taskId` AND `metadata.agent_id` so the three businesses' conversations staLine truncated
|
||||||
|
- **iframe 嵌入模式 (外部系统用 iframe 套用深链问答/会商)** — 三个**按标签页**开关,全部由深链 URL 参数开启、存进同一份 `sessionStorage` 会话(`embed.session`,键名常量在 `core/embed/embed-session.ts`),跨登录跳转/刷新/页内导航存活,**绝不跨标签污染**同浏览器另开的正常系统页。核心隔离手法:用 `sessionStorage`(按标签页/浏览上下文隔离,iframe 即便同源也有独立一份)而非 `localStorage`(跨标签共享)。开关:(1) **`?embed=1`(可带 `&theme=`)** — 去全局 chrome(`PageLayout` 的 `pageSidebarAllowed && !isEmbedActive()` → 隐藏 Header + PageSidebar)+ 按外部主题色**强制**明/暗:走 next-themes 的 `forcedTheme`(`App.tsx` `AppProviders` 调 `resolveForcedEmbedTheme`,**不写** localStorage `strategy-theme`),离散映射 `dark-blue`/`dark`→深、其余→浅;嵌入侧**绝不**调 `setTheme`/`persistSidebarEnabled`(那俩落 localStorage 跨标签污染,`LoginPage` 据 `readEmbedParam` 跳过)。(2) **`?hideJump=1`** — 隐藏深链底部「快捷跳转」栏 `TaskJumpBar` 的两部分(底部「下一步」等按钮 + 右侧垂直居中悬浮菜单),单智能体问答 + 会商共用该栏,`isJumpBarHidden()` 为真时整条 `return null`。(3) **登录用户隔离** — 嵌入态下鉴权/身份键(`deerflow.auth` token、`userInfo`、`login.*`、`tools_token`、maxkey/userDetail token)全部经 `core/auth/scoped-storage.ts` 的 `authStorage()`(嵌入→sessionStorage / 正常→localStorage)读写,使 iframe 里登录的用户与正常登录用户**完全隔离**、互不覆盖;所有 token 读取都过 `getStoredAuth()`/`getAuthorizationHeaderValue()`(API 客户端 `core/api/*` 全走这俩),改中心函数即让全体调用方自动隔离;跨标签账号变更监听 `AuthSyncWatcher`(`core/auth/sync.tsx`)在嵌入态禁用。嵌入会话在 `main.tsx` 渲染前 `syncEmbedSessionFromCurrentUrl()` 同步启用(早于任何鉴权写入,避免首帧 effect 顺序漏写 localStorage);`AppProviders` 的 effect 再按 SPA 导航同步。`embed=0`/`hideJump=0` 可显式关闭。正常(非嵌入)标签页所有 `isXxx()` 恒 false,行为**零变化**。第三个开关 `?isolate=1`(**独立登录会话**)把同一套**登录用户隔离**单独提供给**普通(带 chrome)标签页**——只切换鉴权存储、不去 chrome / 不强制主题 / 不动跳转栏:`authStorage()` 的条件从「仅嵌入」放宽为 `isEmbedActive() || isIsolatedSession()`,`AuthSyncWatcher` 的跨标签监听对嵌入态**或**独立态都即时忽略(handler 内实时判,运行时开关也即刻生效)。除 URL 参数外,**设置 → 外观 →「登录会话」** 有一个 Switch「独立登录会话(本标签页)」运行时切换(`setIsolatedSession`,`appearance-settings-page.tsx`):**开启时先 `migrateAuthToSession()`**(`scoped-storage.ts`,把 localStorage 的受保护键 `deerflow.auth`/`userInfo`/`userId`/`tools_token` + `login.*` 前缀快照搬进 sessionStorage)再翻标志,故无感不登出;此后本标签页登录态独立——别处登录/换号影响不到它,它换号也影响不到别人,但关掉该标签即结束(需重登)。开启给 toast 提示。
|
||||||
|
|
||||||
|
### Configuration
|
||||||
|
|
||||||
|
Backend config lives in `offline-backend-20260512/backend/config.yaml`. Values starting with `$` resolve as environment variables (e.g., `$OPENAI_API_KEY`). MCP servers and skills are configured in `extensions_config.json` in the same directory.
|
||||||
|
|
||||||
|
## Detailed Backend Reference
|
||||||
|
|
||||||
|
The backend has its own comprehensive documentation at:
|
||||||
|
- `offline-backend-20260512/backend/AGENTS.md` — architecture, middleware chain, all API routes, config schema, sandbox/memory/subagent systems
|
||||||
|
- `offline-backend-20260512/backend/README.md` — setup guide, technology stack
|
||||||
@@ -79,16 +79,23 @@ The frontend (`frontend-web/`) is a React 19 + Vite SPA:
|
|||||||
|
|
||||||
- **Routing**: React Router v7; top-level routes in `src/pages/PageRoutes.tsx`, workspace sub-routes in `src/pages/WorkspaceRoutes.tsx`
|
- **Routing**: React Router v7; top-level routes in `src/pages/PageRoutes.tsx`, workspace sub-routes in `src/pages/WorkspaceRoutes.tsx`
|
||||||
- **Pages**: `ChatPage` (thread chat), `AgentChatPage` (custom agent chat), `AgentsPage`/`NewAgentPage` (agent management), `ScheduledTasksPage`/`ScheduledTaskRunDetailPage` (scheduled tasks), `LightAppManagementPage`/`LightAppListPage`/`LightAppIframeView` (轻应用中心 — register/list/embed mini-apps)
|
- **Pages**: `ChatPage` (thread chat), `AgentChatPage` (custom agent chat), `AgentsPage`/`NewAgentPage` (agent management), `ScheduledTasksPage`/`ScheduledTaskRunDetailPage` (scheduled tasks), `LightAppManagementPage`/`LightAppListPage`/`LightAppIframeView` (轻应用中心 — register/list/embed mini-apps)
|
||||||
|
- **定时任务「JSON → HTML 模板填充」(模板数据转换器)**: a third scheduled-task execution mode. In the create/edit dialog (`ScheduledTasksPage.tsx`), selecting the built-in agent **「模板数据转换器」** (`execution_agent_name === "template-json-builder"`, `TEMPLATE_BUILDER_AGENT_ID`) reveals a 「HTML模板」 select (`useHtmlTemplates` → `GET /api/scheduled-tasks/html-templates`) + a **.json 上传** button (reads the file's text into the prompt box) and **hides** the 必须生成 HTML/Markdown switches (this mode always outputs HTML). The chosen template persists as `execution_context.template_config.template_id` (`TemplateFillConfig` in `core/scheduled-tasks/types.ts`). At run time the backend converts the source JSON (the task prompt) into that template's `DATA` structure, validates (retry-on-fail), fills the template, and stores an HTML page previewable via the existing run-detail HTML preview. The source can be **pure JSON, plain text, or text-with-embedded-JSON** — the backend pre-extracts any embedded JSON and the agent's `SOUL.md` maps it (or the plain text's semantics) to the template's schema skeleton. **Chat-page debug entry (only this agent's `AgentChatPage`)**: when `agent_id === "template-json-builder"`, the chat header shows a 「页面模板」 select + a 「渲染预览」 button — after a normal Q&A run, the button takes the **latest AI reply**, POSTs it to `POST /api/scheduled-tasks/template-fill/render` (`renderTemplateFill`), and pops a dialog rendering the filled HTML in a `sandbox="allow-scripts"` iframe plus the structure-validation status/errors/gaps — for debugging the agent's conversion effect without creating a scheduled task. Gated strictly on the agent id, so other agents' chat pages are untouched. See the backend CLAUDE.md「Template-fill mode」for the engine (`deerflow/runtime/scheduler/template_fill.py`), agent seed, dispatch, and the render API.
|
||||||
|
- **AI 写作·对话版(对话驱动写作台)**: a **parallel new entry** beside the classic AI-writing page (classic page/routes untouched) — route `/page/canvas/ai-writing-chat` (`OpenCanvasRoutes.tsx`), sidebar 「问答管理 → 课题研究(对话版)」. Page `open-canvas/pages/AIWritingChatPage.tsx` fully **reuses the engine** (`AIWritingContext` state machine + LangGraph `useStream`, `AIWritingHistoryProvider`, right-side `AIWritingDraftPanel`) but replaces the presentation: left = `components/ai-writing-chat/WritingChatPanel.tsx` (timeline + **button-only intervention cards** `ChatInterventionCards.tsx` — the five pause cards copied from `InterventionCard.tsx` with all inline textareas removed, confirm/action buttons kept — plus a bottom **unified smart composer**). Free text goes through two-level intent resolution (`open-canvas/api/ai-writing-intent.ts`): deterministic short-phrase fast path (确认/继续/重新搜索/重写大纲…; high-cost actions never fast-pathed) then `POST /api/ai-writing/sessions/{id}/intent` — the backend reads the graph checkpoint (authoritative pause point from the pending interrupt) and routes via `deerflow/agents/ai_writing/intent_router.py` (LLM + strict per-pause action whitelist aligned to the graph's real resume actions, confidence gates: finalize/force_finalize/覆盖式 re_search need ≥0.85 else clarify, payload key-whitelist cleaning). Results map to `submitIntervention`/control (暂停/继续/后台挂起)/QA bypass (`answer` rendered as a chat bubble, never touches graph state)/clarify (amber follow-up bubble with multi-turn context). **Two-state layout**: idle (未开始写作) renders the **classic setup experience unchanged** — `WritingSetupChat` + collapsible `AIWritingPanel` form under `WritingFormProvider` (same as `AIWritingPage`'s idle branch); once writing starts (or history view opens) it switches to the chat workbench. **Unified chronological feed** (`ChatFlowTimeline.tsx`): intent-layer chat bubbles are interleaved INTO the progress-event timeline by anchor (= `progressEvents.length` at message creation), so events triggered by a user message render **below** it (Google-AI-Studio-style single stream, not timeline-above/chat-below); composer-driven interventions suppress the duplicate 「我的要求」card (`suppressedRequirementIndices`). **素材不足自动续跑** only at `material_confirm` (the only pause the graph supports re-search from): needResearch caches the payload as a pending intent, submits `re_search + userQuery`, and auto-submits the pending intent when the new material-confirm pause arrives (cancellable pill). Stage chips + per-stage placeholder + 「当前交互对象」status badge. Backend tests `tests/test_ai_writing_intent.py`. Plan doc: `frontend-web/docs/ai-writing-对话驱动写作台-实现方案.md`.
|
||||||
- **轻应用中心 (Light App Center)**: a sibling of 任务管理 in the sidebar with two pages — 应用管理 (admin registers `window_open` or `iframe` mini-apps with a route-param builder: login params resolved from `localStorage.userInfo`, theme params literal) and 应用列表 (card grid of `window_open` apps, `window.open` launch). `iframe` apps are mounted under a chosen parent menu (XK/PG/TY/综合管理) and **dynamically injected into the sidebar** by `core/page-layout/use-sidebar-menu.ts` (`useSidebarMenuItems`), opening in the `LightAppIframeView` host. Client + React Query hooks in `strategy-components/api/light-apps.ts`; URL builder/constants in `strategy-components/lib/light-app.ts`. Backend: `/api/light-apps` (global/shared, admin-gated writes).
|
- **轻应用中心 (Light App Center)**: a sibling of 任务管理 in the sidebar with two pages — 应用管理 (admin registers `window_open` or `iframe` mini-apps with a route-param builder: login params resolved from `localStorage.userInfo`, theme params literal) and 应用列表 (card grid of `window_open` apps, `window.open` launch). `iframe` apps are mounted under a chosen parent menu (XK/PG/TY/综合管理) and **dynamically injected into the sidebar** by `core/page-layout/use-sidebar-menu.ts` (`useSidebarMenuItems`), opening in the `LightAppIframeView` host. Client + React Query hooks in `strategy-components/api/light-apps.ts`; URL builder/constants in `strategy-components/lib/light-app.ts`. Backend: `/api/light-apps` (global/shared, admin-gated writes).
|
||||||
- **菜单管理 (Menu Management, admin-only)**: an **overlay** over the static sidebar menu — `MenuManagementPage` (`pages/MenuManagementPage.tsx`, route `/page/strategy/admin/menu-management`, opened from the admin-only 「菜单管理」 item in the **bottom-left settings dropdown** of `components/page-sidebar.tsx`). Admins rename / 停用·启用 / reorder (↑↓ or @dnd-kit drag) / re-parent (horizontal drag **or** the edit dialog's 「移动到」parent selector) any node across 一级/二级/三级, **including injected iframe light-app nodes** (`light-app-<appId>`). The static tree (`core/page-layout/sidebar-menu.ts`) stays the source of icons/routes; only per-node deltas (`label`/`disabled`/`parentId`/`sortOrder`) persist to the backend. Merge logic in `core/page-layout/menu-overrides.ts` (`applyMenuOverrides`, applied in `use-sidebar-menu.ts` after light-app injection, before role filter; disabling a node hides its whole subtree) — strict **3-level cap** (`wouldExceedDepth`). Client `strategy-components/api/menu-overrides.ts`. Backend: `/api/menu-overrides` (global/shared; open read, admin atomic replace-all).
|
- **菜单管理 (Menu Management, admin-only)**: an **overlay** over the static sidebar menu — `MenuManagementPage` (`pages/MenuManagementPage.tsx`, route `/page/strategy/admin/menu-management`, opened from the admin-only 「菜单管理」 item in the **bottom-left settings dropdown** of `components/page-sidebar.tsx`). Admins rename / 停用·启用 / reorder (↑↓ or @dnd-kit drag) / re-parent (horizontal drag **or** the edit dialog's 「移动到」parent selector) any node across 一级/二级/三级, **including injected iframe light-app nodes** (`light-app-<appId>`). The static tree (`core/page-layout/sidebar-menu.ts`) stays the source of icons/routes; only per-node deltas (`label`/`disabled`/`parentId`/`sortOrder`) persist to the backend. Merge logic in `core/page-layout/menu-overrides.ts` (`applyMenuOverrides`, applied in `use-sidebar-menu.ts` after light-app injection, before role filter; disabling a node hides its whole subtree) — strict **3-level cap** (`wouldExceedDepth`). Client `strategy-components/api/menu-overrides.ts`. Backend: `/api/menu-overrides` (global/shared; open read, admin atomic replace-all).
|
||||||
|
- **白名单管理 (Login Whitelist, admin-only)**: gates **who may log in**, run as a **blocklist (黑名单模式)**. Two pieces: a global master switch (`system_settings.json → login_whitelist.enabled`, surfaced by **admin-only** `GET|PUT /api/system-settings/login-whitelist`) + a per-user **放行** flag (`users.approved` column, migration `20260625_02`). Users **self-register** as usual and **every new account defaults to `approved=True`** — so a user who has never logged into this system before is allowed straight through; the switch only blocks users an admin has explicitly **取消放行** (`approved=False`). (`create_user`/`User`/`UserRow` all default `approved=True`; admins are always approved; existing rows are backfilled `True`.) Login interception is the single helper `enforce_user_approved(user)` in `app/gateway/routers/auth.py`, called in all three login endpoints (`/login/{local,username,token}`) **after** the account is resolved/created and **before** the JWT is issued: switch off → everyone passes; `system_role=="admin"` → always passes (anti-lockout); else `approved=False` (admin-revoked) → 403 `{code:"PENDING_APPROVAL"}` (the frontend's `extractErrorMessage` surfaces the message and login throws before writing any auth state, so no half-login). Admin approves on `pages/LoginWhitelistPage.tsx` (route `/page/strategy/admin/login-whitelist`, entry「白名单管理」in the bottom-left settings dropdown of `components/page-sidebar.tsx`, both sidebar modes): a top master-switch + a list of all registered users (`GET /api/v1/auth/users`, now carrying `approved`) with a per-row 放行 Switch (`PUT /api/v1/auth/users/{id}/approval`, admin-only; revoking only blocks the **next** login — `token_version` is left untouched, existing sessions are not force-killed). Client/hooks: switch in `strategy-components/api/login-whitelist.ts`, user list + approval in `core/auth/{api,hooks}.ts` (`useSetUserApproval`). Backend tests: `tests/test_login_approval.py`. **账号级「登录口令」(per-account password — 临时开通)**: the same page also lets an admin assign one specific account an individual **plaintext** password (`users.login_password` column, migration `20260625_04`, nullable; auto-added on startup by `_ensure_orm_columns_sync`). Once set, **that account's** username login (`POST /api/v1/auth/login/username`) **requires** `?password=` to exactly match it and that personal password **takes precedence over** the global shared-password gate (`username_login.require_password`); accounts without one keep today's shared-gate / passwordless behavior. The user then logs in via the **existing** frontend URL `#/login/<用户名>?password=xxxx` (LoginPage already forwards `?password=`; `<用户名>` = the account's email `@`-prefix). **Plaintext is intentional** — the password rides in the URL query anyway, so storing it readably lets the admin re-copy the full login link from the page; it is exposed only on the **admin-only** `GET /api/v1/auth/users` (`UserListItem.login_password`) and the new admin-only `PUT /api/v1/auth/users/{id}/login-password` (set non-empty / clear with null·empty; doesn't touch `token_version`). The whitelist page renders a per-user 「登录口令」 column with a set/修改 editor + a live 「复制登录链接」 button (`useSetUserLoginPassword` in `core/auth/hooks.ts`, `setUserLoginPassword` in `core/auth/api.ts`). Backend gate helper `_lookup_user_by_username` (lookup-only, no auto-register) in `routers/auth.py`; tests `tests/test_login_personal_password.py`.
|
||||||
- **敏感词管理 (Sensitive Word Management)**: configures the **展示层脱敏映射** (原始词 → 替换词). **Gated on the username `lqq`** (not the admin role) — `getAccountDisplayName().toLowerCase() === "lqq"` (username = email `@` prefix, else `user_id`, same as the profile page); the dropdown entry, the route guard, and the page-level guard all use this check. `src/lib/desensitize.ts` ships a frozen seed map `SEED_DESENSITIZE_MAP` (the deployment seed) plus a live mutable `DESENSITIZE_MAP` (initialized from the seed so `desensitize()` works before any fetch). `DesensitizeWordsLoader` (mounted in `App.tsx` `AppProviders`) fetches `/api/sensitive-words` on startup and, if non-empty, calls `replaceDesensitizeMap(...)` to make the backend config the source of truth (empty/failed → keep seed). Page `SensitiveWordsPage.tsx` (route `/page/strategy/admin/sensitive-words`, opened from the 「敏感词管理」 item in the **bottom-left settings dropdown** of `components/page-sidebar.tsx`, present in **both** full + collapsed sidebar modes) lists/adds/edits/启停/deletes words and saves the **whole set atomically** (replace-all); a 「导入种子词」 button merges any missing `SEED_DESENSITIZE_MAP` entries into the editor. Client + hooks in `strategy-components/api/sensitive-words.ts` (`wordsToMap` folds enabled rows into the runtime map). Backend: `/api/sensitive-words` (global/shared; open read, write allowed for admin **or** the `lqq` account), mirroring 菜单管理's store shape. **侧边栏 + 导航栏 menu labels are desensitized** at the data source: `useSidebarMenuItems`/`useActiveThirdLevel` (`core/page-layout/use-sidebar-menu.ts`) map every node's `label` through a desensitizer built **directly from the `/api/sensitive-words` query** (`makeDesensitizer(wordsToMap(words))`, falling back to the global seed `desensitize` while empty) — this sidesteps the `replaceDesensitizeMap` effect-timing race. Only `label` is rewritten; `path`/`id`/`icon` are untouched so routing/highlight are unaffected. All nav surfaces (`page-sidebar.tsx`, `page-sidebar-dark.tsx`, `page-sidebar-v1.tsx`, `strategy-components/Header.tsx`, `PageRoutes.tsx`) consume this hook and are covered; `MenuManagementPage` uses the raw tree so admins still edit real labels.
|
- **敏感词管理 (Sensitive Word Management)**: configures the **展示层脱敏映射** (原始词 → 替换词). **Gated on the username `lqq`** (not the admin role) — `getAccountDisplayName().toLowerCase() === "lqq"` (username = email `@` prefix, else `user_id`, same as the profile page); the dropdown entry, the route guard, and the page-level guard all use this check. `src/lib/desensitize.ts` ships a frozen seed map `SEED_DESENSITIZE_MAP` (the deployment seed) plus a live mutable `DESENSITIZE_MAP` (initialized from the seed so `desensitize()` works before any fetch). `DesensitizeWordsLoader` (mounted in `App.tsx` `AppProviders`) fetches `/api/sensitive-words` on startup and, if non-empty, calls `replaceDesensitizeMap(...)` to make the backend config the source of truth (empty/failed → keep seed). Page `SensitiveWordsPage.tsx` (route `/page/strategy/admin/sensitive-words`, opened from the 「敏感词管理」 item in the **bottom-left settings dropdown** of `components/page-sidebar.tsx`, present in **both** full + collapsed sidebar modes) lists/adds/edits/启停/deletes words and saves the **whole set atomically** (replace-all); a 「导入种子词」 button merges any missing `SEED_DESENSITIZE_MAP` entries into the editor. Client + hooks in `strategy-components/api/sensitive-words.ts` (`wordsToMap` folds enabled rows into the runtime map). Backend: `/api/sensitive-words` (global/shared; open read, write allowed for admin **or** the `lqq` account), mirroring 菜单管理's store shape. **侧边栏 + 导航栏 menu labels are desensitized** at the data source: `useSidebarMenuItems`/`useActiveThirdLevel` (`core/page-layout/use-sidebar-menu.ts`) map every node's `label` through a desensitizer built **directly from the `/api/sensitive-words` query** (`makeDesensitizer(wordsToMap(words))`, falling back to the global seed `desensitize` while empty) — this sidesteps the `replaceDesensitizeMap` effect-timing race. Only `label` is rewritten; `path`/`id`/`icon` are untouched so routing/highlight are unaffected. All nav surfaces (`page-sidebar.tsx`, `page-sidebar-dark.tsx`, `page-sidebar-v1.tsx`, `strategy-components/Header.tsx`, `PageRoutes.tsx`) consume this hook and are covered; `MenuManagementPage` uses the raw tree so admins still edit real labels.
|
||||||
- **按钮管理 (Task Button Management, admin-only)**: configures the **可配置跳转按钮** rendered in the left task panel of the task deep-link workspaces (rwfx / 3qfx / xdfx, see `TaskFxWorkspace`). Each button = `{business, label, linkType, target, appendTaskId, idParam, idKind, enabled, sortOrder}`; `linkType` is `url` (外链 `window.open`, optional append of `?{idParam}={id}` — **`idParam` is the editable query-param name**, e.g. `id`/`task_id`), `business` (内部切换到另一业务, reuses `resolveTaskDeeplinkTarget`, always task id), or `purpose` (弹出当前任务的「任务目的」表格 via the shared `TaskPurposeDialog`, no target — configurable for any page incl. xdfx). **`idKind` (`task`/`action`) only matters for xdfx**: its deep-link `?taskId=` is an 行动id and the 任务id is resolved at login (`fetchTaskIdFromAction`) — `TaskContext` now also stashes the raw `actionId`, so a url button can append either (default `task`). Page `TaskButtonsPage.tsx` (route `/page/strategy/admin/task-buttons`, **admin-gated**, entry「按钮管理」in the bottom-left settings dropdown of `components/page-sidebar.tsx`, both full + collapsed modes) has per-business tabs, edits name/type/target/启停/排序/增删, saves the **whole set atomically** (replace-all), plus 「导入默认」 to merge code-seed defaults. **Seed/fallback** (like 敏感词管理): only when the whole table is empty (fresh deploy, never saved) do the workspace + page fall back to `defaultTaskButtons(cfg)` — rwfx's url buttons (编辑/下一步/3q详情) built from the **live** `/api/public/config/task-deeplink` plus cross-business switch buttons for **all three** businesses (each switches to the other two — rwfx→三情/行动, 3qfx→任务/行动, xdfx→任务/三情). Once saved, the store is the sole source of truth. The old hardcoded jump buttons were migrated out: `TaskFxWorkspace` no longer hardcodes 切换到三情分析, `TaskActionsPanel` keeps only the non-jump 清除记录, and `TaskPurposePanel` dropped its 3q详情 button (now configurable) **and defaults the 目的树 table to collapsed** (chevron toggle). Helpers `core/auth/task-buttons.ts` (`TaskButton`, `defaultTaskButtons`, `resolveTaskButtons`, `buttonsForBusiness`, `runTaskButton`), client+hooks `strategy-components/api/task-buttons.ts`. Backend: `/api/task-buttons` (global/shared; open read, admin replace-all), store `deerflow.persistence.task_buttons` (table `task_buttons`, auto-created by `create_all`), wired `app.state.task_button_store`. Tests: `tests/test_task_buttons.py`.
|
- **技能地址管理 (Skill Address Management, admin-only)**: 扫描运行中的技能(`skills/{public,custom}` 下所有 `.md`/`.py`)里的 **http(s) URL 与 IP/IP:端口**,按唯一地址聚合全部出现位置(跨 .md/.py),支持**批量替换**(如把 UAT 地址一次性改成生产)。主体抽成可复用组件 `SkillAddressesPanel`(`pages/SkillAddressesPage.tsx` 导出,默认导出 `SkillAddressesPage` 仍保留旧路由 `/page/strategy/admin/skill-addresses` 作直链回退),**作为「技能地址管理」标签页嵌入管理员「技能管理」页 `pages/AdminSkillsPage.tsx`**(该页加 Tabs:「技能列表」+「技能地址管理」;入口在「设置和更多」下拉的「技能管理」`workspace-nav-menu.tsx` → `/page/workspace/admin/skills`,不再单列于 `components/page-sidebar.tsx` 左下角设置下拉):打开自动扫描并带**进度条**(扫描逐技能 / 应用逐文件 X/N,应对 150+ 技能),URL/IP 类型过滤 + 搜索 + 「片段批量套用」(如所有 `uat.4.cn` → `prod.4.cn`)、每地址「替换为」输入框(可展开看 `file:line` 片段)、内联**预览**、**应用**、**多关键词检索**(空格分隔全部命中),以及**修改记录**面板——每次应用生成一条记录(显示时间/改了哪些地址 from→to/文件数/处数),可**针对单次记录回退**(二次确认)。client + NDJSON 流式解析在 `strategy-components/api/skill-addresses.ts`。后端 `/api/skill-addresses`(**仅管理员**):所有文件 IO 走 `asyncio.to_thread` 不阻塞事件循环;`GET /scan`(+`/scan/stream`)、`POST /preview`、`POST /apply`(+`/apply/stream`)、`GET /backups`、`POST /rollback/{id}`;**子串安全替换**(基于 token span,不会误伤子串)、`expected_total` 乐观锁(409)、写前自动磁盘备份到 `{skills_root}/.address-edits/`(同时写一份 `{id}.manifest.json` 记录本次替换明细,供修改记录展示)、应用后刷新技能系统提示缓存。纯引擎 `deerflow/skills/address_scan.py`,router `app/gateway/routers/skill_addresses.py`,tests `tests/test_skill_addresses.py`。范围仅运行中技能,不动 `deploy/minimal/skills/`。
|
||||||
|
- **按钮管理 (Task Button Management, admin-only)**: configures the **可配置跳转按钮** rendered in the left task panel of the task deep-link workspaces (rwfx / 3qfx / xdfx, see `TaskFxWorkspace`). Each button = `{business, label, linkType, target, appendTaskId, idParam, idKind, openMode, loginParams, appendAuth, authTokenParam, authNameParam, enabled, sortOrder}`; `linkType` is `url` (外链 `window.open`, optional append of `?{idParam}={id}` — **`idParam` is the editable query-param name**, e.g. `id`/`task_id`), `business` (内部切换到另一业务, reuses `resolveTaskDeeplinkTarget`, always task id), or `purpose` (弹出当前任务的「任务目的」表格 via the shared `TaskPurposeDialog`, no target — configurable for any page incl. xdfx). **`url` buttons support two independent, coexisting login-append mechanisms**: (1) **`loginParams` (追加登录参数, like 应用管理/Light App Center)** — a list of `{key, source, customValue}` resolved at click time: `runTaskButton` reads `userInfo` (via `readUserInfo` from `strategy-components/lib/light-app`, embed-isolated through `authStorage`) and appends `?{key}={value}` for each (`source` = a userInfo field such as `accessToken`/`yUserId`, or `other` → literal `customValue`); empty list = nothing appended. Reuses `LOGIN_SOURCE_OPTIONS` from light-app; stored as JSON column `task_buttons.login_params_json` (`PortableJSON`, migration `20260625_01`). (2) **`appendAuth` (追加登录态)** — appends `?{authTokenParam}={token1}&{authNameParam}={username}` (default param names `token`/`username`) so the跳转目标外部系统 can identify the current user — e.g. `…/action/sentiment?token=<JWT>&username=lizhaoxing`. **Gated on token login**: `token1` = the `?authToken=` used by token-exchange login; `username` = the raw login name the backend resolved from `getTokenInfo`. Both are stashed at login by `persistLoginCredentials` into `login.token1`/`login.username` (`core/auth/login-credentials.ts`, scoped via [[scoped-storage]] so嵌入/独立会话隔离 + 随独立会话迁移). Only token login writes them → a non-token-login session has no `token1`, so `runTaskButton` silently skips the auth append (the jump still works, just without those two params). The frontend reads `username` straight from the new `UsernameLoginResponse.username` field (the stored email local-part is lossy — lowercased/normalized — so not used), **not** by decoding the JWT. Stored as columns `task_buttons.{append_auth, auth_token_param, auth_name_param}` (migration `20260625_02`). The admin page renders both editors for `url` buttons (loginParams 虚线框 + 追加登录态 switch). **`idKind` (`task`/`action`) only matters for xdfx**: its deep-link `?taskId=` is an 行动id and the 任务id is resolved at login (`fetchTaskIdFromAction`) — `TaskContext` now also stashes the raw `actionId`, so a url button can append either (default `task`). Page `TaskButtonsPage.tsx` (route `/page/strategy/admin/task-buttons`, **admin-gated**, entry「按钮管理」in the bottom-left settings dropdown of `components/page-sidebar.tsx`, both full + collapsed modes) has per-business tabs, edits name/type/target/启停/排序/增删, saves the **whole set atomically** (replace-all), plus 「导入默认」 to merge code-seed defaults. **Seed/fallback** (like 敏感词管理): only when the whole table is empty (fresh deploy, never saved) do the workspace + page fall back to `defaultTaskButtons(cfg)` — rwfx's url buttons (编辑/上一步/下一步/3q详情) built from the **live** `/api/public/config/task-deeplink` plus cross-business switch buttons for **all three** businesses (each switches to the other two — rwfx→三情/行动, 3qfx→任务/行动, xdfx→任务/三情). Once saved, the store is the sole source of truth. **Bottom 快捷跳转 bar groups by prev/next**: `TaskJumpBar` renders only「上一步/下一步」-type buttons in the bottom bar — a `prev` group (id 含 `prev` 或文案「上一步」, 描边次要样式 + ←图标) rendered **左侧**, then a `next` group (id 含 `next` 或文案「下一步」, 实心主色) on the **右侧** (container `justify-end`); everything else goes to the right-edge floating menu. The default 上一步 button (`rwfx-prev`, `url`, target = `DASHBOARD_AGENT_ROUTE` `/page/strategy/dashboard-agent`, `appendTaskId` + `idParam=taskId` → `?taskId=任务id`, `openMode=self`) 默认指向**应用内**「大屏绘制」页,在 **both** 单智能体 (`TaskFxWorkspace`) 与 多智能体会商 (`RoundtablePlanningPage` 深链 rwfx-A) 都显示(共用 `TaskJumpBar`)。**`runTaskButton` 的 `url` 类型支持应用内路由**:target 以单个 `/` 开头时按内部路由处理——`self` 走 react-router 同窗导航(不刷新),`blank` 拼成当前源的 hash 路由新标签打开;外链行为不变。 The old hardcoded jump buttons were migrated out: `TaskFxWorkspace` no longer hardcodes 切换到三Line truncated
|
||||||
|
- **实时并发监控 (Concurrency / System-Pressure Monitor, admin-only)**: a live panel mounted at the **top of the admin 排行榜 page** (`components/workspace/admin/concurrency-monitor.tsx` `ConcurrencyMonitorPanel`, rendered in `pages/AdminUserLeaderboardPage.tsx`) showing **当前并发的大模型调用数 + 列表(用户/智能体/类型/已运行时长)**, each row with a 「停止」button (and a 「全部停止」) that **truly aborts** that run's in-flight model stream via `RunManager.cancel` (`POST /api/admin/active-runs/{run_id}/cancel`) — to relieve pressure when 使用人数过多. Two line charts (minute/hour toggle): **并发量折线图** (peak/avg, `GET /api/admin/active-runs/concurrency`, fed by a lightweight background sampler into `concurrency_samples`) and **大模型出字速度折线图** (tokens/sec, `GET /api/admin/active-runs/token-speed`, aggregated from `llm_call_metrics`) so a dip pinpoints where the bottleneck is. A **「后台采样」Switch** (`system_settings.json → concurrency_monitor.enabled`, **default off / opt-in**, `GET|PUT /api/admin/active-runs/settings`) turns the background sampling on/off **at runtime, no restart** (the live concurrency count + 「停止」 work even while sampling is off — only the 并发量 history chart needs it on); everything is designed to **never impact production** (one tiny INSERT/15s, retention-purged, best-effort). Client/hooks: `core/admin/active-runs.ts` + `core/admin/hooks.ts` (`useActiveRuns`/`useConcurrencySeries`/`useTokenSpeedSeries`/`useCancel*`/`useMonitorSettings`). See the backend CLAUDE.md「Admin Concurrency Monitor」.
|
||||||
|
- **会话冲突 409 中文化**: when a user submits a new question while the previous turn is still streaming, the backend's `RunManager.create_or_reject` rejects with HTTP 409 (`services.py` now returns a **Chinese** detail「当前对话还在生成回答…」). `core/threads/hooks.ts` `onError` detects the conflict (`isActiveRunConflictError`: 409 / "already has an active run" / the Chinese text) and shows a friendly `toast.info` instead of a raw error.
|
||||||
- **State**: TanStack Query for server state, context providers (`SubtasksProvider`, `ArtifactsProvider`, `PromptInputProvider`) scoped to `WorkspaceRoutes`
|
- **State**: TanStack Query for server state, context providers (`SubtasksProvider`, `ArtifactsProvider`, `PromptInputProvider`) scoped to `WorkspaceRoutes`
|
||||||
- **LLM streaming**: `@langchain/langgraph-sdk` streams messages from the backend via SSE
|
- **LLM streaming**: `@langchain/langgraph-sdk` streams messages from the backend via SSE
|
||||||
- **UI**: Radix UI primitives + TailwindCSS v4 + shadcn-style components in `src/components/ui/`
|
- **UI**: Radix UI primitives + TailwindCSS v4 + shadcn-style components in `src/components/ui/`
|
||||||
- **Shims**: `src/shims/` provides `next/link` and `next/navigation` polyfills (original code was Next.js)
|
- **Shims**: `src/shims/` provides `next/link` and `next/navigation` polyfills (original code was Next.js)
|
||||||
- **Login URL params** (`LoginPage.tsx`, frontend-only — the backend never sees these): besides the auth params (`ticket`/`userId`/`env`/`theme`/`yUserId`/`token`/`access_token`/`authToken`/`password`), the page supports a **task deep-link** via `?taskId=&goPath=`. After login it calls the consumer API `GET {VITE_AIPI_CONSUMER_URL}/taskAnalyseSearch/cop-task-detail?taskId=` (header `Authorization: Bearer admin`, auto-injected by `utils/request.ts`), stashes the full `data` (`id/overview/taskDirection/taskName/taskContent`) into `sessionStorage["login.copTaskDetail"]`, then routes by `goPath`: base codes `3qfx`/`rwfx`/`xdfx` → that business's configured **single agent** Q&A inside a **任务工作区** (resolved via `/api/business-mapping`; `resolveTaskDeeplinkTarget` calls `persistTaskContext({taskId, agentId, openingText})` and navigates to the `…/chats` **index**, which opens the latest task conversation or 新建 — a 1:N task↔对话 workspace, NOT `pendingAgentMessage`); the `-A` suffix (`3qfx-A`/…) → **multi-agent roundtable** with `roundtablePrefill.businessCode` so the page auto-selects the configured 业务链条. **xdfx's deep-link `?taskId=` is actually an 行动id, not a 任务id** — `resolveDeeplinkTaskId(goPath, rawId)` (called in `LoginPage` before everything) detects `xdfx`/`xdfx-A` and resolves it via `GET {action_detail_url}/{actionId}` → `data.taskId` (`fetchTaskIdFromAction`; `action_test`+`mock.action_detail` for offline testing); the resolved 任务id then drives `cop-task-detail`, the purpose tree, and the 1:N binding (other businesses pass the id through unchanged). goPath→businessCode: `3qfx`→`3Q`, `rwfx`→`6BF`, `xdfx`→`7BF`. The roundtable target also threads the URL `taskId` into `roundtablePrefill.taskId` (`resolveTaskDeeplinkTarget(goPath, detail, taskId)`), which turns on two taskId-scoped behaviors: (1) **separate, unpartitioned per-task storage** — taskId 会商聊天记录 live in their **own** store/table (`roundtable_task_drafts`), keyed **only by `task_id`** (one taskId = many records, shared across users, **no user 分权** at all; `created_by` is audit-only), kept entirely out of the per-user personal store (`roundtable_drafts`, now strictly per-user) so the two never mix. Backend router `/api/roundtable-task-drafts` (`GET /by-task/{id}` + `/by-task/{id}/latest`, `POST`, `GET/PUT/DELETE /{id}` — all user-agnostic); frontend client `roundtable-planning/api/task-drafts.ts`, and `useDraftPersistence`/`useRoundtableDrafts` route **all** CRUD to it when a `taskId` is present (else the personal `drafts.ts`). The matching **background jobs** are shared by task too: `roundtable_jobs.task_id` marks a task job; reads/dedup/stream/resume/cancel pass `?task_id=` so any user opening the task sees the same running 研讨 (progress/flowchart), and the executor writes the final report back to the task-draft store. Existing rows are moved over by `scripts/migrate_roundtable_task_drafts.py` (migration `20260618_01`). The history dropdown filters to the task and 新建 keeps the binding; (2) **Step-3 auto structured output** — after the `roundtable-summary` agent writes the Markdown report it automatically runs a second round emitting a `flow-json` flowchart (`useStep3Summary` `autoFlow`+`chainLevels`), whose hierarchy follows the business chain's stage goals (任务 → 目的 → 行为体 → …; coordinatorPrompt-specified hierarchy wins) and whose nodes never carry 阶段编号/阶段名 (the prior bug). **Both targets render embedded under the 任务管理 layout** — nested routes under `task-management/<business-path>/{roundtable,agent/:agent_id/chats}` in `StrategyRoutes.tsx` (`<business-path>` = `plan-task-sentiment` / `plan-task/plan-task-fx` / `plan-task/plan-task-action`, matching the COH中任务 menu paths in `sidebar-menu.ts`) so the global sidebar keeps 任务管理 → COH中任务 → the matching business highlighted. **All three single-agent businesses share `TaskFxWorkspace`** (`task-components/TaskFxWorkspace.tsx`): left = a「当前任务」card (`readCopTaskDetail()` 任务名称 + 简介, desensitized, 留存 above 新建对话) + per-task 1:N conversation list (`useTaskThreads(taskId, agentId)` — filtered by **both** `metadata.taskId` AND `metadata.agent_id` so the three businesses' conversations stay isolated even though they share one taskId) + 新建对话; the `…/chats` index (`TaskFxIndexResolver`) opens the latest task thread or 新建. The right `:thread_id` host differs by business: **rwfx** → `TaskFxChat` (`AgentChatPage taskGate`) = full workspace (non-`lite`): 目的树闸门 panel + 清除记录 (placed under 新建对话); **xdfx** → also `TaskFxChat` (same 目的树闸门 query+display, same `purpose_detail_url`) but workspace passed `lite`; **3qfx** → `TaskBindChat` (`AgentChatPage taskBind`, `lite`) = 1:N list only, no gate, and 新建对话 **auto-sends** the task opening text (`taskAutoSendText`; gate Line truncated
|
- **Login URL params** (`LoginPage.tsx`, frontend-only — the backend never sees these): besides the auth params (`ticket`/`userId`/`env`/`theme`/`yUserId`/`token`/`access_token`/`authToken`/`password`), the page supports a **task deep-link** via `?taskId=&goPath=`. After login it calls the consumer API `GET {VITE_AIPI_CONSUMER_URL}/taskAnalyseSearch/cop-task-detail?taskId=` (header `Authorization: Bearer admin`, auto-injected by `utils/request.ts`), stashes the full `data` (`id/overview/taskDirection/taskName/taskContent`) into `sessionStorage["login.copTaskDetail"]`, then routes by `goPath`: base codes `3qfx`/`rwfx`/`xdfx` → that business's configured **single agent** Q&A inside a **任务工作区** (resolved via `/api/business-mapping`; `resolveTaskDeeplinkTarget` calls `persistTaskContext({taskId, agentId, openingText})` and navigates to the `…/chats` **index**, which opens the latest task conversation or 新建 — a 1:N task↔对话 workspace, NOT `pendingAgentMessage`); the `-A` suffix (`3qfx-A`/…) → **multi-agent roundtable** with `roundtablePrefill.businessCode` so the page auto-selects the configured 业务链条. **xdfx's deep-link `?taskId=` is actually an 行动id, not a 任务id** — `resolveDeeplinkTaskId(goPath, rawId)` (called in `LoginPage` before everything) detects `xdfx`/`xdfx-A` and resolves it via `GET {action_detail_url}/{actionId}` → `data.taskId` (`fetchTaskIdFromAction`; `action_test`+`mock.action_detail` for offline testing); the resolved 任务id then drives `cop-task-detail`, the purpose tree, and the 1:N binding (other businesses pass the id through unchanged). **xdfx additionally partitions its chat records by 行动id (action_id), NOT by task_id**: `resolveTaskDeeplinkTarget` sets `partitionByAction:true` + keeps the raw action_id as `TaskContext.actionId`, so new threads are tagged `metadata.{taskId,actionId}` (taskId kept only to preserve the backend「任务深链对话全局共享」semantics, which keys off `metadata.taskId`) and the conversation list filters by `actionId` (+`agent_id`) — different actions of the same task get separate lists. xdfx's first-question opening text also appends `行动id(action_id)为…` (see `buildOpeningText` / `taskThreadMetadata`). goPath→businessCode: `3qfx`→`3Q`, `rwfx`→`6BF`, `xdfx`→`7BF`. The roundtable target also threads the URL `taskId` into `roundtablePrefill.taskId` (`resolveTaskDeeplinkTarget(goPath, detail, taskId)`), which turns on two taskId-scoped behaviors: (1) **separate, unpartitioned per-task storage** — taskId 会商聊天记录 live in their **own** store/table (`roundtable_task_drafts`), keyed **only by `task_id`** (one taskId = many records, shared across users, **no user 分权** at all; `created_by` is audit-only), kept entirely out of the per-user personal store (`roundtable_drafts`, now strictly per-user) so the two never mix. Backend router `/api/roundtable-task-drafts` (`GET /by-task/{id}` + `/by-task/{id}/latest`, `POST`, `GET/PUT/DELETE /{id}` — all user-agnostic); frontend client `roundtable-planning/api/task-drafts.ts`, and `useDraftPersistence`/`useRoundtableDrafts` route **all** CRUD to it when a `taskId` is present (else the personal `drafts.ts`). The matching **background jobs** are shared by task too: `roundtable_jobs.task_id` marks a task job; reads/dedup/stream/resume/cancel pass `?task_id=` so any user opening the task sees the same running 研讨 (progress/flowchart), and the executor writes the final report back to the task-draft store. Existing rows are moved over by `scripts/migrate_roundtable_task_drafts.py` (migration `20260618_01`). The history dropdown filters to the task and 新建 keeps the binding; (2) **Step-3 auto structured output** — after the `roundtable-summary` agent writes the Markdown report it automatically runs a second round emitting a `flow-json` flowchart (`useStep3Summary` `autoFlow`+`chainLevels`), whose hierarchy follows the business chain's stage goals (任务 → 目的 → 行为体 → …; coordinatorPrompt-specified hierarchy wins) and whose nodes never carry 阶段编号/阶段名 (the prior bug). **Both targets render embedded under the 任务管理 layout** — nested routes under `task-management/<business-path>/{roundtable,agent/:agent_id/chats}` in `StrategyRoutes.tsx` (`<business-path>` = `plan-task-sentiment` / `plan-task/plan-task-fx` / `plan-task/plan-task-action`, matching the COH中任务 menu paths in `sidebar-menu.ts`) so the global sidebar keeps 任务管理 → COH中任务 → the matching business highlighted. **All three single-agent businesses share `TaskFxWorkspace`** (`task-components/TaskFxWorkspace.tsx`): left = a「当前任务」card (`readCopTaskDetail()` 任务名称 + 简介, desensitized, 留存 above 新建对话) + per-task 1:N conversation list (`useTaskThreads(taskId, agentId, actionId?)` — filtered by **both** `metadata.taskId` AND `metadata.agent_id` so the three businesses' conversations staLine truncated
|
||||||
- **iframe 嵌入模式 (外部系统用 iframe 套用深链问答/会商)** — 三个**按标签页**开关,全部由深链 URL 参数开启、存进同一份 `sessionStorage` 会话(`embed.session`,键名常量在 `core/embed/embed-session.ts`),跨登录跳转/刷新/页内导航存活,**绝不跨标签污染**同浏览器另开的正常系统页。核心隔离手法:用 `sessionStorage`(按标签页/浏览上下文隔离,iframe 即便同源也有独立一份)而非 `localStorage`(跨标签共享)。开关:(1) **`?embed=1`(可带 `&theme=`)** — 去全局 chrome(`PageLayout` 的 `pageSidebarAllowed && !isEmbedActive()` → 隐藏 Header + PageSidebar)+ 按外部主题色**强制**明/暗:走 next-themes 的 `forcedTheme`(`App.tsx` `AppProviders` 调 `resolveForcedEmbedTheme`,**不写** localStorage `strategy-theme`),离散映射 `dark-blue`/`dark`→深、其余→浅;嵌入侧**绝不**调 `setTheme`/`persistSidebarEnabled`(那俩落 localStorage 跨标签污染,`LoginPage` 据 `readEmbedParam` 跳过)。(2) **`?hideJump=1`** — 隐藏深链底部「快捷跳转」栏 `TaskJumpBar` 的两部分(底部「下一步」等按钮 + 右侧垂直居中悬浮菜单),单智能体问答 + 会商共用该栏,`isJumpBarHidden()` 为真时整条 `return null`。(3) **登录用户隔离** — 嵌入态下鉴权/身份键(`deerflow.auth` token、`userInfo`、`login.*`、`tools_token`、maxkey/userDetail token)全部经 `core/auth/scoped-storage.ts` 的 `authStorage()`(嵌入→sessionStorage / 正常→localStorage)读写,使 iframe 里登录的用户与正常登录用户**完全隔离**、互不覆盖;所有 token 读取都过 `getStoredAuth()`/`getAuthorizationHeaderValue()`(API 客户端 `core/api/*` 全走这俩),改中心函数即让全体调用方自动隔离;跨标签账号变更监听 `AuthSyncWatcher`(`core/auth/sync.tsx`)在嵌入态禁用。嵌入会话在 `main.tsx` 渲染前 `syncEmbedSessionFromCurrentUrl()` 同步启用(早于任何鉴权写入,避免首帧 effect 顺序漏写 localStorage);`AppProviders` 的 effect 再按 SPA 导航同步。`embed=0`/`hideJump=0` 可显式关闭。正常(非嵌入)标签页所有 `isXxx()` 恒 false,行为**零变化**。第三个开关 `?isolate=1`(**独立登录会话**)把同一套**登录用户隔离**单独提供给**普通(带 chrome)标签页**——只切换鉴权存储、不去 chrome / 不强制主题 / 不动跳转栏:`authStorage()` 的条件从「仅嵌入」放宽为 `isEmbedActive() || isIsolatedSession()`,`AuthSyncWatcher` 的跨标签监听对嵌入态**或**独立态都即时忽略(handler 内实时判,运行时开关也即刻生效)。除 URL 参数外,**设置 → 外观 →「登录会话」** 有一个 Switch「独立登录会话(本标签页)」运行时切换(`setIsolatedSession`,`appearance-settings-page.tsx`):**开启时先 `migrateAuthToSession()`**(`scoped-storage.ts`,把 localStorage 的受保护键 `deerflow.auth`/`userInfo`/`userId`/`tools_token` + `login.*` 前缀快照搬进 sessionStorage)再翻标志,故无感不登出;此后本标签页登录态独立——别处登录/换号影响不到它,它换号也影响不到别人,但关掉该标签即结束(需重登)。开启给 toast 提示。
|
- **iframe 嵌入模式 (外部系统用 iframe 套用深链问答/会商)** — 三个**按标签页**开关,全部由深链 URL 参数开启、存进同一份 `sessionStorage` 会话(`embed.session`,键名常量在 `core/embed/embed-session.ts`),跨登录跳转/刷新/页内导航存活,**绝不跨标签污染**同浏览器另开的正常系统页。核心隔离手法:用 `sessionStorage`(按标签页/浏览上下文隔离,iframe 即便同源也有独立一份)而非 `localStorage`(跨标签共享)。开关:(1) **`?embed=1`(可带 `&theme=`)** — 去全局 chrome(`PageLayout` 的 `pageSidebarAllowed && !isEmbedActive()` → 隐藏 Header + PageSidebar)+ 按外部主题色**强制**明/暗:走 next-themes 的 `forcedTheme`(`App.tsx` `AppProviders` 调 `resolveForcedEmbedTheme`,**不写** localStorage `strategy-theme`),离散映射 `dark-blue`/`dark`→深、其余→浅;嵌入侧**绝不**调 `setTheme`/`persistSidebarEnabled`(那俩落 localStorage 跨标签污染,`LoginPage` 据 `readEmbedParam` 跳过)。(2) **`?hideJump=1`** — 隐藏深链底部「快捷跳转」栏 `TaskJumpBar` 的两部分(底部「下一步」等按钮 + 右侧垂直居中悬浮菜单),单智能体问答 + 会商共用该栏,`isJumpBarHidden()` 为真时整条 `return null`。(2.5) **`?hideChrome=1`** — **仅**去全局 chrome(Header 导航栏 + PageSidebar 侧边栏),**不**强制主题、**不**隔离鉴权(区别于 `embed`:只想要一个干净全屏页面,如「大屏绘制」`/page/strategy/dashboard-agent?taskId=…&hideChrome=1`)。新增 `EmbedSession.hideChrome` 字段 + `readHideChromeParam()` + `isChromeHidden()`(取 `embed || hideChrome` 之并),与 `hideJump` 完全对称;`PageRoutes.tsx` 的 `PageLayout` 把 `chromeHidden`(`isChromeHidden() || readHideChromeParam(location.search)==="on"`)并入 `pageSidebarAllowed`,且其**优先级高于** dashboard-agent 路由原本的强制全局 chrome(`forceChromeForDashboardAgent`)。`hideChrome=0` 可显式关闭。(3) **登录用户隔离** — 嵌入态下鉴权/身份键(`deerflow.auth` token、`userInfo`、`login.*`、`tools_token`、maxkey/userDetail token)全部经 `core/auth/scoped-storage.ts` 的 `authStorage()`(嵌入→sessionStorage / 正常→localStorage)读写,使 iframe 里登录的用户与正常登录用户**完全隔离**、互不覆盖;所有 token 读取都过 `getStoredAuth()`/`getAuthorizationHeaderValue()`(API 客户端 `core/api/*` 全走这俩),改中心函数即让全体调用方自动隔离;跨标签账号变更监听 `AuthSyncWatcher`(`core/auth/sync.tsx`)在嵌入态禁用。嵌入会话在 `main.tsx` 渲染前 `syncEmbedSessionFromCurrentUrl()` 同步启用(早于任何鉴权写入,避免首帧 effect 顺序漏写 localStorage);`AppProviders` 的 effect 再按 SPA 导航同步。`embed=0`/`hideJump=0` 可显式关闭。正常(非嵌入)标签页所有 `isXxx()` 恒 false,行为**零变化**。第三个开关 `?isolate=1`(**独立登录会话**)把同一套**登录用户隔离**单独提供给**普通(带 chrome)标签页**——只切换鉴权存储、不去 chrome / 不强制主题 / 不动跳转栏:`authStorage()` 的条件从「仅嵌入」放宽为 `isEmbedActive() || isIsolatedSession()`,`AuthSyncWatcher` 的跨标签监听对嵌入态**或**独立态都即时忽略(handler 内实时判,运行时开关也即刻生效)。除 URL 参数外,**设置 → 外观 →「登录会话」** 有一个 Switch「独立登录会话(本标签页)」运行时切换(`setIsolatedSession`,`appearance-settings-page.tsx`):**开启时先 `migrateAuthToSession()`**(`scoped-storage.ts`,把 localStorage 的受保护键 `deerflow.auth`/`userInfo`/`userId`/`tools_token` + `login.*` 前缀快照搬进 sessionStorage)再翻标志,故无感不登出;此后本标签页登录态独立——别处登录/换号影响不到它,它换号也影响不到别人,但关掉该标签即结束(需重登)。开启给 toast 提示。
|
||||||
|
- **操作日志(Y-Log)上报** — 用户的关键操作(登录登出/查询/查看/增删改/启停/导入导出/问答等)成功后,**前端直连**外部接口 `POST {write_url}`(默认 `https://ch1.b.uat.4.cn/api/y-log/write`)记一条审计日志。核心模块 `src/core/log/`:`y-log.ts`(`writeYLog(params)` + `OptType` 枚举 0/1/3..12;**异步即发即忘、永不 await、永不抛错、失败静默**,自动把完整 url 转相对路径去 ip/host、对象入参/返回自动 `JSON.stringify` + 50k 裁剪、`optResult` 恒 0 只报成功),`y-log-config.ts`(从公开只读 `GET /api/public/config/y-log` 拉 `{enabled, writeUrl}`,模块级缓存 + 去重 + 默认兜底;`App.tsx` `AppProviders` 启动预热 `fetchYLogConfig()`),`y-log-token.ts`(token1 = token 登录的 `?authToken=`,经 [[scoped-storage]] 的 `authStorage*` 存取,嵌入态自动隔离)。**双门控**:仅当①存在 token1(即用 token 登录,`LoginPage` 成功后 `persistYLogToken(authToken)`,登出 `account-settings-page.tsx` 先报后清 token1)且②配置 `enabled && writeUrl` 才上报;否则一律不发。`optDetail` 统一「CM助手-全量-…」(**禁内部框架名**)。埋点**广覆盖**各 API client 的成功路径——原则是「一个用户操作(查看/查询/新增/编辑/删除/启停/导入导出)= 一条日志」,每个 API client 的**单条详情 GET(查看→view 4)/ 列表查询 GET(search 3)/ 新增 POST(create 9)/ 改 PUT·PATCH(edit 5)/ 删 DELETE(delete 6)/ 启停(enabled 11 / disabled 10)/ 导入导出(import 7 / export 8)**都各落一条,仅跳过高频 typeahead/状态轮询/纯 bootstrap config 读。覆盖文件:`strategy-components/api/{sensitive-words,menu-overrides,task-buttons,skill-addresses,light-apps,business-mapping}.ts`、`roundtable-planning/api/{drafts,task-drafts,roundtable-jobs,recommend,chains,multi-agent,dashboard-sessions}.ts`、`core/{agents,scheduled-tasks,knowledge,positions,tags,studio,system-settings,memory,mcp,models,custom-prompts,user-preferences,notifications,recommended-questions,user-qa,curator,admin,thread-shares,roundtable-draft-shares,tool-metrics,llm-metrics,note,artifacts}/api.ts`、`core/api/markdown-docx-export.ts`。**问答(Q&A)改为「一次大模型调用 = 一条日志」**:在共享的 `core/threads/hooks.ts` `useThreadStream` 的 `onLangChainEvent` 里监听 `on_chat_model_end`,每次模型调用结束就上报一条(optType 12,`reqParam` 取本次 input 的最后一条 user 文本 + 模型名,`returnParam` 取本次输出文本)——一个问答轮次里 lead agent / 子代理的**每次** LLM 调用都各记一条,覆盖所有走 `useThreadStream` 的页面(`ChatPage`/`AgentChatPage`/创建智能体/iframe/会商等);`ChatPage`/`AgentChatPage` 的 `onFinish` 仍额外保留一条轮次汇总。后端仅新增公开只读配置:`deerflow/config/y_log_config.py`(`YLogConfig{enabled,write_url}`)挂到 `AppConfig.y_log`,`app/gateway/routers/public_config.py` 加 `GET /api/public/config/y-log`,地址写在 `config.yaml` 的 `y_log` 段(mtime 热重载,前端无需重建);**不做后端代理**。Tests:`tests/test_y_log_config.py`。
|
||||||
|
|
||||||
### Configuration
|
### Configuration
|
||||||
|
|
||||||
|
|||||||
@@ -37,6 +37,10 @@
|
|||||||
# 默认真实接口(未设/false);改成 true 时该接口走本地假数据(consumer 外网不可达时调试用)。
|
# 默认真实接口(未设/false);改成 true 时该接口走本地假数据(consumer 外网不可达时调试用)。
|
||||||
# 与 VITE_USE_REAL_DATA 独立。改后需重启 dev / 重新打包生效。
|
# 与 VITE_USE_REAL_DATA 独立。改后需重启 dev / 重新打包生效。
|
||||||
# VITE_MOCK_COP_TASK_DETAIL=false
|
# VITE_MOCK_COP_TASK_DETAIL=false
|
||||||
|
# VITE_POSITION_ROUNDTABLE_DEMO_MODE=false
|
||||||
|
# true=免登录直达岗位分析,完全使用前端 JSON,不请求任何后台接口。
|
||||||
|
# 仅限离线演示环境;生产环境请保持 false。
|
||||||
|
# VITE_POSITION_ROUNDTABLE_STANDALONE_MODE=false
|
||||||
|
|
||||||
# MaxKey 鉴权根地址(无界 onlineTicket 换 token)
|
# MaxKey 鉴权根地址(无界 onlineTicket 换 token)
|
||||||
# VITE_AUTH_BASE_URL=https://auth.y.sit.4.cn
|
# VITE_AUTH_BASE_URL=https://auth.y.sit.4.cn
|
||||||
@@ -50,4 +54,6 @@
|
|||||||
# 可选
|
# 可选
|
||||||
# VITE_CANVAS_LANGGRAPH_BASE_URL=
|
# VITE_CANVAS_LANGGRAPH_BASE_URL=
|
||||||
# VITE_STATIC_WEBSITE_ONLY=
|
# VITE_STATIC_WEBSITE_ONLY=
|
||||||
|
# 部署级紧凑导航:true 时固定收起工作台左侧栏,并隐藏换肤与全量/简洁模式切换。
|
||||||
|
# VITE_FORCE_COLLAPSED_SIDEBAR=false
|
||||||
# VITE_GITHUB_OAUTH_TOKEN=
|
# VITE_GITHUB_OAUTH_TOKEN=
|
||||||
@@ -14,8 +14,8 @@ VITE_MOCK_SQ_REPORT=false
|
|||||||
VITE_MOCK_COP_TASK_DETAIL=false
|
VITE_MOCK_COP_TASK_DETAIL=false
|
||||||
|
|
||||||
# Gateway / DeerFlow API
|
# Gateway / DeerFlow API
|
||||||
VITE_BACKEND_BASE_URL=http://47.88.25.99:7001
|
VITE_BACKEND_BASE_URL=http://10.19.200.5:2026
|
||||||
VITE_LANGGRAPH_BASE_URL=http://47.88.25.99:7001/api
|
VITE_LANGGRAPH_BASE_URL=http://10.19.200.5:2026/api
|
||||||
|
|
||||||
# 轻应用「新建笔记」系列接口
|
# 轻应用「新建笔记」系列接口
|
||||||
VITE_NOTE_API_BASE_URL=http://47.88.25.99:8000
|
VITE_NOTE_API_BASE_URL=http://47.88.25.99:8000
|
||||||
@@ -42,7 +42,7 @@ VITE_AIPI_BACKENP_URL=http://47.88.25.99:8000
|
|||||||
# VITE_AIPI_FRONTEND_URL=https://knowledgetoolserver.b.uat.4.cn
|
# VITE_AIPI_FRONTEND_URL=https://knowledgetoolserver.b.uat.4.cn
|
||||||
VITE_NOTEBOOK_API_BASE_URL=http://47.88.25.99:8000
|
VITE_NOTEBOOK_API_BASE_URL=http://47.88.25.99:8000
|
||||||
VITE_AIPI_FRONTEND_URL=http://47.88.25.99:3000
|
VITE_AIPI_FRONTEND_URL=http://47.88.25.99:3000
|
||||||
VITE_AIPI_CONSUMER_URL=https://ch1.b.uat.4.cn/consumer
|
VITE_AIPI_CONSUMER_URL=http://10.19.200.5:8002/consumer
|
||||||
# A 系统跳转地址(人物/组织/事件等列表项打开链接)
|
# A 系统跳转地址(人物/组织/事件等列表项打开链接)
|
||||||
VITE_AIPI_PRESENT_URL=http://present.a.uat.4.cn/present/domain
|
VITE_AIPI_PRESENT_URL=http://present.a.uat.4.cn/present/domain
|
||||||
# B 系统知识库 iframe 根地址
|
# B 系统知识库 iframe 根地址
|
||||||
|
|||||||
@@ -0,0 +1,46 @@
|
|||||||
|
**Comparison target**
|
||||||
|
|
||||||
|
- Source visual truth (dark intelligent-agent list): `C:/Users/董宏凯/AppData/Local/Temp/codex-clipboard-75f6ce1c-cd70-4b8c-a80a-a3d100105c69.png`
|
||||||
|
- Additional source references: `C:/Users/董宏凯/AppData/Local/Temp/codex-clipboard-00567484-ba8a-4595-b386-52e1467ae9cf.png` (segmented switch), `C:/Users/董宏凯/AppData/Local/Temp/codex-clipboard-02808803-05ba-4f2c-be50-c72b484a9f06.png` (business-chain node card), `C:/Users/董宏凯/AppData/Local/Temp/codex-clipboard-adf38fec-7baf-4d01-9c73-bdbae94b774e.png` (business-chain selector)
|
||||||
|
- Implementation screenshots: `C:/Users/董宏凯/AppData/Local/Temp/position-roundtable-revised-light.png`, `C:/Users/董宏凯/AppData/Local/Temp/position-roundtable-revised-dark.png`
|
||||||
|
- Full-view comparison evidence: `C:/Users/董宏凯/AppData/Local/Temp/position-roundtable-revised-comparison.png`
|
||||||
|
- Viewport: 1280 × 720. Light route: `#/page/strategy/qa/position-roundtable`; dark embedded route: `#/page/strategy/qa/position-roundtable?embed=1&theme=dark`.
|
||||||
|
- State: local browser has no authenticated API session. The original intent API is invoked and reports `Authentication required`; business-chain and agent endpoints return no usable data.
|
||||||
|
|
||||||
|
**Findings**
|
||||||
|
|
||||||
|
- [P1] Populated agent and business-chain states cannot be compared yet.
|
||||||
|
Location: right agent list and non-planning-role chain diagram.
|
||||||
|
Evidence: reference images show populated cards and nodes; the implementation has `0 个` agents and no available business chain in the unauthenticated preview.
|
||||||
|
Impact: card density, selected-card indicator, chain node flow, and agent-detail transition cannot be truthfully verified against live data.
|
||||||
|
Fix: verify the route in an authenticated session with at least one public chain and tagged agents.
|
||||||
|
|
||||||
|
**Open Questions**
|
||||||
|
|
||||||
|
- The final business-chain stage arrangement is still pending product confirmation. The compact graph maps whatever stage configuration is returned, while intentionally omitting dependency-label text as requested.
|
||||||
|
|
||||||
|
**Implementation Checklist**
|
||||||
|
|
||||||
|
1. Left task panel is now display-only and retains its independent position-roundtable task adapter.
|
||||||
|
2. Business-chain selection uses the original roundtable card/radio/relationship-entry pattern.
|
||||||
|
3. Every position uses the original `useStep1Intent` interface and `Step1Panel` message list/input panel; only the position header changes.
|
||||||
|
4. The right switch now uses the exact `课题研究 / ai写作` segmented-control treatment (light gray track, white active state; dark blue glass equivalent).
|
||||||
|
5. The embedded layout widens the left panel to 360px and applies the deep-blue right-panel tokens used by the reference.
|
||||||
|
6. Other roles render a taller top-to-bottom card-node flow without dependency labels. The canvas supports mouse-drag panning, and each node retains only a name plus a single-line description.
|
||||||
|
|
||||||
|
**Follow-up Polish**
|
||||||
|
|
||||||
|
- [P3] If live content is unusually long, tune the compact flow node width or horizontal scrolling after seeing the production chain data.
|
||||||
|
|
||||||
|
**Comparison history**
|
||||||
|
|
||||||
|
- Iteration 1: task fields were editable and the right TDesign card tabs looked unlike the reference. Replaced the task form with display-only information and replaced the tabs with the existing `课题研究 / ai写作` segmented switch.
|
||||||
|
- Iteration 2: business-chain selection was a dropdown and the flow was vertical avatar chips. Replaced it with original-roundtable selection cards and compact business-chain configuration-style node cards with link lines but no dependency labels.
|
||||||
|
- Iteration 3: dark right-panel background differed from the supplied deep-blue reference. Applied the `#032650` / `#042b59` / `#2b8ffe` token family and captured the revised embedded dark state in the full-view comparison.
|
||||||
|
- Iteration 4: removed the custom disabled input from non-planning positions and reused the original roundtable input panel. Enlarged the left flow viewport, retained its connection lines, and removed node level/seat/status metadata.
|
||||||
|
- Iteration 5: converted the compact flow from left-to-right to top-to-bottom. Added mouse-drag panning and single-line description truncation; populated-chain visual QA remains blocked by the unauthenticated preview.
|
||||||
|
- Iteration 6: constrained the flow canvas to its card viewport, narrowed nodes from 190px to 158px, and realigned branch gaps plus connector anchors to prevent clipping and offset lines.
|
||||||
|
|
||||||
|
**Final result**
|
||||||
|
|
||||||
|
blocked
|
||||||
@@ -0,0 +1,507 @@
|
|||||||
|
# AI 写作「对话驱动写作台」实现方案(可落地版)
|
||||||
|
|
||||||
|
> 需求:**复制**现有 AI 写作代码,新增一个独立页面(**原页面/原路由零改动**)。在新页面里
|
||||||
|
> **大改交互流程**——去掉「素材收集 / 大纲规划 / 作家写作 / 编辑审核」四个阶段干预卡里的**输入框**,
|
||||||
|
> 只**保留原来的确认按钮**;在页面**底部新增一个统一的多行智能输入框**,具备**强意图理解**能力:
|
||||||
|
> 重新搜索、新增检索词、添加检索素材、重新规划大纲、按要求改大纲、提修改意见、审核意见、
|
||||||
|
> 素材不足继续搜集、对写作内容提问……**覆盖现有全部交互甚至更多**。
|
||||||
|
>
|
||||||
|
> 交互节奏不变:**一步一确认**——进行到某个专家阶段时,交互就针对该专家(阶段作用域);
|
||||||
|
> 用户可以**点原来的确认按钮**,也可以**在底部输入框里发「继续下一步」的意图**推进。
|
||||||
|
> 意图**拿不准时**主动向用户**发起协助/澄清**,绝不盲目触发高代价动作(定稿 / 重搜等)。
|
||||||
|
|
||||||
|
本文是**实现指引**,落地时按第 9 节路线图分阶段推进。文中所有文件路径、符号名均对齐当前代码。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. 现状梳理(改造地基)
|
||||||
|
|
||||||
|
现有 AI 写作是一套**独立 LangGraph 子系统**(不是 lead_agent),前后端都已成型、可复用。
|
||||||
|
|
||||||
|
### 1.1 后端 `ai_writing` graph
|
||||||
|
|
||||||
|
- 图工厂:`offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/graph.py`
|
||||||
|
(`make_ai_writing_graph`,registered as `assistant_id="ai_writing"`)
|
||||||
|
- 状态:`.../ai_writing/state.py`(`AIWritingState`)
|
||||||
|
- 四个「阶段大脑」节点:
|
||||||
|
|
||||||
|
| 阶段 | 节点 | 文件 |
|
||||||
|
|------|------|------|
|
||||||
|
| 素材收集 | `researcher` | `nodes/researcher.py` |
|
||||||
|
| 大纲规划 | `writer_outline` | `nodes/writer_outline.py` |
|
||||||
|
| 作家写作 | `writer_draft` | `nodes/writer_draft.py` |
|
||||||
|
| 编辑审核 | `editor` | `nodes/editor.py` |
|
||||||
|
|
||||||
|
- **五个暂停点**(`interrupt()`,`Command(resume=payload)` 续跑)——这是对话改造的核心可复用资产:
|
||||||
|
|
||||||
|
| pause_point | 语义 | 现有 action |
|
||||||
|
|-------------|------|-------------|
|
||||||
|
| `material_confirm` | 素材确认 | `confirm` / `re_search` / `enable_skill_search` |
|
||||||
|
| `outline_confirm` | 大纲确认 | `confirm` / `re_outline` |
|
||||||
|
| `draft_confirm` | 草稿确认 | `to_editor` / `finalize` / `user_revise` |
|
||||||
|
| `review_confirm` | 编辑打回确认 | `accept_review` / `force_finalize` |
|
||||||
|
| `section_help` | 素材不足求助 | `section_help`(+`sectionDecisions`) |
|
||||||
|
|
||||||
|
- resume 载荷(`UserInterventionPayload`,`types/ai-writing.ts`)字段:`action`、`approvedMaterialIds`、
|
||||||
|
`userQuery`(自然语言补充检索)、`editedOutline`、`outlineFeedback`、`userRevisionNotes`、
|
||||||
|
`overrideVerdict`、`selectedIssueIndices`、`sectionDecisions`。
|
||||||
|
**协议已同时支持「自然语言 + 结构化 action」**——这是对话层能复用的关键。
|
||||||
|
|
||||||
|
> 结论:**状态机 / 流式 / 暂停·续跑协议 / 持久化都可复用**,无需重写引擎。改造本质是
|
||||||
|
> 「把分散在干预卡里的输入框,换成一个底部智能输入框 + 意图路由层」,再把意图翻译回**现有
|
||||||
|
> `action + payload`**;仅少量新意图(对内容提问、素材不足自动回退重搜、追加审核意见)需新增能力。
|
||||||
|
|
||||||
|
### 1.2 前端 `open-canvas` 子系统
|
||||||
|
|
||||||
|
- 主页面:`frontend-web/src/open-canvas/pages/AIWritingPage.tsx`
|
||||||
|
- 路由注册:`open-canvas/routes/OpenCanvasRoutes.tsx`(`/page/canvas/ai-writing/*`)、
|
||||||
|
`pages/WorkspaceRoutes.tsx`(`/page/workspace/ai-writing/*`)、`pages/NotebookAIWritingPage.tsx`
|
||||||
|
- 状态机 + 流式:`contexts/AIWritingContext.tsx`(`useReducer` + LangGraph `useStream`,`assistantId:'ai_writing'`)
|
||||||
|
- 事件翻译 / reducer:`hooks/useAIWritingStream.ts`
|
||||||
|
- 类型:`types/ai-writing.ts`
|
||||||
|
- **左栏面板**:`components/ai-writing/AIWritingPanel.tsx`(时间线 + 干预卡 + 状态栏;idle 时挂启动表单)
|
||||||
|
- **要改造的输入 UI**(本次重点):
|
||||||
|
- 干预卡 `components/ai-writing/InterventionCard.tsx`:内含
|
||||||
|
`MaterialConfirmCard`(素材:有 `MaterialsToolbar` 输入框)、
|
||||||
|
`OutlineConfirmCard`(大纲:有 feedback textarea)、
|
||||||
|
`DraftConfirmCard`(草稿:有「修改意见」textarea)、
|
||||||
|
`ReviewConfirmCard`(审核:有「补充修改指令」textarea)、
|
||||||
|
`SectionHelpCard`(素材不足:按钮组)。
|
||||||
|
**每张卡里都既有输入框又有确认/动作按钮**——本次要**去掉输入框、保留按钮**。
|
||||||
|
- 启动表单 `components/ai-writing/AIWritingForm.tsx`(idle 阶段的配置表单)——本次由底部输入框接管启动。
|
||||||
|
- **已存在的对话原型**(可借鉴):`components/ai-writing/WritingSetupChat.tsx`
|
||||||
|
(`useThreadStream` 起 lead_agent 线程 + `setup_writing` 审批卡回填表单;仅管启动前配置,不直接复用)。
|
||||||
|
- 底部输入框可直接复用 UI 组件:`@/components/ai-elements/prompt-input`
|
||||||
|
(`PromptInput` / `PromptInputTextarea` / `PromptInputSubmit` / `PromptInputFooter`,见 `WritingSetupChat`)。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. 目标与范围
|
||||||
|
|
||||||
|
### 2.1 必须满足
|
||||||
|
|
||||||
|
1. **复制式新增**:新目录 / 新路由 / 新侧边栏入口,**旧页面、旧路由、旧组件零改动**(「初始的不用动」)。
|
||||||
|
2. 页面**底部单一多行智能输入框**接管全流程交互;四个阶段干预卡里的**输入框全部移除**。
|
||||||
|
3. **保留确认按钮**:每个阶段到达暂停点时,消息流里仍渲染**产物卡 + 原来的确认/动作按钮**
|
||||||
|
(素材「确认素材」、大纲「确认大纲」、草稿「让编辑审核 / 确认定稿」、审核「按编辑意见修改 / 强制定稿」、
|
||||||
|
素材不足的三选一按钮)。用户**点按钮**或**在底部输入框发自然语言意图**二选一均可推进。
|
||||||
|
4. **强意图理解**:把用户自由文本准确路由到正确动作,**覆盖现有全部交互 + 更多**(见 3.2)。
|
||||||
|
5. **阶段作用域**:意图解析必须知道「当前停在哪个专家阶段」,把同一句话按当前阶段翻译成对应 action。
|
||||||
|
6. **素材不足自动回退重搜**:修改意见需要的信息现有素材没有时,先重搜补素材、补完自动继续原意图。
|
||||||
|
7. **拿不准就协助**:低置信意图**不猜着执行**,走澄清追问(clarify)或用户协助。
|
||||||
|
8. 保留右侧草稿实时预览(可编辑)与时间线 / 进度展示。
|
||||||
|
|
||||||
|
### 2.2 明确不做(本期)
|
||||||
|
|
||||||
|
- 不改旧 `AIWritingPage` 及其 `AIWritingForm` / `InterventionCard`(这两个是要在**副本**里改的)。
|
||||||
|
- 不替换 `ai_writing` graph 四个阶段大脑逻辑,不动五个暂停点 / checkpoint / 持久化。
|
||||||
|
- 不引新状态管理库(继续 `useReducer` + `useStream`)。
|
||||||
|
|
||||||
|
### 2.3 复制策略(关键决策)
|
||||||
|
|
||||||
|
「复制一份」= **复制会被大改的表现层组件**(页面 + 干预卡 + 面板),**复用不改的引擎层**:
|
||||||
|
|
||||||
|
| 复制(新建副本,大改) | 复用(原样,不改;仅对 `types` 做**追加式**扩展) |
|
||||||
|
|------------------------|--------------------------------------------------|
|
||||||
|
| 新页面 `AIWritingChatPage.tsx` | `contexts/AIWritingContext.tsx`(状态机 + 流式) |
|
||||||
|
| 新面板 `WritingChatPanel.tsx`(消息流 + 底部输入框) | `hooks/useAIWritingStream.ts`(事件 → state) |
|
||||||
|
| 新消息卡 `chat-cards/*`(产物卡+确认按钮,**无输入框**) | `components/ai-writing/AIWritingDraftPanel.tsx`(右侧草稿预览) |
|
||||||
|
| 新意图客户端 `api/ai-writing-intent.ts` | 各流式展示子组件(`MaterialsCard`/`OutlineCard`/`ReviewCard`/`SkillStepsCard`…) |
|
||||||
|
| (可选)新 `contexts/WritingChatContext.tsx` 包一层「pending 意图 / 澄清态」 | `types/ai-writing.ts`(**只加字段不改旧字段**,保证旧页面不受影响) |
|
||||||
|
|
||||||
|
> **不复用、也不改** 的三个「输入框组件」:`AIWritingForm` / `InterventionCard` / `WritingFormContext`——
|
||||||
|
> 旧页面继续用它们,新页面完全不引用它们。这样「初始的不用动」得到硬保证。
|
||||||
|
>
|
||||||
|
> 为什么复用 `AIWritingContext` 而不复制它?它**不含任何输入框 UI**,只是「状态机 + 与后端 graph 的
|
||||||
|
> 流式桥」,复用它**不会改动旧页面的任何呈现**(旧页面照常在自己的 Provider 实例里跑)。复用能显著
|
||||||
|
> 降低维护成本、避免两套引擎漂移。若要绝对物理隔离,也可整目录复制 `AIWritingContext` +
|
||||||
|
> `useAIWritingStream` 到新目录——**推荐先复用**,仅当后续需要给对话态加大量图内新协议时再分叉。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 核心设计
|
||||||
|
|
||||||
|
### 3.1 三层结构
|
||||||
|
|
||||||
|
```
|
||||||
|
┌──────────────────────────────────────────────────────────────┐
|
||||||
|
│ 对话 UI 层(新) WritingChatPanel │
|
||||||
|
│ - 消息流:用户消息 + AI 阶段产物卡(含【保留的确认按钮】)+ 进度 │
|
||||||
|
│ - 底部:统一多行智能输入框(唯一自由输入入口) │
|
||||||
|
│ - 右侧:草稿实时预览(复用 AIWritingDraftPanel) │
|
||||||
|
└───────────────┬──────────────────────────────────────────────┘
|
||||||
|
│ 用户自然语言(+ 当前 status/pausePoint 上下文)
|
||||||
|
▼
|
||||||
|
┌──────────────────────────────────────────────────────────────┐
|
||||||
|
│ 意图解析层(新,核心) POST /api/ai-writing/sessions/{id}/intent │
|
||||||
|
│ 输出:{ intent, pausePoint, action, payload, │
|
||||||
|
│ needResearch, researchQuery, answer, confidence, clarify }│
|
||||||
|
└───────────────┬──────────────────────────────────────────────┘
|
||||||
|
│ 结构化 action + payload
|
||||||
|
▼
|
||||||
|
┌──────────────────────────────────────────────────────────────┐
|
||||||
|
│ 执行层(复用现有 AIWritingContext) │
|
||||||
|
│ idle → startWriting(AIWritingRequest) │
|
||||||
|
│ 暂停 → submitIntervention(UserInterventionPayload) │
|
||||||
|
│ 问答 → 旁路回答(不改写作状态) │
|
||||||
|
│ 素材不足 → 先重搜、缓存 pending、补完自动续跑 │
|
||||||
|
└──────────────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**设计原则**:意图解析层是「翻译官」——把自由文本翻译成**执行层已经懂的指令**。能复用
|
||||||
|
`action + payload` 的绝不新造协议;确认按钮点击**直接走执行层**(不经意图层,零延迟、零误判)。
|
||||||
|
|
||||||
|
### 3.2 意图分类体系(覆盖全流程 + 更多)
|
||||||
|
|
||||||
|
按「意图 → 触发时机(当前 status/pausePoint)→ 映射执行」组织,即意图解析引擎的目标 schema。
|
||||||
|
**「甚至更多」** = G(问答)、H(控制)、以及 B/C/D/E 里的「素材不足自动回退重搜」。
|
||||||
|
|
||||||
|
#### A. 启动类(status = `idle`)
|
||||||
|
| 意图 | 用户说法示例 | 映射 |
|
||||||
|
|------|-------------|------|
|
||||||
|
| `start_writing` | 「写一篇关于新能源出口的深度分析,2000 字」 | 解析成 `AIWritingRequest` → `startWriting()` |
|
||||||
|
| `start_with_outline` | 「按这个大纲写:…」 | `AIWritingRequest.userOutline` |
|
||||||
|
| `start_imitate` | 「仿照这篇样文写…」 | `writingModeType='imitate'` + `sampleText` |
|
||||||
|
|
||||||
|
#### B. 素材类(pausePoint = `material_confirm`)
|
||||||
|
| 意图 | 示例 | 映射 |
|
||||||
|
|------|------|------|
|
||||||
|
| `confirm_materials` | 「素材可以,继续 / 下一步」 | `{action:'confirm', approvedMaterialIds}` |
|
||||||
|
| `research_again` | 「重新搜索素材」 | `{action:'re_search'}`(无 userQuery=覆盖式重检) |
|
||||||
|
| `add_material`/`add_keyword` | 「再补点关于 X 的素材」「加个关键词 Y」 | `{action:'re_search', userQuery:'X/Y'}`(追加) |
|
||||||
|
| `select_materials` | 「只用第 1、3 条」 | `{action:'confirm', approvedMaterialIds:[…]}` |
|
||||||
|
| `drop_materials` | 「去掉第 2 条」 | 同上(反选后的子集) |
|
||||||
|
|
||||||
|
#### C. 大纲类(pausePoint = `outline_confirm`)
|
||||||
|
| 意图 | 示例 | 映射 |
|
||||||
|
|------|------|------|
|
||||||
|
| `confirm_outline` | 「大纲 OK,开始写」 | `{action:'confirm'}` |
|
||||||
|
| `reoutline` | 「重写大纲」 | `{action:'re_outline'}`(feedback 可空) |
|
||||||
|
| `revise_outline` | 「第二章拆成两节」「调整顺序」 | `{action:'re_outline', outlineFeedback:自然语言}` |
|
||||||
|
|
||||||
|
#### D. 写作 / 草稿类(pausePoint = `draft_confirm`)
|
||||||
|
| 意图 | 示例 | 映射 |
|
||||||
|
|------|------|------|
|
||||||
|
| `to_editor` | 「交给编辑审核」 | `{action:'to_editor'}` |
|
||||||
|
| `finalize` | 「就这样定稿」 | `{action:'finalize'}` **(高代价:低置信必澄清)** |
|
||||||
|
| `revise_draft` | 「第三段太啰嗦,精简」「补个 2024 案例」 | `{action:'user_revise', userRevisionNotes:意见}` |
|
||||||
|
| `rewrite_section` | 「重写第二章」 | `user_revise` + 章节定位写进 notes |
|
||||||
|
| `change_tone/style` | 「更口语一点 / 更正式」 | `user_revise` + notes |
|
||||||
|
| `apply_review`(若已有审核结果) | 「按编辑意见改」「只接受第 1、2 条」 | `{action:'user_revise', selectedIssueIndices:[…]}` |
|
||||||
|
|
||||||
|
#### E. 编辑审核类(pausePoint = `review_confirm`)
|
||||||
|
| 意图 | 示例 | 映射 |
|
||||||
|
|------|------|------|
|
||||||
|
| `accept_review` | 「按编辑意见改」 | `{action:'accept_review', selectedIssueIndices}` |
|
||||||
|
| `partial_accept_review` | 「只接受第 1、2 条」 | `accept_review` + `selectedIssueIndices` 子集 |
|
||||||
|
| `add_review_opinion` | 「再补一条:核查数据准确性」 | `accept_review` + `userRevisionNotes`(并入补充指令,现协议已支持) |
|
||||||
|
| `force_finalize` | 「不改了,强制定稿」 | `{action:'force_finalize', overrideVerdict:true}` **(高代价:必澄清)** |
|
||||||
|
|
||||||
|
#### F. 素材不足求助类(pausePoint = `section_help`)
|
||||||
|
| 意图 | 映射 |
|
||||||
|
|------|------|
|
||||||
|
| `section_supplement` | `{action:'section_help', sectionDecisions:[…'supplement']}` |
|
||||||
|
| `section_loose` | `sectionDecisions:[…'loose']` |
|
||||||
|
| `section_delete` | `sectionDecisions:[…'delete']` |
|
||||||
|
|
||||||
|
#### G. 问答类(**新**;任意 status;旁路,不改写作状态)
|
||||||
|
| 意图 | 示例 | 映射 |
|
||||||
|
|------|------|------|
|
||||||
|
| `ask_about_content` | 「第二章讲了啥?」「为什么用这个论点?」 | 意图节点直接带回 `answer`,对话流渲染(见 5.4) |
|
||||||
|
| `ask_meta` | 「现在到哪步了?」「用了哪些素材?」 | 读当前 state 直接回答,不走图 |
|
||||||
|
|
||||||
|
#### H. 控制类(**新 / 半新**)
|
||||||
|
| 意图 | 映射 |
|
||||||
|
|------|------|
|
||||||
|
| `next_step`(通用「继续/下一步」) | 按**当前 pausePoint** 映射到该阶段的默认确认(material/outline→`confirm`,draft→`to_editor`…;等价点确认按钮) |
|
||||||
|
| `restart_stage` | 重跑当前阶段(复用 `resumeWriting()` 空 command 续跑) |
|
||||||
|
| `run_background` | 转后台自动跑:`suspendAIWritingToBackground()` |
|
||||||
|
| `cancel` | `pauseWriting()`(`stream.stop()`) |
|
||||||
|
| `unknown/clarify` | 无法判定 → 反问澄清 / 用户协助(**防误触发硬指标**) |
|
||||||
|
|
||||||
|
### 3.3 「素材不足自动重搜」判定与回退(用户强调点)
|
||||||
|
|
||||||
|
触发:用户在**大纲/草稿/审核**阶段提出修改意见,但意见需要的信息现有素材里没有。
|
||||||
|
|
||||||
|
判定来源(组合):
|
||||||
|
1. **意图节点直接判**:把「素材摘要(keywords + 每条 title/source)」喂给意图 prompt,让它判断
|
||||||
|
「这条意见能否用现有素材满足」;不能 → `needResearch=true` + `researchQuery`。
|
||||||
|
2. **执行阶段兜底**:`writer_draft` 严格模式已有 `blocked_sections` → `section_help` 暂停点,
|
||||||
|
对话层把它翻译成「素材不足,是否重搜?」的追问。
|
||||||
|
|
||||||
|
回退动作(**首期纯前端实现,不动后端协议**):`needResearch=true` 时,前端把用户的修改
|
||||||
|
`payload` 缓存为 `pendingIntent`,先 `submitIntervention({action:'re_search', userQuery:researchQuery})`
|
||||||
|
补素材;监听到新一轮 `material_confirm`(素材追加完成)后,**自动提交** `pendingIntent`。
|
||||||
|
需处理「重搜期间用户又改主意」→ 允许覆盖 pending。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. 意图解析引擎:方案与契约
|
||||||
|
|
||||||
|
**采用方案 A:后端 LLM 意图节点(独立 REST)**,叠加高频短句**规则快路径**优化。
|
||||||
|
|
||||||
|
理由:`needResearch` 判定需要**完整写作上下文**(素材/大纲/草稿),后端天然持有 checkpoint state;
|
||||||
|
与 `setup_writing` 一脉相承,离线模型选择策略统一;输出 schema 稳定、前端只消费。
|
||||||
|
|
||||||
|
### 4.1 后端入口
|
||||||
|
|
||||||
|
`app/gateway/routers/ai_writing.py` 新增:
|
||||||
|
|
||||||
|
```
|
||||||
|
POST /api/ai-writing/sessions/{session_id}/intent
|
||||||
|
Body: { text: string, status: string, pausePoint?: string }
|
||||||
|
Resp: IntentResult(见 4.3)
|
||||||
|
```
|
||||||
|
|
||||||
|
实现:读该 session 的 checkpoint state(素材摘要 / 大纲纲要 / 草稿字数·章节 / 审核意见)→
|
||||||
|
用 `ai_writing` 配置模型(复用 `intent_parser.py` 同套 `create_chat_model` + `parse_json` +
|
||||||
|
模型容错 `_model_fallback`)解析 → 返回结构化契约。**不改图拓扑**。
|
||||||
|
|
||||||
|
新增 prompt:`agents/ai_writing/prompts/intent_router_prompts.py`
|
||||||
|
- 输入:用户文本、`current_status`/`pause_point`、素材摘要、大纲纲要、草稿字数+章节标题、审核意见列表。
|
||||||
|
- 输出:严格 JSON(4.3 契约)。硬要求:**只在证据充分时给高 confidence,否则给 `clarify`**;
|
||||||
|
`finalize`/`force_finalize`/`re_search` 等高代价意图**必须**高置信才不澄清。
|
||||||
|
|
||||||
|
### 4.2 前端快路径(先跑规则,未命中再调后端)
|
||||||
|
|
||||||
|
`api/ai-writing-intent.ts` 里对**当前 pausePoint** 做少量确定性短语命中,直接产出 payload,省一次往返:
|
||||||
|
- 「继续/下一步/确认/可以/ok/好的」→ 当前阶段默认 `confirm`(draft 阶段=`to_editor`)。
|
||||||
|
- 「重新搜索/重搜」(material)→ `re_search`。「重写大纲」(outline)→ `re_outline`。
|
||||||
|
- 「定稿/强制定稿」→ **不进快路径**(高代价,一律走后端 + 可能澄清)。
|
||||||
|
- 命中即执行;未命中 → 调后端 `intent` 接口。
|
||||||
|
|
||||||
|
### 4.3 意图解析输出契约
|
||||||
|
|
||||||
|
```jsonc
|
||||||
|
{
|
||||||
|
"intent": "revise_draft", // 见 3.2 分类
|
||||||
|
"pausePoint": "draft_confirm", // 需要 resume 时;否则 null
|
||||||
|
"action": "user_revise", // 映射到现有 action
|
||||||
|
"payload": { // 直接可喂 submitIntervention 的字段(camelCase)
|
||||||
|
"userRevisionNotes": "第三段精简,并补一个 2024 年的案例"
|
||||||
|
},
|
||||||
|
"needResearch": true, // 素材是否不足
|
||||||
|
"researchQuery": "2024 行业案例", // needResearch 时的检索意图
|
||||||
|
"answer": null, // 问答类意图的直接回答(旁路)
|
||||||
|
"confidence": 0.86,
|
||||||
|
"clarify": null // 低置信时的反问话术(非空则不执行、只追问)
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
前端消费顺序:
|
||||||
|
1. `answer` 非空 → 对话流渲染回答(问答旁路,不动写作状态)。
|
||||||
|
2. `clarify` 非空 **或** `confidence < 阈值(建议 0.6)` → 渲染反问气泡,等用户澄清(**防误触发**)。
|
||||||
|
3. `needResearch=true` → 缓存 `pendingIntent=payload`,先重搜,收到新素材后自动提交。
|
||||||
|
4. 否则 → `idle` 走 `startWriting(...)`;暂停态走 `submitIntervention({action, ...payload})`。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. 前端改造方案
|
||||||
|
|
||||||
|
### 5.1 新页面与路由(复制式)
|
||||||
|
|
||||||
|
- 新页面:`open-canvas/pages/AIWritingChatPage.tsx`
|
||||||
|
(骨架照抄 `AIWritingPage.tsx` 的 Provider 包裹与左右分栏;左栏换成 `WritingChatPanel`,右栏仍
|
||||||
|
`AIWritingDraftPanel`;idle 不再挂 `AIWritingForm`,改由底部输入框启动)。
|
||||||
|
- 路由注册(**新增,不动旧行**):
|
||||||
|
- `open-canvas/routes/OpenCanvasRoutes.tsx` 加 `path="ai-writing-chat/*"`。
|
||||||
|
- 侧边栏 `core/page-layout/sidebar-menu.ts`:在 `qa-research` 旁新增
|
||||||
|
`{ id:"qa-research-chat", label:"AI写作(对话版)", icon:FileText, path:"/page/canvas/ai-writing-chat" }`。
|
||||||
|
(或先不加、内部灰度直链验证。)
|
||||||
|
|
||||||
|
### 5.2 新面板 `WritingChatPanel.tsx`(左栏主体)
|
||||||
|
|
||||||
|
职责 = 消息流容器 + 底部输入框,替代 `AIWritingPanel` 里的「时间线 + InterventionCard + 状态栏」。
|
||||||
|
复用 `useAIWriting()` 读 state / 调 `startWriting` / `submitIntervention` / `pauseWriting` /
|
||||||
|
`suspendAIWritingToBackground`。
|
||||||
|
|
||||||
|
消息流渲染(把 `ProgressEvent` / 阶段产物适配成消息卡,复用现有展示子组件):
|
||||||
|
- 运行中:`research_progress`/`outline_chunk`/`draft_chunk`/`review_chunk` → 进度 / 流式卡
|
||||||
|
(复用 `SkillStepsCard`/`OutlineStreamingView`/`DraftGeneratingView`/`ReviewStreamingView` 的展示部分)。
|
||||||
|
- 到达暂停点:渲染 **产物卡 + 保留的确认按钮**(见 5.3),不再有输入框。
|
||||||
|
- 用户消息、AI 澄清追问、问答回答:普通气泡。
|
||||||
|
|
||||||
|
底部输入框:直接复用 `@/components/ai-elements/prompt-input`(`PromptInput`+`PromptInputTextarea`+
|
||||||
|
`PromptInputSubmit`),Enter 发送、Shift+Enter 换行;发送时读当前 `state.status`/`currentPause?.pausePoint`
|
||||||
|
交给意图路由(见 5.5)。运行中(非暂停点)可禁用发送或转「排队/提示当前在生成」。
|
||||||
|
|
||||||
|
### 5.3 新消息卡 `chat-cards/*`(**保留按钮、去掉输入框**)
|
||||||
|
|
||||||
|
把 `InterventionCard.tsx` 的五张卡各复制一份到 `open-canvas/components/ai-writing-chat/chat-cards/`,
|
||||||
|
**删掉其中的 textarea / MaterialsToolbar 输入部分,保留产物展示 + 确认/动作按钮**:
|
||||||
|
|
||||||
|
| 新卡 | 展示(复用) | 保留的按钮 | 删除的输入 |
|
||||||
|
|------|-------------|-----------|-----------|
|
||||||
|
| `MaterialConfirmChatCard` | `MaterialsCard`(勾选保留)+ `SkillStepsCard` | 「确认素材,规划大纲」「重新搜索」 | `MaterialsToolbar` 的 userQuery 输入框 |
|
||||||
|
| `OutlineConfirmChatCard` | `OutlineCard`(可点标题微调保留) | 「确认大纲,开始写作」 | feedback textarea + 发送 |
|
||||||
|
| `DraftConfirmChatCard` | `ReviewCard`(若有审核,勾选保留) | 「按编辑审核意见修改」「让编辑继续审核」「确认定稿」 | 「修改意见」textarea |
|
||||||
|
| `ReviewConfirmChatCard` | `ReviewCard`(勾选保留) | 「按编辑意见修改」「强制定稿」 | 「补充修改指令」textarea |
|
||||||
|
| `SectionHelpChatCard` | 章节 + 三选一按钮组 | 三选一 + 「提交并继续」 | (本就无自由输入,原样保留) |
|
||||||
|
|
||||||
|
> 勾选态(素材/审核意见)**保留**——它是「点按钮」路径的一部分,不算自由输入框。用户想用自然语言
|
||||||
|
> 「只用第 1、3 条」也能走底部输入框(意图层产出 `approvedMaterialIds`/`selectedIssueIndices`)。
|
||||||
|
> 按钮点击 **直接调 `submitIntervention`**,与旧卡完全一致,零改动风险。
|
||||||
|
|
||||||
|
### 5.4 问答旁路(新能力)
|
||||||
|
|
||||||
|
「对写作内容提问」不改写作 state。首期**轻量实现**:意图节点检出 `ask_*` 时读 state 直接带回 `answer`,
|
||||||
|
前端在消息流渲染为普通 AI 气泡即可(一次调用出答案)。完整版(后续)可另起只读 lead_agent 线程注入
|
||||||
|
草稿/大纲作背景,类似 `WritingSetupChat` 的 `useThreadStream`。
|
||||||
|
|
||||||
|
### 5.5 交互流程(对话版)串起来
|
||||||
|
|
||||||
|
1. **空闲**:底部输入「写一篇关于 X 的深度分析,2000 字」→ 意图 `start_writing` → 组 `AIWritingRequest`
|
||||||
|
→ `startWriting()`。(缺关键字段时先 `clarify` 追问字数/读者/类型。)
|
||||||
|
2. **运行中**:进度/流式卡渲染。
|
||||||
|
3. **到暂停点**:渲染产物卡 + 按钮 + 一句提示「你可以点上面的按钮,或直接说:确认继续 / 补充素材 / 改大纲…」。
|
||||||
|
- **点按钮** → 直接 `submitIntervention`(旧逻辑)。
|
||||||
|
- **发文字** → `resolveIntent(text, status, pausePoint)`(先快路径、后后端)→ 按 4.3 消费。
|
||||||
|
4. **问答**:任意时刻提问 → 旁路 `answer`,不打断写作。
|
||||||
|
5. **素材不足**:`needResearch` 或 `section_help` → 追问/执行「重搜 → 自动续跑 pending 意图」。
|
||||||
|
6. **拿不准**:`clarify`/低置信 → 反问气泡,不执行。
|
||||||
|
|
||||||
|
### 5.6 pending 意图 & 澄清态(新增本地状态)
|
||||||
|
|
||||||
|
在 `WritingChatPanel`(或新 `WritingChatContext`)维护:
|
||||||
|
- `pendingIntent: UserInterventionPayload | null` —— 素材不足重搜完成后自动提交。
|
||||||
|
- `awaitingClarify: { originalText: string } | null` —— 澄清态,用户下一句与上一句拼接再解析。
|
||||||
|
- pending 生命周期:设置 → 提交 `re_search` → 监听 reducer 里新一轮 `awaiting_material_confirm`
|
||||||
|
(`state.status` 从 `researching` 回到 `awaiting_material_confirm`)→ 自动 `submitIntervention(pending)` → 清空。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. 后端改造方案
|
||||||
|
|
||||||
|
### 6.1 意图解析入口(新增,唯一后端改动主体)
|
||||||
|
|
||||||
|
- `app/gateway/routers/ai_writing.py`:新增 `POST /sessions/{id}/intent`(见 4.1)。
|
||||||
|
读 checkpoint state 用 `app.state.checkpointer` + `make_ai_writing_graph().aget_state(...)`
|
||||||
|
(参照 `ai_writing_job_executor.py` 的读法)取素材/大纲/草稿/审核摘要。
|
||||||
|
- `agents/ai_writing/prompts/intent_router_prompts.py`:新增意图 prompt(见 4.1)。
|
||||||
|
- 复用 `nodes/intent_parser.py` 的模型创建 / `parse_json` / `_model_fallback` 容错。
|
||||||
|
|
||||||
|
### 6.2 不需要改的部分
|
||||||
|
|
||||||
|
- 四个阶段大脑节点、五个暂停点、checkpoint、StreamBridge、持久化、sessions/transcript REST——**全不动**。
|
||||||
|
- 「素材不足自动续跑」「问答旁路」首期都在**前端 / 意图节点**实现,**不扩 resume 协议**。
|
||||||
|
|
||||||
|
### 6.3 可选增强(阶段 3,按需)
|
||||||
|
|
||||||
|
- `add_review_opinion` 完整版:`review_confirm` resume 增字段 `extra_review_notes`(首期已用现有
|
||||||
|
`userRevisionNotes` 降级承载,够用)。
|
||||||
|
- `resume_intent` 后端化(把「重搜完自动续跑」搬到后端,减少前端状态机复杂度)。
|
||||||
|
- undo / 回退到上一暂停点(依赖 checkpoint 回滚)。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. 数据流时序(改稿 + 素材不足自动重搜)
|
||||||
|
|
||||||
|
```
|
||||||
|
用户(draft_confirm 暂停): "第三段补个2024年的行业案例"
|
||||||
|
│ 底部输入框 → resolveIntent(text, status='awaiting_draft_confirm', pausePoint='draft_confirm')
|
||||||
|
▼ POST /api/ai-writing/sessions/{id}/intent { text, status, pausePoint }
|
||||||
|
后端: 读 state(素材摘要) + LLM 解析
|
||||||
|
│ 返回 { intent:revise_draft, action:user_revise,
|
||||||
|
│ payload:{userRevisionNotes:"第三段…补2024案例"},
|
||||||
|
│ needResearch:true, researchQuery:"2024 行业案例", confidence:0.9 }
|
||||||
|
▼
|
||||||
|
前端: needResearch=true → pendingIntent = payload
|
||||||
|
│ submitIntervention({action:'re_search', userQuery:"2024 行业案例"})
|
||||||
|
▼ LangGraph resume → researcher 追加素材 → status 回到 awaiting_material_confirm
|
||||||
|
前端: 监听到新一轮素材确认 → 自动提交 pendingIntent
|
||||||
|
│ submitIntervention({action:'user_revise', userRevisionNotes:"第三段…补2024案例"})
|
||||||
|
▼ writer_draft 用新素材改稿 → draft_chunk… → draft_ready → draft_confirm
|
||||||
|
前端: 消息流展示新草稿卡 + "已按你的意见改写并补充了 2024 案例"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. 关键实现细节与坑
|
||||||
|
|
||||||
|
1. **阶段作用域**:`resolveIntent` 必须带 `state.currentPause?.pausePoint` + `state.status`——
|
||||||
|
同一句「重新来」在 material 是重搜、在 outline 是重写大纲。`AIWritingContext` 已有这两个字段,直接读。
|
||||||
|
2. **确认按钮零改动**:新卡的按钮 `onClick` 原样调 `submitIntervention(payload)`,与旧卡逐字一致,
|
||||||
|
风险最低;**只删输入框**。
|
||||||
|
3. **防误触发**:低置信(<0.6)或 `clarify` 非空一律追问;`finalize`/`force_finalize`/`re_search`
|
||||||
|
即使命中也要求高置信,否则澄清。绝不盲目定稿/覆盖重搜。
|
||||||
|
4. **pending 意图队列**:素材不足是「先插重搜、再回原意图」,用 5.6 的小状态机;重搜完成前允许覆盖 pending。
|
||||||
|
5. **问答不污染 transcript**:问答/澄清消息在前端标记 `kind:'qa'|'clarify'`,与写作进度事件区分(
|
||||||
|
`AIWritingContext` 的 transcript 只存 progressEvents/completedInterventions,问答气泡是纯前端消息,
|
||||||
|
默认不入 transcript,避免历史回看错乱)。
|
||||||
|
6. **流式产物→消息卡**:复用 `OutlineStreamingView`/`DraftGeneratingView`/`ReviewStreamingView`/
|
||||||
|
`SkillStepsCard` 的**展示部分**,套进消息容器,不重写渲染。
|
||||||
|
7. **右侧草稿预览**:`AIWritingDraftPanel` + `DraftSync` 原样复用(`DraftSync` 依据 status/markdown
|
||||||
|
同步右侧画布)。
|
||||||
|
8. **离线内网**:意图模型走 `config.yaml → ai_writing` 配置模型;检索仍走技能/内网 ES,不联网。
|
||||||
|
9. **模型选择透传**:`submitIntervention` 的 resume 已把 `state.request?.modelName` 一并回传(见
|
||||||
|
`AIWritingContext`),新页面沿用即可。
|
||||||
|
10. **旧页面隔离验证**:改完后回归旧 `/page/canvas/ai-writing` 与 `/page/workspace/ai-writing`、
|
||||||
|
笔记本嵌入页,确认零变化(新代码不 import 旧的 `AIWritingForm`/`InterventionCard`/`WritingFormContext`)。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. 分阶段实施路线图
|
||||||
|
|
||||||
|
**阶段 0 — 骨架(不含意图)**
|
||||||
|
- 复制 `AIWritingChatPage` + 注册新路由 + 侧边栏入口;复用 `AIWritingContext`/`useStream`/`DraftPanel`。
|
||||||
|
- 复制五张 `chat-cards`(删输入框、留按钮);底部输入框先只做 idle 直发 `start_writing`
|
||||||
|
(文本原样当 `userIntent`,其余字段取默认)+ 暂停点靠按钮推进。端到端跑通。
|
||||||
|
|
||||||
|
**阶段 1 — 意图解析(核心)**
|
||||||
|
- 后端 `POST /sessions/{id}/intent` + `intent_router_prompts.py`,返回 4.3 契约。
|
||||||
|
- 前端 `api/ai-writing-intent.ts`(快路径 + 后端)接入 `WritingChatPanel`,覆盖 A~F 类意图。
|
||||||
|
- 低置信 `clarify` 澄清态(5.6)。
|
||||||
|
|
||||||
|
**阶段 2 — 问答旁路 + 素材不足自动重搜**
|
||||||
|
- G 类问答(意图节点直接带 `answer`)。
|
||||||
|
- `needResearch` + pending 意图机制(前端实现重搜后自动续跑,5.6)。
|
||||||
|
|
||||||
|
**阶段 3 — 增强(按需)**
|
||||||
|
- `add_review_opinion` 扩协议、`resume_intent` 后端化、undo/回退、完整问答只读线程。
|
||||||
|
|
||||||
|
**阶段 4 — 打磨**
|
||||||
|
- 消息卡视觉、历史回看(transcript)、后台挂起入口、灰度到侧边栏。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 10. 关键文件清单(落地对照)
|
||||||
|
|
||||||
|
### 新增(前端)
|
||||||
|
- `open-canvas/pages/AIWritingChatPage.tsx` — 新页面(复制 `AIWritingPage` 骨架改造)
|
||||||
|
- `open-canvas/components/ai-writing-chat/WritingChatPanel.tsx` — 消息流 + 底部输入框
|
||||||
|
- `open-canvas/components/ai-writing-chat/chat-cards/{MaterialConfirmChatCard,OutlineConfirmChatCard,DraftConfirmChatCard,ReviewConfirmChatCard,SectionHelpChatCard}.tsx` — 保留按钮、去掉输入框
|
||||||
|
- `open-canvas/components/ai-writing-chat/progressToMessage.ts` — `ProgressEvent` → 消息卡适配
|
||||||
|
- `open-canvas/api/ai-writing-intent.ts` — 意图解析客户端(快路径 + `POST …/intent`)
|
||||||
|
- (可选)`open-canvas/contexts/WritingChatContext.tsx` — pending 意图 / 澄清态
|
||||||
|
|
||||||
|
### 修改(前端,仅追加,不动旧逻辑)
|
||||||
|
- `open-canvas/routes/OpenCanvasRoutes.tsx` — 加一条 `ai-writing-chat/*` 路由
|
||||||
|
- `core/page-layout/sidebar-menu.ts` — 加一个侧边栏入口(可选)
|
||||||
|
- `open-canvas/types/ai-writing.ts` — **仅追加** `IntentResult` 等新类型,不改旧字段
|
||||||
|
|
||||||
|
### 新增(后端)
|
||||||
|
- `app/gateway/routers/ai_writing.py` — 加 `POST /sessions/{id}/intent`
|
||||||
|
- `agents/ai_writing/prompts/intent_router_prompts.py` — 意图 prompt
|
||||||
|
- `tests/test_ai_writing_intent.py` — 意图接口单测(TDD 强制)
|
||||||
|
|
||||||
|
### 复用(不改)
|
||||||
|
- `open-canvas/contexts/AIWritingContext.tsx`、`hooks/useAIWritingStream.ts`
|
||||||
|
- `open-canvas/components/ai-writing/{AIWritingDraftPanel,DraftSync,MaterialsCard,OutlineCard,ReviewCard,SkillStepsCard,OutlineStreamingView,DraftGeneratingView,ReviewStreamingView}.tsx`
|
||||||
|
- `agents/ai_writing/graph.py`、四个阶段节点、五个暂停点、`nodes/intent_parser.py`
|
||||||
|
|
||||||
|
### 绝不动(保证「初始的不用动」)
|
||||||
|
- `open-canvas/pages/AIWritingPage.tsx` 及其引用的
|
||||||
|
`components/ai-writing/{AIWritingForm,InterventionCard}.tsx`、`contexts/WritingFormContext.tsx`
|
||||||
|
- 旧路由 `/page/canvas/ai-writing`、`/page/workspace/ai-writing`、笔记本嵌入页
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 11. 待确认(默认取值已给出,可直接推进)
|
||||||
|
|
||||||
|
1. 意图引擎:**后端 LLM 节点(方案 A)+ 前端短句快路径** —— 默认采用。
|
||||||
|
2. `AIWritingContext` / `useAIWritingStream`:**复用**(不物理复制)——默认采用;需绝对隔离可改为复制。
|
||||||
|
3. 新页面入口:**侧边栏新增「AI写作(对话版)」** —— 默认加;若要先灰度可只留直链。
|
||||||
|
4. 「素材不足自动重搜」:**首期前端 pending 续跑**(不动后端 resume 协议)——默认采用。
|
||||||
|
5. 问答旁路:**首期意图节点直接带 `answer`** —— 默认采用。
|
||||||
|
|
||||||
|
> 以上默认按「A + 复用引擎 + 侧边栏入口 + 前端 pending + 意图节点带答案」推进,如需调整请指出。
|
||||||
@@ -0,0 +1,454 @@
|
|||||||
|
# AI 写作「对话驱动 + 意图解析」改造方案
|
||||||
|
|
||||||
|
> 目标:在**不动现有 AI 写作页面**的前提下,新建一个「对话驱动」的写作工作台。
|
||||||
|
> 去掉素材收集 / 大纲规划 / 作家写作 / 编辑审核各阶段**分散的输入框/表单**,
|
||||||
|
> 用**底部一个统一的智能输入框**接管全流程交互;该输入框具备**强意图解析**能力,
|
||||||
|
> 能准确识别用户意图(重新搜索、加素材、加关键词、重写大纲、按要求改大纲、改写作、
|
||||||
|
> 改编辑、提编辑意见、对写作内容提问……),并在**素材不足**时自动回退去重新检索素材。
|
||||||
|
|
||||||
|
本文只做**方案与实现指引**,不含代码改动。落地时按第 9 节的路线图分阶段推进。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. 现状梳理(改造的地基)
|
||||||
|
|
||||||
|
现有 AI 写作是一套**独立的 LangGraph 子系统**(不是 lead_agent),前后端都已成型。
|
||||||
|
|
||||||
|
### 1.1 后端:`ai_writing` graph
|
||||||
|
|
||||||
|
- 图工厂:`offline-backend-20260512/backend/packages/harness/deerflow/agents/ai_writing/graph.py`
|
||||||
|
- 状态:`.../agents/ai_writing/state.py`(`AIWritingState` + `UserInterventionPayload`)
|
||||||
|
- 注册:`offline-backend-20260512/backend/langgraph.json` → `assistant_id = "ai_writing"`
|
||||||
|
- 执行:与 lead agent **共用** RunManager + StreamBridge + checkpointer(`app/gateway/services.py` 里 `assistant_id=="ai_writing"` 分发到 `make_ai_writing_graph`)
|
||||||
|
|
||||||
|
节点拓扑(实际):
|
||||||
|
|
||||||
|
```
|
||||||
|
sample_analyzer → intent_parser → researcher
|
||||||
|
→ [cond] pause_material | writer_draft
|
||||||
|
→ writer_outline → pause_outline
|
||||||
|
→ writer_draft → [cond] pause_section_help | pause_draft | END
|
||||||
|
→ editor → [cond] pause_draft | pause_review
|
||||||
|
→ pause_review → END | writer_draft
|
||||||
|
```
|
||||||
|
|
||||||
|
四个「阶段大脑」节点:
|
||||||
|
|
||||||
|
| 阶段 | 节点 | 文件 |
|
||||||
|
|------|------|------|
|
||||||
|
| 素材收集 | `researcher` | `nodes/researcher.py` |
|
||||||
|
| 大纲规划 | `writer_outline` | `nodes/writer_outline.py` |
|
||||||
|
| 作家写作 | `writer_draft` | `nodes/writer_draft.py` |
|
||||||
|
| 编辑审核 | `editor` | `nodes/editor.py` |
|
||||||
|
|
||||||
|
五个**暂停点**(`interrupt()`,靠 `Command(resume=payload)` 续跑):
|
||||||
|
|
||||||
|
| pause_point | 语义 | 可用 action(现有) |
|
||||||
|
|-------------|------|---------------------|
|
||||||
|
| `material_confirm` | 素材确认 | `confirm` / `re_search` / `supplement_search` / `enable_skill_search` |
|
||||||
|
| `outline_confirm` | 大纲确认 | `confirm` / `re_outline` |
|
||||||
|
| `draft_confirm` | 草稿确认 | `to_editor` / `finalize` / `user_revise` / `custom_revise` |
|
||||||
|
| `review_confirm` | 编辑打回确认 | `accept_review` / `force_finalize` |
|
||||||
|
| `section_help` | 素材不足求助 | `supplement` / `loose` / `delete` |
|
||||||
|
|
||||||
|
> resume 载荷字段(`UserInterventionPayload`):`action`、`approved_material_ids`、
|
||||||
|
> `extra_keywords`、`user_query`(自然语言补充检索)、`edited_outline`、`outline_feedback`、
|
||||||
|
> `user_revision_notes`、`override_verdict`、`selected_issue_indices`、`section_decisions`。
|
||||||
|
> **关键点**:现有协议已经支持「自然语言 + 结构化 action」,这是对话改造的核心可复用资产。
|
||||||
|
|
||||||
|
REST(业务元数据,非图执行):`app/gateway/routers/ai_writing.py`,前缀 `/api/ai-writing`
|
||||||
|
(sessions CRUD、transcript 保存、article-types、后台挂起 `/background` + `/progress` 等)。
|
||||||
|
|
||||||
|
持久化:`ai_writing_sessions` 表(`transcript` 为 `PortableLongText`)
|
||||||
|
+ `ai_writing_article_types`(`deerflow/persistence/...`)。
|
||||||
|
|
||||||
|
配置:`config.yaml → ai_writing`(`keyword_model`、`rank_model`、`max_materials`、
|
||||||
|
`use_builtin_agents.{researcher,outliner,writer,editor}` 等)。
|
||||||
|
|
||||||
|
### 1.2 前端:`open-canvas` 子系统
|
||||||
|
|
||||||
|
- 主页面:`frontend-web/src/open-canvas/pages/AIWritingPage.tsx`
|
||||||
|
- 路由:`/page/canvas/ai-writing`、`/page/workspace/ai-writing`
|
||||||
|
- 状态机:`contexts/AIWritingContext.tsx`(`useReducer` + LangGraph `useStream`)
|
||||||
|
- 事件翻译/reducer:`hooks/useAIWritingStream.ts`
|
||||||
|
- 类型:`types/ai-writing.ts`(`WritingStatus`、`ProgressEvent`、`UserInterventionPayload`、`AIWritingRequest`…)
|
||||||
|
- 流式:LangGraph `useStream`,`assistantId: 'ai_writing'`,`streamMode: ['values','updates','custom','messages-tuple']`
|
||||||
|
- **要去掉的输入 UI**(改造重点):
|
||||||
|
- 启动表单 `components/ai-writing/AIWritingForm.tsx` + `WritingFormContext`
|
||||||
|
- 阶段暂停输入 `components/ai-writing/InterventionCard.tsx`(素材/大纲/草稿/审核四套内嵌表单)
|
||||||
|
- **已存在的对话原型**:`components/ai-writing/WritingSetupChat.tsx`
|
||||||
|
(用 `useThreadStream` 起一条 lead_agent 线程 + `setup_writing` 工具审批卡回填表单)——
|
||||||
|
这是「对话 → 结构化配置」的现成范式,可借鉴但**不直接复用**(它只管启动前配置)。
|
||||||
|
|
||||||
|
### 1.3 结论
|
||||||
|
|
||||||
|
- **状态机、流式、暂停/续跑协议、持久化都可复用**,无需重写引擎。
|
||||||
|
- 改造本质 = **把「分散表单」换成「一个对话输入框 + 意图路由层」**,
|
||||||
|
再把意图映射回**现有的 `action + payload`**(大部分场景),
|
||||||
|
少量新意图(如「对内容提问」「素材不足自动重搜」)需要**新增协议/节点**。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. 目标与范围
|
||||||
|
|
||||||
|
### 2.1 必须满足
|
||||||
|
|
||||||
|
1. 新页面/新路由,**旧页面零改动**(用户要求「初始的不用动」)。
|
||||||
|
2. 底部**单一对话输入框**控制所有阶段交互,移除各阶段独立输入框。
|
||||||
|
3. **强意图解析**:准确识别用户自然语言意图并路由到正确动作,覆盖全流程 + 更多。
|
||||||
|
4. 用户给修改意见后,**若现有素材不足以满足要求 → 自动/建议重新检索素材**再继续。
|
||||||
|
5. 保留右侧草稿实时预览(可编辑)与时间线/进度展示。
|
||||||
|
|
||||||
|
### 2.2 明确不做(本期)
|
||||||
|
|
||||||
|
- 不改旧 `AIWritingPage` 及其表单/干预卡组件。
|
||||||
|
- 不替换底层 `ai_writing` graph 的四个阶段大脑逻辑(只加意图层与少量新协议)。
|
||||||
|
- 不引入新的状态管理库(继续 `useReducer` + `useStream`)。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 核心设计
|
||||||
|
|
||||||
|
### 3.1 总体思路:三层结构
|
||||||
|
|
||||||
|
```
|
||||||
|
┌─────────────────────────────────────────────────────────┐
|
||||||
|
│ 对话 UI 层(新) │
|
||||||
|
│ - 左:消息流(用户消息 + AI 阶段产物卡片 + 进度) │
|
||||||
|
│ - 底:统一智能输入框(唯一交互入口) │
|
||||||
|
│ - 右:草稿实时预览(复用 AIWritingDraftPanel) │
|
||||||
|
└───────────────┬─────────────────────────────────────────┘
|
||||||
|
│ 用户自然语言
|
||||||
|
▼
|
||||||
|
┌─────────────────────────────────────────────────────────┐
|
||||||
|
│ 意图解析层(新,核心) │
|
||||||
|
│ - 输入:用户文本 + 当前 WritingStatus + 上下文快照 │
|
||||||
|
│ - 输出:{ intent, action, payload, needResearch, ... } │
|
||||||
|
└───────────────┬─────────────────────────────────────────┘
|
||||||
|
│ 结构化 action + payload
|
||||||
|
▼
|
||||||
|
┌─────────────────────────────────────────────────────────┐
|
||||||
|
│ 执行层(复用现有) │
|
||||||
|
│ - 空闲态:startWriting(AIWritingRequest) │
|
||||||
|
│ - 暂停态:submitIntervention(UserInterventionPayload) │
|
||||||
|
│ - 运行中:stream.stop() → 续跑 / 新命令 │
|
||||||
|
│ - 提问态:旁路问答(不改写作状态) │
|
||||||
|
└─────────────────────────────────────────────────────────┘
|
||||||
|
```
|
||||||
|
|
||||||
|
**设计原则**:意图解析层是「翻译官」——把自由文本翻译成**现有执行层已经懂的指令**。
|
||||||
|
能复用 `action + payload` 的绝不新造协议;只有现有协议表达不了的才扩展。
|
||||||
|
|
||||||
|
### 3.2 意图分类体系(覆盖用户全流程 + 更多)
|
||||||
|
|
||||||
|
按「意图类别 → 触发时机(当前 status)→ 映射到的执行」组织。这是**意图解析引擎的目标 schema**。
|
||||||
|
|
||||||
|
#### A. 启动类(status = idle)
|
||||||
|
|
||||||
|
| 意图 | 说明 | 映射 |
|
||||||
|
|------|------|------|
|
||||||
|
| `start_writing` | 用户描述要写什么 | 解析成 `AIWritingRequest` → `startWriting()` |
|
||||||
|
| `start_with_outline` | 用户自带大纲 | `AIWritingRequest.userOutline` |
|
||||||
|
| `start_imitate` | 样文仿写 | `writingModeType=imitate` + 样文 |
|
||||||
|
|
||||||
|
#### B. 素材类(status ≈ awaiting_material_confirm / 运行中)
|
||||||
|
|
||||||
|
| 意图 | 用户说法示例 | 映射 |
|
||||||
|
|------|-------------|------|
|
||||||
|
| `confirm_materials` | 「素材可以,继续」 | `material_confirm` + `confirm`(可带勾选 ids) |
|
||||||
|
| `research_again` | 「重新搜索素材」 | `material_confirm` + `re_search` |
|
||||||
|
| `add_material` / `add_keyword` | 「补充关于 X 的素材」「加个关键词 Y」 | `material_confirm` + `supplement_search`,`user_query`=X/Y |
|
||||||
|
| `use_skill_search` | 「用 XX 技能查」 | `material_confirm` + `enable_skill_search`,`user_query`=技能/来源 |
|
||||||
|
| `select_materials` | 「只用第 1、3 条」 | `confirm` + `approved_material_ids` 子集 |
|
||||||
|
| `drop_materials` | 「去掉第 2 条」 | 同上,反选后 `approved_material_ids` |
|
||||||
|
|
||||||
|
#### C. 大纲类(status ≈ awaiting_outline_confirm)
|
||||||
|
|
||||||
|
| 意图 | 示例 | 映射 |
|
||||||
|
|------|------|------|
|
||||||
|
| `confirm_outline` | 「大纲 OK」 | `outline_confirm` + `confirm` |
|
||||||
|
| `reoutline` | 「重写大纲」 | `outline_confirm` + `re_outline`(`outline_feedback` 可空) |
|
||||||
|
| `revise_outline` | 「第二章拆成两节」「调整顺序」 | `re_outline` + `outline_feedback`=自然语言 |
|
||||||
|
| `edit_outline_manually` | 用户直接给出新大纲文本 | 解析成 `edited_outline` |
|
||||||
|
|
||||||
|
#### D. 写作/草稿类(status ≈ awaiting_draft_confirm / writing_draft)
|
||||||
|
|
||||||
|
| 意图 | 示例 | 映射 |
|
||||||
|
|------|------|------|
|
||||||
|
| `to_editor` | 「交给编辑审核」 | `draft_confirm` + `to_editor` |
|
||||||
|
| `finalize` | 「就这样定稿」 | `draft_confirm` + `finalize` |
|
||||||
|
| `revise_draft` | 「第三段太啰嗦,精简」「补个案例」 | `draft_confirm` + `user_revise`,`user_revision_notes`=意见 |
|
||||||
|
| `rewrite_section` | 「重写第二章」 | `user_revise` + 定位信息(章节)写进 notes |
|
||||||
|
| `change_tone/style` | 「更口语一点」 | `user_revise` + notes |
|
||||||
|
|
||||||
|
#### E. 编辑审核类(status ≈ awaiting_review_confirm)
|
||||||
|
|
||||||
|
| 意图 | 示例 | 映射 |
|
||||||
|
|------|------|------|
|
||||||
|
| `accept_review` | 「按编辑意见改」 | `review_confirm` + `accept_review`(可带 `selected_issue_indices`) |
|
||||||
|
| `partial_accept_review` | 「只接受第 1、2 条意见」 | `accept_review` + `selected_issue_indices` |
|
||||||
|
| `force_finalize` | 「不改了,强制定稿」 | `review_confirm` + `force_finalize` |
|
||||||
|
| `add_review_opinion` | 「你再补一条:检查数据准确性」 | 追加自定义审核意见(见 5.3 扩展) |
|
||||||
|
|
||||||
|
#### F. 素材不足求助类(status = awaiting_section_help)
|
||||||
|
|
||||||
|
| 意图 | 映射 |
|
||||||
|
|------|------|
|
||||||
|
| `section_supplement` | `section_help` + `supplement`(去重搜) |
|
||||||
|
| `section_loose` | `section_help` + `loose`(放宽续写) |
|
||||||
|
| `section_delete` | `section_help` + `delete` |
|
||||||
|
|
||||||
|
#### G. 问答类(**新**,任意 status,旁路,不改写作状态)
|
||||||
|
|
||||||
|
| 意图 | 示例 | 映射 |
|
||||||
|
|------|------|------|
|
||||||
|
| `ask_about_content` | 「第二章讲了啥?」「为什么用这个论点?」 | 旁路问答(见 5.4) |
|
||||||
|
| `ask_meta` | 「现在进行到哪一步?」「用了哪些素材?」 | 读当前 state 直接回答,不走图 |
|
||||||
|
|
||||||
|
#### H. 控制类(**新/半新**)
|
||||||
|
|
||||||
|
| 意图 | 映射 |
|
||||||
|
|------|------|
|
||||||
|
| `undo/back` | 回退到上一暂停点(依赖 checkpoint 回滚,见 8.4) |
|
||||||
|
| `restart_stage` | 重跑当前阶段 |
|
||||||
|
| `run_background` | 挂起后台自动跑 → `POST /sessions/{id}/background` |
|
||||||
|
| `cancel` | `stream.stop()` |
|
||||||
|
| `unknown/clarify` | 无法判定 → 反问澄清(对话追问,不误触发) |
|
||||||
|
|
||||||
|
> **覆盖「甚至更多」**:G(问答)、H(控制)、以及 D/E 里「素材不足自动回退重搜」都是超出原表单能力的新增。
|
||||||
|
|
||||||
|
### 3.3 「素材不足自动重搜」的判定与回退(用户强调的重点)
|
||||||
|
|
||||||
|
触发场景:用户在**大纲/草稿/审核**阶段提出修改意见,但意见需要的**信息现有素材里没有**。
|
||||||
|
|
||||||
|
判定放在**意图解析层**输出一个 `needResearch: boolean` + `researchQuery`,判定来源二选一(推荐组合):
|
||||||
|
|
||||||
|
1. **意图解析 LLM 直接判断**:把「当前素材摘要(keywords + 每条 title/来源)」喂给意图解析
|
||||||
|
prompt,让它判断「用户这条意见能否用现有素材满足」。不能 → `needResearch=true` 并给出检索词。
|
||||||
|
2. **执行阶段兜底**:`writer_draft` 严格模式本就有 `blocked_sections` → `pause_section_help`,
|
||||||
|
这是**已有的**素材不足闸门;对话层把它翻译成「素材不足,是否重新检索?」的对话追问。
|
||||||
|
|
||||||
|
回退动作:`needResearch=true` 时,先走 `material_confirm + supplement_search`(或新的
|
||||||
|
「带目标的重搜」协议,见 8.3)补素材,**补完自动继续**用户原本的修改意图(需要在对话层
|
||||||
|
记住「pending 修改意图」,重搜结束后再提交)。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. 意图解析引擎:方案对比与推荐
|
||||||
|
|
||||||
|
| 方案 | 做法 | 优点 | 缺点 |
|
||||||
|
|------|------|------|------|
|
||||||
|
| **A. 后端 LLM 意图节点**(推荐) | 新增 `/api/ai-writing/intent/parse`(或图内新节点),后端用 LLM 把 `{text, status, contextSnapshot}` → 结构化意图 JSON | 能吃到完整 state(素材/大纲/草稿);可判 `needResearch`;prompt/模型集中可控;离线内网可用配置模型 | 多一次网络往返(可接受,交互本就等待) |
|
||||||
|
| B. 前端调模型接口分类 | 前端直接调现有 `/api/models` 聊天做分类 | 少一层后端改动 | 前端难拿全后端 state 快照;prompt 分散;鉴权/模型选择复杂 |
|
||||||
|
| C. 规则 + LLM 混合 | 常见短句走关键词规则快路径,兜底 LLM | 快、省 token | 规则易漏、维护成本高;中文表达多样命中率低 |
|
||||||
|
|
||||||
|
**推荐 A(后端 LLM 意图节点)**,并在其上**叠加 C 的快路径**做优化(如「确认/继续/定稿」等
|
||||||
|
高频短句先走轻量规则,未命中再调 LLM)。理由:
|
||||||
|
|
||||||
|
- 意图判定需要**当前写作上下文**(尤其 `needResearch` 判定),后端天然持有 state/checkpoint。
|
||||||
|
- 与现有「配置助手 `setup_writing`」一脉相承,模型选择/离线部署策略统一。
|
||||||
|
- 输出 schema 稳定,前端只消费结构化结果,UI 简单。
|
||||||
|
|
||||||
|
### 4.1 意图解析输出契约(建议)
|
||||||
|
|
||||||
|
```jsonc
|
||||||
|
{
|
||||||
|
"intent": "revise_draft", // 见第 3.2 分类
|
||||||
|
"pausePoint": "draft_confirm", // 若需 resume;否则 null
|
||||||
|
"action": "user_revise", // 映射到现有 action;新意图可为新值
|
||||||
|
"payload": { // 直接可喂 submitIntervention 的字段
|
||||||
|
"userRevisionNotes": "第三段精简,并补一个 2024 年的案例"
|
||||||
|
},
|
||||||
|
"needResearch": true, // 素材是否不足
|
||||||
|
"researchQuery": "2024 行业案例", // needResearch 时的检索意图
|
||||||
|
"answer": null, // 问答类意图的直接回答(旁路)
|
||||||
|
"confidence": 0.86,
|
||||||
|
"clarify": null // 低置信时的反问话术
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
前端拿到后:
|
||||||
|
- `answer` 非空 → 直接在对话流渲染回答(问答旁路,不动写作状态)。
|
||||||
|
- `clarify` 非空或 `confidence` 低 → 渲染反问,等用户澄清(**防误触发**)。
|
||||||
|
- `needResearch=true` → 先重搜,缓存 `payload` 为 pending,重搜完再提交。
|
||||||
|
- 否则 → `submitIntervention({action, ...payload})` 或 `startWriting(...)`。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. 前端改造方案
|
||||||
|
|
||||||
|
### 5.1 新页面与路由
|
||||||
|
|
||||||
|
- 新目录:`frontend-web/src/open-canvas/pages/AIWritingChatPage.tsx`(或 `conversational/` 子目录)。
|
||||||
|
- 新路由:`/page/canvas/ai-writing-chat`(在 `OpenCanvasRoutes.tsx` 注册;旧路由保留)。
|
||||||
|
- 侧边栏:`sidebar-menu.ts` 加一个入口(如「AI 写作(对话版)」),或先不加、内部灰度。
|
||||||
|
|
||||||
|
### 5.2 复用 vs 新建
|
||||||
|
|
||||||
|
| 复用(尽量不改) | 新建 |
|
||||||
|
|------------------|------|
|
||||||
|
| `AIWritingContext` / `useAIWritingStream`(状态机 + 流式) | 统一对话输入框组件 `WritingChatComposer` |
|
||||||
|
| `AIWritingDraftPanel`(右侧草稿预览) | 消息流容器 `WritingChatThread`(渲染阶段产物为消息卡片) |
|
||||||
|
| `types/ai-writing.ts`(按需扩展) | 意图解析客户端 `api/ai-writing-intent.ts` |
|
||||||
|
| `ProgressEvent` 事件模型 | 阶段产物 → 消息卡片的适配器 `progressToMessage.ts` |
|
||||||
|
| 会话持久化 REST | 「pending 意图」暂存逻辑(重搜后续跑) |
|
||||||
|
|
||||||
|
**不复用**:`AIWritingForm` / `WritingFormContext` / `InterventionCard`(这三个就是要去掉的表单)。
|
||||||
|
|
||||||
|
### 5.3 交互流程(对话版)
|
||||||
|
|
||||||
|
1. 空闲:用户在底部输入「写一篇关于 X 的深度分析,2000 字」→ 意图解析 `start_writing`
|
||||||
|
→ 组装 `AIWritingRequest` → `startWriting()`。
|
||||||
|
2. 运行中:`ProgressEvent`(`research_progress`/`outline_chunk`/`draft_chunk`…)
|
||||||
|
→ 适配成消息流里的**进度卡片/流式卡片**(复用现有流式视图组件的展示部分)。
|
||||||
|
3. 到达暂停点:不再弹 `InterventionCard`,而是在消息流里展示**阶段产物卡片**
|
||||||
|
(素材列表 / 大纲 / 草稿 / 审核结果)+ 一句提示「你可以说:确认继续 / 补充素材 / 改大纲…」。
|
||||||
|
用户下一句自然语言 → 意图解析 → `submitIntervention`。
|
||||||
|
4. 问答:任意时刻用户提问 → 旁路回答,不打断写作状态。
|
||||||
|
5. 素材不足:意图解析 `needResearch` 或后端 `section_help` → 对话追问「素材不足,帮你重搜?」
|
||||||
|
→ 确认后重搜 → 自动续跑 pending 意图。
|
||||||
|
|
||||||
|
### 5.4 问答旁路(新能力)
|
||||||
|
|
||||||
|
「对写作内容提问」不应改写作 state。两种实现:
|
||||||
|
|
||||||
|
- **轻量(推荐先做)**:意图解析节点直接带回 `answer`(后端能读 state,一次调用出答案)。
|
||||||
|
- **完整**:新起一条**只读**问答线程(lead_agent,context 注入当前草稿/大纲作为背景),
|
||||||
|
类似 `WritingSetupChat` 的 `useThreadStream` 模式,但只读不回填。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. 后端改造方案
|
||||||
|
|
||||||
|
### 6.1 意图解析入口(二选一)
|
||||||
|
|
||||||
|
- **方案 A1(推荐,独立 REST)**:`app/gateway/routers/ai_writing.py` 新增
|
||||||
|
`POST /api/ai-writing/sessions/{id}/intent`,入参 `{text}`,后端读该 session 的
|
||||||
|
checkpoint state(素材/大纲/草稿摘要)+ 用 `ai_writing` 配置模型解析,返回第 4.1 的契约。
|
||||||
|
- 好处:不改图拓扑;前端拿到结果后再决定调 `startWriting`/`submitIntervention`。
|
||||||
|
- 方案 A2(图内节点):在图里加 `conversation_router` 节点。改动大、状态耦合高,**不推荐**首期。
|
||||||
|
|
||||||
|
### 6.2 意图解析 prompt
|
||||||
|
|
||||||
|
新增 `agents/ai_writing/prompts/intent_router_prompts.py`(或复用/扩展 `intent_parser.py`):
|
||||||
|
- 输入:用户文本、`current_status`、素材摘要(keywords + 每条 title/source)、大纲纲要、
|
||||||
|
草稿字数/章节标题、审核意见列表。
|
||||||
|
- 输出:严格 JSON(第 4.1 契约)。要求模型**只在证据充分时给高 confidence**,
|
||||||
|
否则给 `clarify`(防误触发是硬指标)。
|
||||||
|
|
||||||
|
### 6.3 「带目标的重搜」协议扩展(可选增强)
|
||||||
|
|
||||||
|
现有 `supplement_search` 用 `user_query` 追加检索。为支持「改稿意见 → 缺素材 → 重搜 → 自动续跑」,
|
||||||
|
建议在 `material_confirm` 的 resume 里新增可选字段 `resume_intent`(重搜完成后要自动执行的原始意图)。
|
||||||
|
- 前端也可**纯前端**实现(重搜完成事件回来后再自动提交缓存的 pending payload),**首期优先前端实现**,避免动后端协议。
|
||||||
|
|
||||||
|
### 6.4 追加自定义审核意见(`add_review_opinion`)
|
||||||
|
|
||||||
|
`editor`/`pause_review` 目前只接受「接受/强制定稿」。要支持「你再补一条审核意见」,
|
||||||
|
需在 `review_confirm` resume 里接受 `extra_review_notes`,`editor` 或 `writer_draft`
|
||||||
|
修订时并入。首期可先降级为 `user_revise` + notes(把用户的审核诉求当作改稿意见),
|
||||||
|
**完整版**再扩协议。
|
||||||
|
|
||||||
|
### 6.5 不需要改的部分
|
||||||
|
|
||||||
|
- 四个阶段大脑节点(researcher/writer_outline/writer_draft/editor)逻辑不动。
|
||||||
|
- 五个暂停点、checkpoint、StreamBridge、持久化不动。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. 数据流时序(改稿 + 素材不足自动重搜)
|
||||||
|
|
||||||
|
```
|
||||||
|
用户: "第三段补个2024年的行业案例"
|
||||||
|
│
|
||||||
|
▼ POST /api/ai-writing/sessions/{id}/intent { text }
|
||||||
|
后端: 读 state(素材摘要) + LLM 解析
|
||||||
|
│ 返回 { intent:revise_draft, action:user_revise,
|
||||||
|
│ payload:{userRevisionNotes:...},
|
||||||
|
│ needResearch:true, researchQuery:"2024 行业案例" }
|
||||||
|
▼
|
||||||
|
前端: needResearch=true → 缓存 pending=payload
|
||||||
|
│ 对话追问/直接执行: submitIntervention(material_confirm, supplement_search, user_query="2024 行业案例")
|
||||||
|
▼ LangGraph resume → researcher 补素材 → materials_ready
|
||||||
|
前端: 收到新素材 → 自动提交 pending
|
||||||
|
│ submitIntervention(draft_confirm, user_revise, userRevisionNotes=...)
|
||||||
|
▼ writer_draft 用新素材改稿 → draft_chunk... → draft_ready → pause_draft
|
||||||
|
前端: 消息流展示新草稿 + "已按你的意见改写并补充了案例"
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. 关键实现细节与坑
|
||||||
|
|
||||||
|
1. **暂停态识别**:对话层必须知道「现在停在哪个 pause_point」才能正确映射 action。
|
||||||
|
`AIWritingContext` 已有 `currentPause`/`status`,直接读。
|
||||||
|
2. **防误触发**:低置信意图一律走 `clarify` 反问,绝不猜着执行(尤其 `finalize`/`re_search` 这种代价大的)。
|
||||||
|
3. **pending 意图队列**:素材不足重搜是「先插一段、再回原意图」,需要一个小状态机记住 pending,
|
||||||
|
并处理「重搜后用户又改主意」的情况(重搜完成前允许覆盖 pending)。
|
||||||
|
4. **回退/undo(H 类)**:依赖 checkpoint 回滚,`runtime/runs/worker.py` 有 `rollback` 概念,
|
||||||
|
首期可**不做**或只做「重跑当前阶段」。
|
||||||
|
5. **问答旁路不污染 transcript**:问答消息可标记 `kind:'qa'`,与写作进度事件区分持久化。
|
||||||
|
6. **流式产物→消息卡片**:复用现有 `OutlineStreamingView`/`DraftStreamingPreview` 等的**展示部分**,
|
||||||
|
套进消息气泡即可,不必重写渲染。
|
||||||
|
7. **离线内网**:意图解析模型走 `config.yaml → ai_writing` 里的配置模型;检索仍走技能/内网 ES,
|
||||||
|
不联网(与现有并行席位「禁 web_search」的离线策略一致)。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. 分阶段实施路线图
|
||||||
|
|
||||||
|
**阶段 0 — 骨架(不含意图)**
|
||||||
|
- 新路由 + 新页面 `AIWritingChatPage`,复用 `AIWritingContext`/`useStream`/`DraftPanel`。
|
||||||
|
- 底部对话框先只做「空闲 `start_writing` + 暂停点固定按钮」跑通端到端(相当于把干预卡换成消息)。
|
||||||
|
|
||||||
|
**阶段 1 — 意图解析(核心)**
|
||||||
|
- 后端 `POST /sessions/{id}/intent` + intent prompt,返回第 4.1 契约。
|
||||||
|
- 前端接入:自然语言 → 意图 → `startWriting`/`submitIntervention`,覆盖 A~F 类意图。
|
||||||
|
- 加高频短句规则快路径 + 低置信 `clarify` 反问。
|
||||||
|
|
||||||
|
**阶段 2 — 问答旁路 + 素材不足自动重搜**
|
||||||
|
- G 类问答(先用 intent 节点直接带 `answer`)。
|
||||||
|
- `needResearch` + pending 意图机制(前端实现重搜后自动续跑)。
|
||||||
|
|
||||||
|
**阶段 3 — 增强协议(按需)**
|
||||||
|
- `add_review_opinion` 扩 `review_confirm` 协议、`resume_intent` 后端化、undo/回退。
|
||||||
|
|
||||||
|
**阶段 4 — 打磨**
|
||||||
|
- 消息卡片视觉、历史回看(复用 transcript)、后台挂起入口、灰度到侧边栏。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 10. 关键文件清单(落地时对照)
|
||||||
|
|
||||||
|
### 新增(前端)
|
||||||
|
- `open-canvas/pages/AIWritingChatPage.tsx` — 新页面
|
||||||
|
- `open-canvas/components/ai-writing-chat/WritingChatComposer.tsx` — 统一输入框
|
||||||
|
- `open-canvas/components/ai-writing-chat/WritingChatThread.tsx` — 消息流
|
||||||
|
- `open-canvas/components/ai-writing-chat/progressToMessage.ts` — 事件→消息适配
|
||||||
|
- `open-canvas/api/ai-writing-intent.ts` — 意图解析客户端
|
||||||
|
- 路由注册:`open-canvas/OpenCanvasRoutes.tsx`(+ 可选 `sidebar-menu.ts`)
|
||||||
|
|
||||||
|
### 新增(后端)
|
||||||
|
- `app/gateway/routers/ai_writing.py` — 加 `POST /sessions/{id}/intent`
|
||||||
|
- `agents/ai_writing/prompts/intent_router_prompts.py` — 意图 prompt
|
||||||
|
- (阶段 3)`state.py` / `nodes/*` — 扩 `review_confirm`、`resume_intent`
|
||||||
|
|
||||||
|
### 复用(尽量不改)
|
||||||
|
- `open-canvas/contexts/AIWritingContext.tsx`、`hooks/useAIWritingStream.ts`
|
||||||
|
- `open-canvas/components/ai-writing/AIWritingDraftPanel.tsx` 及各流式展示组件
|
||||||
|
- `open-canvas/types/ai-writing.ts`(按需扩字段)
|
||||||
|
- `agents/ai_writing/graph.py`、四个阶段节点、五个暂停点
|
||||||
|
|
||||||
|
### 不动
|
||||||
|
- 旧 `open-canvas/pages/AIWritingPage.tsx` 及 `AIWritingForm`/`WritingFormContext`/`InterventionCard`
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 11. 待确认
|
||||||
|
|
||||||
|
1. 意图解析引擎是否采用**推荐的方案 A(后端 LLM 节点)**?
|
||||||
|
2. 新页面是**独立入口**(侧边栏新增)还是先**内部灰度**(仅直链)?
|
||||||
|
3. 「素材不足自动重搜」首期是否接受**前端实现 pending 续跑**(不动后端 resume 协议)?
|
||||||
|
4. 问答旁路首期是否接受**意图节点直接带答案**(不新起只读线程)?
|
||||||
|
|
||||||
|
> 以上默认按「A / 内部灰度 / 前端 pending / 意图节点带答案」推进,如需调整请指出。
|
||||||
@@ -0,0 +1,198 @@
|
|||||||
|
# MAF-R0 阶段 0 交付文档:旧会商交互基线与组件映射
|
||||||
|
|
||||||
|
> 状态:已完成
|
||||||
|
> 更新时间:2026-08-03
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. 实验原型隐藏说明
|
||||||
|
|
||||||
|
### 已完成的操作
|
||||||
|
|
||||||
|
- `/page/maf/*` 路由(`MafSessionsPage` + `MafRunDetailPage`)已从正式菜单移除。
|
||||||
|
- `workspace-nav-chat-list.tsx:199` 保留了墓碑注释:`{/* [MAF-R0] 实验原型已从正式菜单隐藏,仅保留路由供开发诊断:/page/maf */}`
|
||||||
|
- `MafRoutes.tsx` 文件头部标注为 `[MAF-R0 实验原型 — 仅供开发诊断,已从正式菜单移除]`。
|
||||||
|
- 该原型仅可通过手动输入 URL `/page/maf` 访问,不在任何侧边栏、导航菜单或工作区入口中出现。
|
||||||
|
- 停止在该原型上新增业务功能。
|
||||||
|
|
||||||
|
### 原型文件位置
|
||||||
|
|
||||||
|
| 文件 | 用途 |
|
||||||
|
|------|------|
|
||||||
|
| `src/pages/MafRoutes.tsx` | 路由定义(index → MafSessionsPage, runs/:runId → MafRunDetailPage) |
|
||||||
|
| `src/maf-roundtable/pages/MafSessionsPage.tsx` | 会话列表页(642 行) |
|
||||||
|
| `src/maf-roundtable/pages/MafRunDetailPage.tsx` | 单 run 工作区(195 行) |
|
||||||
|
| `src/maf-roundtable/` | 完整模块(33 文件:api/hooks/components/lib/tests) |
|
||||||
|
| `vitest.maf.config.ts` | MAF 专用测试配置 |
|
||||||
|
| `package.json` → `test:maf` | MAF 测试脚本 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. 旧会商 8 类页面状态交互地图
|
||||||
|
|
||||||
|
旧会商入口:`src/roundtable-planning/pages/RoundtablePlanningPage.tsx`(4376 行,三步合一)。
|
||||||
|
|
||||||
|
### 状态 1:空白 / 新建
|
||||||
|
|
||||||
|
- 触发:点击「新建会商」或首次进入。
|
||||||
|
- 表现:中心区域显示欢迎语 + 业务链选择入口 + 底部输入框。左侧历史列表为空或显示已有草稿。
|
||||||
|
- 关键组件:`RoundtablePlanningPage`(currentStep=1 初始态)、`Step1Panel`(空消息列表 + 输入栏)。
|
||||||
|
- 数据:`useDraftPersistence` 创建新草稿记录。
|
||||||
|
|
||||||
|
### 状态 2:历史切换
|
||||||
|
|
||||||
|
- 触发:点击左侧草稿列表中的某一条。
|
||||||
|
- 表现:加载该草稿的 Step1/Step2/Step3 快照,恢复到对应步骤。
|
||||||
|
- 关键组件:`useRoundtableDrafts`(列表)、`useDraftPersistence`(加载 + hydrate)。
|
||||||
|
- 数据:`GET /api/roundtable-drafts/{id}` 或 `GET /api/roundtable-task-drafts/{id}`。
|
||||||
|
|
||||||
|
### 状态 3:用户提问
|
||||||
|
|
||||||
|
- 触发:用户在 Step1 输入框输入任务文本并点击发送。
|
||||||
|
- 表现:用户气泡立即插入,随后出现 `MessageLoadingPlaceholder`(spinner + 跳动点),等待 SSE 首帧。
|
||||||
|
- 关键组件:`Step1Panel`(输入栏 → 发送)、`MessageBubble`(用户气泡)、`MessageLoadingPlaceholder`。
|
||||||
|
- 数据:`POST /api/intent/init` → `POST /api/intent/stream`(SSE)。
|
||||||
|
|
||||||
|
### 状态 4:意图澄清
|
||||||
|
|
||||||
|
- 触发:总控/意图智能体判断信息不足,返回 `ask_clarification` 帧。
|
||||||
|
- 表现:对话流中嵌入 `IntentClarificationCard`(单选/多选 + 自定义输入),用户选择后提交。
|
||||||
|
- 关键组件:`IntentClarificationCard`(选项卡)、`Step1Panel`(澄清提交逻辑)。
|
||||||
|
- 数据:SSE 帧 `phase=clarification`,用户回答后继续 `POST /api/intent/stream`。
|
||||||
|
|
||||||
|
### 状态 5:总控派活
|
||||||
|
|
||||||
|
- 触发:Step1 完成(INTENT_READY)→ 进入 Step2 → 总控输出派活计划。
|
||||||
|
- 表现:总控气泡显示派活计划(谁做什么),`ParallelSeatStrip` 显示参与席位头像条(running/done/error 徽章)。
|
||||||
|
- 关键组件:`Step2Panel`(派活叙事)、`ParallelSeatStrip`(席位条)、`MessageBubble`(总控气泡)。
|
||||||
|
- 数据:`POST /api/multi-agent/init`(SSE,建立 thread map)→ `POST /api/multi-agent/run/stream`。
|
||||||
|
|
||||||
|
### 状态 6:席位发言
|
||||||
|
|
||||||
|
- 触发:总控派活后,各席位按序/并行执行。
|
||||||
|
- 表现:每个席位的气泡流式出现(`StreamingCursor` 闪烁尾标),工具调用显示为 `MessageStepsCard`(ChainOfThought 折叠卡)。
|
||||||
|
- 关键组件:`MessageBubble`(席位气泡 + avatar)、`StreamingCursor`、`MessageStepsCard`(工具步骤)、`DialogueSpeedMeter`(tok/s)。
|
||||||
|
- 数据:SSE delta 帧按 message id 合并。
|
||||||
|
|
||||||
|
### 状态 7:审批
|
||||||
|
|
||||||
|
- 触发:席位执行外部写操作,WriteGuard 拦截并请求审批。
|
||||||
|
- 表现:对话流中嵌入审批卡(工具名 + 风险等级 + 摘要),用户点击批准/拒绝。
|
||||||
|
- 关键组件:MAF 原型中为 `MafApprovalCard`;旧会商中审批通过 `roundtable-jobs` 的 clarify-resume 机制。
|
||||||
|
- 数据:`POST /api/maf-roundtable/approvals/{id}/decision`(MAF)或 `POST /api/roundtable-jobs/{id}/clarify-resume`(旧)。
|
||||||
|
|
||||||
|
### 状态 8:完成 / 失败恢复
|
||||||
|
|
||||||
|
- 触发:所有席位完成 + 总控收束 → Step3;或 SSE 错误帧 / 网络断开。
|
||||||
|
- 表现(完成):Step3 显示最终报告(Markdown 总结 / HTML 看板 / 大屏),可追问。
|
||||||
|
- 表现(失败):错误提示 + 恢复按钮;后台任务可挂起/恢复。
|
||||||
|
- 关键组件:`Step3Panel` → `HighFidelityReport`(Report/Dashboard/Summary/FileBrowse 模式);失败时 `RoundtableJobNotifier`。
|
||||||
|
- 数据:`useStep3Summary` / `useStep3Report` / `useStep3Dashboard`;失败恢复 via `POST /api/roundtable-jobs/{id}/resume`。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 旧组件 → 新 MAF view-model 映射表
|
||||||
|
|
||||||
|
| 旧组件 / hook | 新 MAF 对应 | 映射说明 |
|
||||||
|
|---|---|---|
|
||||||
|
| `RoundtablePlanningPage`(三步壳) | `MafRoundtableConversationPage` | 不再有步骤切换;单一连续时间线。 |
|
||||||
|
| `Step1Panel`(意图问答) | `ConversationTimeline` + `ClarificationCard` | 意图理解变为 `manager.intent` 事件卡。 |
|
||||||
|
| `Step2Panel`(研讨对话流) | `ConversationTimeline` + `SeatMessageBubble` | 席位发言由 SSE `agent.message.*` 驱动。 |
|
||||||
|
| `Step3Panel` / `HighFidelityReport` | `FinalResultCard` | 结论作为时间线中的结果卡。 |
|
||||||
|
| `MessageBubble` | `SeatMessageBubble` / 总控气泡 | 重写为 MAF view model;不复用旧 props。 |
|
||||||
|
| `MessageStepsCard` | `ToolProgressCard` | 工具过程由 `tool.started/progress/completed` 事件驱动。 |
|
||||||
|
| `IntentClarificationCard` | `ClarificationCard` | 由 `clarification.required` 事件触发。 |
|
||||||
|
| `ParallelSeatStrip` | `ParticipantStrip` | 状态改由 `manager.dispatch` + `seat.delivery.submitted` + `manager.review.decision` 驱动。 |
|
||||||
|
| `useStep1Intent` | 删除 | 意图理解完全服务端化。 |
|
||||||
|
| `useStep2Orchestration` | 删除 | 编排完全服务端化;前端只消费 SSE。 |
|
||||||
|
| `useDraftPersistence` | `use-maf-conversations` | 历史改为 conversation 列表。 |
|
||||||
|
| `useRoundtableDrafts` | `use-maf-conversations` | 同上。 |
|
||||||
|
| `useStep3Summary/Report/Dashboard` | 删除 | 结论由服务端生成,前端只渲染结果卡。 |
|
||||||
|
| `useAutoScroll` | 可复用(无业务依赖) | 纯 UI 滚动逻辑。 |
|
||||||
|
| `useDialogueSpeedMetrics` | 可复用(无业务依赖) | 纯 UI 速度指标。 |
|
||||||
|
| `MafApprovalCard`(原型) | `ApprovalMessageCard` | 重写为 conversation 时间线内卡片。 |
|
||||||
|
| `MafEventTimeline`(原型) | 删除 | 不再暴露 run/event 管理后台。 |
|
||||||
|
| `MafSeatStatusPanel`(原型) | `ParticipantStrip` | 合并到右侧席位条。 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. 禁止复用的旧业务 hook / API / 状态清单
|
||||||
|
|
||||||
|
以下模块 **严禁** 被新 MAF conversation 页面直接 import 或调用:
|
||||||
|
|
||||||
|
### 4.1 旧会商 API 客户端(`src/roundtable-planning/api/`)
|
||||||
|
|
||||||
|
| 文件 | 禁止原因 |
|
||||||
|
|------|----------|
|
||||||
|
| `multi-agent.ts` | 调用 `/api/multi-agent/*`,包含前端 thread map 和编排逻辑 |
|
||||||
|
| `intent.ts` | 调用 `/api/intent/*`,前端驱动意图流 |
|
||||||
|
| `drafts.ts` | 调用 `/api/roundtable-drafts`,旧草稿状态 |
|
||||||
|
| `task-drafts.ts` | 调用 `/api/roundtable-task-drafts`,旧任务草稿 |
|
||||||
|
| `roundtable-jobs.ts` | 调用 `/api/roundtable-jobs`,旧后台任务 |
|
||||||
|
| `chains.ts` | 调用 `/api/roundtable-chains`,旧业务链 CRUD |
|
||||||
|
| `recommend.ts` | 调用 `/api/recommend/stream`,旧推荐流 |
|
||||||
|
| `flow-extract.ts` | 调用 `/api/flow-extract/*`,旧流程图提取 |
|
||||||
|
| `ingest.ts` | 调用 `/api/flow-extract/ingest-eligibility` |
|
||||||
|
| `dashboard-sessions.ts` | 调用 `/api/dashboard-sessions` |
|
||||||
|
| `diagnostics-report.ts` | 调用 `/api/roundtable-diagnostics/report` |
|
||||||
|
|
||||||
|
### 4.2 旧会商业务 Hook(`src/roundtable-planning/hooks/`)
|
||||||
|
|
||||||
|
| 文件 | 禁止原因 |
|
||||||
|
|------|----------|
|
||||||
|
| `useStep1Intent.ts` | 前端驱动意图状态机 |
|
||||||
|
| `useStep2Orchestration.ts` | 前端编排循环(thread map、派活、轮次控制) |
|
||||||
|
| `useDraftPersistence.ts` | 旧草稿持久化逻辑 |
|
||||||
|
| `useRoundtableDrafts.ts` | 旧草稿列表 |
|
||||||
|
| `useStep3Summary.ts` | 前端驱动总结生成 |
|
||||||
|
| `useStep3Report.ts` | 前端驱动看板生成 |
|
||||||
|
| `useStep3Dashboard.ts` | 前端驱动大屏生成 |
|
||||||
|
|
||||||
|
### 4.3 旧会商业务状态类型
|
||||||
|
|
||||||
|
- `Step1Snapshot`、`Step2Snapshot`、`Step2Dialogue`、`StubAiMessage`、`ParallelSeatView`
|
||||||
|
- `ThreadIdMap`、`ClarificationPayload`、`LeaderDispatch`、`StreamPhase`
|
||||||
|
- `DraftRecord`、`DraftMeta`、`DraftStep1Snapshot`、`DraftStep2Snapshot`、`DraftStep3Snapshot`
|
||||||
|
- `RoundtableJob`、`JobStatus`、`DispatchChainNode`、`StartJobPayload`
|
||||||
|
- `IntentSummary`、`IntentFileRef`、`IntentStreamPhase`
|
||||||
|
|
||||||
|
### 4.4 MAF 原型中禁止继续扩展的模块
|
||||||
|
|
||||||
|
| 文件 | 禁止原因 |
|
||||||
|
|------|----------|
|
||||||
|
| `src/maf-roundtable/pages/MafSessionsPage.tsx` | 实验原型,不作为产品主界面 |
|
||||||
|
| `src/maf-roundtable/pages/MafRunDetailPage.tsx` | 实验原型,暴露 run/session 管理 |
|
||||||
|
| `src/maf-roundtable/hooks/use-maf-events.ts` | 原型轮询 hook |
|
||||||
|
| `src/maf-roundtable/api/sessions.ts` | 原型 session CRUD |
|
||||||
|
| `src/maf-roundtable/api/runs.ts` | 原型 run 管理 |
|
||||||
|
| `src/maf-roundtable/api/events.ts` | 原型事件轮询 |
|
||||||
|
| `src/maf-roundtable/lib/session-form.ts` | 原型表单逻辑 |
|
||||||
|
|
||||||
|
### 4.5 允许参考但必须重写的视觉组件
|
||||||
|
|
||||||
|
以下组件的 **交互模式和信息架构** 可作为参考,但新 MAF 页面必须使用独立实现(MAF view model + tdesign-react),不得直接 import:
|
||||||
|
|
||||||
|
- `MessageBubble.tsx`(气泡布局)
|
||||||
|
- `MessageStepsCard.tsx`(工具步骤折叠)
|
||||||
|
- `IntentClarificationCard.tsx`(澄清选项卡)
|
||||||
|
- `ParallelSeatStrip.tsx`(席位头像条)
|
||||||
|
- `ScrollToBottomButton.tsx`(回到底部按钮)
|
||||||
|
- `Avatars.tsx`(头像 SVG)
|
||||||
|
|
||||||
|
### 4.6 可安全复用的无业务依赖工具
|
||||||
|
|
||||||
|
- `useAutoScroll.ts`(纯滚动逻辑)
|
||||||
|
- `useDialogueSpeedMetrics.ts`(纯速度指标)
|
||||||
|
- `src/lib/use-desensitize-subtree.ts`(DOM 脱敏,已标注多模块共享)
|
||||||
|
- `markdown-components.tsx`(markdown 渲染配置,需确认无旧状态依赖)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. 验收确认
|
||||||
|
|
||||||
|
- [x] 旧会商 `RoundtablePlanningPage` 无代码行为变化(未修改任何 `src/roundtable-planning/` 文件)。
|
||||||
|
- [x] `/page/maf/*` 原型已从菜单隐藏,仅保留路由供开发诊断。
|
||||||
|
- [x] 8 类页面状态已记录,含触发条件、表现、关键组件和数据流。
|
||||||
|
- [x] 旧组件到新 MAF view-model 的映射表已完成。
|
||||||
|
- [x] 禁止复用的 hook/API/状态清单已明确。
|
||||||
|
- [x] 任何人可根据本文档判断新版是否「像原页面」。
|
||||||
@@ -0,0 +1,645 @@
|
|||||||
|
# MAF 多智能体会商升级版实施计划(V2:保留原会商体验,替换底层编排)
|
||||||
|
|
||||||
|
> 文档状态:**V2 重写,待按本计划重新实施**
|
||||||
|
> 更新时间:2026-08-02
|
||||||
|
> 本轮决策:原 `/page/maf/*` 的「会话列表 + run 详情 + 前端轮询」原型不再作为目标产品继续扩展。
|
||||||
|
> 产品目标:新 MAF 会商是**原多智能体会商页面的底层升级版**,不是另造一套会商产品。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 1. 本次重新确认的产品目标
|
||||||
|
|
||||||
|
用户认可的是现有多智能体会商的视觉语言和交互链路:左侧历史会话、中心对话流、输入框发问、意图理解、总控派活、席位发言、过程卡片、澄清与审批、最终结论。
|
||||||
|
|
||||||
|
本次升级只替换以下“看不见的发动机”:
|
||||||
|
|
||||||
|
- 旧的前端驱动编排、多个前端可见线程和旧会商作业,替换为 MAF Workflow + DeerFlow Agent Adapter;
|
||||||
|
- 浏览器定时轮询,替换为一条可恢复的 SSE 对话事件流;
|
||||||
|
- 用户手动创建/管理多个智能体线程,收敛为服务端按需创建和持久化的内部执行线程;
|
||||||
|
- 保留现有工具、技能、MCP、沙箱、WriteGuard、审批和审计能力,并让它们在原有会商体验中自然出现。
|
||||||
|
|
||||||
|
**不能接受的结果:** 新页面没有对话列表、没有输入框、让用户先创建 session/run、需要用户选择或理解多个内部线程、靠多个定时 GET 拼出实时效果,或把审批/流程图做成脱离聊天主链路的独立后台页。
|
||||||
|
|
||||||
|
### 1.1 必须保留的用户体验
|
||||||
|
|
||||||
|
| 原会商能力 | 升级版要求 |
|
||||||
|
|---|---|
|
||||||
|
| 左侧会商历史、新建会商 | 保留。一个条目就是一个用户可见会商,不暴露 MAF session/run/thread。 |
|
||||||
|
| 中央连续对话流 | 保留。用户消息、总控消息、席位发言、工具进度、澄清、审批、最终报告按时间顺序呈现。 |
|
||||||
|
| 底部对话输入框 | 保留。用户可在首轮发起任务、在澄清时回答、在会商结束后追问/继续会商。 |
|
||||||
|
| 意图理解 | 保留并服务端化。先识别“可直接会商 / 需要澄清 / 只回答问题 / 需要工具或写入”。 |
|
||||||
|
| 总控智能体派活 | 保留。总控是唯一能选择席位、分派任务、收束轮次和生成结论的主体。 |
|
||||||
|
| 业务链、席位与过程可视化 | 保留其信息架构和交互,不复用旧业务状态;数据改由 MAF 事件驱动。 |
|
||||||
|
| 澄清、取消、恢复、审批 | 保留,并成为对话流中的卡片,而不是跳转到 run 管理页。 |
|
||||||
|
|
||||||
|
### 1.2 明确不保留的实现方式
|
||||||
|
|
||||||
|
- 不在浏览器端 `setInterval` 轮询 run、events、actions、approvals;
|
||||||
|
- 不让浏览器创建或维护 seat thread、manager thread、thread map;
|
||||||
|
- 不让用户先填写“经理、席位、模式、最大轮数”才能开始一次正常会商;
|
||||||
|
- 不把 `MafSessionsPage` / `MafRunDetailPage` 当作新产品主界面继续堆功能;
|
||||||
|
- 不调用旧的 `/api/roundtable-*`、`/api/multi-agent/*`、`roundtable_jobs`、旧草稿或旧会商状态;
|
||||||
|
- 不修改旧 `RoundtablePlanningPage` 的业务状态机、历史数据和对外行为。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. 总体架构与边界
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
flowchart LR
|
||||||
|
U[用户:会商对话页] -->|POST 新建/发送消息| API[MAF Conversation API]
|
||||||
|
API --> C[(MAF Conversation / Message)]
|
||||||
|
API --> D[MAF Dispatcher]
|
||||||
|
D --> W[MAF Workflow]
|
||||||
|
W --> M[总控:意图、派活、收束]
|
||||||
|
M --> S[服务端按需创建席位执行线程]
|
||||||
|
S --> A[DeerFlow Agent Adapter]
|
||||||
|
A --> T[工具 / 技能 / MCP / 沙箱]
|
||||||
|
T --> G[WriteGuard + 审批]
|
||||||
|
W --> E[(持久化会商事件)]
|
||||||
|
E --> H[SSE Hub:重放 + 实时推送]
|
||||||
|
H -->|一条 SSE 流| U
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2.1 前后端职责
|
||||||
|
|
||||||
|
| 层 | 职责 | 禁止事项 |
|
||||||
|
|---|---|---|
|
||||||
|
| 前端 | 呈现会商、发送用户消息、消费 SSE、执行用户明确点击的取消/审批/重试 | 编排席位、决定下一位发言者、创建内部线程、轮询事件。 |
|
||||||
|
| MAF Conversation Service | 会话聚合、消息持久化、运行创建、SSE 重放、所有权校验 | 让浏览器传入 user_id、工具能力快照、目标键或内部幂等键。 |
|
||||||
|
| MAF Workflow | 意图判断、总控派活、席位协作、交叉审查、结论、恢复 | 把模型输出直接当作可写外部系统的授权。 |
|
||||||
|
| DeerFlow Adapter | 为总控/席位提供既有模型、工具、技能、MCP、沙箱和用户上下文 | 从 `packages/harness/deerflow/**` 导入 `app.*`。 |
|
||||||
|
| WriteGuard | 风险识别、审批、目标租约、一次执行、审计 | 将密钥、target_key、idempotency_key 回传给浏览器或模型。 |
|
||||||
|
|
||||||
|
### 2.2 新旧隔离规则
|
||||||
|
|
||||||
|
1. 旧会商继续运行,旧路由、旧 API、旧数据表、旧任务深链全部不变。
|
||||||
|
2. 新页面独立使用 `/api/maf-roundtable/*` 和 `maf_roundtable_*` 表;只允许参考旧页面的布局、文案、交互和通用视觉规范。
|
||||||
|
3. 旧 `roundtable-planning/**` 中的业务 hook、草稿、Job、SSE 消费器和状态类型不能被新页面直接 import。
|
||||||
|
4. 若需要复用旧组件的视觉效果,必须复制/迁移为 `maf-roundtable/legacy-compatible/**` 中的新组件,替换为 MAF view model;或抽到无业务依赖的公共展示组件。旧页面不得因此改变行为。
|
||||||
|
5. 新旧页面都只能使用仓库本地依赖;UI 基础组件统一采用 **`tdesign-react`**,不接远程 UI、CDN 或外部运行时。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. 用户可见的新版会商流程
|
||||||
|
|
||||||
|
### 3.1 首次进入
|
||||||
|
|
||||||
|
1. 用户点击独立菜单“MAF 会商(升级版)”,进入与旧会商相同层级的页面壳。
|
||||||
|
2. 左侧显示自己的 MAF 会商历史和“新建会商”。新建只创建一个**用户可见会商**,不显示 session/run/thread 表单。
|
||||||
|
3. 中心区域显示欢迎语、业务链/任务上下文入口和对话输入框。
|
||||||
|
4. 用户输入任务后,前端立即插入本地的用户气泡,调用一次 `POST /messages`,然后消费同一会商的 SSE 流。
|
||||||
|
|
||||||
|
### 3.2 一次会商轮次
|
||||||
|
|
||||||
|
1. SSE 推送“正在理解任务”事件;页面以旧会商的过程卡/总控气泡表现。
|
||||||
|
2. 若信息不足,推送 `clarification.required`,页面显示可回复的澄清卡;用户回答后仍通过输入框或卡片提交。
|
||||||
|
3. 若可以执行,总控输出“派活计划”;页面以旧的席位条、派活卡和消息气泡展示。
|
||||||
|
4. 每个席位的可见发言、工具进度、技能过程、交叉审查和总控收束都写入同一条时间线。
|
||||||
|
5. 出现外部写操作时,SSE 推送审批卡。用户批准/拒绝后,后端恢复工作流,SSE 继续推送;前端不手工轮询 run 状态。
|
||||||
|
6. 最终结论、事实账本、执行动作和报告作为对话流中的结果卡呈现;用户可以继续在同一会商输入追问。
|
||||||
|
|
||||||
|
### 3.3 “一个会商”与内部线程的关系
|
||||||
|
|
||||||
|
- 用户只认识 `conversation_id`;左侧历史、URL 和前端状态都以它为主键。
|
||||||
|
- 一个 conversation 可以有多轮用户消息,每轮消息产生一个内部 `maf_run`。
|
||||||
|
- `maf_session`、manager/seat thread、seat run 都是服务端内部执行身份。服务端使用既有 `ExecutionPrincipal` 绑定当前用户,并在真正需要某席位执行时懒创建/复用线程。
|
||||||
|
- 浏览器只收到经过脱敏的消息和事件,不会收到内部 thread id、能力快照、目标键、幂等键、密钥或原始工具结果。
|
||||||
|
|
||||||
|
### 3.4 总控质量闸门:派活不是“发出即完成”
|
||||||
|
|
||||||
|
当前旧会商的问题不是没有派活,而是席位只说一两句话、格式和证据都不合格时,总控仍把它当作完成并直接进入下一步。新版 MAF 必须把总控从“消息转发者”升级为**每项席位交付的验收责任人**。
|
||||||
|
|
||||||
|
每一个由总控发布的席位任务都必须有服务端持久化的 `task_contract`:
|
||||||
|
|
||||||
|
| 字段 | 含义 |
|
||||||
|
|---|---|
|
||||||
|
| `objective` | 本席位要回答的具体问题,不能只写泛泛角色描述。 |
|
||||||
|
| `expected_deliverable` | 交付类型和结构,例如“风险清单 + 依据 + 优先级 + 建议”。 |
|
||||||
|
| `acceptance_criteria` | 由总控给出的可验收标准:覆盖范围、最少关键点、证据/工具依据、格式与约束。 |
|
||||||
|
| `required` | 是否为本阶段必需交付;必需项不能被静默跳过。 |
|
||||||
|
| `max_rework_attempts` | 同一席位最多返工次数,默认 **2**(初稿之外最多两次返工),服务端配置且写入快照。 |
|
||||||
|
| `fallback_policy` | 到达返工上限后的策略:改派、请求用户澄清,或带缺口受控推进。 |
|
||||||
|
|
||||||
|
#### 3.4.1 席位交付与总控验收状态机
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
stateDiagram-v2
|
||||||
|
[*] --> assigned
|
||||||
|
assigned --> delivering
|
||||||
|
delivering --> submitted
|
||||||
|
submitted --> manager_review
|
||||||
|
manager_review --> accepted: 达到合同标准
|
||||||
|
manager_review --> rework: 不合格且未到返工上限
|
||||||
|
rework --> delivering: 带明确退回意见
|
||||||
|
manager_review --> reassigned: 达到上限且可改派
|
||||||
|
reassigned --> delivering
|
||||||
|
manager_review --> exhausted: 达到上限且无合适改派
|
||||||
|
exhausted --> controlled_gap: 记录缺口、风险与原因
|
||||||
|
accepted --> [*]
|
||||||
|
controlled_gap --> [*]
|
||||||
|
```
|
||||||
|
|
||||||
|
验收规则如下:
|
||||||
|
|
||||||
|
1. 席位先提交结构化 `delivery`,至少包含结论、依据/证据、未解决项、自检结果;不能只输出“已完成”或一两句空泛结论。
|
||||||
|
2. 进入 `manager_review` 前先执行确定性检查:空内容、最小有效长度、必须章节、必填字段、所需证据/工具引用、重复文本、错误 schema。确定性不通过时不允许直接 accepted。
|
||||||
|
3. 总控随后根据 `task_contract` 做结构化审查,决策只能是 `accept`、`return_for_rework`、`reassign`、`ask_user`、`controlled_gap`,并必须写明 `reason` 和针对性修改要求。
|
||||||
|
4. **总控的模型自评不是验收证据。** 席位自评分只作为参考;验收由确定性规则 + 总控审查 + 必要时交叉审查共同决定。
|
||||||
|
5. 对同一席位,默认最多两次返工。每次打回都必须把“缺什么、怎样补、哪些原结论不可用”带入下一次任务上下文。
|
||||||
|
6. 到达上限后绝不把不合格结果伪装成合格:总控应优先改派给一个合适备用席位(默认最多一次改派);仍无法满足时生成 `controlled_gap`,明确标记未覆盖问题、风险和对最终结论的影响,再受控进入下一阶段。
|
||||||
|
7. 一个阶段的所有 `required` 任务必须处于 `accepted` 或 `controlled_gap` 等明确终态,阶段闸门才可通过。总控不能因为“轮数到了”或“已有部分回答”跳过未决必需项。
|
||||||
|
8. 最终报告不得将 `controlled_gap` 的内容写成已验证事实;它必须在结论中的风险/待补信息部分可追溯显示。
|
||||||
|
|
||||||
|
这既满足“打回几次后不要死循环”的要求,也避免“超过次数就把垃圾答案强行推进”的错误行为。
|
||||||
|
|
||||||
|
#### 3.4.2 对话页必须可见的质量反馈
|
||||||
|
|
||||||
|
- 总控派活卡展示任务目标、交付要求和当前第几次尝试;
|
||||||
|
- 席位提交后显示“总控审核中”,而不是立即标为完成;
|
||||||
|
- 打回时以总控消息卡显示具体退回理由和补充要求;
|
||||||
|
- 改派时显示原席位未通过和新席位承接范围,但不羞辱性展示内部评分;
|
||||||
|
- 受控降级时显示“存在未解决缺口”,并在最终结果卡中保留风险提示;
|
||||||
|
- 右侧席位条区分“执行中、待返工、已验收、已改派、存在缺口”,不能只显示“发过言”。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. API 与 SSE 契约(必须先定,前端不得猜测)
|
||||||
|
|
||||||
|
### 4.1 Conversation API
|
||||||
|
|
||||||
|
以下接口全部位于 `/api/maf-roundtable`,身份只从服务端鉴权上下文读取。
|
||||||
|
|
||||||
|
| 接口 | 用途 | 前端调用时机 |
|
||||||
|
|---|---|---|
|
||||||
|
| `GET /conversations` | 左侧历史列表(分页) | 首次进入、用户显式刷新、创建/删除后失效刷新;**无定时轮询**。 |
|
||||||
|
| `POST /conversations` | 创建空白用户会商 | 点击“新建会商”。只接收 title、任务上下文等安全字段。 |
|
||||||
|
| `GET /conversations/{id}` | 获取会商快照、权限和当前状态 | 进入会商或浏览器刷新时。 |
|
||||||
|
| `GET /conversations/{id}/messages` | 获取历史消息分页 | 进入会商、向上滚动加载历史。 |
|
||||||
|
| `POST /conversations/{id}/messages` | 原子写入用户消息并启动 MAF run | 用户点击发送或提交澄清。返回 `message_id`、`run_id`、`conversation_id`。 |
|
||||||
|
| `POST /conversations/{id}/cancel` | 取消当前活跃 run | 用户显式点击取消。 |
|
||||||
|
| `POST /approvals/{id}/decision` | 批准/拒绝写入动作 | 审批卡点击;成功后由后端恢复 workflow。 |
|
||||||
|
| `POST /conversations/{id}/recover` | 显式恢复异常中断的活跃会商 | 仅在后端判定可恢复时展示。 |
|
||||||
|
|
||||||
|
不再让页面以“创建 session → 创建 run → GET events 循环”的方式驱动会商。原有低层 session/run 接口可以作为内部诊断 API 暂时保留,但从用户页面和导航移除。
|
||||||
|
|
||||||
|
### 4.2 SSE:唯一的实时通道
|
||||||
|
|
||||||
|
```text
|
||||||
|
GET /api/maf-roundtable/conversations/{conversation_id}/stream?after_seq={last_seen_seq}
|
||||||
|
Accept: text/event-stream
|
||||||
|
Authorization: 与现有 fetch 客户端一致
|
||||||
|
```
|
||||||
|
|
||||||
|
- 前端在进入一个 conversation 后只建立**一条** fetch-reader SSE 连接;切换会商、卸载页面、权限失效时 Abort。
|
||||||
|
- 浏览器不能用定时 GET 代替 SSE。连接断开后采用指数退避重连,并携带最后已确认的 `after_seq`;不产生全量重复气泡。
|
||||||
|
- `after_seq` 是 conversation 维度、服务端单调递增的序号,不能复用每个 run 独立的 `seq`。
|
||||||
|
- 首次连接先由 `GET messages` 加载历史,再从该历史的最大 `seq` 订阅 SSE;服务端也必须支持重放,避免“历史请求和订阅之间”丢事件。
|
||||||
|
- SSE 使用 `fetch` + `ReadableStream` 解析,以复用项目鉴权头;响应必须带 `Content-Type: text/event-stream`、`Cache-Control: no-cache`、`X-Accel-Buffering: no`,并每 15 秒发送心跳。
|
||||||
|
- 服务端负责等待和推送。单 worker 可用进程内 conversation event hub;生产多 worker 部署前必须接入 Redis Pub/Sub 或等价分布式广播,不能退回浏览器轮询。
|
||||||
|
|
||||||
|
### 4.3 SSE 事件信封
|
||||||
|
|
||||||
|
所有事件统一为:
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"seq": 42,
|
||||||
|
"event_id": "evt_...",
|
||||||
|
"conversation_id": "conv_...",
|
||||||
|
"run_id": "run_...",
|
||||||
|
"type": "agent.message.delta",
|
||||||
|
"occurred_at": "2026-08-02T12:00:00Z",
|
||||||
|
"data": {}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
允许的首批 `type`:
|
||||||
|
|
||||||
|
| 类型 | 对话页表现 |
|
||||||
|
|---|---|
|
||||||
|
| `conversation.snapshot` | 首帧状态同步,不重复插入消息。 |
|
||||||
|
| `user.message.created` | 刷新/多标签同步时补齐用户气泡。 |
|
||||||
|
| `manager.intent` | 总控“正在理解/已理解”的过程卡。 |
|
||||||
|
| `clarification.required` / `clarification.resolved` | 澄清卡及其回答状态。 |
|
||||||
|
| `manager.dispatch` | 总控派活卡、席位条状态更新。 |
|
||||||
|
| `seat.delivery.submitted` | 席位提交交付,进入总控审核而非直接完成。 |
|
||||||
|
| `manager.review.decision` | 展示验收、打回、改派或受控降级及其安全摘要。 |
|
||||||
|
| `seat.rework.assigned` / `seat.reassigned` | 更新第几次返工、原/新席位和新的任务要求。 |
|
||||||
|
| `stage.quality_gate` | 阶段质量闸门通过、阻塞或带缺口推进。 |
|
||||||
|
| `agent.message.start` / `delta` / `complete` | 席位或总控流式气泡。 |
|
||||||
|
| `tool.started` / `tool.progress` / `tool.completed` | 现有步骤卡/工具过程,不显示敏感参数。 |
|
||||||
|
| `approval.required` / `approval.decided` | 嵌入对话流的审批卡。 |
|
||||||
|
| `fact.confirmed` / `review.completed` | 事实/交叉审查摘要卡。 |
|
||||||
|
| `run.status` / `run.error` / `run.completed` | 顶部状态、失败重试与最终结果。 |
|
||||||
|
|
||||||
|
事件 `data` 必须先经过现有 MAF 安全规范化和二次展示脱敏;前端不负责猜测工具风险或修复敏感数据。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. 后端改造计划
|
||||||
|
|
||||||
|
### MAF-R0:冻结错误原型并建立旧会商基线
|
||||||
|
|
||||||
|
**难度:D2(中低)|负责人:前端/测试各 1 人|前置:无**
|
||||||
|
|
||||||
|
- 将现有 `/page/maf/*` 标记为“实验原型”,从正式菜单移除;不得在其上继续新增业务功能。
|
||||||
|
- 记录旧会商的页面状态:空会商、发送后、意图澄清、总控派活、席位流式发言、审批、完成、失败恢复、历史切换。
|
||||||
|
- 为每种状态保存可复现的测试数据与截图基线;截图只作为视觉验收参考,不作为数据契约。
|
||||||
|
- 输出旧组件到新 MAF view-model 的映射清单,禁止直接搬旧 hook。
|
||||||
|
|
||||||
|
**验收:** 旧会商无行为回归;团队对“复制体验、替换编排”有书面映射表。
|
||||||
|
|
||||||
|
### MAF-R1:Conversation 聚合与消息持久化
|
||||||
|
|
||||||
|
**难度:D5(高)|负责人:后端资深 1 人|前置:R0**
|
||||||
|
|
||||||
|
新增/迁移 MAF 专用持久化模型:
|
||||||
|
|
||||||
|
- `maf_roundtable_conversations`:用户可见会商,至少包含 id、owner_user_id、title、task_context、安全状态、active_run_id、created_at、updated_at;
|
||||||
|
- `maf_roundtable_messages`:用户消息、总控/席位消息、澄清/审批/结果卡的稳定历史表示;
|
||||||
|
- `maf_roundtable_conversation_events`:conversation 维度严格递增的 `seq`、event_id、run_id、type、安全 data、created_at;
|
||||||
|
- 现有 `maf_roundtable_sessions/runs/events/seat_runs/actions/approvals` 保留为底层执行与审计记录;conversation 与内部 session/run 显式关联。
|
||||||
|
|
||||||
|
要求:
|
||||||
|
|
||||||
|
1. 发送用户消息、创建/占用 run、写入首个用户消息事件必须在清晰的事务边界内完成;失败不留“消息已显示但未运行”的孤儿状态。
|
||||||
|
2. 消息历史必须可在刷新后重建对话;不能只依赖内存或 SSE 临时帧。
|
||||||
|
3. 所有读写继续 owner-only;管理员诊断只读不扩大写权限。
|
||||||
|
4. 新迁移必须 SQLite/PostgreSQL/MySQL 可重复执行;旧 MAF 原型数据可保留,不强制伪造为新对话历史。
|
||||||
|
|
||||||
|
**验收:** 会话创建、连续发消息、刷新恢复、并发发送冲突、跨用户隔离、迁移幂等都有 API 和存储测试。
|
||||||
|
|
||||||
|
### MAF-R2:服务端 SSE Hub 与断线续传
|
||||||
|
|
||||||
|
**难度:D5(高)|负责人:后端流式/并发经验者 1 人|前置:R1**
|
||||||
|
|
||||||
|
- 新增 conversation stream 路由和 `ConversationEventHub`;Workflow/Dispatcher 的规范化事件落库后再发布,顺序是“先持久化、后通知”。
|
||||||
|
- SSE 连接先按 `after_seq` 重放,再订阅实时事件;重放和订阅切换期间必须有序、不丢帧、不重复。
|
||||||
|
- workflow 终态、审批等待、审批恢复、取消、失败重试都必须通过同一流通知。
|
||||||
|
- 不允许每个 SSE 客户端创建数据库轮询循环。服务端可以阻塞等待 hub 通知,事件重放只在连接/重连时发生。
|
||||||
|
- 写出单 worker 与多 worker 的实现边界;若部署配置多 worker,未接入分布式广播时健康检查必须明确告警并禁止该模式上线。
|
||||||
|
|
||||||
|
**验收:** 测试覆盖慢客户端、断线重连、`after_seq` 重放、同时打开两个标签、切换会商、取消、审批后恢复、进程内 hub 异常和终态自动关流。
|
||||||
|
|
||||||
|
### MAF-R3:总控意图理解与派活语义对齐
|
||||||
|
|
||||||
|
**难度:D5(高)|负责人:MAF/Agent 负责人 1 人|前置:R1,可与 R2 并行**
|
||||||
|
|
||||||
|
在现有 MAF Workflow 上增加用户对话入口状态,而不是让前端预先填 manager/seat/run:
|
||||||
|
|
||||||
|
1. 总控首先进行意图判断:普通问答、需要澄清、单席位任务、并行专家会商、链式业务会商、需要工具/写入。
|
||||||
|
2. 总控产出受 schema 校验的派活计划;只有服务端可将计划转成实际席位执行。
|
||||||
|
3. 每个计划项必须生成并冻结 `task_contract`(目标、交付结构、验收标准、必需性、返工上限和降级策略),席位的发言不等于交付完成。
|
||||||
|
4. 席位完成后先做确定性完整性检查,再由总控做结构化验收;总控可接受、打回同一席位、改派、请求用户补充或记录受控缺口。所有决策、次数和理由持久化到 checkpoint 与审计事件。
|
||||||
|
5. 默认初稿后最多两次同席位返工;到达上限优先改派一次,仍失败才以带风险标记的 `controlled_gap` 结束。严禁自动把不合格交付推进为合格事实。
|
||||||
|
6. 阶段迁移需经过质量闸门:所有必需任务均有 `accepted` 或受控缺口终态;最终总结只能消费已验收事实,缺口必须显式传入风险章节。
|
||||||
|
7. 席位集合来自业务链、可信能力快照和上下文;前端可呈现“建议/已参与席位”,但不能提交任意工具权限或 thread id。
|
||||||
|
8. 总控每轮应吸收已确认事实、验收结果、退回原因和用户追问;弱模型无效派活、重复派活、无收敛时走确定性纠偏/终止策略。
|
||||||
|
9. 已有 structured/group_chat、事实账本、交叉审查、审批 checkpoint、执行阶段身份均继续复用;只重构其输入输出为 conversation event。
|
||||||
|
|
||||||
|
**验收:** 用同一任务对照旧会商的意图澄清、总控派活、席位协作、打回/改派和收束结论;弱模型的短答、空答、错误 schema、缺证据、重复派活、非法席位、超轮次、返工上限和受控降级都有确定性保护测试。
|
||||||
|
|
||||||
|
#### R3 当前实施记录(2026-08-03)
|
||||||
|
|
||||||
|
后端已先完成 R3 的服务端核心骨架,作为 R1/R2 Conversation API/SSE 的后续:
|
||||||
|
|
||||||
|
- `app/maf_roundtable/dispatch_contracts.py` 提供确定性意图分类、服务端业务路线解析、schema 校验的 `MafDispatchPlan` 和弱模型防护;请求、模型输出都不能提供 agent id、thread id、tool metadata 或能力快照。
|
||||||
|
- `MafRoundtableConfig` 增加 `default_manager_agent_id`、`default_seat_agent_ids`、`business_routes` 和 `max_seats_per_run`。仓库配置保持空路线;上线前必须由部署配置填入实际 agent catalog 中的精确 id,未知业务路线失败关闭。
|
||||||
|
- 首条消息在同一事务内创建内部 session、服务端选定的 manager/seat participants 和冻结能力快照;澄清意图进入 `waiting_input`,不创建 run,用户补充信息后才允许重新 claim。
|
||||||
|
- Conversation service 已接入现有 `MafRunDispatcher`/`WorkflowRunner`,持久化 `manager.intent`、`manager.dispatch` 和 run 状态桥接事件;现有结构化工作流的席位集合仍只来自服务端 participants,manager 文本不能扩席或改派非法席位。
|
||||||
|
- V2 `POST /conversations/{id}/messages` 只返回 `message_id`、`conversation_id`、`seq`;`run_id` 仍是持久层/服务端内部关联字段,不返回给浏览器。
|
||||||
|
- 新增 `tests/test_maf_phase3_conversation_dispatch.py`,覆盖未知业务路线、默认路线、澄清、完成状态桥接、重复/越权派发计划等确定性用例。R3 尚未整体验收完成:仍需完成新页面、完整真实 MAF Workflow E2E、质量门禁和与旧会商体验的浏览器对照验收。
|
||||||
|
|
||||||
|
### MAF-R4:将审批和外部写入嵌回对话主链路
|
||||||
|
|
||||||
|
**难度:D4(较高)|负责人:后端安全 + 前端各 1 人|前置:R2、R3**
|
||||||
|
|
||||||
|
- 保留 Phase 5 的 WriteGuard、能力快照、HMAC 目标键、租约、加密参数、一次执行和审计;不得为了 SSE 改弱任何安全边界。
|
||||||
|
- `approval.required` 只携带白名单展示字段和安全摘要。审批决定后由后端自动续跑,前端只等待同一 SSE 流中的新事件。
|
||||||
|
- 拒绝、过期、执行失败、unknown 均形成清晰对话卡和可恢复状态;不得把“未知结果”伪装成成功。
|
||||||
|
- 行为审计可在最终结果区展开查看,但不能替代对话中的关键用户反馈。
|
||||||
|
|
||||||
|
**验收:** HTTP → MAF → ToolNode/outbox → 审批 → SSE → 前端卡片 的端到端测试;确保 target_key、idempotency_key、internal_canary、密钥和原始工具结果从不进入消息/API/SSE。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. 前端改造计划:复刻体验,替换状态源
|
||||||
|
|
||||||
|
### MAF-R5:新会商页面壳与历史列表
|
||||||
|
|
||||||
|
**难度:D4(较高)|负责人:熟悉旧会商的前端 1 人|前置:R0、R1**
|
||||||
|
|
||||||
|
新建 `src/maf-roundtable/conversation/**`,建议结构:
|
||||||
|
|
||||||
|
```text
|
||||||
|
maf-roundtable/conversation/
|
||||||
|
pages/MafRoundtableConversationPage.tsx
|
||||||
|
components/
|
||||||
|
ConversationSidebar.tsx
|
||||||
|
ConversationTimeline.tsx
|
||||||
|
ConversationComposer.tsx
|
||||||
|
ManagerDispatchCard.tsx
|
||||||
|
SeatMessageBubble.tsx
|
||||||
|
ToolProgressCard.tsx
|
||||||
|
ClarificationCard.tsx
|
||||||
|
ApprovalMessageCard.tsx
|
||||||
|
FinalResultCard.tsx
|
||||||
|
ParticipantStrip.tsx
|
||||||
|
hooks/
|
||||||
|
use-maf-conversations.ts
|
||||||
|
use-maf-conversation-stream.ts
|
||||||
|
use-maf-conversation-reducer.ts
|
||||||
|
api/conversations.ts
|
||||||
|
lib/event-reducer.ts
|
||||||
|
styles/maf-roundtable-legacy-compatible.css
|
||||||
|
```
|
||||||
|
|
||||||
|
页面要求:
|
||||||
|
|
||||||
|
- 左侧 `ConversationSidebar` 的层级、历史列表、新建、激活态、删除/重命名交互对齐旧会商;
|
||||||
|
- 中间 `ConversationTimeline` 使用连续消息流,保留旧会商的用户气泡、总控气泡、席位气泡和时间锚点;
|
||||||
|
- `ConversationComposer` 常驻底部;发送、停止、澄清回答、追问都在该入口完成;
|
||||||
|
- 右侧仅保留旧体验中真正有用的参与席位、当前阶段和业务链摘要,不再摆放 run/session 管理后台;
|
||||||
|
- 使用本地 `tdesign-react` 组件实现按钮、输入、Dialog、Tag、Tabs 等基础交互,同时通过 scoped CSS 对齐旧视觉;
|
||||||
|
- 视觉相似不等于 import 旧业务组件。旧组件仅作参考,数据类型、hook 和 API 必须是 MAF 专用实现。
|
||||||
|
|
||||||
|
**验收:** 不连接后端时,使用固定 MAF 事件样本可完整演示旧会商同等的 8 种关键状态;没有 session/run/thread 表单。
|
||||||
|
|
||||||
|
### MAF-R6:SSE 客户端、事件 reducer 与刷新恢复
|
||||||
|
|
||||||
|
**难度:D5(高)|负责人:前端流式经验者 1 人|前置:R2、R5**
|
||||||
|
|
||||||
|
- `use-maf-conversation-stream` 只维护一个连接、一个 cursor、一个 AbortController;不得含 `setInterval`、`refetchInterval` 或轮询 fallback。
|
||||||
|
- reducer 以 `(conversation_id, seq)` 去重并排序,将原始事件转为稳定 view model;流式 delta 必须按 `message_id` 合并,不能用数组下标。
|
||||||
|
- 切换会商时先 abort 旧流并增加 generation;旧 SSE 帧永远不能污染新会商。
|
||||||
|
- 刷新时先加载消息历史,再以最后 seq 订阅;网络断开显示“正在重连”,重连成功不重复气泡。
|
||||||
|
- 只有历史列表等非实时资源可在用户主动操作后调用 GET;不能靠后台刷新伪装实时性。
|
||||||
|
|
||||||
|
**验收:** 模拟 1 万条历史、跨页加载、慢旧流切换、新流先到、断线重连、重复帧、乱序帧、终态关流和多标签同步;所有案例必须组件级测试。
|
||||||
|
|
||||||
|
### MAF-R7:意图/派活/审批卡的旧体验兼容
|
||||||
|
|
||||||
|
**难度:D4(较高)|负责人:前端业务负责人 1 人|前置:R3、R4、R6**
|
||||||
|
|
||||||
|
- 用旧 `IntentClarificationCard`、`MessageStepsCard`、`ParallelSeatStrip`、`MessageBubble` 的交互作为视觉和信息架构参照,重新实现 MAF 版本。
|
||||||
|
- 总控派活计划必须先显示“将由谁做什么”,席位开始/结束、工具过程和交叉审查要回到原有对话叙事中。
|
||||||
|
- 席位“发言结束”只能显示为“已提交,待总控审核”;只有收到 `manager.review.decision=accept` 才能显示“已验收”。打回次数、改派和缺口必须清楚可见。
|
||||||
|
- 审批卡需要同步防双击锁、二次脱敏、拒绝/通过后的“等待工作流继续”状态;不可另外跳转到 action 审计页。
|
||||||
|
- 最终结论卡要区分“建议动作”“审批中动作”“已执行动作”“失败/未知动作”。
|
||||||
|
- 继续追问时,页面不新建多个用户可见线程;后端根据 conversation 上下文决定是否创建新 run 或继续恢复。
|
||||||
|
|
||||||
|
**验收:** 产品人员可在不看技术术语的情况下完成“发起会商 → 澄清 → 观察派活 → 审批 → 查看结论 → 追问”全链路。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. 测试、上线与回滚
|
||||||
|
|
||||||
|
### 7.1 必须新增的自动化测试
|
||||||
|
|
||||||
|
| 类别 | 核心用例 |
|
||||||
|
|---|---|
|
||||||
|
| 后端事务 | 发消息/创建 run 原子性、并发发送、跨用户隔离、迁移幂等。 |
|
||||||
|
| SSE 服务端 | 重放、顺序、心跳、取消、断线、审批恢复、多订阅者、终态关流。 |
|
||||||
|
| Workflow | 意图澄清、总控派活、弱模型格式错误、重复派活、最大轮次、恢复。 |
|
||||||
|
| 质量闸门 | 短答/空答、缺少必填章节、无证据、总控打回、两次返工上限、一次改派、受控缺口、阶段阻塞和最终报告不把缺口伪装成事实。 |
|
||||||
|
| 安全 | SSE/API/历史消息不泄露敏感键和值;审批和一次写入仍保持现有 Phase 5 保证。 |
|
||||||
|
| 前端 reducer | delta 合并、去重、乱序、切换代次隔离、重连 cursor。 |
|
||||||
|
| 前端组件 | 输入发送、澄清、派活、审批锁、取消、失败恢复、历史切换、无轮询断言。 |
|
||||||
|
| E2E | 从用户输入到真实 MAF Workflow、ToolNode/outbox、审批、最终结果的 SSE 全链路。 |
|
||||||
|
| 回归 | 旧 `roundtable-planning`、旧 DeerFlow、AI 写作以及既有 MAF Phase 1–5 用例全部通过。 |
|
||||||
|
|
||||||
|
### 7.2 人工视觉验收
|
||||||
|
|
||||||
|
在同一浏览器尺寸下对照旧会商,至少核对:
|
||||||
|
|
||||||
|
1. 空白页和新建会商;
|
||||||
|
2. 左侧历史/当前会商切换;
|
||||||
|
3. 用户输入、流式总控消息、席位消息;
|
||||||
|
4. 意图澄清和总控派活;
|
||||||
|
5. 工具过程、审批、取消、失败恢复;
|
||||||
|
6. 最终结论和连续追问;
|
||||||
|
7. 窄屏滚动、长内容、断线重连和页面刷新。
|
||||||
|
|
||||||
|
### 7.3 灰度与回滚
|
||||||
|
|
||||||
|
- 新入口使用独立 feature flag,例如 `maf_roundtable.conversation_ui_enabled`;旧会商不受该开关影响。
|
||||||
|
- 先仅向内部账号开放,记录连接数、重连率、事件延迟、工作流失败率、审批耗时和前端异常。
|
||||||
|
- 出现问题时关闭新入口即可;不迁移或删除旧会商数据,也不需要回滚旧页面。
|
||||||
|
- 当前错误原型可保留为仅开发者诊断路由,或在新版稳定后删除;它不应继续出现在用户菜单。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. 分阶段任务分配、难度与交付顺序
|
||||||
|
|
||||||
|
本节是分工的唯一依据。难度定义:D1=很低(局部文案/样式),D2=低(明确边界的小模块),D3=中(跨 2–3 个模块),D4=较高(跨前后端或需回归),D5=高(并发、状态机、安全或 Agent 行为,必须由有经验者负责)。
|
||||||
|
|
||||||
|
### 阶段 0:冻结错误原型,提取旧会商交互基线(R0)
|
||||||
|
|
||||||
|
**难度:D2|建议人员:1 名熟悉旧会商的前端 + 1 名测试|依赖:无**
|
||||||
|
|
||||||
|
具体要做:
|
||||||
|
|
||||||
|
1. 将现有 `/page/maf/*` 的 session/run 详情原型从正式菜单隐藏,标注为开发诊断原型,停止继续加功能。
|
||||||
|
2. 逐一记录旧会商的 8 类页面状态:空白/新建、历史切换、用户提问、意图澄清、总控派活、席位发言、审批、完成/失败恢复。
|
||||||
|
3. 给每种状态保留可复现 mock 数据、页面截图和操作步骤;梳理旧组件到新 MAF view-model 的映射。
|
||||||
|
4. 明确哪些只能参考视觉和交互,哪些旧业务 hook/API/状态禁止复用。
|
||||||
|
|
||||||
|
交付物:旧会商交互地图、截图基线、组件映射表、被隐藏的原型入口说明。
|
||||||
|
|
||||||
|
验收:旧会商没有代码行为变化;任何人可以根据基线判断新版是否“像原页面”。
|
||||||
|
|
||||||
|
### 阶段 1:建立用户可见 Conversation 与消息历史(R1)
|
||||||
|
|
||||||
|
**难度:D5|建议人员:1 名资深后端|依赖:阶段 0**
|
||||||
|
|
||||||
|
具体要做:
|
||||||
|
|
||||||
|
1. 新增 `maf_roundtable_conversations`、`maf_roundtable_messages`、`maf_roundtable_conversation_events`,设计 owner、标题、消息、conversation 全局序号、活跃 run 和安全状态字段。
|
||||||
|
2. 建立 conversation 与现有 MAF session/run/seat-run 的内部关联;用户只得到 conversation id,不能看到内部 thread id。
|
||||||
|
3. 实现会商历史列表、创建空白会商、读取会商快照、读取消息分页、发送用户消息五类 API。
|
||||||
|
4. 发送消息时,用户消息持久化、run 创建/占用和首个事件必须有明确事务边界;并发发送、重复请求、失败回滚都要处理。
|
||||||
|
5. 完成 SQLite/PostgreSQL/MySQL 迁移与 owner-only 权限测试。
|
||||||
|
|
||||||
|
交付物:迁移脚本、repository/service/router、API schema、后端事务与隔离测试。
|
||||||
|
|
||||||
|
验收:刷新后能从消息历史恢复完整会商;跨用户不可读写;失败不会留下“已显示但没有实际运行”的孤儿消息。
|
||||||
|
|
||||||
|
### 阶段 2:服务端 SSE 对话流、事件 Hub 与断线续传(R2)
|
||||||
|
|
||||||
|
**难度:D5|建议人员:1 名熟悉 FastAPI 异步流与并发的后端|依赖:阶段 1**
|
||||||
|
|
||||||
|
具体要做:
|
||||||
|
|
||||||
|
1. 实现 `GET /conversations/{id}/stream?after_seq=`,按 conversation 全局 seq 先重放、后订阅实时事件。
|
||||||
|
2. 新建 `ConversationEventHub`;所有 workflow 事件先安全落库,再按顺序广播。禁止 SSE 客户端通过定时查库等待更新。
|
||||||
|
3. SSE 实现心跳、连接取消、权限校验、终态关流、异常帧和断线后的 cursor 续传。
|
||||||
|
4. 明确多 worker 部署方案:单 worker 可进程内广播;多 worker 必须 Redis Pub/Sub 或等价方案,未满足时不能灰度上线。
|
||||||
|
5. 把 run 状态、总控派活、席位消息 delta、工具过程、审批、质量审核、最终结论全部映射为统一事件信封。
|
||||||
|
|
||||||
|
交付物:SSE router/hub、事件发布适配器、集成测试、部署说明。
|
||||||
|
|
||||||
|
验收:慢连接、断线重连、乱序/重复防护、多标签订阅、审批后续跑、取消和终态均不丢事件;前端不需要轮询任何实时资源。
|
||||||
|
|
||||||
|
### 阶段 3:总控意图理解、业务链选择与服务端派活(R3)
|
||||||
|
|
||||||
|
**难度:D5|建议人员:1 名 MAF/Agent 工程师|依赖:阶段 1;可与阶段 2 并行**
|
||||||
|
|
||||||
|
具体要做:
|
||||||
|
|
||||||
|
1. 将旧会商的意图理解能力迁到 MAF 总控入口:识别直接问答、需澄清、单席位、并行会商、链式业务会商、工具/写入请求。
|
||||||
|
2. 总控根据业务链、用户上下文、可信能力快照选择席位,生成 schema 校验的派活计划;前端只展示,不参与编排。
|
||||||
|
3. Dispatcher 在服务端按需创建/复用 manager 和 seat 的内部执行线程,并由 `ExecutionPrincipal` 绑定当前用户。
|
||||||
|
4. 对弱模型增加确定性保护:非法席位、空派活、重复派活、无效 schema、超轮次、无法收束必须被拒绝、纠偏或终止。
|
||||||
|
5. 保持既有工具、技能、MCP、沙箱、事实账本、交叉审查和 checkpoint 恢复可用。
|
||||||
|
|
||||||
|
交付物:总控状态 schema、workflow executor、派活事件、弱模型测试矩阵。
|
||||||
|
|
||||||
|
验收:用户只输入任务,就能看到“意图理解 → 总控派活 → 席位执行”;浏览器没有 thread map 和派活决策代码。
|
||||||
|
|
||||||
|
### 阶段 4:席位任务合同、总控验收、打回与强制收束(R3-Q)
|
||||||
|
|
||||||
|
**难度:D5|建议人员:1 名 Agent/MAF 工程师 + 1 名后端状态机工程师|依赖:阶段 3**
|
||||||
|
|
||||||
|
具体要做:
|
||||||
|
|
||||||
|
1. 总控发布任务时冻结 `task_contract`:具体目标、交付格式、验收标准、必需性、返工次数、改派与降级策略。
|
||||||
|
2. 为每项席位任务持久化状态机:`assigned → delivering → submitted → manager_review → accepted/rework/reassigned/controlled_gap`。
|
||||||
|
3. 席位提交后先做确定性质量检查:空答、过短、必填章节缺失、格式错、无证据、重复内容等均不能自动完成。
|
||||||
|
4. 总控必须生成结构化验收决定和原因;不合格时打回并带精确补充要求。默认最多两次同席位返工,之后最多一次改派。
|
||||||
|
5. 改派仍失败时只能产生 `controlled_gap`,标记风险、缺失项和最终报告影响;严禁伪装为成功。
|
||||||
|
6. 增加阶段质量闸门:所有必需任务处于 `accepted` 或 `controlled_gap`,才允许进入交叉审查/下一阶段/最终总结。
|
||||||
|
7. 将尝试次数、退回理由、验收结果和缺口写入 checkpoint、审计和 SSE。
|
||||||
|
|
||||||
|
交付物:任务合同模型、持久化表/迁移、质量状态机、总控审查 prompt/schema、事件和测试。
|
||||||
|
|
||||||
|
验收:席位只说一两句话、无依据或内容垃圾时会被明确打回;达到上限不会死循环,也不会被当作合格产出;最终报告可追溯所有缺口。
|
||||||
|
|
||||||
|
### 阶段 5:审批、WriteGuard 与外部动作嵌入对话流(R4)
|
||||||
|
|
||||||
|
**难度:D4|建议人员:1 名安全后端 + 1 名前端|依赖:阶段 2、3、4**
|
||||||
|
|
||||||
|
具体要做:
|
||||||
|
|
||||||
|
1. 保留现有 Phase 5 的可信能力快照、WriteGuard、目标租约、HMAC、加密参数、一次执行与审计,不允许为新页面降低安全性。
|
||||||
|
2. 将工具开始、审批请求、批准/拒绝、执行成功/失败/unknown 变成安全 SSE 事件和对话卡。
|
||||||
|
3. 审批点击只调用明确决策 API;后端负责恢复 checkpoint/workflow,浏览器只等待 SSE。
|
||||||
|
4. 安全展示统一二次脱敏,禁止 target_key、idempotency_key、internal_canary、密钥、凭据和原始工具结果进入 API、消息、SSE 或 DOM。
|
||||||
|
|
||||||
|
交付物:事件映射、审批消息卡契约、端到端 ToolNode/outbox 测试。
|
||||||
|
|
||||||
|
验收:一次真实测试写入能在对话里经历“申请 → 审批 → 继续 → 结果”;重复点击或断线都不会重复外部写入。
|
||||||
|
|
||||||
|
### 阶段 6:复刻旧会商页面壳、历史列表和输入框(R5)
|
||||||
|
|
||||||
|
**难度:D4|建议人员:1 名熟悉旧会商代码的前端|依赖:阶段 0、1**
|
||||||
|
|
||||||
|
具体要做:
|
||||||
|
|
||||||
|
1. 新建 MAF 专用 conversation 页面、路由和独立 feature flag;不修改旧 `RoundtablePlanningPage`。
|
||||||
|
2. 依据阶段 0 的映射,复刻左侧历史会话、新建会商、中心时间线、常驻输入框、参与席位区和业务链摘要的视觉与交互层级。
|
||||||
|
3. 基础组件使用本地 `tdesign-react`,旧页面仅参考;需要的视觉组件在 MAF 目录重写或抽无业务依赖公共组件。
|
||||||
|
4. 接上 Conversation API:创建、历史、切换、消息分页。此阶段不允许先做任何轮询实时逻辑。
|
||||||
|
5. 删除新页面中暴露给用户的 manager/seat/max round/session/run 创建表单。
|
||||||
|
|
||||||
|
交付物:新页面壳、MAF 专用 view model、静态/接口 mock 组件测试、视觉对照截图。
|
||||||
|
|
||||||
|
验收:即使 SSE 未接通,用户也能看到与旧会商同类的历史、对话与输入体验;新旧业务状态零耦合。
|
||||||
|
|
||||||
|
### 阶段 7:前端 SSE 消费、对话 reducer 与过程交互(R6 + R7)
|
||||||
|
|
||||||
|
**难度:D5|建议人员:1 名前端流式工程师 + 1 名前端业务工程师|依赖:阶段 2、4、5、6**
|
||||||
|
|
||||||
|
具体要做:
|
||||||
|
|
||||||
|
1. 实现单连接 `use-maf-conversation-stream`:fetch-reader SSE、cursor、AbortController、指数退避重连和会商切换 generation 隔离。
|
||||||
|
2. 实现 event reducer:按 `conversation_id + seq` 去重排序;按 message_id 合并 delta;刷新后历史与 SSE 无缝衔接。
|
||||||
|
3. 重写旧会商对应的 MAF 版组件:总控意图卡、派活卡、席位条、席位气泡、工具步骤、澄清卡、审批卡、质量审核/打回卡、结果卡。
|
||||||
|
4. 所有卡片在时间线内叙事,不另开 run/session 管理后台;继续追问仍使用同一输入框。
|
||||||
|
5. 页面必须显示待审核、已验收、返工次数、改派、受控缺口和恢复状态,不能把“发过言”显示为“已完成”。
|
||||||
|
6. 代码审查和测试中检查不存在 `setInterval`、`refetchInterval` 或事件轮询 fallback。
|
||||||
|
|
||||||
|
交付物:SSE hook、reducer、对话组件、组件/API mock 测试、无轮询静态检查。
|
||||||
|
|
||||||
|
验收:切换会商、断线重连、审批续跑、慢旧流回包、长会话翻页均不污染、不丢消息、不重复;整个会商过程只依赖 SSE 实时更新。
|
||||||
|
|
||||||
|
### 阶段 8:端到端验收、灰度和回滚演练(R8)
|
||||||
|
|
||||||
|
**难度:D4|建议人员:1 名测试/集成人 + 各阶段负责人配合|依赖:阶段 1–7**
|
||||||
|
|
||||||
|
具体要做:
|
||||||
|
|
||||||
|
1. 跑完后端事务/SSE/Workflow/质量闸门/WriteGuard 测试、前端 reducer/组件测试、旧会商与 DeerFlow 回归。
|
||||||
|
2. 在真实浏览器按阶段 0 截图基线逐项对照,并完成用户任务:发起、澄清、派活、短答打回、两次返工、改派、审批、受控缺口、结论和追问。
|
||||||
|
3. 内部账号灰度,观测 SSE 建连/重连、事件时延、派活/验收/返工次数、workflow 失败率、审批耗时和前端错误。
|
||||||
|
4. 验证关闭 feature flag 后立即回到旧会商入口,旧数据和旧任务不受影响。
|
||||||
|
5. 若需生产外部写入,补齐 UAT 系统、最小权限凭据、核验 API、补偿联系人和生产 `MAF_ACTION_SECRET_KEY`。
|
||||||
|
|
||||||
|
交付物:自动化结果、人工验收记录、灰度指标面板、回滚演练记录、上线清单。
|
||||||
|
|
||||||
|
验收:满足第 9 节全部条件后才允许标记开发完成。
|
||||||
|
|
||||||
|
### 8.1 可并行边界
|
||||||
|
|
||||||
|
- 阶段 2 与阶段 3 可在阶段 1 的 schema/API 定稿后并行,但二者必须共用同一事件信封。
|
||||||
|
- 阶段 6 可在阶段 1 的 API mock 契约定稿后提前开始;不得自行发明事件字段。
|
||||||
|
- 阶段 5 必须等待阶段 2、3、4 的安全事件与状态机定稿。
|
||||||
|
- 阶段 7 必须等待阶段 2、4、6,不能以轮询临时替代 SSE。
|
||||||
|
- 阶段 8 只做集成、验收和上线准备,不补写前面阶段缺失的核心设计。
|
||||||
|
|
||||||
|
建议主顺序:`阶段 0 → 阶段 1 → (阶段 2 + 阶段 3 + 阶段 6) → 阶段 4 → 阶段 5 → 阶段 7 → 阶段 8`。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. 最终验收定义
|
||||||
|
|
||||||
|
只有同时满足以下条件,才可以说“本次 MAF 会商升级开发完成”:
|
||||||
|
|
||||||
|
- 新页面在视觉和主交互上可被用户认作原多智能体会商的升级版;
|
||||||
|
- 页面具备历史会话、连续对话流、输入框、意图理解、总控派活、席位协作、澄清、审批、结果和追问;
|
||||||
|
- 每个必需席位任务都有任务合同、总控验收、有限返工和改派/受控缺口处理;席位短答或垃圾产出不能自动被当作完成;
|
||||||
|
- 浏览器没有会商事件/run/approval 的定时轮询;实时交互通过可重连 SSE 完成;
|
||||||
|
- 用户不需要创建或管理多个智能体线程,内部线程由服务端按用户身份安全创建和恢复;
|
||||||
|
- 新页面未调用旧会商业务 API/状态,旧会商零回归;
|
||||||
|
- 工具、技能、MCP、沙箱、审批、WriteGuard、一次写入和审计都仍可用;
|
||||||
|
- 自动化测试、SSE 故障测试、真实浏览器人工验收和旧功能回归全部通过;
|
||||||
|
- 真实 UAT 写入系统、最小权限凭据、外部核验 API、补偿协议及生产 `MAF_ACTION_SECRET_KEY` 已按 Phase 5 前置条件完成。
|
||||||
|
|
||||||
|
在这之前,任何“会话/run 原型页面通过构建或轮询测试”的结果,都只能算技术验证,不算产品升级验收。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 阶段 3 实施记录(当前代码基线)
|
||||||
|
|
||||||
|
本轮已补齐阶段 3 的服务端安全路由与真实 MAF Workflow 入口,范围仅针对新 MAF 会商;旧 DeerFlow、旧 roundtable 和 AI 写作行为不变。
|
||||||
|
|
||||||
|
### 配置与入口闸门
|
||||||
|
|
||||||
|
- 仓库默认 `maf_roundtable.enabled: false`。部署环境必须注入真实的 `default_manager_agent_id`、席位 ID 和业务路由后再开启,避免出现“入口显示正常但首条消息必然 503”的空配置。
|
||||||
|
- 健康接口返回非敏感的 `conversation_dispatch_ready` 与 `conversation_dispatch_status`;新会商入口只有在配置路由可用且服务已启用时才开放。
|
||||||
|
- 首条消息使用服务端可信能力快照校验 manager/seat 的可访问性;浏览器、会话请求和模型输出都不能提供或扩大 agent、thread、tool、capability 范围。
|
||||||
|
- 配置模型会清理并校验 manager/seat ID,拒绝 manager 出现在 seat 列表、重复席位、超过 `max_seats_per_run` 的路由和非法业务 code。
|
||||||
|
|
||||||
|
### 受约束的总控派活
|
||||||
|
|
||||||
|
服务端先由业务链与可信 capability snapshot 生成候选席位集合。总控模型只能返回严格 JSON:`intent_type`、`selected_seat_agent_ids`、每席 `task_goal`/`delivery_requirements`、`execution_mode`、`convergence_path` 和 `reason`。Pydantic schema、服务端 allowlist 和顺序校验全部通过后,最终计划才会写入 checkpoint,并产生 `manager.dispatch` 审计/SSE 投影。
|
||||||
|
|
||||||
|
非法席位、重复席位、空任务、错误 schema、席位超限、缺少收敛路径或链式顺序错误,统一回退到服务端安全计划,不会扩大权限或启动越权席位。
|
||||||
|
|
||||||
|
四种结构化拓扑已固定为:
|
||||||
|
|
||||||
|
- `direct_answer`:manager-only Workflow,不创建专家席位任务;
|
||||||
|
- `single_seat` / `tool_write`:一个可信席位;
|
||||||
|
- `parallel_consultation`:至少两个可信席位并行;
|
||||||
|
- `chain_consultation`:按服务端业务链顺序串行。
|
||||||
|
|
||||||
|
### 阶段 3 验证状态
|
||||||
|
|
||||||
|
已覆盖配置校验、候选路由、非法总控计划回退、manager-only 真实 `WorkflowBuilder` 拓扑、线程/执行阶段回归、旧 DeerFlow 回归和会话 API 回归。当前仍不能据此标记整个 MAF 项目或阶段 5 为“验收完成”;真实 UAT 写入系统、最小权限凭据、外部核验 API、补偿协议和生产 `MAF_ACTION_SECRET_KEY` 仍按阶段 5/8 前置条件保持阻塞。
|
||||||
|
|
||||||
|
### Stage 3 P0 dispatch correction
|
||||||
|
|
||||||
|
- New MAF conversations no longer classify user text with server keyword rules. The server first freezes only the business-route candidate set and trusted, redacted capability summary; `ManagerDispatchExecutor` then returns the strict intent-and-dispatch JSON contract.
|
||||||
|
- The final plan is Pydantic-validated and allowlisted before it is checkpointed. Invalid JSON, illegal intent or seat, missing convergence, manager failure, and timeout all finish on the clarification branch; they do not create expert threads or start expert/tool work.
|
||||||
|
- A conversation initially persists and binds the manager only. After a valid decision, only `selected_seat_agent_ids` are added to the participant store and receive internal threads.
|
||||||
|
- Every non-clarification route, including `group_chat`, starts at the same manager dispatch node. Group speakers are limited to the verified selected seats; static candidate configuration cannot bypass the plan.
|
||||||
@@ -0,0 +1,362 @@
|
|||||||
|
# 岗位会商交付闭环与内置智能体实现计划
|
||||||
|
|
||||||
|
> 页面:`/page/strategy/qa/position-roundtable`
|
||||||
|
>
|
||||||
|
> 目标:在现有岗位会商基础上补齐“产物交付、查看、驳回、方案总结、行动规划”的完整闭环,同时继续保持原多智能体会商页面不受影响。
|
||||||
|
|
||||||
|
## 实施核对(2026-07-21)
|
||||||
|
|
||||||
|
本计划已按“岗位会商独立路由、无总控、各席位直接问答”的边界完成第一轮闭环。实际流程调整为:
|
||||||
|
|
||||||
|
```text
|
||||||
|
任务信息 → 情报分析岗识别并确认意图 → 启动校验并冻结业务链
|
||||||
|
→ 分阶段席位直接问答/交付 Markdown → 全部有效交付
|
||||||
|
→ 方案总结智能体(roundtable-summary)→ 行动规划智能体(position-action-planner)
|
||||||
|
→ 可随时返回交付产物驳回 → 后续阶段及内置产物级联失效 → 重做后重新收口
|
||||||
|
```
|
||||||
|
|
||||||
|
- [x] 情报意图、业务链选择、席位岗位归属和席位智能体配置均在启动前校验;启动后保存业务链快照。
|
||||||
|
- [x] 普通席位直接调用各自分配的智能体,并注入任务、意图及已完成上游席位的问答/产物;不经过总控智能体。
|
||||||
|
- [x] 普通席位必须在 `outputs` 中交付 Markdown 才会完成;情报分析岗以确认的结构化意图完成为准。
|
||||||
|
- [x] 节点、交付卡片、流程图和大图弹窗均展示 `locked / ready / running / done / rejected / stale / error` 状态,并可回看节点会话和产物。
|
||||||
|
- [x] 驳回要求标题和理由;当前节点转为 `rejected`,后续阶段按依赖转为 `stale/locked`,总结和行动规划同时失效,历史内容保留可查看。
|
||||||
|
- [x] 被驳回或失效的普通席位必须写入一份**新的或已改写** Markdown 才能再次完成;单纯继续问答且没有新交付不会误使下游产物失效。
|
||||||
|
- [x] 方案总结复用 `roundtable-summary` 的真实流式线程;行动规划新增 `position-action-planner`,强制输出 Markdown 报告和 `action-plan-subtasks.json`。
|
||||||
|
- [x] 两个内置智能体的线程、产物快照和来源节点版本栅栏均持久化;流式期间若上游版本变化,旧运行不能覆盖最新状态。
|
||||||
|
- [x] 右侧“交付产物”可查看内置节点结果、继续同一线程问答/修改交付,并在打开 Markdown 沙箱时自动收起右栏。
|
||||||
|
|
||||||
|
设计收敛:当前版本以节点的 `artifact_manifest`、`latest_answer`、版本、驳回记录及 Session 内置快照作为唯一事实来源,已能覆盖统一产物卡片和级联逻辑,因此不新增重复的 `position_roundtable_deliverables` 表。若后续需要“单个文件独立驳回、跨会话检索或完整版本对比”,再将清单归一化为独立产物表,避免现在的双写一致性风险。
|
||||||
|
|
||||||
|
## 数据持久化与灾难恢复(2026-07-23)
|
||||||
|
|
||||||
|
岗位会商现在使用“两层持久化”,两层职责不同:
|
||||||
|
|
||||||
|
1. LangGraph checkpoint/thread 是智能体继续推理与流式问答的执行源。
|
||||||
|
2. `position_roundtable_sessions` / `position_roundtable_nodes` 是页面历史的数据库恢复源。
|
||||||
|
|
||||||
|
数据库恢复源会保存:
|
||||||
|
|
||||||
|
- 情报分析岗完整消息、步骤时间线和未发送输入草稿;
|
||||||
|
- 每个业务链岗位的完整消息和未发送输入草稿;
|
||||||
|
- 方案总结、行动规划两个收口智能体的完整消息和未发送输入草稿;
|
||||||
|
- 已确认意图、冻结任务与业务链快照、节点状态、版本、驳回记录;
|
||||||
|
- Markdown / JSON 等文本产物正文(单文件最多 400 万字符)和文件元数据。
|
||||||
|
|
||||||
|
因此即使线上重启后 checkpoint 或沙箱 outputs 卷丢失,历史页仍能从数据库展示对话与产物正文,后续收口智能体也能继续读取数据库中的有效上游交付。新任务在意图识别开始前就会创建 Session,用户不必等到“启动业务链”才获得持久化保护。历史下拉支持删除,删除会显式清理 Session 与全部节点恢复快照,不依赖 SQLite 外键开关。
|
||||||
|
|
||||||
|
对应迁移:`20260723_05_position_roundtable_conversations.py`。部署时必须执行到 Alembic head。
|
||||||
|
|
||||||
|
## 0. 核心结论
|
||||||
|
|
||||||
|
- 方案总结智能体建议复用现有会商里的 `roundtable-summary` 能力,但不要直接搬整套 Step 3 页面流程。
|
||||||
|
- 可复用:内置智能体 ID、总结报告 prompt 组织方式、Markdown 报告产物、流式对话、报告续问与文件预览能力。
|
||||||
|
- 需要改造:输入材料从“总控共识 + 各席位交付”改成“任务信息 + 意图结果 + 已通过的岗位产物 + 业务链快照”,并把结果存到岗位会商 Session 下。
|
||||||
|
- 行动规划智能体建议作为新的内置智能体新增。
|
||||||
|
- 输入:方案总结报告、各岗位最终有效产物、业务链阶段信息、任务意图。
|
||||||
|
- 输出:行动规划报告、结构化子任务清单。
|
||||||
|
- 这个模式仍然不需要总控智能体。情报分析岗负责意图识别,业务链节点直接调用各自配置的智能体,最终再由内置总结/规划智能体收口。
|
||||||
|
- 驳回不删除历史内容,只改变“当前有效版本”的状态;被驳回节点和后续节点需要重新交付,既保留可追溯性,也方便后续返回查看。
|
||||||
|
|
||||||
|
## 1. 目标业务流程
|
||||||
|
|
||||||
|
1. 情报分析岗进入页面,查看任务信息并完成意图识别。
|
||||||
|
2. 用户点击“确认意图并启动业务链”。
|
||||||
|
3. 启动前做校验:
|
||||||
|
- 未选择业务链:提示“请先选择业务链”。
|
||||||
|
- 业务链存在未配置岗位的席位:提示并引导去业务链配置页。
|
||||||
|
- 业务链席位缺少智能体:提示具体席位名称。
|
||||||
|
- 意图尚未完成:提示先完成任务意图识别。
|
||||||
|
4. 校验通过后冻结业务链快照,初始化岗位会商节点。
|
||||||
|
5. 各岗位只对分配给本岗位的智能体进行问答。
|
||||||
|
6. 节点问答完成后形成交付产物,右侧产物卡片显示“已完成 / 未完成 / 进行中 / 已驳回 / 已失效”。
|
||||||
|
7. 左侧流程图显示各节点状态,节点可点击查看该节点对话与产物。
|
||||||
|
8. 流程图右上角提供“查看”按钮,打开弹窗展示更完整的业务链流程图。
|
||||||
|
9. 当业务链中所有岗位产物都处于有效已交付状态后,开放“方案总结”。
|
||||||
|
10. 方案总结完成后开放“行动规划”。
|
||||||
|
11. 即使进入方案总结或行动规划,用户仍可返回产物列表执行驳回。
|
||||||
|
12. 若驳回早期阶段产物,后续阶段产物、方案总结、行动规划都一起失效并回到待重新完成状态。
|
||||||
|
|
||||||
|
## 2. 状态设计
|
||||||
|
|
||||||
|
### 2.1 节点状态
|
||||||
|
|
||||||
|
现有节点状态需要扩展或映射为更贴近页面的展示状态:
|
||||||
|
|
||||||
|
| 展示状态 | 建议内部状态 | 含义 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| 未完成 | `ready` / `locked` / `rejected` | 尚未有效交付,或被驳回后等待重做 |
|
||||||
|
| 进行中 | `running` | 当前智能体正在回答或产物正在生成 |
|
||||||
|
| 已完成 | `done` | 当前节点已有有效交付 |
|
||||||
|
| 已失效 | `stale` | 上游被更新或驳回,当前结果不可作为最终材料 |
|
||||||
|
| 异常 | `error` | 生成或保存失败 |
|
||||||
|
|
||||||
|
建议新增 `rejected` 状态,便于区分“从未完成”和“被驳回后待重做”。如果第一轮想少改后端,也可以先用 `ready + rejection_record` 表示被驳回。
|
||||||
|
|
||||||
|
### 2.2 产物状态
|
||||||
|
|
||||||
|
产物状态建议独立于节点状态保存,因为一个节点可能同时有回答文本和多个文件产物。
|
||||||
|
|
||||||
|
| 状态 | 含义 |
|
||||||
|
| --- | --- |
|
||||||
|
| `pending` | 还没有交付 |
|
||||||
|
| `running` | 正在生成 |
|
||||||
|
| `delivered` | 已交付且当前有效 |
|
||||||
|
| `rejected` | 被用户驳回 |
|
||||||
|
| `stale` | 受上游驳回或重做影响,已经失效 |
|
||||||
|
|
||||||
|
### 2.3 内置收口节点
|
||||||
|
|
||||||
|
在流程图中把两个内置节点追加到业务链末尾:
|
||||||
|
|
||||||
|
1. `builtin:summary`:方案总结智能体。
|
||||||
|
2. `builtin:action-plan`:行动规划智能体。
|
||||||
|
|
||||||
|
这两个节点不属于普通业务链席位,但要和普通节点一样显示状态、支持点击查看结果。
|
||||||
|
|
||||||
|
## 3. 数据模型调整
|
||||||
|
|
||||||
|
### 3.1 Session 扩展
|
||||||
|
|
||||||
|
`position_roundtable_sessions` 已使用下列持久化字段:
|
||||||
|
|
||||||
|
| 字段 | 含义 |
|
||||||
|
| --- | --- |
|
||||||
|
| `status` | `intent_pending / active / completed / archived`;总结/规划运行态由前端瞬时状态与对应快照的 `status` 表示,避免一次运行中断后留下伪运行态 |
|
||||||
|
| `summary_thread_id` | 方案总结智能体线程 |
|
||||||
|
| `summary_snapshot` | 最新有效总结报告快照 |
|
||||||
|
| `action_plan_thread_id` | 行动规划智能体线程 |
|
||||||
|
| `action_plan_snapshot` | 最新有效行动规划快照 |
|
||||||
|
| `invalidated_at` | 记录在 `summary_snapshot` / `action_plan_snapshot` 内,包含 `invalidated_by`,无需重复写 Session 字段 |
|
||||||
|
|
||||||
|
### 3.2 Node 扩展
|
||||||
|
|
||||||
|
`position_roundtable_nodes` 已使用下列字段(展示状态由前端按状态映射):
|
||||||
|
|
||||||
|
| 字段 | 含义 |
|
||||||
|
| --- | --- |
|
||||||
|
| `status` | `locked / ready / running / done / stale / rejected / error`,前端直接映射为展示状态 |
|
||||||
|
| `rejection_count` | 当前节点累计驳回次数 |
|
||||||
|
| `last_rejection` | 最新驳回标题、理由、操作者、时间 |
|
||||||
|
| `revision` | 当前有效交付版本 |
|
||||||
|
| `invalidated_by` | 导致当前节点失效的上游节点 key |
|
||||||
|
|
||||||
|
### 3.3 Deliverable 新表(后续可选)
|
||||||
|
|
||||||
|
当需要“单个文件独立驳回、跨会话检索或完整版本对比”时,再新增 `position_roundtable_deliverables`,不要只依赖 `artifact_manifest`。
|
||||||
|
|
||||||
|
| 字段 | 含义 |
|
||||||
|
| --- | --- |
|
||||||
|
| `id` | 产物 ID |
|
||||||
|
| `session_id` | 会话 ID |
|
||||||
|
| `node_key` | 来源节点 |
|
||||||
|
| `agent_id` | 来源智能体 |
|
||||||
|
| `position_id` | 来源岗位 |
|
||||||
|
| `title` | 产物名称 |
|
||||||
|
| `kind` | `answer / file / summary / action_plan` |
|
||||||
|
| `content` | 文本产物内容摘要或正文 |
|
||||||
|
| `artifact_path` | 文件产物虚拟路径 |
|
||||||
|
| `thread_id` | 所属线程 |
|
||||||
|
| `status` | `pending / running / delivered / rejected / stale` |
|
||||||
|
| `revision` | 来源节点版本 |
|
||||||
|
| `rejection_title` | 驳回标题 |
|
||||||
|
| `rejection_reason` | 驳回理由 |
|
||||||
|
| `created_at` | 创建时间 |
|
||||||
|
| `updated_at` | 更新时间 |
|
||||||
|
|
||||||
|
当前第一轮不新增这张表:右侧产物卡片、驳回记录、总结输入材料从节点 `artifact_manifest`、节点版本/驳回记录和 Session 快照聚合,避免节点表与产物表双写。后续引入该表时,应把它提升为唯一事实来源,而不是并行维护两套状态。
|
||||||
|
|
||||||
|
## 4. 驳回与级联失效规则
|
||||||
|
|
||||||
|
### 4.1 基本驳回
|
||||||
|
|
||||||
|
用户点击产物卡片的“驳回”后弹窗填写:
|
||||||
|
|
||||||
|
- 驳回标题。
|
||||||
|
- 驳回理由。
|
||||||
|
|
||||||
|
提交后:
|
||||||
|
|
||||||
|
- 当前产物状态改为 `rejected`。
|
||||||
|
- 当前节点状态改为 `rejected` 或 `ready`。
|
||||||
|
- 当前节点的 `latest_answer` 和历史文件不删除,但不再作为有效交付输入。
|
||||||
|
- 记录 `last_rejection`,用于页面展示和后续追踪。
|
||||||
|
|
||||||
|
### 4.2 级联失效
|
||||||
|
|
||||||
|
如果驳回的节点位于第 N 阶段:
|
||||||
|
|
||||||
|
- 同阶段其他节点不自动驳回,除非业务链未来明确配置了依赖关系。
|
||||||
|
- 第 N+1 阶段及之后所有节点的有效产物全部标记为 `stale`。
|
||||||
|
- 后续节点状态回到未完成展示态。
|
||||||
|
- `builtin:summary` 和 `builtin:action-plan` 如果已经生成,也标记为 `stale`。
|
||||||
|
- 页面允许用户继续查看旧报告和旧行动规划,但必须提示“上游产物已变更,需要重新生成”。
|
||||||
|
|
||||||
|
### 4.3 重新交付
|
||||||
|
|
||||||
|
被驳回节点重新问答并完成后:
|
||||||
|
|
||||||
|
- 当前节点产生新的 `revision`。
|
||||||
|
- 当前节点产物状态变为 `delivered`。
|
||||||
|
- 只有当该阶段所有必要节点都重新有效交付后,下一阶段才重新解锁。
|
||||||
|
- 方案总结和行动规划必须基于最新有效产物重新生成。
|
||||||
|
|
||||||
|
## 5. 接口规划
|
||||||
|
|
||||||
|
### 5.1 启动与校验
|
||||||
|
|
||||||
|
| 方法 | 路径 | 用途 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| `POST` | `/api/position-roundtable/sessions/{id}/validate-activation` | 校验业务链、岗位、智能体、意图状态 |
|
||||||
|
| `POST` | `/api/position-roundtable/sessions/{id}/activate` | 校验通过后冻结链条并初始化节点 |
|
||||||
|
|
||||||
|
第一轮也可以先把校验合并在 `activate` 内,前端根据后端返回的错误码提示。
|
||||||
|
|
||||||
|
### 5.2 产物
|
||||||
|
|
||||||
|
| 方法 | 路径 | 用途 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| `GET` | `/api/position-roundtable/sessions/{id}/results` | 获取右侧统一产物来源节点(前端聚合文件与内置快照) |
|
||||||
|
| `GET` | `/api/position-roundtable/sessions/{id}/nodes/{node_key}` | 获取节点详情;文件正文由既有线程产物预览接口读取 |
|
||||||
|
| `POST` | `/api/position-roundtable/sessions/{id}/nodes/{node_key}/reject` | 驳回当前节点交付并触发级联失效 |
|
||||||
|
| `POST` | `/api/position-roundtable/sessions/{id}/nodes/{node_key}/complete-turn` | 节点回答结束后同步回答与产物 |
|
||||||
|
|
||||||
|
### 5.3 方案总结与行动规划
|
||||||
|
|
||||||
|
| 方法 | 路径 | 用途 |
|
||||||
|
| --- | --- | --- |
|
||||||
|
| `POST` | `/api/position-roundtable/sessions/{id}/summary/prepare` | 服务端准备版本锁定的总结材料和线程信息 |
|
||||||
|
| `POST` | `/api/position-roundtable/sessions/{id}/summary/ask` | 服务端准备总结的同线程续问材料 |
|
||||||
|
| `POST` | `/api/position-roundtable/sessions/{id}/summary/complete` | 校验 Markdown 交付与来源版本后持久化总结快照 |
|
||||||
|
| `POST` | `/api/position-roundtable/sessions/{id}/action-plan/prepare` | 服务端准备行动规划材料和线程信息 |
|
||||||
|
| `POST` | `/api/position-roundtable/sessions/{id}/action-plan/ask` | 服务端准备行动规划同线程续问材料 |
|
||||||
|
| `POST` | `/api/position-roundtable/sessions/{id}/action-plan/complete` | 校验 Markdown + JSON 交付与来源版本后持久化行动规划快照 |
|
||||||
|
|
||||||
|
可以复用现有 `streamMultiAgent` 流式协议,但建议在岗位会商下包一层 API,由后端负责拼装岗位会商材料,前端不直接拼长 prompt。
|
||||||
|
|
||||||
|
## 6. 前端实施步骤
|
||||||
|
|
||||||
|
### 阶段 1:状态与启动校验(已完成)
|
||||||
|
|
||||||
|
- 扩展 `PositionNodeStatus` 和状态显示映射。
|
||||||
|
- “确认意图并启动业务链”前补齐校验提示。
|
||||||
|
- 后端 `activate` 返回未配置岗位、缺智能体、未选择链条等具体错误。
|
||||||
|
- 左侧流程图节点右上角添加状态小图标。
|
||||||
|
- 节点样式调整为上方智能体名称、下方岗位名称,移除左侧 logo。
|
||||||
|
|
||||||
|
验收标准:未选择业务链、岗位未配齐、意图未完成时都能准确阻止启动;启动后流程图能显示各节点状态。
|
||||||
|
|
||||||
|
### 阶段 2:流程图弹窗(已完成)
|
||||||
|
|
||||||
|
- 左侧保留小型从上到下流程图。
|
||||||
|
- 流程图右上角增加“查看”按钮。
|
||||||
|
- 点击后打开弹窗,展示更大的流程图。
|
||||||
|
- 弹窗内支持点击节点查看对话与产物,保持和主页面选中节点同步。
|
||||||
|
|
||||||
|
验收标准:小图不挤占左侧空间,大图能完整展示业务链和两个内置收口节点。
|
||||||
|
|
||||||
|
### 阶段 3:产物卡片与预览(已完成)
|
||||||
|
|
||||||
|
- 右侧新增或改造“分析结果”Tab 为“交付产物”列表。
|
||||||
|
- 卡片展示智能体名称、产物名称、岗位名称、时间、状态。
|
||||||
|
- 点击卡片打开详情弹窗。
|
||||||
|
- 文本产物直接展示正文,文件产物复用现有 `ArtifactPreviewModal`。
|
||||||
|
- 每个有效产物提供“驳回”入口。
|
||||||
|
|
||||||
|
验收标准:节点回答和文件产物能进入统一产物列表;点击可查看详情。
|
||||||
|
|
||||||
|
### 阶段 4:驳回弹窗与级联失效(已完成)
|
||||||
|
|
||||||
|
- 新增 `RejectDeliverableDialog`。
|
||||||
|
- 驳回表单包含标题和理由,均必填。
|
||||||
|
- 后端事务内完成当前产物驳回、当前节点状态更新、后续阶段级联失效、总结和行动规划失效。
|
||||||
|
- 前端刷新 Session、Node、Deliverable 和流程图状态。
|
||||||
|
- 被驳回节点在对话区显示驳回信息,提示用户重新交付。
|
||||||
|
|
||||||
|
验收标准:驳回第一阶段任意节点后,第二阶段及之后产物都显示未完成或已失效;旧内容可查看但不能作为总结输入。
|
||||||
|
|
||||||
|
### 阶段 5:方案总结智能体(已完成)
|
||||||
|
|
||||||
|
- 封装 `usePositionSummary`,内部复用 `roundtable-summary` 的线程初始化、流式输出和 Markdown 产物预览能力。
|
||||||
|
- 输入材料改为岗位会商材料:
|
||||||
|
- 任务信息。
|
||||||
|
- 情报分析岗意图结果。
|
||||||
|
- 业务链快照。
|
||||||
|
- 所有状态为 `delivered` 的岗位产物。
|
||||||
|
- 已驳回或失效产物只作为历史参考,不进入默认总结材料。
|
||||||
|
- 方案总结节点追加到流程图末尾。
|
||||||
|
- 所有产物有效交付后才允许点击“生成方案总结”。
|
||||||
|
- 总结结果写入 `summary_snapshot`,同时进入产物列表。
|
||||||
|
|
||||||
|
验收标准:总结报告使用现有方案总结能力生成 Markdown;刷新页面后可恢复;上游驳回后总结标记失效。
|
||||||
|
|
||||||
|
### 阶段 6:行动规划智能体(已完成)
|
||||||
|
|
||||||
|
- 新增内置智能体 ID,建议先命名为 `position-action-planner`。
|
||||||
|
- 新增行动规划 prompt:
|
||||||
|
- 读取方案总结报告。
|
||||||
|
- 读取各岗位最终有效产物。
|
||||||
|
- 拆解为若干子任务。
|
||||||
|
- 每个子任务包含名称、目标、输入依据、责任岗位建议、前置依赖、交付物、验收标准。
|
||||||
|
- 输出两类产物:
|
||||||
|
- `行动规划报告.md`。
|
||||||
|
- `action-plan-subtasks.json`。
|
||||||
|
- 行动规划节点追加到方案总结之后。
|
||||||
|
- 方案总结有效完成后才允许启动行动规划。
|
||||||
|
|
||||||
|
验收标准:行动规划能生成可读报告和结构化子任务;刷新可恢复;上游驳回后自动失效。
|
||||||
|
|
||||||
|
### 阶段 7:返回修改与重新生成(已完成)
|
||||||
|
|
||||||
|
- 用户在方案总结或行动规划视图中仍可切回“交付产物”。
|
||||||
|
- 驳回后自动显示需要重做的节点。
|
||||||
|
- 重做节点完成后,允许重新生成方案总结和行动规划。
|
||||||
|
- 旧总结、旧行动规划保留历史查看,但状态显示“已失效”。
|
||||||
|
|
||||||
|
验收标准:不会因为进入总结/规划阶段而锁死前序产物;前序重做后能形成新版本闭环。
|
||||||
|
|
||||||
|
### 阶段 8:测试与回归(已完成)
|
||||||
|
|
||||||
|
- 后端测试:
|
||||||
|
- activate 校验。
|
||||||
|
- 节点完成后产物入库。
|
||||||
|
- 驳回当前节点。
|
||||||
|
- 驳回第一阶段时后续阶段级联失效。
|
||||||
|
- 总结和行动规划失效。
|
||||||
|
- 前端测试:
|
||||||
|
- 启动校验提示。
|
||||||
|
- 状态图标显示。
|
||||||
|
- 产物卡片筛选和预览。
|
||||||
|
- 驳回弹窗必填校验。
|
||||||
|
- 回归验证:
|
||||||
|
- 原多智能体会商页面不受影响。
|
||||||
|
- 业务链普通配置入口不显示岗位配置。
|
||||||
|
- 岗位会商页面刷新恢复正常。
|
||||||
|
- 深色模式和嵌入模式布局不溢出。
|
||||||
|
|
||||||
|
## 7. 推荐提交拆分
|
||||||
|
|
||||||
|
1. `feat(position-roundtable): add delivery status model`
|
||||||
|
2. `feat(position-roundtable): validate chain activation`
|
||||||
|
3. `feat(position-roundtable): add workflow status graph`
|
||||||
|
4. `feat(position-roundtable): add deliverable cards and preview`
|
||||||
|
5. `feat(position-roundtable): support rejection cascade`
|
||||||
|
6. `feat(position-roundtable): add summary builtin node`
|
||||||
|
7. `feat(position-roundtable): add action planning builtin node`
|
||||||
|
8. `test(position-roundtable): cover delivery workflow`
|
||||||
|
|
||||||
|
## 8. 第一轮建议范围
|
||||||
|
|
||||||
|
第一轮优先做最小可闭环:
|
||||||
|
|
||||||
|
```text
|
||||||
|
意图识别
|
||||||
|
→ 启动校验
|
||||||
|
→ 业务链节点状态
|
||||||
|
→ 节点产物列表
|
||||||
|
→ 产物详情查看
|
||||||
|
→ 驳回与级联失效
|
||||||
|
→ 全部交付后生成方案总结
|
||||||
|
→ 基于总结生成行动规划
|
||||||
|
```
|
||||||
|
|
||||||
|
如果时间紧,行动规划可以先生成 Markdown 报告,结构化 `subtasks.json` 放到第二轮;但数据模型和 UI 入口第一轮就要预留,否则后面会返工。
|
||||||
@@ -0,0 +1,148 @@
|
|||||||
|
# 定时任务 — 模板填充「源数据抽取」手工测试清单
|
||||||
|
|
||||||
|
> 覆盖功能:定时任务「模板数据转换器」内置 agent —— 把用户传入的源数据转换成 HTML
|
||||||
|
> 模板的 `DATA` 结构并填充生成可预览页面。**重点测「源数据抽取」**:源可能是
|
||||||
|
> ① 纯 JSON、② 含 JSON 的文本、③ 纯文本,三种形态都要正确处理。
|
||||||
|
>
|
||||||
|
> 测试环境:后端 `http://localhost:8001`(`make dev`),前端 `http://localhost:5174`(`pnpm dev`)。
|
||||||
|
> 相关代码:`deerflow/runtime/scheduler/template_fill.py`(`extract_embedded_json`)、
|
||||||
|
> `service.py`(`_run_template_fill_attempt` / `_build_conversion_prompt`)、
|
||||||
|
> `pages/ScheduledTasksPage.tsx`。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 前置 — 进入表单
|
||||||
|
|
||||||
|
| # | 步骤 | 预期结果 |
|
||||||
|
|---|------|----------|
|
||||||
|
| 0.1 | 任务管理 → 新建定时任务 | 弹出「新建定时任务」对话框 |
|
||||||
|
| 0.2 | 「执行智能体」下拉选择 **模板数据转换器** | 表单出现「HTML 模板」下拉;「必须生成 HTML/Markdown」两个开关隐藏 |
|
||||||
|
| 0.3 | 「HTML 模板」下拉选择 **no.1** | 下方出现「上传 .json」按钮 + 源数据文本框;说明含「未提供源 JSON 时,将直接展示该模板的默认数据」|
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## T1 — 源形态①:纯 JSON
|
||||||
|
|
||||||
|
| # | 步骤 / 输入 | 预期结果 |
|
||||||
|
|---|------|----------|
|
||||||
|
| 1.1 | 在源数据框粘贴纯 JSON(示例见下「样例 A」) | 文本框正常接收,无报错 |
|
||||||
|
| 1.2 | 保存任务 → 「立即执行」 | 执行记录新增一条,状态最终 succeeded |
|
||||||
|
| 1.3 | 打开执行记录 → HTML 预览 | 渲染出 no.1 大屏,**总览指标/各列表数据来自粘贴的 JSON**(而非模板默认值)|
|
||||||
|
| 1.4 | 执行记录正文 | 文案为「已根据源数据填充模板「no.1」生成页面」|
|
||||||
|
|
||||||
|
## T2 — 源形态②:含 JSON 的文本(抽取重点)
|
||||||
|
|
||||||
|
| # | 步骤 / 输入 | 预期结果 |
|
||||||
|
|---|------|----------|
|
||||||
|
| 2.1 | 粘贴「样例 B」(前后是中文说明,中间夹一段 JSON) | 文本框正常接收 |
|
||||||
|
| 2.2 | 保存 → 立即执行 → 查看 HTML | 页面数据以**夹带的 JSON 为准**填充;正文里的补充说明(如「重点突出 X」)被一并参考 |
|
||||||
|
| 2.3 | 验证抽取正确性:JSON 字符串值里含 `}`(如 `"备注": "进度 80%}尚未完成"`) | 不会被误判为 JSON 块提前结束,整段 JSON 被完整抽取 |
|
||||||
|
|
||||||
|
## T3 — 源形态③:纯文本(无 JSON)
|
||||||
|
|
||||||
|
| # | 步骤 / 输入 | 预期结果 |
|
||||||
|
|---|------|----------|
|
||||||
|
| 3.1 | 粘贴「样例 C」(一段纯中文描述,无任何 JSON) | 文本框正常接收 |
|
||||||
|
| 3.2 | 保存 → 立即执行 → 查看 HTML | 智能体**理解文本语义**后据实填充模板,产出完整可预览页面(数据可能较稀疏但结构完整)|
|
||||||
|
| 3.3 | 不应报「未返回 JSON」类硬失败(除非模型彻底失败重试耗尽)| 状态 succeeded |
|
||||||
|
|
||||||
|
## T4 — 空源 → 模板默认数据
|
||||||
|
|
||||||
|
| # | 步骤 | 预期结果 |
|
||||||
|
|---|------|----------|
|
||||||
|
| 4.1 | 源数据框留空,保存 → 立即执行 | **不调用模型**,直接用 no.1 模板自带的默认数据生成 |
|
||||||
|
| 4.2 | 执行记录正文 | 「未提供源数据,已用模板「no.1」的默认数据生成页面」|
|
||||||
|
| 4.3 | HTML 预览 | 展示模板内置的默认大屏 |
|
||||||
|
|
||||||
|
## T5 — 上传 .json 文件
|
||||||
|
|
||||||
|
| # | 步骤 | 预期结果 |
|
||||||
|
|---|------|----------|
|
||||||
|
| 5.1 | 点击「上传 .json 文件」,选一个合法 `.json` | 文件内容被读入源数据文本框 |
|
||||||
|
| 5.2 | 上传一个非法 JSON 内容的文件 | toast 提示「文件不是合法 JSON,已填入文本框请检查」,内容仍填入(可手改)|
|
||||||
|
| 5.3 | 连续上传同一个文件两次 | 第二次仍能触发读取(input 已被重置 value)|
|
||||||
|
|
||||||
|
## T6 — no.2(只展示模板)
|
||||||
|
|
||||||
|
| # | 步骤 | 预期结果 |
|
||||||
|
|---|------|----------|
|
||||||
|
| 6.1 | 「HTML 模板」下拉选 **no.2** | **隐藏**上传按钮与源数据文本框;显示「该模板暂为直接展示已有数据,无需填写」|
|
||||||
|
| 6.2 | 即使之前填过源数据,保存 → 立即执行 | 忽略源数据,**原样输出** no.2 现有页面 |
|
||||||
|
| 6.3 | 执行记录正文 | 「已展示模板「no.2」的现有数据」|
|
||||||
|
|
||||||
|
## T7 — 编辑回显
|
||||||
|
|
||||||
|
| # | 步骤 | 预期结果 |
|
||||||
|
|---|------|----------|
|
||||||
|
| 7.1 | 对已保存的模板任务点「编辑」 | 「执行智能体」「HTML 模板」「源数据」均正确回显 |
|
||||||
|
| 7.2 | 把模板从 no.1 改成 no.2 再保存 | 切到 no.2 时源数据区即时隐藏;保存后执行走只展示分支 |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 样例数据(可直接复制粘贴到源数据框)
|
||||||
|
|
||||||
|
### 样例 A — 纯 JSON
|
||||||
|
|
||||||
|
```json
|
||||||
|
{
|
||||||
|
"overview": {
|
||||||
|
"核心指标": [
|
||||||
|
{ "名称": "综合区域", "数值": 7, "单位": "区", "说明": "测试数据" },
|
||||||
|
{ "名称": "组织与单位", "数值": 188, "单位": "个", "说明": "测试数据" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"regions": [
|
||||||
|
{ "name": "测试区域甲", "scope": "本岛西岸" }
|
||||||
|
],
|
||||||
|
"equipment": [
|
||||||
|
{ "name_zh": "测试装备X", "category": "无人系统", "status": "列装" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
> 预期:总览第一项「综合区域」显示 **7**,「组织与单位」显示 **188**,区域/装备出现「测试区域甲」「测试装备X」。
|
||||||
|
|
||||||
|
### 样例 B — 含 JSON 的文本
|
||||||
|
|
||||||
|
```
|
||||||
|
这是本月台海态势数据,请据此填充大屏,重点突出离岛防卫:
|
||||||
|
|
||||||
|
{"overview": {"核心指标": [{"名称": "综合区域", "数值": 9, "单位": "区", "说明": "含离岛"}]}, "regions": [{"name": "离岛防区", "scope": "外岛", "备注": "进度 80%}尚未完成"}]}
|
||||||
|
|
||||||
|
以上数据来自 6 月例会,务必准确,不要臆造未提供的字段。
|
||||||
|
```
|
||||||
|
|
||||||
|
> 预期:① 数据以中间 JSON 为准(综合区域=9、出现「离岛防区」);② 字符串里的 `}`(`进度 80%}`)不破坏抽取;③ 前后的「重点突出离岛防卫」「务必准确」作为补充说明被模型参考。
|
||||||
|
|
||||||
|
### 样例 C — 纯文本
|
||||||
|
|
||||||
|
```
|
||||||
|
请整理一份台湾滨海防卫概览:覆盖本岛沿岸 9 个综合区域,组织与单位约 280 个,
|
||||||
|
装备条目近百项(含无人系统、防空、海军平台等类别),并列出若干关键节点与近期演习。
|
||||||
|
数据以离线知识为准,没有的字段留空即可。
|
||||||
|
```
|
||||||
|
|
||||||
|
> 预期:智能体理解语义后据实填充,产出结构完整的页面(具体数值取决于模型,可较稀疏),不报硬失败。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 后端单元测试(自动化补充)
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# 在 offline-backend-20260512/backend/ 下运行
|
||||||
|
PYTHONPATH=. uv run --no-sync pytest tests/test_template_fill.py -v # 引擎:抽取/校验/填充/注册表
|
||||||
|
PYTHONPATH=. uv run --no-sync pytest tests/test_template_fill_attempt.py -v # 调度器执行分支:三形态/默认/只展示/重试
|
||||||
|
PYTHONPATH=. uv run --no-sync pytest tests/test_template_builder_seed.py -v # 内置 agent 种子
|
||||||
|
```
|
||||||
|
|
||||||
|
抽取相关关键用例:
|
||||||
|
- `test_extract_embedded_json_pure_object` / `_pure_array` —— 纯 JSON。
|
||||||
|
- `test_extract_embedded_json_text_with_json` / `_fenced` —— 含 JSON 的文本 / ```json 围栏。
|
||||||
|
- `test_extract_embedded_json_plain_text_returns_none` —— 纯文本返回 None。
|
||||||
|
- `test_extract_embedded_json_ignores_braces_in_strings` —— 引号内 `}` 不误判。
|
||||||
|
- `test_text_with_embedded_json_surfaced_in_prompt` —— 转换 prompt 单独标注「识别到的结构化数据」。
|
||||||
|
- `test_plain_text_source_converts` —— 纯文本仍照常转换。
|
||||||
|
- `test_empty_source_uses_template_default` —— 空源用模板默认数据。
|
||||||
|
- `test_display_only_template_renders_as_is` —— no.2 原样输出。
|
||||||
|
|
||||||
|
三个文件应全部通过(0 failed)。
|
||||||
@@ -15,8 +15,9 @@
|
|||||||
</script>
|
</script>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
<title>CM 助手</title>
|
<title>CM 助手</title>
|
||||||
</head>
|
<script src="/runtime-config.js" data-runtime-config></script>
|
||||||
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
|||||||
@@ -70,6 +70,7 @@
|
|||||||
"hast": "^1.0.0",
|
"hast": "^1.0.0",
|
||||||
"katex": "^0.16.28",
|
"katex": "^0.16.28",
|
||||||
"lucide-react": "^0.562.0",
|
"lucide-react": "^0.562.0",
|
||||||
|
"mermaid": "^11.15.0",
|
||||||
"motion": "^12.26.2",
|
"motion": "^12.26.2",
|
||||||
"nanoid": "^5.1.6",
|
"nanoid": "^5.1.6",
|
||||||
"next-themes": "^0.4.6",
|
"next-themes": "^0.4.6",
|
||||||
@@ -104,6 +105,7 @@
|
|||||||
"@types/react": "^19.0.0",
|
"@types/react": "^19.0.0",
|
||||||
"@types/react-dom": "^19.0.0",
|
"@types/react-dom": "^19.0.0",
|
||||||
"@vitejs/plugin-react": "^5.0.4",
|
"@vitejs/plugin-react": "^5.0.4",
|
||||||
|
"lightningcss": "^1.30.2",
|
||||||
"postcss": "^8.5.3",
|
"postcss": "^8.5.3",
|
||||||
"tailwindcss": "^4.0.15",
|
"tailwindcss": "^4.0.15",
|
||||||
"tw-animate-css": "^1.4.0",
|
"tw-animate-css": "^1.4.0",
|
||||||
@@ -460,37 +462,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@cfworker/json-schema/-/json-schema-4.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/@cfworker/json-schema/-/json-schema-4.1.1.tgz",
|
||||||
"integrity": "sha512-gAmrUZSGtKc3AiBL71iNWxDsyUC5uMaKKGdvzYsBoTW/xi42JQHl7eKV2OYzCUqvc+D2RCcf7EXY2iCyFIk6og=="
|
"integrity": "sha512-gAmrUZSGtKc3AiBL71iNWxDsyUC5uMaKKGdvzYsBoTW/xi42JQHl7eKV2OYzCUqvc+D2RCcf7EXY2iCyFIk6og=="
|
||||||
},
|
},
|
||||||
"node_modules/@chevrotain/cst-dts-gen": {
|
|
||||||
"version": "12.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-12.0.0.tgz",
|
|
||||||
"integrity": "sha512-fSL4KXjTl7cDgf0B5Rip9Q05BOrYvkJV/RrBTE/bKDN096E4hN/ySpcBK5B24T76dlQ2i32Zc3PAE27jFnFrKg==",
|
|
||||||
"dependencies": {
|
|
||||||
"@chevrotain/gast": "12.0.0",
|
|
||||||
"@chevrotain/types": "12.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@chevrotain/gast": {
|
|
||||||
"version": "12.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@chevrotain/gast/-/gast-12.0.0.tgz",
|
|
||||||
"integrity": "sha512-1ne/m3XsIT8aEdrvT33so0GUC+wkctpUPK6zU9IlOyJLUbR0rg4G7ZiApiJbggpgPir9ERy3FRjT6T7lpgetnQ==",
|
|
||||||
"dependencies": {
|
|
||||||
"@chevrotain/types": "12.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/@chevrotain/regexp-to-ast": {
|
|
||||||
"version": "12.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@chevrotain/regexp-to-ast/-/regexp-to-ast-12.0.0.tgz",
|
|
||||||
"integrity": "sha512-p+EW9MaJwgaHguhoqwOtx/FwuGr+DnNn857sXWOi/mClXIkPGl3rn7hGNWvo31HA3vyeQxjqe+H36yZJwYU8cA=="
|
|
||||||
},
|
|
||||||
"node_modules/@chevrotain/types": {
|
"node_modules/@chevrotain/types": {
|
||||||
"version": "12.0.0",
|
"version": "11.1.2",
|
||||||
"resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-12.0.0.tgz",
|
"resolved": "https://registry.npmmirror.com/@chevrotain/types/-/types-11.1.2.tgz",
|
||||||
"integrity": "sha512-S+04vjFQKeuYw0/eW3U52LkAHQsB1ASxsPGsLPUyQgrZ2iNNibQrsidruDzjEX2JYfespXMG0eZmXlhA6z7nWA=="
|
"integrity": "sha512-U+HFai5+zmJCkK86QsaJtoITlboZHBqrVketcO2ROv865xfCMSFpELQoz1GkX5GzME8pTa+3kbKrZHQtI0gdbw==",
|
||||||
},
|
"license": "Apache-2.0"
|
||||||
"node_modules/@chevrotain/utils": {
|
|
||||||
"version": "12.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/@chevrotain/utils/-/utils-12.0.0.tgz",
|
|
||||||
"integrity": "sha512-lB59uJoaGIfOOL9knQqQRfhl9g7x8/wqFkp13zTdkRu1huG9kg6IJs1O8hqj9rs6h7orGxHJUKb+mX3rPbWGhA=="
|
|
||||||
},
|
},
|
||||||
"node_modules/@codemirror/autocomplete": {
|
"node_modules/@codemirror/autocomplete": {
|
||||||
"version": "6.20.1",
|
"version": "6.20.1",
|
||||||
@@ -1732,11 +1708,12 @@
|
|||||||
"integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g=="
|
"integrity": "sha512-l0h88YhZFyKdXIFNfSWpyjStDjGHwZ/U7iobcK1cQQD8sejsONdQtTVU+1wVN1PBw40PiiHB1vA5S7VTfQiP9g=="
|
||||||
},
|
},
|
||||||
"node_modules/@mermaid-js/parser": {
|
"node_modules/@mermaid-js/parser": {
|
||||||
"version": "1.1.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/@mermaid-js/parser/-/parser-1.1.0.tgz",
|
"resolved": "https://registry.npmmirror.com/@mermaid-js/parser/-/parser-1.2.0.tgz",
|
||||||
"integrity": "sha512-gxK9ZX2+Fex5zu8LhRQoMeMPEHbc73UKZ0FQ54YrQtUxE1VVhMwzeNtKRPAu5aXks4FasbMe4xB4bWrmq6Jlxw==",
|
"integrity": "sha512-oYPyv8A4As1yH5Bx+04iQEQxXuIQDe0GKCNSRgao6z8AM9jixXIfP0vsppRLvGf+nKIOb9/LdpWA4YuJiVvESA==",
|
||||||
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"langium": "^4.0.0"
|
"@chevrotain/types": "~11.1.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@opentelemetry/api": {
|
"node_modules/@opentelemetry/api": {
|
||||||
@@ -4274,6 +4251,66 @@
|
|||||||
"node": ">=14.0.0"
|
"node": ">=14.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/core": {
|
||||||
|
"version": "1.7.1",
|
||||||
|
"dev": true,
|
||||||
|
"inBundle": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@emnapi/wasi-threads": "1.1.0",
|
||||||
|
"tslib": "^2.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/runtime": {
|
||||||
|
"version": "1.7.1",
|
||||||
|
"dev": true,
|
||||||
|
"inBundle": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"dependencies": {
|
||||||
|
"tslib": "^2.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@emnapi/wasi-threads": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"dev": true,
|
||||||
|
"inBundle": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"dependencies": {
|
||||||
|
"tslib": "^2.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@napi-rs/wasm-runtime": {
|
||||||
|
"version": "1.1.0",
|
||||||
|
"dev": true,
|
||||||
|
"inBundle": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@emnapi/core": "^1.7.1",
|
||||||
|
"@emnapi/runtime": "^1.7.1",
|
||||||
|
"@tybys/wasm-util": "^0.10.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/@tybys/wasm-util": {
|
||||||
|
"version": "0.10.1",
|
||||||
|
"dev": true,
|
||||||
|
"inBundle": true,
|
||||||
|
"license": "MIT",
|
||||||
|
"optional": true,
|
||||||
|
"dependencies": {
|
||||||
|
"tslib": "^2.4.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@tailwindcss/oxide-wasm32-wasi/node_modules/tslib": {
|
||||||
|
"version": "2.8.1",
|
||||||
|
"dev": true,
|
||||||
|
"inBundle": true,
|
||||||
|
"license": "0BSD",
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
|
"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
|
||||||
"version": "4.1.18",
|
"version": "4.1.18",
|
||||||
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz",
|
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz",
|
||||||
@@ -5650,32 +5687,6 @@
|
|||||||
"url": "https://github.com/sponsors/wooorm"
|
"url": "https://github.com/sponsors/wooorm"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/chevrotain": {
|
|
||||||
"version": "12.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/chevrotain/-/chevrotain-12.0.0.tgz",
|
|
||||||
"integrity": "sha512-csJvb+6kEiQaqo1woTdSAuOWdN0WTLIydkKrBnS+V5gZz0oqBrp4kQ35519QgK6TpBThiG3V1vNSHlIkv4AglQ==",
|
|
||||||
"dependencies": {
|
|
||||||
"@chevrotain/cst-dts-gen": "12.0.0",
|
|
||||||
"@chevrotain/gast": "12.0.0",
|
|
||||||
"@chevrotain/regexp-to-ast": "12.0.0",
|
|
||||||
"@chevrotain/types": "12.0.0",
|
|
||||||
"@chevrotain/utils": "12.0.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=22.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/chevrotain-allstar": {
|
|
||||||
"version": "0.4.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/chevrotain-allstar/-/chevrotain-allstar-0.4.3.tgz",
|
|
||||||
"integrity": "sha512-2X4mkroolSMKqW+H22pyPMUVDqYZzPhephTmg/NODKb1IGYPHfxfhcW0EjS7wcPJNbze2i4vBWT7zT5FKF2lrQ==",
|
|
||||||
"dependencies": {
|
|
||||||
"lodash-es": "^4.18.1"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"chevrotain": "^12.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/class-variance-authority": {
|
"node_modules/class-variance-authority": {
|
||||||
"version": "0.7.1",
|
"version": "0.7.1",
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
@@ -6547,6 +6558,16 @@
|
|||||||
"node": ">= 0.4"
|
"node": ">= 0.4"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/es-toolkit": {
|
||||||
|
"version": "1.49.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/es-toolkit/-/es-toolkit-1.49.0.tgz",
|
||||||
|
"integrity": "sha512-G5iZ6Pc/FNRY/soKZHC+TxGDD83rHUDXxzaWhGCX44vAv/tMs56WMusnm/KMNK+luUPsgA9U28cGr4RDlSzL2g==",
|
||||||
|
"license": "MIT",
|
||||||
|
"workspaces": [
|
||||||
|
"docs",
|
||||||
|
"benchmarks"
|
||||||
|
]
|
||||||
|
},
|
||||||
"node_modules/esbuild": {
|
"node_modules/esbuild": {
|
||||||
"version": "0.25.12",
|
"version": "0.25.12",
|
||||||
"resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.25.12.tgz",
|
"resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.25.12.tgz",
|
||||||
@@ -7354,7 +7375,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/katex": {
|
"node_modules/katex": {
|
||||||
"version": "0.16.28",
|
"version": "0.16.47",
|
||||||
|
"resolved": "https://registry.npmmirror.com/katex/-/katex-0.16.47.tgz",
|
||||||
|
"integrity": "sha512-Eeo8Ys1doU1z+x8AZsPpQu+p/QcZBI5PeOo7QGQdy2x2m0MU/hYagBbGOmXwr5KVbEfVuWv9LpnQWeehogurjg==",
|
||||||
"funding": [
|
"funding": [
|
||||||
"https://opencollective.com/katex",
|
"https://opencollective.com/katex",
|
||||||
"https://github.com/sponsors/katex"
|
"https://github.com/sponsors/katex"
|
||||||
@@ -7372,23 +7395,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/khroma/-/khroma-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/khroma/-/khroma-2.1.0.tgz",
|
||||||
"integrity": "sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw=="
|
"integrity": "sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw=="
|
||||||
},
|
},
|
||||||
"node_modules/langium": {
|
|
||||||
"version": "4.2.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/langium/-/langium-4.2.3.tgz",
|
|
||||||
"integrity": "sha512-sOPIi4hISFnY7twwV97ca1TsxpBtXq0URu/LL1AvxwccPG/RIBBlKS7a/f/EL6w8lTNaS0EFs/F+IdSOaqYpng==",
|
|
||||||
"dependencies": {
|
|
||||||
"@chevrotain/regexp-to-ast": "~12.0.0",
|
|
||||||
"chevrotain": "~12.0.0",
|
|
||||||
"chevrotain-allstar": "~0.4.3",
|
|
||||||
"vscode-languageserver": "~9.0.1",
|
|
||||||
"vscode-languageserver-textdocument": "~1.0.11",
|
|
||||||
"vscode-uri": "~3.1.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": ">=20.10.0",
|
|
||||||
"npm": ">=10.2.3"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/langsmith": {
|
"node_modules/langsmith": {
|
||||||
"version": "0.6.0",
|
"version": "0.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/langsmith/-/langsmith-0.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/langsmith/-/langsmith-0.6.0.tgz",
|
||||||
@@ -8100,43 +8106,32 @@
|
|||||||
"integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
|
"integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
|
||||||
},
|
},
|
||||||
"node_modules/mermaid": {
|
"node_modules/mermaid": {
|
||||||
"version": "11.14.0",
|
"version": "11.16.0",
|
||||||
"resolved": "https://registry.npmjs.org/mermaid/-/mermaid-11.14.0.tgz",
|
"resolved": "https://registry.npmmirror.com/mermaid/-/mermaid-11.16.0.tgz",
|
||||||
"integrity": "sha512-GSGloRsBs+JINmmhl0JDwjpuezCsHB4WGI4NASHxL3fHo3o/BRXTxhDLKnln8/Q0lRFRyDdEjmk1/d5Sn1Xz8g==",
|
"integrity": "sha512-Zvm3kbstgdpvIJPPItlL7fppIZ3kibvc1oZIGxdvk9t6UFz6flv+Jw7FtRGKwfcI8OckmH04LqG6LlS6X4B1pA==",
|
||||||
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@braintree/sanitize-url": "^7.1.1",
|
"@braintree/sanitize-url": "^7.1.2",
|
||||||
"@iconify/utils": "^3.0.2",
|
"@iconify/utils": "^3.0.2",
|
||||||
"@mermaid-js/parser": "^1.1.0",
|
"@mermaid-js/parser": "^1.2.0",
|
||||||
"@types/d3": "^7.4.3",
|
"@types/d3": "^7.4.3",
|
||||||
"@upsetjs/venn.js": "^2.0.0",
|
"@upsetjs/venn.js": "^2.0.0",
|
||||||
"cytoscape": "^3.33.1",
|
"cytoscape": "^3.33.3",
|
||||||
"cytoscape-cose-bilkent": "^4.1.0",
|
"cytoscape-cose-bilkent": "^4.1.0",
|
||||||
"cytoscape-fcose": "^2.2.0",
|
"cytoscape-fcose": "^2.2.0",
|
||||||
"d3": "^7.9.0",
|
"d3": "^7.9.0",
|
||||||
"d3-sankey": "^0.12.3",
|
"d3-sankey": "^0.12.3",
|
||||||
"dagre-d3-es": "7.0.14",
|
"dagre-d3-es": "7.0.14",
|
||||||
"dayjs": "^1.11.19",
|
"dayjs": "^1.11.20",
|
||||||
"dompurify": "^3.3.1",
|
"dompurify": "^3.3.3",
|
||||||
"katex": "^0.16.25",
|
"es-toolkit": "^1.45.1",
|
||||||
|
"katex": "^0.16.45",
|
||||||
"khroma": "^2.1.0",
|
"khroma": "^2.1.0",
|
||||||
"lodash-es": "^4.17.23",
|
|
||||||
"marked": "^16.3.0",
|
"marked": "^16.3.0",
|
||||||
"roughjs": "^4.6.6",
|
"roughjs": "^4.6.6",
|
||||||
"stylis": "^4.3.6",
|
"stylis": "^4.3.6",
|
||||||
"ts-dedent": "^2.2.0",
|
"ts-dedent": "^2.2.0",
|
||||||
"uuid": "^11.1.0"
|
"uuid": "^11.1.0 || ^12 || ^13 || ^14.0.0"
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/mermaid/node_modules/uuid": {
|
|
||||||
"version": "11.1.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.1.tgz",
|
|
||||||
"integrity": "sha512-vIYxrBCC/N/K+Js3qSN88go7kIfNPssr/hHCesKCQNAjmgvYS2oqr69kIufEG+O4+PfezOH4EbIeHCfFov8ZgQ==",
|
|
||||||
"funding": [
|
|
||||||
"https://github.com/sponsors/broofa",
|
|
||||||
"https://github.com/sponsors/ctavan"
|
|
||||||
],
|
|
||||||
"bin": {
|
|
||||||
"uuid": "dist/esm/bin/uuid"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/micromark": {
|
"node_modules/micromark": {
|
||||||
@@ -10414,49 +10409,6 @@
|
|||||||
"vite": ">=5.0.0"
|
"vite": ">=5.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/vscode-jsonrpc": {
|
|
||||||
"version": "8.2.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz",
|
|
||||||
"integrity": "sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA==",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=14.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/vscode-languageserver": {
|
|
||||||
"version": "9.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/vscode-languageserver/-/vscode-languageserver-9.0.1.tgz",
|
|
||||||
"integrity": "sha512-woByF3PDpkHFUreUa7Hos7+pUWdeWMXRd26+ZX2A8cFx6v/JPTtd4/uN0/jB6XQHYaOlHbio03NTHCqrgG5n7g==",
|
|
||||||
"dependencies": {
|
|
||||||
"vscode-languageserver-protocol": "3.17.5"
|
|
||||||
},
|
|
||||||
"bin": {
|
|
||||||
"installServerIntoExtension": "bin/installServerIntoExtension"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/vscode-languageserver-protocol": {
|
|
||||||
"version": "3.17.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/vscode-languageserver-protocol/-/vscode-languageserver-protocol-3.17.5.tgz",
|
|
||||||
"integrity": "sha512-mb1bvRJN8SVznADSGWM9u/b07H7Ecg0I3OgXDuLdn307rl/J3A9YD6/eYOssqhecL27hK1IPZAsaqh00i/Jljg==",
|
|
||||||
"dependencies": {
|
|
||||||
"vscode-jsonrpc": "8.2.0",
|
|
||||||
"vscode-languageserver-types": "3.17.5"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/vscode-languageserver-textdocument": {
|
|
||||||
"version": "1.0.12",
|
|
||||||
"resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.12.tgz",
|
|
||||||
"integrity": "sha512-cxWNPesCnQCcMPeenjKKsOCKQZ/L6Tv19DTRIGuLWe32lyzWhihGVJ/rcckZXJxfdKCFvRLS3fpBIsV/ZGX4zA=="
|
|
||||||
},
|
|
||||||
"node_modules/vscode-languageserver-types": {
|
|
||||||
"version": "3.17.5",
|
|
||||||
"resolved": "https://registry.npmjs.org/vscode-languageserver-types/-/vscode-languageserver-types-3.17.5.tgz",
|
|
||||||
"integrity": "sha512-Ld1VelNuX9pdF39h2Hgaeb5hEZM2Z3jUrrMgWQAu82jMtZp7p3vJT3BzToKtZI7NgQssZje5o0zryOrhQvzQAg=="
|
|
||||||
},
|
|
||||||
"node_modules/vscode-uri": {
|
|
||||||
"version": "3.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/vscode-uri/-/vscode-uri-3.1.0.tgz",
|
|
||||||
"integrity": "sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ=="
|
|
||||||
},
|
|
||||||
"node_modules/w3c-keyname": {
|
"node_modules/w3c-keyname": {
|
||||||
"version": "2.2.8",
|
"version": "2.2.8",
|
||||||
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
|
"resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
|
||||||
|
|||||||
@@ -7,9 +7,13 @@
|
|||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "node --max-old-space-size=8192 ./node_modules/vite/bin/vite.js build",
|
"build": "node --max-old-space-size=8192 ./node_modules/vite/bin/vite.js build",
|
||||||
"build:sit": "node --max-old-space-size=8192 ./node_modules/vite/bin/vite.js build --mode sit",
|
"build:sit": "node --max-old-space-size=8192 ./node_modules/vite/bin/vite.js build --mode sit",
|
||||||
|
"build:test": "node --max-old-space-size=8192 ./node_modules/vite/bin/vite.js build --mode test",
|
||||||
"build:network": "node --max-old-space-size=8192 ./node_modules/vite/bin/vite.js build --mode network",
|
"build:network": "node --max-old-space-size=8192 ./node_modules/vite/bin/vite.js build --mode network",
|
||||||
"preview": "vite preview",
|
"preview": "vite preview",
|
||||||
"typecheck": "tsc --noEmit"
|
"typecheck": "tsc --noEmit",
|
||||||
|
"test:maf": "vitest run --config vitest.maf.config.ts",
|
||||||
|
"check:chrome109-css": "node scripts/check-chrome109-css.mjs",
|
||||||
|
"check:legacy-chrome-css": "node scripts/check-chrome109-css.mjs"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@codemirror/lang-css": "^6.3.1",
|
"@codemirror/lang-css": "^6.3.1",
|
||||||
@@ -103,18 +107,23 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/postcss": "^4.0.15",
|
"@tailwindcss/postcss": "^4.0.15",
|
||||||
|
"@testing-library/react": "^16.3.2",
|
||||||
|
"@testing-library/user-event": "^14.6.1",
|
||||||
"@types/file-saver": "^2.0.7",
|
"@types/file-saver": "^2.0.7",
|
||||||
"@types/gsap": "^3.0.0",
|
"@types/gsap": "^3.0.0",
|
||||||
"@types/node": "^20.14.10",
|
"@types/node": "^20.14.10",
|
||||||
"@types/react": "^19.0.0",
|
"@types/react": "^19.0.0",
|
||||||
"@types/react-dom": "^19.0.0",
|
"@types/react-dom": "^19.0.0",
|
||||||
"@vitejs/plugin-react": "^5.0.4",
|
"@vitejs/plugin-react": "^5.0.4",
|
||||||
|
"jsdom": "^30.0.1",
|
||||||
|
"lightningcss": "^1.30.2",
|
||||||
"postcss": "^8.5.3",
|
"postcss": "^8.5.3",
|
||||||
"tailwindcss": "^4.0.15",
|
"tailwindcss": "^4.0.15",
|
||||||
"tw-animate-css": "^1.4.0",
|
"tw-animate-css": "^1.4.0",
|
||||||
"typescript": "^5.8.2",
|
"typescript": "^5.8.2",
|
||||||
"vite": "^6.0.0",
|
"vite": "^6.0.0",
|
||||||
"vite-plugin-source-identifier": "^1.1.2"
|
"vite-plugin-source-identifier": "^1.1.2",
|
||||||
|
"vitest": "^4.1.10"
|
||||||
},
|
},
|
||||||
"packageManager": "pnpm@10.26.2"
|
"packageManager": "pnpm@10.26.2"
|
||||||
}
|
}
|
||||||
@@ -1,5 +1,11 @@
|
|||||||
export default {
|
import tailwindcss from "@tailwindcss/postcss";
|
||||||
plugins: {
|
import legacyColorFallback from "./scripts/postcss-legacy-color-fallback.mjs";
|
||||||
"@tailwindcss/postcss": {},
|
import lightningCssLegacyChrome from "./scripts/postcss-lightningcss-chrome109.mjs";
|
||||||
},
|
|
||||||
};
|
export default {
|
||||||
|
plugins: [
|
||||||
|
tailwindcss(),
|
||||||
|
legacyColorFallback(),
|
||||||
|
lightningCssLegacyChrome(),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 27 KiB |
@@ -0,0 +1,135 @@
|
|||||||
|
// 前端运行时配置文件
|
||||||
|
//
|
||||||
|
// 说明:
|
||||||
|
// 1. 本文件会在打包时原样复制到 dist/runtime-config.js。
|
||||||
|
// 2. 应用启动时会优先读取 window.__CM_RUNTIME_CONFIG__ 里的配置。
|
||||||
|
// 3. 部署后如果需要切换接口地址,直接修改 dist/runtime-config.js 即可,不需要重新 pnpm build。
|
||||||
|
// 4. 这里的默认值来自 .env.network;如某个环境不用某项,可以留空字符串。
|
||||||
|
// 5. 布尔开关也用字符串形式填写:"true" / "false"。
|
||||||
|
window.__CM_RUNTIME_CONFIG__ = {
|
||||||
|
// 品牌图片相对路径会以 runtime-config.js 所在目录为基准解析。
|
||||||
|
// Nginx 以子路径部署时不需要修改前端图片路径。
|
||||||
|
// 打包后可直接替换 dist/brand-assets/ 内的同名 PNG。
|
||||||
|
// 也可以把下方图片地址改为其他 PNG 地址,无需重新打包。
|
||||||
|
// 是否显示整块欢迎页图标区域:"true" 显示,"false" 隐藏,默认隐藏。
|
||||||
|
VITE_WELCOME_LOGO_VISIBLE: "false",
|
||||||
|
// 深色主题顶栏 Logo 位置:"center" 显示在中间,"left" 显示在左上角,默认中间。
|
||||||
|
VITE_DARK_LOGO_POSITION: "center",
|
||||||
|
// 红白主题的顶栏系统 Logo 图片地址。
|
||||||
|
VITE_BRAND_LOGO_LIGHT_URL: "brand-assets/brand-logo-light.png",
|
||||||
|
// 浅蓝主题的顶栏系统 Logo 图片地址。
|
||||||
|
VITE_BRAND_LOGO_LIGHTBLUE_URL: "brand-assets/brand-logo-lightblue.png",
|
||||||
|
// 绿色主题可单独替换 Logo;默认复用浅色 Logo。
|
||||||
|
VITE_BRAND_LOGO_LIGHTGREEN_URL: "brand-assets/brand-logo-light.png",
|
||||||
|
// 深色主题的顶栏系统 Logo 图片地址。
|
||||||
|
VITE_BRAND_LOGO_DARK_URL: "brand-assets/brand-logo-dark.png",
|
||||||
|
// 红白主题的欢迎页 Logo 图片地址:为空时显示原有 CM 文字和渐变背景。
|
||||||
|
VITE_BRAND_WELCOME_LIGHT_URL: "",
|
||||||
|
// 浅蓝主题的欢迎页 Logo 图片地址:为空时显示原有 CM 文字和渐变背景。
|
||||||
|
VITE_BRAND_WELCOME_LIGHTBLUE_URL: "",
|
||||||
|
VITE_BRAND_WELCOME_LIGHTGREEN_URL: "",
|
||||||
|
// 深色主题的欢迎页 Logo 图片地址:为空时显示原有 CM 文字和渐变背景。
|
||||||
|
VITE_BRAND_WELCOME_DARK_URL: "",
|
||||||
|
|
||||||
|
// DeerFlow Gateway 地址:前端自有后端接口,例如 /api/agents、/api/auth、/api/threads 等。
|
||||||
|
// VITE_BACKEND_BASE_URL: "http://10.19.200.5:2026",
|
||||||
|
|
||||||
|
// LangGraph 流式对话接口地址:普通问答、智能体对话等流式能力使用。
|
||||||
|
// VITE_LANGGRAPH_BASE_URL: "http://10.19.200.5:2026/api",
|
||||||
|
|
||||||
|
// Canvas/AI 写作独立 LangGraph 地址:为空时前端会回退使用 VITE_LANGGRAPH_BASE_URL。
|
||||||
|
VITE_CANVAS_LANGGRAPH_BASE_URL: "",
|
||||||
|
|
||||||
|
// routeKey 短路由的用户名直登口令:例如 #/login/admin?routeKey=a。
|
||||||
|
// 填值时优先使用这里的 password;留空时使用 URL 中的 ?password=。
|
||||||
|
VITE_ROUTE_LOGIN_PASSWORD: "",
|
||||||
|
|
||||||
|
// 轻应用「新建笔记」系列接口地址。
|
||||||
|
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: "https://ch1.b.uat.4.cn/gpt",
|
||||||
|
|
||||||
|
// 多轮检索/生成接口。
|
||||||
|
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",
|
||||||
|
|
||||||
|
// B 系统知识库前端地址:用于打开知识详情、原文详情等。
|
||||||
|
VITE_AIPI_KNOWLEDGE_URL: "https://chlib.b.uat.4.cn/knowlibrary",
|
||||||
|
|
||||||
|
// B1 COH 系统地址。
|
||||||
|
VITE_AIPI_B1COH_URL: "https://ch1.b.uat.4.cn/web",
|
||||||
|
|
||||||
|
// B2 行为体/网络资源系统地址。
|
||||||
|
VITE_AIPI_B2ACTOR_URL: "https://ty.b.uat.4.cn",
|
||||||
|
|
||||||
|
// B2 网络 XWT iframe 路径。
|
||||||
|
VITE_AIPI_B2ACTOR_XWT_PATH: "/fromB/toXWT?isFrame=1",
|
||||||
|
|
||||||
|
// 知识库 iframe 地址换取接口。
|
||||||
|
VITE_AIPI_KNOWLEDGE_IFRAME_API_URL: "https://ch1.b.uat.4.cn/knowes/api/iframeKnowledgeUrl",
|
||||||
|
|
||||||
|
// 知识库 iframe 皮肤参数。
|
||||||
|
VITE_AIPI_KNOWLEDGE_IFRAME_SKIN: "red",
|
||||||
|
|
||||||
|
// MopeChat 接口地址。
|
||||||
|
VITE_AIPI_MOPECHAT_URL: "https://ch1.b.uat.4.cn/likun_b1_mope",
|
||||||
|
|
||||||
|
// 工作室/空间后端接口:空间列表、空间详情、素材上传等使用。
|
||||||
|
VITE_AIPI_BACKENP_URL: "http://47.88.25.99:8000",
|
||||||
|
|
||||||
|
// 工作室/空间后端别名:兼容旧配置命名,通常与 VITE_AIPI_BACKENP_URL 保持一致。
|
||||||
|
VITE_NOTEBOOK_API_BASE_URL: "http://47.88.25.99:8000",
|
||||||
|
|
||||||
|
// 工作室/空间前端地址:用于 auth/callback、新建对话等跳转。
|
||||||
|
VITE_AIPI_FRONTEND_URL: "http://47.88.25.99:3000",
|
||||||
|
|
||||||
|
// Consumer 接口:深链任务详情 cop-task-detail、研判情报报告 selectSqReport 等使用。
|
||||||
|
VITE_AIPI_CONSUMER_URL: "http://10.19.200.5:8002/consumer",
|
||||||
|
|
||||||
|
// A 系统跳转地址:人物、组织、事件等列表项打开链接使用。
|
||||||
|
VITE_AIPI_PRESENT_URL: "http://present.a.uat.4.cn/present/domain",
|
||||||
|
|
||||||
|
// B 系统 knowes 根地址。
|
||||||
|
VITE_AIPI_KNOWES_URL: "http://ch1.b.uat.4.cn/knowes",
|
||||||
|
|
||||||
|
// MaxKey 鉴权地址:onlineTicket 换 token 使用。
|
||||||
|
VITE_AUTH_BASE_URL: "https://auth.y.uat.4.cn",
|
||||||
|
|
||||||
|
// PG 中任务 iframe 地址。
|
||||||
|
VITE_AIPI_PGLINKTO_URL: "https://pg.b.uat.4.cn",
|
||||||
|
|
||||||
|
// XK 中任务 iframe 地址。
|
||||||
|
VITE_AIPI_XKLINKTO_URL: "https://kz.b.uat.4.cn",
|
||||||
|
|
||||||
|
// 是否使用真实任务看板数据:true=真实接口;false=本地 mock。
|
||||||
|
VITE_USE_REAL_DATA: "true",
|
||||||
|
|
||||||
|
// 登录深链任务详情是否使用本地 mock:false=真实接口;true=本地 mock。
|
||||||
|
VITE_MOCK_COP_TASK_DETAIL: "false",
|
||||||
|
|
||||||
|
// 岗位会商完整演示数据:true=启动时幂等写入后端;后端不可用时直接使用前端 JSON 兜底。
|
||||||
|
// 默认关闭,避免演示历史记录出现在正常生产账号中。
|
||||||
|
VITE_POSITION_ROUNDTABLE_DEMO_MODE: "false",
|
||||||
|
// 纯前端岗位分析演示:跳过登录,直接进入岗位分析页,并禁止所有后台请求。
|
||||||
|
// 仅用于离线展台/演示环境,生产环境必须保持 false。
|
||||||
|
VITE_POSITION_ROUNDTABLE_STANDALONE_MODE: "false",
|
||||||
|
|
||||||
|
// 大屏绘制 selectSqReport 是否使用本地 mock:不在运行时强制覆盖,
|
||||||
|
// 由各环境的 .env 文件决定(开发环境为 true,生产环境为 false)。
|
||||||
|
|
||||||
|
// 静态站点模式开关;一般部署业务系统时保持 false。
|
||||||
|
VITE_STATIC_WEBSITE_ONLY: "false",
|
||||||
|
|
||||||
|
// 紧凑导航开关:true 时固定使用简洁布局,工作台左侧栏收起为菜单图标,
|
||||||
|
// 隐藏系统 Logo、换肤按钮以及“全量/简洁模式”切换。修改后刷新页面即可生效。
|
||||||
|
VITE_FORCE_COLLAPSED_SIDEBAR: "false",
|
||||||
|
|
||||||
|
// GitHub OAuth Token;不使用 GitHub 相关能力时留空。
|
||||||
|
VITE_GITHUB_OAUTH_TOKEN: "",
|
||||||
|
};
|
||||||
@@ -0,0 +1,109 @@
|
|||||||
|
import fs from "node:fs";
|
||||||
|
import path from "node:path";
|
||||||
|
import postcss from "postcss";
|
||||||
|
|
||||||
|
const unsupportedColor = /(?:color-mix|oklch|oklab|lab|lch)\(/i;
|
||||||
|
const assetsDir = path.resolve("dist/assets");
|
||||||
|
|
||||||
|
if (!fs.existsSync(assetsDir)) {
|
||||||
|
throw new Error("dist/assets 不存在,请先运行 pnpm build");
|
||||||
|
}
|
||||||
|
|
||||||
|
const cssFiles = fs
|
||||||
|
.readdirSync(assetsDir)
|
||||||
|
.filter((file) => file.endsWith(".css"));
|
||||||
|
|
||||||
|
if (cssFiles.length === 0) {
|
||||||
|
throw new Error("dist/assets 中没有 CSS 构建产物");
|
||||||
|
}
|
||||||
|
|
||||||
|
const failures = [];
|
||||||
|
let modernDeclarations = 0;
|
||||||
|
|
||||||
|
const requiredLegacyFallbacks = [
|
||||||
|
{
|
||||||
|
file: "src/components/ui/textarea.tsx",
|
||||||
|
pattern: /rows=\{rows\s*\?\?\s*3\}/,
|
||||||
|
description: "Textarea needs a native rows fallback",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
file: "src/components/ai-elements/prompt-input.tsx",
|
||||||
|
pattern: /<InputGroup className="h-auto min-h-16">/,
|
||||||
|
description: "Prompt textarea must not rely on :has() for its parent height",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
for (const file of cssFiles) {
|
||||||
|
const root = postcss.parse(
|
||||||
|
fs.readFileSync(path.join(assetsDir, file), "utf8"),
|
||||||
|
{ from: file },
|
||||||
|
);
|
||||||
|
|
||||||
|
root.walkDecls((declaration) => {
|
||||||
|
if (!unsupportedColor.test(declaration.value)) return;
|
||||||
|
modernDeclarations += 1;
|
||||||
|
|
||||||
|
let ancestor = declaration.parent;
|
||||||
|
while (ancestor) {
|
||||||
|
if (
|
||||||
|
ancestor.type === "atrule" &&
|
||||||
|
ancestor.name === "supports" &&
|
||||||
|
unsupportedColor.test(ancestor.params)
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
ancestor = ancestor.parent;
|
||||||
|
}
|
||||||
|
|
||||||
|
let previous = declaration.prev();
|
||||||
|
while (previous?.type === "comment") previous = previous.prev();
|
||||||
|
const hasSafeFallback =
|
||||||
|
!declaration.prop.startsWith("--") &&
|
||||||
|
previous?.type === "decl" &&
|
||||||
|
previous.prop === declaration.prop &&
|
||||||
|
!unsupportedColor.test(previous.value);
|
||||||
|
|
||||||
|
if (!hasSafeFallback) {
|
||||||
|
failures.push(
|
||||||
|
`${file}:${declaration.source?.start?.line ?? "?"} ${declaration.prop}: ${declaration.value}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function walk(directory) {
|
||||||
|
return fs.readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
|
||||||
|
const fullPath = path.join(directory, entry.name);
|
||||||
|
return entry.isDirectory() ? walk(fullPath) : [fullPath];
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const file of walk(path.resolve("src"))) {
|
||||||
|
if (!/\.[jt]sx?$/.test(file)) continue;
|
||||||
|
const source = fs.readFileSync(file, "utf8");
|
||||||
|
if (unsupportedColor.test(source)) {
|
||||||
|
failures.push(
|
||||||
|
`${path.relative(process.cwd(), file)} contains a runtime-only modern color function`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const fallback of requiredLegacyFallbacks) {
|
||||||
|
const source = fs.readFileSync(path.resolve(fallback.file), "utf8");
|
||||||
|
if (!fallback.pattern.test(source)) {
|
||||||
|
failures.push(`${fallback.file}: ${fallback.description}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (failures.length > 0) {
|
||||||
|
console.error("Legacy Chrome CSS compatibility check failed:\n");
|
||||||
|
console.error(failures.slice(0, 50).join("\n"));
|
||||||
|
if (failures.length > 50) {
|
||||||
|
console.error(`... and ${failures.length - 50} more`);
|
||||||
|
}
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log(
|
||||||
|
`Legacy Chrome (100+) CSS compatibility check passed (${modernDeclarations} guarded modern declarations).`,
|
||||||
|
);
|
||||||
@@ -0,0 +1,70 @@
|
|||||||
|
/**
|
||||||
|
* Tailwind 4 gracefully falls back from color-mix() to the base semantic
|
||||||
|
* color, but that turns utilities such as bg-primary/5 into an opaque fill on
|
||||||
|
* Chrome 109. Replace that fallback with an sRGB-channel based alpha color.
|
||||||
|
* The modern color-mix() declaration remains in its @supports block.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const LEGACY_RGB_TOKENS = new Set([
|
||||||
|
"accent",
|
||||||
|
"background",
|
||||||
|
"border",
|
||||||
|
"brand-200",
|
||||||
|
"card",
|
||||||
|
"destructive",
|
||||||
|
"foreground",
|
||||||
|
"input",
|
||||||
|
"muted",
|
||||||
|
"muted-foreground",
|
||||||
|
"primary",
|
||||||
|
"primary-foreground",
|
||||||
|
"ring",
|
||||||
|
"secondary",
|
||||||
|
"sidebar-accent",
|
||||||
|
"sidebar-border",
|
||||||
|
"sidebar-foreground",
|
||||||
|
"workspace-brand",
|
||||||
|
]);
|
||||||
|
|
||||||
|
const TRANSPARENT_MIX_RE =
|
||||||
|
/color-mix\(\s*in\s+[\w-]+\s*,\s*var\(--([\w-]+)\)\s+([\d.]+)%\s*,\s*transparent\s*\)/i;
|
||||||
|
|
||||||
|
function legacyAlphaColor(value) {
|
||||||
|
const match = value.match(TRANSPARENT_MIX_RE);
|
||||||
|
if (!match || !LEGACY_RGB_TOKENS.has(match[1])) return null;
|
||||||
|
|
||||||
|
const [, token, percentage] = match;
|
||||||
|
return `rgb(var(--legacy-${token}-rgb) / ${percentage}%)`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function legacyColorFallback() {
|
||||||
|
return {
|
||||||
|
postcssPlugin: "postcss-legacy-color-fallback",
|
||||||
|
OnceExit(root) {
|
||||||
|
root.walkAtRules("supports", (atRule) => {
|
||||||
|
if (!atRule.params.includes("color-mix")) return;
|
||||||
|
|
||||||
|
atRule.walkDecls((modernDeclaration) => {
|
||||||
|
const fallbackValue = legacyAlphaColor(modernDeclaration.value);
|
||||||
|
if (!fallbackValue) return;
|
||||||
|
|
||||||
|
// Tailwind emits the old-browser declaration immediately before
|
||||||
|
// the nested @supports block, in the same utility/variant rule.
|
||||||
|
let fallbackDeclaration = atRule.prev();
|
||||||
|
while (fallbackDeclaration?.type === "comment") {
|
||||||
|
fallbackDeclaration = fallbackDeclaration.prev();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
fallbackDeclaration?.type === "decl" &&
|
||||||
|
fallbackDeclaration.prop === modernDeclaration.prop
|
||||||
|
) {
|
||||||
|
fallbackDeclaration.value = fallbackValue;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
legacyColorFallback.postcss = true;
|
||||||
@@ -0,0 +1,33 @@
|
|||||||
|
import postcss from "postcss";
|
||||||
|
import { transform } from "lightningcss";
|
||||||
|
|
||||||
|
const LEGACY_CHROME = 100 << 16;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Keep Vite's PostCSS pipeline (required by Tailwind 4), then compile the
|
||||||
|
* resulting CSS to Chrome 100-compatible syntax for both dev and production.
|
||||||
|
*/
|
||||||
|
export default function lightningCssLegacyChrome() {
|
||||||
|
return {
|
||||||
|
postcssPlugin: "postcss-lightningcss-legacy-chrome",
|
||||||
|
OnceExit(root, { result }) {
|
||||||
|
const filename = root.source?.input.file ?? result.opts.from ?? "style.css";
|
||||||
|
const output = transform({
|
||||||
|
filename,
|
||||||
|
code: Buffer.from(root.toString()),
|
||||||
|
targets: { chrome: LEGACY_CHROME },
|
||||||
|
minify: false,
|
||||||
|
});
|
||||||
|
const compiled = postcss.parse(output.code.toString(), { from: filename });
|
||||||
|
|
||||||
|
root.removeAll();
|
||||||
|
root.append(compiled.nodes);
|
||||||
|
|
||||||
|
for (const warning of output.warnings) {
|
||||||
|
result.warn(warning.message, { plugin: "lightningcss" });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
lightningCssLegacyChrome.postcss = true;
|
||||||
@@ -7,6 +7,7 @@ import { FontScaleApplier } from "@/components/font-scale";
|
|||||||
import { QueryClientProvider } from "@/components/query-client-provider";
|
import { QueryClientProvider } from "@/components/query-client-provider";
|
||||||
import { AuthSyncWatcher } from "@/core/auth/sync";
|
import { AuthSyncWatcher } from "@/core/auth/sync";
|
||||||
import { I18nProvider } from "@/core/i18n/context";
|
import { I18nProvider } from "@/core/i18n/context";
|
||||||
|
import { fetchYLogConfig } from "@/core/log/y-log-config";
|
||||||
import { detectLocale } from "@/core/i18n/locale";
|
import { detectLocale } from "@/core/i18n/locale";
|
||||||
import { resolveForcedThemeForPath } from "@/core/page-layout/chats-iframe-route";
|
import { resolveForcedThemeForPath } from "@/core/page-layout/chats-iframe-route";
|
||||||
import { ChatProvider } from "@/contexts/ChatContext";
|
import { ChatProvider } from "@/contexts/ChatContext";
|
||||||
@@ -36,6 +37,11 @@ import PublicRoundtableSharePage from "./pages/PublicRoundtableSharePage";
|
|||||||
import EmbedChatPage from "./pages/EmbedChatPage";
|
import EmbedChatPage from "./pages/EmbedChatPage";
|
||||||
import EmbedRoundtablePage from "./pages/EmbedRoundtablePage";
|
import EmbedRoundtablePage from "./pages/EmbedRoundtablePage";
|
||||||
import DashboardStandalonePage from "@/roundtable-planning/pages/DashboardStandalonePage";
|
import DashboardStandalonePage from "@/roundtable-planning/pages/DashboardStandalonePage";
|
||||||
|
import PositionRoundtablePage from "@/position-roundtable/pages/PositionRoundtablePage";
|
||||||
|
import {
|
||||||
|
isPositionRoundtableStandaloneMode,
|
||||||
|
POSITION_ROUNDTABLE_ROUTE,
|
||||||
|
} from "@/position-roundtable/demo/position-roundtable-demo-config";
|
||||||
import { ChatRuntime } from "./pages/WorkspaceRoutes";
|
import { ChatRuntime } from "./pages/WorkspaceRoutes";
|
||||||
import { NotFoundPage } from "./pages/NotFoundPage";
|
import { NotFoundPage } from "./pages/NotFoundPage";
|
||||||
|
|
||||||
@@ -45,17 +51,27 @@ function AppProviders({ children }: { children: React.ReactNode }) {
|
|||||||
const locale = useMemo(() => detectLocale(), []);
|
const locale = useMemo(() => detectLocale(), []);
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const publicEmbedTheme = usePublicEmbedTheme();
|
const publicEmbedTheme = usePublicEmbedTheme();
|
||||||
|
const positionStandaloneMode = isPositionRoundtableStandaloneMode();
|
||||||
// iframe 嵌入会话(按标签页 sessionStorage)集中在此同步:任何带 `&embed=1` 的入口(深链登录页
|
// iframe 嵌入会话(按标签页 sessionStorage)集中在此同步:任何带 `&embed=1` 的入口(深链登录页
|
||||||
// 或直接深链路由)一进来就启用、`embed=0` 关闭,后续干净路由靠会话维持去 chrome + 强制主题。
|
// 或直接深链路由)一进来就启用、`embed=0` 关闭,后续干净路由靠会话维持去 chrome + 强制主题。
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
syncEmbedSessionFromSearch(location.search);
|
syncEmbedSessionFromSearch(location.search);
|
||||||
}, [location.search]);
|
}, [location.search]);
|
||||||
|
// 操作日志(Y-Log):启动早期预热上报配置,使 writeYLog 同步读缓存即可工作
|
||||||
|
// (刷新后 module 缓存清空,token 登录用户也能继续上报)。失败静默。
|
||||||
|
useEffect(() => {
|
||||||
|
if (positionStandaloneMode) return;
|
||||||
|
void fetchYLogConfig();
|
||||||
|
}, [positionStandaloneMode]);
|
||||||
const forcedTheme = useMemo(() => {
|
const forcedTheme = useMemo(() => {
|
||||||
// iframe 嵌入模式(外部系统 `&embed=1`)最高优先:按本标签页的嵌入主题强制明/暗。
|
// iframe 嵌入模式(外部系统 `&embed=1`)最高优先:按本标签页的嵌入主题强制明/暗。
|
||||||
// 走 next-themes forcedTheme(不写 localStorage)→ 同浏览器另开的正常系统页不受影响。
|
// 走 next-themes forcedTheme(不写 localStorage)→ 同浏览器另开的正常系统页不受影响。
|
||||||
const embedTheme = resolveForcedEmbedTheme(location.search);
|
const embedTheme = resolveForcedEmbedTheme(location.search);
|
||||||
if (embedTheme) return embedTheme;
|
if (embedTheme) return embedTheme;
|
||||||
const routeTheme = resolveForcedThemeForPath(location.pathname);
|
const routeTheme = resolveForcedThemeForPath(
|
||||||
|
location.pathname,
|
||||||
|
location.search,
|
||||||
|
);
|
||||||
if (routeTheme) return routeTheme;
|
if (routeTheme) return routeTheme;
|
||||||
if (location.pathname === "/embed/roundtable") {
|
if (location.pathname === "/embed/roundtable") {
|
||||||
const wp = readWujieProps();
|
const wp = readWujieProps();
|
||||||
@@ -80,7 +96,7 @@ function AppProviders({ children }: { children: React.ReactNode }) {
|
|||||||
attribute="class"
|
attribute="class"
|
||||||
storageKey="strategy-theme"
|
storageKey="strategy-theme"
|
||||||
defaultTheme="light"
|
defaultTheme="light"
|
||||||
themes={["light", "dark", "lightblue"]}
|
themes={["light", "dark", "lightblue", "lightgreen", "iceblue", "lightyellow"]}
|
||||||
enableSystem={false}
|
enableSystem={false}
|
||||||
disableTransitionOnChange
|
disableTransitionOnChange
|
||||||
forcedTheme={forcedTheme}
|
forcedTheme={forcedTheme}
|
||||||
@@ -89,8 +105,8 @@ function AppProviders({ children }: { children: React.ReactNode }) {
|
|||||||
<I18nProvider initialLocale={locale}>
|
<I18nProvider initialLocale={locale}>
|
||||||
<ThemeProvider>
|
<ThemeProvider>
|
||||||
<ChatProvider>
|
<ChatProvider>
|
||||||
<AuthSyncWatcher />
|
{!positionStandaloneMode && <AuthSyncWatcher />}
|
||||||
<DesensitizeWordsLoader />
|
{!positionStandaloneMode && <DesensitizeWordsLoader />}
|
||||||
<FontScaleApplier />
|
<FontScaleApplier />
|
||||||
{children}
|
{children}
|
||||||
</ChatProvider>
|
</ChatProvider>
|
||||||
@@ -108,17 +124,38 @@ function AppProviders({ children }: { children: React.ReactNode }) {
|
|||||||
*/
|
*/
|
||||||
function RootRedirect() {
|
function RootRedirect() {
|
||||||
const { search } = useLocation();
|
const { search } = useLocation();
|
||||||
|
if (isPositionRoundtableStandaloneMode()) {
|
||||||
|
return <Navigate to={POSITION_ROUNDTABLE_ROUTE} replace />;
|
||||||
|
}
|
||||||
return <Navigate to={`/login${search}`} replace />;
|
return <Navigate to={`/login${search}`} replace />;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function App() {
|
export function App() {
|
||||||
|
const positionStandaloneMode = isPositionRoundtableStandaloneMode();
|
||||||
|
const standaloneLoginRedirect = (
|
||||||
|
<Navigate to={POSITION_ROUNDTABLE_ROUTE} replace />
|
||||||
|
);
|
||||||
|
const pageElement = positionStandaloneMode ? (
|
||||||
|
<ChatRuntime>
|
||||||
|
<PositionRoundtablePage compactChrome />
|
||||||
|
</ChatRuntime>
|
||||||
|
) : (
|
||||||
|
<PageRoutes />
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<HashRouter>
|
<HashRouter>
|
||||||
<AppProviders>
|
<AppProviders>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/" element={<RootRedirect />} />
|
<Route path="/" element={<RootRedirect />} />
|
||||||
<Route path="/login" element={<LoginPage />} />
|
<Route
|
||||||
<Route path="/login/:username" element={<LoginPage />} />
|
path="/login"
|
||||||
|
element={positionStandaloneMode ? standaloneLoginRedirect : <LoginPage />}
|
||||||
|
/>
|
||||||
|
<Route
|
||||||
|
path="/login/:username"
|
||||||
|
element={positionStandaloneMode ? standaloneLoginRedirect : <LoginPage />}
|
||||||
|
/>
|
||||||
<Route path="/landing" element={<LandingPage />} />
|
<Route path="/landing" element={<LandingPage />} />
|
||||||
<Route path="/share/:shareCode" element={<PublicSharePage />} />
|
<Route path="/share/:shareCode" element={<PublicSharePage />} />
|
||||||
<Route path="/public/leaderboard" element={<PublicLeaderboardPage />} />
|
<Route path="/public/leaderboard" element={<PublicLeaderboardPage />} />
|
||||||
@@ -155,7 +192,7 @@ export function App() {
|
|||||||
path="/roundtable-dashboard"
|
path="/roundtable-dashboard"
|
||||||
element={<DashboardStandalonePage />}
|
element={<DashboardStandalonePage />}
|
||||||
/>
|
/>
|
||||||
<Route path="/page/*" element={<PageRoutes />} />
|
<Route path="/page/*" element={pageElement} />
|
||||||
<Route path="*" element={<NotFoundPage />} />
|
<Route path="*" element={<NotFoundPage />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</AppProviders>
|
</AppProviders>
|
||||||
|
|||||||
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 27 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M24.036,10l-.012,9.333" transform="translate(-16.016 -6.667)"/><path class="b" d="M10,24h9.333" transform="translate(-6.667 -16)"/></svg>
|
||||||
|
After Width: | Height: | Size: 401 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="36" height="36" viewBox="0 0 36 36"><defs><style>.a,.d{fill:#fff;}.a{opacity:0;}.b{fill:#da2331;}.c{fill:#0a54cf;}.e{fill:#1677ff;}.f{fill:#1e2433;}.g{fill:#10d6ff;}.h{fill:#ff8181;}.i{fill:none;stroke:#10d6ff;stroke-linecap:round;stroke-linejoin:round;}.j{filter:url(#d);}.k{filter:url(#a);}</style><filter id="a"><feOffset dx="4" input="SourceAlpha"/><feGaussianBlur stdDeviation="1" result="b"/><feFlood flood-opacity="0.161" result="c"/><feComposite operator="out" in="SourceGraphic" in2="b"/><feComposite operator="in" in="c"/><feComposite operator="in" in2="SourceGraphic"/></filter><filter id="d"><feOffset dx="-4" input="SourceAlpha"/><feGaussianBlur stdDeviation="1" result="e"/><feFlood flood-opacity="0.161" result="f"/><feComposite operator="out" in="SourceGraphic" in2="e"/><feComposite operator="in" in="f"/><feComposite operator="in" in2="SourceGraphic"/></filter></defs><g transform="translate(0 -1)"><rect class="a" width="36" height="36" transform="translate(0 1)"/><path class="b" d="M23.5,14.75a1.5,1.5,0,0,1-1.5-1.5V9.5a1.5,1.5,0,1,1,3,0v3.75A1.5,1.5,0,0,1,23.5,14.75Z" transform="translate(-5.5 -1)"/><g data-type="innerShadowGroup"><path class="c" d="M-2-2H1C3.206-2,5-.532,5,1.273V3.727C5,5.532,3.206,7,1,7H-2Z" transform="translate(28.66 19.541)"/><g class="k" transform="matrix(1, 0, 0, 1, 0, 1)"><path class="d" d="M-2-2H1C3.206-2,5-.532,5,1.273V3.727C5,5.532,3.206,7,1,7H-2Z" transform="translate(28.66 18.54)"/></g></g><g data-type="innerShadowGroup"><path class="c" d="M5-2H2C-.206-2-2-.532-2,1.273V3.727C-2,5.532-.206,7,2,7H5Z" transform="translate(4.34 19.541)"/><g class="j" transform="matrix(1, 0, 0, 1, 0, 1)"><path class="d" d="M5-2H2C-.206-2-2-.532-2,1.273V3.727C-2,5.532-.206,7,2,7H5Z" transform="translate(4.34 18.54)"/></g></g><path class="e" d="M5.5-2H16a7.508,7.508,0,0,1,7.5,7.5V13A7.508,7.508,0,0,1,16,20.5H5.5A7.508,7.508,0,0,1-2,13V5.5A7.508,7.508,0,0,1,5.5-2Z" transform="translate(7.25 13.5)"/><path class="f" d="M5.25,0h9A5.25,5.25,0,0,1,19.5,5.25V7.5a5.25,5.25,0,0,1-5.25,5.25h-9A5.25,5.25,0,0,1,0,7.5V5.25A5.25,5.25,0,0,1,5.25,0Z" transform="translate(8.25 15.25)"/><circle class="g" cx="1.5" cy="1.5" r="1.5" transform="translate(21 19)"/><circle class="g" cx="1.5" cy="1.5" r="1.5" transform="translate(12 19)"/><path class="d" d="M24,10v3.75" transform="translate(-6 -1.5)"/><circle class="h" cx="3" cy="3" r="3" transform="translate(15 4)"/><path class="i" d="M44,28.667a3.367,3.367,0,0,0,1.922.412,2.841,2.841,0,0,0,1.828-.412" transform="translate(-27.875 -5.017)"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96"><defs><style>.a{fill:#fff;opacity:0;}.b,.c{fill:none;stroke:#006efe;stroke-width:6px;}.b{stroke-linecap:round;stroke-linejoin:round;}</style></defs><g transform="translate(0 1)"><rect class="a" width="96" height="96" transform="translate(0 -1)"/><path class="b" d="M47,67H38L18,77V67H4V7H84V29" transform="translate(4 8)"/><circle class="c" cx="12" cy="12" r="12" transform="translate(56 45)"/><path class="b" d="M39,32l10,8" transform="translate(39 33)"/><path class="b" d="M12,15H24" transform="translate(12 16)"/><path class="b" d="M12,21H36" transform="translate(12 22)"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 670 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="11" viewBox="0 0 13 11"><defs><style>.a{stroke:rgba(0,0,0,0);stroke-miterlimit:10;fill:url(#a);}</style><linearGradient id="a" x1="0.277" y1="0.03" x2="0.725" y2="1.083" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#92eeff"/><stop offset="1" stop-color="#00c7ff"/></linearGradient></defs><path class="a" d="M1,10A1,1,0,1,1,1,8H6a1,1,0,0,1,0,2Zm9.8-.482L7.848,7.361A.445.445,0,0,1,7.661,7a.46.46,0,0,1,.187-.366L10.8,4.481a.45.45,0,0,1,.716.365V9.152a.44.44,0,0,1-.131.317.445.445,0,0,1-.322.136A.454.454,0,0,1,10.8,9.518ZM1,6A1,1,0,1,1,1,4H6A1,1,0,0,1,6,6ZM1,2A1,1,0,1,1,1,0H11a1,1,0,1,1,0,2Z" transform="translate(0.5 0.5)"/></svg>
|
||||||
|
After Width: | Height: | Size: 753 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="13" height="11" viewBox="0 0 13 11"><defs><style>.a{fill:url(#a);}.b{fill:url(#b);}</style><linearGradient id="a" x1="0.023" x2="1" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#92eeff" stop-opacity="0.302"/><stop offset="1" stop-color="#00c7ff" stop-opacity="0.302"/></linearGradient><linearGradient id="b" x1="0.023" x2="1" y2="1" gradientUnits="objectBoundingBox"><stop offset="0" stop-color="#92eeff"/><stop offset="1" stop-color="#00c7ff"/></linearGradient></defs><path class="a" d="M5.5,0,11,8H0Z" transform="translate(13) rotate(90)"/><path class="b" d="M5.5,0,11,8H0Z" transform="translate(8) rotate(90)"/></svg>
|
||||||
|
After Width: | Height: | Size: 735 B |
@@ -0,0 +1,12 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.hit { fill: rgba(255, 255, 255, 0.8); opacity: 0; }
|
||||||
|
.mark { fill: #fff; }
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<g transform="translate(-2434.135 -67.941)">
|
||||||
|
<rect class="hit" width="12" height="12" transform="translate(2434.135 67.941)"/>
|
||||||
|
<path class="mark" d="M.885,0,0,.885,3.692,4.577,4.135,5l.442-.423L8.269.885,7.385,0,4.135,3.25Z" transform="translate(2436 71.942)"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 501 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b,.c{fill:none;stroke:#fff;stroke-linejoin:round;}.b{stroke-linecap:round;}</style></defs><g transform="translate(-1)"><rect class="a" width="16" height="16" transform="translate(1)"/><path class="b" d="M7,42H19" transform="translate(-4 -28)"/><path class="b" d="M0,0H3" transform="translate(9.848 3.848) rotate(45)"/><path class="c" d="M11,12.907v2.427h2.439l6.894-6.9L17.9,6Z" transform="translate(-6.667 -4)"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 545 B |
@@ -0,0 +1,14 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.background { fill: none; }
|
||||||
|
.mark { stroke: rgba(0, 0, 0, 0); stroke-miterlimit: 10; fill: url(#gradient); }
|
||||||
|
</style>
|
||||||
|
<linearGradient id="gradient" x1="0.277" y1="0.03" x2="0.725" y2="1.083" gradientUnits="objectBoundingBox">
|
||||||
|
<stop offset="0" stop-color="#a2e1f9"/>
|
||||||
|
<stop offset="1" stop-color="#45c3f3"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect class="background" width="16" height="16"/>
|
||||||
|
<path class="mark" d="M14554.5,10202.5a1,1,0,1,1,0-2h5a1,1,0,0,1,0,2Zm9.8-.482-2.95-2.157a.445.445,0,0,1-.187-.361.46.46,0,0,1,.187-.366l2.95-2.152a.45.45,0,0,1,.716.365v4.307a.44.44,0,0,1-.131.317.445.445,0,0,1-.322.136A.454.454,0,0,1,14564.3,10202.019Zm-9.8-3.521a1,1,0,1,1,0-2h5a1,1,0,1,1,0,2Zm0-4a1,1,0,1,1,0-2h10a1,1,0,1,1,0,2Z" transform="translate(-14551.5 -10189.5)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 913 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:rgba(255,255,255,0.8);}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M10,1.5A1.5,1.5,0,1,1,11.5,3,1.5,1.5,0,0,1,10,1.5Zm-5,0A1.5,1.5,0,1,1,6.5,3,1.5,1.5,0,0,1,5,1.5Zm-5,0A1.5,1.5,0,1,1,1.5,3,1.5,1.5,0,0,1,0,1.5Z" transform="translate(1.498 6.5)"/></svg>
|
||||||
|
After Width: | Height: | Size: 410 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:rgba(85,166,254,0.6);}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M12.715,13.421,9.588,10.294a5.841,5.841,0,1,1,.707-.707l3.128,3.128a.5.5,0,0,1-.708.706ZM1,5.833A4.833,4.833,0,1,0,5.834,1,4.838,4.838,0,0,0,1,5.833Z" transform="translate(1.334 1.216)"/></svg>
|
||||||
|
After Width: | Height: | Size: 418 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;}</style></defs><path class="a" d="M14.488.053.824,4.256a1.167,1.167,0,0,0-.285,2.1L4.576,8.936a1.167,1.167,0,0,0,1.382-.092L11,4.593A.292.292,0,0,1,11.408,5L7.156,10.043a1.167,1.167,0,0,0-.091,1.382l2.58,4.036a1.168,1.168,0,0,0,2.1-.286l4.2-13.663A1.167,1.167,0,0,0,14.488.053Z" transform="translate(0)"/></svg>
|
||||||
|
After Width: | Height: | Size: 422 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16.131" height="16" viewBox="0 0 16.131 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#97edff;stroke-linecap:round;stroke-linejoin:round;}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M6,30V34.12H18.361V30" transform="translate(-2.73 -19.994)"/><path class="b" d="M21.181,9.09,18.09,6,15,9.09" transform="translate(-8.64 -4.235)"/><path class="b" d="M23.992,14.241V6" transform="translate(-14.544 -4.235)"/></svg>
|
||||||
|
After Width: | Height: | Size: 504 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b,.c{fill:none;stroke:#346fb1;stroke-linejoin:round;}.c{stroke-linecap:round;}</style></defs><rect class="a" width="16" height="16"/><path class="b" d="M10.667,17.333A6.667,6.667,0,1,0,4,10.667,6.667,6.667,0,0,0,10.667,17.333Z" transform="translate(-2.667 -2.667)"/><path class="c" d="M24.008,12v4l2.826,2.826" transform="translate(-16.005 -8)"/></svg>
|
||||||
|
After Width: | Height: | Size: 473 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(212,120,0,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
|
||||||
|
After Width: | Height: | Size: 320 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(207,19,34,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
|
||||||
|
After Width: | Height: | Size: 320 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(29,171,123,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
|
||||||
|
After Width: | Height: | Size: 321 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(132,85,230,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
|
||||||
|
After Width: | Height: | Size: 321 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(201,181,0,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
|
||||||
|
After Width: | Height: | Size: 320 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="95.001" height="26" viewBox="0 0 95.001 26"><defs><style>.a{fill:rgba(69,195,243,0.5);}</style></defs><path class="a" d="M250.146,407.92h91l-11.4,18.235c-2.679,4.26-5.243,7.5-11.211,7.765H246.146v-22A4,4,0,0,1,250.146,407.92Z" transform="translate(-246.146 -407.92)"/></svg>
|
||||||
|
After Width: | Height: | Size: 321 B |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#fff;opacity:0;}.b{fill:none;stroke:#346fb1;stroke-linecap:round;stroke-linejoin:round;}</style></defs><g transform="translate(0 -2)"><rect class="a" width="16" height="16" transform="translate(0 2)"/><path class="b" d="M17.333,8H4V18H9l1.667,1.667L12.333,18h5Z" transform="translate(-2.667 -3.667)"/><circle class="b" cx="1.667" cy="1.667" r="1.667" transform="translate(6.333 6.333)"/><path class="b" d="M21,26.667A2.848,2.848,0,0,0,18,24a2.848,2.848,0,0,0-3,2.667" transform="translate(-10 -14.333)"/></g></svg>
|
||||||
|
After Width: | Height: | Size: 618 B |
@@ -1,7 +1,8 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { cn } from "@/lib/utils";
|
import { copyTextToClipboard } from "@/core/clipboard";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
import { CheckIcon, CopyIcon } from "lucide-react";
|
import { CheckIcon, CopyIcon } from "lucide-react";
|
||||||
import {
|
import {
|
||||||
type ComponentProps,
|
type ComponentProps,
|
||||||
@@ -144,18 +145,13 @@ export const CodeBlockCopyButton = ({
|
|||||||
...props
|
...props
|
||||||
}: CodeBlockCopyButtonProps) => {
|
}: CodeBlockCopyButtonProps) => {
|
||||||
const [isCopied, setIsCopied] = useState(false);
|
const [isCopied, setIsCopied] = useState(false);
|
||||||
const { code } = useContext(CodeBlockContext);
|
const { code } = useContext(CodeBlockContext);
|
||||||
|
|
||||||
const copyToClipboard = async () => {
|
const copyToClipboard = async () => {
|
||||||
if (typeof window === "undefined" || !navigator?.clipboard?.writeText) {
|
try {
|
||||||
onError?.(new Error("Clipboard API not available"));
|
await copyTextToClipboard(code);
|
||||||
return;
|
setIsCopied(true);
|
||||||
}
|
onCopy?.();
|
||||||
|
|
||||||
try {
|
|
||||||
await navigator.clipboard.writeText(code);
|
|
||||||
setIsCopied(true);
|
|
||||||
onCopy?.();
|
|
||||||
setTimeout(() => setIsCopied(false), timeout);
|
setTimeout(() => setIsCopied(false), timeout);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
onError?.(error as Error);
|
onError?.(error as Error);
|
||||||
|
|||||||
@@ -846,7 +846,10 @@ export const PromptInput = ({
|
|||||||
ref={formRef}
|
ref={formRef}
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<InputGroup>{children}</InputGroup>
|
{/* Do not rely on InputGroup's :has(textarea) selector here: Chrome
|
||||||
|
versions before 105 ignore :has(), retain h-9, and clip the whole
|
||||||
|
multi-line composer to a single row. */}
|
||||||
|
<InputGroup className="h-auto min-h-16">{children}</InputGroup>
|
||||||
</form>
|
</form>
|
||||||
</PromptInputValidationContext.Provider>
|
</PromptInputValidationContext.Provider>
|
||||||
);
|
);
|
||||||
@@ -873,16 +876,48 @@ export type PromptInputTextareaProps = ComponentProps<
|
|||||||
typeof InputGroupTextarea
|
typeof InputGroupTextarea
|
||||||
>;
|
>;
|
||||||
|
|
||||||
export const PromptInputTextarea = ({
|
export const PromptInputTextarea = ({
|
||||||
onChange,
|
onChange,
|
||||||
className,
|
onInput,
|
||||||
placeholder = "What would you like to know?",
|
className,
|
||||||
...props
|
placeholder = "What would you like to know?",
|
||||||
}: PromptInputTextareaProps) => {
|
...props
|
||||||
const controller = useOptionalPromptInputController();
|
}: PromptInputTextareaProps) => {
|
||||||
const attachments = usePromptInputAttachments();
|
const controller = useOptionalPromptInputController();
|
||||||
const sanitizeIncomingFiles = usePromptInputValidation();
|
const attachments = usePromptInputAttachments();
|
||||||
const [isComposing, setIsComposing] = useState(false);
|
const sanitizeIncomingFiles = usePromptInputValidation();
|
||||||
|
const [isComposing, setIsComposing] = useState(false);
|
||||||
|
const textareaRef = useRef<HTMLTextAreaElement | null>(null);
|
||||||
|
|
||||||
|
const resizeForLegacyChrome = useCallback((textarea: HTMLTextAreaElement) => {
|
||||||
|
if (
|
||||||
|
typeof CSS !== "undefined" &&
|
||||||
|
typeof CSS.supports === "function" &&
|
||||||
|
CSS.supports("field-sizing", "content")
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Chrome 109 ignores field-sizing: content. Preserve the same 4rem–12rem
|
||||||
|
// autosize range used by min-h-16/max-h-48 instead of leaving the prompt
|
||||||
|
// stuck at its minimum height.
|
||||||
|
textarea.style.height = "auto";
|
||||||
|
const height = Math.max(64, Math.min(textarea.scrollHeight, 192));
|
||||||
|
textarea.style.height = `${height}px`;
|
||||||
|
textarea.style.overflowY = textarea.scrollHeight > 192 ? "auto" : "hidden";
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// onInput does not run for a controlled value filled by a suggested question
|
||||||
|
// or restored draft. Resize once after every render in legacy Chrome too.
|
||||||
|
useEffect(() => {
|
||||||
|
const textarea = textareaRef.current;
|
||||||
|
if (!textarea) return;
|
||||||
|
|
||||||
|
const frame = window.requestAnimationFrame(() => {
|
||||||
|
resizeForLegacyChrome(textarea);
|
||||||
|
});
|
||||||
|
return () => window.cancelAnimationFrame(frame);
|
||||||
|
}, [controller?.textInput.value, resizeForLegacyChrome]);
|
||||||
|
|
||||||
const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
|
const handleKeyDown: KeyboardEventHandler<HTMLTextAreaElement> = (e) => {
|
||||||
if (e.key === "Enter") {
|
if (e.key === "Enter") {
|
||||||
@@ -962,12 +997,18 @@ export const PromptInputTextarea = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<InputGroupTextarea
|
<InputGroupTextarea
|
||||||
className={cn("field-sizing-content max-h-48 min-h-16", className)}
|
className={cn("field-sizing-content max-h-48 min-h-16", className)}
|
||||||
name="message"
|
name="message"
|
||||||
|
ref={textareaRef}
|
||||||
|
rows={3}
|
||||||
onCompositionEnd={() => setIsComposing(false)}
|
onCompositionEnd={() => setIsComposing(false)}
|
||||||
onCompositionStart={() => setIsComposing(true)}
|
onCompositionStart={() => setIsComposing(true)}
|
||||||
onKeyDown={handleKeyDown}
|
onKeyDown={handleKeyDown}
|
||||||
|
onInput={(event) => {
|
||||||
|
resizeForLegacyChrome(event.currentTarget);
|
||||||
|
onInput?.(event);
|
||||||
|
}}
|
||||||
onPaste={handlePaste}
|
onPaste={handlePaste}
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
{...props}
|
{...props}
|
||||||
|
|||||||
@@ -26,6 +26,7 @@ import {
|
|||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { getStoredAuth } from "@/core/auth";
|
import { getStoredAuth } from "@/core/auth";
|
||||||
|
import { readRuntimeEnv } from "@/env";
|
||||||
import { queryClient } from "@/components/query-client-provider";
|
import { queryClient } from "@/components/query-client-provider";
|
||||||
import { Checkbox } from "@/components/ui/checkbox";
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
import Empty from "./empty";
|
import Empty from "./empty";
|
||||||
@@ -303,11 +304,11 @@ const DocumentUploadPopupContent: FC<{
|
|||||||
const searchSpaceId = String(searchSpace?.id);
|
const searchSpaceId = String(searchSpace?.id);
|
||||||
|
|
||||||
// 从环境变量获取配置
|
// 从环境变量获取配置
|
||||||
const backendUrl = import.meta.env.VITE_AIPI_BACKENP_URL || "http://localhost:8001";
|
const backendUrl = readRuntimeEnv("VITE_AIPI_BACKENP_URL") || "http://localhost:8001";
|
||||||
const consumerUrl = import.meta.env.VITE_AIPI_CONSUMER_URL || "http://ch1.b.uat.4.cn/consumer";
|
const consumerUrl = readRuntimeEnv("VITE_AIPI_CONSUMER_URL") || "http://ch1.b.uat.4.cn/consumer";
|
||||||
const presentUrl = import.meta.env.VITE_AIPI_PRESENT_URL || "http://present.a.uat.4.cn/present/domain";
|
const presentUrl = readRuntimeEnv("VITE_AIPI_PRESENT_URL") || "http://present.a.uat.4.cn/present/domain";
|
||||||
const knowesUrl = import.meta.env.VITE_AIPI_KNOWES_URL || "http://ch1.b.uat.4.cn/knowes";
|
const knowesUrl = readRuntimeEnv("VITE_AIPI_KNOWES_URL") || "http://ch1.b.uat.4.cn/knowes";
|
||||||
const knowledgeUrl = import.meta.env.VITE_AIPI_KNOWLEDGE_URL || "http://chlib.b.uat.4.cn/knowlibrary";
|
const knowledgeUrl = readRuntimeEnv("VITE_AIPI_KNOWLEDGE_URL") || "http://chlib.b.uat.4.cn/knowlibrary";
|
||||||
|
|
||||||
const [searchText, setSearchText] = useState("");
|
const [searchText, setSearchText] = useState("");
|
||||||
const [searchValue, setSearchValue] = useState("");
|
const [searchValue, setSearchValue] = useState("");
|
||||||
@@ -405,8 +406,15 @@ const DocumentUploadPopupContent: FC<{
|
|||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
const data = await response.json() as { imported_count?: number };
|
const data = await response.json() as { imported_count?: number };
|
||||||
toast.success(`成功导入 ${data.imported_count || dataList.length} 个来源`);
|
toast.success(`成功导入 ${data.imported_count || dataList.length} 个来源`);
|
||||||
setListData([]);
|
onUploadComplete?.(
|
||||||
handleBatchDelete();
|
selectedSearchSources.map((s) => ({
|
||||||
|
id: undefined,
|
||||||
|
title: s.title,
|
||||||
|
task_id: undefined,
|
||||||
|
status: "success" as const,
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
onOpenChange(false);
|
||||||
} else {
|
} else {
|
||||||
const errorData = await response.json() as { detail?: string };
|
const errorData = await response.json() as { detail?: string };
|
||||||
toast.error(errorData.detail || "导入失败,请重试");
|
toast.error(errorData.detail || "导入失败,请重试");
|
||||||
@@ -826,7 +834,13 @@ const DocumentUploadPopupContent: FC<{
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{listData.length === 0 && <Empty />}
|
{isSearching ? (
|
||||||
|
<div className="flex items-center justify-center py-16">
|
||||||
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
listData.length === 0 && <Empty />
|
||||||
|
)}
|
||||||
{searchType === "human" && (
|
{searchType === "human" && (
|
||||||
<div className="bg-white p-[10px] grid grid-cols-5 gap-[10px]">
|
<div className="bg-white p-[10px] grid grid-cols-5 gap-[10px]">
|
||||||
{listData.map((item: listDataItem, index: number) => {
|
{listData.map((item: listDataItem, index: number) => {
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ import { Button } from "@/components/ui/button";
|
|||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
import { getStoredAuth } from "@/core/auth";
|
import { getStoredAuth } from "@/core/auth";
|
||||||
import { authenticatedFetch } from "@/components/assistant-ui/document-upload-popup";
|
import { authenticatedFetch } from "@/components/assistant-ui/document-upload-popup";
|
||||||
|
import { readRuntimeEnv } from "@/env";
|
||||||
|
|
||||||
|
|
||||||
interface NetworkActorProps {
|
interface NetworkActorProps {
|
||||||
@@ -186,9 +187,9 @@ export function NetworkActor({ inputValue, searchSpaceId, onSuccess }: NetworkAc
|
|||||||
const [actorCount, setActorCount] = useState<number>(0);
|
const [actorCount, setActorCount] = useState<number>(0);
|
||||||
const [directionType, setDirectionType] = useState<string>('TW');
|
const [directionType, setDirectionType] = useState<string>('TW');
|
||||||
const directionValue = useRef<string>('TW');
|
const directionValue = useRef<string>('TW');
|
||||||
const consumerUrl = import.meta.env.VITE_AIPI_CONSUMER_URL || 'https://ch1.b.uat.4.cn/consumer';
|
const consumerUrl = readRuntimeEnv("VITE_AIPI_CONSUMER_URL") || 'https://ch1.b.uat.4.cn/consumer';
|
||||||
const backendUrl = typeof window !== 'undefined'
|
const backendUrl = typeof window !== 'undefined'
|
||||||
? (import.meta.env.VITE_BACKEND_BASE_URL || 'http://localhost:8001')
|
? (readRuntimeEnv("VITE_BACKEND_BASE_URL") || 'http://localhost:8001')
|
||||||
: 'http://localhost:8001';
|
: 'http://localhost:8001';
|
||||||
const [selectedSearchSources, setSelectedSearchSources] = useState<UserDataItem[]>([]);
|
const [selectedSearchSources, setSelectedSearchSources] = useState<UserDataItem[]>([]);
|
||||||
const [isImporting, setIsImporting] = useState(false);
|
const [isImporting, setIsImporting] = useState(false);
|
||||||
@@ -545,7 +546,12 @@ export function NetworkActor({ inputValue, searchSpaceId, onSuccess }: NetworkAc
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="p-[10px]">
|
<div className="p-[10px]">
|
||||||
<div className="grid grid-cols-4 gap-[10px] user-list">
|
{isSearching ? (
|
||||||
|
<div className="flex items-center justify-center py-16">
|
||||||
|
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
<div className={`grid grid-cols-4 gap-[10px] user-list${isSearching ? ' hidden' : ''}`}>
|
||||||
{userList.map((item, index) => (
|
{userList.map((item, index) => (
|
||||||
<div key={index} className="user-item p-[10px] relative">
|
<div key={index} className="user-item p-[10px] relative">
|
||||||
<div className="absolute top-[5px] right-[10px]">
|
<div className="absolute top-[5px] right-[10px]">
|
||||||
|
|||||||
@@ -508,8 +508,9 @@ export default function ProgressiveSkillsAnimation() {
|
|||||||
"deploying",
|
"deploying",
|
||||||
"done",
|
"done",
|
||||||
].includes(phase) && (
|
].includes(phase) && (
|
||||||
<div className="text-base text-zinc-300">
|
<div className="flex items-center gap-2 text-base text-zinc-300">
|
||||||
<span className="text-purple-400">✨</span> Found 3 skills
|
<Sparkles size={16} className="text-purple-400" />
|
||||||
|
<span>Found 3 skills</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
@@ -526,8 +527,9 @@ export default function ProgressiveSkillsAnimation() {
|
|||||||
].includes(phase) && (
|
].includes(phase) && (
|
||||||
<div className="mt-4">
|
<div className="mt-4">
|
||||||
<hr className="mb-3 border-zinc-700" />
|
<hr className="mb-3 border-zinc-700" />
|
||||||
<div className="mb-3 text-zinc-300">
|
<div className="mb-3 inline-flex items-center gap-2 text-zinc-300">
|
||||||
🔬 Researching...
|
<Search size={16} className="text-blue-400" />
|
||||||
|
<span>Researching...</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="mb-3 space-y-2">
|
<div className="mb-3 space-y-2">
|
||||||
{/* Loading SKILL.md */}
|
{/* Loading SKILL.md */}
|
||||||
@@ -623,7 +625,10 @@ export default function ProgressiveSkillsAnimation() {
|
|||||||
className="mt-4"
|
className="mt-4"
|
||||||
>
|
>
|
||||||
<hr className="mb-3 border-zinc-700" />
|
<hr className="mb-3 border-zinc-700" />
|
||||||
<div className="mb-3 text-zinc-300">🔨 Building...</div>
|
<div className="mb-3 inline-flex items-center gap-2 text-zinc-300">
|
||||||
|
<FileText size={16} className="text-zinc-400" />
|
||||||
|
<span>Building...</span>
|
||||||
|
</div>
|
||||||
<div className="mb-3 flex items-center gap-2 pl-4 text-zinc-400">
|
<div className="mb-3 flex items-center gap-2 pl-4 text-zinc-400">
|
||||||
<FileText size={16} />
|
<FileText size={16} />
|
||||||
<span>Loading frontend-design/SKILL.md...</span>
|
<span>Loading frontend-design/SKILL.md...</span>
|
||||||
@@ -653,7 +658,10 @@ export default function ProgressiveSkillsAnimation() {
|
|||||||
className="mt-4"
|
className="mt-4"
|
||||||
>
|
>
|
||||||
<hr className="mb-3 border-zinc-700" />
|
<hr className="mb-3 border-zinc-700" />
|
||||||
<div className="mb-3 text-zinc-300">🚀 Deploying...</div>
|
<div className="mb-3 inline-flex items-center gap-2 text-zinc-300">
|
||||||
|
<Terminal size={16} className="text-zinc-400" />
|
||||||
|
<span>Deploying...</span>
|
||||||
|
</div>
|
||||||
<div className="mb-3 space-y-2">
|
<div className="mb-3 space-y-2">
|
||||||
<div className="flex items-center gap-2 pl-4 text-zinc-400">
|
<div className="flex items-center gap-2 pl-4 text-zinc-400">
|
||||||
<FileText size={16} />
|
<FileText size={16} />
|
||||||
@@ -676,8 +684,9 @@ export default function ProgressiveSkillsAnimation() {
|
|||||||
animate={{ opacity: 1, scale: 1 }}
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
className="mt-4 rounded-xl border border-green-500/30 bg-green-500/10 p-4"
|
className="mt-4 rounded-xl border border-green-500/30 bg-green-500/10 p-4"
|
||||||
>
|
>
|
||||||
<div className="text-lg font-medium text-green-500">
|
<div className="inline-flex items-center gap-2 text-lg font-medium text-green-500">
|
||||||
✅ Live at biotech-startup.vercel.app
|
<Check size={18} />
|
||||||
|
<span>Live at biotech-startup.vercel.app</span>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -35,27 +35,27 @@ export function SandboxSection({ className }: { className?: string }) {
|
|||||||
$ pip install -r requirements.txt
|
$ pip install -r requirements.txt
|
||||||
</TypingAnimation>
|
</TypingAnimation>
|
||||||
<AnimatedSpan delay={2000} className="text-green-500">
|
<AnimatedSpan delay={2000} className="text-green-500">
|
||||||
✔ Installed pygame
|
[ok] Installed pygame
|
||||||
</AnimatedSpan>
|
</AnimatedSpan>
|
||||||
|
|
||||||
<TypingAnimation delay={2400}>
|
<TypingAnimation delay={2400}>
|
||||||
$ write game.py --lines 156
|
$ write game.py --lines 156
|
||||||
</TypingAnimation>
|
</TypingAnimation>
|
||||||
<AnimatedSpan delay={3200} className="text-blue-500">
|
<AnimatedSpan delay={3200} className="text-blue-500">
|
||||||
✔ Written 156 lines
|
[ok] Written 156 lines
|
||||||
</AnimatedSpan>
|
</AnimatedSpan>
|
||||||
|
|
||||||
<TypingAnimation delay={3600}>
|
<TypingAnimation delay={3600}>
|
||||||
$ python game.py --test
|
$ python game.py --test
|
||||||
</TypingAnimation>
|
</TypingAnimation>
|
||||||
<AnimatedSpan delay={4200} className="text-green-500">
|
<AnimatedSpan delay={4200} className="text-green-500">
|
||||||
✔ All sprites loaded
|
[ok] All sprites loaded
|
||||||
</AnimatedSpan>
|
</AnimatedSpan>
|
||||||
<AnimatedSpan delay={4500} className="text-green-500">
|
<AnimatedSpan delay={4500} className="text-green-500">
|
||||||
✔ Physics engine OK
|
[ok] Physics engine OK
|
||||||
</AnimatedSpan>
|
</AnimatedSpan>
|
||||||
<AnimatedSpan delay={4800} className="text-green-500">
|
<AnimatedSpan delay={4800} className="text-green-500">
|
||||||
✔ 60 FPS stable
|
[ok] 60 FPS stable
|
||||||
</AnimatedSpan>
|
</AnimatedSpan>
|
||||||
|
|
||||||
{/* Scene 2: Data Analysis */}
|
{/* Scene 2: Data Analysis */}
|
||||||
|
|||||||
@@ -8,6 +8,17 @@
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* `?hideHeader=1`: keep the menu rail, but let it occupy the Header's space. */
|
||||||
|
.sidebar-contnet--header-hidden {
|
||||||
|
top: 0;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-contnet--header-hidden .item-nav-content {
|
||||||
|
height: calc(100vh - 20px);
|
||||||
|
min-height: calc(100vh - 20px);
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-contents {
|
.sidebar-contents {
|
||||||
width: 98px;
|
width: 98px;
|
||||||
min-height: calc(100% - 20px);
|
min-height: calc(100% - 20px);
|
||||||
@@ -564,7 +575,59 @@
|
|||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Ice blue has a deliberately light banner. Keep top-level navigation and
|
||||||
|
its active marker dark enough to remain readable against #9BCEF1. */
|
||||||
|
html.iceblue .light-topnav-item {
|
||||||
|
color: rgba(24, 50, 74, 0.78);
|
||||||
|
}
|
||||||
|
|
||||||
|
html.iceblue .light-topnav-item:hover,
|
||||||
|
html.iceblue .light-topnav-item--active,
|
||||||
|
html.iceblue .light-topnav-item--active:hover {
|
||||||
|
color: #18324a;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.iceblue .light-topnav-item--active::after {
|
||||||
|
background: #3d6e96;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pale yellow has the same light-banner contrast requirement as ice blue. */
|
||||||
|
html.lightyellow .light-topnav-item {
|
||||||
|
color: rgba(48, 61, 35, 0.78);
|
||||||
|
}
|
||||||
|
|
||||||
|
html.lightyellow .light-topnav-item:hover,
|
||||||
|
html.lightyellow .light-topnav-item--active,
|
||||||
|
html.lightyellow .light-topnav-item--active:hover {
|
||||||
|
color: #303d23;
|
||||||
|
}
|
||||||
|
|
||||||
|
html.lightyellow .light-topnav-item--active::after {
|
||||||
|
background: #4c6330;
|
||||||
|
}
|
||||||
|
|
||||||
/* ── 侧边栏:二级图标卡片列(96px)+ 右侧三级列(展开时整体变宽,带过渡)──────── */
|
/* ── 侧边栏:二级图标卡片列(96px)+ 右侧三级列(展开时整体变宽,带过渡)──────── */
|
||||||
|
/* Runtime themes use their configurable header gradient rather than the
|
||||||
|
red/blue banner artwork. Navigation copy follows an automatically chosen
|
||||||
|
contrasting foreground so both pale and deep brand colours remain legible. */
|
||||||
|
html[data-custom-theme="true"] .light-topnav-item,
|
||||||
|
html[data-custom-theme="true"] .top-submenu-item {
|
||||||
|
color: var(--navigation-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-custom-theme="true"] .light-topnav-item:hover,
|
||||||
|
html[data-custom-theme="true"] .light-topnav-item--active,
|
||||||
|
html[data-custom-theme="true"] .light-topnav-item--active:hover,
|
||||||
|
html[data-custom-theme="true"] .top-submenu-item:hover,
|
||||||
|
html[data-custom-theme="true"] .top-submenu-item--active {
|
||||||
|
color: var(--navigation-foreground);
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-custom-theme="true"] .light-topnav-item--active::after {
|
||||||
|
background: var(--navigation-foreground);
|
||||||
|
}
|
||||||
|
|
||||||
.light-sidebar {
|
.light-sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -587,6 +650,12 @@
|
|||||||
width: 236px;
|
width: 236px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* `?hideHeader=1`: preserve the light sidebar while removing only Header. */
|
||||||
|
.light-sidebar--header-hidden {
|
||||||
|
top: 0;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
/* 二级列:固定 96px,竖排图标卡片 + 底部设置 */
|
/* 二级列:固定 96px,竖排图标卡片 + 底部设置 */
|
||||||
.light-sidebar__primary {
|
.light-sidebar__primary {
|
||||||
flex: 0 0 96px;
|
flex: 0 0 96px;
|
||||||
|
|||||||
@@ -17,9 +17,15 @@ type PageSidebarDarkProps = {
|
|||||||
/** 是否收起(true 时只渲染左下角浮动入口,sidebar 主体隐藏) */
|
/** 是否收起(true 时只渲染左下角浮动入口,sidebar 主体隐藏) */
|
||||||
collapsed: boolean;
|
collapsed: boolean;
|
||||||
onToggleCollapsed: () => void;
|
onToggleCollapsed: () => void;
|
||||||
|
/** 全局 Header 隐藏时,侧边栏从视口顶部开始占满高度。 */
|
||||||
|
headerHidden?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function PageSidebarDark({ collapsed, onToggleCollapsed }: PageSidebarDarkProps) {
|
export function PageSidebarDark({
|
||||||
|
collapsed,
|
||||||
|
onToggleCollapsed,
|
||||||
|
headerHidden = false,
|
||||||
|
}: PageSidebarDarkProps) {
|
||||||
const isAdmin = getStoredAuth()?.system_role === "admin";
|
const isAdmin = getStoredAuth()?.system_role === "admin";
|
||||||
const visibleMenuItems = useSidebarMenuItems(!!isAdmin);
|
const visibleMenuItems = useSidebarMenuItems(!!isAdmin);
|
||||||
const inWujieEnv = isWujieEnv();
|
const inWujieEnv = isWujieEnv();
|
||||||
@@ -196,7 +202,7 @@ export function PageSidebarDark({ collapsed, onToggleCollapsed }: PageSidebarDar
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
// collapsed 状态:sidebar 主体完全消失(包括占据的宽度),只渲染左下角浮动入口
|
// 收起时主侧栏不占宽度,保留左下角入口以便随时恢复。
|
||||||
if (collapsed) {
|
if (collapsed) {
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
@@ -207,13 +213,17 @@ export function PageSidebarDark({ collapsed, onToggleCollapsed }: PageSidebarDar
|
|||||||
onClick={onToggleCollapsed}
|
onClick={onToggleCollapsed}
|
||||||
>
|
>
|
||||||
<PanelLeftOpen className="sidebar-collapse-btn__icon" aria-hidden="true" />
|
<PanelLeftOpen className="sidebar-collapse-btn__icon" aria-hidden="true" />
|
||||||
<span className="sidebar-collapse-btn__label">收起面板</span>
|
<span className="sidebar-collapse-btn__label">展开面板</span>
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<aside className={`sidebar-contnet ${inWujieEnv ? "" : "sidebar-contnet--top-submenu"}`}>
|
<aside
|
||||||
|
className={`sidebar-contnet ${inWujieEnv ? "" : "sidebar-contnet--top-submenu"} ${
|
||||||
|
headerHidden ? "sidebar-contnet--header-hidden" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
<div className="sidebar-contents">
|
<div className="sidebar-contents">
|
||||||
{sidebarMenuItemsToRender.map((item) => (
|
{sidebarMenuItemsToRender.map((item) => (
|
||||||
<div
|
<div
|
||||||
@@ -244,7 +254,6 @@ export function PageSidebarDark({ collapsed, onToggleCollapsed }: PageSidebarDar
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
{/* 底部"收起面板"按钮:独立样式,mt-auto 推到底 */}
|
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
title="收起侧边栏"
|
title="收起侧边栏"
|
||||||
|
|||||||
@@ -7,10 +7,13 @@ import {
|
|||||||
ChevronsUpDown,
|
ChevronsUpDown,
|
||||||
Folder,
|
Folder,
|
||||||
FolderOpen,
|
FolderOpen,
|
||||||
|
Gauge,
|
||||||
ListTree,
|
ListTree,
|
||||||
MousePointerClick,
|
MousePointerClick,
|
||||||
|
BriefcaseBusiness,
|
||||||
Settings,
|
Settings,
|
||||||
ShieldAlert,
|
ShieldAlert,
|
||||||
|
ShieldCheck,
|
||||||
User,
|
User,
|
||||||
Wrench,
|
Wrench,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
@@ -47,6 +50,8 @@ import "@/components/page-sdebar.css";
|
|||||||
type PageSidebarProps = {
|
type PageSidebarProps = {
|
||||||
collapsed: boolean;
|
collapsed: boolean;
|
||||||
onToggleCollapsed: () => void;
|
onToggleCollapsed: () => void;
|
||||||
|
/** Global Header is hidden but this sidebar remains available. */
|
||||||
|
headerHidden?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
type SettingsSection = "account" | "appearance" | "memory" | "tools" | "about";
|
type SettingsSection = "account" | "appearance" | "memory" | "tools" | "about";
|
||||||
@@ -77,23 +82,28 @@ const findFirstRoutePath = (items?: MenuItem[]): string | null => {
|
|||||||
* - wujie 嵌入环境:顶栏被宿主隐藏,一级导航无处安放,故回落到原手风琴整树菜单
|
* - wujie 嵌入环境:顶栏被宿主隐藏,一级导航无处安放,故回落到原手风琴整树菜单
|
||||||
* (保证嵌入模式下所有层级仍可达,零回归)。
|
* (保证嵌入模式下所有层级仍可达,零回归)。
|
||||||
*/
|
*/
|
||||||
export function PageSidebar({ collapsed, onToggleCollapsed }: PageSidebarProps) {
|
export function PageSidebar({
|
||||||
|
collapsed,
|
||||||
|
onToggleCollapsed,
|
||||||
|
headerHidden = false,
|
||||||
|
}: PageSidebarProps) {
|
||||||
if (isWujieEnv()) {
|
if (isWujieEnv()) {
|
||||||
return (
|
return (
|
||||||
<LegacyAccordionSidebar
|
<LegacyAccordionSidebar
|
||||||
collapsed={collapsed}
|
collapsed={collapsed}
|
||||||
onToggleCollapsed={onToggleCollapsed}
|
onToggleCollapsed={onToggleCollapsed}
|
||||||
|
headerHidden={headerHidden}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return <SecondaryNavSidebar />;
|
return <SecondaryNavSidebar headerHidden={headerHidden} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 浅色二级导航侧边栏(图标卡片,红/蓝主题色经 --brand-* 变量自动切换)。
|
* 浅色二级导航侧边栏(图标卡片,红/蓝主题色经 --brand-* 变量自动切换)。
|
||||||
* 浅色模式不支持侧边栏收起,故无收起按钮、不接收 collapsed 相关 props。
|
* 浅色模式不支持侧边栏收起,故无收起按钮、不接收 collapsed 相关 props。
|
||||||
*/
|
*/
|
||||||
function SecondaryNavSidebar() {
|
function SecondaryNavSidebar({ headerHidden }: { headerHidden: boolean }) {
|
||||||
const isAdmin = getStoredAuth()?.system_role === "admin";
|
const isAdmin = getStoredAuth()?.system_role === "admin";
|
||||||
const visibleMenuItems = useSidebarMenuItems(!!isAdmin);
|
const visibleMenuItems = useSidebarMenuItems(!!isAdmin);
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
@@ -148,7 +158,11 @@ function SecondaryNavSidebar() {
|
|||||||
open={notificationOpen}
|
open={notificationOpen}
|
||||||
onOpenChange={setNotificationOpen}
|
onOpenChange={setNotificationOpen}
|
||||||
/>
|
/>
|
||||||
<aside className={`light-sidebar ${expanded ? "light-sidebar--expanded" : ""}`}>
|
<aside
|
||||||
|
className={`light-sidebar ${expanded ? "light-sidebar--expanded" : ""} ${
|
||||||
|
headerHidden ? "light-sidebar--header-hidden" : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
{/* 一级列:二级图标卡片 + 底部设置 */}
|
{/* 一级列:二级图标卡片 + 底部设置 */}
|
||||||
<div className="light-sidebar__primary">
|
<div className="light-sidebar__primary">
|
||||||
<nav className="light-sidebar__list" aria-label="二级菜单">
|
<nav className="light-sidebar__list" aria-label="二级菜单">
|
||||||
@@ -222,6 +236,30 @@ function SecondaryNavSidebar() {
|
|||||||
按钮管理
|
按钮管理
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
)}
|
)}
|
||||||
|
{isAdmin && (
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={() => navigate("/page/strategy/admin/position-roles")}
|
||||||
|
>
|
||||||
|
<BriefcaseBusiness className="size-4" />
|
||||||
|
岗位角色配置
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
{isAdmin && (
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={() => navigate("/page/strategy/admin/login-whitelist")}
|
||||||
|
>
|
||||||
|
<ShieldCheck className="size-4" />
|
||||||
|
白名单管理
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
{isAdmin && (
|
||||||
|
<DropdownMenuItem
|
||||||
|
onClick={() => navigate("/page/strategy/settings/model-concurrency")}
|
||||||
|
>
|
||||||
|
<Gauge className="size-4" />
|
||||||
|
模型并发限制
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
{canManageSensitiveWords() && (
|
{canManageSensitiveWords() && (
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
onClick={() => navigate("/page/strategy/admin/sensitive-words")}
|
onClick={() => navigate("/page/strategy/admin/sensitive-words")}
|
||||||
@@ -269,6 +307,7 @@ function SecondaryNavSidebar() {
|
|||||||
function LegacyAccordionSidebar({
|
function LegacyAccordionSidebar({
|
||||||
collapsed,
|
collapsed,
|
||||||
onToggleCollapsed,
|
onToggleCollapsed,
|
||||||
|
headerHidden,
|
||||||
}: PageSidebarProps) {
|
}: PageSidebarProps) {
|
||||||
const { theme } = useTheme();
|
const { theme } = useTheme();
|
||||||
const isDark = theme === "dark";
|
const isDark = theme === "dark";
|
||||||
@@ -420,7 +459,9 @@ function LegacyAccordionSidebar({
|
|||||||
onOpenChange={setNotificationOpen}
|
onOpenChange={setNotificationOpen}
|
||||||
/>
|
/>
|
||||||
<aside
|
<aside
|
||||||
className={`fixed left-0 top-16 z-40 flex h-[calc(100vh-4rem)] flex-col overflow-hidden shadow-sm theme-transition transition-all duration-300 ${
|
className={`fixed left-0 z-40 flex flex-col overflow-hidden shadow-sm theme-transition transition-all duration-300 ${
|
||||||
|
headerHidden ? "top-0 h-screen" : "top-16 h-[calc(100vh-4rem)]"
|
||||||
|
} ${
|
||||||
isDark
|
isDark
|
||||||
? "border-r border-blue-800/30 bg-slate-900"
|
? "border-r border-blue-800/30 bg-slate-900"
|
||||||
: "border-r border-red-100 bg-white"
|
: "border-r border-red-100 bg-white"
|
||||||
@@ -508,6 +549,18 @@ function LegacyAccordionSidebar({
|
|||||||
按钮管理
|
按钮管理
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
)}
|
)}
|
||||||
|
{isAdmin && (
|
||||||
|
<DropdownMenuItem onClick={() => navigate("/page/strategy/admin/position-roles")}>
|
||||||
|
<BriefcaseBusiness className="size-4" />
|
||||||
|
岗位角色配置
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
|
{isAdmin && (
|
||||||
|
<DropdownMenuItem onClick={() => navigate("/page/strategy/admin/login-whitelist")}>
|
||||||
|
<ShieldCheck className="size-4" />
|
||||||
|
白名单管理
|
||||||
|
</DropdownMenuItem>
|
||||||
|
)}
|
||||||
{canManageSensitiveWords() && (
|
{canManageSensitiveWords() && (
|
||||||
<DropdownMenuItem onClick={() => navigate("/page/strategy/admin/sensitive-words")}>
|
<DropdownMenuItem onClick={() => navigate("/page/strategy/admin/sensitive-words")}>
|
||||||
<ShieldAlert className="size-4" />
|
<ShieldAlert className="size-4" />
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ const buttonVariants = cva(
|
|||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default:
|
default:
|
||||||
"cursor-pointer bg-primary text-primary-foreground hover:bg-primary/90",
|
"cursor-pointer bg-primary text-[var(--button-foreground,var(--primary-foreground))] hover:bg-primary/90",
|
||||||
destructive:
|
destructive:
|
||||||
"cursor-pointer bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
"cursor-pointer bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
outline:
|
outline:
|
||||||
|
|||||||
@@ -71,15 +71,17 @@ const DialogOverlay = React.forwardRef<
|
|||||||
|
|
||||||
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
|
||||||
|
|
||||||
const DialogContent = React.forwardRef<
|
const DialogContent = React.forwardRef<
|
||||||
React.ElementRef<typeof DialogPrimitive.Content>,
|
React.ElementRef<typeof DialogPrimitive.Content>,
|
||||||
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
|
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
|
||||||
showCloseButton?: boolean;
|
showCloseButton?: boolean;
|
||||||
}
|
/** Use when this dialog is opened from a higher-layer surface such as a Drawer. */
|
||||||
>(({ className, children, showCloseButton = true, ...props }, ref) => {
|
overlayClassName?: string;
|
||||||
return (
|
}
|
||||||
<DialogPortal data-slot="dialog-portal">
|
>(({ className, children, showCloseButton = true, overlayClassName, ...props }, ref) => {
|
||||||
<DialogOverlay />
|
return (
|
||||||
|
<DialogPortal data-slot="dialog-portal">
|
||||||
|
<DialogOverlay className={overlayClassName} />
|
||||||
<DialogPrimitive.Content
|
<DialogPrimitive.Content
|
||||||
ref={ref}
|
ref={ref}
|
||||||
data-slot="dialog-content"
|
data-slot="dialog-content"
|
||||||
|
|||||||
@@ -144,21 +144,24 @@ function InputGroupInput({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function InputGroupTextarea({
|
const InputGroupTextarea = React.forwardRef<
|
||||||
className,
|
HTMLTextAreaElement,
|
||||||
...props
|
React.ComponentProps<"textarea">
|
||||||
}: React.ComponentProps<"textarea">) {
|
>(function InputGroupTextarea({ className, ...props }, ref) {
|
||||||
return (
|
return (
|
||||||
<Textarea
|
<Textarea
|
||||||
data-slot="input-group-control"
|
data-slot="input-group-control"
|
||||||
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
|
"flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
});
|
||||||
|
|
||||||
|
InputGroupTextarea.displayName = "InputGroupTextarea";
|
||||||
|
|
||||||
export {
|
export {
|
||||||
InputGroup,
|
InputGroup,
|
||||||
|
|||||||
@@ -57,18 +57,21 @@ function useSidebarSafe() {
|
|||||||
return React.useContext(SidebarContext);
|
return React.useContext(SidebarContext);
|
||||||
}
|
}
|
||||||
|
|
||||||
function SidebarProvider({
|
function SidebarProvider({
|
||||||
defaultOpen = true,
|
defaultOpen = true,
|
||||||
open: openProp,
|
open: openProp,
|
||||||
onOpenChange: setOpenProp,
|
onOpenChange: setOpenProp,
|
||||||
className,
|
disableToggle = false,
|
||||||
|
className,
|
||||||
style,
|
style,
|
||||||
children,
|
children,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<"div"> & {
|
}: React.ComponentProps<"div"> & {
|
||||||
defaultOpen?: boolean;
|
defaultOpen?: boolean;
|
||||||
open?: boolean;
|
open?: boolean;
|
||||||
onOpenChange?: (open: boolean) => void;
|
onOpenChange?: (open: boolean) => void;
|
||||||
|
/** Keep a controlled deployment-level rail from being reopened by hotkeys. */
|
||||||
|
disableToggle?: boolean;
|
||||||
}) {
|
}) {
|
||||||
const isMobile = useIsMobile();
|
const isMobile = useIsMobile();
|
||||||
const [openMobile, setOpenMobile] = React.useState(false);
|
const [openMobile, setOpenMobile] = React.useState(false);
|
||||||
@@ -92,10 +95,11 @@ function SidebarProvider({
|
|||||||
[setOpenProp, open],
|
[setOpenProp, open],
|
||||||
);
|
);
|
||||||
|
|
||||||
// Helper to toggle the sidebar.
|
// Helper to toggle the sidebar.
|
||||||
const toggleSidebar = React.useCallback(() => {
|
const toggleSidebar = React.useCallback(() => {
|
||||||
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
|
if (disableToggle) return;
|
||||||
}, [isMobile, setOpen, setOpenMobile]);
|
return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
|
||||||
|
}, [disableToggle, isMobile, setOpen, setOpenMobile]);
|
||||||
|
|
||||||
// Adds a keyboard shortcut to toggle the sidebar.
|
// Adds a keyboard shortcut to toggle the sidebar.
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
|
|||||||
@@ -2,19 +2,28 @@ import * as React from "react";
|
|||||||
|
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
|
const Textarea = React.forwardRef<
|
||||||
return (
|
HTMLTextAreaElement,
|
||||||
<textarea
|
React.ComponentProps<"textarea">
|
||||||
data-slot="textarea"
|
>(function Textarea({ className, rows, ...props }, ref) {
|
||||||
className={cn(
|
// `field-sizing` is not available in older Chrome. Keep a native rows
|
||||||
"border-input placeholder:text-muted-foreground/60 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
// fallback so a multi-line editor never collapses into a single line.
|
||||||
|
return (
|
||||||
|
<textarea
|
||||||
|
data-slot="textarea"
|
||||||
|
ref={ref}
|
||||||
|
rows={rows ?? 3}
|
||||||
|
className={cn(
|
||||||
|
"border-input placeholder:text-muted-foreground/60 flex min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
"dark:border-[#1B477E] dark:bg-[#022248] dark:text-[#AACEFF] ",
|
"dark:border-[#1B477E] dark:bg-[#022248] dark:text-[#AACEFF] ",
|
||||||
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
});
|
||||||
|
|
||||||
|
Textarea.displayName = "Textarea";
|
||||||
|
|
||||||
export { Textarea };
|
export { Textarea };
|
||||||
@@ -3,7 +3,7 @@ export function EmptyDocumentState() {
|
|||||||
return (
|
return (
|
||||||
<div className="flex h-full items-center justify-center bg-white px-6 text-center dark:bg-slate-900">
|
<div className="flex h-full items-center justify-center bg-white px-6 text-center dark:bg-slate-900">
|
||||||
<div className="rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-10 py-12 sm:px-12 dark:border-slate-700 dark:bg-slate-800/50">
|
<div className="rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-10 py-12 sm:px-12 dark:border-slate-700 dark:bg-slate-800/50">
|
||||||
<div className="mb-4 text-[40px] leading-none">📚</div>
|
<div className="mb-4 text-[28px] font-semibold leading-none text-slate-500 dark:text-slate-300">文档</div>
|
||||||
<div className="mb-2 text-lg font-bold text-slate-700 dark:text-slate-200">
|
<div className="mb-2 text-lg font-bold text-slate-700 dark:text-slate-200">
|
||||||
选择一篇文档开始阅读
|
选择一篇文档开始阅读
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,189 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { BookOpen, ListTree } from "lucide-react";
|
||||||
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||||
|
|
||||||
|
import { MarkdownContent } from "@/components/workspace/messages/markdown-content";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { reasoningPlugins } from "@/core/streamdown";
|
||||||
|
import { createMarkdownAnchorResolver } from "@/core/utils/markdown";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
import "./wiki.css";
|
||||||
|
|
||||||
|
function stripMarkdownToText(markdown: string): string {
|
||||||
|
return markdown
|
||||||
|
.replace(/```[\s\S]*?```/g, " ")
|
||||||
|
.replace(/~~~[\s\S]*?~~~/g, " ")
|
||||||
|
.replace(/!\[[^\]]*\]\([^)]+\)/g, " ")
|
||||||
|
.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
|
||||||
|
.replace(/^#{1,6}\s+/gm, "")
|
||||||
|
.replace(/^[>\-*+\d.)\s]+/gm, "")
|
||||||
|
.replace(/[`*_~|]/g, "")
|
||||||
|
.replace(/<[^>]+>/g, " ")
|
||||||
|
.replace(/\s+/g, " ")
|
||||||
|
.trim();
|
||||||
|
}
|
||||||
|
|
||||||
|
function getMarkdownExcerpt(markdown: string): string {
|
||||||
|
const text = stripMarkdownToText(markdown);
|
||||||
|
if (!text) return "";
|
||||||
|
return text.length > 150 ? `${text.slice(0, 150)}...` : text;
|
||||||
|
}
|
||||||
|
|
||||||
|
function countReadableWords(markdown: string): number {
|
||||||
|
const text = stripMarkdownToText(markdown);
|
||||||
|
if (!text) return 0;
|
||||||
|
const cjk = text.match(/[\u4e00-\u9fff]/g)?.length ?? 0;
|
||||||
|
const words = text.replace(/[\u4e00-\u9fff]/g, " ").match(/[A-Za-z0-9]+/g)?.length ?? 0;
|
||||||
|
return cjk + words;
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectorForId(id: string): string {
|
||||||
|
const css = window.CSS;
|
||||||
|
if (css?.escape) return `#${css.escape(id)}`;
|
||||||
|
return `[id="${id.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"]`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ReportMarkdownView({
|
||||||
|
content,
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
badgeLabel = "报告阅读",
|
||||||
|
className,
|
||||||
|
compactHeader = false,
|
||||||
|
}: {
|
||||||
|
content: string;
|
||||||
|
title?: string;
|
||||||
|
subtitle?: string;
|
||||||
|
badgeLabel?: string;
|
||||||
|
className?: string;
|
||||||
|
compactHeader?: boolean;
|
||||||
|
}) {
|
||||||
|
const rootRef = useRef<HTMLDivElement>(null);
|
||||||
|
const anchorResolver = useMemo(() => createMarkdownAnchorResolver(content), [content]);
|
||||||
|
const headings = useMemo(
|
||||||
|
() => anchorResolver.headings.filter((item) => item.level >= 1 && item.level <= 3),
|
||||||
|
[anchorResolver],
|
||||||
|
);
|
||||||
|
const [activeHeadingId, setActiveHeadingId] = useState<string | null>(null);
|
||||||
|
const excerpt = useMemo(() => getMarkdownExcerpt(content), [content]);
|
||||||
|
const sectionCount = headings.length;
|
||||||
|
const wordCount = useMemo(() => countReadableWords(content), [content]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setActiveHeadingId(headings[0]?.id ?? null);
|
||||||
|
}, [headings]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const root = rootRef.current;
|
||||||
|
if (!root || headings.length === 0) return;
|
||||||
|
|
||||||
|
const targets = headings
|
||||||
|
.map((item) => root.querySelector<HTMLElement>(selectorForId(item.id)))
|
||||||
|
.filter((item): item is HTMLElement => !!item);
|
||||||
|
if (targets.length === 0) return;
|
||||||
|
|
||||||
|
const observer = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
const visible = entries
|
||||||
|
.filter((entry) => entry.isIntersecting)
|
||||||
|
.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0];
|
||||||
|
if (visible?.target.id) setActiveHeadingId(visible.target.id);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
root: root.closest("[data-radix-scroll-area-viewport]") ?? null,
|
||||||
|
rootMargin: "-96px 0px -65% 0px",
|
||||||
|
threshold: [0, 1],
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
targets.forEach((target) => observer.observe(target));
|
||||||
|
return () => observer.disconnect();
|
||||||
|
}, [headings, content]);
|
||||||
|
|
||||||
|
const scrollToHeading = useCallback((id: string) => {
|
||||||
|
const root = rootRef.current;
|
||||||
|
const target =
|
||||||
|
root?.querySelector<HTMLElement>(selectorForId(id)) ?? document.getElementById(id);
|
||||||
|
setActiveHeadingId(id);
|
||||||
|
target?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={rootRef}
|
||||||
|
className={cn("report-markdown-shell grid min-h-0 gap-5 lg:grid-cols-[minmax(0,1fr)_300px]", className)}
|
||||||
|
>
|
||||||
|
<article className="report-markdown-paper min-w-0 overflow-hidden">
|
||||||
|
<header className={cn("report-markdown-header", compactHeader && "report-markdown-header-compact")}>
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
<Badge variant="secondary" className="report-markdown-badge">
|
||||||
|
<BookOpen className="size-3.5" />
|
||||||
|
{badgeLabel}
|
||||||
|
</Badge>
|
||||||
|
{subtitle && (
|
||||||
|
<span className="max-w-full truncate text-xs text-slate-500 dark:text-slate-400">
|
||||||
|
{subtitle}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{title && <h1 className="report-markdown-title">{title}</h1>}
|
||||||
|
{!compactHeader && excerpt && <p className="report-markdown-excerpt">{excerpt}</p>}
|
||||||
|
<div className="report-markdown-metrics">
|
||||||
|
<span>{sectionCount || 1} 个章节</span>
|
||||||
|
<span>约 {wordCount} 字</span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div className="wiki-markdown report-markdown-body">
|
||||||
|
<MarkdownContent
|
||||||
|
className="max-w-none"
|
||||||
|
content={content}
|
||||||
|
isLoading={false}
|
||||||
|
remarkPlugins={reasoningPlugins.remarkPlugins}
|
||||||
|
rehypePlugins={reasoningPlugins.rehypePlugins}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<aside className="hidden min-w-0 lg:block">
|
||||||
|
<div className="report-markdown-toc">
|
||||||
|
<div className="mb-3 flex items-center justify-between gap-2">
|
||||||
|
<div className="flex items-center gap-2 text-sm font-semibold text-slate-900 dark:text-slate-100">
|
||||||
|
<ListTree className="size-4" />
|
||||||
|
内容目录
|
||||||
|
</div>
|
||||||
|
<span className="rounded-md bg-slate-100 px-1.5 py-0.5 text-xs text-slate-500 dark:bg-slate-800 dark:text-slate-400">
|
||||||
|
{sectionCount || 0}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{headings.length > 0 ? (
|
||||||
|
<nav className="report-markdown-toc-list">
|
||||||
|
{headings.map((item) => (
|
||||||
|
<button
|
||||||
|
key={item.id}
|
||||||
|
type="button"
|
||||||
|
className={cn(
|
||||||
|
"report-markdown-toc-item",
|
||||||
|
activeHeadingId === item.id && "report-markdown-toc-item-active",
|
||||||
|
item.level === 2 && "report-markdown-toc-level-2",
|
||||||
|
item.level === 3 && "report-markdown-toc-level-3",
|
||||||
|
)}
|
||||||
|
title={item.text}
|
||||||
|
onClick={() => scrollToHeading(item.id)}
|
||||||
|
>
|
||||||
|
{item.text}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</nav>
|
||||||
|
) : (
|
||||||
|
<div className="rounded-md border border-dashed p-3 text-xs text-slate-500 dark:border-slate-800 dark:text-slate-400">
|
||||||
|
暂无标题目录
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -111,6 +111,340 @@
|
|||||||
border-color: #eef1f5;
|
border-color: #eef1f5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.public-report-markdown {
|
||||||
|
color: #334155;
|
||||||
|
font-feature-settings: "kern";
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-report-markdown h1 {
|
||||||
|
font-size: 30px;
|
||||||
|
letter-spacing: 0;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-report-markdown h2 {
|
||||||
|
font-size: 22px;
|
||||||
|
margin-top: 42px;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-report-markdown h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-report-markdown p,
|
||||||
|
.public-report-markdown li {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-report-markdown p {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-report-markdown ul,
|
||||||
|
.public-report-markdown ol {
|
||||||
|
margin: 14px 0 18px;
|
||||||
|
padding-left: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-report-markdown ul {
|
||||||
|
list-style-type: disc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-report-markdown ol {
|
||||||
|
list-style-type: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-report-markdown li {
|
||||||
|
padding-left: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-report-markdown code {
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #f1f5f9;
|
||||||
|
padding: 2px 6px;
|
||||||
|
color: #be123c;
|
||||||
|
font-size: 0.92em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-report-markdown pre {
|
||||||
|
margin: 20px 0;
|
||||||
|
border-radius: 8px;
|
||||||
|
background: #0f172a;
|
||||||
|
padding: 16px;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-report-markdown pre code {
|
||||||
|
background: transparent;
|
||||||
|
padding: 0;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-report-markdown table {
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid #e8ecf1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-report-markdown th,
|
||||||
|
.public-report-markdown td {
|
||||||
|
min-width: 120px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
|
||||||
|
.public-report-markdown blockquote {
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .public-report-markdown {
|
||||||
|
color: #cbd5e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .public-report-markdown code {
|
||||||
|
background: #1e293b;
|
||||||
|
color: #f9a8d4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .public-report-markdown pre {
|
||||||
|
background: #020617;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .public-report-markdown table {
|
||||||
|
border-color: #334155;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-shell {
|
||||||
|
align-items: start;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-paper {
|
||||||
|
border: 1px solid rgba(203, 213, 225, 0.85);
|
||||||
|
border-radius: 8px;
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(248, 250, 252, 0.92), rgba(255, 255, 255, 0) 220px),
|
||||||
|
#ffffff;
|
||||||
|
box-shadow:
|
||||||
|
0 1px 2px rgba(15, 23, 42, 0.04),
|
||||||
|
0 18px 44px rgba(15, 23, 42, 0.07);
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-header {
|
||||||
|
border-bottom: 1px solid #e8edf4;
|
||||||
|
padding: 26px 34px 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-header-compact {
|
||||||
|
padding-bottom: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-badge {
|
||||||
|
gap: 6px;
|
||||||
|
border: 1px solid #dbe3ef;
|
||||||
|
background: #ffffff;
|
||||||
|
color: #475569;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-title {
|
||||||
|
margin: 14px 0 0;
|
||||||
|
color: #0f172a;
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 1.35;
|
||||||
|
letter-spacing: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-excerpt {
|
||||||
|
margin: 14px 0 0;
|
||||||
|
max-width: 840px;
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-metrics {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8px;
|
||||||
|
margin-top: 16px;
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-metrics span {
|
||||||
|
border: 1px solid #e2e8f0;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: rgba(255, 255, 255, 0.78);
|
||||||
|
padding: 4px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-body {
|
||||||
|
max-width: 920px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 32px 42px 44px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-body h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-body h2 {
|
||||||
|
position: relative;
|
||||||
|
margin-top: 44px;
|
||||||
|
border-bottom-color: #e5edf7;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-body h2::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
left: -16px;
|
||||||
|
top: 0.34em;
|
||||||
|
width: 4px;
|
||||||
|
height: 1.05em;
|
||||||
|
border-radius: 999px;
|
||||||
|
background: #2563eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-body h3 {
|
||||||
|
color: #1e293b;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-body p,
|
||||||
|
.report-markdown-body li {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.92;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-body blockquote {
|
||||||
|
border-left-color: #2563eb;
|
||||||
|
background: #f8fbff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-body table {
|
||||||
|
box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-toc {
|
||||||
|
position: sticky;
|
||||||
|
top: 16px;
|
||||||
|
max-height: calc(100vh - 32px);
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(203, 213, 225, 0.82);
|
||||||
|
border-radius: 8px;
|
||||||
|
background: rgba(255, 255, 255, 0.92);
|
||||||
|
padding: 14px;
|
||||||
|
box-shadow: 0 12px 34px rgba(15, 23, 42, 0.06);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-toc-list {
|
||||||
|
max-height: calc(100vh - 128px);
|
||||||
|
overflow: auto;
|
||||||
|
padding-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-toc-item {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
border-left: 2px solid transparent;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 7px 8px;
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 1.4;
|
||||||
|
text-align: left;
|
||||||
|
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-toc-item:hover {
|
||||||
|
background: #f1f5f9;
|
||||||
|
color: #0f172a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-toc-item-active {
|
||||||
|
border-left-color: #2563eb;
|
||||||
|
background: #eff6ff;
|
||||||
|
color: #1d4ed8;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-toc-level-2 {
|
||||||
|
padding-left: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.report-markdown-toc-level-3 {
|
||||||
|
padding-left: 30px;
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .report-markdown-paper {
|
||||||
|
border-color: #1f2937;
|
||||||
|
background:
|
||||||
|
linear-gradient(180deg, rgba(15, 23, 42, 0.9), rgba(2, 6, 23, 0) 220px),
|
||||||
|
#020617;
|
||||||
|
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .report-markdown-header {
|
||||||
|
border-bottom-color: #1e293b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .report-markdown-badge,
|
||||||
|
.dark .report-markdown-metrics span {
|
||||||
|
border-color: #334155;
|
||||||
|
background: #0f172a;
|
||||||
|
color: #cbd5e1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .report-markdown-title {
|
||||||
|
color: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .report-markdown-excerpt,
|
||||||
|
.dark .report-markdown-metrics {
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .report-markdown-body h3 {
|
||||||
|
color: #e2e8f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .report-markdown-body h2::before {
|
||||||
|
background: #60a5fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .report-markdown-body blockquote {
|
||||||
|
background: #0f172a;
|
||||||
|
border-left-color: #60a5fa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .report-markdown-toc {
|
||||||
|
border-color: #1f2937;
|
||||||
|
background: rgba(2, 6, 23, 0.88);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .report-markdown-toc-item:hover {
|
||||||
|
background: #0f172a;
|
||||||
|
color: #f8fafc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .report-markdown-toc-item-active {
|
||||||
|
background: rgba(37, 99, 235, 0.16);
|
||||||
|
color: #93c5fd;
|
||||||
|
}
|
||||||
|
|
||||||
/* Anchor target offset so headings clear the floating "目录" pill. */
|
/* Anchor target offset so headings clear the floating "目录" pill. */
|
||||||
.wiki-markdown h1,
|
.wiki-markdown h1,
|
||||||
.wiki-markdown h2,
|
.wiki-markdown h2,
|
||||||
|
|||||||
@@ -0,0 +1,556 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Activity,
|
||||||
|
Gauge,
|
||||||
|
Loader2,
|
||||||
|
OctagonX,
|
||||||
|
RefreshCw,
|
||||||
|
Square,
|
||||||
|
Zap,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { useId, useMemo, useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import type {
|
||||||
|
ActiveRunItem,
|
||||||
|
ConcurrencyPoint,
|
||||||
|
Granularity,
|
||||||
|
TokenSpeedPoint,
|
||||||
|
} from "@/core/admin/active-runs";
|
||||||
|
import {
|
||||||
|
useActiveRuns,
|
||||||
|
useCancelActiveRun,
|
||||||
|
useCancelAllActiveRuns,
|
||||||
|
useConcurrencySeries,
|
||||||
|
useMonitorSettings,
|
||||||
|
useTokenSpeedSeries,
|
||||||
|
useUpdateMonitorSettings,
|
||||||
|
} from "@/core/admin/hooks";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
/** lookback window (hours) per granularity. */
|
||||||
|
const LOOKBACK: Record<Granularity, number> = { minute: 3, hour: 48 };
|
||||||
|
|
||||||
|
function fmtBucket(iso: string, granularity: Granularity): string {
|
||||||
|
const date = new Date(iso);
|
||||||
|
if (Number.isNaN(date.getTime())) return iso;
|
||||||
|
const mm = String(date.getMonth() + 1).padStart(2, "0");
|
||||||
|
const dd = String(date.getDate()).padStart(2, "0");
|
||||||
|
const hh = String(date.getHours()).padStart(2, "0");
|
||||||
|
const mi = String(date.getMinutes()).padStart(2, "0");
|
||||||
|
return granularity === "hour" ? `${mm}-${dd} ${hh}:00` : `${hh}:${mi}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmtElapsed(seconds: number): string {
|
||||||
|
if (seconds < 60) return `${seconds}s`;
|
||||||
|
const m = Math.floor(seconds / 60);
|
||||||
|
const s = seconds % 60;
|
||||||
|
if (m < 60) return `${m}m${s.toString().padStart(2, "0")}s`;
|
||||||
|
const h = Math.floor(m / 60);
|
||||||
|
return `${h}h${(m % 60).toString().padStart(2, "0")}m`;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LineSeries {
|
||||||
|
name: string;
|
||||||
|
color: string;
|
||||||
|
values: (number | null)[];
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Round a value up to a "nice" axis ceiling (1 / 2 / 5 × 10ⁿ). */
|
||||||
|
function niceCeil(v: number): number {
|
||||||
|
if (!Number.isFinite(v) || v <= 0) return 1;
|
||||||
|
const exp = Math.floor(Math.log10(v));
|
||||||
|
const base = 10 ** exp;
|
||||||
|
const f = v / base;
|
||||||
|
const nice = f <= 1 ? 1 : f <= 2 ? 2 : f <= 5 ? 5 : 10;
|
||||||
|
return nice * base;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Build distinct axis ticks from the data max. For integer series (并发量) this
|
||||||
|
* yields whole-number ticks with no duplicate labels (fixes the「0 0 0 1 1」
|
||||||
|
* axis when the max is 1); for floats it uses a nice ceiling at quarters.
|
||||||
|
*/
|
||||||
|
function buildTicks(dataMax: number, integer: boolean): number[] {
|
||||||
|
if (!Number.isFinite(dataMax) || dataMax <= 0) return [0, 1];
|
||||||
|
if (integer) {
|
||||||
|
const niceMax = Math.max(1, Math.ceil(dataMax));
|
||||||
|
const step = Math.max(1, Math.ceil(niceMax / 4)); // ≤5 integer ticks
|
||||||
|
const top = Math.ceil(niceMax / step) * step;
|
||||||
|
const ticks: number[] = [];
|
||||||
|
for (let v = 0; v <= top; v += step) ticks.push(v);
|
||||||
|
return ticks;
|
||||||
|
}
|
||||||
|
const niceMax = niceCeil(dataMax);
|
||||||
|
return [0, 0.25, 0.5, 0.75, 1].map((r) => niceMax * r);
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmtAxis(v: number, integer: boolean): string {
|
||||||
|
if (integer) return String(Math.round(v));
|
||||||
|
if (v === 0) return "0";
|
||||||
|
return v < 10 ? v.toFixed(1) : String(Math.round(v));
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Last non-null value of a series (for the legend's current reading). */
|
||||||
|
function latestOf(values: (number | null)[]): number | null {
|
||||||
|
for (let i = values.length - 1; i >= 0; i -= 1) {
|
||||||
|
if (values[i] != null) return values[i] as number;
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Minimal dependency-free SVG line chart: legend + 1–2 series + area + caption. */
|
||||||
|
function LineChart({
|
||||||
|
labels,
|
||||||
|
series,
|
||||||
|
unit,
|
||||||
|
integer = false,
|
||||||
|
note,
|
||||||
|
emptyHint,
|
||||||
|
}: {
|
||||||
|
labels: string[];
|
||||||
|
series: LineSeries[];
|
||||||
|
unit: string;
|
||||||
|
integer?: boolean;
|
||||||
|
note?: string;
|
||||||
|
emptyHint: string;
|
||||||
|
}) {
|
||||||
|
const gradId = `cm-area-${useId().replace(/:/g, "")}`;
|
||||||
|
const width = 760;
|
||||||
|
const height = 220;
|
||||||
|
const pad = { top: 16, right: 16, bottom: 26, left: 44 };
|
||||||
|
const cw = width - pad.left - pad.right;
|
||||||
|
const ch = height - pad.top - pad.bottom;
|
||||||
|
const n = labels.length;
|
||||||
|
|
||||||
|
const allValues = series.flatMap((s) => s.values.filter((v): v is number => v != null));
|
||||||
|
const dataMax = allValues.length ? Math.max(...allValues) : 0;
|
||||||
|
const ticks = buildTicks(dataMax, integer);
|
||||||
|
const axisMax = ticks[ticks.length - 1] || 1;
|
||||||
|
|
||||||
|
// Legend always renders (even with no data) so the lines are self-explanatory.
|
||||||
|
const legend = (
|
||||||
|
<div className="mb-2 flex flex-wrap items-center gap-x-4 gap-y-1">
|
||||||
|
{series.map((s) => {
|
||||||
|
const latest = latestOf(s.values);
|
||||||
|
return (
|
||||||
|
<span key={s.name} className="flex items-center gap-1.5 text-xs text-[#5F6368] dark:text-slate-300">
|
||||||
|
<span className="inline-block h-[3px] w-4 rounded-full" style={{ backgroundColor: s.color }} />
|
||||||
|
{s.name}
|
||||||
|
{latest != null && (
|
||||||
|
<span className="font-semibold tabular-nums text-[#231815] dark:text-white">
|
||||||
|
{Number.isInteger(latest) ? latest : latest.toFixed(1)}
|
||||||
|
{unit}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const caption = note ? (
|
||||||
|
<p className="mt-2 text-[11px] leading-4 text-[#8B6B6B] dark:text-[#7FACF2]">{note}</p>
|
||||||
|
) : null;
|
||||||
|
|
||||||
|
if (n === 0) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{legend}
|
||||||
|
<div className="flex h-[160px] items-center justify-center rounded-lg border border-dashed border-[#F1D6D6] text-sm text-[#5F6368] dark:border-[#213D5E] dark:text-slate-400">
|
||||||
|
{emptyHint}
|
||||||
|
</div>
|
||||||
|
{caption}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const xFor = (i: number) => pad.left + (n <= 1 ? cw / 2 : (i / (n - 1)) * cw);
|
||||||
|
const yFor = (v: number) => pad.top + ch - (v / axisMax) * ch;
|
||||||
|
|
||||||
|
const linePath = (vals: (number | null)[]) => {
|
||||||
|
let d = "";
|
||||||
|
let started = false;
|
||||||
|
vals.forEach((v, i) => {
|
||||||
|
if (v == null) {
|
||||||
|
started = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
d += `${started ? "L" : "M"} ${xFor(i).toFixed(1)} ${yFor(v).toFixed(1)} `;
|
||||||
|
started = true;
|
||||||
|
});
|
||||||
|
return d.trim();
|
||||||
|
};
|
||||||
|
|
||||||
|
const first = series[0];
|
||||||
|
const areaPath = (() => {
|
||||||
|
if (!first) return "";
|
||||||
|
const line = linePath(first.values);
|
||||||
|
if (!line) return "";
|
||||||
|
return `${line} L ${xFor(n - 1).toFixed(1)} ${(pad.top + ch).toFixed(1)} L ${xFor(0).toFixed(1)} ${(pad.top + ch).toFixed(1)} Z`;
|
||||||
|
})();
|
||||||
|
|
||||||
|
const labelStep = Math.max(1, Math.ceil(n / 7));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{legend}
|
||||||
|
<svg viewBox={`0 0 ${width} ${height}`} className="w-full" role="img" aria-label="时序折线图">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id={gradId} x1="0" x2="0" y1="0" y2="1">
|
||||||
|
<stop offset="0%" stopColor={first?.color ?? "#C1121F"} stopOpacity="0.18" />
|
||||||
|
<stop offset="100%" stopColor={first?.color ?? "#C1121F"} stopOpacity="0.02" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
{ticks.map((t) => {
|
||||||
|
const y = yFor(t);
|
||||||
|
return (
|
||||||
|
<g key={t}>
|
||||||
|
<line
|
||||||
|
x1={pad.left}
|
||||||
|
x2={width - pad.right}
|
||||||
|
y1={y}
|
||||||
|
y2={y}
|
||||||
|
stroke="currentColor"
|
||||||
|
className="text-[#E5E7EB] dark:text-[#3F3F46]"
|
||||||
|
strokeWidth="1"
|
||||||
|
/>
|
||||||
|
<text x={pad.left - 6} y={y + 3} textAnchor="end" className="fill-[#9CA3AF] text-[10px]">
|
||||||
|
{fmtAxis(t, integer)}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{areaPath && <path d={areaPath} fill={`url(#${gradId})`} />}
|
||||||
|
{series.map((s) => (
|
||||||
|
<path
|
||||||
|
key={s.name}
|
||||||
|
d={linePath(s.values)}
|
||||||
|
fill="none"
|
||||||
|
stroke={s.color}
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
{labels.map((label, i) => {
|
||||||
|
if (i !== 0 && i !== n - 1 && i % labelStep !== 0) return null;
|
||||||
|
return (
|
||||||
|
<text key={`${label}-${i}`} x={xFor(i)} y={height - 8} textAnchor="middle" className="fill-[#6B7280] text-[10px]">
|
||||||
|
{label}
|
||||||
|
</text>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{series.map((s) =>
|
||||||
|
s.values.map((v, i) =>
|
||||||
|
v == null ? null : (
|
||||||
|
<circle key={`${s.name}-${i}`} cx={xFor(i)} cy={yFor(v)} r={2.5} fill={s.color}>
|
||||||
|
<title>{`${labels[i]} · ${s.name}: ${v}${unit}`}</title>
|
||||||
|
</circle>
|
||||||
|
),
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</svg>
|
||||||
|
{caption}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ChartCard({
|
||||||
|
icon: Icon,
|
||||||
|
title,
|
||||||
|
subtitle,
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
icon: typeof Activity;
|
||||||
|
title: string;
|
||||||
|
subtitle: string;
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<section className="rounded-lg border border-[#F1D6D6] bg-white p-4 shadow-sm dark:border-[#213D5E] dark:bg-[#02244C]">
|
||||||
|
<div className="mb-3 flex items-center gap-2">
|
||||||
|
<Icon className="size-4 text-[#C1121F] dark:text-[#7FACF2]" />
|
||||||
|
<h3 className="font-semibold text-[#231815] dark:text-white">{title}</h3>
|
||||||
|
<span className="ml-auto text-xs text-[#8B6B6B] dark:text-[#7FACF2]">{subtitle}</span>
|
||||||
|
</div>
|
||||||
|
{children}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ActiveRunRow({
|
||||||
|
run,
|
||||||
|
onStop,
|
||||||
|
stopping,
|
||||||
|
}: {
|
||||||
|
run: ActiveRunItem;
|
||||||
|
onStop: (runId: string) => void;
|
||||||
|
stopping: boolean;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-[minmax(0,1.4fr)_minmax(0,1.2fr)_72px_64px_64px_72px] items-center gap-3 border-b border-[#F1D6D6] px-3 py-2 text-sm last:border-b-0 dark:border-[#213D5E]">
|
||||||
|
<div className="min-w-0">
|
||||||
|
<div className="truncate font-medium text-[#202124] dark:text-white">{run.user_name || "未知用户"}</div>
|
||||||
|
<div className="truncate text-xs text-[#5F6368] dark:text-slate-400" title={run.thread_title}>
|
||||||
|
{run.thread_title || run.thread_id}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="min-w-0 truncate text-[#202124] dark:text-slate-100">{run.agent_name}</div>
|
||||||
|
<Badge variant="outline" className="justify-center">
|
||||||
|
{run.kind}
|
||||||
|
</Badge>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"text-center text-xs font-medium",
|
||||||
|
run.status === "running" ? "text-[#0F766E] dark:text-teal-300" : "text-[#B45309] dark:text-amber-300",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{run.status === "running" ? "运行中" : "排队中"}
|
||||||
|
</span>
|
||||||
|
<span className="text-center text-xs tabular-nums text-[#5F6368] dark:text-slate-400">
|
||||||
|
{fmtElapsed(run.elapsed_seconds)}
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
className="h-7 border-[#C1121F]/40 text-[#C1121F] hover:bg-[#FFF1F1] dark:border-rose-400/40 dark:text-rose-200"
|
||||||
|
disabled={stopping}
|
||||||
|
onClick={() => onStop(run.run_id)}
|
||||||
|
>
|
||||||
|
{stopping ? <Loader2 className="size-3.5 animate-spin" /> : <Square className="size-3.5" />}
|
||||||
|
停止
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ConcurrencyMonitorPanel() {
|
||||||
|
const [open, setOpen] = useState(true);
|
||||||
|
const [granularity, setGranularity] = useState<Granularity>("minute");
|
||||||
|
|
||||||
|
const { data: live, isLoading: liveLoading, refetch, isRefetching } = useActiveRuns(open);
|
||||||
|
const concurrency = useConcurrencySeries(granularity, LOOKBACK[granularity], open);
|
||||||
|
const tokenSpeed = useTokenSpeedSeries(granularity, LOOKBACK[granularity], open);
|
||||||
|
const { data: settings } = useMonitorSettings();
|
||||||
|
const updateSettings = useUpdateMonitorSettings();
|
||||||
|
const cancelOne = useCancelActiveRun();
|
||||||
|
const cancelAll = useCancelAllActiveRuns();
|
||||||
|
|
||||||
|
const [stoppingId, setStoppingId] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const count = live?.count ?? 0;
|
||||||
|
const runs = live?.runs ?? [];
|
||||||
|
const samplerOn = settings?.enabled ?? false;
|
||||||
|
|
||||||
|
const concurrencyChart = useMemo(() => {
|
||||||
|
const points: ConcurrencyPoint[] = concurrency.data?.points ?? [];
|
||||||
|
return {
|
||||||
|
labels: points.map((p) => fmtBucket(p.bucket, granularity)),
|
||||||
|
series: [
|
||||||
|
{ name: "峰值并发", color: "#C1121F", values: points.map((p) => p.peak) },
|
||||||
|
{ name: "平均并发", color: "#F59E0B", values: points.map((p) => p.avg) },
|
||||||
|
] as LineSeries[],
|
||||||
|
};
|
||||||
|
}, [concurrency.data, granularity]);
|
||||||
|
|
||||||
|
const tokenChart = useMemo(() => {
|
||||||
|
const points: TokenSpeedPoint[] = tokenSpeed.data?.points ?? [];
|
||||||
|
return {
|
||||||
|
labels: points.map((p) => fmtBucket(p.bucket, granularity)),
|
||||||
|
series: [
|
||||||
|
{ name: "平均速度", color: "#2563EB", values: points.map((p) => p.avg_tokens_per_sec) },
|
||||||
|
{ name: "最慢", color: "#9333EA", values: points.map((p) => p.min_tokens_per_sec) },
|
||||||
|
] as LineSeries[],
|
||||||
|
};
|
||||||
|
}, [tokenSpeed.data, granularity]);
|
||||||
|
|
||||||
|
const handleStop = async (runId: string) => {
|
||||||
|
setStoppingId(runId);
|
||||||
|
try {
|
||||||
|
const res = await cancelOne.mutateAsync(runId);
|
||||||
|
toast[res.cancelled ? "success" : "info"](res.cancelled ? "已停止该对话调用" : "该调用已结束或不存在");
|
||||||
|
} catch (e) {
|
||||||
|
toast.error(e instanceof Error ? e.message : "停止失败");
|
||||||
|
} finally {
|
||||||
|
setStoppingId(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleStopAll = async () => {
|
||||||
|
if (runs.length === 0) return;
|
||||||
|
if (!window.confirm(`确定要停止当前全部 ${count} 个并发调用吗?这会中断这些用户正在生成的回答。`)) return;
|
||||||
|
try {
|
||||||
|
const res = await cancelAll.mutateAsync();
|
||||||
|
toast.success(`已停止 ${res.cancelled_count} 个调用`);
|
||||||
|
} catch (e) {
|
||||||
|
toast.error(e instanceof Error ? e.message : "全部停止失败");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleToggleSampler = async (next: boolean) => {
|
||||||
|
try {
|
||||||
|
await updateSettings.mutateAsync(next);
|
||||||
|
toast.success(next ? "已开启并发采样" : "已关闭并发采样(折线图不再新增历史点)");
|
||||||
|
} catch (e) {
|
||||||
|
toast.error(e instanceof Error ? e.message : "切换失败");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="space-y-4 rounded-xl border border-[#F1D6D6] bg-[#FFF7F7] p-4 shadow-sm dark:border-[#213D5E] dark:bg-[#011226]">
|
||||||
|
{/* header */}
|
||||||
|
<div className="flex flex-wrap items-center gap-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="flex size-9 items-center justify-center rounded-lg bg-[#C1121F] text-white dark:bg-[#2563EB]">
|
||||||
|
<Activity className="size-5" />
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold text-[#231815] dark:text-white">实时并发监控</div>
|
||||||
|
<div className="text-xs text-[#8B6B6B] dark:text-[#7FACF2]">
|
||||||
|
监控大模型并发压力,可直接停止任意对话调用
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="ml-auto flex flex-wrap items-center gap-3">
|
||||||
|
<div className="flex items-center gap-2 rounded-lg border border-[#F1D6D6] bg-white px-3 py-1.5 dark:border-[#213D5E] dark:bg-[#02244C]">
|
||||||
|
<span className="text-xs text-[#5F6368] dark:text-slate-300">当前并发</span>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"text-2xl font-semibold tabular-nums",
|
||||||
|
count > 0 ? "text-[#C1121F] dark:text-[#7FACF2]" : "text-[#202124] dark:text-white",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{count}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 rounded-lg border border-[#F1D6D6] bg-white px-3 py-1.5 dark:border-[#213D5E] dark:bg-[#02244C]">
|
||||||
|
<span className="text-xs text-[#5F6368] dark:text-slate-300">后台采样</span>
|
||||||
|
<Switch checked={samplerOn} onCheckedChange={handleToggleSampler} disabled={updateSettings.isPending} />
|
||||||
|
</div>
|
||||||
|
<Button variant="outline" size="sm" onClick={() => refetch()} disabled={isRefetching}>
|
||||||
|
<RefreshCw className={cn("mr-1 size-4", isRefetching && "animate-spin")} />
|
||||||
|
刷新
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="border-[#C1121F]/50 text-[#C1121F] hover:bg-[#FFF1F1] dark:border-rose-400/40 dark:text-rose-200"
|
||||||
|
onClick={handleStopAll}
|
||||||
|
disabled={cancelAll.isPending || runs.length === 0}
|
||||||
|
>
|
||||||
|
<OctagonX className="mr-1 size-4" />
|
||||||
|
全部停止
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => setOpen((v) => !v)}>
|
||||||
|
{open ? "收起" : "展开"}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{open && (
|
||||||
|
<>
|
||||||
|
{!samplerOn && (
|
||||||
|
<div className="rounded-lg border border-amber-300/60 bg-amber-50 px-3 py-2 text-xs text-amber-800 dark:border-amber-300/30 dark:bg-amber-300/10 dark:text-amber-100">
|
||||||
|
后台采样默认关闭:实时并发数与「停止」功能始终可用。需要并发量历史折线图时,打开右上角「后台采样」开关即可开始记录(对线上服务影响极小,可随时关闭)。
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* granularity toggle */}
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-xs text-[#5F6368] dark:text-slate-300">统计粒度</span>
|
||||||
|
{(["minute", "hour"] as Granularity[]).map((g) => (
|
||||||
|
<Button
|
||||||
|
key={g}
|
||||||
|
size="sm"
|
||||||
|
variant={granularity === g ? "default" : "outline"}
|
||||||
|
className={cn("h-7", granularity === g && "bg-[#C1121F] hover:bg-[#A50F1A] dark:bg-[#2563EB]")}
|
||||||
|
onClick={() => setGranularity(g)}
|
||||||
|
>
|
||||||
|
{g === "minute" ? "按分钟" : "按小时"}
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
<span className="text-xs text-[#8B6B6B] dark:text-[#7FACF2]">
|
||||||
|
{granularity === "minute" ? "近 3 小时" : "近 48 小时"}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* charts */}
|
||||||
|
<div className="grid gap-3 xl:grid-cols-2">
|
||||||
|
<ChartCard icon={Gauge} title="并发量(系统压力)" subtitle={`每${granularity === "hour" ? "小时" : "分钟"}一个点`}>
|
||||||
|
{concurrency.isLoading ? (
|
||||||
|
<div className="flex h-[220px] items-center justify-center text-sm text-[#5F6368] dark:text-slate-400">
|
||||||
|
<Loader2 className="mr-2 size-4 animate-spin" /> 加载中
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<LineChart
|
||||||
|
labels={concurrencyChart.labels}
|
||||||
|
series={concurrencyChart.series}
|
||||||
|
unit=" 个"
|
||||||
|
integer
|
||||||
|
note="红线=该时段同时进行的最多调用数(峰值);橙线=该时段平均值。数值越高、越靠上,说明同时打大模型的请求越多、系统压力越大。"
|
||||||
|
emptyHint="暂无并发采样数据(需打开「后台采样」开关后才开始记录)"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</ChartCard>
|
||||||
|
<ChartCard icon={Zap} title="大模型出字速度" subtitle={`每${granularity === "hour" ? "小时" : "分钟"}一个点`}>
|
||||||
|
{tokenSpeed.isLoading ? (
|
||||||
|
<div className="flex h-[220px] items-center justify-center text-sm text-[#5F6368] dark:text-slate-400">
|
||||||
|
<Loader2 className="mr-2 size-4 animate-spin" /> 加载中
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<LineChart
|
||||||
|
labels={tokenChart.labels}
|
||||||
|
series={tokenChart.series}
|
||||||
|
unit=" t/s"
|
||||||
|
note="蓝线=该时段所有大模型调用的平均出字速度(tokens/秒,越高越快);紫线=该时段最慢的一次调用。某段时间线明显下凹,说明那会儿模型/供应商变慢,是压力或瓶颈所在。"
|
||||||
|
emptyHint="暂无大模型调用记录"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</ChartCard>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* active run list */}
|
||||||
|
<section className="rounded-lg border border-[#F1D6D6] bg-white dark:border-[#213D5E] dark:bg-[#02244C]">
|
||||||
|
<div className="flex items-center gap-2 border-b border-[#F1D6D6] px-3 py-2 dark:border-[#213D5E]">
|
||||||
|
<span className="font-semibold text-[#231815] dark:text-white">正在进行的调用</span>
|
||||||
|
<Badge variant="outline">{count}</Badge>
|
||||||
|
{liveLoading && <Loader2 className="size-3.5 animate-spin text-[#8B6B6B]" />}
|
||||||
|
</div>
|
||||||
|
{runs.length === 0 ? (
|
||||||
|
<div className="py-10 text-center text-sm text-[#5F6368] dark:text-slate-400">
|
||||||
|
当前没有正在进行的大模型调用
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div>
|
||||||
|
<div className="grid grid-cols-[minmax(0,1.4fr)_minmax(0,1.2fr)_72px_64px_64px_72px] gap-3 border-b border-[#F1D6D6] px-3 py-2 text-xs text-[#8B6B6B] dark:border-[#213D5E] dark:text-[#7FACF2]">
|
||||||
|
<span>用户 / 会话</span>
|
||||||
|
<span>智能体</span>
|
||||||
|
<span className="text-center">类型</span>
|
||||||
|
<span className="text-center">状态</span>
|
||||||
|
<span className="text-center">已运行</span>
|
||||||
|
<span className="text-center">操作</span>
|
||||||
|
</div>
|
||||||
|
{runs.map((run) => (
|
||||||
|
<ActiveRunRow
|
||||||
|
key={run.run_id}
|
||||||
|
run={run}
|
||||||
|
onStop={handleStop}
|
||||||
|
stopping={stoppingId === run.run_id}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ConcurrencyMonitorPanel;
|
||||||
@@ -213,7 +213,7 @@ const errorToastDarkOptions = {
|
|||||||
</div>
|
</div>
|
||||||
<div className="flex flex-1 flex-wrap items-center gap-1.5">
|
<div className="flex flex-1 flex-wrap items-center gap-1.5">
|
||||||
{summary && Object.keys(summary.by_category).length === 0 && (
|
{summary && Object.keys(summary.by_category).length === 0 && (
|
||||||
<span className="text-muted-foreground text-sm">暂无失败记录 🎉</span>
|
<span className="text-muted-foreground text-sm">暂无失败记录</span>
|
||||||
)}
|
)}
|
||||||
{summary &&
|
{summary &&
|
||||||
Object.entries(summary.by_category)
|
Object.entries(summary.by_category)
|
||||||
|
|||||||
@@ -24,12 +24,60 @@ const AGENT_COLORS_DARK = [
|
|||||||
{ from: "#69B1FF", to: "#003EB3" }, // 浅蓝 → 主色按下
|
{ from: "#69B1FF", to: "#003EB3" }, // 浅蓝 → 主色按下
|
||||||
] as const;
|
] as const;
|
||||||
|
|
||||||
/** 按 agent id 稳定散列出一对渐变色(from → to)。`isDark` 切换深蓝/浅色调色板。 */
|
/** 按 agent id 稳定散列出一对渐变色,并根据当前主题返回可读的图标前景色。 */
|
||||||
export function agentColor(id: string, isDark: boolean) {
|
const AGENT_COLORS_ICEBLUE = [
|
||||||
|
{ from: "#eff8fd", to: "#b7dcf5" },
|
||||||
|
{ from: "#e3f2fb", to: "#9bcef1" },
|
||||||
|
{ from: "#ebf6fb", to: "#add8e9" },
|
||||||
|
{ from: "#edf2fc", to: "#b7cdef" },
|
||||||
|
{ from: "#e9f7f5", to: "#afe0dc" },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
const AGENT_COLORS_LIGHTYELLOW = [
|
||||||
|
{ from: "#fbfdef", to: "#e4efbf" },
|
||||||
|
{ from: "#f7fae9", to: "#F3FBD9" },
|
||||||
|
{ from: "#f9fbe8", to: "#dcebad" },
|
||||||
|
{ from: "#faf8e9", to: "#e7dfb9" },
|
||||||
|
{ from: "#f1f8e5", to: "#cce0af" },
|
||||||
|
] as const;
|
||||||
|
|
||||||
|
type AgentAvatarTheme =
|
||||||
|
| "dark"
|
||||||
|
| "iceblue"
|
||||||
|
| "lightyellow"
|
||||||
|
| "light"
|
||||||
|
| "lightblue"
|
||||||
|
| "lightgreen"
|
||||||
|
| `custom-theme-${string}`;
|
||||||
|
|
||||||
|
/** Returns a stable avatar gradient and readable icon color for each theme. */
|
||||||
|
export function agentColor(id: string, theme: AgentAvatarTheme) {
|
||||||
|
if (theme.startsWith("custom-theme-")) {
|
||||||
|
return {
|
||||||
|
from: "var(--accent)",
|
||||||
|
to: "var(--brand-200)",
|
||||||
|
foreground: "var(--accent-foreground)",
|
||||||
|
};
|
||||||
|
}
|
||||||
let hash = 0;
|
let hash = 0;
|
||||||
for (let i = 0; i < id.length; i++) {
|
for (let i = 0; i < id.length; i++) {
|
||||||
hash = (hash * 31 + id.charCodeAt(i)) >>> 0;
|
hash = (hash * 31 + id.charCodeAt(i)) >>> 0;
|
||||||
}
|
}
|
||||||
const palette = isDark ? AGENT_COLORS_DARK : AGENT_COLORS_LIGHT;
|
const palette =
|
||||||
return palette[hash % palette.length]!;
|
theme === "dark"
|
||||||
|
? AGENT_COLORS_DARK
|
||||||
|
: theme === "iceblue"
|
||||||
|
? AGENT_COLORS_ICEBLUE
|
||||||
|
: theme === "lightyellow"
|
||||||
|
? AGENT_COLORS_LIGHTYELLOW
|
||||||
|
: AGENT_COLORS_LIGHT;
|
||||||
|
return {
|
||||||
|
...palette[hash % palette.length]!,
|
||||||
|
foreground:
|
||||||
|
theme === "iceblue"
|
||||||
|
? "#2d587a"
|
||||||
|
: theme === "lightyellow"
|
||||||
|
? "#4c6330"
|
||||||
|
: "#ffffff",
|
||||||
|
};
|
||||||
}
|
}
|
||||||
@@ -35,7 +35,7 @@ export function AgentWelcome({
|
|||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<div className="bg-primary/10 ring-primary/15 mb-2 flex h-[72px] w-[72px] items-center justify-center rounded-3xl ring-1">
|
<div className="agent-avatar bg-primary/10 ring-primary/15 mb-2 flex h-[72px] w-[72px] items-center justify-center rounded-3xl ring-1">
|
||||||
<BotIcon className="text-primary h-9 w-9" />
|
<BotIcon className="text-primary h-9 w-9" />
|
||||||
</div>
|
</div>
|
||||||
<div className="text-3xl font-bold tracking-tight">
|
<div className="text-3xl font-bold tracking-tight">
|
||||||
|
|||||||
@@ -77,6 +77,7 @@ import {
|
|||||||
import { getAgent } from "@/core/agents/api";
|
import { getAgent } from "@/core/agents/api";
|
||||||
import type { Agent, AgentQuestion, UpdateAgentRequest } from "@/core/agents";
|
import type { Agent, AgentQuestion, UpdateAgentRequest } from "@/core/agents";
|
||||||
import { getStoredAuth } from "@/core/auth";
|
import { getStoredAuth } from "@/core/auth";
|
||||||
|
import { useLiveAccount } from "@/core/auth/use-live-account";
|
||||||
import { useI18n } from "@/core/i18n/hooks";
|
import { useI18n } from "@/core/i18n/hooks";
|
||||||
import { useSkills } from "@/core/skills/hooks";
|
import { useSkills } from "@/core/skills/hooks";
|
||||||
import { formatDateTime } from "@/core/utils/datetime";
|
import { formatDateTime } from "@/core/utils/datetime";
|
||||||
@@ -250,6 +251,8 @@ export function AgentCard({ agent, layout = "card", onPublisherClick }: AgentCar
|
|||||||
|
|
||||||
const storedAuth = useMemo(() => getStoredAuth(), []);
|
const storedAuth = useMemo(() => getStoredAuth(), []);
|
||||||
const currentUserId = storedAuth?.user_id ?? null;
|
const currentUserId = storedAuth?.user_id ?? null;
|
||||||
|
// 发布请求实际以「实时」token 执行 —— 用 live 账号来提示发布者并检测账号是否被切换。
|
||||||
|
const live = useLiveAccount();
|
||||||
const isAdmin = storedAuth?.system_role === "admin";
|
const isAdmin = storedAuth?.system_role === "admin";
|
||||||
const isBuiltin = agent.builtin;
|
const isBuiltin = agent.builtin;
|
||||||
const isOwned =
|
const isOwned =
|
||||||
@@ -424,18 +427,38 @@ export function AgentCard({ agent, layout = "card", onPublisherClick }: AgentCar
|
|||||||
setPublishPickerOpen(true);
|
setPublishPickerOpen(true);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (!warnIfAccountSwitched()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
try {
|
try {
|
||||||
await updateAgent.mutateAsync({
|
await updateAgent.mutateAsync({
|
||||||
id: agent.id,
|
id: agent.id,
|
||||||
request: { published: !agent.published },
|
request: { published: !agent.published },
|
||||||
});
|
});
|
||||||
toast.success(agent.published ? "已取消发布" : "已发布");
|
toast.success(
|
||||||
|
agent.published ? "已取消发布" : `已发布(操作账号:${live.displayName})`,
|
||||||
|
);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error(err instanceof Error ? err.message : String(err));
|
toast.error(err instanceof Error ? err.message : String(err));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 发布操作以实时 token 执行。若会话中途账号被切换(常见于另一标签页登录了别的
|
||||||
|
// 账号),先弹一次确认 —— 避免误以本人之外的账号执行发布。返回 false = 用户取消。
|
||||||
|
function warnIfAccountSwitched(): boolean {
|
||||||
|
if (!live.switched) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return window.confirm(
|
||||||
|
`当前登录账号已从「${live.mountDisplayName}」切换为「${live.displayName}」。\n` +
|
||||||
|
`本次发布将以「${live.displayName}」执行。如需以「${live.mountDisplayName}」操作,请取消并刷新页面。\n\n仍要继续吗?`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
async function handlePublishToSquare(squareId: string) {
|
async function handlePublishToSquare(squareId: string) {
|
||||||
|
if (!warnIfAccountSwitched()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
try {
|
try {
|
||||||
await updateAgent.mutateAsync({
|
await updateAgent.mutateAsync({
|
||||||
id: agent.id,
|
id: agent.id,
|
||||||
@@ -443,7 +466,7 @@ export function AgentCard({ agent, layout = "card", onPublisherClick }: AgentCar
|
|||||||
});
|
});
|
||||||
const sqName =
|
const sqName =
|
||||||
publishSquares?.squares.find((s) => s.id === squareId)?.name ?? "广场";
|
publishSquares?.squares.find((s) => s.id === squareId)?.name ?? "广场";
|
||||||
toast.success(`已发布到「${sqName}」`);
|
toast.success(`已发布到「${sqName}」(操作账号:${live.displayName})`);
|
||||||
setPublishPickerOpen(false);
|
setPublishPickerOpen(false);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error(err instanceof Error ? err.message : String(err));
|
toast.error(err instanceof Error ? err.message : String(err));
|
||||||
@@ -816,7 +839,7 @@ export function AgentCard({ agent, layout = "card", onPublisherClick }: AgentCar
|
|||||||
<CardHeader className="min-w-0 pb-2">
|
<CardHeader className="min-w-0 pb-2">
|
||||||
<div className="flex min-w-0 items-start justify-between gap-2">
|
<div className="flex min-w-0 items-start justify-between gap-2">
|
||||||
<div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
|
<div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
|
||||||
<div className="bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
|
<div className="agent-avatar bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
|
||||||
<BotIcon className="h-5 w-5" />
|
<BotIcon className="h-5 w-5" />
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1 overflow-hidden">
|
<div className="min-w-0 flex-1 overflow-hidden">
|
||||||
@@ -871,7 +894,7 @@ export function AgentCard({ agent, layout = "card", onPublisherClick }: AgentCar
|
|||||||
|
|
||||||
const listLayout = (
|
const listLayout = (
|
||||||
<div className="group flex min-w-0 items-center gap-3 rounded-lg border p-2.5 transition-shadow hover:shadow-sm dark:border-[#213D5E] dark:bg-[#02244C]">
|
<div className="group flex min-w-0 items-center gap-3 rounded-lg border p-2.5 transition-shadow hover:shadow-sm dark:border-[#213D5E] dark:bg-[#02244C]">
|
||||||
<div className="bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
|
<div className="agent-avatar bg-primary/10 text-primary flex h-9 w-9 shrink-0 items-center justify-center rounded-lg">
|
||||||
<BotIcon className="h-5 w-5" />
|
<BotIcon className="h-5 w-5" />
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1 overflow-hidden">
|
<div className="min-w-0 flex-1 overflow-hidden">
|
||||||
@@ -957,7 +980,7 @@ export function AgentCard({ agent, layout = "card", onPublisherClick }: AgentCar
|
|||||||
? "正在加载 SOUL.md..."
|
? "正在加载 SOUL.md..."
|
||||||
: "输入 SOUL.md 内容"
|
: "输入 SOUL.md 内容"
|
||||||
}
|
}
|
||||||
className="max-h-[45vh] min-h-48 resize-y font-mono text-xs"
|
className="max-h-[45vh] min-h-48 resize-y text-xs"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
@@ -1117,6 +1140,23 @@ export function AgentCard({ agent, layout = "card", onPublisherClick }: AgentCar
|
|||||||
loading={updateAgent.isPending}
|
loading={updateAgent.isPending}
|
||||||
onConfirm={(squareId) => void handlePublishToSquare(squareId)}
|
onConfirm={(squareId) => void handlePublishToSquare(squareId)}
|
||||||
description="请选择要把该智能体发布到哪个广场。每个智能体只能归属一个广场,不会重复出现。"
|
description="请选择要把该智能体发布到哪个广场。每个智能体只能归属一个广场,不会重复出现。"
|
||||||
|
accountNotice={
|
||||||
|
<div className="text-xs">
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
发布操作账号:
|
||||||
|
<span className="text-foreground font-medium">
|
||||||
|
「{live.displayName}」
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
{live.switched && (
|
||||||
|
<p className="text-destructive mt-1">
|
||||||
|
⚠ 当前登录账号已从「{live.mountDisplayName}」切换为「
|
||||||
|
{live.displayName}」。如需以「{live.mountDisplayName}
|
||||||
|
」操作,请刷新页面确认。
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -70,6 +70,8 @@ import {
|
|||||||
} from "@/core/threads/hooks";
|
} from "@/core/threads/hooks";
|
||||||
import type { AgentThread, AgentThreadState } from "@/core/threads/types";
|
import type { AgentThread, AgentThreadState } from "@/core/threads/types";
|
||||||
import {
|
import {
|
||||||
|
bootstrapResumePath,
|
||||||
|
isBootstrapThread,
|
||||||
isThreadFavorite,
|
isThreadFavorite,
|
||||||
isThreadPinned,
|
isThreadPinned,
|
||||||
sortThreadsPinnedFirst,
|
sortThreadsPinnedFirst,
|
||||||
@@ -252,43 +254,75 @@ export function AgentChatSidebar({ activeAgentId }: { activeAgentId?: string })
|
|||||||
{agents.map((agent) => {
|
{agents.map((agent) => {
|
||||||
const href = `${routeBase}/agents/${agent.id}/chats/new`;
|
const href = `${routeBase}/agents/${agent.id}/chats/new`;
|
||||||
const isActive = agent.id === activeAgentId;
|
const isActive = agent.id === activeAgentId;
|
||||||
const { from, to } = agentColor(agent.id, isDark);
|
const { from, to, foreground } = agentColor(agent.id, theme);
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
key={agent.id}
|
key={agent.id}
|
||||||
href={href}
|
href={href}
|
||||||
className={cn(
|
className={cn(
|
||||||
"group relative flex w-full items-start gap-2.5 rounded-xl border px-2.5 py-2 transition-colors",
|
"group relative flex w-full items-start gap-3 rounded-xl border px-3 py-2.5 transition-all duration-150",
|
||||||
isActive
|
isActive
|
||||||
? "border-primary/40 bg-primary/5"
|
? isDark
|
||||||
: "border-transparent hover:border-border hover:bg-accent/50",
|
? "border-[#2b8ffe] bg-[#0b4fae]/65 shadow-[0_0_0_1px_rgba(43,143,254,0.5),0_12px_28px_rgba(37,128,255,0.25)]"
|
||||||
|
: "agent-sidebar-card--active border-primary/50 bg-primary/10 shadow-sm"
|
||||||
|
: isDark
|
||||||
|
? "border-[#2b8ffe]/20 bg-[#042b59]/35 hover:border-[#2b8ffe]/60 hover:bg-[#063b77]/60"
|
||||||
|
: "border-transparent hover:border-border hover:bg-accent/50",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg text-white shadow-sm"
|
className={cn(
|
||||||
|
"mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-lg text-white shadow-sm",
|
||||||
|
isDark &&
|
||||||
|
isActive &&
|
||||||
|
"ring-2 ring-[#83c1ff]/35 shadow-[0_0_18px_rgba(43,143,254,0.45)]",
|
||||||
|
)}
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `linear-gradient(135deg, ${from}, ${to})`,
|
backgroundImage: `linear-gradient(135deg, ${from}, ${to})`,
|
||||||
|
color: foreground,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Bot className="size-[18px]" />
|
<Bot className="size-[19px]" />
|
||||||
</span>
|
</span>
|
||||||
<span className="min-w-0 flex-1">
|
<span className="min-w-0 flex-1">
|
||||||
<span
|
<span
|
||||||
className={cn(
|
className={cn(
|
||||||
"block truncate text-[13px] font-semibold",
|
"block truncate text-[16px] leading-5 font-bold",
|
||||||
isActive ? "text-primary" : "text-foreground",
|
isActive
|
||||||
|
? isDark
|
||||||
|
? "text-white"
|
||||||
|
: "text-primary"
|
||||||
|
: isDark
|
||||||
|
? "text-white/95"
|
||||||
|
: "text-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{desensitize(agent.name)}
|
{desensitize(agent.name)}
|
||||||
</span>
|
</span>
|
||||||
<span className="mt-0.5 block truncate text-[11px] leading-snug text-muted-foreground">
|
<span
|
||||||
|
className={cn(
|
||||||
|
"mt-1 block truncate text-[13px] leading-[1.35]",
|
||||||
|
isDark
|
||||||
|
? isActive
|
||||||
|
? "text-[#d6eaff]"
|
||||||
|
: "text-[#9ebfe2]"
|
||||||
|
: "text-muted-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
{agent.description
|
{agent.description
|
||||||
? desensitize(agent.description)
|
? desensitize(agent.description)
|
||||||
: "智能体助手"}
|
: "智能体助手"}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
{isActive && (
|
{isActive && (
|
||||||
<span className="absolute top-1/2 right-1 h-6 w-1 -translate-y-1/2 rounded-full bg-primary" />
|
<span
|
||||||
|
className={cn(
|
||||||
|
"absolute top-1/2 right-1.5 h-8 w-1.5 -translate-y-1/2 rounded-full",
|
||||||
|
isDark
|
||||||
|
? "bg-[#2b8ffe] shadow-[0_0_14px_rgba(43,143,254,0.85)]"
|
||||||
|
: "bg-primary",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
@@ -338,14 +372,14 @@ function RecentChatsPane({ activeAgentId }: { activeAgentId?: string }) {
|
|||||||
const [renameValue, setRenameValue] = useState("");
|
const [renameValue, setRenameValue] = useState("");
|
||||||
const [shareThreadId, setShareThreadId] = useState<string | null>(null);
|
const [shareThreadId, setShareThreadId] = useState<string | null>(null);
|
||||||
|
|
||||||
// 排除调度/引导/会商类会话,与首页一致;置顶优先。
|
// 排除调度/会商类系统会话,与首页一致;智能体创建(bootstrap)会话保留展示
|
||||||
|
// (带机器人图标、点击回创建页);置顶优先。
|
||||||
const visibleThreads = useMemo(
|
const visibleThreads = useMemo(
|
||||||
() =>
|
() =>
|
||||||
sortThreadsPinnedFirst(
|
sortThreadsPinnedFirst(
|
||||||
threads.filter(
|
threads.filter(
|
||||||
(thread) =>
|
(thread) =>
|
||||||
thread.metadata?.thread_type !== "scheduler" &&
|
thread.metadata?.thread_type !== "scheduler" &&
|
||||||
thread.metadata?.thread_type !== "bootstrap" &&
|
|
||||||
thread.metadata?.thread_type !== "roundtable",
|
thread.metadata?.thread_type !== "roundtable",
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@@ -450,7 +484,8 @@ function RecentChatsPane({ activeAgentId }: { activeAgentId?: string }) {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
filteredThreads.map((thread) => {
|
filteredThreads.map((thread) => {
|
||||||
const href = pathOf(thread);
|
const isBoot = isBootstrapThread(thread);
|
||||||
|
const href = isBoot ? bootstrapResumePath(thread.thread_id) : pathOf(thread);
|
||||||
const isActive = href === pathname;
|
const isActive = href === pathname;
|
||||||
const pinned = isThreadPinned(thread);
|
const pinned = isThreadPinned(thread);
|
||||||
const favorited = isThreadFavorite(thread);
|
const favorited = isThreadFavorite(thread);
|
||||||
@@ -468,12 +503,22 @@ function RecentChatsPane({ activeAgentId }: { activeAgentId?: string }) {
|
|||||||
: "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
|
: "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<MessageSquare
|
{isBoot ? (
|
||||||
className={cn(
|
<Bot
|
||||||
"size-3.5 shrink-0",
|
className={cn(
|
||||||
isActive ? "text-primary" : "text-muted-foreground/70",
|
"size-3.5 shrink-0",
|
||||||
)}
|
isActive ? "text-primary" : "text-muted-foreground/70",
|
||||||
/>
|
)}
|
||||||
|
aria-label="智能体创建会话"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<MessageSquare
|
||||||
|
className={cn(
|
||||||
|
"size-3.5 shrink-0",
|
||||||
|
isActive ? "text-primary" : "text-muted-foreground/70",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
{pinned && (
|
{pinned && (
|
||||||
<Pin className="text-muted-foreground/70 size-3 shrink-0" />
|
<Pin className="text-muted-foreground/70 size-3 shrink-0" />
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -43,6 +43,7 @@ import {
|
|||||||
import { Switch } from "@/components/ui/switch";
|
import { Switch } from "@/components/ui/switch";
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
import { AgentQuestionEditor } from "@/components/workspace/agents/agent-question-editor";
|
import { AgentQuestionEditor } from "@/components/workspace/agents/agent-question-editor";
|
||||||
|
import { AgentRecentChats } from "@/components/workspace/agents/agent-recent-chats";
|
||||||
import { useArtifactsOptional } from "@/components/workspace/artifacts";
|
import { useArtifactsOptional } from "@/components/workspace/artifacts";
|
||||||
import { EnabledSkillList } from "@/components/workspace/agents/enabled-skill-list";
|
import { EnabledSkillList } from "@/components/workspace/agents/enabled-skill-list";
|
||||||
import { SkillPickerSheet } from "@/components/workspace/agents/skill-picker-sheet";
|
import { SkillPickerSheet } from "@/components/workspace/agents/skill-picker-sheet";
|
||||||
@@ -59,6 +60,7 @@ import {
|
|||||||
type UpdateAgentRequest,
|
type UpdateAgentRequest,
|
||||||
} from "@/core/agents";
|
} from "@/core/agents";
|
||||||
import { getStoredAuth } from "@/core/auth";
|
import { getStoredAuth } from "@/core/auth";
|
||||||
|
import { useLiveAccount } from "@/core/auth/use-live-account";
|
||||||
import { isAgentSkillCandidate } from "@/core/skills";
|
import { isAgentSkillCandidate } from "@/core/skills";
|
||||||
import { useSkills } from "@/core/skills/hooks";
|
import { useSkills } from "@/core/skills/hooks";
|
||||||
import { usePublishSquares } from "@/core/system-settings/hooks";
|
import { usePublishSquares } from "@/core/system-settings/hooks";
|
||||||
@@ -98,15 +100,17 @@ function Section({
|
|||||||
icon,
|
icon,
|
||||||
title,
|
title,
|
||||||
extra,
|
extra,
|
||||||
|
className,
|
||||||
children,
|
children,
|
||||||
}: {
|
}: {
|
||||||
icon?: ReactNode;
|
icon?: ReactNode;
|
||||||
title: string;
|
title: string;
|
||||||
extra?: ReactNode;
|
extra?: ReactNode;
|
||||||
|
className?: string;
|
||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<section className="bg-card/60 rounded-xl border p-4">
|
<section className={cn("bg-card/60 rounded-xl border p-4", className)}>
|
||||||
<div className="mb-3 flex items-center justify-between gap-2">
|
<div className="mb-3 flex items-center justify-between gap-2">
|
||||||
<h4 className="text-foreground flex items-center gap-1.5 text-sm font-semibold">
|
<h4 className="text-foreground flex items-center gap-1.5 text-sm font-semibold">
|
||||||
{icon}
|
{icon}
|
||||||
@@ -135,6 +139,17 @@ export function AgentDetailPanel({
|
|||||||
onAskQuestion,
|
onAskQuestion,
|
||||||
disabled,
|
disabled,
|
||||||
defaultCollapsed,
|
defaultCollapsed,
|
||||||
|
showRecentChats,
|
||||||
|
compactAppearanceActions,
|
||||||
|
avatarSrc,
|
||||||
|
positionName,
|
||||||
|
skillsIcon,
|
||||||
|
skillsTitle,
|
||||||
|
showCommonQuestions = false,
|
||||||
|
panelTitle,
|
||||||
|
embedded,
|
||||||
|
hideStatusBadges = false,
|
||||||
|
editIcon,
|
||||||
}: {
|
}: {
|
||||||
agent: Agent | null | undefined;
|
agent: Agent | null | undefined;
|
||||||
agentName: string;
|
agentName: string;
|
||||||
@@ -142,6 +157,23 @@ export function AgentDetailPanel({
|
|||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
/** 初始收起(任务工作区进入时默认收起智能体信息面板)。 */
|
/** 初始收起(任务工作区进入时默认收起智能体信息面板)。 */
|
||||||
defaultCollapsed?: boolean;
|
defaultCollapsed?: boolean;
|
||||||
|
/** 在面板底部展示「有关此智能体的最近对话」(仅智能体问答页开启,任务工作区不展示)。 */
|
||||||
|
showRecentChats?: boolean;
|
||||||
|
/** 简洁模式下挂在右上角收起/展开按钮左侧的外观控件。 */
|
||||||
|
compactAppearanceActions?: ReactNode;
|
||||||
|
avatarSrc?: string;
|
||||||
|
positionName?: string;
|
||||||
|
skillsIcon?: ReactNode;
|
||||||
|
skillsTitle?: string;
|
||||||
|
showCommonQuestions?: boolean;
|
||||||
|
/** Overrides the standard panel heading for an embedded consumer. */
|
||||||
|
panelTitle?: string;
|
||||||
|
/** Renders one fixed panel instead of the responsive collapsible rail. */
|
||||||
|
embedded?: boolean;
|
||||||
|
/** Keeps deployment/status badges out of an embedded product surface. */
|
||||||
|
hideStatusBadges?: boolean;
|
||||||
|
/** Optional icon used by the compact embedded edit action. */
|
||||||
|
editIcon?: ReactNode;
|
||||||
}) {
|
}) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [collapsed, setCollapsed] = useState(defaultCollapsed ?? false);
|
const [collapsed, setCollapsed] = useState(defaultCollapsed ?? false);
|
||||||
@@ -159,6 +191,8 @@ export function AgentDetailPanel({
|
|||||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||||
const [publishPickerOpen, setPublishPickerOpen] = useState(false);
|
const [publishPickerOpen, setPublishPickerOpen] = useState(false);
|
||||||
const [detailSkillName, setDetailSkillName] = useState<string | null>(null);
|
const [detailSkillName, setDetailSkillName] = useState<string | null>(null);
|
||||||
|
// 发布以实时 token 执行 —— 用 live 账号提示发布者并检测账号是否被切换。
|
||||||
|
const live = useLiveAccount();
|
||||||
|
|
||||||
const updateAgent = useUpdateAgent();
|
const updateAgent = useUpdateAgent();
|
||||||
const deleteAgent = useDeleteAgent();
|
const deleteAgent = useDeleteAgent();
|
||||||
@@ -343,19 +377,39 @@ export function AgentDetailPanel({
|
|||||||
setPublishPickerOpen(true);
|
setPublishPickerOpen(true);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (!warnIfAccountSwitched()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
try {
|
try {
|
||||||
await updateAgent.mutateAsync({
|
await updateAgent.mutateAsync({
|
||||||
id: agent.id,
|
id: agent.id,
|
||||||
request: { published: !agent.published },
|
request: { published: !agent.published },
|
||||||
});
|
});
|
||||||
toast.success(agent.published ? "已下架" : "已发布");
|
toast.success(
|
||||||
|
agent.published ? "已下架" : `已发布(操作账号:${live.displayName})`,
|
||||||
|
);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error(err instanceof Error ? err.message : String(err));
|
toast.error(err instanceof Error ? err.message : String(err));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 发布以实时 token 执行。会话中途账号被切换(常见于另一标签页登录了别的账号)时
|
||||||
|
// 先弹确认,避免误以本人之外的账号执行发布。返回 false = 用户取消。
|
||||||
|
function warnIfAccountSwitched(): boolean {
|
||||||
|
if (!live.switched) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return window.confirm(
|
||||||
|
`当前登录账号已从「${live.mountDisplayName}」切换为「${live.displayName}」。\n` +
|
||||||
|
`本次发布将以「${live.displayName}」执行。如需以「${live.mountDisplayName}」操作,请取消并刷新页面。\n\n仍要继续吗?`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
async function handlePublishToSquare(squareId: string) {
|
async function handlePublishToSquare(squareId: string) {
|
||||||
if (!agent) return;
|
if (!agent) return;
|
||||||
|
if (!warnIfAccountSwitched()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
try {
|
try {
|
||||||
await updateAgent.mutateAsync({
|
await updateAgent.mutateAsync({
|
||||||
id: agent.id,
|
id: agent.id,
|
||||||
@@ -363,7 +417,7 @@ export function AgentDetailPanel({
|
|||||||
});
|
});
|
||||||
const sqName =
|
const sqName =
|
||||||
publishSquares?.squares.find((s) => s.id === squareId)?.name ?? "广场";
|
publishSquares?.squares.find((s) => s.id === squareId)?.name ?? "广场";
|
||||||
toast.success(`已发布到「${sqName}」`);
|
toast.success(`已发布到「${sqName}」(操作账号:${live.displayName})`);
|
||||||
setPublishPickerOpen(false);
|
setPublishPickerOpen(false);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
toast.error(err instanceof Error ? err.message : String(err));
|
toast.error(err instanceof Error ? err.message : String(err));
|
||||||
@@ -442,11 +496,25 @@ export function AgentDetailPanel({
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<Button size="sm" variant="outline" onClick={beginEdit}>
|
{embedded ? (
|
||||||
<SquarePenIcon className="size-3.5" />
|
<Tooltip content="编辑智能体">
|
||||||
编辑
|
<Button
|
||||||
</Button>
|
type="button"
|
||||||
{canTogglePublish && (
|
size="icon-sm"
|
||||||
|
variant="ghost"
|
||||||
|
onClick={beginEdit}
|
||||||
|
aria-label="编辑智能体"
|
||||||
|
>
|
||||||
|
{editIcon ?? <SquarePenIcon className="size-3.5" />}
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
) : (
|
||||||
|
<Button size="sm" variant="outline" onClick={beginEdit}>
|
||||||
|
<SquarePenIcon className="size-3.5" />
|
||||||
|
编辑
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
{!embedded && canTogglePublish && (
|
||||||
<Tooltip content={agent?.published ? "下架" : "发布"}>
|
<Tooltip content={agent?.published ? "下架" : "发布"}>
|
||||||
<Button
|
<Button
|
||||||
size="icon-sm"
|
size="icon-sm"
|
||||||
@@ -463,17 +531,19 @@ export function AgentDetailPanel({
|
|||||||
</Button>
|
</Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)}
|
||||||
<Tooltip content="删除智能体">
|
{!embedded && (
|
||||||
<Button
|
<Tooltip content="删除智能体">
|
||||||
size="icon-sm"
|
<Button
|
||||||
variant="ghost"
|
size="icon-sm"
|
||||||
className="text-destructive hover:text-destructive"
|
variant="ghost"
|
||||||
onClick={() => setDeleteOpen(true)}
|
className="text-destructive hover:text-destructive"
|
||||||
aria-label="删除智能体"
|
onClick={() => setDeleteOpen(true)}
|
||||||
>
|
aria-label="删除智能体"
|
||||||
<Trash2Icon className="size-3.5" />
|
>
|
||||||
</Button>
|
<Trash2Icon className="size-3.5" />
|
||||||
</Tooltip>
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
) : null;
|
) : null;
|
||||||
@@ -490,8 +560,12 @@ export function AgentDetailPanel({
|
|||||||
{/* ── Identity / 基础信息 ─────────────────────────────────────────── */}
|
{/* ── Identity / 基础信息 ─────────────────────────────────────────── */}
|
||||||
<section className="bg-card/60 rounded-xl border p-4">
|
<section className="bg-card/60 rounded-xl border p-4">
|
||||||
<div className="flex items-start gap-3">
|
<div className="flex items-start gap-3">
|
||||||
<div className="bg-primary/10 ring-primary/15 flex size-12 shrink-0 items-center justify-center rounded-2xl ring-1">
|
<div className="agent-avatar bg-primary/10 ring-primary/15 flex size-12 shrink-0 items-center justify-center rounded-2xl ring-1">
|
||||||
<BotIcon className="text-primary size-6" />
|
{avatarSrc ? (
|
||||||
|
<img src={avatarSrc} alt="" aria-hidden="true" className="size-9" />
|
||||||
|
) : (
|
||||||
|
<BotIcon className="text-primary size-6" />
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1 space-y-1.5">
|
<div className="min-w-0 flex-1 space-y-1.5">
|
||||||
{editing && draft ? (
|
{editing && draft ? (
|
||||||
@@ -511,9 +585,16 @@ export function AgentDetailPanel({
|
|||||||
{displayName}
|
{displayName}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="flex flex-wrap items-center gap-1">
|
{!editing && positionName && (
|
||||||
{statusBadges}
|
<div className="position-agent-role text-sm">
|
||||||
</div>
|
岗位:{desensitize(positionName)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!hideStatusBadges && (
|
||||||
|
<div className="flex flex-wrap items-center gap-1">
|
||||||
|
{statusBadges}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
{!editing && agent.owner_username && !agent.builtin && (
|
{!editing && agent.owner_username && !agent.builtin && (
|
||||||
<div className="text-muted-foreground flex items-center gap-1 text-xs">
|
<div className="text-muted-foreground flex items-center gap-1 text-xs">
|
||||||
<UserRoundIcon className="size-3 shrink-0" />
|
<UserRoundIcon className="size-3 shrink-0" />
|
||||||
@@ -616,7 +697,7 @@ export function AgentDetailPanel({
|
|||||||
|
|
||||||
|
|
||||||
{/* ── 常用问题 ───────────────────────────────────────────────────── */}
|
{/* ── 常用问题 ───────────────────────────────────────────────────── */}
|
||||||
{(editing || questions.length > 0 || canEdit) && (
|
{(showCommonQuestions || editing || questions.length > 0 || canEdit) && (
|
||||||
<Section
|
<Section
|
||||||
icon={<MessageCircleQuestionIcon className="size-3.5" />}
|
icon={<MessageCircleQuestionIcon className="size-3.5" />}
|
||||||
title="常用问题"
|
title="常用问题"
|
||||||
@@ -757,8 +838,9 @@ export function AgentDetailPanel({
|
|||||||
|
|
||||||
{/* ── 技能管理 ───────────────────────────────────────────────────── */}
|
{/* ── 技能管理 ───────────────────────────────────────────────────── */}
|
||||||
<Section
|
<Section
|
||||||
icon={<SparklesIcon className="size-3.5" />}
|
icon={skillsIcon ?? <SparklesIcon className="size-3.5" />}
|
||||||
title={`已启用技能 ${skillNamesShown.length} 个`}
|
title={skillsTitle ?? `已启用技能 ${skillNamesShown.length} 个`}
|
||||||
|
className="position-roundtable-skills-section"
|
||||||
extra={
|
extra={
|
||||||
editing ? (
|
editing ? (
|
||||||
<Button
|
<Button
|
||||||
@@ -791,15 +873,21 @@ export function AgentDetailPanel({
|
|||||||
onViewDetail={setDetailSkillName}
|
onViewDetail={setDetailSkillName}
|
||||||
/>
|
/>
|
||||||
</Section>
|
</Section>
|
||||||
|
|
||||||
|
{/* ── 最近对话(右下角,仅智能体问答页展示,编辑态隐藏)──────────── */}
|
||||||
|
{showRecentChats && !editing && <AgentRecentChats agentId={agent.id} />}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
const panelChrome = (collapseButton: ReactNode) => (
|
const panelChrome = (collapseButton: ReactNode) => (
|
||||||
<>
|
<>
|
||||||
<div className="flex h-12 shrink-0 items-center justify-between border-b px-4">
|
<div className="flex h-12 shrink-0 items-center justify-between border-b px-4">
|
||||||
<span className="text-sm font-semibold">智能体信息</span>
|
<span className="shrink-0 whitespace-nowrap text-sm font-semibold">
|
||||||
<div className="flex items-center gap-1">
|
{panelTitle ?? "智能体信息"}
|
||||||
|
</span>
|
||||||
|
<div className="flex min-w-0 items-center gap-1">
|
||||||
{headerActions}
|
{headerActions}
|
||||||
|
{compactAppearanceActions}
|
||||||
{collapseButton}
|
{collapseButton}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -810,18 +898,25 @@ export function AgentDetailPanel({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* ── Desktop (lg+): inline aside, collapsible to a rail ───────────── */}
|
{/* ── Desktop (lg+): inline aside, collapsible to a rail ───────────── */}
|
||||||
{collapsed ? (
|
{embedded ? (
|
||||||
<div className="hidden shrink-0 flex-col items-center border-l pt-3 lg:flex">
|
<aside className="bg-card/40 flex h-full w-full min-w-0 shrink-0 flex-col border-l">
|
||||||
<Tooltip content="智能体信息">
|
{panelChrome(null)}
|
||||||
<Button
|
</aside>
|
||||||
variant="ghost"
|
) : collapsed ? (
|
||||||
size="icon-sm"
|
<div className="hidden shrink-0 items-start border-l px-2 pt-3 lg:flex">
|
||||||
onClick={() => setCollapsed(false)}
|
<div className="flex items-center gap-1">
|
||||||
aria-label="展开智能体信息"
|
{compactAppearanceActions}
|
||||||
>
|
<Tooltip content="智能体信息">
|
||||||
<PanelRightOpenIcon className="size-4" />
|
<Button
|
||||||
</Button>
|
variant="ghost"
|
||||||
</Tooltip>
|
size="icon-sm"
|
||||||
|
onClick={() => setCollapsed(false)}
|
||||||
|
aria-label="展开智能体信息"
|
||||||
|
>
|
||||||
|
<PanelRightOpenIcon className="size-4" />
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<aside className="bg-card/40 hidden h-full w-[360px] shrink-0 flex-col border-l lg:flex">
|
<aside className="bg-card/40 hidden h-full w-[360px] shrink-0 flex-col border-l lg:flex">
|
||||||
@@ -840,30 +935,34 @@ export function AgentDetailPanel({
|
|||||||
</aside>
|
</aside>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* ── Narrow screens (<lg): rail trigger + drawer with the same body ── */}
|
{!embedded && (
|
||||||
<div className="flex shrink-0 flex-col items-center border-l pt-3 lg:hidden">
|
<>
|
||||||
<Tooltip content="智能体信息">
|
{/* ── Narrow screens (<lg): rail trigger + drawer with the same body ── */}
|
||||||
<Button
|
<div className="flex shrink-0 flex-col items-center border-l pt-3 lg:hidden">
|
||||||
variant="ghost"
|
<Tooltip content="智能体信息">
|
||||||
size="icon-sm"
|
<Button
|
||||||
onClick={() => setMobileOpen(true)}
|
variant="ghost"
|
||||||
aria-label="打开智能体信息"
|
size="icon-sm"
|
||||||
>
|
onClick={() => setMobileOpen(true)}
|
||||||
<InfoIcon className="size-4" />
|
aria-label="打开智能体信息"
|
||||||
</Button>
|
>
|
||||||
</Tooltip>
|
<InfoIcon className="size-4" />
|
||||||
</div>
|
</Button>
|
||||||
<Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
|
</Tooltip>
|
||||||
<SheetContent side="right" className="flex w-full flex-col gap-0 p-0 sm:max-w-md">
|
</div>
|
||||||
<SheetHeader className="border-b px-4 pb-3 pt-4">
|
<Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
|
||||||
<SheetTitle className="flex items-center justify-between text-sm">
|
<SheetContent side="right" className="flex w-full flex-col gap-0 p-0 sm:max-w-md">
|
||||||
智能体信息
|
<SheetHeader className="border-b px-4 pb-3 pt-4">
|
||||||
<span className="mr-6">{headerActions}</span>
|
<SheetTitle className="flex items-center justify-between text-sm">
|
||||||
</SheetTitle>
|
智能体信息
|
||||||
</SheetHeader>
|
<span className="mr-6">{headerActions}</span>
|
||||||
<div className="min-h-0 flex-1 overflow-y-auto">{body}</div>
|
</SheetTitle>
|
||||||
</SheetContent>
|
</SheetHeader>
|
||||||
</Sheet>
|
<div className="min-h-0 flex-1 overflow-y-auto">{body}</div>
|
||||||
|
</SheetContent>
|
||||||
|
</Sheet>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* ── Secondary surfaces ───────────────────────────────────────────── */}
|
{/* ── Secondary surfaces ───────────────────────────────────────────── */}
|
||||||
<SkillPickerSheet
|
<SkillPickerSheet
|
||||||
@@ -921,6 +1020,23 @@ export function AgentDetailPanel({
|
|||||||
loading={updateAgent.isPending}
|
loading={updateAgent.isPending}
|
||||||
onConfirm={(squareId) => void handlePublishToSquare(squareId)}
|
onConfirm={(squareId) => void handlePublishToSquare(squareId)}
|
||||||
description="请选择要把该智能体发布到哪个广场。每个智能体只能归属一个广场,不会重复出现。"
|
description="请选择要把该智能体发布到哪个广场。每个智能体只能归属一个广场,不会重复出现。"
|
||||||
|
accountNotice={
|
||||||
|
<div className="text-xs">
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
发布操作账号:
|
||||||
|
<span className="text-foreground font-medium">
|
||||||
|
「{live.displayName}」
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
{live.switched && (
|
||||||
|
<p className="text-destructive mt-1">
|
||||||
|
⚠ 当前登录账号已从「{live.mountDisplayName}」切换为「
|
||||||
|
{live.displayName}」。如需以「{live.mountDisplayName}
|
||||||
|
」操作,请刷新页面确认。
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -138,7 +138,7 @@ export function AgentModuleSettingsDialog({
|
|||||||
key={agent.id}
|
key={agent.id}
|
||||||
className="flex items-start gap-3 rounded-xl border border-border/60 bg-card p-3"
|
className="flex items-start gap-3 rounded-xl border border-border/60 bg-card p-3"
|
||||||
>
|
>
|
||||||
<div className="bg-primary/10 text-primary mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg">
|
<div className="agent-avatar bg-primary/10 text-primary mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg">
|
||||||
<Bot className="size-4" />
|
<Bot className="size-4" />
|
||||||
</div>
|
</div>
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
|
|||||||
@@ -107,33 +107,11 @@ function groupAgentsByTag(agents: Agent[], allowedTagIds: string[]): AgentGroup[
|
|||||||
return groups;
|
return groups;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
export function useAgentModuleSidebarData(moduleKey: string) {
|
||||||
* 「按类型聚合智能体 + 聊天记录」左栏(需求 0616 #3 zzJC / #4 zzXD)。
|
const { agents, isLoading: agentsLoading } = useAgents();
|
||||||
*
|
|
||||||
* - 上半:可见智能体按标签(类型)分组、可折叠;点击进入该智能体对话(保持当前路由
|
|
||||||
* 命名空间,全量模式下为 /page/strategy)。
|
|
||||||
* - 下半:聊天记录 —— 仅与本模块智能体(即左栏列出的智能体)的会话,按 metadata.agent_id 过滤。
|
|
||||||
* - 宽度与通用问答左栏一致(``--sidebar-width``)。
|
|
||||||
*/
|
|
||||||
export function AgentModuleSidebar({
|
|
||||||
moduleKey,
|
|
||||||
activeAgentId,
|
|
||||||
onOpenSettings,
|
|
||||||
}: {
|
|
||||||
moduleKey: string;
|
|
||||||
activeAgentId?: string;
|
|
||||||
/** 传入则在左栏顶部显示设置齿轮(admin)。 */
|
|
||||||
onOpenSettings?: () => void;
|
|
||||||
}) {
|
|
||||||
const routeBase = useRouteBase();
|
|
||||||
const pathname = usePathname();
|
|
||||||
// 智能体图标配色分主题:深蓝主题用规范蓝-青系,其它(浅色)保持原高彩度色,互不影响。
|
|
||||||
const { theme } = useTheme();
|
|
||||||
const isDark = theme === "dark";
|
|
||||||
const { agents } = useAgents();
|
|
||||||
const { data: threads = [] } = useThreads();
|
const { data: threads = [] } = useThreads();
|
||||||
const { data: moduleConfig } = useAgentModuleConfig(moduleKey);
|
const { data: moduleConfig, isLoading: configLoading } =
|
||||||
const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
|
useAgentModuleConfig(moduleKey);
|
||||||
|
|
||||||
const allowedTagIds = useMemo(
|
const allowedTagIds = useMemo(
|
||||||
() => moduleConfig?.tag_ids ?? [],
|
() => moduleConfig?.tag_ids ?? [],
|
||||||
@@ -161,6 +139,56 @@ export function AgentModuleSidebar({
|
|||||||
[threads, moduleAgentIds],
|
[threads, moduleAgentIds],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
groups,
|
||||||
|
moduleAgentIds,
|
||||||
|
moduleThreads,
|
||||||
|
allowedTagIds,
|
||||||
|
// admin 是否已确认该模块展示的智能体类型(配置了标签)。
|
||||||
|
hasConfiguredType: allowedTagIds.length > 0,
|
||||||
|
isLoading: agentsLoading || configLoading,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 「按类型聚合智能体 + 聊天记录」左栏(需求 0616 #3 zzJC / #4 zzXD)。
|
||||||
|
*
|
||||||
|
* - 上半:可见智能体按标签(类型)分组、可折叠;点击进入该智能体对话(保持当前路由
|
||||||
|
* 命名空间,全量模式下为 /page/strategy)。
|
||||||
|
* - 下半:聊天记录 —— 仅与本模块智能体(即左栏列出的智能体)的会话,按 metadata.agent_id 过滤。
|
||||||
|
* - 宽度与通用问答左栏一致(``--sidebar-width``)。
|
||||||
|
*/
|
||||||
|
export function AgentModuleSidebar({
|
||||||
|
moduleKey,
|
||||||
|
activeAgentId,
|
||||||
|
activeThreadId,
|
||||||
|
routeBase: routeBaseProp,
|
||||||
|
headerTitle = "智能体",
|
||||||
|
className,
|
||||||
|
onOpenSettings,
|
||||||
|
}: {
|
||||||
|
moduleKey: string;
|
||||||
|
activeAgentId?: string;
|
||||||
|
activeThreadId?: string;
|
||||||
|
routeBase?: string;
|
||||||
|
headerTitle?: string;
|
||||||
|
className?: string;
|
||||||
|
/** 传入则在左栏顶部显示设置齿轮(admin)。 */
|
||||||
|
onOpenSettings?: () => void;
|
||||||
|
}) {
|
||||||
|
const contextRouteBase = useRouteBase();
|
||||||
|
const routeBase = routeBaseProp ?? contextRouteBase;
|
||||||
|
const pathname = usePathname();
|
||||||
|
// 智能体图标配色分主题:深蓝主题用规范蓝-青系,其它(浅色)保持原高彩度色,互不影响。
|
||||||
|
const { theme } = useTheme();
|
||||||
|
const isDark = theme === "dark";
|
||||||
|
const [collapsed, setCollapsed] = useState<Set<string>>(() => new Set());
|
||||||
|
const { groups, moduleThreads, hasConfiguredType } =
|
||||||
|
useAgentModuleSidebarData(moduleKey);
|
||||||
|
// 已确认智能体类型时,允许把上半「智能体类型」整块收起,把空间让给下半聊天记录。
|
||||||
|
const [agentsSectionCollapsed, setAgentsSectionCollapsed] = useState(false);
|
||||||
|
const agentsCollapsed = hasConfiguredType && agentsSectionCollapsed;
|
||||||
|
|
||||||
const toggleGroup = (key: string) =>
|
const toggleGroup = (key: string) =>
|
||||||
setCollapsed((prev) => {
|
setCollapsed((prev) => {
|
||||||
const next = new Set(prev);
|
const next = new Set(prev);
|
||||||
@@ -169,14 +197,109 @@ export function AgentModuleSidebar({
|
|||||||
return next;
|
return next;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 已确认类型时把所有分组的智能体拍平(单选类型一般只有一个分组),
|
||||||
|
// 标题行直接显示该类型名 + 数量,去掉额外的分组行。
|
||||||
|
const flatAgents = useMemo(() => groups.flatMap((g) => g.agents), [groups]);
|
||||||
|
const configuredTypeLabel =
|
||||||
|
groups.length === 1 ? (groups[0]?.label ?? "智能体类型") : "智能体类型";
|
||||||
|
|
||||||
|
const renderAgentCard = (agent: Agent, keyPrefix: string) => {
|
||||||
|
const href = `${routeBase}/agents/${agent.id}/chats/new`;
|
||||||
|
const isActive = agent.id === activeAgentId;
|
||||||
|
const { from, to, foreground } = agentColor(agent.id, theme);
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={`${keyPrefix}:${agent.id}`}
|
||||||
|
href={href}
|
||||||
|
onClick={() => {
|
||||||
|
try {
|
||||||
|
sessionStorage.setItem(`agent-module:${moduleKey}:last-agent`, agent.id);
|
||||||
|
} catch {
|
||||||
|
// Ignore storage failures; route navigation is the source of truth.
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className={cn(
|
||||||
|
"group relative flex w-full items-start gap-3 rounded-xl border px-3 py-2.5 transition-all duration-150",
|
||||||
|
isActive
|
||||||
|
? isDark
|
||||||
|
? "border-[#2b8ffe] bg-[#0b4fae]/65 shadow-[0_0_0_1px_rgba(43,143,254,0.5),0_12px_28px_rgba(37,128,255,0.25)]"
|
||||||
|
: "agent-sidebar-card--active border-primary/50 bg-primary/10 shadow-sm"
|
||||||
|
: isDark
|
||||||
|
? "border-[#2b8ffe]/20 bg-[#042b59]/35 hover:border-[#2b8ffe]/60 hover:bg-[#063b77]/60"
|
||||||
|
: "border-transparent hover:border-border hover:bg-accent/50",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-lg text-white shadow-sm",
|
||||||
|
isDark &&
|
||||||
|
isActive &&
|
||||||
|
"ring-2 ring-[#83c1ff]/35 shadow-[0_0_18px_rgba(43,143,254,0.45)]",
|
||||||
|
)}
|
||||||
|
style={{
|
||||||
|
backgroundImage: `linear-gradient(135deg, ${from}, ${to})`,
|
||||||
|
color: foreground,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Bot className="size-[19px]" />
|
||||||
|
</span>
|
||||||
|
<span className="min-w-0 flex-1">
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"block truncate text-[16px] leading-5 font-bold",
|
||||||
|
isActive
|
||||||
|
? isDark
|
||||||
|
? "text-white"
|
||||||
|
: "text-primary"
|
||||||
|
: isDark
|
||||||
|
? "text-white/95"
|
||||||
|
: "text-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{desensitize(agent.name)}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"mt-1 block truncate text-[13px] leading-[1.35]",
|
||||||
|
isDark
|
||||||
|
? isActive
|
||||||
|
? "text-[#d6eaff]"
|
||||||
|
: "text-[#9ebfe2]"
|
||||||
|
: "text-muted-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{agent.description ? desensitize(agent.description) : "智能体助手"}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
{isActive && (
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"absolute top-1/2 right-1.5 h-8 w-1.5 -translate-y-1/2 rounded-full",
|
||||||
|
isDark
|
||||||
|
? "bg-[#2b8ffe] shadow-[0_0_14px_rgba(43,143,254,0.85)]"
|
||||||
|
: "bg-primary",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
// 原有布局不变,仅做配色适配:深色下左栏改为半透明深蓝玻璃面板(对齐 .sidebar-contents:
|
// 原有布局不变,仅做配色适配:深色下左栏改为半透明深蓝玻璃面板(对齐 .sidebar-contents:
|
||||||
// bg rgba(3,38,80,.8) + 蓝色发光边框),叠 backdrop-blur 让外壳的深蓝底图朦胧透出;
|
// bg rgba(3,38,80,.8) + 蓝色发光边框),叠 backdrop-blur 让外壳的深蓝底图朦胧透出;
|
||||||
// 浅色保持白底。其余颜色已走语义 token 自适配。
|
// 浅色保持白底。其余颜色已走语义 token 自适配。
|
||||||
<aside className="flex h-full w-(--sidebar-width) shrink-0 flex-col overflow-hidden border-r border-border/70 bg-white text-foreground backdrop-blur-md dark:border-[#2b8ffe]/45 dark:bg-[#032650]/80">
|
<aside
|
||||||
|
className={cn(
|
||||||
|
"flex h-full w-(--sidebar-width) shrink-0 flex-col overflow-hidden border-r border-border/70 bg-white text-foreground backdrop-blur-md dark:border-[#2b8ffe]/45 dark:bg-[#032650]/80",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
{onOpenSettings && (
|
{onOpenSettings && (
|
||||||
<div className="flex shrink-0 items-center justify-between border-b border-border/60 px-3 py-2">
|
<div className="flex shrink-0 items-center justify-between border-b border-border/60 px-3 py-2">
|
||||||
<span className="text-xs font-semibold text-foreground/80">智能体</span>
|
<span className="text-xs font-semibold text-foreground/80">
|
||||||
|
{headerTitle}
|
||||||
|
</span>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={onOpenSettings}
|
onClick={onOpenSettings}
|
||||||
@@ -189,89 +312,116 @@ export function AgentModuleSidebar({
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* 上半:按类型分组的智能体(彩色卡片,与全量版看齐) */}
|
{/* 上半:智能体列表。
|
||||||
<div className="flex min-h-0 flex-[3] flex-col overflow-y-auto px-2 py-3">
|
- 未确认类型:按类型分组、可逐组折叠(与全量版一致)。
|
||||||
<h2 className="mb-1 px-3 py-1 text-[11px] font-semibold tracking-[0.04em] text-muted-foreground/80 select-none">
|
- 已确认类型:标题行直接显示该类型名 + 数量(去掉单独的分组行),
|
||||||
智能体类型
|
扁平列出该类型下的智能体,并可整块收起(grid 行高过渡动画),
|
||||||
</h2>
|
收起后只留标题、把高度让给下半聊天记录。 */}
|
||||||
{groups.length === 0 ? (
|
<div
|
||||||
<p className="px-3 py-1.5 text-xs text-muted-foreground/70">暂无智能体</p>
|
className={cn(
|
||||||
|
"flex flex-col px-2 py-3",
|
||||||
|
agentsCollapsed ? "shrink-0" : "min-h-0 flex-[3]",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{hasConfiguredType ? (
|
||||||
|
<>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setAgentsSectionCollapsed((prev) => !prev)}
|
||||||
|
title={agentsCollapsed ? "展开智能体" : "收起智能体"}
|
||||||
|
className="flex shrink-0 items-center justify-between px-3 py-1 text-[11px] font-semibold tracking-[0.04em] text-muted-foreground/80 transition-colors hover:text-muted-foreground select-none"
|
||||||
|
>
|
||||||
|
<span className="flex items-center gap-1.5 truncate">
|
||||||
|
<span className="truncate">{configuredTypeLabel}</span>
|
||||||
|
<span className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-normal text-muted-foreground tabular-nums">
|
||||||
|
{flatAgents.length}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<ChevronDown
|
||||||
|
className={cn(
|
||||||
|
"size-3.5 shrink-0 transition-transform duration-300",
|
||||||
|
agentsCollapsed && "-rotate-90",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"grid transition-[grid-template-rows] duration-300 ease-in-out",
|
||||||
|
agentsCollapsed
|
||||||
|
? "grid-rows-[0fr]"
|
||||||
|
: "mt-1 min-h-0 flex-1 grid-rows-[1fr]",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"min-h-0",
|
||||||
|
agentsCollapsed
|
||||||
|
? "overflow-hidden"
|
||||||
|
: "overflow-y-auto overflow-x-hidden",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{flatAgents.length === 0 ? (
|
||||||
|
<p className="px-3 py-1.5 text-xs text-muted-foreground/70">
|
||||||
|
暂无智能体
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
{flatAgents.map((agent) =>
|
||||||
|
renderAgentCard(agent, "configured"),
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex flex-col gap-1.5">
|
<>
|
||||||
{groups.map((group) => {
|
<h2 className="mb-1 shrink-0 px-3 py-1 text-[11px] font-semibold tracking-[0.04em] text-muted-foreground/80 select-none">
|
||||||
const isCollapsed = collapsed.has(group.key);
|
智能体类型
|
||||||
return (
|
</h2>
|
||||||
<div key={group.key}>
|
<div className="min-h-0 flex-1 overflow-y-auto overflow-x-hidden">
|
||||||
<button
|
{groups.length === 0 ? (
|
||||||
type="button"
|
<p className="px-3 py-1.5 text-xs text-muted-foreground/70">
|
||||||
onClick={() => toggleGroup(group.key)}
|
暂无智能体
|
||||||
className="flex w-full items-center justify-between px-3 py-1 text-[11px] font-semibold tracking-[0.04em] text-muted-foreground/80 transition-colors hover:text-muted-foreground select-none"
|
</p>
|
||||||
>
|
) : (
|
||||||
<span className="flex items-center gap-1.5 truncate">
|
<div className="flex flex-col gap-1.5">
|
||||||
<span className="truncate">{group.label}</span>
|
{groups.map((group) => {
|
||||||
<span className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-normal text-muted-foreground tabular-nums">
|
const isCollapsed = collapsed.has(group.key);
|
||||||
{group.agents.length}
|
return (
|
||||||
</span>
|
<div key={group.key}>
|
||||||
</span>
|
<button
|
||||||
<ChevronDown
|
type="button"
|
||||||
className={cn(
|
onClick={() => toggleGroup(group.key)}
|
||||||
"size-3.5 shrink-0 transition-transform duration-200",
|
className="flex w-full items-center justify-between px-3 py-1 text-[11px] font-semibold tracking-[0.04em] text-muted-foreground/80 transition-colors hover:text-muted-foreground select-none"
|
||||||
isCollapsed && "-rotate-90",
|
>
|
||||||
)}
|
<span className="flex items-center gap-1.5 truncate">
|
||||||
/>
|
<span className="truncate">{group.label}</span>
|
||||||
</button>
|
<span className="rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-normal text-muted-foreground tabular-nums">
|
||||||
{!isCollapsed && (
|
{group.agents.length}
|
||||||
<div className="mt-1 flex flex-col gap-1">
|
</span>
|
||||||
{group.agents.map((agent) => {
|
</span>
|
||||||
const href = `${routeBase}/agents/${agent.id}/chats/new`;
|
<ChevronDown
|
||||||
const isActive = agent.id === activeAgentId;
|
|
||||||
const { from, to } = agentColor(agent.id, isDark);
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
key={`${group.key}:${agent.id}`}
|
|
||||||
href={href}
|
|
||||||
className={cn(
|
className={cn(
|
||||||
"group relative flex w-full items-start gap-2.5 rounded-xl border px-2.5 py-2 transition-colors",
|
"size-3.5 shrink-0 transition-transform duration-200",
|
||||||
isActive
|
isCollapsed && "-rotate-90",
|
||||||
? "border-primary/40 bg-primary/5"
|
|
||||||
: "border-transparent hover:border-border hover:bg-accent/50",
|
|
||||||
)}
|
)}
|
||||||
>
|
/>
|
||||||
<span
|
</button>
|
||||||
className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg text-white shadow-sm"
|
{!isCollapsed && (
|
||||||
style={{
|
<div className="mt-1 flex flex-col gap-1">
|
||||||
backgroundImage: `linear-gradient(135deg, ${from}, ${to})`,
|
{group.agents.map((agent) =>
|
||||||
}}
|
renderAgentCard(agent, group.key),
|
||||||
>
|
|
||||||
<Bot className="size-[18px]" />
|
|
||||||
</span>
|
|
||||||
<span className="min-w-0 flex-1">
|
|
||||||
<span
|
|
||||||
className={cn(
|
|
||||||
"block truncate text-[13px] font-semibold",
|
|
||||||
isActive ? "text-primary" : "text-foreground",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{desensitize(agent.name)}
|
|
||||||
</span>
|
|
||||||
<span className="mt-0.5 block truncate text-[11px] leading-snug text-muted-foreground">
|
|
||||||
{agent.description
|
|
||||||
? desensitize(agent.description)
|
|
||||||
: "智能体助手"}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
{isActive && (
|
|
||||||
<span className="absolute top-1/2 right-1 h-6 w-1 -translate-y-1/2 rounded-full bg-primary" />
|
|
||||||
)}
|
)}
|
||||||
</Link>
|
</div>
|
||||||
);
|
)}
|
||||||
})}
|
</div>
|
||||||
</div>
|
);
|
||||||
)}
|
})}
|
||||||
</div>
|
</div>
|
||||||
);
|
)}
|
||||||
})}
|
</div>
|
||||||
</div>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -286,7 +436,8 @@ export function AgentModuleSidebar({
|
|||||||
<div className="flex flex-col gap-0.5">
|
<div className="flex flex-col gap-0.5">
|
||||||
{moduleThreads.map((thread) => {
|
{moduleThreads.map((thread) => {
|
||||||
const href = pathOfThread(thread, undefined, routeBase);
|
const href = pathOfThread(thread, undefined, routeBase);
|
||||||
const isActive = href === pathname;
|
const isActive =
|
||||||
|
thread.thread_id === activeThreadId || href === pathname;
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
key={thread.thread_id}
|
key={thread.thread_id}
|
||||||
|
|||||||
@@ -0,0 +1,79 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { MessageSquareIcon } from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { usePathname } from "next/navigation";
|
||||||
|
|
||||||
|
import { useThreadsPage } from "@/core/threads/hooks";
|
||||||
|
import { pathOfThread, titleOfThread } from "@/core/threads/utils";
|
||||||
|
import { desensitize } from "@/lib/desensitize";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const RECENT_LIMIT = 8;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 「有关此智能体的最近对话」—— 渲染在智能体详情面板底部(右下角)。
|
||||||
|
* 按 `metadata.agent_id` 过滤出该智能体的会话,点击直接打开对应对话。
|
||||||
|
*/
|
||||||
|
export function AgentRecentChats({ agentId }: { agentId: string }) {
|
||||||
|
const pathname = usePathname();
|
||||||
|
const { data } = useThreadsPage({
|
||||||
|
page: 1,
|
||||||
|
pageSize: RECENT_LIMIT,
|
||||||
|
metadata: { agent_id: agentId },
|
||||||
|
});
|
||||||
|
// 该智能体的会话里同样排除调度 / 引导 / 会商类系统会话。
|
||||||
|
const threads = (data?.threads ?? []).filter(
|
||||||
|
(th) =>
|
||||||
|
th.metadata?.thread_type !== "bootstrap" &&
|
||||||
|
th.metadata?.thread_type !== "scheduler" &&
|
||||||
|
th.metadata?.thread_type !== "roundtable",
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="bg-card/60 rounded-xl border p-4">
|
||||||
|
<div className="mb-3 flex items-center justify-between gap-2">
|
||||||
|
<h4 className="text-foreground flex items-center gap-1.5 text-sm font-semibold">
|
||||||
|
<MessageSquareIcon className="size-3.5" />
|
||||||
|
最近对话
|
||||||
|
</h4>
|
||||||
|
<span className="text-muted-foreground text-xs tabular-nums">
|
||||||
|
{threads.length} 个
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{threads.length === 0 ? (
|
||||||
|
<p className="text-muted-foreground/60 text-sm">暂无对话</p>
|
||||||
|
) : (
|
||||||
|
<div className="flex flex-col gap-1">
|
||||||
|
{threads.map((thread) => {
|
||||||
|
const href = pathOfThread(thread);
|
||||||
|
const isActive = href === pathname;
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
key={thread.thread_id}
|
||||||
|
href={href}
|
||||||
|
title={desensitize(titleOfThread(thread, "新对话"))}
|
||||||
|
className={cn(
|
||||||
|
"flex min-w-0 items-center gap-2 rounded-lg px-2 py-1.5 text-sm transition-colors",
|
||||||
|
isActive
|
||||||
|
? "bg-primary/5 text-primary font-medium"
|
||||||
|
: "text-muted-foreground hover:bg-accent hover:text-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<MessageSquareIcon
|
||||||
|
className={cn(
|
||||||
|
"size-3.5 shrink-0",
|
||||||
|
isActive ? "text-primary" : "text-muted-foreground/70",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<span className="truncate">
|
||||||
|
{desensitize(titleOfThread(thread, "新对话"))}
|
||||||
|
</span>
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -20,6 +20,7 @@ import {
|
|||||||
} from "@/components/ui/dialog";
|
} from "@/components/ui/dialog";
|
||||||
import { PromptInputButton } from "@/components/ai-elements/prompt-input";
|
import { PromptInputButton } from "@/components/ai-elements/prompt-input";
|
||||||
import { AgentManageDialog } from "@/components/workspace/agents/agent-manage-dialog";
|
import { AgentManageDialog } from "@/components/workspace/agents/agent-manage-dialog";
|
||||||
|
import { Tooltip } from "@/components/workspace/tooltip";
|
||||||
import { useAgentSelector, useAgentsPaginated } from "@/core/agents";
|
import { useAgentSelector, useAgentsPaginated } from "@/core/agents";
|
||||||
import type { Agent } from "@/core/agents";
|
import type { Agent } from "@/core/agents";
|
||||||
import { getStoredAuth } from "@/core/auth";
|
import { getStoredAuth } from "@/core/auth";
|
||||||
@@ -32,6 +33,10 @@ interface AgentSelectorProps {
|
|||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
/** 紧凑模式(CM 参考图):触发器改为灰底胶囊 + 主色机器人图标。 */
|
/** 紧凑模式(CM 参考图):触发器改为灰底胶囊 + 主色机器人图标。 */
|
||||||
compact?: boolean;
|
compact?: boolean;
|
||||||
|
/** 图标模式:用于 iframe 等底栏场景,仅显示机器人图标和可选清空按钮。 */
|
||||||
|
triggerVariant?: "default" | "icon";
|
||||||
|
iconButtonClassName?: string;
|
||||||
|
iconActiveClassName?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -48,6 +53,9 @@ export function AgentSelector({
|
|||||||
onAgentChange,
|
onAgentChange,
|
||||||
disabled,
|
disabled,
|
||||||
compact = false,
|
compact = false,
|
||||||
|
triggerVariant = "default",
|
||||||
|
iconButtonClassName,
|
||||||
|
iconActiveClassName,
|
||||||
}: AgentSelectorProps) {
|
}: AgentSelectorProps) {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [manageOpen, setManageOpen] = useState(false);
|
const [manageOpen, setManageOpen] = useState(false);
|
||||||
@@ -79,49 +87,92 @@ export function AgentSelector({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const triggerLabel = selectedAgent ? desensitize(selectedAgent.name) : "选择 Agent";
|
const triggerLabel = selectedAgent ? desensitize(selectedAgent.name) : "选择 Agent";
|
||||||
|
const iconTooltipLabel = selectedAgent ? triggerLabel : "未选择";
|
||||||
|
const iconMode = triggerVariant === "icon";
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Dialog open={open} onOpenChange={setOpen}>
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
<DialogTrigger asChild>
|
{iconMode ? (
|
||||||
<PromptInputButton
|
<Tooltip content={iconTooltipLabel}>
|
||||||
type="button"
|
<div>
|
||||||
disabled={disabled}
|
<DialogTrigger asChild>
|
||||||
className={cn(
|
<Button
|
||||||
"gap-1.5! rounded-full border px-3! shadow-none transition-colors",
|
type="button"
|
||||||
compact && "rounded-lg px-2.5! py-1! text-[11px] font-medium",
|
variant="ghost"
|
||||||
compact
|
size="icon"
|
||||||
? "border-transparent bg-gray-50/60 text-gray-600 hover:bg-gray-100/80 hover:text-gray-800 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700"
|
disabled={disabled}
|
||||||
: selectedAgent
|
aria-label={selectedAgent ? `已选择智能体:${triggerLabel}` : "选择智能体"}
|
||||||
? "border-[#d6a868] bg-[#fff3df] text-[#7a5417] hover:bg-[#ffe8c4]"
|
className={cn(
|
||||||
: "border-[#eee3d5] bg-[#fffaf5] text-[#7e6a57] hover:bg-white dark:border-slate-600 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700",
|
"relative size-9 rounded-full text-muted-foreground shadow-none hover:bg-muted/60 hover:text-foreground",
|
||||||
)}
|
selectedAgent && "text-amber-600 hover:text-amber-700",
|
||||||
>
|
selectedAgent && iconActiveClassName,
|
||||||
<BotIcon
|
iconButtonClassName,
|
||||||
className={cn("size-3", compact && "text-[var(--primary)]")}
|
)}
|
||||||
/>
|
>
|
||||||
<span className="max-w-[140px] truncate text-xs font-normal">
|
<BotIcon className="size-4" />
|
||||||
{triggerLabel}
|
{selectedAgent && (
|
||||||
</span>
|
<span
|
||||||
{selectedAgent && (
|
role="button"
|
||||||
<span
|
tabIndex={0}
|
||||||
role="button"
|
aria-label="清除已选 agent"
|
||||||
tabIndex={0}
|
className="absolute -right-1 -top-1 inline-flex size-4 items-center justify-center rounded-full border bg-background text-foreground shadow-sm hover:bg-muted"
|
||||||
aria-label="清除已选 agent"
|
onClick={handleClear}
|
||||||
className="ml-0.5 inline-flex items-center justify-center rounded-full p-0.5 hover:bg-[#ffd9a7]"
|
onKeyDown={(e) => {
|
||||||
onClick={handleClear}
|
if (e.key === "Enter" || e.key === " ") {
|
||||||
onKeyDown={(e) => {
|
e.preventDefault();
|
||||||
if (e.key === "Enter" || e.key === " ") {
|
onAgentChange(null);
|
||||||
e.preventDefault();
|
}
|
||||||
onAgentChange(null);
|
}}
|
||||||
}
|
>
|
||||||
}}
|
<XIcon className="size-2.5" />
|
||||||
>
|
</span>
|
||||||
<XIcon className="size-3" />
|
)}
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
</div>
|
||||||
|
</Tooltip>
|
||||||
|
) : (
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<PromptInputButton
|
||||||
|
type="button"
|
||||||
|
disabled={disabled}
|
||||||
|
className={cn(
|
||||||
|
"gap-1.5! rounded-full border px-3! shadow-none transition-colors",
|
||||||
|
compact && "rounded-lg px-2.5! py-1! text-[11px] font-medium",
|
||||||
|
compact
|
||||||
|
? "border-transparent bg-gray-50/60 text-gray-600 hover:bg-gray-100/80 hover:text-gray-800 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700"
|
||||||
|
: selectedAgent
|
||||||
|
? "border-[#d6a868] bg-[#fff3df] text-[#7a5417] hover:bg-[#ffe8c4]"
|
||||||
|
: "border-[#eee3d5] bg-[#fffaf5] text-[#7e6a57] hover:bg-white dark:border-slate-600 dark:bg-slate-700/50 dark:text-slate-300 dark:hover:bg-slate-700",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<BotIcon
|
||||||
|
className={cn("size-3", compact && "text-[var(--primary)]")}
|
||||||
|
/>
|
||||||
|
<span className="max-w-[140px] truncate text-xs font-normal">
|
||||||
|
{triggerLabel}
|
||||||
</span>
|
</span>
|
||||||
)}
|
{selectedAgent && (
|
||||||
</PromptInputButton>
|
<span
|
||||||
</DialogTrigger>
|
role="button"
|
||||||
|
tabIndex={0}
|
||||||
|
aria-label="清除已选 agent"
|
||||||
|
className="ml-0.5 inline-flex items-center justify-center rounded-full p-0.5 hover:bg-[#ffd9a7]"
|
||||||
|
onClick={handleClear}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (e.key === "Enter" || e.key === " ") {
|
||||||
|
e.preventDefault();
|
||||||
|
onAgentChange(null);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<XIcon className="size-3" />
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</PromptInputButton>
|
||||||
|
</DialogTrigger>
|
||||||
|
)}
|
||||||
<DialogContent className="overflow-hidden p-0 sm:max-w-md">
|
<DialogContent className="overflow-hidden p-0 sm:max-w-md">
|
||||||
<DialogTitle className="sr-only">选择 Agent</DialogTitle>
|
<DialogTitle className="sr-only">选择 Agent</DialogTitle>
|
||||||
<Command className="**:data-[slot=command-input-wrapper]:h-auto">
|
<Command className="**:data-[slot=command-input-wrapper]:h-auto">
|
||||||
|
|||||||
@@ -45,11 +45,32 @@ function skillLabel(skill: Skill) {
|
|||||||
|
|
||||||
function matchesQuery(skill: Skill, q: string) {
|
function matchesQuery(skill: Skill, q: string) {
|
||||||
if (!q) return true;
|
if (!q) return true;
|
||||||
return (
|
const haystack = [
|
||||||
skill.name.toLowerCase().includes(q) ||
|
skill.name,
|
||||||
(skill.name_zh ?? "").toLowerCase().includes(q) ||
|
skill.name_zh,
|
||||||
(skill.description ?? "").toLowerCase().includes(q)
|
skill.description,
|
||||||
);
|
skill.detail,
|
||||||
|
skill.category,
|
||||||
|
skill.license,
|
||||||
|
skill.source,
|
||||||
|
skill.state,
|
||||||
|
skill.owner_username,
|
||||||
|
skill.created_at,
|
||||||
|
skill.last_activity_at,
|
||||||
|
skill.use_count != null ? `使用 ${skill.use_count}` : null,
|
||||||
|
skill.view_count != null ? `查看 ${skill.view_count}` : null,
|
||||||
|
skill.patch_count != null ? `变迁 ${skill.patch_count}` : null,
|
||||||
|
...(skill.tags ?? []).flatMap((tag) => [
|
||||||
|
tag.name,
|
||||||
|
tag.description,
|
||||||
|
tag.color,
|
||||||
|
tag.usage_count != null ? `标签使用 ${tag.usage_count}` : null,
|
||||||
|
]),
|
||||||
|
]
|
||||||
|
.filter((value): value is string => typeof value === "string" && value.length > 0)
|
||||||
|
.join(" ")
|
||||||
|
.toLowerCase();
|
||||||
|
return haystack.includes(q);
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SkillTransferSelector({
|
export function SkillTransferSelector({
|
||||||
@@ -159,7 +180,7 @@ export function SkillTransferSelector({
|
|||||||
<div className="relative flex-1">
|
<div className="relative flex-1">
|
||||||
<SearchIcon className="text-muted-foreground absolute left-2 top-1/2 size-3.5 -translate-y-1/2" />
|
<SearchIcon className="text-muted-foreground absolute left-2 top-1/2 size-3.5 -translate-y-1/2" />
|
||||||
<Input
|
<Input
|
||||||
placeholder="搜索全部技能(中英文名称、描述)…"
|
placeholder="搜索技能名称、描述、分类、标签、变迁..."
|
||||||
value={search}
|
value={search}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
setSearch(e.currentTarget.value);
|
setSearch(e.currentTarget.value);
|
||||||
@@ -239,7 +260,7 @@ export function SkillTransferSelector({
|
|||||||
{/* Two-column transfer panes */}
|
{/* Two-column transfer panes */}
|
||||||
<div className="grid grid-cols-2 gap-3">
|
<div className="grid grid-cols-2 gap-3">
|
||||||
<SkillPane
|
<SkillPane
|
||||||
title="可用技能"
|
title="未勾选技能"
|
||||||
count={availableSkills.length}
|
count={availableSkills.length}
|
||||||
items={availableView}
|
items={availableView}
|
||||||
variant="available"
|
variant="available"
|
||||||
@@ -248,10 +269,10 @@ export function SkillTransferSelector({
|
|||||||
onPageChange={setAvailablePage}
|
onPageChange={setAvailablePage}
|
||||||
onPick={add}
|
onPick={add}
|
||||||
onViewDetail={onViewDetail}
|
onViewDetail={onViewDetail}
|
||||||
emptyHint={query || category !== ALL_CATEGORIES ? "没有匹配的技能" : "已全部启用"}
|
emptyHint={query || category !== ALL_CATEGORIES ? "没有匹配的技能" : "已全部勾选"}
|
||||||
/>
|
/>
|
||||||
<SkillPane
|
<SkillPane
|
||||||
title="已启用技能"
|
title="已勾选技能"
|
||||||
count={selectedSkills.length}
|
count={selectedSkills.length}
|
||||||
items={selectedView}
|
items={selectedView}
|
||||||
variant="selected"
|
variant="selected"
|
||||||
@@ -260,7 +281,7 @@ export function SkillTransferSelector({
|
|||||||
onPageChange={setSelectedPage}
|
onPageChange={setSelectedPage}
|
||||||
onPick={remove}
|
onPick={remove}
|
||||||
onViewDetail={onViewDetail}
|
onViewDetail={onViewDetail}
|
||||||
emptyHint={query ? "没有匹配的已选技能" : "尚未启用任何技能"}
|
emptyHint={query ? "没有匹配的已选技能" : "尚未勾选任何技能"}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,259 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Check, ExternalLink, LayoutIcon, PanelLeftIcon, Shirt } from "lucide-react";
|
||||||
|
import { useEffect, useMemo, useRef, useState } from "react";
|
||||||
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuLabel,
|
||||||
|
DropdownMenuSeparator,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import { useTheme, type ThemeType } from "@/contexts/ThemeContext";
|
||||||
|
import { useAppearanceSettings, useLayoutMode } from "@/core/system-settings/hooks";
|
||||||
|
import { isHideChromeActive } from "@/core/embed/embed-session";
|
||||||
|
import { env } from "@/env";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { buildLightAppUrl } from "@/strategy-components/lib/light-app";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 换肤 / 界面模式 顶栏控件。深色顶栏(Header)与简洁模式页面级顶栏(ChatPage 等)共用,
|
||||||
|
* 通过 `tone` 适配不同底色:
|
||||||
|
* - "banner-dark" / "banner-light":Header 落在主题 banner 上(白字 / 浅色 hover)。
|
||||||
|
* - "content":简洁模式聊天页浅底顶栏,走 foreground / muted-foreground。
|
||||||
|
*/
|
||||||
|
export type AppearanceControlTone = "banner-dark" | "banner-light" | "banner-custom" | "content";
|
||||||
|
|
||||||
|
// 换肤色板:红色=红白主题(light),蓝色=浅蓝主题(lightblue),冰川蓝=柔和浅蓝主题(iceblue),浅黄色=柔和黄主题(lightyellow),深蓝色=深色主题(dark)
|
||||||
|
export const THEME_SWATCHES: { id: ThemeType; label: string; color: string }[] = [
|
||||||
|
{ id: "light", label: "红色", color: "#cf1322" },
|
||||||
|
{ id: "lightgreen", label: "绿色", color: "#07c05f" },
|
||||||
|
{ id: "lightblue", label: "蓝色", color: "#0062d9" },
|
||||||
|
{ id: "iceblue", label: "冰川蓝", color: "#9BCEF1" },
|
||||||
|
{ id: "lightyellow", label: "浅黄色", color: "#F3FBD9" },
|
||||||
|
{ id: "dark", label: "深蓝色", color: "#002466" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const triggerToneClass = (tone: AppearanceControlTone) =>
|
||||||
|
tone === "banner-dark"
|
||||||
|
? "text-slate-400 hover:bg-slate-800/50 hover:text-slate-400"
|
||||||
|
: tone === "banner-light"
|
||||||
|
? "text-white hover:bg-[var(--brand-950)] hover:text-white active:bg-[#8a0618]"
|
||||||
|
: tone === "banner-custom"
|
||||||
|
? "text-[var(--navigation-foreground)] hover:bg-white/20 hover:text-[var(--navigation-foreground)] active:bg-white/30"
|
||||||
|
: "text-muted-foreground hover:bg-muted hover:text-foreground";
|
||||||
|
|
||||||
|
export function CompactShortcutButtons({ tone }: { tone: AppearanceControlTone }) {
|
||||||
|
const { data: appearance } = useAppearanceSettings();
|
||||||
|
const buttons = (appearance?.compact_shortcut_buttons ?? [])
|
||||||
|
.filter((button) => button.enabled && button.label.trim() && button.url.trim())
|
||||||
|
.sort((a, b) => a.sort_order - b.sort_order);
|
||||||
|
|
||||||
|
if (buttons.length === 0) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{buttons.map((button) => (
|
||||||
|
<Button
|
||||||
|
key={button.id}
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className={cn(
|
||||||
|
"h-8 max-w-[168px] shrink-0 gap-1.5 rounded-sm px-2 text-xs font-medium",
|
||||||
|
triggerToneClass(tone),
|
||||||
|
)}
|
||||||
|
title={button.label}
|
||||||
|
onClick={() => {
|
||||||
|
const url = buildLightAppUrl({
|
||||||
|
url: button.url,
|
||||||
|
routeParams: button.route_params.map((param) => ({ ...param })),
|
||||||
|
});
|
||||||
|
window.open(url, "_blank", "noopener,noreferrer");
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ExternalLink className="size-4 shrink-0" />
|
||||||
|
<span className="truncate">{button.label}</span>
|
||||||
|
</Button>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ThemeSwitcher({ tone }: { tone: AppearanceControlTone }) {
|
||||||
|
const { theme, setTheme } = useTheme();
|
||||||
|
const { data: appearance } = useAppearanceSettings();
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||||
|
const swatches = useMemo(
|
||||||
|
() => [
|
||||||
|
...THEME_SWATCHES,
|
||||||
|
...(appearance?.custom_themes ?? [])
|
||||||
|
.filter((preset) => preset.enabled)
|
||||||
|
.sort((a, b) => a.sort_order - b.sort_order)
|
||||||
|
.map((preset) => ({
|
||||||
|
id: preset.id as ThemeType,
|
||||||
|
label: preset.name,
|
||||||
|
color: preset.primary,
|
||||||
|
})),
|
||||||
|
],
|
||||||
|
[appearance?.custom_themes],
|
||||||
|
);
|
||||||
|
|
||||||
|
const cancelClose = () => {
|
||||||
|
if (closeTimer.current) {
|
||||||
|
clearTimeout(closeTimer.current);
|
||||||
|
closeTimer.current = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const scheduleClose = () => {
|
||||||
|
cancelClose();
|
||||||
|
closeTimer.current = setTimeout(() => setOpen(false), 120);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => () => cancelClose(), []);
|
||||||
|
|
||||||
|
if (env.FORCE_COLLAPSED_SIDEBAR || isHideChromeActive()) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="relative"
|
||||||
|
onMouseEnter={() => {
|
||||||
|
cancelClose();
|
||||||
|
setOpen(true);
|
||||||
|
}}
|
||||||
|
onMouseLeave={scheduleClose}
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
className={cn("size-8 shrink-0 rounded-sm", triggerToneClass(tone))}
|
||||||
|
title="换肤"
|
||||||
|
aria-haspopup="true"
|
||||||
|
aria-expanded={open}
|
||||||
|
>
|
||||||
|
<Shirt className="size-4" />
|
||||||
|
</Button>
|
||||||
|
{open ? (
|
||||||
|
<div className="absolute top-full left-1/2 z-50 -translate-x-1/2 pt-2">
|
||||||
|
<div className="relative flex max-w-64 flex-wrap items-center justify-center gap-2 rounded-lg border border-border bg-popover px-2.5 py-1.5 shadow-lg">
|
||||||
|
<div className="absolute -top-1 left-1/2 size-2 -translate-x-1/2 rotate-45 rounded-[1px] border-t border-l border-border bg-popover" />
|
||||||
|
{swatches.map((swatch) => {
|
||||||
|
const active = theme === swatch.id;
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={swatch.id}
|
||||||
|
type="button"
|
||||||
|
title={swatch.label}
|
||||||
|
aria-label={swatch.label}
|
||||||
|
aria-pressed={active}
|
||||||
|
onClick={() => {
|
||||||
|
setTheme(swatch.id);
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
className="size-5 rounded-full transition-transform hover:scale-110"
|
||||||
|
style={{
|
||||||
|
backgroundColor: swatch.color,
|
||||||
|
boxShadow: active
|
||||||
|
? `0 0 0 1.5px #ffffff, 0 0 0 3px ${swatch.color}`
|
||||||
|
: undefined,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const LAYOUT_OPTIONS = [
|
||||||
|
{
|
||||||
|
id: "full" as const,
|
||||||
|
label: "全量模式",
|
||||||
|
description: "展示侧边栏与顶栏导航",
|
||||||
|
icon: PanelLeftIcon,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "compact" as const,
|
||||||
|
label: "简洁模式",
|
||||||
|
description: "隐藏侧边栏与顶栏,获得更大工作区",
|
||||||
|
icon: LayoutIcon,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 界面模式(全量 / 简洁)下拉切换。换肤旁并排,图标 + 下拉:
|
||||||
|
* - 简洁模式 ChatPage 顶栏(全局顶栏被隐藏)。
|
||||||
|
* - 全量模式 Header 右上角。
|
||||||
|
* 用户未显式设置过界面模式时(mode === undefined),当前态按调用方所在的实际界面
|
||||||
|
* 兜底——`fallback` 指明这一回退值(Header 传 "full",ChatPage 传 "compact")。
|
||||||
|
*/
|
||||||
|
export function LayoutModeSwitcher({
|
||||||
|
tone,
|
||||||
|
fallback = "compact",
|
||||||
|
navigateTo = "/page/workspace/chats/new",
|
||||||
|
}: {
|
||||||
|
tone: AppearanceControlTone;
|
||||||
|
fallback?: "full" | "compact";
|
||||||
|
navigateTo?: string | null;
|
||||||
|
}) {
|
||||||
|
const [mode, setLayoutMode] = useLayoutMode();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const current = mode ?? fallback;
|
||||||
|
const TriggerIcon = current === "full" ? PanelLeftIcon : LayoutIcon;
|
||||||
|
|
||||||
|
if (env.FORCE_COLLAPSED_SIDEBAR || isHideChromeActive()) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="icon-sm"
|
||||||
|
className={cn("size-8 shrink-0 rounded-sm", triggerToneClass(tone))}
|
||||||
|
title="界面模式"
|
||||||
|
aria-label="界面模式"
|
||||||
|
>
|
||||||
|
<TriggerIcon className="size-4" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent align="end" sideOffset={8} className="min-w-56 rounded-lg">
|
||||||
|
<DropdownMenuLabel>界面模式</DropdownMenuLabel>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
|
{LAYOUT_OPTIONS.map((option) => {
|
||||||
|
const Icon = option.icon;
|
||||||
|
const active = current === option.id;
|
||||||
|
return (
|
||||||
|
<DropdownMenuItem
|
||||||
|
key={option.id}
|
||||||
|
onClick={() => {
|
||||||
|
setLayoutMode(option.id);
|
||||||
|
if (navigateTo) {
|
||||||
|
navigate(navigateTo);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="gap-2"
|
||||||
|
>
|
||||||
|
<Icon className="size-4 shrink-0" />
|
||||||
|
<div className="flex min-w-0 flex-col">
|
||||||
|
<span className="text-sm leading-tight">{option.label}</span>
|
||||||
|
<span className="text-muted-foreground text-xs leading-tight">
|
||||||
|
{option.description}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{active && <Check className="ml-auto size-4 shrink-0" />}
|
||||||
|
</DropdownMenuItem>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -11,6 +11,7 @@ import {
|
|||||||
LoaderIcon,
|
LoaderIcon,
|
||||||
PackageIcon,
|
PackageIcon,
|
||||||
SaveIcon,
|
SaveIcon,
|
||||||
|
SparklesIcon,
|
||||||
UploadCloudIcon,
|
UploadCloudIcon,
|
||||||
XIcon,
|
XIcon,
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
@@ -28,7 +29,7 @@ import {
|
|||||||
ArtifactHeader,
|
ArtifactHeader,
|
||||||
ArtifactTitle,
|
ArtifactTitle,
|
||||||
} from "@/components/ai-elements/artifact";
|
} from "@/components/ai-elements/artifact";
|
||||||
import { Select, SelectItem } from "@/components/ui/select";
|
import { Select, SelectItem } from "@/components/ui/select";
|
||||||
import {
|
import {
|
||||||
SelectContent,
|
SelectContent,
|
||||||
SelectGroup,
|
SelectGroup,
|
||||||
@@ -37,9 +38,11 @@ import {
|
|||||||
} from "@/components/ui/select";
|
} from "@/components/ui/select";
|
||||||
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
||||||
import { CodeEditor } from "@/components/workspace/code-editor";
|
import { CodeEditor } from "@/components/workspace/code-editor";
|
||||||
|
import { MarkdownAiEditor } from "@/open-canvas/components/artifact/MarkdownAiEditor";
|
||||||
import { publishArtifactToKnowledge } from "@/core/agents/api";
|
import { publishArtifactToKnowledge } from "@/core/agents/api";
|
||||||
import { useAgent } from "@/core/agents/hooks";
|
import { useAgent } from "@/core/agents/hooks";
|
||||||
import { apiFetch } from "@/core/api";
|
import { apiFetch } from "@/core/api";
|
||||||
|
import { copyTextToClipboard } from "@/core/clipboard";
|
||||||
import {
|
import {
|
||||||
downloadArtifactFile,
|
downloadArtifactFile,
|
||||||
} from "@/core/artifacts/download";
|
} from "@/core/artifacts/download";
|
||||||
@@ -49,9 +52,8 @@ import {
|
|||||||
} from "@/core/artifacts/hooks";
|
} from "@/core/artifacts/hooks";
|
||||||
import { resolveArtifactURL, urlOfArtifact } from "@/core/artifacts/utils";
|
import { resolveArtifactURL, urlOfArtifact } from "@/core/artifacts/utils";
|
||||||
import { useI18n } from "@/core/i18n/hooks";
|
import { useI18n } from "@/core/i18n/hooks";
|
||||||
import { downloadMarkdownAsDocx } from "@/core/scheduled-tasks/markdown-docx";
|
import { downloadMarkdownAsDocx } from "@/core/scheduled-tasks/markdown-docx";
|
||||||
import { installSkill } from "@/core/skills/api";
|
import { streamdownPlugins } from "@/core/streamdown";
|
||||||
import { streamdownPlugins } from "@/core/streamdown";
|
|
||||||
import {
|
import {
|
||||||
checkCodeFile,
|
checkCodeFile,
|
||||||
getFileName,
|
getFileName,
|
||||||
@@ -79,7 +81,8 @@ import { useThread } from "../messages/context";
|
|||||||
import { Tooltip } from "../tooltip";
|
import { Tooltip } from "../tooltip";
|
||||||
|
|
||||||
import { useArtifacts } from "./context";
|
import { useArtifacts } from "./context";
|
||||||
import { SpreadsheetPreview } from "./spreadsheet-preview";
|
import { SpreadsheetPreview } from "./spreadsheet-preview";
|
||||||
|
import { SkillInstallDialog } from "./skill-install-dialog";
|
||||||
|
|
||||||
const SANDBOX_RESUME_EVENT = "workspace:sandbox-resume-autoscroll";
|
const SANDBOX_RESUME_EVENT = "workspace:sandbox-resume-autoscroll";
|
||||||
|
|
||||||
@@ -120,13 +123,14 @@ export function ArtifactFileDetail({
|
|||||||
className,
|
className,
|
||||||
filepath: filepathFromProps,
|
filepath: filepathFromProps,
|
||||||
threadId,
|
threadId,
|
||||||
onClose,
|
onClose,
|
||||||
allowVirtualMarkdownEdit = false,
|
allowVirtualMarkdownEdit = false,
|
||||||
disableDesensitize = false,
|
disableDesensitize = false,
|
||||||
}: {
|
hideFileName = false,
|
||||||
className?: string;
|
}: {
|
||||||
filepath: string;
|
className?: string;
|
||||||
threadId: string;
|
filepath: string;
|
||||||
|
threadId: string;
|
||||||
/** 覆盖默认关闭行为(仅 setOpen(false));圆桌 Step3 文件预览用于退出沙箱模式。 */
|
/** 覆盖默认关闭行为(仅 setOpen(false));圆桌 Step3 文件预览用于退出沙箱模式。 */
|
||||||
onClose?: () => void;
|
onClose?: () => void;
|
||||||
/**
|
/**
|
||||||
@@ -139,9 +143,10 @@ export function ArtifactFileDetail({
|
|||||||
* 关闭对预览内容的脱敏。多智能体会商页的「消息列表沙箱」按需求**不脱敏**沙箱内的
|
* 关闭对预览内容的脱敏。多智能体会商页的「消息列表沙箱」按需求**不脱敏**沙箱内的
|
||||||
* 产物内容(用户要拿原始文件),故 Step2SandboxLayout 传 true;主聊天等其它调用方
|
* 产物内容(用户要拿原始文件),故 Step2SandboxLayout 传 true;主聊天等其它调用方
|
||||||
* 默认 false,沿用全局脱敏。
|
* 默认 false,沿用全局脱敏。
|
||||||
*/
|
*/
|
||||||
disableDesensitize?: boolean;
|
disableDesensitize?: boolean;
|
||||||
}) {
|
hideFileName?: boolean;
|
||||||
|
}) {
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { artifacts, setOpen, select } = useArtifacts();
|
const { artifacts, setOpen, select } = useArtifacts();
|
||||||
const { isMock, thread, publicShareCode } = useThread();
|
const { isMock, thread, publicShareCode } = useThread();
|
||||||
@@ -213,12 +218,17 @@ export function ArtifactFileDetail({
|
|||||||
!useWriteFileStreaming &&
|
!useWriteFileStreaming &&
|
||||||
!isSkillFile &&
|
!isSkillFile &&
|
||||||
!isMock;
|
!isMock;
|
||||||
|
// 「AI 写作」md 展示开关:只要是可编辑的 markdown 就提供「AI 写作」视图(在 源码/预览 旁多一个
|
||||||
|
// 切换项),用户可随时切过去体验划词「AI 改写」。默认仍是「预览」,避免编辑器在内容加载期间
|
||||||
|
// 挂载导致白屏 + 避免复杂 md(表格/公式/HTML)误入有损编辑。
|
||||||
|
const canUseAiEditor = canEditArtifact;
|
||||||
const [draftContent, setDraftContent] = useState("");
|
const [draftContent, setDraftContent] = useState("");
|
||||||
const [hasLocalEdits, setHasLocalEdits] = useState(false);
|
const [hasLocalEdits, setHasLocalEdits] = useState(false);
|
||||||
const updateArtifact = useUpdateArtifactContent();
|
const updateArtifact = useUpdateArtifactContent();
|
||||||
const displayContent = canEditArtifact ? draftContent : (content ?? "");
|
const displayContent = canEditArtifact ? draftContent : (content ?? "");
|
||||||
const isHtmlStreaming = language === "html" && thread.isLoading;
|
const isAutoPreviewLanguage = language === "html" || language === "markdown";
|
||||||
const hasMultipleArtifacts = (artifacts?.length ?? 0) > 1;
|
const isPreviewStreaming = isAutoPreviewLanguage && thread.isLoading;
|
||||||
|
const hasMultipleArtifacts = (artifacts?.length ?? 0) > 1;
|
||||||
const fileTypeLabel = useMemo(() => {
|
const fileTypeLabel = useMemo(() => {
|
||||||
if (isImageFile(filepath)) return "IMG";
|
if (isImageFile(filepath)) return "IMG";
|
||||||
if (isSpreadsheetFile) return "XLSX";
|
if (isSpreadsheetFile) return "XLSX";
|
||||||
@@ -230,9 +240,9 @@ export function ArtifactFileDetail({
|
|||||||
return "FILE";
|
return "FILE";
|
||||||
}, [filepath, isSkillFile, isSpreadsheetFile, language]);
|
}, [filepath, isSkillFile, isSpreadsheetFile, language]);
|
||||||
|
|
||||||
const [viewMode, setViewMode] = useState<"code" | "preview">("code");
|
const [viewMode, setViewMode] = useState<"code" | "preview" | "edit">("code");
|
||||||
const [allowAutoViewSwitch, setAllowAutoViewSwitch] = useState(true);
|
const [allowAutoViewSwitch, setAllowAutoViewSwitch] = useState(true);
|
||||||
const [isInstalling, setIsInstalling] = useState(false);
|
const [installDialogOpen, setInstallDialogOpen] = useState(false);
|
||||||
const [showPreviewSwitchPulse, setShowPreviewSwitchPulse] = useState(false);
|
const [showPreviewSwitchPulse, setShowPreviewSwitchPulse] = useState(false);
|
||||||
const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
|
const [autoScrollEnabled, setAutoScrollEnabled] = useState(true);
|
||||||
const [showResumeAutoScroll, setShowResumeAutoScroll] = useState(false);
|
const [showResumeAutoScroll, setShowResumeAutoScroll] = useState(false);
|
||||||
@@ -257,28 +267,36 @@ export function ArtifactFileDetail({
|
|||||||
setDraftContent(content ?? "");
|
setDraftContent(content ?? "");
|
||||||
}, [canEditArtifact, content, hasLocalEdits]);
|
}, [canEditArtifact, content, hasLocalEdits]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setAllowAutoViewSwitch(true);
|
setAllowAutoViewSwitch(true);
|
||||||
setAutoScrollEnabled(true);
|
setAutoScrollEnabled(true);
|
||||||
setShowResumeAutoScroll(false);
|
setShowResumeAutoScroll(false);
|
||||||
|
setShowPreviewSwitchPulse(false);
|
||||||
if (language === "html") {
|
}, [filepathFromProps]);
|
||||||
setViewMode(thread.isLoading ? "code" : "preview");
|
|
||||||
return;
|
useEffect(() => {
|
||||||
}
|
if (isPreviewStreaming) {
|
||||||
|
setViewMode("code");
|
||||||
if (isSupportPreview) {
|
return;
|
||||||
setViewMode("preview");
|
}
|
||||||
return;
|
|
||||||
}
|
if (language === "html") {
|
||||||
|
setViewMode(thread.isLoading ? "code" : "preview");
|
||||||
setViewMode("code");
|
return;
|
||||||
}, [filepathFromProps, isSupportPreview, language, thread.isLoading]);
|
}
|
||||||
|
|
||||||
useEffect(() => {
|
if (isSupportPreview) {
|
||||||
if (!allowAutoViewSwitch || language !== "html") {
|
setViewMode("preview");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
setViewMode("code");
|
||||||
|
}, [isPreviewStreaming, isSupportPreview, language, thread.isLoading]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!allowAutoViewSwitch || !isAutoPreviewLanguage) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (thread.isLoading) {
|
if (thread.isLoading) {
|
||||||
setViewMode("code");
|
setViewMode("code");
|
||||||
@@ -290,9 +308,9 @@ export function ArtifactFileDetail({
|
|||||||
const timeoutId = window.setTimeout(() => {
|
const timeoutId = window.setTimeout(() => {
|
||||||
setShowPreviewSwitchPulse(false);
|
setShowPreviewSwitchPulse(false);
|
||||||
}, 1400);
|
}, 1400);
|
||||||
|
|
||||||
return () => window.clearTimeout(timeoutId);
|
return () => window.clearTimeout(timeoutId);
|
||||||
}, [allowAutoViewSwitch, language, thread.isLoading]);
|
}, [allowAutoViewSwitch, isAutoPreviewLanguage, isSupportPreview, thread.isLoading]);
|
||||||
|
|
||||||
const scrollArtifactToBottom = useCallback(
|
const scrollArtifactToBottom = useCallback(
|
||||||
(behavior: ScrollBehavior = "auto") => {
|
(behavior: ScrollBehavior = "auto") => {
|
||||||
@@ -432,29 +450,7 @@ export function ArtifactFileDetail({
|
|||||||
}, 1600);
|
}, 1600);
|
||||||
}, [scrollArtifactToBottom]);
|
}, [scrollArtifactToBottom]);
|
||||||
|
|
||||||
const handleInstallSkill = useCallback(async () => {
|
const handleSaveArtifact = useCallback(async () => {
|
||||||
if (isInstalling) return;
|
|
||||||
|
|
||||||
setIsInstalling(true);
|
|
||||||
try {
|
|
||||||
const result = await installSkill({
|
|
||||||
thread_id: threadId,
|
|
||||||
path: filepath,
|
|
||||||
});
|
|
||||||
if (result.success) {
|
|
||||||
toast.success(result.message);
|
|
||||||
} else {
|
|
||||||
toast.error(result.message ?? "Failed to install skill");
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Failed to install skill:", error);
|
|
||||||
toast.error("Failed to install skill");
|
|
||||||
} finally {
|
|
||||||
setIsInstalling(false);
|
|
||||||
}
|
|
||||||
}, [threadId, filepath, isInstalling]);
|
|
||||||
|
|
||||||
const handleSaveArtifact = useCallback(async () => {
|
|
||||||
if (!canEditArtifact || updateArtifact.isPending) {
|
if (!canEditArtifact || updateArtifact.isPending) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -597,8 +593,11 @@ export function ArtifactFileDetail({
|
|||||||
<span className="bg-background text-muted-foreground inline-flex h-7 shrink-0 items-center rounded-full border border-black/6 px-2.5 text-[10px] font-semibold tracking-[0.16em] dark:border-white/8">
|
<span className="bg-background text-muted-foreground inline-flex h-7 shrink-0 items-center rounded-full border border-black/6 px-2.5 text-[10px] font-semibold tracking-[0.16em] dark:border-white/8">
|
||||||
{fileTypeLabel}
|
{fileTypeLabel}
|
||||||
</span>
|
</span>
|
||||||
<ArtifactTitle className="min-w-0">
|
{!hideFileName && (
|
||||||
{useWriteFileStreaming ? (
|
<ArtifactTitle className="min-w-0">
|
||||||
|
{/* markdown:隐藏文件名(仅留 MD 徽标),把横向空间让给工具栏,避免窄面板下
|
||||||
|
工具栏换行错位;多文件仍保留切换下拉(靠它切文件)。文件名仍可在下载/另存为时取到。 */}
|
||||||
|
{language === "markdown" && !hasMultipleArtifacts ? null : useWriteFileStreaming ? (
|
||||||
<div className="truncate px-3">{getFileName(filepath)}</div>
|
<div className="truncate px-3">{getFileName(filepath)}</div>
|
||||||
) : hasMultipleArtifacts ? (
|
) : hasMultipleArtifacts ? (
|
||||||
<Select value={filepath} onValueChange={select}>
|
<Select value={filepath} onValueChange={select}>
|
||||||
@@ -618,7 +617,8 @@ export function ArtifactFileDetail({
|
|||||||
) : (
|
) : (
|
||||||
<div className="truncate px-3">{getFileName(filepath)}</div>
|
<div className="truncate px-3">{getFileName(filepath)}</div>
|
||||||
)}
|
)}
|
||||||
</ArtifactTitle>
|
</ArtifactTitle>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex w-full items-center justify-center md:w-auto md:flex-1">
|
<div className="flex w-full items-center justify-center md:w-auto md:flex-1">
|
||||||
@@ -638,10 +638,19 @@ export function ArtifactFileDetail({
|
|||||||
onValueChange={(value) => {
|
onValueChange={(value) => {
|
||||||
if (value) {
|
if (value) {
|
||||||
setAllowAutoViewSwitch(false);
|
setAllowAutoViewSwitch(false);
|
||||||
setViewMode(value as "code" | "preview");
|
setViewMode(value as "code" | "preview" | "edit");
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
{canUseAiEditor && (
|
||||||
|
<ToggleGroupItem
|
||||||
|
className="text-muted-foreground h-8 min-w-10 rounded-full border-0 bg-transparent px-3 shadow-none data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-[0_6px_14px_-10px_rgba(15,23,42,0.35)]"
|
||||||
|
value="edit"
|
||||||
|
aria-label="AI 写作编辑"
|
||||||
|
>
|
||||||
|
<SparklesIcon />
|
||||||
|
</ToggleGroupItem>
|
||||||
|
)}
|
||||||
<ToggleGroupItem
|
<ToggleGroupItem
|
||||||
className="text-muted-foreground h-8 min-w-10 rounded-full border-0 bg-transparent px-3 shadow-none data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-[0_6px_14px_-10px_rgba(15,23,42,0.35)]"
|
className="text-muted-foreground h-8 min-w-10 rounded-full border-0 bg-transparent px-3 shadow-none data-[state=on]:bg-background data-[state=on]:text-foreground data-[state=on]:shadow-[0_6px_14px_-10px_rgba(15,23,42,0.35)]"
|
||||||
value="code"
|
value="code"
|
||||||
@@ -655,10 +664,10 @@ export function ArtifactFileDetail({
|
|||||||
<EyeIcon />
|
<EyeIcon />
|
||||||
</ToggleGroupItem>
|
</ToggleGroupItem>
|
||||||
</ToggleGroup>
|
</ToggleGroup>
|
||||||
{isHtmlStreaming && (
|
{isPreviewStreaming && (
|
||||||
<div className="animate-[sandbox-preview-badge_1.4s_ease-in-out_infinite] text-muted-foreground bg-muted/80 inline-flex items-center rounded-full border px-2.5 py-1 text-[11px]">
|
<div className="animate-[sandbox-preview-badge_1.4s_ease-in-out_infinite] text-muted-foreground bg-muted/80 inline-flex items-center rounded-full border px-2.5 py-1 text-[11px]">
|
||||||
<span className="bg-primary mr-2 size-1.5 animate-pulse rounded-full" />
|
<span className="bg-primary mr-2 size-1.5 animate-pulse rounded-full" />
|
||||||
正在生成,完成后自动预览
|
正在生成,完成后自动预览
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -686,18 +695,17 @@ export function ArtifactFileDetail({
|
|||||||
)}
|
)}
|
||||||
{!useWriteFileStreaming && filepath.endsWith(".skill") && (
|
{!useWriteFileStreaming && filepath.endsWith(".skill") && (
|
||||||
<Tooltip content={t.toolCalls.skillInstallTooltip}>
|
<Tooltip content={t.toolCalls.skillInstallTooltip}>
|
||||||
<ArtifactAction
|
<ArtifactAction
|
||||||
icon={isInstalling ? LoaderIcon : PackageIcon}
|
icon={PackageIcon}
|
||||||
label={t.common.install}
|
label={t.common.install}
|
||||||
tooltip={t.common.install}
|
tooltip={t.common.install}
|
||||||
disabled={
|
disabled={
|
||||||
isInstalling ||
|
env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"
|
||||||
env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true"
|
}
|
||||||
}
|
onClick={() => setInstallDialogOpen(true)}
|
||||||
onClick={handleInstallSkill}
|
/>
|
||||||
/>
|
</Tooltip>
|
||||||
</Tooltip>
|
)}
|
||||||
)}
|
|
||||||
{isCodeFile && (
|
{isCodeFile && (
|
||||||
<ArtifactAction
|
<ArtifactAction
|
||||||
icon={CopyIcon}
|
icon={CopyIcon}
|
||||||
@@ -705,7 +713,7 @@ export function ArtifactFileDetail({
|
|||||||
disabled={!content}
|
disabled={!content}
|
||||||
onClick={async () => {
|
onClick={async () => {
|
||||||
try {
|
try {
|
||||||
await navigator.clipboard.writeText(displayContent ?? "");
|
await copyTextToClipboard(displayContent ?? "");
|
||||||
toast.success(t.clipboard.copiedToClipboard);
|
toast.success(t.clipboard.copiedToClipboard);
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
toast.error("Failed to copy to clipboard");
|
toast.error("Failed to copy to clipboard");
|
||||||
@@ -715,7 +723,7 @@ export function ArtifactFileDetail({
|
|||||||
tooltip={t.clipboard.copyToClipboard}
|
tooltip={t.clipboard.copyToClipboard}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{!useWriteFileStreaming && language === "markdown" && (
|
{language === "markdown" && (
|
||||||
<ArtifactAction
|
<ArtifactAction
|
||||||
icon={isExportingWord ? LoaderIcon : FileType2Icon}
|
icon={isExportingWord ? LoaderIcon : FileType2Icon}
|
||||||
label="另存为 Word"
|
label="另存为 Word"
|
||||||
@@ -782,7 +790,7 @@ export function ArtifactFileDetail({
|
|||||||
</ArtifactActions>
|
</ArtifactActions>
|
||||||
</div>
|
</div>
|
||||||
</ArtifactHeader>
|
</ArtifactHeader>
|
||||||
<ArtifactContent
|
<ArtifactContent
|
||||||
ref={artifactContentRef}
|
ref={artifactContentRef}
|
||||||
className="relative p-0"
|
className="relative p-0"
|
||||||
onWheelCapture={handlePauseAutoScroll}
|
onWheelCapture={handlePauseAutoScroll}
|
||||||
@@ -803,6 +811,17 @@ export function ArtifactFileDetail({
|
|||||||
滑动到底部并继续自动下滑
|
滑动到底部并继续自动下滑
|
||||||
</button>
|
</button>
|
||||||
)}
|
)}
|
||||||
|
{viewMode === "edit" && canUseAiEditor && (
|
||||||
|
<MarkdownAiEditor
|
||||||
|
// 编辑用原始内容(与源码模式一致,不脱敏);保存仍走头部「保存 Markdown」按钮。
|
||||||
|
markdown={displayContent ?? ""}
|
||||||
|
onChange={(value) => {
|
||||||
|
setDraftContent(value);
|
||||||
|
setHasLocalEdits(true);
|
||||||
|
}}
|
||||||
|
threadId={threadId}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
{isSupportPreview &&
|
{isSupportPreview &&
|
||||||
viewMode === "preview" &&
|
viewMode === "preview" &&
|
||||||
(language === "markdown" ||
|
(language === "markdown" ||
|
||||||
@@ -859,10 +878,16 @@ export function ArtifactFileDetail({
|
|||||||
{t.common.loading}
|
{t.common.loading}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</ArtifactContent>
|
</ArtifactContent>
|
||||||
</Artifact>
|
<SkillInstallDialog
|
||||||
);
|
open={installDialogOpen}
|
||||||
}
|
onOpenChange={setInstallDialogOpen}
|
||||||
|
threadId={threadId}
|
||||||
|
filepath={filepath}
|
||||||
|
/>
|
||||||
|
</Artifact>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function SandboxPreviewImage({
|
function SandboxPreviewImage({
|
||||||
src,
|
src,
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { DownloadIcon, LoaderIcon, PackageIcon } from "lucide-react";
|
import { DownloadIcon, LoaderIcon, PackageIcon } from "lucide-react";
|
||||||
import { useCallback, useState } from "react";
|
import { useCallback, useState } from "react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
@@ -10,69 +10,56 @@ import {
|
|||||||
CardHeader,
|
CardHeader,
|
||||||
CardTitle,
|
CardTitle,
|
||||||
} from "@/components/ui/card";
|
} from "@/components/ui/card";
|
||||||
import { downloadArtifactFile } from "@/core/artifacts/download";
|
import { downloadArtifactFile } from "@/core/artifacts/download";
|
||||||
import { useI18n } from "@/core/i18n/hooks";
|
import { useI18n } from "@/core/i18n/hooks";
|
||||||
import { installSkill } from "@/core/skills/api";
|
import {
|
||||||
import {
|
getFileExtensionDisplayName,
|
||||||
getFileExtensionDisplayName,
|
getFileIcon,
|
||||||
getFileIcon,
|
getFileName,
|
||||||
getFileName,
|
} from "@/core/utils/files";
|
||||||
} from "@/core/utils/files";
|
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
import { useThread } from "../messages/context";
|
import { useThread } from "../messages/context";
|
||||||
import { useArtifacts } from "./context";
|
import { useArtifacts } from "./context";
|
||||||
|
import { SkillInstallDialog } from "./skill-install-dialog";
|
||||||
|
|
||||||
export function ArtifactFileList({
|
export function ArtifactFileList({
|
||||||
className,
|
className,
|
||||||
files,
|
files,
|
||||||
threadId,
|
threadId,
|
||||||
}: {
|
onOpenArtifact,
|
||||||
className?: string;
|
}: {
|
||||||
files: string[];
|
className?: string;
|
||||||
threadId: string;
|
files: string[];
|
||||||
}) {
|
threadId: string;
|
||||||
const { t } = useI18n();
|
onOpenArtifact?: (filepath: string) => void;
|
||||||
const { isMock, publicShareCode } = useThread();
|
}) {
|
||||||
const { select: selectArtifact, setOpen } = useArtifacts();
|
const { t } = useI18n();
|
||||||
const [installingFile, setInstallingFile] = useState<string | null>(null);
|
const { isMock, publicShareCode } = useThread();
|
||||||
const [downloadingFile, setDownloadingFile] = useState<string | null>(null);
|
const { select: selectArtifact, setOpen } = useArtifacts();
|
||||||
|
const [installFile, setInstallFile] = useState<string | null>(null);
|
||||||
|
const [downloadingFile, setDownloadingFile] = useState<string | null>(null);
|
||||||
|
|
||||||
const handleClick = useCallback(
|
const handleClick = useCallback(
|
||||||
(filepath: string) => {
|
(filepath: string) => {
|
||||||
selectArtifact(filepath);
|
if (onOpenArtifact) {
|
||||||
setOpen(true);
|
onOpenArtifact(filepath);
|
||||||
},
|
return;
|
||||||
[selectArtifact, setOpen],
|
}
|
||||||
);
|
selectArtifact(filepath);
|
||||||
|
setOpen(true);
|
||||||
|
},
|
||||||
|
[onOpenArtifact, selectArtifact, setOpen],
|
||||||
|
);
|
||||||
|
|
||||||
const handleInstallSkill = useCallback(
|
const handleInstallSkill = useCallback(
|
||||||
async (e: React.MouseEvent, filepath: string) => {
|
(e: React.MouseEvent, filepath: string) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
setInstallFile(filepath);
|
||||||
if (installingFile) return;
|
},
|
||||||
|
[],
|
||||||
setInstallingFile(filepath);
|
);
|
||||||
try {
|
|
||||||
const result = await installSkill({
|
|
||||||
thread_id: threadId,
|
|
||||||
path: filepath,
|
|
||||||
});
|
|
||||||
if (result.success) {
|
|
||||||
toast.success(result.message);
|
|
||||||
} else {
|
|
||||||
toast.error(result.message || "Failed to install skill");
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error("Failed to install skill:", error);
|
|
||||||
toast.error("Failed to install skill");
|
|
||||||
} finally {
|
|
||||||
setInstallingFile(null);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
[threadId, installingFile],
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleDownload = useCallback(
|
const handleDownload = useCallback(
|
||||||
async (e: React.MouseEvent, filepath: string) => {
|
async (e: React.MouseEvent, filepath: string) => {
|
||||||
@@ -113,20 +100,15 @@ export function ArtifactFileList({
|
|||||||
{getFileExtensionDisplayName(file)} file
|
{getFileExtensionDisplayName(file)} file
|
||||||
</CardDescription>
|
</CardDescription>
|
||||||
<CardAction className="row-span-1 self-center">
|
<CardAction className="row-span-1 self-center">
|
||||||
{file.endsWith(".skill") && (
|
{file.endsWith(".skill") && (
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
disabled={installingFile === file}
|
onClick={(e) => handleInstallSkill(e, file)}
|
||||||
onClick={(e) => handleInstallSkill(e, file)}
|
>
|
||||||
>
|
<PackageIcon className="size-4" />
|
||||||
{installingFile === file ? (
|
{t.common.install}
|
||||||
<LoaderIcon className="size-4 animate-spin" />
|
</Button>
|
||||||
) : (
|
)}
|
||||||
<PackageIcon className="size-4" />
|
|
||||||
)}
|
|
||||||
{t.common.install}
|
|
||||||
</Button>
|
|
||||||
)}
|
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
disabled={downloadingFile === file}
|
disabled={downloadingFile === file}
|
||||||
@@ -142,7 +124,15 @@ export function ArtifactFileList({
|
|||||||
</CardAction>
|
</CardAction>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
</Card>
|
</Card>
|
||||||
))}
|
))}
|
||||||
</ul>
|
<SkillInstallDialog
|
||||||
);
|
open={!!installFile}
|
||||||
}
|
onOpenChange={(open) => {
|
||||||
|
if (!open) setInstallFile(null);
|
||||||
|
}}
|
||||||
|
threadId={threadId}
|
||||||
|
filepath={installFile}
|
||||||
|
/>
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,178 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { AlertCircleIcon, Loader2Icon, PackageIcon } from "lucide-react";
|
||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
installSkill,
|
||||||
|
previewSkillInstall,
|
||||||
|
type PreviewSkillInstallResponse,
|
||||||
|
} from "@/core/skills/api";
|
||||||
|
|
||||||
|
export function SkillInstallDialog({
|
||||||
|
open,
|
||||||
|
onOpenChange,
|
||||||
|
threadId,
|
||||||
|
filepath,
|
||||||
|
onInstalled,
|
||||||
|
}: {
|
||||||
|
open: boolean;
|
||||||
|
onOpenChange: (open: boolean) => void;
|
||||||
|
threadId: string;
|
||||||
|
filepath: string | null;
|
||||||
|
onInstalled?: (skillName: string) => void;
|
||||||
|
}) {
|
||||||
|
const [preview, setPreview] = useState<PreviewSkillInstallResponse | null>(null);
|
||||||
|
const [installName, setInstallName] = useState("");
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [installing, setInstalling] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open || !filepath) {
|
||||||
|
setPreview(null);
|
||||||
|
setInstallName("");
|
||||||
|
setLoading(false);
|
||||||
|
setInstalling(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let cancelled = false;
|
||||||
|
setLoading(true);
|
||||||
|
setPreview(null);
|
||||||
|
setInstallName("");
|
||||||
|
|
||||||
|
void previewSkillInstall({ thread_id: threadId, path: filepath })
|
||||||
|
.then((result) => {
|
||||||
|
if (cancelled) return;
|
||||||
|
setPreview(result);
|
||||||
|
setInstallName(result.skill_name);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
if (cancelled) return;
|
||||||
|
toast.error(error instanceof Error ? error.message : "Failed to preview skill install");
|
||||||
|
onOpenChange(false);
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
if (!cancelled) setLoading(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, [filepath, onOpenChange, open, threadId]);
|
||||||
|
|
||||||
|
const trimmedName = installName.trim();
|
||||||
|
const unchangedConflict = useMemo(() => {
|
||||||
|
if (!preview) return false;
|
||||||
|
return trimmedName === preview.skill_name && !preview.can_install_as_is;
|
||||||
|
}, [preview, trimmedName]);
|
||||||
|
|
||||||
|
async function handleInstall() {
|
||||||
|
if (!filepath || !trimmedName || installing) return;
|
||||||
|
setInstalling(true);
|
||||||
|
try {
|
||||||
|
const result = await installSkill({
|
||||||
|
thread_id: threadId,
|
||||||
|
path: filepath,
|
||||||
|
skill_name: trimmedName,
|
||||||
|
});
|
||||||
|
if (!result.success) {
|
||||||
|
toast.error(result.message || "Failed to install skill");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
toast.success(result.message);
|
||||||
|
onInstalled?.(result.skill_name);
|
||||||
|
onOpenChange(false);
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(error instanceof Error ? error.message : "Failed to install skill");
|
||||||
|
} finally {
|
||||||
|
setInstalling(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const helperText = preview?.owned_by_other
|
||||||
|
? `该技能名已被 ${preview.owner_username || "其他用户"} 安装。你可以换个名字继续安装。`
|
||||||
|
: preview?.owned_by_me
|
||||||
|
? "你已经安装过这个技能了;如果想保留一份新副本,可以换个名字安装。"
|
||||||
|
: preview?.builtin_conflict
|
||||||
|
? "这个名字已被公共技能占用,请换个名字安装。"
|
||||||
|
: "可以直接安装,也可以先改一个更适合自己的名字。";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||||
|
<DialogContent className="sm:max-w-md">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>安装技能</DialogTitle>
|
||||||
|
<DialogDescription>安装前会校验技能归属;如果名字已被占用,可以改名后继续安装。</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="text-muted-foreground flex items-center justify-center gap-2 py-8 text-sm">
|
||||||
|
<Loader2Icon className="size-4 animate-spin" />
|
||||||
|
正在检查技能安装权限…
|
||||||
|
</div>
|
||||||
|
) : preview ? (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="rounded-xl border bg-muted/35 p-3 text-sm">
|
||||||
|
<div className="font-medium">{preview.skill_name}</div>
|
||||||
|
{preview.description ? (
|
||||||
|
<div className="text-muted-foreground mt-1 line-clamp-3">{preview.description}</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="text-sm font-medium">安装名称</div>
|
||||||
|
<Input
|
||||||
|
value={installName}
|
||||||
|
onChange={(e) => setInstallName(e.currentTarget.value)}
|
||||||
|
placeholder="请输入技能名称"
|
||||||
|
/>
|
||||||
|
<div className="text-muted-foreground text-xs">{helperText}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{!preview.can_install_as_is && (
|
||||||
|
<div className="flex gap-2 rounded-xl border border-amber-300/60 bg-amber-50 px-3 py-2 text-sm text-amber-900">
|
||||||
|
<AlertCircleIcon className="mt-0.5 size-4 shrink-0" />
|
||||||
|
<div>{preview.message}</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{preview.warnings.length > 0 && (
|
||||||
|
<div className="text-muted-foreground rounded-xl border px-3 py-2 text-xs">
|
||||||
|
{preview.warnings.join(" ")}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<DialogFooter>
|
||||||
|
<Button variant="outline" onClick={() => onOpenChange(false)} disabled={installing}>
|
||||||
|
取消
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => void handleInstall()}
|
||||||
|
disabled={loading || installing || !trimmedName || unchangedConflict}
|
||||||
|
>
|
||||||
|
{installing ? (
|
||||||
|
<Loader2Icon className="size-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<PackageIcon className="size-4" />
|
||||||
|
)}
|
||||||
|
安装
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -423,6 +423,7 @@ const ChatBox: React.FC<{
|
|||||||
className="size-full"
|
className="size-full"
|
||||||
filepath={selectedArtifact}
|
filepath={selectedArtifact}
|
||||||
threadId={threadId}
|
threadId={threadId}
|
||||||
|
allowVirtualMarkdownEdit
|
||||||
/>
|
/>
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
<TabsContent value="references" className="min-h-0 flex-1 overflow-y-auto p-0">
|
<TabsContent value="references" className="min-h-0 flex-1 overflow-y-auto p-0">
|
||||||
@@ -437,6 +438,7 @@ const ChatBox: React.FC<{
|
|||||||
className="size-full"
|
className="size-full"
|
||||||
filepath={selectedArtifact}
|
filepath={selectedArtifact}
|
||||||
threadId={threadId}
|
threadId={threadId}
|
||||||
|
allowVirtualMarkdownEdit
|
||||||
/>
|
/>
|
||||||
) : hasCitationReferences ? (
|
) : hasCitationReferences ? (
|
||||||
<div className="relative size-full overflow-hidden">
|
<div className="relative size-full overflow-hidden">
|
||||||
|
|||||||
@@ -1,6 +1,12 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
import { useTheme } from "@/contexts/ThemeContext";
|
||||||
|
import { getWelcomeBrandAsset } from "@/core/branding/brand-assets";
|
||||||
|
import { readRuntimeFlag } from "@/env";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
import { useDisplayDesensitizer } from "@/core/sensitive-words/use-display-desensitizer";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 紧凑模式(正常 App)新对话落地页的品牌欢迎块 —— 按 CM-assistant 参考图重画。
|
* 紧凑模式(正常 App)新对话落地页的品牌欢迎块 —— 按 CM-assistant 参考图重画。
|
||||||
@@ -8,6 +14,15 @@ import { cn } from "@/lib/utils";
|
|||||||
* 非紧凑模式仍用 <Welcome/>,本组件不参与。
|
* 非紧凑模式仍用 <Welcome/>,本组件不参与。
|
||||||
*/
|
*/
|
||||||
export function CompactWelcome({ className }: { className?: string }) {
|
export function CompactWelcome({ className }: { className?: string }) {
|
||||||
|
const desensitizeText = useDisplayDesensitizer();
|
||||||
|
const { theme } = useTheme();
|
||||||
|
const brandTheme = theme;
|
||||||
|
const welcomeLogo = getWelcomeBrandAsset(brandTheme);
|
||||||
|
const [failedWelcomeLogo, setFailedWelcomeLogo] = useState<string | null>(null);
|
||||||
|
const shouldShowWelcomeLogo =
|
||||||
|
Boolean(welcomeLogo) && failedWelcomeLogo !== welcomeLogo;
|
||||||
|
const isWelcomeLogoVisible = readRuntimeFlag("VITE_WELCOME_LOGO_VISIBLE");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
className={cn(
|
||||||
@@ -16,30 +31,43 @@ export function CompactWelcome({ className }: { className?: string }) {
|
|||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{/* CM logo:浅底圆环 + 主色渐变圆角方块 */}
|
{/* CM logo:浅底圆环 + 主色渐变圆角方块 */}
|
||||||
|
{/* Controlled by VITE_WELCOME_LOGO_VISIBLE in runtime-config.js. */}
|
||||||
|
{isWelcomeLogoVisible && (
|
||||||
<div
|
<div
|
||||||
className="mb-3.5 inline-flex items-center justify-center rounded-full p-3"
|
className="mb-3.5 inline-flex items-center justify-center rounded-full p-3"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor:
|
backgroundColor:
|
||||||
"color-mix(in srgb, var(--workspace-brand) 5%, transparent)",
|
"rgb(var(--legacy-workspace-brand-rgb) / 5%)",
|
||||||
border:
|
border:
|
||||||
"1px solid color-mix(in srgb, var(--workspace-brand) 12%, transparent)",
|
"1px solid rgb(var(--legacy-workspace-brand-rgb) / 12%)",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div
|
{shouldShowWelcomeLogo && welcomeLogo ? (
|
||||||
className="flex size-14 items-center justify-center rounded-2xl shadow-md"
|
<img
|
||||||
style={{
|
src={welcomeLogo}
|
||||||
backgroundImage:
|
alt=""
|
||||||
"linear-gradient(to top right, var(--workspace-brand), color-mix(in srgb, var(--workspace-brand) 55%, white))",
|
aria-hidden="true"
|
||||||
}}
|
className="size-16 object-contain"
|
||||||
>
|
onError={() => setFailedWelcomeLogo(welcomeLogo)}
|
||||||
<span className="text-2xl font-black tracking-wide text-white italic">
|
/>
|
||||||
CM
|
) : (
|
||||||
</span>
|
<div
|
||||||
</div>
|
className="flex size-14 items-center justify-center rounded-2xl shadow-md"
|
||||||
|
style={{
|
||||||
|
backgroundImage:
|
||||||
|
"linear-gradient(to top right, var(--workspace-brand), var(--brand-200))",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="text-2xl font-black tracking-wide text-white italic">
|
||||||
|
{desensitizeText("CM")}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<h1 className="flex items-center justify-center gap-2 text-2xl font-bold tracking-tight text-foreground/90">
|
<h1 className="flex items-center justify-center text-2xl font-bold tracking-tight text-foreground/90">
|
||||||
<span className="text-2xl">👋</span> 欢迎使用CM助手
|
{desensitizeText("欢迎使用CM助手")}
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-muted-foreground mx-auto mt-2 max-w-sm text-xs leading-relaxed">
|
<p className="text-muted-foreground mx-auto mt-2 max-w-sm text-xs leading-relaxed">
|
||||||
基于先进深度推理模型,为您提供高效的市场分析、专业报告撰写、调研设计与协同脑暴支持。
|
基于先进深度推理模型,为您提供高效的市场分析、专业报告撰写、调研设计与协同脑暴支持。
|
||||||
|
|||||||
@@ -1,8 +1,10 @@
|
|||||||
import { CheckIcon, CopyIcon } from "lucide-react";
|
import { CheckIcon, CopyIcon } from "lucide-react";
|
||||||
import { useCallback, useState, type ComponentProps } from "react";
|
import { useCallback, useState, type ComponentProps } from "react";
|
||||||
|
import { toast } from "sonner";
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { useI18n } from "@/core/i18n/hooks";
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { copyTextToClipboard } from "@/core/clipboard";
|
||||||
|
import { useI18n } from "@/core/i18n/hooks";
|
||||||
|
|
||||||
import { Tooltip } from "./tooltip";
|
import { Tooltip } from "./tooltip";
|
||||||
|
|
||||||
@@ -12,14 +14,18 @@ export function CopyButton({
|
|||||||
}: ComponentProps<typeof Button> & {
|
}: ComponentProps<typeof Button> & {
|
||||||
clipboardData: string;
|
clipboardData: string;
|
||||||
}) {
|
}) {
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const [copied, setCopied] = useState(false);
|
const [copied, setCopied] = useState(false);
|
||||||
const handleCopy = useCallback(() => {
|
const handleCopy = useCallback(async () => {
|
||||||
void navigator.clipboard.writeText(clipboardData);
|
try {
|
||||||
setCopied(true);
|
await copyTextToClipboard(clipboardData);
|
||||||
setTimeout(() => setCopied(false), 2000);
|
setCopied(true);
|
||||||
}, [clipboardData]);
|
setTimeout(() => setCopied(false), 2000);
|
||||||
return (
|
} catch {
|
||||||
|
toast.error(t.clipboard.failedToCopyToClipboard);
|
||||||
|
}
|
||||||
|
}, [clipboardData, t.clipboard.failedToCopyToClipboard]);
|
||||||
|
return (
|
||||||
<Tooltip content={t.clipboard.copyToClipboard}>
|
<Tooltip content={t.clipboard.copyToClipboard}>
|
||||||
<Button
|
<Button
|
||||||
size="icon-sm"
|
size="icon-sm"
|
||||||
|
|||||||
@@ -75,12 +75,15 @@ import {
|
|||||||
} from "@/core/threads/hooks";
|
} from "@/core/threads/hooks";
|
||||||
import type { AgentThread, AgentThreadState } from "@/core/threads/types";
|
import type { AgentThread, AgentThreadState } from "@/core/threads/types";
|
||||||
import {
|
import {
|
||||||
|
isBootstrapThread,
|
||||||
isThreadFavorite,
|
isThreadFavorite,
|
||||||
isThreadPinned,
|
isThreadPinned,
|
||||||
|
listPathOfThread,
|
||||||
pathOfThread,
|
pathOfThread,
|
||||||
sortThreadsPinnedFirst,
|
sortThreadsPinnedFirst,
|
||||||
titleOfThread,
|
titleOfThread,
|
||||||
} from "@/core/threads/utils";
|
} from "@/core/threads/utils";
|
||||||
|
import { buildFullChatNavigationPath } from "@/core/page-layout/chats-iframe-route";
|
||||||
import { env } from "@/env";
|
import { env } from "@/env";
|
||||||
import { desensitize } from "@/lib/desensitize";
|
import { desensitize } from "@/lib/desensitize";
|
||||||
import { isIMEComposing } from "@/lib/ime";
|
import { isIMEComposing } from "@/lib/ime";
|
||||||
@@ -183,15 +186,24 @@ export function GeneralQaSidebar() {
|
|||||||
// 当前嵌入的智能体(URL 上的 ?agent=):用于高亮对应卡片。
|
// 当前嵌入的智能体(URL 上的 ?agent=):用于高亮对应卡片。
|
||||||
const searchParams = useSearchParams();
|
const searchParams = useSearchParams();
|
||||||
const activeAgentId = searchParams.get("agent");
|
const activeAgentId = searchParams.get("agent");
|
||||||
|
const currentSearch = searchParams.toString();
|
||||||
|
const newChatHref = buildFullChatNavigationPath(NEW_CHAT_PATH, currentSearch);
|
||||||
|
const moreAgentsHref = buildFullChatNavigationPath(MORE_AGENTS_HREF, currentSearch);
|
||||||
|
const moreChatsHref = buildFullChatNavigationPath(MORE_CHATS_HREF, currentSearch);
|
||||||
|
|
||||||
// 点击常用智能体 = 在通用问答右侧**原地嵌入**该智能体的对话页:停留在 /chats/new,
|
// 点击常用智能体 = 在通用问答右侧**原地嵌入**该智能体的对话页:停留在 /chats/new,
|
||||||
// 仅给 URL 加 ?agent=<id>,由 NewChatContent 把右侧问答区换成 AgentChatPage。
|
// 仅给 URL 加 ?agent=<id>,由 NewChatContent 把右侧问答区换成 AgentChatPage。
|
||||||
// 不跳转独立页面、左侧栏不变。每次点击都重开一个干净会话(NewChatContent 的 key)。
|
// 不跳转独立页面、左侧栏不变。每次点击都重开一个干净会话(NewChatContent 的 key)。
|
||||||
const handleSelectAgent = useCallback(
|
const handleSelectAgent = useCallback(
|
||||||
(agentId: string) => {
|
(agentId: string) => {
|
||||||
navigate(`/page/workspace/chats/new?agent=${encodeURIComponent(agentId)}`);
|
navigate(
|
||||||
|
buildFullChatNavigationPath(
|
||||||
|
`${NEW_CHAT_PATH}?agent=${encodeURIComponent(agentId)}`,
|
||||||
|
currentSearch,
|
||||||
|
),
|
||||||
|
);
|
||||||
},
|
},
|
||||||
[navigate],
|
[currentSearch, navigate],
|
||||||
);
|
);
|
||||||
|
|
||||||
// ── 最近的对话取数 + 搜索 ──
|
// ── 最近的对话取数 + 搜索 ──
|
||||||
@@ -213,11 +225,12 @@ export function GeneralQaSidebar() {
|
|||||||
|
|
||||||
const visibleThreads = useMemo(
|
const visibleThreads = useMemo(
|
||||||
() =>
|
() =>
|
||||||
|
// 智能体创建(bootstrap)会话也展示(带机器人图标、点击回创建页);
|
||||||
|
// 仅排除调度 / 会商类系统会话。
|
||||||
sortThreadsPinnedFirst(
|
sortThreadsPinnedFirst(
|
||||||
threads.filter(
|
threads.filter(
|
||||||
(thread) =>
|
(thread) =>
|
||||||
thread.metadata?.thread_type !== "scheduler" &&
|
thread.metadata?.thread_type !== "scheduler" &&
|
||||||
thread.metadata?.thread_type !== "bootstrap" &&
|
|
||||||
thread.metadata?.thread_type !== "roundtable",
|
thread.metadata?.thread_type !== "roundtable",
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@@ -238,7 +251,7 @@ export function GeneralQaSidebar() {
|
|||||||
const handleNewChatClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
|
const handleNewChatClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
|
||||||
if (event.metaKey || event.ctrlKey || event.shiftKey || event.button === 1) return;
|
if (event.metaKey || event.ctrlKey || event.shiftKey || event.button === 1) return;
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
navigate(NEW_CHAT_PATH, { replace: true, state: { resetAt: Date.now() } });
|
navigate(newChatHref, { replace: true, state: { resetAt: Date.now() } });
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleDelete = useCallback(
|
const handleDelete = useCallback(
|
||||||
@@ -249,15 +262,22 @@ export function GeneralQaSidebar() {
|
|||||||
let nextThreadPath = pathOfThread("new", { agent_id: agentIdFromPath });
|
let nextThreadPath = pathOfThread("new", { agent_id: agentIdFromPath });
|
||||||
if (threadIndex > -1) {
|
if (threadIndex > -1) {
|
||||||
if (threads[threadIndex + 1]) {
|
if (threads[threadIndex + 1]) {
|
||||||
nextThreadPath = pathOfThread(threads[threadIndex + 1]!);
|
nextThreadPath = listPathOfThread(threads[threadIndex + 1]!);
|
||||||
} else if (threads[threadIndex - 1]) {
|
} else if (threads[threadIndex - 1]) {
|
||||||
nextThreadPath = pathOfThread(threads[threadIndex - 1]!);
|
nextThreadPath = listPathOfThread(threads[threadIndex - 1]!);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
void router.push(nextThreadPath);
|
void router.push(buildFullChatNavigationPath(nextThreadPath, currentSearch));
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[agentIdFromPath, deleteThread, router, threadIdFromPath, threads],
|
[
|
||||||
|
agentIdFromPath,
|
||||||
|
currentSearch,
|
||||||
|
deleteThread,
|
||||||
|
router,
|
||||||
|
threadIdFromPath,
|
||||||
|
threads,
|
||||||
|
],
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleRenameClick = useCallback((threadId: string, currentTitle: string) => {
|
const handleRenameClick = useCallback((threadId: string, currentTitle: string) => {
|
||||||
@@ -311,13 +331,13 @@ export function GeneralQaSidebar() {
|
|||||||
底色用「主色混入透明」=主色低透明度叠在当前侧栏底色上,浅/红/蓝/深蓝主题都自适应
|
底色用「主色混入透明」=主色低透明度叠在当前侧栏底色上,浅/红/蓝/深蓝主题都自适应
|
||||||
(不要混 white,否则深蓝主题下会变成浅色块)。 */}
|
(不要混 white,否则深蓝主题下会变成浅色块)。 */}
|
||||||
<Link
|
<Link
|
||||||
href={NEW_CHAT_PATH}
|
href={newChatHref}
|
||||||
onClick={handleNewChatClick}
|
onClick={handleNewChatClick}
|
||||||
style={{ borderColor: "var(--primary)", color: "var(--primary)" }}
|
style={{ borderColor: "var(--primary)", color: "var(--primary)" }}
|
||||||
className={cn(
|
className={cn(
|
||||||
"flex h-10 min-w-0 flex-1 items-center justify-center gap-1.5 rounded-[5px] text-[14px] font-semibold transition-colors",
|
"gq-new-chat-button flex h-10 min-w-0 flex-1 items-center justify-center gap-1.5 rounded-[5px] text-[14px] font-semibold transition-colors",
|
||||||
"border border-solid",
|
"border border-solid",
|
||||||
"bg-[color-mix(in_srgb,var(--primary)_14%,transparent)] hover:bg-[color-mix(in_srgb,var(--primary)_24%,transparent)]",
|
"bg-[rgb(var(--legacy-primary-rgb)/14%)] hover:bg-[rgb(var(--legacy-primary-rgb)/24%)]",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<Plus className="size-4 stroke-[2.5]" />
|
<Plus className="size-4 stroke-[2.5]" />
|
||||||
@@ -339,46 +359,80 @@ export function GeneralQaSidebar() {
|
|||||||
<div className="mt-1 flex flex-col gap-1">
|
<div className="mt-1 flex flex-col gap-1">
|
||||||
{frequent.map((agent) => {
|
{frequent.map((agent) => {
|
||||||
const isActive = activeAgentId === agent.id;
|
const isActive = activeAgentId === agent.id;
|
||||||
const { from, to } = agentColor(agent.id, isDark);
|
const { from, to, foreground } = agentColor(agent.id, theme);
|
||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
key={agent.id}
|
key={agent.id}
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => handleSelectAgent(agent.id)}
|
onClick={() => handleSelectAgent(agent.id)}
|
||||||
className={cn(
|
className={cn(
|
||||||
"group relative flex w-full items-start gap-2.5 rounded-xl border px-2.5 py-2 text-left transition-colors",
|
"group relative flex w-full items-start gap-3 rounded-xl border px-3 py-2.5 text-left transition-all duration-150",
|
||||||
isActive
|
isActive
|
||||||
? "border-primary/40 bg-primary/5"
|
? isDark
|
||||||
: "border-transparent hover:border-border hover:bg-accent/50",
|
? "border-[#2b8ffe] bg-[#0b4fae]/65 shadow-[0_0_0_1px_rgba(43,143,254,0.5),0_12px_28px_rgba(37,128,255,0.25)]"
|
||||||
|
: "agent-sidebar-card--active border-primary/50 bg-primary/10 shadow-sm"
|
||||||
|
: isDark
|
||||||
|
? "border-[#2b8ffe]/20 bg-[#042b59]/35 hover:border-[#2b8ffe]/60 hover:bg-[#063b77]/60"
|
||||||
|
: "border-transparent hover:border-border hover:bg-accent/50",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg text-white shadow-sm"
|
className={cn(
|
||||||
style={{ backgroundImage: `linear-gradient(135deg, ${from}, ${to})` }}
|
"mt-0.5 flex size-10 shrink-0 items-center justify-center rounded-lg text-white shadow-sm",
|
||||||
|
isDark &&
|
||||||
|
isActive &&
|
||||||
|
"ring-2 ring-[#83c1ff]/35 shadow-[0_0_18px_rgba(43,143,254,0.45)]",
|
||||||
|
)}
|
||||||
|
style={{
|
||||||
|
backgroundImage: `linear-gradient(135deg, ${from}, ${to})`,
|
||||||
|
color: foreground,
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<Bot className="size-[18px]" />
|
<Bot className="size-[19px]" />
|
||||||
</span>
|
</span>
|
||||||
<span className="min-w-0 flex-1">
|
<span className="min-w-0 flex-1">
|
||||||
<span
|
<span
|
||||||
className={cn(
|
className={cn(
|
||||||
"block truncate text-[13px] font-semibold",
|
"block truncate text-[16px] leading-5 font-bold",
|
||||||
isActive ? "text-primary" : "text-foreground",
|
isActive
|
||||||
|
? isDark
|
||||||
|
? "text-white"
|
||||||
|
: "text-primary"
|
||||||
|
: isDark
|
||||||
|
? "text-white/95"
|
||||||
|
: "text-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{desensitize(agent.name)}
|
{desensitize(agent.name)}
|
||||||
</span>
|
</span>
|
||||||
<span className="mt-0.5 block truncate text-[11px] leading-snug text-muted-foreground">
|
<span
|
||||||
|
className={cn(
|
||||||
|
"mt-1 block truncate text-[13px] leading-[1.35]",
|
||||||
|
isDark
|
||||||
|
? isActive
|
||||||
|
? "text-[#d6eaff]"
|
||||||
|
: "text-[#9ebfe2]"
|
||||||
|
: "text-muted-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
{agent.description ? desensitize(agent.description) : "智能体助手"}
|
{agent.description ? desensitize(agent.description) : "智能体助手"}
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</span>
|
||||||
{isActive && (
|
{isActive && (
|
||||||
<span className="absolute top-1/2 right-1 h-6 w-1 -translate-y-1/2 rounded-full bg-primary" />
|
<span
|
||||||
|
className={cn(
|
||||||
|
"absolute top-1/2 right-1.5 h-8 w-1.5 -translate-y-1/2 rounded-full",
|
||||||
|
isDark
|
||||||
|
? "bg-[#2b8ffe] shadow-[0_0_14px_rgba(43,143,254,0.85)]"
|
||||||
|
: "bg-primary",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
)}
|
)}
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
<Link
|
<Link
|
||||||
href={MORE_AGENTS_HREF}
|
href={moreAgentsHref}
|
||||||
className="flex items-center justify-between rounded-lg px-3 py-1.5 text-[12px] text-muted-foreground/70 transition-colors hover:bg-accent/50 hover:text-foreground"
|
className="flex items-center justify-between rounded-lg px-3 py-1.5 text-[12px] text-muted-foreground/70 transition-colors hover:bg-accent/50 hover:text-foreground"
|
||||||
>
|
>
|
||||||
<span>{t.common.more}</span>
|
<span>{t.common.more}</span>
|
||||||
@@ -417,7 +471,12 @@ export function GeneralQaSidebar() {
|
|||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
filteredThreads.map((thread) => {
|
filteredThreads.map((thread) => {
|
||||||
const isActive = pathOfThread(thread) === pathname;
|
const href = buildFullChatNavigationPath(
|
||||||
|
listPathOfThread(thread),
|
||||||
|
currentSearch,
|
||||||
|
);
|
||||||
|
const isActive = href === pathname;
|
||||||
|
const isBoot = isBootstrapThread(thread);
|
||||||
const pinned = isThreadPinned(thread);
|
const pinned = isThreadPinned(thread);
|
||||||
const favorited = isThreadFavorite(thread);
|
const favorited = isThreadFavorite(thread);
|
||||||
return (
|
return (
|
||||||
@@ -426,20 +485,30 @@ export function GeneralQaSidebar() {
|
|||||||
className="group/item relative flex items-center"
|
className="group/item relative flex items-center"
|
||||||
>
|
>
|
||||||
<Link
|
<Link
|
||||||
href={pathOfThread(thread)}
|
href={href}
|
||||||
className={cn(
|
className={cn(
|
||||||
"relative flex h-9 min-w-0 flex-1 items-center gap-2 rounded-lg px-2.5 text-[13px] transition-colors",
|
"gq-history-item relative flex h-9 min-w-0 flex-1 items-center gap-2 rounded-lg px-2.5 text-[13px] transition-colors",
|
||||||
isActive
|
isActive
|
||||||
? "border border-primary/40 bg-primary/5 font-medium text-primary"
|
? "gq-history-item--active border border-primary/40 bg-primary/5 font-medium text-primary"
|
||||||
: "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
|
: "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
<MessageSquare
|
{isBoot ? (
|
||||||
className={cn(
|
<Bot
|
||||||
"size-3.5 shrink-0",
|
className={cn(
|
||||||
isActive ? "text-primary" : "text-muted-foreground/70",
|
"size-3.5 shrink-0",
|
||||||
)}
|
isActive ? "text-primary" : "text-muted-foreground/70",
|
||||||
/>
|
)}
|
||||||
|
aria-label="智能体创建会话"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<MessageSquare
|
||||||
|
className={cn(
|
||||||
|
"size-3.5 shrink-0",
|
||||||
|
isActive ? "text-primary" : "text-muted-foreground/70",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
{pinned && (
|
{pinned && (
|
||||||
<Pin className="size-3 shrink-0 text-muted-foreground/70" />
|
<Pin className="size-3 shrink-0 text-muted-foreground/70" />
|
||||||
)}
|
)}
|
||||||
@@ -527,7 +596,7 @@ export function GeneralQaSidebar() {
|
|||||||
)}
|
)}
|
||||||
{!query && (
|
{!query && (
|
||||||
<Link
|
<Link
|
||||||
href={MORE_CHATS_HREF}
|
href={moreChatsHref}
|
||||||
className="mt-0.5 flex items-center justify-between rounded-lg px-3 py-1.5 text-[12px] text-muted-foreground/70 transition-colors hover:bg-accent/50 hover:text-foreground"
|
className="mt-0.5 flex items-center justify-between rounded-lg px-3 py-1.5 text-[12px] text-muted-foreground/70 transition-colors hover:bg-accent/50 hover:text-foreground"
|
||||||
>
|
>
|
||||||
<span>更多最近对话</span>
|
<span>更多最近对话</span>
|
||||||
|
|||||||
@@ -613,7 +613,7 @@ export function InputBox({
|
|||||||
: "*:data-[slot='input-group']:rounded-3xl",
|
: "*:data-[slot='input-group']:rounded-3xl",
|
||||||
// 紧凑落地态(CM 参考图):白卡 + 细边 + 轻阴影 + 主色聚焦环(无旋转彩边)
|
// 紧凑落地态(CM 参考图):白卡 + 细边 + 轻阴影 + 主色聚焦环(无旋转彩边)
|
||||||
compact && isNewThread
|
compact && isNewThread
|
||||||
? "rounded-2xl border border-gray-200/70 bg-white overflow-hidden shadow-[0_4.5px_22px_rgba(0,0,0,0.025)] transition-all duration-300 focus-within:border-[color-mix(in_srgb,var(--primary)_35%,transparent)] focus-within:ring-4 focus-within:ring-[color-mix(in_srgb,var(--primary)_5%,transparent)] focus-within:shadow-[0_10px_35px_color-mix(in_srgb,var(--primary)_4%,transparent)] dark:border-slate-700 dark:bg-slate-800"
|
? "rounded-2xl border border-gray-200/70 bg-white overflow-hidden shadow-[0_4.5px_22px_rgba(0,0,0,0.025)] transition-all duration-300 focus-within:border-[rgb(var(--legacy-primary-rgb)/35%)] focus-within:ring-4 focus-within:ring-[rgb(var(--legacy-primary-rgb)/5%)] focus-within:shadow-[0_10px_35px_rgb(var(--legacy-primary-rgb)/4%)] dark:border-slate-700 dark:bg-slate-800"
|
||||||
: // landing 态:透明,让外层 gemini-gradient-border 提供白卡 + 旋转描边
|
: // landing 态:透明,让外层 gemini-gradient-border 提供白卡 + 旋转描边
|
||||||
// 对话态:常规白卡 + 中性边框 + 轻阴影
|
// 对话态:常规白卡 + 中性边框 + 轻阴影
|
||||||
isNewThread
|
isNewThread
|
||||||
@@ -680,18 +680,21 @@ export function InputBox({
|
|||||||
<PromptInputButton
|
<PromptInputButton
|
||||||
className={cn(
|
className={cn(
|
||||||
"gap-1.5! rounded-full px-3! shadow-none",
|
"gap-1.5! rounded-full px-3! shadow-none",
|
||||||
compact && "rounded-lg px-2.5! py-1! text-[11px] font-medium",
|
compact && "rounded-lg px-2.5! py-1! text-[11px] font-medium",
|
||||||
context.writing_mode
|
context.writing_mode
|
||||||
? "border border-amber-300 bg-amber-50 text-amber-700 hover:bg-amber-100 dark:border-amber-700 dark:bg-amber-950/40 dark:text-amber-200"
|
? "border border-amber-300 bg-amber-50 text-amber-700 ring-1 ring-amber-300/35 hover:bg-amber-100 dark:border-amber-300/70 dark:bg-amber-400/20 dark:text-amber-100 dark:ring-amber-300/35 dark:shadow-[0_0_0_1px_rgba(251,191,36,0.18),0_0_18px_rgba(251,191,36,0.18)] dark:hover:bg-amber-400/25"
|
||||||
: compact
|
: compact
|
||||||
? "border border-transparent bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground"
|
? "border border-transparent bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||||
: "border-0 bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
|
: "border-0 bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
|
||||||
)}
|
)}
|
||||||
onClick={handleWritingModeToggle}
|
onClick={handleWritingModeToggle}
|
||||||
>
|
>
|
||||||
<FileTextIcon className="size-3" />
|
{context.writing_mode && (
|
||||||
<span className="text-xs font-normal">写作</span>
|
<CheckIcon className="size-3 text-amber-700 dark:text-amber-100" />
|
||||||
</PromptInputButton>
|
)}
|
||||||
|
<FileTextIcon className="size-3" />
|
||||||
|
<span className="text-xs font-normal">写作</span>
|
||||||
|
</PromptInputButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip
|
<Tooltip
|
||||||
content={
|
content={
|
||||||
@@ -702,19 +705,22 @@ export function InputBox({
|
|||||||
>
|
>
|
||||||
<PromptInputButton
|
<PromptInputButton
|
||||||
className={cn(
|
className={cn(
|
||||||
"gap-1.5! rounded-full px-3! shadow-none",
|
"gap-1.5! rounded-full px-3! shadow-none",
|
||||||
compact && "rounded-lg px-2.5! py-1! text-[11px] font-medium",
|
compact && "rounded-lg px-2.5! py-1! text-[11px] font-medium",
|
||||||
memoryInjectionEnabled
|
memoryInjectionEnabled
|
||||||
? "border border-blue-300 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-700 dark:bg-blue-950/40 dark:text-blue-200"
|
? "border border-blue-300 bg-blue-50 text-blue-700 ring-1 ring-blue-300/35 hover:bg-blue-100 dark:border-cyan-300/70 dark:bg-cyan-400/20 dark:text-cyan-50 dark:ring-cyan-300/35 dark:shadow-[0_0_0_1px_rgba(34,211,238,0.18),0_0_18px_rgba(34,211,238,0.18)] dark:hover:bg-cyan-400/25"
|
||||||
: compact
|
: compact
|
||||||
? "border border-transparent bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground"
|
? "border border-transparent bg-muted/40 text-muted-foreground hover:bg-muted hover:text-foreground"
|
||||||
: "border-0 bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
|
: "border-0 bg-transparent text-muted-foreground hover:bg-muted/70 hover:text-foreground dark:text-slate-400 dark:hover:bg-slate-700/70 dark:hover:text-slate-100",
|
||||||
)}
|
)}
|
||||||
onClick={handleMemoryInjectionToggle}
|
onClick={handleMemoryInjectionToggle}
|
||||||
>
|
>
|
||||||
<BrainCircuitIcon className="size-3" />
|
{memoryInjectionEnabled && (
|
||||||
<span className="text-xs font-normal">记忆</span>
|
<CheckIcon className="size-3 text-blue-700 dark:text-cyan-50" />
|
||||||
</PromptInputButton>
|
)}
|
||||||
|
<BrainCircuitIcon className="size-3" />
|
||||||
|
<span className="text-xs font-normal">记忆</span>
|
||||||
|
</PromptInputButton>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
<Tooltip
|
<Tooltip
|
||||||
content={
|
content={
|
||||||
@@ -1166,7 +1172,7 @@ export function InputBox({
|
|||||||
className={cn(
|
className={cn(
|
||||||
"rounded-full border-border bg-background shadow-sm hover:bg-muted dark:bg-blue-500 dark:border-blue-500 dark:text-white dark:hover:bg-blue-400 dark:shadow-none",
|
"rounded-full border-border bg-background shadow-sm hover:bg-muted dark:bg-blue-500 dark:border-blue-500 dark:text-white dark:hover:bg-blue-400 dark:shadow-none",
|
||||||
compact &&
|
compact &&
|
||||||
"size-7 rounded-lg border-0 bg-[var(--primary)] text-[var(--primary-foreground)] hover:bg-[color-mix(in_srgb,var(--primary)_88%,black)] disabled:bg-muted disabled:text-muted-foreground/40 dark:bg-[var(--primary)] dark:border-0 dark:text-[var(--primary-foreground)] dark:hover:bg-[color-mix(in_srgb,var(--primary)_88%,black)] dark:disabled:bg-muted",
|
"size-7 rounded-lg border-0 bg-[var(--primary)] text-[var(--button-foreground,var(--primary-foreground))] hover:opacity-90 disabled:bg-muted disabled:text-muted-foreground/40 dark:bg-[var(--primary)] dark:border-0 dark:text-[var(--button-foreground,var(--primary-foreground))] dark:hover:opacity-90 dark:disabled:bg-muted",
|
||||||
)}
|
)}
|
||||||
disabled={disabled}
|
disabled={disabled}
|
||||||
variant="outline"
|
variant="outline"
|
||||||
|
|||||||
@@ -135,10 +135,12 @@ export function MessageListItem({
|
|||||||
threadId,
|
threadId,
|
||||||
tokenUsageEnabled = false,
|
tokenUsageEnabled = false,
|
||||||
displaySources = [],
|
displaySources = [],
|
||||||
extraRehypePlugins,
|
extraRehypePlugins,
|
||||||
onEditResubmit,
|
onEditResubmit,
|
||||||
onMessageDeleted,
|
onEditSave,
|
||||||
}: {
|
onMessageDeleted,
|
||||||
|
turnTime,
|
||||||
|
}: {
|
||||||
className?: string;
|
className?: string;
|
||||||
fitRowToContent?: boolean;
|
fitRowToContent?: boolean;
|
||||||
/**
|
/**
|
||||||
@@ -150,18 +152,114 @@ export function MessageListItem({
|
|||||||
isLoading?: boolean;
|
isLoading?: boolean;
|
||||||
threadId: string;
|
threadId: string;
|
||||||
tokenUsageEnabled?: boolean;
|
tokenUsageEnabled?: boolean;
|
||||||
displaySources?: RuntimeDisplaySource[];
|
displaySources?: RuntimeDisplaySource[];
|
||||||
extraRehypePlugins?: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
|
extraRehypePlugins?: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
|
||||||
onEditResubmit?: (text: string) => void;
|
onEditResubmit?: (text: string) => void;
|
||||||
onMessageDeleted?: (deletedIds: string[]) => void;
|
onEditSave?: (messageId: string, text: string) => void | Promise<void>;
|
||||||
}) {
|
onMessageDeleted?: (deletedIds: string[]) => void;
|
||||||
const isHuman = message.type === 'human';
|
/**
|
||||||
const messageMarkdown =
|
* Durable ask time of the turn this message belongs to (the preceding
|
||||||
extractContentFromMessage(message) ??
|
* question's `client_ts`). Used to time-stamp the AI answer, which carries no
|
||||||
extractReasoningContentFromMessage(message) ??
|
* timestamp of its own — without it the answer would fall back to the current
|
||||||
'';
|
* wall clock at render time and appear to "drift" to now on every reload.
|
||||||
return (
|
*/
|
||||||
<AIElementMessage
|
turnTime?: string;
|
||||||
|
}) {
|
||||||
|
const { t } = useI18n();
|
||||||
|
const isHuman = message.type === 'human';
|
||||||
|
const messageMarkdown =
|
||||||
|
extractContentFromMessage(message) ??
|
||||||
|
extractReasoningContentFromMessage(message) ??
|
||||||
|
'';
|
||||||
|
const [assistantEditing, setAssistantEditing] = useState(false);
|
||||||
|
const [assistantDraft, setAssistantDraft] = useState(messageMarkdown);
|
||||||
|
const [assistantSaving, setAssistantSaving] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!assistantEditing) {
|
||||||
|
setAssistantDraft(messageMarkdown);
|
||||||
|
}
|
||||||
|
}, [assistantEditing, messageMarkdown]);
|
||||||
|
|
||||||
|
const canSaveAssistantEdit =
|
||||||
|
!isLoading &&
|
||||||
|
!isHuman &&
|
||||||
|
!!onEditSave &&
|
||||||
|
!!message.id &&
|
||||||
|
!message.id.startsWith('opt-') &&
|
||||||
|
!!messageMarkdown;
|
||||||
|
const confirmAssistantEdit = useCallback(async () => {
|
||||||
|
const value = assistantDraft.trim();
|
||||||
|
if (!value || !message.id || !onEditSave || assistantSaving) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setAssistantSaving(true);
|
||||||
|
try {
|
||||||
|
await onEditSave(message.id, value);
|
||||||
|
setAssistantEditing(false);
|
||||||
|
} catch {
|
||||||
|
// The page-level save callback owns user-facing error toasts. Keep the
|
||||||
|
// editor open so the user can adjust and retry.
|
||||||
|
} finally {
|
||||||
|
setAssistantSaving(false);
|
||||||
|
}
|
||||||
|
}, [assistantDraft, assistantSaving, message.id, onEditSave]);
|
||||||
|
|
||||||
|
if (!isHuman && assistantEditing) {
|
||||||
|
return (
|
||||||
|
<AIElementMessage
|
||||||
|
id={anchorId}
|
||||||
|
className={cn(
|
||||||
|
'group/conversation-message relative',
|
||||||
|
fitRowToContent ? 'max-w-full w-fit' : 'w-full',
|
||||||
|
anchorId && 'scroll-mt-20',
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
from="assistant"
|
||||||
|
>
|
||||||
|
<AIElementMessageContent className="w-full">
|
||||||
|
<div className="flex w-full flex-col gap-2 rounded-2xl border border-primary/20 bg-primary/5 p-3">
|
||||||
|
<Textarea
|
||||||
|
value={assistantDraft}
|
||||||
|
autoFocus
|
||||||
|
onChange={(event) => setAssistantDraft(event.currentTarget.value)}
|
||||||
|
onKeyDown={(event) => {
|
||||||
|
if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
|
||||||
|
event.preventDefault();
|
||||||
|
void confirmAssistantEdit();
|
||||||
|
}
|
||||||
|
if (event.key === "Escape") {
|
||||||
|
event.preventDefault();
|
||||||
|
setAssistantEditing(false);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="min-h-32 resize-y text-[15px] leading-7"
|
||||||
|
/>
|
||||||
|
<div className="flex items-center justify-end gap-2">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="ghost"
|
||||||
|
disabled={assistantSaving}
|
||||||
|
onClick={() => setAssistantEditing(false)}
|
||||||
|
>
|
||||||
|
{t.common.cancel}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
disabled={!assistantDraft.trim() || assistantSaving}
|
||||||
|
onClick={() => void confirmAssistantEdit()}
|
||||||
|
>
|
||||||
|
{assistantSaving ? "保存中..." : t.common.save}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</AIElementMessageContent>
|
||||||
|
</AIElementMessage>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AIElementMessage
|
||||||
id={anchorId}
|
id={anchorId}
|
||||||
className={cn(
|
className={cn(
|
||||||
'group/conversation-message relative',
|
'group/conversation-message relative',
|
||||||
@@ -179,10 +277,12 @@ export function MessageListItem({
|
|||||||
threadId={threadId}
|
threadId={threadId}
|
||||||
tokenUsageEnabled={tokenUsageEnabled}
|
tokenUsageEnabled={tokenUsageEnabled}
|
||||||
displaySources={displaySources}
|
displaySources={displaySources}
|
||||||
extraRehypePlugins={extraRehypePlugins}
|
extraRehypePlugins={extraRehypePlugins}
|
||||||
onEditResubmit={onEditResubmit}
|
onEditResubmit={onEditResubmit}
|
||||||
onMessageDeleted={onMessageDeleted}
|
onEditSave={isLoading ? undefined : onEditSave}
|
||||||
/>
|
onMessageDeleted={onMessageDeleted}
|
||||||
|
turnTime={turnTime}
|
||||||
|
/>
|
||||||
{/*
|
{/*
|
||||||
Human messages carry their own inline copy/edit toolbar inside
|
Human messages carry their own inline copy/edit toolbar inside
|
||||||
MessageContent (above the timestamp). Only assistant answers use the
|
MessageContent (above the timestamp). Only assistant answers use the
|
||||||
@@ -197,15 +297,28 @@ export function MessageListItem({
|
|||||||
>
|
>
|
||||||
<div className="flex gap-1">
|
<div className="flex gap-1">
|
||||||
<CopyButton clipboardData={messageMarkdown} />
|
<CopyButton clipboardData={messageMarkdown} />
|
||||||
{messageMarkdown && (
|
{messageMarkdown && (
|
||||||
<DownloadWordButton
|
<DownloadWordButton
|
||||||
markdown={messageMarkdown}
|
markdown={messageMarkdown}
|
||||||
fileName="message"
|
fileName="message"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
{canSaveAssistantEdit && (
|
||||||
</MessageToolbar>
|
<Tooltip content="编辑消息">
|
||||||
)}
|
<Button
|
||||||
|
size="icon-sm"
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
className="size-6"
|
||||||
|
onClick={() => setAssistantEditing(true)}
|
||||||
|
>
|
||||||
|
<PencilIcon size={11} />
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</MessageToolbar>
|
||||||
|
)}
|
||||||
</AIElementMessage>
|
</AIElementMessage>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -219,26 +332,31 @@ export function MessageListItem({
|
|||||||
* the question; confirming sends the edited text as a brand-new turn (the
|
* the question; confirming sends the edited text as a brand-new turn (the
|
||||||
* original question stays in the thread).
|
* original question stays in the thread).
|
||||||
*/
|
*/
|
||||||
function HumanMessageBlock({
|
function HumanMessageBlock({
|
||||||
text,
|
messageId,
|
||||||
pageContext,
|
text,
|
||||||
filesList,
|
pageContext,
|
||||||
messageTime,
|
filesList,
|
||||||
components,
|
messageTime,
|
||||||
onEditResubmit,
|
components,
|
||||||
deleteButton,
|
onEditResubmit,
|
||||||
}: {
|
onEditSave,
|
||||||
text: string;
|
deleteButton,
|
||||||
pageContext?: EmbeddedPageContext | null;
|
}: {
|
||||||
filesList: React.ReactNode;
|
messageId?: string;
|
||||||
messageTime: { label: string; full: string } | null;
|
text: string;
|
||||||
components: MarkdownContentProps["components"];
|
pageContext?: EmbeddedPageContext | null;
|
||||||
onEditResubmit?: (text: string) => void;
|
filesList: React.ReactNode;
|
||||||
deleteButton?: React.ReactNode;
|
messageTime: { label: string; full: string } | null;
|
||||||
}) {
|
components: MarkdownContentProps["components"];
|
||||||
const { t } = useI18n();
|
onEditResubmit?: (text: string) => void;
|
||||||
const [editing, setEditing] = useState(false);
|
onEditSave?: (messageId: string, text: string) => void | Promise<void>;
|
||||||
const [draft, setDraft] = useState(text);
|
deleteButton?: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
const { t } = useI18n();
|
||||||
|
const [editing, setEditing] = useState(false);
|
||||||
|
const [draft, setDraft] = useState(text);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!editing) {
|
if (!editing) {
|
||||||
@@ -246,14 +364,27 @@ function HumanMessageBlock({
|
|||||||
}
|
}
|
||||||
}, [text, editing]);
|
}, [text, editing]);
|
||||||
|
|
||||||
const confirmEdit = useCallback(() => {
|
const confirmEdit = useCallback(async () => {
|
||||||
const value = draft.trim();
|
const value = draft.trim();
|
||||||
if (!value) {
|
if (!value || saving) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
onEditResubmit?.(value);
|
if (onEditSave && messageId && !messageId.startsWith("opt-")) {
|
||||||
setEditing(false);
|
setSaving(true);
|
||||||
}, [draft, onEditResubmit]);
|
try {
|
||||||
|
await onEditSave(messageId, value);
|
||||||
|
setEditing(false);
|
||||||
|
} catch {
|
||||||
|
// The page-level save callback owns user-facing error toasts. Keep the
|
||||||
|
// editor open so the user can adjust and retry.
|
||||||
|
} finally {
|
||||||
|
setSaving(false);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
onEditResubmit?.(value);
|
||||||
|
setEditing(false);
|
||||||
|
}, [draft, messageId, onEditResubmit, onEditSave, saving]);
|
||||||
|
|
||||||
if (editing) {
|
if (editing) {
|
||||||
return (
|
return (
|
||||||
@@ -266,10 +397,10 @@ function HumanMessageBlock({
|
|||||||
onKeyDown={(event) => {
|
onKeyDown={(event) => {
|
||||||
if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
|
if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
confirmEdit();
|
void confirmEdit();
|
||||||
}
|
}
|
||||||
if (event.key === "Escape") {
|
if (event.key === "Escape") {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
setEditing(false);
|
setEditing(false);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
@@ -277,17 +408,22 @@ function HumanMessageBlock({
|
|||||||
/>
|
/>
|
||||||
<div className="flex items-center justify-end gap-2">
|
<div className="flex items-center justify-end gap-2">
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
size="sm"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
onClick={() => setEditing(false)}
|
disabled={saving}
|
||||||
>
|
onClick={() => setEditing(false)}
|
||||||
{t.common.cancel}
|
>
|
||||||
</Button>
|
{t.common.cancel}
|
||||||
<Button size="sm" onClick={confirmEdit} disabled={!draft.trim()}>
|
</Button>
|
||||||
{t.common.confirm}
|
<Button
|
||||||
</Button>
|
size="sm"
|
||||||
</div>
|
onClick={() => void confirmEdit()}
|
||||||
</div>
|
disabled={!draft.trim() || saving}
|
||||||
|
>
|
||||||
|
{saving ? "保存中..." : onEditSave ? t.common.save : t.common.confirm}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -315,11 +451,11 @@ function HumanMessageBlock({
|
|||||||
{(text || deleteButton) && (
|
{(text || deleteButton) && (
|
||||||
<div className="flex items-center gap-0.5 opacity-0 transition-opacity duration-200 group-hover/conversation-message:opacity-100">
|
<div className="flex items-center gap-0.5 opacity-0 transition-opacity duration-200 group-hover/conversation-message:opacity-100">
|
||||||
{text && <CopyButton clipboardData={text} className="size-6" />}
|
{text && <CopyButton clipboardData={text} className="size-6" />}
|
||||||
{text && onEditResubmit && (
|
{text && (onEditResubmit || onEditSave) && (
|
||||||
<Tooltip content={t.inputBox.editQuestion}>
|
<Tooltip content={onEditSave ? "编辑消息" : t.inputBox.editQuestion}>
|
||||||
<Button
|
<Button
|
||||||
size="icon-sm"
|
size="icon-sm"
|
||||||
type="button"
|
type="button"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className="size-6"
|
className="size-6"
|
||||||
onClick={() => setEditing(true)}
|
onClick={() => setEditing(true)}
|
||||||
@@ -387,20 +523,24 @@ function MessageContent_({
|
|||||||
threadId,
|
threadId,
|
||||||
tokenUsageEnabled = false,
|
tokenUsageEnabled = false,
|
||||||
displaySources = [],
|
displaySources = [],
|
||||||
extraRehypePlugins,
|
extraRehypePlugins,
|
||||||
onEditResubmit,
|
onEditResubmit,
|
||||||
onMessageDeleted,
|
onEditSave,
|
||||||
}: {
|
onMessageDeleted,
|
||||||
|
turnTime,
|
||||||
|
}: {
|
||||||
className?: string;
|
className?: string;
|
||||||
message: Message;
|
message: Message;
|
||||||
isLoading?: boolean;
|
isLoading?: boolean;
|
||||||
threadId: string;
|
threadId: string;
|
||||||
tokenUsageEnabled?: boolean;
|
tokenUsageEnabled?: boolean;
|
||||||
displaySources?: RuntimeDisplaySource[];
|
displaySources?: RuntimeDisplaySource[];
|
||||||
extraRehypePlugins?: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
|
extraRehypePlugins?: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
|
||||||
onEditResubmit?: (text: string) => void;
|
onEditResubmit?: (text: string) => void;
|
||||||
onMessageDeleted?: (deletedIds: string[]) => void;
|
onEditSave?: (messageId: string, text: string) => void | Promise<void>;
|
||||||
}) {
|
onMessageDeleted?: (deletedIds: string[]) => void;
|
||||||
|
turnTime?: string;
|
||||||
|
}) {
|
||||||
const baseRehypePlugins = useRehypeSplitWordsIntoSpans(isLoading);
|
const baseRehypePlugins = useRehypeSplitWordsIntoSpans(isLoading);
|
||||||
|
|
||||||
// Streamdown splits content into per-block processors; calling the factory
|
// Streamdown splits content into per-block processors; calling the factory
|
||||||
@@ -456,9 +596,15 @@ function MessageContent_({
|
|||||||
[threadId, resolveArtifact],
|
[threadId, resolveArtifact],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Question carries its own `client_ts` (round-trips through the checkpoint).
|
||||||
|
// The AI answer has no timestamp of its own, so it inherits the turn's ask
|
||||||
|
// time (its question's `client_ts`, threaded down as `turnTime`). This is
|
||||||
|
// durable and turn-accurate, and — unlike the old per-id `now` fallback —
|
||||||
|
// never drifts to the current clock when an unfinished answer is reloaded.
|
||||||
|
const ownAskTime = message.id ? askTimes[message.id] : undefined;
|
||||||
const messageTime = formatAskedTime(
|
const messageTime = formatAskedTime(
|
||||||
message.additional_kwargs?.client_ts ??
|
message.additional_kwargs?.client_ts ??
|
||||||
(message.id ? askTimes[message.id] : undefined),
|
(isHuman ? ownAskTime : (turnTime ?? ownAskTime)),
|
||||||
);
|
);
|
||||||
|
|
||||||
const rawContent = extractContentFromMessage(message);
|
const rawContent = extractContentFromMessage(message);
|
||||||
@@ -538,14 +684,16 @@ function MessageContent_({
|
|||||||
const canDelete =
|
const canDelete =
|
||||||
!!onMessageDeleted && !!message.id && !message.id.startsWith('opt-');
|
!!onMessageDeleted && !!message.id && !message.id.startsWith('opt-');
|
||||||
return (
|
return (
|
||||||
<HumanMessageBlock
|
<HumanMessageBlock
|
||||||
text={parsedHumanContent.content}
|
messageId={message.id}
|
||||||
pageContext={parsedHumanContent.pageContext}
|
text={parsedHumanContent.content}
|
||||||
filesList={filesList}
|
pageContext={parsedHumanContent.pageContext}
|
||||||
messageTime={messageTime}
|
filesList={filesList}
|
||||||
components={components}
|
messageTime={messageTime}
|
||||||
onEditResubmit={onEditResubmit}
|
components={components}
|
||||||
deleteButton={
|
onEditResubmit={onEditResubmit}
|
||||||
|
onEditSave={onEditSave}
|
||||||
|
deleteButton={
|
||||||
canDelete ? (
|
canDelete ? (
|
||||||
<DeleteMessageButton
|
<DeleteMessageButton
|
||||||
threadId={threadId}
|
threadId={threadId}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import type { Message } from "@langchain/langgraph-sdk";
|
import type { Message } from "@langchain/langgraph-sdk";
|
||||||
import type { BaseStream } from "@langchain/langgraph-sdk/react";
|
import type { BaseStream } from "@langchain/langgraph-sdk/react";
|
||||||
import { CheckIcon, SendIcon, XIcon } from "lucide-react";
|
import { CheckIcon, PenLineIcon, SendIcon, XIcon } from "lucide-react";
|
||||||
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
|
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
|
||||||
import { useStickToBottomContext } from "use-stick-to-bottom";
|
import { useStickToBottomContext } from "use-stick-to-bottom";
|
||||||
|
|
||||||
@@ -11,7 +11,7 @@ import {
|
|||||||
} from "@/components/ai-elements/conversation";
|
} from "@/components/ai-elements/conversation";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { Textarea } from "@/components/ui/textarea";
|
import { Textarea } from "@/components/ui/textarea";
|
||||||
import { rememberAskTimes } from "@/core/chat-timestamps";
|
import { rememberAskTimes, useChatAskTimes } from "@/core/chat-timestamps";
|
||||||
import { useI18n } from "@/core/i18n/hooks";
|
import { useI18n } from "@/core/i18n/hooks";
|
||||||
import {
|
import {
|
||||||
extractContentFromMessage,
|
extractContentFromMessage,
|
||||||
@@ -20,10 +20,10 @@ import {
|
|||||||
groupMessages,
|
groupMessages,
|
||||||
hasContent,
|
hasContent,
|
||||||
hasPresentFiles,
|
hasPresentFiles,
|
||||||
hasReasoning,
|
hasReasoning,
|
||||||
hasToolCalls,
|
hasToolCalls,
|
||||||
isHiddenFromUIMessage,
|
isHiddenFromUIMessage,
|
||||||
} from "@/core/messages/utils";
|
} from "@/core/messages/utils";
|
||||||
import { useRehypeSplitWordsIntoSpans } from "@/core/rehype";
|
import { useRehypeSplitWordsIntoSpans } from "@/core/rehype";
|
||||||
import { isThreadRagModeLocked, useLocalSettings } from "@/core/settings";
|
import { isThreadRagModeLocked, useLocalSettings } from "@/core/settings";
|
||||||
import { useSkills } from "@/core/skills/hooks";
|
import { useSkills } from "@/core/skills/hooks";
|
||||||
@@ -97,13 +97,18 @@ export function MessageList({
|
|||||||
tokenUsageEnabled = false,
|
tokenUsageEnabled = false,
|
||||||
extraRehypePlugins,
|
extraRehypePlugins,
|
||||||
scrollButtonClassName,
|
scrollButtonClassName,
|
||||||
onClarificationSubmit,
|
onClarificationSubmit,
|
||||||
onEditResubmit,
|
onEditResubmit,
|
||||||
onSetupAgentApprove,
|
onEditSave,
|
||||||
onSetupAgentReject,
|
messageContentOverrides,
|
||||||
onSetupWritingApprove,
|
externallyHiddenMessageIds,
|
||||||
onSetupWritingReject,
|
onSetupAgentApprove,
|
||||||
}: {
|
onSetupAgentReject,
|
||||||
|
onSetupWritingApprove,
|
||||||
|
onSetupWritingReject,
|
||||||
|
onSetupWritingStart,
|
||||||
|
onOpenArtifact,
|
||||||
|
}: {
|
||||||
className?: string;
|
className?: string;
|
||||||
contentClassName?: string;
|
contentClassName?: string;
|
||||||
fitMessageRowsToContent?: boolean;
|
fitMessageRowsToContent?: boolean;
|
||||||
@@ -114,13 +119,19 @@ export function MessageList({
|
|||||||
/** 额外定位「回到最新」悬浮按钮——不同页面输入框高度不同,需上移让位。 */
|
/** 额外定位「回到最新」悬浮按钮——不同页面输入框高度不同,需上移让位。 */
|
||||||
scrollButtonClassName?: string;
|
scrollButtonClassName?: string;
|
||||||
extraRehypePlugins?: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
|
extraRehypePlugins?: ReturnType<typeof useRehypeSplitWordsIntoSpans>;
|
||||||
onClarificationSubmit?: (answer: string) => void | Promise<void>;
|
onClarificationSubmit?: (answer: string) => void | Promise<void>;
|
||||||
onEditResubmit?: (text: string) => void;
|
onEditResubmit?: (text: string) => void;
|
||||||
onSetupAgentApprove?: (payload: SetupAgentApprovalPayload) => void | Promise<void>;
|
onEditSave?: (messageId: string, text: string) => void | Promise<void>;
|
||||||
|
messageContentOverrides?: Record<string, string>;
|
||||||
|
externallyHiddenMessageIds?: Set<string>;
|
||||||
|
onSetupAgentApprove?: (payload: SetupAgentApprovalPayload) => void | Promise<void>;
|
||||||
onSetupAgentReject?: (payload: SetupAgentApprovalPayload) => void | Promise<void>;
|
onSetupAgentReject?: (payload: SetupAgentApprovalPayload) => void | Promise<void>;
|
||||||
onSetupWritingApprove?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
|
onSetupWritingApprove?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
|
||||||
onSetupWritingReject?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
|
onSetupWritingReject?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
|
||||||
}) {
|
/** 审批卡「直接开始写作」回调:应用配置(含已确认大纲)并立即启动写作流程(仅写作页提供,模板编辑等场景缺省隐藏该按钮)。 */
|
||||||
|
onSetupWritingStart?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
|
||||||
|
onOpenArtifact?: (filepath: string) => void;
|
||||||
|
}) {
|
||||||
const baseRehypePlugins = useRehypeSplitWordsIntoSpans(thread.isLoading);
|
const baseRehypePlugins = useRehypeSplitWordsIntoSpans(thread.isLoading);
|
||||||
const rehypePlugins = useMemo(
|
const rehypePlugins = useMemo(
|
||||||
() => (extraRehypePlugins?.length ? [...baseRehypePlugins, ...extraRehypePlugins] : baseRehypePlugins),
|
() => (extraRehypePlugins?.length ? [...baseRehypePlugins, ...extraRehypePlugins] : baseRehypePlugins),
|
||||||
@@ -152,27 +163,52 @@ export function MessageList({
|
|||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const allMessages = useMemo(
|
const allMessages = useMemo(() => {
|
||||||
() => thread.messages.filter((m) => !isHiddenFromUIMessage(m)),
|
const hasOverrides = messageContentOverrides && Object.keys(messageContentOverrides).length > 0;
|
||||||
[thread.messages],
|
return thread.messages
|
||||||
|
.filter((m) => !isHiddenFromUIMessage(m))
|
||||||
|
.map((message) => {
|
||||||
|
const override =
|
||||||
|
hasOverrides && message.id
|
||||||
|
? messageContentOverrides?.[message.id]
|
||||||
|
: undefined;
|
||||||
|
return override === undefined
|
||||||
|
? message
|
||||||
|
: ({ ...message, content: override } as Message);
|
||||||
|
});
|
||||||
|
}, [messageContentOverrides, thread.messages]);
|
||||||
|
const messages = useMemo(
|
||||||
|
() => {
|
||||||
|
const externalHidden = externallyHiddenMessageIds ?? new Set<string>();
|
||||||
|
return hiddenMessageIds.size === 0 && externalHidden.size === 0
|
||||||
|
? allMessages
|
||||||
|
: allMessages.filter(
|
||||||
|
(m) =>
|
||||||
|
!m.id ||
|
||||||
|
(!hiddenMessageIds.has(m.id) && !externalHidden.has(m.id)),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
[allMessages, externallyHiddenMessageIds, hiddenMessageIds],
|
||||||
);
|
);
|
||||||
const messages = useMemo(
|
|
||||||
() =>
|
|
||||||
hiddenMessageIds.size === 0
|
|
||||||
? allMessages
|
|
||||||
: allMessages.filter((m) => !m.id || !hiddenMessageIds.has(m.id)),
|
|
||||||
[allMessages, hiddenMessageIds],
|
|
||||||
);
|
|
||||||
|
|
||||||
// Stamp a wall-clock time onto every question/answer the first time it is
|
const askTimes = useChatAskTimes();
|
||||||
// seen, in a single batched commit. Questions sent this session already carry
|
|
||||||
// an accurate time (see useThreadStream); this also covers assistant answers
|
// Stamp a wall-clock time onto every *question* the first time it is seen, in
|
||||||
// and messages loaded from history. First-write-wins keeps the earliest time.
|
// a single batched commit. Questions sent this session already carry an
|
||||||
|
// accurate `client_ts` (see useThreadStream) and are skipped; this only backs
|
||||||
|
// up legacy questions loaded from history that predate `client_ts`.
|
||||||
|
// First-write-wins keeps the earliest time.
|
||||||
|
//
|
||||||
|
// AI answers are deliberately NOT stamped here: they carry no timestamp of
|
||||||
|
// their own, so a `now` stamp would be the *load* time, not the answer time —
|
||||||
|
// and for an unfinished/interrupted turn that re-stamps to the current clock
|
||||||
|
// on every reload. Instead the answer inherits its question's durable time
|
||||||
|
// via `turnTimes` below.
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const now = new Date().toISOString();
|
const now = new Date().toISOString();
|
||||||
const entries: Record<string, string> = {};
|
const entries: Record<string, string> = {};
|
||||||
for (const message of messages) {
|
for (const message of messages) {
|
||||||
if (message.type !== "human" && message.type !== "ai") continue;
|
if (message.type !== "human") continue;
|
||||||
if (!message.id || message.id.startsWith("opt-")) continue;
|
if (!message.id || message.id.startsWith("opt-")) continue;
|
||||||
if (typeof message.additional_kwargs?.client_ts === "string") continue;
|
if (typeof message.additional_kwargs?.client_ts === "string") continue;
|
||||||
entries[message.id] = now;
|
entries[message.id] = now;
|
||||||
@@ -180,6 +216,24 @@ export function MessageList({
|
|||||||
if (Object.keys(entries).length > 0) rememberAskTimes(entries);
|
if (Object.keys(entries).length > 0) rememberAskTimes(entries);
|
||||||
}, [messages]);
|
}, [messages]);
|
||||||
|
|
||||||
|
// Durable ask time per message id, used to time-stamp the AI answer (which has
|
||||||
|
// no timestamp of its own) with the time of the question that triggered it.
|
||||||
|
const turnTimes = useMemo(() => {
|
||||||
|
const map = new Map<string, string>();
|
||||||
|
let lastQuestionTime: string | undefined;
|
||||||
|
for (const message of messages) {
|
||||||
|
if (message.type === "human") {
|
||||||
|
const ts = message.additional_kwargs?.client_ts;
|
||||||
|
const fromAskTimes = message.id ? askTimes[message.id] : undefined;
|
||||||
|
lastQuestionTime =
|
||||||
|
typeof ts === "string" && ts ? ts : fromAskTimes;
|
||||||
|
} else if (message.type === "ai" && message.id && lastQuestionTime) {
|
||||||
|
map.set(message.id, lastQuestionTime);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return map;
|
||||||
|
}, [messages, askTimes]);
|
||||||
|
|
||||||
const [settings] = useLocalSettings();
|
const [settings] = useLocalSettings();
|
||||||
const ragModeEnabled =
|
const ragModeEnabled =
|
||||||
settings.display.ragModeEnabled || isThreadRagModeLocked(threadId);
|
settings.display.ragModeEnabled || isThreadRagModeLocked(threadId);
|
||||||
@@ -350,11 +404,13 @@ export function MessageList({
|
|||||||
threadId={threadId}
|
threadId={threadId}
|
||||||
tokenUsageEnabled={tokenUsageEnabled}
|
tokenUsageEnabled={tokenUsageEnabled}
|
||||||
displaySources={displaySources}
|
displaySources={displaySources}
|
||||||
extraRehypePlugins={extraRehypePlugins}
|
extraRehypePlugins={extraRehypePlugins}
|
||||||
onEditResubmit={onEditResubmit}
|
onEditResubmit={onEditResubmit}
|
||||||
onMessageDeleted={
|
onEditSave={onEditSave}
|
||||||
allowDelete ? handleMessageDeleted : undefined
|
onMessageDeleted={
|
||||||
|
allowDelete ? handleMessageDeleted : undefined
|
||||||
}
|
}
|
||||||
|
turnTime={msg.id ? turnTimes.get(msg.id) : undefined}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
@@ -430,6 +486,7 @@ export function MessageList({
|
|||||||
message={message}
|
message={message}
|
||||||
onApprove={onSetupWritingApprove}
|
onApprove={onSetupWritingApprove}
|
||||||
onReject={onSetupWritingReject}
|
onReject={onSetupWritingReject}
|
||||||
|
onStart={onSetupWritingStart}
|
||||||
/>
|
/>
|
||||||
<MessageTokenUsageList
|
<MessageTokenUsageList
|
||||||
enabled={tokenUsageEnabled}
|
enabled={tokenUsageEnabled}
|
||||||
@@ -456,7 +513,11 @@ export function MessageList({
|
|||||||
className="mb-4"
|
className="mb-4"
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
<ArtifactFileList files={files} threadId={threadId} />
|
<ArtifactFileList
|
||||||
|
files={files}
|
||||||
|
threadId={threadId}
|
||||||
|
onOpenArtifact={onOpenArtifact}
|
||||||
|
/>
|
||||||
<MessageTokenUsageList
|
<MessageTokenUsageList
|
||||||
enabled={tokenUsageEnabled}
|
enabled={tokenUsageEnabled}
|
||||||
isLoading={thread.isLoading}
|
isLoading={thread.isLoading}
|
||||||
@@ -629,6 +690,8 @@ export type SetupAgentApprovalPayload = {
|
|||||||
export type SetupWritingApprovalPayload = {
|
export type SetupWritingApprovalPayload = {
|
||||||
user_intent?: string;
|
user_intent?: string;
|
||||||
article_type?: string;
|
article_type?: string;
|
||||||
|
/** 当 article_type 是已有类型库里没有的新类型时,模型识别出的一句话特征说明(命中已有类型时为空)。 */
|
||||||
|
article_type_detail?: string;
|
||||||
word_count_target?: number | null;
|
word_count_target?: number | null;
|
||||||
target_audience?: string;
|
target_audience?: string;
|
||||||
writing_mode?: string;
|
writing_mode?: string;
|
||||||
@@ -820,14 +883,16 @@ function SetupWritingApprovalCard({
|
|||||||
message,
|
message,
|
||||||
onApprove,
|
onApprove,
|
||||||
onReject,
|
onReject,
|
||||||
|
onStart,
|
||||||
}: {
|
}: {
|
||||||
disabled: boolean;
|
disabled: boolean;
|
||||||
message: unknown;
|
message: unknown;
|
||||||
onApprove?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
|
onApprove?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
|
||||||
onReject?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
|
onReject?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
|
||||||
|
onStart?: (payload: SetupWritingApprovalPayload) => void | Promise<void>;
|
||||||
}) {
|
}) {
|
||||||
const payload = getSetupWritingApprovalPayload(message);
|
const payload = getSetupWritingApprovalPayload(message);
|
||||||
const [submitting, setSubmitting] = useState<"approve" | "reject" | null>(
|
const [submitting, setSubmitting] = useState<"approve" | "reject" | "start" | null>(
|
||||||
null,
|
null,
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -838,7 +903,7 @@ function SetupWritingApprovalCard({
|
|||||||
const approvalPayload = payload;
|
const approvalPayload = payload;
|
||||||
const busy = disabled || submitting !== null;
|
const busy = disabled || submitting !== null;
|
||||||
|
|
||||||
async function run(action: "approve" | "reject") {
|
async function run(action: "approve" | "reject" | "start") {
|
||||||
if (busy) {
|
if (busy) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -846,6 +911,8 @@ function SetupWritingApprovalCard({
|
|||||||
try {
|
try {
|
||||||
if (action === "approve") {
|
if (action === "approve") {
|
||||||
await onApprove?.(approvalPayload);
|
await onApprove?.(approvalPayload);
|
||||||
|
} else if (action === "start") {
|
||||||
|
await onStart?.(approvalPayload);
|
||||||
} else {
|
} else {
|
||||||
await onReject?.(approvalPayload);
|
await onReject?.(approvalPayload);
|
||||||
}
|
}
|
||||||
@@ -854,9 +921,14 @@ function SetupWritingApprovalCard({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const hasNewType = !!approvalPayload.article_type_detail?.trim();
|
||||||
const rows: Array<{ label: string; value: string }> = [];
|
const rows: Array<{ label: string; value: string }> = [];
|
||||||
if (approvalPayload.article_type) {
|
if (approvalPayload.article_type) {
|
||||||
rows.push({ label: "文章类型", value: approvalPayload.article_type });
|
rows.push({
|
||||||
|
label: "文章类型",
|
||||||
|
// 新类型(列表外)标注「· 新」,让用户知道这是模型新识别的类型。
|
||||||
|
value: hasNewType ? `${approvalPayload.article_type} · 新` : approvalPayload.article_type,
|
||||||
|
});
|
||||||
}
|
}
|
||||||
if (typeof approvalPayload.word_count_target === "number") {
|
if (typeof approvalPayload.word_count_target === "number") {
|
||||||
rows.push({ label: "目标字数", value: `${approvalPayload.word_count_target} 字` });
|
rows.push({ label: "目标字数", value: `${approvalPayload.word_count_target} 字` });
|
||||||
@@ -903,6 +975,13 @@ function SetupWritingApprovalCard({
|
|||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
|
|
||||||
|
{hasNewType ? (
|
||||||
|
<div className="space-y-1">
|
||||||
|
<div className="text-muted-foreground text-xs">新类型说明</div>
|
||||||
|
<p className="text-sm leading-6">{approvalPayload.article_type_detail}</p>
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
{approvalPayload.outline ? (
|
{approvalPayload.outline ? (
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<div className="text-muted-foreground text-xs">已有大纲</div>
|
<div className="text-muted-foreground text-xs">已有大纲</div>
|
||||||
@@ -926,6 +1005,7 @@ function SetupWritingApprovalCard({
|
|||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
|
variant={onStart ? "outline" : "default"}
|
||||||
size="sm"
|
size="sm"
|
||||||
disabled={busy || !onApprove}
|
disabled={busy || !onApprove}
|
||||||
onClick={() => void run("approve")}
|
onClick={() => void run("approve")}
|
||||||
@@ -933,6 +1013,17 @@ function SetupWritingApprovalCard({
|
|||||||
<CheckIcon className="h-4 w-4" />
|
<CheckIcon className="h-4 w-4" />
|
||||||
应用到表单
|
应用到表单
|
||||||
</Button>
|
</Button>
|
||||||
|
{onStart ? (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
size="sm"
|
||||||
|
disabled={busy}
|
||||||
|
onClick={() => void run("start")}
|
||||||
|
>
|
||||||
|
<PenLineIcon className="h-4 w-4" />
|
||||||
|
直接开始写作
|
||||||
|
</Button>
|
||||||
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -31,6 +31,48 @@ export function formatDuration(ms: number): string {
|
|||||||
return `${mins}m ${secs}s`;
|
return `${mins}m ${secs}s`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 速度条颜色含义图例 —— 生成结束后显示在速度条下方一行,向用户解释当前
|
||||||
|
* 进度条颜色代表的「模型生成延迟」状态。进度条本身仍是 5 档(极快/流畅/一般/
|
||||||
|
* 偏慢/缓慢)的连续配色;这里把它归并成用户视角的 3 类延迟 + 「无响应」:
|
||||||
|
* 绿(#16a34a,极快/流畅) → 延迟正常
|
||||||
|
* 黄(#eab308,一般) → 延迟微长
|
||||||
|
* 红(#ef4444,偏慢/缓慢) → 延迟长,可能失败
|
||||||
|
* 灰(#9ca3af) → 无响应(无进度条/0 tok/s),任务失败,请重试
|
||||||
|
* 根据本次问答的实际速度,只显示对应那一档的提示。
|
||||||
|
*/
|
||||||
|
function legendForSpeed(tps: number): { color: string; label: string } {
|
||||||
|
if (tps <= 0) return { color: "#9ca3af", label: "无响应,任务失败,请重试" };
|
||||||
|
if (tps >= 30) return { color: "#16a34a", label: "延迟正常" };
|
||||||
|
if (tps >= 15) return { color: "#eab308", label: "延迟微长" };
|
||||||
|
return { color: "#ef4444", label: "延迟长,可能失败" };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function SpeedLegend({
|
||||||
|
className,
|
||||||
|
tokensPerSec,
|
||||||
|
}: {
|
||||||
|
className?: string;
|
||||||
|
tokensPerSec: number;
|
||||||
|
}) {
|
||||||
|
const item = legendForSpeed(tokensPerSec);
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"text-muted-foreground inline-flex items-center gap-1",
|
||||||
|
className,
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
aria-hidden
|
||||||
|
className="inline-block size-2 shrink-0 rounded-full"
|
||||||
|
style={{ backgroundColor: item.color }}
|
||||||
|
/>
|
||||||
|
{item.label}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
export function SpeedPill({ metric }: { metric: MessageMetric }) {
|
export function SpeedPill({ metric }: { metric: MessageMetric }) {
|
||||||
const fill = Math.max(0, Math.min(1, metric.tokensPerSec / FULL_SCALE_TOKENS_PER_SEC));
|
const fill = Math.max(0, Math.min(1, metric.tokensPerSec / FULL_SCALE_TOKENS_PER_SEC));
|
||||||
const { color, label } = classifySpeed(metric.tokensPerSec);
|
const { color, label } = classifySpeed(metric.tokensPerSec);
|
||||||
@@ -132,6 +174,13 @@ export function MessageTokenUsage({
|
|||||||
{formatDuration(resolvedMetric.durationMs)}
|
{formatDuration(resolvedMetric.durationMs)}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
|
{/* 生成结束(非流式中)后只显示与本次速度对应那一档的颜色含义说明。 */}
|
||||||
|
{!resolvedMetric.isActive && (
|
||||||
|
<SpeedLegend
|
||||||
|
className="basis-full"
|
||||||
|
tokensPerSec={resolvedMetric.tokensPerSec}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</>
|
</>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { CheckIcon } from "lucide-react";
|
import { CheckIcon } from "lucide-react";
|
||||||
import { useEffect, useState } from "react";
|
import { type ReactNode, useEffect, useState } from "react";
|
||||||
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
@@ -26,6 +26,8 @@ interface PublishSquarePickerDialogProps {
|
|||||||
loading?: boolean;
|
loading?: boolean;
|
||||||
title?: string;
|
title?: string;
|
||||||
description?: string;
|
description?: string;
|
||||||
|
/** 可选提示节点,渲染在描述下方 —— 用于显示「本次发布将以哪个账号进行」及账号切换告警。 */
|
||||||
|
accountNotice?: ReactNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** A "publish to which square (发布广场)?" chooser. Squares are rendered as a
|
/** A "publish to which square (发布广场)?" chooser. Squares are rendered as a
|
||||||
@@ -39,6 +41,7 @@ export function PublishSquarePickerDialog({
|
|||||||
loading,
|
loading,
|
||||||
title = "选择发布广场",
|
title = "选择发布广场",
|
||||||
description = "请选择要把它发布到哪个广场。每个项目只能归属一个广场,不会重复出现。",
|
description = "请选择要把它发布到哪个广场。每个项目只能归属一个广场,不会重复出现。",
|
||||||
|
accountNotice,
|
||||||
}: PublishSquarePickerDialogProps) {
|
}: PublishSquarePickerDialogProps) {
|
||||||
const [selected, setSelected] = useState<string>(
|
const [selected, setSelected] = useState<string>(
|
||||||
defaultSquareId || squares[0]?.id || "",
|
defaultSquareId || squares[0]?.id || "",
|
||||||
@@ -58,6 +61,7 @@ export function PublishSquarePickerDialog({
|
|||||||
<DialogTitle>{title}</DialogTitle>
|
<DialogTitle>{title}</DialogTitle>
|
||||||
<DialogDescription>{description}</DialogDescription>
|
<DialogDescription>{description}</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
{accountNotice}
|
||||||
<div className="max-h-[50vh] space-y-1.5 overflow-y-auto py-1">
|
<div className="max-h-[50vh] space-y-1.5 overflow-y-auto py-1">
|
||||||
{squares.map((sq) => {
|
{squares.map((sq) => {
|
||||||
const active = selected === sq.id;
|
const active = selected === sq.id;
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
Bot,
|
||||||
ChevronDown,
|
ChevronDown,
|
||||||
ChevronRight,
|
ChevronRight,
|
||||||
Download,
|
Download,
|
||||||
@@ -64,8 +65,10 @@ import {
|
|||||||
} from "@/core/threads/hooks";
|
} from "@/core/threads/hooks";
|
||||||
import type { AgentThread, AgentThreadState } from "@/core/threads/types";
|
import type { AgentThread, AgentThreadState } from "@/core/threads/types";
|
||||||
import {
|
import {
|
||||||
|
isBootstrapThread,
|
||||||
isThreadFavorite,
|
isThreadFavorite,
|
||||||
isThreadPinned,
|
isThreadPinned,
|
||||||
|
listPathOfThread,
|
||||||
pathOfThread,
|
pathOfThread,
|
||||||
sortThreadsPinnedFirst,
|
sortThreadsPinnedFirst,
|
||||||
titleOfThread,
|
titleOfThread,
|
||||||
@@ -130,9 +133,9 @@ export function RecentChatList({
|
|||||||
});
|
});
|
||||||
if (threadIndex > -1) {
|
if (threadIndex > -1) {
|
||||||
if (threads[threadIndex + 1]) {
|
if (threads[threadIndex + 1]) {
|
||||||
nextThreadPath = pathOfThread(threads[threadIndex + 1]!);
|
nextThreadPath = listPathOfThread(threads[threadIndex + 1]!);
|
||||||
} else if (threads[threadIndex - 1]) {
|
} else if (threads[threadIndex - 1]) {
|
||||||
nextThreadPath = pathOfThread(threads[threadIndex - 1]!);
|
nextThreadPath = listPathOfThread(threads[threadIndex - 1]!);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
void router.push(nextThreadPath);
|
void router.push(nextThreadPath);
|
||||||
@@ -189,11 +192,12 @@ export function RecentChatList({
|
|||||||
[t],
|
[t],
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// 智能体创建(bootstrap)会话也展示在常用对话里(带机器人图标、点击回创建页);
|
||||||
|
// 仅排除调度 / 会商类系统会话。
|
||||||
const visibleThreads = sortThreadsPinnedFirst(
|
const visibleThreads = sortThreadsPinnedFirst(
|
||||||
threads.filter(
|
threads.filter(
|
||||||
(thread) =>
|
(thread) =>
|
||||||
thread.metadata?.thread_type !== "scheduler" &&
|
thread.metadata?.thread_type !== "scheduler" &&
|
||||||
thread.metadata?.thread_type !== "bootstrap" &&
|
|
||||||
thread.metadata?.thread_type !== "roundtable",
|
thread.metadata?.thread_type !== "roundtable",
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
@@ -239,7 +243,9 @@ export function RecentChatList({
|
|||||||
<SidebarMenu>
|
<SidebarMenu>
|
||||||
<div className="flex w-full flex-col gap-0.5">
|
<div className="flex w-full flex-col gap-0.5">
|
||||||
{shownThreads.map((thread) => {
|
{shownThreads.map((thread) => {
|
||||||
const isActive = pathOfThread(thread) === pathname;
|
const href = listPathOfThread(thread);
|
||||||
|
const isActive = href === pathname;
|
||||||
|
const isBoot = isBootstrapThread(thread);
|
||||||
const pinned = isThreadPinned(thread);
|
const pinned = isThreadPinned(thread);
|
||||||
const favorited = isThreadFavorite(thread);
|
const favorited = isThreadFavorite(thread);
|
||||||
return (
|
return (
|
||||||
@@ -261,17 +267,29 @@ export function RecentChatList({
|
|||||||
>
|
>
|
||||||
<Link
|
<Link
|
||||||
className="flex w-full items-center gap-1 whitespace-nowrap group-hover/side-menu-item:overflow-hidden"
|
className="flex w-full items-center gap-1 whitespace-nowrap group-hover/side-menu-item:overflow-hidden"
|
||||||
href={pathOfThread(thread)}
|
href={href}
|
||||||
>
|
>
|
||||||
{compact && (
|
{isBoot ? (
|
||||||
<MessageSquare
|
<Bot
|
||||||
className={
|
className={
|
||||||
"size-3.5 shrink-0 " +
|
"size-3.5 shrink-0 " +
|
||||||
(isActive
|
(isActive
|
||||||
? "text-[var(--primary)]"
|
? "text-[var(--primary)]"
|
||||||
: "text-muted-foreground/70")
|
: "text-muted-foreground/70")
|
||||||
}
|
}
|
||||||
|
aria-label="智能体创建会话"
|
||||||
/>
|
/>
|
||||||
|
) : (
|
||||||
|
compact && (
|
||||||
|
<MessageSquare
|
||||||
|
className={
|
||||||
|
"size-3.5 shrink-0 " +
|
||||||
|
(isActive
|
||||||
|
? "text-[var(--primary)]"
|
||||||
|
: "text-muted-foreground/70")
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)
|
||||||
)}
|
)}
|
||||||
{pinned && (
|
{pinned && (
|
||||||
<Pin className="size-3 shrink-0 text-muted-foreground/70" />
|
<Pin className="size-3 shrink-0 text-muted-foreground/70" />
|
||||||
|
|||||||
@@ -71,9 +71,10 @@ function StatusBadge({ draft }: { draft: DraftMeta }) {
|
|||||||
if (draft.status === "error") {
|
if (draft.status === "error") {
|
||||||
return <span className="text-[10px] font-medium text-rose-500">出错</span>;
|
return <span className="text-[10px] font-medium text-rose-500">出错</span>;
|
||||||
}
|
}
|
||||||
|
// 非进行中/待澄清/出错时,展示本次会商所用业务链(无链条 → 自由模式)。
|
||||||
return (
|
return (
|
||||||
<span className="text-[10px] font-medium text-muted-foreground">
|
<span className="text-[10px] font-medium text-muted-foreground">
|
||||||
第 {draft.furthestStep} 步
|
{draft.chainTitle || "自由模式"}
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -111,7 +112,7 @@ export function RecentRoundtableList() {
|
|||||||
}
|
}
|
||||||
try {
|
try {
|
||||||
await rename(id, title);
|
await rename(id, title);
|
||||||
toast.success("✏️ 已重命名");
|
toast.success("已重命名");
|
||||||
} catch {
|
} catch {
|
||||||
toast.error("重命名失败,请重试");
|
toast.error("重命名失败,请重试");
|
||||||
} finally {
|
} finally {
|
||||||
@@ -125,7 +126,7 @@ export function RecentRoundtableList() {
|
|||||||
if (!window.confirm("确定删除这条会商记录吗?此操作不可恢复。")) return;
|
if (!window.confirm("确定删除这条会商记录吗?此操作不可恢复。")) return;
|
||||||
try {
|
try {
|
||||||
await remove(draft.id);
|
await remove(draft.id);
|
||||||
toast.success("🗑 已删除会商记录");
|
toast.success("已删除会商记录");
|
||||||
} catch {
|
} catch {
|
||||||
toast.error("删除失败,请重试");
|
toast.error("删除失败,请重试");
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ CM Assistant is an internal super-agent platform that orchestrates sub-agents, m
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 🚀 Core Features
|
## Core Features
|
||||||
|
|
||||||
* **Skills & Tools**: With built-in and extensible skills and tools, CM Assistant can do almost anything.
|
* **Skills & Tools**: With built-in and extensible skills and tools, CM Assistant can do almost anything.
|
||||||
* **Sub-Agents**: Sub-Agents help the main agent to do the tasks that are too complex to be done by the main agent.
|
* **Sub-Agents**: Sub-Agents help the main agent to do the tasks that are too complex to be done by the main agent.
|
||||||
|
|||||||
@@ -1,12 +1,14 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useMemo } from "react";
|
|
||||||
import { CopyIcon, LogOutIcon, UserIcon } from "lucide-react";
|
import { CopyIcon, LogOutIcon, UserIcon } from "lucide-react";
|
||||||
import { toast } from "sonner";
|
import { toast } from "sonner";
|
||||||
|
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { clearStoredAuth, getAccountDisplayName, getStoredAuth } from "@/core/auth";
|
import { clearStoredAuth, getAccountDisplayName, getStoredAuth } from "@/core/auth";
|
||||||
|
import { useLiveAccount } from "@/core/auth/use-live-account";
|
||||||
|
import { OptType, writeYLog } from "@/core/log/y-log";
|
||||||
|
import { clearYLogToken } from "@/core/log/y-log-token";
|
||||||
|
|
||||||
import { SettingsSection } from "./settings-section";
|
import { SettingsSection } from "./settings-section";
|
||||||
|
|
||||||
@@ -25,7 +27,10 @@ function copy(text: string, hint = "已复制") {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export function AccountSettingsPage() {
|
export function AccountSettingsPage() {
|
||||||
const auth = useMemo(() => getStoredAuth(), []);
|
// Subscribe to same-tab and cross-tab auth changes. The dialog may stay open
|
||||||
|
// while the active account is switched elsewhere.
|
||||||
|
useLiveAccount();
|
||||||
|
const auth = getStoredAuth();
|
||||||
|
|
||||||
if (!auth) {
|
if (!auth) {
|
||||||
return (
|
return (
|
||||||
@@ -40,7 +45,15 @@ export function AccountSettingsPage() {
|
|||||||
const displayName = getAccountDisplayName(auth);
|
const displayName = getAccountDisplayName(auth);
|
||||||
|
|
||||||
const handleLogout = () => {
|
const handleLogout = () => {
|
||||||
|
// 操作日志(Y-Log):在清除 token1 之前上报登出(此时 token1 还在),keepalive 保证发出。
|
||||||
|
writeYLog({
|
||||||
|
optType: OptType.logout,
|
||||||
|
optDetail: "CM助手-全量-登出",
|
||||||
|
url: "/api/v1/auth/logout",
|
||||||
|
keepalive: true,
|
||||||
|
});
|
||||||
clearStoredAuth();
|
clearStoredAuth();
|
||||||
|
clearYLogToken();
|
||||||
// Match the rest of the app's logout flow: blow away the cookie session
|
// Match the rest of the app's logout flow: blow away the cookie session
|
||||||
// by hitting the gateway logout endpoint and then forcing a full reload
|
// by hitting the gateway logout endpoint and then forcing a full reload
|
||||||
// so any cached query state goes too.
|
// so any cached query state goes too.
|
||||||
|
|||||||
@@ -0,0 +1,771 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
ChevronDownIcon,
|
||||||
|
ChevronUpIcon,
|
||||||
|
CheckIcon,
|
||||||
|
MoonIcon,
|
||||||
|
PaletteIcon,
|
||||||
|
PlusIcon,
|
||||||
|
RotateCcwIcon,
|
||||||
|
SaveIcon,
|
||||||
|
SlidersHorizontalIcon,
|
||||||
|
SunIcon,
|
||||||
|
Trash2Icon,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { useEffect, useId, useMemo, useState, type CSSProperties } from "react";
|
||||||
|
import { ColorPickerPanel } from "tdesign-react";
|
||||||
|
import { toast } from "sonner";
|
||||||
|
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import { Switch } from "@/components/ui/switch";
|
||||||
|
import type {
|
||||||
|
CustomThemeColorOverrides,
|
||||||
|
CustomThemePreset,
|
||||||
|
} from "@/core/system-settings/api";
|
||||||
|
import {
|
||||||
|
useAppearanceSettings,
|
||||||
|
useUpdateAppearanceSettings,
|
||||||
|
} from "@/core/system-settings/hooks";
|
||||||
|
import {
|
||||||
|
CUSTOM_THEME_ADVANCED_KEYS,
|
||||||
|
getCustomThemeAutomaticTokens,
|
||||||
|
getCustomThemeTokens,
|
||||||
|
normalizeHexColor,
|
||||||
|
customThemeTextContrast,
|
||||||
|
type CustomThemeAdvancedKey,
|
||||||
|
} from "@/core/theme/custom-theme";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
|
const MAX_CUSTOM_THEMES = 12;
|
||||||
|
const SUGGESTED_COLORS = [
|
||||||
|
"#9BCEF1",
|
||||||
|
"#F3FBD9",
|
||||||
|
"#7AB8F5",
|
||||||
|
"#8ED1B2",
|
||||||
|
"#C6B4F6",
|
||||||
|
"#F3C5A6",
|
||||||
|
"#F3B1B7",
|
||||||
|
"#63C4C8",
|
||||||
|
];
|
||||||
|
const TEXT_COLORS = ["#202A3A", "#172033", "#2D587A", "#4C6330", "#F4F7FB", "#FFFFFF"];
|
||||||
|
|
||||||
|
const ADVANCED_COLOR_FIELDS: Array<{
|
||||||
|
key: CustomThemeAdvancedKey;
|
||||||
|
label: string;
|
||||||
|
description: string;
|
||||||
|
token: string;
|
||||||
|
}> = [
|
||||||
|
{
|
||||||
|
key: "button_hover",
|
||||||
|
label: "按钮悬停色",
|
||||||
|
description: "主按钮悬停时的背景色",
|
||||||
|
token: "--theme-button-hover",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "navigation_gradient_start",
|
||||||
|
label: "导航渐变起点",
|
||||||
|
description: "全量模式顶部导航栏左侧的渐变色",
|
||||||
|
token: "--navigation-gradient-start",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "navigation_gradient_end",
|
||||||
|
label: "导航渐变终点",
|
||||||
|
description: "全量模式顶部导航栏右侧的渐变色",
|
||||||
|
token: "--navigation-gradient-end",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "selected_background",
|
||||||
|
label: "选中背景",
|
||||||
|
description: "左侧菜单、卡片选中时的浅背景",
|
||||||
|
token: "--theme-selected-background",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "border",
|
||||||
|
label: "边框色",
|
||||||
|
description: "卡片、输入框和分隔线",
|
||||||
|
token: "--border",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "muted",
|
||||||
|
label: "弱化背景",
|
||||||
|
description: "次级区域与弱化容器",
|
||||||
|
token: "--muted",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "muted_text",
|
||||||
|
label: "辅助文字",
|
||||||
|
description: "说明、占位和次要信息文字",
|
||||||
|
token: "--muted-foreground",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "destructive",
|
||||||
|
label: "删除/危险色",
|
||||||
|
description: "删除按钮、错误与危险操作的颜色",
|
||||||
|
token: "--destructive",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "brand_title",
|
||||||
|
label: "栏目标题文字",
|
||||||
|
description: "业务链、分析记录等带图标栏目标题",
|
||||||
|
token: "--brand-title-foreground",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "primary_foreground",
|
||||||
|
label: "主色块文字(Logo/状态标签)",
|
||||||
|
description: "Logo 的 C、启用状态和默认标签;不影响主按钮文字",
|
||||||
|
token: "--primary-foreground",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function makeThemeId(): `custom-theme-${string}` {
|
||||||
|
const suffix =
|
||||||
|
typeof crypto !== "undefined" && "randomUUID" in crypto
|
||||||
|
? crypto.randomUUID().replace(/[^a-z0-9-]/gi, "").toLowerCase()
|
||||||
|
: `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 10)}`;
|
||||||
|
return `custom-theme-${suffix}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function newCustomTheme(order: number): CustomThemePreset {
|
||||||
|
return {
|
||||||
|
id: makeThemeId(),
|
||||||
|
name: `自定义主题 ${order + 1}`,
|
||||||
|
primary: "#9BCEF1",
|
||||||
|
text_color: null,
|
||||||
|
mode: "light",
|
||||||
|
overrides: {},
|
||||||
|
enabled: true,
|
||||||
|
sort_order: order,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeColorOverrides(
|
||||||
|
overrides: CustomThemeColorOverrides | undefined,
|
||||||
|
): CustomThemeColorOverrides {
|
||||||
|
const normalized: CustomThemeColorOverrides = {};
|
||||||
|
for (const key of CUSTOM_THEME_ADVANCED_KEYS) {
|
||||||
|
const value = overrides?.[key];
|
||||||
|
if (typeof value === "string" && value.trim()) {
|
||||||
|
normalized[key] = normalizeHexColor(value);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return normalized;
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeThemeDrafts(
|
||||||
|
themes: CustomThemePreset[] | undefined,
|
||||||
|
): CustomThemePreset[] {
|
||||||
|
return [...(themes ?? [])]
|
||||||
|
.sort((a, b) => a.sort_order - b.sort_order)
|
||||||
|
.map((theme, index) => ({
|
||||||
|
...theme,
|
||||||
|
id: theme.id || makeThemeId(),
|
||||||
|
name: theme.name || `自定义主题 ${index + 1}`,
|
||||||
|
primary: normalizeHexColor(theme.primary),
|
||||||
|
text_color:
|
||||||
|
typeof theme.text_color === "string" && theme.text_color.trim()
|
||||||
|
? normalizeHexColor(theme.text_color)
|
||||||
|
: null,
|
||||||
|
mode: theme.mode === "dark" ? "dark" : "light",
|
||||||
|
overrides: normalizeColorOverrides(theme.overrides),
|
||||||
|
enabled: theme.enabled !== false,
|
||||||
|
sort_order: index,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render the TDesign panel inside the settings dialog instead of its default
|
||||||
|
* body-level popup. The dialog otherwise treats clicks inside that portal as
|
||||||
|
* outside interactions and closes the picker while a colour is being chosen.
|
||||||
|
*/
|
||||||
|
function InlineThemeColorPicker({
|
||||||
|
value,
|
||||||
|
fallback,
|
||||||
|
swatchColors,
|
||||||
|
onCommit,
|
||||||
|
ariaLabel = "选择颜色",
|
||||||
|
}: {
|
||||||
|
value: string;
|
||||||
|
fallback?: string;
|
||||||
|
swatchColors: string[];
|
||||||
|
onCommit: (value: string) => void;
|
||||||
|
ariaLabel?: string;
|
||||||
|
}) {
|
||||||
|
const normalizedValue = normalizeHexColor(value, fallback);
|
||||||
|
const [pendingValue, setPendingValue] = useState(normalizedValue);
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const panelId = useId();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open) setPendingValue(normalizedValue);
|
||||||
|
}, [normalizedValue, open]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-fit">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="flex h-10 min-w-32 items-center gap-2 rounded-md border bg-background px-2 font-mono text-sm shadow-xs transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||||||
|
aria-label={ariaLabel}
|
||||||
|
aria-expanded={open}
|
||||||
|
aria-controls={panelId}
|
||||||
|
onClick={() => setOpen((visible) => !visible)}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="size-7 rounded border"
|
||||||
|
style={{ backgroundColor: pendingValue }}
|
||||||
|
aria-hidden
|
||||||
|
/>
|
||||||
|
{pendingValue}
|
||||||
|
</button>
|
||||||
|
{open && (
|
||||||
|
<div
|
||||||
|
id={panelId}
|
||||||
|
className="mt-2 w-fit rounded-lg border bg-background p-2 shadow-lg"
|
||||||
|
onPointerDown={(event) => event.stopPropagation()}
|
||||||
|
onClick={(event) => event.stopPropagation()}
|
||||||
|
>
|
||||||
|
<ColorPickerPanel
|
||||||
|
value={pendingValue}
|
||||||
|
format="HEX"
|
||||||
|
colorModes={["monochrome"]}
|
||||||
|
enableAlpha={false}
|
||||||
|
swatchColors={swatchColors}
|
||||||
|
onChange={(color) => setPendingValue(normalizeHexColor(String(color), fallback))}
|
||||||
|
/>
|
||||||
|
<div className="mt-2 flex justify-end gap-2 border-t pt-2">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => {
|
||||||
|
setPendingValue(normalizedValue);
|
||||||
|
setOpen(false);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
取消
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => {
|
||||||
|
setOpen(false);
|
||||||
|
onCommit(pendingValue);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
应用颜色
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function CustomThemePreview({ theme }: { theme: CustomThemePreset }) {
|
||||||
|
const tokens = getCustomThemeTokens(theme) as CSSProperties;
|
||||||
|
const buttonContrast = customThemeTextContrast(theme);
|
||||||
|
const isButtonContrastLow = buttonContrast < 4.5;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="overflow-hidden rounded-lg border"
|
||||||
|
style={tokens}
|
||||||
|
aria-label={`${theme.name} 的颜色预览`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="flex items-center gap-2 border-b border-[var(--border)] px-3 py-2"
|
||||||
|
style={{
|
||||||
|
backgroundImage:
|
||||||
|
"linear-gradient(105deg, var(--navigation-gradient-start) 0%, var(--primary) 52%, var(--navigation-gradient-end) 100%)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="flex size-5 items-center justify-center rounded-md bg-white/25 text-[10px] font-bold text-[var(--navigation-foreground)] ring-2 ring-white/35"
|
||||||
|
aria-hidden
|
||||||
|
>
|
||||||
|
C
|
||||||
|
</span>
|
||||||
|
<span className="text-xs font-semibold text-[var(--navigation-foreground)]">
|
||||||
|
实时预览
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
"ml-auto text-[11px]",
|
||||||
|
isButtonContrastLow
|
||||||
|
? "text-amber-700 dark:text-amber-300"
|
||||||
|
: "text-[var(--muted-foreground)]",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
主按钮对比度 {buttonContrast.toFixed(1)}:1
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-2 bg-[var(--background)] p-3 sm:grid-cols-[1fr_auto]">
|
||||||
|
<div className="rounded-md border border-[var(--border)] bg-[var(--card)] p-2.5">
|
||||||
|
<div className="text-xs font-semibold text-[var(--brand-title-foreground)]">
|
||||||
|
{theme.name || "未命名主题"}
|
||||||
|
</div>
|
||||||
|
<div className="mt-1 text-[11px] text-[var(--muted-foreground)]">
|
||||||
|
页面正文自动生成;主按钮文字可单独指定。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="rounded-md bg-[var(--primary)] px-3 py-2 text-xs font-semibold text-[var(--button-foreground,var(--primary-foreground))] shadow-sm"
|
||||||
|
tabIndex={-1}
|
||||||
|
>
|
||||||
|
主按钮
|
||||||
|
</button>
|
||||||
|
{isButtonContrastLow && (
|
||||||
|
<p className="sm:col-span-2 text-[11px] text-amber-700 dark:text-amber-300">
|
||||||
|
当前按钮文字会按您的颜色设置展示,但对比度低于 4.5:1,建议改用更深的主色或恢复自动。
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function AdvancedThemeColorControls({
|
||||||
|
theme,
|
||||||
|
onPatch,
|
||||||
|
}: {
|
||||||
|
theme: CustomThemePreset;
|
||||||
|
onPatch: (patch: Partial<CustomThemePreset>) => void;
|
||||||
|
}) {
|
||||||
|
const automaticTokens = getCustomThemeAutomaticTokens({
|
||||||
|
primary: theme.primary,
|
||||||
|
mode: theme.mode,
|
||||||
|
});
|
||||||
|
|
||||||
|
const setOverride = (key: CustomThemeAdvancedKey, value: string) => {
|
||||||
|
const overrides = { ...(theme.overrides ?? {}) };
|
||||||
|
if (!value.trim()) {
|
||||||
|
delete overrides[key];
|
||||||
|
} else {
|
||||||
|
overrides[key] = value;
|
||||||
|
}
|
||||||
|
onPatch({ overrides });
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-3 rounded-lg border border-dashed bg-muted/15 p-3">
|
||||||
|
<div className="flex flex-wrap items-start justify-between gap-2">
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-medium">更多配色</div>
|
||||||
|
<p className="mt-0.5 text-xs leading-relaxed text-muted-foreground">
|
||||||
|
默认由主色自动推导。仅在品牌规范有明确要求时,选择单项覆盖;“恢复自动”会重新跟随主色。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<span className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground">
|
||||||
|
已覆盖 {Object.keys(theme.overrides ?? {}).length} 项
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="grid gap-3 lg:grid-cols-2">
|
||||||
|
{ADVANCED_COLOR_FIELDS.map((field) => {
|
||||||
|
const explicit = theme.overrides?.[field.key];
|
||||||
|
const automatic = automaticTokens[field.token] ?? "#0062D9";
|
||||||
|
const value = explicit ?? automatic;
|
||||||
|
return (
|
||||||
|
<div key={field.key} className="rounded-md border bg-background p-3">
|
||||||
|
<div className="mb-2 flex items-start justify-between gap-2">
|
||||||
|
<div>
|
||||||
|
<div className="text-xs font-semibold">{field.label}</div>
|
||||||
|
<div className="mt-0.5 text-[11px] text-muted-foreground">
|
||||||
|
{field.description}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{explicit ? (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-7 px-2 text-xs"
|
||||||
|
onClick={() => setOverride(field.key, "")}
|
||||||
|
>
|
||||||
|
<RotateCcwIcon className="mr-1 size-3.5" />
|
||||||
|
恢复自动
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<span className="rounded bg-muted px-1.5 py-0.5 text-[11px] text-muted-foreground">
|
||||||
|
自动
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap items-end gap-2">
|
||||||
|
<InlineThemeColorPicker
|
||||||
|
value={value}
|
||||||
|
swatchColors={SUGGESTED_COLORS}
|
||||||
|
onCommit={(color) => setOverride(field.key, color)}
|
||||||
|
ariaLabel={`${theme.name || "自定义主题"}${field.label}选色器`}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
value={value}
|
||||||
|
maxLength={7}
|
||||||
|
className="h-8 w-28 font-mono text-xs uppercase"
|
||||||
|
onChange={(event) => setOverride(field.key, event.target.value)}
|
||||||
|
onBlur={(event) =>
|
||||||
|
setOverride(
|
||||||
|
field.key,
|
||||||
|
event.target.value.trim()
|
||||||
|
? normalizeHexColor(event.target.value)
|
||||||
|
: "",
|
||||||
|
)
|
||||||
|
}
|
||||||
|
aria-label={`${theme.name || "自定义主题"}${field.label}十六进制值`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{!explicit && (
|
||||||
|
<p className="mt-2 text-[11px] text-muted-foreground">
|
||||||
|
当前自动值:{automatic}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function CustomThemeLibrarySettings() {
|
||||||
|
const { data: appearance } = useAppearanceSettings();
|
||||||
|
const updateAppearance = useUpdateAppearanceSettings();
|
||||||
|
const [drafts, setDrafts] = useState<CustomThemePreset[]>([]);
|
||||||
|
const [advancedThemeIds, setAdvancedThemeIds] = useState<Set<string>>(
|
||||||
|
() => new Set(),
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setDrafts(normalizeThemeDrafts(appearance?.custom_themes));
|
||||||
|
}, [appearance?.custom_themes]);
|
||||||
|
|
||||||
|
const hasChanges = useMemo(
|
||||||
|
() =>
|
||||||
|
JSON.stringify(normalizeThemeDrafts(appearance?.custom_themes)) !==
|
||||||
|
JSON.stringify(normalizeThemeDrafts(drafts)),
|
||||||
|
[appearance?.custom_themes, drafts],
|
||||||
|
);
|
||||||
|
|
||||||
|
const patchTheme = (id: string, patch: Partial<CustomThemePreset>) => {
|
||||||
|
setDrafts((items) =>
|
||||||
|
items.map((item) => (item.id === id ? { ...item, ...patch } : item)),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleAdvancedTheme = (id: string) => {
|
||||||
|
setAdvancedThemeIds((ids) => {
|
||||||
|
const next = new Set(ids);
|
||||||
|
if (next.has(id)) next.delete(id);
|
||||||
|
else next.add(id);
|
||||||
|
return next;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
const cleaned = normalizeThemeDrafts(drafts).map((theme) => ({
|
||||||
|
...theme,
|
||||||
|
name: theme.name.trim(),
|
||||||
|
primary: normalizeHexColor(theme.primary),
|
||||||
|
}));
|
||||||
|
if (cleaned.some((theme) => !theme.name)) {
|
||||||
|
toast.error("请为每个主题填写名称");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const names = cleaned.map((theme) => theme.name.toLocaleLowerCase());
|
||||||
|
if (new Set(names).size !== names.length) {
|
||||||
|
toast.error("主题名称不能重复");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await updateAppearance.mutateAsync({ custom_themes: cleaned });
|
||||||
|
toast.success("自定义主题库已保存,所有用户可在主题切换器中选择已启用主题");
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(error instanceof Error ? error.message : "保存主题库失败");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSetDefault = async (theme: CustomThemePreset) => {
|
||||||
|
if (!theme.enabled || appearance?.default_theme === theme.id) return;
|
||||||
|
if (!(appearance?.custom_themes ?? []).some((preset) => preset.id === theme.id)) {
|
||||||
|
toast.info("请先保存主题库,再将新主题设为系统默认");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
await updateAppearance.mutateAsync({ default_theme: theme.id });
|
||||||
|
toast.success(`已将“${theme.name || "自定义主题"}”设为系统默认主题`);
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(error instanceof Error ? error.message : "设置系统默认主题失败");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||||
|
<p className="max-w-2xl text-xs leading-relaxed text-muted-foreground">
|
||||||
|
默认只需设置主色、主按钮文字与明暗模式;系统会自动生成页面正文、背景、边框、弱化、选中和悬停色。点击“更多”后才按需覆盖个别交互色,停用后不再向用户展示,最多可保存 {MAX_CUSTOM_THEMES} 个。
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() =>
|
||||||
|
setDrafts((items) =>
|
||||||
|
items.length >= MAX_CUSTOM_THEMES
|
||||||
|
? items
|
||||||
|
: [...items, newCustomTheme(items.length)],
|
||||||
|
)
|
||||||
|
}
|
||||||
|
disabled={drafts.length >= MAX_CUSTOM_THEMES || updateAppearance.isPending}
|
||||||
|
>
|
||||||
|
<PlusIcon className="mr-1.5 size-4" />
|
||||||
|
添加主题
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => void handleSave()}
|
||||||
|
disabled={!hasChanges || updateAppearance.isPending}
|
||||||
|
>
|
||||||
|
<SaveIcon className="mr-1.5 size-4" />
|
||||||
|
保存主题库
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{drafts.length === 0 ? (
|
||||||
|
<div className="rounded-lg border border-dashed bg-muted/20 px-5 py-8 text-center">
|
||||||
|
<PaletteIcon className="mx-auto mb-2 size-5 text-muted-foreground" />
|
||||||
|
<div className="text-sm font-medium">还没有自定义主题</div>
|
||||||
|
<p className="mt-1 text-xs text-muted-foreground">
|
||||||
|
添加后,用户可以从右上角主题切换器中自行选择。
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{drafts.map((theme, index) => {
|
||||||
|
const isDefault = appearance?.default_theme === theme.id;
|
||||||
|
const advancedOpen = advancedThemeIds.has(theme.id);
|
||||||
|
const automaticTokens = getCustomThemeAutomaticTokens({
|
||||||
|
primary: theme.primary,
|
||||||
|
mode: theme.mode,
|
||||||
|
});
|
||||||
|
const textColor = theme.text_color ?? automaticTokens["--foreground"] ?? "#202A3A";
|
||||||
|
return (
|
||||||
|
<div key={theme.id} className="space-y-4 rounded-xl border bg-card p-4">
|
||||||
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<PaletteIcon className="size-4 text-primary" />
|
||||||
|
<span className="text-sm font-semibold">主题 {index + 1}</span>
|
||||||
|
{isDefault && (
|
||||||
|
<span className="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
|
||||||
|
<CheckIcon className="size-3" />
|
||||||
|
系统默认
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<label className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||||
|
<Switch
|
||||||
|
checked={theme.enabled}
|
||||||
|
onCheckedChange={(enabled) => patchTheme(theme.id, { enabled })}
|
||||||
|
aria-label={`启用${theme.name || "自定义主题"}`}
|
||||||
|
/>
|
||||||
|
{theme.enabled ? "启用" : "停用"}
|
||||||
|
</label>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
size="sm"
|
||||||
|
variant={isDefault ? "default" : "outline"}
|
||||||
|
onClick={() => void handleSetDefault(theme)}
|
||||||
|
disabled={!theme.enabled || isDefault || hasChanges || updateAppearance.isPending}
|
||||||
|
>
|
||||||
|
设为默认
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => toggleAdvancedTheme(theme.id)}
|
||||||
|
aria-expanded={advancedOpen}
|
||||||
|
aria-controls={`${theme.id}-advanced-colors`}
|
||||||
|
>
|
||||||
|
<SlidersHorizontalIcon className="mr-1.5 size-4" />
|
||||||
|
更多
|
||||||
|
{advancedOpen ? (
|
||||||
|
<ChevronUpIcon className="ml-1 size-3.5" />
|
||||||
|
) : (
|
||||||
|
<ChevronDownIcon className="ml-1 size-3.5" />
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
size="icon-sm"
|
||||||
|
variant="ghost"
|
||||||
|
className="text-destructive hover:text-destructive"
|
||||||
|
onClick={() =>
|
||||||
|
setDrafts((items) =>
|
||||||
|
items
|
||||||
|
.filter((item) => item.id !== theme.id)
|
||||||
|
.map((item, order) => ({ ...item, sort_order: order })),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
title="删除主题"
|
||||||
|
aria-label={`删除${theme.name || "自定义主题"}`}
|
||||||
|
>
|
||||||
|
<Trash2Icon className="size-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_minmax(180px,0.55fr)_150px_150px]">
|
||||||
|
<label className="space-y-1.5">
|
||||||
|
<span className="text-xs font-medium">主题名称</span>
|
||||||
|
<Input
|
||||||
|
value={theme.name}
|
||||||
|
maxLength={32}
|
||||||
|
onChange={(event) => patchTheme(theme.id, { name: event.target.value })}
|
||||||
|
placeholder="例如:品牌浅蓝"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label className="space-y-1.5">
|
||||||
|
<span className="text-xs font-medium">基础模式</span>
|
||||||
|
<Select
|
||||||
|
value={theme.mode}
|
||||||
|
onValueChange={(value) =>
|
||||||
|
patchTheme(theme.id, {
|
||||||
|
mode: value === "dark" ? "dark" : "light",
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="light">
|
||||||
|
<span className="inline-flex items-center gap-1.5"><SunIcon className="size-3.5" />浅色</span>
|
||||||
|
</SelectItem>
|
||||||
|
<SelectItem value="dark">
|
||||||
|
<span className="inline-flex items-center gap-1.5"><MoonIcon className="size-3.5" />深色</span>
|
||||||
|
</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</label>
|
||||||
|
<label className="space-y-1.5">
|
||||||
|
<span className="text-xs font-medium">主色值</span>
|
||||||
|
<Input
|
||||||
|
value={theme.primary}
|
||||||
|
maxLength={7}
|
||||||
|
className="font-mono uppercase"
|
||||||
|
onChange={(event) => patchTheme(theme.id, { primary: event.target.value })}
|
||||||
|
onBlur={() =>
|
||||||
|
patchTheme(theme.id, {
|
||||||
|
primary: normalizeHexColor(theme.primary),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
aria-label={`${theme.name || "自定义主题"}主色十六进制值`}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<div className="flex items-center justify-between gap-2">
|
||||||
|
<span className="text-xs font-medium">主按钮文字</span>
|
||||||
|
{theme.text_color ? (
|
||||||
|
<Button
|
||||||
|
type="button"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="h-6 px-1.5 text-[11px]"
|
||||||
|
onClick={() => patchTheme(theme.id, { text_color: null })}
|
||||||
|
>
|
||||||
|
自动
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<span className="text-[11px] text-muted-foreground">自动</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<Input
|
||||||
|
value={textColor}
|
||||||
|
maxLength={7}
|
||||||
|
className="font-mono uppercase"
|
||||||
|
onChange={(event) =>
|
||||||
|
patchTheme(theme.id, { text_color: event.target.value })
|
||||||
|
}
|
||||||
|
onBlur={(event) =>
|
||||||
|
patchTheme(theme.id, {
|
||||||
|
text_color: event.target.value.trim()
|
||||||
|
? normalizeHexColor(event.target.value)
|
||||||
|
: null,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
aria-label={`${theme.name || "自定义主题"}主按钮文字十六进制值`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap items-end gap-3 rounded-lg border bg-muted/15 p-3">
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<span className="text-xs font-medium">选择主色</span>
|
||||||
|
<InlineThemeColorPicker
|
||||||
|
value={theme.primary}
|
||||||
|
swatchColors={SUGGESTED_COLORS}
|
||||||
|
onCommit={(primary) => patchTheme(theme.id, { primary })}
|
||||||
|
ariaLabel={`${theme.name || "自定义主题"}主色选色器`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1.5">
|
||||||
|
<span className="text-xs font-medium">选择主按钮文字</span>
|
||||||
|
<InlineThemeColorPicker
|
||||||
|
value={textColor}
|
||||||
|
fallback="#202A3A"
|
||||||
|
swatchColors={TEXT_COLORS}
|
||||||
|
onCommit={(text_color) => patchTheme(theme.id, { text_color })}
|
||||||
|
ariaLabel={`${theme.name || "自定义主题"}主按钮文字选色器`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-1.5 pb-0.5">
|
||||||
|
{SUGGESTED_COLORS.map((color) => (
|
||||||
|
<button
|
||||||
|
key={color}
|
||||||
|
type="button"
|
||||||
|
className={cn(
|
||||||
|
"size-7 rounded-md border shadow-sm transition-transform hover:scale-105 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
|
||||||
|
normalizeHexColor(theme.primary) === color
|
||||||
|
? "ring-2 ring-primary ring-offset-2"
|
||||||
|
: "border-border",
|
||||||
|
)}
|
||||||
|
style={{ backgroundColor: color }}
|
||||||
|
onClick={() => patchTheme(theme.id, { primary: color })}
|
||||||
|
title={`使用 ${color}`}
|
||||||
|
aria-label={`使用主色 ${color}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{advancedOpen && (
|
||||||
|
<div id={`${theme.id}-advanced-colors`}>
|
||||||
|
<AdvancedThemeColorControls
|
||||||
|
theme={theme}
|
||||||
|
onPatch={(patch) => patchTheme(theme.id, patch)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<CustomThemePreview theme={{ ...theme, primary: normalizeHexColor(theme.primary) }} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -470,11 +470,11 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<TagSearchBar
|
<TagSearchBar
|
||||||
targetType="skill"
|
targetType="skill"
|
||||||
onSearchChange={setSearch}
|
onSearchChange={setSearch}
|
||||||
tagIds={tagIds}
|
tagIds={tagIds}
|
||||||
onTagIdsChange={setTagIds}
|
onTagIdsChange={setTagIds}
|
||||||
actions={
|
actions={
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<ViewModeToggle value={viewMode} onChange={setViewMode} />
|
<ViewModeToggle value={viewMode} onChange={setViewMode} />
|
||||||
@@ -497,11 +497,16 @@ function SkillSettingsList({ onClose }: { onClose?: () => void }) {
|
|||||||
<SelectItem value="name_desc">名称 Z-A</SelectItem>
|
<SelectItem value="name_desc">名称 Z-A</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
{publisher && (
|
{!isLoading && !error && (
|
||||||
<div className="flex items-center gap-2">
|
<div className="text-muted-foreground flex justify-end text-sm tabular-nums">
|
||||||
|
共 {orderedSkills.length} 个技能
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{publisher && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
<span className="text-muted-foreground text-xs">筛选发布者:</span>
|
<span className="text-muted-foreground text-xs">筛选发布者:</span>
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { ExternalLinkIcon } from "lucide-react";
|
import { ExternalLinkIcon, FileTextIcon, LoaderCircle } from "lucide-react";
|
||||||
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import {
|
import {
|
||||||
@@ -9,10 +9,12 @@ import {
|
|||||||
DialogTitle,
|
DialogTitle,
|
||||||
} from "@/components/ui/dialog";
|
} from "@/components/ui/dialog";
|
||||||
import type { RuntimeDisplaySource } from "@/core/skill-display/runtime";
|
import type { RuntimeDisplaySource } from "@/core/skill-display/runtime";
|
||||||
|
import { apiFetch } from "@/core/api/fetch-client";
|
||||||
|
import { getBackendBaseURL } from "@/core/config";
|
||||||
import { useLocalSettings } from "@/core/settings";
|
import { useLocalSettings } from "@/core/settings";
|
||||||
import { useCitationDisplaySettings } from "@/core/system-settings/hooks";
|
import { useCitationDisplaySettings } from "@/core/system-settings/hooks";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
export function SkillDisplaySources({
|
export function SkillDisplaySources({
|
||||||
highlightedReferenceId,
|
highlightedReferenceId,
|
||||||
@@ -51,6 +53,9 @@ export function SourceCard({
|
|||||||
referenceTarget?: boolean;
|
referenceTarget?: boolean;
|
||||||
}) {
|
}) {
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
|
const [context, setContext] = useState<WeKnoraSourceContext | null>(null);
|
||||||
|
const [contextLoading, setContextLoading] = useState(false);
|
||||||
|
const [contextError, setContextError] = useState<string | null>(null);
|
||||||
const [settings] = useLocalSettings();
|
const [settings] = useLocalSettings();
|
||||||
const { data: citationDisplay } = useCitationDisplaySettings();
|
const { data: citationDisplay } = useCitationDisplaySettings();
|
||||||
const cleanupWords =
|
const cleanupWords =
|
||||||
@@ -73,6 +78,44 @@ export function SourceCard({
|
|||||||
].filter(Boolean);
|
].filter(Boolean);
|
||||||
const isCitation = source.mode === "citation";
|
const isCitation = source.mode === "citation";
|
||||||
const showReferenceNumber = isCitation;
|
const showReferenceNumber = isCitation;
|
||||||
|
const previewTarget = parseWeKnoraPreviewUrl(source.url);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!open || !previewTarget) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let cancelled = false;
|
||||||
|
setContext(null);
|
||||||
|
setContextError(null);
|
||||||
|
setContextLoading(true);
|
||||||
|
const params = new URLSearchParams({
|
||||||
|
knowledge_base_id: previewTarget.knowledgeBaseId,
|
||||||
|
chunk_id: previewTarget.chunkId,
|
||||||
|
});
|
||||||
|
void apiFetch(`${getBackendBaseURL()}/api/weknora/source-context?${params}`)
|
||||||
|
.then(async (response) => {
|
||||||
|
const payload = (await response.json().catch(() => null)) as unknown;
|
||||||
|
if (!response.ok || !isWeKnoraSourceContextResponse(payload)) {
|
||||||
|
throw new Error(readPreviewError(payload, response.status));
|
||||||
|
}
|
||||||
|
if (!cancelled) {
|
||||||
|
setContext(payload.data);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error: unknown) => {
|
||||||
|
if (!cancelled) {
|
||||||
|
setContextError(error instanceof Error ? error.message : "无法加载原文上下文");
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
if (!cancelled) {
|
||||||
|
setContextLoading(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, [open, previewTarget?.chunkId, previewTarget?.knowledgeBaseId]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@@ -114,7 +157,14 @@ export function SourceCard({
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{source.url && (
|
{source.url && (
|
||||||
<ExternalLinkIcon className="text-muted-foreground/60 group-hover:text-primary mt-1 size-3.5 shrink-0 transition-colors" />
|
previewTarget ? (
|
||||||
|
<span className="text-primary bg-primary/10 mt-0.5 inline-flex shrink-0 items-center gap-1 rounded-md px-1.5 py-1 text-[11px] font-medium">
|
||||||
|
<FileTextIcon className="size-3.5" />
|
||||||
|
查看原文
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<ExternalLinkIcon className="text-muted-foreground/60 group-hover:text-primary mt-1 size-3.5 shrink-0 transition-colors" />
|
||||||
|
)
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</button>
|
</button>
|
||||||
@@ -141,7 +191,7 @@ export function SourceCard({
|
|||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{source.url && (
|
{source.url && !previewTarget && (
|
||||||
<Button size="icon-sm" variant="outline" asChild>
|
<Button size="icon-sm" variant="outline" asChild>
|
||||||
<a
|
<a
|
||||||
href={source.url}
|
href={source.url}
|
||||||
@@ -155,7 +205,13 @@ export function SourceCard({
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
{paragraphs.length > 0 && (
|
{previewTarget ? (
|
||||||
|
<WeKnoraSourceContextPanel
|
||||||
|
context={context}
|
||||||
|
loading={contextLoading}
|
||||||
|
error={contextError}
|
||||||
|
/>
|
||||||
|
) : paragraphs.length > 0 ? (
|
||||||
<div className="text-foreground max-h-[55vh] space-y-3 overflow-y-auto text-sm leading-relaxed">
|
<div className="text-foreground max-h-[55vh] space-y-3 overflow-y-auto text-sm leading-relaxed">
|
||||||
{paragraphs.map((paragraph, index) => (
|
{paragraphs.map((paragraph, index) => (
|
||||||
<p key={index} className="whitespace-pre-wrap">
|
<p key={index} className="whitespace-pre-wrap">
|
||||||
@@ -163,8 +219,8 @@ export function SourceCard({
|
|||||||
</p>
|
</p>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)}
|
) : null}
|
||||||
{source.url && (
|
{source.url && !previewTarget && (
|
||||||
<div className="text-muted-foreground border-t pt-3 text-xs break-all">
|
<div className="text-muted-foreground border-t pt-3 text-xs break-all">
|
||||||
{source.url}
|
{source.url}
|
||||||
</div>
|
</div>
|
||||||
@@ -175,6 +231,118 @@ export function SourceCard({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
type WeKnoraPreviewTarget = {
|
||||||
|
knowledgeBaseId: string;
|
||||||
|
chunkId: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type WeKnoraSourceContext = {
|
||||||
|
knowledge_base_name?: string;
|
||||||
|
document_title?: string;
|
||||||
|
document_file_name?: string;
|
||||||
|
focus_chunk_id: string;
|
||||||
|
chunks: Array<{
|
||||||
|
id: string;
|
||||||
|
chunk_index?: number;
|
||||||
|
content: string;
|
||||||
|
is_focus: boolean;
|
||||||
|
}>;
|
||||||
|
};
|
||||||
|
|
||||||
|
function parseWeKnoraPreviewUrl(url?: string): WeKnoraPreviewTarget | null {
|
||||||
|
if (!url?.startsWith("/weknora-source-preview?")) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
const queryIndex = url.indexOf("?");
|
||||||
|
const params = new URLSearchParams(url.slice(queryIndex + 1));
|
||||||
|
const knowledgeBaseId = params.get("knowledge_base_id")?.trim();
|
||||||
|
const chunkId = params.get("chunk_id")?.trim();
|
||||||
|
return knowledgeBaseId && chunkId ? { knowledgeBaseId, chunkId } : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function isWeKnoraSourceContextResponse(
|
||||||
|
value: unknown,
|
||||||
|
): value is { success: true; data: WeKnoraSourceContext } {
|
||||||
|
if (!value || typeof value !== "object") {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const data = (value as { data?: unknown }).data;
|
||||||
|
return (
|
||||||
|
(value as { success?: unknown }).success === true &&
|
||||||
|
!!data &&
|
||||||
|
typeof data === "object" &&
|
||||||
|
Array.isArray((data as WeKnoraSourceContext).chunks)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function readPreviewError(payload: unknown, status: number): string {
|
||||||
|
if (payload && typeof payload === "object") {
|
||||||
|
const detail = (payload as { detail?: unknown }).detail;
|
||||||
|
if (typeof detail === "string" && detail) {
|
||||||
|
return detail;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return status === 404 ? "原文已不可用" : "无法加载原文上下文";
|
||||||
|
}
|
||||||
|
|
||||||
|
function WeKnoraSourceContextPanel({
|
||||||
|
context,
|
||||||
|
loading,
|
||||||
|
error,
|
||||||
|
}: {
|
||||||
|
context: WeKnoraSourceContext | null;
|
||||||
|
loading: boolean;
|
||||||
|
error: string | null;
|
||||||
|
}) {
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<div className="text-muted-foreground flex min-h-36 items-center justify-center gap-2 text-sm">
|
||||||
|
<LoaderCircle className="size-4 animate-spin" />
|
||||||
|
正在加载原文上下文…
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (error) {
|
||||||
|
return (
|
||||||
|
<div className="border-destructive/30 bg-destructive/5 text-destructive rounded-lg border p-3 text-sm">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (!context) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="max-h-[55vh] space-y-3 overflow-y-auto pr-1">
|
||||||
|
<div className="bg-muted/60 text-muted-foreground rounded-lg px-3 py-2 text-xs">
|
||||||
|
<span>{context.knowledge_base_name || "WeKnora 知识库"}</span>
|
||||||
|
{context.document_title && <span> · {context.document_title}</span>}
|
||||||
|
</div>
|
||||||
|
{context.chunks.map((chunk) => (
|
||||||
|
<section
|
||||||
|
key={chunk.id}
|
||||||
|
className={cn(
|
||||||
|
"rounded-lg border p-3 text-sm leading-relaxed",
|
||||||
|
chunk.is_focus
|
||||||
|
? "border-primary/50 bg-primary/5 shadow-sm"
|
||||||
|
: "bg-muted/20",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<div className="text-muted-foreground mb-2 flex items-center gap-2 text-xs">
|
||||||
|
<span>分段 {typeof chunk.chunk_index === "number" ? chunk.chunk_index + 1 : "-"}</span>
|
||||||
|
{chunk.is_focus && (
|
||||||
|
<span className="bg-primary text-primary-foreground rounded px-1.5 py-0.5 font-medium">
|
||||||
|
检索命中
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="whitespace-pre-wrap">{chunk.content}</p>
|
||||||
|
</section>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function cleanReferenceText(
|
function cleanReferenceText(
|
||||||
raw: string | undefined,
|
raw: string | undefined,
|
||||||
cleanupWords: string[],
|
cleanupWords: string[],
|
||||||
|
|||||||
@@ -1,35 +1,28 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { User } from "lucide-react";
|
import { User } from "lucide-react";
|
||||||
import { useMemo } from "react";
|
|
||||||
|
|
||||||
import { getStoredAuth } from "@/core/auth";
|
import { useLiveAccount } from "@/core/auth/use-live-account";
|
||||||
import { useMyPosition } from "@/core/positions";
|
import { useMyPosition } from "@/core/positions";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import { readUserInfo } from "@/strategy-components/lib/light-app";
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 名称 + 岗位 用户标识。全量模式由 strategy-components/Header.tsx 顶栏右侧展示;
|
* 名称 + 岗位 用户标识。全量模式由 strategy-components/Header.tsx 顶栏右侧展示;
|
||||||
* 紧凑模式(不带全局顶栏)无处承载,故抽成共享组件,复用同一套数据来源
|
* 紧凑模式(不带全局顶栏)无处承载,故抽成共享组件,复用同一套数据来源
|
||||||
* (`readUserInfo().userName` 优先、回退 auth 邮箱前缀;岗位取 `useMyPosition`),
|
* (实时 auth 展示名;岗位取 `useMyPosition`),
|
||||||
* 供页面级顶栏(如 ChatPage)右侧复用,保证两套布局一致。
|
* 供页面级顶栏(如 ChatPage)右侧复用,保证两套布局一致。
|
||||||
*
|
*
|
||||||
* 配色按当前内容区前景色(foreground / muted-foreground),适配聊天页浅底顶栏,
|
* 配色按当前内容区前景色(foreground / muted-foreground),适配聊天页浅底顶栏,
|
||||||
* 而非 Header 的白字贴 banner 方案。
|
* 而非 Header 的白字贴 banner 方案。
|
||||||
*/
|
*/
|
||||||
export function UserIdentityBadge({ className }: { className?: string }) {
|
export function UserIdentityBadge({ className }: { className?: string }) {
|
||||||
const auth = getStoredAuth();
|
// userInfo belongs to external-app route parameters and can legitimately
|
||||||
|
// outlive a login switch. The visible account name must instead match the
|
||||||
|
// settings page's current auth identity.
|
||||||
|
const liveAccount = useLiveAccount();
|
||||||
const { data: myPosition } = useMyPosition();
|
const { data: myPosition } = useMyPosition();
|
||||||
const positionName = myPosition?.name?.trim() || "";
|
const positionName = myPosition?.name?.trim() || "";
|
||||||
|
const displayName = liveAccount.displayName;
|
||||||
// 与 Header.tsx 一致:外部登录写入的真实用户名优先,缺省回退邮箱前缀。
|
|
||||||
const displayName = useMemo(() => {
|
|
||||||
const info = readUserInfo();
|
|
||||||
const name = typeof info.userName === "string" ? info.userName.trim() : "";
|
|
||||||
if (name) return name;
|
|
||||||
const email = auth?.email?.trim();
|
|
||||||
return email ? email.split("@")[0] : "用户";
|
|
||||||
}, [auth?.email]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
|||||||