@ash-cloud/ash-ui 0.0.6 → 0.0.7

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/dist/index.d.cts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { NormalizedToolCall, NormalizedEntry, ToolDisplayConfig, WidgetRenderFunction, WidgetAction, LogEntry, ToolDisplayMode, TodoItem, ToolStatus, ActionType } from './types.cjs';
3
3
  export { AssistantMessageEntry, CommandRunAction, CommandRunResult, DEFAULT_DISPLAY_CONFIG, ErrorEntry, FileAttachment, FileEditAction, FileReadAction, FileWriteAction, GenericToolAction, GlobAction, LogCategory, LogLevel, McpToolAction, NormalizedEntryType, SearchAction, ThinkingEntry, TodoStatus, TodoWriteAction, ToolCallEntry, ToolExecutionGroup as ToolExecutionGroupType, ToolResult, UserMessageEntry, WebFetchAction, WebSearchAction, WidgetEntry, WidgetRenderProps, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, isWidgetEntry } from './types.cjs';
4
- import { ReactNode, DragEvent, ChangeEvent } from 'react';
4
+ import { ReactNode, DragEvent, ChangeEvent, ClipboardEvent } from 'react';
5
5
  import { ParsedOption } from './utils.cjs';
6
6
  export { GroupedEntry, ParsedOptionsResult, ToolUseInput, cn, createToolCall, extractTextContent, extractToolCallsFromGroup, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, groupEntriesForCompactMode, mapToolToActionType, normalizeToolResult, parseCommandResult, parseMcpToolName, parseOptionsFromContent, truncate, updateToolCallWithResult } from './utils.cjs';
7
7
  export { AlertCircleIcon, AlertTriangleIcon, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeIcon, CopyIcon, EditIcon, ErrorIcon, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, IconProps, InfoIcon, ListChecksIcon, LoaderIcon, MessageSquareIcon, MoonIcon, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, SpinnerIcon, StopCircleIcon, SunIcon, TerminalIcon, ToolIcon, UserIcon, XCircleIcon, XIcon } from './icons.cjs';
@@ -64,6 +64,12 @@ interface MessageListProps {
64
64
  * Called when widgets dispatch actions via their onAction callback.
65
65
  */
66
66
  onWidgetAction?: (action: WidgetAction) => void;
67
+ /**
68
+ * Enable auto-scroll to bottom when new entries are added.
69
+ * Scrolls within the message list container (not the page).
70
+ * Default: true
71
+ */
72
+ autoScroll?: boolean;
67
73
  /** Additional class names */
68
74
  className?: string;
69
75
  }
@@ -87,7 +93,7 @@ interface MessageListProps {
87
93
  * <MessageList entries={entries} displayConfig={{ mode: 'compact' }} />
88
94
  * ```
89
95
  */
90
- declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, renderWidget, onWidgetAction, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
96
+ declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, renderWidget, onWidgetAction, autoScroll, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
91
97
 
92
98
  interface UserMessageProps {
93
99
  entry: NormalizedEntry;
@@ -202,14 +208,9 @@ interface ToolExecutionGroupProps {
202
208
  /**
203
209
  * ToolExecutionGroup - Displays multiple tool calls in a compact accordion format.
204
210
  *
205
- * In collapsed state, shows a single animated status line with the current/latest
206
- * tool call. When expanded, shows all tool calls as individual cards.
207
- *
208
- * Features:
209
- * - Animated status line that transitions between tool calls
210
- * - Expandable accordion to see all tool call details
211
- * - Count badge showing total tool calls
212
- * - Overall status indicator
211
+ * In collapsed state, shows a summary with tool count, action type icons,
212
+ * and file change badges. When expanded, shows compact tool rows that can
213
+ * be further expanded into full detail cards.
213
214
  *
214
215
  * @example
215
216
  * ```tsx
@@ -219,7 +220,7 @@ interface ToolExecutionGroupProps {
219
220
  * />
220
221
  * ```
221
222
  */
222
- declare function ToolExecutionGroup({ toolCalls, defaultExpanded, animationDuration, className, }: ToolExecutionGroupProps): react_jsx_runtime.JSX.Element | null;
223
+ declare function ToolExecutionGroup({ toolCalls, defaultExpanded, className, }: ToolExecutionGroupProps): react_jsx_runtime.JSX.Element | null;
223
224
 
224
225
  interface CompactToolStatusLineProps {
225
226
  /** The current tool call to display */
@@ -248,6 +249,48 @@ interface CompactToolStatusLineProps {
248
249
  */
249
250
  declare function CompactToolStatusLine({ toolCall, previousToolCall, animationDuration, className, }: CompactToolStatusLineProps): react_jsx_runtime.JSX.Element;
250
251
 
252
+ interface CompactToolRowProps {
253
+ toolCall: NormalizedToolCall;
254
+ /** Whether to show the full path or just filename */
255
+ showFullPath?: boolean;
256
+ className?: string;
257
+ }
258
+ /**
259
+ * CompactToolRow - A single-line compact display of a tool call
260
+ *
261
+ * Shows: Icon | Label | File Badge | Diff Stats | Description
262
+ *
263
+ * @example
264
+ * ```tsx
265
+ * <CompactToolRow toolCall={normalizedToolCall} />
266
+ * ```
267
+ */
268
+ declare function CompactToolRow({ toolCall, showFullPath, className }: CompactToolRowProps): react_jsx_runtime.JSX.Element;
269
+
270
+ interface FileBadgeProps {
271
+ /** Full file path or filename */
272
+ path: string;
273
+ /** Number of lines added */
274
+ linesAdded?: number;
275
+ /** Number of lines removed */
276
+ linesRemoved?: number;
277
+ /** Show only filename instead of full path */
278
+ showOnlyFilename?: boolean;
279
+ className?: string;
280
+ }
281
+ /**
282
+ * FileBadge - A compact pill showing filename with diff stats
283
+ *
284
+ * Used in the collapsed accordion view to show modified files.
285
+ *
286
+ * @example
287
+ * ```tsx
288
+ * <FileBadge path="src/utils.ts" linesAdded={5} linesRemoved={2} />
289
+ * <FileBadge path="SKILL.md" linesAdded={0} linesRemoved={22} />
290
+ * ```
291
+ */
292
+ declare function FileBadge({ path, linesAdded, linesRemoved, showOnlyFilename, className, }: FileBadgeProps): react_jsx_runtime.JSX.Element;
293
+
251
294
  /**
252
295
  * Context type for display mode configuration
253
296
  */
@@ -453,13 +496,12 @@ interface StepAccordionProps {
453
496
  className?: string;
454
497
  }
455
498
  /**
456
- * StepAccordion - Simpler accordion that shows tool calls as numbered steps
499
+ * StepAccordion - Compact accordion that shows tool calls with file badges
457
500
  *
458
501
  * Features:
459
- * - Collapsed header shows current running step or completion status
460
- * - Expanded view shows all steps as a numbered list
461
- * - Shows step duration for completed steps
462
- * - Compact design suitable for embedding in chat
502
+ * - Collapsed header shows tool count, action icons, and file change badges
503
+ * - Expanded view shows CompactToolRow for each tool call
504
+ * - Clean, minimal design matching the compact UI style
463
505
  *
464
506
  * @example
465
507
  * ```tsx
@@ -1060,4 +1102,113 @@ interface UseAgentChatReturn {
1060
1102
  }
1061
1103
  declare function useAgentChat(options: UseAgentChatOptions): UseAgentChatReturn;
1062
1104
 
1063
- export { ActionIcon, type ActionIconProps, ActionType, type StreamEvent as AgentStreamEvent, AssistantMessage, type AssistantMessageProps, type FileAttachment as ChatFileAttachment, CodeBlock, type CodeBlockProps, CompactToolStatusLine, type CompactToolStatusLineProps, type CreateStreamFn, type DisplayModeContextType, DisplayModeProvider, type DisplayModeProviderProps, DisplayModeToggle, type DisplayModeToggleProps, EnvVarsPanel, type EnvVarsPanelProps, ErrorMessage, type ErrorMessageProps, JsonDisplay, type JsonDisplayProps, LoadingIndicator, type LoadingIndicatorProps, LogEntry, LogsPanel, type LogsPanelProps, MessageEntry, type MessageEntryProps, MessageList, type MessageListProps, NormalizedEntry, NormalizedToolCall, OptionCards, type OptionCardsProps, ParsedOption, type QueuedMessage, StatusIndicator, type StatusIndicatorProps, StepAccordion, type StepAccordionProps, type StepStatus, type StreamGenerator, StreamingText, type StreamingTextProps, type Theme, type ThemeContextType, ThemeProvider, type ThemeProviderProps, ThinkingMessage, type ThinkingMessageProps, TodoItem, TodoPanel, type TodoPanelProps, ToolCallCard, type ToolCallCardProps, ToolCallMessage, type ToolCallMessageProps, ToolDisplayConfig, ToolDisplayMode, ToolExecutionGroup, type ToolExecutionGroupProps, ToolStatus, TypewriterText, type TypewriterTextProps, type UseAgentChatOptions, type UseAgentChatReturn, type UseFileUploadOptions, type UseFileUploadReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UseStopExecutionOptions, type UseStopExecutionReturn, UserMessage, type UserMessageProps, WidgetAction, WidgetRenderFunction, useAgentChat, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme };
1105
+ /**
1106
+ * Configuration for long text auto-conversion
1107
+ */
1108
+ interface LongTextConversionOptions {
1109
+ /** Character threshold to trigger conversion (default: 5000) */
1110
+ threshold?: number;
1111
+ /** Filename template for converted attachments (default: 'pasted-text-{timestamp}.txt') */
1112
+ filenameTemplate?: string;
1113
+ /** Callback when text is converted to attachment */
1114
+ onConversion?: (info: ConversionInfo) => void;
1115
+ }
1116
+ /**
1117
+ * Information about a converted text attachment
1118
+ */
1119
+ interface ConversionInfo {
1120
+ /** Original text length */
1121
+ originalLength: number;
1122
+ /** Generated filename */
1123
+ filename: string;
1124
+ /** Truncated preview of the text (first 100 chars) */
1125
+ preview: string;
1126
+ /** Number of lines in the text */
1127
+ lineCount: number;
1128
+ }
1129
+ /**
1130
+ * Text attachment created from long pasted text
1131
+ */
1132
+ interface TextAttachment {
1133
+ /** Filename for the attachment */
1134
+ filename: string;
1135
+ /** Base64-encoded text content */
1136
+ content: string;
1137
+ /** MIME type (always 'text/plain') */
1138
+ mimeType: 'text/plain';
1139
+ /** Size in bytes */
1140
+ size: number;
1141
+ }
1142
+ /**
1143
+ * Result from the useLongTextConversion hook
1144
+ */
1145
+ interface UseLongTextConversionReturn {
1146
+ /**
1147
+ * Process text and convert to attachment if over threshold.
1148
+ * Returns the text if under threshold, or empty string if converted.
1149
+ */
1150
+ processText: (text: string) => {
1151
+ text: string;
1152
+ attachment?: TextAttachment;
1153
+ };
1154
+ /**
1155
+ * Paste event handler that auto-converts long pasted text.
1156
+ * Use this on input elements: onPaste={handlePaste}
1157
+ */
1158
+ handlePaste: (event: ClipboardEvent<HTMLTextAreaElement | HTMLInputElement>, currentValue: string, setValue: (value: string) => void, addAttachment: (attachment: TextAttachment) => void) => void;
1159
+ /**
1160
+ * Last conversion info (for showing notifications)
1161
+ */
1162
+ lastConversion: ConversionInfo | null;
1163
+ /**
1164
+ * Clear the last conversion info
1165
+ */
1166
+ clearLastConversion: () => void;
1167
+ /**
1168
+ * Current threshold value
1169
+ */
1170
+ threshold: number;
1171
+ }
1172
+ /**
1173
+ * Hook for automatically converting long pasted text into text file attachments.
1174
+ *
1175
+ * When users paste text over a certain threshold (default: 5000 characters),
1176
+ * the text is automatically converted to a .txt file attachment instead of
1177
+ * being inserted into the input field.
1178
+ *
1179
+ * @example
1180
+ * ```tsx
1181
+ * function ChatInput({ onSend }) {
1182
+ * const [value, setValue] = useState('');
1183
+ * const [files, setFiles] = useState<TextAttachment[]>([]);
1184
+ *
1185
+ * const { handlePaste, lastConversion, clearLastConversion } = useLongTextConversion({
1186
+ * threshold: 5000,
1187
+ * onConversion: (info) => {
1188
+ * console.log(`Converted ${info.originalLength} chars to ${info.filename}`);
1189
+ * }
1190
+ * });
1191
+ *
1192
+ * return (
1193
+ * <>
1194
+ * {lastConversion && (
1195
+ * <div className="notification">
1196
+ * Long text ({lastConversion.originalLength} chars) converted to attachment
1197
+ * <button onClick={clearLastConversion}>Dismiss</button>
1198
+ * </div>
1199
+ * )}
1200
+ * <textarea
1201
+ * value={value}
1202
+ * onChange={(e) => setValue(e.target.value)}
1203
+ * onPaste={(e) => handlePaste(e, value, setValue, (attachment) => {
1204
+ * setFiles(prev => [...prev, attachment]);
1205
+ * })}
1206
+ * />
1207
+ * </>
1208
+ * );
1209
+ * }
1210
+ * ```
1211
+ */
1212
+ declare function useLongTextConversion({ threshold, filenameTemplate, onConversion, }?: LongTextConversionOptions): UseLongTextConversionReturn;
1213
+
1214
+ export { ActionIcon, type ActionIconProps, ActionType, type StreamEvent as AgentStreamEvent, AssistantMessage, type AssistantMessageProps, type FileAttachment as ChatFileAttachment, CodeBlock, type CodeBlockProps, CompactToolRow, type CompactToolRowProps, CompactToolStatusLine, type CompactToolStatusLineProps, type ConversionInfo, type CreateStreamFn, type DisplayModeContextType, DisplayModeProvider, type DisplayModeProviderProps, DisplayModeToggle, type DisplayModeToggleProps, EnvVarsPanel, type EnvVarsPanelProps, ErrorMessage, type ErrorMessageProps, FileBadge, type FileBadgeProps, JsonDisplay, type JsonDisplayProps, LoadingIndicator, type LoadingIndicatorProps, LogEntry, LogsPanel, type LogsPanelProps, type LongTextConversionOptions, MessageEntry, type MessageEntryProps, MessageList, type MessageListProps, NormalizedEntry, NormalizedToolCall, OptionCards, type OptionCardsProps, ParsedOption, type QueuedMessage, StatusIndicator, type StatusIndicatorProps, StepAccordion, type StepAccordionProps, type StepStatus, type StreamGenerator, StreamingText, type StreamingTextProps, type TextAttachment, type Theme, type ThemeContextType, ThemeProvider, type ThemeProviderProps, ThinkingMessage, type ThinkingMessageProps, TodoItem, TodoPanel, type TodoPanelProps, ToolCallCard, type ToolCallCardProps, ToolCallMessage, type ToolCallMessageProps, ToolDisplayConfig, ToolDisplayMode, ToolExecutionGroup, type ToolExecutionGroupProps, ToolStatus, TypewriterText, type TypewriterTextProps, type UseAgentChatOptions, type UseAgentChatReturn, type UseFileUploadOptions, type UseFileUploadReturn, type UseLongTextConversionReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UseStopExecutionOptions, type UseStopExecutionReturn, UserMessage, type UserMessageProps, WidgetAction, WidgetRenderFunction, useAgentChat, useDisplayConfig, useDisplayMode, useFileUpload, useLongTextConversion, useMessageQueue, useStopExecution, useTheme };
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import { NormalizedToolCall, NormalizedEntry, ToolDisplayConfig, WidgetRenderFunction, WidgetAction, LogEntry, ToolDisplayMode, TodoItem, ToolStatus, ActionType } from './types.js';
3
3
  export { AssistantMessageEntry, CommandRunAction, CommandRunResult, DEFAULT_DISPLAY_CONFIG, ErrorEntry, FileAttachment, FileEditAction, FileReadAction, FileWriteAction, GenericToolAction, GlobAction, LogCategory, LogLevel, McpToolAction, NormalizedEntryType, SearchAction, ThinkingEntry, TodoStatus, TodoWriteAction, ToolCallEntry, ToolExecutionGroup as ToolExecutionGroupType, ToolResult, UserMessageEntry, WebFetchAction, WebSearchAction, WidgetEntry, WidgetRenderProps, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, isWidgetEntry } from './types.js';
4
- import { ReactNode, DragEvent, ChangeEvent } from 'react';
4
+ import { ReactNode, DragEvent, ChangeEvent, ClipboardEvent } from 'react';
5
5
  import { ParsedOption } from './utils.js';
6
6
  export { GroupedEntry, ParsedOptionsResult, ToolUseInput, cn, createToolCall, extractTextContent, extractToolCallsFromGroup, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, groupEntriesForCompactMode, mapToolToActionType, normalizeToolResult, parseCommandResult, parseMcpToolName, parseOptionsFromContent, truncate, updateToolCallWithResult } from './utils.js';
7
7
  export { AlertCircleIcon, AlertTriangleIcon, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeIcon, CopyIcon, EditIcon, ErrorIcon, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, IconProps, InfoIcon, ListChecksIcon, LoaderIcon, MessageSquareIcon, MoonIcon, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, SpinnerIcon, StopCircleIcon, SunIcon, TerminalIcon, ToolIcon, UserIcon, XCircleIcon, XIcon } from './icons.js';
@@ -64,6 +64,12 @@ interface MessageListProps {
64
64
  * Called when widgets dispatch actions via their onAction callback.
65
65
  */
66
66
  onWidgetAction?: (action: WidgetAction) => void;
67
+ /**
68
+ * Enable auto-scroll to bottom when new entries are added.
69
+ * Scrolls within the message list container (not the page).
70
+ * Default: true
71
+ */
72
+ autoScroll?: boolean;
67
73
  /** Additional class names */
68
74
  className?: string;
69
75
  }
@@ -87,7 +93,7 @@ interface MessageListProps {
87
93
  * <MessageList entries={entries} displayConfig={{ mode: 'compact' }} />
88
94
  * ```
89
95
  */
90
- declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, renderWidget, onWidgetAction, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
96
+ declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, renderWidget, onWidgetAction, autoScroll, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
91
97
 
92
98
  interface UserMessageProps {
93
99
  entry: NormalizedEntry;
@@ -202,14 +208,9 @@ interface ToolExecutionGroupProps {
202
208
  /**
203
209
  * ToolExecutionGroup - Displays multiple tool calls in a compact accordion format.
204
210
  *
205
- * In collapsed state, shows a single animated status line with the current/latest
206
- * tool call. When expanded, shows all tool calls as individual cards.
207
- *
208
- * Features:
209
- * - Animated status line that transitions between tool calls
210
- * - Expandable accordion to see all tool call details
211
- * - Count badge showing total tool calls
212
- * - Overall status indicator
211
+ * In collapsed state, shows a summary with tool count, action type icons,
212
+ * and file change badges. When expanded, shows compact tool rows that can
213
+ * be further expanded into full detail cards.
213
214
  *
214
215
  * @example
215
216
  * ```tsx
@@ -219,7 +220,7 @@ interface ToolExecutionGroupProps {
219
220
  * />
220
221
  * ```
221
222
  */
222
- declare function ToolExecutionGroup({ toolCalls, defaultExpanded, animationDuration, className, }: ToolExecutionGroupProps): react_jsx_runtime.JSX.Element | null;
223
+ declare function ToolExecutionGroup({ toolCalls, defaultExpanded, className, }: ToolExecutionGroupProps): react_jsx_runtime.JSX.Element | null;
223
224
 
224
225
  interface CompactToolStatusLineProps {
225
226
  /** The current tool call to display */
@@ -248,6 +249,48 @@ interface CompactToolStatusLineProps {
248
249
  */
249
250
  declare function CompactToolStatusLine({ toolCall, previousToolCall, animationDuration, className, }: CompactToolStatusLineProps): react_jsx_runtime.JSX.Element;
250
251
 
252
+ interface CompactToolRowProps {
253
+ toolCall: NormalizedToolCall;
254
+ /** Whether to show the full path or just filename */
255
+ showFullPath?: boolean;
256
+ className?: string;
257
+ }
258
+ /**
259
+ * CompactToolRow - A single-line compact display of a tool call
260
+ *
261
+ * Shows: Icon | Label | File Badge | Diff Stats | Description
262
+ *
263
+ * @example
264
+ * ```tsx
265
+ * <CompactToolRow toolCall={normalizedToolCall} />
266
+ * ```
267
+ */
268
+ declare function CompactToolRow({ toolCall, showFullPath, className }: CompactToolRowProps): react_jsx_runtime.JSX.Element;
269
+
270
+ interface FileBadgeProps {
271
+ /** Full file path or filename */
272
+ path: string;
273
+ /** Number of lines added */
274
+ linesAdded?: number;
275
+ /** Number of lines removed */
276
+ linesRemoved?: number;
277
+ /** Show only filename instead of full path */
278
+ showOnlyFilename?: boolean;
279
+ className?: string;
280
+ }
281
+ /**
282
+ * FileBadge - A compact pill showing filename with diff stats
283
+ *
284
+ * Used in the collapsed accordion view to show modified files.
285
+ *
286
+ * @example
287
+ * ```tsx
288
+ * <FileBadge path="src/utils.ts" linesAdded={5} linesRemoved={2} />
289
+ * <FileBadge path="SKILL.md" linesAdded={0} linesRemoved={22} />
290
+ * ```
291
+ */
292
+ declare function FileBadge({ path, linesAdded, linesRemoved, showOnlyFilename, className, }: FileBadgeProps): react_jsx_runtime.JSX.Element;
293
+
251
294
  /**
252
295
  * Context type for display mode configuration
253
296
  */
@@ -453,13 +496,12 @@ interface StepAccordionProps {
453
496
  className?: string;
454
497
  }
455
498
  /**
456
- * StepAccordion - Simpler accordion that shows tool calls as numbered steps
499
+ * StepAccordion - Compact accordion that shows tool calls with file badges
457
500
  *
458
501
  * Features:
459
- * - Collapsed header shows current running step or completion status
460
- * - Expanded view shows all steps as a numbered list
461
- * - Shows step duration for completed steps
462
- * - Compact design suitable for embedding in chat
502
+ * - Collapsed header shows tool count, action icons, and file change badges
503
+ * - Expanded view shows CompactToolRow for each tool call
504
+ * - Clean, minimal design matching the compact UI style
463
505
  *
464
506
  * @example
465
507
  * ```tsx
@@ -1060,4 +1102,113 @@ interface UseAgentChatReturn {
1060
1102
  }
1061
1103
  declare function useAgentChat(options: UseAgentChatOptions): UseAgentChatReturn;
1062
1104
 
1063
- export { ActionIcon, type ActionIconProps, ActionType, type StreamEvent as AgentStreamEvent, AssistantMessage, type AssistantMessageProps, type FileAttachment as ChatFileAttachment, CodeBlock, type CodeBlockProps, CompactToolStatusLine, type CompactToolStatusLineProps, type CreateStreamFn, type DisplayModeContextType, DisplayModeProvider, type DisplayModeProviderProps, DisplayModeToggle, type DisplayModeToggleProps, EnvVarsPanel, type EnvVarsPanelProps, ErrorMessage, type ErrorMessageProps, JsonDisplay, type JsonDisplayProps, LoadingIndicator, type LoadingIndicatorProps, LogEntry, LogsPanel, type LogsPanelProps, MessageEntry, type MessageEntryProps, MessageList, type MessageListProps, NormalizedEntry, NormalizedToolCall, OptionCards, type OptionCardsProps, ParsedOption, type QueuedMessage, StatusIndicator, type StatusIndicatorProps, StepAccordion, type StepAccordionProps, type StepStatus, type StreamGenerator, StreamingText, type StreamingTextProps, type Theme, type ThemeContextType, ThemeProvider, type ThemeProviderProps, ThinkingMessage, type ThinkingMessageProps, TodoItem, TodoPanel, type TodoPanelProps, ToolCallCard, type ToolCallCardProps, ToolCallMessage, type ToolCallMessageProps, ToolDisplayConfig, ToolDisplayMode, ToolExecutionGroup, type ToolExecutionGroupProps, ToolStatus, TypewriterText, type TypewriterTextProps, type UseAgentChatOptions, type UseAgentChatReturn, type UseFileUploadOptions, type UseFileUploadReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UseStopExecutionOptions, type UseStopExecutionReturn, UserMessage, type UserMessageProps, WidgetAction, WidgetRenderFunction, useAgentChat, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme };
1105
+ /**
1106
+ * Configuration for long text auto-conversion
1107
+ */
1108
+ interface LongTextConversionOptions {
1109
+ /** Character threshold to trigger conversion (default: 5000) */
1110
+ threshold?: number;
1111
+ /** Filename template for converted attachments (default: 'pasted-text-{timestamp}.txt') */
1112
+ filenameTemplate?: string;
1113
+ /** Callback when text is converted to attachment */
1114
+ onConversion?: (info: ConversionInfo) => void;
1115
+ }
1116
+ /**
1117
+ * Information about a converted text attachment
1118
+ */
1119
+ interface ConversionInfo {
1120
+ /** Original text length */
1121
+ originalLength: number;
1122
+ /** Generated filename */
1123
+ filename: string;
1124
+ /** Truncated preview of the text (first 100 chars) */
1125
+ preview: string;
1126
+ /** Number of lines in the text */
1127
+ lineCount: number;
1128
+ }
1129
+ /**
1130
+ * Text attachment created from long pasted text
1131
+ */
1132
+ interface TextAttachment {
1133
+ /** Filename for the attachment */
1134
+ filename: string;
1135
+ /** Base64-encoded text content */
1136
+ content: string;
1137
+ /** MIME type (always 'text/plain') */
1138
+ mimeType: 'text/plain';
1139
+ /** Size in bytes */
1140
+ size: number;
1141
+ }
1142
+ /**
1143
+ * Result from the useLongTextConversion hook
1144
+ */
1145
+ interface UseLongTextConversionReturn {
1146
+ /**
1147
+ * Process text and convert to attachment if over threshold.
1148
+ * Returns the text if under threshold, or empty string if converted.
1149
+ */
1150
+ processText: (text: string) => {
1151
+ text: string;
1152
+ attachment?: TextAttachment;
1153
+ };
1154
+ /**
1155
+ * Paste event handler that auto-converts long pasted text.
1156
+ * Use this on input elements: onPaste={handlePaste}
1157
+ */
1158
+ handlePaste: (event: ClipboardEvent<HTMLTextAreaElement | HTMLInputElement>, currentValue: string, setValue: (value: string) => void, addAttachment: (attachment: TextAttachment) => void) => void;
1159
+ /**
1160
+ * Last conversion info (for showing notifications)
1161
+ */
1162
+ lastConversion: ConversionInfo | null;
1163
+ /**
1164
+ * Clear the last conversion info
1165
+ */
1166
+ clearLastConversion: () => void;
1167
+ /**
1168
+ * Current threshold value
1169
+ */
1170
+ threshold: number;
1171
+ }
1172
+ /**
1173
+ * Hook for automatically converting long pasted text into text file attachments.
1174
+ *
1175
+ * When users paste text over a certain threshold (default: 5000 characters),
1176
+ * the text is automatically converted to a .txt file attachment instead of
1177
+ * being inserted into the input field.
1178
+ *
1179
+ * @example
1180
+ * ```tsx
1181
+ * function ChatInput({ onSend }) {
1182
+ * const [value, setValue] = useState('');
1183
+ * const [files, setFiles] = useState<TextAttachment[]>([]);
1184
+ *
1185
+ * const { handlePaste, lastConversion, clearLastConversion } = useLongTextConversion({
1186
+ * threshold: 5000,
1187
+ * onConversion: (info) => {
1188
+ * console.log(`Converted ${info.originalLength} chars to ${info.filename}`);
1189
+ * }
1190
+ * });
1191
+ *
1192
+ * return (
1193
+ * <>
1194
+ * {lastConversion && (
1195
+ * <div className="notification">
1196
+ * Long text ({lastConversion.originalLength} chars) converted to attachment
1197
+ * <button onClick={clearLastConversion}>Dismiss</button>
1198
+ * </div>
1199
+ * )}
1200
+ * <textarea
1201
+ * value={value}
1202
+ * onChange={(e) => setValue(e.target.value)}
1203
+ * onPaste={(e) => handlePaste(e, value, setValue, (attachment) => {
1204
+ * setFiles(prev => [...prev, attachment]);
1205
+ * })}
1206
+ * />
1207
+ * </>
1208
+ * );
1209
+ * }
1210
+ * ```
1211
+ */
1212
+ declare function useLongTextConversion({ threshold, filenameTemplate, onConversion, }?: LongTextConversionOptions): UseLongTextConversionReturn;
1213
+
1214
+ export { ActionIcon, type ActionIconProps, ActionType, type StreamEvent as AgentStreamEvent, AssistantMessage, type AssistantMessageProps, type FileAttachment as ChatFileAttachment, CodeBlock, type CodeBlockProps, CompactToolRow, type CompactToolRowProps, CompactToolStatusLine, type CompactToolStatusLineProps, type ConversionInfo, type CreateStreamFn, type DisplayModeContextType, DisplayModeProvider, type DisplayModeProviderProps, DisplayModeToggle, type DisplayModeToggleProps, EnvVarsPanel, type EnvVarsPanelProps, ErrorMessage, type ErrorMessageProps, FileBadge, type FileBadgeProps, JsonDisplay, type JsonDisplayProps, LoadingIndicator, type LoadingIndicatorProps, LogEntry, LogsPanel, type LogsPanelProps, type LongTextConversionOptions, MessageEntry, type MessageEntryProps, MessageList, type MessageListProps, NormalizedEntry, NormalizedToolCall, OptionCards, type OptionCardsProps, ParsedOption, type QueuedMessage, StatusIndicator, type StatusIndicatorProps, StepAccordion, type StepAccordionProps, type StepStatus, type StreamGenerator, StreamingText, type StreamingTextProps, type TextAttachment, type Theme, type ThemeContextType, ThemeProvider, type ThemeProviderProps, ThinkingMessage, type ThinkingMessageProps, TodoItem, TodoPanel, type TodoPanelProps, ToolCallCard, type ToolCallCardProps, ToolCallMessage, type ToolCallMessageProps, ToolDisplayConfig, ToolDisplayMode, ToolExecutionGroup, type ToolExecutionGroupProps, ToolStatus, TypewriterText, type TypewriterTextProps, type UseAgentChatOptions, type UseAgentChatReturn, type UseFileUploadOptions, type UseFileUploadReturn, type UseLongTextConversionReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UseStopExecutionOptions, type UseStopExecutionReturn, UserMessage, type UserMessageProps, WidgetAction, WidgetRenderFunction, useAgentChat, useDisplayConfig, useDisplayMode, useFileUpload, useLongTextConversion, useMessageQueue, useStopExecution, useTheme };