@copilotkitnext/react 0.0.22 → 0.0.24

package/dist/index.js

@@ -544,7 +544,16 @@ CopilotChatAudioRecorder.displayName = "WebAudioRecorder";
 
 // src/lib/slots.tsx
 var import_react3 = __toESM(require("react"));
-function renderSlot(slot, DefaultComponent, props) {
+function shallowEqual(obj1, obj2) {
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+  if (keys1.length !== keys2.length) return false;
+  for (const key of keys1) {
+    if (obj1[key] !== obj2[key]) return false;
+  }
+  return true;
+}
+function renderSlotElement(slot, DefaultComponent, props) {
   if (typeof slot === "string") {
     return import_react3.default.createElement(DefaultComponent, {
       ...props,
@@ -552,8 +561,7 @@ function renderSlot(slot, DefaultComponent, props) {
     });
   }
   if (typeof slot === "function") {
-    const Comp = slot;
-    return import_react3.default.createElement(Comp, props);
+    return import_react3.default.createElement(slot, props);
   }
   if (slot && typeof slot === "object" && !import_react3.default.isValidElement(slot)) {
     return import_react3.default.createElement(DefaultComponent, {
@@ -563,6 +571,30 @@ function renderSlot(slot, DefaultComponent, props) {
   }
   return import_react3.default.createElement(DefaultComponent, props);
 }
+var MemoizedSlotWrapper = import_react3.default.memo(
+  import_react3.default.forwardRef(function MemoizedSlotWrapper2(props, ref) {
+    const { $slot, $component, ...rest } = props;
+    const propsWithRef = ref !== null ? { ...rest, ref } : rest;
+    return renderSlotElement($slot, $component, propsWithRef);
+  }),
+  (prev, next) => {
+    if (prev.$slot !== next.$slot) return false;
+    if (prev.$component !== next.$component) return false;
+    const { $slot: _ps, $component: _pc, ...prevRest } = prev;
+    const { $slot: _ns, $component: _nc, ...nextRest } = next;
+    return shallowEqual(
+      prevRest,
+      nextRest
+    );
+  }
+);
+function renderSlot(slot, DefaultComponent, props) {
+  return import_react3.default.createElement(MemoizedSlotWrapper, {
+    ...props,
+    $slot: slot,
+    $component: DefaultComponent
+  });
+}
 
 // src/components/chat/CopilotChatInput.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
@@ -1399,7 +1431,7 @@ var import_katex_min = require("katex/dist/katex.min.css");
 var import_streamdown = require("streamdown");
 
 // src/hooks/use-render-tool-call.tsx
-var import_react7 = require("react");
+var import_react7 = __toESM(require("react"));
 var import_core2 = require("@copilotkitnext/core");
 
 // src/providers/CopilotKitProvider.tsx
@@ -1676,6 +1708,63 @@ var useCopilotKit = () => {
 var import_shared2 = require("@copilotkitnext/shared");
 var import_shared3 = require("@copilotkitnext/shared");
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var ToolCallRenderer = import_react7.default.memo(
+  function ToolCallRenderer2({
+    toolCall,
+    toolMessage,
+    RenderComponent,
+    isExecuting
+  }) {
+    const args = (0, import_react7.useMemo)(
+      () => (0, import_shared3.partialJSONParse)(toolCall.function.arguments),
+      [toolCall.function.arguments]
+    );
+    const toolName = toolCall.function.name;
+    if (toolMessage) {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        RenderComponent,
+        {
+          name: toolName,
+          args,
+          status: import_core2.ToolCallStatus.Complete,
+          result: toolMessage.content
+        }
+      );
+    } else if (isExecuting) {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        RenderComponent,
+        {
+          name: toolName,
+          args,
+          status: import_core2.ToolCallStatus.Executing,
+          result: void 0
+        }
+      );
+    } else {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        RenderComponent,
+        {
+          name: toolName,
+          args,
+          status: import_core2.ToolCallStatus.InProgress,
+          result: void 0
+        }
+      );
+    }
+  },
+  // Custom comparison function to prevent re-renders when tool call data hasn't changed
+  (prevProps, nextProps) => {
+    if (prevProps.toolCall.id !== nextProps.toolCall.id) return false;
+    if (prevProps.toolCall.function.name !== nextProps.toolCall.function.name) return false;
+    if (prevProps.toolCall.function.arguments !== nextProps.toolCall.function.arguments) return false;
+    const prevResult = prevProps.toolMessage?.content;
+    const nextResult = nextProps.toolMessage?.content;
+    if (prevResult !== nextResult) return false;
+    if (prevProps.isExecuting !== nextProps.isExecuting) return false;
+    if (prevProps.RenderComponent !== nextProps.RenderComponent) return false;
+    return true;
+  }
+);
 function useRenderToolCall() {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
@@ -1724,42 +1813,17 @@ function useRenderToolCall() {
         return null;
       }
       const RenderComponent = renderConfig.render;
-      const args = (0, import_shared3.partialJSONParse)(toolCall.function.arguments);
-      const toolName = toolCall.function.name;
-      if (toolMessage) {
-        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          RenderComponent,
-          {
-            name: toolName,
-            args,
-            status: import_core2.ToolCallStatus.Complete,
-            result: toolMessage.content
-          },
-          toolCall.id
-        );
-      } else if (executingToolCallIds.has(toolCall.id)) {
-        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          RenderComponent,
-          {
-            name: toolName,
-            args,
-            status: import_core2.ToolCallStatus.Executing,
-            result: void 0
-          },
-          toolCall.id
-        );
-      } else {
-        return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      const isExecuting = executingToolCallIds.has(toolCall.id);
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        ToolCallRenderer,
+        {
+          toolCall,
+          toolMessage,
           RenderComponent,
-          {
-            name: toolName,
-            args,
-            status: import_core2.ToolCallStatus.InProgress,
-            result: void 0
-          },
-          toolCall.id
-        );
-      }
+          isExecuting
+        },
+        toolCall.id
+      );
     },
     [renderToolCalls, executingToolCallIds, agentId]
   );
@@ -1872,8 +1936,10 @@ function useRenderActivityMessage() {
 
 // src/hooks/use-frontend-tool.tsx
 var import_react9 = require("react");
-function useFrontendTool(tool) {
+var EMPTY_DEPS = [];
+function useFrontendTool(tool, deps) {
   const { copilotkit } = useCopilotKit();
+  const extraDeps = deps ?? EMPTY_DEPS;
   (0, import_react9.useEffect)(() => {
     const name = tool.name;
     if (copilotkit.getTool({ toolName: name, agentId: tool.agentId })) {
@@ -1902,13 +1968,13 @@ function useFrontendTool(tool) {
     return () => {
       copilotkit.removeTool(name, tool.agentId);
     };
-  }, [tool.name, copilotkit]);
+  }, [tool.name, copilotkit, extraDeps.length, ...extraDeps]);
 }
 
 // src/hooks/use-human-in-the-loop.tsx
 var import_react10 = require("react");
 var import_react11 = __toESM(require("react"));
-function useHumanInTheLoop(tool) {
+function useHumanInTheLoop(tool, deps) {
   const { copilotkit } = useCopilotKit();
   const resolvePromiseRef = (0, import_react10.useRef)(null);
   const respond = (0, import_react10.useCallback)(async (result) => {
@@ -1959,7 +2025,7 @@ function useHumanInTheLoop(tool) {
     handler,
     render: RenderComponent
   };
-  useFrontendTool(frontendTool);
+  useFrontendTool(frontendTool, deps);
   (0, import_react10.useEffect)(() => {
     return () => {
       const keyOf = (rc) => `${rc.agentId ?? ""}:${rc.name}`;
@@ -2134,11 +2200,10 @@ function useSuggestions({ agentId } = {}) {
 // src/hooks/use-configure-suggestions.tsx
 var import_react15 = require("react");
 var import_shared7 = require("@copilotkitnext/shared");
-var EMPTY_DEPS = [];
-function useConfigureSuggestions(config, options) {
+function useConfigureSuggestions(config, deps) {
   const { copilotkit } = useCopilotKit();
   const chatConfig = useCopilotChatConfiguration();
-  const extraDeps = options?.deps ?? EMPTY_DEPS;
+  const extraDeps = deps ?? [];
   const resolvedConsumerAgentId = (0, import_react15.useMemo)(() => chatConfig?.agentId ?? import_shared7.DEFAULT_AGENT_ID, [chatConfig?.agentId]);
   const rawConsumerAgentId = (0, import_react15.useMemo)(() => config ? config.consumerAgentId : void 0, [config]);
   const normalizationCacheRef = (0, import_react15.useRef)({
@@ -2888,8 +2953,103 @@ CopilotChatSuggestionView.displayName = "CopilotChatSuggestionView";
 var CopilotChatSuggestionView_default = CopilotChatSuggestionView;
 
 // src/components/chat/CopilotChatMessageView.tsx
+var import_react21 = __toESM(require("react"));
 var import_tailwind_merge6 = require("tailwind-merge");
 var import_jsx_runtime17 = require("react/jsx-runtime");
+var MemoizedAssistantMessage = import_react21.default.memo(
+  function MemoizedAssistantMessage2({
+    message,
+    messages,
+    isRunning,
+    AssistantMessageComponent
+  }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      AssistantMessageComponent,
+      {
+        message,
+        messages,
+        isRunning
+      }
+    );
+  },
+  (prevProps, nextProps) => {
+    if (prevProps.message.id !== nextProps.message.id) return false;
+    if (prevProps.message.content !== nextProps.message.content) return false;
+    const prevToolCalls = prevProps.message.toolCalls;
+    const nextToolCalls = nextProps.message.toolCalls;
+    if (prevToolCalls?.length !== nextToolCalls?.length) return false;
+    if (prevToolCalls && nextToolCalls) {
+      for (let i = 0; i < prevToolCalls.length; i++) {
+        const prevTc = prevToolCalls[i];
+        const nextTc = nextToolCalls[i];
+        if (!prevTc || !nextTc) return false;
+        if (prevTc.id !== nextTc.id) return false;
+        if (prevTc.function.arguments !== nextTc.function.arguments) return false;
+      }
+    }
+    if (prevToolCalls && prevToolCalls.length > 0) {
+      const toolCallIds = new Set(prevToolCalls.map((tc) => tc.id));
+      const prevToolResults = prevProps.messages.filter(
+        (m) => m.role === "tool" && toolCallIds.has(m.toolCallId)
+      );
+      const nextToolResults = nextProps.messages.filter(
+        (m) => m.role === "tool" && toolCallIds.has(m.toolCallId)
+      );
+      if (prevToolResults.length !== nextToolResults.length) return false;
+      for (let i = 0; i < prevToolResults.length; i++) {
+        if (prevToolResults[i].content !== nextToolResults[i].content) return false;
+      }
+    }
+    const nextIsLatest = nextProps.messages[nextProps.messages.length - 1]?.id === nextProps.message.id;
+    if (nextIsLatest && prevProps.isRunning !== nextProps.isRunning) return false;
+    if (prevProps.AssistantMessageComponent !== nextProps.AssistantMessageComponent) return false;
+    return true;
+  }
+);
+var MemoizedUserMessage = import_react21.default.memo(
+  function MemoizedUserMessage2({
+    message,
+    UserMessageComponent
+  }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(UserMessageComponent, { message });
+  },
+  (prevProps, nextProps) => {
+    if (prevProps.message.id !== nextProps.message.id) return false;
+    if (prevProps.message.content !== nextProps.message.content) return false;
+    if (prevProps.UserMessageComponent !== nextProps.UserMessageComponent) return false;
+    return true;
+  }
+);
+var MemoizedActivityMessage = import_react21.default.memo(
+  function MemoizedActivityMessage2({
+    message,
+    renderActivityMessage
+  }) {
+    return renderActivityMessage(message);
+  },
+  (prevProps, nextProps) => {
+    if (prevProps.message.id !== nextProps.message.id) return false;
+    if (prevProps.message.activityType !== nextProps.message.activityType) return false;
+    if (JSON.stringify(prevProps.message.content) !== JSON.stringify(nextProps.message.content)) return false;
+    return true;
+  }
+);
+var MemoizedCustomMessage = import_react21.default.memo(
+  function MemoizedCustomMessage2({
+    message,
+    position,
+    renderCustomMessage
+  }) {
+    return renderCustomMessage({ message, position });
+  },
+  (prevProps, nextProps) => {
+    if (prevProps.message.id !== nextProps.message.id) return false;
+    if (prevProps.position !== nextProps.position) return false;
+    if (prevProps.message.content !== nextProps.message.content) return false;
+    if (prevProps.message.role !== nextProps.message.role) return false;
+    return true;
+  }
+);
 function CopilotChatMessageView({
   messages = [],
   assistantMessage,
@@ -2906,40 +3066,66 @@ function CopilotChatMessageView({
     const elements = [];
     if (renderCustomMessage) {
       elements.push(
-        renderCustomMessage({
-          message,
-          position: "before"
-        })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          MemoizedCustomMessage,
+          {
+            message,
+            position: "before",
+            renderCustomMessage
+          },
+          `${message.id}-custom-before`
+        )
       );
     }
     if (message.role === "assistant") {
+      const AssistantComponent = typeof assistantMessage === "function" ? assistantMessage : CopilotChatAssistantMessage_default;
       elements.push(
-        renderSlot(assistantMessage, CopilotChatAssistantMessage_default, {
-          key: message.id,
-          message,
-          messages,
-          isRunning
-        })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          MemoizedAssistantMessage,
+          {
+            message,
+            messages,
+            isRunning,
+            AssistantMessageComponent: AssistantComponent
+          },
+          message.id
+        )
       );
     } else if (message.role === "user") {
+      const UserComponent = typeof userMessage === "function" ? userMessage : CopilotChatUserMessage_default;
       elements.push(
-        renderSlot(userMessage, CopilotChatUserMessage_default, {
-          key: message.id,
-          message
-        })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          MemoizedUserMessage,
+          {
+            message,
+            UserMessageComponent: UserComponent
+          },
+          message.id
+        )
       );
     } else if (message.role === "activity") {
-      const renderedActivity = renderActivityMessage(message);
-      if (renderedActivity) {
-        elements.push(renderedActivity);
-      }
+      elements.push(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          MemoizedActivityMessage,
+          {
+            message,
+            renderActivityMessage
+          },
+          message.id
+        )
+      );
     }
     if (renderCustomMessage) {
       elements.push(
-        renderCustomMessage({
-          message,
-          position: "after"
-        })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+          MemoizedCustomMessage,
+          {
+            message,
+            position: "after",
+            renderCustomMessage
+          },
+          `${message.id}-custom-after`
+        )
       );
     }
     return elements;
@@ -2964,21 +3150,21 @@ CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
 var CopilotChatMessageView_default = CopilotChatMessageView;
 
 // src/components/chat/CopilotChatView.tsx
-var import_react22 = __toESM(require("react"));
+var import_react23 = __toESM(require("react"));
 var import_tailwind_merge7 = require("tailwind-merge");
 var import_use_stick_to_bottom = require("use-stick-to-bottom");
 var import_lucide_react6 = require("lucide-react");
 
 // src/hooks/use-keyboard-height.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 function useKeyboardHeight() {
-  const [keyboardState, setKeyboardState] = (0, import_react21.useState)({
+  const [keyboardState, setKeyboardState] = (0, import_react22.useState)({
     isKeyboardOpen: false,
     keyboardHeight: 0,
     availableHeight: typeof window !== "undefined" ? window.innerHeight : 0,
     viewportHeight: typeof window !== "undefined" ? window.innerHeight : 0
   });
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -3031,12 +3217,12 @@ function CopilotChatView({
   className,
   ...props
 }) {
-  const inputContainerRef = (0, import_react22.useRef)(null);
-  const [inputContainerHeight, setInputContainerHeight] = (0, import_react22.useState)(0);
-  const [isResizing, setIsResizing] = (0, import_react22.useState)(false);
-  const resizeTimeoutRef = (0, import_react22.useRef)(null);
+  const inputContainerRef = (0, import_react23.useRef)(null);
+  const [inputContainerHeight, setInputContainerHeight] = (0, import_react23.useState)(0);
+  const [isResizing, setIsResizing] = (0, import_react23.useState)(false);
+  const resizeTimeoutRef = (0, import_react23.useRef)(null);
   const { isKeyboardOpen, keyboardHeight, availableHeight } = useKeyboardHeight();
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const element = inputContainerRef.current;
     if (!element) return;
     const resizeObserver = new ResizeObserver((entries) => {
@@ -3072,16 +3258,12 @@ function CopilotChatView({
   });
   const BoundInput = renderSlot(input, CopilotChatInput_default, inputProps ?? {});
   const hasSuggestions = Array.isArray(suggestions) && suggestions.length > 0;
-  const BoundSuggestionView = hasSuggestions ? renderSlot(
-    suggestionView,
-    CopilotChatSuggestionView_default,
-    {
-      suggestions,
-      loadingIndexes: suggestionLoadingIndexes,
-      onSelectSuggestion,
-      className: "mb-3 lg:ml-4 lg:mr-4 ml-0 mr-0"
-    }
-  ) : null;
+  const BoundSuggestionView = hasSuggestions ? renderSlot(suggestionView, CopilotChatSuggestionView_default, {
+    suggestions,
+    loadingIndexes: suggestionLoadingIndexes,
+    onSelectSuggestion,
+    className: "mb-3 lg:ml-4 lg:mr-4 ml-0 mr-0"
+  }) : null;
   const BoundFeather = renderSlot(feather, CopilotChatView.Feather, {});
   const BoundScrollView = renderSlot(scrollView, CopilotChatView.ScrollView, {
     autoScroll,
@@ -3149,13 +3331,13 @@ function CopilotChatView({
     className,
     ...props
   }) => {
-    const [hasMounted, setHasMounted] = (0, import_react22.useState)(false);
+    const [hasMounted, setHasMounted] = (0, import_react23.useState)(false);
     const { scrollRef, contentRef, scrollToBottom } = (0, import_use_stick_to_bottom.useStickToBottom)();
-    const [showScrollButton, setShowScrollButton] = (0, import_react22.useState)(false);
-    (0, import_react22.useEffect)(() => {
+    const [showScrollButton, setShowScrollButton] = (0, import_react23.useState)(false);
+    (0, import_react23.useEffect)(() => {
       setHasMounted(true);
     }, []);
-    (0, import_react22.useEffect)(() => {
+    (0, import_react23.useEffect)(() => {
       if (autoScroll) return;
       const scrollElement = scrollRef.current;
       if (!scrollElement) return;
@@ -3255,7 +3437,7 @@ function CopilotChatView({
       ...props
     }
   );
-  CopilotChatView2.InputContainer = import_react22.default.forwardRef(({ children, className, keyboardHeight = 0, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  CopilotChatView2.InputContainer = import_react23.default.forwardRef(({ children, className, keyboardHeight = 0, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
       ref,
@@ -3287,14 +3469,14 @@ var CopilotChatView_default = CopilotChatView;
 
 // src/components/chat/CopilotChat.tsx
 var import_shared8 = require("@copilotkitnext/shared");
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_ts_deepmerge = require("ts-deepmerge");
 var import_client = require("@ag-ui/client");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen, ...props }) {
   const existingConfig = useCopilotChatConfiguration();
   const resolvedAgentId = agentId ?? existingConfig?.agentId ?? import_shared8.DEFAULT_AGENT_ID;
-  const resolvedThreadId = (0, import_react23.useMemo)(
+  const resolvedThreadId = (0, import_react24.useMemo)(
     () => threadId ?? existingConfig?.threadId ?? (0, import_shared8.randomUUID)(),
     [threadId, existingConfig?.threadId]
   );
@@ -3307,7 +3489,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     suggestionView: providedSuggestionView,
     ...restProps
   } = props;
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const connect = async (agent2) => {
       try {
         await copilotkit.connectAgent({ agent: agent2 });
@@ -3323,7 +3505,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     return () => {
     };
   }, [resolvedThreadId, agent, copilotkit, resolvedAgentId]);
-  const onSubmitInput = (0, import_react23.useCallback)(
+  const onSubmitInput = (0, import_react24.useCallback)(
     async (value) => {
       agent.addMessage({
         id: (0, import_shared8.randomUUID)(),
@@ -3338,7 +3520,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     },
     [agent, copilotkit]
   );
-  const handleSelectSuggestion = (0, import_react23.useCallback)(
+  const handleSelectSuggestion = (0, import_react24.useCallback)(
     async (suggestion) => {
       agent.addMessage({
         id: (0, import_shared8.randomUUID)(),
@@ -3353,7 +3535,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     },
     [agent, copilotkit]
   );
-  const stopCurrentRun = (0, import_react23.useCallback)(() => {
+  const stopCurrentRun = (0, import_react24.useCallback)(() => {
     try {
       copilotkit.stopAgent({ agent });
     } catch (error) {
@@ -3409,7 +3591,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 })(CopilotChat || (CopilotChat = {}));
 
 // src/components/chat/CopilotChatToggleButton.tsx
-var import_react24 = __toESM(require("react"));
+var import_react25 = __toESM(require("react"));
 var import_lucide_react7 = require("lucide-react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var DefaultOpenIcon = ({
@@ -3436,11 +3618,11 @@ var BUTTON_BASE_CLASSES = cn(
   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background",
   "disabled:pointer-events-none disabled:opacity-60"
 );
-var CopilotChatToggleButton = import_react24.default.forwardRef(function CopilotChatToggleButton2({ openIcon, closeIcon, className, ...buttonProps }, ref) {
+var CopilotChatToggleButton = import_react25.default.forwardRef(function CopilotChatToggleButton2({ openIcon, closeIcon, className, ...buttonProps }, ref) {
   const { onClick, type, disabled, ...restProps } = buttonProps;
   const configuration = useCopilotChatConfiguration();
   const labels = configuration?.labels ?? CopilotChatDefaultLabels;
-  const [fallbackOpen, setFallbackOpen] = (0, import_react24.useState)(false);
+  const [fallbackOpen, setFallbackOpen] = (0, import_react25.useState)(false);
   const isOpen = configuration?.isModalOpen ?? fallbackOpen;
   const setModalOpen = configuration?.setModalOpen ?? setFallbackOpen;
   const handleClick = (event) => {
@@ -3526,10 +3708,10 @@ CopilotChatToggleButton.displayName = "CopilotChatToggleButton";
 var CopilotChatToggleButton_default = CopilotChatToggleButton;
 
 // src/components/chat/CopilotSidebarView.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 
 // src/components/chat/CopilotModalHeader.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_lucide_react8 = require("lucide-react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 function CopilotModalHeader({
@@ -3543,7 +3725,7 @@ function CopilotModalHeader({
   const configuration = useCopilotChatConfiguration();
   const fallbackTitle = configuration?.labels.modalHeaderTitle ?? CopilotChatDefaultLabels.modalHeaderTitle;
   const resolvedTitle = title ?? fallbackTitle;
-  const handleClose = (0, import_react25.useCallback)(() => {
+  const handleClose = (0, import_react26.useCallback)(() => {
     configuration?.setModalOpen(false);
   }, [configuration]);
   const BoundTitle = renderSlot(titleContent, CopilotModalHeader.Title, {
@@ -3619,8 +3801,8 @@ var SIDEBAR_TRANSITION_MS = 260;
 function CopilotSidebarView({ header, width, ...props }) {
   const configuration = useCopilotChatConfiguration();
   const isSidebarOpen = configuration?.isModalOpen ?? false;
-  const sidebarRef = (0, import_react26.useRef)(null);
-  const [sidebarWidth, setSidebarWidth] = (0, import_react26.useState)(width ?? DEFAULT_SIDEBAR_WIDTH);
+  const sidebarRef = (0, import_react27.useRef)(null);
+  const [sidebarWidth, setSidebarWidth] = (0, import_react27.useState)(width ?? DEFAULT_SIDEBAR_WIDTH);
   const widthToCss = (w) => {
     return typeof w === "number" ? `${w}px` : w;
   };
@@ -3630,7 +3812,7 @@ function CopilotSidebarView({ header, width, ...props }) {
     }
     return w;
   };
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (width !== void 0) {
       return;
     }
@@ -3709,7 +3891,7 @@ function CopilotSidebarView({ header, width, ...props }) {
 CopilotSidebarView.displayName = "CopilotSidebarView";
 
 // src/components/chat/CopilotPopupView.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var DEFAULT_POPUP_WIDTH = 420;
 var DEFAULT_POPUP_HEIGHT = 560;
@@ -3734,10 +3916,10 @@ function CopilotPopupView({
   const isPopupOpen = configuration?.isModalOpen ?? false;
   const setModalOpen = configuration?.setModalOpen;
   const labels = configuration?.labels ?? CopilotChatDefaultLabels;
-  const containerRef = (0, import_react27.useRef)(null);
-  const [isRendered, setIsRendered] = (0, import_react27.useState)(isPopupOpen);
-  const [isAnimatingOut, setIsAnimatingOut] = (0, import_react27.useState)(false);
-  (0, import_react27.useEffect)(() => {
+  const containerRef = (0, import_react28.useRef)(null);
+  const [isRendered, setIsRendered] = (0, import_react28.useState)(isPopupOpen);
+  const [isAnimatingOut, setIsAnimatingOut] = (0, import_react28.useState)(false);
+  (0, import_react28.useEffect)(() => {
     if (isPopupOpen) {
       setIsRendered(true);
       setIsAnimatingOut(false);
@@ -3753,7 +3935,7 @@ function CopilotPopupView({
     }, 200);
     return () => clearTimeout(timeout);
   }, [isPopupOpen, isRendered]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!isPopupOpen) {
       return;
     }
@@ -3769,7 +3951,7 @@ function CopilotPopupView({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isPopupOpen, setModalOpen]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!isPopupOpen) {
       return;
     }
@@ -3778,7 +3960,7 @@ function CopilotPopupView({
     }, 200);
     return () => clearTimeout(focusTimer);
   }, [isPopupOpen]);
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     if (!isPopupOpen || !clickOutsideToClose) {
       return;
     }
@@ -3803,10 +3985,10 @@ function CopilotPopupView({
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [isPopupOpen, clickOutsideToClose, setModalOpen]);
-  const headerElement = (0, import_react27.useMemo)(() => renderSlot(header, CopilotModalHeader, {}), [header]);
+  const headerElement = (0, import_react28.useMemo)(() => renderSlot(header, CopilotModalHeader, {}), [header]);
   const resolvedWidth = dimensionToCss(width, DEFAULT_POPUP_WIDTH);
   const resolvedHeight = dimensionToCss(height, DEFAULT_POPUP_HEIGHT);
-  const popupStyle = (0, import_react27.useMemo)(
+  const popupStyle = (0, import_react28.useMemo)(
     () => ({
       "--copilot-popup-width": resolvedWidth,
       "--copilot-popup-height": resolvedHeight,
@@ -3868,10 +4050,10 @@ function CopilotPopupView({
 CopilotPopupView.displayName = "CopilotPopupView";
 
 // src/components/chat/CopilotSidebar.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
-  const SidebarViewOverride = (0, import_react28.useMemo)(() => {
+  const SidebarViewOverride = (0, import_react29.useMemo)(() => {
     const Component = (viewProps) => {
       const { header: viewHeader, width: viewWidth, ...restProps } = viewProps;
       return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -3897,7 +4079,7 @@ function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
 CopilotSidebar.displayName = "CopilotSidebar";
 
 // src/components/chat/CopilotPopup.tsx
-var import_react29 = require("react");
+var import_react30 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function CopilotPopup({
   header,
@@ -3907,7 +4089,7 @@ function CopilotPopup({
   clickOutsideToClose,
   ...chatProps
 }) {
-  const PopupViewOverride = (0, import_react29.useMemo)(() => {
+  const PopupViewOverride = (0, import_react30.useMemo)(() => {
     const Component = (viewProps) => {
       const {
         header: viewHeader,
@@ -3953,12 +4135,12 @@ function defineToolCallRenderer(def) {
 }
 
 // src/components/WildcardToolCallRender.tsx
-var import_react30 = require("react");
+var import_react31 = require("react");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 var WildcardToolCallRender = defineToolCallRenderer({
   name: "*",
   render: ({ args, result, name, status }) => {
-    const [isExpanded, setIsExpanded] = (0, import_react30.useState)(false);
+    const [isExpanded, setIsExpanded] = (0, import_react31.useState)(false);
     const statusString = String(status);
     const isActive = statusString === "inProgress" || statusString === "executing";
     const isComplete = statusString === "complete";