@ash-cloud/ash-ui 0.0.7 → 0.0.8

package/dist/index.js

@@ -1,6 +1,5 @@
-import { createContext, useState, useMemo, useCallback, useContext, useRef, useEffect } from 'react';
+import { lazy, createContext, useState, useRef, useMemo, useEffect, Suspense, useCallback, useContext } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import ReactMarkdown from 'react-markdown';
 
 // src/components/ToolCallCard.tsx
 
@@ -109,6 +108,16 @@ function mapToolToActionType(toolName, input) {
         stats
       };
     }
+    case "Task": {
+      return {
+        action: "agent_tool",
+        agentType: inputObj.subagent_type || "general-purpose",
+        description: inputObj.description || "",
+        prompt: inputObj.prompt,
+        startedAt: (/* @__PURE__ */ new Date()).toISOString(),
+        toolCallCount: 0
+      };
+    }
     default: {
       const mcpParts = parseMcpToolName(toolName);
       if (mcpParts) {
@@ -158,6 +167,8 @@ function generateToolSummary(_toolName, _input, actionType) {
       }
       return `${actionType.todos.length} tasks`;
     }
+    case "agent_tool":
+      return actionType.description;
     default:
       return "Unknown tool";
   }
@@ -225,6 +236,7 @@ function createToolCall(toolUse) {
     actionType,
     status: "pending",
     summary,
+    input: toolUse.input,
     startedAt: (/* @__PURE__ */ new Date()).toISOString()
   };
 }
@@ -234,6 +246,7 @@ function updateToolCallWithResult(toolCall, content, isError) {
   updatedToolCall.status = isError ? "failed" : "success";
   updatedToolCall.completedAt = (/* @__PURE__ */ new Date()).toISOString();
   updatedToolCall.isError = isError;
+  updatedToolCall.output = content;
   if (actionType.action === "command_run") {
     const result = parseCommandResult(content);
     actionType.result = result;
@@ -271,6 +284,8 @@ function getActionIcon(actionType) {
       return "tool";
     case "todo_write":
       return "list-checks";
+    case "agent_tool":
+      return "bot";
     default:
       return "tool";
   }
@@ -299,6 +314,8 @@ function getActionLabel(actionType) {
       return "Tool";
     case "todo_write":
       return "Tasks";
+    case "agent_tool":
+      return actionType.agentType;
     default:
       return "Tool";
   }
@@ -321,6 +338,21 @@ function formatTimestamp(timestamp) {
     return timestamp;
   }
 }
+function formatElapsedTime(startTime, endTime) {
+  const start = typeof startTime === "string" ? new Date(startTime) : startTime;
+  const end = endTime ? typeof endTime === "string" ? new Date(endTime) : endTime : /* @__PURE__ */ new Date();
+  const elapsedMs = end.getTime() - start.getTime();
+  const elapsedSeconds = Math.floor(elapsedMs / 1e3);
+  if (elapsedSeconds < 60) {
+    return `${elapsedSeconds}s`;
+  }
+  const minutes = Math.floor(elapsedSeconds / 60);
+  const seconds = elapsedSeconds % 60;
+  if (seconds === 0) {
+    return `${minutes}m`;
+  }
+  return `${minutes}m ${seconds}s`;
+}
 function truncate(str, maxLength) {
   if (str.length <= maxLength) return str;
   return str.substring(0, maxLength - 3) + "...";
@@ -644,6 +676,12 @@ function ClipboardListIcon({ className }) {
     /* @__PURE__ */ jsx("path", { d: "M8 16h.01" })
   ] });
 }
+function ClockIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("polyline", { points: "12 6 12 12 16 14" })
+  ] });
+}
 function SpinnerIcon({ className }) {
   return /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
 }
@@ -699,6 +737,8 @@ function ActionIcon({ actionType, className = "w-4 h-4" }) {
       return /* @__PURE__ */ jsx(PlugIcon, { className });
     case "todo_write":
       return /* @__PURE__ */ jsx(ListChecksIcon, { className });
+    case "agent_tool":
+      return /* @__PURE__ */ jsx(BotIcon, { className });
     case "generic_tool":
     default:
       return /* @__PURE__ */ jsx(ToolIcon, { className });
@@ -752,6 +792,153 @@ function JsonDisplay({ value, maxHeight, className }) {
   const formatted = JSON.stringify(value, null, 2);
   return /* @__PURE__ */ jsx(CodeBlock, { maxHeight, className, children: formatted });
 }
+function AgentToolCard({
+  toolCall,
+  defaultExpanded = false,
+  className,
+  depth = 0
+}) {
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const [elapsedTime, setElapsedTime] = useState("");
+  const intervalRef = useRef(null);
+  const { actionType, status, summary, nestedToolCalls, nestedToolCallCount, startedAt } = toolCall;
+  const agentData = useMemo(() => {
+    if (actionType.action !== "agent_tool") {
+      return null;
+    }
+    const agentAction = actionType;
+    return {
+      agentType: agentAction.agentType,
+      description: agentAction.description,
+      prompt: agentAction.prompt
+    };
+  }, [actionType]);
+  const toolCount = nestedToolCallCount ?? nestedToolCalls?.length ?? 0;
+  const isRunning = status === "pending";
+  useEffect(() => {
+    if (isRunning && startedAt) {
+      setElapsedTime(formatElapsedTime(startedAt));
+      intervalRef.current = setInterval(() => {
+        setElapsedTime(formatElapsedTime(startedAt));
+      }, 1e3);
+      return () => {
+        if (intervalRef.current) {
+          clearInterval(intervalRef.current);
+          intervalRef.current = null;
+        }
+      };
+    } else if (!isRunning) {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+      setElapsedTime("");
+    }
+    return void 0;
+  }, [isRunning, startedAt]);
+  if (!agentData) {
+    return null;
+  }
+  const { agentType, description, prompt } = agentData;
+  const indentClass = depth > 0 ? "ml-4" : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border bg-[var(--ash-surface-dark,#0a0a0a)] overflow-hidden",
+        isRunning ? "border-yellow-500/30" : status === "failed" ? "border-red-500/30" : "border-white/10",
+        indentClass,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setExpanded(!expanded),
+            className: "w-full px-4 py-3 flex items-center gap-3 hover:bg-white/5 cursor-pointer transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(
+                ChevronRightIcon,
+                {
+                  className: cn(
+                    "w-4 h-4 text-white/40 transition-transform duration-200 shrink-0",
+                    expanded && "rotate-90"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "w-6 h-6 rounded-lg flex items-center justify-center shrink-0",
+                    isRunning ? "bg-yellow-500/20" : status === "failed" ? "bg-red-500/20" : "bg-[var(--ash-accent)]/20"
+                  ),
+                  children: isRunning ? /* @__PURE__ */ jsx(
+                    SpinnerIcon,
+                    {
+                      className: "w-3.5 h-3.5 text-yellow-400 animate-spin"
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    BotIcon,
+                    {
+                      className: cn(
+                        "w-3.5 h-3.5",
+                        status === "failed" ? "text-red-400" : "text-[var(--ash-accent)]"
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "px-2 py-0.5 rounded text-xs font-medium shrink-0",
+                    isRunning ? "bg-yellow-500/20 text-yellow-400" : status === "failed" ? "bg-red-500/20 text-red-400" : "bg-white/10 text-white/70"
+                  ),
+                  children: agentType
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-sm text-white/80 truncate flex-1 text-left", children: description || summary }),
+              toolCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-xs text-white/50 shrink-0", children: [
+                toolCount,
+                " tool call",
+                toolCount !== 1 ? "s" : ""
+              ] }),
+              isRunning && elapsedTime && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-xs text-white/40 shrink-0", children: [
+                /* @__PURE__ */ jsx(ClockIcon, { className: "w-3 h-3" }),
+                /* @__PURE__ */ jsx("span", { children: elapsedTime })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "text-white/30 shrink-0", children: "..." })
+            ]
+          }
+        ),
+        expanded && /* @__PURE__ */ jsxs("div", { className: "border-t border-white/5 bg-black/20", children: [
+          prompt && /* @__PURE__ */ jsx("div", { className: "px-4 py-3 border-b border-white/5", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-white/70 whitespace-pre-wrap", children: prompt.length > 500 ? prompt.substring(0, 500) + "..." : prompt }) }),
+          nestedToolCalls && nestedToolCalls.length > 0 && /* @__PURE__ */ jsx("div", { className: "p-3 space-y-2", children: nestedToolCalls.map((nestedCall) => /* @__PURE__ */ jsx("div", { children: nestedCall.actionType.action === "agent_tool" ? /* @__PURE__ */ jsx(
+            AgentToolCard,
+            {
+              toolCall: nestedCall,
+              defaultExpanded: false,
+              depth: depth + 1
+            }
+          ) : /* @__PURE__ */ jsx(
+            ToolCallCard,
+            {
+              toolCall: nestedCall,
+              defaultExpanded: false
+            }
+          ) }, nestedCall.id)) }),
+          (!nestedToolCalls || nestedToolCalls.length === 0) && isRunning && /* @__PURE__ */ jsx("div", { className: "px-4 py-6 flex items-center justify-center", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-white/40", children: [
+            /* @__PURE__ */ jsx(SpinnerIcon, { className: "w-4 h-4 animate-spin" }),
+            /* @__PURE__ */ jsx("span", { children: "Agent is working..." })
+          ] }) }),
+          (!nestedToolCalls || nestedToolCalls.length === 0) && !isRunning && /* @__PURE__ */ jsx("div", { className: "px-4 py-4 text-sm text-white/40 text-center", children: "No tool calls recorded" })
+        ] })
+      ]
+    }
+  );
+}
 function SectionHeader({ children }) {
   return /* @__PURE__ */ jsx("div", { className: "ash-tool-section-header", children });
 }
@@ -1027,6 +1214,9 @@ function hasDetails(actionType) {
       return Boolean(actionType.arguments || actionType.result);
     case "todo_write":
       return actionType.todos.length > 0;
+    case "agent_tool":
+      return true;
+    // Always expandable (handled by AgentToolCard)
     default:
       return false;
   }
@@ -1034,6 +1224,16 @@ function hasDetails(actionType) {
 function ToolCallCard({ toolCall, defaultExpanded = false, className }) {
   const [expanded, setExpanded] = useState(defaultExpanded);
   const { actionType, status, summary } = toolCall;
+  if (actionType.action === "agent_tool") {
+    return /* @__PURE__ */ jsx(
+      AgentToolCard,
+      {
+        toolCall,
+        defaultExpanded,
+        className
+      }
+    );
+  }
   const canExpand = hasDetails(actionType);
   const statusClasses = {
     pending: "border-yellow-500/30 ash-tool-status-pending",
@@ -1102,6 +1302,17 @@ function ToolCallCard({ toolCall, defaultExpanded = false, className }) {
     }
   );
 }
+var ReactMarkdown = lazy(() => import('react-markdown'));
+function LazyMarkdown({ children, fallback, className }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return /* @__PURE__ */ jsx("span", { className, children: fallback ?? children });
+  }
+  return /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx("span", { className, children: fallback ?? children }), children: /* @__PURE__ */ jsx(ReactMarkdown, { children }) });
+}
 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))"
@@ -1197,7 +1408,7 @@ function AssistantMessage({ entry, onOptionSelect, className }) {
     /* @__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(ReactMarkdown, { children: parsedOptions.preamble }),
+        parsedOptions.preamble && /* @__PURE__ */ jsx(LazyMarkdown, { children: parsedOptions.preamble }),
         /* @__PURE__ */ jsx(
           OptionCards,
           {
@@ -1205,7 +1416,7 @@ function AssistantMessage({ entry, onOptionSelect, className }) {
             onSelect: handleOptionSelect
           }
         )
-      ] }) : /* @__PURE__ */ jsx(ReactMarkdown, { children: entry.content }) }) }),
+      ] }) : /* @__PURE__ */ jsx(LazyMarkdown, { children: entry.content }) }) }),
       entry.timestamp && /* @__PURE__ */ jsx("div", { className: "text-xs text-white/40 mt-2", children: formatTimestamp(entry.timestamp) })
     ] })
   ] });
@@ -1240,7 +1451,7 @@ function ErrorMessage({ entry, className }) {
     ] }) })
   ] });
 }
-function MessageEntry({ entry, onOptionSelect, className }) {
+function MessageEntry({ entry, onOptionSelect, defaultExpanded, className }) {
   switch (entry.entryType.type) {
     case "user_message":
       return /* @__PURE__ */ jsx(UserMessage, { entry, className });
@@ -1249,7 +1460,7 @@ function MessageEntry({ entry, onOptionSelect, className }) {
     case "thinking":
       return /* @__PURE__ */ jsx(ThinkingMessage, { entry, className });
     case "tool_call":
-      return /* @__PURE__ */ jsx(ToolCallMessage, { entry, className });
+      return /* @__PURE__ */ jsx(ToolCallMessage, { entry, defaultExpanded, className });
     case "error":
       return /* @__PURE__ */ jsx(ErrorMessage, { entry, className });
     default:
@@ -1311,7 +1522,7 @@ function StreamingText({
   className
 }) {
   return /* @__PURE__ */ jsx("div", { className: cn("relative", className), children: renderMarkdown ? /* @__PURE__ */ jsxs("div", { className: "ash-message-content prose prose-sm prose-invert max-w-none text-sm leading-relaxed", children: [
-    /* @__PURE__ */ jsx(ReactMarkdown, { children: content }),
+    /* @__PURE__ */ jsx(LazyMarkdown, { children: content }),
     isStreaming && /* @__PURE__ */ jsx(LoadingIndicator, { variant: "cursor", size: "sm", className: "inline-block ml-0.5" })
   ] }) : /* @__PURE__ */ jsxs("p", { className: "whitespace-pre-wrap text-sm leading-relaxed", children: [
     content,
@@ -1852,6 +2063,9 @@ function isGenericToolAction(action) {
 function isTodoWriteAction(action) {
   return action.action === "todo_write";
 }
+function isAgentToolAction(action) {
+  return action.action === "agent_tool";
+}
 function isToolCallEntry(entry) {
   return entry.type === "tool_call";
 }
@@ -1969,7 +2183,7 @@ function MessageList({
             return /* @__PURE__ */ jsx("div", { className: "ash-animate-fade-in", children: widgetContent }, entry.id);
           }
         }
-        return /* @__PURE__ */ jsx(MessageEntry, { entry, onOptionSelect }, entry.id);
+        return /* @__PURE__ */ jsx(MessageEntry, { entry, onOptionSelect, defaultExpanded: config.defaultExpanded }, entry.id);
       }
       const toolCalls = extractToolCallsFromGroup(groupedEntry.entries);
       return /* @__PURE__ */ jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
@@ -3292,6 +3506,24 @@ function useAgentChat(options) {
           }
         }
         break;
+      case "text":
+        if (event.text && !currentTextRef.current) {
+          currentTextIdRef.current = `text-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+          currentTextRef.current = event.text;
+          newEntries.push(createTextEntry(currentTextIdRef.current, currentTextRef.current));
+        }
+        break;
+      case "message":
+        if (event.content && !currentTextRef.current) {
+          const messageContent = event.content;
+          const textBlock = messageContent?.find((c) => c.type === "text");
+          if (textBlock?.text) {
+            currentTextIdRef.current = `text-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+            currentTextRef.current = textBlock.text;
+            newEntries.push(createTextEntry(currentTextIdRef.current, currentTextRef.current));
+          }
+        }
+        break;
       case "sandbox_log":
         if (event.entry) {
           onSandboxLog?.(event.entry);
@@ -3337,7 +3569,7 @@ function useAgentChat(options) {
     abortControllerRef.current = controller;
     let localStreamingEntries = [];
     try {
-      const stream = createStream(prompt, sessionId || void 0);
+      const stream = createStream(prompt, sessionId || void 0, controller.signal);
       for await (const event of stream) {
         if (controller.signal.aborted) break;
         localStreamingEntries = processEvent(event, localStreamingEntries);
@@ -3465,6 +3697,6 @@ function useLongTextConversion({
   };
 }
 
-export { ActionIcon, AlertCircleIcon, AlertTriangleIcon, AssistantMessage, BotIcon, BrainIcon, BugIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CircleIcon, ClipboardListIcon, CodeBlock, CodeIcon, CompactToolRow, CompactToolStatusLine, CopyIcon, DEFAULT_DISPLAY_CONFIG, DisplayModeProvider, DisplayModeToggle, EditIcon, EnvVarsPanel, ErrorIcon, ErrorMessage, FileBadge, 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, 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, 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