modifywithai 1.9.0 → 2.0.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.
@@ -0,0 +1,1227 @@
1
+ import { S as UseDynamicUIReturn, a as AssistantConfig, b as UseAssistantTokenOptions, c as DynamicButton, g as ToolAction, l as DynamicButtonGroup, t as ActionDefinition, v as UseAssistantOptions, x as UseAssistantTokenReturn, y as UseAssistantReturn } from "./types-CzieyGF2.js";
2
+ import * as React$2 from "react";
3
+ import React$1, { ComponentProps, FormEvent, HTMLAttributes, ReactNode } from "react";
4
+ import { ClassValue } from "clsx";
5
+ import * as react_jsx_runtime5 from "react/jsx-runtime";
6
+ import { ComponentRegistry, ComponentRenderProps } from "@json-render/react";
7
+ import { ChatStatus, ToolUIPart, UIMessage } from "ai";
8
+ import { Streamdown } from "streamdown";
9
+ import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
10
+ import { Drawer } from "vaul-base";
11
+ import { UITree } from "@json-render/core";
12
+
13
+ //#region src/assistant/components/confirmation.d.ts
14
+ /**
15
+ * Approval state for a tool invocation
16
+ */
17
+ type ToolUIPartApproval = {
18
+ id: string;
19
+ approved?: never;
20
+ reason?: never;
21
+ } | {
22
+ id: string;
23
+ approved: boolean;
24
+ reason?: string;
25
+ } | undefined;
26
+ type ConfirmationProps = ComponentProps<"div"> & {
27
+ /** The approval state from the tool invocation */approval?: ToolUIPartApproval; /** The current state of the tool invocation */
28
+ state: ToolUIPart["state"];
29
+ };
30
+ /**
31
+ * Container for tool approval/confirmation UI
32
+ *
33
+ * Provides context for child components and handles visibility
34
+ * based on the tool invocation state.
35
+ *
36
+ * @example
37
+ * ```tsx
38
+ * <Confirmation state={state} approval={approval}>
39
+ * <ConfirmationTitle>Confirm action</ConfirmationTitle>
40
+ * <ConfirmationRequest>
41
+ * <ul>{actions.map(a => <li key={a.name}>{a.name}</li>)}</ul>
42
+ * </ConfirmationRequest>
43
+ * <ConfirmationAccepted>Done!</ConfirmationAccepted>
44
+ * <ConfirmationRejected>Cancelled</ConfirmationRejected>
45
+ * <ConfirmationActions>
46
+ * <ConfirmationAction onClick={deny}>Deny</ConfirmationAction>
47
+ * <ConfirmationAction onClick={approve}>Approve</ConfirmationAction>
48
+ * </ConfirmationActions>
49
+ * </Confirmation>
50
+ * ```
51
+ */
52
+ declare function Confirmation({
53
+ className,
54
+ approval,
55
+ state,
56
+ ...props
57
+ }: ConfirmationProps): react_jsx_runtime5.JSX.Element | null;
58
+ type ConfirmationTitleProps = ComponentProps<"p">;
59
+ /**
60
+ * Title for the confirmation dialog
61
+ */
62
+ declare function ConfirmationTitle({
63
+ className,
64
+ ...props
65
+ }: ConfirmationTitleProps): react_jsx_runtime5.JSX.Element;
66
+ type ConfirmationRequestProps = {
67
+ children?: ReactNode;
68
+ };
69
+ /**
70
+ * Content shown when approval is requested (before user response)
71
+ */
72
+ declare function ConfirmationRequest({
73
+ children
74
+ }: ConfirmationRequestProps): react_jsx_runtime5.JSX.Element | null;
75
+ type ConfirmationAcceptedProps = {
76
+ children?: ReactNode;
77
+ };
78
+ /**
79
+ * Content shown when the action was approved
80
+ */
81
+ declare function ConfirmationAccepted({
82
+ children
83
+ }: ConfirmationAcceptedProps): react_jsx_runtime5.JSX.Element | null;
84
+ type ConfirmationRejectedProps = {
85
+ children?: ReactNode;
86
+ };
87
+ /**
88
+ * Content shown when the action was rejected/denied
89
+ */
90
+ declare function ConfirmationRejected({
91
+ children
92
+ }: ConfirmationRejectedProps): react_jsx_runtime5.JSX.Element | null;
93
+ type ConfirmationActionsProps = ComponentProps<"div">;
94
+ /**
95
+ * Container for approve/deny action buttons
96
+ *
97
+ * Only visible when approval is requested.
98
+ */
99
+ declare function ConfirmationActions({
100
+ className,
101
+ ...props
102
+ }: ConfirmationActionsProps): react_jsx_runtime5.JSX.Element | null;
103
+ type ConfirmationActionProps = ComponentProps<"button"> & {
104
+ /** Button variant for styling */variant?: "default" | "outline" | "destructive";
105
+ };
106
+ /**
107
+ * Action button for the confirmation dialog (approve/deny)
108
+ *
109
+ * @example
110
+ * ```tsx
111
+ * <ConfirmationActions>
112
+ * <ConfirmationAction variant="outline" onClick={deny}>
113
+ * Deny
114
+ * </ConfirmationAction>
115
+ * <ConfirmationAction onClick={approve}>
116
+ * Approve
117
+ * </ConfirmationAction>
118
+ * </ConfirmationActions>
119
+ * ```
120
+ */
121
+ declare function ConfirmationAction({
122
+ className,
123
+ variant,
124
+ ...props
125
+ }: ConfirmationActionProps): react_jsx_runtime5.JSX.Element;
126
+ //#endregion
127
+ //#region src/assistant/components/conversation.d.ts
128
+ type ConversationProps = HTMLAttributes<HTMLDivElement>;
129
+ /**
130
+ * Container for the chat conversation
131
+ *
132
+ * Provides semantic structure with `role="log"` for accessibility.
133
+ *
134
+ * @example
135
+ * ```tsx
136
+ * <Conversation>
137
+ * <ConversationContent>
138
+ * {messages.length === 0 ? (
139
+ * <ConversationEmptyState
140
+ * title="No messages yet"
141
+ * description="Start a conversation"
142
+ * />
143
+ * ) : (
144
+ * messages.map(msg => <Message key={msg.id} {...msg} />)
145
+ * )}
146
+ * </ConversationContent>
147
+ * </Conversation>
148
+ * ```
149
+ */
150
+ declare function Conversation({
151
+ className,
152
+ children,
153
+ ...props
154
+ }: ConversationProps): react_jsx_runtime5.JSX.Element;
155
+ type ConversationContentProps = HTMLAttributes<HTMLDivElement>;
156
+ /**
157
+ * Scrollable content area for messages
158
+ *
159
+ * Automatically scrolls to the bottom when children change,
160
+ * keeping the most recent messages visible.
161
+ *
162
+ * @example
163
+ * ```tsx
164
+ * <ConversationContent aria-live="polite">
165
+ * {messages.map(msg => <Message key={msg.id} {...msg} />)}
166
+ * </ConversationContent>
167
+ * ```
168
+ */
169
+ declare function ConversationContent({
170
+ className,
171
+ children,
172
+ ...props
173
+ }: ConversationContentProps): react_jsx_runtime5.JSX.Element;
174
+ type ConversationEmptyStateProps = ComponentProps<"div"> & {
175
+ /** Title text for the empty state */title?: string; /** Description text for the empty state */
176
+ description?: string; /** Icon to display above the title */
177
+ icon?: ReactNode;
178
+ };
179
+ /**
180
+ * Empty state placeholder shown when there are no messages
181
+ *
182
+ * @example
183
+ * ```tsx
184
+ * <ConversationEmptyState
185
+ * icon={<MessageSquare className="size-12" />}
186
+ * title="Start a conversation"
187
+ * description="Ask me anything about your tasks"
188
+ * />
189
+ * ```
190
+ */
191
+ declare function ConversationEmptyState({
192
+ className,
193
+ title,
194
+ description,
195
+ icon,
196
+ children,
197
+ ...props
198
+ }: ConversationEmptyStateProps): react_jsx_runtime5.JSX.Element;
199
+ type ConversationScrollButtonProps = ComponentProps<"button">;
200
+ /**
201
+ * Button to scroll to the bottom of the conversation
202
+ *
203
+ * @example
204
+ * ```tsx
205
+ * <ConversationScrollButton onClick={scrollToBottom}>
206
+ * <ArrowDownIcon />
207
+ * </ConversationScrollButton>
208
+ * ```
209
+ */
210
+ declare function ConversationScrollButton({
211
+ className,
212
+ ...props
213
+ }: ConversationScrollButtonProps): null;
214
+ //#endregion
215
+ //#region src/assistant/components/dynamic-action-modal.d.ts
216
+ interface DynamicActionModalProps {
217
+ /** The button that was clicked */
218
+ button: DynamicButton | null;
219
+ /** Available action definitions (to check for required options) */
220
+ availableActions?: ActionDefinition[];
221
+ /** Called when actions should be executed */
222
+ onExecute: (actions: ToolAction[]) => void;
223
+ /** Called when modal should close */
224
+ onClose: () => void;
225
+ }
226
+ /**
227
+ * Modal that handles button click flows:
228
+ * 1. If actions need input, render form fields
229
+ * 2. If actions need approval, show confirmation
230
+ * 3. Execute actions when complete
231
+ */
232
+ declare function DynamicActionModal({
233
+ button,
234
+ availableActions,
235
+ onExecute,
236
+ onClose
237
+ }: DynamicActionModalProps): react_jsx_runtime5.JSX.Element | null;
238
+ //#endregion
239
+ //#region src/assistant/components/dynamic-ui.d.ts
240
+ interface DynamicUIProps {
241
+ /** Additional CSS class names */
242
+ className?: string;
243
+ }
244
+ /**
245
+ * DynamicUI component that renders persistent action buttons
246
+ *
247
+ * This component:
248
+ * - Renders within AssistantProvider context
249
+ * - Displays buttons that trigger arrays of actions
250
+ * - Shows input modal when actions require data collection
251
+ * - Shows approval modal when actions have approvalRequired: true
252
+ * - Persists button configuration to localStorage
253
+ *
254
+ * The AI can add/remove/update buttons via the manageDynamicUI tool.
255
+ *
256
+ * @example
257
+ * ```tsx
258
+ * import { AssistantProvider, DynamicUI } from "modifywithai"
259
+ *
260
+ * function App() {
261
+ * return (
262
+ * <AssistantProvider
263
+ * endUserId="user-123"
264
+ * availableActions={MY_ACTIONS}
265
+ * onAction={handleAction}
266
+ * >
267
+ * <DynamicUI className="my-quick-actions" />
268
+ * <MainContent />
269
+ * <AssistantChat />
270
+ * </AssistantProvider>
271
+ * )
272
+ * }
273
+ * ```
274
+ */
275
+ declare function DynamicUI({
276
+ className
277
+ }: DynamicUIProps): react_jsx_runtime5.JSX.Element | null;
278
+ //#endregion
279
+ //#region src/assistant/components/dynamic-ui-components.d.ts
280
+ /**
281
+ * Renderer for DynamicButton elements
282
+ *
283
+ * Renders a button that triggers its configured actions when clicked.
284
+ * Uses the onAction callback to handle action execution.
285
+ */
286
+ declare function DynamicButtonRenderer({
287
+ element,
288
+ onAction
289
+ }: ComponentRenderProps<DynamicButton>): react_jsx_runtime5.JSX.Element;
290
+ /**
291
+ * Renderer for DynamicButtonGroup elements
292
+ *
293
+ * Renders a container for organizing buttons.
294
+ * When no label is set (e.g., root group), renders children directly without wrapper.
295
+ */
296
+ declare function DynamicButtonGroupRenderer({
297
+ element,
298
+ children
299
+ }: ComponentRenderProps<DynamicButtonGroup>): react_jsx_runtime5.JSX.Element;
300
+ /**
301
+ * Component registry for DynamicUI rendering
302
+ */
303
+ declare const dynamicUIRegistry: ComponentRegistry;
304
+ //#endregion
305
+ //#region src/assistant/components/form-components.d.ts
306
+ /**
307
+ * Form component - renders a card container with children and submit button
308
+ *
309
+ * Props:
310
+ * - id: Form identifier (used in submit/cancel callbacks)
311
+ * - title: Optional title displayed in header
312
+ * - submitLabel: Label for submit button (default: "Submit")
313
+ */
314
+ declare function FormRenderer({
315
+ element,
316
+ children,
317
+ onAction
318
+ }: ComponentRenderProps<{
319
+ id: string;
320
+ title?: string;
321
+ submitLabel?: string;
322
+ }>): react_jsx_runtime5.JSX.Element;
323
+ /**
324
+ * TextField component - renders a labeled input field
325
+ *
326
+ * Props:
327
+ * - name: Input name attribute
328
+ * - label: Label text
329
+ * - placeholder: Placeholder text
330
+ * - required: Whether field is required
331
+ * - defaultValue: Initial value
332
+ */
333
+ declare function TextFieldRenderer({
334
+ element
335
+ }: ComponentRenderProps<{
336
+ name: string;
337
+ label: string;
338
+ placeholder?: string;
339
+ required?: boolean;
340
+ defaultValue?: string;
341
+ }>): react_jsx_runtime5.JSX.Element;
342
+ /**
343
+ * TextArea component - renders a labeled textarea for longer text
344
+ *
345
+ * Props:
346
+ * - name: Input name attribute
347
+ * - label: Label text
348
+ * - placeholder: Placeholder text
349
+ * - required: Whether field is required
350
+ * - defaultValue: Initial value
351
+ * - rows: Number of rows (default: 3)
352
+ */
353
+ declare function TextAreaRenderer({
354
+ element
355
+ }: ComponentRenderProps<{
356
+ name: string;
357
+ label: string;
358
+ placeholder?: string;
359
+ required?: boolean;
360
+ defaultValue?: string;
361
+ rows?: number;
362
+ }>): react_jsx_runtime5.JSX.Element;
363
+ /**
364
+ * DateField component - renders a labeled date input
365
+ *
366
+ * Props:
367
+ * - name: Input name attribute
368
+ * - label: Label text
369
+ * - required: Whether field is required
370
+ * - defaultValue: Initial value (ISO format)
371
+ * - min: Minimum date (ISO format)
372
+ * - max: Maximum date (ISO format)
373
+ */
374
+ declare function DateFieldRenderer({
375
+ element
376
+ }: ComponentRenderProps<{
377
+ name: string;
378
+ label: string;
379
+ required?: boolean;
380
+ defaultValue?: string;
381
+ min?: string;
382
+ max?: string;
383
+ }>): react_jsx_runtime5.JSX.Element;
384
+ /**
385
+ * Default component registry for form rendering
386
+ *
387
+ * Available components:
388
+ * - Form: Container with submit/cancel buttons
389
+ * - TextField: Text input with label
390
+ * - TextArea: Multi-line text input
391
+ * - DateField: Date picker input
392
+ *
393
+ * @example Extending the registry
394
+ * ```tsx
395
+ * import { defaultFormRegistry } from "modifywithai"
396
+ *
397
+ * const myRegistry = {
398
+ * ...defaultFormRegistry,
399
+ * CustomField: MyCustomFieldComponent,
400
+ * }
401
+ * ```
402
+ */
403
+ declare const defaultFormRegistry: ComponentRegistry;
404
+ //#endregion
405
+ //#region src/assistant/components/form-renderer.d.ts
406
+ interface AssistantFormRendererProps {
407
+ /** The UI tree to render (from renderUI tool output) */
408
+ ui: UITree;
409
+ /** Optional context data to pass to the form */
410
+ context?: Record<string, unknown>;
411
+ /** Called when form is submitted with formId and data */
412
+ onSubmit: (formId: string, data: Record<string, string>) => void;
413
+ /** Called when form is cancelled */
414
+ onCancel?: (formId: string) => void;
415
+ /** Custom component registry (defaults to defaultFormRegistry) */
416
+ registry?: ComponentRegistry;
417
+ }
418
+ /**
419
+ * Renders AI-generated forms from the renderUI tool output
420
+ *
421
+ * Wraps json-render's Renderer with a form component registry
422
+ * and handles form submission/cancellation.
423
+ *
424
+ * @example Basic usage
425
+ * ```tsx
426
+ * <AssistantFormRenderer
427
+ * ui={output.ui}
428
+ * context={output.context}
429
+ * onSubmit={(formId, data) => {
430
+ * sendMessage({ text: `[Form:${formId}] ${JSON.stringify(data)}` })
431
+ * }}
432
+ * onCancel={(formId) => {
433
+ * sendMessage({ text: `[Form:${formId}] cancelled` })
434
+ * }}
435
+ * />
436
+ * ```
437
+ *
438
+ * @example With custom registry
439
+ * ```tsx
440
+ * import { defaultFormRegistry } from "modifywithai"
441
+ *
442
+ * <AssistantFormRenderer
443
+ * ui={output.ui}
444
+ * onSubmit={handleSubmit}
445
+ * registry={{
446
+ * ...defaultFormRegistry,
447
+ * CustomField: MyCustomFieldComponent,
448
+ * }}
449
+ * />
450
+ * ```
451
+ */
452
+ declare function AssistantFormRenderer({
453
+ ui,
454
+ context,
455
+ onSubmit,
456
+ onCancel,
457
+ registry
458
+ }: AssistantFormRendererProps): react_jsx_runtime5.JSX.Element;
459
+ //#endregion
460
+ //#region src/assistant/components/message.d.ts
461
+ type MessageProps = HTMLAttributes<HTMLDivElement> & {
462
+ /** The role of the message sender */from: UIMessage["role"];
463
+ };
464
+ /**
465
+ * Container for a single chat message
466
+ *
467
+ * Automatically styles user messages on the right and assistant messages on the left.
468
+ * Uses CSS class `.is-user` and `.is-assistant` for easy customization.
469
+ *
470
+ * @example
471
+ * ```tsx
472
+ * <Message from="user">
473
+ * <MessageContent>Hello!</MessageContent>
474
+ * </Message>
475
+ *
476
+ * <Message from="assistant">
477
+ * <MessageContent>
478
+ * <MessageResponse>{response.text}</MessageResponse>
479
+ * </MessageContent>
480
+ * </Message>
481
+ * ```
482
+ */
483
+ declare function Message({
484
+ className,
485
+ from,
486
+ ...props
487
+ }: MessageProps): react_jsx_runtime5.JSX.Element;
488
+ type MessageContentProps = HTMLAttributes<HTMLDivElement>;
489
+ /**
490
+ * Content wrapper for message text/elements
491
+ *
492
+ * Provides styling context for user vs assistant messages.
493
+ * User messages get a background and rounded corners.
494
+ *
495
+ * @example
496
+ * ```tsx
497
+ * <MessageContent>
498
+ * {part.type === "text" ? (
499
+ * <MessageResponse>{part.text}</MessageResponse>
500
+ * ) : null}
501
+ * </MessageContent>
502
+ * ```
503
+ */
504
+ declare function MessageContent({
505
+ children,
506
+ className,
507
+ ...props
508
+ }: MessageContentProps): react_jsx_runtime5.JSX.Element;
509
+ type MessageResponseProps = ComponentProps<typeof Streamdown>;
510
+ /**
511
+ * Renders markdown content from the assistant using Streamdown
512
+ *
513
+ * Memoized for performance - only re-renders when children change.
514
+ * Supports streaming markdown content with proper rendering.
515
+ *
516
+ * @example
517
+ * ```tsx
518
+ * <MessageResponse>
519
+ * {message.text}
520
+ * </MessageResponse>
521
+ * ```
522
+ */
523
+ declare const MessageResponse: React$1.MemoExoticComponent<(props: MessageResponseProps) => React$1.JSX.Element>;
524
+ //#endregion
525
+ //#region src/assistant/components/primitives/collapsible.d.ts
526
+ /**
527
+ * Root collapsible component
528
+ *
529
+ * @example
530
+ * ```tsx
531
+ * <Collapsible defaultOpen={true}>
532
+ * <CollapsibleTrigger>Toggle</CollapsibleTrigger>
533
+ * <CollapsibleContent>
534
+ * Content that can be shown/hidden
535
+ * </CollapsibleContent>
536
+ * </Collapsible>
537
+ * ```
538
+ */
539
+ declare function Collapsible({
540
+ ...props
541
+ }: React.ComponentProps<typeof CollapsiblePrimitive.Root>): react_jsx_runtime5.JSX.Element;
542
+ /**
543
+ * Trigger element that toggles the collapsible content
544
+ */
545
+ declare function CollapsibleTrigger({
546
+ ...props
547
+ }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): react_jsx_runtime5.JSX.Element;
548
+ /**
549
+ * Content that is shown/hidden based on the collapsible state
550
+ *
551
+ * Uses data-[state=open] and data-[state=closed] for styling animations
552
+ */
553
+ declare function CollapsibleContent({
554
+ ...props
555
+ }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): react_jsx_runtime5.JSX.Element;
556
+ //#endregion
557
+ //#region src/assistant/components/primitives/drawer.d.ts
558
+ /**
559
+ * Root drawer component
560
+ *
561
+ * @example
562
+ * ```tsx
563
+ * <Drawer>
564
+ * <DrawerTrigger>Open</DrawerTrigger>
565
+ * <DrawerContent>
566
+ * <DrawerHeader>
567
+ * <DrawerTitle>Drawer Title</DrawerTitle>
568
+ * <DrawerDescription>Optional description</DrawerDescription>
569
+ * </DrawerHeader>
570
+ * <div>Content here</div>
571
+ * <DrawerFooter>
572
+ * <DrawerClose>Close</DrawerClose>
573
+ * </DrawerFooter>
574
+ * </DrawerContent>
575
+ * </Drawer>
576
+ * ```
577
+ */
578
+ declare function Drawer$1({
579
+ ...props
580
+ }: React$2.ComponentProps<typeof Drawer.Root>): react_jsx_runtime5.JSX.Element;
581
+ /**
582
+ * Trigger element that opens the drawer
583
+ */
584
+ declare function DrawerTrigger({
585
+ ...props
586
+ }: React$2.ComponentProps<typeof Drawer.Trigger>): react_jsx_runtime5.JSX.Element;
587
+ /**
588
+ * Portal for rendering drawer content outside the DOM hierarchy
589
+ */
590
+ declare function DrawerPortal({
591
+ ...props
592
+ }: React$2.ComponentProps<typeof Drawer.Portal>): react_jsx_runtime5.JSX.Element;
593
+ /**
594
+ * Close button element for the drawer
595
+ */
596
+ declare function DrawerClose({
597
+ ...props
598
+ }: React$2.ComponentProps<typeof Drawer.Close>): react_jsx_runtime5.JSX.Element;
599
+ /**
600
+ * Overlay backdrop for the drawer
601
+ */
602
+ declare function DrawerOverlay({
603
+ className,
604
+ ...props
605
+ }: React$2.ComponentProps<typeof Drawer.Overlay>): react_jsx_runtime5.JSX.Element;
606
+ interface DrawerContentProps extends React$2.ComponentProps<typeof Drawer.Content> {
607
+ /** Whether to render the overlay (default: true) */
608
+ overlay?: boolean;
609
+ }
610
+ /**
611
+ * Content container for the drawer
612
+ *
613
+ * Supports multiple directions via the `direction` prop on the root Drawer:
614
+ * - bottom: Slides up from the bottom
615
+ * - top: Slides down from the top
616
+ * - left: Slides in from the left
617
+ * - right: Slides in from the right
618
+ */
619
+ declare function DrawerContent({
620
+ className,
621
+ children,
622
+ overlay,
623
+ ...props
624
+ }: DrawerContentProps): react_jsx_runtime5.JSX.Element;
625
+ /**
626
+ * Header section for the drawer
627
+ */
628
+ declare function DrawerHeader({
629
+ className,
630
+ ...props
631
+ }: React$2.ComponentProps<"div">): react_jsx_runtime5.JSX.Element;
632
+ /**
633
+ * Footer section for the drawer
634
+ */
635
+ declare function DrawerFooter({
636
+ className,
637
+ ...props
638
+ }: React$2.ComponentProps<"div">): react_jsx_runtime5.JSX.Element;
639
+ /**
640
+ * Title element for the drawer
641
+ */
642
+ declare function DrawerTitle({
643
+ className,
644
+ ...props
645
+ }: React$2.ComponentProps<typeof Drawer.Title>): react_jsx_runtime5.JSX.Element;
646
+ /**
647
+ * Description element for the drawer
648
+ */
649
+ declare function DrawerDescription({
650
+ className,
651
+ ...props
652
+ }: React$2.ComponentProps<typeof Drawer.Description>): react_jsx_runtime5.JSX.Element;
653
+ //#endregion
654
+ //#region src/assistant/components/prompt-input.d.ts
655
+ type PromptInputMessage = {
656
+ text: string;
657
+ };
658
+ type PromptInputProps = Omit<HTMLAttributes<HTMLFormElement>, "onSubmit"> & {
659
+ /** Called when the form is submitted with the message text */onSubmit: (message: PromptInputMessage, event: FormEvent<HTMLFormElement>) => void | Promise<void>;
660
+ };
661
+ /**
662
+ * Form wrapper for the chat prompt input
663
+ *
664
+ * Handles form submission and extracts the message text from a textarea with name="message".
665
+ *
666
+ * @example
667
+ * ```tsx
668
+ * <PromptInput onSubmit={({ text }) => sendMessage(text)}>
669
+ * <PromptInputTextarea placeholder="Ask me anything..." />
670
+ * <PromptInputFooter>
671
+ * <PromptInputSubmit status={status} />
672
+ * </PromptInputFooter>
673
+ * </PromptInput>
674
+ * ```
675
+ */
676
+ declare function PromptInput({
677
+ className,
678
+ onSubmit,
679
+ children,
680
+ ...props
681
+ }: PromptInputProps): react_jsx_runtime5.JSX.Element;
682
+ type PromptInputTextareaProps = ComponentProps<"textarea">;
683
+ /**
684
+ * Textarea for entering the chat prompt
685
+ *
686
+ * - Press Enter to submit (Shift+Enter for new line)
687
+ * - Handles IME composition for international text input
688
+ * - Auto-resizes based on content
689
+ *
690
+ * @example
691
+ * ```tsx
692
+ * <PromptInputTextarea
693
+ * value={input}
694
+ * onChange={(e) => setInput(e.target.value)}
695
+ * placeholder="Type your message..."
696
+ * />
697
+ * ```
698
+ */
699
+ declare function PromptInputTextarea({
700
+ onChange,
701
+ className,
702
+ placeholder,
703
+ ...props
704
+ }: PromptInputTextareaProps): react_jsx_runtime5.JSX.Element;
705
+ type PromptInputFooterProps = ComponentProps<"div">;
706
+ /**
707
+ * Footer section for the prompt input (contains buttons)
708
+ *
709
+ * @example
710
+ * ```tsx
711
+ * <PromptInputFooter>
712
+ * <div>Optional left content</div>
713
+ * <PromptInputSubmit status={status} />
714
+ * </PromptInputFooter>
715
+ * ```
716
+ */
717
+ declare function PromptInputFooter({
718
+ className,
719
+ ...props
720
+ }: PromptInputFooterProps): react_jsx_runtime5.JSX.Element;
721
+ type PromptInputButtonProps = ComponentProps<"button">;
722
+ /**
723
+ * Generic button for the prompt input area
724
+ *
725
+ * @example
726
+ * ```tsx
727
+ * <PromptInputButton onClick={handleAttach}>
728
+ * <PaperclipIcon />
729
+ * </PromptInputButton>
730
+ * ```
731
+ */
732
+ declare function PromptInputButton({
733
+ className,
734
+ type,
735
+ children,
736
+ ...props
737
+ }: PromptInputButtonProps): react_jsx_runtime5.JSX.Element;
738
+ type PromptInputSubmitProps = ComponentProps<"button"> & {
739
+ /** Current chat status to show appropriate icon */status?: ChatStatus; /** Custom icon to override the default */
740
+ icon?: ReactNode;
741
+ };
742
+ /**
743
+ * Submit button for the prompt input
744
+ *
745
+ * Shows different icons based on the chat status:
746
+ * - ready/undefined: Send icon (CornerDownLeft)
747
+ * - submitted: Loading spinner
748
+ * - streaming: Stop icon (Square)
749
+ * - error: Error icon (X)
750
+ *
751
+ * @example
752
+ * ```tsx
753
+ * <PromptInputSubmit
754
+ * status={status}
755
+ * disabled={!input.trim() || status === "streaming"}
756
+ * />
757
+ * ```
758
+ */
759
+ declare function PromptInputSubmit({
760
+ className,
761
+ status,
762
+ icon,
763
+ children,
764
+ ...props
765
+ }: PromptInputSubmitProps): react_jsx_runtime5.JSX.Element;
766
+ //#endregion
767
+ //#region src/assistant/components/task.d.ts
768
+ type TaskItemFileProps = ComponentProps<"div">;
769
+ /**
770
+ * File badge within a task item
771
+ *
772
+ * @example
773
+ * ```tsx
774
+ * <TaskItem>
775
+ * Updated <TaskItemFile>config.json</TaskItemFile>
776
+ * </TaskItem>
777
+ * ```
778
+ */
779
+ declare function TaskItemFile({
780
+ children,
781
+ className,
782
+ ...props
783
+ }: TaskItemFileProps): react_jsx_runtime5.JSX.Element;
784
+ type TaskItemProps = ComponentProps<"div">;
785
+ /**
786
+ * Individual task/action item within a Task list
787
+ *
788
+ * @example
789
+ * ```tsx
790
+ * <TaskItem>Add todo: "Buy groceries"</TaskItem>
791
+ * ```
792
+ */
793
+ declare function TaskItem({
794
+ children,
795
+ className,
796
+ ...props
797
+ }: TaskItemProps): react_jsx_runtime5.JSX.Element;
798
+ type TaskProps = ComponentProps<typeof Collapsible>;
799
+ /**
800
+ * Collapsible container for displaying a list of actions/tasks
801
+ *
802
+ * @example
803
+ * ```tsx
804
+ * <Task defaultOpen={true}>
805
+ * <TaskTrigger title="Performing 3 actions" />
806
+ * <TaskContent>
807
+ * <TaskItem>Add todo: "Buy groceries"</TaskItem>
808
+ * <TaskItem>Mark "Call mom" as complete</TaskItem>
809
+ * <TaskItem>Delete "Old task"</TaskItem>
810
+ * </TaskContent>
811
+ * </Task>
812
+ * ```
813
+ */
814
+ declare function Task({
815
+ defaultOpen,
816
+ className,
817
+ ...props
818
+ }: TaskProps): react_jsx_runtime5.JSX.Element;
819
+ type TaskTriggerProps = ComponentProps<typeof CollapsibleTrigger> & {
820
+ /** Title text for the task group */title: string; /** Custom icon (defaults to SearchIcon) */
821
+ icon?: ReactNode;
822
+ };
823
+ /**
824
+ * Trigger button to expand/collapse the task list
825
+ *
826
+ * @example
827
+ * ```tsx
828
+ * <TaskTrigger title="Performing 3 actions" />
829
+ *
830
+ * // With custom icon
831
+ * <TaskTrigger title="File changes" icon={<FileIcon />} />
832
+ * ```
833
+ */
834
+ declare function TaskTrigger({
835
+ children,
836
+ className,
837
+ title,
838
+ icon,
839
+ ...props
840
+ }: TaskTriggerProps): react_jsx_runtime5.JSX.Element;
841
+ type TaskContentProps = ComponentProps<typeof CollapsibleContent>;
842
+ /**
843
+ * Collapsible content area containing the task items
844
+ *
845
+ * Includes slide animation when opening/closing.
846
+ */
847
+ declare function TaskContent({
848
+ children,
849
+ className,
850
+ ...props
851
+ }: TaskContentProps): react_jsx_runtime5.JSX.Element;
852
+ //#endregion
853
+ //#region src/assistant/context.d.ts
854
+ /**
855
+ * Context value for the assistant provider
856
+ */
857
+ type AssistantContextValue = UseAssistantReturn & {
858
+ /** The configuration passed to the provider */config: AssistantConfig; /** Callback to execute an action directly */
859
+ onAction?: (action: {
860
+ name: string;
861
+ options?: Record<string, unknown>;
862
+ }) => void;
863
+ };
864
+ interface AssistantProviderProps extends AssistantConfig {
865
+ children: ReactNode;
866
+ /** Function to get fresh context for each request */
867
+ getContext?: () => Record<string, unknown>;
868
+ /** Called when the assistant invokes an action */
869
+ onAction?: (action: {
870
+ name: string;
871
+ options?: Record<string, unknown>;
872
+ }) => void;
873
+ /** Called when an error occurs */
874
+ onError?: (error: Error) => void;
875
+ }
876
+ /**
877
+ * Provider component for assistant context
878
+ *
879
+ * Wraps your application (or a portion of it) to provide assistant
880
+ * functionality through context. Use `useAssistantContext` to access
881
+ * the assistant state and methods.
882
+ *
883
+ * @example Basic usage
884
+ * ```tsx
885
+ * function App() {
886
+ * const [todos, setTodos] = useState([])
887
+ *
888
+ * return (
889
+ * <AssistantProvider
890
+ * endUserId="user-123"
891
+ * availableActions={myActions}
892
+ * getContext={() => ({ todos })}
893
+ * onAction={(action) => handleAction(action)}
894
+ * >
895
+ * <TodoList />
896
+ * <AssistantPanel />
897
+ * </AssistantProvider>
898
+ * )
899
+ * }
900
+ *
901
+ * function AssistantPanel() {
902
+ * const { messages, sendMessage, isReady } = useAssistantContext()
903
+ *
904
+ * if (!isReady) return <div>Connecting...</div>
905
+ *
906
+ * return (
907
+ * <div>
908
+ * {messages.map(msg => <Message key={msg.id} {...msg} />)}
909
+ * <PromptInput onSubmit={sendMessage} />
910
+ * </div>
911
+ * )
912
+ * }
913
+ * ```
914
+ */
915
+ declare function AssistantProvider({
916
+ children,
917
+ tokenEndpoint,
918
+ apiUrl,
919
+ endUserId,
920
+ availableActions,
921
+ getContext,
922
+ onAction,
923
+ onError
924
+ }: AssistantProviderProps): react_jsx_runtime5.JSX.Element;
925
+ /**
926
+ * Hook to access the assistant context
927
+ *
928
+ * Must be used within an AssistantProvider.
929
+ *
930
+ * @example
931
+ * ```tsx
932
+ * function ChatPanel() {
933
+ * const {
934
+ * messages,
935
+ * sendMessage,
936
+ * status,
937
+ * isReady,
938
+ * input,
939
+ * setInput,
940
+ * handleSubmit,
941
+ * } = useAssistantContext()
942
+ *
943
+ * if (!isReady) return <div>Loading...</div>
944
+ *
945
+ * return (
946
+ * <div>
947
+ * {messages.map(msg => <Message key={msg.id} {...msg} />)}
948
+ * <form onSubmit={handleSubmit}>
949
+ * <input value={input} onChange={e => setInput(e.target.value)} />
950
+ * <button type="submit">Send</button>
951
+ * </form>
952
+ * </div>
953
+ * )
954
+ * }
955
+ * ```
956
+ */
957
+ declare function useAssistantContext(): AssistantContextValue;
958
+ //#endregion
959
+ //#region src/assistant/hooks/use-assistant.d.ts
960
+ /**
961
+ * Main hook for integrating the AI assistant into your application
962
+ *
963
+ * Combines token management, chat functionality, and tool execution
964
+ * into a single, easy-to-use hook.
965
+ *
966
+ * @example Basic usage
967
+ * ```tsx
968
+ * function MyApp() {
969
+ * const [todos, setTodos] = useState([])
970
+ *
971
+ * const assistant = useAssistant({
972
+ * endUserId: "user-123",
973
+ * availableActions: [
974
+ * { name: "addTodo", description: "Add a new todo" },
975
+ * { name: "deleteTodo", description: "Delete a todo", approvalRequired: true },
976
+ * ],
977
+ * getContext: () => ({ todos }),
978
+ * onAction: (action) => {
979
+ * if (action.name === "addTodo") {
980
+ * setTodos(prev => [...prev, { text: action.options.text }])
981
+ * }
982
+ * },
983
+ * })
984
+ *
985
+ * if (!assistant.isReady) {
986
+ * return <div>Connecting...</div>
987
+ * }
988
+ *
989
+ * return (
990
+ * <div>
991
+ * {assistant.messages.map(msg => (
992
+ * <Message key={msg.id} {...msg} />
993
+ * ))}
994
+ * <PromptInput onSubmit={({ text }) => assistant.sendMessage({ text })} />
995
+ * </div>
996
+ * )
997
+ * }
998
+ * ```
999
+ *
1000
+ * @example With custom token endpoint and API URL
1001
+ * ```tsx
1002
+ * const assistant = useAssistant({
1003
+ * tokenEndpoint: "/api/custom/token",
1004
+ * apiUrl: "https://custom-api.example.com",
1005
+ * endUserId: "user-123",
1006
+ * availableActions: myActions,
1007
+ * })
1008
+ * ```
1009
+ */
1010
+ declare function useAssistant({
1011
+ tokenEndpoint,
1012
+ apiUrl,
1013
+ endUserId,
1014
+ availableActions,
1015
+ getContext,
1016
+ onAction,
1017
+ onError
1018
+ }: UseAssistantOptions): UseAssistantReturn;
1019
+ //#endregion
1020
+ //#region src/assistant/hooks/use-dynamic-ui.d.ts
1021
+ interface UseDynamicUIOptions {
1022
+ /** Storage key for localStorage persistence */
1023
+ storageKey: string;
1024
+ }
1025
+ /**
1026
+ * Hook for managing DynamicUI state with localStorage persistence
1027
+ *
1028
+ * Provides methods to add, remove, and update buttons and groups
1029
+ * in a tree structure that persists across page reloads.
1030
+ *
1031
+ * @example
1032
+ * ```tsx
1033
+ * const dynamicUI = useDynamicUI({
1034
+ * storageKey: `mwai-dynamic-ui-${endUserId}`,
1035
+ * })
1036
+ *
1037
+ * // Add a button
1038
+ * dynamicUI.addButton({
1039
+ * id: "quick-add",
1040
+ * label: "Quick Add Todo",
1041
+ * actions: [{ name: "addTodo", options: { text: "New todo" } }],
1042
+ * })
1043
+ * ```
1044
+ */
1045
+ declare function useDynamicUI({
1046
+ storageKey
1047
+ }: UseDynamicUIOptions): UseDynamicUIReturn;
1048
+ //#endregion
1049
+ //#region src/assistant/hooks/use-dynamic-ui-tool-execution.d.ts
1050
+ interface UseDynamicUIToolExecutionOptions {
1051
+ /** The messages array from useChat */
1052
+ messages: UIMessage[];
1053
+ /** The dynamicUI instance from useDynamicUI */
1054
+ dynamicUI: UseDynamicUIReturn;
1055
+ }
1056
+ /**
1057
+ * Hook for processing manageDynamicUI tool invocations from assistant messages
1058
+ *
1059
+ * Monitors the messages array for completed tool-manageDynamicUI invocations
1060
+ * and applies the operations to the DynamicUI state.
1061
+ *
1062
+ * @example
1063
+ * ```tsx
1064
+ * function MyAssistant() {
1065
+ * const { messages } = useChat(...)
1066
+ * const dynamicUI = useDynamicUI({ storageKey: "my-app" })
1067
+ *
1068
+ * useDynamicUIToolExecution({
1069
+ * messages,
1070
+ * dynamicUI,
1071
+ * })
1072
+ *
1073
+ * return <DynamicUI tree={dynamicUI.tree} />
1074
+ * }
1075
+ * ```
1076
+ */
1077
+ declare function useDynamicUIToolExecution({
1078
+ messages,
1079
+ dynamicUI
1080
+ }: UseDynamicUIToolExecutionOptions): void;
1081
+ //#endregion
1082
+ //#region src/assistant/hooks/use-token.d.ts
1083
+ /**
1084
+ * Hook for managing assistant authentication tokens
1085
+ *
1086
+ * Handles token fetching, caching, and automatic refresh before expiration.
1087
+ * Use this hook when you need direct control over token management,
1088
+ * or use `useAssistant` which wraps this hook with chat functionality.
1089
+ *
1090
+ * @example
1091
+ * ```tsx
1092
+ * function MyComponent() {
1093
+ * const { token, isLoading, error, fetchToken } = useAssistantToken({
1094
+ * tokenEndpoint: "/api/mwai/token",
1095
+ * endUserId: "user-123",
1096
+ * availableActions: [
1097
+ * { name: "addTodo", description: "Add a new todo" },
1098
+ * ],
1099
+ * autoFetch: true, // Fetch on mount (default)
1100
+ * refreshBuffer: 30000, // Refresh 30s before expiry (default)
1101
+ * })
1102
+ *
1103
+ * if (isLoading) return <div>Loading...</div>
1104
+ * if (error) return <div>Error: {error}</div>
1105
+ * if (!token) return <div>No token</div>
1106
+ *
1107
+ * return <div>Token ready!</div>
1108
+ * }
1109
+ * ```
1110
+ */
1111
+ declare function useAssistantToken({
1112
+ tokenEndpoint,
1113
+ endUserId,
1114
+ availableActions,
1115
+ autoFetch,
1116
+ refreshBuffer
1117
+ }: UseAssistantTokenOptions): UseAssistantTokenReturn;
1118
+ //#endregion
1119
+ //#region src/assistant/hooks/use-tool-execution.d.ts
1120
+ interface UseToolExecutionOptions {
1121
+ /** The messages array from useChat */
1122
+ messages: UIMessage[];
1123
+ /** Callback when an action should be executed */
1124
+ onAction?: (action: ToolAction) => void;
1125
+ }
1126
+ /**
1127
+ * Hook for processing tool invocations from assistant messages
1128
+ *
1129
+ * Monitors the messages array for completed tool-performActions invocations
1130
+ * and calls onAction for each action that should be executed.
1131
+ * Tracks processed tool calls to avoid duplicate executions.
1132
+ *
1133
+ * @example
1134
+ * ```tsx
1135
+ * function MyAssistant() {
1136
+ * const { messages } = useChat(...)
1137
+ *
1138
+ * useToolExecution({
1139
+ * messages,
1140
+ * onAction: (action) => {
1141
+ * switch (action.name) {
1142
+ * case "addTodo":
1143
+ * addTodo(action.options.text)
1144
+ * break
1145
+ * case "deleteTodo":
1146
+ * deleteTodo(action.options.id)
1147
+ * break
1148
+ * }
1149
+ * },
1150
+ * })
1151
+ *
1152
+ * return <ChatUI />
1153
+ * }
1154
+ * ```
1155
+ */
1156
+ declare function useToolExecution({
1157
+ messages,
1158
+ onAction
1159
+ }: UseToolExecutionOptions): void;
1160
+ //#endregion
1161
+ //#region src/assistant/shadow/assistant-root.d.ts
1162
+ interface AssistantRootProps extends HTMLAttributes<HTMLDivElement> {
1163
+ children: ReactNode;
1164
+ /** Override theme. If undefined, inherits from host app's .dark class on documentElement */
1165
+ theme?: "light" | "dark";
1166
+ }
1167
+ /**
1168
+ * Shadow DOM wrapper for assistant components
1169
+ *
1170
+ * Provides complete CSS isolation:
1171
+ * - Package styles don't leak into host app
1172
+ * - Host app styles don't affect assistant components
1173
+ * - No need for users to configure Tailwind to scan the package
1174
+ *
1175
+ * @example
1176
+ * ```tsx
1177
+ * <AssistantRoot className="h-full">
1178
+ * <Conversation>
1179
+ * <ConversationContent>
1180
+ * {messages.map((msg) => (
1181
+ * <Message key={msg.id} from={msg.role}>
1182
+ * <MessageContent>
1183
+ * <MessageResponse>{msg.content}</MessageResponse>
1184
+ * </MessageContent>
1185
+ * </Message>
1186
+ * ))}
1187
+ * </ConversationContent>
1188
+ * </Conversation>
1189
+ * <PromptInput onSubmit={handleSubmit}>
1190
+ * <PromptInputTextarea />
1191
+ * <PromptInputFooter>
1192
+ * <div />
1193
+ * <PromptInputSubmit status={status} />
1194
+ * </PromptInputFooter>
1195
+ * </PromptInput>
1196
+ * </AssistantRoot>
1197
+ * ```
1198
+ */
1199
+ declare function AssistantRoot({
1200
+ children,
1201
+ className,
1202
+ theme,
1203
+ ...props
1204
+ }: AssistantRootProps): react_jsx_runtime5.JSX.Element;
1205
+ //#endregion
1206
+ //#region src/assistant/utils/cn.d.ts
1207
+ /**
1208
+ * Utility function for merging Tailwind CSS classes with clsx
1209
+ *
1210
+ * Combines clsx for conditional class names with tailwind-merge
1211
+ * to properly handle Tailwind CSS class conflicts.
1212
+ *
1213
+ * @example
1214
+ * ```tsx
1215
+ * // Basic usage
1216
+ * cn("px-2 py-1", "px-4") // => "py-1 px-4"
1217
+ *
1218
+ * // With conditionals
1219
+ * cn("base-class", isActive && "active-class", className)
1220
+ *
1221
+ * // With objects
1222
+ * cn("base", { "text-red-500": hasError, "text-green-500": isSuccess })
1223
+ * ```
1224
+ */
1225
+ declare function cn(...inputs: ClassValue[]): string;
1226
+ //#endregion
1227
+ export { MessageContentProps as $, PromptInputFooterProps as A, ConfirmationActions as At, DrawerContentProps as B, TaskProps as C, ConversationScrollButton as Ct, PromptInputButton as D, ConfirmationAcceptedProps as Dt, PromptInput as E, ConfirmationAccepted as Et, PromptInputTextarea as F, ConfirmationRequest as Ft, DrawerPortal as G, DrawerFooter as H, PromptInputTextareaProps as I, ConfirmationRequestProps as It, Collapsible as J, DrawerTitle as K, Drawer$1 as L, ConfirmationTitle as Lt, PromptInputProps as M, ConfirmationProps as Mt, PromptInputSubmit as N, ConfirmationRejected as Nt, PromptInputButtonProps as O, ConfirmationAction as Ot, PromptInputSubmitProps as P, ConfirmationRejectedProps as Pt, MessageContent as Q, DrawerClose as R, ConfirmationTitleProps as Rt, TaskItemProps as S, ConversationProps as St, TaskTriggerProps as T, Confirmation as Tt, DrawerHeader as U, DrawerDescription as V, DrawerOverlay as W, CollapsibleTrigger as X, CollapsibleContent as Y, Message as Z, TaskContent as _, Conversation as _t, useToolExecution as a, DateFieldRenderer as at, TaskItemFile as b, ConversationEmptyState as bt, useDynamicUIToolExecution as c, TextFieldRenderer as ct, useAssistant as d, DynamicButtonRenderer as dt, MessageProps as et, AssistantContextValue as f, dynamicUIRegistry as ft, Task as g, DynamicActionModalProps as gt, useAssistantContext as h, DynamicActionModal as ht, UseToolExecutionOptions as i, AssistantFormRendererProps as it, PromptInputMessage as j, ConfirmationActionsProps as jt, PromptInputFooter as k, ConfirmationActionProps as kt, UseDynamicUIOptions as l, defaultFormRegistry as lt, AssistantProviderProps as m, DynamicUIProps as mt, AssistantRoot as n, MessageResponseProps as nt, useAssistantToken as o, FormRenderer as ot, AssistantProvider as p, DynamicUI as pt, DrawerTrigger as q, AssistantRootProps as r, AssistantFormRenderer as rt, UseDynamicUIToolExecutionOptions as s, TextAreaRenderer as st, cn as t, MessageResponse as tt, useDynamicUI as u, DynamicButtonGroupRenderer as ut, TaskContentProps as v, ConversationContent as vt, TaskTrigger as w, ConversationScrollButtonProps as wt, TaskItemFileProps as x, ConversationEmptyStateProps as xt, TaskItem as y, ConversationContentProps as yt, DrawerContent as z, ToolUIPartApproval as zt };