@miiflow/assistant-ui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +563 -0
- package/dist/WelcomeScreen-CsFaFNcu.d.mts +246 -0
- package/dist/WelcomeScreen-TrcbOYob.d.ts +246 -0
- package/dist/avatar-D5eHcfjf.d.mts +109 -0
- package/dist/avatar-DftdWqSs.d.ts +109 -0
- package/dist/branding-SzYU4ncD.d.mts +18 -0
- package/dist/branding-SzYU4ncD.d.ts +18 -0
- package/dist/chunk-3E2HG62U.mjs +2 -0
- package/dist/chunk-3E2HG62U.mjs.map +1 -0
- package/dist/chunk-3ERHTQXR.js +2 -0
- package/dist/chunk-3ERHTQXR.js.map +1 -0
- package/dist/chunk-3GQNGDXX.mjs +22 -0
- package/dist/chunk-3GQNGDXX.mjs.map +1 -0
- package/dist/chunk-3KB4JYSQ.js +2 -0
- package/dist/chunk-3KB4JYSQ.js.map +1 -0
- package/dist/chunk-BA3VCHRC.js +22 -0
- package/dist/chunk-BA3VCHRC.js.map +1 -0
- package/dist/chunk-CRNBTU42.mjs +2 -0
- package/dist/chunk-CRNBTU42.mjs.map +1 -0
- package/dist/chunk-KPGHBLGY.mjs +2 -0
- package/dist/chunk-KPGHBLGY.mjs.map +1 -0
- package/dist/chunk-LJQHWCUK.js +2 -0
- package/dist/chunk-LJQHWCUK.js.map +1 -0
- package/dist/chunk-MFCWFFJV.mjs +2 -0
- package/dist/chunk-MFCWFFJV.mjs.map +1 -0
- package/dist/chunk-NSTK5EUQ.js +2 -0
- package/dist/chunk-NSTK5EUQ.js.map +1 -0
- package/dist/chunk-OCKHJ4WO.js +2 -0
- package/dist/chunk-OCKHJ4WO.js.map +1 -0
- package/dist/chunk-RTT6LULU.mjs +2 -0
- package/dist/chunk-RTT6LULU.mjs.map +1 -0
- package/dist/client/index.d.mts +249 -0
- package/dist/client/index.d.ts +249 -0
- package/dist/client/index.js +9 -0
- package/dist/client/index.js.map +1 -0
- package/dist/client/index.mjs +9 -0
- package/dist/client/index.mjs.map +1 -0
- package/dist/context/index.d.mts +43 -0
- package/dist/context/index.d.ts +43 -0
- package/dist/context/index.js +2 -0
- package/dist/context/index.js.map +1 -0
- package/dist/context/index.mjs +2 -0
- package/dist/context/index.mjs.map +1 -0
- package/dist/hooks/index.d.mts +109 -0
- package/dist/hooks/index.d.ts +109 -0
- package/dist/hooks/index.js +2 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/hooks/index.mjs +2 -0
- package/dist/hooks/index.mjs.map +1 -0
- package/dist/index.d.mts +157 -0
- package/dist/index.d.ts +157 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +2 -0
- package/dist/index.mjs.map +1 -0
- package/dist/message-B21_kqE2.d.ts +78 -0
- package/dist/message-ufYsvKXP.d.mts +78 -0
- package/dist/primitives/index.d.mts +86 -0
- package/dist/primitives/index.d.ts +86 -0
- package/dist/primitives/index.js +2 -0
- package/dist/primitives/index.js.map +1 -0
- package/dist/primitives/index.mjs +2 -0
- package/dist/primitives/index.mjs.map +1 -0
- package/dist/streaming-CF63E6iS.d.mts +426 -0
- package/dist/streaming-CF63E6iS.d.ts +426 -0
- package/dist/styled/index.d.mts +477 -0
- package/dist/styled/index.d.ts +477 -0
- package/dist/styled/index.js +2 -0
- package/dist/styled/index.js.map +1 -0
- package/dist/styled/index.mjs +2 -0
- package/dist/styled/index.mjs.map +1 -0
- package/dist/styles-no-preflight.css +1 -0
- package/dist/styles.css +1 -0
- package/package.json +100 -0
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
import { A as Attachment, M as MessageData, P as ParticipantRole, c as SuggestedAction, S as SourceReference } from './message-ufYsvKXP.mjs';
|
|
4
|
+
import { h as AvatarProps$1 } from './avatar-D5eHcfjf.mjs';
|
|
5
|
+
import { S as StreamingChunk, V as VisualizationChunkData, C as ClarificationData } from './streaming-CF63E6iS.mjs';
|
|
6
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
interface AttachmentPreviewProps {
|
|
9
|
+
/** The attachment to preview */
|
|
10
|
+
attachment: Attachment;
|
|
11
|
+
/** Callback when remove button is clicked */
|
|
12
|
+
onRemove?: () => void;
|
|
13
|
+
/** Whether removal is allowed */
|
|
14
|
+
removable?: boolean;
|
|
15
|
+
/** Additional CSS classes */
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Styled attachment preview card.
|
|
20
|
+
*/
|
|
21
|
+
declare const AttachmentPreview: react.ForwardRefExoticComponent<AttachmentPreviewProps & react.RefAttributes<HTMLDivElement>>;
|
|
22
|
+
|
|
23
|
+
interface AvatarProps extends Omit<AvatarProps$1, "fallback"> {
|
|
24
|
+
/** Size variant */
|
|
25
|
+
size?: "sm" | "md" | "lg";
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Styled Avatar component with role-based icons.
|
|
29
|
+
*/
|
|
30
|
+
declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLDivElement>>;
|
|
31
|
+
|
|
32
|
+
interface ChatContainerProps extends HTMLAttributes<HTMLDivElement> {
|
|
33
|
+
/** Children to render */
|
|
34
|
+
children: ReactNode;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Styled container for the chat interface.
|
|
38
|
+
* Provides flex layout and base styling.
|
|
39
|
+
*/
|
|
40
|
+
declare const ChatContainer: react.ForwardRefExoticComponent<ChatContainerProps & react.RefAttributes<HTMLDivElement>>;
|
|
41
|
+
|
|
42
|
+
interface MarkdownContentProps {
|
|
43
|
+
/** Markdown content to render */
|
|
44
|
+
children: string;
|
|
45
|
+
/** Additional CSS classes */
|
|
46
|
+
className?: string;
|
|
47
|
+
/** Base font size multiplier for responsive scaling */
|
|
48
|
+
baselineFontSize?: number;
|
|
49
|
+
/** Use dark theme for code blocks */
|
|
50
|
+
darkCodeTheme?: boolean;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Styled markdown renderer with syntax highlighting, copy-to-clipboard,
|
|
54
|
+
* and heading anchor links.
|
|
55
|
+
*/
|
|
56
|
+
declare function MarkdownContent({ children, className, baselineFontSize, darkCodeTheme, }: MarkdownContentProps): react_jsx_runtime.JSX.Element;
|
|
57
|
+
|
|
58
|
+
interface MessageProps {
|
|
59
|
+
/** The message data */
|
|
60
|
+
message: MessageData;
|
|
61
|
+
/** The viewer's role (determines alignment) */
|
|
62
|
+
viewerRole?: ParticipantRole;
|
|
63
|
+
/** Additional CSS classes */
|
|
64
|
+
className?: string;
|
|
65
|
+
/** Whether to show avatar */
|
|
66
|
+
showAvatar?: boolean;
|
|
67
|
+
/** Whether to show timestamp */
|
|
68
|
+
showTimestamp?: boolean;
|
|
69
|
+
/** Whether to render content as markdown */
|
|
70
|
+
renderMarkdown?: boolean;
|
|
71
|
+
/** Streaming chunks for reasoning panel */
|
|
72
|
+
reasoning?: StreamingChunk[];
|
|
73
|
+
/** Execution plan for completed Plan & Execute messages */
|
|
74
|
+
executionPlan?: unknown;
|
|
75
|
+
/** Execution timeline for completed messages (all orchestrator modes) */
|
|
76
|
+
executionTimeline?: unknown[];
|
|
77
|
+
/** Suggested actions */
|
|
78
|
+
suggestedActions?: SuggestedAction[];
|
|
79
|
+
/** Callback when suggested action is selected */
|
|
80
|
+
onSuggestedAction?: (action: SuggestedAction) => void;
|
|
81
|
+
/** Whether reasoning panel is expanded */
|
|
82
|
+
reasoningExpanded?: boolean;
|
|
83
|
+
/** Callback when reasoning panel expansion changes */
|
|
84
|
+
onReasoningExpandedChange?: (expanded: boolean) => void;
|
|
85
|
+
/** Citation sources to display after message content */
|
|
86
|
+
citations?: SourceReference[];
|
|
87
|
+
/** Inline visualizations to render within message content */
|
|
88
|
+
visualizations?: VisualizationChunkData[];
|
|
89
|
+
/** Base font size multiplier for markdown rendering */
|
|
90
|
+
baselineFontSize?: number;
|
|
91
|
+
/** Pending clarification data (agent needs user input) */
|
|
92
|
+
pendingClarification?: ClarificationData;
|
|
93
|
+
/** Callback when user responds to a clarification */
|
|
94
|
+
onClarificationSubmit?: (response: string) => void;
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* Styled Message component with grid layout matching the main app.
|
|
98
|
+
* Uses grid to align avatar and content, with reasoning above content.
|
|
99
|
+
* Supports attachments, citations, inline visualizations, and streaming text.
|
|
100
|
+
*/
|
|
101
|
+
declare const Message: react.ForwardRefExoticComponent<MessageProps & react.RefAttributes<HTMLDivElement>>;
|
|
102
|
+
|
|
103
|
+
interface MessageComposerProps {
|
|
104
|
+
/** Callback when message is submitted */
|
|
105
|
+
onSubmit: (content: string, attachments?: File[], attachmentIds?: string[]) => Promise<void>;
|
|
106
|
+
/** Callback when files are attached (for upload handling) */
|
|
107
|
+
onAttach?: (files: File[]) => void;
|
|
108
|
+
/** Upload a file to backend, returning an attachment ID. When provided, enables server-side upload flow. */
|
|
109
|
+
onUploadFile?: (file: File) => Promise<string>;
|
|
110
|
+
/** Notify backend/hook that an uploaded attachment was removed before sending. */
|
|
111
|
+
onRemoveUploadedAttachment?: (attachmentId: string) => void;
|
|
112
|
+
/** Whether the composer is disabled */
|
|
113
|
+
disabled?: boolean;
|
|
114
|
+
/** Whether attachments are supported */
|
|
115
|
+
supportsAttachments?: boolean;
|
|
116
|
+
/** Allowed MIME types for attachments (default: images + docs + videos) */
|
|
117
|
+
allowedFileTypes?: string[];
|
|
118
|
+
/** Maximum file size in bytes (default: 100MB) */
|
|
119
|
+
maxFileSize?: number;
|
|
120
|
+
/** Placeholder text */
|
|
121
|
+
placeholder?: string;
|
|
122
|
+
/** Additional CSS classes */
|
|
123
|
+
className?: string;
|
|
124
|
+
/** Whether a message is currently being submitted */
|
|
125
|
+
isSubmitting?: boolean;
|
|
126
|
+
}
|
|
127
|
+
/**
|
|
128
|
+
* Rich text MessageComposer with Lexical editor, attachment support,
|
|
129
|
+
* file upload integration, drag & drop, and Enter-to-submit.
|
|
130
|
+
*/
|
|
131
|
+
declare const MessageComposer: react.ForwardRefExoticComponent<MessageComposerProps & react.RefAttributes<HTMLDivElement>>;
|
|
132
|
+
|
|
133
|
+
interface MessageListProps {
|
|
134
|
+
/** Messages to render */
|
|
135
|
+
children: ReactNode;
|
|
136
|
+
/** Whether to auto-scroll to bottom */
|
|
137
|
+
autoScroll?: boolean;
|
|
138
|
+
/** Additional CSS classes */
|
|
139
|
+
className?: string;
|
|
140
|
+
}
|
|
141
|
+
/**
|
|
142
|
+
* Styled MessageList with scrolling and spacing.
|
|
143
|
+
*/
|
|
144
|
+
declare const MessageList: react.ForwardRefExoticComponent<MessageListProps & react.RefAttributes<HTMLDivElement>>;
|
|
145
|
+
|
|
146
|
+
interface StreamingTextProps {
|
|
147
|
+
/** The content to display */
|
|
148
|
+
content: string;
|
|
149
|
+
/** Whether the text is currently streaming */
|
|
150
|
+
isStreaming?: boolean;
|
|
151
|
+
/** Whether to render as markdown */
|
|
152
|
+
renderMarkdown?: boolean;
|
|
153
|
+
/** Additional CSS classes */
|
|
154
|
+
className?: string;
|
|
155
|
+
/** Base font size multiplier (passed to MarkdownContent) */
|
|
156
|
+
baselineFontSize?: number;
|
|
157
|
+
/** Props forwarded to MarkdownContent */
|
|
158
|
+
markdownProps?: Partial<MarkdownContentProps>;
|
|
159
|
+
}
|
|
160
|
+
/**
|
|
161
|
+
* Styled StreamingText that renders content directly as tokens arrive.
|
|
162
|
+
*
|
|
163
|
+
* Text appears instantly (no artificial typewriter delay), matching
|
|
164
|
+
* platform-standard behavior. A blinking cursor is shown during streaming.
|
|
165
|
+
*/
|
|
166
|
+
declare const StreamingText: react.ForwardRefExoticComponent<StreamingTextProps & react.RefAttributes<HTMLDivElement>>;
|
|
167
|
+
|
|
168
|
+
interface SuggestedActionsProps {
|
|
169
|
+
/** List of suggested actions */
|
|
170
|
+
actions: SuggestedAction[];
|
|
171
|
+
/** Callback when an action is selected */
|
|
172
|
+
onSelect?: (action: SuggestedAction) => void | Promise<void>;
|
|
173
|
+
/** Additional CSS classes */
|
|
174
|
+
className?: string;
|
|
175
|
+
/** Whether to show type-specific icons */
|
|
176
|
+
showIcons?: boolean;
|
|
177
|
+
/** Disable all action buttons */
|
|
178
|
+
disabled?: boolean;
|
|
179
|
+
}
|
|
180
|
+
/**
|
|
181
|
+
* Styled SuggestedActions with type-specific icons, loading states, and staggered animation.
|
|
182
|
+
*/
|
|
183
|
+
declare const SuggestedActions: react.ForwardRefExoticComponent<SuggestedActionsProps & react.RefAttributes<HTMLDivElement>>;
|
|
184
|
+
|
|
185
|
+
interface TypingIndicatorProps {
|
|
186
|
+
/** Additional CSS classes */
|
|
187
|
+
className?: string;
|
|
188
|
+
}
|
|
189
|
+
/**
|
|
190
|
+
* Styled TypingIndicator with animated dots.
|
|
191
|
+
*/
|
|
192
|
+
declare const TypingIndicator: react.ForwardRefExoticComponent<TypingIndicatorProps & react.RefAttributes<HTMLDivElement>>;
|
|
193
|
+
|
|
194
|
+
interface ChatLayoutProps {
|
|
195
|
+
/** Whether the chat is in empty state (no messages) */
|
|
196
|
+
isEmpty: boolean;
|
|
197
|
+
/** Optional header rendered above the message area */
|
|
198
|
+
header?: ReactNode;
|
|
199
|
+
/** Content to display when isEmpty is true (typically a WelcomeScreen) */
|
|
200
|
+
welcomeScreen?: ReactNode;
|
|
201
|
+
/** The message list to display when not empty */
|
|
202
|
+
messageList?: ReactNode;
|
|
203
|
+
/** The composer rendered at the bottom when not empty */
|
|
204
|
+
composer?: ReactNode;
|
|
205
|
+
/** Extra content between message list and composer (e.g. ClarificationPanel) */
|
|
206
|
+
footer?: ReactNode;
|
|
207
|
+
/** Additional CSS classes */
|
|
208
|
+
className?: string;
|
|
209
|
+
}
|
|
210
|
+
/**
|
|
211
|
+
* Composable chat layout that handles the empty → active state transition
|
|
212
|
+
* with a smooth crossfade animation.
|
|
213
|
+
*
|
|
214
|
+
* Replaces the repeated `AnimatePresence` + `motion.div` pattern found in
|
|
215
|
+
* `centered-chat-layout.tsx` and `chat/[id]/page.tsx`.
|
|
216
|
+
*/
|
|
217
|
+
declare const ChatLayout: react.ForwardRefExoticComponent<ChatLayoutProps & react.RefAttributes<HTMLDivElement>>;
|
|
218
|
+
|
|
219
|
+
interface WelcomeScreenProps {
|
|
220
|
+
/** Rotating placeholder strings displayed in the input */
|
|
221
|
+
placeholders?: string[];
|
|
222
|
+
/** Preset suggestion cards shown below the input */
|
|
223
|
+
suggestions?: string[];
|
|
224
|
+
/** Called when the user submits a message via the built-in input */
|
|
225
|
+
onSubmit?: (message: string, files?: File[]) => void;
|
|
226
|
+
/** Called when the user clicks a suggestion card */
|
|
227
|
+
onSuggestionClick?: (suggestion: string) => void;
|
|
228
|
+
/** Welcome heading text */
|
|
229
|
+
welcomeText?: string;
|
|
230
|
+
/** Whether to show the attachment (paperclip) button */
|
|
231
|
+
supportsAttachments?: boolean;
|
|
232
|
+
/** Override the default plain-text input with a custom composer (e.g. chat-ui MessageComposer) */
|
|
233
|
+
composerSlot?: ReactNode;
|
|
234
|
+
/** Additional CSS classes for the outer wrapper */
|
|
235
|
+
className?: string;
|
|
236
|
+
}
|
|
237
|
+
/**
|
|
238
|
+
* Full-screen empty state with rotating placeholder input and suggestion cards.
|
|
239
|
+
* Used as the welcome screen when no messages exist.
|
|
240
|
+
*
|
|
241
|
+
* By default renders a simple textarea input. Pass `composerSlot` to override
|
|
242
|
+
* with e.g. the Lexical-based `MessageComposer`.
|
|
243
|
+
*/
|
|
244
|
+
declare const WelcomeScreen: react.ForwardRefExoticComponent<WelcomeScreenProps & react.RefAttributes<HTMLDivElement>>;
|
|
245
|
+
|
|
246
|
+
export { AttachmentPreview as A, ChatContainer as C, MarkdownContent as M, StreamingText as S, TypingIndicator as T, WelcomeScreen as W, Avatar as a, ChatLayout as b, Message as c, MessageComposer as d, MessageList as e, SuggestedActions as f, type AttachmentPreviewProps as g, type AvatarProps as h, type ChatContainerProps as i, type ChatLayoutProps as j, type MarkdownContentProps as k, type MessageComposerProps as l, type MessageListProps as m, type MessageProps as n, type StreamingTextProps as o, type SuggestedActionsProps as p, type TypingIndicatorProps as q, type WelcomeScreenProps as r };
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
3
|
+
import { A as Attachment, M as MessageData, P as ParticipantRole, c as SuggestedAction, S as SourceReference } from './message-B21_kqE2.js';
|
|
4
|
+
import { h as AvatarProps$1 } from './avatar-DftdWqSs.js';
|
|
5
|
+
import { S as StreamingChunk, V as VisualizationChunkData, C as ClarificationData } from './streaming-CF63E6iS.js';
|
|
6
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
interface AttachmentPreviewProps {
|
|
9
|
+
/** The attachment to preview */
|
|
10
|
+
attachment: Attachment;
|
|
11
|
+
/** Callback when remove button is clicked */
|
|
12
|
+
onRemove?: () => void;
|
|
13
|
+
/** Whether removal is allowed */
|
|
14
|
+
removable?: boolean;
|
|
15
|
+
/** Additional CSS classes */
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Styled attachment preview card.
|
|
20
|
+
*/
|
|
21
|
+
declare const AttachmentPreview: react.ForwardRefExoticComponent<AttachmentPreviewProps & react.RefAttributes<HTMLDivElement>>;
|
|
22
|
+
|
|
23
|
+
interface AvatarProps extends Omit<AvatarProps$1, "fallback"> {
|
|
24
|
+
/** Size variant */
|
|
25
|
+
size?: "sm" | "md" | "lg";
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* Styled Avatar component with role-based icons.
|
|
29
|
+
*/
|
|
30
|
+
declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLDivElement>>;
|
|
31
|
+
|
|
32
|
+
interface ChatContainerProps extends HTMLAttributes<HTMLDivElement> {
|
|
33
|
+
/** Children to render */
|
|
34
|
+
children: ReactNode;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Styled container for the chat interface.
|
|
38
|
+
* Provides flex layout and base styling.
|
|
39
|
+
*/
|
|
40
|
+
declare const ChatContainer: react.ForwardRefExoticComponent<ChatContainerProps & react.RefAttributes<HTMLDivElement>>;
|
|
41
|
+
|
|
42
|
+
interface MarkdownContentProps {
|
|
43
|
+
/** Markdown content to render */
|
|
44
|
+
children: string;
|
|
45
|
+
/** Additional CSS classes */
|
|
46
|
+
className?: string;
|
|
47
|
+
/** Base font size multiplier for responsive scaling */
|
|
48
|
+
baselineFontSize?: number;
|
|
49
|
+
/** Use dark theme for code blocks */
|
|
50
|
+
darkCodeTheme?: boolean;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Styled markdown renderer with syntax highlighting, copy-to-clipboard,
|
|
54
|
+
* and heading anchor links.
|
|
55
|
+
*/
|
|
56
|
+
declare function MarkdownContent({ children, className, baselineFontSize, darkCodeTheme, }: MarkdownContentProps): react_jsx_runtime.JSX.Element;
|
|
57
|
+
|
|
58
|
+
interface MessageProps {
|
|
59
|
+
/** The message data */
|
|
60
|
+
message: MessageData;
|
|
61
|
+
/** The viewer's role (determines alignment) */
|
|
62
|
+
viewerRole?: ParticipantRole;
|
|
63
|
+
/** Additional CSS classes */
|
|
64
|
+
className?: string;
|
|
65
|
+
/** Whether to show avatar */
|
|
66
|
+
showAvatar?: boolean;
|
|
67
|
+
/** Whether to show timestamp */
|
|
68
|
+
showTimestamp?: boolean;
|
|
69
|
+
/** Whether to render content as markdown */
|
|
70
|
+
renderMarkdown?: boolean;
|
|
71
|
+
/** Streaming chunks for reasoning panel */
|
|
72
|
+
reasoning?: StreamingChunk[];
|
|
73
|
+
/** Execution plan for completed Plan & Execute messages */
|
|
74
|
+
executionPlan?: unknown;
|
|
75
|
+
/** Execution timeline for completed messages (all orchestrator modes) */
|
|
76
|
+
executionTimeline?: unknown[];
|
|
77
|
+
/** Suggested actions */
|
|
78
|
+
suggestedActions?: SuggestedAction[];
|
|
79
|
+
/** Callback when suggested action is selected */
|
|
80
|
+
onSuggestedAction?: (action: SuggestedAction) => void;
|
|
81
|
+
/** Whether reasoning panel is expanded */
|
|
82
|
+
reasoningExpanded?: boolean;
|
|
83
|
+
/** Callback when reasoning panel expansion changes */
|
|
84
|
+
onReasoningExpandedChange?: (expanded: boolean) => void;
|
|
85
|
+
/** Citation sources to display after message content */
|
|
86
|
+
citations?: SourceReference[];
|
|
87
|
+
/** Inline visualizations to render within message content */
|
|
88
|
+
visualizations?: VisualizationChunkData[];
|
|
89
|
+
/** Base font size multiplier for markdown rendering */
|
|
90
|
+
baselineFontSize?: number;
|
|
91
|
+
/** Pending clarification data (agent needs user input) */
|
|
92
|
+
pendingClarification?: ClarificationData;
|
|
93
|
+
/** Callback when user responds to a clarification */
|
|
94
|
+
onClarificationSubmit?: (response: string) => void;
|
|
95
|
+
}
|
|
96
|
+
/**
|
|
97
|
+
* Styled Message component with grid layout matching the main app.
|
|
98
|
+
* Uses grid to align avatar and content, with reasoning above content.
|
|
99
|
+
* Supports attachments, citations, inline visualizations, and streaming text.
|
|
100
|
+
*/
|
|
101
|
+
declare const Message: react.ForwardRefExoticComponent<MessageProps & react.RefAttributes<HTMLDivElement>>;
|
|
102
|
+
|
|
103
|
+
interface MessageComposerProps {
|
|
104
|
+
/** Callback when message is submitted */
|
|
105
|
+
onSubmit: (content: string, attachments?: File[], attachmentIds?: string[]) => Promise<void>;
|
|
106
|
+
/** Callback when files are attached (for upload handling) */
|
|
107
|
+
onAttach?: (files: File[]) => void;
|
|
108
|
+
/** Upload a file to backend, returning an attachment ID. When provided, enables server-side upload flow. */
|
|
109
|
+
onUploadFile?: (file: File) => Promise<string>;
|
|
110
|
+
/** Notify backend/hook that an uploaded attachment was removed before sending. */
|
|
111
|
+
onRemoveUploadedAttachment?: (attachmentId: string) => void;
|
|
112
|
+
/** Whether the composer is disabled */
|
|
113
|
+
disabled?: boolean;
|
|
114
|
+
/** Whether attachments are supported */
|
|
115
|
+
supportsAttachments?: boolean;
|
|
116
|
+
/** Allowed MIME types for attachments (default: images + docs + videos) */
|
|
117
|
+
allowedFileTypes?: string[];
|
|
118
|
+
/** Maximum file size in bytes (default: 100MB) */
|
|
119
|
+
maxFileSize?: number;
|
|
120
|
+
/** Placeholder text */
|
|
121
|
+
placeholder?: string;
|
|
122
|
+
/** Additional CSS classes */
|
|
123
|
+
className?: string;
|
|
124
|
+
/** Whether a message is currently being submitted */
|
|
125
|
+
isSubmitting?: boolean;
|
|
126
|
+
}
|
|
127
|
+
/**
|
|
128
|
+
* Rich text MessageComposer with Lexical editor, attachment support,
|
|
129
|
+
* file upload integration, drag & drop, and Enter-to-submit.
|
|
130
|
+
*/
|
|
131
|
+
declare const MessageComposer: react.ForwardRefExoticComponent<MessageComposerProps & react.RefAttributes<HTMLDivElement>>;
|
|
132
|
+
|
|
133
|
+
interface MessageListProps {
|
|
134
|
+
/** Messages to render */
|
|
135
|
+
children: ReactNode;
|
|
136
|
+
/** Whether to auto-scroll to bottom */
|
|
137
|
+
autoScroll?: boolean;
|
|
138
|
+
/** Additional CSS classes */
|
|
139
|
+
className?: string;
|
|
140
|
+
}
|
|
141
|
+
/**
|
|
142
|
+
* Styled MessageList with scrolling and spacing.
|
|
143
|
+
*/
|
|
144
|
+
declare const MessageList: react.ForwardRefExoticComponent<MessageListProps & react.RefAttributes<HTMLDivElement>>;
|
|
145
|
+
|
|
146
|
+
interface StreamingTextProps {
|
|
147
|
+
/** The content to display */
|
|
148
|
+
content: string;
|
|
149
|
+
/** Whether the text is currently streaming */
|
|
150
|
+
isStreaming?: boolean;
|
|
151
|
+
/** Whether to render as markdown */
|
|
152
|
+
renderMarkdown?: boolean;
|
|
153
|
+
/** Additional CSS classes */
|
|
154
|
+
className?: string;
|
|
155
|
+
/** Base font size multiplier (passed to MarkdownContent) */
|
|
156
|
+
baselineFontSize?: number;
|
|
157
|
+
/** Props forwarded to MarkdownContent */
|
|
158
|
+
markdownProps?: Partial<MarkdownContentProps>;
|
|
159
|
+
}
|
|
160
|
+
/**
|
|
161
|
+
* Styled StreamingText that renders content directly as tokens arrive.
|
|
162
|
+
*
|
|
163
|
+
* Text appears instantly (no artificial typewriter delay), matching
|
|
164
|
+
* platform-standard behavior. A blinking cursor is shown during streaming.
|
|
165
|
+
*/
|
|
166
|
+
declare const StreamingText: react.ForwardRefExoticComponent<StreamingTextProps & react.RefAttributes<HTMLDivElement>>;
|
|
167
|
+
|
|
168
|
+
interface SuggestedActionsProps {
|
|
169
|
+
/** List of suggested actions */
|
|
170
|
+
actions: SuggestedAction[];
|
|
171
|
+
/** Callback when an action is selected */
|
|
172
|
+
onSelect?: (action: SuggestedAction) => void | Promise<void>;
|
|
173
|
+
/** Additional CSS classes */
|
|
174
|
+
className?: string;
|
|
175
|
+
/** Whether to show type-specific icons */
|
|
176
|
+
showIcons?: boolean;
|
|
177
|
+
/** Disable all action buttons */
|
|
178
|
+
disabled?: boolean;
|
|
179
|
+
}
|
|
180
|
+
/**
|
|
181
|
+
* Styled SuggestedActions with type-specific icons, loading states, and staggered animation.
|
|
182
|
+
*/
|
|
183
|
+
declare const SuggestedActions: react.ForwardRefExoticComponent<SuggestedActionsProps & react.RefAttributes<HTMLDivElement>>;
|
|
184
|
+
|
|
185
|
+
interface TypingIndicatorProps {
|
|
186
|
+
/** Additional CSS classes */
|
|
187
|
+
className?: string;
|
|
188
|
+
}
|
|
189
|
+
/**
|
|
190
|
+
* Styled TypingIndicator with animated dots.
|
|
191
|
+
*/
|
|
192
|
+
declare const TypingIndicator: react.ForwardRefExoticComponent<TypingIndicatorProps & react.RefAttributes<HTMLDivElement>>;
|
|
193
|
+
|
|
194
|
+
interface ChatLayoutProps {
|
|
195
|
+
/** Whether the chat is in empty state (no messages) */
|
|
196
|
+
isEmpty: boolean;
|
|
197
|
+
/** Optional header rendered above the message area */
|
|
198
|
+
header?: ReactNode;
|
|
199
|
+
/** Content to display when isEmpty is true (typically a WelcomeScreen) */
|
|
200
|
+
welcomeScreen?: ReactNode;
|
|
201
|
+
/** The message list to display when not empty */
|
|
202
|
+
messageList?: ReactNode;
|
|
203
|
+
/** The composer rendered at the bottom when not empty */
|
|
204
|
+
composer?: ReactNode;
|
|
205
|
+
/** Extra content between message list and composer (e.g. ClarificationPanel) */
|
|
206
|
+
footer?: ReactNode;
|
|
207
|
+
/** Additional CSS classes */
|
|
208
|
+
className?: string;
|
|
209
|
+
}
|
|
210
|
+
/**
|
|
211
|
+
* Composable chat layout that handles the empty → active state transition
|
|
212
|
+
* with a smooth crossfade animation.
|
|
213
|
+
*
|
|
214
|
+
* Replaces the repeated `AnimatePresence` + `motion.div` pattern found in
|
|
215
|
+
* `centered-chat-layout.tsx` and `chat/[id]/page.tsx`.
|
|
216
|
+
*/
|
|
217
|
+
declare const ChatLayout: react.ForwardRefExoticComponent<ChatLayoutProps & react.RefAttributes<HTMLDivElement>>;
|
|
218
|
+
|
|
219
|
+
interface WelcomeScreenProps {
|
|
220
|
+
/** Rotating placeholder strings displayed in the input */
|
|
221
|
+
placeholders?: string[];
|
|
222
|
+
/** Preset suggestion cards shown below the input */
|
|
223
|
+
suggestions?: string[];
|
|
224
|
+
/** Called when the user submits a message via the built-in input */
|
|
225
|
+
onSubmit?: (message: string, files?: File[]) => void;
|
|
226
|
+
/** Called when the user clicks a suggestion card */
|
|
227
|
+
onSuggestionClick?: (suggestion: string) => void;
|
|
228
|
+
/** Welcome heading text */
|
|
229
|
+
welcomeText?: string;
|
|
230
|
+
/** Whether to show the attachment (paperclip) button */
|
|
231
|
+
supportsAttachments?: boolean;
|
|
232
|
+
/** Override the default plain-text input with a custom composer (e.g. chat-ui MessageComposer) */
|
|
233
|
+
composerSlot?: ReactNode;
|
|
234
|
+
/** Additional CSS classes for the outer wrapper */
|
|
235
|
+
className?: string;
|
|
236
|
+
}
|
|
237
|
+
/**
|
|
238
|
+
* Full-screen empty state with rotating placeholder input and suggestion cards.
|
|
239
|
+
* Used as the welcome screen when no messages exist.
|
|
240
|
+
*
|
|
241
|
+
* By default renders a simple textarea input. Pass `composerSlot` to override
|
|
242
|
+
* with e.g. the Lexical-based `MessageComposer`.
|
|
243
|
+
*/
|
|
244
|
+
declare const WelcomeScreen: react.ForwardRefExoticComponent<WelcomeScreenProps & react.RefAttributes<HTMLDivElement>>;
|
|
245
|
+
|
|
246
|
+
export { AttachmentPreview as A, ChatContainer as C, MarkdownContent as M, StreamingText as S, TypingIndicator as T, WelcomeScreen as W, Avatar as a, ChatLayout as b, Message as c, MessageComposer as d, MessageList as e, SuggestedActions as f, type AttachmentPreviewProps as g, type AvatarProps as h, type ChatContainerProps as i, type ChatLayoutProps as j, type MarkdownContentProps as k, type MessageComposerProps as l, type MessageListProps as m, type MessageProps as n, type StreamingTextProps as o, type SuggestedActionsProps as p, type TypingIndicatorProps as q, type WelcomeScreenProps as r };
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { HTMLAttributes, ReactNode, TextareaHTMLAttributes, ButtonHTMLAttributes } from 'react';
|
|
3
|
+
import { M as MessageData, P as ParticipantRole } from './message-ufYsvKXP.mjs';
|
|
4
|
+
|
|
5
|
+
interface MessageContextValue {
|
|
6
|
+
message: MessageData;
|
|
7
|
+
isViewer: boolean;
|
|
8
|
+
isStreaming: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare const MessageContext: react.Context<MessageContextValue | null>;
|
|
11
|
+
/**
|
|
12
|
+
* Hook to access the current message context.
|
|
13
|
+
* Must be used within a Message component.
|
|
14
|
+
*/
|
|
15
|
+
declare function useMessage(): MessageContextValue;
|
|
16
|
+
interface MessageProps extends HTMLAttributes<HTMLDivElement> {
|
|
17
|
+
/** The message data */
|
|
18
|
+
message: MessageData;
|
|
19
|
+
/** The viewer's role (used to determine alignment) */
|
|
20
|
+
viewerRole?: ParticipantRole;
|
|
21
|
+
/** Children to render inside the message */
|
|
22
|
+
children: ReactNode;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Headless Message primitive.
|
|
26
|
+
* Provides message context to children and data attributes for styling.
|
|
27
|
+
*/
|
|
28
|
+
declare const Message: react.ForwardRefExoticComponent<MessageProps & react.RefAttributes<HTMLDivElement>>;
|
|
29
|
+
interface MessageContentProps extends HTMLAttributes<HTMLDivElement> {
|
|
30
|
+
/** Custom content to render instead of message text */
|
|
31
|
+
children?: ReactNode;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Renders the message content.
|
|
35
|
+
* By default renders the message's textContent.
|
|
36
|
+
*/
|
|
37
|
+
declare const MessageContent: react.ForwardRefExoticComponent<MessageContentProps & react.RefAttributes<HTMLDivElement>>;
|
|
38
|
+
interface MessageTimestampProps extends HTMLAttributes<HTMLSpanElement> {
|
|
39
|
+
/** Custom date formatter */
|
|
40
|
+
format?: (date: Date) => string;
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Renders the message timestamp.
|
|
44
|
+
*/
|
|
45
|
+
declare const MessageTimestamp: react.ForwardRefExoticComponent<MessageTimestampProps & react.RefAttributes<HTMLSpanElement>>;
|
|
46
|
+
|
|
47
|
+
interface ComposerContextValue {
|
|
48
|
+
content: string;
|
|
49
|
+
isSubmitting: boolean;
|
|
50
|
+
canSubmit: boolean;
|
|
51
|
+
error: string | null;
|
|
52
|
+
handleContentChange: (value: string) => void;
|
|
53
|
+
handleSubmit: () => Promise<void>;
|
|
54
|
+
handleKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
|
|
55
|
+
inputRef: React.RefObject<HTMLTextAreaElement | null>;
|
|
56
|
+
}
|
|
57
|
+
declare const ComposerContext: react.Context<ComposerContextValue | null>;
|
|
58
|
+
/**
|
|
59
|
+
* Hook to access the composer context.
|
|
60
|
+
* Must be used within a MessageComposer component.
|
|
61
|
+
*/
|
|
62
|
+
declare function useComposer(): ComposerContextValue;
|
|
63
|
+
interface MessageComposerProps {
|
|
64
|
+
/** Callback when message is submitted */
|
|
65
|
+
onSubmit: (content: string, attachments?: File[]) => Promise<void>;
|
|
66
|
+
/** Whether the composer is disabled */
|
|
67
|
+
disabled?: boolean;
|
|
68
|
+
/** Children to render inside the composer */
|
|
69
|
+
children: ReactNode;
|
|
70
|
+
/** Additional CSS classes */
|
|
71
|
+
className?: string;
|
|
72
|
+
}
|
|
73
|
+
/**
|
|
74
|
+
* Headless MessageComposer primitive.
|
|
75
|
+
* Provides composer state and behavior to children.
|
|
76
|
+
*/
|
|
77
|
+
declare const MessageComposer: react.ForwardRefExoticComponent<MessageComposerProps & react.RefAttributes<HTMLFormElement>>;
|
|
78
|
+
interface ComposerInputProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange" | "value"> {
|
|
79
|
+
}
|
|
80
|
+
/**
|
|
81
|
+
* Text input for the message composer.
|
|
82
|
+
*/
|
|
83
|
+
declare const ComposerInput: react.ForwardRefExoticComponent<ComposerInputProps & react.RefAttributes<HTMLTextAreaElement>>;
|
|
84
|
+
interface ComposerSubmitProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
85
|
+
}
|
|
86
|
+
/**
|
|
87
|
+
* Submit button for the message composer.
|
|
88
|
+
*/
|
|
89
|
+
declare const ComposerSubmit: react.ForwardRefExoticComponent<ComposerSubmitProps & react.RefAttributes<HTMLButtonElement>>;
|
|
90
|
+
|
|
91
|
+
interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
|
|
92
|
+
/** Name for fallback initials */
|
|
93
|
+
name?: string;
|
|
94
|
+
/** Image URL */
|
|
95
|
+
src?: string;
|
|
96
|
+
/** Alt text for image */
|
|
97
|
+
alt?: string;
|
|
98
|
+
/** Participant role for styling */
|
|
99
|
+
role?: ParticipantRole;
|
|
100
|
+
/** Fallback content when no image or name */
|
|
101
|
+
fallback?: React.ReactNode;
|
|
102
|
+
}
|
|
103
|
+
/**
|
|
104
|
+
* Headless Avatar primitive.
|
|
105
|
+
* Renders an image or fallback initials.
|
|
106
|
+
*/
|
|
107
|
+
declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLDivElement>>;
|
|
108
|
+
|
|
109
|
+
export { Avatar as A, ComposerContext as C, MessageComposer as M, ComposerInput as a, ComposerSubmit as b, MessageContent as c, MessageContext as d, Message as e, MessageTimestamp as f, useMessage as g, type AvatarProps as h, type ComposerInputProps as i, type ComposerSubmitProps as j, type MessageComposerProps as k, type MessageContentProps as l, type MessageProps as m, type MessageTimestampProps as n, useComposer as u };
|