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.
- package/README.md +145 -0
- package/dist/assistant/index.d.ts +3 -0
- package/dist/assistant/index.js +1 -0
- package/dist/assistant-NY2A-1_6.js +2 -0
- package/dist/assistant-nextjs/api.d.ts +42 -0
- package/dist/assistant-nextjs/api.js +1 -0
- package/dist/assistant-remix/api.d.ts +46 -0
- package/dist/assistant-remix/api.js +1 -0
- package/dist/assistant-tanstack-start/api.d.ts +56 -0
- package/dist/assistant-tanstack-start/api.js +1 -0
- package/dist/index-BiZCpmdI.d.ts +1227 -0
- package/dist/index.d.ts +3 -70
- package/dist/index.js +1 -1
- package/dist/types-CzieyGF2.d.ts +344 -0
- package/dist/utils-DQD-DMi0.js +1 -0
- package/package.json +115 -35
- package/dist/nextjs/api.d.ts +0 -67
- package/dist/nextjs/api.js +0 -1
- package/dist/nextjs/shims.d.ts +0 -13
- package/dist/nextjs/shims.js +0 -78
- package/dist/react/index.d.ts +0 -403
- package/dist/react/index.js +0 -1
- package/dist/types-BgiWGYKC.js +0 -1
- package/dist/types-DjksF7DU.d.ts +0 -135
|
@@ -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 };
|