@ash-cloud/ash-ui 0.0.3 → 0.0.5

package/dist/index.cjs

@@ -636,6 +636,16 @@ function ClipboardListIcon({ className }) {
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 16h.01" })
   ] });
 }
+function SpinnerIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+}
+function ErrorIcon({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+    /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+  ] });
+}
 function StatusIndicator({ status, size = "sm", className }) {
   const sizeClasses = {
     sm: "w-2 h-2",
@@ -1534,6 +1544,163 @@ function ToolExecutionGroup({
     }
   );
 }
+function formatDuration(startMs, endMs) {
+  const duration = endMs - startMs;
+  if (duration < 1e3) return `${duration}ms`;
+  return `${(duration / 1e3).toFixed(1)}s`;
+}
+function getToolLabel(toolName, summary) {
+  if (summary && summary.length > 0 && summary.length < 50) {
+    return summary;
+  }
+  const cleaned = toolName.replace(/^mcp__[^_]+__/, "").replace(/Tool$/, "").replace(/_/g, " ").replace(/([a-z])([A-Z])/g, "$1 $2");
+  return cleaned.charAt(0).toUpperCase() + cleaned.slice(1);
+}
+function toStepStatus(status) {
+  switch (status) {
+    case "pending":
+      return "running";
+    case "success":
+      return "success";
+    case "failed":
+      return "error";
+    default:
+      return "pending";
+  }
+}
+function StepIcon({ status }) {
+  const iconClass = "w-3.5 h-3.5";
+  switch (status) {
+    case "running":
+      return /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: cn(iconClass, "animate-spin text-[var(--ash-accent)]") });
+    case "success":
+      return /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: cn(iconClass, "text-[var(--ash-accent)]") });
+    case "error":
+      return /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, { className: cn(iconClass, "text-red-500") });
+    default:
+      return /* @__PURE__ */ jsxRuntime.jsx(ToolIcon, { className: cn(iconClass, "text-white/40") });
+  }
+}
+function StepAccordion({
+  toolCalls,
+  defaultExpanded = false,
+  isExpanded: controlledExpanded,
+  onToggle,
+  className
+}) {
+  const [internalExpanded, setInternalExpanded] = react.useState(defaultExpanded);
+  const isExpanded = controlledExpanded !== void 0 ? controlledExpanded : internalExpanded;
+  const handleToggle = react.useCallback(() => {
+    if (onToggle) {
+      onToggle();
+    } else {
+      setInternalExpanded((prev) => !prev);
+    }
+  }, [onToggle]);
+  if (toolCalls.length === 0) {
+    return null;
+  }
+  const completedSteps = toolCalls.filter((tc) => tc.status === "success" || tc.status === "failed").length;
+  const runningStep = toolCalls.find((tc) => tc.status === "pending");
+  const hasError = toolCalls.some((tc) => tc.status === "failed");
+  const allComplete = completedSteps === toolCalls.length;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border overflow-hidden",
+        hasError ? "border-red-500/30" : allComplete ? "border-[var(--ash-accent)]/30" : "border-yellow-500/30",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleToggle,
+            className: "w-full flex items-center gap-2 px-3 py-2 bg-white/5 hover:bg-white/10 transition-colors text-left cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ChevronDownIcon,
+                {
+                  className: cn(
+                    "w-4 h-4 text-white/40 transition-transform duration-200 flex-shrink-0",
+                    !isExpanded && "-rotate-90"
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-w-0 flex items-center gap-2", children: runningStep ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { className: "w-3.5 h-3.5 animate-spin text-[var(--ash-accent)] flex-shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-white/80 truncate", children: getToolLabel(runningStep.toolName, runningStep.summary) })
+              ] }) : hasError ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, { className: "w-3.5 h-3.5 text-red-500 flex-shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-red-400 truncate", children: "Completed with errors" })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { className: "w-3.5 h-3.5 text-[var(--ash-accent)] flex-shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm text-white/70 truncate", children: [
+                  completedSteps,
+                  " step",
+                  completedSteps !== 1 ? "s" : "",
+                  " completed"
+                ] })
+              ] }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs px-1.5 py-0.5 rounded-full bg-white/10 text-white/50 flex-shrink-0", children: [
+                completedSteps,
+                "/",
+                toolCalls.length
+              ] })
+            ]
+          }
+        ),
+        isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-white/10 ash-accordion-content", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "divide-y divide-white/5", children: toolCalls.map((toolCall, index) => {
+          const stepStatus = toStepStatus(toolCall.status);
+          const startTime = toolCall.startedAt ? new Date(toolCall.startedAt).getTime() : 0;
+          const endTime = toolCall.completedAt ? new Date(toolCall.completedAt).getTime() : 0;
+          const hasDuration = startTime > 0 && endTime > 0;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "px-3 py-2 flex items-start gap-2",
+                stepStatus === "running" && "bg-[var(--ash-accent)]/5",
+                stepStatus === "error" && "bg-red-500/5"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 flex-shrink-0 pt-0.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-white/40 w-4 text-right", children: [
+                    index + 1,
+                    "."
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(StepIcon, { status: stepStatus })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: cn(
+                          "text-sm",
+                          stepStatus === "running" && "text-[var(--ash-accent)]",
+                          stepStatus === "success" && "text-white/70",
+                          stepStatus === "error" && "text-red-400",
+                          stepStatus === "pending" && "text-white/40"
+                        ),
+                        children: getToolLabel(toolCall.toolName, toolCall.summary)
+                      }
+                    ),
+                    hasDuration && (stepStatus === "success" || stepStatus === "error") && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-white/40", children: formatDuration(startTime, endTime) })
+                  ] }),
+                  toolCall.isError && toolCall.actionType && "result" in toolCall.actionType && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs mt-1 text-red-400/80 truncate", children: String(toolCall.actionType.result?.value || "Error") })
+                ] })
+              ]
+            },
+            toolCall.id
+          );
+        }) }) })
+      ]
+    }
+  );
+}
 
 // src/types.ts
 function isCommandRunAction(action) {
@@ -1575,6 +1742,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,
@@ -1630,10 +1800,25 @@ function MessageList({
   streamingContent,
   displayConfig: displayConfigProp,
   onOptionSelect,
+  renderWidget,
+  onWidgetAction,
   className
 }) {
   const contextConfig = useDisplayConfig();
   const config = displayConfigProp || contextConfig;
+  const createWidgetActionHandler = react.useCallback(
+    (entryId, widgetType) => {
+      if (!onWidgetAction) return void 0;
+      return (action) => {
+        onWidgetAction({
+          ...action,
+          entryId,
+          widgetType
+        });
+      };
+    },
+    [onWidgetAction]
+  );
   const groupedEntries = react.useMemo(() => {
     if (config.mode === "inline") {
       return entries.map((entry) => ({
@@ -1647,12 +1832,31 @@ function MessageList({
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "ash-animate-fade-in", children: widgetContent }, entry.id);
+          }
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx(MessageEntry, { entry, onOptionSelect }, entry.id);
       }
       const toolCalls = extractToolCallsFromGroup(groupedEntry.entries);
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 ash-animate-fade-in", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-7 h-7 rounded-full bg-[var(--ash-accent)]/20 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(BotIcon, { className: "w-4 h-4 text-[var(--ash-accent)]" }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: config.mode === "accordion" ? /* @__PURE__ */ jsxRuntime.jsx(
+          StepAccordion,
+          {
+            toolCalls,
+            defaultExpanded: config.defaultExpanded
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
           ToolExecutionGroup,
           {
             toolCalls,
@@ -2072,19 +2276,22 @@ function EnvVarsPanel({
 function DisplayModeToggle({
   className,
   showLabel = true,
-  labels = { inline: "Inline", compact: "Compact" }
+  labels = { inline: "Inline", compact: "Compact", accordion: "Steps" },
+  modes = ["inline", "compact", "accordion"]
 }) {
-  const { config, toggleMode } = useDisplayMode();
-  const isInline = config.mode === "inline";
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+  const { config, setMode } = useDisplayMode();
+  const currentMode = config.mode;
+  const currentIndex = modes.indexOf(currentMode);
+  const effectiveIndex = currentIndex === -1 ? 0 : currentIndex;
+  const nextIndex = (effectiveIndex + 1) % modes.length;
+  const nextMode = modes[nextIndex];
+  const handleClick = () => {
+    setMode(nextMode);
+  };
+  const getIcon = (mode) => {
+    switch (mode) {
+      case "inline":
+        return /* @__PURE__ */ jsxRuntime.jsx(
           "svg",
           {
             className: "ash-display-mode-icon",
@@ -2101,10 +2308,9 @@ function DisplayModeToggle({
               }
             )
           }
-        ),
-        showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-display-mode-label", children: labels.inline })
-      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        );
+      case "compact":
+        return /* @__PURE__ */ jsxRuntime.jsx(
           "svg",
           {
             className: "ash-display-mode-icon",
@@ -2121,9 +2327,42 @@ function DisplayModeToggle({
               }
             )
           }
-        ),
-        showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-display-mode-label", children: labels.compact })
-      ] })
+        );
+      case "accordion":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "ash-display-mode-icon",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M8.25 6.75h12M8.25 12h12M8.25 17.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z"
+              }
+            )
+          }
+        );
+    }
+  };
+  const getLabel = (mode) => {
+    return labels[mode] || mode.charAt(0).toUpperCase() + mode.slice(1);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: handleClick,
+      className: cn("ash-display-mode-toggle", className),
+      title: `Switch to ${nextMode} mode`,
+      children: [
+        getIcon(currentMode),
+        showLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-display-mode-label", children: getLabel(currentMode) })
+      ]
     }
   );
 }
@@ -2759,6 +2998,7 @@ exports.DisplayModeProvider = DisplayModeProvider;
 exports.DisplayModeToggle = DisplayModeToggle;
 exports.EditIcon = EditIcon;
 exports.EnvVarsPanel = EnvVarsPanel;
+exports.ErrorIcon = ErrorIcon;
 exports.ErrorMessage = ErrorMessage;
 exports.FileIcon = FileIcon;
 exports.FilePlusIcon = FilePlusIcon;
@@ -2780,7 +3020,9 @@ exports.PlugIcon = PlugIcon;
 exports.SearchIcon = SearchIcon;
 exports.SendIcon = SendIcon;
 exports.SparklesIcon = SparklesIcon;
+exports.SpinnerIcon = SpinnerIcon;
 exports.StatusIndicator = StatusIndicator;
+exports.StepAccordion = StepAccordion;
 exports.StopCircleIcon = StopCircleIcon;
 exports.StreamingText = StreamingText;
 exports.SunIcon = SunIcon;
@@ -2825,6 +3067,7 @@ exports.isTodoWriteAction = isTodoWriteAction;
 exports.isToolCallEntry = isToolCallEntry;
 exports.isWebFetchAction = isWebFetchAction;
 exports.isWebSearchAction = isWebSearchAction;
+exports.isWidgetEntry = isWidgetEntry;
 exports.keyframes = keyframes;
 exports.keyframesCss = keyframesCss;
 exports.mapToolToActionType = mapToolToActionType;