@ash-cloud/ash-ui 0.2.3 → 0.2.5

package/dist/index.cjs

@@ -423,11 +423,17 @@ function Conversation({
   children,
   className,
   autoScroll: initialAutoScroll = true,
-  scrollThreshold = 100
+  scrollThreshold = 100,
+  onLoadMore,
+  hasMore = false,
+  isLoadingMore = false,
+  loadMoreThreshold = 100
 }) {
   const containerRef = react.useRef(null);
   const [isScrolledUp, setIsScrolledUp] = react.useState(false);
   const [autoScroll, setAutoScroll] = react.useState(initialAutoScroll);
+  const prevScrollHeightRef = react.useRef(0);
+  const wasLoadingMoreRef = react.useRef(false);
   const scrollToBottom = react.useCallback((behavior = "smooth") => {
     if (containerRef.current) {
       containerRef.current.scrollTo({
@@ -445,7 +451,26 @@ function Conversation({
     if (isAtBottom && !autoScroll) {
       setAutoScroll(true);
     }
-  }, [scrollThreshold, autoScroll]);
+    if (scrollTop < loadMoreThreshold && hasMore && !isLoadingMore && onLoadMore) {
+      onLoadMore();
+    }
+  }, [scrollThreshold, autoScroll, loadMoreThreshold, hasMore, isLoadingMore, onLoadMore]);
+  react.useEffect(() => {
+    if (isLoadingMore && !wasLoadingMoreRef.current && containerRef.current) {
+      prevScrollHeightRef.current = containerRef.current.scrollHeight;
+    }
+    wasLoadingMoreRef.current = isLoadingMore;
+  }, [isLoadingMore]);
+  react.useLayoutEffect(() => {
+    if (!isLoadingMore && prevScrollHeightRef.current > 0 && containerRef.current) {
+      const newScrollHeight = containerRef.current.scrollHeight;
+      const scrollDelta = newScrollHeight - prevScrollHeightRef.current;
+      if (scrollDelta > 0) {
+        containerRef.current.scrollTop += scrollDelta;
+      }
+      prevScrollHeightRef.current = 0;
+    }
+  }, [isLoadingMore]);
   react.useEffect(() => {
     if (autoScroll && !isScrolledUp) {
       scrollToBottom("instant");
@@ -456,7 +481,9 @@ function Conversation({
     scrollToBottom,
     isScrolledUp,
     autoScroll,
-    setAutoScroll
+    setAutoScroll,
+    hasMore,
+    isLoadingMore
   };
   return /* @__PURE__ */ jsxRuntime.jsx(ConversationContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -554,6 +581,50 @@ function ConversationScrollButton({
     }
   );
 }
+function ConversationLoadMore({
+  className
+}) {
+  const { hasMore, isLoadingMore } = useConversation();
+  if (!hasMore && !isLoadingMore) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn(
+        "ash-conversation-load-more flex items-center justify-center py-3",
+        className
+      ),
+      children: isLoadingMore && /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          className: "w-5 h-5 animate-spin text-[var(--ash-text-muted,rgba(255,255,255,0.5))]",
+          fill: "none",
+          viewBox: "0 0 24 24",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                className: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                className: "opacity-75",
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 var ReactMarkdown = react.lazy(() => import('react-markdown'));
 function LazyMarkdown({ children, fallback, components, className }) {
   const [mounted, setMounted] = react.useState(false);
@@ -3595,6 +3666,8 @@ function useAgentChat(options) {
     onSessionEnd,
     onError,
     onSandboxLog,
+    canUseTool,
+    resolveToolPermission,
     onReconnect,
     maxReconnectAttempts = 3,
     reconnectBaseDelay = 1e3,
@@ -3628,6 +3701,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(),
@@ -3786,6 +3876,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") {
@@ -3819,7 +3910,7 @@ function useAgentChat(options) {
       }
       return false;
     }
-  }, [subscribeToSession, maxReconnectAttempts, reconnectBaseDelay, onReconnect, processEvent, emitStreamingEntries]);
+  }, [subscribeToSession, maxReconnectAttempts, reconnectBaseDelay, onReconnect, processEvent, emitStreamingEntries, handleToolPermission]);
   const send = react.useCallback(async (prompt) => {
     if (isStreaming) return;
     let finalPrompt = prompt;
@@ -3898,6 +3989,7 @@ function useAgentChat(options) {
             console.error("[useAgentChat] onEvent error:", err);
           }
         }
+        await handleToolPermission(event);
         let processedEvent = event;
         if (middleware?.length) {
           processedEvent = await applyEventMiddleware(middleware, event);
@@ -3947,7 +4039,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);
@@ -3998,6 +4090,8 @@ function useChat(options) {
     initialSessionId,
     initialMessages = [],
     onToolCall,
+    canUseTool,
+    resolveToolPermission,
     onFinish,
     onError,
     onSessionStart,
@@ -4032,6 +4126,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":
@@ -4151,6 +4262,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);
@@ -4180,7 +4292,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);
@@ -4335,6 +4447,7 @@ exports.CodeIcon = CodeIcon;
 exports.Conversation = Conversation;
 exports.ConversationContent = ConversationContent;
 exports.ConversationEmptyState = ConversationEmptyState;
+exports.ConversationLoadMore = ConversationLoadMore;
 exports.ConversationScrollButton = ConversationScrollButton;
 exports.CopyIcon = CopyIcon;
 exports.DEFAULT_STYLE_CONFIG = DEFAULT_STYLE_CONFIG;