@ash-cloud/ash-ui 0.0.5 → 0.0.7

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { NormalizedToolCall, NormalizedEntry, ToolDisplayConfig, WidgetRenderFunction, WidgetAction, LogEntry, ToolDisplayMode, TodoItem, ToolStatus, ActionType } from './types.js';
 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';
-import { ReactNode, DragEvent, ChangeEvent } from 'react';
+import { ReactNode, DragEvent, ChangeEvent, ClipboardEvent } from 'react';
 import { ParsedOption } from './utils.js';
 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';
 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 {
      * Called when widgets dispatch actions via their onAction callback.
      */
     onWidgetAction?: (action: WidgetAction) => void;
+    /**
+     * Enable auto-scroll to bottom when new entries are added.
+     * Scrolls within the message list container (not the page).
+     * Default: true
+     */
+    autoScroll?: boolean;
     /** Additional class names */
     className?: string;
 }
@@ -87,7 +93,7 @@ interface MessageListProps {
  * <MessageList entries={entries} displayConfig={{ mode: 'compact' }} />
  * ```
  */
-declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, renderWidget, onWidgetAction, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
+declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, renderWidget, onWidgetAction, autoScroll, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
 
 interface UserMessageProps {
     entry: NormalizedEntry;
@@ -202,14 +208,9 @@ interface ToolExecutionGroupProps {
 /**
  * ToolExecutionGroup - Displays multiple tool calls in a compact accordion format.
  *
- * In collapsed state, shows a single animated status line with the current/latest
- * tool call. When expanded, shows all tool calls as individual cards.
- *
- * Features:
- * - Animated status line that transitions between tool calls
- * - Expandable accordion to see all tool call details
- * - Count badge showing total tool calls
- * - Overall status indicator
+ * In collapsed state, shows a summary with tool count, action type icons,
+ * and file change badges. When expanded, shows compact tool rows that can
+ * be further expanded into full detail cards.
  *
  * @example
  * ```tsx
@@ -219,7 +220,7 @@ interface ToolExecutionGroupProps {
  * />
  * ```
  */
-declare function ToolExecutionGroup({ toolCalls, defaultExpanded, animationDuration, className, }: ToolExecutionGroupProps): react_jsx_runtime.JSX.Element | null;
+declare function ToolExecutionGroup({ toolCalls, defaultExpanded, className, }: ToolExecutionGroupProps): react_jsx_runtime.JSX.Element | null;
 
 interface CompactToolStatusLineProps {
     /** The current tool call to display */
@@ -248,6 +249,48 @@ interface CompactToolStatusLineProps {
  */
 declare function CompactToolStatusLine({ toolCall, previousToolCall, animationDuration, className, }: CompactToolStatusLineProps): react_jsx_runtime.JSX.Element;
 
+interface CompactToolRowProps {
+    toolCall: NormalizedToolCall;
+    /** Whether to show the full path or just filename */
+    showFullPath?: boolean;
+    className?: string;
+}
+/**
+ * CompactToolRow - A single-line compact display of a tool call
+ *
+ * Shows: Icon | Label | File Badge | Diff Stats | Description
+ *
+ * @example
+ * ```tsx
+ * <CompactToolRow toolCall={normalizedToolCall} />
+ * ```
+ */
+declare function CompactToolRow({ toolCall, showFullPath, className }: CompactToolRowProps): react_jsx_runtime.JSX.Element;
+
+interface FileBadgeProps {
+    /** Full file path or filename */
+    path: string;
+    /** Number of lines added */
+    linesAdded?: number;
+    /** Number of lines removed */
+    linesRemoved?: number;
+    /** Show only filename instead of full path */
+    showOnlyFilename?: boolean;
+    className?: string;
+}
+/**
+ * FileBadge - A compact pill showing filename with diff stats
+ *
+ * Used in the collapsed accordion view to show modified files.
+ *
+ * @example
+ * ```tsx
+ * <FileBadge path="src/utils.ts" linesAdded={5} linesRemoved={2} />
+ * <FileBadge path="SKILL.md" linesAdded={0} linesRemoved={22} />
+ * ```
+ */
+declare function FileBadge({ path, linesAdded, linesRemoved, showOnlyFilename, className, }: FileBadgeProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Context type for display mode configuration
  */
@@ -453,13 +496,12 @@ interface StepAccordionProps {
     className?: string;
 }
 /**
- * StepAccordion - Simpler accordion that shows tool calls as numbered steps
+ * StepAccordion - Compact accordion that shows tool calls with file badges
  *
  * Features:
- * - Collapsed header shows current running step or completion status
- * - Expanded view shows all steps as a numbered list
- * - Shows step duration for completed steps
- * - Compact design suitable for embedding in chat
+ * - Collapsed header shows tool count, action icons, and file change badges
+ * - Expanded view shows CompactToolRow for each tool call
+ * - Clean, minimal design matching the compact UI style
  *
  * @example
  * ```tsx
@@ -898,4 +940,275 @@ interface UseFileUploadReturn {
 declare function useFileUpload({ maxFileSize, // 100MB
 maxFiles, onValidationError, }?: UseFileUploadOptions): UseFileUploadReturn;
 
-export { ActionIcon, type ActionIconProps, ActionType, AssistantMessage, type AssistantMessageProps, type FileAttachment as ChatFileAttachment, CodeBlock, type CodeBlockProps, CompactToolStatusLine, type CompactToolStatusLineProps, 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, 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 UseFileUploadOptions, type UseFileUploadReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UseStopExecutionOptions, type UseStopExecutionReturn, UserMessage, type UserMessageProps, WidgetAction, WidgetRenderFunction, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme };
+/**
+ * useAgentChat - A React hook for streaming agent conversations
+ *
+ * This hook handles all the complexity of streaming agent responses:
+ * - Real-time text streaming via text_delta events
+ * - Tool call tracking and correlation
+ * - Proper deduplication (no duplicate messages)
+ * - Seamless transition from streaming to finalized state
+ *
+ * @example
+ * ```tsx
+ * import { useAgentChat } from '@ash-cloud/ash-ui';
+ * import { AgentCloudClient } from '@ash-cloud/client';
+ *
+ * const client = new AgentCloudClient({ apiKey: '...' });
+ *
+ * function Chat() {
+ *   const {
+ *     entries,
+ *     isStreaming,
+ *     error,
+ *     sessionId,
+ *     send,
+ *     stop,
+ *   } = useAgentChat({
+ *     client,
+ *     agentId: 'my-agent-id',
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       <MessageList entries={entries} loading={isStreaming} />
+ *       <input onSubmit={(e) => send(e.target.value)} />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+
+/**
+ * Stream event type - matches @ash-cloud/client StreamEvent
+ * We define it here to avoid a hard dependency on the client package
+ */
+interface StreamEvent {
+    type: string;
+    sessionId?: string;
+    claudeSessionId?: string;
+    delta?: string;
+    text?: string;
+    toolId?: string;
+    toolName?: string;
+    input?: unknown;
+    toolResult?: unknown;
+    isError?: boolean;
+    error?: string;
+    code?: string;
+    status?: string;
+    result?: string;
+    totalCost?: number;
+    totalTokens?: number;
+    entry?: {
+        timestamp: string;
+        level: string;
+        category: string;
+        message: string;
+        data?: Record<string, unknown>;
+    };
+}
+/**
+ * Async generator that yields StreamEvent objects
+ */
+type StreamGenerator = AsyncGenerator<StreamEvent, void, unknown>;
+/**
+ * Function that creates a stream of events
+ * This matches the signature of client.agents.run() and client.sessions.send()
+ */
+type CreateStreamFn = (prompt: string, sessionId?: string) => StreamGenerator;
+/**
+ * Options for useAgentChat
+ */
+interface UseAgentChatOptions {
+    /**
+     * Function to create a stream of events.
+     * Can wrap client.agents.run() or client.sessions.send()
+     *
+     * @example
+     * ```tsx
+     * createStream: (prompt, sessionId) => {
+     *   if (sessionId) {
+     *     return client.sessions.send(sessionId, prompt);
+     *   }
+     *   return client.agents.run(agentId, prompt);
+     * }
+     * ```
+     */
+    createStream: CreateStreamFn;
+    /**
+     * Initial session ID (for resuming a conversation)
+     */
+    initialSessionId?: string;
+    /**
+     * Initial entries to display (e.g., from loading history)
+     */
+    initialEntries?: NormalizedEntry[];
+    /**
+     * Callback when session starts
+     */
+    onSessionStart?: (sessionId: string) => void;
+    /**
+     * Callback when session ends
+     */
+    onSessionEnd?: (sessionId: string, status: string) => void;
+    /**
+     * Callback when an error occurs
+     */
+    onError?: (error: string) => void;
+    /**
+     * Callback for sandbox log events
+     */
+    onSandboxLog?: (entry: NonNullable<StreamEvent['entry']>) => void;
+}
+/**
+ * Return type for useAgentChat
+ */
+interface UseAgentChatReturn {
+    /**
+     * All entries to display (history + streaming content)
+     * This is the single source of truth for rendering
+     */
+    entries: NormalizedEntry[];
+    /**
+     * Whether a message is currently being streamed
+     */
+    isStreaming: boolean;
+    /**
+     * Current error message (if any)
+     */
+    error: string | null;
+    /**
+     * Current session ID
+     */
+    sessionId: string | null;
+    /**
+     * Send a message to the agent
+     */
+    send: (prompt: string) => Promise<void>;
+    /**
+     * Stop the current streaming request
+     */
+    stop: () => void;
+    /**
+     * Clear all entries and start fresh
+     */
+    clear: () => void;
+    /**
+     * Set entries from external source (e.g., loading from server)
+     * This replaces all entries and clears streaming state
+     */
+    setEntries: (entries: NormalizedEntry[]) => void;
+}
+declare function useAgentChat(options: UseAgentChatOptions): UseAgentChatReturn;
+
+/**
+ * Configuration for long text auto-conversion
+ */
+interface LongTextConversionOptions {
+    /** Character threshold to trigger conversion (default: 5000) */
+    threshold?: number;
+    /** Filename template for converted attachments (default: 'pasted-text-{timestamp}.txt') */
+    filenameTemplate?: string;
+    /** Callback when text is converted to attachment */
+    onConversion?: (info: ConversionInfo) => void;
+}
+/**
+ * Information about a converted text attachment
+ */
+interface ConversionInfo {
+    /** Original text length */
+    originalLength: number;
+    /** Generated filename */
+    filename: string;
+    /** Truncated preview of the text (first 100 chars) */
+    preview: string;
+    /** Number of lines in the text */
+    lineCount: number;
+}
+/**
+ * Text attachment created from long pasted text
+ */
+interface TextAttachment {
+    /** Filename for the attachment */
+    filename: string;
+    /** Base64-encoded text content */
+    content: string;
+    /** MIME type (always 'text/plain') */
+    mimeType: 'text/plain';
+    /** Size in bytes */
+    size: number;
+}
+/**
+ * Result from the useLongTextConversion hook
+ */
+interface UseLongTextConversionReturn {
+    /**
+     * Process text and convert to attachment if over threshold.
+     * Returns the text if under threshold, or empty string if converted.
+     */
+    processText: (text: string) => {
+        text: string;
+        attachment?: TextAttachment;
+    };
+    /**
+     * Paste event handler that auto-converts long pasted text.
+     * Use this on input elements: onPaste={handlePaste}
+     */
+    handlePaste: (event: ClipboardEvent<HTMLTextAreaElement | HTMLInputElement>, currentValue: string, setValue: (value: string) => void, addAttachment: (attachment: TextAttachment) => void) => void;
+    /**
+     * Last conversion info (for showing notifications)
+     */
+    lastConversion: ConversionInfo | null;
+    /**
+     * Clear the last conversion info
+     */
+    clearLastConversion: () => void;
+    /**
+     * Current threshold value
+     */
+    threshold: number;
+}
+/**
+ * Hook for automatically converting long pasted text into text file attachments.
+ *
+ * When users paste text over a certain threshold (default: 5000 characters),
+ * the text is automatically converted to a .txt file attachment instead of
+ * being inserted into the input field.
+ *
+ * @example
+ * ```tsx
+ * function ChatInput({ onSend }) {
+ *   const [value, setValue] = useState('');
+ *   const [files, setFiles] = useState<TextAttachment[]>([]);
+ *
+ *   const { handlePaste, lastConversion, clearLastConversion } = useLongTextConversion({
+ *     threshold: 5000,
+ *     onConversion: (info) => {
+ *       console.log(`Converted ${info.originalLength} chars to ${info.filename}`);
+ *     }
+ *   });
+ *
+ *   return (
+ *     <>
+ *       {lastConversion && (
+ *         <div className="notification">
+ *           Long text ({lastConversion.originalLength} chars) converted to attachment
+ *           <button onClick={clearLastConversion}>Dismiss</button>
+ *         </div>
+ *       )}
+ *       <textarea
+ *         value={value}
+ *         onChange={(e) => setValue(e.target.value)}
+ *         onPaste={(e) => handlePaste(e, value, setValue, (attachment) => {
+ *           setFiles(prev => [...prev, attachment]);
+ *         })}
+ *       />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function useLongTextConversion({ threshold, filenameTemplate, onConversion, }?: LongTextConversionOptions): UseLongTextConversionReturn;
+
+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 };