@ash-cloud/ash-ui 0.2.5 → 0.2.6

package/dist/index.cjs

@@ -1269,6 +1269,128 @@ function JsonDisplay({ value, maxHeight, className }) {
   const formatted = JSON.stringify(value, null, 2);
   return /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { maxHeight, className, children: formatted });
 }
+var ChatDisplayModeContext = react.createContext(null);
+function useChatDisplayMode() {
+  const ctx = react.useContext(ChatDisplayModeContext);
+  if (!ctx) {
+    return {
+      mode: "debug",
+      toggleMode: () => {
+      },
+      setMode: () => {
+      },
+      toolDescriptions: {},
+      getUserDescription: () => null
+    };
+  }
+  return ctx;
+}
+function ChatDisplayModeProvider({
+  children,
+  defaultMode = "user",
+  storageKey = "ash-display-mode",
+  toolDescriptions = {}
+}) {
+  const [mode, setModeState] = react.useState(() => {
+    if (typeof window !== "undefined") {
+      const stored = localStorage.getItem(storageKey);
+      if (stored === "user" || stored === "debug") return stored;
+    }
+    return defaultMode;
+  });
+  react.useEffect(() => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem(storageKey, mode);
+    }
+  }, [mode, storageKey]);
+  const toggleMode = () => setModeState((m) => m === "user" ? "debug" : "user");
+  const setMode = (m) => setModeState(m);
+  const getUserDescription = (toolName, input) => {
+    if (toolDescriptions[toolName]) {
+      const desc = toolDescriptions[toolName];
+      return typeof desc === "function" ? desc(input) : desc;
+    }
+    for (const [pattern, desc] of Object.entries(toolDescriptions)) {
+      if (toolName.includes(pattern)) {
+        return typeof desc === "function" ? desc(input) : desc;
+      }
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ChatDisplayModeContext.Provider,
+    {
+      value: {
+        mode,
+        toggleMode,
+        setMode,
+        toolDescriptions,
+        getUserDescription
+      },
+      children
+    }
+  );
+}
+function DisplayModeToggle({ className }) {
+  const { mode, toggleMode } = useChatDisplayMode();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick: toggleMode,
+      className: cn("ash-display-mode-toggle", className),
+      title: mode === "user" ? "Switch to debug mode" : "Switch to user mode",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-display-mode-icon", children: mode === "user" ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "svg",
+          {
+            className: "w-4 h-4",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "path",
+                {
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  strokeWidth: 2,
+                  d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
+                }
+              )
+            ]
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "svg",
+          {
+            className: "w-4 h-4",
+            fill: "none",
+            stroke: "currentColor",
+            viewBox: "0 0 24 24",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 2,
+                d: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ash-display-mode-label", children: mode === "user" ? "User" : "Debug" })
+      ]
+    }
+  );
+}
 var ToolContext = react.createContext(null);
 function useTool() {
   const context = react.useContext(ToolContext);
@@ -1285,6 +1407,7 @@ function Tool({
   variant = "default"
 }) {
   const [isExpanded, setIsExpanded] = react.useState(defaultExpanded);
+  const { mode, getUserDescription } = useChatDisplayMode();
   const toggleExpanded = () => setIsExpanded((prev) => !prev);
   const contextValue = {
     toolInvocation,
@@ -1296,6 +1419,27 @@ function Tool({
   const isErrorResult = Boolean(
     toolInvocation.result && typeof toolInvocation.result === "object" && "error" in toolInvocation.result
   );
+  if (mode === "user") {
+    const userDesc = getUserDescription(toolInvocation.toolName, toolInvocation.args) || formatToolName(toolInvocation.toolName);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn(
+          "ash-tool ash-tool-user-mode",
+          "flex items-center gap-2 px-3 py-1.5",
+          "text-[var(--ash-font-size-xs,11px)]",
+          "text-[var(--ash-text-muted,rgba(255,255,255,0.5))]",
+          className
+        ),
+        "data-tool-name": toolInvocation.toolName,
+        "data-tool-state": toolInvocation.state,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StatusIndicator, { status, size: "xs" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: userDesc })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(ToolContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -3130,6 +3274,9 @@ function isErrorEntry(entry) {
 function isWidgetEntry(entry) {
   return entry.type === "widget";
 }
+function isSystemMessage(entry) {
+  return entry.type === "system_message";
+}
 var DEFAULT_STYLE_CONFIG = {
   userVariant: "bubble",
   assistantVariant: "bubble",
@@ -3263,7 +3410,7 @@ function messageToNormalizedEntry(message) {
     return {
       id,
       timestamp,
-      entryType: { type: "assistant_message" },
+      entryType: { type: "system_message" },
       content
     };
   }
@@ -3911,8 +4058,9 @@ function useAgentChat(options) {
       return false;
     }
   }, [subscribeToSession, maxReconnectAttempts, reconnectBaseDelay, onReconnect, processEvent, emitStreamingEntries, handleToolPermission]);
-  const send = react.useCallback(async (prompt) => {
+  const send = react.useCallback(async (prompt, sendOptions) => {
     if (isStreaming) return;
+    const role = sendOptions?.role ?? "user";
     let finalPrompt = prompt;
     let additionalMetadata = {};
     let additionalContext;
@@ -3958,13 +4106,15 @@ function useAgentChat(options) {
     setError(null);
     reconnectAttemptsRef.current = 0;
     eventCountRef.current = 0;
-    const userEntry = {
-      id: `user-${Date.now()}-${Math.random().toString(36).slice(2)}`,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-      entryType: { type: "user_message" },
-      content: prompt
-    };
-    setHistoryEntries((prev) => [...prev, userEntry]);
+    if (role !== "system") {
+      const userEntry = {
+        id: `user-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+        entryType: { type: "user_message" },
+        content: prompt
+      };
+      setHistoryEntries((prev) => [...prev, userEntry]);
+    }
     resetStreamingState();
     const controller = new AbortController();
     abortControllerRef.current = controller;
@@ -3974,7 +4124,8 @@ function useAgentChat(options) {
       const stream = createStream(finalPrompt, sessionId || void 0, {
         signal: controller.signal,
         metadata: Object.keys(additionalMetadata).length > 0 ? additionalMetadata : void 0,
-        sessionContext: additionalContext
+        sessionContext: additionalContext,
+        role: role !== "user" ? role : void 0
       });
       for await (const event of stream) {
         if (controller.signal.aborted) break;
@@ -4433,6 +4584,7 @@ exports.Attachments = Attachments;
 exports.BotIcon = BotIcon;
 exports.BrainIcon = BrainIcon;
 exports.BugIcon = BugIcon;
+exports.ChatDisplayModeProvider = ChatDisplayModeProvider;
 exports.CheckCircleIcon = CheckCircleIcon;
 exports.CheckIcon = CheckIcon;
 exports.ChevronDownIcon = ChevronDownIcon;
@@ -4451,6 +4603,7 @@ exports.ConversationLoadMore = ConversationLoadMore;
 exports.ConversationScrollButton = ConversationScrollButton;
 exports.CopyIcon = CopyIcon;
 exports.DEFAULT_STYLE_CONFIG = DEFAULT_STYLE_CONFIG;
+exports.DisplayModeToggle = DisplayModeToggle;
 exports.EditIcon = EditIcon;
 exports.EnvVarsPanel = EnvVarsPanel;
 exports.ErrorIcon = ErrorIcon;
@@ -4544,6 +4697,7 @@ exports.isGenericToolAction = isGenericToolAction;
 exports.isGlobAction = isGlobAction;
 exports.isMcpToolAction = isMcpToolAction;
 exports.isSearchAction = isSearchAction;
+exports.isSystemMessage = isSystemMessage;
 exports.isTodoWriteAction = isTodoWriteAction;
 exports.isToolCallEntry = isToolCallEntry;
 exports.isWebFetchAction = isWebFetchAction;
@@ -4570,6 +4724,7 @@ exports.updateToolCallWithResult = updateToolCallWithResult;
 exports.useAgentChat = useAgentChat;
 exports.useAttachment = useAttachment;
 exports.useChat = useChat;
+exports.useChatDisplayMode = useChatDisplayMode;
 exports.useConversation = useConversation;
 exports.useFileUpload = useFileUpload;
 exports.useLongTextConversion = useLongTextConversion;