@ash-cloud/ash-ui 0.2.4 → 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
     };
   }
@@ -3666,6 +3813,8 @@ function useAgentChat(options) {
     onSessionEnd,
     onError,
     onSandboxLog,
+    canUseTool,
+    resolveToolPermission,
     onReconnect,
     maxReconnectAttempts = 3,
     reconnectBaseDelay = 1e3,
@@ -3699,6 +3848,23 @@ function useAgentChat(options) {
   const emitStreamingEntries = react.useCallback((newEntries) => {
     setStreamingEntries([...newEntries]);
   }, []);
+  const handleToolPermission = react.useCallback(async (event) => {
+    if (event.type !== "tool_permission") return;
+    if (!canUseTool) return;
+    if (!event.requestId || !event.sessionId || !event.toolName) return;
+    const request = {
+      requestId: event.requestId,
+      sessionId: event.sessionId,
+      toolName: event.toolName,
+      input: event.input
+    };
+    const allow = await canUseTool(request);
+    if (!resolveToolPermission) {
+      console.warn("[useAgentChat] resolveToolPermission not provided for tool permission response");
+      return;
+    }
+    await resolveToolPermission(request, allow);
+  }, [canUseTool, resolveToolPermission]);
   const createTextEntry = react.useCallback((id, content) => ({
     id,
     timestamp: (/* @__PURE__ */ new Date()).toISOString(),
@@ -3857,6 +4023,7 @@ function useAgentChat(options) {
       for await (const event of stream) {
         if (controller.signal.aborted) break;
         eventCountRef.current++;
+        await handleToolPermission(event);
         localStreamingEntries = processEvent(event, localStreamingEntries);
         emitStreamingEntries(localStreamingEntries);
         if (event.type === "complete" || event.type === "session_end" || event.type === "error") {
@@ -3890,9 +4057,10 @@ function useAgentChat(options) {
       }
       return false;
     }
-  }, [subscribeToSession, maxReconnectAttempts, reconnectBaseDelay, onReconnect, processEvent, emitStreamingEntries]);
-  const send = react.useCallback(async (prompt) => {
+  }, [subscribeToSession, maxReconnectAttempts, reconnectBaseDelay, onReconnect, processEvent, emitStreamingEntries, handleToolPermission]);
+  const send = react.useCallback(async (prompt, sendOptions) => {
     if (isStreaming) return;
+    const role = sendOptions?.role ?? "user";
     let finalPrompt = prompt;
     let additionalMetadata = {};
     let additionalContext;
@@ -3938,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;
@@ -3954,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;
@@ -3969,6 +4140,7 @@ function useAgentChat(options) {
             console.error("[useAgentChat] onEvent error:", err);
           }
         }
+        await handleToolPermission(event);
         let processedEvent = event;
         if (middleware?.length) {
           processedEvent = await applyEventMiddleware(middleware, event);
@@ -4018,7 +4190,7 @@ function useAgentChat(options) {
       abortControllerRef.current = null;
       resetStreamingState();
     }
-  }, [isStreaming, sessionId, historyEntries, streamingEntries, createStream, subscribeToSession, processEvent, emitStreamingEntries, resetStreamingState, onError, attemptReconnect, onBeforeSend, onEvent, middleware]);
+  }, [isStreaming, sessionId, historyEntries, streamingEntries, createStream, subscribeToSession, processEvent, emitStreamingEntries, resetStreamingState, onError, attemptReconnect, onBeforeSend, onEvent, middleware, handleToolPermission]);
   const stop = react.useCallback(() => {
     reconnectAttemptsRef.current = maxReconnectAttempts + 1;
     setIsReconnecting(false);
@@ -4069,6 +4241,8 @@ function useChat(options) {
     initialSessionId,
     initialMessages = [],
     onToolCall,
+    canUseTool,
+    resolveToolPermission,
     onFinish,
     onError,
     onSessionStart,
@@ -4103,6 +4277,23 @@ function useChat(options) {
       return prev;
     });
   }, []);
+  const handleToolPermission = react.useCallback(async (event) => {
+    if (event.type !== "tool_permission") return;
+    if (!canUseTool) return;
+    if (!event.requestId || !event.sessionId || !event.toolName) return;
+    const request = {
+      requestId: event.requestId,
+      sessionId: event.sessionId,
+      toolName: event.toolName,
+      input: event.input
+    };
+    const allow = await canUseTool(request);
+    if (!resolveToolPermission) {
+      console.warn("[useChat] resolveToolPermission not provided for tool permission response");
+      return;
+    }
+    await resolveToolPermission(request, allow);
+  }, [canUseTool, resolveToolPermission]);
   const processEvent = react.useCallback((event) => {
     switch (event.type) {
       case "session_start":
@@ -4222,6 +4413,7 @@ function useChat(options) {
       const stream = createStream(finalPrompt, sessionIdRef.current || void 0, streamOptions);
       for await (const event of stream) {
         if (controller.signal.aborted) break;
+        await handleToolPermission(event);
         let processedEvent = event;
         if (middleware?.length) {
           processedEvent = await applyEventMiddleware(middleware, event);
@@ -4251,7 +4443,7 @@ function useChat(options) {
       abortControllerRef.current = null;
       currentAssistantMessageRef.current = null;
     }
-  }, [isLoading, createStream, processEvent, middleware, onError]);
+  }, [isLoading, createStream, processEvent, middleware, onError, handleToolPermission]);
   const stop = react.useCallback(() => {
     reconnectAttemptsRef.current = maxReconnectAttempts + 1;
     setIsReconnecting(false);
@@ -4392,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;
@@ -4410,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;
@@ -4503,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;
@@ -4529,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;