@witqq/agent-sdk 0.8.0 → 0.9.0

package/dist/chat/react.cjs

@@ -283,6 +283,9 @@ function useChat(options = {}) {
           }
           const agentEvent = chatEventToAgentEvent(event);
           if (agentEvent) {
+            if (agentEvent.type === "error" && !agentEvent.recoverable) {
+              throw new Error(agentEvent.error || "Stream error");
+            }
             accumulator.apply(agentEvent);
             hasEvents = true;
             const snapshot = accumulator.snapshot();
@@ -801,25 +804,98 @@ function useThreadSlots() {
 function useOptionalThreadSlots() {
   return react.useContext(ThreadSlotsContext);
 }
+function useVirtualMessages(items, options = {}) {
+  const { estimatedItemHeight = 80, overscan = 3 } = options;
+  const [scrollTop, setScrollTop] = react.useState(0);
+  const [containerHeight, setContainerHeight] = react.useState(0);
+  const containerElRef = react.useRef(null);
+  const containerRef = react.useCallback((el) => {
+    containerElRef.current = el;
+    if (el) {
+      setContainerHeight(el.clientHeight);
+    }
+  }, []);
+  react.useEffect(() => {
+    const el = containerElRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => {
+      setContainerHeight(el.clientHeight);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const onScroll = react.useCallback(
+    (event) => {
+      setScrollTop(event.currentTarget.scrollTop);
+      setContainerHeight(event.currentTarget.clientHeight);
+    },
+    []
+  );
+  const result = react.useMemo(() => {
+    const totalCount = items.length;
+    const totalHeight = totalCount * estimatedItemHeight;
+    if (totalCount === 0 || containerHeight === 0) {
+      return {
+        visibleItems: items.slice(),
+        startIndex: 0,
+        endIndex: totalCount,
+        topSpacerHeight: 0,
+        bottomSpacerHeight: 0,
+        totalHeight
+      };
+    }
+    const rawStart = Math.floor(scrollTop / estimatedItemHeight) - overscan;
+    const startIndex = Math.max(0, rawStart);
+    const visibleCount = Math.ceil(containerHeight / estimatedItemHeight);
+    const rawEnd = Math.floor(scrollTop / estimatedItemHeight) + visibleCount + overscan;
+    const endIndex = Math.min(totalCount, rawEnd);
+    return {
+      visibleItems: items.slice(startIndex, endIndex),
+      startIndex,
+      endIndex,
+      topSpacerHeight: startIndex * estimatedItemHeight,
+      bottomSpacerHeight: (totalCount - endIndex) * estimatedItemHeight,
+      totalHeight
+    };
+  }, [items, scrollTop, containerHeight, estimatedItemHeight, overscan]);
+  return {
+    ...result,
+    onScroll,
+    containerRef
+  };
+}
 
 // src/chat/react/Thread.ts
 function Thread({
   messages,
   isGenerating,
   autoScroll = true,
-  className
+  className,
+  virtualize
 }) {
   const sentinelRef = react.useRef(null);
   const containerRef = react.useRef(null);
   const [userScrolledUp, setUserScrolledUp] = react.useState(false);
   const isScrollingProgrammatically = react.useRef(false);
-  const handleScroll = react.useCallback(() => {
-    if (isScrollingProgrammatically.current) return;
-    const el = containerRef.current;
-    if (!el) return;
-    const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 1;
-    setUserScrolledUp(!atBottom);
-  }, []);
+  const isVirtualized = virtualize != null && virtualize !== false;
+  const virtualizeOpts = virtualize === true ? {} : !isVirtualized ? false : virtualize;
+  const virtual = useVirtualMessages(
+    messages,
+    virtualizeOpts || void 0
+  );
+  const handleScroll = react.useCallback(
+    (e) => {
+      if (isVirtualized) {
+        virtual.onScroll(e);
+      }
+      if (isScrollingProgrammatically.current) return;
+      const el = containerRef.current;
+      if (!el) return;
+      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 1;
+      setUserScrolledUp(!atBottom);
+    },
+    [isVirtualized, virtual.onScroll]
+  );
   const scrollToBottom = react.useCallback(() => {
     isScrollingProgrammatically.current = true;
     sentinelRef.current?.scrollIntoView({ behavior: "smooth" });
@@ -833,11 +909,23 @@ function Thread({
     sentinelRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, autoScroll, userScrolledUp]);
   const slots = useOptionalThreadSlots();
+  const mergedRef = react.useCallback(
+    (el) => {
+      containerRef.current = el;
+      if (isVirtualized) {
+        virtual.containerRef(el);
+      }
+    },
+    [isVirtualized, virtual.containerRef]
+  );
   const attrs = { "data-thread": "true", className };
   if (isGenerating) {
     attrs["data-thread-loading"] = "true";
   }
-  attrs.ref = containerRef;
+  if (virtualizeOpts) {
+    attrs["data-thread-virtualized"] = "true";
+  }
+  attrs.ref = mergedRef;
   attrs.onScroll = handleScroll;
   const children = [];
   if (messages.length === 0 && !isGenerating) {
@@ -849,9 +937,21 @@ function Thread({
       )
     );
   }
-  for (let i = 0; i < messages.length; i++) {
-    const msg = messages[i];
-    const content = slots?.renderMessage ? slots.renderMessage(msg, i) : react.createElement(Message, {
+  const renderMessages = virtualizeOpts ? virtual.visibleItems : messages;
+  const startOffset = virtualizeOpts ? virtual.startIndex : 0;
+  if (virtualizeOpts && virtual.topSpacerHeight > 0) {
+    children.push(
+      react.createElement("div", {
+        key: "__virtual-top",
+        "data-virtual-spacer": "top",
+        style: { height: virtual.topSpacerHeight }
+      })
+    );
+  }
+  for (let i = 0; i < renderMessages.length; i++) {
+    const msg = renderMessages[i];
+    const originalIndex = startOffset + i;
+    const content = slots?.renderMessage ? slots.renderMessage(msg, originalIndex) : react.createElement(Message, {
       key: msg.id,
       message: msg,
       renderToolCall: slots?.renderToolCall,
@@ -865,6 +965,15 @@ function Thread({
       )
     );
   }
+  if (virtualizeOpts && virtual.bottomSpacerHeight > 0) {
+    children.push(
+      react.createElement("div", {
+        key: "__virtual-bottom",
+        "data-virtual-spacer": "bottom",
+        style: { height: virtual.bottomSpacerHeight }
+      })
+    );
+  }
   if (isGenerating) {
     children.push(
       react.createElement(
@@ -3543,6 +3652,99 @@ function ChatUI({ runtime, ...rest }) {
     children: react.createElement(ChatUIInner, rest)
   });
 }
+function PermissionDialog({
+  requests,
+  onApprove,
+  onDeny,
+  onApproveAll,
+  onDenyAll,
+  renderArgs,
+  className
+}) {
+  if (requests.length === 0) return null;
+  const items = requests.map(
+    (req) => react.createElement(
+      "div",
+      {
+        key: req.toolCallId,
+        "data-permission-request": "true",
+        "data-tool-name": req.toolName
+      },
+      // Tool name
+      react.createElement(
+        "div",
+        { "data-permission-tool-name": "true" },
+        req.toolName
+      ),
+      // Arguments display
+      react.createElement(
+        "div",
+        { "data-permission-tool-args": "true" },
+        renderArgs ? renderArgs(req.toolArgs, req.toolName) : react.createElement("pre", null, JSON.stringify(req.toolArgs, null, 2))
+      ),
+      // Action buttons
+      react.createElement(
+        "div",
+        { "data-permission-actions": "true" },
+        react.createElement(
+          "button",
+          {
+            type: "button",
+            "data-action": "approve",
+            onClick: () => onApprove(req.toolCallId),
+            "aria-label": `Approve ${req.toolName}`
+          },
+          "Allow"
+        ),
+        react.createElement(
+          "button",
+          {
+            type: "button",
+            "data-action": "deny",
+            onClick: () => onDeny(req.toolCallId),
+            "aria-label": `Deny ${req.toolName}`
+          },
+          "Deny"
+        )
+      )
+    )
+  );
+  const bulkActions = requests.length > 1 && (onApproveAll || onDenyAll) ? react.createElement(
+    "div",
+    { "data-permission-bulk-actions": "true" },
+    onApproveAll ? react.createElement(
+      "button",
+      {
+        type: "button",
+        "data-action": "approve-all",
+        onClick: onApproveAll,
+        "aria-label": "Approve all tool calls"
+      },
+      "Allow All"
+    ) : null,
+    onDenyAll ? react.createElement(
+      "button",
+      {
+        type: "button",
+        "data-action": "deny-all",
+        onClick: onDenyAll,
+        "aria-label": "Deny all tool calls"
+      },
+      "Deny All"
+    ) : null
+  ) : null;
+  return react.createElement(
+    "div",
+    {
+      "data-permission-dialog": "true",
+      role: "dialog",
+      "aria-label": "Tool permission requests",
+      className
+    },
+    ...items,
+    bulkActions
+  );
+}
 
 exports.BackendSelector = BackendSelector;
 exports.ChatHeader = ChatHeader;
@@ -3558,6 +3760,7 @@ exports.CopilotAuthForm = CopilotAuthForm;
 exports.MarkdownRenderer = MarkdownRenderer;
 exports.Message = Message;
 exports.ModelSelector = ModelSelector;
+exports.PermissionDialog = PermissionDialog;
 exports.ProviderModelSelector = ProviderModelSelector;
 exports.ProviderSelector = ProviderSelector;
 exports.ProviderSettings = ProviderSettings;
@@ -3585,5 +3788,6 @@ exports.useSSE = useSSE;
 exports.useSessions = useSessions;
 exports.useThreadSlots = useThreadSlots;
 exports.useToolApproval = useToolApproval;
+exports.useVirtualMessages = useVirtualMessages;
 //# sourceMappingURL=react.cjs.map
 //# sourceMappingURL=react.cjs.map