@workerdeck/ui 0.6.0
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/LICENSE +21 -0
- package/README.md +74 -0
- package/build/index.d.mts +927 -0
- package/build/index.mjs +5236 -0
- package/build/index.mjs.map +1 -0
- package/package.json +73 -0
- package/src/components/agent/Composer.tsx +139 -0
- package/src/components/agent/Conversation.tsx +59 -0
- package/src/components/agent/FileCard.tsx +50 -0
- package/src/components/agent/Loader.tsx +21 -0
- package/src/components/agent/Message.tsx +44 -0
- package/src/components/agent/ModelSelect.tsx +87 -0
- package/src/components/agent/PermissionModeSelect.tsx +94 -0
- package/src/components/agent/PermissionPrompt.tsx +52 -0
- package/src/components/agent/QuestionPrompt.tsx +193 -0
- package/src/components/agent/Reasoning.tsx +58 -0
- package/src/components/agent/Response.tsx +31 -0
- package/src/components/agent/SessionList.tsx +93 -0
- package/src/components/agent/SessionPanel.tsx +149 -0
- package/src/components/agent/StatusBar.tsx +140 -0
- package/src/components/agent/ToolCallCard.tsx +94 -0
- package/src/components/agent/Transcript.tsx +114 -0
- package/src/components/agent/status.ts +16 -0
- package/src/components/prompt-area/animated-placeholder.tsx +42 -0
- package/src/components/prompt-area/clipboard-helpers.ts +206 -0
- package/src/components/prompt-area/cursor-helpers.ts +244 -0
- package/src/components/prompt-area/dom-helpers.ts +721 -0
- package/src/components/prompt-area/file-strip.tsx +250 -0
- package/src/components/prompt-area/html-to-markdown.ts +278 -0
- package/src/components/prompt-area/image-strip.tsx +49 -0
- package/src/components/prompt-area/index.ts +23 -0
- package/src/components/prompt-area/prompt-area-engine.ts +705 -0
- package/src/components/prompt-area/prompt-area-list-ops.ts +499 -0
- package/src/components/prompt-area/prompt-area.tsx +375 -0
- package/src/components/prompt-area/remove-button.tsx +37 -0
- package/src/components/prompt-area/segment-helpers.ts +62 -0
- package/src/components/prompt-area/trigger-popover.tsx +139 -0
- package/src/components/prompt-area/trigger-presets.ts +143 -0
- package/src/components/prompt-area/types.ts +360 -0
- package/src/components/prompt-area/use-markdown-mode.ts +113 -0
- package/src/components/prompt-area/use-prompt-area-events.ts +470 -0
- package/src/components/prompt-area/use-prompt-area-state.ts +131 -0
- package/src/components/prompt-area/use-prompt-area.ts +1507 -0
- package/src/components/prompt-area/use-trigger-search.ts +115 -0
- package/src/components/ui/AlertDialog.tsx +56 -0
- package/src/components/ui/Badge.tsx +42 -0
- package/src/components/ui/Button.tsx +47 -0
- package/src/components/ui/Card.tsx +29 -0
- package/src/components/ui/CodeBlock.tsx +31 -0
- package/src/components/ui/CopyButton.tsx +28 -0
- package/src/components/ui/Input.tsx +20 -0
- package/src/components/ui/ProgressRing.tsx +49 -0
- package/src/components/ui/Select.tsx +80 -0
- package/src/components/ui/Sonner.tsx +22 -0
- package/src/components/ui/Spinner.tsx +6 -0
- package/src/components/ui/Textarea.tsx +21 -0
- package/src/components/ui/Tooltip.tsx +34 -0
- package/src/index.ts +99 -0
- package/src/lib/format.ts +67 -0
- package/src/lib/utils.ts +33 -0
- package/src/styles/theme.css +413 -0
|
@@ -0,0 +1,927 @@
|
|
|
1
|
+
import * as _$react from "react";
|
|
2
|
+
import { ButtonHTMLAttributes, FunctionComponent, HTMLAttributes, InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from "react";
|
|
3
|
+
import { VariantProps } from "class-variance-authority";
|
|
4
|
+
import { ClassValue } from "clsx";
|
|
5
|
+
import * as _$_base_ui_react_select0 from "@base-ui/react/select";
|
|
6
|
+
import { Select as Select$1 } from "@base-ui/react/select";
|
|
7
|
+
import * as _$_base_ui_react_alert_dialog0 from "@base-ui/react/alert-dialog";
|
|
8
|
+
import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
|
|
9
|
+
import * as _$_base_ui_react_tooltip0 from "@base-ui/react/tooltip";
|
|
10
|
+
import { Tooltip } from "@base-ui/react/tooltip";
|
|
11
|
+
import { toast } from "sonner";
|
|
12
|
+
import { ModelOption, PermissionMode, PermissionRequest, QuestionBehavior, SessionInfo, SessionStatus, SlashCommandInfo, UserQuestion } from "@workerdeck/protocol";
|
|
13
|
+
import { TranscriptItem, TranscriptState } from "@workerdeck/react";
|
|
14
|
+
import * as _$class_variance_authority_types0 from "class-variance-authority/types";
|
|
15
|
+
import { WorkerDeckClient } from "@workerdeck/client";
|
|
16
|
+
|
|
17
|
+
//#region src/components/ui/Button.d.ts
|
|
18
|
+
declare const buttonVariants: (props?: ({
|
|
19
|
+
variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
|
|
20
|
+
size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-sm" | null | undefined;
|
|
21
|
+
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
22
|
+
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {}
|
|
23
|
+
declare const Button: _$react.ForwardRefExoticComponent<ButtonProps & _$react.RefAttributes<HTMLButtonElement>>;
|
|
24
|
+
//#endregion
|
|
25
|
+
//#region src/components/ui/Badge.d.ts
|
|
26
|
+
declare const badgeVariants: (props?: ({
|
|
27
|
+
variant?: "neutral" | "accent" | "success" | "warning" | "danger" | "info" | null | undefined;
|
|
28
|
+
mono?: boolean | null | undefined;
|
|
29
|
+
} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
|
|
30
|
+
interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
|
|
31
|
+
/** Render a leading status dot in the variant's color. */
|
|
32
|
+
dot?: boolean;
|
|
33
|
+
}
|
|
34
|
+
declare function Badge({
|
|
35
|
+
className,
|
|
36
|
+
variant,
|
|
37
|
+
mono,
|
|
38
|
+
dot,
|
|
39
|
+
children,
|
|
40
|
+
...props
|
|
41
|
+
}: BadgeProps): _$react.JSX.Element;
|
|
42
|
+
//#endregion
|
|
43
|
+
//#region src/components/ui/Card.d.ts
|
|
44
|
+
declare function Card({
|
|
45
|
+
className,
|
|
46
|
+
...props
|
|
47
|
+
}: HTMLAttributes<HTMLDivElement>): _$react.JSX.Element;
|
|
48
|
+
declare function CardHeader({
|
|
49
|
+
className,
|
|
50
|
+
...props
|
|
51
|
+
}: HTMLAttributes<HTMLDivElement>): _$react.JSX.Element;
|
|
52
|
+
declare function CardTitle({
|
|
53
|
+
className,
|
|
54
|
+
...props
|
|
55
|
+
}: HTMLAttributes<HTMLHeadingElement>): _$react.JSX.Element;
|
|
56
|
+
declare function CardContent({
|
|
57
|
+
className,
|
|
58
|
+
...props
|
|
59
|
+
}: HTMLAttributes<HTMLDivElement>): _$react.JSX.Element;
|
|
60
|
+
//#endregion
|
|
61
|
+
//#region src/components/ui/Input.d.ts
|
|
62
|
+
declare const Input: _$react.ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & _$react.RefAttributes<HTMLInputElement>>;
|
|
63
|
+
//#endregion
|
|
64
|
+
//#region src/components/ui/Textarea.d.ts
|
|
65
|
+
declare const Textarea: _$react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & _$react.RefAttributes<HTMLTextAreaElement>>;
|
|
66
|
+
//#endregion
|
|
67
|
+
//#region src/components/ui/Select.d.ts
|
|
68
|
+
declare const Select: typeof Select$1.Root;
|
|
69
|
+
declare const SelectValue: _$react.ForwardRefExoticComponent<Omit<_$_base_ui_react_select0.SelectValueProps, "ref"> & _$react.RefAttributes<HTMLSpanElement>>;
|
|
70
|
+
declare const SelectItemText: _$react.NamedExoticComponent<Omit<_$_base_ui_react_select0.SelectItemTextProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
|
|
71
|
+
declare const SelectTrigger: FunctionComponent<Select$1.Trigger.Props>;
|
|
72
|
+
declare const SelectContent: FunctionComponent<Select$1.Popup.Props & Pick<Select$1.Positioner.Props, 'align' | 'alignItemWithTrigger' | 'side' | 'sideOffset'>>;
|
|
73
|
+
declare const SelectItem: FunctionComponent<Select$1.Item.Props>;
|
|
74
|
+
//#endregion
|
|
75
|
+
//#region src/components/ui/AlertDialog.d.ts
|
|
76
|
+
declare const AlertDialog: typeof AlertDialog$1.Root;
|
|
77
|
+
declare const AlertDialogTrigger: AlertDialog$1.Trigger;
|
|
78
|
+
declare const AlertDialogClose: _$react.ForwardRefExoticComponent<Omit<_$_base_ui_react_alert_dialog0.AlertDialogCloseProps, "ref"> & _$react.RefAttributes<HTMLButtonElement>>;
|
|
79
|
+
declare const AlertDialogContent: FunctionComponent<AlertDialog$1.Popup.Props>;
|
|
80
|
+
declare const AlertDialogTitle: FunctionComponent<AlertDialog$1.Title.Props>;
|
|
81
|
+
declare const AlertDialogDescription: FunctionComponent<AlertDialog$1.Description.Props>;
|
|
82
|
+
//#endregion
|
|
83
|
+
//#region src/components/ui/Tooltip.d.ts
|
|
84
|
+
declare const TooltipProvider: _$react.FC<_$_base_ui_react_tooltip0.TooltipProviderProps>;
|
|
85
|
+
declare const TooltipContent: FunctionComponent<Tooltip.Popup.Props & Pick<Tooltip.Positioner.Props, 'side' | 'sideOffset'>>;
|
|
86
|
+
/** Convenience wrapper: <Tip content="..."><Button/></Tip> */
|
|
87
|
+
declare function Tip({
|
|
88
|
+
content,
|
|
89
|
+
children
|
|
90
|
+
}: {
|
|
91
|
+
content: ReactNode;
|
|
92
|
+
children: ReactNode;
|
|
93
|
+
}): _$react.JSX.Element;
|
|
94
|
+
//#endregion
|
|
95
|
+
//#region src/components/ui/Sonner.d.ts
|
|
96
|
+
/** Token-themed toaster; relies on the [data-theme] swap, so no `theme` prop needed. */
|
|
97
|
+
declare function Toaster(): _$react.JSX.Element;
|
|
98
|
+
//#endregion
|
|
99
|
+
//#region src/components/ui/CopyButton.d.ts
|
|
100
|
+
interface CopyButtonProps extends Omit<ButtonProps, 'onClick' | 'children'> {
|
|
101
|
+
value: string;
|
|
102
|
+
}
|
|
103
|
+
declare function CopyButton({
|
|
104
|
+
value,
|
|
105
|
+
className,
|
|
106
|
+
variant,
|
|
107
|
+
size,
|
|
108
|
+
...props
|
|
109
|
+
}: CopyButtonProps): _$react.JSX.Element;
|
|
110
|
+
//#endregion
|
|
111
|
+
//#region src/components/ui/Spinner.d.ts
|
|
112
|
+
declare function Spinner({
|
|
113
|
+
className
|
|
114
|
+
}: {
|
|
115
|
+
className?: string;
|
|
116
|
+
}): _$react.JSX.Element;
|
|
117
|
+
//#endregion
|
|
118
|
+
//#region src/components/ui/CodeBlock.d.ts
|
|
119
|
+
interface CodeBlockProps {
|
|
120
|
+
code: string;
|
|
121
|
+
/** Header label, e.g. a language or "Parameters". */
|
|
122
|
+
label?: ReactNode;
|
|
123
|
+
copyable?: boolean;
|
|
124
|
+
className?: string;
|
|
125
|
+
}
|
|
126
|
+
/** Plain (unhighlighted) code panel for structured data like tool inputs. Markdown code
|
|
127
|
+
* inside assistant responses is highlighted by <Response> instead. */
|
|
128
|
+
declare function CodeBlock({
|
|
129
|
+
code,
|
|
130
|
+
label,
|
|
131
|
+
copyable,
|
|
132
|
+
className
|
|
133
|
+
}: CodeBlockProps): _$react.JSX.Element;
|
|
134
|
+
//#endregion
|
|
135
|
+
//#region src/components/ui/ProgressRing.d.ts
|
|
136
|
+
interface ProgressRingProps {
|
|
137
|
+
/** Filled share, 0–100 (clamped). */
|
|
138
|
+
value: number;
|
|
139
|
+
/** Outer diameter in px. */
|
|
140
|
+
size?: number;
|
|
141
|
+
strokeWidth?: number;
|
|
142
|
+
className?: string;
|
|
143
|
+
}
|
|
144
|
+
/** Tiny SVG progress circle; stroke color comes from `currentColor` so callers set it
|
|
145
|
+
* via text color classes (e.g. warning/danger past thresholds). */
|
|
146
|
+
declare function ProgressRing({
|
|
147
|
+
value,
|
|
148
|
+
size,
|
|
149
|
+
strokeWidth,
|
|
150
|
+
className
|
|
151
|
+
}: ProgressRingProps): _$react.JSX.Element;
|
|
152
|
+
//#endregion
|
|
153
|
+
//#region src/components/prompt-area/types.d.ts
|
|
154
|
+
/**
|
|
155
|
+
* PromptArea component types
|
|
156
|
+
*
|
|
157
|
+
* A lightweight contentEditable-based text input that supports:
|
|
158
|
+
* - Trigger characters (/, @, #) that activate handlers
|
|
159
|
+
* - Immutable chips for resolved mentions/commands
|
|
160
|
+
* - Configurable trigger behavior (dropdown vs callback)
|
|
161
|
+
* - Simple inline markdown rendering
|
|
162
|
+
*/
|
|
163
|
+
/**
|
|
164
|
+
* A segment of content within the editable text.
|
|
165
|
+
* The document model is an ordered array of these segments.
|
|
166
|
+
*/
|
|
167
|
+
type TextSegment = {
|
|
168
|
+
type: 'text';
|
|
169
|
+
text: string;
|
|
170
|
+
};
|
|
171
|
+
type ChipSegment = {
|
|
172
|
+
type: 'chip'; /** The trigger character that created this chip (e.g., '@', '#') */
|
|
173
|
+
trigger: string; /** The resolved value/ID (e.g., user ID, file ID) */
|
|
174
|
+
value: string; /** The display text shown in the chip */
|
|
175
|
+
displayText: string; /** Optional data payload attached to the chip */
|
|
176
|
+
data?: unknown;
|
|
177
|
+
/**
|
|
178
|
+
* True when this chip was auto-created by pressing space (resolveOnSpace).
|
|
179
|
+
* Backspace on an auto-resolved chip reverts it to plain text instead of deleting.
|
|
180
|
+
*/
|
|
181
|
+
autoResolved?: boolean;
|
|
182
|
+
};
|
|
183
|
+
type Segment = TextSegment | ChipSegment;
|
|
184
|
+
/**
|
|
185
|
+
* Determines where a trigger character is valid.
|
|
186
|
+
* - 'start': Only valid at the very start of input or after a newline (e.g., slash commands)
|
|
187
|
+
* - 'any': Valid after any whitespace boundary (e.g., @mentions)
|
|
188
|
+
*/
|
|
189
|
+
type TriggerPosition = 'start' | 'any';
|
|
190
|
+
/**
|
|
191
|
+
* Defines how a trigger behaves when activated.
|
|
192
|
+
* - 'dropdown': Shows a popover with suggestions from `onSearch`
|
|
193
|
+
* - 'callback': Inserts the char, then fires `onActivate` with the typed query
|
|
194
|
+
* - 'launch': Fires `onActivate` on keydown and SUPPRESSES the char (it never
|
|
195
|
+
* enters the editor) — for opening an external surface (dialog, palette) where
|
|
196
|
+
* no in-editor text should appear. Honors `position` like the other modes.
|
|
197
|
+
*/
|
|
198
|
+
type TriggerMode = 'dropdown' | 'callback' | 'launch';
|
|
199
|
+
/**
|
|
200
|
+
* Visual style for rendered chips.
|
|
201
|
+
* - 'pill': Button-like pill with background color, padding, border-radius (default)
|
|
202
|
+
* - 'inline': Bold inline text that flows naturally with surrounding content
|
|
203
|
+
*/
|
|
204
|
+
type ChipStyle = 'pill' | 'inline';
|
|
205
|
+
/**
|
|
206
|
+
* A suggestion item shown in the trigger dropdown.
|
|
207
|
+
*/
|
|
208
|
+
type TriggerSuggestion = {
|
|
209
|
+
/** Unique value/ID for this suggestion */value: string; /** Display label shown in the dropdown */
|
|
210
|
+
label: string; /** Optional description shown below the label */
|
|
211
|
+
description?: string; /** Optional icon element rendered before the label */
|
|
212
|
+
icon?: React.ReactNode; /** Optional arbitrary data passed through on selection */
|
|
213
|
+
data?: unknown;
|
|
214
|
+
};
|
|
215
|
+
/**
|
|
216
|
+
* Configuration for a trigger character.
|
|
217
|
+
*/
|
|
218
|
+
type TriggerConfig = {
|
|
219
|
+
/** The trigger character (e.g., '/', '@', '#') */char: string; /** Where this trigger is valid */
|
|
220
|
+
position: TriggerPosition; /** How this trigger behaves */
|
|
221
|
+
mode: TriggerMode;
|
|
222
|
+
/**
|
|
223
|
+
* For 'dropdown' mode: called with the current query to fetch suggestions.
|
|
224
|
+
* Should return a list of suggestions to display.
|
|
225
|
+
*
|
|
226
|
+
* Receives an options object with an `AbortSignal` that is aborted when a
|
|
227
|
+
* newer search supersedes this one. Pass it to `fetch()` or other async
|
|
228
|
+
* APIs to cancel in-flight work automatically.
|
|
229
|
+
*/
|
|
230
|
+
onSearch?: (query: string, options: {
|
|
231
|
+
signal: AbortSignal;
|
|
232
|
+
}) => TriggerSuggestion[] | Promise<TriggerSuggestion[]>;
|
|
233
|
+
/**
|
|
234
|
+
* For 'dropdown' mode: called when a suggestion is selected.
|
|
235
|
+
* Return the display text for the chip, or void to use `suggestion.label`.
|
|
236
|
+
*/
|
|
237
|
+
onSelect?: (suggestion: TriggerSuggestion) => string | void;
|
|
238
|
+
/**
|
|
239
|
+
* For 'callback' and 'launch' modes: called when the trigger is activated.
|
|
240
|
+
* Receives the full input text and cursor position. For 'launch' it fires on
|
|
241
|
+
* keydown (before the char would insert); for 'callback' it fires after.
|
|
242
|
+
*/
|
|
243
|
+
onActivate?: (context: TriggerActivateContext) => void;
|
|
244
|
+
/**
|
|
245
|
+
* When true, pressing space while this trigger is active (with a non-empty query)
|
|
246
|
+
* auto-resolves the typed text into a chip without selecting from the dropdown.
|
|
247
|
+
* The auto-resolved chip can be reverted to plain text with backspace.
|
|
248
|
+
* Useful for free-form tags (e.g., #hashtag).
|
|
249
|
+
*/
|
|
250
|
+
resolveOnSpace?: boolean;
|
|
251
|
+
/**
|
|
252
|
+
* For 'dropdown' mode: when true, clicking a chip created by this trigger
|
|
253
|
+
* reopens the suggestion dropdown anchored to the chip, and selecting a
|
|
254
|
+
* suggestion replaces the chip in place. The empty-query suggestions are
|
|
255
|
+
* shown with the chip's current value preselected. `onChipClick` still
|
|
256
|
+
* fires, so side effects (analytics, etc.) keep working.
|
|
257
|
+
*/
|
|
258
|
+
reopenOnChipClick?: boolean;
|
|
259
|
+
/**
|
|
260
|
+
* Visual style for chips created by this trigger.
|
|
261
|
+
* - 'pill' (default): Button-like pill with background, padding, border-radius
|
|
262
|
+
* - 'inline': Bold inline text without pill styling
|
|
263
|
+
*/
|
|
264
|
+
chipStyle?: ChipStyle; /** CSS class name(s) applied to chips created by this trigger */
|
|
265
|
+
chipClassName?: string; /** Label used for accessibility (e.g., "mention", "command") */
|
|
266
|
+
accessibilityLabel?: string;
|
|
267
|
+
/**
|
|
268
|
+
* Debounce delay in milliseconds before calling `onSearch`.
|
|
269
|
+
* Defaults to 0 (immediate). The initial empty-query search always fires
|
|
270
|
+
* immediately regardless of this setting so the dropdown appears instantly.
|
|
271
|
+
*/
|
|
272
|
+
searchDebounceMs?: number;
|
|
273
|
+
/**
|
|
274
|
+
* Called when `onSearch` rejects or throws (non-abort errors only).
|
|
275
|
+
* Use this to log errors or show toast notifications.
|
|
276
|
+
*/
|
|
277
|
+
onSearchError?: (error: unknown) => void;
|
|
278
|
+
/**
|
|
279
|
+
* Message shown in the dropdown when `onSearch` returns an empty array.
|
|
280
|
+
* If omitted, the popover hides when there are no results (current behavior).
|
|
281
|
+
*/
|
|
282
|
+
emptyMessage?: string;
|
|
283
|
+
};
|
|
284
|
+
/**
|
|
285
|
+
* Context passed to callback-mode trigger handlers.
|
|
286
|
+
*/
|
|
287
|
+
type TriggerActivateContext = {
|
|
288
|
+
/** The full plain text content at the time of activation */text: string; /** The cursor offset position */
|
|
289
|
+
cursorPosition: number; /** Function to insert a chip at the current cursor position */
|
|
290
|
+
insertChip: (chip: Omit<ChipSegment, 'type'>) => void;
|
|
291
|
+
};
|
|
292
|
+
/**
|
|
293
|
+
* An image attachment displayed in the prompt area.
|
|
294
|
+
* State is managed externally by the parent component.
|
|
295
|
+
*/
|
|
296
|
+
type PromptAreaImage = {
|
|
297
|
+
/** Unique identifier for this image */id: string; /** URL to display (CDN URL or temporary blob URL for preview) */
|
|
298
|
+
url: string; /** Optional alt text for accessibility */
|
|
299
|
+
alt?: string; /** When true, shows a loading indicator over the thumbnail */
|
|
300
|
+
loading?: boolean;
|
|
301
|
+
};
|
|
302
|
+
/**
|
|
303
|
+
* A file attachment displayed in the prompt area.
|
|
304
|
+
* State is managed externally by the parent component.
|
|
305
|
+
*/
|
|
306
|
+
type PromptAreaFile = {
|
|
307
|
+
/** Unique identifier for this file */id: string; /** Display filename (e.g., "report.pdf") */
|
|
308
|
+
name: string; /** File size in bytes */
|
|
309
|
+
size?: number; /** MIME type (used for icon selection, e.g., "application/pdf") */
|
|
310
|
+
type?: string; /** When true, shows a loading indicator over the file card */
|
|
311
|
+
loading?: boolean;
|
|
312
|
+
};
|
|
313
|
+
/**
|
|
314
|
+
* Props for the PromptArea component.
|
|
315
|
+
*/
|
|
316
|
+
type PromptAreaProps = {
|
|
317
|
+
/** The document segments (controlled) */value: Segment[]; /** Called when the content changes */
|
|
318
|
+
onChange: (segments: Segment[]) => void; /** Trigger configurations */
|
|
319
|
+
triggers?: TriggerConfig[]; /** Placeholder text when empty. Pass an array of strings to animate between them. */
|
|
320
|
+
placeholder?: string | string[]; /** Additional CSS class for the container */
|
|
321
|
+
className?: string; /** Whether the input is disabled */
|
|
322
|
+
disabled?: boolean; /** Whether to render simple inline markdown (bold, italic, URLs, lists) */
|
|
323
|
+
markdown?: boolean;
|
|
324
|
+
/**
|
|
325
|
+
* When markdown is on, the editor rewrites typed list markers (`- ` / `* `)
|
|
326
|
+
* to a `•` bullet glyph in the model. Set to `false` to keep the original
|
|
327
|
+
* marker in the value/`onChange` text — needed when a host renders the output
|
|
328
|
+
* as real markdown, where `•` is not a valid list marker. Default `true`.
|
|
329
|
+
*/
|
|
330
|
+
normalizeBullets?: boolean; /** Called when Enter is pressed (without Shift) */
|
|
331
|
+
onSubmit?: (segments: Segment[]) => void; /** Called when Escape is pressed */
|
|
332
|
+
onEscape?: () => void; /** Called when a chip element is clicked. Receives the chip's segment data. */
|
|
333
|
+
onChipClick?: (chip: ChipSegment) => void; /** Called when a new chip is added (dropdown selection, auto-resolve, paste, or imperative insert) */
|
|
334
|
+
onChipAdd?: (chip: ChipSegment) => void; /** Called when a chip is deleted (backspace or forward delete) */
|
|
335
|
+
onChipDelete?: (chip: ChipSegment) => void; /** Called when a URL link is clicked. Receives the URL string. */
|
|
336
|
+
onLinkClick?: (url: string) => void; /** Called after content is pasted. Receives the resulting segments and the paste source. */
|
|
337
|
+
onPaste?: (data: {
|
|
338
|
+
segments: Segment[];
|
|
339
|
+
source: 'internal' | 'external';
|
|
340
|
+
}) => void; /** Called after an undo operation. Receives the restored segments. */
|
|
341
|
+
onUndo?: (segments: Segment[]) => void; /** Called after a redo operation. Receives the restored segments. */
|
|
342
|
+
onRedo?: (segments: Segment[]) => void; /** Minimum height in pixels */
|
|
343
|
+
minHeight?: number; /** Maximum height in pixels */
|
|
344
|
+
maxHeight?: number;
|
|
345
|
+
/**
|
|
346
|
+
* Maximum number of plain-text characters allowed, enforced on typed input:
|
|
347
|
+
* once the editor exceeds the cap it is truncated back to this length, with
|
|
348
|
+
* the caret kept where the edit happened. Chips count as their
|
|
349
|
+
* `trigger + displayText` length.
|
|
350
|
+
*
|
|
351
|
+
* The cap applies to typing only. Paste is not capped — divert it via
|
|
352
|
+
* `onRawPaste` if needed — and the imperative `setText` / `appendText` also
|
|
353
|
+
* bypass it, so a programmatic write can exceed the cap until the next
|
|
354
|
+
* keystroke truncates.
|
|
355
|
+
*/
|
|
356
|
+
maxLength?: number; /** Auto-focus on mount */
|
|
357
|
+
autoFocus?: boolean; /** When true, the area auto-grows to fit content on focus and shrinks on blur */
|
|
358
|
+
autoGrow?: boolean; /** Accessible label for the input */
|
|
359
|
+
'aria-label'?: string; /** data-test-id for e2e testing */
|
|
360
|
+
'data-test-id'?: string; /** Array of image attachments to display */
|
|
361
|
+
images?: PromptAreaImage[]; /** Where to render the image strip relative to the text area. Defaults to 'above'. */
|
|
362
|
+
imagePosition?: 'above' | 'below'; /** Called when the user pastes an image from clipboard. Receives the File object. */
|
|
363
|
+
onImagePaste?: (file: File) => void; /** Called when the user clicks the remove button on an image */
|
|
364
|
+
onImageRemove?: (image: PromptAreaImage) => void; /** Called when the user clicks an image thumbnail */
|
|
365
|
+
onImageClick?: (image: PromptAreaImage) => void; /** Array of file attachments to display */
|
|
366
|
+
files?: PromptAreaFile[]; /** Where to render the file strip relative to the text area. Defaults to 'above'. */
|
|
367
|
+
filePosition?: 'above' | 'below'; /** Called when the user clicks the remove button on a file */
|
|
368
|
+
onFileRemove?: (file: PromptAreaFile) => void; /** Called when the user clicks a file attachment */
|
|
369
|
+
onFileClick?: (file: PromptAreaFile) => void;
|
|
370
|
+
/**
|
|
371
|
+
* Called on keydown before PromptArea's own handling. Call `preventDefault()`
|
|
372
|
+
* to suppress the built-in behaviour (submit, trigger navigation, etc.) for
|
|
373
|
+
* that key and take over entirely.
|
|
374
|
+
*/
|
|
375
|
+
onKeyDown?: (e: React.KeyboardEvent<HTMLDivElement>) => void;
|
|
376
|
+
/**
|
|
377
|
+
* Called on blur with the native FocusEvent, so consumers can inspect
|
|
378
|
+
* `relatedTarget` (e.g. to retain focus when a composer toolbar is clicked).
|
|
379
|
+
*/
|
|
380
|
+
onBlur?: (e: React.FocusEvent<HTMLDivElement>) => void;
|
|
381
|
+
/**
|
|
382
|
+
* Called at the start of a paste, before PromptArea reads the clipboard. Call
|
|
383
|
+
* `preventDefault()` to take over the paste completely — e.g. to divert large
|
|
384
|
+
* text or non-image files to an upload pipeline. The built-in segment/image
|
|
385
|
+
* paste handling is skipped when the event's default is prevented.
|
|
386
|
+
*/
|
|
387
|
+
onRawPaste?: (e: React.ClipboardEvent<HTMLDivElement>) => void;
|
|
388
|
+
/**
|
|
389
|
+
* Whether pressing Enter (without Shift) submits. Defaults to true. Set false
|
|
390
|
+
* to make Enter insert a newline instead (e.g. on touch devices where submit
|
|
391
|
+
* is a dedicated button).
|
|
392
|
+
*/
|
|
393
|
+
submitOnEnter?: boolean; /** Forwarded to the editable element. */
|
|
394
|
+
spellCheck?: boolean; /** Forwarded to the editable element as `aria-describedby`. */
|
|
395
|
+
'aria-describedby'?: string;
|
|
396
|
+
};
|
|
397
|
+
/**
|
|
398
|
+
* Ref handle exposed by PromptArea via useImperativeHandle.
|
|
399
|
+
*/
|
|
400
|
+
type PromptAreaHandle = {
|
|
401
|
+
/** Focus the editable area */focus: () => void; /** Blur the editable area */
|
|
402
|
+
blur: () => void; /** Insert a chip at the current cursor position */
|
|
403
|
+
insertChip: (chip: Omit<ChipSegment, 'type'>) => void; /** Get the current plain text (without chip markup) */
|
|
404
|
+
getPlainText: () => string; /** Clear all content */
|
|
405
|
+
clear: () => void;
|
|
406
|
+
/**
|
|
407
|
+
* Replace all content with plain text (chips dropped), caret moved to the
|
|
408
|
+
* end. Not capped by `maxLength` (see its docs); undoable.
|
|
409
|
+
*/
|
|
410
|
+
setText: (text: string) => void;
|
|
411
|
+
/**
|
|
412
|
+
* Append plain text at the end (existing chips preserved), caret moved to the
|
|
413
|
+
* end. Not capped by `maxLength` (see its docs); undoable.
|
|
414
|
+
*/
|
|
415
|
+
appendText: (text: string) => void; /** Caret offset in plain-text characters, or null when unavailable. */
|
|
416
|
+
getCursorPosition: () => number | null; /** Move the caret to a plain-text offset. */
|
|
417
|
+
setCursorPosition: (offset: number) => void; /** Move the caret to the end of the content. */
|
|
418
|
+
setCursorToEnd: () => void; /** Current selection as plain-text offsets, or null when there is none. */
|
|
419
|
+
getSelection: () => {
|
|
420
|
+
start: number;
|
|
421
|
+
end: number;
|
|
422
|
+
} | null; /** Set the selection between two plain-text offsets. */
|
|
423
|
+
setSelection: (start: number, end: number) => void;
|
|
424
|
+
};
|
|
425
|
+
//#endregion
|
|
426
|
+
//#region src/components/prompt-area/prompt-area.d.ts
|
|
427
|
+
/**
|
|
428
|
+
* PromptArea - A lightweight rich text input with trigger support.
|
|
429
|
+
*
|
|
430
|
+
* Uses contentEditable to support inline chips (immutable pills) for
|
|
431
|
+
* mentions, commands, and other triggered tokens. Each trigger character
|
|
432
|
+
* can be configured to show a dropdown or fire a callback.
|
|
433
|
+
*
|
|
434
|
+
* @example
|
|
435
|
+
* ```tsx
|
|
436
|
+
* const [segments, setSegments] = useState<Segment[]>([])
|
|
437
|
+
*
|
|
438
|
+
* <PromptArea
|
|
439
|
+
* value={segments}
|
|
440
|
+
* onChange={setSegments}
|
|
441
|
+
* triggers={[
|
|
442
|
+
* { char: '@', position: 'any', mode: 'dropdown', onSearch: searchUsers },
|
|
443
|
+
* { char: '/', position: 'start', mode: 'dropdown', onSearch: searchCommands },
|
|
444
|
+
* { char: '#', position: 'any', mode: 'dropdown', onSearch: searchTags },
|
|
445
|
+
* ]}
|
|
446
|
+
* placeholder="Type a message..."
|
|
447
|
+
* onSubmit={handleSubmit}
|
|
448
|
+
* autoGrow
|
|
449
|
+
* />
|
|
450
|
+
* ```
|
|
451
|
+
*/
|
|
452
|
+
declare function PromptArea({
|
|
453
|
+
value,
|
|
454
|
+
onChange,
|
|
455
|
+
triggers,
|
|
456
|
+
placeholder,
|
|
457
|
+
className,
|
|
458
|
+
disabled,
|
|
459
|
+
markdown,
|
|
460
|
+
normalizeBullets,
|
|
461
|
+
onSubmit,
|
|
462
|
+
onEscape,
|
|
463
|
+
onChipClick,
|
|
464
|
+
onChipAdd,
|
|
465
|
+
onChipDelete,
|
|
466
|
+
onLinkClick,
|
|
467
|
+
onPaste,
|
|
468
|
+
onUndo,
|
|
469
|
+
onRedo,
|
|
470
|
+
minHeight,
|
|
471
|
+
maxHeight,
|
|
472
|
+
autoFocus,
|
|
473
|
+
autoGrow,
|
|
474
|
+
'aria-label': ariaLabel,
|
|
475
|
+
'data-test-id': dataTestId,
|
|
476
|
+
images,
|
|
477
|
+
imagePosition,
|
|
478
|
+
onImagePaste,
|
|
479
|
+
onImageRemove,
|
|
480
|
+
onImageClick,
|
|
481
|
+
files,
|
|
482
|
+
filePosition,
|
|
483
|
+
onFileRemove,
|
|
484
|
+
onFileClick,
|
|
485
|
+
onKeyDown,
|
|
486
|
+
onBlur,
|
|
487
|
+
onRawPaste,
|
|
488
|
+
submitOnEnter,
|
|
489
|
+
spellCheck,
|
|
490
|
+
maxLength,
|
|
491
|
+
'aria-describedby': ariaDescribedBy,
|
|
492
|
+
ref
|
|
493
|
+
}: PromptAreaProps & {
|
|
494
|
+
ref?: React.Ref<PromptAreaHandle>;
|
|
495
|
+
}): _$react.JSX.Element;
|
|
496
|
+
//#endregion
|
|
497
|
+
//#region src/components/prompt-area/use-prompt-area-state.d.ts
|
|
498
|
+
type UsePromptAreaStateOptions = {
|
|
499
|
+
/** Initial segment value. Defaults to `[]`. */initialValue?: Segment[];
|
|
500
|
+
};
|
|
501
|
+
type PromptAreaBind = {
|
|
502
|
+
/** Ref to attach to PromptArea — gives access to imperative methods. */ref: React.RefObject<PromptAreaHandle | null>; /** Current segment array — pass as `value` prop. */
|
|
503
|
+
value: Segment[]; /** Setter — pass as `onChange` prop. */
|
|
504
|
+
onChange: (segments: Segment[]) => void;
|
|
505
|
+
};
|
|
506
|
+
type PromptAreaState = {
|
|
507
|
+
/** Props to spread directly onto `<PromptArea {...bind} />`. Contains ref, value, and onChange. */bind: PromptAreaBind; /** Derived plain text representation of the current value. */
|
|
508
|
+
plainText: string; /** `true` when the value is empty or whitespace-only. */
|
|
509
|
+
isEmpty: boolean; /** `true` when the value contains at least one chip. */
|
|
510
|
+
hasChips: boolean; /** All chip segments in the current value. */
|
|
511
|
+
chips: ChipSegment[]; /** Clear all content (both state and the editor DOM). */
|
|
512
|
+
clear: () => void; /** Focus the editor. */
|
|
513
|
+
focus: () => void; /** Blur the editor. */
|
|
514
|
+
blur: () => void; /** Insert a chip at the current cursor position. */
|
|
515
|
+
insertChip: (chip: Omit<ChipSegment, 'type'>) => void;
|
|
516
|
+
};
|
|
517
|
+
declare function usePromptAreaState(options?: UsePromptAreaStateOptions): PromptAreaState;
|
|
518
|
+
//#endregion
|
|
519
|
+
//#region src/components/prompt-area/trigger-presets.d.ts
|
|
520
|
+
type TriggerPresetOptions = Omit<Partial<TriggerConfig>, 'char' | 'position' | 'mode'>;
|
|
521
|
+
type MentionTriggerOptions = TriggerPresetOptions & {
|
|
522
|
+
/** Override the trigger character. Defaults to `'@'`. */char?: string;
|
|
523
|
+
};
|
|
524
|
+
/**
|
|
525
|
+
* Creates a **mention** trigger (`@`).
|
|
526
|
+
*
|
|
527
|
+
* Defaults: `position: 'any'`, `mode: 'dropdown'`, `chipStyle: 'pill'`,
|
|
528
|
+
* accessible label `"mention"`.
|
|
529
|
+
*/
|
|
530
|
+
declare function mentionTrigger(opts?: MentionTriggerOptions): TriggerConfig;
|
|
531
|
+
type CommandTriggerOptions = TriggerPresetOptions & {
|
|
532
|
+
/** Override the trigger character. Defaults to `'/'`. */char?: string;
|
|
533
|
+
/**
|
|
534
|
+
* Where the command trigger is valid. Defaults to `'any'`, so commands fire
|
|
535
|
+
* anywhere a `/` follows whitespace — not just at the start of a line.
|
|
536
|
+
* Set to `'start'` to restrict the dropdown to the very start of the input
|
|
537
|
+
* or immediately after a newline (the classic slash-command behavior).
|
|
538
|
+
*/
|
|
539
|
+
position?: TriggerPosition;
|
|
540
|
+
};
|
|
541
|
+
/**
|
|
542
|
+
* Creates a **command** trigger (`/`).
|
|
543
|
+
*
|
|
544
|
+
* Defaults: `position: 'any'`, `mode: 'dropdown'`, `chipStyle: 'inline'`,
|
|
545
|
+
* accessible label `"command"`.
|
|
546
|
+
*
|
|
547
|
+
* By default commands work everywhere in the input. Pass `position: 'start'`
|
|
548
|
+
* to limit them to the start of a line.
|
|
549
|
+
*/
|
|
550
|
+
declare function commandTrigger(opts?: CommandTriggerOptions): TriggerConfig;
|
|
551
|
+
type HashtagTriggerOptions = TriggerPresetOptions & {
|
|
552
|
+
/** Override the trigger character. Defaults to `'#'`. */char?: string;
|
|
553
|
+
};
|
|
554
|
+
/**
|
|
555
|
+
* Creates a **hashtag / tag** trigger (`#`).
|
|
556
|
+
*
|
|
557
|
+
* Defaults: `position: 'any'`, `mode: 'dropdown'`, `chipStyle: 'pill'`,
|
|
558
|
+
* `resolveOnSpace: true`, accessible label `"tag"`.
|
|
559
|
+
*/
|
|
560
|
+
declare function hashtagTrigger(opts?: HashtagTriggerOptions): TriggerConfig;
|
|
561
|
+
//#endregion
|
|
562
|
+
//#region src/components/prompt-area/prompt-area-engine.d.ts
|
|
563
|
+
/**
|
|
564
|
+
* Converts an array of segments to a plain text string.
|
|
565
|
+
* Chips are represented as `{trigger}{displayText}` (e.g., "@Alice").
|
|
566
|
+
*/
|
|
567
|
+
declare function segmentsToPlainText(segments: Segment[]): string;
|
|
568
|
+
/**
|
|
569
|
+
* Converts plain text into a single text segment.
|
|
570
|
+
* Used for initial value conversion from plain strings.
|
|
571
|
+
*/
|
|
572
|
+
declare function plainTextToSegments(text: string): Segment[];
|
|
573
|
+
//#endregion
|
|
574
|
+
//#region src/components/prompt-area/segment-helpers.d.ts
|
|
575
|
+
/** Returns `true` when the segment array is empty or contains only whitespace text. */
|
|
576
|
+
declare function isSegmentsEmpty(segments: Segment[]): boolean;
|
|
577
|
+
/** Extracts chips matching a specific trigger character. */
|
|
578
|
+
declare function getChipsByTrigger(segments: Segment[], trigger: string): ChipSegment[];
|
|
579
|
+
//#endregion
|
|
580
|
+
//#region src/components/agent/SessionPanel.d.ts
|
|
581
|
+
interface SessionPanelProps {
|
|
582
|
+
client: WorkerDeckClient;
|
|
583
|
+
sessionId: string | undefined;
|
|
584
|
+
/** Optional slot rendered at the top, above the status bar. */
|
|
585
|
+
header?: ReactNode;
|
|
586
|
+
className?: string;
|
|
587
|
+
}
|
|
588
|
+
/**
|
|
589
|
+
* The all-in-one embeddable session surface: status bar, streaming transcript,
|
|
590
|
+
* permission prompts, composer. Attaches via useClaudeSession; remount (key) to switch
|
|
591
|
+
* sessions.
|
|
592
|
+
*/
|
|
593
|
+
declare function SessionPanel({
|
|
594
|
+
client,
|
|
595
|
+
sessionId,
|
|
596
|
+
header,
|
|
597
|
+
className
|
|
598
|
+
}: SessionPanelProps): _$react.JSX.Element;
|
|
599
|
+
//#endregion
|
|
600
|
+
//#region src/components/agent/Transcript.d.ts
|
|
601
|
+
interface TranscriptProps {
|
|
602
|
+
state: TranscriptState;
|
|
603
|
+
/** Builds the download URL for a delivered file (see FileCard). Typically
|
|
604
|
+
* `(path) => client.sessionFileUrl(sessionId, path)`. */
|
|
605
|
+
fileUrl?: (path: string) => string;
|
|
606
|
+
className?: string;
|
|
607
|
+
}
|
|
608
|
+
declare function Transcript({
|
|
609
|
+
state,
|
|
610
|
+
fileUrl,
|
|
611
|
+
className
|
|
612
|
+
}: TranscriptProps): _$react.JSX.Element;
|
|
613
|
+
//#endregion
|
|
614
|
+
//#region src/components/agent/Conversation.d.ts
|
|
615
|
+
interface ConversationProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
|
|
616
|
+
children: ReactNode;
|
|
617
|
+
}
|
|
618
|
+
/** Scroll container that stays pinned to the bottom while streaming, unless the user
|
|
619
|
+
* scrolls up — plus a floating scroll-to-bottom button. */
|
|
620
|
+
declare function Conversation({
|
|
621
|
+
className,
|
|
622
|
+
children,
|
|
623
|
+
...props
|
|
624
|
+
}: ConversationProps): _$react.JSX.Element;
|
|
625
|
+
declare function ConversationContent({
|
|
626
|
+
className,
|
|
627
|
+
children,
|
|
628
|
+
...props
|
|
629
|
+
}: HTMLAttributes<HTMLDivElement> & {
|
|
630
|
+
children: ReactNode;
|
|
631
|
+
}): _$react.JSX.Element;
|
|
632
|
+
declare function ConversationScrollButton({
|
|
633
|
+
className
|
|
634
|
+
}: {
|
|
635
|
+
className?: string;
|
|
636
|
+
}): _$react.JSX.Element | null;
|
|
637
|
+
//#endregion
|
|
638
|
+
//#region src/components/agent/Message.d.ts
|
|
639
|
+
interface MessageProps extends HTMLAttributes<HTMLDivElement> {
|
|
640
|
+
from: 'user' | 'assistant';
|
|
641
|
+
}
|
|
642
|
+
/** One chat turn row. User messages sit right in a bubble; assistant content is flat,
|
|
643
|
+
* full-width (the AI-chat convention — assistant output is the page, user input is quoted). */
|
|
644
|
+
declare function Message({
|
|
645
|
+
from,
|
|
646
|
+
className,
|
|
647
|
+
...props
|
|
648
|
+
}: MessageProps): _$react.JSX.Element;
|
|
649
|
+
declare function MessageContent({
|
|
650
|
+
className,
|
|
651
|
+
...props
|
|
652
|
+
}: HTMLAttributes<HTMLDivElement>): _$react.JSX.Element;
|
|
653
|
+
//#endregion
|
|
654
|
+
//#region src/components/agent/Response.d.ts
|
|
655
|
+
interface ResponseProps {
|
|
656
|
+
children: string;
|
|
657
|
+
/** Streaming text: tolerate incomplete markdown (unclosed fences, half links). */
|
|
658
|
+
streaming?: boolean;
|
|
659
|
+
className?: string;
|
|
660
|
+
}
|
|
661
|
+
/** Markdown renderer for assistant output — streaming-safe via streamdown, code
|
|
662
|
+
* highlighted with shiki (dual theme follows [data-theme] through the dark: variant). */
|
|
663
|
+
declare const Response: _$react.MemoExoticComponent<({
|
|
664
|
+
children,
|
|
665
|
+
streaming,
|
|
666
|
+
className
|
|
667
|
+
}: ResponseProps) => _$react.JSX.Element>;
|
|
668
|
+
//#endregion
|
|
669
|
+
//#region src/components/agent/Reasoning.d.ts
|
|
670
|
+
interface ReasoningProps {
|
|
671
|
+
children: string;
|
|
672
|
+
/** Auto-opens while true, auto-closes shortly after it flips false. */
|
|
673
|
+
isStreaming?: boolean;
|
|
674
|
+
defaultOpen?: boolean;
|
|
675
|
+
className?: string;
|
|
676
|
+
}
|
|
677
|
+
/** Collapsible extended-thinking block: open while the model is thinking, tucks itself
|
|
678
|
+
* away once the thought is finished (unless the user toggled it manually). */
|
|
679
|
+
declare function Reasoning({
|
|
680
|
+
children,
|
|
681
|
+
isStreaming,
|
|
682
|
+
defaultOpen,
|
|
683
|
+
className
|
|
684
|
+
}: ReasoningProps): _$react.JSX.Element | null;
|
|
685
|
+
//#endregion
|
|
686
|
+
//#region src/components/agent/Loader.d.ts
|
|
687
|
+
/** Three-dot pulse shown while the assistant hasn't produced output yet. */
|
|
688
|
+
declare function Loader({
|
|
689
|
+
label,
|
|
690
|
+
className
|
|
691
|
+
}: {
|
|
692
|
+
label?: string;
|
|
693
|
+
className?: string;
|
|
694
|
+
}): _$react.JSX.Element;
|
|
695
|
+
//#endregion
|
|
696
|
+
//#region src/components/agent/ToolCallCard.d.ts
|
|
697
|
+
type ToolCallItem = Extract<TranscriptItem, {
|
|
698
|
+
kind: 'tool_call';
|
|
699
|
+
}>;
|
|
700
|
+
interface ToolCallCardProps {
|
|
701
|
+
item: ToolCallItem;
|
|
702
|
+
className?: string;
|
|
703
|
+
}
|
|
704
|
+
declare function ToolCallCard({
|
|
705
|
+
item,
|
|
706
|
+
className
|
|
707
|
+
}: ToolCallCardProps): _$react.JSX.Element;
|
|
708
|
+
//#endregion
|
|
709
|
+
//#region src/components/agent/FileCard.d.ts
|
|
710
|
+
type FileDeliveredItem = Extract<TranscriptItem, {
|
|
711
|
+
kind: 'file_delivered';
|
|
712
|
+
}>;
|
|
713
|
+
interface FileCardProps {
|
|
714
|
+
item: FileDeliveredItem;
|
|
715
|
+
/** Download URL for the delivered path (the server's session file route).
|
|
716
|
+
* Without it the card renders informational only. */
|
|
717
|
+
href?: string;
|
|
718
|
+
className?: string;
|
|
719
|
+
}
|
|
720
|
+
/** A file the agent handed over (`file_delivered`): name, size, download link.
|
|
721
|
+
* The file lives in the session's in-memory VFS — the link works while the
|
|
722
|
+
* session lives. */
|
|
723
|
+
declare function FileCard({
|
|
724
|
+
item,
|
|
725
|
+
href,
|
|
726
|
+
className
|
|
727
|
+
}: FileCardProps): _$react.JSX.Element;
|
|
728
|
+
//#endregion
|
|
729
|
+
//#region src/components/agent/PermissionPrompt.d.ts
|
|
730
|
+
interface PermissionPromptProps {
|
|
731
|
+
request: PermissionRequest;
|
|
732
|
+
onApprove: (requestId: string) => void;
|
|
733
|
+
onDeny: (requestId: string, message?: string) => void;
|
|
734
|
+
className?: string;
|
|
735
|
+
}
|
|
736
|
+
declare function PermissionPrompt({
|
|
737
|
+
request,
|
|
738
|
+
onApprove,
|
|
739
|
+
onDeny,
|
|
740
|
+
className
|
|
741
|
+
}: PermissionPromptProps): _$react.JSX.Element;
|
|
742
|
+
//#endregion
|
|
743
|
+
//#region src/components/agent/QuestionPrompt.d.ts
|
|
744
|
+
type QuestionBehaviorMeta = {
|
|
745
|
+
value: QuestionBehavior;
|
|
746
|
+
label: string;
|
|
747
|
+
description: string;
|
|
748
|
+
};
|
|
749
|
+
/** The AskUserQuestion policies surfaced on job/session creation forms. */
|
|
750
|
+
declare const QUESTION_BEHAVIORS: QuestionBehaviorMeta[];
|
|
751
|
+
/** Extract well-formed questions from an AskUserQuestion permission request's input. */
|
|
752
|
+
declare function parseUserQuestions(input: Record<string, unknown>): UserQuestion[];
|
|
753
|
+
interface QuestionPromptProps {
|
|
754
|
+
/** A pending permission whose toolName is 'AskUserQuestion'. */
|
|
755
|
+
request: PermissionRequest;
|
|
756
|
+
/** Allow the tool with `updatedInput` (the original input plus `answers`). */
|
|
757
|
+
onAnswer: (requestId: string, updatedInput: Record<string, unknown>) => void;
|
|
758
|
+
/** Deny the tool — the model proceeds without an answer. */
|
|
759
|
+
onDismiss: (requestId: string, message?: string) => void;
|
|
760
|
+
className?: string;
|
|
761
|
+
}
|
|
762
|
+
/** Interactive form for the AskUserQuestion tool: option buttons per question
|
|
763
|
+
* (multi-select where the question allows it), a free-text "Other" escape hatch,
|
|
764
|
+
* and the focused option's preview. Falls back to nothing renderable → the caller
|
|
765
|
+
* should show a generic PermissionPrompt if `parseUserQuestions` finds no questions. */
|
|
766
|
+
declare function QuestionPrompt({
|
|
767
|
+
request,
|
|
768
|
+
onAnswer,
|
|
769
|
+
onDismiss,
|
|
770
|
+
className
|
|
771
|
+
}: QuestionPromptProps): _$react.JSX.Element;
|
|
772
|
+
//#endregion
|
|
773
|
+
//#region src/components/agent/Composer.d.ts
|
|
774
|
+
interface ComposerProps {
|
|
775
|
+
onSend: (text: string) => void;
|
|
776
|
+
onInterrupt: () => void;
|
|
777
|
+
busy: boolean;
|
|
778
|
+
/** Disable input entirely (session failed/closed). */
|
|
779
|
+
disabled?: boolean;
|
|
780
|
+
placeholder?: string;
|
|
781
|
+
/** Slash commands offered as autocomplete; picked ones render as chips. */
|
|
782
|
+
commands?: SlashCommandInfo[];
|
|
783
|
+
/** Left side of the toolbar row (mode selects, attachments, …). */
|
|
784
|
+
toolbar?: ReactNode;
|
|
785
|
+
className?: string;
|
|
786
|
+
}
|
|
787
|
+
/** Framed prompt input built on prompt-area's contentEditable: typing "/" — at the
|
|
788
|
+
* start or after whitespace — opens a suggestion dropdown fed by `commands`, and a
|
|
789
|
+
* picked command becomes an inline chip. Submit button flips to stop while a turn
|
|
790
|
+
* is running (messages still queue while busy). */
|
|
791
|
+
declare function Composer({
|
|
792
|
+
onSend,
|
|
793
|
+
onInterrupt,
|
|
794
|
+
busy,
|
|
795
|
+
disabled,
|
|
796
|
+
placeholder,
|
|
797
|
+
commands,
|
|
798
|
+
toolbar,
|
|
799
|
+
className
|
|
800
|
+
}: ComposerProps): _$react.JSX.Element;
|
|
801
|
+
//#endregion
|
|
802
|
+
//#region src/components/agent/ModelSelect.d.ts
|
|
803
|
+
interface ModelSelectProps {
|
|
804
|
+
/** Models the session can switch to (TranscriptState.models). */
|
|
805
|
+
models: ModelOption[];
|
|
806
|
+
/** The session's current model id (TranscriptState.model), possibly decorated
|
|
807
|
+
* (e.g. "claude-fable-5[1m]") — matched leniently against the options.
|
|
808
|
+
* `undefined` selects the list's default row, if it has one. */
|
|
809
|
+
model?: string;
|
|
810
|
+
/** `undefined` = back to the CLI's default model. */
|
|
811
|
+
onModelChange: (model?: string) => void;
|
|
812
|
+
/** 'toolbar' (default) is the composer's compact borderless trigger;
|
|
813
|
+
* 'form' is a standard field-sized Select for create/settings forms. */
|
|
814
|
+
variant?: 'toolbar' | 'form';
|
|
815
|
+
disabled?: boolean;
|
|
816
|
+
className?: string;
|
|
817
|
+
}
|
|
818
|
+
/** Compact model switcher for the composer toolbar; fed by the `capabilities` event.
|
|
819
|
+
* Rows render CLI-style: bold display name with the model's description beneath. */
|
|
820
|
+
declare function ModelSelect({
|
|
821
|
+
models,
|
|
822
|
+
model,
|
|
823
|
+
onModelChange,
|
|
824
|
+
variant,
|
|
825
|
+
disabled,
|
|
826
|
+
className
|
|
827
|
+
}: ModelSelectProps): _$react.JSX.Element;
|
|
828
|
+
//#endregion
|
|
829
|
+
//#region src/components/agent/PermissionModeSelect.d.ts
|
|
830
|
+
type PermissionModeMeta = {
|
|
831
|
+
value: PermissionMode;
|
|
832
|
+
label: string;
|
|
833
|
+
description: string;
|
|
834
|
+
dangerous?: boolean;
|
|
835
|
+
};
|
|
836
|
+
/** The modes surfaced across UI surfaces (session creation, in-session switcher). */
|
|
837
|
+
declare const PERMISSION_MODES: PermissionModeMeta[];
|
|
838
|
+
interface PermissionModeSelectProps {
|
|
839
|
+
/** The session's current mode (TranscriptState.permissionMode). */
|
|
840
|
+
mode?: PermissionMode;
|
|
841
|
+
onModeChange: (mode: PermissionMode) => void;
|
|
842
|
+
/** Restrict what is offered — most of {@link PERMISSION_MODES} is Claude Code
|
|
843
|
+
* vocabulary the provider engine has no meaning for. Defaults to all of them;
|
|
844
|
+
* pass `PROVIDER_PERMISSION_MODES` for a provider session. */
|
|
845
|
+
modes?: readonly PermissionMode[];
|
|
846
|
+
/** 'toolbar' (default) is the composer's compact borderless trigger;
|
|
847
|
+
* 'form' is a standard field-sized Select for create/settings forms. */
|
|
848
|
+
variant?: 'toolbar' | 'form';
|
|
849
|
+
disabled?: boolean;
|
|
850
|
+
className?: string;
|
|
851
|
+
}
|
|
852
|
+
/** Permission-mode switcher: compact in the composer toolbar, field-sized in forms. */
|
|
853
|
+
declare function PermissionModeSelect({
|
|
854
|
+
mode,
|
|
855
|
+
onModeChange,
|
|
856
|
+
modes,
|
|
857
|
+
variant,
|
|
858
|
+
disabled,
|
|
859
|
+
className
|
|
860
|
+
}: PermissionModeSelectProps): _$react.JSX.Element;
|
|
861
|
+
//#endregion
|
|
862
|
+
//#region src/components/agent/StatusBar.d.ts
|
|
863
|
+
interface StatusBarProps {
|
|
864
|
+
state: TranscriptState;
|
|
865
|
+
connected: boolean;
|
|
866
|
+
className?: string;
|
|
867
|
+
}
|
|
868
|
+
declare function StatusBar({
|
|
869
|
+
state,
|
|
870
|
+
connected,
|
|
871
|
+
className
|
|
872
|
+
}: StatusBarProps): _$react.JSX.Element;
|
|
873
|
+
//#endregion
|
|
874
|
+
//#region src/components/agent/SessionList.d.ts
|
|
875
|
+
interface SessionListItemProps {
|
|
876
|
+
session: SessionInfo;
|
|
877
|
+
active?: boolean;
|
|
878
|
+
onSelect?: (id: string) => void;
|
|
879
|
+
onDelete?: (id: string) => void;
|
|
880
|
+
}
|
|
881
|
+
declare function SessionListItem({
|
|
882
|
+
session,
|
|
883
|
+
active,
|
|
884
|
+
onSelect,
|
|
885
|
+
onDelete
|
|
886
|
+
}: SessionListItemProps): _$react.JSX.Element;
|
|
887
|
+
interface SessionListProps {
|
|
888
|
+
sessions: SessionInfo[];
|
|
889
|
+
activeId?: string;
|
|
890
|
+
onSelect?: (id: string) => void;
|
|
891
|
+
onDelete?: (id: string) => void;
|
|
892
|
+
emptyText?: string;
|
|
893
|
+
className?: string;
|
|
894
|
+
}
|
|
895
|
+
declare function SessionList({
|
|
896
|
+
sessions,
|
|
897
|
+
activeId,
|
|
898
|
+
onSelect,
|
|
899
|
+
onDelete,
|
|
900
|
+
emptyText,
|
|
901
|
+
className
|
|
902
|
+
}: SessionListProps): _$react.JSX.Element;
|
|
903
|
+
//#endregion
|
|
904
|
+
//#region src/components/agent/status.d.ts
|
|
905
|
+
declare const STATUS_META: Record<SessionStatus, {
|
|
906
|
+
label: string;
|
|
907
|
+
variant: NonNullable<BadgeProps['variant']>;
|
|
908
|
+
busy: boolean;
|
|
909
|
+
}>;
|
|
910
|
+
//#endregion
|
|
911
|
+
//#region src/lib/utils.d.ts
|
|
912
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
913
|
+
//#endregion
|
|
914
|
+
//#region src/lib/format.d.ts
|
|
915
|
+
declare function formatCost(usd: number | undefined): string;
|
|
916
|
+
declare function formatDuration(ms: number): string;
|
|
917
|
+
/** Compact token count, Claude Code-style: 850 → "850", 359_000 → "359.0k", 1_200_000 → "1.2M". */
|
|
918
|
+
declare function formatTokens(tokens: number): string;
|
|
919
|
+
declare function formatBytes(bytes: number): string;
|
|
920
|
+
/** Countdown to an epoch-ms deadline: "2h 18m", "12m", "<1m"; "now" once passed. */
|
|
921
|
+
declare function formatCountdown(untilEpochMs: number, now?: number): string;
|
|
922
|
+
declare function formatRelativeTime(epochMs: number | undefined, now?: number): string;
|
|
923
|
+
/** Compact one-line preview of a tool input for card headers. */
|
|
924
|
+
declare function toolInputPreview(input: unknown, max?: number): string;
|
|
925
|
+
//#endregion
|
|
926
|
+
export { AlertDialog, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardHeader, CardTitle, type ChipSegment, CodeBlock, type CodeBlockProps, Composer, type ComposerProps, Conversation, ConversationContent, type ConversationProps, ConversationScrollButton, CopyButton, type CopyButtonProps, FileCard, type FileCardProps, type FileDeliveredItem, Input, Loader, Message, MessageContent, type MessageProps, ModelSelect, type ModelSelectProps, PERMISSION_MODES, type PermissionModeMeta, PermissionModeSelect, type PermissionModeSelectProps, PermissionPrompt, type PermissionPromptProps, ProgressRing, type ProgressRingProps, PromptArea, type PromptAreaHandle, type PromptAreaProps, QUESTION_BEHAVIORS, type QuestionBehaviorMeta, QuestionPrompt, type QuestionPromptProps, Reasoning, type ReasoningProps, Response, type ResponseProps, STATUS_META, type Segment, Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue, SessionList, SessionListItem, type SessionListItemProps, type SessionListProps, SessionPanel, type SessionPanelProps, Spinner, StatusBar, type StatusBarProps, type TextSegment, Textarea, Tip, Toaster, ToolCallCard, type ToolCallCardProps, type ToolCallItem, TooltipContent, TooltipProvider, Transcript, type TranscriptProps, type TriggerConfig, type TriggerSuggestion, badgeVariants, buttonVariants, cn, commandTrigger, formatBytes, formatCost, formatCountdown, formatDuration, formatRelativeTime, formatTokens, getChipsByTrigger, hashtagTrigger, isSegmentsEmpty, mentionTrigger, parseUserQuestions, plainTextToSegments, segmentsToPlainText, toast, toolInputPreview, usePromptAreaState };
|
|
927
|
+
//# sourceMappingURL=index.d.mts.map
|