@ash-cloud/ash-ui 0.0.2 → 0.0.3

package/dist/index.d.cts

@@ -336,6 +336,83 @@ interface TodoPanelProps {
  */
 declare function TodoPanel({ todos, title, compact, showProgress, className, }: TodoPanelProps): react_jsx_runtime.JSX.Element | null;
 
+interface EnvVarsPanelProps {
+    /** Current environment variables */
+    envVars: Record<string, string>;
+    /** Callback when environment variables change */
+    onChange: (envVars: Record<string, string>) => void;
+    /** Whether the panel is collapsed initially (default: true) */
+    defaultCollapsed?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Label for the panel header */
+    label?: string;
+    /** Helper text shown below the input */
+    helperText?: string;
+}
+/**
+ * EnvVarsPanel - Collapsible panel for managing environment variables
+ *
+ * Provides a UI for adding, viewing, and removing environment variables.
+ * Commonly used to set environment variables for sandbox/agent execution.
+ *
+ * @example
+ * ```tsx
+ * function ChatSettings() {
+ *   const [envVars, setEnvVars] = useState<Record<string, string>>({});
+ *
+ *   return (
+ *     <EnvVarsPanel
+ *       envVars={envVars}
+ *       onChange={setEnvVars}
+ *       helperText="These variables will be available in the sandbox."
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function EnvVarsPanel({ envVars, onChange, defaultCollapsed, className, label, helperText, }: EnvVarsPanelProps): react_jsx_runtime.JSX.Element;
+
+interface DisplayModeToggleProps {
+    /** Additional class name */
+    className?: string;
+    /** Show label text (default: true) */
+    showLabel?: boolean;
+    /** Custom labels for modes */
+    labels?: {
+        inline?: string;
+        compact?: string;
+    };
+}
+/**
+ * DisplayModeToggle - Button to toggle between inline and compact display modes
+ *
+ * Uses the DisplayModeContext to toggle between 'inline' and 'compact' modes.
+ * Must be used within a DisplayModeProvider.
+ *
+ * @example
+ * ```tsx
+ * function ChatHeader() {
+ *   return (
+ *     <header>
+ *       <h1>Chat</h1>
+ *       <DisplayModeToggle />
+ *     </header>
+ *   );
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <DisplayModeProvider>
+ *       <ChatHeader />
+ *       <MessageList entries={entries} />
+ *     </DisplayModeProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function DisplayModeToggle({ className, showLabel, labels, }: DisplayModeToggleProps): react_jsx_runtime.JSX.Element;
+
 interface StatusIndicatorProps {
     status: ToolStatus;
     size?: 'sm' | 'md' | 'lg';
@@ -763,4 +840,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, 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

@@ -336,6 +336,83 @@ interface TodoPanelProps {
  */
 declare function TodoPanel({ todos, title, compact, showProgress, className, }: TodoPanelProps): react_jsx_runtime.JSX.Element | null;
 
+interface EnvVarsPanelProps {
+    /** Current environment variables */
+    envVars: Record<string, string>;
+    /** Callback when environment variables change */
+    onChange: (envVars: Record<string, string>) => void;
+    /** Whether the panel is collapsed initially (default: true) */
+    defaultCollapsed?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Label for the panel header */
+    label?: string;
+    /** Helper text shown below the input */
+    helperText?: string;
+}
+/**
+ * EnvVarsPanel - Collapsible panel for managing environment variables
+ *
+ * Provides a UI for adding, viewing, and removing environment variables.
+ * Commonly used to set environment variables for sandbox/agent execution.
+ *
+ * @example
+ * ```tsx
+ * function ChatSettings() {
+ *   const [envVars, setEnvVars] = useState<Record<string, string>>({});
+ *
+ *   return (
+ *     <EnvVarsPanel
+ *       envVars={envVars}
+ *       onChange={setEnvVars}
+ *       helperText="These variables will be available in the sandbox."
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function EnvVarsPanel({ envVars, onChange, defaultCollapsed, className, label, helperText, }: EnvVarsPanelProps): react_jsx_runtime.JSX.Element;
+
+interface DisplayModeToggleProps {
+    /** Additional class name */
+    className?: string;
+    /** Show label text (default: true) */
+    showLabel?: boolean;
+    /** Custom labels for modes */
+    labels?: {
+        inline?: string;
+        compact?: string;
+    };
+}
+/**
+ * DisplayModeToggle - Button to toggle between inline and compact display modes
+ *
+ * Uses the DisplayModeContext to toggle between 'inline' and 'compact' modes.
+ * Must be used within a DisplayModeProvider.
+ *
+ * @example
+ * ```tsx
+ * function ChatHeader() {
+ *   return (
+ *     <header>
+ *       <h1>Chat</h1>
+ *       <DisplayModeToggle />
+ *     </header>
+ *   );
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <DisplayModeProvider>
+ *       <ChatHeader />
+ *       <MessageList entries={entries} />
+ *     </DisplayModeProvider>
+ *   );
+ * }
+ * ```
+ */
+declare function DisplayModeToggle({ className, showLabel, labels, }: DisplayModeToggleProps): react_jsx_runtime.JSX.Element;
+
 interface StatusIndicatorProps {
     status: ToolStatus;
     size?: 'sm' | 'md' | 'lg';
@@ -763,4 +840,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, 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.js

@@ -1924,6 +1924,203 @@ function TodoPanel({
     }
   );
 }
+function EnvVarsPanel({
+  envVars,
+  onChange,
+  defaultCollapsed = true,
+  className,
+  label = "Environment Variables",
+  helperText = "These environment variables will be available in the sandbox for new sessions."
+}) {
+  const [expanded, setExpanded] = useState(!defaultCollapsed);
+  const [newEnvKey, setNewEnvKey] = useState("");
+  const [newEnvValue, setNewEnvValue] = useState("");
+  const hasEnvVars = Object.keys(envVars).length > 0;
+  const handleAddEnvVar = useCallback(() => {
+    const key = newEnvKey.trim();
+    const val = newEnvValue.trim();
+    if (key) {
+      onChange({ ...envVars, [key]: val });
+      setNewEnvKey("");
+      setNewEnvValue("");
+    }
+  }, [envVars, newEnvKey, newEnvValue, onChange]);
+  const handleRemoveEnvVar = useCallback(
+    (key) => {
+      const newEnvVars = { ...envVars };
+      delete newEnvVars[key];
+      onChange(newEnvVars);
+    },
+    [envVars, onChange]
+  );
+  const handleEnvKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleAddEnvVar();
+      }
+    },
+    [handleAddEnvVar]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: cn("ash-env-vars-panel", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded(!expanded),
+        className: "ash-env-vars-header",
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              xmlns: "http://www.w3.org/2000/svg",
+              className: cn("ash-env-vars-chevron", expanded && "ash-env-vars-chevron-expanded"),
+              viewBox: "0 0 20 20",
+              fill: "currentColor",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  fillRule: "evenodd",
+                  d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
+                  clipRule: "evenodd"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "ash-env-vars-label", children: label }),
+          hasEnvVars && !expanded && /* @__PURE__ */ jsx("span", { className: "ash-env-vars-badge", children: Object.keys(envVars).length })
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxs("div", { className: "ash-env-vars-content", children: [
+      Object.entries(envVars).map(([key, val]) => /* @__PURE__ */ jsxs("div", { className: "ash-env-vars-item", children: [
+        /* @__PURE__ */ jsx("span", { className: "ash-env-vars-key", children: key }),
+        /* @__PURE__ */ jsx("span", { className: "ash-env-vars-equals", children: "=" }),
+        /* @__PURE__ */ jsx("span", { className: "ash-env-vars-value", children: val || "(empty)" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleRemoveEnvVar(key),
+            className: "ash-env-vars-remove",
+            title: "Remove variable",
+            children: /* @__PURE__ */ jsx(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                className: "w-4 h-4",
+                viewBox: "0 0 20 20",
+                fill: "currentColor",
+                children: /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    fillRule: "evenodd",
+                    d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z",
+                    clipRule: "evenodd"
+                  }
+                )
+              }
+            )
+          }
+        )
+      ] }, key)),
+      /* @__PURE__ */ jsxs("div", { className: "ash-env-vars-add", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: newEnvKey,
+            onChange: (e) => setNewEnvKey(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, "")),
+            onKeyDown: handleEnvKeyDown,
+            placeholder: "KEY",
+            className: "ash-env-vars-input ash-env-vars-input-key"
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "ash-env-vars-equals", children: "=" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value: newEnvValue,
+            onChange: (e) => setNewEnvValue(e.target.value),
+            onKeyDown: handleEnvKeyDown,
+            placeholder: "value",
+            className: "ash-env-vars-input ash-env-vars-input-value"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleAddEnvVar,
+            disabled: !newEnvKey.trim(),
+            className: "ash-env-vars-add-button",
+            children: "Add"
+          }
+        )
+      ] }),
+      helperText && /* @__PURE__ */ jsx("p", { className: "ash-env-vars-helper", children: helperText })
+    ] })
+  ] });
+}
+function DisplayModeToggle({
+  className,
+  showLabel = true,
+  labels = { inline: "Inline", compact: "Compact" }
+}) {
+  const { config, toggleMode } = useDisplayMode();
+  const isInline = config.mode === "inline";
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: toggleMode,
+      className: cn("ash-display-mode-toggle", className),
+      title: isInline ? "Switch to compact mode" : "Switch to inline mode",
+      children: isInline ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "ash-display-mode-icon",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+              }
+            )
+          }
+        ),
+        showLabel && /* @__PURE__ */ jsx("span", { className: "ash-display-mode-label", children: labels.inline })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "ash-display-mode-icon",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25"
+              }
+            )
+          }
+        ),
+        showLabel && /* @__PURE__ */ jsx("span", { className: "ash-display-mode-label", children: labels.compact })
+      ] })
+    }
+  );
+}
 var DEFAULT_WORDS = [
   "Thinking",
   "Reasoning",
@@ -2532,6 +2729,6 @@ function useFileUpload({
   };
 }
 
-export { ActionIcon, AlertCircleIcon, AlertTriangleIcon, AssistantMessage, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeBlock, CodeIcon, CompactToolStatusLine, CopyIcon, DEFAULT_DISPLAY_CONFIG, DisplayModeProvider, EditIcon, ErrorMessage, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, InfoIcon, JsonDisplay, ListChecksIcon, LoaderIcon, LoadingIndicator, LogsPanel, MessageEntry, MessageList, MessageSquareIcon, MoonIcon, OptionCards, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, StatusIndicator, StopCircleIcon, StreamingText, SunIcon, TerminalIcon, ThemeProvider, ThinkingMessage, TodoPanel, ToolCallCard, ToolCallMessage, ToolExecutionGroup, ToolIcon, TypewriterText, UserIcon, UserMessage, XCircleIcon, XIcon, allKeyframesCss, borderRadius, cn, colors, createToolCall, extractTextContent, extractToolCallsFromGroup, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, groupEntriesForCompactMode, inlineStyles, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, keyframes, keyframesCss, mapToolToActionType, normalizeToolResult, parseCommandResult, parseMcpToolName, parseOptionsFromContent, shadows, spacing, tokensToCssVariables, transitions, truncate, typography, updateToolCallWithResult, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme, widget, zIndex };
+export { ActionIcon, AlertCircleIcon, AlertTriangleIcon, AssistantMessage, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeBlock, CodeIcon, CompactToolStatusLine, CopyIcon, DEFAULT_DISPLAY_CONFIG, DisplayModeProvider, DisplayModeToggle, EditIcon, EnvVarsPanel, ErrorMessage, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, InfoIcon, JsonDisplay, ListChecksIcon, LoaderIcon, LoadingIndicator, LogsPanel, MessageEntry, MessageList, MessageSquareIcon, MoonIcon, OptionCards, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, StatusIndicator, StopCircleIcon, StreamingText, SunIcon, TerminalIcon, ThemeProvider, ThinkingMessage, TodoPanel, ToolCallCard, ToolCallMessage, ToolExecutionGroup, ToolIcon, TypewriterText, UserIcon, UserMessage, XCircleIcon, XIcon, allKeyframesCss, borderRadius, cn, colors, createToolCall, extractTextContent, extractToolCallsFromGroup, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, groupEntriesForCompactMode, inlineStyles, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, keyframes, keyframesCss, mapToolToActionType, normalizeToolResult, parseCommandResult, parseMcpToolName, parseOptionsFromContent, shadows, spacing, tokensToCssVariables, transitions, truncate, typography, updateToolCallWithResult, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme, widget, zIndex };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map