@mcp-b/react-components 0.6.4 → 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.
Files changed (42) hide show
  1. package/dist/PromptInput-D6-G24p7.d.ts +528 -0
  2. package/dist/ThinkChatToolParts-DnUiZgCC.d.ts +83 -0
  3. package/dist/components/AgentChat.d.ts +11 -14
  4. package/dist/components/AgentChat.js +76 -57
  5. package/dist/components/AgentConnection.js +21 -18
  6. package/dist/components/Context.d.ts +6 -10
  7. package/dist/components/Context.js +4 -2
  8. package/dist/components/Conversation.d.ts +28 -28
  9. package/dist/components/Conversation.js +35 -54
  10. package/dist/components/Marker.d.ts +57 -0
  11. package/dist/components/Marker.js +89 -0
  12. package/dist/components/McpServerPicker.js +8 -10
  13. package/dist/components/MessageScroller.d.ts +52 -0
  14. package/dist/components/MessageScroller.js +62 -0
  15. package/dist/components/PromptInput.d.ts +2 -534
  16. package/dist/components/PromptInput.js +17 -11
  17. package/dist/components/ThinkChat.d.ts +10 -77
  18. package/dist/components/ThinkChat.js +59 -856
  19. package/dist/components/ThinkChatActivity.d.ts +73 -0
  20. package/dist/components/ThinkChatActivity.js +429 -0
  21. package/dist/components/ThinkChatContext.d.ts +28 -0
  22. package/dist/components/ThinkChatContext.js +10 -0
  23. package/dist/components/ThinkChatToolPanels.d.ts +39 -0
  24. package/dist/components/ThinkChatToolPanels.js +355 -0
  25. package/dist/components/ThinkChatToolParts.d.ts +2 -0
  26. package/dist/components/ThinkChatToolParts.js +66 -0
  27. package/dist/components/WorkspaceExplorer.d.ts +1 -1
  28. package/dist/components/useStickToBottom.d.ts +5 -2
  29. package/dist/components/useStickToBottom.js +5 -2
  30. package/dist/styles/agent-chat.css +15 -3
  31. package/dist/styles/agent-connection.css +12 -0
  32. package/dist/styles/code-block.css +4 -4
  33. package/dist/styles/conversation.css +10 -0
  34. package/dist/styles/index.css +2 -0
  35. package/dist/styles/marker.css +95 -0
  36. package/dist/styles/message-scroller.css +90 -0
  37. package/dist/styles/message.css +2 -1
  38. package/dist/styles/scrollbars.css +10 -2
  39. package/dist/styles/streamdown.css +2 -0
  40. package/dist/utils/mcp-server-catalog.d.ts +392 -1
  41. package/dist/utils/mcp-server-catalog.js +137 -1
  42. 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 { ExecutionApprovals, PromptInputMessage, PromptInputStatus } from "./PromptInput.js";
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?: PromptInputStatus;
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
- * A complete agent chat surface: auto-scrolling conversation of AI SDK
74
- * `UIMessage`s (text, reasoning, and tool parts rendered by default) plus a
75
- * prompt composer. Customize per-part rendering with `renderPart`.
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,