feat: 新增表格文件预览，优化知识图谱与 Agent 详情交互
- 新增 spreadsheet-preview 组件及 xlsx 解析工具，支持产物中的表格文件预览 - 优化知识图谱画布、详情面板及样式 - 调整 Agent 详情面板、聊天与消息列表交互 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
吉鑫升andClaude Opus 4.8 committed
1 parent
5daa4b3e20
commit
7d61bc09bc
18 files changed
+1092
-208
No files matched your search
@@ -35,6 +35,42 @@ import {
|
||||
const MIN_ZOOM = 0.15;
|
||||
const MAX_ZOOM = 4;
|
||||
|
||||
/** Canvas-drawn colors per app theme (CSS variables don't reach the 2D context). */
|
||||
const CANVAS_PALETTE = {
|
||||
dark: {
|
||||
exportBg: "#0b1020",
|
||||
labelHalo: "rgba(2, 6, 23, 0.9)",
|
||||
nodeRim: "rgba(2, 6, 23, 0.55)",
|
||||
rootRim: "#e0f2fe",
|
||||
expandedRim: "#7dd3fc",
|
||||
rootRing: "rgba(125, 211, 252, 0.9)",
|
||||
expandedDot: "#7dd3fc",
|
||||
expandedDotRim: "rgba(2, 6, 23, 0.8)",
|
||||
selectionRing: "#ffffff",
|
||||
hoverRing: "rgba(255, 255, 255, 0.85)",
|
||||
pin: "rgba(255, 255, 255, 0.8)",
|
||||
labelActive: "#ffffff",
|
||||
label: "#e2e8f0",
|
||||
minimapViewport: "rgba(56, 189, 248, 0.8)",
|
||||
},
|
||||
light: {
|
||||
exportBg: "#f8fafc",
|
||||
labelHalo: "rgba(255, 255, 255, 0.92)",
|
||||
nodeRim: "rgba(255, 255, 255, 0.9)",
|
||||
rootRim: "#075985",
|
||||
expandedRim: "#0284c7",
|
||||
rootRing: "rgba(2, 132, 199, 0.85)",
|
||||
expandedDot: "#0284c7",
|
||||
expandedDotRim: "rgba(255, 255, 255, 0.9)",
|
||||
selectionRing: "#0f172a",
|
||||
hoverRing: "rgba(15, 23, 42, 0.7)",
|
||||
pin: "rgba(15, 23, 42, 0.6)",
|
||||
labelActive: "#0f172a",
|
||||
label: "#334155",
|
||||
minimapViewport: "rgba(2, 132, 199, 0.8)",
|
||||
},
|
||||
} as const;
|
||||
|
||||
export interface GraphCanvasHandle {
|
||||
zoomIn: () => void;
|
||||
zoomOut: () => void;
|
||||
@@ -54,6 +90,8 @@ interface GraphCanvasProps {
|
||||
searchMatchIds: Set<string> | null;
|
||||
layoutType: LayoutType;
|
||||
showLabels: boolean;
|
||||
/** App theme; drives the canvas-drawn colors (labels, rims, rings). */
|
||||
theme: "light" | "dark";
|
||||
onSelectNode: (id: string | null) => void;
|
||||
onTooltip: (tooltip: TooltipState | null) => void;
|
||||
onZoomChange: (k: number) => void;
|
||||
@@ -231,6 +269,7 @@ export const GraphCanvas = forwardRef<GraphCanvasHandle, GraphCanvasProps>(
|
||||
props.searchMatchIds,
|
||||
props.showLabels,
|
||||
props.explore,
|
||||
props.theme,
|
||||
requestDraw,
|
||||
]);
|
||||
|
||||
@@ -330,7 +369,7 @@ export const GraphCanvas = forwardRef<GraphCanvasHandle, GraphCanvasProps>(
|
||||
out.height = main.height;
|
||||
const ctx = out.getContext("2d");
|
||||
if (!ctx) return;
|
||||
ctx.fillStyle = "#0b1020";
|
||||
ctx.fillStyle = CANVAS_PALETTE[propsRef.current.theme].exportBg;
|
||||
ctx.fillRect(0, 0, out.width, out.height);
|
||||
ctx.drawImage(main, 0, 0);
|
||||
out.toBlob((blob) => {
|
||||
@@ -381,6 +420,7 @@ export const GraphCanvas = forwardRef<GraphCanvasHandle, GraphCanvasProps>(
|
||||
const search = p.searchMatchIds;
|
||||
const k = t.k || 1;
|
||||
const explore = p.explore;
|
||||
const palette = CANVAS_PALETTE[p.theme];
|
||||
|
||||
// ---- edges
|
||||
for (const e of sim.edges) {
|
||||
@@ -418,7 +458,7 @@ export const GraphCanvas = forwardRef<GraphCanvasHandle, GraphCanvasProps>(
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "middle";
|
||||
ctx.lineWidth = 3 / k;
|
||||
ctx.strokeStyle = "rgba(2, 6, 23, 0.9)";
|
||||
ctx.strokeStyle = palette.labelHalo;
|
||||
ctx.strokeText(e.info.zh, mx, my);
|
||||
ctx.fillStyle = e.info.color;
|
||||
ctx.fillText(e.info.zh, mx, my);
|
||||
@@ -443,7 +483,7 @@ export const GraphCanvas = forwardRef<GraphCanvasHandle, GraphCanvasProps>(
|
||||
let baseRadius = n.radius;
|
||||
let labelByExplore = false;
|
||||
let strokeWidth = 1.4 / k;
|
||||
let strokeColor = "rgba(2, 6, 23, 0.55)";
|
||||
let strokeColor: string = palette.nodeRim;
|
||||
let fillColor = n.color;
|
||||
if (explore?.preview) {
|
||||
alpha *= 0.42;
|
||||
@@ -454,7 +494,12 @@ export const GraphCanvas = forwardRef<GraphCanvasHandle, GraphCanvasProps>(
|
||||
alpha *= Math.max(0.45, 1 - depth * 0.12);
|
||||
labelByExplore = depth <= 2 || isActive || isSelected;
|
||||
strokeWidth = (depth === 0 ? 4 : isExpanded ? 3 : 1.5) / k;
|
||||
strokeColor = depth === 0 ? "#e0f2fe" : isExpanded ? "#7dd3fc" : "rgba(2, 6, 23, 0.55)";
|
||||
strokeColor =
|
||||
depth === 0
|
||||
? palette.rootRim
|
||||
: isExpanded
|
||||
? palette.expandedRim
|
||||
: palette.nodeRim;
|
||||
if (isExploreRoot) fillColor = "#38bdf8";
|
||||
}
|
||||
|
||||
@@ -487,15 +532,15 @@ export const GraphCanvas = forwardRef<GraphCanvasHandle, GraphCanvasProps>(
|
||||
ctx.beginPath();
|
||||
ctx.arc(n.x, n.y, r + 8 / k, 0, Math.PI * 2);
|
||||
ctx.lineWidth = 1.4 / k;
|
||||
ctx.strokeStyle = "rgba(125, 211, 252, 0.9)";
|
||||
ctx.strokeStyle = palette.rootRing;
|
||||
ctx.stroke();
|
||||
} else if (isExpanded) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(n.x + r * 0.58, n.y - r * 0.58, Math.max(4 / k, 3), 0, Math.PI * 2);
|
||||
ctx.fillStyle = "#7dd3fc";
|
||||
ctx.fillStyle = palette.expandedDot;
|
||||
ctx.fill();
|
||||
ctx.lineWidth = 1 / k;
|
||||
ctx.strokeStyle = "rgba(2, 6, 23, 0.8)";
|
||||
ctx.strokeStyle = palette.expandedDotRim;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
@@ -504,7 +549,7 @@ export const GraphCanvas = forwardRef<GraphCanvasHandle, GraphCanvasProps>(
|
||||
ctx.beginPath();
|
||||
ctx.arc(n.x, n.y, r + 4 / k, 0, Math.PI * 2);
|
||||
ctx.lineWidth = 2 / k;
|
||||
ctx.strokeStyle = "#ffffff";
|
||||
ctx.strokeStyle = palette.selectionRing;
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.arc(n.x, n.y, r + 8 / k, 0, Math.PI * 2);
|
||||
@@ -515,7 +560,7 @@ export const GraphCanvas = forwardRef<GraphCanvasHandle, GraphCanvasProps>(
|
||||
ctx.beginPath();
|
||||
ctx.arc(n.x, n.y, r + 3.5 / k, 0, Math.PI * 2);
|
||||
ctx.lineWidth = 1.6 / k;
|
||||
ctx.strokeStyle = "rgba(255, 255, 255, 0.85)";
|
||||
ctx.strokeStyle = palette.hoverRing;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
@@ -523,7 +568,7 @@ export const GraphCanvas = forwardRef<GraphCanvasHandle, GraphCanvasProps>(
|
||||
if (n.fx != null && !isSelected) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(n.x, n.y, Math.max(r * 0.28, 2 / k), 0, Math.PI * 2);
|
||||
ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
|
||||
ctx.fillStyle = palette.pin;
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
@@ -542,9 +587,9 @@ export const GraphCanvas = forwardRef<GraphCanvasHandle, GraphCanvasProps>(
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "top";
|
||||
ctx.lineWidth = 3.5 / k;
|
||||
ctx.strokeStyle = "rgba(2, 6, 23, 0.9)";
|
||||
ctx.strokeStyle = palette.labelHalo;
|
||||
ctx.strokeText(text, n.x, n.y + r + 5 / k);
|
||||
ctx.fillStyle = isActive || isSelected ? "#ffffff" : "#e2e8f0";
|
||||
ctx.fillStyle = isActive || isSelected ? palette.labelActive : palette.label;
|
||||
ctx.fillText(text, n.x, n.y + r + 5 / k);
|
||||
}
|
||||
}
|
||||
@@ -599,7 +644,7 @@ export const GraphCanvas = forwardRef<GraphCanvasHandle, GraphCanvasProps>(
|
||||
const y0 = ((0 - t.y) / t.k) * scale + oy;
|
||||
const x1 = ((w - t.x) / t.k) * scale + ox;
|
||||
const y1 = ((h - t.y) / t.k) * scale + oy;
|
||||
ctx.strokeStyle = "rgba(56, 189, 248, 0.8)";
|
||||
ctx.strokeStyle = CANVAS_PALETTE[propsRef.current.theme].minimapViewport;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.strokeRect(x0, y0, x1 - x0, y1 - y0);
|
||||
}
|
||||
|
||||
@@ -125,29 +125,22 @@ function DetailBody(props: GraphDetailPanelProps & { node: GraphNode }) {
|
||||
? ` · ${node.category}`
|
||||
: ""}
|
||||
</span>
|
||||
<span
|
||||
className="kg-detail-type"
|
||||
style={{ background: "rgba(148, 163, 184, 0.12)", color: "#cbd5e1" }}
|
||||
>
|
||||
<span className="kg-detail-type kg-detail-type-neutral">
|
||||
度数 {props.degree}
|
||||
</span>
|
||||
{props.explore && props.explore.depth !== null ? (
|
||||
<>
|
||||
<span
|
||||
className="kg-detail-type"
|
||||
style={{ background: "rgba(56, 189, 248, 0.14)", color: "#7dd3fc" }}
|
||||
>
|
||||
<span className="kg-detail-type kg-detail-type-primary">
|
||||
{props.explore.isRoot
|
||||
? "探索起点"
|
||||
: `第 ${props.explore.depth} 层`}
|
||||
</span>
|
||||
<span
|
||||
className="kg-detail-type"
|
||||
style={
|
||||
className={`kg-detail-type ${
|
||||
props.explore.expanded
|
||||
? { background: "rgba(52, 211, 153, 0.14)", color: "#6ee7b7" }
|
||||
: { background: "rgba(251, 191, 36, 0.14)", color: "#fcd34d" }
|
||||
}
|
||||
? "kg-detail-type-success"
|
||||
: "kg-detail-type-warn"
|
||||
}`}
|
||||
>
|
||||
{props.explore.expanded ? "已展开" : "可展开"}
|
||||
</span>
|
||||
|
||||
@@ -1,34 +1,134 @@
|
||||
/* Knowledge-graph workbench — dark, professional analysis-tool styling. */
|
||||
/* Knowledge-graph workbench — professional analysis-tool styling.
|
||||
Light theme is the default; dark values are applied under `.dark`
|
||||
(the app toggles the `dark` class on <html>). */
|
||||
|
||||
.kg-page {
|
||||
--kg-bg: #0b1020;
|
||||
--kg-panel: rgba(15, 23, 42, 0.78);
|
||||
--kg-panel-solid: #0f172a;
|
||||
--kg-border: rgba(148, 163, 184, 0.18);
|
||||
--kg-text-main: #e5e7eb;
|
||||
--kg-text-secondary: #94a3b8;
|
||||
--kg-text-muted: #64748b;
|
||||
--kg-primary: #38bdf8;
|
||||
--kg-primary-soft: rgba(56, 189, 248, 0.16);
|
||||
--kg-bg: #f4f6fb;
|
||||
--kg-bg-image:
|
||||
radial-gradient(circle at 20% 10%, rgba(2, 132, 199, 0.07), transparent 32%),
|
||||
radial-gradient(circle at 80% 20%, rgba(124, 58, 237, 0.06), transparent 28%);
|
||||
--kg-panel: rgba(255, 255, 255, 0.82);
|
||||
--kg-panel-solid: #ffffff;
|
||||
--kg-header-bg: rgba(255, 255, 255, 0.88);
|
||||
--kg-float-bg: rgba(255, 255, 255, 0.88);
|
||||
--kg-tooltip-bg: rgba(255, 255, 255, 0.97);
|
||||
--kg-tooltip-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
|
||||
--kg-button-bg: rgba(255, 255, 255, 0.75);
|
||||
--kg-input-bg: rgba(255, 255, 255, 0.9);
|
||||
--kg-card-bg: rgba(248, 250, 252, 0.9);
|
||||
--kg-canvas-bg: rgba(255, 255, 255, 0.55);
|
||||
--kg-canvas-glow: rgba(2, 132, 199, 0.06);
|
||||
--kg-grid-line: rgba(15, 23, 42, 0.05);
|
||||
|
||||
--kg-border: rgba(15, 23, 42, 0.12);
|
||||
--kg-border-soft: rgba(15, 23, 42, 0.09);
|
||||
--kg-border-faint: rgba(15, 23, 42, 0.07);
|
||||
--kg-divider: rgba(15, 23, 42, 0.06);
|
||||
--kg-input-border: rgba(15, 23, 42, 0.16);
|
||||
|
||||
--kg-text-strong: #0f172a;
|
||||
--kg-text-main: #1e293b;
|
||||
--kg-text-soft: #334155;
|
||||
--kg-text-secondary: #64748b;
|
||||
--kg-text-muted: #94a3b8;
|
||||
|
||||
--kg-primary: #0284c7;
|
||||
--kg-primary-text: #0369a1;
|
||||
--kg-primary-accent: #0369a1;
|
||||
--kg-primary-soft: rgba(2, 132, 199, 0.1);
|
||||
--kg-primary-soft-strong: rgba(2, 132, 199, 0.16);
|
||||
--kg-primary-soft-faint: rgba(2, 132, 199, 0.07);
|
||||
--kg-primary-border: rgba(2, 132, 199, 0.3);
|
||||
--kg-primary-border-strong: rgba(2, 132, 199, 0.45);
|
||||
--kg-focus-border: rgba(2, 132, 199, 0.55);
|
||||
--kg-focus-ring: rgba(2, 132, 199, 0.12);
|
||||
|
||||
--kg-pill-bg: rgba(2, 132, 199, 0.08);
|
||||
--kg-pill-border: rgba(2, 132, 199, 0.24);
|
||||
--kg-violet-bg: rgba(124, 58, 237, 0.08);
|
||||
--kg-violet-border: rgba(124, 58, 237, 0.24);
|
||||
--kg-violet-text: #6d28d9;
|
||||
|
||||
--kg-hover-bg: rgba(15, 23, 42, 0.07);
|
||||
--kg-hover-bg-faint: rgba(15, 23, 42, 0.045);
|
||||
--kg-warn: #b45309;
|
||||
--kg-success-bg: rgba(5, 150, 105, 0.12);
|
||||
--kg-success-text: #047857;
|
||||
--kg-warn-bg: rgba(217, 119, 6, 0.12);
|
||||
--kg-warn-text: #b45309;
|
||||
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
background:
|
||||
radial-gradient(circle at 20% 10%, rgba(56, 189, 248, 0.1), transparent 32%),
|
||||
radial-gradient(circle at 80% 20%, rgba(167, 139, 250, 0.1), transparent 28%),
|
||||
#0b1020;
|
||||
background-color: var(--kg-bg);
|
||||
background-image: var(--kg-bg-image);
|
||||
color: var(--kg-text-main);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dark .kg-page {
|
||||
--kg-bg: #0b1020;
|
||||
--kg-bg-image:
|
||||
radial-gradient(circle at 20% 10%, rgba(56, 189, 248, 0.1), transparent 32%),
|
||||
radial-gradient(circle at 80% 20%, rgba(167, 139, 250, 0.1), transparent 28%);
|
||||
--kg-panel: rgba(15, 23, 42, 0.78);
|
||||
--kg-panel-solid: #0f172a;
|
||||
--kg-header-bg: rgba(15, 23, 42, 0.86);
|
||||
--kg-float-bg: rgba(15, 23, 42, 0.82);
|
||||
--kg-tooltip-bg: rgba(15, 23, 42, 0.94);
|
||||
--kg-tooltip-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
|
||||
--kg-button-bg: rgba(15, 23, 42, 0.65);
|
||||
--kg-input-bg: rgba(2, 6, 23, 0.45);
|
||||
--kg-card-bg: rgba(2, 6, 23, 0.35);
|
||||
--kg-canvas-bg: rgba(2, 6, 23, 0.5);
|
||||
--kg-canvas-glow: rgba(56, 189, 248, 0.08);
|
||||
--kg-grid-line: rgba(148, 163, 184, 0.04);
|
||||
|
||||
--kg-border: rgba(148, 163, 184, 0.18);
|
||||
--kg-border-soft: rgba(148, 163, 184, 0.14);
|
||||
--kg-border-faint: rgba(148, 163, 184, 0.1);
|
||||
--kg-divider: rgba(148, 163, 184, 0.08);
|
||||
--kg-input-border: rgba(148, 163, 184, 0.2);
|
||||
|
||||
--kg-text-strong: #ffffff;
|
||||
--kg-text-main: #e5e7eb;
|
||||
--kg-text-soft: #cbd5e1;
|
||||
--kg-text-secondary: #94a3b8;
|
||||
--kg-text-muted: #64748b;
|
||||
|
||||
--kg-primary: #38bdf8;
|
||||
--kg-primary-text: #bae6fd;
|
||||
--kg-primary-accent: #7dd3fc;
|
||||
--kg-primary-soft: rgba(56, 189, 248, 0.14);
|
||||
--kg-primary-soft-strong: rgba(56, 189, 248, 0.18);
|
||||
--kg-primary-soft-faint: rgba(56, 189, 248, 0.08);
|
||||
--kg-primary-border: rgba(56, 189, 248, 0.35);
|
||||
--kg-primary-border-strong: rgba(56, 189, 248, 0.45);
|
||||
--kg-focus-border: rgba(56, 189, 248, 0.55);
|
||||
--kg-focus-ring: rgba(56, 189, 248, 0.1);
|
||||
|
||||
--kg-pill-bg: rgba(56, 189, 248, 0.12);
|
||||
--kg-pill-border: rgba(56, 189, 248, 0.28);
|
||||
--kg-violet-bg: rgba(167, 139, 250, 0.12);
|
||||
--kg-violet-border: rgba(167, 139, 250, 0.28);
|
||||
--kg-violet-text: #ddd6fe;
|
||||
|
||||
--kg-hover-bg: rgba(148, 163, 184, 0.12);
|
||||
--kg-hover-bg-faint: rgba(148, 163, 184, 0.08);
|
||||
--kg-warn: #fbbf24;
|
||||
--kg-success-bg: rgba(52, 211, 153, 0.14);
|
||||
--kg-success-text: #6ee7b7;
|
||||
--kg-warn-bg: rgba(251, 191, 36, 0.14);
|
||||
--kg-warn-text: #fcd34d;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ header */
|
||||
|
||||
.kg-header {
|
||||
height: 56px;
|
||||
border-bottom: 1px solid var(--kg-border);
|
||||
background: rgba(15, 23, 42, 0.86);
|
||||
background: var(--kg-header-bg);
|
||||
backdrop-filter: blur(14px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -61,7 +161,7 @@
|
||||
}
|
||||
|
||||
.kg-back:hover {
|
||||
background: rgba(148, 163, 184, 0.12);
|
||||
background: var(--kg-hover-bg);
|
||||
}
|
||||
|
||||
.kg-title-block {
|
||||
@@ -74,7 +174,7 @@
|
||||
.kg-title {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
color: var(--kg-text-strong);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@@ -94,9 +194,9 @@
|
||||
height: 28px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(56, 189, 248, 0.12);
|
||||
border: 1px solid rgba(56, 189, 248, 0.28);
|
||||
color: #bae6fd;
|
||||
background: var(--kg-pill-bg);
|
||||
border: 1px solid var(--kg-pill-border);
|
||||
color: var(--kg-primary-text);
|
||||
font-size: 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -105,9 +205,9 @@
|
||||
}
|
||||
|
||||
.kg-stat-pill.kg-stat-pill-violet {
|
||||
background: rgba(167, 139, 250, 0.12);
|
||||
border-color: rgba(167, 139, 250, 0.28);
|
||||
color: #ddd6fe;
|
||||
background: var(--kg-violet-bg);
|
||||
border-color: var(--kg-violet-border);
|
||||
color: var(--kg-violet-text);
|
||||
}
|
||||
|
||||
.kg-header-actions {
|
||||
@@ -123,8 +223,8 @@
|
||||
padding: 0 8px;
|
||||
border-radius: 9px;
|
||||
border: 1px solid var(--kg-border);
|
||||
background: rgba(15, 23, 42, 0.65);
|
||||
color: #cbd5e1;
|
||||
background: var(--kg-button-bg);
|
||||
color: var(--kg-text-soft);
|
||||
font-size: 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -138,9 +238,9 @@
|
||||
}
|
||||
|
||||
.kg-icon-button:hover {
|
||||
color: #ffffff;
|
||||
background: rgba(56, 189, 248, 0.14);
|
||||
border-color: rgba(56, 189, 248, 0.35);
|
||||
color: var(--kg-text-strong);
|
||||
background: var(--kg-primary-soft);
|
||||
border-color: var(--kg-primary-border);
|
||||
}
|
||||
|
||||
.kg-icon-button:disabled {
|
||||
@@ -149,9 +249,9 @@
|
||||
}
|
||||
|
||||
.kg-icon-button.kg-icon-button-active {
|
||||
color: #ffffff;
|
||||
background: rgba(56, 189, 248, 0.18);
|
||||
border-color: rgba(56, 189, 248, 0.45);
|
||||
color: var(--kg-text-strong);
|
||||
background: var(--kg-primary-soft-strong);
|
||||
border-color: var(--kg-primary-border-strong);
|
||||
}
|
||||
|
||||
.kg-header-divider {
|
||||
@@ -198,7 +298,7 @@
|
||||
.kg-panel-header {
|
||||
height: 46px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
|
||||
border-bottom: 1px solid var(--kg-border-soft);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -222,9 +322,9 @@
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
background: rgba(15, 23, 42, 0.65);
|
||||
color: #94a3b8;
|
||||
border: 1px solid var(--kg-border);
|
||||
background: var(--kg-button-bg);
|
||||
color: var(--kg-text-secondary);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -233,9 +333,9 @@
|
||||
}
|
||||
|
||||
.kg-panel-close-btn:hover {
|
||||
color: #ffffff;
|
||||
background: rgba(56, 189, 248, 0.14);
|
||||
border-color: rgba(56, 189, 248, 0.35);
|
||||
color: var(--kg-text-strong);
|
||||
background: var(--kg-primary-soft);
|
||||
border-color: var(--kg-primary-border);
|
||||
}
|
||||
|
||||
.kg-panel-content {
|
||||
@@ -266,8 +366,8 @@
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.2);
|
||||
background: rgba(2, 6, 23, 0.45);
|
||||
border: 1px solid var(--kg-input-border);
|
||||
background: var(--kg-input-bg);
|
||||
color: var(--kg-text-main);
|
||||
padding: 0 12px 0 32px;
|
||||
font-size: 13px;
|
||||
@@ -279,8 +379,8 @@
|
||||
}
|
||||
|
||||
.kg-search:focus {
|
||||
border-color: rgba(56, 189, 248, 0.55);
|
||||
box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
|
||||
border-color: var(--kg-focus-border);
|
||||
box-shadow: 0 0 0 3px var(--kg-focus-ring);
|
||||
}
|
||||
|
||||
.kg-search-hint {
|
||||
@@ -290,11 +390,11 @@
|
||||
}
|
||||
|
||||
.kg-search-hint.kg-search-hint-warn {
|
||||
color: #fbbf24;
|
||||
color: var(--kg-warn);
|
||||
}
|
||||
|
||||
.kg-filter-section {
|
||||
border-top: 1px solid rgba(148, 163, 184, 0.1);
|
||||
border-top: 1px solid var(--kg-border-faint);
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
@@ -307,7 +407,7 @@
|
||||
height: 34px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #cbd5e1;
|
||||
color: var(--kg-text-soft);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -318,11 +418,11 @@
|
||||
}
|
||||
|
||||
.kg-filter-section-header:hover {
|
||||
color: #ffffff;
|
||||
color: var(--kg-text-strong);
|
||||
}
|
||||
|
||||
.kg-filter-section-extra {
|
||||
color: #64748b;
|
||||
color: var(--kg-text-muted);
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
display: inline-flex;
|
||||
@@ -340,7 +440,7 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
color: #cbd5e1;
|
||||
color: var(--kg-text-soft);
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
@@ -349,7 +449,7 @@
|
||||
}
|
||||
|
||||
.kg-check-row:hover {
|
||||
background: rgba(148, 163, 184, 0.08);
|
||||
background: var(--kg-hover-bg-faint);
|
||||
}
|
||||
|
||||
.kg-check-row-main {
|
||||
@@ -360,7 +460,7 @@
|
||||
}
|
||||
|
||||
.kg-check-row input[type="checkbox"] {
|
||||
accent-color: #38bdf8;
|
||||
accent-color: var(--kg-primary);
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
@@ -390,15 +490,15 @@
|
||||
|
||||
.kg-stat-card {
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.12);
|
||||
background: rgba(2, 6, 23, 0.35);
|
||||
border: 1px solid var(--kg-border-faint);
|
||||
background: var(--kg-card-bg);
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.kg-stat-card-value {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
color: var(--kg-text-strong);
|
||||
}
|
||||
|
||||
.kg-stat-card-label {
|
||||
@@ -411,13 +511,13 @@
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
padding: 8px 6px;
|
||||
border-bottom: 1px solid rgba(148, 163, 184, 0.08);
|
||||
border-bottom: 1px solid var(--kg-divider);
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.kg-rank-item:hover {
|
||||
background: rgba(56, 189, 248, 0.08);
|
||||
background: var(--kg-primary-soft-faint);
|
||||
}
|
||||
|
||||
.kg-rank-index {
|
||||
@@ -430,7 +530,7 @@
|
||||
|
||||
.kg-rank-title {
|
||||
flex: 1;
|
||||
color: #cbd5e1;
|
||||
color: var(--kg-text-soft);
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
@@ -462,15 +562,14 @@
|
||||
|
||||
.kg-canvas-wrap {
|
||||
position: relative;
|
||||
background:
|
||||
linear-gradient(rgba(148, 163, 184, 0.04) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(148, 163, 184, 0.04) 1px, transparent 1px),
|
||||
radial-gradient(circle at 50% 40%, rgba(56, 189, 248, 0.08), transparent 42%),
|
||||
rgba(2, 6, 23, 0.5);
|
||||
background-color: var(--kg-canvas-bg);
|
||||
background-image:
|
||||
linear-gradient(var(--kg-grid-line) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--kg-grid-line) 1px, transparent 1px),
|
||||
radial-gradient(circle at 50% 40%, var(--kg-canvas-glow), transparent 42%);
|
||||
background-size:
|
||||
28px 28px,
|
||||
28px 28px,
|
||||
auto,
|
||||
auto;
|
||||
border: 1px solid var(--kg-border);
|
||||
border-radius: 18px;
|
||||
@@ -511,9 +610,9 @@
|
||||
height: 32px;
|
||||
padding: 0 6px;
|
||||
border-radius: 999px;
|
||||
background: rgba(15, 23, 42, 0.82);
|
||||
background: var(--kg-float-bg);
|
||||
border: 1px solid var(--kg-border);
|
||||
color: #cbd5e1;
|
||||
color: var(--kg-text-soft);
|
||||
font-size: 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -532,7 +631,7 @@
|
||||
border-radius: 999px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: #cbd5e1;
|
||||
color: var(--kg-text-soft);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
@@ -541,21 +640,21 @@
|
||||
}
|
||||
|
||||
.kg-pill-button:hover {
|
||||
color: #ffffff;
|
||||
color: var(--kg-text-strong);
|
||||
}
|
||||
|
||||
.kg-pill-button.kg-pill-button-active {
|
||||
background: rgba(56, 189, 248, 0.18);
|
||||
color: #ffffff;
|
||||
background: var(--kg-primary-soft-strong);
|
||||
color: var(--kg-text-strong);
|
||||
}
|
||||
|
||||
.kg-explore-button {
|
||||
height: 32px;
|
||||
padding: 0 10px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(148, 163, 184, 0.18);
|
||||
background: rgba(15, 23, 42, 0.72);
|
||||
color: #cbd5e1;
|
||||
border: 1px solid var(--kg-border);
|
||||
background: var(--kg-float-bg);
|
||||
color: var(--kg-text-soft);
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
@@ -565,8 +664,8 @@
|
||||
}
|
||||
|
||||
.kg-explore-button:hover {
|
||||
background: rgba(56, 189, 248, 0.14);
|
||||
color: #ffffff;
|
||||
background: var(--kg-primary-soft);
|
||||
color: var(--kg-text-strong);
|
||||
}
|
||||
|
||||
.kg-explore-button:disabled {
|
||||
@@ -583,9 +682,9 @@
|
||||
max-width: min(560px, calc(100% - 48px));
|
||||
padding: 8px 14px;
|
||||
border-radius: 999px;
|
||||
border: 1px solid rgba(56, 189, 248, 0.22);
|
||||
background: rgba(15, 23, 42, 0.78);
|
||||
color: #bae6fd;
|
||||
border: 1px solid var(--kg-pill-border);
|
||||
background: var(--kg-panel);
|
||||
color: var(--kg-primary-text);
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
backdrop-filter: blur(12px);
|
||||
@@ -599,9 +698,9 @@
|
||||
width: 32px;
|
||||
min-height: 88px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid rgba(56, 189, 248, 0.28);
|
||||
background: rgba(15, 23, 42, 0.86);
|
||||
color: #bae6fd;
|
||||
border: 1px solid var(--kg-pill-border);
|
||||
background: var(--kg-header-bg);
|
||||
color: var(--kg-primary-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@@ -621,8 +720,8 @@
|
||||
}
|
||||
|
||||
.kg-side-rail-toggle:hover {
|
||||
background: rgba(56, 189, 248, 0.16);
|
||||
color: #ffffff;
|
||||
background: var(--kg-primary-soft-strong);
|
||||
color: var(--kg-text-strong);
|
||||
}
|
||||
|
||||
.kg-minimap {
|
||||
@@ -632,7 +731,7 @@
|
||||
width: 180px;
|
||||
height: 120px;
|
||||
border-radius: 12px;
|
||||
background: rgba(15, 23, 42, 0.78);
|
||||
background: var(--kg-panel);
|
||||
border: 1px solid var(--kg-border);
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
@@ -674,9 +773,9 @@
|
||||
max-width: 320px;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
background: rgba(15, 23, 42, 0.94);
|
||||
border: 1px solid rgba(56, 189, 248, 0.25);
|
||||
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
|
||||
background: var(--kg-tooltip-bg);
|
||||
border: 1px solid var(--kg-pill-border);
|
||||
box-shadow: var(--kg-tooltip-shadow);
|
||||
color: var(--kg-text-main);
|
||||
pointer-events: none;
|
||||
backdrop-filter: blur(14px);
|
||||
@@ -731,7 +830,7 @@
|
||||
font-size: 17px;
|
||||
line-height: 1.5;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
color: var(--kg-text-strong);
|
||||
margin-bottom: 10px;
|
||||
word-break: break-word;
|
||||
}
|
||||
@@ -748,8 +847,28 @@
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.kg-detail-type-neutral {
|
||||
background: var(--kg-hover-bg);
|
||||
color: var(--kg-text-soft);
|
||||
}
|
||||
|
||||
.kg-detail-type-primary {
|
||||
background: var(--kg-primary-soft);
|
||||
color: var(--kg-primary-accent);
|
||||
}
|
||||
|
||||
.kg-detail-type-success {
|
||||
background: var(--kg-success-bg);
|
||||
color: var(--kg-success-text);
|
||||
}
|
||||
|
||||
.kg-detail-type-warn {
|
||||
background: var(--kg-warn-bg);
|
||||
color: var(--kg-warn-text);
|
||||
}
|
||||
|
||||
.kg-detail-summary {
|
||||
color: #cbd5e1;
|
||||
color: var(--kg-text-soft);
|
||||
font-size: 13px;
|
||||
line-height: 1.8;
|
||||
margin-bottom: 16px;
|
||||
@@ -770,7 +889,7 @@
|
||||
}
|
||||
|
||||
.kg-detail-meta-value {
|
||||
color: #cbd5e1;
|
||||
color: var(--kg-text-soft);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@@ -785,8 +904,8 @@
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
background: rgba(148, 163, 184, 0.12);
|
||||
color: #cbd5e1;
|
||||
background: var(--kg-hover-bg);
|
||||
color: var(--kg-text-soft);
|
||||
font-size: 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -815,8 +934,8 @@
|
||||
.kg-neighbor-item {
|
||||
padding: 8px 10px;
|
||||
border-radius: 10px;
|
||||
background: rgba(2, 6, 23, 0.35);
|
||||
border: 1px solid rgba(148, 163, 184, 0.1);
|
||||
background: var(--kg-card-bg);
|
||||
border: 1px solid var(--kg-border-faint);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -824,15 +943,15 @@
|
||||
}
|
||||
|
||||
.kg-neighbor-item:hover {
|
||||
background: rgba(56, 189, 248, 0.1);
|
||||
border-color: rgba(56, 189, 248, 0.24);
|
||||
background: var(--kg-primary-soft-faint);
|
||||
border-color: var(--kg-primary-border);
|
||||
}
|
||||
|
||||
.kg-neighbor-title {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 12px;
|
||||
color: #cbd5e1;
|
||||
color: var(--kg-text-soft);
|
||||
line-height: 1.5;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -903,7 +1022,7 @@
|
||||
max-width: 240px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #bae6fd;
|
||||
color: var(--kg-primary-text);
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------- responsive */
|
||||
|
||||
@@ -73,9 +73,9 @@ export function WikiHeader({
|
||||
</div>
|
||||
<div className="leading-none">
|
||||
<div className="text-base font-extrabold tracking-tight text-slate-900 dark:text-slate-100">
|
||||
知识库
|
||||
问答梳理
|
||||
</div>
|
||||
<div className="mt-1 text-xs text-emerald-500">LLM Wiki · 知识库中心</div>
|
||||
<div className="mt-1 text-xs text-emerald-500">LLM Wiki · 问答梳理中心</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -123,14 +123,20 @@ export function splitRelatedSection(markdown: string): {
|
||||
export function noteFolderSegments(note: KnowledgeNote): string[] {
|
||||
const rawPath = note.vault_path?.replace(/\\/g, "/").replace(/^\/+/, "");
|
||||
if (rawPath && rawPath.includes("/")) {
|
||||
return rawPath.split("/").slice(0, -1).filter(Boolean);
|
||||
let segments = rawPath.split("/").slice(0, -1).filter(Boolean);
|
||||
// Vault notes live under projects/<project>/<category>/ — the first two
|
||||
// levels are constant scaffolding, so hide them from the directory tree.
|
||||
if (segments[0] === "projects" || segments[0] === "project") {
|
||||
segments = segments.slice(2);
|
||||
}
|
||||
if (segments.length > 0) return segments;
|
||||
}
|
||||
return [SOURCE_TYPE_LABELS[note.source_type] ?? FALLBACK_FOLDER];
|
||||
}
|
||||
|
||||
/** Breadcrumb segments for a note (folders only; the title is appended by the caller). */
|
||||
export function noteBreadcrumbSegments(note: KnowledgeNote): string[] {
|
||||
return ["知识库", ...noteFolderSegments(note)];
|
||||
return ["问答梳理", ...noteFolderSegments(note)];
|
||||
}
|
||||
|
||||
function sortTree(nodes: TreeNode[]): void {
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
|
||||
import {
|
||||
BotIcon,
|
||||
CheckIcon,
|
||||
GlobeIcon,
|
||||
InfoIcon,
|
||||
Loader2Icon,
|
||||
@@ -15,6 +16,7 @@ import {
|
||||
SquarePenIcon,
|
||||
Trash2Icon,
|
||||
UserRoundIcon,
|
||||
XIcon,
|
||||
} from "lucide-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useMemo, useState, type ReactNode } from "react";
|
||||
@@ -156,6 +158,13 @@ export function AgentDetailPanel({
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
const [editing, setEditing] = useState(false);
|
||||
const [draft, setDraft] = useState<AgentDraft | null>(null);
|
||||
const [editingQuestionIndex, setEditingQuestionIndex] = useState<
|
||||
number | null
|
||||
>(null);
|
||||
const [questionDraft, setQuestionDraft] = useState<AgentQuestion>({
|
||||
title: "",
|
||||
prompt: "",
|
||||
});
|
||||
const [pickerOpen, setPickerOpen] = useState(false);
|
||||
const [deleteOpen, setDeleteOpen] = useState(false);
|
||||
const [publishPickerOpen, setPublishPickerOpen] = useState(false);
|
||||
@@ -200,6 +209,7 @@ export function AgentDetailPanel({
|
||||
|
||||
function beginEdit() {
|
||||
if (!agent || !canEdit) return;
|
||||
cancelQuestionEdit();
|
||||
setDraft(draftFromAgent(agent));
|
||||
setEditing(true);
|
||||
}
|
||||
@@ -210,6 +220,42 @@ export function AgentDetailPanel({
|
||||
setPickerOpen(false);
|
||||
}
|
||||
|
||||
function beginQuestionEdit(index: number, question: AgentQuestion) {
|
||||
if (!canEdit) return;
|
||||
setEditingQuestionIndex(index);
|
||||
setQuestionDraft(question);
|
||||
}
|
||||
|
||||
function cancelQuestionEdit() {
|
||||
setEditingQuestionIndex(null);
|
||||
setQuestionDraft({ title: "", prompt: "" });
|
||||
}
|
||||
|
||||
async function saveQuestionEdit(index: number) {
|
||||
if (!agent) return;
|
||||
const nextQuestions = questions.map((question, questionIndex) =>
|
||||
questionIndex === index
|
||||
? {
|
||||
title: questionDraft.title.trim() || questionDraft.prompt.trim(),
|
||||
prompt: questionDraft.prompt.trim() || questionDraft.title.trim(),
|
||||
}
|
||||
: question,
|
||||
);
|
||||
const cleanedQuestions = nextQuestions.filter(
|
||||
(question) => question.prompt.trim().length > 0,
|
||||
);
|
||||
try {
|
||||
await updateAgent.mutateAsync({
|
||||
id: agent.id,
|
||||
request: { common_questions: cleanedQuestions },
|
||||
});
|
||||
toast.success("Updated");
|
||||
cancelQuestionEdit();
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : String(err));
|
||||
}
|
||||
}
|
||||
|
||||
async function saveEdit() {
|
||||
if (!agent || !draft) return;
|
||||
const trimmedName = draft.name.trim();
|
||||
@@ -367,7 +413,14 @@ export function AgentDetailPanel({
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-1">
|
||||
<Button size="sm" variant="outline" onClick={beginEdit}>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="hidden"
|
||||
onClick={beginEdit}
|
||||
aria-hidden="true"
|
||||
tabIndex={-1}
|
||||
>
|
||||
<SquarePenIcon className="size-3.5" />
|
||||
编辑
|
||||
</Button>
|
||||
@@ -544,21 +597,98 @@ export function AgentDetailPanel({
|
||||
/>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{questions.map((question, index) => (
|
||||
<button
|
||||
key={index}
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => onAskQuestion(question.prompt)}
|
||||
title={desensitize(question.prompt)}
|
||||
className={cn(
|
||||
"border-border/60 bg-background/60 hover:bg-accent hover:border-border w-full rounded-xl border px-3 py-2.5 text-left text-sm leading-relaxed transition-colors",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
)}
|
||||
>
|
||||
{desensitize(question.title)}
|
||||
</button>
|
||||
))}
|
||||
{questions.map((question, index) => {
|
||||
const isEditingThis = editingQuestionIndex === index;
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="border-border/60 bg-background/60 rounded-xl border p-2"
|
||||
>
|
||||
{isEditingThis ? (
|
||||
<div className="space-y-2">
|
||||
<Input
|
||||
value={questionDraft.title}
|
||||
disabled={isSaving}
|
||||
placeholder="Title"
|
||||
onChange={(e) =>
|
||||
setQuestionDraft({
|
||||
...questionDraft,
|
||||
title: e.currentTarget.value,
|
||||
})
|
||||
}
|
||||
className="h-8 text-sm font-medium"
|
||||
/>
|
||||
<Textarea
|
||||
value={questionDraft.prompt}
|
||||
disabled={isSaving}
|
||||
placeholder="Prompt"
|
||||
onChange={(e) =>
|
||||
setQuestionDraft({
|
||||
...questionDraft,
|
||||
prompt: e.currentTarget.value,
|
||||
})
|
||||
}
|
||||
className="min-h-16 resize-none text-sm"
|
||||
/>
|
||||
<div className="flex justify-end gap-1.5">
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={cancelQuestionEdit}
|
||||
disabled={isSaving}
|
||||
>
|
||||
<XIcon className="size-3.5" />
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
size="sm"
|
||||
onClick={() => void saveQuestionEdit(index)}
|
||||
disabled={isSaving}
|
||||
>
|
||||
{isSaving ? (
|
||||
<Loader2Icon className="size-3.5 animate-spin" />
|
||||
) : (
|
||||
<CheckIcon className="size-3.5" />
|
||||
)}
|
||||
Save
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
type="button"
|
||||
disabled={disabled}
|
||||
onClick={() => onAskQuestion(question.prompt)}
|
||||
title={desensitize(question.prompt)}
|
||||
className={cn(
|
||||
"hover:bg-accent min-w-0 flex-1 rounded-lg px-2 py-1.5 text-left text-sm leading-relaxed transition-colors",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
)}
|
||||
>
|
||||
<span className="block truncate">
|
||||
{desensitize(question.title)}
|
||||
</span>
|
||||
</button>
|
||||
{canEdit && (
|
||||
<Button
|
||||
type="button"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
onClick={() => beginQuestionEdit(index, question)}
|
||||
disabled={isSaving}
|
||||
aria-label="Edit question"
|
||||
>
|
||||
<SquarePenIcon className="size-3.5" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</Section>
|
||||
|
||||
@@ -76,6 +76,7 @@ import { useThread } from "../messages/context";
|
||||
import { Tooltip } from "../tooltip";
|
||||
|
||||
import { useArtifacts } from "./context";
|
||||
import { SpreadsheetPreview } from "./spreadsheet-preview";
|
||||
|
||||
const SANDBOX_RESUME_EVENT = "workspace:sandbox-resume-autoscroll";
|
||||
|
||||
@@ -137,6 +138,11 @@ export function ArtifactFileDetail({
|
||||
const isSkillFile = useMemo(() => {
|
||||
return filepath.endsWith(".skill");
|
||||
}, [filepath]);
|
||||
// .xlsx is a ZIP archive — the generic binary iframe preview renders its
|
||||
// raw bytes as mojibake, so it gets a dedicated table preview instead.
|
||||
const isSpreadsheetFile = useMemo(() => {
|
||||
return /\.xlsx$/i.test(filepath);
|
||||
}, [filepath]);
|
||||
const { isCodeFile, language } = useMemo(() => {
|
||||
if (useWriteFileStreaming) {
|
||||
let nextLanguage = checkCodeFile(filepath).language;
|
||||
@@ -174,13 +180,14 @@ export function ArtifactFileDetail({
|
||||
const hasMultipleArtifacts = (artifacts?.length ?? 0) > 1;
|
||||
const fileTypeLabel = useMemo(() => {
|
||||
if (isImageFile(filepath)) return "IMG";
|
||||
if (isSpreadsheetFile) return "XLSX";
|
||||
if (isMermaidFile(filepath) || language === "mermaid") return "MMD";
|
||||
if (language === "html") return "HTML";
|
||||
if (language === "markdown") return "MD";
|
||||
if (isSkillFile) return "SKILL";
|
||||
if (language) return language.toUpperCase();
|
||||
return "FILE";
|
||||
}, [filepath, isSkillFile, language]);
|
||||
}, [filepath, isSkillFile, isSpreadsheetFile, language]);
|
||||
|
||||
const [viewMode, setViewMode] = useState<"code" | "preview">("code");
|
||||
const [allowAutoViewSwitch, setAllowAutoViewSwitch] = useState(true);
|
||||
@@ -191,6 +198,9 @@ export function ArtifactFileDetail({
|
||||
const [binaryPreviewUrl, setBinaryPreviewUrl] = useState<string | null>(
|
||||
null,
|
||||
);
|
||||
const [spreadsheetData, setSpreadsheetData] = useState<ArrayBuffer | null>(
|
||||
null,
|
||||
);
|
||||
const artifactContentRef = useRef<HTMLDivElement | null>(null);
|
||||
const resumeButtonTimeoutRef = useRef<number | null>(null);
|
||||
|
||||
@@ -310,6 +320,7 @@ export function ArtifactFileDetail({
|
||||
|
||||
useEffect(() => {
|
||||
if (isCodeFile) {
|
||||
setSpreadsheetData(null);
|
||||
setBinaryPreviewUrl((prev) => {
|
||||
if (prev) URL.revokeObjectURL(prev);
|
||||
return null;
|
||||
@@ -325,6 +336,13 @@ export function ArtifactFileDetail({
|
||||
urlOfArtifact({ filepath, threadId, isMock, publicShareCode }),
|
||||
);
|
||||
if (cancelled || !res.ok) return;
|
||||
if (isSpreadsheetFile) {
|
||||
const buffer = await res.arrayBuffer();
|
||||
if (!cancelled) {
|
||||
setSpreadsheetData(buffer);
|
||||
}
|
||||
return;
|
||||
}
|
||||
const blob = await res.blob();
|
||||
if (cancelled) return;
|
||||
const u = URL.createObjectURL(blob);
|
||||
@@ -342,12 +360,13 @@ export function ArtifactFileDetail({
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
setSpreadsheetData(null);
|
||||
setBinaryPreviewUrl((prev) => {
|
||||
if (prev) URL.revokeObjectURL(prev);
|
||||
return null;
|
||||
});
|
||||
};
|
||||
}, [filepath, threadId, isMock, isCodeFile, publicShareCode]);
|
||||
}, [filepath, threadId, isMock, isCodeFile, isSpreadsheetFile, publicShareCode]);
|
||||
|
||||
const handlePauseAutoScroll = useCallback(() => {
|
||||
if (!thread.isLoading || !autoScrollEnabled) {
|
||||
@@ -766,7 +785,18 @@ export function ArtifactFileDetail({
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{!isCodeFile && isSpreadsheetFile && (
|
||||
spreadsheetData ? (
|
||||
<SpreadsheetPreview data={spreadsheetData} />
|
||||
) : (
|
||||
<div className="text-muted-foreground flex size-full items-center justify-center gap-2 text-sm">
|
||||
<LoaderIcon className="size-5 animate-spin" />
|
||||
{t.common.loading}
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
{!isCodeFile &&
|
||||
!isSpreadsheetFile &&
|
||||
(binaryPreviewUrl ? (
|
||||
<iframe className="size-full bg-white" src={binaryPreviewUrl} />
|
||||
) : (
|
||||
|
||||
@@ -0,0 +1,151 @@
|
||||
"use client";
|
||||
|
||||
import { LoaderIcon, TriangleAlertIcon } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { parseXlsx, type ParsedWorksheet } from "@/core/utils/xlsx";
|
||||
import { desensitize } from "@/lib/desensitize";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
/**
|
||||
* Renders an .xlsx ArrayBuffer as sheet tabs + an HTML table, replacing the
|
||||
* old binary-blob iframe preview that showed the raw ZIP bytes as mojibake.
|
||||
*/
|
||||
export function SpreadsheetPreview({
|
||||
data,
|
||||
className,
|
||||
}: {
|
||||
data: ArrayBuffer;
|
||||
className?: string;
|
||||
}) {
|
||||
const [sheets, setSheets] = useState<ParsedWorksheet[] | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [activeSheetIndex, setActiveSheetIndex] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
setSheets(null);
|
||||
setError(null);
|
||||
setActiveSheetIndex(0);
|
||||
parseXlsx(data)
|
||||
.then((parsed) => {
|
||||
if (!cancelled) {
|
||||
setSheets(parsed);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("xlsx preview parse failed:", err);
|
||||
if (!cancelled) {
|
||||
setError(err instanceof Error ? err.message : "解析失败");
|
||||
}
|
||||
});
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [data]);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"text-muted-foreground flex size-full flex-col items-center justify-center gap-2 p-6 text-sm",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<TriangleAlertIcon className="size-5" />
|
||||
<div>无法预览此表格文件：{error}</div>
|
||||
<div className="text-xs">可点击右上角下载后用本地软件打开。</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!sheets) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"text-muted-foreground flex size-full items-center justify-center gap-2 text-sm",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<LoaderIcon className="size-5 animate-spin" />
|
||||
正在解析表格…
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const activeSheet = sheets[activeSheetIndex] ?? sheets[0]!;
|
||||
const [headerRow, ...bodyRows] = activeSheet.rows;
|
||||
const columnCount = Math.max(
|
||||
headerRow?.length ?? 0,
|
||||
...activeSheet.rows.map((row) => row.length),
|
||||
1,
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
data-artifact-preview-scroll
|
||||
className={cn("flex size-full flex-col overflow-hidden", className)}
|
||||
>
|
||||
{sheets.length > 1 && (
|
||||
<div className="border-border/70 flex shrink-0 items-center gap-1 overflow-x-auto border-b px-3 py-2">
|
||||
{sheets.map((sheet, index) => (
|
||||
<button
|
||||
key={`${sheet.name}-${index}`}
|
||||
type="button"
|
||||
onClick={() => setActiveSheetIndex(index)}
|
||||
className={cn(
|
||||
"shrink-0 rounded-md px-2.5 py-1 text-xs transition-colors",
|
||||
index === activeSheetIndex
|
||||
? "bg-primary/10 text-primary font-medium"
|
||||
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{desensitize(sheet.name)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="min-h-0 flex-1 overflow-auto p-3">
|
||||
{activeSheet.rows.length === 0 ? (
|
||||
<div className="text-muted-foreground flex h-full items-center justify-center text-sm">
|
||||
（空工作表）
|
||||
</div>
|
||||
) : (
|
||||
<table className="border-border w-max min-w-full border-collapse text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
{Array.from({ length: columnCount }, (_, columnIndex) => (
|
||||
<th
|
||||
key={columnIndex}
|
||||
className="border-border bg-muted/60 text-foreground sticky top-0 border px-3 py-1.5 text-left font-medium whitespace-pre-wrap"
|
||||
>
|
||||
{desensitize(headerRow?.[columnIndex] ?? "")}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{bodyRows.map((row, rowIndex) => (
|
||||
<tr key={rowIndex} className="even:bg-muted/30">
|
||||
{Array.from({ length: columnCount }, (_, columnIndex) => (
|
||||
<td
|
||||
key={columnIndex}
|
||||
className="border-border border px-3 py-1.5 align-top whitespace-pre-wrap"
|
||||
>
|
||||
{desensitize(row[columnIndex] ?? "")}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
{activeSheet.truncated && (
|
||||
<div className="text-muted-foreground py-2 text-center text-xs">
|
||||
表格过大，仅预览部分内容；完整数据请下载文件查看。
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -33,7 +33,7 @@ import {
|
||||
ArtifactFileList,
|
||||
useArtifacts,
|
||||
} from "../artifacts";
|
||||
import { useThread } from "../messages/context";
|
||||
import { ReferenceBatchesContext, useThread } from "../messages/context";
|
||||
import { SkillDisplaySources } from "../skill-display-sources";
|
||||
|
||||
const CLOSE_MODE = { chat: 100, artifacts: 0 };
|
||||
@@ -362,10 +362,15 @@ const ChatBox: React.FC<{
|
||||
}, [sidePanelOpen]);
|
||||
|
||||
if (disableArtifacts) {
|
||||
return <>{children}</>;
|
||||
return (
|
||||
<ReferenceBatchesContext.Provider value={referenceBatches}>
|
||||
{children}
|
||||
</ReferenceBatchesContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ReferenceBatchesContext.Provider value={referenceBatches}>
|
||||
<ResizablePanelGroup
|
||||
id={`${resizableIdBase}-panels`}
|
||||
orientation="horizontal"
|
||||
@@ -490,6 +495,7 @@ const ChatBox: React.FC<{
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ReferenceBatchesContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { BaseStream } from "@langchain/langgraph-sdk/react";
|
||||
import { createContext, useContext } from "react";
|
||||
|
||||
import type { RuntimeDisplaySource } from "@/core/skill-display/runtime";
|
||||
import type { AgentThreadState } from "@/core/threads";
|
||||
|
||||
export interface ThreadContextType {
|
||||
@@ -26,3 +27,18 @@ export function useThread() {
|
||||
}
|
||||
return context;
|
||||
}
|
||||
|
||||
/**
|
||||
* One turn's reference sources, keyed to the assistant message that answered
|
||||
* the turn. Provided by ChatBox so inline citation rendering and the
|
||||
* right-side reference panel always resolve `[n]` against the SAME sources
|
||||
* (the panel prefers backend reference batches, which the per-message
|
||||
* frontend collection in MessageList knows nothing about).
|
||||
*/
|
||||
export interface ReferenceBatch {
|
||||
id: string;
|
||||
assistant_message_id?: string;
|
||||
sources: RuntimeDisplaySource[];
|
||||
}
|
||||
|
||||
export const ReferenceBatchesContext = createContext<ReferenceBatch[]>([]);
|
||||
@@ -37,7 +37,7 @@ import { resolveAllowMultiple } from "@/roundtable-planning/lib/clarification";
|
||||
import { ArtifactFileList } from "../artifacts/artifact-file-list";
|
||||
import { StreamingIndicator } from "../streaming-indicator";
|
||||
|
||||
import { ThreadContext } from "./context";
|
||||
import { ReferenceBatchesContext, ThreadContext } from "./context";
|
||||
import { MarkdownContent } from "./markdown-content";
|
||||
import { MessageGroup } from "./message-group";
|
||||
import { MessageListItem } from "./message-list-item";
|
||||
@@ -146,6 +146,11 @@ export function MessageList({
|
||||
() => (ragModeEnabled ? buildSkillDisplayMap(skills) : new Map()),
|
||||
[ragModeEnabled, skills],
|
||||
);
|
||||
// Same per-turn reference batches the right-side panel renders (backend
|
||||
// batches preferred). Inline [n] tokens must resolve against these so badge
|
||||
// numbering matches the panel, and so citations still render when the
|
||||
// frontend tool-message scan below comes up empty (e.g. after a reload).
|
||||
const referenceBatches = useContext(ReferenceBatchesContext);
|
||||
|
||||
// Track which clarification messages are still awaiting an answer.
|
||||
// Pending = clarification tool messages that appear after the last human message
|
||||
@@ -270,16 +275,24 @@ export function MessageList({
|
||||
{groupMessages(messages, (group) => {
|
||||
if (group.type === "human" || group.type === "assistant") {
|
||||
return group.messages.map((msg) => {
|
||||
const displaySources =
|
||||
const isAssistantMessage =
|
||||
ragModeEnabled &&
|
||||
group.type === "assistant" &&
|
||||
msg.type === "ai"
|
||||
? collectRuntimeDisplaySources(messages, skillDisplayMap, {
|
||||
msg.type === "ai";
|
||||
const batchSources = isAssistantMessage
|
||||
? referenceBatches.find(
|
||||
(batch) => batch.assistant_message_id === msg.id,
|
||||
)?.sources ?? []
|
||||
: [];
|
||||
const displaySources = isAssistantMessage
|
||||
? batchSources.length > 0
|
||||
? batchSources
|
||||
: collectRuntimeDisplaySources(messages, skillDisplayMap, {
|
||||
afterMessageId: findPreviousHumanMessageId(messages, msg.id),
|
||||
beforeMessageId: msg.id,
|
||||
includeBeforeMessage: true,
|
||||
})
|
||||
: [];
|
||||
: [];
|
||||
return (
|
||||
<MessageListItem
|
||||
key={`${group.id}/${msg.id}`}
|
||||
|
||||
@@ -169,7 +169,7 @@ export function WorkspaceNavChatList({
|
||||
>
|
||||
<Link href="/page/workspace/knowledge">
|
||||
<BookOpen />
|
||||
<span>知识库</span>
|
||||
<span>问答梳理</span>
|
||||
</Link>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
|
||||
@@ -283,7 +283,7 @@ export const sidebarMenuItems: MenuItem[] = [
|
||||
},
|
||||
{
|
||||
id: "resource-knowledge-native",
|
||||
label: "知识库",
|
||||
label: "问答梳理",
|
||||
icon: BookOpen,
|
||||
path: "/page/workspace/knowledge",
|
||||
},
|
||||
|
||||
@@ -623,7 +623,46 @@ function normalizeLooseCitationTokens(
|
||||
return indexes.map((index) => `[${index}]`).join("");
|
||||
};
|
||||
|
||||
let next = content.replace(
|
||||
// 全角括号写法:【1】→ [1]
|
||||
let next = content.replace(/【\s*(\d{1,3})\s*】/g, (match, rawIndex: string) =>
|
||||
isValidIndex(Number(rawIndex)) ? `[${rawIndex}]` : match,
|
||||
);
|
||||
|
||||
// 合并写法:[1,2,3] / [1，2] / [1、2] → [1][2][3]
|
||||
next = next.replace(
|
||||
/\\?\[(\d{1,3}(?:\s*[,，、]\s*\d{1,3})+)\\?\](?!\()/g,
|
||||
(match, rawList: string) => {
|
||||
const indexes = rawList.split(/[,，、]/).map((part) => Number(part.trim()));
|
||||
if (indexes.some((index) => !isValidIndex(index))) {
|
||||
return match;
|
||||
}
|
||||
return indexes.map((index) => `[${index}]`).join("");
|
||||
},
|
||||
);
|
||||
|
||||
// 区间写法:[1-3] / [2~5] → [1][2][3]
|
||||
next = next.replace(
|
||||
/\\?\[(\d{1,3})\s*[-–~～]\s*(\d{1,3})\\?\](?!\()/g,
|
||||
(match, rawStart: string, rawEnd: string) => {
|
||||
const start = Number(rawStart);
|
||||
const end = Number(rawEnd);
|
||||
if (
|
||||
end <= start ||
|
||||
end - start > 20 ||
|
||||
!isValidIndex(start) ||
|
||||
!isValidIndex(end)
|
||||
) {
|
||||
return match;
|
||||
}
|
||||
const tokens: string[] = [];
|
||||
for (let index = start; index <= end; index++) {
|
||||
tokens.push(`[${index}]`);
|
||||
}
|
||||
return tokens.join("");
|
||||
},
|
||||
);
|
||||
|
||||
next = next.replace(
|
||||
/(^|[^\d\[\]\\])((?:\d{1,3}|\\?\[\d{1,3}\\?\])(?:\\?\[\d{1,3}\\?\]|\d{1,3})+)/g,
|
||||
(match, prefix: string, rawRun: string) => {
|
||||
if (!rawRun.includes("[")) {
|
||||
|
||||
@@ -0,0 +1,338 @@
|
||||
/**
|
||||
* Dependency-free .xlsx reader for in-browser previews.
|
||||
*
|
||||
* An .xlsx file is a ZIP archive of XML parts. We unzip it with the native
|
||||
* DecompressionStream("deflate-raw") and parse the parts with DOMParser, so
|
||||
* spreadsheet previews work in this offline deployment without adding a
|
||||
* SheetJS-style dependency. Covers the parts sandbox-generated workbooks
|
||||
* (openpyxl / pandas) actually use: shared strings, inline strings, numbers,
|
||||
* booleans and date-formatted cells. Legacy binary .xls is NOT a ZIP and is
|
||||
* not supported here.
|
||||
*/
|
||||
|
||||
export interface ParsedWorksheet {
|
||||
name: string;
|
||||
/** Dense row-major cell text. Ragged rows are allowed. */
|
||||
rows: string[][];
|
||||
/** True when rows were cut off at MAX_PREVIEW_ROWS. */
|
||||
truncated: boolean;
|
||||
}
|
||||
|
||||
const MAX_PREVIEW_ROWS = 1000;
|
||||
const MAX_PREVIEW_COLS = 200;
|
||||
|
||||
export async function parseXlsx(data: ArrayBuffer): Promise<ParsedWorksheet[]> {
|
||||
const entries = readZipEntries(new Uint8Array(data));
|
||||
const readXml = async (path: string): Promise<Document | null> => {
|
||||
const entry = entries.get(path);
|
||||
if (!entry) {
|
||||
return null;
|
||||
}
|
||||
const bytes = await extractZipEntry(new Uint8Array(data), entry);
|
||||
const text = new TextDecoder("utf-8").decode(bytes);
|
||||
return new DOMParser().parseFromString(text, "application/xml");
|
||||
};
|
||||
|
||||
const workbook = await readXml("xl/workbook.xml");
|
||||
if (!workbook) {
|
||||
throw new Error("不是有效的 xlsx 文件（缺少 xl/workbook.xml）");
|
||||
}
|
||||
const rels = await readXml("xl/_rels/workbook.xml.rels");
|
||||
const relTargets = new Map<string, string>();
|
||||
if (rels) {
|
||||
for (const rel of Array.from(elementsOf(rels, "Relationship"))) {
|
||||
const id = rel.getAttribute("Id");
|
||||
const target = rel.getAttribute("Target");
|
||||
if (id && target) {
|
||||
relTargets.set(id, target);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const sharedStrings = await readSharedStrings(readXml);
|
||||
const dateStyleFlags = await readDateStyleFlags(readXml);
|
||||
|
||||
const sheets: ParsedWorksheet[] = [];
|
||||
for (const sheet of Array.from(elementsOf(workbook, "sheet"))) {
|
||||
const name = sheet.getAttribute("name") ?? `Sheet${sheets.length + 1}`;
|
||||
const rid =
|
||||
sheet.getAttribute("r:id") ??
|
||||
sheet.getAttributeNS(
|
||||
"http://schemas.openxmlformats.org/officeDocument/2006/relationships",
|
||||
"id",
|
||||
) ??
|
||||
"";
|
||||
const target = relTargets.get(rid) ?? `worksheets/sheet${sheets.length + 1}.xml`;
|
||||
const path = target.startsWith("/")
|
||||
? target.slice(1)
|
||||
: `xl/${target.replace(/^\.\//, "")}`;
|
||||
const doc = await readXml(path);
|
||||
if (!doc) {
|
||||
continue;
|
||||
}
|
||||
sheets.push({
|
||||
name,
|
||||
...parseWorksheet(doc, sharedStrings, dateStyleFlags),
|
||||
});
|
||||
}
|
||||
if (sheets.length === 0) {
|
||||
throw new Error("xlsx 文件中没有可读取的工作表");
|
||||
}
|
||||
return sheets;
|
||||
}
|
||||
|
||||
/** Namespace-agnostic tag lookup — xlsx parts use a default namespace. */
|
||||
function elementsOf(root: Document | Element, localName: string): Element[] {
|
||||
return Array.from(root.getElementsByTagNameNS("*", localName));
|
||||
}
|
||||
|
||||
async function readSharedStrings(
|
||||
readXml: (path: string) => Promise<Document | null>,
|
||||
): Promise<string[]> {
|
||||
const doc = await readXml("xl/sharedStrings.xml");
|
||||
if (!doc) {
|
||||
return [];
|
||||
}
|
||||
return elementsOf(doc, "si").map((si) =>
|
||||
elementsOf(si, "t")
|
||||
.map((t) => t.textContent ?? "")
|
||||
.join(""),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* For each cell style (cellXfs index), whether its number format is a
|
||||
* date/time format — those cells hold Excel serial date numbers that must be
|
||||
* rendered as dates instead of raw numbers like 45000.
|
||||
*/
|
||||
async function readDateStyleFlags(
|
||||
readXml: (path: string) => Promise<Document | null>,
|
||||
): Promise<boolean[]> {
|
||||
const doc = await readXml("xl/styles.xml");
|
||||
if (!doc) {
|
||||
return [];
|
||||
}
|
||||
const customDateFormats = new Set<number>();
|
||||
for (const numFmt of elementsOf(doc, "numFmt")) {
|
||||
const id = Number(numFmt.getAttribute("numFmtId"));
|
||||
const code = numFmt.getAttribute("formatCode") ?? "";
|
||||
if (Number.isFinite(id) && isDateFormatCode(code)) {
|
||||
customDateFormats.add(id);
|
||||
}
|
||||
}
|
||||
const cellXfs = elementsOf(doc, "cellXfs")[0];
|
||||
if (!cellXfs) {
|
||||
return [];
|
||||
}
|
||||
return elementsOf(cellXfs, "xf").map((xf) => {
|
||||
const numFmtId = Number(xf.getAttribute("numFmtId") ?? "0");
|
||||
return isBuiltinDateFormat(numFmtId) || customDateFormats.has(numFmtId);
|
||||
});
|
||||
}
|
||||
|
||||
function isBuiltinDateFormat(numFmtId: number): boolean {
|
||||
return (
|
||||
(numFmtId >= 14 && numFmtId <= 22) ||
|
||||
(numFmtId >= 27 && numFmtId <= 36) ||
|
||||
(numFmtId >= 45 && numFmtId <= 47) ||
|
||||
(numFmtId >= 50 && numFmtId <= 58)
|
||||
);
|
||||
}
|
||||
|
||||
function isDateFormatCode(code: string): boolean {
|
||||
// Strip quoted literals, color/condition tags and escapes, then look for
|
||||
// date/time tokens.
|
||||
const cleaned = code
|
||||
.replace(/"[^"]*"/g, "")
|
||||
.replace(/\[[^\]]*\]/g, "")
|
||||
.replace(/\\./g, "");
|
||||
return /[ymdhs]/i.test(cleaned) && !/#|0/.test(cleaned);
|
||||
}
|
||||
|
||||
function parseWorksheet(
|
||||
doc: Document,
|
||||
sharedStrings: string[],
|
||||
dateStyleFlags: boolean[],
|
||||
): { rows: string[][]; truncated: boolean } {
|
||||
const rows: string[][] = [];
|
||||
let truncated = false;
|
||||
for (const row of elementsOf(doc, "row")) {
|
||||
const rowNumber = Number(row.getAttribute("r") ?? rows.length + 1);
|
||||
if (rowNumber > MAX_PREVIEW_ROWS) {
|
||||
truncated = true;
|
||||
break;
|
||||
}
|
||||
while (rows.length < rowNumber - 1) {
|
||||
rows.push([]);
|
||||
}
|
||||
const cells: string[] = [];
|
||||
for (const cell of elementsOf(row, "c")) {
|
||||
const ref = cell.getAttribute("r") ?? "";
|
||||
const columnIndex = ref
|
||||
? columnIndexOfRef(ref)
|
||||
: cells.length;
|
||||
if (columnIndex >= MAX_PREVIEW_COLS) {
|
||||
truncated = true;
|
||||
continue;
|
||||
}
|
||||
while (cells.length < columnIndex) {
|
||||
cells.push("");
|
||||
}
|
||||
cells[columnIndex] = readCellText(cell, sharedStrings, dateStyleFlags);
|
||||
}
|
||||
rows.push(cells);
|
||||
}
|
||||
// Drop trailing fully-empty rows so a sparse sheet doesn't render a long
|
||||
// empty tail.
|
||||
while (rows.length > 0 && rows[rows.length - 1]!.every((cell) => !cell)) {
|
||||
rows.pop();
|
||||
}
|
||||
return { rows, truncated };
|
||||
}
|
||||
|
||||
function readCellText(
|
||||
cell: Element,
|
||||
sharedStrings: string[],
|
||||
dateStyleFlags: boolean[],
|
||||
): string {
|
||||
const type = cell.getAttribute("t") ?? "n";
|
||||
if (type === "inlineStr") {
|
||||
const is = elementsOf(cell, "is")[0];
|
||||
if (!is) {
|
||||
return "";
|
||||
}
|
||||
return elementsOf(is, "t")
|
||||
.map((t) => t.textContent ?? "")
|
||||
.join("");
|
||||
}
|
||||
const value = elementsOf(cell, "v")[0]?.textContent ?? "";
|
||||
if (type === "s") {
|
||||
return sharedStrings[Number(value)] ?? "";
|
||||
}
|
||||
if (type === "b") {
|
||||
return value === "1" ? "TRUE" : "FALSE";
|
||||
}
|
||||
if (type === "str" || type === "e") {
|
||||
return value;
|
||||
}
|
||||
// Numeric cell — render date-styled serial numbers as dates.
|
||||
if (value !== "") {
|
||||
const styleIndex = Number(cell.getAttribute("s") ?? "-1");
|
||||
if (dateStyleFlags[styleIndex]) {
|
||||
const formatted = formatExcelSerialDate(Number(value));
|
||||
if (formatted) {
|
||||
return formatted;
|
||||
}
|
||||
}
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
function formatExcelSerialDate(serial: number): string | null {
|
||||
if (!Number.isFinite(serial)) {
|
||||
return null;
|
||||
}
|
||||
// Excel's day 0 is 1899-12-30 (the offset absorbs the fictitious 1900-02-29).
|
||||
const ms = Math.round(serial * 86400000);
|
||||
const date = new Date(Date.UTC(1899, 11, 30) + ms);
|
||||
if (Number.isNaN(date.getTime())) {
|
||||
return null;
|
||||
}
|
||||
const pad = (n: number) => String(n).padStart(2, "0");
|
||||
const datePart = `${date.getUTCFullYear()}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}`;
|
||||
const timePart = `${pad(date.getUTCHours())}:${pad(date.getUTCMinutes())}:${pad(date.getUTCSeconds())}`;
|
||||
if (serial < 1) {
|
||||
return timePart;
|
||||
}
|
||||
return timePart === "00:00:00" ? datePart : `${datePart} ${timePart}`;
|
||||
}
|
||||
|
||||
function columnIndexOfRef(ref: string): number {
|
||||
let index = 0;
|
||||
for (let i = 0; i < ref.length; i++) {
|
||||
const code = ref.charCodeAt(i);
|
||||
if (code >= 65 && code <= 90) {
|
||||
index = index * 26 + (code - 64);
|
||||
} else if (code >= 97 && code <= 122) {
|
||||
index = index * 26 + (code - 96);
|
||||
} else {
|
||||
break;
|
||||
}
|
||||
}
|
||||
return Math.max(0, index - 1);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Minimal ZIP reading (central directory + stored/deflate entries)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface ZipEntry {
|
||||
compressionMethod: number;
|
||||
compressedSize: number;
|
||||
localHeaderOffset: number;
|
||||
}
|
||||
|
||||
function readZipEntries(bytes: Uint8Array): Map<string, ZipEntry> {
|
||||
const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
|
||||
// End of central directory record: signature 0x06054b50, located within the
|
||||
// last 22..(22+65535) bytes depending on the archive comment length.
|
||||
let eocd = -1;
|
||||
const scanStart = Math.max(0, bytes.length - 22 - 65535);
|
||||
for (let i = bytes.length - 22; i >= scanStart; i--) {
|
||||
if (view.getUint32(i, true) === 0x06054b50) {
|
||||
eocd = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (eocd < 0) {
|
||||
throw new Error("不是有效的 xlsx/zip 文件");
|
||||
}
|
||||
const entryCount = view.getUint16(eocd + 10, true);
|
||||
let offset = view.getUint32(eocd + 16, true);
|
||||
|
||||
const entries = new Map<string, ZipEntry>();
|
||||
for (let i = 0; i < entryCount; i++) {
|
||||
if (view.getUint32(offset, true) !== 0x02014b50) {
|
||||
break;
|
||||
}
|
||||
const compressionMethod = view.getUint16(offset + 10, true);
|
||||
const compressedSize = view.getUint32(offset + 20, true);
|
||||
const nameLength = view.getUint16(offset + 28, true);
|
||||
const extraLength = view.getUint16(offset + 30, true);
|
||||
const commentLength = view.getUint16(offset + 32, true);
|
||||
const localHeaderOffset = view.getUint32(offset + 42, true);
|
||||
const name = new TextDecoder("utf-8").decode(
|
||||
bytes.subarray(offset + 46, offset + 46 + nameLength),
|
||||
);
|
||||
entries.set(name, { compressionMethod, compressedSize, localHeaderOffset });
|
||||
offset += 46 + nameLength + extraLength + commentLength;
|
||||
}
|
||||
return entries;
|
||||
}
|
||||
|
||||
async function extractZipEntry(
|
||||
bytes: Uint8Array,
|
||||
entry: ZipEntry,
|
||||
): Promise<Uint8Array> {
|
||||
const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
|
||||
const base = entry.localHeaderOffset;
|
||||
if (view.getUint32(base, true) !== 0x04034b50) {
|
||||
throw new Error("xlsx/zip 文件结构损坏");
|
||||
}
|
||||
const nameLength = view.getUint16(base + 26, true);
|
||||
const extraLength = view.getUint16(base + 28, true);
|
||||
const dataStart = base + 30 + nameLength + extraLength;
|
||||
const compressed = bytes.subarray(dataStart, dataStart + entry.compressedSize);
|
||||
if (entry.compressionMethod === 0) {
|
||||
return compressed;
|
||||
}
|
||||
if (entry.compressionMethod !== 8) {
|
||||
throw new Error(`不支持的 zip 压缩方式: ${entry.compressionMethod}`);
|
||||
}
|
||||
// .slice() copies into a fresh ArrayBuffer, which also satisfies BlobPart's
|
||||
// non-shared-buffer requirement.
|
||||
const stream = new Blob([compressed.slice()]).stream().pipeThrough(
|
||||
new DecompressionStream("deflate-raw"),
|
||||
);
|
||||
return new Uint8Array(await new Response(stream).arrayBuffer());
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { BotIcon, MessageCircleQuestionIcon, PlusSquare } from "lucide-react";
|
||||
import { BotIcon, PlusSquare } from "lucide-react";
|
||||
import { useParams, useRouter } from "next/navigation";
|
||||
import { useRouteBase } from "@/core/route-base";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
@@ -62,7 +62,6 @@ export default function AgentChatPage() {
|
||||
const agentDisplayName = desensitize(
|
||||
agent?.name ?? (isAgentLoading ? t.common.loading : ""),
|
||||
);
|
||||
// 常用问题 shown as a list beside the input box on the landing screen.
|
||||
const commonQuestions = useMemo(
|
||||
() => normalizeAgentQuestions(agent?.common_questions),
|
||||
[agent?.common_questions],
|
||||
@@ -181,9 +180,9 @@ export default function AgentChatPage() {
|
||||
separate flex sibling, so nothing in the main column can ever bleed
|
||||
over it. */}
|
||||
<div className="flex size-full min-h-0 overflow-hidden">
|
||||
{/* ── Left: main conversation column ───────────────────────────── */}
|
||||
{/* Left: main conversation column */}
|
||||
<main className="flex min-h-0 min-w-0 flex-1 flex-col">
|
||||
{/* Header — in normal flow (not absolute), fixed height. */}
|
||||
{/* Header in normal flow, fixed height. */}
|
||||
<header className="bg-card/90 border-border/70 flex h-12 shrink-0 items-center gap-2 border-b px-4 backdrop-blur-md">
|
||||
<div className="flex shrink-0 items-center gap-1.5 rounded-md border px-2 py-1">
|
||||
<BotIcon className="text-primary h-3.5 w-3.5" />
|
||||
@@ -223,9 +222,9 @@ export default function AgentChatPage() {
|
||||
</header>
|
||||
|
||||
{isLandingState ? (
|
||||
/* ── home: centered hero + suggested questions + input ──────
|
||||
/* Home: centered hero, suggested questions, and input.
|
||||
Everything lives inside the scrollable main column. No fixed,
|
||||
no absolute, no viewport centering — so the avatar can't touch
|
||||
no absolute, no viewport centering, so the avatar can't touch
|
||||
the header and the input can't cover the sidebar. */
|
||||
<div className="flex min-h-0 flex-1 flex-col items-center overflow-y-auto px-6 pb-10 pt-16 sm:pt-24">
|
||||
<AgentWelcome
|
||||
@@ -233,42 +232,28 @@ export default function AgentChatPage() {
|
||||
agentName={agentDisplayName}
|
||||
className="mb-7"
|
||||
/>
|
||||
{/* 常用问题 sit as a list to the LEFT of the input box (not as
|
||||
floating pills above it). On narrow screens the list stacks
|
||||
above the input instead of squeezing it. */}
|
||||
<div
|
||||
className={cn(
|
||||
"flex w-full flex-col gap-3 sm:flex-row sm:items-end sm:gap-4",
|
||||
commonQuestions.length > 0
|
||||
? "max-w-(--container-width-lg)"
|
||||
: "max-w-(--container-width-md)",
|
||||
)}
|
||||
>
|
||||
<div className="w-full max-w-(--container-width-md)">
|
||||
{commonQuestions.length > 0 && (
|
||||
<div className="border-border/60 bg-card/60 w-full shrink-0 rounded-xl border p-3 sm:w-64">
|
||||
<div className="text-muted-foreground mb-2 flex items-center gap-1.5 text-xs font-medium">
|
||||
<MessageCircleQuestionIcon className="size-3.5" />
|
||||
常用问题
|
||||
</div>
|
||||
<div className="flex max-h-44 flex-col gap-1.5 overflow-y-auto">
|
||||
{commonQuestions.map((question, index) => (
|
||||
<button
|
||||
key={index}
|
||||
type="button"
|
||||
disabled={isDemoMode}
|
||||
onClick={() =>
|
||||
handleSubmit({ text: question.prompt, files: [] })
|
||||
}
|
||||
title={desensitize(question.prompt)}
|
||||
className={cn(
|
||||
"border-border/60 bg-background/60 hover:bg-accent hover:border-border w-full truncate rounded-lg border px-3 py-2 text-left text-sm transition-colors",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
)}
|
||||
>
|
||||
<div className="mb-2 flex max-h-20 flex-wrap items-start justify-start gap-2 overflow-y-auto px-1">
|
||||
{commonQuestions.map((question, index) => (
|
||||
<button
|
||||
key={index}
|
||||
type="button"
|
||||
disabled={isDemoMode}
|
||||
onClick={() =>
|
||||
handleSubmit({ text: question.prompt, files: [] })
|
||||
}
|
||||
title={desensitize(question.prompt)}
|
||||
className={cn(
|
||||
"border-border/70 bg-background/85 hover:bg-accent hover:border-border max-w-full rounded-full border px-3 py-1.5 text-left text-sm leading-5 shadow-sm transition-colors",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
)}
|
||||
>
|
||||
<span className="block max-w-[220px] truncate">
|
||||
{desensitize(question.title)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<div className="min-w-0 flex-1">
|
||||
@@ -298,7 +283,7 @@ export default function AgentChatPage() {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
/* ── conversation (active / history): messages scroll, input
|
||||
/* Conversation: messages scroll, input
|
||||
docked at the bottom of the main column only. */
|
||||
<div className="flex min-h-0 flex-1 flex-col">
|
||||
<MessageList
|
||||
@@ -347,8 +332,7 @@ export default function AgentChatPage() {
|
||||
)}
|
||||
</main>
|
||||
|
||||
{/* ── Right: agent detail panel (profile + inline editing for
|
||||
admins / owners; read-only for everyone else) ───────────────── */}
|
||||
{/* Right: agent detail panel. */}
|
||||
<AgentDetailPanel
|
||||
agent={agent}
|
||||
agentName={agentDisplayName}
|
||||
@@ -360,3 +344,4 @@ export default function AgentChatPage() {
|
||||
</ThreadContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -28,10 +28,12 @@ import {
|
||||
getNodeTitle,
|
||||
} from "@/components/knowledge-graph/graphUtils";
|
||||
import "@/components/knowledge-graph/graphStyles.css";
|
||||
import { useTheme } from "@/contexts/ThemeContext";
|
||||
import { useKnowledgeGraph, useKnowledgeNote } from "@/core/knowledge/hooks";
|
||||
|
||||
export default function KnowledgeGraphPage() {
|
||||
const navigate = useNavigate();
|
||||
const { theme } = useTheme();
|
||||
const pageRef = useRef<HTMLDivElement>(null);
|
||||
const canvasRef = useRef<GraphCanvasHandle>(null);
|
||||
|
||||
@@ -54,7 +56,7 @@ export default function KnowledgeGraphPage() {
|
||||
const [showDetail, setShowDetail] = useState(false);
|
||||
const [zoomLevel, setZoomLevel] = useState(1);
|
||||
const [tooltip, setTooltip] = useState<TooltipState | null>(null);
|
||||
const [graphMode, setGraphMode] = useState<GraphMode>("explore");
|
||||
const [graphMode, setGraphMode] = useState<GraphMode>("full");
|
||||
const [exploreRootId, setExploreRootId] = useState<string | null>(null);
|
||||
const [expandedNodeIds, setExpandedNodeIds] = useState<Set<string>>(new Set());
|
||||
const [visibleNodeIds, setVisibleNodeIds] = useState<Set<string>>(new Set());
|
||||
@@ -269,14 +271,16 @@ export default function KnowledgeGraphPage() {
|
||||
return matches;
|
||||
}, [searchKeyword, filteredNodes]);
|
||||
|
||||
const topNodes = useMemo(
|
||||
() =>
|
||||
[...allNodes]
|
||||
.map((node) => ({ node, degree: degrees.get(node.id) ?? 0 }))
|
||||
.sort((a, b) => b.degree - a.degree)
|
||||
.slice(0, 8),
|
||||
[allNodes, degrees],
|
||||
);
|
||||
const topNodes = useMemo(() => {
|
||||
// 搜索时核心节点榜单只保留命中的节点,与画布高亮保持一致。
|
||||
const pool = searchMatchIds
|
||||
? filteredNodes.filter((node) => searchMatchIds.has(node.id))
|
||||
: allNodes;
|
||||
return pool
|
||||
.map((node) => ({ node, degree: degrees.get(node.id) ?? 0 }))
|
||||
.sort((a, b) => b.degree - a.degree)
|
||||
.slice(0, 8);
|
||||
}, [allNodes, filteredNodes, searchMatchIds, degrees]);
|
||||
|
||||
const selectedNode = selectedNodeId ? (nodeById.get(selectedNodeId) ?? null) : null;
|
||||
const selectedNeighbors = useMemo(() => {
|
||||
@@ -633,6 +637,7 @@ export default function KnowledgeGraphPage() {
|
||||
searchMatchIds={searchMatchIds}
|
||||
layoutType={layoutType}
|
||||
showLabels={showLabels}
|
||||
theme={theme}
|
||||
onSelectNode={handleSelectNode}
|
||||
onTooltip={setTooltip}
|
||||
onZoomChange={setZoomLevel}
|
||||
|
||||
@@ -433,14 +433,22 @@ export default function NewAgentPage() {
|
||||
)}
|
||||
</div>
|
||||
<PromptInput
|
||||
onSubmit={({ text }) => void handleChatSubmit(text)}
|
||||
onSubmit={({ text }) => {
|
||||
if (thread.isLoading) {
|
||||
void thread.stop();
|
||||
return;
|
||||
}
|
||||
void handleChatSubmit(text);
|
||||
}}
|
||||
>
|
||||
<PromptInputTextarea
|
||||
placeholder="直接告诉模型你想要什么样的智能体，或回答模型的问题"
|
||||
disabled={thread.isLoading}
|
||||
/>
|
||||
<PromptInputFooter className="justify-end">
|
||||
<PromptInputSubmit disabled={thread.isLoading} />
|
||||
<PromptInputSubmit
|
||||
status={thread.isLoading ? "streaming" : "ready"}
|
||||
/>
|
||||
</PromptInputFooter>
|
||||
</PromptInput>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user