@uix-ai/agent 0.0.1
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 +128 -0
- package/dist/index.d.ts +1649 -0
- package/dist/index.js +2653 -0
- package/dist/index.js.map +1 -0
- package/package.json +57 -0
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,1649 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
+
import { VirtualElement, Placement, UseFloatingReturn } from '@floating-ui/react';
|
|
4
|
+
export { VirtualElement } from '@floating-ui/react';
|
|
5
|
+
import { ToolStatus, SourceBlockContent, LucidConversation, LucidBlock } from '@uix-ai/core';
|
|
6
|
+
import { ClassValue } from 'clsx';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Shared types for @uix-ai/agent components
|
|
10
|
+
*
|
|
11
|
+
* This file is the single source of truth for shared types.
|
|
12
|
+
* Import from here instead of individual component files.
|
|
13
|
+
*/
|
|
14
|
+
/**
|
|
15
|
+
* Message role types following AgentX convention
|
|
16
|
+
* - user: Human user messages
|
|
17
|
+
* - assistant: AI assistant responses
|
|
18
|
+
* - system: System messages
|
|
19
|
+
* - tool: Tool execution results
|
|
20
|
+
* - error: Error messages
|
|
21
|
+
*/
|
|
22
|
+
type MessageRole = 'user' | 'assistant' | 'system' | 'tool' | 'error';
|
|
23
|
+
/**
|
|
24
|
+
* Message lifecycle status
|
|
25
|
+
*/
|
|
26
|
+
type MessageStatus = 'idle' | 'thinking' | 'streaming' | 'complete' | 'error';
|
|
27
|
+
/**
|
|
28
|
+
* Avatar size options
|
|
29
|
+
*/
|
|
30
|
+
type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
31
|
+
/**
|
|
32
|
+
* Avatar color variants
|
|
33
|
+
*/
|
|
34
|
+
type AvatarVariant$1 = 'primary' | 'secondary' | 'neutral' | 'success' | 'warning' | 'error';
|
|
35
|
+
/**
|
|
36
|
+
* AI-specific dynamic status for avatar animations
|
|
37
|
+
*/
|
|
38
|
+
type AvatarAnimationStatus = 'idle' | 'thinking' | 'planning' | 'responding' | 'tool-calling';
|
|
39
|
+
/**
|
|
40
|
+
* Online/presence status
|
|
41
|
+
*/
|
|
42
|
+
type PresenceStatus = 'online' | 'offline' | 'busy';
|
|
43
|
+
/**
|
|
44
|
+
* Image loading status
|
|
45
|
+
*/
|
|
46
|
+
type ImageLoadingStatus$1 = 'idle' | 'loading' | 'loaded' | 'error';
|
|
47
|
+
/**
|
|
48
|
+
* Agent data for @mention
|
|
49
|
+
*/
|
|
50
|
+
interface MentionAgent {
|
|
51
|
+
id: string;
|
|
52
|
+
name: string;
|
|
53
|
+
avatar?: string;
|
|
54
|
+
description?: string;
|
|
55
|
+
status?: PresenceStatus;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* Stream source type
|
|
59
|
+
*/
|
|
60
|
+
type StreamSource = AsyncIterable<string> | ReadableStream<string> | string;
|
|
61
|
+
/**
|
|
62
|
+
* Thinking animation variant
|
|
63
|
+
*/
|
|
64
|
+
type ThinkingVariant = 'dots' | 'pulse' | 'bounce' | 'wave' | 'spinner';
|
|
65
|
+
/**
|
|
66
|
+
* Agent associated with a conversation
|
|
67
|
+
*/
|
|
68
|
+
interface ConversationAgent {
|
|
69
|
+
id: string;
|
|
70
|
+
name: string;
|
|
71
|
+
avatar?: string;
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* Conversation item data structure
|
|
75
|
+
*/
|
|
76
|
+
interface Conversation {
|
|
77
|
+
/** Unique identifier */
|
|
78
|
+
id: string;
|
|
79
|
+
/** Conversation title */
|
|
80
|
+
title: string;
|
|
81
|
+
/** Last message preview */
|
|
82
|
+
lastMessage?: string;
|
|
83
|
+
/** Last active time */
|
|
84
|
+
lastActiveAt?: Date | string;
|
|
85
|
+
/** Unread message count */
|
|
86
|
+
unreadCount?: number;
|
|
87
|
+
/** Is pinned */
|
|
88
|
+
pinned?: boolean;
|
|
89
|
+
/** Associated agent */
|
|
90
|
+
agent?: ConversationAgent;
|
|
91
|
+
/** Tags */
|
|
92
|
+
tags?: string[];
|
|
93
|
+
}
|
|
94
|
+
/**
|
|
95
|
+
* Agent info for ChatWindowHeader
|
|
96
|
+
*/
|
|
97
|
+
interface ChatWindowAgent {
|
|
98
|
+
id: string;
|
|
99
|
+
name: string;
|
|
100
|
+
avatar?: string;
|
|
101
|
+
status?: PresenceStatus;
|
|
102
|
+
description?: string;
|
|
103
|
+
}
|
|
104
|
+
/**
|
|
105
|
+
* ChatWindow status
|
|
106
|
+
*/
|
|
107
|
+
type ChatWindowStatus = 'idle' | 'loading' | 'streaming' | 'error';
|
|
108
|
+
|
|
109
|
+
/**
|
|
110
|
+
* Avatar - Composable avatar components for AI agents
|
|
111
|
+
*
|
|
112
|
+
* Follows shadcn/Radix composition pattern.
|
|
113
|
+
* Components can be freely composed to create custom avatar layouts.
|
|
114
|
+
*
|
|
115
|
+
* @example Basic usage
|
|
116
|
+
* ```tsx
|
|
117
|
+
* <Avatar>
|
|
118
|
+
* <AvatarImage src="/claude.png" />
|
|
119
|
+
* <AvatarFallback>CL</AvatarFallback>
|
|
120
|
+
* </Avatar>
|
|
121
|
+
* ```
|
|
122
|
+
*
|
|
123
|
+
* @example With AI status animation
|
|
124
|
+
* ```tsx
|
|
125
|
+
* <Avatar status="thinking">
|
|
126
|
+
* <AvatarImage src="/claude.png" />
|
|
127
|
+
* <AvatarFallback variant="primary">A</AvatarFallback>
|
|
128
|
+
* </Avatar>
|
|
129
|
+
* ```
|
|
130
|
+
*
|
|
131
|
+
* @example With online status indicator
|
|
132
|
+
* ```tsx
|
|
133
|
+
* <Avatar size="lg">
|
|
134
|
+
* <AvatarImage src="/claude.png" />
|
|
135
|
+
* <AvatarFallback>CL</AvatarFallback>
|
|
136
|
+
* <AvatarStatusIndicator status="online" />
|
|
137
|
+
* </Avatar>
|
|
138
|
+
* ```
|
|
139
|
+
*
|
|
140
|
+
* @example Role-based (shorthand for message scenarios)
|
|
141
|
+
* ```tsx
|
|
142
|
+
* <Avatar role="assistant" status="responding">
|
|
143
|
+
* <AvatarFallback />
|
|
144
|
+
* </Avatar>
|
|
145
|
+
* ```
|
|
146
|
+
*/
|
|
147
|
+
|
|
148
|
+
/**
|
|
149
|
+
* Message role for automatic color/symbol mapping
|
|
150
|
+
*/
|
|
151
|
+
type AvatarRole = 'user' | 'assistant' | 'system' | 'tool' | 'error';
|
|
152
|
+
declare const sizeClasses: Record<AvatarSize, string>;
|
|
153
|
+
declare const variantClasses: Record<AvatarVariant$1, string>;
|
|
154
|
+
declare const roleToVariant: Record<AvatarRole, AvatarVariant$1>;
|
|
155
|
+
declare const roleSymbols: Record<AvatarRole, string>;
|
|
156
|
+
declare const presenceColors: Record<PresenceStatus, string>;
|
|
157
|
+
interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
158
|
+
/**
|
|
159
|
+
* Avatar size
|
|
160
|
+
* @default "md"
|
|
161
|
+
*/
|
|
162
|
+
size?: AvatarSize;
|
|
163
|
+
/**
|
|
164
|
+
* AI animation status
|
|
165
|
+
* @default "idle"
|
|
166
|
+
*/
|
|
167
|
+
status?: AvatarAnimationStatus;
|
|
168
|
+
/**
|
|
169
|
+
* Message role (provides default variant and symbol to children)
|
|
170
|
+
*/
|
|
171
|
+
role?: AvatarRole;
|
|
172
|
+
}
|
|
173
|
+
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
|
|
174
|
+
interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
|
|
175
|
+
/**
|
|
176
|
+
* Callback when loading status changes
|
|
177
|
+
*/
|
|
178
|
+
onLoadingStatusChange?: (status: ImageLoadingStatus$1) => void;
|
|
179
|
+
}
|
|
180
|
+
declare const AvatarImage: React.ForwardRefExoticComponent<AvatarImageProps & React.RefAttributes<HTMLImageElement>>;
|
|
181
|
+
interface AvatarFallbackProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
182
|
+
/**
|
|
183
|
+
* Color variant
|
|
184
|
+
* @default "neutral" (or derived from role)
|
|
185
|
+
*/
|
|
186
|
+
variant?: AvatarVariant$1;
|
|
187
|
+
/**
|
|
188
|
+
* Delay before showing fallback (ms)
|
|
189
|
+
* @default 0
|
|
190
|
+
*/
|
|
191
|
+
delayMs?: number;
|
|
192
|
+
}
|
|
193
|
+
declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLDivElement>>;
|
|
194
|
+
interface AvatarStatusIndicatorProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
195
|
+
/**
|
|
196
|
+
* Presence status
|
|
197
|
+
*/
|
|
198
|
+
status: PresenceStatus;
|
|
199
|
+
}
|
|
200
|
+
declare const AvatarStatusIndicator: React.ForwardRefExoticComponent<AvatarStatusIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
|
|
201
|
+
|
|
202
|
+
/**
|
|
203
|
+
* AvatarGroup - Multi-avatar stack component
|
|
204
|
+
*
|
|
205
|
+
* Displays multiple avatars in a stacked layout with overflow handling.
|
|
206
|
+
* Uses the composable Avatar system.
|
|
207
|
+
*
|
|
208
|
+
* @example Basic usage
|
|
209
|
+
* ```tsx
|
|
210
|
+
* <AvatarGroup>
|
|
211
|
+
* <Avatar><AvatarImage src="/a.png" /><AvatarFallback>A</AvatarFallback></Avatar>
|
|
212
|
+
* <Avatar><AvatarImage src="/b.png" /><AvatarFallback>B</AvatarFallback></Avatar>
|
|
213
|
+
* </AvatarGroup>
|
|
214
|
+
* ```
|
|
215
|
+
*
|
|
216
|
+
* @example With max and overflow
|
|
217
|
+
* ```tsx
|
|
218
|
+
* <AvatarGroup max={3}>
|
|
219
|
+
* {agents.map(agent => (
|
|
220
|
+
* <Avatar key={agent.id}>
|
|
221
|
+
* <AvatarImage src={agent.avatar} />
|
|
222
|
+
* <AvatarFallback>{agent.initials}</AvatarFallback>
|
|
223
|
+
* </Avatar>
|
|
224
|
+
* ))}
|
|
225
|
+
* </AvatarGroup>
|
|
226
|
+
* ```
|
|
227
|
+
*/
|
|
228
|
+
|
|
229
|
+
interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
230
|
+
/**
|
|
231
|
+
* Maximum number of avatars to show before overflow
|
|
232
|
+
* @default 4
|
|
233
|
+
*/
|
|
234
|
+
max?: number;
|
|
235
|
+
/**
|
|
236
|
+
* Avatar size (applied to all children)
|
|
237
|
+
* @default "sm"
|
|
238
|
+
*/
|
|
239
|
+
size?: AvatarSize;
|
|
240
|
+
/**
|
|
241
|
+
* Stack direction
|
|
242
|
+
* @default "left"
|
|
243
|
+
*/
|
|
244
|
+
direction?: 'left' | 'right';
|
|
245
|
+
}
|
|
246
|
+
/**
|
|
247
|
+
* AvatarGroup Component
|
|
248
|
+
*
|
|
249
|
+
* Displays a stack of avatars with:
|
|
250
|
+
* - Overlap effect (later avatars partially cover earlier ones)
|
|
251
|
+
* - Overflow indicator (+N) when exceeding max
|
|
252
|
+
* - Hover effect to show full avatar
|
|
253
|
+
*/
|
|
254
|
+
declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
255
|
+
|
|
256
|
+
/**
|
|
257
|
+
* AgentAvatar - Flexible avatar for agents and users
|
|
258
|
+
*
|
|
259
|
+
* General-purpose avatar component supporting images, icons, and initials
|
|
260
|
+
* with multiple color variants and status indicators.
|
|
261
|
+
*
|
|
262
|
+
* @example Basic usage
|
|
263
|
+
* ```tsx
|
|
264
|
+
* <AgentAvatar name="Claude" />
|
|
265
|
+
* <AgentAvatar src="/avatar.png" name="Claude" status="online" />
|
|
266
|
+
* ```
|
|
267
|
+
*
|
|
268
|
+
* @example With variants
|
|
269
|
+
* ```tsx
|
|
270
|
+
* <AgentAvatar name="AI" variant="primary" />
|
|
271
|
+
* <AgentAvatar name="User" variant="secondary" />
|
|
272
|
+
* ```
|
|
273
|
+
*
|
|
274
|
+
* @example With loading status callback (Radix-style)
|
|
275
|
+
* ```tsx
|
|
276
|
+
* <AgentAvatar
|
|
277
|
+
* src="/avatar.png"
|
|
278
|
+
* name="Claude"
|
|
279
|
+
* onLoadingStatusChange={(status) => console.log(status)}
|
|
280
|
+
* fallbackDelayMs={600}
|
|
281
|
+
* />
|
|
282
|
+
* ```
|
|
283
|
+
*/
|
|
284
|
+
|
|
285
|
+
/**
|
|
286
|
+
* Color variants for avatar backgrounds
|
|
287
|
+
* @deprecated Use AvatarVariant from './Avatar' instead
|
|
288
|
+
*/
|
|
289
|
+
type AvatarVariant = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
|
|
290
|
+
/**
|
|
291
|
+
* Image loading status (Radix-style)
|
|
292
|
+
* @deprecated Use ImageLoadingStatus from './Avatar' instead
|
|
293
|
+
*/
|
|
294
|
+
type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error';
|
|
295
|
+
interface AgentAvatarProps {
|
|
296
|
+
/**
|
|
297
|
+
* Avatar image URL
|
|
298
|
+
*/
|
|
299
|
+
src?: string;
|
|
300
|
+
/**
|
|
301
|
+
* Agent name (used for fallback initials)
|
|
302
|
+
*/
|
|
303
|
+
name: string;
|
|
304
|
+
/**
|
|
305
|
+
* Custom icon component (displayed instead of initials when no src)
|
|
306
|
+
*/
|
|
307
|
+
icon?: React.ReactNode;
|
|
308
|
+
/**
|
|
309
|
+
* Color variant
|
|
310
|
+
* @default "neutral"
|
|
311
|
+
*/
|
|
312
|
+
variant?: AvatarVariant;
|
|
313
|
+
/**
|
|
314
|
+
* Online status indicator
|
|
315
|
+
*/
|
|
316
|
+
status?: 'online' | 'offline' | 'busy';
|
|
317
|
+
/**
|
|
318
|
+
* Avatar size
|
|
319
|
+
* @default "md"
|
|
320
|
+
*/
|
|
321
|
+
size?: 'sm' | 'md' | 'lg';
|
|
322
|
+
/**
|
|
323
|
+
* Callback when image loading status changes (Radix-style)
|
|
324
|
+
*/
|
|
325
|
+
onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
|
|
326
|
+
/**
|
|
327
|
+
* Delay in ms before showing fallback (gives image time to load)
|
|
328
|
+
* @default 0
|
|
329
|
+
*/
|
|
330
|
+
fallbackDelayMs?: number;
|
|
331
|
+
/**
|
|
332
|
+
* Additional CSS classes
|
|
333
|
+
*/
|
|
334
|
+
className?: string;
|
|
335
|
+
}
|
|
336
|
+
/**
|
|
337
|
+
* Hook to track image loading status (Radix-style)
|
|
338
|
+
*/
|
|
339
|
+
declare function useImageLoadingStatus(src: string | undefined, onStatusChange?: (status: ImageLoadingStatus) => void): ImageLoadingStatus;
|
|
340
|
+
/**
|
|
341
|
+
* AgentAvatar Component
|
|
342
|
+
*
|
|
343
|
+
* Flexible avatar component for displaying agents and users.
|
|
344
|
+
* Supports images, custom icons, and fallback initials with
|
|
345
|
+
* multiple color variants and status indicators.
|
|
346
|
+
*
|
|
347
|
+
* Features:
|
|
348
|
+
* - Image loading status tracking (Radix-style)
|
|
349
|
+
* - Automatic fallback with optional delay
|
|
350
|
+
* - Multiple color variants
|
|
351
|
+
* - Online/offline/busy status indicators
|
|
352
|
+
*/
|
|
353
|
+
declare const AgentAvatar: React.ForwardRefExoticComponent<AgentAvatarProps & React.RefAttributes<HTMLDivElement>>;
|
|
354
|
+
|
|
355
|
+
/**
|
|
356
|
+
* MessageAvatar - Role-driven avatar for chat messages
|
|
357
|
+
*
|
|
358
|
+
* Automatically maps message role to color and symbol.
|
|
359
|
+
* Based on AgentX u/a/s/t convention.
|
|
360
|
+
*
|
|
361
|
+
* @example Basic usage
|
|
362
|
+
* ```tsx
|
|
363
|
+
* <MessageAvatar role="user" />
|
|
364
|
+
* <MessageAvatar role="assistant" />
|
|
365
|
+
* <MessageAvatar role="tool" />
|
|
366
|
+
* ```
|
|
367
|
+
*
|
|
368
|
+
* @example With AI status animation
|
|
369
|
+
* ```tsx
|
|
370
|
+
* <MessageAvatar role="assistant" status="thinking" />
|
|
371
|
+
* <MessageAvatar role="assistant" status="responding" />
|
|
372
|
+
* <MessageAvatar role="tool" status="tool-calling" />
|
|
373
|
+
* ```
|
|
374
|
+
*
|
|
375
|
+
* @example With custom image
|
|
376
|
+
* ```tsx
|
|
377
|
+
* <MessageAvatar role="assistant" src="/claude.png" name="Claude" />
|
|
378
|
+
* ```
|
|
379
|
+
*/
|
|
380
|
+
|
|
381
|
+
/**
|
|
382
|
+
* AI-specific dynamic status for avatar animations
|
|
383
|
+
* - idle: No animation (default)
|
|
384
|
+
* - thinking: Pulsing animation - AI is processing
|
|
385
|
+
* - responding: Breathing effect - AI is streaming response
|
|
386
|
+
* - tool-calling: Spinning indicator - AI is calling tools
|
|
387
|
+
*/
|
|
388
|
+
type AvatarStatus = 'idle' | 'thinking' | 'responding' | 'tool-calling';
|
|
389
|
+
interface MessageAvatarProps {
|
|
390
|
+
/**
|
|
391
|
+
* Message role - determines color and default symbol
|
|
392
|
+
*/
|
|
393
|
+
role: MessageRole;
|
|
394
|
+
/**
|
|
395
|
+
* AI dynamic status - triggers animations
|
|
396
|
+
* @default "idle"
|
|
397
|
+
*/
|
|
398
|
+
status?: AvatarStatus;
|
|
399
|
+
/**
|
|
400
|
+
* Custom avatar image URL (overrides default symbol)
|
|
401
|
+
*/
|
|
402
|
+
src?: string;
|
|
403
|
+
/**
|
|
404
|
+
* Agent/user name (used for alt text and custom initials)
|
|
405
|
+
*/
|
|
406
|
+
name?: string;
|
|
407
|
+
/**
|
|
408
|
+
* Custom icon component (overrides default symbol)
|
|
409
|
+
*/
|
|
410
|
+
icon?: React.ReactNode;
|
|
411
|
+
/**
|
|
412
|
+
* Avatar size
|
|
413
|
+
* @default "md"
|
|
414
|
+
*/
|
|
415
|
+
size?: 'sm' | 'md' | 'lg';
|
|
416
|
+
/**
|
|
417
|
+
* Additional CSS classes
|
|
418
|
+
*/
|
|
419
|
+
className?: string;
|
|
420
|
+
}
|
|
421
|
+
/**
|
|
422
|
+
* Role to color mapping using semantic design tokens
|
|
423
|
+
* - user: primary (blue) - precise commands
|
|
424
|
+
* - assistant: secondary (amber/gold) - generative thinking
|
|
425
|
+
* - system: muted (gray) - neutral system info
|
|
426
|
+
* - tool: accent (orange) - action/execution
|
|
427
|
+
* - error: destructive (red) - errors
|
|
428
|
+
*/
|
|
429
|
+
declare const roleColors: Record<MessageRole, string>;
|
|
430
|
+
/**
|
|
431
|
+
* AI status animation classes
|
|
432
|
+
* - thinking: pulse animation (scale + opacity)
|
|
433
|
+
* - responding: breathing glow effect
|
|
434
|
+
* - tool-calling: spinning ring indicator
|
|
435
|
+
*/
|
|
436
|
+
declare const statusAnimations: Record<AvatarStatus, string>;
|
|
437
|
+
/**
|
|
438
|
+
* MessageAvatar Component
|
|
439
|
+
*
|
|
440
|
+
* Role-driven avatar that automatically applies appropriate colors and symbols
|
|
441
|
+
* based on the message role (user/assistant/system/tool/error).
|
|
442
|
+
*
|
|
443
|
+
* Design philosophy:
|
|
444
|
+
* - User messages use primary color (rational blue) - precise commands
|
|
445
|
+
* - Assistant messages use secondary color (sentient gold) - generative thinking
|
|
446
|
+
* - System/tool messages use neutral colors
|
|
447
|
+
* - Error messages use destructive red
|
|
448
|
+
*
|
|
449
|
+
* AI Status animations:
|
|
450
|
+
* - thinking: Pulsing effect indicating AI is processing
|
|
451
|
+
* - responding: Breathing glow effect during streaming
|
|
452
|
+
* - tool-calling: Spinning ring indicator for tool execution
|
|
453
|
+
*/
|
|
454
|
+
declare const MessageAvatar: React.ForwardRefExoticComponent<MessageAvatarProps & React.RefAttributes<HTMLDivElement>>;
|
|
455
|
+
|
|
456
|
+
interface ChatBubbleProps {
|
|
457
|
+
/**
|
|
458
|
+
* Message role
|
|
459
|
+
*/
|
|
460
|
+
role: 'user' | 'assistant' | 'system';
|
|
461
|
+
/**
|
|
462
|
+
* Avatar image URL (for assistant)
|
|
463
|
+
*/
|
|
464
|
+
avatar?: string;
|
|
465
|
+
/**
|
|
466
|
+
* Agent/user name
|
|
467
|
+
*/
|
|
468
|
+
name?: string;
|
|
469
|
+
/**
|
|
470
|
+
* Message content
|
|
471
|
+
*/
|
|
472
|
+
children: React.ReactNode;
|
|
473
|
+
/**
|
|
474
|
+
* Timestamp
|
|
475
|
+
*/
|
|
476
|
+
timestamp?: string | Date;
|
|
477
|
+
/**
|
|
478
|
+
* Additional CSS classes
|
|
479
|
+
*/
|
|
480
|
+
className?: string;
|
|
481
|
+
}
|
|
482
|
+
/**
|
|
483
|
+
* ChatBubble Component
|
|
484
|
+
*
|
|
485
|
+
* @deprecated Use `ChatMessageSimple` instead. ChatBubble will be removed in a future version.
|
|
486
|
+
*
|
|
487
|
+
* ChatMessageSimple provides the same functionality but is built on the composable
|
|
488
|
+
* ChatMessage primitives, ensuring consistent styling and behavior.
|
|
489
|
+
*
|
|
490
|
+
* @example Migration
|
|
491
|
+
* ```tsx
|
|
492
|
+
* // Before (deprecated)
|
|
493
|
+
* <ChatBubble role="assistant" avatar="/claude.png" name="Claude">
|
|
494
|
+
* Hello!
|
|
495
|
+
* </ChatBubble>
|
|
496
|
+
*
|
|
497
|
+
* // After (recommended)
|
|
498
|
+
* <ChatMessageSimple
|
|
499
|
+
* role="assistant"
|
|
500
|
+
* avatar="/claude.png"
|
|
501
|
+
* name="Claude"
|
|
502
|
+
* content="Hello!"
|
|
503
|
+
* />
|
|
504
|
+
* ```
|
|
505
|
+
*/
|
|
506
|
+
declare function ChatBubble({ role, avatar, name, children, timestamp, className, }: ChatBubbleProps): react_jsx_runtime.JSX.Element;
|
|
507
|
+
|
|
508
|
+
/**
|
|
509
|
+
* ChatInput - Composable input components for AI chat
|
|
510
|
+
*
|
|
511
|
+
* Follows the "composition over configuration" pattern from shadcn/ui and Vercel.
|
|
512
|
+
* Components can be freely composed to create custom input layouts.
|
|
513
|
+
*
|
|
514
|
+
* @example Basic usage
|
|
515
|
+
* ```tsx
|
|
516
|
+
* <ChatInput onSubmit={handleSubmit}>
|
|
517
|
+
* <ChatInputTextarea placeholder="Ask anything..." />
|
|
518
|
+
* <ChatInputToolbar>
|
|
519
|
+
* <ChatInputTools>
|
|
520
|
+
* <ChatInputButton onClick={handleAttach}>
|
|
521
|
+
* <PaperclipIcon />
|
|
522
|
+
* </ChatInputButton>
|
|
523
|
+
* </ChatInputTools>
|
|
524
|
+
* <ChatInputSubmit status={status} />
|
|
525
|
+
* </ChatInputToolbar>
|
|
526
|
+
* </ChatInput>
|
|
527
|
+
* ```
|
|
528
|
+
*
|
|
529
|
+
* @example With mentions
|
|
530
|
+
* ```tsx
|
|
531
|
+
* <ChatInput onSubmit={handleSubmit}>
|
|
532
|
+
* <ChatInputTextarea
|
|
533
|
+
* onMentionQuery={searchAgents}
|
|
534
|
+
* mentionTrigger="@"
|
|
535
|
+
* />
|
|
536
|
+
* <ChatInputToolbar>
|
|
537
|
+
* <ChatInputSubmit />
|
|
538
|
+
* </ChatInputToolbar>
|
|
539
|
+
* </ChatInput>
|
|
540
|
+
* ```
|
|
541
|
+
*/
|
|
542
|
+
|
|
543
|
+
type ChatStatus = 'idle' | 'submitted' | 'streaming' | 'error';
|
|
544
|
+
/**
|
|
545
|
+
* @deprecated Use MentionAgent from MentionPopover instead
|
|
546
|
+
*/
|
|
547
|
+
interface ChatInputMentionItem {
|
|
548
|
+
id: string;
|
|
549
|
+
name: string;
|
|
550
|
+
avatar?: string;
|
|
551
|
+
description?: string;
|
|
552
|
+
}
|
|
553
|
+
type MentionItem$1 = ChatInputMentionItem;
|
|
554
|
+
interface ChatInputProps extends React.FormHTMLAttributes<HTMLFormElement> {
|
|
555
|
+
/**
|
|
556
|
+
* Callback when form is submitted
|
|
557
|
+
*/
|
|
558
|
+
onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
|
|
559
|
+
}
|
|
560
|
+
/**
|
|
561
|
+
* Container component for chat input.
|
|
562
|
+
* Renders as a form element.
|
|
563
|
+
*/
|
|
564
|
+
declare const ChatInput: React.ForwardRefExoticComponent<ChatInputProps & React.RefAttributes<HTMLFormElement>>;
|
|
565
|
+
interface ChatInputTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'> {
|
|
566
|
+
/**
|
|
567
|
+
* Controlled value
|
|
568
|
+
*/
|
|
569
|
+
value?: string;
|
|
570
|
+
/**
|
|
571
|
+
* Value change callback
|
|
572
|
+
*/
|
|
573
|
+
onChange?: (value: string) => void;
|
|
574
|
+
/**
|
|
575
|
+
* Minimum height in pixels
|
|
576
|
+
* @default 48
|
|
577
|
+
*/
|
|
578
|
+
minHeight?: number;
|
|
579
|
+
/**
|
|
580
|
+
* Maximum height in pixels
|
|
581
|
+
* @default 200
|
|
582
|
+
*/
|
|
583
|
+
maxHeight?: number;
|
|
584
|
+
/**
|
|
585
|
+
* Trigger character for mentions
|
|
586
|
+
* @default "@"
|
|
587
|
+
*/
|
|
588
|
+
mentionTrigger?: string;
|
|
589
|
+
/**
|
|
590
|
+
* Callback to query mention candidates
|
|
591
|
+
*/
|
|
592
|
+
onMentionQuery?: (query: string) => MentionItem$1[];
|
|
593
|
+
/**
|
|
594
|
+
* Available mention items (used if onMentionQuery not provided)
|
|
595
|
+
*/
|
|
596
|
+
mentionItems?: MentionItem$1[];
|
|
597
|
+
/**
|
|
598
|
+
* Callback when a mention is selected
|
|
599
|
+
*/
|
|
600
|
+
onMentionSelect?: (item: MentionItem$1) => void;
|
|
601
|
+
}
|
|
602
|
+
/**
|
|
603
|
+
* Auto-resizing textarea with optional @mention support.
|
|
604
|
+
*/
|
|
605
|
+
declare const ChatInputTextarea: React.ForwardRefExoticComponent<ChatInputTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
606
|
+
interface ChatInputToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
607
|
+
}
|
|
608
|
+
/**
|
|
609
|
+
* Toolbar container for input actions.
|
|
610
|
+
* Typically placed below the textarea.
|
|
611
|
+
*/
|
|
612
|
+
declare const ChatInputToolbar: React.ForwardRefExoticComponent<ChatInputToolbarProps & React.RefAttributes<HTMLDivElement>>;
|
|
613
|
+
interface ChatInputToolsProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
614
|
+
}
|
|
615
|
+
/**
|
|
616
|
+
* Container for tool buttons (left side of toolbar).
|
|
617
|
+
*/
|
|
618
|
+
declare const ChatInputTools: React.ForwardRefExoticComponent<ChatInputToolsProps & React.RefAttributes<HTMLDivElement>>;
|
|
619
|
+
interface ChatInputButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
620
|
+
/**
|
|
621
|
+
* Visual variant
|
|
622
|
+
*/
|
|
623
|
+
variant?: 'ghost' | 'default';
|
|
624
|
+
}
|
|
625
|
+
/**
|
|
626
|
+
* Button for toolbar actions (attach, emoji, etc.)
|
|
627
|
+
*/
|
|
628
|
+
declare const ChatInputButton: React.ForwardRefExoticComponent<ChatInputButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
629
|
+
interface ChatInputSubmitProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
630
|
+
/**
|
|
631
|
+
* Current chat status
|
|
632
|
+
*/
|
|
633
|
+
status?: ChatStatus;
|
|
634
|
+
/**
|
|
635
|
+
* Callback when stop is clicked (during streaming)
|
|
636
|
+
*/
|
|
637
|
+
onStop?: () => void;
|
|
638
|
+
}
|
|
639
|
+
/**
|
|
640
|
+
* Submit button with status-aware icons.
|
|
641
|
+
*/
|
|
642
|
+
declare const ChatInputSubmit: React.ForwardRefExoticComponent<ChatInputSubmitProps & React.RefAttributes<HTMLButtonElement>>;
|
|
643
|
+
|
|
644
|
+
/**
|
|
645
|
+
* StreamText - Streaming text display with cursor effect
|
|
646
|
+
*
|
|
647
|
+
* Core component for AI streaming responses. Supports real async streams
|
|
648
|
+
* and simulated typing animation.
|
|
649
|
+
*
|
|
650
|
+
* @example Real streaming
|
|
651
|
+
* ```tsx
|
|
652
|
+
* <StreamText stream={asyncIterator} onComplete={() => setDone(true)} />
|
|
653
|
+
* ```
|
|
654
|
+
*
|
|
655
|
+
* @example With cursor
|
|
656
|
+
* ```tsx
|
|
657
|
+
* <StreamText stream={stream} cursor cursorChar="▋" />
|
|
658
|
+
* ```
|
|
659
|
+
*
|
|
660
|
+
* @example Simulated typing (for non-streaming APIs)
|
|
661
|
+
* ```tsx
|
|
662
|
+
* <StreamText text="Hello, I am Claude." speed={30} />
|
|
663
|
+
* ```
|
|
664
|
+
*
|
|
665
|
+
* @example Composed with custom renderer
|
|
666
|
+
* ```tsx
|
|
667
|
+
* <StreamText stream={stream}>
|
|
668
|
+
* {(text, isStreaming) => (
|
|
669
|
+
* <Markdown className={isStreaming ? 'opacity-90' : ''}>{text}</Markdown>
|
|
670
|
+
* )}
|
|
671
|
+
* </StreamText>
|
|
672
|
+
* ```
|
|
673
|
+
*
|
|
674
|
+
* @example With abort controller
|
|
675
|
+
* ```tsx
|
|
676
|
+
* const abortRef = useRef<AbortController>()
|
|
677
|
+
* <StreamText stream={stream} abortController={abortRef.current} />
|
|
678
|
+
* <button onClick={() => abortRef.current?.abort()}>Stop</button>
|
|
679
|
+
* ```
|
|
680
|
+
*/
|
|
681
|
+
|
|
682
|
+
interface StreamTextProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'children' | 'onError'> {
|
|
683
|
+
/**
|
|
684
|
+
* Stream source: AsyncIterable, ReadableStream, or plain string
|
|
685
|
+
*/
|
|
686
|
+
stream?: AsyncIterable<string> | ReadableStream<string>;
|
|
687
|
+
/**
|
|
688
|
+
* Static text for simulated typing (mutually exclusive with stream)
|
|
689
|
+
*/
|
|
690
|
+
text?: string;
|
|
691
|
+
/**
|
|
692
|
+
* Show blinking cursor during streaming
|
|
693
|
+
* @default true
|
|
694
|
+
*/
|
|
695
|
+
cursor?: boolean;
|
|
696
|
+
/**
|
|
697
|
+
* Cursor character
|
|
698
|
+
* @default "▋"
|
|
699
|
+
*/
|
|
700
|
+
cursorChar?: string;
|
|
701
|
+
/**
|
|
702
|
+
* Typing speed in ms per character (only for text prop)
|
|
703
|
+
* @default 30
|
|
704
|
+
*/
|
|
705
|
+
speed?: number;
|
|
706
|
+
/**
|
|
707
|
+
* Called when streaming/typing completes
|
|
708
|
+
*/
|
|
709
|
+
onComplete?: () => void;
|
|
710
|
+
/**
|
|
711
|
+
* Called on streaming error
|
|
712
|
+
*/
|
|
713
|
+
onError?: (error: Error) => void;
|
|
714
|
+
/**
|
|
715
|
+
* Called on each text update with current text
|
|
716
|
+
*/
|
|
717
|
+
onUpdate?: (text: string) => void;
|
|
718
|
+
/**
|
|
719
|
+
* AbortController for external cancellation
|
|
720
|
+
*/
|
|
721
|
+
abortController?: AbortController;
|
|
722
|
+
/**
|
|
723
|
+
* Custom render function for advanced use (e.g., markdown rendering)
|
|
724
|
+
*/
|
|
725
|
+
children?: (text: string, isStreaming: boolean) => React.ReactNode;
|
|
726
|
+
}
|
|
727
|
+
interface UseAsyncStreamOptions {
|
|
728
|
+
onComplete?: () => void;
|
|
729
|
+
onError?: (error: Error) => void;
|
|
730
|
+
onUpdate?: (text: string) => void;
|
|
731
|
+
abortController?: AbortController;
|
|
732
|
+
}
|
|
733
|
+
interface UseAsyncStreamResult {
|
|
734
|
+
text: string;
|
|
735
|
+
isStreaming: boolean;
|
|
736
|
+
error: Error | null;
|
|
737
|
+
abort: () => void;
|
|
738
|
+
}
|
|
739
|
+
/**
|
|
740
|
+
* Hook to consume an async iterable stream
|
|
741
|
+
*
|
|
742
|
+
* Uses ref pattern for callbacks to prevent dependency issues.
|
|
743
|
+
* Supports external abort via AbortController.
|
|
744
|
+
*/
|
|
745
|
+
declare function useAsyncStream(stream: AsyncIterable<string> | ReadableStream<string> | undefined, options?: UseAsyncStreamOptions): UseAsyncStreamResult;
|
|
746
|
+
interface UseTypingAnimationOptions {
|
|
747
|
+
speed?: number;
|
|
748
|
+
onComplete?: () => void;
|
|
749
|
+
onUpdate?: (text: string) => void;
|
|
750
|
+
}
|
|
751
|
+
interface UseTypingAnimationResult {
|
|
752
|
+
displayText: string;
|
|
753
|
+
isTyping: boolean;
|
|
754
|
+
}
|
|
755
|
+
/**
|
|
756
|
+
* Hook for simulated typing animation
|
|
757
|
+
*
|
|
758
|
+
* Uses ref pattern for callbacks to prevent dependency issues.
|
|
759
|
+
*/
|
|
760
|
+
declare function useTypingAnimation(text: string | undefined, options?: UseTypingAnimationOptions): UseTypingAnimationResult;
|
|
761
|
+
/**
|
|
762
|
+
* Blinking cursor component
|
|
763
|
+
*/
|
|
764
|
+
declare const StreamCursor: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & {
|
|
765
|
+
char?: string;
|
|
766
|
+
} & React.RefAttributes<HTMLSpanElement>>;
|
|
767
|
+
/**
|
|
768
|
+
* StreamText Component
|
|
769
|
+
*
|
|
770
|
+
* Renders streaming text from async sources with optional cursor effect.
|
|
771
|
+
* Supports both real streaming (AsyncIterable/ReadableStream) and
|
|
772
|
+
* simulated typing animation for static text.
|
|
773
|
+
*
|
|
774
|
+
* Design notes:
|
|
775
|
+
* - Uses useCallbackRef pattern to avoid useEffect dependency issues
|
|
776
|
+
* - Supports external abort via AbortController
|
|
777
|
+
* - Accumulated text pattern prevents state closure issues
|
|
778
|
+
*/
|
|
779
|
+
declare const StreamText: React.ForwardRefExoticComponent<StreamTextProps & React.RefAttributes<HTMLSpanElement>>;
|
|
780
|
+
|
|
781
|
+
/**
|
|
782
|
+
* ChatMessage - Composable message component system
|
|
783
|
+
*
|
|
784
|
+
* Provides composable primitives for building chat messages.
|
|
785
|
+
* Each part can be used independently or composed together.
|
|
786
|
+
*
|
|
787
|
+
* @example Full composition
|
|
788
|
+
* ```tsx
|
|
789
|
+
* <ChatMessage role="assistant" status="streaming">
|
|
790
|
+
* <ChatMessageAvatar src="/claude.png" name="Claude" />
|
|
791
|
+
* <ChatMessageContent>
|
|
792
|
+
* <StreamText stream={stream} />
|
|
793
|
+
* </ChatMessageContent>
|
|
794
|
+
* <ChatMessageTimestamp time={new Date()} />
|
|
795
|
+
* </ChatMessage>
|
|
796
|
+
* ```
|
|
797
|
+
*
|
|
798
|
+
* @example Minimal composition
|
|
799
|
+
* ```tsx
|
|
800
|
+
* <ChatMessage role="user">
|
|
801
|
+
* <ChatMessageContent>Hello!</ChatMessageContent>
|
|
802
|
+
* </ChatMessage>
|
|
803
|
+
* ```
|
|
804
|
+
*
|
|
805
|
+
* @example With thinking state
|
|
806
|
+
* ```tsx
|
|
807
|
+
* <ChatMessage role="assistant" status="thinking">
|
|
808
|
+
* <ChatMessageAvatar />
|
|
809
|
+
* <ChatMessageContent>
|
|
810
|
+
* <ChatMessageThinking label="Analyzing..." />
|
|
811
|
+
* </ChatMessageContent>
|
|
812
|
+
* </ChatMessage>
|
|
813
|
+
* ```
|
|
814
|
+
*
|
|
815
|
+
* @example Pre-composed simple version
|
|
816
|
+
* ```tsx
|
|
817
|
+
* <ChatMessageSimple
|
|
818
|
+
* role="assistant"
|
|
819
|
+
* status="streaming"
|
|
820
|
+
* stream={stream}
|
|
821
|
+
* avatar="/claude.png"
|
|
822
|
+
* name="Claude"
|
|
823
|
+
* />
|
|
824
|
+
* ```
|
|
825
|
+
*/
|
|
826
|
+
|
|
827
|
+
interface ChatMessageContextValue {
|
|
828
|
+
role: MessageRole;
|
|
829
|
+
status: MessageStatus;
|
|
830
|
+
isUser: boolean;
|
|
831
|
+
}
|
|
832
|
+
declare function useChatMessageContext(): ChatMessageContextValue;
|
|
833
|
+
|
|
834
|
+
interface ChatMessageProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
835
|
+
/**
|
|
836
|
+
* Message role - determines layout direction and default styling
|
|
837
|
+
*/
|
|
838
|
+
role: MessageRole;
|
|
839
|
+
/**
|
|
840
|
+
* Message status - provides context to children
|
|
841
|
+
* @default "complete"
|
|
842
|
+
*/
|
|
843
|
+
status?: MessageStatus;
|
|
844
|
+
}
|
|
845
|
+
/**
|
|
846
|
+
* ChatMessage Container
|
|
847
|
+
*
|
|
848
|
+
* Provides context for child components and handles layout.
|
|
849
|
+
* User messages align right, others align left.
|
|
850
|
+
*/
|
|
851
|
+
declare const ChatMessage: React.ForwardRefExoticComponent<ChatMessageProps & React.RefAttributes<HTMLDivElement>>;
|
|
852
|
+
interface ChatMessageAvatarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
853
|
+
/**
|
|
854
|
+
* Avatar image URL
|
|
855
|
+
*/
|
|
856
|
+
src?: string;
|
|
857
|
+
/**
|
|
858
|
+
* Name for fallback initials
|
|
859
|
+
*/
|
|
860
|
+
name?: string;
|
|
861
|
+
/**
|
|
862
|
+
* Override animation status (defaults to message status)
|
|
863
|
+
*/
|
|
864
|
+
animationStatus?: AvatarAnimationStatus;
|
|
865
|
+
}
|
|
866
|
+
/**
|
|
867
|
+
* ChatMessageAvatar
|
|
868
|
+
*
|
|
869
|
+
* Avatar with automatic animation based on message status.
|
|
870
|
+
* Uses role from context for default styling.
|
|
871
|
+
*/
|
|
872
|
+
declare const ChatMessageAvatar: React.ForwardRefExoticComponent<ChatMessageAvatarProps & React.RefAttributes<HTMLDivElement>>;
|
|
873
|
+
interface ChatMessageContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
874
|
+
/**
|
|
875
|
+
* Name to display above content (typically for assistant)
|
|
876
|
+
*/
|
|
877
|
+
name?: string;
|
|
878
|
+
}
|
|
879
|
+
/**
|
|
880
|
+
* ChatMessageContent
|
|
881
|
+
*
|
|
882
|
+
* Content container with role-based styling.
|
|
883
|
+
* Renders children as message content.
|
|
884
|
+
*/
|
|
885
|
+
declare const ChatMessageContent: React.ForwardRefExoticComponent<ChatMessageContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
886
|
+
interface ChatMessageTimestampProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
887
|
+
/**
|
|
888
|
+
* Time to display
|
|
889
|
+
*/
|
|
890
|
+
time: Date | string;
|
|
891
|
+
/**
|
|
892
|
+
* Custom format function
|
|
893
|
+
*/
|
|
894
|
+
format?: (time: Date) => string;
|
|
895
|
+
}
|
|
896
|
+
/**
|
|
897
|
+
* ChatMessageTimestamp
|
|
898
|
+
*
|
|
899
|
+
* Renders formatted timestamp below message content.
|
|
900
|
+
*/
|
|
901
|
+
declare const ChatMessageTimestamp: React.ForwardRefExoticComponent<ChatMessageTimestampProps & React.RefAttributes<HTMLSpanElement>>;
|
|
902
|
+
interface ChatMessageThinkingProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
903
|
+
/**
|
|
904
|
+
* Custom thinking label
|
|
905
|
+
*/
|
|
906
|
+
label?: string;
|
|
907
|
+
}
|
|
908
|
+
/**
|
|
909
|
+
* ChatMessageThinking
|
|
910
|
+
*
|
|
911
|
+
* Animated thinking indicator for use inside ChatMessageContent.
|
|
912
|
+
*/
|
|
913
|
+
declare const ChatMessageThinking: React.ForwardRefExoticComponent<ChatMessageThinkingProps & React.RefAttributes<HTMLSpanElement>>;
|
|
914
|
+
interface ChatMessageErrorProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
915
|
+
/**
|
|
916
|
+
* Error message
|
|
917
|
+
*/
|
|
918
|
+
message?: string;
|
|
919
|
+
/**
|
|
920
|
+
* Retry callback
|
|
921
|
+
*/
|
|
922
|
+
onRetry?: () => void;
|
|
923
|
+
}
|
|
924
|
+
/**
|
|
925
|
+
* ChatMessageError
|
|
926
|
+
*
|
|
927
|
+
* Error display with optional retry button.
|
|
928
|
+
*/
|
|
929
|
+
declare const ChatMessageError: React.ForwardRefExoticComponent<ChatMessageErrorProps & React.RefAttributes<HTMLSpanElement>>;
|
|
930
|
+
interface ChatMessageSimpleProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onError'> {
|
|
931
|
+
/**
|
|
932
|
+
* Message role
|
|
933
|
+
*/
|
|
934
|
+
role: MessageRole;
|
|
935
|
+
/**
|
|
936
|
+
* Message status
|
|
937
|
+
* @default "complete"
|
|
938
|
+
*/
|
|
939
|
+
status?: MessageStatus;
|
|
940
|
+
/**
|
|
941
|
+
* Static content (for complete status)
|
|
942
|
+
*/
|
|
943
|
+
content?: string;
|
|
944
|
+
/**
|
|
945
|
+
* Stream source (for streaming status)
|
|
946
|
+
*/
|
|
947
|
+
stream?: StreamTextProps['stream'];
|
|
948
|
+
/**
|
|
949
|
+
* Avatar image URL
|
|
950
|
+
*/
|
|
951
|
+
avatar?: string;
|
|
952
|
+
/**
|
|
953
|
+
* Agent/user name
|
|
954
|
+
*/
|
|
955
|
+
name?: string;
|
|
956
|
+
/**
|
|
957
|
+
* Timestamp
|
|
958
|
+
*/
|
|
959
|
+
timestamp?: Date | string;
|
|
960
|
+
/**
|
|
961
|
+
* Thinking label
|
|
962
|
+
*/
|
|
963
|
+
thinkingLabel?: string;
|
|
964
|
+
/**
|
|
965
|
+
* Error message
|
|
966
|
+
*/
|
|
967
|
+
errorMessage?: string;
|
|
968
|
+
/**
|
|
969
|
+
* Stream callbacks
|
|
970
|
+
*/
|
|
971
|
+
onComplete?: () => void;
|
|
972
|
+
onError?: (error: Error) => void;
|
|
973
|
+
onRetry?: () => void;
|
|
974
|
+
}
|
|
975
|
+
/**
|
|
976
|
+
* ChatMessageSimple
|
|
977
|
+
*
|
|
978
|
+
* Pre-composed ChatMessage for common use cases.
|
|
979
|
+
* Automatically handles thinking/streaming/complete/error states.
|
|
980
|
+
*
|
|
981
|
+
* For full customization, use the composable primitives instead.
|
|
982
|
+
*/
|
|
983
|
+
declare const ChatMessageSimple: React.ForwardRefExoticComponent<ChatMessageSimpleProps & React.RefAttributes<HTMLDivElement>>;
|
|
984
|
+
|
|
985
|
+
/**
|
|
986
|
+
* MentionPopover - @mention agent selector with auto-positioning
|
|
987
|
+
*
|
|
988
|
+
* Popover component for selecting agents when typing @mention.
|
|
989
|
+
* Uses floating-ui for automatic positioning relative to anchor element.
|
|
990
|
+
*
|
|
991
|
+
* @example Basic usage with anchor ref
|
|
992
|
+
* ```tsx
|
|
993
|
+
* const anchorRef = useRef<HTMLTextAreaElement>(null)
|
|
994
|
+
*
|
|
995
|
+
* <textarea ref={anchorRef} />
|
|
996
|
+
*
|
|
997
|
+
* <MentionPopover
|
|
998
|
+
* open={open}
|
|
999
|
+
* anchorRef={anchorRef}
|
|
1000
|
+
* query={query}
|
|
1001
|
+
* agents={agents}
|
|
1002
|
+
* onSelect={(agent) => { insertMention(agent); setOpen(false) }}
|
|
1003
|
+
* onClose={() => setOpen(false)}
|
|
1004
|
+
* />
|
|
1005
|
+
* ```
|
|
1006
|
+
*
|
|
1007
|
+
* @example With virtual anchor (cursor position)
|
|
1008
|
+
* ```tsx
|
|
1009
|
+
* const [virtualAnchor, setVirtualAnchor] = useState<VirtualElement | null>(null)
|
|
1010
|
+
*
|
|
1011
|
+
* // On @ trigger, create virtual anchor at cursor
|
|
1012
|
+
* setVirtualAnchor({
|
|
1013
|
+
* getBoundingClientRect: () => getCursorRect()
|
|
1014
|
+
* })
|
|
1015
|
+
*
|
|
1016
|
+
* <MentionPopover
|
|
1017
|
+
* open={open}
|
|
1018
|
+
* virtualAnchor={virtualAnchor}
|
|
1019
|
+
* agents={agents}
|
|
1020
|
+
* onSelect={handleSelect}
|
|
1021
|
+
* />
|
|
1022
|
+
* ```
|
|
1023
|
+
*
|
|
1024
|
+
* @example Composable with custom item renderer
|
|
1025
|
+
* ```tsx
|
|
1026
|
+
* <MentionPopover open={open} anchorRef={ref} agents={agents} onSelect={handleSelect}>
|
|
1027
|
+
* {(filteredAgents) => filteredAgents.map(agent => (
|
|
1028
|
+
* <MentionItem key={agent.id} agent={agent}>
|
|
1029
|
+
* <CustomAgentCard agent={agent} />
|
|
1030
|
+
* </MentionItem>
|
|
1031
|
+
* ))}
|
|
1032
|
+
* </MentionPopover>
|
|
1033
|
+
* ```
|
|
1034
|
+
*/
|
|
1035
|
+
|
|
1036
|
+
interface MentionPopoverProps {
|
|
1037
|
+
/**
|
|
1038
|
+
* Whether the popover is open
|
|
1039
|
+
*/
|
|
1040
|
+
open: boolean;
|
|
1041
|
+
/**
|
|
1042
|
+
* Reference element for positioning
|
|
1043
|
+
*/
|
|
1044
|
+
anchorRef?: React.RefObject<HTMLElement>;
|
|
1045
|
+
/**
|
|
1046
|
+
* Virtual anchor for custom positioning (e.g., cursor position)
|
|
1047
|
+
*/
|
|
1048
|
+
virtualAnchor?: VirtualElement | null;
|
|
1049
|
+
/**
|
|
1050
|
+
* Search query (text after @)
|
|
1051
|
+
*/
|
|
1052
|
+
query?: string;
|
|
1053
|
+
/**
|
|
1054
|
+
* Available agents to mention
|
|
1055
|
+
*/
|
|
1056
|
+
agents: MentionAgent[];
|
|
1057
|
+
/**
|
|
1058
|
+
* Called when an agent is selected
|
|
1059
|
+
*/
|
|
1060
|
+
onSelect?: (agent: MentionAgent) => void;
|
|
1061
|
+
/**
|
|
1062
|
+
* Called when popover should close
|
|
1063
|
+
*/
|
|
1064
|
+
onClose?: () => void;
|
|
1065
|
+
/**
|
|
1066
|
+
* Maximum items to show
|
|
1067
|
+
* @default 5
|
|
1068
|
+
*/
|
|
1069
|
+
maxItems?: number;
|
|
1070
|
+
/**
|
|
1071
|
+
* Placement preference
|
|
1072
|
+
* @default "bottom-start"
|
|
1073
|
+
*/
|
|
1074
|
+
placement?: Placement;
|
|
1075
|
+
/**
|
|
1076
|
+
* Custom filter function
|
|
1077
|
+
*/
|
|
1078
|
+
filter?: (agent: MentionAgent, query: string) => boolean;
|
|
1079
|
+
/**
|
|
1080
|
+
* Empty state message
|
|
1081
|
+
* @default "No agents found"
|
|
1082
|
+
*/
|
|
1083
|
+
emptyMessage?: string;
|
|
1084
|
+
/**
|
|
1085
|
+
* Custom render function for items
|
|
1086
|
+
*/
|
|
1087
|
+
children?: (filteredAgents: MentionAgent[]) => React.ReactNode;
|
|
1088
|
+
/**
|
|
1089
|
+
* Additional className for popover
|
|
1090
|
+
*/
|
|
1091
|
+
className?: string;
|
|
1092
|
+
}
|
|
1093
|
+
interface MentionItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
|
|
1094
|
+
/**
|
|
1095
|
+
* Agent data
|
|
1096
|
+
*/
|
|
1097
|
+
agent: MentionAgent;
|
|
1098
|
+
/**
|
|
1099
|
+
* Whether this item is highlighted/focused
|
|
1100
|
+
*/
|
|
1101
|
+
highlighted?: boolean;
|
|
1102
|
+
/**
|
|
1103
|
+
* Called when item is selected
|
|
1104
|
+
*/
|
|
1105
|
+
onSelect?: (agent: MentionAgent) => void;
|
|
1106
|
+
}
|
|
1107
|
+
interface MentionContextValue {
|
|
1108
|
+
query: string;
|
|
1109
|
+
highlightedIndex: number;
|
|
1110
|
+
setHighlightedIndex: (index: number) => void;
|
|
1111
|
+
onSelect: (agent: MentionAgent) => void;
|
|
1112
|
+
}
|
|
1113
|
+
declare function useMentionContext(): MentionContextValue;
|
|
1114
|
+
interface UseMentionPopoverOptions {
|
|
1115
|
+
placement?: Placement;
|
|
1116
|
+
offset?: number;
|
|
1117
|
+
}
|
|
1118
|
+
interface UseMentionPopoverReturn {
|
|
1119
|
+
floating: UseFloatingReturn;
|
|
1120
|
+
isPositioned: boolean;
|
|
1121
|
+
}
|
|
1122
|
+
/**
|
|
1123
|
+
* Hook for manual floating control
|
|
1124
|
+
* Use this when you need more control over positioning
|
|
1125
|
+
*/
|
|
1126
|
+
declare function useMentionPopover(anchorRef: React.RefObject<HTMLElement> | undefined, virtualAnchor: VirtualElement | null | undefined, options?: UseMentionPopoverOptions): UseMentionPopoverReturn;
|
|
1127
|
+
/**
|
|
1128
|
+
* Individual mention item
|
|
1129
|
+
*/
|
|
1130
|
+
declare const MentionItem: React.ForwardRefExoticComponent<MentionItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
1131
|
+
/**
|
|
1132
|
+
* MentionPopover Component
|
|
1133
|
+
*
|
|
1134
|
+
* Floating popover for @mention agent selection.
|
|
1135
|
+
* Features:
|
|
1136
|
+
* - Auto-positioning with floating-ui
|
|
1137
|
+
* - Keyboard navigation (↑/↓/Enter/Esc)
|
|
1138
|
+
* - Composable item rendering
|
|
1139
|
+
* - Virtual anchor support for cursor positioning
|
|
1140
|
+
*/
|
|
1141
|
+
declare const MentionPopover: React.ForwardRefExoticComponent<MentionPopoverProps & React.RefAttributes<HTMLDivElement>>;
|
|
1142
|
+
|
|
1143
|
+
interface ThinkingIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1144
|
+
/**
|
|
1145
|
+
* Custom label text
|
|
1146
|
+
*/
|
|
1147
|
+
label?: string;
|
|
1148
|
+
/**
|
|
1149
|
+
* Multiple agents thinking in parallel
|
|
1150
|
+
*/
|
|
1151
|
+
agents?: string[];
|
|
1152
|
+
/**
|
|
1153
|
+
* Animation variant
|
|
1154
|
+
* @default "bounce"
|
|
1155
|
+
*/
|
|
1156
|
+
variant?: ThinkingVariant;
|
|
1157
|
+
/**
|
|
1158
|
+
* Size of the indicator
|
|
1159
|
+
* @default "md"
|
|
1160
|
+
*/
|
|
1161
|
+
size?: 'sm' | 'md' | 'lg';
|
|
1162
|
+
/**
|
|
1163
|
+
* Render inline (no wrapper div)
|
|
1164
|
+
* @default false
|
|
1165
|
+
*/
|
|
1166
|
+
inline?: boolean;
|
|
1167
|
+
/**
|
|
1168
|
+
* Color scheme
|
|
1169
|
+
* @default "secondary" (gold/amber)
|
|
1170
|
+
*/
|
|
1171
|
+
color?: 'primary' | 'secondary' | 'neutral';
|
|
1172
|
+
}
|
|
1173
|
+
/**
|
|
1174
|
+
* Animated dots (default)
|
|
1175
|
+
*/
|
|
1176
|
+
declare function DotsAnimation({ size, color, }: {
|
|
1177
|
+
size: 'sm' | 'md' | 'lg';
|
|
1178
|
+
color: 'primary' | 'secondary' | 'neutral';
|
|
1179
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1180
|
+
/**
|
|
1181
|
+
* Bouncing dots
|
|
1182
|
+
*/
|
|
1183
|
+
declare function BounceAnimation({ size, color, }: {
|
|
1184
|
+
size: 'sm' | 'md' | 'lg';
|
|
1185
|
+
color: 'primary' | 'secondary' | 'neutral';
|
|
1186
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1187
|
+
/**
|
|
1188
|
+
* Wave animation (sequential height change)
|
|
1189
|
+
* Uses animate-wave from Tailwind config (defined in @uix-ai/lucid-tokens)
|
|
1190
|
+
*/
|
|
1191
|
+
declare function WaveAnimation({ size, color, }: {
|
|
1192
|
+
size: 'sm' | 'md' | 'lg';
|
|
1193
|
+
color: 'primary' | 'secondary' | 'neutral';
|
|
1194
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1195
|
+
/**
|
|
1196
|
+
* Pulse ring
|
|
1197
|
+
*/
|
|
1198
|
+
declare function PulseAnimation({ size, color, }: {
|
|
1199
|
+
size: 'sm' | 'md' | 'lg';
|
|
1200
|
+
color: 'primary' | 'secondary' | 'neutral';
|
|
1201
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1202
|
+
/**
|
|
1203
|
+
* Spinner
|
|
1204
|
+
*/
|
|
1205
|
+
declare function SpinnerAnimation({ size, color, }: {
|
|
1206
|
+
size: 'sm' | 'md' | 'lg';
|
|
1207
|
+
color: 'primary' | 'secondary' | 'neutral';
|
|
1208
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1209
|
+
/**
|
|
1210
|
+
* ThinkingIndicator Component
|
|
1211
|
+
*
|
|
1212
|
+
* Flexible AI thinking state indicator with multiple animation variants.
|
|
1213
|
+
* Uses sentient gold (secondary-500) color by default to represent
|
|
1214
|
+
* AI's generative thinking process.
|
|
1215
|
+
*/
|
|
1216
|
+
declare const ThinkingIndicator: React.ForwardRefExoticComponent<ThinkingIndicatorProps & React.RefAttributes<HTMLDivElement>>;
|
|
1217
|
+
|
|
1218
|
+
interface ToolResultProps {
|
|
1219
|
+
/**
|
|
1220
|
+
* Tool name
|
|
1221
|
+
*/
|
|
1222
|
+
tool: string;
|
|
1223
|
+
/**
|
|
1224
|
+
* Execution status (extended to support approval workflow)
|
|
1225
|
+
*/
|
|
1226
|
+
status: ToolStatus;
|
|
1227
|
+
/**
|
|
1228
|
+
* Tool output content
|
|
1229
|
+
*/
|
|
1230
|
+
children?: React.ReactNode;
|
|
1231
|
+
/**
|
|
1232
|
+
* Whether the result is collapsed
|
|
1233
|
+
*/
|
|
1234
|
+
collapsed?: boolean;
|
|
1235
|
+
/**
|
|
1236
|
+
* Callback when collapse state changes
|
|
1237
|
+
*/
|
|
1238
|
+
onToggle?: () => void;
|
|
1239
|
+
/**
|
|
1240
|
+
* Error message (when status is 'error')
|
|
1241
|
+
*/
|
|
1242
|
+
error?: string;
|
|
1243
|
+
/**
|
|
1244
|
+
* Callback when user approves tool execution
|
|
1245
|
+
*/
|
|
1246
|
+
onApprove?: () => void;
|
|
1247
|
+
/**
|
|
1248
|
+
* Callback when user denies tool execution
|
|
1249
|
+
*/
|
|
1250
|
+
onDeny?: (reason?: string) => void;
|
|
1251
|
+
/**
|
|
1252
|
+
* Additional CSS classes
|
|
1253
|
+
*/
|
|
1254
|
+
className?: string;
|
|
1255
|
+
}
|
|
1256
|
+
/**
|
|
1257
|
+
* ToolResult Component
|
|
1258
|
+
*
|
|
1259
|
+
* Displays the result of a tool/function call with support for
|
|
1260
|
+
* approval workflows and extended status states.
|
|
1261
|
+
*
|
|
1262
|
+
* @example
|
|
1263
|
+
* ```tsx
|
|
1264
|
+
* // Basic usage
|
|
1265
|
+
* <ToolResult tool="search" status="success">
|
|
1266
|
+
* Found 10 results...
|
|
1267
|
+
* </ToolResult>
|
|
1268
|
+
*
|
|
1269
|
+
* // With error
|
|
1270
|
+
* <ToolResult tool="code_execution" status="error" error="Timeout">
|
|
1271
|
+
* Execution failed
|
|
1272
|
+
* </ToolResult>
|
|
1273
|
+
*
|
|
1274
|
+
* // With approval workflow
|
|
1275
|
+
* <ToolResult
|
|
1276
|
+
* tool="delete_file"
|
|
1277
|
+
* status="approval-required"
|
|
1278
|
+
* onApprove={() => handleApprove()}
|
|
1279
|
+
* onDeny={(reason) => handleDeny(reason)}
|
|
1280
|
+
* >
|
|
1281
|
+
* This will delete important_file.txt
|
|
1282
|
+
* </ToolResult>
|
|
1283
|
+
* ```
|
|
1284
|
+
*/
|
|
1285
|
+
declare function ToolResult({ tool, status, children, collapsed, onToggle, error, onApprove, onDeny, className, }: ToolResultProps): react_jsx_runtime.JSX.Element;
|
|
1286
|
+
|
|
1287
|
+
interface Message {
|
|
1288
|
+
id: string;
|
|
1289
|
+
role: 'user' | 'assistant' | 'system';
|
|
1290
|
+
content: React.ReactNode;
|
|
1291
|
+
avatar?: string;
|
|
1292
|
+
name?: string;
|
|
1293
|
+
timestamp?: string | Date;
|
|
1294
|
+
}
|
|
1295
|
+
interface MessageListProps {
|
|
1296
|
+
/**
|
|
1297
|
+
* List of messages to display
|
|
1298
|
+
*/
|
|
1299
|
+
messages: Message[];
|
|
1300
|
+
/**
|
|
1301
|
+
* Custom message renderer
|
|
1302
|
+
*/
|
|
1303
|
+
renderMessage?: (message: Message) => React.ReactNode;
|
|
1304
|
+
/**
|
|
1305
|
+
* Whether to auto-scroll to bottom on new messages
|
|
1306
|
+
*/
|
|
1307
|
+
autoScroll?: boolean;
|
|
1308
|
+
/**
|
|
1309
|
+
* Throttle interval in milliseconds for scroll updates during streaming.
|
|
1310
|
+
* Reduces re-renders when messages update frequently.
|
|
1311
|
+
* Set to 0 or undefined to disable throttling.
|
|
1312
|
+
* @default undefined (no throttling)
|
|
1313
|
+
*/
|
|
1314
|
+
throttleMs?: number;
|
|
1315
|
+
/**
|
|
1316
|
+
* Additional CSS classes
|
|
1317
|
+
*/
|
|
1318
|
+
className?: string;
|
|
1319
|
+
}
|
|
1320
|
+
/**
|
|
1321
|
+
* MessageList Component
|
|
1322
|
+
*
|
|
1323
|
+
* Container for displaying a list of chat messages.
|
|
1324
|
+
* Supports throttled scroll updates for better performance during streaming.
|
|
1325
|
+
*
|
|
1326
|
+
* @example
|
|
1327
|
+
* ```tsx
|
|
1328
|
+
* // Basic usage
|
|
1329
|
+
* <MessageList
|
|
1330
|
+
* messages={messages}
|
|
1331
|
+
* autoScroll
|
|
1332
|
+
* />
|
|
1333
|
+
*
|
|
1334
|
+
* // With throttle for streaming (recommended: 50-100ms)
|
|
1335
|
+
* <MessageList
|
|
1336
|
+
* messages={messages}
|
|
1337
|
+
* autoScroll
|
|
1338
|
+
* throttleMs={50}
|
|
1339
|
+
* />
|
|
1340
|
+
* ```
|
|
1341
|
+
*/
|
|
1342
|
+
declare function MessageList({ messages, renderMessage, autoScroll, throttleMs, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
|
|
1343
|
+
|
|
1344
|
+
interface SourceBlockProps {
|
|
1345
|
+
/**
|
|
1346
|
+
* Source content from LucidBlock
|
|
1347
|
+
*/
|
|
1348
|
+
source: SourceBlockContent;
|
|
1349
|
+
/**
|
|
1350
|
+
* Whether to show the excerpt/snippet
|
|
1351
|
+
*/
|
|
1352
|
+
showExcerpt?: boolean;
|
|
1353
|
+
/**
|
|
1354
|
+
* Additional CSS classes
|
|
1355
|
+
*/
|
|
1356
|
+
className?: string;
|
|
1357
|
+
}
|
|
1358
|
+
/**
|
|
1359
|
+
* SourceBlock Component
|
|
1360
|
+
*
|
|
1361
|
+
* Displays a source/citation reference, commonly used in RAG applications
|
|
1362
|
+
* to show where information was retrieved from.
|
|
1363
|
+
*
|
|
1364
|
+
* @example
|
|
1365
|
+
* ```tsx
|
|
1366
|
+
* // URL source
|
|
1367
|
+
* <SourceBlock
|
|
1368
|
+
* source={{
|
|
1369
|
+
* sourceId: 'src-1',
|
|
1370
|
+
* sourceType: 'url',
|
|
1371
|
+
* title: 'React Documentation',
|
|
1372
|
+
* url: 'https://react.dev/learn'
|
|
1373
|
+
* }}
|
|
1374
|
+
* />
|
|
1375
|
+
*
|
|
1376
|
+
* // Document source with excerpt
|
|
1377
|
+
* <SourceBlock
|
|
1378
|
+
* source={{
|
|
1379
|
+
* sourceId: 'src-2',
|
|
1380
|
+
* sourceType: 'document',
|
|
1381
|
+
* title: 'Company Policy',
|
|
1382
|
+
* filename: 'policy.pdf',
|
|
1383
|
+
* mediaType: 'application/pdf',
|
|
1384
|
+
* excerpt: 'All employees must...'
|
|
1385
|
+
* }}
|
|
1386
|
+
* showExcerpt
|
|
1387
|
+
* />
|
|
1388
|
+
* ```
|
|
1389
|
+
*/
|
|
1390
|
+
declare function SourceBlock({ source, showExcerpt, className, }: SourceBlockProps): react_jsx_runtime.JSX.Element;
|
|
1391
|
+
/**
|
|
1392
|
+
* Compact inline source citation
|
|
1393
|
+
*/
|
|
1394
|
+
declare function SourceCitation({ source, index, className, }: {
|
|
1395
|
+
source: SourceBlockContent;
|
|
1396
|
+
index?: number;
|
|
1397
|
+
className?: string;
|
|
1398
|
+
}): react_jsx_runtime.JSX.Element;
|
|
1399
|
+
/**
|
|
1400
|
+
* List of sources, typically shown at the end of a response
|
|
1401
|
+
*/
|
|
1402
|
+
declare function SourceList({ sources, title, className, }: {
|
|
1403
|
+
sources: SourceBlockContent[];
|
|
1404
|
+
title?: string;
|
|
1405
|
+
className?: string;
|
|
1406
|
+
}): react_jsx_runtime.JSX.Element | null;
|
|
1407
|
+
|
|
1408
|
+
interface ChatWindowContextValue {
|
|
1409
|
+
status: ChatWindowStatus;
|
|
1410
|
+
agent: ChatWindowAgent | null;
|
|
1411
|
+
}
|
|
1412
|
+
declare function useChatWindowContext(): ChatWindowContextValue;
|
|
1413
|
+
|
|
1414
|
+
interface ChatWindowProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1415
|
+
/** Current agent */
|
|
1416
|
+
agent?: ChatWindowAgent | null;
|
|
1417
|
+
/** Window status */
|
|
1418
|
+
status?: ChatWindowStatus;
|
|
1419
|
+
}
|
|
1420
|
+
declare const ChatWindow: React.ForwardRefExoticComponent<ChatWindowProps & React.RefAttributes<HTMLDivElement>>;
|
|
1421
|
+
interface ChatWindowHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1422
|
+
/** Override agent from context */
|
|
1423
|
+
agent?: ChatWindowAgent;
|
|
1424
|
+
}
|
|
1425
|
+
declare const ChatWindowHeader: React.ForwardRefExoticComponent<ChatWindowHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
1426
|
+
interface ChatWindowHeaderAvatarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1427
|
+
agent: ChatWindowAgent;
|
|
1428
|
+
}
|
|
1429
|
+
declare const ChatWindowHeaderAvatar: React.ForwardRefExoticComponent<ChatWindowHeaderAvatarProps & React.RefAttributes<HTMLDivElement>>;
|
|
1430
|
+
interface ChatWindowHeaderInfoProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1431
|
+
agent: ChatWindowAgent;
|
|
1432
|
+
}
|
|
1433
|
+
declare const ChatWindowHeaderInfo: React.ForwardRefExoticComponent<ChatWindowHeaderInfoProps & React.RefAttributes<HTMLDivElement>>;
|
|
1434
|
+
interface ChatWindowHeaderActionsProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1435
|
+
}
|
|
1436
|
+
declare const ChatWindowHeaderActions: React.ForwardRefExoticComponent<ChatWindowHeaderActionsProps & React.RefAttributes<HTMLDivElement>>;
|
|
1437
|
+
interface ChatWindowMessagesProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1438
|
+
/** Auto scroll to bottom */
|
|
1439
|
+
autoScroll?: boolean;
|
|
1440
|
+
/** Throttle scroll in ms */
|
|
1441
|
+
throttleMs?: number;
|
|
1442
|
+
}
|
|
1443
|
+
declare const ChatWindowMessages: React.ForwardRefExoticComponent<ChatWindowMessagesProps & React.RefAttributes<HTMLDivElement>>;
|
|
1444
|
+
interface ChatWindowInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
|
|
1445
|
+
/** Submit callback */
|
|
1446
|
+
onSend?: (message: string) => void;
|
|
1447
|
+
/** Input value (controlled) */
|
|
1448
|
+
value?: string;
|
|
1449
|
+
/** Value change callback */
|
|
1450
|
+
onValueChange?: (value: string) => void;
|
|
1451
|
+
/** Is disabled */
|
|
1452
|
+
disabled?: boolean;
|
|
1453
|
+
/** Placeholder text */
|
|
1454
|
+
placeholder?: string;
|
|
1455
|
+
}
|
|
1456
|
+
declare const ChatWindowInput: React.ForwardRefExoticComponent<ChatWindowInputProps & React.RefAttributes<HTMLDivElement>>;
|
|
1457
|
+
interface ChatWindowEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1458
|
+
/** Icon element */
|
|
1459
|
+
icon?: React.ReactNode;
|
|
1460
|
+
/** Title text */
|
|
1461
|
+
title?: string;
|
|
1462
|
+
/** Description text */
|
|
1463
|
+
description?: string;
|
|
1464
|
+
}
|
|
1465
|
+
declare const ChatWindowEmpty: React.ForwardRefExoticComponent<ChatWindowEmptyProps & React.RefAttributes<HTMLDivElement>>;
|
|
1466
|
+
|
|
1467
|
+
interface ChatListContextValue {
|
|
1468
|
+
activeId: string | null;
|
|
1469
|
+
onSelect: (id: string) => void;
|
|
1470
|
+
}
|
|
1471
|
+
declare function useChatListContext(): ChatListContextValue;
|
|
1472
|
+
|
|
1473
|
+
interface ChatListProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {
|
|
1474
|
+
/** Current active conversation ID */
|
|
1475
|
+
activeId?: string | null;
|
|
1476
|
+
/** Conversation select callback */
|
|
1477
|
+
onSelect?: (id: string) => void;
|
|
1478
|
+
}
|
|
1479
|
+
declare const ChatList: React.ForwardRefExoticComponent<ChatListProps & React.RefAttributes<HTMLDivElement>>;
|
|
1480
|
+
interface ChatListHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1481
|
+
/** Title text */
|
|
1482
|
+
title?: string;
|
|
1483
|
+
}
|
|
1484
|
+
declare const ChatListHeader: React.ForwardRefExoticComponent<ChatListHeaderProps & React.RefAttributes<HTMLDivElement>>;
|
|
1485
|
+
interface ChatListSearchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
|
|
1486
|
+
/** Value change callback */
|
|
1487
|
+
onChange?: (value: string) => void;
|
|
1488
|
+
}
|
|
1489
|
+
declare const ChatListSearch: React.ForwardRefExoticComponent<ChatListSearchProps & React.RefAttributes<HTMLInputElement>>;
|
|
1490
|
+
interface ChatListGroupProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1491
|
+
/** Group label */
|
|
1492
|
+
label?: string;
|
|
1493
|
+
}
|
|
1494
|
+
declare const ChatListGroup: React.ForwardRefExoticComponent<ChatListGroupProps & React.RefAttributes<HTMLDivElement>>;
|
|
1495
|
+
interface ChatListItemProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1496
|
+
/** Conversation data */
|
|
1497
|
+
conversation: Conversation;
|
|
1498
|
+
}
|
|
1499
|
+
declare const ChatListItem: React.ForwardRefExoticComponent<ChatListItemProps & React.RefAttributes<HTMLDivElement>>;
|
|
1500
|
+
interface ChatListItemAvatarProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1501
|
+
/** Agent data */
|
|
1502
|
+
agent?: ConversationAgent;
|
|
1503
|
+
}
|
|
1504
|
+
declare const ChatListItemAvatar: React.ForwardRefExoticComponent<ChatListItemAvatarProps & React.RefAttributes<HTMLDivElement>>;
|
|
1505
|
+
interface ChatListItemContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1506
|
+
/** Conversation data */
|
|
1507
|
+
conversation: Conversation;
|
|
1508
|
+
}
|
|
1509
|
+
declare const ChatListItemContent: React.ForwardRefExoticComponent<ChatListItemContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
1510
|
+
interface ChatListItemBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
1511
|
+
/** Unread count */
|
|
1512
|
+
count: number;
|
|
1513
|
+
}
|
|
1514
|
+
declare const ChatListItemBadge: React.ForwardRefExoticComponent<ChatListItemBadgeProps & React.RefAttributes<HTMLSpanElement>>;
|
|
1515
|
+
interface ChatListEmptyProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
1516
|
+
/** Icon element */
|
|
1517
|
+
icon?: React.ReactNode;
|
|
1518
|
+
/** Title text */
|
|
1519
|
+
title?: string;
|
|
1520
|
+
/** Description text */
|
|
1521
|
+
description?: string;
|
|
1522
|
+
}
|
|
1523
|
+
declare const ChatListEmpty: React.ForwardRefExoticComponent<ChatListEmptyProps & React.RefAttributes<HTMLDivElement>>;
|
|
1524
|
+
|
|
1525
|
+
/**
|
|
1526
|
+
* AgentChat - One-component AI chat interface
|
|
1527
|
+
*
|
|
1528
|
+
* The fastest way to add an AI conversation UI to your app.
|
|
1529
|
+
* Combines ChatWindow, MessageList, and ChatInput into a single
|
|
1530
|
+
* pre-composed component that works out of the box.
|
|
1531
|
+
*
|
|
1532
|
+
* @example Minimal usage (3 lines)
|
|
1533
|
+
* ```tsx
|
|
1534
|
+
* import { AgentChat } from '@uix-ai/agent'
|
|
1535
|
+
*
|
|
1536
|
+
* <AgentChat
|
|
1537
|
+
* conversations={conversations}
|
|
1538
|
+
* onSend={(text) => sendToAgent(text)}
|
|
1539
|
+
* />
|
|
1540
|
+
* ```
|
|
1541
|
+
*
|
|
1542
|
+
* @example With agent info
|
|
1543
|
+
* ```tsx
|
|
1544
|
+
* <AgentChat
|
|
1545
|
+
* conversations={conversations}
|
|
1546
|
+
* agent={{ id: '1', name: 'Claude', status: 'online' }}
|
|
1547
|
+
* onSend={(text) => sendToAgent(text)}
|
|
1548
|
+
* onStop={() => abortController.abort()}
|
|
1549
|
+
* />
|
|
1550
|
+
* ```
|
|
1551
|
+
*
|
|
1552
|
+
* @example Full integration with AG-UI
|
|
1553
|
+
* ```tsx
|
|
1554
|
+
* import { AgentChat } from '@uix-ai/agent'
|
|
1555
|
+
* import { useAGUI } from '@uix-ai/adapter-agui/react'
|
|
1556
|
+
*
|
|
1557
|
+
* function App() {
|
|
1558
|
+
* const { conversations, status, send } = useAGUI({ url: '/api/agent' })
|
|
1559
|
+
* return <AgentChat conversations={conversations} status={status} onSend={send} />
|
|
1560
|
+
* }
|
|
1561
|
+
* ```
|
|
1562
|
+
*
|
|
1563
|
+
* @example Full integration with Vercel AI SDK
|
|
1564
|
+
* ```tsx
|
|
1565
|
+
* import { AgentChat } from '@uix-ai/agent'
|
|
1566
|
+
* import { useVercelChat } from '@uix-ai/adapter-vercel/react'
|
|
1567
|
+
*
|
|
1568
|
+
* function App() {
|
|
1569
|
+
* const chat = useVercelChat()
|
|
1570
|
+
* return <AgentChat conversations={chat.conversations} status={chat.status} onSend={chat.send} />
|
|
1571
|
+
* }
|
|
1572
|
+
* ```
|
|
1573
|
+
*/
|
|
1574
|
+
|
|
1575
|
+
interface AgentChatProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onError'> {
|
|
1576
|
+
/**
|
|
1577
|
+
* UIX LucidConversation array - the universal format from any adapter.
|
|
1578
|
+
* Can come from @uix-ai/adapter-vercel, @uix-ai/adapter-agui, or any custom source.
|
|
1579
|
+
*/
|
|
1580
|
+
conversations: LucidConversation[];
|
|
1581
|
+
/**
|
|
1582
|
+
* Agent information displayed in the header.
|
|
1583
|
+
* Omit to hide the header.
|
|
1584
|
+
*/
|
|
1585
|
+
agent?: ChatWindowAgent | null;
|
|
1586
|
+
/**
|
|
1587
|
+
* Chat status - controls input state and submit button behavior.
|
|
1588
|
+
* @default 'idle'
|
|
1589
|
+
*/
|
|
1590
|
+
status?: ChatWindowStatus;
|
|
1591
|
+
/**
|
|
1592
|
+
* Called when the user sends a message.
|
|
1593
|
+
*/
|
|
1594
|
+
onSend?: (message: string) => void;
|
|
1595
|
+
/**
|
|
1596
|
+
* Called when the user clicks stop during streaming.
|
|
1597
|
+
*/
|
|
1598
|
+
onStop?: () => void;
|
|
1599
|
+
/**
|
|
1600
|
+
* Called when the user clicks retry on an error message.
|
|
1601
|
+
*/
|
|
1602
|
+
onRetry?: () => void;
|
|
1603
|
+
/**
|
|
1604
|
+
* Called when the user approves a tool execution.
|
|
1605
|
+
*/
|
|
1606
|
+
onToolApprove?: (toolCallId: string) => void;
|
|
1607
|
+
/**
|
|
1608
|
+
* Called when the user denies a tool execution.
|
|
1609
|
+
*/
|
|
1610
|
+
onToolDeny?: (toolCallId: string, reason?: string) => void;
|
|
1611
|
+
/**
|
|
1612
|
+
* Input placeholder text.
|
|
1613
|
+
* @default '输入消息...'
|
|
1614
|
+
*/
|
|
1615
|
+
placeholder?: string;
|
|
1616
|
+
/**
|
|
1617
|
+
* Empty state configuration.
|
|
1618
|
+
*/
|
|
1619
|
+
emptyState?: {
|
|
1620
|
+
icon?: React.ReactNode;
|
|
1621
|
+
title?: string;
|
|
1622
|
+
description?: string;
|
|
1623
|
+
};
|
|
1624
|
+
/**
|
|
1625
|
+
* Custom block renderer. Return null to use default rendering.
|
|
1626
|
+
*/
|
|
1627
|
+
renderBlock?: (block: LucidBlock, conversation: LucidConversation) => React.ReactNode | null;
|
|
1628
|
+
/**
|
|
1629
|
+
* Whether to show the header.
|
|
1630
|
+
* @default true if agent is provided
|
|
1631
|
+
*/
|
|
1632
|
+
showHeader?: boolean;
|
|
1633
|
+
/**
|
|
1634
|
+
* Auto scroll to bottom on new messages.
|
|
1635
|
+
* @default true
|
|
1636
|
+
*/
|
|
1637
|
+
autoScroll?: boolean;
|
|
1638
|
+
}
|
|
1639
|
+
declare const AgentChat: React.ForwardRefExoticComponent<AgentChatProps & React.RefAttributes<HTMLDivElement>>;
|
|
1640
|
+
|
|
1641
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
1642
|
+
/**
|
|
1643
|
+
* Format a date as relative time string
|
|
1644
|
+
* @param date - Date object or ISO string
|
|
1645
|
+
* @returns Relative time string (e.g., "刚刚", "5分钟前", "2小时前")
|
|
1646
|
+
*/
|
|
1647
|
+
declare function formatRelativeTime(date: Date | string): string;
|
|
1648
|
+
|
|
1649
|
+
export { AgentAvatar, type AgentAvatarProps, AgentChat, type AgentChatProps, Avatar, type AvatarAnimationStatus, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarRole, type AvatarSize, type AvatarStatus, AvatarStatusIndicator, type AvatarStatusIndicatorProps, type AvatarVariant$1 as AvatarVariant, BounceAnimation, ChatBubble, type ChatBubbleProps, ChatInput, ChatInputButton, type ChatInputButtonProps, type ChatInputMentionItem, type ChatInputProps, ChatInputSubmit, type ChatInputSubmitProps, ChatInputTextarea, type ChatInputTextareaProps, ChatInputToolbar, type ChatInputToolbarProps, ChatInputTools, type ChatInputToolsProps, ChatList, ChatListEmpty, type ChatListEmptyProps, ChatListGroup, type ChatListGroupProps, ChatListHeader, type ChatListHeaderProps, ChatListItem, ChatListItemAvatar, type ChatListItemAvatarProps, ChatListItemBadge, type ChatListItemBadgeProps, ChatListItemContent, type ChatListItemContentProps, type ChatListItemProps, type ChatListProps, ChatListSearch, type ChatListSearchProps, ChatMessage, ChatMessageAvatar, type ChatMessageAvatarProps, ChatMessageContent, type ChatMessageContentProps, ChatMessageError, type ChatMessageErrorProps, type ChatMessageProps, ChatMessageSimple, type ChatMessageSimpleProps, ChatMessageThinking, type ChatMessageThinkingProps, ChatMessageTimestamp, type ChatMessageTimestampProps, type ChatStatus, ChatWindow, type ChatWindowAgent, ChatWindowEmpty, type ChatWindowEmptyProps, ChatWindowHeader, ChatWindowHeaderActions, type ChatWindowHeaderActionsProps, ChatWindowHeaderAvatar, type ChatWindowHeaderAvatarProps, ChatWindowHeaderInfo, type ChatWindowHeaderInfoProps, type ChatWindowHeaderProps, ChatWindowInput, type ChatWindowInputProps, ChatWindowMessages, type ChatWindowMessagesProps, type ChatWindowProps, type ChatWindowStatus, type Conversation, type ConversationAgent, DotsAnimation, type ImageLoadingStatus$1 as ImageLoadingStatus, type MentionAgent, MentionItem, type MentionItemProps, MentionPopover, type MentionPopoverProps, type Message, MessageAvatar, type MessageAvatarProps, MessageList, type MessageListProps, type MessageRole, type MessageStatus, type PresenceStatus, PulseAnimation, SourceBlock, type SourceBlockProps, SourceCitation, SourceList, SpinnerAnimation, StreamCursor, type StreamSource, StreamText, type StreamTextProps, ThinkingIndicator, type ThinkingIndicatorProps, type ThinkingVariant, ToolResult, type ToolResultProps, type UseAsyncStreamOptions, type UseAsyncStreamResult, type UseMentionPopoverOptions, type UseMentionPopoverReturn, type UseTypingAnimationOptions, type UseTypingAnimationResult, WaveAnimation, sizeClasses as avatarSizeClasses, variantClasses as avatarVariantClasses, cn, formatRelativeTime, presenceColors, roleColors, roleSymbols, roleToVariant, statusAnimations, useAsyncStream, useChatListContext, useChatMessageContext, useChatWindowContext, useImageLoadingStatus, useMentionContext, useMentionPopover, useTypingAnimation };
|