@ash-cloud/ash-ui 0.0.1

package/dist/index.d.cts

@@ -0,0 +1,535 @@
+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 { 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';
+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.cjs';
+
+interface ToolCallCardProps {
+    toolCall: NormalizedToolCall;
+    defaultExpanded?: boolean;
+    className?: string;
+}
+/**
+ * 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 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;
+    /** Additional class names */
+    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, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
+
+interface UserMessageProps {
+    entry: NormalizedEntry;
+    className?: string;
+}
+/**
+ * UserMessage - Display a user message with optional file attachments
+ *
+ * Uses glassmorphism styling with animated entry.
+ */
+declare function UserMessage({ entry, className }: UserMessageProps): react_jsx_runtime.JSX.Element;
+interface AssistantMessageProps {
+    entry: NormalizedEntry;
+    /** Callback when user selects an option */
+    onOptionSelect?: (optionText: string) => void;
+    className?: string;
+}
+/**
+ * AssistantMessage - Display an assistant message with markdown rendering
+ *
+ * Uses glassmorphism styling with bot avatar and animated entry.
+ * Automatically detects and renders interactive options when present.
+ */
+declare function AssistantMessage({ entry, onOptionSelect, className }: AssistantMessageProps): react_jsx_runtime.JSX.Element;
+interface ThinkingMessageProps {
+    entry: NormalizedEntry;
+    className?: string;
+}
+/**
+ * ThinkingMessage - Display thinking/reasoning content (extended thinking)
+ *
+ * Uses glassmorphism styling with purple accent for thinking mode.
+ */
+declare function ThinkingMessage({ entry, className }: ThinkingMessageProps): react_jsx_runtime.JSX.Element;
+interface ToolCallMessageProps {
+    entry: NormalizedEntry;
+    defaultExpanded?: boolean;
+    className?: string;
+}
+/**
+ * ToolCallMessage - Display a tool call entry using ToolCallCard
+ *
+ * Uses glassmorphism styling with animated entry.
+ */
+declare function ToolCallMessage({ entry, defaultExpanded, className }: ToolCallMessageProps): react_jsx_runtime.JSX.Element | null;
+interface ErrorMessageProps {
+    entry: NormalizedEntry;
+    className?: string;
+}
+/**
+ * ErrorMessage - Display an error entry
+ *
+ * Uses glassmorphism styling with red accent for errors.
+ */
+declare function ErrorMessage({ entry, 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;
+    className?: string;
+}
+/**
+ * MessageEntry - Render a normalized entry based on its type
+ *
+ * This is a convenience component that routes to the appropriate
+ * entry type component.
+ *
+ * @example
+ * ```tsx
+ * {entries.map(entry => (
+ *   <MessageEntry key={entry.id} entry={entry} onOptionSelect={handleSelect} />
+ * ))}
+ * ```
+ */
+declare function MessageEntry({ entry, onOptionSelect, className }: MessageEntryProps): react_jsx_runtime.JSX.Element | null;
+
+interface LogsPanelProps {
+    logs: LogEntry[];
+    title?: string;
+    isLoading?: boolean;
+    defaultCollapsed?: boolean;
+    maxHeight?: number;
+    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;
+
+interface ToolExecutionGroupProps {
+    /** Tool calls in this group */
+    toolCalls: NormalizedToolCall[];
+    /** Whether the group starts expanded */
+    defaultExpanded?: boolean;
+    /** Animation duration for status line transitions (ms) */
+    animationDuration?: number;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * ToolExecutionGroup - Displays multiple tool calls in a compact accordion format.
+ *
+ * In collapsed state, shows a single animated status line with the current/latest
+ * tool call. When expanded, shows all tool calls as individual cards.
+ *
+ * Features:
+ * - Animated status line that transitions between tool calls
+ * - Expandable accordion to see all tool call details
+ * - Count badge showing total tool calls
+ * - Overall status indicator
+ *
+ * @example
+ * ```tsx
+ * <ToolExecutionGroup
+ *   toolCalls={consecutiveToolCalls}
+ *   defaultExpanded={false}
+ * />
+ * ```
+ */
+declare function ToolExecutionGroup({ toolCalls, defaultExpanded, animationDuration, className, }: ToolExecutionGroupProps): 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 */
+    className?: string;
+}
+/**
+ * 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;
+
+/**
+ * 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>;
+}
+/**
+ * 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 */
+    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;
+
+interface TodoPanelProps {
+    /** List of todo items */
+    todos: TodoItem[];
+    /** Optional title for the panel */
+    title?: string;
+    /** Show in compact mode (less padding, smaller text) */
+    compact?: boolean;
+    /** Show progress bar */
+    showProgress?: boolean;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * TodoPanel - Display a list of todos with status indicators
+ *
+ * Features:
+ * - Status icons (pending/in_progress/completed)
+ * - Progress bar showing completion
+ * - Compact mode for inline display
+ * - Animated transitions
+ *
+ * @example
+ * ```tsx
+ * <TodoPanel todos={todos} />
+ * <TodoPanel todos={todos} title="Task Progress" showProgress />
+ * <TodoPanel todos={todos} compact />
+ * ```
+ */
+declare function TodoPanel({ todos, title, compact, showProgress, className, }: TodoPanelProps): react_jsx_runtime.JSX.Element | null;
+
+interface StatusIndicatorProps {
+    status: ToolStatus;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+/**
+ * StatusIndicator - Visual indicator for tool execution status
+ *
+ * Uses the glassmorphism theme with animated states:
+ * - pending: Yellow with pulse animation
+ * - success: Accent color (lime green)
+ * - failed: Red
+ *
+ * @example
+ * ```tsx
+ * <StatusIndicator status="pending" />
+ * <StatusIndicator status="success" size="lg" />
+ * <StatusIndicator status="failed" />
+ * ```
+ */
+declare function StatusIndicator({ status, size, className }: StatusIndicatorProps): react_jsx_runtime.JSX.Element;
+
+interface ActionIconProps {
+    actionType: ActionType;
+    className?: string;
+}
+/**
+ * ActionIcon - Display the appropriate icon for a tool action type
+ *
+ * @example
+ * ```tsx
+ * <ActionIcon actionType={{ action: 'command_run', command: 'ls' }} />
+ * <ActionIcon actionType={{ action: 'file_read', path: '/file.txt' }} className="w-5 h-5" />
+ * ```
+ */
+declare function ActionIcon({ actionType, className }: ActionIconProps): react_jsx_runtime.JSX.Element;
+
+interface CodeBlockProps {
+    children: string;
+    maxHeight?: number;
+    language?: string;
+    showLineNumbers?: boolean;
+    className?: string;
+}
+/**
+ * CodeBlock - Display code with syntax-aware styling and expand/collapse
+ *
+ * Uses glassmorphism dark theme styling with accent-colored expand button.
+ *
+ * @example
+ * ```tsx
+ * <CodeBlock>{`const x = 1;`}</CodeBlock>
+ * <CodeBlock maxHeight={200}>{longCode}</CodeBlock>
+ * <CodeBlock language="typescript" showLineNumbers>{code}</CodeBlock>
+ * ```
+ */
+declare function CodeBlock({ children, maxHeight, language, showLineNumbers, className, }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+interface JsonDisplayProps {
+    value: unknown;
+    maxHeight?: number;
+    className?: string;
+}
+/**
+ * JsonDisplay - Display JSON data in a formatted code block
+ *
+ * @example
+ * ```tsx
+ * <JsonDisplay value={{ name: 'test', count: 42 }} />
+ * <JsonDisplay value={data} maxHeight={300} />
+ * ```
+ */
+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 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;
+
+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 };