@ash-cloud/ash-ui 0.1.1 → 0.2.0

package/dist/index.d.ts

@@ -1,587 +1,454 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { NormalizedToolCall, NormalizedEntry, ToolDisplayConfig, WidgetRenderFunction, WidgetAction, RichContentRenderers, MessageVariant, TypographyScale, MarkdownComponents, RenderMetadataFunction, MessageMetadata, LogEntry, ToolDisplayMode, TodoItem, ToolStatus, ActionType, RichContent } from './types.js';
-export { AgentToolAction, AssistantMessageEntry, CommandRunAction, CommandRunResult, ComponentRenderProps, DEFAULT_DISPLAY_CONFIG, DEFAULT_STYLE_CONFIG, ErrorEntry, FileAttachment, FileEditAction, FileReadAction, FileWriteAction, GenericToolAction, GlobAction, LogCategory, LogLevel, McpToolAction, MentionRenderProps, MessageRole, MessageStyleConfig, NormalizedEntryType, RichComponentSegment, RichContentSegment, RichMentionSegment, RichTextSegment, SearchAction, ThinkingEntry, TodoStatus, TodoWriteAction, ToolCallEntry, ToolExecutionGroup as ToolExecutionGroupType, ToolResult, UserMessageEntry, WebFetchAction, WebSearchAction, WidgetEntry, WidgetRenderProps, isAgentToolAction, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, isWidgetEntry } from './types.js';
-import { ReactNode, DragEvent, ChangeEvent, ClipboardEvent } from 'react';
+import React$1, { ReactNode, ComponentType, DragEvent, ChangeEvent, ClipboardEvent } from 'react';
+import { ToolInvocation, TodoStatus, TodoItem, FileAttachment as FileAttachment$2, LogEntry, ToolStatus, ActionType, MarkdownComponents, NormalizedEntry, Message as Message$1 } from './types.js';
+export { MessageAttachment as AIMessageAttachment, AIMessageRole, AgentToolAction, AssistantMessageEntry, CommandRunAction, CommandRunResult, DEFAULT_STYLE_CONFIG, ErrorEntry, FileEditAction, FileReadAction, FileWriteAction, GenericToolAction, GlobAction, LogCategory, LogLevel, McpToolAction, MessageMetadata, MessageStyleConfig, MessageVariant, NormalizedEntryType, NormalizedToolCall, RenderMetadataFunction, SearchAction, ThinkingEntry, TodoWriteAction, ToolCallEntry, ToolInvocationState, ToolResult, TypographyScale, UserMessageEntry, WebFetchAction, WebSearchAction, WidgetAction, WidgetEntry, WidgetRenderFunction, WidgetRenderProps, isAgentToolAction, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, isWidgetEntry, messageToNormalizedEntry, messagesToNormalizedEntries, normalizedEntriesToMessages, normalizedEntryToMessage } from './types.js';
 import { ParsedOption } from './utils.js';
-export { GroupedEntry, ParsedOptionsResult, ToolUseInput, cn, createToolCall, extractTextContent, extractToolCallsFromGroup, formatElapsedTime, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, groupEntriesForCompactMode, mapToolToActionType, normalizeToolResult, parseCommandResult, parseMcpToolName, parseOptionsFromContent, truncate, updateToolCallWithResult } from './utils.js';
+export { ParsedOptionsResult, ToolUseInput, cn, createToolCall, extractTextContent, formatElapsedTime, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, mapToolToActionType, normalizeToolResult, parseCommandResult, parseMcpToolName, parseOptionsFromContent, truncate, updateToolCallWithResult } from './utils.js';
 export { AlertCircleIcon, AlertTriangleIcon, ArrowUpIcon, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, ClockIcon, CodeIcon, CopyIcon, EditIcon, ErrorIcon, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, HomeIcon, IconProps, InfoIcon, ListChecksIcon, LoaderIcon, MessageSquareIcon, MicrophoneIcon, MoonIcon, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, SpinnerIcon, StopCircleIcon, SunIcon, TerminalIcon, ToolIcon, UserIcon, XCircleIcon, XIcon } from './icons.js';
 export { BorderRadius, Colors, CssVars, Keyframes, Shadows, Spacing, Transitions, Typography, Widget, ZIndex, allKeyframesCss, borderRadius, colors, cssVars, inlineStyles, keyframes, keyframesCss, shadows, spacing, tokensToCssVariables, transitions, typography, widget, zIndex } from './design-tokens.js';
 
-interface ToolCallCardProps {
-    toolCall: NormalizedToolCall;
-    defaultExpanded?: boolean;
+interface ConversationContextValue {
+    /** Reference to the scroll container */
+    containerRef: React$1.RefObject<HTMLDivElement>;
+    /** Scroll to the bottom of the conversation */
+    scrollToBottom: (behavior?: ScrollBehavior) => void;
+    /** Whether the user has scrolled up from the bottom */
+    isScrolledUp: boolean;
+    /** Whether auto-scroll is enabled */
+    autoScroll: boolean;
+    /** Set auto-scroll state */
+    setAutoScroll: (value: boolean) => void;
+}
+declare function useConversation(): ConversationContextValue;
+interface ConversationProps {
+    /** Child elements */
+    children: ReactNode;
+    /** Additional class name */
     className?: string;
+    /** Whether to auto-scroll on new messages */
+    autoScroll?: boolean;
+    /** Threshold in pixels to consider "at bottom" */
+    scrollThreshold?: number;
 }
-/**
- * ToolCallCard - Display a tool call with its status, arguments, and results
- *
- * Features:
- * - Status indicator (pending/success/failed) with animated styling
- * - Action-specific icon in accent-colored badge
- * - Expandable details section with smooth animation
- * - Glassmorphism dark theme styling
- * - Execution duration display
- *
- * @example
- * ```tsx
- * <ToolCallCard toolCall={normalizedToolCall} />
- * <ToolCallCard toolCall={toolCall} defaultExpanded />
- * ```
- */
-declare function ToolCallCard({ toolCall, defaultExpanded, className }: ToolCallCardProps): react_jsx_runtime.JSX.Element;
-
-interface AgentToolCardProps {
-    /** The tool call with agent_tool action type */
-    toolCall: NormalizedToolCall;
-    /** Whether the card starts expanded */
-    defaultExpanded?: boolean;
-    /** Additional class names */
+declare function Conversation({ children, className, autoScroll: initialAutoScroll, scrollThreshold, }: ConversationProps): react_jsx_runtime.JSX.Element;
+interface ConversationContentProps {
+    /** Child elements */
+    children: ReactNode;
+    /** Additional class name */
     className?: string;
-    /** Depth level for nested rendering (0 = top level) */
-    depth?: number;
 }
-/**
- * AgentToolCard - Display a sub-agent/Task tool call with nested tool calls
- *
- * Features:
- * - Agent type badge (e.g., "Explore", "Plan", "Bash")
- * - Description of what the agent is doing
- * - Tool call count that updates during streaming
- * - Loading indicator while running (spinner)
- * - Elapsed time display while running
- * - Expandable to show nested tool calls
- * - Supports deep nesting (agents within agents)
- *
- * @example
- * ```tsx
- * <AgentToolCard
- *   toolCall={agentToolCall}
- *   defaultExpanded={false}
- * />
- * ```
- */
-declare function AgentToolCard({ toolCall, defaultExpanded, className, depth, }: AgentToolCardProps): react_jsx_runtime.JSX.Element | null;
-
-interface MessageListProps {
-    /** Normalized conversation entries to display */
-    entries: NormalizedEntry[];
-    /** Whether a response is currently loading */
-    loading?: boolean;
-    /** Streaming text content (displayed during real-time streaming) */
-    streamingContent?: string;
-    /** Display configuration override (uses context if not provided) */
-    displayConfig?: ToolDisplayConfig;
-    /** Callback when user selects an option from assistant message */
-    onOptionSelect?: (optionText: string) => void;
-    /**
-     * Custom render function for widget entries.
-     * When provided, widget entries will be rendered using this function.
-     *
-     * @example
-     * ```tsx
-     * <MessageList
-     *   entries={entries}
-     *   renderWidget={({ widgetType, widgetData, onAction }) => {
-     *     if (widgetType === 'image-grid') {
-     *       return <ImageGrid data={widgetData} onSelect={onAction} />;
-     *     }
-     *     return null;
-     *   }}
-     * />
-     * ```
-     */
-    renderWidget?: WidgetRenderFunction;
-    /**
-     * Callback for widget interactions (e.g., selection, submit).
-     * 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;
-    /**
-     * Custom renderers for rich content segments.
-     * Used when entries have `richContent` defined.
-     *
-     * @example
-     * ```tsx
-     * <MessageList
-     *   entries={entriesWithRichContent}
-     *   richContentRenderers={{
-     *     renderMention: ({ segment }) => (
-     *       <MentionBadge
-     *         name={segment.name}
-     *         color={segment.color}
-     *         onClick={() => scrollToEntity(segment.id)}
-     *       />
-     *     ),
-     *   }}
-     * />
-     * ```
-     */
-    richContentRenderers?: RichContentRenderers;
-    /**
-     * Visual variant for user messages
-     * @default 'bubble'
-     */
-    userVariant?: MessageVariant;
-    /**
-     * Visual variant for assistant messages
-     * @default 'bubble'
-     */
-    assistantVariant?: MessageVariant;
-    /**
-     * Typography/density scale
-     * @default 'compact'
-     */
-    scale?: TypographyScale;
-    /**
-     * Show avatar icons next to messages
-     * @default true
-     */
-    showAvatars?: boolean;
-    /**
-     * Show timestamps on messages
-     * @default true
-     */
-    showTimestamp?: boolean;
-    /**
-     * Custom markdown component overrides
-     *
-     * @example
-     * ```tsx
-     * <MessageList
-     *   entries={entries}
-     *   markdownComponents={{
-     *     h2: ({ children }) => <h2 className="custom-h2">{children}</h2>,
-     *     code: ({ children, className }) => <CustomCode className={className}>{children}</CustomCode>,
-     *   }}
-     * />
-     * ```
-     */
-    markdownComponents?: MarkdownComponents;
-    /**
-     * Custom metadata renderer for messages
-     *
-     * @example
-     * ```tsx
-     * <MessageList
-     *   entries={entries}
-     *   renderMetadata={({ entry, metadata }) => (
-     *     <div className="text-xs text-gray-500">
-     *       {metadata?.model} · {entry.timestamp}
-     *     </div>
-     *   )}
-     * />
-     * ```
-     */
-    renderMetadata?: RenderMetadataFunction;
-    /**
-     * Metadata to display with messages (e.g., model name)
-     */
-    metadata?: MessageMetadata;
-    /** Additional class names */
+declare function ConversationContent({ children, className, }: ConversationContentProps): react_jsx_runtime.JSX.Element;
+interface ConversationEmptyStateProps {
+    /** Child elements */
+    children: ReactNode;
+    /** Additional class name */
     className?: string;
 }
-/**
- * MessageList - Display a list of normalized message entries
- *
- * Handles various entry types including user messages, assistant messages,
- * tool calls, thinking, and errors. Also supports streaming content display.
- *
- * Supports two display modes:
- * - 'inline': Each tool call rendered as individual expandable cards (default)
- * - 'compact': Consecutive tool calls grouped into a single accordion with
- *   an animated status line showing the current tool
- *
- * Uses glassmorphism dark theme styling with animated entries.
- *
- * @example
- * ```tsx
- * <MessageList entries={normalizedEntries} />
- * <MessageList entries={entries} loading streamingContent={text} />
- * <MessageList entries={entries} displayConfig={{ mode: 'compact' }} />
- * ```
- */
-declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, renderWidget, onWidgetAction, autoScroll, richContentRenderers, userVariant, assistantVariant, scale, showAvatars, showTimestamp, markdownComponents, renderMetadata, metadata, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
+declare function ConversationEmptyState({ children, className, }: ConversationEmptyStateProps): react_jsx_runtime.JSX.Element;
+interface ConversationScrollButtonProps {
+    /** Additional class name */
+    className?: string;
+    /** Custom label */
+    label?: string;
+}
+declare function ConversationScrollButton({ className, label, }: ConversationScrollButtonProps): react_jsx_runtime.JSX.Element | null;
 
-interface UserMessageProps {
-    entry: NormalizedEntry;
-    /** Visual style variant */
-    variant?: MessageVariant;
-    /** Typography scale */
-    scale?: TypographyScale;
-    /** Show avatar */
-    showAvatar?: boolean;
-    /** Show timestamp */
-    showTimestamp?: boolean;
-    /** Custom metadata renderer */
-    renderMetadata?: RenderMetadataFunction;
-    /** Additional metadata to display */
-    metadata?: MessageMetadata;
+interface MessageContextValue {
+    /** Message role */
+    from: 'user' | 'assistant' | 'system';
+    /** Whether this message is streaming */
+    isStreaming?: boolean;
+    /** Tool invocations in this message */
+    toolInvocations?: ToolInvocation[];
+}
+declare function useMessage(): MessageContextValue;
+interface MessageProps {
+    /** Message role */
+    from: 'user' | 'assistant' | 'system';
+    /** Child elements */
+    children: ReactNode;
+    /** Additional class name */
     className?: string;
+    /** Whether this message is streaming */
+    isStreaming?: boolean;
+    /** Tool invocations (for assistant messages) */
+    toolInvocations?: ToolInvocation[];
+    /** Message ID for data attribute */
+    id?: string;
 }
-/**
- * UserMessage - Display a user message with optional file attachments
- *
- * ChatGPT-style: Blue/purple rounded bubbles on right, avatar hidden by default
- */
-declare function UserMessage({ entry, variant, scale, showAvatar, // Hidden by default for ChatGPT style
-showTimestamp, renderMetadata, metadata, className, }: UserMessageProps): react_jsx_runtime.JSX.Element;
-interface AssistantMessageProps {
-    entry: NormalizedEntry;
-    /** Visual style variant */
-    variant?: MessageVariant;
-    /** Typography scale */
-    scale?: TypographyScale;
-    /** Show avatar */
-    showAvatar?: boolean;
-    /** Show timestamp */
-    showTimestamp?: boolean;
-    /** Callback when user selects an option */
-    onOptionSelect?: (optionText: string) => void;
-    /** Custom renderers for rich content segments */
-    richContentRenderers?: RichContentRenderers;
-    /** Custom markdown component overrides */
-    markdownComponents?: MarkdownComponents;
-    /** Custom metadata renderer */
-    renderMetadata?: RenderMetadataFunction;
-    /** Additional metadata to display */
-    metadata?: MessageMetadata;
+declare function Message({ from, children, className, isStreaming, toolInvocations, id, }: MessageProps): react_jsx_runtime.JSX.Element;
+interface MessageAvatarProps {
+    /** Avatar image URL */
+    src?: string;
+    /** Fallback text (initials) */
+    fallback?: string;
+    /** Additional class name */
     className?: string;
 }
-/**
- * AssistantMessage - Display an assistant message with markdown rendering
- *
- * ChatGPT-style: Dark charcoal background with circular green avatar
- * Supports multiple visual variants and custom markdown components.
- * Automatically detects and renders interactive options when present.
- * Supports rich content segments for inline rendering of mentions and custom components.
- */
-declare function AssistantMessage({ entry, variant, scale, showAvatar, showTimestamp, onOptionSelect, richContentRenderers, markdownComponents, renderMetadata, metadata, className, }: AssistantMessageProps): react_jsx_runtime.JSX.Element;
-interface ThinkingMessageProps {
-    entry: NormalizedEntry;
-    /** Typography scale */
-    scale?: TypographyScale;
-    /** Show avatar */
-    showAvatar?: boolean;
+declare function MessageAvatar({ src, fallback, className }: MessageAvatarProps): react_jsx_runtime.JSX.Element;
+interface MessageContentProps {
+    /** Child elements */
+    children: ReactNode;
+    /** Additional class name */
     className?: string;
 }
-/**
- * ThinkingMessage - Display thinking/reasoning content (extended thinking)
- *
- * Compact styling with purple accent for thinking mode.
- */
-declare function ThinkingMessage({ entry, scale, showAvatar, className }: ThinkingMessageProps): react_jsx_runtime.JSX.Element;
-interface ToolCallMessageProps {
-    entry: NormalizedEntry;
-    /** Typography scale */
-    scale?: TypographyScale;
-    /** Show avatar */
-    showAvatar?: boolean;
-    defaultExpanded?: boolean;
+declare function MessageContent({ children, className }: MessageContentProps): react_jsx_runtime.JSX.Element;
+interface MessageResponseProps {
+    /** Text content to render as markdown */
+    content: string;
+    /** Whether content is still streaming */
+    isStreaming?: boolean;
+    /** Additional class name */
     className?: string;
+    /** Custom markdown components */
+    components?: Record<string, ComponentType<{
+        children?: ReactNode;
+        [key: string]: unknown;
+    }>>;
 }
-/**
- * ToolCallMessage - Display a tool call entry using ToolCallCard
- *
- * Compact styling with animated entry.
- */
-declare function ToolCallMessage({ entry, scale, showAvatar, defaultExpanded, className }: ToolCallMessageProps): react_jsx_runtime.JSX.Element | null;
-interface ErrorMessageProps {
-    entry: NormalizedEntry;
-    /** Typography scale */
-    scale?: TypographyScale;
-    /** Show avatar */
-    showAvatar?: boolean;
+declare function MessageResponse({ content, isStreaming, className, components, }: MessageResponseProps): react_jsx_runtime.JSX.Element | null;
+interface MessageActionsProps {
+    /** Child elements (action buttons) */
+    children: ReactNode;
+    /** Additional class name */
     className?: string;
 }
-/**
- * ErrorMessage - Display an error entry
- *
- * Compact styling with red accent for errors.
- */
-declare function ErrorMessage({ entry, scale, showAvatar, className }: ErrorMessageProps): react_jsx_runtime.JSX.Element | null;
-interface MessageEntryProps {
-    entry: NormalizedEntry;
-    /** Callback when user selects an option from assistant message */
-    onOptionSelect?: (optionText: string) => void;
-    /** Whether tool calls should be expanded by default */
-    defaultExpanded?: boolean;
-    /** Custom renderers for rich content segments */
-    richContentRenderers?: RichContentRenderers;
-    /** Custom markdown component overrides */
-    markdownComponents?: MarkdownComponents;
-    /** Visual variant for user messages */
-    userVariant?: MessageVariant;
-    /** Visual variant for assistant messages */
-    assistantVariant?: MessageVariant;
-    /** Typography scale */
-    scale?: TypographyScale;
-    /** Show avatars */
-    showAvatars?: boolean;
-    /** Show timestamps */
-    showTimestamp?: boolean;
-    /** Custom metadata renderer */
-    renderMetadata?: RenderMetadataFunction;
-    /** Additional metadata to display */
-    metadata?: MessageMetadata;
+declare function MessageActions({ children, className }: MessageActionsProps): react_jsx_runtime.JSX.Element;
+interface MessageActionProps {
+    /** Action icon */
+    icon?: ReactNode;
+    /** Action label */
+    label: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Additional class name */
     className?: string;
 }
-/**
- * MessageEntry - Render a normalized entry based on its type
- *
- * This is a convenience component that routes to the appropriate
- * entry type component. Supports data-message-role attributes for
- * easy CSS targeting.
- *
- * @example
- * ```tsx
- * {entries.map(entry => (
- *   <MessageEntry key={entry.id} entry={entry} onOptionSelect={handleSelect} />
- * ))}
- *
- * // CSS targeting
- * [data-message-role="user"] { background: #1a1a1a; }
- * [data-message-role="assistant"] { border-left: 2px solid var(--accent); }
- * ```
- */
-declare function MessageEntry({ entry, onOptionSelect, defaultExpanded, richContentRenderers, markdownComponents, userVariant, assistantVariant, scale, showAvatars, showTimestamp, renderMetadata, metadata, className, }: MessageEntryProps): react_jsx_runtime.JSX.Element | null;
-
-interface LogsPanelProps {
-    logs: LogEntry[];
-    title?: string;
-    isLoading?: boolean;
-    defaultCollapsed?: boolean;
-    maxHeight?: number;
+declare function MessageAction({ icon, label, onClick, className, }: MessageActionProps): react_jsx_runtime.JSX.Element;
+interface MessageTimestampProps {
+    /** Timestamp to display */
+    timestamp: Date | string;
+    /** Additional class name */
     className?: string;
 }
-/**
- * LogsPanel - Collapsible panel for displaying log entries
- *
- * Features:
- * - Collapsible header with log count
- * - Error/warning count badges
- * - Level-based coloring and icons
- * - Expandable entries with JSON data
- *
- * @example
- * ```tsx
- * <LogsPanel logs={logEntries} />
- * <LogsPanel logs={logs} title="Execution Logs" defaultCollapsed={false} />
- * ```
- */
-declare function LogsPanel({ logs, title, isLoading, defaultCollapsed, maxHeight, className, }: LogsPanelProps): react_jsx_runtime.JSX.Element | null;
+declare function MessageTimestamp({ timestamp, className }: MessageTimestampProps): react_jsx_runtime.JSX.Element;
 
-interface ToolExecutionGroupProps {
-    /** Tool calls in this group */
-    toolCalls: NormalizedToolCall[];
-    /** Whether the group starts expanded */
+interface ToolContextValue {
+    /** The tool invocation data */
+    toolInvocation: ToolInvocation;
+    /** Whether the tool details are expanded */
+    isExpanded: boolean;
+    /** Toggle expansion state */
+    toggleExpanded: () => void;
+}
+declare function useTool(): ToolContextValue;
+interface ToolProps {
+    /** Tool invocation data */
+    toolInvocation: ToolInvocation;
+    /** Child elements */
+    children?: ReactNode;
+    /** Additional class name */
+    className?: string;
+    /** Whether to start expanded */
     defaultExpanded?: boolean;
-    /** Animation duration for status line transitions (ms) */
-    animationDuration?: number;
-    /** Additional class names */
+}
+declare function Tool({ toolInvocation, children, className, defaultExpanded, }: ToolProps): react_jsx_runtime.JSX.Element;
+interface ToolHeaderProps {
+    /** Additional class name */
     className?: string;
+    /** Custom icon */
+    icon?: ReactNode;
+    /** Show expand/collapse button */
+    showToggle?: boolean;
 }
-/**
- * ToolExecutionGroup - Displays multiple tool calls in a compact accordion format.
- *
- * 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
- * <ToolExecutionGroup
- *   toolCalls={consecutiveToolCalls}
- *   defaultExpanded={false}
- * />
- * ```
- */
-declare function ToolExecutionGroup({ toolCalls, defaultExpanded, className, }: ToolExecutionGroupProps): react_jsx_runtime.JSX.Element | null;
+declare function ToolHeader({ className, icon, showToggle, }: ToolHeaderProps): react_jsx_runtime.JSX.Element;
+interface ToolInputProps {
+    /** Additional class name */
+    className?: string;
+    /** Maximum height before scroll */
+    maxHeight?: number;
+}
+declare function ToolInput({ className, maxHeight }: ToolInputProps): react_jsx_runtime.JSX.Element | null;
+interface ToolOutputProps {
+    /** Additional class name */
+    className?: string;
+    /** Maximum height before scroll */
+    maxHeight?: number;
+}
+declare function ToolOutput({ className, maxHeight }: ToolOutputProps): react_jsx_runtime.JSX.Element | null;
+interface ToolListProps {
+    /** Tool invocations to render */
+    toolInvocations: ToolInvocation[];
+    /** Additional class name */
+    className?: string;
+    /** Whether to show tools expanded by default */
+    defaultExpanded?: boolean;
+}
+declare function ToolList({ toolInvocations, className, defaultExpanded, }: ToolListProps): react_jsx_runtime.JSX.Element | null;
 
-interface CompactToolStatusLineProps {
-    /** The current tool call to display */
-    toolCall: NormalizedToolCall;
-    /** Previous tool call (for exit animation) */
-    previousToolCall?: NormalizedToolCall | null;
-    /** Animation duration in ms */
-    animationDuration?: number;
-    /** Additional class names */
+interface ReasoningContextValue {
+    /** Whether the reasoning panel is open */
+    isOpen: boolean;
+    /** Toggle open state */
+    setIsOpen: (value: boolean) => void;
+    /** Whether reasoning is currently streaming */
+    isStreaming: boolean;
+    /** Duration of thinking in seconds */
+    duration: number;
+}
+declare function useReasoning(): ReasoningContextValue;
+interface ReasoningProps {
+    /** Child elements */
+    children: ReactNode;
+    /** Whether reasoning is currently streaming */
+    isStreaming?: boolean;
+    /** Additional class name */
     className?: string;
+    /** Whether to auto-expand during streaming */
+    autoExpand?: boolean;
+    /** Whether to auto-collapse when streaming completes */
+    autoCollapse?: boolean;
+    /** Initial duration in seconds (for loaded content) */
+    initialDuration?: number;
 }
-/**
- * Compact status line for displaying the current tool execution.
- *
- * Features a smooth replace animation where the previous tool call
- * slides out while the new one slides in. Similar to the homepage
- * status line animation.
- *
- * @example
- * ```tsx
- * <CompactToolStatusLine
- *   toolCall={currentToolCall}
- *   previousToolCall={lastToolCall}
- * />
- * ```
- */
-declare function CompactToolStatusLine({ toolCall, previousToolCall, animationDuration, className, }: CompactToolStatusLineProps): react_jsx_runtime.JSX.Element;
+declare function Reasoning({ children, isStreaming, className, autoExpand, autoCollapse, initialDuration, }: ReasoningProps): react_jsx_runtime.JSX.Element;
+interface ReasoningTriggerProps {
+    /** Additional class name */
+    className?: string;
+    /** Custom label */
+    label?: string;
+    /** Show duration */
+    showDuration?: boolean;
+}
+declare function ReasoningTrigger({ className, label, showDuration, }: ReasoningTriggerProps): react_jsx_runtime.JSX.Element;
+interface ReasoningContentProps {
+    /** Content to display (thinking text) */
+    children: ReactNode;
+    /** Additional class name */
+    className?: string;
+    /** Maximum height before scroll */
+    maxHeight?: number;
+}
+declare function ReasoningContent({ children, className, maxHeight, }: ReasoningContentProps): react_jsx_runtime.JSX.Element | null;
+interface ThinkingIndicatorProps {
+    /** Whether thinking is active */
+    isActive?: boolean;
+    /** Label to display */
+    label?: string;
+    /** Additional class name */
+    className?: string;
+}
+declare function ThinkingIndicator({ isActive, label, className, }: ThinkingIndicatorProps): react_jsx_runtime.JSX.Element | null;
 
-interface CompactToolRowProps {
-    toolCall: NormalizedToolCall;
-    /** Whether to show the full path or just filename */
-    showFullPath?: boolean;
+interface TaskContextValue {
+    /** Whether the task list is open */
+    isOpen: boolean;
+    /** Toggle open state */
+    setIsOpen: (value: boolean) => void;
+}
+declare function useTask(): TaskContextValue;
+interface TaskProps {
+    /** Child elements */
+    children: ReactNode;
+    /** Whether to start open */
+    defaultOpen?: boolean;
+    /** Additional class name */
     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;
+declare function Task({ children, defaultOpen, className, }: TaskProps): react_jsx_runtime.JSX.Element;
+interface TaskTriggerProps {
+    /** Trigger content (usually task count/label) */
+    children: ReactNode;
+    /** Additional class name */
+    className?: string;
+}
+declare function TaskTrigger({ children, className }: TaskTriggerProps): react_jsx_runtime.JSX.Element;
+interface TaskContentProps {
+    /** Child elements (TaskItem components) */
+    children: ReactNode;
+    /** Additional class name */
+    className?: string;
+}
+declare function TaskContent({ children, className }: TaskContentProps): react_jsx_runtime.JSX.Element | null;
+interface TaskItemProps {
+    /** Task content */
+    children: ReactNode;
+    /** Task status */
+    status: TodoStatus;
+    /** Active form (shown when in_progress) */
+    activeForm?: string;
+    /** Additional class name */
+    className?: string;
+}
+declare function TaskItem({ children, status, activeForm, className, }: TaskItemProps): react_jsx_runtime.JSX.Element;
+interface TaskListProps {
+    /** Todo items to display */
+    items: TodoItem[];
+    /** Whether to start open */
+    defaultOpen?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Custom title */
+    title?: string;
+}
+declare function TaskList({ items, defaultOpen, className, title, }: TaskListProps): react_jsx_runtime.JSX.Element;
 
+interface AttachmentContextValue {
+    /** The file attachment data */
+    file: FileAttachment$2 | AttachmentFile;
+    /** Whether the attachment can be removed */
+    removable?: boolean;
+    /** Remove callback */
+    onRemove?: () => void;
+}
+declare function useAttachment(): AttachmentContextValue;
+interface AttachmentFile {
+    /** File name */
+    name: string;
+    /** MIME type */
+    type: string;
+    /** File size in bytes */
+    size: number;
+    /** URL or data URL for preview */
+    url?: string;
+    /** Base64 data (for upload) */
+    base64?: string;
+}
+interface AttachmentsProps {
+    /** Child elements (Attachment components) */
+    children: ReactNode;
+    /** Layout style */
+    layout?: 'grid' | 'inline' | 'list';
+    /** Additional class name */
+    className?: string;
+}
+declare function Attachments({ children, layout, className, }: AttachmentsProps): react_jsx_runtime.JSX.Element;
+interface AttachmentProps {
+    /** File data */
+    file: FileAttachment$2 | AttachmentFile;
+    /** Child elements (AttachmentPreview, etc.) */
+    children?: ReactNode;
+    /** Whether the attachment can be removed */
+    removable?: boolean;
+    /** Remove callback */
+    onRemove?: () => void;
+    /** Additional class name */
+    className?: string;
+}
+declare function Attachment({ file, children, removable, onRemove, className, }: AttachmentProps): react_jsx_runtime.JSX.Element;
+interface AttachmentPreviewProps {
+    /** Additional class name */
+    className?: string;
+    /** Preview height */
+    height?: number;
+}
+declare function AttachmentPreview({ className, height, }: AttachmentPreviewProps): react_jsx_runtime.JSX.Element;
+interface AttachmentInfoProps {
+    /** Additional class name */
+    className?: string;
+    /** Show file size */
+    showSize?: boolean;
+}
+declare function AttachmentInfo({ className, showSize, }: AttachmentInfoProps): react_jsx_runtime.JSX.Element;
+interface AttachmentRemoveProps {
+    /** Additional class name */
+    className?: string;
+}
+declare function AttachmentRemove({ className }: AttachmentRemoveProps): react_jsx_runtime.JSX.Element | null;
 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;
+    /** File data */
+    file: FileAttachment$2 | AttachmentFile;
+    /** Whether the file can be removed */
+    removable?: boolean;
+    /** Remove callback */
+    onRemove?: () => void;
+    /** Additional class name */
+    className?: string;
+}
+declare function FileBadgeCompact({ file, removable, onRemove, className, }: FileBadgeProps): react_jsx_runtime.JSX.Element;
+
+interface ShimmerProps {
+    /** Child elements */
+    children?: ReactNode;
+    /** Additional class name */
+    className?: string;
+    /** Whether shimmer is active */
+    isActive?: boolean;
+}
+declare function Shimmer({ children, className, isActive, }: ShimmerProps): react_jsx_runtime.JSX.Element | null;
+interface ShimmerLineProps {
+    /** Width (CSS value or percentage) */
+    width?: string | number;
+    /** Height in pixels */
+    height?: number;
+    /** Additional class name */
+    className?: string;
+}
+declare function ShimmerLine({ width, height, className, }: ShimmerLineProps): react_jsx_runtime.JSX.Element;
+interface ShimmerBlockProps {
+    /** Width (CSS value or percentage) */
+    width?: string | number;
+    /** Height in pixels */
+    height?: number;
+    /** Border radius */
+    rounded?: 'sm' | 'md' | 'lg' | 'full' | 'none';
+    /** Additional class name */
+    className?: string;
+}
+declare function ShimmerBlock({ width, height, rounded, className, }: ShimmerBlockProps): react_jsx_runtime.JSX.Element;
+interface ShimmerTextProps {
+    /** Number of characters to approximate width */
+    chars?: number;
+    /** Additional class name */
     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
- */
-interface DisplayModeContextType {
-    /** Current display configuration */
-    config: ToolDisplayConfig;
-    /** Update the display mode */
-    setMode: (mode: ToolDisplayMode) => void;
-    /** Update the full configuration */
-    setConfig: (config: Partial<ToolDisplayConfig>) => void;
-    /** Toggle between 'inline' and 'compact' modes */
-    toggleMode: () => void;
-}
-interface DisplayModeProviderProps {
-    children: ReactNode;
-    /** Initial display configuration */
-    initialConfig?: Partial<ToolDisplayConfig>;
+declare function ShimmerText({ chars, className, }: ShimmerTextProps): react_jsx_runtime.JSX.Element;
+interface LoadingDotsProps {
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional class name */
+    className?: string;
 }
-/**
- * Provider for display mode configuration.
- *
- * Wrap your chat component with this provider to enable
- * configurable tool call display modes.
- *
- * @example
- * ```tsx
- * <DisplayModeProvider initialConfig={{ mode: 'compact' }}>
- *   <MessageList entries={entries} />
- * </DisplayModeProvider>
- * ```
- */
-declare function DisplayModeProvider({ children, initialConfig }: DisplayModeProviderProps): react_jsx_runtime.JSX.Element;
-/**
- * Hook to access display mode configuration.
- *
- * @example
- * ```tsx
- * function MyComponent() {
- *   const { config, toggleMode } = useDisplayMode();
- *
- *   return (
- *     <button onClick={toggleMode}>
- *       Mode: {config.mode}
- *     </button>
- *   );
- * }
- * ```
- */
-declare function useDisplayMode(): DisplayModeContextType;
-/**
- * Hook to get just the current config (for components that only read)
- */
-declare function useDisplayConfig(): ToolDisplayConfig;
-
-interface OptionCardsProps {
-    /** Parsed options to display */
-    options: ParsedOption[];
-    /** Callback when an option is selected */
-    onSelect: (option: ParsedOption) => void;
-    /** Additional class names */
+declare function LoadingDots({ size, className, }: LoadingDotsProps): react_jsx_runtime.JSX.Element;
+interface LoadingSpinnerProps {
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Additional class name */
     className?: string;
 }
-/**
- * OptionCards - Display clickable option cards for interactive selection
- *
- * Renders a grid of glassmorphic cards that users can click to select an option.
- * Used when assistant messages contain structured options for the user to choose from.
- *
- * @example
- * ```tsx
- * <OptionCards
- *   options={[
- *     { id: '1', label: 'Add Product', description: 'Upload a new product' },
- *     { id: '2', label: 'Browse Existing', description: 'View your products' },
- *   ]}
- *   onSelect={(opt) => sendMessage(opt.label)}
- * />
- * ```
- */
-declare function OptionCards({ options, onSelect, className }: OptionCardsProps): react_jsx_runtime.JSX.Element;
+declare function LoadingSpinner({ size, className, }: LoadingSpinnerProps): react_jsx_runtime.JSX.Element;
+interface MessageShimmerProps {
+    /** Message role to style appropriately */
+    role?: 'user' | 'assistant';
+    /** Additional class name */
+    className?: string;
+}
+declare function MessageShimmer({ role, className, }: MessageShimmerProps): react_jsx_runtime.JSX.Element;
 
-interface TodoPanelProps {
-    /** List of todo items */
-    todos: TodoItem[];
-    /** Optional title for the panel */
+interface LogsPanelProps {
+    logs: LogEntry[];
     title?: string;
-    /** Show in compact mode (less padding, smaller text) */
-    compact?: boolean;
-    /** Show progress bar */
-    showProgress?: boolean;
-    /** Additional class names */
+    isLoading?: boolean;
+    defaultCollapsed?: boolean;
+    maxHeight?: number;
     className?: string;
 }
 /**
- * TodoPanel - Display a list of todos with status indicators
+ * LogsPanel - Collapsible panel for displaying log entries
  *
  * Features:
- * - Status icons (pending/in_progress/completed)
- * - Progress bar showing completion
- * - Compact mode for inline display
- * - Animated transitions
+ * - Collapsible header with log count
+ * - Error/warning count badges
+ * - Level-based coloring and icons
+ * - Expandable entries with JSON data
  *
  * @example
  * ```tsx
- * <TodoPanel todos={todos} />
- * <TodoPanel todos={todos} title="Task Progress" showProgress />
- * <TodoPanel todos={todos} compact />
+ * <LogsPanel logs={logEntries} />
+ * <LogsPanel logs={logs} title="Execution Logs" defaultCollapsed={false} />
  * ```
  */
-declare function TodoPanel({ todos, title, compact, showProgress, className, }: TodoPanelProps): react_jsx_runtime.JSX.Element | null;
+declare function LogsPanel({ logs, title, isLoading, defaultCollapsed, maxHeight, className, }: LogsPanelProps): react_jsx_runtime.JSX.Element | null;
 
 interface EnvVarsPanelProps {
     /** Current environment variables */
@@ -620,79 +487,32 @@ interface EnvVarsPanelProps {
  */
 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;
-        accordion?: string;
-    };
-    /** Which modes to cycle through (default: all three) */
-    modes?: ToolDisplayMode[];
-}
-/**
- * DisplayModeToggle - Button to cycle through display modes
- *
- * Uses the DisplayModeContext to cycle through 'inline', 'compact', and 'accordion' 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, modes, }: DisplayModeToggleProps): react_jsx_runtime.JSX.Element;
-
-type StepStatus = 'pending' | 'running' | 'success' | 'error';
-interface StepAccordionProps {
-    /** Tool calls to display as steps */
-    toolCalls: NormalizedToolCall[];
-    /** Whether the accordion starts expanded */
-    defaultExpanded?: boolean;
-    /** Controlled expanded state */
-    isExpanded?: boolean;
-    /** Callback when expanded state changes */
-    onToggle?: () => void;
+interface OptionCardsProps {
+    /** Parsed options to display */
+    options: ParsedOption[];
+    /** Callback when an option is selected */
+    onSelect: (option: ParsedOption) => void;
     /** Additional class names */
     className?: string;
 }
 /**
- * StepAccordion - Compact accordion that shows tool calls with file badges
+ * OptionCards - Display clickable option cards for interactive selection
  *
- * Features:
- * - 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
+ * Renders a grid of glassmorphic cards that users can click to select an option.
+ * Used when assistant messages contain structured options for the user to choose from.
  *
  * @example
  * ```tsx
- * <StepAccordion
- *   toolCalls={normalizedToolCalls}
- *   defaultExpanded={false}
+ * <OptionCards
+ *   options={[
+ *     { id: '1', label: 'Add Product', description: 'Upload a new product' },
+ *     { id: '2', label: 'Browse Existing', description: 'View your products' },
+ *   ]}
+ *   onSelect={(opt) => sendMessage(opt.label)}
  * />
  * ```
  */
-declare function StepAccordion({ toolCalls, defaultExpanded, isExpanded: controlledExpanded, onToggle, className, }: StepAccordionProps): react_jsx_runtime.JSX.Element | null;
+declare function OptionCards({ options, onSelect, className }: OptionCardsProps): react_jsx_runtime.JSX.Element;
 
 interface StatusIndicatorProps {
     status: ToolStatus;
@@ -769,51 +589,6 @@ interface JsonDisplayProps {
  */
 declare function JsonDisplay({ value, maxHeight, className }: JsonDisplayProps): react_jsx_runtime.JSX.Element;
 
-interface StreamingTextProps {
-    content: string;
-    isStreaming?: boolean;
-    renderMarkdown?: boolean;
-    className?: string;
-}
-/**
- * StreamingText - Display text that may be streaming, with optional markdown
- *
- * Shows a blinking cursor indicator when streaming is active.
- * Uses glassmorphism theme styling.
- *
- * @example
- * ```tsx
- * <StreamingText content={text} isStreaming />
- * <StreamingText content={markdown} renderMarkdown />
- * ```
- */
-declare function StreamingText({ content, isStreaming, renderMarkdown, className, }: StreamingTextProps): react_jsx_runtime.JSX.Element;
-
-interface LoadingIndicatorProps {
-    variant?: 'dots' | 'pulse' | 'spinner' | 'cursor';
-    size?: 'sm' | 'md' | 'lg';
-    className?: string;
-}
-/**
- * LoadingIndicator - Display various loading states
- *
- * Uses the glassmorphism theme with accent-colored animations.
- *
- * Variants:
- * - dots: Three animated dots
- * - pulse: Single pulsing dot
- * - spinner: Rotating spinner
- * - cursor: Blinking cursor (like in the demo)
- *
- * @example
- * ```tsx
- * <LoadingIndicator />
- * <LoadingIndicator variant="spinner" size="lg" />
- * <LoadingIndicator variant="cursor" />
- * ```
- */
-declare function LoadingIndicator({ variant, size, className }: LoadingIndicatorProps): react_jsx_runtime.JSX.Element;
-
 interface LazyMarkdownProps {
     children: string;
     /** Fallback content to show while loading */
@@ -845,118 +620,6 @@ interface LazyMarkdownProps {
  */
 declare function LazyMarkdown({ children, fallback, components, className }: LazyMarkdownProps): react_jsx_runtime.JSX.Element;
 
-interface RichContentRendererProps {
-    /** Rich content segments to render */
-    content: RichContent;
-    /** Custom renderers for segments */
-    renderers?: RichContentRenderers;
-    /** Additional class name */
-    className?: string;
-}
-/**
- * RichContentRenderer - Renders structured rich content segments
- *
- * This is the preferred approach for rendering rich content within messages.
- * Each segment type can have custom rendering via the `renderers` prop.
- *
- * @example
- * ```tsx
- * <RichContentRenderer
- *   content={[
- *     { type: 'text', content: 'Looking at ' },
- *     { type: 'mention', name: 'Scene1', color: '#ff0' },
- *     { type: 'text', content: ' timeline.' },
- *   ]}
- *   renderers={{
- *     renderMention: ({ segment }) => (
- *       <MentionBadge
- *         name={segment.name}
- *         onClick={() => scrollTo(segment.id)}
- *       />
- *     ),
- *   }}
- * />
- * ```
- */
-declare function RichContentRenderer({ content, renderers, className, }: RichContentRendererProps): react_jsx_runtime.JSX.Element;
-
-interface TypewriterTextProps {
-    /** Words to cycle through */
-    words?: string[];
-    /** Typing speed in ms per character */
-    typeSpeed?: number;
-    /** Pause before erasing in ms */
-    pauseBeforeErase?: number;
-    /** Erasing speed in ms per character */
-    eraseSpeed?: number;
-    /** Pause before typing next word in ms */
-    pauseBeforeType?: number;
-    /** Whether to show a blinking cursor */
-    showCursor?: boolean;
-    /** Additional class names */
-    className?: string;
-    /** Cursor class names */
-    cursorClassName?: string;
-}
-/**
- * TypewriterText - Animated typing component that cycles through words
- *
- * Creates a typewriter effect that types out words character by character,
- * pauses, then erases them before moving to the next word.
- *
- * @example
- * ```tsx
- * // Default thinking words
- * <TypewriterText />
- *
- * // Custom words
- * <TypewriterText words={['Loading', 'Processing', 'Almost done']} />
- *
- * // Custom speeds
- * <TypewriterText typeSpeed={30} pauseBeforeErase={1000} />
- * ```
- */
-declare function TypewriterText({ words, typeSpeed, pauseBeforeErase, eraseSpeed, pauseBeforeType, showCursor, className, cursorClassName, }: TypewriterTextProps): react_jsx_runtime.JSX.Element;
-
-type Theme = 'light' | 'dark';
-interface ThemeContextType {
-    theme: Theme;
-    toggleTheme: () => void;
-    setTheme: (theme: Theme) => void;
-}
-interface ThemeProviderProps {
-    children: ReactNode;
-    /** Default theme to use when no stored preference exists. Defaults to system preference, then 'light'. */
-    defaultTheme?: Theme;
-    /** localStorage key for persisting theme. Defaults to 'ash-ui-theme'. */
-    storageKey?: string;
-    /** Whether to listen for system theme changes. Defaults to true. */
-    listenToSystemChanges?: boolean;
-}
-/**
- * ThemeProvider - Unified theme management for agentic UIs.
- *
- * Features:
- * - Persists theme choice to localStorage
- * - Respects system preference when no stored preference exists
- * - Listens for system theme changes (configurable)
- * - Adds/removes 'dark' class on document root for Tailwind CSS
- *
- * @example
- * ```tsx
- * <ThemeProvider>
- *   <App />
- * </ThemeProvider>
- *
- * // With custom defaults
- * <ThemeProvider defaultTheme="dark" storageKey="my-theme">
- *   <App />
- * </ThemeProvider>
- * ```
- */
-declare function ThemeProvider({ children, defaultTheme, storageKey, listenToSystemChanges, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
-declare function useTheme(): ThemeContextType;
-
 /**
  * A queued message waiting to be sent
  */
@@ -1143,6 +806,10 @@ interface UseFileUploadReturn {
     /** Click handler to trigger file input */
     openFilePicker: () => void;
 }
+/**
+ * Format file size for display
+ */
+declare function formatFileSize(bytes: number): string;
 /**
  * Hook for managing file uploads with drag & drop support.
  *
@@ -1599,6 +1266,158 @@ interface UseAgentChatReturn {
 }
 declare function useAgentChat(options: UseAgentChatOptions): UseAgentChatReturn;
 
+/**
+ * useChat - AI SDK compatible chat hook for ash-cloud
+ *
+ * This hook provides an interface compatible with AI SDK's useChat hook
+ * while using ash-cloud's streaming infrastructure under the hood.
+ *
+ * @example
+ * ```tsx
+ * import { useChat } from '@ash-cloud/ash-ui';
+ *
+ * function Chat() {
+ *   const {
+ *     messages,
+ *     isLoading,
+ *     append,
+ *     stop,
+ *     setMessages,
+ *   } = useChat({
+ *     createStream: (prompt, sessionId) => client.agents.run(agentId, prompt),
+ *     onToolCall: ({ toolCall }) => console.log('Tool called:', toolCall.toolName),
+ *   });
+ *
+ *   return (
+ *     <Conversation>
+ *       {messages.map((m) => (
+ *         <Message key={m.id} from={m.role}>{m.content}</Message>
+ *       ))}
+ *     </Conversation>
+ *   );
+ * }
+ * ```
+ */
+
+/**
+ * Message to append to the conversation
+ */
+interface CreateMessage {
+    /** Message ID (auto-generated if not provided) */
+    id?: string;
+    /** Message role */
+    role: 'user' | 'assistant' | 'system' | 'data';
+    /** Message content */
+    content: string;
+    /** Tool invocations */
+    toolInvocations?: ToolInvocation[];
+    /** Reasoning content */
+    reasoning?: string;
+}
+/**
+ * Options for appending a message
+ */
+interface ChatRequestOptions {
+    /** Additional data to include with the request */
+    data?: Record<string, unknown>;
+    /** Additional body parameters */
+    body?: Record<string, unknown>;
+}
+/**
+ * Tool call handler callback
+ */
+interface ToolCallHandler {
+    /** The tool invocation */
+    toolCall: ToolInvocation;
+}
+/**
+ * Options for useChat hook
+ */
+interface UseChatOptions {
+    /**
+     * Function to create a stream of events.
+     * Can wrap client.agents.run() or client.sessions.send()
+     */
+    createStream: CreateStreamFn;
+    /**
+     * Function to subscribe to an existing session for reconnection.
+     */
+    subscribeToSession?: (sessionId: string, signal?: AbortSignal) => StreamGenerator;
+    /**
+     * Initial session ID (for resuming a conversation)
+     */
+    initialSessionId?: string;
+    /**
+     * Initial messages to display
+     */
+    initialMessages?: Message$1[];
+    /**
+     * Callback when a tool is called
+     */
+    onToolCall?: (handler: ToolCallHandler) => void;
+    /**
+     * Callback when streaming finishes
+     */
+    onFinish?: (message: Message$1) => void;
+    /**
+     * Callback when an error occurs
+     */
+    onError?: (error: Error) => void;
+    /**
+     * Callback when session starts
+     */
+    onSessionStart?: (sessionId: string) => void;
+    /**
+     * Maximum number of reconnection attempts
+     */
+    maxReconnectAttempts?: number;
+    /**
+     * Base delay for exponential backoff in ms
+     */
+    reconnectBaseDelay?: number;
+    /**
+     * Middleware for composable request/event transforms
+     */
+    middleware?: ChatMiddleware[];
+}
+/**
+ * Return type for useChat
+ */
+interface UseChatReturn {
+    /** All messages in the conversation */
+    messages: Message$1[];
+    /** Whether a message is currently being streamed */
+    isLoading: boolean;
+    /** Current error (if any) */
+    error: Error | undefined;
+    /** Current session ID */
+    sessionId: string | null;
+    /** Append a message to the conversation and stream response */
+    append: (message: CreateMessage | string, options?: ChatRequestOptions) => Promise<string | null | undefined>;
+    /** Stop the current streaming request */
+    stop: () => void;
+    /** Set messages (replace all) */
+    setMessages: (messages: Message$1[]) => void;
+    /** Reload the last assistant message */
+    reload: () => Promise<string | null | undefined>;
+    /** The current input value (for controlled input) */
+    input: string;
+    /** Set the input value */
+    setInput: (input: string) => void;
+    /** Handle input change (for form inputs) */
+    handleInputChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /** Handle form submission */
+    handleSubmit: (e?: React.FormEvent<HTMLFormElement>, options?: ChatRequestOptions) => void;
+    /** Whether currently reconnecting after stream interruption */
+    isReconnecting: boolean;
+    /**
+     * Legacy: Get entries in NormalizedEntry format
+     * For backwards compatibility during migration
+     */
+    entries: NormalizedEntry[];
+}
+declare function useChat(options: UseChatOptions): UseChatReturn;
+
 /**
  * Configuration for long text auto-conversion
  */
@@ -1708,4 +1527,4 @@ interface UseLongTextConversionReturn {
  */
 declare function useLongTextConversion({ threshold, filenameTemplate, onConversion, }?: LongTextConversionOptions): UseLongTextConversionReturn;
 
-export { ActionIcon, type ActionIconProps, ActionType, type StreamEvent as AgentStreamEvent, AgentToolCard, type AgentToolCardProps, AssistantMessage, type AssistantMessageProps, type BeforeSendContext, type BeforeSendResult, type FileAttachment as ChatFileAttachment, type ChatMiddleware, CodeBlock, type CodeBlockProps, CompactToolRow, type CompactToolRowProps, CompactToolStatusLine, type CompactToolStatusLineProps, type ConversionInfo, type CreateStreamFn, type CreateStreamOptions, type DisplayModeContextType, DisplayModeProvider, type DisplayModeProviderProps, DisplayModeToggle, type DisplayModeToggleProps, EnvVarsPanel, type EnvVarsPanelProps, ErrorMessage, type ErrorMessageProps, FileBadge, type FileBadgeProps, JsonDisplay, type JsonDisplayProps, LazyMarkdown, type LazyMarkdownProps, LoadingIndicator, type LoadingIndicatorProps, LogEntry, LogsPanel, type LogsPanelProps, type LongTextConversionOptions, MarkdownComponents, MessageEntry, type MessageEntryProps, MessageList, type MessageListProps, MessageMetadata, MessageVariant, type MiddlewareRequest, type MiddlewareRequestResult, NormalizedEntry, NormalizedToolCall, OptionCards, type OptionCardsProps, ParsedOption, type QueuedMessage, RenderMetadataFunction, RichContent, RichContentRenderer, type RichContentRendererProps, RichContentRenderers, 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, TypographyScale, type UseAgentChatOptions, type UseAgentChatReturn, type UseFileUploadOptions, type UseFileUploadReturn, type UseLongTextConversionReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UseStopExecutionOptions, type UseStopExecutionReturn, UserMessage, type UserMessageProps, WidgetAction, WidgetRenderFunction, applyEventMiddleware, applyRequestMiddleware, callMiddlewareComplete, callMiddlewareError, useAgentChat, useDisplayConfig, useDisplayMode, useFileUpload, useLongTextConversion, useMessageQueue, useStopExecution, useTheme };
+export { Message$1 as AIMessage, ActionIcon, type ActionIconProps, ActionType, type StreamEvent as AgentStreamEvent, Attachment, type AttachmentFile, AttachmentInfo, type AttachmentInfoProps, AttachmentPreview, type AttachmentPreviewProps, type AttachmentProps, AttachmentRemove, type AttachmentRemoveProps, Attachments, type AttachmentsProps, type BeforeSendContext, type BeforeSendResult, type FileAttachment as ChatFileAttachment, type ChatMiddleware, type ChatRequestOptions, CodeBlock, type CodeBlockProps, Conversation, ConversationContent, type ConversationContentProps, ConversationEmptyState, type ConversationEmptyStateProps, type ConversationProps, ConversationScrollButton, type ConversationScrollButtonProps, type ConversionInfo, type CreateMessage, type CreateStreamFn, type CreateStreamOptions, EnvVarsPanel, type EnvVarsPanelProps, FileAttachment$2 as FileAttachment, FileBadgeCompact, type FileBadgeProps, type FileAttachment as HookFileAttachment, JsonDisplay, type JsonDisplayProps, LazyMarkdown, type LazyMarkdownProps, LoadingDots, type LoadingDotsProps, LoadingSpinner, type LoadingSpinnerProps, LogEntry, LogsPanel, type LogsPanelProps, type LongTextConversionOptions, MarkdownComponents, Message, MessageAction, type MessageActionProps, MessageActions, type MessageActionsProps, MessageAvatar, type MessageAvatarProps, MessageContent, type MessageContentProps, type MessageProps, MessageResponse, type MessageResponseProps, MessageShimmer, type MessageShimmerProps, MessageTimestamp, type MessageTimestampProps, type MiddlewareRequest, type MiddlewareRequestResult, NormalizedEntry, OptionCards, type OptionCardsProps, ParsedOption, type QueuedMessage, Reasoning, ReasoningContent, type ReasoningContentProps, type ReasoningProps, ReasoningTrigger, type ReasoningTriggerProps, Shimmer, ShimmerBlock, type ShimmerBlockProps, ShimmerLine, type ShimmerLineProps, type ShimmerProps, ShimmerText, type ShimmerTextProps, StatusIndicator, type StatusIndicatorProps, type StreamGenerator, Task, TaskContent, type TaskContentProps, TaskItem, type TaskItemProps, TaskList, type TaskListProps, type TaskProps, TaskTrigger, type TaskTriggerProps, type TextAttachment, ThinkingIndicator, type ThinkingIndicatorProps, TodoItem, TodoStatus, Tool, type ToolCallHandler, ToolHeader, type ToolHeaderProps, ToolInput, type ToolInputProps, ToolInvocation, ToolList, type ToolListProps, ToolOutput, type ToolOutputProps, type ToolProps, ToolStatus, type UseAgentChatOptions, type UseAgentChatReturn, type UseChatOptions, type UseChatReturn, type UseFileUploadOptions, type UseFileUploadReturn, type UseLongTextConversionReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UseStopExecutionOptions, type UseStopExecutionReturn, applyEventMiddleware, applyRequestMiddleware, callMiddlewareComplete, callMiddlewareError, formatFileSize as formatFileSizeHook, useAgentChat, useAttachment, useChat, useConversation, useFileUpload, useLongTextConversion, useMessage, useMessageQueue, useReasoning, useStopExecution, useTask, useTool };