@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.
@@ -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 };