@ash-cloud/ash-ui 0.0.4 → 0.0.5

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 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 { NormalizedToolCall, NormalizedEntry, ToolDisplayConfig, WidgetRenderFunction, WidgetAction, 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, WidgetEntry, WidgetRenderProps, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, isWidgetEntry } from './types.cjs';
 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';
@@ -41,6 +41,29 @@ interface MessageListProps {
     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;
     /** Additional class names */
     className?: string;
 }
@@ -64,7 +87,7 @@ interface MessageListProps {
  * <MessageList entries={entries} displayConfig={{ mode: 'compact' }} />
  * ```
  */
-declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
+declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, renderWidget, onWidgetAction, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
 
 interface UserMessageProps {
     entry: NormalizedEntry;
@@ -875,4 +898,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, 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 };
+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, WidgetAction, WidgetRenderFunction, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { NormalizedToolCall, NormalizedEntry, ToolDisplayConfig, LogEntry, ToolDisplayMode, TodoItem, ToolStatus, ActionType } from './types.js';
-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.js';
+import { NormalizedToolCall, NormalizedEntry, ToolDisplayConfig, WidgetRenderFunction, WidgetAction, LogEntry, ToolDisplayMode, TodoItem, ToolStatus, ActionType } from './types.js';
+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, WidgetEntry, WidgetRenderProps, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, isWidgetEntry } from './types.js';
 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';
@@ -41,6 +41,29 @@ interface MessageListProps {
     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;
     /** Additional class names */
     className?: string;
 }
@@ -64,7 +87,7 @@ interface MessageListProps {
  * <MessageList entries={entries} displayConfig={{ mode: 'compact' }} />
  * ```
  */
-declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
+declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, renderWidget, onWidgetAction, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
 
 interface UserMessageProps {
     entry: NormalizedEntry;
@@ -875,4 +898,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, 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 };
+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, WidgetAction, WidgetRenderFunction, useDisplayConfig, useDisplayMode, useFileUpload, useMessageQueue, useStopExecution, useTheme };

package/dist/index.js

@@ -1736,6 +1736,9 @@ function isToolCallEntry(entry) {
 function isErrorEntry(entry) {
   return entry.type === "error";
 }
+function isWidgetEntry(entry) {
+  return entry.type === "widget";
+}
 var DEFAULT_DISPLAY_CONFIG = {
   mode: "inline",
   breakEveryNToolCalls: 0,
@@ -1791,10 +1794,25 @@ function MessageList({
   streamingContent,
   displayConfig: displayConfigProp,
   onOptionSelect,
+  renderWidget,
+  onWidgetAction,
   className
 }) {
   const contextConfig = useDisplayConfig();
   const config = displayConfigProp || contextConfig;
+  const createWidgetActionHandler = useCallback(
+    (entryId, widgetType) => {
+      if (!onWidgetAction) return void 0;
+      return (action) => {
+        onWidgetAction({
+          ...action,
+          entryId,
+          widgetType
+        });
+      };
+    },
+    [onWidgetAction]
+  );
   const groupedEntries = useMemo(() => {
     if (config.mode === "inline") {
       return entries.map((entry) => ({
@@ -1808,7 +1826,20 @@ function MessageList({
   return /* @__PURE__ */ jsxs("div", { className: cn("flex-1 overflow-y-auto p-4 space-y-4 ash-scrollbar", className), children: [
     groupedEntries.map((groupedEntry) => {
       if (groupedEntry.type === "single") {
-        return /* @__PURE__ */ jsx(MessageEntry, { entry: groupedEntry.entry, onOptionSelect }, groupedEntry.entry.id);
+        const entry = groupedEntry.entry;
+        if (entry.entryType.type === "widget" && renderWidget) {
+          const widgetEntry = entry.entryType;
+          const widgetContent = renderWidget({
+            entry,
+            widgetType: widgetEntry.widgetType,
+            widgetData: widgetEntry.widgetData,
+            onAction: createWidgetActionHandler(entry.id, widgetEntry.widgetType)
+          });
+          if (widgetContent !== null) {
+            return /* @__PURE__ */ jsx("div", { className: "ash-animate-fade-in", children: widgetContent }, entry.id);
+          }
+        }
+        return /* @__PURE__ */ jsx(MessageEntry, { entry, onOptionSelect }, entry.id);
       }
       const toolCalls = extractToolCallsFromGroup(groupedEntry.entries);
       return /* @__PURE__ */ jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
@@ -2937,6 +2968,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, DisplayModeToggle, EditIcon, EnvVarsPanel, ErrorIcon, ErrorMessage, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, InfoIcon, JsonDisplay, ListChecksIcon, LoaderIcon, LoadingIndicator, LogsPanel, MessageEntry, MessageList, MessageSquareIcon, MoonIcon, OptionCards, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, SpinnerIcon, StatusIndicator, StepAccordion, 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, ErrorIcon, ErrorMessage, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, InfoIcon, JsonDisplay, ListChecksIcon, LoaderIcon, LoadingIndicator, LogsPanel, MessageEntry, MessageList, MessageSquareIcon, MoonIcon, OptionCards, PaperclipIcon, PlugIcon, SearchIcon, SendIcon, SparklesIcon, SpinnerIcon, StatusIndicator, StepAccordion, 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, isWidgetEntry, 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