@mcp-b/react-components 0.6.5 → 0.7.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/dist/PromptInput-D6-G24p7.d.ts +528 -0
- package/dist/ThinkChatToolParts-DnUiZgCC.d.ts +83 -0
- package/dist/components/AgentChat.d.ts +11 -14
- package/dist/components/AgentChat.js +76 -57
- package/dist/components/Context.d.ts +6 -10
- package/dist/components/Context.js +4 -2
- package/dist/components/Conversation.d.ts +28 -28
- package/dist/components/Conversation.js +35 -54
- package/dist/components/Marker.d.ts +57 -0
- package/dist/components/Marker.js +89 -0
- package/dist/components/MessageScroller.d.ts +52 -0
- package/dist/components/MessageScroller.js +62 -0
- package/dist/components/PromptInput.d.ts +2 -534
- package/dist/components/PromptInput.js +17 -11
- package/dist/components/ThinkChat.d.ts +10 -77
- package/dist/components/ThinkChat.js +59 -856
- package/dist/components/ThinkChatActivity.d.ts +73 -0
- package/dist/components/ThinkChatActivity.js +429 -0
- package/dist/components/ThinkChatContext.d.ts +28 -0
- package/dist/components/ThinkChatContext.js +10 -0
- package/dist/components/ThinkChatToolPanels.d.ts +39 -0
- package/dist/components/ThinkChatToolPanels.js +355 -0
- package/dist/components/ThinkChatToolParts.d.ts +2 -0
- package/dist/components/ThinkChatToolParts.js +66 -0
- package/dist/components/WorkspaceExplorer.d.ts +1 -1
- package/dist/components/useStickToBottom.d.ts +5 -2
- package/dist/components/useStickToBottom.js +5 -2
- package/dist/styles/agent-chat.css +15 -3
- package/dist/styles/agent-connection.css +1 -0
- package/dist/styles/code-block.css +4 -4
- package/dist/styles/conversation.css +10 -0
- package/dist/styles/index.css +2 -0
- package/dist/styles/marker.css +95 -0
- package/dist/styles/message-scroller.css +90 -0
- package/dist/styles/message.css +2 -1
- package/dist/styles/scrollbars.css +10 -2
- package/dist/styles/streamdown.css +2 -0
- package/package.json +3 -2
|
@@ -0,0 +1,528 @@
|
|
|
1
|
+
import { A as SelectTriggerProps, M as SelectValueProps, S as SelectProps, f as SelectOption, j as SelectValue, r as SelectContentProps, s as SelectItemProps, t as Select } from "./Select-CRsKCJ9x.js";
|
|
2
|
+
import { c as ComboboxGroup, d as ComboboxLabel, f as ComboboxList, g as ComboboxTrigger, h as ComboboxSeparator, l as ComboboxInput, m as ComboboxPositioner, p as ComboboxPopup, s as ComboboxEmpty, t as Combobox, u as ComboboxItem } from "./Combobox-D9anamNr.js";
|
|
3
|
+
import { h as MenuItemProps, l as MenuContentProps, w as MenuProps } from "./Menu-B5vDqZe_.js";
|
|
4
|
+
import { c as TabsList, n as TabPanel, t as Tab } from "./Tabs-D9EAq09D.js";
|
|
5
|
+
import { r as ButtonProps } from "./Button-Ct5I6aTu.js";
|
|
6
|
+
import * as React from "react";
|
|
7
|
+
import { ChatAddToolApproveResponseFunction, ChatStatus, DynamicToolUIPart, FileUIPart, ToolUIPart, UIMessage } from "ai";
|
|
8
|
+
import { PendingApproval } from "@cloudflare/think";
|
|
9
|
+
|
|
10
|
+
//#region src/components/PromptInput.d.ts
|
|
11
|
+
interface PromptInputReferencedSource {
|
|
12
|
+
id?: string;
|
|
13
|
+
title?: string;
|
|
14
|
+
url?: string;
|
|
15
|
+
[key: string]: unknown;
|
|
16
|
+
}
|
|
17
|
+
/** The payload produced when the prompt input is submitted. */
|
|
18
|
+
interface PromptInputMessage {
|
|
19
|
+
text: string;
|
|
20
|
+
files: FileUIPart[];
|
|
21
|
+
}
|
|
22
|
+
interface AttachmentsContext {
|
|
23
|
+
files: Array<FileUIPart & {
|
|
24
|
+
id: string;
|
|
25
|
+
}>;
|
|
26
|
+
add: (files: File[] | FileList) => void;
|
|
27
|
+
remove: (id: string) => void;
|
|
28
|
+
clear: () => void;
|
|
29
|
+
openFileDialog: () => void;
|
|
30
|
+
fileInputRef: React.RefObject<HTMLInputElement | null>;
|
|
31
|
+
}
|
|
32
|
+
interface TextInputContext {
|
|
33
|
+
value: string;
|
|
34
|
+
setInput: (value: string) => void;
|
|
35
|
+
clear: () => void;
|
|
36
|
+
}
|
|
37
|
+
interface PromptInputControllerProps {
|
|
38
|
+
textInput: TextInputContext;
|
|
39
|
+
attachments: AttachmentsContext;
|
|
40
|
+
__registerFileInput: (ref: React.RefObject<HTMLInputElement | null>, open: () => void) => void;
|
|
41
|
+
}
|
|
42
|
+
interface ReferencedSourcesContext {
|
|
43
|
+
sources: Array<PromptInputReferencedSource & {
|
|
44
|
+
id: string;
|
|
45
|
+
}>;
|
|
46
|
+
add: (sources: PromptInputReferencedSource[] | PromptInputReferencedSource) => void;
|
|
47
|
+
remove: (id: string) => void;
|
|
48
|
+
clear: () => void;
|
|
49
|
+
}
|
|
50
|
+
declare function usePromptInputController(): PromptInputControllerProps;
|
|
51
|
+
declare function useProviderAttachments(): AttachmentsContext;
|
|
52
|
+
declare function usePromptInputAttachments(): AttachmentsContext;
|
|
53
|
+
declare function usePromptInputReferencedSources(): ReferencedSourcesContext;
|
|
54
|
+
interface PromptInputProviderProps extends React.PropsWithChildren {
|
|
55
|
+
initialInput?: string;
|
|
56
|
+
}
|
|
57
|
+
declare function PromptInputProvider({
|
|
58
|
+
initialInput,
|
|
59
|
+
children
|
|
60
|
+
}: PromptInputProviderProps): React.JSX.Element;
|
|
61
|
+
interface PromptInputProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit" | "onError"> {
|
|
62
|
+
/** Accepted file MIME types/extensions, passed to the hidden file input. */
|
|
63
|
+
accept?: string;
|
|
64
|
+
/** Allows multiple files in a single file picker/drop action. */
|
|
65
|
+
multiple?: boolean;
|
|
66
|
+
/** Listen for file drops on the whole document instead of only the form. */
|
|
67
|
+
globalDrop?: boolean;
|
|
68
|
+
/** Clears the hidden file input when attachments are cleared. */
|
|
69
|
+
syncHiddenInput?: boolean;
|
|
70
|
+
/** Maximum number of attached files. */
|
|
71
|
+
maxFiles?: number;
|
|
72
|
+
/** Maximum accepted file size in bytes. */
|
|
73
|
+
maxFileSize?: number;
|
|
74
|
+
/** Called when file validation rejects an attachment. */
|
|
75
|
+
onError?: (error: {
|
|
76
|
+
code: "max_files" | "max_file_size" | "accept";
|
|
77
|
+
message: string;
|
|
78
|
+
}) => void;
|
|
79
|
+
/** Called with the trimmed message text and files when the form is submitted. */
|
|
80
|
+
onSubmit?: (message: PromptInputMessage, event: React.FormEvent<HTMLFormElement>) => void | Promise<void>;
|
|
81
|
+
}
|
|
82
|
+
/**
|
|
83
|
+
* Chat-style composer form. Wraps a textarea and footer controls, with
|
|
84
|
+
* Enter-to-submit semantics, auto-resizing behavior, and optional attachments.
|
|
85
|
+
* Adapted from Vercel AI Elements and restyled with Sigvelo CSS tokens.
|
|
86
|
+
*
|
|
87
|
+
* Use for assistant/chat submit forms. Do not use it as a generic textarea or
|
|
88
|
+
* non-chat form. Sigvelo changes: uses shared Menu, Select, Combobox, Tabs,
|
|
89
|
+
* Button, and Tooltip components; maps styles to CSS tokens; adds local
|
|
90
|
+
* attachment and referenced-source helpers.
|
|
91
|
+
*
|
|
92
|
+
* The form handles Enter-to-submit while multiline editing remains in the
|
|
93
|
+
* textarea. Attachment controls need accessible labels through their buttons
|
|
94
|
+
* and menus. Add new shared tools here when multiple apps need them.
|
|
95
|
+
*
|
|
96
|
+
* @example
|
|
97
|
+
* ```tsx
|
|
98
|
+
* <PromptInput onSubmit={({ text, files }) => sendMessage({ text, files })}>
|
|
99
|
+
* <PromptInputBody>
|
|
100
|
+
* <PromptInputTextarea placeholder="Ask Sigvelo..." />
|
|
101
|
+
* </PromptInputBody>
|
|
102
|
+
* <PromptInputFooter>
|
|
103
|
+
* <PromptInputTools>
|
|
104
|
+
* <PromptInputActionAddAttachments />
|
|
105
|
+
* </PromptInputTools>
|
|
106
|
+
* <PromptInputSubmit status="ready" />
|
|
107
|
+
* </PromptInputFooter>
|
|
108
|
+
* </PromptInput>
|
|
109
|
+
* ```
|
|
110
|
+
*
|
|
111
|
+
* @see {@link https://elements.ai-sdk.dev/components/prompt-input | AI Elements Prompt Input}
|
|
112
|
+
*/
|
|
113
|
+
declare function PromptInput({
|
|
114
|
+
className,
|
|
115
|
+
accept,
|
|
116
|
+
multiple,
|
|
117
|
+
globalDrop,
|
|
118
|
+
syncHiddenInput,
|
|
119
|
+
maxFiles,
|
|
120
|
+
maxFileSize,
|
|
121
|
+
onError,
|
|
122
|
+
onSubmit,
|
|
123
|
+
children,
|
|
124
|
+
id,
|
|
125
|
+
ref,
|
|
126
|
+
...props
|
|
127
|
+
}: PromptInputProps & {
|
|
128
|
+
ref?: React.Ref<HTMLFormElement>;
|
|
129
|
+
}): React.JSX.Element;
|
|
130
|
+
interface PromptInputHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
|
|
131
|
+
declare function PromptInputHeader({
|
|
132
|
+
className,
|
|
133
|
+
children,
|
|
134
|
+
ref,
|
|
135
|
+
...props
|
|
136
|
+
}: PromptInputHeaderProps & {
|
|
137
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
138
|
+
}): React.JSX.Element;
|
|
139
|
+
interface PromptInputAttachmentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
140
|
+
/** The pending attachment — the AI SDK `file` part plus the local list id. */
|
|
141
|
+
file: FileUIPart & {
|
|
142
|
+
id: string;
|
|
143
|
+
};
|
|
144
|
+
}
|
|
145
|
+
/**
|
|
146
|
+
* One pending attachment chip: image files show a thumbnail, everything else
|
|
147
|
+
* a file icon and name. The corner button removes it from the pending list.
|
|
148
|
+
*/
|
|
149
|
+
declare function PromptInputAttachment({
|
|
150
|
+
file,
|
|
151
|
+
className,
|
|
152
|
+
ref,
|
|
153
|
+
...props
|
|
154
|
+
}: PromptInputAttachmentProps & {
|
|
155
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
156
|
+
}): React.JSX.Element;
|
|
157
|
+
interface PromptInputAttachmentsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
|
|
158
|
+
/** Override chip rendering per attachment. */
|
|
159
|
+
children?: (file: FileUIPart & {
|
|
160
|
+
id: string;
|
|
161
|
+
}) => React.ReactNode;
|
|
162
|
+
}
|
|
163
|
+
/**
|
|
164
|
+
* The pending-attachment chip row. Renders nothing while the list is empty,
|
|
165
|
+
* so it can sit in the composer unconditionally — files added via the file
|
|
166
|
+
* dialog, paste, or drop appear here until submit sends and clears them.
|
|
167
|
+
*/
|
|
168
|
+
declare function PromptInputAttachments({
|
|
169
|
+
className,
|
|
170
|
+
children,
|
|
171
|
+
ref,
|
|
172
|
+
...props
|
|
173
|
+
}: PromptInputAttachmentsProps & {
|
|
174
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
175
|
+
}): React.JSX.Element | null;
|
|
176
|
+
interface PromptInputBodyProps extends React.HTMLAttributes<HTMLDivElement> {}
|
|
177
|
+
declare function PromptInputBody({
|
|
178
|
+
className,
|
|
179
|
+
children,
|
|
180
|
+
ref,
|
|
181
|
+
...props
|
|
182
|
+
}: PromptInputBodyProps & {
|
|
183
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
184
|
+
}): React.JSX.Element;
|
|
185
|
+
interface PromptInputFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
|
|
186
|
+
declare function PromptInputFooter({
|
|
187
|
+
className,
|
|
188
|
+
children,
|
|
189
|
+
ref,
|
|
190
|
+
...props
|
|
191
|
+
}: PromptInputFooterProps & {
|
|
192
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
193
|
+
}): React.JSX.Element;
|
|
194
|
+
interface PromptInputToolsProps extends React.HTMLAttributes<HTMLDivElement> {}
|
|
195
|
+
declare function PromptInputTools({
|
|
196
|
+
className,
|
|
197
|
+
children,
|
|
198
|
+
ref,
|
|
199
|
+
...props
|
|
200
|
+
}: PromptInputToolsProps & {
|
|
201
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
202
|
+
}): React.JSX.Element;
|
|
203
|
+
interface PromptInputTextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
204
|
+
minHeight?: number;
|
|
205
|
+
maxHeight?: number;
|
|
206
|
+
}
|
|
207
|
+
declare function PromptInputTextarea({
|
|
208
|
+
className,
|
|
209
|
+
placeholder,
|
|
210
|
+
rows,
|
|
211
|
+
minHeight,
|
|
212
|
+
maxHeight,
|
|
213
|
+
onChange,
|
|
214
|
+
onCompositionEnd,
|
|
215
|
+
onCompositionStart,
|
|
216
|
+
onKeyDown,
|
|
217
|
+
onInput,
|
|
218
|
+
onPaste,
|
|
219
|
+
ref,
|
|
220
|
+
...props
|
|
221
|
+
}: PromptInputTextareaProps & {
|
|
222
|
+
ref?: React.Ref<HTMLTextAreaElement>;
|
|
223
|
+
}): React.JSX.Element;
|
|
224
|
+
type TooltipSide = "top" | "right" | "bottom" | "left";
|
|
225
|
+
type PromptInputButtonTooltip = string | {
|
|
226
|
+
content: React.ReactNode;
|
|
227
|
+
shortcut?: string;
|
|
228
|
+
side?: TooltipSide;
|
|
229
|
+
};
|
|
230
|
+
type PromptInputTooltipConfig = Exclude<PromptInputButtonTooltip, string>;
|
|
231
|
+
interface PromptInputButtonProps extends Omit<ButtonProps, "children" | "className"> {
|
|
232
|
+
className?: string;
|
|
233
|
+
tooltip?: PromptInputButtonTooltip;
|
|
234
|
+
children?: React.ReactNode;
|
|
235
|
+
}
|
|
236
|
+
declare function PromptInputButton({
|
|
237
|
+
className,
|
|
238
|
+
tooltip,
|
|
239
|
+
variant,
|
|
240
|
+
color,
|
|
241
|
+
size,
|
|
242
|
+
children,
|
|
243
|
+
"aria-label": ariaLabel,
|
|
244
|
+
ref,
|
|
245
|
+
...props
|
|
246
|
+
}: PromptInputButtonProps & {
|
|
247
|
+
ref?: React.Ref<HTMLButtonElement>;
|
|
248
|
+
}): React.JSX.Element;
|
|
249
|
+
type PromptInputActionMenuProps = MenuProps;
|
|
250
|
+
declare function PromptInputActionMenu(props: PromptInputActionMenuProps): React.JSX.Element;
|
|
251
|
+
type PromptInputActionMenuTriggerProps = PromptInputButtonProps;
|
|
252
|
+
declare function PromptInputActionMenuTrigger({
|
|
253
|
+
className,
|
|
254
|
+
children,
|
|
255
|
+
...props
|
|
256
|
+
}: PromptInputActionMenuTriggerProps): React.JSX.Element;
|
|
257
|
+
type PromptInputActionMenuContentProps = MenuContentProps;
|
|
258
|
+
declare function PromptInputActionMenuContent({
|
|
259
|
+
className,
|
|
260
|
+
children,
|
|
261
|
+
...props
|
|
262
|
+
}: PromptInputActionMenuContentProps): React.JSX.Element;
|
|
263
|
+
type PromptInputActionMenuItemProps = MenuItemProps;
|
|
264
|
+
declare function PromptInputActionMenuItem({
|
|
265
|
+
className,
|
|
266
|
+
...props
|
|
267
|
+
}: PromptInputActionMenuItemProps): React.JSX.Element;
|
|
268
|
+
interface PromptInputActionAddAttachmentsProps extends PromptInputActionMenuItemProps {
|
|
269
|
+
label?: string;
|
|
270
|
+
}
|
|
271
|
+
declare function PromptInputActionAddAttachments({
|
|
272
|
+
label,
|
|
273
|
+
onClick,
|
|
274
|
+
children,
|
|
275
|
+
...props
|
|
276
|
+
}: PromptInputActionAddAttachmentsProps): React.JSX.Element;
|
|
277
|
+
interface PromptInputActionAddScreenshotProps extends PromptInputActionMenuItemProps {
|
|
278
|
+
label?: string;
|
|
279
|
+
}
|
|
280
|
+
declare function PromptInputActionAddScreenshot({
|
|
281
|
+
label,
|
|
282
|
+
onClick,
|
|
283
|
+
children,
|
|
284
|
+
...props
|
|
285
|
+
}: PromptInputActionAddScreenshotProps): React.JSX.Element;
|
|
286
|
+
/** How the agent's approval requests are handled. */
|
|
287
|
+
type PermissionMode = "ask" | "bypass";
|
|
288
|
+
interface PromptInputPermissionSelectorProps {
|
|
289
|
+
/** Current mode. `"ask"` surfaces approvals in the composer; `"bypass"` auto-approves. */
|
|
290
|
+
value: PermissionMode;
|
|
291
|
+
onValueChange: (mode: PermissionMode) => void;
|
|
292
|
+
/** Overrides the menu's header question. */
|
|
293
|
+
question?: string;
|
|
294
|
+
}
|
|
295
|
+
/**
|
|
296
|
+
* Footer control for choosing how approval requests are handled — ask each
|
|
297
|
+
* time, or bypass. Purely a picker: the auto-approve behavior lives with
|
|
298
|
+
* whoever owns the approvals (`AgentChat` wires both ends).
|
|
299
|
+
*/
|
|
300
|
+
declare function PromptInputPermissionSelector({
|
|
301
|
+
value,
|
|
302
|
+
onValueChange,
|
|
303
|
+
question
|
|
304
|
+
}: PromptInputPermissionSelectorProps): React.JSX.Element;
|
|
305
|
+
interface PromptInputSubmitProps extends Omit<ButtonProps, "children" | "className" | "type"> {
|
|
306
|
+
className?: string;
|
|
307
|
+
status?: ChatStatus;
|
|
308
|
+
onStop?: () => void;
|
|
309
|
+
children?: React.ReactNode;
|
|
310
|
+
label?: string;
|
|
311
|
+
}
|
|
312
|
+
declare function PromptInputSubmit({
|
|
313
|
+
className,
|
|
314
|
+
status,
|
|
315
|
+
onStop,
|
|
316
|
+
variant,
|
|
317
|
+
color,
|
|
318
|
+
size,
|
|
319
|
+
onClick,
|
|
320
|
+
children,
|
|
321
|
+
label,
|
|
322
|
+
ref,
|
|
323
|
+
...props
|
|
324
|
+
}: PromptInputSubmitProps & {
|
|
325
|
+
ref?: React.Ref<HTMLButtonElement>;
|
|
326
|
+
}): React.JSX.Element;
|
|
327
|
+
/**
|
|
328
|
+
* Resolve Think execution approvals that do not use the AI SDK
|
|
329
|
+
* `approval-requested` part: paused codemode executions and durable-pause
|
|
330
|
+
* approvals from `pendingApprovals()`. Wire to the Think agent's
|
|
331
|
+
* client-callable RPCs:
|
|
332
|
+
*
|
|
333
|
+
* ```tsx
|
|
334
|
+
* executionApprovals={{
|
|
335
|
+
* approve: (id) => agent.stub.approveExecution(id),
|
|
336
|
+
* reject: (id, reason) => agent.stub.rejectExecution(id, reason),
|
|
337
|
+
* }}
|
|
338
|
+
* ```
|
|
339
|
+
*
|
|
340
|
+
* On approve, upstream resumes or runs the parked execution and auto-continues
|
|
341
|
+
* the chat. Both RPCs are idempotent, so a stale click resolves to "already
|
|
342
|
+
* handled".
|
|
343
|
+
*/
|
|
344
|
+
interface ExecutionApprovals {
|
|
345
|
+
approve: (executionId: string) => unknown;
|
|
346
|
+
reject: (executionId: string, reason?: string) => unknown;
|
|
347
|
+
}
|
|
348
|
+
/** The id a response must carry: the approval id, or the paused run's executionId. */
|
|
349
|
+
declare function getApprovalRequestId(part: ToolUIPart | DynamicToolUIPart): string | undefined;
|
|
350
|
+
/** Component-local identity: paused executions can ask for multiple approvals. */
|
|
351
|
+
declare function getApprovalStateKey(part: ToolUIPart | DynamicToolUIPart): string | undefined;
|
|
352
|
+
interface PendingToolApproval<MessageT extends UIMessage = UIMessage> {
|
|
353
|
+
message: MessageT;
|
|
354
|
+
messageIndex: number;
|
|
355
|
+
part: ToolUIPart | DynamicToolUIPart;
|
|
356
|
+
partIndex: number;
|
|
357
|
+
}
|
|
358
|
+
/** Derives pending tool approvals straight from the messages — no app-owned shapes. */
|
|
359
|
+
declare function getPendingToolApprovals<MessageT extends UIMessage>(messages: readonly MessageT[], {
|
|
360
|
+
pausedExecutions
|
|
361
|
+
}?: {
|
|
362
|
+
pausedExecutions?: boolean;
|
|
363
|
+
}): Array<PendingToolApproval<MessageT>>;
|
|
364
|
+
interface PromptInputApprovalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "part"> {
|
|
365
|
+
/**
|
|
366
|
+
* The `approval-requested` tool part — or a paused codemode execution —
|
|
367
|
+
* passed whole. Renders nothing for other states.
|
|
368
|
+
*/
|
|
369
|
+
part?: ToolUIPart | DynamicToolUIPart;
|
|
370
|
+
/** A Think `pendingApprovals()` entry for durable parked action approvals. */
|
|
371
|
+
approval?: PendingApproval;
|
|
372
|
+
/** Pass `addToolApprovalResponse` from `useAgentChat`/`useChat` directly. */
|
|
373
|
+
onRespond?: ChatAddToolApproveResponseFunction;
|
|
374
|
+
/** Resolves Think execution approvals instead of `onRespond`. See {@link ExecutionApprovals}. */
|
|
375
|
+
executionApprovals?: ExecutionApprovals;
|
|
376
|
+
/**
|
|
377
|
+
* Renders a Skip action that dismisses the confirmation without responding —
|
|
378
|
+
* the approval stays pending upstream.
|
|
379
|
+
*/
|
|
380
|
+
onSkip?: () => void;
|
|
381
|
+
/** Overrides the default "Do you want to allow…" question. */
|
|
382
|
+
question?: React.ReactNode;
|
|
383
|
+
/** Total pending approvals, for the "1 of N" hint. */
|
|
384
|
+
count?: number;
|
|
385
|
+
}
|
|
386
|
+
/**
|
|
387
|
+
* The composer's approval state: when a tool call awaits human approval the
|
|
388
|
+
* prompt input area becomes the confirmation. "Yes" approves on click; typing
|
|
389
|
+
* in the "No, and tell the agent what to do differently" row selects deny and
|
|
390
|
+
* sends the text as the native approval `reason`. Submit (or Enter) sends the
|
|
391
|
+
* current selection — approve by default.
|
|
392
|
+
*/
|
|
393
|
+
declare function PromptInputApproval({
|
|
394
|
+
part,
|
|
395
|
+
approval: durableApproval,
|
|
396
|
+
onRespond,
|
|
397
|
+
executionApprovals,
|
|
398
|
+
onSkip,
|
|
399
|
+
question,
|
|
400
|
+
count,
|
|
401
|
+
className,
|
|
402
|
+
ref,
|
|
403
|
+
...props
|
|
404
|
+
}: PromptInputApprovalProps & {
|
|
405
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
406
|
+
}): React.JSX.Element | null;
|
|
407
|
+
type PromptInputSelectProps = SelectProps;
|
|
408
|
+
declare const PromptInputSelect: typeof Select;
|
|
409
|
+
type PromptInputSelectTriggerProps = SelectTriggerProps;
|
|
410
|
+
declare function PromptInputSelectTrigger(props: PromptInputSelectTriggerProps): React.JSX.Element;
|
|
411
|
+
type PromptInputSelectContentProps = SelectContentProps;
|
|
412
|
+
declare function PromptInputSelectContent(props: PromptInputSelectContentProps): React.JSX.Element;
|
|
413
|
+
type PromptInputSelectItemProps = SelectItemProps;
|
|
414
|
+
declare const PromptInputSelectItem: typeof SelectOption;
|
|
415
|
+
type PromptInputSelectValueProps = SelectValueProps;
|
|
416
|
+
declare const PromptInputSelectValue: typeof SelectValue;
|
|
417
|
+
interface PromptInputHoverCardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
418
|
+
openDelay?: number;
|
|
419
|
+
closeDelay?: number;
|
|
420
|
+
}
|
|
421
|
+
declare function PromptInputHoverCard({
|
|
422
|
+
openDelay,
|
|
423
|
+
closeDelay,
|
|
424
|
+
className,
|
|
425
|
+
children,
|
|
426
|
+
ref,
|
|
427
|
+
...props
|
|
428
|
+
}: PromptInputHoverCardProps & {
|
|
429
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
430
|
+
}): React.JSX.Element;
|
|
431
|
+
interface PromptInputHoverCardTriggerProps extends React.HTMLAttributes<HTMLSpanElement> {}
|
|
432
|
+
declare function PromptInputHoverCardTrigger({
|
|
433
|
+
className,
|
|
434
|
+
ref,
|
|
435
|
+
...props
|
|
436
|
+
}: PromptInputHoverCardTriggerProps & {
|
|
437
|
+
ref?: React.Ref<HTMLSpanElement>;
|
|
438
|
+
}): React.JSX.Element;
|
|
439
|
+
interface PromptInputHoverCardContentProps extends React.HTMLAttributes<HTMLDivElement> {}
|
|
440
|
+
declare function PromptInputHoverCardContent({
|
|
441
|
+
className,
|
|
442
|
+
ref,
|
|
443
|
+
...props
|
|
444
|
+
}: PromptInputHoverCardContentProps & {
|
|
445
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
446
|
+
}): React.JSX.Element | null;
|
|
447
|
+
type PromptInputTabsListProps = React.ComponentPropsWithoutRef<typeof TabsList>;
|
|
448
|
+
declare const PromptInputTabsList: typeof TabsList;
|
|
449
|
+
type PromptInputTabProps = React.ComponentPropsWithoutRef<typeof Tab>;
|
|
450
|
+
declare const PromptInputTab: typeof Tab;
|
|
451
|
+
type PromptInputTabBodyProps = React.ComponentPropsWithoutRef<typeof TabPanel>;
|
|
452
|
+
declare const PromptInputTabBody: typeof TabPanel;
|
|
453
|
+
interface PromptInputTabLabelProps extends React.HTMLAttributes<HTMLHeadingElement> {}
|
|
454
|
+
declare function PromptInputTabLabel({
|
|
455
|
+
className,
|
|
456
|
+
ref,
|
|
457
|
+
...props
|
|
458
|
+
}: PromptInputTabLabelProps & {
|
|
459
|
+
ref?: React.Ref<HTMLHeadingElement>;
|
|
460
|
+
}): React.JSX.Element;
|
|
461
|
+
interface PromptInputTabItemProps extends React.HTMLAttributes<HTMLDivElement> {}
|
|
462
|
+
declare function PromptInputTabItem({
|
|
463
|
+
className,
|
|
464
|
+
ref,
|
|
465
|
+
...props
|
|
466
|
+
}: PromptInputTabItemProps & {
|
|
467
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
468
|
+
}): React.JSX.Element;
|
|
469
|
+
type PromptInputCommandProps = React.ComponentPropsWithoutRef<typeof Combobox>;
|
|
470
|
+
declare const PromptInputCommand: typeof import("@base-ui/react").ComboboxRoot & {
|
|
471
|
+
Root: typeof import("@base-ui/react").ComboboxRoot;
|
|
472
|
+
Input: typeof ComboboxInput;
|
|
473
|
+
Trigger: typeof ComboboxTrigger;
|
|
474
|
+
Clear: ({
|
|
475
|
+
className,
|
|
476
|
+
ref,
|
|
477
|
+
...props
|
|
478
|
+
}: Omit<React.ComponentPropsWithRef<typeof import("@base-ui/react").ComboboxClear>, "className"> & {
|
|
479
|
+
className?: string;
|
|
480
|
+
} & {
|
|
481
|
+
ref?: React.Ref<HTMLButtonElement>;
|
|
482
|
+
}) => React.JSX.Element;
|
|
483
|
+
Portal: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").AutocompletePortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
484
|
+
Positioner: typeof ComboboxPositioner;
|
|
485
|
+
Popup: typeof ComboboxPopup;
|
|
486
|
+
Content: typeof ComboboxPopup;
|
|
487
|
+
List: typeof ComboboxList;
|
|
488
|
+
Item: typeof ComboboxItem;
|
|
489
|
+
ItemIndicator: ({
|
|
490
|
+
className,
|
|
491
|
+
ref,
|
|
492
|
+
...props
|
|
493
|
+
}: Omit<React.ComponentPropsWithRef<typeof import("@base-ui/react").ComboboxItemIndicator>, "className"> & {
|
|
494
|
+
className?: string;
|
|
495
|
+
} & {
|
|
496
|
+
ref?: React.Ref<HTMLSpanElement>;
|
|
497
|
+
}) => React.JSX.Element;
|
|
498
|
+
Empty: typeof ComboboxEmpty;
|
|
499
|
+
Group: typeof ComboboxGroup;
|
|
500
|
+
GroupLabel: typeof ComboboxLabel;
|
|
501
|
+
Label: typeof ComboboxLabel;
|
|
502
|
+
Value: typeof import("@base-ui/react").ComboboxValue;
|
|
503
|
+
Chips: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
504
|
+
Chip: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").ComboboxChipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
505
|
+
ChipsInput: typeof ComboboxInput;
|
|
506
|
+
Collection: typeof import("@base-ui/react").ComboboxCollection;
|
|
507
|
+
Separator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
508
|
+
};
|
|
509
|
+
type PromptInputCommandInputProps = React.ComponentPropsWithoutRef<typeof ComboboxInput>;
|
|
510
|
+
declare const PromptInputCommandInput: typeof ComboboxInput;
|
|
511
|
+
interface PromptInputCommandListProps extends React.HTMLAttributes<HTMLDivElement> {}
|
|
512
|
+
declare function PromptInputCommandList({
|
|
513
|
+
className,
|
|
514
|
+
ref,
|
|
515
|
+
...props
|
|
516
|
+
}: PromptInputCommandListProps & {
|
|
517
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
518
|
+
}): React.JSX.Element;
|
|
519
|
+
type PromptInputCommandEmptyProps = React.ComponentPropsWithoutRef<typeof ComboboxEmpty>;
|
|
520
|
+
declare const PromptInputCommandEmpty: typeof ComboboxEmpty;
|
|
521
|
+
type PromptInputCommandGroupProps = React.ComponentPropsWithoutRef<typeof ComboboxGroup>;
|
|
522
|
+
declare const PromptInputCommandGroup: typeof ComboboxGroup;
|
|
523
|
+
type PromptInputCommandItemProps = React.ComponentPropsWithoutRef<typeof ComboboxItem>;
|
|
524
|
+
declare const PromptInputCommandItem: typeof ComboboxItem;
|
|
525
|
+
type PromptInputCommandSeparatorProps = React.ComponentPropsWithoutRef<typeof ComboboxSeparator>;
|
|
526
|
+
declare const PromptInputCommandSeparator: React.ForwardRefExoticComponent<Omit<import("@base-ui/react").SeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
527
|
+
//#endregion
|
|
528
|
+
export { PromptInputHoverCardTriggerProps as $, PromptInputCommandEmpty as A, PromptInputTextareaProps as At, PromptInputCommandProps as B, usePromptInputAttachments as Bt, PromptInputAttachmentsProps as C, PromptInputTabItemProps as Ct, PromptInputButtonProps as D, PromptInputTabsList as Dt, PromptInputButton as E, PromptInputTabProps as Et, PromptInputCommandInputProps as F, TextInputContext as Ft, PromptInputFooterProps as G, PromptInputCommandSeparatorProps as H, usePromptInputReferencedSources as Ht, PromptInputCommandItem as I, TooltipSide as It, PromptInputHoverCard as J, PromptInputHeader as K, PromptInputCommandItemProps as L, getApprovalRequestId as Lt, PromptInputCommandGroup as M, PromptInputToolsProps as Mt, PromptInputCommandGroupProps as N, PromptInputTooltipConfig as Nt, PromptInputButtonTooltip as O, PromptInputTabsListProps as Ot, PromptInputCommandInput as P, ReferencedSourcesContext as Pt, PromptInputHoverCardTrigger as Q, PromptInputCommandList as R, getApprovalStateKey as Rt, PromptInputAttachments as S, PromptInputTabItem as St, PromptInputBodyProps as T, PromptInputTabLabelProps as Tt, PromptInputControllerProps as U, useProviderAttachments as Ut, PromptInputCommandSeparator as V, usePromptInputController as Vt, PromptInputFooter as W, PromptInputHoverCardContentProps as X, PromptInputHoverCardContent as Y, PromptInputHoverCardProps as Z, PromptInputActionMenuTriggerProps as _, PromptInputSubmit as _t, PromptInput as a, PromptInputProviderProps as at, PromptInputAttachment as b, PromptInputTabBody as bt, PromptInputActionAddScreenshot as c, PromptInputSelectContent as ct, PromptInputActionMenuContent as d, PromptInputSelectItemProps as dt, PromptInputMessage as et, PromptInputActionMenuContentProps as f, PromptInputSelectProps as ft, PromptInputActionMenuTrigger as g, PromptInputSelectValueProps as gt, PromptInputActionMenuProps as h, PromptInputSelectValue as ht, PermissionMode as i, PromptInputProvider as it, PromptInputCommandEmptyProps as j, PromptInputTools as jt, PromptInputCommand as k, PromptInputTextarea as kt, PromptInputActionAddScreenshotProps as l, PromptInputSelectContentProps as lt, PromptInputActionMenuItemProps as m, PromptInputSelectTriggerProps as mt, ExecutionApprovals as n, PromptInputPermissionSelectorProps as nt, PromptInputActionAddAttachments as o, PromptInputReferencedSource as ot, PromptInputActionMenuItem as p, PromptInputSelectTrigger as pt, PromptInputHeaderProps as q, PendingToolApproval as r, PromptInputProps as rt, PromptInputActionAddAttachmentsProps as s, PromptInputSelect as st, AttachmentsContext as t, PromptInputPermissionSelector as tt, PromptInputActionMenu as u, PromptInputSelectItem as ut, PromptInputApproval as v, PromptInputSubmitProps as vt, PromptInputBody as w, PromptInputTabLabel as wt, PromptInputAttachmentProps as x, PromptInputTabBodyProps as xt, PromptInputApprovalProps as y, PromptInputTab as yt, PromptInputCommandListProps as z, getPendingToolApprovals as zt };
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { InferUITools, ToolUIPart, UIMessage } from "ai";
|
|
2
|
+
import { ProxyToolInput, ProxyToolOutput } from "@cloudflare/codemode";
|
|
3
|
+
import { QuickActionExtractInput, QuickActionPage, QuickActionScrapeInput, QuickActionToolName } from "@cloudflare/think/tools/browser";
|
|
4
|
+
import { FetchResult } from "@cloudflare/think/tools/fetch";
|
|
5
|
+
import { WorkspaceTools } from "@cloudflare/think/tools/workspace";
|
|
6
|
+
|
|
7
|
+
//#region src/components/ThinkChatToolParts.d.ts
|
|
8
|
+
type ThinkChatPart = UIMessage["parts"][number];
|
|
9
|
+
type WorkspaceUITools = InferUITools<Required<WorkspaceTools>>;
|
|
10
|
+
type WorkspaceToolPart = ToolUIPart<WorkspaceUITools>;
|
|
11
|
+
type ThinkWorkspaceToolName = keyof WorkspaceUITools;
|
|
12
|
+
type ThinkBashToolPart = Extract<WorkspaceToolPart, {
|
|
13
|
+
type: "tool-bash";
|
|
14
|
+
}>;
|
|
15
|
+
type ThinkBashToolOutput = WorkspaceUITools["bash"]["output"];
|
|
16
|
+
declare function isWorkspaceToolPart(part: ThinkChatPart): part is WorkspaceToolPart;
|
|
17
|
+
type SkillUITools = {
|
|
18
|
+
activate_skill: {
|
|
19
|
+
input: {
|
|
20
|
+
name: string;
|
|
21
|
+
};
|
|
22
|
+
output: string;
|
|
23
|
+
};
|
|
24
|
+
read_skill_resource: {
|
|
25
|
+
input: {
|
|
26
|
+
name?: string;
|
|
27
|
+
path: string;
|
|
28
|
+
};
|
|
29
|
+
output: string;
|
|
30
|
+
};
|
|
31
|
+
run_skill_script: {
|
|
32
|
+
input: {
|
|
33
|
+
name: string;
|
|
34
|
+
path: string;
|
|
35
|
+
input?: unknown;
|
|
36
|
+
};
|
|
37
|
+
output: unknown;
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
type SkillToolPart = ToolUIPart<SkillUITools>;
|
|
41
|
+
declare function isSkillToolPart(part: ThinkChatPart): part is SkillToolPart;
|
|
42
|
+
type FetchToolPart = ToolUIPart<Record<string, {
|
|
43
|
+
input: {
|
|
44
|
+
url?: string;
|
|
45
|
+
path?: string;
|
|
46
|
+
};
|
|
47
|
+
output: FetchResult;
|
|
48
|
+
}>>;
|
|
49
|
+
declare function isFetchToolPart(part: ThinkChatPart): part is FetchToolPart;
|
|
50
|
+
type QuickActionInputs = {
|
|
51
|
+
markdown: QuickActionPage;
|
|
52
|
+
extract: QuickActionExtractInput;
|
|
53
|
+
links: QuickActionPage;
|
|
54
|
+
scrape: QuickActionScrapeInput;
|
|
55
|
+
content: QuickActionPage;
|
|
56
|
+
};
|
|
57
|
+
type BrowserUITools = {
|
|
58
|
+
browser_execute: {
|
|
59
|
+
input: ProxyToolInput;
|
|
60
|
+
output: ProxyToolOutput;
|
|
61
|
+
};
|
|
62
|
+
} & { [K in QuickActionToolName as `browser_${K}`]: {
|
|
63
|
+
input: QuickActionInputs[K];
|
|
64
|
+
output: unknown;
|
|
65
|
+
} };
|
|
66
|
+
type BrowserToolPart = ToolUIPart<BrowserUITools>;
|
|
67
|
+
declare function isBrowserToolPart(part: ThinkChatPart): part is BrowserToolPart;
|
|
68
|
+
type ExecuteToolPart = ToolUIPart<{
|
|
69
|
+
execute: {
|
|
70
|
+
input: ProxyToolInput;
|
|
71
|
+
output: ProxyToolOutput;
|
|
72
|
+
};
|
|
73
|
+
}>;
|
|
74
|
+
declare function isExecuteToolPart(part: ThinkChatPart): part is ExecuteToolPart;
|
|
75
|
+
/** Agent work (reasoning, tool calls, step boundaries) vs. content shown to the user. */
|
|
76
|
+
declare function isThinkChatActivityPart(part: ThinkChatPart | undefined, excludeTools?: ReadonlySet<string>): boolean;
|
|
77
|
+
/** In-flight: the stream opened this part but hasn't delivered its result yet. */
|
|
78
|
+
declare function isPartWorking(part: ThinkChatPart): boolean;
|
|
79
|
+
/** Errored or denied — upstream's simplified tool-part state vocabulary. */
|
|
80
|
+
declare function isPartFailed(part: ThinkChatPart): boolean;
|
|
81
|
+
declare function displayUrl(url: string | undefined): string;
|
|
82
|
+
//#endregion
|
|
83
|
+
export { isThinkChatActivityPart as _, ThinkBashToolOutput as a, ThinkWorkspaceToolName as c, isBrowserToolPart as d, isExecuteToolPart as f, isSkillToolPart as g, isPartWorking as h, SkillToolPart as i, WorkspaceToolPart as l, isPartFailed as m, ExecuteToolPart as n, ThinkBashToolPart as o, isFetchToolPart as p, FetchToolPart as r, ThinkChatPart as s, BrowserToolPart as t, displayUrl as u, isWorkspaceToolPart as v };
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { et as PromptInputMessage, n as ExecutionApprovals } from "../PromptInput-D6-G24p7.js";
|
|
2
2
|
import * as React from "react";
|
|
3
|
-
import { ChatAddToolApproveResponseFunction, UIMessage } from "ai";
|
|
3
|
+
import { ChatAddToolApproveResponseFunction, ChatStatus, UIMessage } from "ai";
|
|
4
|
+
import { PendingApproval } from "@cloudflare/think";
|
|
4
5
|
|
|
5
6
|
//#region src/components/AgentChat.d.ts
|
|
6
7
|
type AgentChatPart<MessageT extends UIMessage = UIMessage> = MessageT["parts"][number];
|
|
@@ -19,7 +20,7 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
|
|
|
19
20
|
/** AI SDK `UIMessage`s to render, oldest first. */
|
|
20
21
|
messages: readonly MessageT[];
|
|
21
22
|
/** Drives the composer's send/stop affordance and streaming indicators. */
|
|
22
|
-
status?:
|
|
23
|
+
status?: ChatStatus;
|
|
23
24
|
/** Called with the composed message when the user submits. Omit for a read-only transcript. */
|
|
24
25
|
onSubmit?: (message: PromptInputMessage) => void | Promise<void>;
|
|
25
26
|
/** Called when the user hits stop while `status` is streaming/submitted. */
|
|
@@ -49,11 +50,10 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
|
|
|
49
50
|
* confirmation.
|
|
50
51
|
*/
|
|
51
52
|
onApprovalResponse?: ChatAddToolApproveResponseFunction;
|
|
52
|
-
/**
|
|
53
|
-
* When set, paused codemode executions surface in the same composer
|
|
54
|
-
* confirmation as tool approvals. See {@link ExecutionApprovals}.
|
|
55
|
-
*/
|
|
53
|
+
/** Resolves Think execution approvals. See {@link ExecutionApprovals}. */
|
|
56
54
|
executionApprovals?: ExecutionApprovals;
|
|
55
|
+
/** Think durable-pause approvals from `pendingApprovals()`, rendered when `executionApprovals` is set. */
|
|
56
|
+
pendingApprovals?: readonly PendingApproval[];
|
|
57
57
|
/**
|
|
58
58
|
* When set, a Context ring in the composer footer shows how much of the
|
|
59
59
|
* model's window the conversation occupies. Used tokens come from the
|
|
@@ -70,13 +70,9 @@ interface AgentChatProps<MessageT extends UIMessage = UIMessage> {
|
|
|
70
70
|
renderMessageAfter?: (context: AgentChatRenderMessageContext<MessageT>) => React.ReactNode;
|
|
71
71
|
}
|
|
72
72
|
/**
|
|
73
|
-
*
|
|
74
|
-
*
|
|
75
|
-
*
|
|
76
|
-
*
|
|
77
|
-
* This is the presentational layer under `ThinkChat` — props in, no
|
|
78
|
-
* transport. Use it directly with plain AI SDK `useChat` or a read-only
|
|
79
|
-
* transcript; if you have a Cloudflare Think agent, use `ThinkChat` instead.
|
|
73
|
+
* Low-level transcript/composer surface used by `ThinkChat`: props in, no
|
|
74
|
+
* transport. Product code that talks to a Cloudflare Think agent should render
|
|
75
|
+
* `ThinkChat`; use this directly only for plain AI SDK or read-only messages.
|
|
80
76
|
*/
|
|
81
77
|
declare function AgentChat<MessageT extends UIMessage = UIMessage>({
|
|
82
78
|
className,
|
|
@@ -93,6 +89,7 @@ declare function AgentChat<MessageT extends UIMessage = UIMessage>({
|
|
|
93
89
|
onRegenerate,
|
|
94
90
|
onApprovalResponse,
|
|
95
91
|
executionApprovals,
|
|
92
|
+
pendingApprovals: durableApprovals,
|
|
96
93
|
contextWindow,
|
|
97
94
|
renderPart,
|
|
98
95
|
renderMessageAfter,
|