@ash-cloud/ash-ui 0.1.0 → 0.1.1

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { NormalizedToolCall, NormalizedEntry, ToolDisplayConfig, WidgetRenderFunction, WidgetAction, RichContentRenderers, LogEntry, ToolDisplayMode, TodoItem, ToolStatus, ActionType, RichContent } from './types.js';
-export { AgentToolAction, AssistantMessageEntry, CommandRunAction, CommandRunResult, ComponentRenderProps, DEFAULT_DISPLAY_CONFIG, ErrorEntry, FileAttachment, FileEditAction, FileReadAction, FileWriteAction, GenericToolAction, GlobAction, LogCategory, LogLevel, McpToolAction, MentionRenderProps, 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 { 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 { 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 { AlertCircleIcon, AlertTriangleIcon, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, ClockIcon, 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';
-export { BorderRadius, Colors, Keyframes, Shadows, Spacing, Transitions, Typography, Widget, ZIndex, allKeyframesCss, borderRadius, colors, inlineStyles, keyframes, keyframesCss, shadows, spacing, tokensToCssVariables, transitions, typography, widget, zIndex } from './design-tokens.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;
@@ -123,6 +123,66 @@ interface MessageListProps {
      * ```
      */
     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 */
     className?: string;
 }
@@ -146,65 +206,105 @@ interface MessageListProps {
  * <MessageList entries={entries} displayConfig={{ mode: 'compact' }} />
  * ```
  */
-declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, renderWidget, onWidgetAction, autoScroll, richContentRenderers, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
+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;
 
 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;
     className?: string;
 }
 /**
  * UserMessage - Display a user message with optional file attachments
  *
- * Uses glassmorphism styling with animated entry.
+ * ChatGPT-style: Blue/purple rounded bubbles on right, avatar hidden by default
  */
-declare function UserMessage({ entry, className }: UserMessageProps): react_jsx_runtime.JSX.Element;
+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;
     className?: string;
 }
 /**
  * AssistantMessage - Display an assistant message with markdown rendering
  *
- * Uses glassmorphism styling with bot avatar and animated entry.
+ * 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, onOptionSelect, richContentRenderers, className, }: AssistantMessageProps): react_jsx_runtime.JSX.Element;
+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;
     className?: string;
 }
 /**
  * ThinkingMessage - Display thinking/reasoning content (extended thinking)
  *
- * Uses glassmorphism styling with purple accent for thinking mode.
+ * Compact styling with purple accent for thinking mode.
  */
-declare function ThinkingMessage({ entry, className }: ThinkingMessageProps): react_jsx_runtime.JSX.Element;
+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;
     className?: string;
 }
 /**
  * ToolCallMessage - Display a tool call entry using ToolCallCard
  *
- * Uses glassmorphism styling with animated entry.
+ * Compact styling with animated entry.
  */
-declare function ToolCallMessage({ entry, defaultExpanded, className }: ToolCallMessageProps): react_jsx_runtime.JSX.Element | null;
+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;
     className?: string;
 }
 /**
  * ErrorMessage - Display an error entry
  *
- * Uses glassmorphism styling with red accent for errors.
+ * Compact styling with red accent for errors.
  */
-declare function ErrorMessage({ entry, className }: ErrorMessageProps): react_jsx_runtime.JSX.Element | null;
+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 */
@@ -213,22 +313,43 @@ interface MessageEntryProps {
     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;
     className?: string;
 }
 /**
  * MessageEntry - Render a normalized entry based on its type
  *
  * This is a convenience component that routes to the appropriate
- * entry type component.
+ * 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, className, }: MessageEntryProps): react_jsx_runtime.JSX.Element | null;
+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[];
@@ -620,7 +741,8 @@ interface CodeBlockProps {
 /**
  * CodeBlock - Display code with syntax-aware styling and expand/collapse
  *
- * Uses glassmorphism dark theme styling with accent-colored expand button.
+ * Uses glassmorphism dark theme styling with ChatGPT-style header containing
+ * language label and copy button.
  *
  * @example
  * ```tsx
@@ -696,6 +818,8 @@ interface LazyMarkdownProps {
     children: string;
     /** Fallback content to show while loading */
     fallback?: ReactNode;
+    /** Custom component overrides for markdown elements */
+    components?: MarkdownComponents;
     className?: string;
 }
 /**
@@ -707,9 +831,19 @@ interface LazyMarkdownProps {
  * @example
  * ```tsx
  * <LazyMarkdown>{markdownContent}</LazyMarkdown>
+ *
+ * // With custom components
+ * <LazyMarkdown
+ *   components={{
+ *     h2: ({ children }) => <h2 className="custom-h2">{children}</h2>,
+ *     code: ({ children, className }) => <CustomCode className={className}>{children}</CustomCode>,
+ *   }}
+ * >
+ *   {markdownContent}
+ * </LazyMarkdown>
  * ```
  */
-declare function LazyMarkdown({ children, fallback, className }: LazyMarkdownProps): react_jsx_runtime.JSX.Element;
+declare function LazyMarkdown({ children, fallback, components, className }: LazyMarkdownProps): react_jsx_runtime.JSX.Element;
 
 interface RichContentRendererProps {
     /** Rich content segments to render */
@@ -1054,6 +1188,113 @@ interface UseFileUploadReturn {
 declare function useFileUpload({ maxFileSize, // 100MB
 maxFiles, onValidationError, }?: UseFileUploadOptions): UseFileUploadReturn;
 
+/**
+ * Middleware utilities for useAgentChat
+ *
+ * Provides composable request and event transformation capabilities.
+ * Middleware functions are called in order, and each can transform or filter
+ * the request/event before passing it to the next middleware.
+ *
+ * @example
+ * ```tsx
+ * const loggingMiddleware: ChatMiddleware = {
+ *   onRequest: (request) => {
+ *     console.log('Sending:', request.prompt);
+ *     return request;
+ *   },
+ *   onEvent: (event) => {
+ *     console.log('Received:', event.type);
+ *     return event;
+ *   },
+ * };
+ *
+ * const { send } = useAgentChat({
+ *   middleware: [loggingMiddleware],
+ *   // ...
+ * });
+ * ```
+ */
+
+/**
+ * Request object passed through middleware chain
+ */
+interface MiddlewareRequest {
+    /** The user's prompt */
+    prompt: string;
+    /** Current session ID (if resuming a conversation) */
+    sessionId: string | null;
+    /** Additional metadata to send with the request */
+    metadata?: Record<string, unknown>;
+    /** Additional context to prepend to the session */
+    sessionContext?: string;
+}
+/**
+ * Result returned from request middleware
+ * Return void or omit fields to keep original values
+ */
+interface MiddlewareRequestResult {
+    /** Modified prompt */
+    prompt?: string;
+    /** Modified metadata (merged with existing) */
+    metadata?: Record<string, unknown>;
+    /** Modified session context */
+    sessionContext?: string;
+    /** If set, cancels the request and shows this error */
+    error?: string;
+}
+/**
+ * Middleware interface for composable request/event transforms
+ */
+interface ChatMiddleware {
+    /** Called before the request is sent. Can modify request or return error to cancel. */
+    onRequest?: (request: MiddlewareRequest) => Promise<MiddlewareRequestResult | void> | MiddlewareRequestResult | void;
+    /** Called for each event. Return null to filter out the event. */
+    onEvent?: (event: StreamEvent) => Promise<StreamEvent | null> | StreamEvent | null;
+    /** Called when the stream completes successfully */
+    onComplete?: (sessionId: string) => void | Promise<void>;
+    /** Called when an error occurs */
+    onError?: (error: string) => void | Promise<void>;
+}
+/**
+ * Apply request middleware chain
+ *
+ * Executes each middleware's onRequest handler in order.
+ * Each middleware can modify the request or return an error to cancel.
+ *
+ * @param middlewares - Array of middleware to apply
+ * @param request - Initial request object
+ * @returns Modified request and optional error
+ */
+declare function applyRequestMiddleware(middlewares: ChatMiddleware[], request: MiddlewareRequest): Promise<{
+    request: MiddlewareRequest;
+    error?: string;
+}>;
+/**
+ * Apply event middleware chain
+ *
+ * Executes each middleware's onEvent handler in order.
+ * If any middleware returns null, the event is filtered out.
+ *
+ * @param middlewares - Array of middleware to apply
+ * @param event - Stream event to process
+ * @returns Processed event or null if filtered
+ */
+declare function applyEventMiddleware(middlewares: ChatMiddleware[], event: StreamEvent): Promise<StreamEvent | null>;
+/**
+ * Call completion handlers on all middleware
+ *
+ * @param middlewares - Array of middleware
+ * @param sessionId - Completed session ID
+ */
+declare function callMiddlewareComplete(middlewares: ChatMiddleware[], sessionId: string): Promise<void>;
+/**
+ * Call error handlers on all middleware
+ *
+ * @param middlewares - Array of middleware
+ * @param error - Error message
+ */
+declare function callMiddlewareError(middlewares: ChatMiddleware[], error: string): Promise<void>;
+
 /**
  * useAgentChat - A React hook for streaming agent conversations
  *
@@ -1128,12 +1369,70 @@ interface StreamEvent {
  * Async generator that yields StreamEvent objects
  */
 type StreamGenerator = AsyncGenerator<StreamEvent, void, unknown>;
+/**
+ * Options passed to CreateStreamFn
+ */
+interface CreateStreamOptions {
+    /** AbortSignal to cancel the request */
+    signal?: AbortSignal;
+    /** Additional metadata from onBeforeSend/middleware */
+    metadata?: Record<string, unknown>;
+    /** Session context from onBeforeSend/middleware */
+    sessionContext?: string;
+}
 /**
  * Function that creates a stream of events
  * This matches the signature of client.agents.run() and client.sessions.send()
- * The optional signal parameter allows cancellation via AbortController
+ *
+ * @example
+ * ```tsx
+ * createStream: (prompt, sessionId, options) => {
+ *   if (sessionId) {
+ *     return client.sessions.send(sessionId, prompt, {
+ *       signal: options?.signal,
+ *       sessionContext: options?.sessionContext,
+ *       metadata: options?.metadata,
+ *     });
+ *   }
+ *   return client.agents.run(agentId, prompt, {
+ *     signal: options?.signal,
+ *     sessionContext: options?.sessionContext,
+ *     metadata: options?.metadata,
+ *   });
+ * }
+ * ```
  */
-type CreateStreamFn = (prompt: string, sessionId?: string, signal?: AbortSignal) => StreamGenerator;
+type CreateStreamFn = (prompt: string, sessionId?: string, options?: CreateStreamOptions) => StreamGenerator;
+/**
+ * Function that subscribes to an existing session's events
+ * This is used for auto-reconnection when the primary stream is interrupted
+ */
+type SubscribeToSessionFn = (sessionId: string, signal?: AbortSignal) => StreamGenerator;
+/**
+ * Context passed to onBeforeSend hook
+ */
+interface BeforeSendContext {
+    /** The user's prompt */
+    prompt: string;
+    /** Current session ID (null for new conversations) */
+    sessionId: string | null;
+    /** Current entries in the conversation */
+    entries: NormalizedEntry[];
+}
+/**
+ * Result returned from onBeforeSend hook
+ * Return void or omit fields to keep original values
+ */
+interface BeforeSendResult {
+    /** Modified prompt to send */
+    prompt?: string;
+    /** Additional metadata to include with the request */
+    metadata?: Record<string, unknown>;
+    /** Additional context to prepend to the session */
+    sessionContext?: string;
+    /** If true, cancels the send operation */
+    cancel?: boolean;
+}
 /**
  * Options for useAgentChat
  */
@@ -1153,6 +1452,18 @@ interface UseAgentChatOptions {
      * ```
      */
     createStream: CreateStreamFn;
+    /**
+     * Function to subscribe to an existing session for reconnection.
+     * If provided, enables auto-reconnection when the stream is interrupted.
+     *
+     * @example
+     * ```tsx
+     * subscribeToSession: (sessionId, signal) => {
+     *   return client.sessions.subscribe(sessionId, { signal });
+     * }
+     * ```
+     */
+    subscribeToSession?: SubscribeToSessionFn;
     /**
      * Initial session ID (for resuming a conversation)
      */
@@ -1177,6 +1488,71 @@ interface UseAgentChatOptions {
      * Callback for sandbox log events
      */
     onSandboxLog?: (entry: NonNullable<StreamEvent['entry']>) => void;
+    /**
+     * Callback when reconnection is attempted
+     */
+    onReconnect?: (attempt: number, sessionId: string) => void;
+    /**
+     * Maximum number of reconnection attempts (default: 3)
+     */
+    maxReconnectAttempts?: number;
+    /**
+     * Base delay for exponential backoff in ms (default: 1000)
+     */
+    reconnectBaseDelay?: number;
+    /**
+     * Called before each message is sent.
+     * Use for pre-flight work like file synchronization, validation, or adding context.
+     * Return { cancel: true } to prevent the message from being sent.
+     *
+     * @example
+     * ```tsx
+     * onBeforeSend: async ({ prompt, sessionId }) => {
+     *   await syncFilesToSandbox(sessionId);
+     *   return {
+     *     sessionContext: `Current file: ${currentFile}`,
+     *     metadata: { version: '1.0' },
+     *   };
+     * }
+     * ```
+     */
+    onBeforeSend?: (context: BeforeSendContext) => Promise<BeforeSendResult | void> | BeforeSendResult | void;
+    /**
+     * Called for every raw stream event before internal processing.
+     * Use for logging, analytics, or detecting specific events.
+     *
+     * @example
+     * ```tsx
+     * onEvent: (event) => {
+     *   if (event.type === 'tool_result' && event.toolName === 'browser_navigate') {
+     *     updatePreview(event.toolResult?.url);
+     *   }
+     * }
+     * ```
+     */
+    onEvent?: (event: StreamEvent) => void | Promise<void>;
+    /**
+     * Array of middleware for composable request/event transforms.
+     * Middleware are executed in order. Each can modify requests,
+     * transform events, or filter events by returning null.
+     *
+     * @example
+     * ```tsx
+     * middleware: [
+     *   {
+     *     onRequest: async (req) => ({
+     *       metadata: { ...req.metadata, timestamp: Date.now() },
+     *     }),
+     *     onEvent: (event) => {
+     *       // Filter out sandbox_log events
+     *       if (event.type === 'sandbox_log') return null;
+     *       return event;
+     *     },
+     *   },
+     * ]
+     * ```
+     */
+    middleware?: ChatMiddleware[];
 }
 /**
  * Return type for useAgentChat
@@ -1191,6 +1567,10 @@ interface UseAgentChatReturn {
      * Whether a message is currently being streamed
      */
     isStreaming: boolean;
+    /**
+     * Whether the hook is attempting to reconnect after a stream interruption
+     */
+    isReconnecting: boolean;
     /**
      * Current error message (if any)
      */
@@ -1328,4 +1708,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 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, LazyMarkdown, type LazyMarkdownProps, LoadingIndicator, type LoadingIndicatorProps, LogEntry, LogsPanel, type LogsPanelProps, type LongTextConversionOptions, MessageEntry, type MessageEntryProps, MessageList, type MessageListProps, NormalizedEntry, NormalizedToolCall, OptionCards, type OptionCardsProps, ParsedOption, type QueuedMessage, 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, 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 };
+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 };