@ash-cloud/ash-ui 0.0.8 → 0.1.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { NormalizedToolCall, NormalizedEntry, ToolDisplayConfig, WidgetRenderFunction, WidgetAction, LogEntry, ToolDisplayMode, TodoItem, ToolStatus, ActionType } from './types.cjs';
-export { AgentToolAction, 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, isAgentToolAction, isCommandRunAction, isErrorEntry, isFileEditAction, isFileReadAction, isFileWriteAction, isGenericToolAction, isGlobAction, isMcpToolAction, isSearchAction, isTodoWriteAction, isToolCallEntry, isWebFetchAction, isWebSearchAction, isWidgetEntry } from './types.cjs';
+import { NormalizedToolCall, NormalizedEntry, ToolDisplayConfig, WidgetRenderFunction, WidgetAction, RichContentRenderers, LogEntry, ToolDisplayMode, TodoItem, ToolStatus, ActionType, RichContent } from './types.cjs';
+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.cjs';
 import { ReactNode, DragEvent, ChangeEvent, ClipboardEvent } from 'react';
 import { ParsedOption } from './utils.cjs';
 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.cjs';
@@ -102,6 +102,27 @@ interface MessageListProps {
      * Default: true
      */
     autoScroll?: boolean;
+    /**
+     * Custom renderers for rich content segments.
+     * Used when entries have `richContent` defined.
+     *
+     * @example
+     * ```tsx
+     * <MessageList
+     *   entries={entriesWithRichContent}
+     *   richContentRenderers={{
+     *     renderMention: ({ segment }) => (
+     *       <MentionBadge
+     *         name={segment.name}
+     *         color={segment.color}
+     *         onClick={() => scrollToEntity(segment.id)}
+     *       />
+     *     ),
+     *   }}
+     * />
+     * ```
+     */
+    richContentRenderers?: RichContentRenderers;
     /** Additional class names */
     className?: string;
 }
@@ -125,7 +146,7 @@ interface MessageListProps {
  * <MessageList entries={entries} displayConfig={{ mode: 'compact' }} />
  * ```
  */
-declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, renderWidget, onWidgetAction, autoScroll, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
+declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, renderWidget, onWidgetAction, autoScroll, richContentRenderers, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
 
 interface UserMessageProps {
     entry: NormalizedEntry;
@@ -141,6 +162,8 @@ interface AssistantMessageProps {
     entry: NormalizedEntry;
     /** Callback when user selects an option */
     onOptionSelect?: (optionText: string) => void;
+    /** Custom renderers for rich content segments */
+    richContentRenderers?: RichContentRenderers;
     className?: string;
 }
 /**
@@ -148,8 +171,9 @@ interface AssistantMessageProps {
  *
  * Uses glassmorphism styling with bot avatar and animated entry.
  * 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, className }: AssistantMessageProps): react_jsx_runtime.JSX.Element;
+declare function AssistantMessage({ entry, onOptionSelect, richContentRenderers, className, }: AssistantMessageProps): react_jsx_runtime.JSX.Element;
 interface ThinkingMessageProps {
     entry: NormalizedEntry;
     className?: string;
@@ -187,6 +211,8 @@ interface MessageEntryProps {
     onOptionSelect?: (optionText: string) => void;
     /** Whether tool calls should be expanded by default */
     defaultExpanded?: boolean;
+    /** Custom renderers for rich content segments */
+    richContentRenderers?: RichContentRenderers;
     className?: string;
 }
 /**
@@ -202,7 +228,7 @@ interface MessageEntryProps {
  * ))}
  * ```
  */
-declare function MessageEntry({ entry, onOptionSelect, defaultExpanded, className }: MessageEntryProps): react_jsx_runtime.JSX.Element | null;
+declare function MessageEntry({ entry, onOptionSelect, defaultExpanded, richContentRenderers, className, }: MessageEntryProps): react_jsx_runtime.JSX.Element | null;
 
 interface LogsPanelProps {
     logs: LogEntry[];
@@ -685,6 +711,41 @@ interface LazyMarkdownProps {
  */
 declare function LazyMarkdown({ children, fallback, className }: LazyMarkdownProps): react_jsx_runtime.JSX.Element;
 
+interface RichContentRendererProps {
+    /** Rich content segments to render */
+    content: RichContent;
+    /** Custom renderers for segments */
+    renderers?: RichContentRenderers;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * RichContentRenderer - Renders structured rich content segments
+ *
+ * This is the preferred approach for rendering rich content within messages.
+ * Each segment type can have custom rendering via the `renderers` prop.
+ *
+ * @example
+ * ```tsx
+ * <RichContentRenderer
+ *   content={[
+ *     { type: 'text', content: 'Looking at ' },
+ *     { type: 'mention', name: 'Scene1', color: '#ff0' },
+ *     { type: 'text', content: ' timeline.' },
+ *   ]}
+ *   renderers={{
+ *     renderMention: ({ segment }) => (
+ *       <MentionBadge
+ *         name={segment.name}
+ *         onClick={() => scrollTo(segment.id)}
+ *       />
+ *     ),
+ *   }}
+ * />
+ * ```
+ */
+declare function RichContentRenderer({ content, renderers, className, }: RichContentRendererProps): react_jsx_runtime.JSX.Element;
+
 interface TypewriterTextProps {
     /** Words to cycle through */
     words?: string[];
@@ -1267,4 +1328,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, 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 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 };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { NormalizedToolCall, NormalizedEntry, ToolDisplayConfig, WidgetRenderFunction, WidgetAction, LogEntry, ToolDisplayMode, TodoItem, ToolStatus, ActionType } from './types.js';
-export { AgentToolAction, 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, 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, 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 { 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';
@@ -102,6 +102,27 @@ interface MessageListProps {
      * Default: true
      */
     autoScroll?: boolean;
+    /**
+     * Custom renderers for rich content segments.
+     * Used when entries have `richContent` defined.
+     *
+     * @example
+     * ```tsx
+     * <MessageList
+     *   entries={entriesWithRichContent}
+     *   richContentRenderers={{
+     *     renderMention: ({ segment }) => (
+     *       <MentionBadge
+     *         name={segment.name}
+     *         color={segment.color}
+     *         onClick={() => scrollToEntity(segment.id)}
+     *       />
+     *     ),
+     *   }}
+     * />
+     * ```
+     */
+    richContentRenderers?: RichContentRenderers;
     /** Additional class names */
     className?: string;
 }
@@ -125,7 +146,7 @@ interface MessageListProps {
  * <MessageList entries={entries} displayConfig={{ mode: 'compact' }} />
  * ```
  */
-declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, renderWidget, onWidgetAction, autoScroll, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
+declare function MessageList({ entries, loading, streamingContent, displayConfig: displayConfigProp, onOptionSelect, renderWidget, onWidgetAction, autoScroll, richContentRenderers, className, }: MessageListProps): react_jsx_runtime.JSX.Element;
 
 interface UserMessageProps {
     entry: NormalizedEntry;
@@ -141,6 +162,8 @@ interface AssistantMessageProps {
     entry: NormalizedEntry;
     /** Callback when user selects an option */
     onOptionSelect?: (optionText: string) => void;
+    /** Custom renderers for rich content segments */
+    richContentRenderers?: RichContentRenderers;
     className?: string;
 }
 /**
@@ -148,8 +171,9 @@ interface AssistantMessageProps {
  *
  * Uses glassmorphism styling with bot avatar and animated entry.
  * 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, className }: AssistantMessageProps): react_jsx_runtime.JSX.Element;
+declare function AssistantMessage({ entry, onOptionSelect, richContentRenderers, className, }: AssistantMessageProps): react_jsx_runtime.JSX.Element;
 interface ThinkingMessageProps {
     entry: NormalizedEntry;
     className?: string;
@@ -187,6 +211,8 @@ interface MessageEntryProps {
     onOptionSelect?: (optionText: string) => void;
     /** Whether tool calls should be expanded by default */
     defaultExpanded?: boolean;
+    /** Custom renderers for rich content segments */
+    richContentRenderers?: RichContentRenderers;
     className?: string;
 }
 /**
@@ -202,7 +228,7 @@ interface MessageEntryProps {
  * ))}
  * ```
  */
-declare function MessageEntry({ entry, onOptionSelect, defaultExpanded, className }: MessageEntryProps): react_jsx_runtime.JSX.Element | null;
+declare function MessageEntry({ entry, onOptionSelect, defaultExpanded, richContentRenderers, className, }: MessageEntryProps): react_jsx_runtime.JSX.Element | null;
 
 interface LogsPanelProps {
     logs: LogEntry[];
@@ -685,6 +711,41 @@ interface LazyMarkdownProps {
  */
 declare function LazyMarkdown({ children, fallback, className }: LazyMarkdownProps): react_jsx_runtime.JSX.Element;
 
+interface RichContentRendererProps {
+    /** Rich content segments to render */
+    content: RichContent;
+    /** Custom renderers for segments */
+    renderers?: RichContentRenderers;
+    /** Additional class name */
+    className?: string;
+}
+/**
+ * RichContentRenderer - Renders structured rich content segments
+ *
+ * This is the preferred approach for rendering rich content within messages.
+ * Each segment type can have custom rendering via the `renderers` prop.
+ *
+ * @example
+ * ```tsx
+ * <RichContentRenderer
+ *   content={[
+ *     { type: 'text', content: 'Looking at ' },
+ *     { type: 'mention', name: 'Scene1', color: '#ff0' },
+ *     { type: 'text', content: ' timeline.' },
+ *   ]}
+ *   renderers={{
+ *     renderMention: ({ segment }) => (
+ *       <MentionBadge
+ *         name={segment.name}
+ *         onClick={() => scrollTo(segment.id)}
+ *       />
+ *     ),
+ *   }}
+ * />
+ * ```
+ */
+declare function RichContentRenderer({ content, renderers, className, }: RichContentRendererProps): react_jsx_runtime.JSX.Element;
+
 interface TypewriterTextProps {
     /** Words to cycle through */
     words?: string[];
@@ -1267,4 +1328,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, 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 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 };

package/dist/index.js

@@ -1,5 +1,5 @@
-import { lazy, createContext, useState, useRef, useMemo, useEffect, Suspense, useCallback, useContext } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { lazy, createContext, useState, useRef, useMemo, useEffect, Suspense, Fragment, useCallback, useContext } from 'react';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 
 // src/components/ToolCallCard.tsx
 
@@ -946,12 +946,12 @@ function SectionContent({ children }) {
   return /* @__PURE__ */ jsx("div", { className: "px-3 py-2", children });
 }
 function CommandRunDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    action.command && /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    action.command && /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(SectionHeader, { children: "COMMAND" }),
       /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(CodeBlock, { children: action.command }) })
     ] }),
-    action.result?.output && /* @__PURE__ */ jsxs(Fragment, { children: [
+    action.result?.output && /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(SectionHeader, { children: "OUTPUT" }),
       /* @__PURE__ */ jsxs(SectionContent, { children: [
         /* @__PURE__ */ jsx(CodeBlock, { maxHeight: 300, children: action.result.output }),
@@ -964,7 +964,7 @@ function CommandRunDetails({ action }) {
   ] });
 }
 function FileReadDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(SectionHeader, { children: "PATH" }),
     /* @__PURE__ */ jsxs(SectionContent, { children: [
       /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.path }),
@@ -983,31 +983,31 @@ function FileReadDetails({ action }) {
   ] });
 }
 function FileEditDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(SectionHeader, { children: "PATH" }),
     /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.path }) }),
-    action.oldString && /* @__PURE__ */ jsxs(Fragment, { children: [
+    action.oldString && /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(SectionHeader, { children: "OLD" }),
       /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(CodeBlock, { children: action.oldString }) })
     ] }),
-    action.newString && /* @__PURE__ */ jsxs(Fragment, { children: [
+    action.newString && /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(SectionHeader, { children: "NEW" }),
       /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(CodeBlock, { children: action.newString }) })
     ] })
   ] });
 }
 function FileWriteDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(SectionHeader, { children: "PATH" }),
     /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.path }) }),
-    action.content && /* @__PURE__ */ jsxs(Fragment, { children: [
+    action.content && /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(SectionHeader, { children: "CONTENT" }),
       /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(CodeBlock, { maxHeight: 300, children: action.content }) })
     ] })
   ] });
 }
 function SearchDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(SectionHeader, { children: "PATTERN" }),
     /* @__PURE__ */ jsxs(SectionContent, { children: [
       /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.pattern }),
@@ -1029,7 +1029,7 @@ function SearchDetails({ action }) {
   ] });
 }
 function GlobDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(SectionHeader, { children: "PATTERN" }),
     /* @__PURE__ */ jsxs(SectionContent, { children: [
       /* @__PURE__ */ jsx("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: action.pattern }),
@@ -1041,7 +1041,7 @@ function GlobDetails({ action }) {
   ] });
 }
 function WebFetchDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(SectionHeader, { children: "URL" }),
     /* @__PURE__ */ jsxs(SectionContent, { children: [
       /* @__PURE__ */ jsx(
@@ -1059,36 +1059,36 @@ function WebFetchDetails({ action }) {
   ] });
 }
 function WebSearchDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(SectionHeader, { children: "QUERY" }),
     /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx("span", { className: "text-sm text-white/90", children: action.query }) })
   ] });
 }
 function McpToolDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx(SectionHeader, { children: "TOOL" }),
     /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsxs("code", { className: "text-xs font-mono bg-white/10 text-white/90 px-1 py-0.5 rounded", children: [
       action.serverName,
       ":",
       action.toolName
     ] }) }),
-    action.arguments && /* @__PURE__ */ jsxs(Fragment, { children: [
+    action.arguments && /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(SectionHeader, { children: "ARGS" }),
       /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(JsonDisplay, { value: action.arguments }) })
     ] }),
-    action.result && /* @__PURE__ */ jsxs(Fragment, { children: [
+    action.result && /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(SectionHeader, { children: "RESULT" }),
       /* @__PURE__ */ jsx(SectionContent, { children: action.result.type === "markdown" ? /* @__PURE__ */ jsx(CodeBlock, { children: String(action.result.value) }) : /* @__PURE__ */ jsx(JsonDisplay, { value: action.result.value }) })
     ] })
   ] });
 }
 function GenericToolDetails({ action }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    action.arguments && /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    action.arguments && /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(SectionHeader, { children: "ARGS" }),
       /* @__PURE__ */ jsx(SectionContent, { children: /* @__PURE__ */ jsx(JsonDisplay, { value: action.arguments }) })
     ] }),
-    action.result && /* @__PURE__ */ jsxs(Fragment, { children: [
+    action.result && /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(SectionHeader, { children: "RESULT" }),
       /* @__PURE__ */ jsx(SectionContent, { children: action.result.type === "markdown" ? /* @__PURE__ */ jsx(CodeBlock, { children: String(action.result.value) }) : /* @__PURE__ */ jsx(JsonDisplay, { value: action.result.value }) })
     ] })
@@ -1096,8 +1096,8 @@ function GenericToolDetails({ action }) {
 }
 function TodoWriteDetails({ action }) {
   const { todos, stats } = action;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    stats && /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    stats && /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx(SectionHeader, { children: "PROGRESS" }),
       /* @__PURE__ */ jsxs(SectionContent, { children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
@@ -1313,6 +1313,56 @@ function LazyMarkdown({ children, fallback, className }) {
   }
   return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("span", { className, children: fallback ?? children }), children: /* @__PURE__ */ jsx(ReactMarkdown, { children }) });
 }
+function DefaultMentionBadge({ segment }) {
+  const bgColor = segment.color ? `${segment.color}20` : "rgba(34, 197, 94, 0.2)";
+  const textColor = segment.color || "#22c55e";
+  const borderColor = segment.color ? `${segment.color}40` : "rgba(34, 197, 94, 0.4)";
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium mx-0.5",
+      style: {
+        backgroundColor: bgColor,
+        color: textColor,
+        border: `1px solid ${borderColor}`
+      },
+      title: segment.id ? `ID: ${segment.id}` : void 0,
+      children: [
+        "@",
+        segment.name
+      ]
+    }
+  );
+}
+function RichContentRenderer({
+  content,
+  renderers,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("rich-content", className), children: content.map((segment, index) => {
+    const key = `segment-${index}`;
+    switch (segment.type) {
+      case "text":
+        return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(LazyMarkdown, { children: segment.content }) }, key);
+      case "mention":
+        if (renderers?.renderMention) {
+          return /* @__PURE__ */ jsx(Fragment, { children: renderers.renderMention({ segment }) }, key);
+        }
+        return /* @__PURE__ */ jsx(DefaultMentionBadge, { segment }, key);
+      case "component":
+        if (renderers?.renderComponent) {
+          return /* @__PURE__ */ jsx(Fragment, { children: renderers.renderComponent({ segment }) }, key);
+        }
+        return /* @__PURE__ */ jsxs("code", { className: "text-xs text-orange-400", children: [
+          "[component: ",
+          segment.componentType,
+          "]"
+        ] }, key);
+      default:
+        return null;
+    }
+  }) });
+}
 function OptionCards({ options, onSelect, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("grid gap-2 mt-3", className), style: {
     gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))"
@@ -1397,18 +1447,35 @@ function UserMessage({ entry, className }) {
     /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-white/10 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(UserIcon, { className: "w-4 h-4 text-white/50" }) })
   ] });
 }
-function AssistantMessage({ entry, onOptionSelect, className }) {
-  const parsedOptions = parseOptionsFromContent(entry.content);
+function AssistantMessage({
+  entry,
+  onOptionSelect,
+  richContentRenderers,
+  className
+}) {
+  const parsedOptions = !entry.richContent ? parseOptionsFromContent(entry.content) : null;
   const handleOptionSelect = (option) => {
     if (onOptionSelect) {
       onOptionSelect(`Option ${option.id}: ${option.label}`);
     }
   };
+  const renderContent = (textContent) => {
+    if (entry.richContent && entry.richContent.length > 0) {
+      return /* @__PURE__ */ jsx(
+        RichContentRenderer,
+        {
+          content: entry.richContent,
+          renderers: richContentRenderers
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(LazyMarkdown, { children: textContent || entry.content });
+  };
   return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-3 ash-animate-fade-in", className), children: [
     /* @__PURE__ */ jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex-1 max-w-[85%]", children: [
-      /* @__PURE__ */ jsx("div", { className: "ash-card-glass rounded-2xl p-4", children: /* @__PURE__ */ jsx("div", { className: "ash-message-content prose prose-sm prose-invert max-w-none text-sm leading-relaxed", children: parsedOptions ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        parsedOptions.preamble && /* @__PURE__ */ jsx(LazyMarkdown, { children: parsedOptions.preamble }),
+      /* @__PURE__ */ jsx("div", { className: "ash-card-glass rounded-2xl p-4", children: /* @__PURE__ */ jsx("div", { className: "ash-message-content prose prose-sm prose-invert max-w-none text-sm leading-relaxed", children: parsedOptions ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        parsedOptions.preamble && renderContent(parsedOptions.preamble),
         /* @__PURE__ */ jsx(
           OptionCards,
           {
@@ -1416,7 +1483,7 @@ function AssistantMessage({ entry, onOptionSelect, className }) {
             onSelect: handleOptionSelect
           }
         )
-      ] }) : /* @__PURE__ */ jsx(LazyMarkdown, { children: entry.content }) }) }),
+      ] }) : renderContent() }) }),
       entry.timestamp && /* @__PURE__ */ jsx("div", { className: "text-xs text-white/40 mt-2", children: formatTimestamp(entry.timestamp) })
     ] })
   ] });
@@ -1451,12 +1518,26 @@ function ErrorMessage({ entry, className }) {
     ] }) })
   ] });
 }
-function MessageEntry({ entry, onOptionSelect, defaultExpanded, className }) {
+function MessageEntry({
+  entry,
+  onOptionSelect,
+  defaultExpanded,
+  richContentRenderers,
+  className
+}) {
   switch (entry.entryType.type) {
     case "user_message":
       return /* @__PURE__ */ jsx(UserMessage, { entry, className });
     case "assistant_message":
-      return /* @__PURE__ */ jsx(AssistantMessage, { entry, onOptionSelect, className });
+      return /* @__PURE__ */ jsx(
+        AssistantMessage,
+        {
+          entry,
+          onOptionSelect,
+          richContentRenderers,
+          className
+        }
+      );
     case "thinking":
       return /* @__PURE__ */ jsx(ThinkingMessage, { entry, className });
     case "tool_call":
@@ -2133,6 +2214,7 @@ function MessageList({
   renderWidget,
   onWidgetAction,
   autoScroll = true,
+  richContentRenderers,
   className
 }) {
   const contextConfig = useDisplayConfig();
@@ -2183,7 +2265,16 @@ function MessageList({
             return /* @__PURE__ */ jsx("div", { className: "ash-animate-fade-in", children: widgetContent }, entry.id);
           }
         }
-        return /* @__PURE__ */ jsx(MessageEntry, { entry, onOptionSelect, defaultExpanded: config.defaultExpanded }, entry.id);
+        return /* @__PURE__ */ jsx(
+          MessageEntry,
+          {
+            entry,
+            onOptionSelect,
+            defaultExpanded: config.defaultExpanded,
+            richContentRenderers
+          },
+          entry.id
+        );
       }
       const toolCalls = extractToolCallsFromGroup(groupedEntry.entries);
       return /* @__PURE__ */ jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
@@ -3697,6 +3788,6 @@ function useLongTextConversion({
   };
 }
 
-export { ActionIcon, AgentToolCard, AlertCircleIcon, AlertTriangleIcon, AssistantMessage, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, ClockIcon, CodeBlock, CodeIcon, CompactToolRow, CompactToolStatusLine, CopyIcon, DEFAULT_DISPLAY_CONFIG, DisplayModeProvider, DisplayModeToggle, EditIcon, EnvVarsPanel, ErrorIcon, ErrorMessage, FileBadge, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, InfoIcon, JsonDisplay, LazyMarkdown, 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, formatElapsedTime, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, groupEntriesForCompactMode, inlineStyles, isAgentToolAction, 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, useAgentChat, useDisplayConfig, useDisplayMode, useFileUpload, useLongTextConversion, useMessageQueue, useStopExecution, useTheme, widget, zIndex };
+export { ActionIcon, AgentToolCard, AlertCircleIcon, AlertTriangleIcon, AssistantMessage, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, ClockIcon, CodeBlock, CodeIcon, CompactToolRow, CompactToolStatusLine, CopyIcon, DEFAULT_DISPLAY_CONFIG, DisplayModeProvider, DisplayModeToggle, EditIcon, EnvVarsPanel, ErrorIcon, ErrorMessage, FileBadge, FileIcon, FilePlusIcon, FolderSearchIcon, GlobeIcon, InfoIcon, JsonDisplay, LazyMarkdown, ListChecksIcon, LoaderIcon, LoadingIndicator, LogsPanel, MessageEntry, MessageList, MessageSquareIcon, MoonIcon, OptionCards, PaperclipIcon, PlugIcon, RichContentRenderer, 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, formatElapsedTime, formatFileSize, formatTimestamp, formatToolName, generateToolSummary, getActionIcon, getActionLabel, groupEntriesForCompactMode, inlineStyles, isAgentToolAction, 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, useAgentChat, useDisplayConfig, useDisplayMode, useFileUpload, useLongTextConversion, useMessageQueue, useStopExecution, useTheme, widget, zIndex };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map