@ash-cloud/ash-ui 0.0.1 → 0.0.3

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { NormalizedToolCall, NormalizedEntry, ToolDisplayConfig, LogEntry, ToolDisplayMode, TodoItem, ToolStatus, ActionType } from './types.cjs';
 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, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction } from './types.cjs';
-import { ReactNode } from 'react';
+import { ReactNode, DragEvent, ChangeEvent } from 'react';
 import { ParsedOption } from './utils.cjs';
 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';
 export { AlertCircleIcon, AlertTriangleIcon, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeIcon, CopyIcon, EditIcon, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, IconProps, InfoIcon, ListChecksIcon, LoaderIcon, MessageSquareIcon, MoonIcon, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, StopCircleIcon, SunIcon, TerminalIcon, ToolIcon, UserIcon, XCircleIcon, XIcon } from './icons.cjs';
@@ -336,6 +336,83 @@ interface TodoPanelProps {
  */
 declare function TodoPanel({ todos, title, compact, showProgress, className, }: TodoPanelProps): react_jsx_runtime.JSX.Element | null;
 
+interface EnvVarsPanelProps {
+    /** Current environment variables */
+    envVars: Record<string, string>;
+    /** Callback when environment variables change */
+    onChange: (envVars: Record<string, string>) => void;
+    /** Whether the panel is collapsed initially (default: true) */
+    defaultCollapsed?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Label for the panel header */
+    label?: string;
+    /** Helper text shown below the input */
+    helperText?: string;
+}
+/**
+ * EnvVarsPanel - Collapsible panel for managing environment variables
+ *
+ * Provides a UI for adding, viewing, and removing environment variables.
+ * Commonly used to set environment variables for sandbox/agent execution.
+ *
+ * @example
+ * ```tsx
+ * function ChatSettings() {
+ *   const [envVars, setEnvVars] = useState<Record<string, string>>({});
+ *
+ *   return (
+ *     <EnvVarsPanel
+ *       envVars={envVars}
+ *       onChange={setEnvVars}
+ *       helperText="These variables will be available in the sandbox."
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function EnvVarsPanel({ envVars, onChange, defaultCollapsed, className, label, helperText, }: EnvVarsPanelProps): react_jsx_runtime.JSX.Element;
+
+interface DisplayModeToggleProps {
+    /** Additional class name */
+    className?: string;
+    /** Show label text (default: true) */
+    showLabel?: boolean;
+    /** Custom labels for modes */
+    labels?: {
+        inline?: string;
+        compact?: string;
+    };
+}
+/**
+ * DisplayModeToggle - Button to toggle between inline and compact display modes
+ *
+ * Uses the DisplayModeContext to toggle between 'inline' and 'compact' modes.
+ * Must be used within a DisplayModeProvider.
+ *
+ * @example
+ * ```tsx
+ * function ChatHeader() {
+ *   return (
+ *     <header>
+ *       <h1>Chat</h1>
+ *       <DisplayModeToggle />
+ *     </header>
+ *   );
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <DisplayModeProvider>
+ *       <ChatHeader />
+ *       <MessageList entries={entries} />
+ *     </DisplayModeProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function DisplayModeToggle({ className, showLabel, labels, }: DisplayModeToggleProps): react_jsx_runtime.JSX.Element;
+
 interface StatusIndicatorProps {
     status: ToolStatus;
     size?: 'sm' | 'md' | 'lg';
@@ -532,4 +609,235 @@ interface ThemeProviderProps {
 declare function ThemeProvider({ children, defaultTheme, storageKey, listenToSystemChanges, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 declare function useTheme(): ThemeContextType;
 
-export { ActionIcon, type ActionIconProps, ActionType, AssistantMessage, type AssistantMessageProps, CodeBlock, type CodeBlockProps, CompactToolStatusLine, type CompactToolStatusLineProps, type DisplayModeContextType, DisplayModeProvider, type DisplayModeProviderProps, 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, StatusIndicator, type StatusIndicatorProps, 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, UserMessage, type UserMessageProps, useDisplayConfig, useDisplayMode, useTheme };
+/**
+ * A queued message waiting to be sent
+ */
+interface QueuedMessage {
+    /** Unique ID for this queued message */
+    id: string;
+    /** The message text */
+    text: string;
+    /** Optional file attachments */
+    files?: FileAttachment$1[];
+    /** Timestamp when queued */
+    queuedAt: number;
+}
+/**
+ * File attachment for upload
+ */
+interface FileAttachment$1 {
+    /** Original filename */
+    filename: string;
+    /** Base64-encoded file content */
+    content: string;
+    /** MIME type of the file */
+    mimeType: string;
+    /** File size in bytes */
+    size: number;
+}
+interface UseMessageQueueOptions {
+    /** Callback to process a message - should return when processing is complete */
+    onProcessMessage: (message: QueuedMessage) => Promise<void>;
+    /** Whether messages can currently be processed (e.g., agent selected) */
+    canProcess?: boolean;
+}
+interface UseMessageQueueReturn {
+    /** Current queue of pending messages */
+    queue: QueuedMessage[];
+    /** Whether a message is currently being processed */
+    isProcessing: boolean;
+    /** Add a message to the queue (or process immediately if idle) */
+    enqueue: (text: string, files?: FileAttachment$1[]) => void;
+    /** Cancel a queued message by ID */
+    cancel: (id: string) => void;
+    /** Clear all queued messages */
+    clearQueue: () => void;
+    /** Number of messages in queue */
+    queueLength: number;
+}
+/**
+ * Hook for managing a message queue with sequential processing.
+ *
+ * Messages are queued when the agent is busy and processed sequentially.
+ * Users can continue typing while the agent processes previous messages.
+ *
+ * @example
+ * ```tsx
+ * function ChatInput() {
+ *   const { queue, isProcessing, enqueue, cancel } = useMessageQueue({
+ *     onProcessMessage: async (msg) => {
+ *       for await (const event of client.agents.run(agentId, msg.text)) {
+ *         // handle events
+ *       }
+ *     }
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       {queue.map(msg => (
+ *         <div key={msg.id}>
+ *           Queued: {msg.text}
+ *           <button onClick={() => cancel(msg.id)}>Cancel</button>
+ *         </div>
+ *       ))}
+ *       <input onSubmit={(text) => enqueue(text)} />
+ *       <button>{isProcessing ? `Queue (${queue.length})` : 'Send'}</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useMessageQueue({ onProcessMessage, canProcess, }: UseMessageQueueOptions): UseMessageQueueReturn;
+
+interface UseStopExecutionOptions {
+    /** Callback to stop server-side execution (e.g., client.sessions.stop) */
+    onServerStop?: (sessionId: string) => Promise<void>;
+}
+interface UseStopExecutionReturn {
+    /** Whether execution can currently be stopped */
+    canStop: boolean;
+    /** The AbortSignal to pass to fetch requests */
+    signal: AbortSignal | undefined;
+    /** Start tracking a new execution (call when starting a request) */
+    startExecution: () => void;
+    /** Mark execution as complete (call when request finishes) */
+    endExecution: () => void;
+    /** Stop the current execution (aborts client + optionally server) */
+    stop: (sessionId?: string) => Promise<void>;
+    /** Set the current session ID for server-side stop */
+    setSessionId: (sessionId: string | null) => void;
+}
+/**
+ * Hook for managing execution stopping with AbortController.
+ *
+ * Handles both client-side request abortion and optional server-side stop calls.
+ * Use this to implement stop/cancel buttons for long-running agent executions.
+ *
+ * @example
+ * ```tsx
+ * function Chat() {
+ *   const { canStop, signal, startExecution, endExecution, stop, setSessionId } = useStopExecution({
+ *     onServerStop: (sessionId) => client.sessions.stop(sessionId)
+ *   });
+ *
+ *   async function sendMessage(text: string) {
+ *     startExecution();
+ *     try {
+ *       for await (const event of client.agents.run(agentId, text, { signal })) {
+ *         if (event.type === 'session_start') {
+ *           setSessionId(event.sessionId);
+ *         }
+ *         // handle events...
+ *       }
+ *     } catch (err) {
+ *       if (err.name === 'AbortError') {
+ *         console.log('Request aborted');
+ *       }
+ *     } finally {
+ *       endExecution();
+ *     }
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       {canStop && <button onClick={() => stop()}>Stop</button>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useStopExecution({ onServerStop, }?: UseStopExecutionOptions): UseStopExecutionReturn;
+
+/**
+ * File attachment ready for upload
+ */
+interface FileAttachment {
+    /** Original filename */
+    filename: string;
+    /** Base64-encoded file content (without data URL prefix) */
+    content: string;
+    /** MIME type of the file */
+    mimeType: string;
+    /** File size in bytes */
+    size: number;
+}
+interface UseFileUploadOptions {
+    /** Maximum file size in bytes (default: 100MB) */
+    maxFileSize?: number;
+    /** Maximum number of files (default: 10) */
+    maxFiles?: number;
+    /** Callback when file validation fails */
+    onValidationError?: (filename: string, error: string) => void;
+}
+interface UseFileUploadReturn {
+    /** Current list of attached files */
+    files: FileAttachment[];
+    /** Whether drag is currently over the drop zone */
+    isDragOver: boolean;
+    /** Add files from a FileList (e.g., from input or drop) */
+    addFiles: (fileList: FileList | null) => Promise<void>;
+    /** Remove a file by index */
+    removeFile: (index: number) => void;
+    /** Clear all files */
+    clearFiles: () => void;
+    /** Whether more files can be added */
+    canAddMore: boolean;
+    /** Props to spread on a drop zone element */
+    dropZoneProps: {
+        onDragOver: (e: DragEvent) => void;
+        onDragLeave: (e: DragEvent) => void;
+        onDrop: (e: DragEvent) => void;
+    };
+    /** Handler for file input onChange */
+    handleFileInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    /** Ref for a hidden file input */
+    fileInputRef: React.RefObject<HTMLInputElement | null>;
+    /** Click handler to trigger file input */
+    openFilePicker: () => void;
+}
+/**
+ * Hook for managing file uploads with drag & drop support.
+ *
+ * Handles file selection, validation, base64 encoding, and drag/drop UI state.
+ *
+ * @example
+ * ```tsx
+ * function FileUploadArea() {
+ *   const {
+ *     files,
+ *     isDragOver,
+ *     addFiles,
+ *     removeFile,
+ *     dropZoneProps,
+ *     fileInputRef,
+ *     openFilePicker,
+ *     canAddMore,
+ *   } = useFileUpload({
+ *     maxFileSize: 50 * 1024 * 1024, // 50MB
+ *     maxFiles: 5,
+ *     onValidationError: (filename, error) => {
+ *       toast.error(`${filename}: ${error}`);
+ *     }
+ *   });
+ *
+ *   return (
+ *     <div {...dropZoneProps} className={isDragOver ? 'drag-over' : ''}>
+ *       <input ref={fileInputRef} type="file" multiple hidden />
+ *       <button onClick={openFilePicker} disabled={!canAddMore}>
+ *         Add Files
+ *       </button>
+ *       {files.map((file, i) => (
+ *         <div key={i}>
+ *           {file.filename} ({formatFileSize(file.size)})
+ *           <button onClick={() => removeFile(i)}>Remove</button>
+ *         </div>
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+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, 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, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { NormalizedToolCall, NormalizedEntry, ToolDisplayConfig, 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, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction } from './types.js';
-import { ReactNode } from 'react';
+import { ReactNode, DragEvent, ChangeEvent } 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, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, IconProps, InfoIcon, ListChecksIcon, LoaderIcon, MessageSquareIcon, MoonIcon, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, StopCircleIcon, SunIcon, TerminalIcon, ToolIcon, UserIcon, XCircleIcon, XIcon } from './icons.js';
@@ -336,6 +336,83 @@ interface TodoPanelProps {
  */
 declare function TodoPanel({ todos, title, compact, showProgress, className, }: TodoPanelProps): react_jsx_runtime.JSX.Element | null;
 
+interface EnvVarsPanelProps {
+    /** Current environment variables */
+    envVars: Record<string, string>;
+    /** Callback when environment variables change */
+    onChange: (envVars: Record<string, string>) => void;
+    /** Whether the panel is collapsed initially (default: true) */
+    defaultCollapsed?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Label for the panel header */
+    label?: string;
+    /** Helper text shown below the input */
+    helperText?: string;
+}
+/**
+ * EnvVarsPanel - Collapsible panel for managing environment variables
+ *
+ * Provides a UI for adding, viewing, and removing environment variables.
+ * Commonly used to set environment variables for sandbox/agent execution.
+ *
+ * @example
+ * ```tsx
+ * function ChatSettings() {
+ *   const [envVars, setEnvVars] = useState<Record<string, string>>({});
+ *
+ *   return (
+ *     <EnvVarsPanel
+ *       envVars={envVars}
+ *       onChange={setEnvVars}
+ *       helperText="These variables will be available in the sandbox."
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function EnvVarsPanel({ envVars, onChange, defaultCollapsed, className, label, helperText, }: EnvVarsPanelProps): react_jsx_runtime.JSX.Element;
+
+interface DisplayModeToggleProps {
+    /** Additional class name */
+    className?: string;
+    /** Show label text (default: true) */
+    showLabel?: boolean;
+    /** Custom labels for modes */
+    labels?: {
+        inline?: string;
+        compact?: string;
+    };
+}
+/**
+ * DisplayModeToggle - Button to toggle between inline and compact display modes
+ *
+ * Uses the DisplayModeContext to toggle between 'inline' and 'compact' modes.
+ * Must be used within a DisplayModeProvider.
+ *
+ * @example
+ * ```tsx
+ * function ChatHeader() {
+ *   return (
+ *     <header>
+ *       <h1>Chat</h1>
+ *       <DisplayModeToggle />
+ *     </header>
+ *   );
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <DisplayModeProvider>
+ *       <ChatHeader />
+ *       <MessageList entries={entries} />
+ *     </DisplayModeProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function DisplayModeToggle({ className, showLabel, labels, }: DisplayModeToggleProps): react_jsx_runtime.JSX.Element;
+
 interface StatusIndicatorProps {
     status: ToolStatus;
     size?: 'sm' | 'md' | 'lg';
@@ -532,4 +609,235 @@ interface ThemeProviderProps {
 declare function ThemeProvider({ children, defaultTheme, storageKey, listenToSystemChanges, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
 declare function useTheme(): ThemeContextType;
 
-export { ActionIcon, type ActionIconProps, ActionType, AssistantMessage, type AssistantMessageProps, CodeBlock, type CodeBlockProps, CompactToolStatusLine, type CompactToolStatusLineProps, type DisplayModeContextType, DisplayModeProvider, type DisplayModeProviderProps, 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, StatusIndicator, type StatusIndicatorProps, 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, UserMessage, type UserMessageProps, useDisplayConfig, useDisplayMode, useTheme };
+/**
+ * A queued message waiting to be sent
+ */
+interface QueuedMessage {
+    /** Unique ID for this queued message */
+    id: string;
+    /** The message text */
+    text: string;
+    /** Optional file attachments */
+    files?: FileAttachment$1[];
+    /** Timestamp when queued */
+    queuedAt: number;
+}
+/**
+ * File attachment for upload
+ */
+interface FileAttachment$1 {
+    /** Original filename */
+    filename: string;
+    /** Base64-encoded file content */
+    content: string;
+    /** MIME type of the file */
+    mimeType: string;
+    /** File size in bytes */
+    size: number;
+}
+interface UseMessageQueueOptions {
+    /** Callback to process a message - should return when processing is complete */
+    onProcessMessage: (message: QueuedMessage) => Promise<void>;
+    /** Whether messages can currently be processed (e.g., agent selected) */
+    canProcess?: boolean;
+}
+interface UseMessageQueueReturn {
+    /** Current queue of pending messages */
+    queue: QueuedMessage[];
+    /** Whether a message is currently being processed */
+    isProcessing: boolean;
+    /** Add a message to the queue (or process immediately if idle) */
+    enqueue: (text: string, files?: FileAttachment$1[]) => void;
+    /** Cancel a queued message by ID */
+    cancel: (id: string) => void;
+    /** Clear all queued messages */
+    clearQueue: () => void;
+    /** Number of messages in queue */
+    queueLength: number;
+}
+/**
+ * Hook for managing a message queue with sequential processing.
+ *
+ * Messages are queued when the agent is busy and processed sequentially.
+ * Users can continue typing while the agent processes previous messages.
+ *
+ * @example
+ * ```tsx
+ * function ChatInput() {
+ *   const { queue, isProcessing, enqueue, cancel } = useMessageQueue({
+ *     onProcessMessage: async (msg) => {
+ *       for await (const event of client.agents.run(agentId, msg.text)) {
+ *         // handle events
+ *       }
+ *     }
+ *   });
+ *
+ *   return (
+ *     <div>
+ *       {queue.map(msg => (
+ *         <div key={msg.id}>
+ *           Queued: {msg.text}
+ *           <button onClick={() => cancel(msg.id)}>Cancel</button>
+ *         </div>
+ *       ))}
+ *       <input onSubmit={(text) => enqueue(text)} />
+ *       <button>{isProcessing ? `Queue (${queue.length})` : 'Send'}</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useMessageQueue({ onProcessMessage, canProcess, }: UseMessageQueueOptions): UseMessageQueueReturn;
+
+interface UseStopExecutionOptions {
+    /** Callback to stop server-side execution (e.g., client.sessions.stop) */
+    onServerStop?: (sessionId: string) => Promise<void>;
+}
+interface UseStopExecutionReturn {
+    /** Whether execution can currently be stopped */
+    canStop: boolean;
+    /** The AbortSignal to pass to fetch requests */
+    signal: AbortSignal | undefined;
+    /** Start tracking a new execution (call when starting a request) */
+    startExecution: () => void;
+    /** Mark execution as complete (call when request finishes) */
+    endExecution: () => void;
+    /** Stop the current execution (aborts client + optionally server) */
+    stop: (sessionId?: string) => Promise<void>;
+    /** Set the current session ID for server-side stop */
+    setSessionId: (sessionId: string | null) => void;
+}
+/**
+ * Hook for managing execution stopping with AbortController.
+ *
+ * Handles both client-side request abortion and optional server-side stop calls.
+ * Use this to implement stop/cancel buttons for long-running agent executions.
+ *
+ * @example
+ * ```tsx
+ * function Chat() {
+ *   const { canStop, signal, startExecution, endExecution, stop, setSessionId } = useStopExecution({
+ *     onServerStop: (sessionId) => client.sessions.stop(sessionId)
+ *   });
+ *
+ *   async function sendMessage(text: string) {
+ *     startExecution();
+ *     try {
+ *       for await (const event of client.agents.run(agentId, text, { signal })) {
+ *         if (event.type === 'session_start') {
+ *           setSessionId(event.sessionId);
+ *         }
+ *         // handle events...
+ *       }
+ *     } catch (err) {
+ *       if (err.name === 'AbortError') {
+ *         console.log('Request aborted');
+ *       }
+ *     } finally {
+ *       endExecution();
+ *     }
+ *   }
+ *
+ *   return (
+ *     <div>
+ *       {canStop && <button onClick={() => stop()}>Stop</button>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useStopExecution({ onServerStop, }?: UseStopExecutionOptions): UseStopExecutionReturn;
+
+/**
+ * File attachment ready for upload
+ */
+interface FileAttachment {
+    /** Original filename */
+    filename: string;
+    /** Base64-encoded file content (without data URL prefix) */
+    content: string;
+    /** MIME type of the file */
+    mimeType: string;
+    /** File size in bytes */
+    size: number;
+}
+interface UseFileUploadOptions {
+    /** Maximum file size in bytes (default: 100MB) */
+    maxFileSize?: number;
+    /** Maximum number of files (default: 10) */
+    maxFiles?: number;
+    /** Callback when file validation fails */
+    onValidationError?: (filename: string, error: string) => void;
+}
+interface UseFileUploadReturn {
+    /** Current list of attached files */
+    files: FileAttachment[];
+    /** Whether drag is currently over the drop zone */
+    isDragOver: boolean;
+    /** Add files from a FileList (e.g., from input or drop) */
+    addFiles: (fileList: FileList | null) => Promise<void>;
+    /** Remove a file by index */
+    removeFile: (index: number) => void;
+    /** Clear all files */
+    clearFiles: () => void;
+    /** Whether more files can be added */
+    canAddMore: boolean;
+    /** Props to spread on a drop zone element */
+    dropZoneProps: {
+        onDragOver: (e: DragEvent) => void;
+        onDragLeave: (e: DragEvent) => void;
+        onDrop: (e: DragEvent) => void;
+    };
+    /** Handler for file input onChange */
+    handleFileInputChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    /** Ref for a hidden file input */
+    fileInputRef: React.RefObject<HTMLInputElement | null>;
+    /** Click handler to trigger file input */
+    openFilePicker: () => void;
+}
+/**
+ * Hook for managing file uploads with drag & drop support.
+ *
+ * Handles file selection, validation, base64 encoding, and drag/drop UI state.
+ *
+ * @example
+ * ```tsx
+ * function FileUploadArea() {
+ *   const {
+ *     files,
+ *     isDragOver,
+ *     addFiles,
+ *     removeFile,
+ *     dropZoneProps,
+ *     fileInputRef,
+ *     openFilePicker,
+ *     canAddMore,
+ *   } = useFileUpload({
+ *     maxFileSize: 50 * 1024 * 1024, // 50MB
+ *     maxFiles: 5,
+ *     onValidationError: (filename, error) => {
+ *       toast.error(`${filename}: ${error}`);
+ *     }
+ *   });
+ *
+ *   return (
+ *     <div {...dropZoneProps} className={isDragOver ? 'drag-over' : ''}>
+ *       <input ref={fileInputRef} type="file" multiple hidden />
+ *       <button onClick={openFilePicker} disabled={!canAddMore}>
+ *         Add Files
+ *       </button>
+ *       {files.map((file, i) => (
+ *         <div key={i}>
+ *           {file.filename} ({formatFileSize(file.size)})
+ *           <button onClick={() => removeFile(i)}>Remove</button>
+ *         </div>
+ *       ))}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+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, 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, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme };