dishui 0.0.91 → 0.0.97
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/.release-verified.json +6 -0
- package/dist/ai.js +22 -0
- package/dist/components/Card/Metric2.js +11 -11
- package/dist/components/Card/Metric2.js.map +1 -1
- package/dist/components/Card/index.d.ts +20 -0
- package/dist/components/Card/index.js +184 -179
- package/dist/components/Card/index.js.map +1 -1
- package/dist/components/GroupButton/index.js +4 -4
- package/dist/components/GroupButton/index.js.map +1 -1
- package/dist/components/GroupedTable/index.js +10 -10
- package/dist/components/GroupedTable/index.js.map +1 -1
- package/dist/components/NavigationList/index.js +9 -9
- package/dist/components/NavigationList/index.js.map +1 -1
- package/dist/components/Section/index.js +11 -11
- package/dist/components/Section/index.js.map +1 -1
- package/dist/components/Skeleton/index.js +1 -1
- package/dist/components/Skeleton/index.js.map +1 -1
- package/dist/components/Table/index.js +6 -6
- package/dist/components/Table/index.js.map +1 -1
- package/dist/components/ai/AgentChat/index.d.ts +54 -0
- package/dist/components/ai/AgentChat/index.js +176 -0
- package/dist/components/ai/AgentChat/index.js.map +1 -0
- package/dist/components/ai/AgentScreen/index.d.ts +50 -0
- package/dist/components/ai/AgentScreen/index.js +233 -0
- package/dist/components/ai/AgentScreen/index.js.map +1 -0
- package/dist/components/ai/ApprovalCard/index.d.ts +26 -0
- package/dist/components/ai/ApprovalCard/index.js +89 -0
- package/dist/components/ai/ApprovalCard/index.js.map +1 -0
- package/dist/components/ai/CodeView/index.d.ts +30 -0
- package/dist/components/ai/CodeView/index.js +149 -0
- package/dist/components/ai/CodeView/index.js.map +1 -0
- package/dist/components/ai/CommandSearch/index.d.ts +39 -0
- package/dist/components/ai/CommandSearch/index.js +217 -0
- package/dist/components/ai/CommandSearch/index.js.map +1 -0
- package/dist/components/ai/ContextCards/index.d.ts +42 -0
- package/dist/components/ai/ContextCards/index.js +106 -0
- package/dist/components/ai/ContextCards/index.js.map +1 -0
- package/dist/components/ai/DiffTable/index.d.ts +70 -0
- package/dist/components/ai/DiffTable/index.js +235 -0
- package/dist/components/ai/DiffTable/index.js.map +1 -0
- package/dist/components/ai/FilterTable/index.d.ts +35 -0
- package/dist/components/ai/FilterTable/index.js +86 -0
- package/dist/components/ai/FilterTable/index.js.map +1 -0
- package/dist/components/ai/FineTuneCard/index.d.ts +24 -0
- package/dist/components/ai/FineTuneCard/index.js +75 -0
- package/dist/components/ai/FineTuneCard/index.js.map +1 -0
- package/dist/components/ai/InsightCards/index.d.ts +23 -0
- package/dist/components/ai/InsightCards/index.js +64 -0
- package/dist/components/ai/InsightCards/index.js.map +1 -0
- package/dist/components/ai/LoadingState/index.d.ts +22 -0
- package/dist/components/ai/LoadingState/index.js +80 -0
- package/dist/components/ai/LoadingState/index.js.map +1 -0
- package/dist/components/ai/PromptBar/index.d.ts +26 -0
- package/dist/components/ai/PromptBar/index.js +117 -0
- package/dist/components/ai/PromptBar/index.js.map +1 -0
- package/dist/components/ai/RecommendationCard/index.d.ts +44 -0
- package/dist/components/ai/RecommendationCard/index.js +142 -0
- package/dist/components/ai/RecommendationCard/index.js.map +1 -0
- package/dist/components/ai/RecordsTable/index.d.ts +65 -0
- package/dist/components/ai/RecordsTable/index.js +334 -0
- package/dist/components/ai/RecordsTable/index.js.map +1 -0
- package/dist/components/ai/SelectionActions/index.d.ts +19 -0
- package/dist/components/ai/SelectionActions/index.js +40 -0
- package/dist/components/ai/SelectionActions/index.js.map +1 -0
- package/dist/components/ai/StateFlow/index.d.ts +24 -0
- package/dist/components/ai/StateFlow/index.js +50 -0
- package/dist/components/ai/StateFlow/index.js.map +1 -0
- package/dist/components/ai/StreamingText/index.d.ts +44 -0
- package/dist/components/ai/StreamingText/index.js +211 -0
- package/dist/components/ai/StreamingText/index.js.map +1 -0
- package/dist/components/ai/TaskRows/index.d.ts +53 -0
- package/dist/components/ai/TaskRows/index.js +186 -0
- package/dist/components/ai/TaskRows/index.js.map +1 -0
- package/dist/components/ai/Thinking/index.d.ts +47 -0
- package/dist/components/ai/Thinking/index.js +197 -0
- package/dist/components/ai/Thinking/index.js.map +1 -0
- package/dist/components/ai/ToolChips/index.d.ts +21 -0
- package/dist/components/ai/ToolChips/index.js +63 -0
- package/dist/components/ai/ToolChips/index.js.map +1 -0
- package/dist/components/ai/index.d.ts +50 -0
- package/dist/components/ai/shared.d.ts +13 -0
- package/dist/components/ai/shared.js +25 -0
- package/dist/components/ai/shared.js.map +1 -0
- package/dist/components/pro/DataTable/rowDetailExtension.js +1 -1
- package/dist/components/pro/DataTable/rowDetailExtension.js.map +1 -1
- package/dist/dishui.css +1 -1
- package/dist/index.d.ts +3 -2
- package/dist/index.js +128 -107
- package/dist/layouts/Sidebar.d.ts +16 -0
- package/dist/layouts/Sidebar.js +85 -52
- package/dist/layouts/Sidebar.js.map +1 -1
- package/package.json +10 -3
|
@@ -0,0 +1,233 @@
|
|
|
1
|
+
import { Resizable as e } from "../../Resizable/index.js";
|
|
2
|
+
import { cn as t } from "../../../utils/cn.js";
|
|
3
|
+
import { formatElapsed as n } from "../shared.js";
|
|
4
|
+
/* empty css */
|
|
5
|
+
import "react";
|
|
6
|
+
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
7
|
+
//#region src/components/ai/AgentScreen/index.tsx
|
|
8
|
+
var a = [68, 32], o = [30, 20], s = {
|
|
9
|
+
open: "Open",
|
|
10
|
+
teach: "Teach a task",
|
|
11
|
+
record: "Record",
|
|
12
|
+
stopRecording: "Stop recording",
|
|
13
|
+
pause: "Pause",
|
|
14
|
+
resume: "Resume"
|
|
15
|
+
}, c = {
|
|
16
|
+
idle: "Idle",
|
|
17
|
+
loading: "Loading",
|
|
18
|
+
working: "Working",
|
|
19
|
+
paused: "Paused",
|
|
20
|
+
recording: "Recording"
|
|
21
|
+
}, l = {
|
|
22
|
+
idle: "neutral",
|
|
23
|
+
loading: "neutral",
|
|
24
|
+
working: "info",
|
|
25
|
+
paused: "warning",
|
|
26
|
+
recording: "danger"
|
|
27
|
+
}, u = ({ children: e }) => /* @__PURE__ */ r("svg", {
|
|
28
|
+
width: "16",
|
|
29
|
+
height: "16",
|
|
30
|
+
viewBox: "0 0 24 24",
|
|
31
|
+
fill: "none",
|
|
32
|
+
stroke: "currentColor",
|
|
33
|
+
strokeWidth: "2",
|
|
34
|
+
strokeLinecap: "round",
|
|
35
|
+
strokeLinejoin: "round",
|
|
36
|
+
"aria-hidden": "true",
|
|
37
|
+
children: e
|
|
38
|
+
}), d = () => /* @__PURE__ */ i(u, { children: [
|
|
39
|
+
/* @__PURE__ */ r("path", { d: "M15 3h6v6" }),
|
|
40
|
+
/* @__PURE__ */ r("path", { d: "M10 14 21 3" }),
|
|
41
|
+
/* @__PURE__ */ r("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })
|
|
42
|
+
] }), f = () => /* @__PURE__ */ i(u, { children: [/* @__PURE__ */ r("path", { d: "M12 20h9" }), /* @__PURE__ */ r("path", { d: "M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z" })] }), p = () => /* @__PURE__ */ i(u, { children: [/* @__PURE__ */ r("circle", {
|
|
43
|
+
cx: "12",
|
|
44
|
+
cy: "12",
|
|
45
|
+
r: "9"
|
|
46
|
+
}), /* @__PURE__ */ r("circle", {
|
|
47
|
+
cx: "12",
|
|
48
|
+
cy: "12",
|
|
49
|
+
r: "3",
|
|
50
|
+
fill: "currentColor",
|
|
51
|
+
stroke: "none"
|
|
52
|
+
})] }), m = () => /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r("rect", {
|
|
53
|
+
x: "6",
|
|
54
|
+
y: "6",
|
|
55
|
+
width: "12",
|
|
56
|
+
height: "12",
|
|
57
|
+
rx: "1.5"
|
|
58
|
+
}) }), h = () => /* @__PURE__ */ i(u, { children: [/* @__PURE__ */ r("rect", {
|
|
59
|
+
x: "6",
|
|
60
|
+
y: "5",
|
|
61
|
+
width: "4",
|
|
62
|
+
height: "14",
|
|
63
|
+
rx: "1"
|
|
64
|
+
}), /* @__PURE__ */ r("rect", {
|
|
65
|
+
x: "14",
|
|
66
|
+
y: "5",
|
|
67
|
+
width: "4",
|
|
68
|
+
height: "14",
|
|
69
|
+
rx: "1"
|
|
70
|
+
})] }), g = () => /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r("path", { d: "m7 5 12 7-12 7Z" }) }), _ = () => /* @__PURE__ */ i("div", {
|
|
71
|
+
className: "dishui-ai-agent-screen__placeholder",
|
|
72
|
+
"aria-hidden": "true",
|
|
73
|
+
children: [
|
|
74
|
+
/* @__PURE__ */ r("span", { className: "dishui-ai-agent-screen__block dishui-ai-agent-screen__block--wide" }),
|
|
75
|
+
/* @__PURE__ */ r("span", { className: "dishui-ai-agent-screen__block" }),
|
|
76
|
+
/* @__PURE__ */ r("span", { className: "dishui-ai-agent-screen__block" }),
|
|
77
|
+
/* @__PURE__ */ r("span", { className: "dishui-ai-agent-screen__block dishui-ai-agent-screen__block--tall" }),
|
|
78
|
+
/* @__PURE__ */ r("span", { className: "dishui-ai-agent-screen__block dishui-ai-agent-screen__block--wide" }),
|
|
79
|
+
/* @__PURE__ */ r("span", { className: "dishui-ai-agent-screen__block" })
|
|
80
|
+
]
|
|
81
|
+
}), v = ({ status: e, statusLabel: t, recording: n, children: a }) => /* @__PURE__ */ i("div", {
|
|
82
|
+
className: "dishui-ai-agent-screen__screen",
|
|
83
|
+
children: [
|
|
84
|
+
a ?? /* @__PURE__ */ r(_, {}),
|
|
85
|
+
e === "loading" && /* @__PURE__ */ i("div", {
|
|
86
|
+
className: "dishui-ai-agent-screen__loading",
|
|
87
|
+
role: "status",
|
|
88
|
+
"aria-live": "polite",
|
|
89
|
+
children: [/* @__PURE__ */ i("span", {
|
|
90
|
+
className: "dishui-ai-agent-screen__spinner",
|
|
91
|
+
"aria-hidden": "true",
|
|
92
|
+
children: [
|
|
93
|
+
/* @__PURE__ */ r("span", {}),
|
|
94
|
+
/* @__PURE__ */ r("span", {}),
|
|
95
|
+
/* @__PURE__ */ r("span", {})
|
|
96
|
+
]
|
|
97
|
+
}), /* @__PURE__ */ r("span", { children: t })]
|
|
98
|
+
}),
|
|
99
|
+
n && /* @__PURE__ */ i("span", {
|
|
100
|
+
className: "dishui-ai-agent-screen__rec",
|
|
101
|
+
children: [/* @__PURE__ */ r("span", {
|
|
102
|
+
className: "dishui-ai-agent-screen__rec-dot",
|
|
103
|
+
"aria-hidden": "true"
|
|
104
|
+
}), "REC"]
|
|
105
|
+
})
|
|
106
|
+
]
|
|
107
|
+
});
|
|
108
|
+
function y({ status: u, title: _ = "Agent's screen", url: y, children: b, onOpen: x, onTeach: S, onRecord: C, onPause: w, onResume: T, elapsedMs: E, aspectRatio: D = "16 / 10", secondary: O, split: k = "horizontal", defaultSplitSizes: A = a, splitSizes: j, onSplitSizesChange: M, onSplitSizesCommit: N, minPanelSizes: P = o, resizeHandleVariant: F = "pill", labels: I, className: L, ...R }) {
|
|
109
|
+
let z = {
|
|
110
|
+
...s,
|
|
111
|
+
...I
|
|
112
|
+
}, B = I?.status?.[u] ?? c[u], V = u === "recording", H = u === "working" || V, U = () => {
|
|
113
|
+
x ? x() : y && window.open(y, "_blank", "noopener,noreferrer");
|
|
114
|
+
}, W = !!x || !!y, G = u === "paused" ? !!T : !!w && (u === "working" || V), K = W || !!S || !!C || G;
|
|
115
|
+
return /* @__PURE__ */ i("div", {
|
|
116
|
+
...R,
|
|
117
|
+
className: t("dishui-ai-agent-screen", `dishui-ai-agent-screen--${u}`, L),
|
|
118
|
+
children: [
|
|
119
|
+
/* @__PURE__ */ i("div", {
|
|
120
|
+
className: "dishui-ai-agent-screen__chrome",
|
|
121
|
+
children: [
|
|
122
|
+
/* @__PURE__ */ i("span", {
|
|
123
|
+
className: "dishui-ai-agent-screen__dots",
|
|
124
|
+
"aria-hidden": "true",
|
|
125
|
+
children: [
|
|
126
|
+
/* @__PURE__ */ r("span", {}),
|
|
127
|
+
/* @__PURE__ */ r("span", {}),
|
|
128
|
+
/* @__PURE__ */ r("span", {})
|
|
129
|
+
]
|
|
130
|
+
}),
|
|
131
|
+
/* @__PURE__ */ r("span", {
|
|
132
|
+
className: "dishui-ai-agent-screen__title",
|
|
133
|
+
children: _
|
|
134
|
+
}),
|
|
135
|
+
/* @__PURE__ */ i("span", {
|
|
136
|
+
className: t("dishui-ai-agent-screen__status", `dishui-ai-agent-screen__status--${l[u]}`),
|
|
137
|
+
role: "status",
|
|
138
|
+
"aria-live": "polite",
|
|
139
|
+
children: [/* @__PURE__ */ r("span", {
|
|
140
|
+
className: t("dishui-ai-agent-screen__indicator", H && "dishui-ai-agent-screen__indicator--live"),
|
|
141
|
+
"aria-hidden": "true"
|
|
142
|
+
}), B]
|
|
143
|
+
}),
|
|
144
|
+
E !== void 0 && /* @__PURE__ */ r("span", {
|
|
145
|
+
className: "dishui-ai-agent-screen__elapsed",
|
|
146
|
+
children: n(E)
|
|
147
|
+
})
|
|
148
|
+
]
|
|
149
|
+
}),
|
|
150
|
+
y && /* @__PURE__ */ r("div", {
|
|
151
|
+
className: "dishui-ai-agent-screen__address",
|
|
152
|
+
title: y,
|
|
153
|
+
children: /* @__PURE__ */ r("span", {
|
|
154
|
+
className: "dishui-ai-agent-screen__url",
|
|
155
|
+
children: y
|
|
156
|
+
})
|
|
157
|
+
}),
|
|
158
|
+
/* @__PURE__ */ r("div", {
|
|
159
|
+
className: "dishui-ai-agent-screen__viewport",
|
|
160
|
+
style: { aspectRatio: D },
|
|
161
|
+
children: O ? /* @__PURE__ */ i(e, {
|
|
162
|
+
orientation: k,
|
|
163
|
+
defaultSizes: A,
|
|
164
|
+
sizes: j,
|
|
165
|
+
onSizesChange: M,
|
|
166
|
+
onSizesCommit: N,
|
|
167
|
+
className: "dishui-ai-agent-screen__split",
|
|
168
|
+
children: [
|
|
169
|
+
/* @__PURE__ */ r(e.Panel, {
|
|
170
|
+
minSize: P[0],
|
|
171
|
+
className: "dishui-ai-agent-screen__panel",
|
|
172
|
+
children: /* @__PURE__ */ r(v, {
|
|
173
|
+
status: u,
|
|
174
|
+
statusLabel: B,
|
|
175
|
+
recording: V,
|
|
176
|
+
children: b
|
|
177
|
+
})
|
|
178
|
+
}),
|
|
179
|
+
/* @__PURE__ */ r(e.Handle, {
|
|
180
|
+
variant: F,
|
|
181
|
+
"aria-label": "Resize agent screen panels"
|
|
182
|
+
}),
|
|
183
|
+
/* @__PURE__ */ r(e.Panel, {
|
|
184
|
+
minSize: P[1],
|
|
185
|
+
className: "dishui-ai-agent-screen__panel dishui-ai-agent-screen__panel--secondary",
|
|
186
|
+
children: O
|
|
187
|
+
})
|
|
188
|
+
]
|
|
189
|
+
}) : /* @__PURE__ */ r(v, {
|
|
190
|
+
status: u,
|
|
191
|
+
statusLabel: B,
|
|
192
|
+
recording: V,
|
|
193
|
+
children: b
|
|
194
|
+
})
|
|
195
|
+
}),
|
|
196
|
+
K && /* @__PURE__ */ i("div", {
|
|
197
|
+
className: "dishui-ai-agent-screen__footer",
|
|
198
|
+
children: [
|
|
199
|
+
W && /* @__PURE__ */ i("button", {
|
|
200
|
+
type: "button",
|
|
201
|
+
className: "dishui-ai-agent-screen__action",
|
|
202
|
+
onClick: U,
|
|
203
|
+
children: [/* @__PURE__ */ r(d, {}), z.open]
|
|
204
|
+
}),
|
|
205
|
+
S && /* @__PURE__ */ i("button", {
|
|
206
|
+
type: "button",
|
|
207
|
+
className: "dishui-ai-agent-screen__action",
|
|
208
|
+
onClick: S,
|
|
209
|
+
children: [/* @__PURE__ */ r(f, {}), z.teach]
|
|
210
|
+
}),
|
|
211
|
+
/* @__PURE__ */ r("span", { className: "dishui-ai-agent-screen__spacer" }),
|
|
212
|
+
G && /* @__PURE__ */ i("button", {
|
|
213
|
+
type: "button",
|
|
214
|
+
className: "dishui-ai-agent-screen__action",
|
|
215
|
+
onClick: u === "paused" ? T : w,
|
|
216
|
+
children: [r(u === "paused" ? g : h, {}), u === "paused" ? z.resume : z.pause]
|
|
217
|
+
}),
|
|
218
|
+
C && /* @__PURE__ */ i("button", {
|
|
219
|
+
type: "button",
|
|
220
|
+
className: t("dishui-ai-agent-screen__action", V && "dishui-ai-agent-screen__action--recording"),
|
|
221
|
+
"aria-pressed": V,
|
|
222
|
+
onClick: C,
|
|
223
|
+
children: [r(V ? m : p, {}), V ? z.stopRecording : z.record]
|
|
224
|
+
})
|
|
225
|
+
]
|
|
226
|
+
})
|
|
227
|
+
]
|
|
228
|
+
});
|
|
229
|
+
}
|
|
230
|
+
//#endregion
|
|
231
|
+
export { y as default };
|
|
232
|
+
|
|
233
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/ai/AgentScreen/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../../utils/cn';\nimport { formatElapsed } from '../shared';\nimport Resizable from '../../Resizable';\nimport './AgentScreen.css';\n\nexport type AgentScreenStatus = 'idle' | 'loading' | 'working' | 'paused' | 'recording';\n\nexport type AgentScreenLabels = {\n open?: string;\n teach?: string;\n record?: string;\n stopRecording?: string;\n pause?: string;\n resume?: string;\n status?: Partial<Record<AgentScreenStatus, string>>;\n};\n\nexport type AgentScreenProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'title'> & {\n status: AgentScreenStatus;\n title?: React.ReactNode;\n /** Shown in a faux address bar and opened by the default Open action. */\n url?: string;\n /** Screen content (`<img>`, `<iframe>`, any node). Absent → skeleton blocks. */\n children?: React.ReactNode;\n /** Defaults to opening `url` in a new tab when `url` is given. */\n onOpen?: () => void;\n onTeach?: () => void;\n /** Toggles recording; the label flips to Stop while `status === 'recording'`. */\n onRecord?: () => void;\n onPause?: () => void;\n onResume?: () => void;\n elapsedMs?: number;\n /** CSS `aspect-ratio` of the screen area. */\n aspectRatio?: string;\n /** Optional secondary panel shown beside or below the screen. */\n secondary?: React.ReactNode;\n /** Split direction when `secondary` is present. */\n split?: 'horizontal' | 'vertical';\n /** Initial panel percentages; must sum to 100. */\n defaultSplitSizes?: [number, number];\n /** Controlled panel percentages; must sum to 100. */\n splitSizes?: [number, number];\n onSplitSizesChange?: (sizes: number[]) => void;\n onSplitSizesCommit?: (sizes: number[]) => void;\n /** Minimum percentage for the primary screen and secondary panel. */\n minPanelSizes?: [number, number];\n /** Resize handle presentation from the shared Resizable component. */\n resizeHandleVariant?: 'line' | 'pill';\n labels?: AgentScreenLabels;\n};\n\nconst DEFAULT_SPLIT_SIZES: [number, number] = [68, 32];\nconst DEFAULT_MIN_PANEL_SIZES: [number, number] = [30, 20];\n\nconst DEFAULT_LABELS = {\n open: 'Open',\n teach: 'Teach a task',\n record: 'Record',\n stopRecording: 'Stop recording',\n pause: 'Pause',\n resume: 'Resume',\n};\n\nconst STATUS_LABEL: Record<AgentScreenStatus, string> = {\n idle: 'Idle',\n loading: 'Loading',\n working: 'Working',\n paused: 'Paused',\n recording: 'Recording',\n};\n\nconst STATUS_TONE: Record<AgentScreenStatus, string> = {\n idle: 'neutral',\n loading: 'neutral',\n working: 'info',\n paused: 'warning',\n recording: 'danger',\n};\n\nconst Icon: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n {children}\n </svg>\n);\n\nconst ExternalIcon: React.FC = () => (\n <Icon>\n <path d=\"M15 3h6v6\" />\n <path d=\"M10 14 21 3\" />\n <path d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\" />\n </Icon>\n);\nconst TeachIcon: React.FC = () => (\n <Icon>\n <path d=\"M12 20h9\" />\n <path d=\"M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z\" />\n </Icon>\n);\nconst RecordIcon: React.FC = () => (\n <Icon>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <circle cx=\"12\" cy=\"12\" r=\"3\" fill=\"currentColor\" stroke=\"none\" />\n </Icon>\n);\nconst StopIcon: React.FC = () => (\n <Icon>\n <rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"1.5\" />\n </Icon>\n);\nconst PauseIcon: React.FC = () => (\n <Icon>\n <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n </Icon>\n);\nconst PlayIcon: React.FC = () => (\n <Icon>\n <path d=\"m7 5 12 7-12 7Z\" />\n </Icon>\n);\n\nconst Placeholder: React.FC = () => (\n <div className=\"dishui-ai-agent-screen__placeholder\" aria-hidden=\"true\">\n <span className=\"dishui-ai-agent-screen__block dishui-ai-agent-screen__block--wide\" />\n <span className=\"dishui-ai-agent-screen__block\" />\n <span className=\"dishui-ai-agent-screen__block\" />\n <span className=\"dishui-ai-agent-screen__block dishui-ai-agent-screen__block--tall\" />\n <span className=\"dishui-ai-agent-screen__block dishui-ai-agent-screen__block--wide\" />\n <span className=\"dishui-ai-agent-screen__block\" />\n </div>\n);\n\nconst ScreenSurface = ({\n status,\n statusLabel,\n recording,\n children,\n}: {\n status: AgentScreenStatus;\n statusLabel: string;\n recording: boolean;\n children?: React.ReactNode;\n}) => (\n <div className=\"dishui-ai-agent-screen__screen\">\n {children ?? <Placeholder />}\n {status === 'loading' && (\n <div className=\"dishui-ai-agent-screen__loading\" role=\"status\" aria-live=\"polite\">\n <span className=\"dishui-ai-agent-screen__spinner\" aria-hidden=\"true\"><span /><span /><span /></span>\n <span>{statusLabel}</span>\n </div>\n )}\n {recording && (\n <span className=\"dishui-ai-agent-screen__rec\">\n <span className=\"dishui-ai-agent-screen__rec-dot\" aria-hidden=\"true\" />\n REC\n </span>\n )}\n </div>\n);\n\n/**\n * Window chrome around an agent's screen: title, text + dot status badge,\n * elapsed time, optional address bar, the screen surface and a footer\n * toolbar with Open / Teach a task / Record / Pause.\n */\nexport default function AgentScreen({\n status,\n title = \"Agent's screen\",\n url,\n children,\n onOpen,\n onTeach,\n onRecord,\n onPause,\n onResume,\n elapsedMs,\n aspectRatio = '16 / 10',\n secondary,\n split = 'horizontal',\n defaultSplitSizes = DEFAULT_SPLIT_SIZES,\n splitSizes,\n onSplitSizesChange,\n onSplitSizesCommit,\n minPanelSizes = DEFAULT_MIN_PANEL_SIZES,\n resizeHandleVariant = 'pill',\n labels,\n className,\n ...rest\n}: AgentScreenProps) {\n const text = { ...DEFAULT_LABELS, ...labels };\n const statusLabel = labels?.status?.[status] ?? STATUS_LABEL[status];\n const recording = status === 'recording';\n const live = status === 'working' || recording;\n\n const handleOpen = () => {\n if (onOpen) onOpen();\n else if (url) window.open(url, '_blank', 'noopener,noreferrer');\n };\n const showOpen = !!onOpen || !!url;\n const showPause = status === 'paused' ? !!onResume : !!onPause && (status === 'working' || recording);\n const showFooter = showOpen || !!onTeach || !!onRecord || showPause;\n\n return (\n <div {...rest} className={cn('dishui-ai-agent-screen', `dishui-ai-agent-screen--${status}`, className)}>\n <div className=\"dishui-ai-agent-screen__chrome\">\n <span className=\"dishui-ai-agent-screen__dots\" aria-hidden=\"true\">\n <span /><span /><span />\n </span>\n <span className=\"dishui-ai-agent-screen__title\">{title}</span>\n <span className={cn('dishui-ai-agent-screen__status', `dishui-ai-agent-screen__status--${STATUS_TONE[status]}`)} role=\"status\" aria-live=\"polite\">\n <span className={cn('dishui-ai-agent-screen__indicator', live && 'dishui-ai-agent-screen__indicator--live')} aria-hidden=\"true\" />\n {statusLabel}\n </span>\n {elapsedMs !== undefined && <span className=\"dishui-ai-agent-screen__elapsed\">{formatElapsed(elapsedMs)}</span>}\n </div>\n\n {url && (\n <div className=\"dishui-ai-agent-screen__address\" title={url}>\n <span className=\"dishui-ai-agent-screen__url\">{url}</span>\n </div>\n )}\n\n <div className=\"dishui-ai-agent-screen__viewport\" style={{ aspectRatio }}>\n {secondary ? (\n <Resizable\n orientation={split}\n defaultSizes={defaultSplitSizes}\n sizes={splitSizes}\n onSizesChange={onSplitSizesChange}\n onSizesCommit={onSplitSizesCommit}\n className=\"dishui-ai-agent-screen__split\"\n >\n <Resizable.Panel minSize={minPanelSizes[0]} className=\"dishui-ai-agent-screen__panel\">\n <ScreenSurface status={status} statusLabel={statusLabel} recording={recording}>{children}</ScreenSurface>\n </Resizable.Panel>\n <Resizable.Handle variant={resizeHandleVariant} aria-label=\"Resize agent screen panels\" />\n <Resizable.Panel minSize={minPanelSizes[1]} className=\"dishui-ai-agent-screen__panel dishui-ai-agent-screen__panel--secondary\">\n {secondary}\n </Resizable.Panel>\n </Resizable>\n ) : (\n <ScreenSurface status={status} statusLabel={statusLabel} recording={recording}>{children}</ScreenSurface>\n )}\n </div>\n\n {showFooter && (\n <div className=\"dishui-ai-agent-screen__footer\">\n {showOpen && (\n <button type=\"button\" className=\"dishui-ai-agent-screen__action\" onClick={handleOpen}>\n <ExternalIcon />\n {text.open}\n </button>\n )}\n {onTeach && (\n <button type=\"button\" className=\"dishui-ai-agent-screen__action\" onClick={onTeach}>\n <TeachIcon />\n {text.teach}\n </button>\n )}\n <span className=\"dishui-ai-agent-screen__spacer\" />\n {showPause && (\n <button\n type=\"button\"\n className=\"dishui-ai-agent-screen__action\"\n onClick={status === 'paused' ? onResume : onPause}\n >\n {status === 'paused' ? <PlayIcon /> : <PauseIcon />}\n {status === 'paused' ? text.resume : text.pause}\n </button>\n )}\n {onRecord && (\n <button\n type=\"button\"\n className={cn('dishui-ai-agent-screen__action', recording && 'dishui-ai-agent-screen__action--recording')}\n aria-pressed={recording}\n onClick={onRecord}\n >\n {recording ? <StopIcon /> : <RecordIcon />}\n {recording ? text.stopRecording : text.record}\n </button>\n )}\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type ApprovalOption = {
|
|
3
|
+
id: string;
|
|
4
|
+
label: React.ReactNode;
|
|
5
|
+
description?: React.ReactNode;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
disabledReason?: string;
|
|
8
|
+
};
|
|
9
|
+
export type ApprovalCardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onChange'> & {
|
|
10
|
+
title: React.ReactNode;
|
|
11
|
+
description?: React.ReactNode;
|
|
12
|
+
options?: ApprovalOption[];
|
|
13
|
+
value?: string;
|
|
14
|
+
defaultValue?: string;
|
|
15
|
+
onChange?: (value: string) => void;
|
|
16
|
+
onApprove?: (value?: string) => void;
|
|
17
|
+
onReject?: () => void;
|
|
18
|
+
busy?: boolean;
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
labels?: {
|
|
21
|
+
approve?: string;
|
|
22
|
+
reject?: string;
|
|
23
|
+
required?: string;
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
export default function ApprovalCard({ title, description, options, value, defaultValue, onChange, onApprove, onReject, busy, disabled, labels, className, ...rest }: ApprovalCardProps): React.JSX.Element;
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { cn as e } from "../../../utils/cn.js";
|
|
2
|
+
import t from "../../Button/index.js";
|
|
3
|
+
/* empty css */
|
|
4
|
+
import { useId as n, useState as r } from "react";
|
|
5
|
+
import { jsx as i, jsxs as a } from "react/jsx-runtime";
|
|
6
|
+
//#region src/components/ai/ApprovalCard/index.tsx
|
|
7
|
+
var o = [];
|
|
8
|
+
function s({ title: s, description: c, options: l = o, value: u, defaultValue: d, onChange: f, onApprove: p, onReject: m, busy: h = !1, disabled: g = !1, labels: _, className: v, ...y }) {
|
|
9
|
+
let b = n(), [x, S] = r(d), C = u ?? x, w = l.length > 0 && !C, T = (e) => {
|
|
10
|
+
u === void 0 && S(e), f?.(e);
|
|
11
|
+
};
|
|
12
|
+
return /* @__PURE__ */ a("section", {
|
|
13
|
+
...y,
|
|
14
|
+
className: e("dishui-ai-approval-card", v),
|
|
15
|
+
"aria-labelledby": `${b}-title`,
|
|
16
|
+
children: [
|
|
17
|
+
/* @__PURE__ */ a("div", {
|
|
18
|
+
className: "dishui-ai-approval-card__head",
|
|
19
|
+
children: [
|
|
20
|
+
/* @__PURE__ */ i("span", {
|
|
21
|
+
className: "dishui-ai-approval-card__badge",
|
|
22
|
+
children: "Approval required"
|
|
23
|
+
}),
|
|
24
|
+
/* @__PURE__ */ i("h3", {
|
|
25
|
+
id: `${b}-title`,
|
|
26
|
+
children: s
|
|
27
|
+
}),
|
|
28
|
+
c && /* @__PURE__ */ i("div", {
|
|
29
|
+
className: "dishui-ai-approval-card__description",
|
|
30
|
+
children: c
|
|
31
|
+
})
|
|
32
|
+
]
|
|
33
|
+
}),
|
|
34
|
+
l.length > 0 && /* @__PURE__ */ i("div", {
|
|
35
|
+
className: "dishui-ai-approval-card__options",
|
|
36
|
+
role: "radiogroup",
|
|
37
|
+
"aria-label": "Approval options",
|
|
38
|
+
children: l.map((t) => /* @__PURE__ */ a("button", {
|
|
39
|
+
type: "button",
|
|
40
|
+
role: "radio",
|
|
41
|
+
"aria-checked": C === t.id,
|
|
42
|
+
disabled: g || h || t.disabled,
|
|
43
|
+
title: t.disabledReason,
|
|
44
|
+
className: e("dishui-ai-approval-card__option", C === t.id && "dishui-ai-approval-card__option--selected"),
|
|
45
|
+
onClick: () => T(t.id),
|
|
46
|
+
children: [/* @__PURE__ */ i("span", {
|
|
47
|
+
className: "dishui-ai-approval-card__radio",
|
|
48
|
+
"aria-hidden": "true"
|
|
49
|
+
}), /* @__PURE__ */ a("span", { children: [
|
|
50
|
+
/* @__PURE__ */ i("strong", { children: t.label }),
|
|
51
|
+
t.description && /* @__PURE__ */ i("small", { children: t.description }),
|
|
52
|
+
t.disabled && t.disabledReason && /* @__PURE__ */ i("small", { children: t.disabledReason })
|
|
53
|
+
] })]
|
|
54
|
+
}, t.id))
|
|
55
|
+
}),
|
|
56
|
+
/* @__PURE__ */ a("div", {
|
|
57
|
+
className: "dishui-ai-approval-card__actions",
|
|
58
|
+
children: [
|
|
59
|
+
w && /* @__PURE__ */ i("span", {
|
|
60
|
+
role: "status",
|
|
61
|
+
children: _?.required ?? "Choose an option to continue"
|
|
62
|
+
}),
|
|
63
|
+
/* @__PURE__ */ i("span", { className: "dishui-ai-approval-card__spacer" }),
|
|
64
|
+
m && /* @__PURE__ */ i(t, {
|
|
65
|
+
type: "button",
|
|
66
|
+
size: "sm",
|
|
67
|
+
variant: "secondary",
|
|
68
|
+
disabled: g || h,
|
|
69
|
+
onClick: m,
|
|
70
|
+
children: _?.reject ?? "Reject"
|
|
71
|
+
}),
|
|
72
|
+
p && /* @__PURE__ */ i(t, {
|
|
73
|
+
type: "button",
|
|
74
|
+
size: "sm",
|
|
75
|
+
variant: "primary",
|
|
76
|
+
disabled: g || h || w,
|
|
77
|
+
"aria-busy": h || void 0,
|
|
78
|
+
onClick: () => p(C),
|
|
79
|
+
children: _?.approve ?? "Approve"
|
|
80
|
+
})
|
|
81
|
+
]
|
|
82
|
+
})
|
|
83
|
+
]
|
|
84
|
+
});
|
|
85
|
+
}
|
|
86
|
+
//#endregion
|
|
87
|
+
export { s as default };
|
|
88
|
+
|
|
89
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/ai/ApprovalCard/index.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\nimport { cn } from '../../../utils/cn';\nimport Button from '../../Button';\nimport './ApprovalCard.css';\n\nconst EMPTY_OPTIONS: ApprovalOption[] = [];\n\nexport type ApprovalOption = { id: string; label: React.ReactNode; description?: React.ReactNode; disabled?: boolean; disabledReason?: string };\nexport type ApprovalCardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'onChange'> & {\n title: React.ReactNode; description?: React.ReactNode; options?: ApprovalOption[];\n value?: string; defaultValue?: string; onChange?: (value: string) => void;\n onApprove?: (value?: string) => void; onReject?: () => void; busy?: boolean; disabled?: boolean;\n labels?: { approve?: string; reject?: string; required?: string };\n};\n\nexport default function ApprovalCard({ title, description, options = EMPTY_OPTIONS, value, defaultValue, onChange, onApprove, onReject, busy = false, disabled = false, labels, className, ...rest }: ApprovalCardProps) {\n const uid = useId();\n const [internal, setInternal] = useState(defaultValue);\n const selected = value ?? internal;\n const required = options.length > 0 && !selected;\n const choose = (id: string) => { if (value === undefined) setInternal(id); onChange?.(id); };\n return <section {...rest} className={cn('dishui-ai-approval-card', className)} aria-labelledby={`${uid}-title`}>\n <div className=\"dishui-ai-approval-card__head\"><span className=\"dishui-ai-approval-card__badge\">Approval required</span><h3 id={`${uid}-title`}>{title}</h3>{description && <div className=\"dishui-ai-approval-card__description\">{description}</div>}</div>\n {options.length > 0 && <div className=\"dishui-ai-approval-card__options\" role=\"radiogroup\" aria-label=\"Approval options\">{options.map(option => <button key={option.id} type=\"button\" role=\"radio\" aria-checked={selected === option.id} disabled={disabled || busy || option.disabled} title={option.disabledReason} className={cn('dishui-ai-approval-card__option', selected === option.id && 'dishui-ai-approval-card__option--selected')} onClick={() => choose(option.id)}><span className=\"dishui-ai-approval-card__radio\" aria-hidden=\"true\"/><span><strong>{option.label}</strong>{option.description && <small>{option.description}</small>}{option.disabled && option.disabledReason && <small>{option.disabledReason}</small>}</span></button>)}</div>}\n <div className=\"dishui-ai-approval-card__actions\">{required && <span role=\"status\">{labels?.required ?? 'Choose an option to continue'}</span>}<span className=\"dishui-ai-approval-card__spacer\"/>{onReject && <Button type=\"button\" size=\"sm\" variant=\"secondary\" disabled={disabled || busy} onClick={onReject}>{labels?.reject ?? 'Reject'}</Button>}{onApprove && <Button type=\"button\" size=\"sm\" variant=\"primary\" disabled={disabled || busy || required} aria-busy={busy || undefined} onClick={() => onApprove(selected)}>{labels?.approve ?? 'Approve'}</Button>}</div>\n </section>;\n}\n"],"mappings":";;;;;;AAKA,IAAM,IAAkC,CAAC;AAUzC,SAAwB,EAAa,EAAE,UAAO,gBAAa,aAAU,GAAe,UAAO,iBAAc,aAAU,cAAW,aAAU,UAAO,IAAO,cAAW,IAAO,WAAQ,cAAW,GAAG,KAA2B;CACvN,IAAM,IAAM,EAAM,GACZ,CAAC,GAAU,KAAe,EAAS,CAAY,GAC/C,IAAW,KAAS,GACpB,IAAW,EAAQ,SAAS,KAAK,CAAC,GAClC,KAAU,MAAe;EAA4C,AAAtC,MAAU,KAAA,KAAW,EAAY,CAAE,GAAG,IAAW,CAAE;CAAG;CAC3F,OAAO,kBAAC,WAAD;EAAS,GAAI;EAAM,WAAW,EAAG,2BAA2B,CAAS;EAAG,mBAAiB,GAAG,EAAI;EAAhG,UAAA;GACL,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KAA+C,kBAAC,QAAD;MAAM,WAAU;MAAiC,UAAA;KAAuB,CAAA;KAAC,kBAAC,MAAD;MAAI,IAAI,GAAG,EAAI;MAAU,UAAA;KAAU,CAAA;KAAE,KAAe,kBAAC,OAAD;MAAK,WAAU;MAAwC,UAAA;KAAiB,CAAA;IAAO;;GAC1P,EAAQ,SAAS,KAAK,kBAAC,OAAD;IAAK,WAAU;IAAmC,MAAK;IAAa,cAAW;IAAoB,UAAA,EAAQ,KAAI,MAAU,kBAAC,UAAD;KAAwB,MAAK;KAAS,MAAK;KAAQ,gBAAc,MAAa,EAAO;KAAI,UAAU,KAAY,KAAQ,EAAO;KAAU,OAAO,EAAO;KAAgB,WAAW,EAAG,mCAAmC,MAAa,EAAO,MAAM,2CAA2C;KAAG,eAAe,EAAO,EAAO,EAAE;KAA9T,UAAA,CAAiU,kBAAC,QAAD;MAAM,WAAU;MAAiC,eAAY;KAAO,CAAA,GAAC,kBAAC,QAAD,EAAA,UAAA;MAAM,kBAAC,UAAD,EAAA,UAAS,EAAO,MAAc,CAAA;MAAE,EAAO,eAAe,kBAAC,SAAD,EAAA,UAAQ,EAAO,YAAmB,CAAA;MAAG,EAAO,YAAY,EAAO,kBAAkB,kBAAC,SAAD,EAAA,UAAQ,EAAO,eAAsB,CAAA;KAAQ,EAAA,CAAA,CAAS;IAA5jB,GAAA,EAAO,EAAqjB,CAAC;GAAO,CAAA;GACjuB,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KAAmD,KAAY,kBAAC,QAAD;MAAM,MAAK;MAAU,UAAA,GAAQ,YAAY;KAAqC,CAAA;KAAE,kBAAC,QAAD,EAAM,WAAU,kCAAkC,CAAA;KAAE,KAAY,kBAAC,GAAD;MAAQ,MAAK;MAAS,MAAK;MAAK,SAAQ;MAAY,UAAU,KAAY;MAAM,SAAS;MAAW,UAAA,GAAQ,UAAU;KAAiB,CAAA;KAAG,KAAa,kBAAC,GAAD;MAAQ,MAAK;MAAS,MAAK;MAAK,SAAQ;MAAU,UAAU,KAAY,KAAQ;MAAU,aAAW,KAAQ,KAAA;MAAW,eAAe,EAAU,CAAQ;MAAI,UAAA,GAAQ,WAAW;KAAkB,CAAA;IAAO;;EACxiB;;AACX"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type CodeViewLabels = {
|
|
3
|
+
copy?: string;
|
|
4
|
+
copied?: string;
|
|
5
|
+
copyFailed?: string;
|
|
6
|
+
expand?: string;
|
|
7
|
+
collapse?: string;
|
|
8
|
+
};
|
|
9
|
+
export type CodeViewProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {
|
|
10
|
+
code: string;
|
|
11
|
+
/** Prism language name, for example `typescript`, `tsx`, `python` or `json`. */
|
|
12
|
+
language?: string;
|
|
13
|
+
title?: React.ReactNode;
|
|
14
|
+
/** Show a non-selectable line-number gutter. */
|
|
15
|
+
showLineNumbers?: boolean;
|
|
16
|
+
/** Starting value for the first visible line number. */
|
|
17
|
+
startingLineNumber?: number;
|
|
18
|
+
/** Wrap long source lines instead of scrolling horizontally. */
|
|
19
|
+
wrap?: boolean;
|
|
20
|
+
defaultCollapsed?: boolean;
|
|
21
|
+
collapsible?: boolean;
|
|
22
|
+
maxHeight?: string | number;
|
|
23
|
+
onCopy?: (code: string) => void | Promise<void>;
|
|
24
|
+
labels?: CodeViewLabels;
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* Read-only highlighted source view. It follows CodeEditor's read-only visual
|
|
28
|
+
* contract while remaining focused on display, copy, collapse and line numbers.
|
|
29
|
+
*/
|
|
30
|
+
export default function CodeView({ code, language, title, showLineNumbers, startingLineNumber, wrap, defaultCollapsed, collapsible, maxHeight, onCopy, labels, className, ...rest }: CodeViewProps): React.JSX.Element;
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
import { cn as e } from "../../../utils/cn.js";
|
|
2
|
+
/* empty css */
|
|
3
|
+
import { useId as t, useState as n } from "react";
|
|
4
|
+
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
5
|
+
import { Prism as a } from "react-syntax-highlighter";
|
|
6
|
+
//#region src/components/ai/CodeView/index.tsx
|
|
7
|
+
var o = {
|
|
8
|
+
"code[class*=\"language-\"]": {
|
|
9
|
+
color: "var(--dishui-text-primary)",
|
|
10
|
+
background: "transparent",
|
|
11
|
+
fontFamily: "var(--dishui-font-mono)",
|
|
12
|
+
fontSize: "var(--dishui-text-body-sm)",
|
|
13
|
+
lineHeight: 1.65,
|
|
14
|
+
textAlign: "left",
|
|
15
|
+
whiteSpace: "pre",
|
|
16
|
+
wordSpacing: "normal",
|
|
17
|
+
wordBreak: "normal",
|
|
18
|
+
overflowWrap: "normal",
|
|
19
|
+
tabSize: 2
|
|
20
|
+
},
|
|
21
|
+
"pre[class*=\"language-\"]": {
|
|
22
|
+
color: "var(--dishui-text-primary)",
|
|
23
|
+
background: "var(--dishui-surface-canvas)",
|
|
24
|
+
fontFamily: "var(--dishui-font-mono)",
|
|
25
|
+
fontSize: "var(--dishui-text-body-sm)",
|
|
26
|
+
lineHeight: 1.65,
|
|
27
|
+
textAlign: "left",
|
|
28
|
+
whiteSpace: "pre",
|
|
29
|
+
wordSpacing: "normal",
|
|
30
|
+
wordBreak: "normal",
|
|
31
|
+
overflowWrap: "normal",
|
|
32
|
+
tabSize: 2
|
|
33
|
+
},
|
|
34
|
+
comment: {
|
|
35
|
+
color: "var(--dishui-text-tertiary)",
|
|
36
|
+
fontStyle: "italic"
|
|
37
|
+
},
|
|
38
|
+
prolog: { color: "var(--dishui-text-tertiary)" },
|
|
39
|
+
doctype: { color: "var(--dishui-text-tertiary)" },
|
|
40
|
+
cdata: { color: "var(--dishui-text-tertiary)" },
|
|
41
|
+
punctuation: { color: "var(--dishui-text-secondary)" },
|
|
42
|
+
property: { color: "var(--dishui-status-danger-fg)" },
|
|
43
|
+
tag: { color: "var(--dishui-status-danger-fg)" },
|
|
44
|
+
boolean: { color: "var(--dishui-status-alt-fg)" },
|
|
45
|
+
number: { color: "var(--dishui-status-alt-fg)" },
|
|
46
|
+
constant: { color: "var(--dishui-status-alt-fg)" },
|
|
47
|
+
symbol: { color: "var(--dishui-status-alt-fg)" },
|
|
48
|
+
deleted: { color: "var(--dishui-status-danger-fg)" },
|
|
49
|
+
selector: { color: "var(--dishui-status-success-fg)" },
|
|
50
|
+
"attr-name": { color: "var(--dishui-status-warning-fg)" },
|
|
51
|
+
string: { color: "var(--dishui-status-success-fg)" },
|
|
52
|
+
char: { color: "var(--dishui-status-success-fg)" },
|
|
53
|
+
builtin: { color: "var(--dishui-status-info-fg)" },
|
|
54
|
+
inserted: { color: "var(--dishui-status-success-fg)" },
|
|
55
|
+
operator: { color: "var(--dishui-status-info-fg)" },
|
|
56
|
+
entity: { color: "var(--dishui-status-warning-fg)" },
|
|
57
|
+
url: { color: "var(--dishui-status-info-fg)" },
|
|
58
|
+
atrule: { color: "var(--dishui-status-alt-fg)" },
|
|
59
|
+
"attr-value": { color: "var(--dishui-status-success-fg)" },
|
|
60
|
+
keyword: {
|
|
61
|
+
color: "var(--dishui-status-alt-fg)",
|
|
62
|
+
fontWeight: 600
|
|
63
|
+
},
|
|
64
|
+
function: { color: "var(--dishui-status-info-fg)" },
|
|
65
|
+
"class-name": { color: "var(--dishui-status-warning-fg)" },
|
|
66
|
+
regex: { color: "var(--dishui-status-warning-fg)" },
|
|
67
|
+
important: {
|
|
68
|
+
color: "var(--dishui-status-danger-fg)",
|
|
69
|
+
fontWeight: 600
|
|
70
|
+
},
|
|
71
|
+
variable: { color: "var(--dishui-text-primary)" }
|
|
72
|
+
};
|
|
73
|
+
function s({ code: s, language: c = "text", title: l, showLineNumbers: u = !0, startingLineNumber: d = 1, wrap: f = !1, defaultCollapsed: p = !1, collapsible: m = !1, maxHeight: h, onCopy: g, labels: _, className: v, ...y }) {
|
|
74
|
+
let b = t(), [x, S] = n(p), [C, w] = n("idle"), T = async () => {
|
|
75
|
+
try {
|
|
76
|
+
g ? await g(s) : await navigator.clipboard.writeText(s), w("copied");
|
|
77
|
+
} catch {
|
|
78
|
+
w("failed");
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
return /* @__PURE__ */ i("div", {
|
|
82
|
+
...y,
|
|
83
|
+
className: e("dishui-ai-code-view", f && "dishui-ai-code-view--wrap", v),
|
|
84
|
+
children: [/* @__PURE__ */ i("div", {
|
|
85
|
+
className: "dishui-ai-code-view__header",
|
|
86
|
+
children: [
|
|
87
|
+
/* @__PURE__ */ r("span", {
|
|
88
|
+
className: "dishui-ai-code-view__title",
|
|
89
|
+
children: l ?? c
|
|
90
|
+
}),
|
|
91
|
+
/* @__PURE__ */ r("span", {
|
|
92
|
+
className: "dishui-ai-code-view__language",
|
|
93
|
+
children: c
|
|
94
|
+
}),
|
|
95
|
+
/* @__PURE__ */ r("span", {
|
|
96
|
+
role: "status",
|
|
97
|
+
className: "dishui-ai-code-view__copy-state",
|
|
98
|
+
children: C === "copied" ? _?.copied ?? "Copied" : C === "failed" ? _?.copyFailed ?? "Copy failed" : ""
|
|
99
|
+
}),
|
|
100
|
+
m && /* @__PURE__ */ r("button", {
|
|
101
|
+
type: "button",
|
|
102
|
+
"aria-expanded": !x,
|
|
103
|
+
"aria-controls": b,
|
|
104
|
+
onClick: () => S((e) => !e),
|
|
105
|
+
children: x ? _?.expand ?? "Expand" : _?.collapse ?? "Collapse"
|
|
106
|
+
}),
|
|
107
|
+
/* @__PURE__ */ r("button", {
|
|
108
|
+
type: "button",
|
|
109
|
+
onClick: () => void T(),
|
|
110
|
+
children: _?.copy ?? "Copy"
|
|
111
|
+
})
|
|
112
|
+
]
|
|
113
|
+
}), /* @__PURE__ */ r("div", {
|
|
114
|
+
id: b,
|
|
115
|
+
hidden: x,
|
|
116
|
+
className: "dishui-ai-code-view__scroll",
|
|
117
|
+
style: { maxHeight: h },
|
|
118
|
+
children: /* @__PURE__ */ r(a, {
|
|
119
|
+
language: c,
|
|
120
|
+
style: o,
|
|
121
|
+
showLineNumbers: u,
|
|
122
|
+
startingLineNumber: d,
|
|
123
|
+
wrapLines: !0,
|
|
124
|
+
wrapLongLines: f,
|
|
125
|
+
lineNumberStyle: {
|
|
126
|
+
minWidth: "3.5em",
|
|
127
|
+
paddingInlineEnd: "12px",
|
|
128
|
+
marginInlineEnd: "12px",
|
|
129
|
+
borderInlineEnd: "1px solid var(--dishui-border-hairline)",
|
|
130
|
+
color: "var(--dishui-text-tertiary)",
|
|
131
|
+
fontVariantNumeric: "tabular-nums",
|
|
132
|
+
userSelect: "none"
|
|
133
|
+
},
|
|
134
|
+
customStyle: {
|
|
135
|
+
margin: 0,
|
|
136
|
+
padding: "12px 14px",
|
|
137
|
+
background: "var(--dishui-surface-canvas)",
|
|
138
|
+
overflow: "visible"
|
|
139
|
+
},
|
|
140
|
+
codeTagProps: { "aria-label": `${c} code` },
|
|
141
|
+
children: s
|
|
142
|
+
})
|
|
143
|
+
})]
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
//#endregion
|
|
147
|
+
export { s as default };
|
|
148
|
+
|
|
149
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/ai/CodeView/index.tsx"],"sourcesContent":["import React, { useId, useState } from 'react';\nimport { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';\nimport { cn } from '../../../utils/cn';\nimport './CodeView.css';\n\nexport type CodeViewLabels = {\n copy?: string;\n copied?: string;\n copyFailed?: string;\n expand?: string;\n collapse?: string;\n};\n\nexport type CodeViewProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n code: string;\n /** Prism language name, for example `typescript`, `tsx`, `python` or `json`. */\n language?: string;\n title?: React.ReactNode;\n /** Show a non-selectable line-number gutter. */\n showLineNumbers?: boolean;\n /** Starting value for the first visible line number. */\n startingLineNumber?: number;\n /** Wrap long source lines instead of scrolling horizontally. */\n wrap?: boolean;\n defaultCollapsed?: boolean;\n collapsible?: boolean;\n maxHeight?: string | number;\n onCopy?: (code: string) => void | Promise<void>;\n labels?: CodeViewLabels;\n};\n\nconst syntaxTheme: Record<string, React.CSSProperties> = {\n 'code[class*=\"language-\"]': {\n color: 'var(--dishui-text-primary)',\n background: 'transparent',\n fontFamily: 'var(--dishui-font-mono)',\n fontSize: 'var(--dishui-text-body-sm)',\n lineHeight: 1.65,\n textAlign: 'left',\n whiteSpace: 'pre',\n wordSpacing: 'normal',\n wordBreak: 'normal',\n overflowWrap: 'normal',\n tabSize: 2,\n },\n 'pre[class*=\"language-\"]': {\n color: 'var(--dishui-text-primary)',\n background: 'var(--dishui-surface-canvas)',\n fontFamily: 'var(--dishui-font-mono)',\n fontSize: 'var(--dishui-text-body-sm)',\n lineHeight: 1.65,\n textAlign: 'left',\n whiteSpace: 'pre',\n wordSpacing: 'normal',\n wordBreak: 'normal',\n overflowWrap: 'normal',\n tabSize: 2,\n },\n comment: { color: 'var(--dishui-text-tertiary)', fontStyle: 'italic' },\n prolog: { color: 'var(--dishui-text-tertiary)' },\n doctype: { color: 'var(--dishui-text-tertiary)' },\n cdata: { color: 'var(--dishui-text-tertiary)' },\n punctuation: { color: 'var(--dishui-text-secondary)' },\n property: { color: 'var(--dishui-status-danger-fg)' },\n tag: { color: 'var(--dishui-status-danger-fg)' },\n boolean: { color: 'var(--dishui-status-alt-fg)' },\n number: { color: 'var(--dishui-status-alt-fg)' },\n constant: { color: 'var(--dishui-status-alt-fg)' },\n symbol: { color: 'var(--dishui-status-alt-fg)' },\n deleted: { color: 'var(--dishui-status-danger-fg)' },\n selector: { color: 'var(--dishui-status-success-fg)' },\n 'attr-name': { color: 'var(--dishui-status-warning-fg)' },\n string: { color: 'var(--dishui-status-success-fg)' },\n char: { color: 'var(--dishui-status-success-fg)' },\n builtin: { color: 'var(--dishui-status-info-fg)' },\n inserted: { color: 'var(--dishui-status-success-fg)' },\n operator: { color: 'var(--dishui-status-info-fg)' },\n entity: { color: 'var(--dishui-status-warning-fg)' },\n url: { color: 'var(--dishui-status-info-fg)' },\n atrule: { color: 'var(--dishui-status-alt-fg)' },\n 'attr-value': { color: 'var(--dishui-status-success-fg)' },\n keyword: { color: 'var(--dishui-status-alt-fg)', fontWeight: 600 },\n function: { color: 'var(--dishui-status-info-fg)' },\n 'class-name': { color: 'var(--dishui-status-warning-fg)' },\n regex: { color: 'var(--dishui-status-warning-fg)' },\n important: { color: 'var(--dishui-status-danger-fg)', fontWeight: 600 },\n variable: { color: 'var(--dishui-text-primary)' },\n};\n\n/**\n * Read-only highlighted source view. It follows CodeEditor's read-only visual\n * contract while remaining focused on display, copy, collapse and line numbers.\n */\nexport default function CodeView({\n code,\n language = 'text',\n title,\n showLineNumbers = true,\n startingLineNumber = 1,\n wrap = false,\n defaultCollapsed = false,\n collapsible = false,\n maxHeight,\n onCopy,\n labels,\n className,\n ...rest\n}: CodeViewProps) {\n const id = useId();\n const [collapsed, setCollapsed] = useState(defaultCollapsed);\n const [copyState, setCopyState] = useState<'idle' | 'copied' | 'failed'>('idle');\n\n const copy = async () => {\n try {\n if (onCopy) await onCopy(code);\n else await navigator.clipboard.writeText(code);\n setCopyState('copied');\n } catch {\n setCopyState('failed');\n }\n };\n\n return (\n <div {...rest} className={cn('dishui-ai-code-view', wrap && 'dishui-ai-code-view--wrap', className)}>\n <div className=\"dishui-ai-code-view__header\">\n <span className=\"dishui-ai-code-view__title\">{title ?? language}</span>\n <span className=\"dishui-ai-code-view__language\">{language}</span>\n <span role=\"status\" className=\"dishui-ai-code-view__copy-state\">\n {copyState === 'copied' ? labels?.copied ?? 'Copied' : copyState === 'failed' ? labels?.copyFailed ?? 'Copy failed' : ''}\n </span>\n {collapsible && (\n <button type=\"button\" aria-expanded={!collapsed} aria-controls={id} onClick={() => setCollapsed(value => !value)}>\n {collapsed ? labels?.expand ?? 'Expand' : labels?.collapse ?? 'Collapse'}\n </button>\n )}\n <button type=\"button\" onClick={() => void copy()}>{labels?.copy ?? 'Copy'}</button>\n </div>\n <div id={id} hidden={collapsed} className=\"dishui-ai-code-view__scroll\" style={{ maxHeight }}>\n <SyntaxHighlighter\n language={language}\n style={syntaxTheme}\n showLineNumbers={showLineNumbers}\n startingLineNumber={startingLineNumber}\n wrapLines\n wrapLongLines={wrap}\n lineNumberStyle={{\n minWidth: '3.5em',\n paddingInlineEnd: '12px',\n marginInlineEnd: '12px',\n borderInlineEnd: '1px solid var(--dishui-border-hairline)',\n color: 'var(--dishui-text-tertiary)',\n fontVariantNumeric: 'tabular-nums',\n userSelect: 'none',\n }}\n customStyle={{ margin: 0, padding: '12px 14px', background: 'var(--dishui-surface-canvas)', overflow: 'visible' }}\n codeTagProps={{ 'aria-label': `${language} code` }}\n >\n {code}\n </SyntaxHighlighter>\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type CommandSearchItem = {
|
|
3
|
+
id: string;
|
|
4
|
+
label: string;
|
|
5
|
+
description?: string;
|
|
6
|
+
icon?: React.ReactNode;
|
|
7
|
+
group?: string;
|
|
8
|
+
keywords?: string[];
|
|
9
|
+
shortcut?: string;
|
|
10
|
+
onSelect?: () => void;
|
|
11
|
+
};
|
|
12
|
+
export type CommandSearchProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onSubmit' | 'children'> & {
|
|
13
|
+
items: CommandSearchItem[];
|
|
14
|
+
query?: string;
|
|
15
|
+
defaultQuery?: string;
|
|
16
|
+
onQueryChange?: (query: string) => void;
|
|
17
|
+
onSelect?: (item: CommandSearchItem) => void;
|
|
18
|
+
/** Enter with nothing highlighted, or on an empty result set. */
|
|
19
|
+
onSubmit?: (query: string) => void;
|
|
20
|
+
placeholder?: string;
|
|
21
|
+
/** Custom predicate; default is a case-insensitive match on label / description / keywords. */
|
|
22
|
+
filter?: (item: CommandSearchItem, query: string) => boolean;
|
|
23
|
+
/** Wrap matched substrings in `<mark>`. */
|
|
24
|
+
highlightMatches?: boolean;
|
|
25
|
+
emptyState?: React.ReactNode | ((query: string) => React.ReactNode);
|
|
26
|
+
maxVisible?: number;
|
|
27
|
+
autoFocus?: boolean;
|
|
28
|
+
/** Renders as an in-page panel (not a modal). */
|
|
29
|
+
inline?: boolean;
|
|
30
|
+
/** Show a small indeterminate indicator in the input. */
|
|
31
|
+
loading?: boolean;
|
|
32
|
+
/** Accessible name for the input. */
|
|
33
|
+
label?: string;
|
|
34
|
+
};
|
|
35
|
+
/**
|
|
36
|
+
* Command search: an input over a filtered, grouped listbox with keyboard
|
|
37
|
+
* navigation and an empty state that hands the query to the agent.
|
|
38
|
+
*/
|
|
39
|
+
export default function CommandSearch({ items, query, defaultQuery, onQueryChange, onSelect, onSubmit, placeholder, filter, highlightMatches, emptyState, maxVisible, autoFocus, inline, loading, label, className, ...rest }: CommandSearchProps): React.JSX.Element;
|