@ash-cloud/ash-ui 0.0.2 → 0.0.4

package/dist/index.d.cts

@@ -4,7 +4,7 @@ export { AssistantMessageEntry, CommandRunAction, CommandRunResult, DEFAULT_DISP
 import { ReactNode, DragEvent, ChangeEvent } from 'react';
 import { ParsedOption } from './utils.cjs';
 export { GroupedEntry, ParsedOptionsResult, ToolUseInput, cn, createToolCall, extractTextContent, extractToolCallsFromGroup, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, groupEntriesForCompactMode, mapToolToActionType, normalizeToolResult, parseCommandResult, parseMcpToolName, parseOptionsFromContent, truncate, updateToolCallWithResult } from './utils.cjs';
-export { AlertCircleIcon, AlertTriangleIcon, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeIcon, CopyIcon, EditIcon, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, IconProps, InfoIcon, ListChecksIcon, LoaderIcon, MessageSquareIcon, MoonIcon, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, StopCircleIcon, SunIcon, TerminalIcon, ToolIcon, UserIcon, XCircleIcon, XIcon } from './icons.cjs';
+export { AlertCircleIcon, AlertTriangleIcon, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeIcon, CopyIcon, EditIcon, ErrorIcon, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, IconProps, InfoIcon, ListChecksIcon, LoaderIcon, MessageSquareIcon, MoonIcon, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, SpinnerIcon, StopCircleIcon, SunIcon, TerminalIcon, ToolIcon, UserIcon, XCircleIcon, XIcon } from './icons.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 {
@@ -336,6 +336,118 @@ interface TodoPanelProps {
  */
 declare function TodoPanel({ todos, title, compact, showProgress, className, }: TodoPanelProps): react_jsx_runtime.JSX.Element | null;
 
+interface EnvVarsPanelProps {
+    /** Current environment variables */
+    envVars: Record<string, string>;
+    /** Callback when environment variables change */
+    onChange: (envVars: Record<string, string>) => void;
+    /** Whether the panel is collapsed initially (default: true) */
+    defaultCollapsed?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Label for the panel header */
+    label?: string;
+    /** Helper text shown below the input */
+    helperText?: string;
+}
+/**
+ * EnvVarsPanel - Collapsible panel for managing environment variables
+ *
+ * Provides a UI for adding, viewing, and removing environment variables.
+ * Commonly used to set environment variables for sandbox/agent execution.
+ *
+ * @example
+ * ```tsx
+ * function ChatSettings() {
+ *   const [envVars, setEnvVars] = useState<Record<string, string>>({});
+ *
+ *   return (
+ *     <EnvVarsPanel
+ *       envVars={envVars}
+ *       onChange={setEnvVars}
+ *       helperText="These variables will be available in the sandbox."
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function EnvVarsPanel({ envVars, onChange, defaultCollapsed, className, label, helperText, }: EnvVarsPanelProps): react_jsx_runtime.JSX.Element;
+
+interface DisplayModeToggleProps {
+    /** Additional class name */
+    className?: string;
+    /** Show label text (default: true) */
+    showLabel?: boolean;
+    /** Custom labels for modes */
+    labels?: {
+        inline?: string;
+        compact?: string;
+        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;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * StepAccordion - Simpler accordion that shows tool calls as numbered steps
+ *
+ * Features:
+ * - Collapsed header shows current running step or completion status
+ * - Expanded view shows all steps as a numbered list
+ * - Shows step duration for completed steps
+ * - Compact design suitable for embedding in chat
+ *
+ * @example
+ * ```tsx
+ * <StepAccordion
+ *   toolCalls={normalizedToolCalls}
+ *   defaultExpanded={false}
+ * />
+ * ```
+ */
+declare function StepAccordion({ toolCalls, defaultExpanded, isExpanded: controlledExpanded, onToggle, className, }: StepAccordionProps): react_jsx_runtime.JSX.Element | null;
+
 interface StatusIndicatorProps {
     status: ToolStatus;
     size?: 'sm' | 'md' | 'lg';
@@ -763,4 +875,4 @@ interface UseFileUploadReturn {
 declare function useFileUpload({ maxFileSize, // 100MB
 maxFiles, onValidationError, }?: UseFileUploadOptions): UseFileUploadReturn;
 
-export { ActionIcon, type ActionIconProps, ActionType, AssistantMessage, type AssistantMessageProps, type FileAttachment as ChatFileAttachment, CodeBlock, type CodeBlockProps, CompactToolStatusLine, type CompactToolStatusLineProps, type DisplayModeContextType, DisplayModeProvider, type DisplayModeProviderProps, ErrorMessage, type ErrorMessageProps, JsonDisplay, type JsonDisplayProps, LoadingIndicator, type LoadingIndicatorProps, LogEntry, LogsPanel, type LogsPanelProps, MessageEntry, type MessageEntryProps, MessageList, type MessageListProps, NormalizedEntry, NormalizedToolCall, OptionCards, type OptionCardsProps, ParsedOption, type QueuedMessage, StatusIndicator, type StatusIndicatorProps, StreamingText, type StreamingTextProps, type Theme, type ThemeContextType, ThemeProvider, type ThemeProviderProps, ThinkingMessage, type ThinkingMessageProps, TodoItem, TodoPanel, type TodoPanelProps, ToolCallCard, type ToolCallCardProps, ToolCallMessage, type ToolCallMessageProps, ToolDisplayConfig, ToolDisplayMode, ToolExecutionGroup, type ToolExecutionGroupProps, ToolStatus, TypewriterText, type TypewriterTextProps, type UseFileUploadOptions, type UseFileUploadReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UseStopExecutionOptions, type UseStopExecutionReturn, UserMessage, type UserMessageProps, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme };
+export { ActionIcon, type ActionIconProps, ActionType, AssistantMessage, type AssistantMessageProps, type FileAttachment as ChatFileAttachment, CodeBlock, type CodeBlockProps, CompactToolStatusLine, type CompactToolStatusLineProps, type DisplayModeContextType, DisplayModeProvider, type DisplayModeProviderProps, DisplayModeToggle, type DisplayModeToggleProps, EnvVarsPanel, type EnvVarsPanelProps, ErrorMessage, type ErrorMessageProps, JsonDisplay, type JsonDisplayProps, LoadingIndicator, type LoadingIndicatorProps, LogEntry, LogsPanel, type LogsPanelProps, MessageEntry, type MessageEntryProps, MessageList, type MessageListProps, NormalizedEntry, NormalizedToolCall, OptionCards, type OptionCardsProps, ParsedOption, type QueuedMessage, StatusIndicator, type StatusIndicatorProps, StepAccordion, type StepAccordionProps, type StepStatus, StreamingText, type StreamingTextProps, type Theme, type ThemeContextType, ThemeProvider, type ThemeProviderProps, ThinkingMessage, type ThinkingMessageProps, TodoItem, TodoPanel, type TodoPanelProps, ToolCallCard, type ToolCallCardProps, ToolCallMessage, type ToolCallMessageProps, ToolDisplayConfig, ToolDisplayMode, ToolExecutionGroup, type ToolExecutionGroupProps, ToolStatus, TypewriterText, type TypewriterTextProps, type UseFileUploadOptions, type UseFileUploadReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UseStopExecutionOptions, type UseStopExecutionReturn, UserMessage, type UserMessageProps, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme };

package/dist/index.d.ts

@@ -4,7 +4,7 @@ export { AssistantMessageEntry, CommandRunAction, CommandRunResult, DEFAULT_DISP
 import { ReactNode, DragEvent, ChangeEvent } from 'react';
 import { ParsedOption } from './utils.js';
 export { GroupedEntry, ParsedOptionsResult, ToolUseInput, cn, createToolCall, extractTextContent, extractToolCallsFromGroup, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, groupEntriesForCompactMode, mapToolToActionType, normalizeToolResult, parseCommandResult, parseMcpToolName, parseOptionsFromContent, truncate, updateToolCallWithResult } from './utils.js';
-export { AlertCircleIcon, AlertTriangleIcon, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeIcon, CopyIcon, EditIcon, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, IconProps, InfoIcon, ListChecksIcon, LoaderIcon, MessageSquareIcon, MoonIcon, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, StopCircleIcon, SunIcon, TerminalIcon, ToolIcon, UserIcon, XCircleIcon, XIcon } from './icons.js';
+export { AlertCircleIcon, AlertTriangleIcon, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeIcon, CopyIcon, EditIcon, ErrorIcon, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, IconProps, InfoIcon, ListChecksIcon, LoaderIcon, MessageSquareIcon, MoonIcon, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, SpinnerIcon, StopCircleIcon, SunIcon, TerminalIcon, ToolIcon, UserIcon, XCircleIcon, XIcon } from './icons.js';
 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';
 
 interface ToolCallCardProps {
@@ -336,6 +336,118 @@ interface TodoPanelProps {
  */
 declare function TodoPanel({ todos, title, compact, showProgress, className, }: TodoPanelProps): react_jsx_runtime.JSX.Element | null;
 
+interface EnvVarsPanelProps {
+    /** Current environment variables */
+    envVars: Record<string, string>;
+    /** Callback when environment variables change */
+    onChange: (envVars: Record<string, string>) => void;
+    /** Whether the panel is collapsed initially (default: true) */
+    defaultCollapsed?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Label for the panel header */
+    label?: string;
+    /** Helper text shown below the input */
+    helperText?: string;
+}
+/**
+ * EnvVarsPanel - Collapsible panel for managing environment variables
+ *
+ * Provides a UI for adding, viewing, and removing environment variables.
+ * Commonly used to set environment variables for sandbox/agent execution.
+ *
+ * @example
+ * ```tsx
+ * function ChatSettings() {
+ *   const [envVars, setEnvVars] = useState<Record<string, string>>({});
+ *
+ *   return (
+ *     <EnvVarsPanel
+ *       envVars={envVars}
+ *       onChange={setEnvVars}
+ *       helperText="These variables will be available in the sandbox."
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function EnvVarsPanel({ envVars, onChange, defaultCollapsed, className, label, helperText, }: EnvVarsPanelProps): react_jsx_runtime.JSX.Element;
+
+interface DisplayModeToggleProps {
+    /** Additional class name */
+    className?: string;
+    /** Show label text (default: true) */
+    showLabel?: boolean;
+    /** Custom labels for modes */
+    labels?: {
+        inline?: string;
+        compact?: string;
+        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;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * StepAccordion - Simpler accordion that shows tool calls as numbered steps
+ *
+ * Features:
+ * - Collapsed header shows current running step or completion status
+ * - Expanded view shows all steps as a numbered list
+ * - Shows step duration for completed steps
+ * - Compact design suitable for embedding in chat
+ *
+ * @example
+ * ```tsx
+ * <StepAccordion
+ *   toolCalls={normalizedToolCalls}
+ *   defaultExpanded={false}
+ * />
+ * ```
+ */
+declare function StepAccordion({ toolCalls, defaultExpanded, isExpanded: controlledExpanded, onToggle, className, }: StepAccordionProps): react_jsx_runtime.JSX.Element | null;
+
 interface StatusIndicatorProps {
     status: ToolStatus;
     size?: 'sm' | 'md' | 'lg';
@@ -763,4 +875,4 @@ interface UseFileUploadReturn {
 declare function useFileUpload({ maxFileSize, // 100MB
 maxFiles, onValidationError, }?: UseFileUploadOptions): UseFileUploadReturn;
 
-export { ActionIcon, type ActionIconProps, ActionType, AssistantMessage, type AssistantMessageProps, type FileAttachment as ChatFileAttachment, CodeBlock, type CodeBlockProps, CompactToolStatusLine, type CompactToolStatusLineProps, type DisplayModeContextType, DisplayModeProvider, type DisplayModeProviderProps, ErrorMessage, type ErrorMessageProps, JsonDisplay, type JsonDisplayProps, LoadingIndicator, type LoadingIndicatorProps, LogEntry, LogsPanel, type LogsPanelProps, MessageEntry, type MessageEntryProps, MessageList, type MessageListProps, NormalizedEntry, NormalizedToolCall, OptionCards, type OptionCardsProps, ParsedOption, type QueuedMessage, StatusIndicator, type StatusIndicatorProps, StreamingText, type StreamingTextProps, type Theme, type ThemeContextType, ThemeProvider, type ThemeProviderProps, ThinkingMessage, type ThinkingMessageProps, TodoItem, TodoPanel, type TodoPanelProps, ToolCallCard, type ToolCallCardProps, ToolCallMessage, type ToolCallMessageProps, ToolDisplayConfig, ToolDisplayMode, ToolExecutionGroup, type ToolExecutionGroupProps, ToolStatus, TypewriterText, type TypewriterTextProps, type UseFileUploadOptions, type UseFileUploadReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UseStopExecutionOptions, type UseStopExecutionReturn, UserMessage, type UserMessageProps, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme };
+export { ActionIcon, type ActionIconProps, ActionType, AssistantMessage, type AssistantMessageProps, type FileAttachment as ChatFileAttachment, CodeBlock, type CodeBlockProps, CompactToolStatusLine, type CompactToolStatusLineProps, type DisplayModeContextType, DisplayModeProvider, type DisplayModeProviderProps, DisplayModeToggle, type DisplayModeToggleProps, EnvVarsPanel, type EnvVarsPanelProps, ErrorMessage, type ErrorMessageProps, JsonDisplay, type JsonDisplayProps, LoadingIndicator, type LoadingIndicatorProps, LogEntry, LogsPanel, type LogsPanelProps, MessageEntry, type MessageEntryProps, MessageList, type MessageListProps, NormalizedEntry, NormalizedToolCall, OptionCards, type OptionCardsProps, ParsedOption, type QueuedMessage, StatusIndicator, type StatusIndicatorProps, StepAccordion, type StepAccordionProps, type StepStatus, StreamingText, type StreamingTextProps, type Theme, type ThemeContextType, ThemeProvider, type ThemeProviderProps, ThinkingMessage, type ThinkingMessageProps, TodoItem, TodoPanel, type TodoPanelProps, ToolCallCard, type ToolCallCardProps, ToolCallMessage, type ToolCallMessageProps, ToolDisplayConfig, ToolDisplayMode, ToolExecutionGroup, type ToolExecutionGroupProps, ToolStatus, TypewriterText, type TypewriterTextProps, type UseFileUploadOptions, type UseFileUploadReturn, type UseMessageQueueOptions, type UseMessageQueueReturn, type UseStopExecutionOptions, type UseStopExecutionReturn, UserMessage, type UserMessageProps, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme };