@copilotkitnext/react 0.0.22 → 0.0.24

package/dist/index.mjs

@@ -484,7 +484,16 @@ CopilotChatAudioRecorder.displayName = "WebAudioRecorder";
 
 // src/lib/slots.tsx
 import React2 from "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 React2.createElement(DefaultComponent, {
       ...props,
@@ -492,8 +501,7 @@ function renderSlot(slot, DefaultComponent, props) {
     });
   }
   if (typeof slot === "function") {
-    const Comp = slot;
-    return React2.createElement(Comp, props);
+    return React2.createElement(slot, props);
   }
   if (slot && typeof slot === "object" && !React2.isValidElement(slot)) {
     return React2.createElement(DefaultComponent, {
@@ -503,6 +511,30 @@ function renderSlot(slot, DefaultComponent, props) {
   }
   return React2.createElement(DefaultComponent, props);
 }
+var MemoizedSlotWrapper = React2.memo(
+  React2.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 React2.createElement(MemoizedSlotWrapper, {
+    ...props,
+    $slot: slot,
+    $component: DefaultComponent
+  });
+}
 
 // src/components/chat/CopilotChatInput.tsx
 import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -1346,7 +1378,7 @@ import "katex/dist/katex.min.css";
 import { Streamdown } from "streamdown";
 
 // src/hooks/use-render-tool-call.tsx
-import { useCallback as useCallback2, useEffect as useEffect5, useState as useState4, useSyncExternalStore } from "react";
+import React6, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo4, useState as useState4, useSyncExternalStore } from "react";
 import { ToolCallStatus } from "@copilotkitnext/core";
 
 // src/providers/CopilotKitProvider.tsx
@@ -1635,6 +1667,63 @@ var useCopilotKit = () => {
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID2 } from "@copilotkitnext/shared";
 import { partialJSONParse } from "@copilotkitnext/shared";
 import { jsx as jsx9 } from "react/jsx-runtime";
+var ToolCallRenderer = React6.memo(
+  function ToolCallRenderer2({
+    toolCall,
+    toolMessage,
+    RenderComponent,
+    isExecuting
+  }) {
+    const args = useMemo4(
+      () => partialJSONParse(toolCall.function.arguments),
+      [toolCall.function.arguments]
+    );
+    const toolName = toolCall.function.name;
+    if (toolMessage) {
+      return /* @__PURE__ */ jsx9(
+        RenderComponent,
+        {
+          name: toolName,
+          args,
+          status: ToolCallStatus.Complete,
+          result: toolMessage.content
+        }
+      );
+    } else if (isExecuting) {
+      return /* @__PURE__ */ jsx9(
+        RenderComponent,
+        {
+          name: toolName,
+          args,
+          status: ToolCallStatus.Executing,
+          result: void 0
+        }
+      );
+    } else {
+      return /* @__PURE__ */ jsx9(
+        RenderComponent,
+        {
+          name: toolName,
+          args,
+          status: 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();
@@ -1683,42 +1772,17 @@ function useRenderToolCall() {
         return null;
       }
       const RenderComponent = renderConfig.render;
-      const args = partialJSONParse(toolCall.function.arguments);
-      const toolName = toolCall.function.name;
-      if (toolMessage) {
-        return /* @__PURE__ */ jsx9(
-          RenderComponent,
-          {
-            name: toolName,
-            args,
-            status: ToolCallStatus.Complete,
-            result: toolMessage.content
-          },
-          toolCall.id
-        );
-      } else if (executingToolCallIds.has(toolCall.id)) {
-        return /* @__PURE__ */ jsx9(
-          RenderComponent,
-          {
-            name: toolName,
-            args,
-            status: ToolCallStatus.Executing,
-            result: void 0
-          },
-          toolCall.id
-        );
-      } else {
-        return /* @__PURE__ */ jsx9(
+      const isExecuting = executingToolCallIds.has(toolCall.id);
+      return /* @__PURE__ */ jsx9(
+        ToolCallRenderer,
+        {
+          toolCall,
+          toolMessage,
           RenderComponent,
-          {
-            name: toolName,
-            args,
-            status: ToolCallStatus.InProgress,
-            result: void 0
-          },
-          toolCall.id
-        );
-      }
+          isExecuting
+        },
+        toolCall.id
+      );
     },
     [renderToolCalls, executingToolCallIds, agentId]
   );
@@ -1831,8 +1895,10 @@ function useRenderActivityMessage() {
 
 // src/hooks/use-frontend-tool.tsx
 import { useEffect as useEffect6 } from "react";
-function useFrontendTool(tool) {
+var EMPTY_DEPS = [];
+function useFrontendTool(tool, deps) {
   const { copilotkit } = useCopilotKit();
+  const extraDeps = deps ?? EMPTY_DEPS;
   useEffect6(() => {
     const name = tool.name;
     if (copilotkit.getTool({ toolName: name, agentId: tool.agentId })) {
@@ -1861,13 +1927,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
 import { useCallback as useCallback4, useRef as useRef5, useEffect as useEffect7 } from "react";
 import React7 from "react";
-function useHumanInTheLoop(tool) {
+function useHumanInTheLoop(tool, deps) {
   const { copilotkit } = useCopilotKit();
   const resolvePromiseRef = useRef5(null);
   const respond = useCallback4(async (result) => {
@@ -1918,7 +1984,7 @@ function useHumanInTheLoop(tool) {
     handler,
     render: RenderComponent
   };
-  useFrontendTool(frontendTool);
+  useFrontendTool(frontendTool, deps);
   useEffect7(() => {
     return () => {
       const keyOf = (rc) => `${rc.agentId ?? ""}:${rc.name}`;
@@ -1932,7 +1998,7 @@ function useHumanInTheLoop(tool) {
 }
 
 // src/hooks/use-agent.tsx
-import { useMemo as useMemo4, useEffect as useEffect8, useReducer as useReducer2 } from "react";
+import { useMemo as useMemo5, useEffect as useEffect8, useReducer as useReducer2 } from "react";
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID4 } from "@copilotkitnext/shared";
 import { ProxiedCopilotRuntimeAgent, CopilotKitCoreRuntimeConnectionStatus } from "@copilotkitnext/core";
 var ALL_UPDATES = [
@@ -1944,11 +2010,11 @@ function useAgent({ agentId, updates } = {}) {
   agentId ??= DEFAULT_AGENT_ID4;
   const { copilotkit } = useCopilotKit();
   const [, forceUpdate] = useReducer2((x) => x + 1, 0);
-  const updateFlags = useMemo4(
+  const updateFlags = useMemo5(
     () => updates ?? ALL_UPDATES,
     [JSON.stringify(updates)]
   );
-  const agent = useMemo4(() => {
+  const agent = useMemo5(() => {
     const existing = copilotkit.getAgent(agentId);
     if (existing) {
       return existing;
@@ -2027,12 +2093,12 @@ function useAgentContext(context) {
 }
 
 // src/hooks/use-suggestions.tsx
-import { useCallback as useCallback5, useEffect as useEffect10, useMemo as useMemo5, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect10, useMemo as useMemo6, useState as useState5 } from "react";
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID5 } from "@copilotkitnext/shared";
 function useSuggestions({ agentId } = {}) {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
-  const resolvedAgentId = useMemo5(() => agentId ?? config?.agentId ?? DEFAULT_AGENT_ID5, [agentId, config?.agentId]);
+  const resolvedAgentId = useMemo6(() => agentId ?? config?.agentId ?? DEFAULT_AGENT_ID5, [agentId, config?.agentId]);
   const [suggestions, setSuggestions] = useState5(() => {
     const result = copilotkit.getSuggestions(resolvedAgentId);
     return result.suggestions;
@@ -2091,20 +2157,19 @@ function useSuggestions({ agentId } = {}) {
 }
 
 // src/hooks/use-configure-suggestions.tsx
-import { useCallback as useCallback6, useEffect as useEffect11, useMemo as useMemo6, useRef as useRef6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect11, useMemo as useMemo7, useRef as useRef6 } from "react";
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID6 } from "@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 resolvedConsumerAgentId = useMemo6(() => chatConfig?.agentId ?? DEFAULT_AGENT_ID6, [chatConfig?.agentId]);
-  const rawConsumerAgentId = useMemo6(() => config ? config.consumerAgentId : void 0, [config]);
+  const extraDeps = deps ?? [];
+  const resolvedConsumerAgentId = useMemo7(() => chatConfig?.agentId ?? DEFAULT_AGENT_ID6, [chatConfig?.agentId]);
+  const rawConsumerAgentId = useMemo7(() => config ? config.consumerAgentId : void 0, [config]);
   const normalizationCacheRef = useRef6({
     serialized: null,
     config: null
   });
-  const { normalizedConfig, serializedConfig } = useMemo6(() => {
+  const { normalizedConfig, serializedConfig } = useMemo7(() => {
     if (!config) {
       normalizationCacheRef.current = { serialized: null, config: null };
       return { normalizedConfig: null, serializedConfig: null };
@@ -2137,7 +2202,7 @@ function useConfigureSuggestions(config, options) {
   const latestConfigRef = useRef6(null);
   latestConfigRef.current = normalizedConfig;
   const previousSerializedConfigRef = useRef6(null);
-  const targetAgentId = useMemo6(() => {
+  const targetAgentId = useMemo7(() => {
     if (!normalizedConfig) {
       return resolvedConsumerAgentId;
     }
@@ -2481,7 +2546,7 @@ CopilotChatAssistantMessage.RegenerateButton.displayName = "CopilotChatAssistant
 var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
 
 // src/components/chat/CopilotChatUserMessage.tsx
-import { useMemo as useMemo7, useState as useState7 } from "react";
+import { useMemo as useMemo8, useState as useState7 } from "react";
 import { Copy as Copy2, Check as Check3, Edit, ChevronLeft, ChevronRight } from "lucide-react";
 import { twMerge as twMerge5 } from "tailwind-merge";
 import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -2515,7 +2580,7 @@ function CopilotChatUserMessage({
   className,
   ...props
 }) {
-  const flattenedContent = useMemo7(
+  const flattenedContent = useMemo8(
     () => flattenUserMessageContent(message.content),
     [message.content]
   );
@@ -2847,8 +2912,103 @@ CopilotChatSuggestionView.displayName = "CopilotChatSuggestionView";
 var CopilotChatSuggestionView_default = CopilotChatSuggestionView;
 
 // src/components/chat/CopilotChatMessageView.tsx
+import React11 from "react";
 import { twMerge as twMerge6 } from "tailwind-merge";
 import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+var MemoizedAssistantMessage = React11.memo(
+  function MemoizedAssistantMessage2({
+    message,
+    messages,
+    isRunning,
+    AssistantMessageComponent
+  }) {
+    return /* @__PURE__ */ jsx17(
+      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 = React11.memo(
+  function MemoizedUserMessage2({
+    message,
+    UserMessageComponent
+  }) {
+    return /* @__PURE__ */ jsx17(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 = React11.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 = React11.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,
@@ -2865,40 +3025,66 @@ function CopilotChatMessageView({
     const elements = [];
     if (renderCustomMessage) {
       elements.push(
-        renderCustomMessage({
-          message,
-          position: "before"
-        })
+        /* @__PURE__ */ jsx17(
+          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__ */ jsx17(
+          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__ */ jsx17(
+          MemoizedUserMessage,
+          {
+            message,
+            UserMessageComponent: UserComponent
+          },
+          message.id
+        )
       );
     } else if (message.role === "activity") {
-      const renderedActivity = renderActivityMessage(message);
-      if (renderedActivity) {
-        elements.push(renderedActivity);
-      }
+      elements.push(
+        /* @__PURE__ */ jsx17(
+          MemoizedActivityMessage,
+          {
+            message,
+            renderActivityMessage
+          },
+          message.id
+        )
+      );
     }
     if (renderCustomMessage) {
       elements.push(
-        renderCustomMessage({
-          message,
-          position: "after"
-        })
+        /* @__PURE__ */ jsx17(
+          MemoizedCustomMessage,
+          {
+            message,
+            position: "after",
+            renderCustomMessage
+          },
+          `${message.id}-custom-after`
+        )
       );
     }
     return elements;
@@ -2923,7 +3109,7 @@ CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
 var CopilotChatMessageView_default = CopilotChatMessageView;
 
 // src/components/chat/CopilotChatView.tsx
-import React11, { useRef as useRef7, useState as useState9, useEffect as useEffect13 } from "react";
+import React12, { useRef as useRef7, useState as useState9, useEffect as useEffect13 } from "react";
 import { twMerge as twMerge7 } from "tailwind-merge";
 import { StickToBottom, useStickToBottom, useStickToBottomContext } from "use-stick-to-bottom";
 import { ChevronDown } from "lucide-react";
@@ -3031,16 +3217,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,
@@ -3214,7 +3396,7 @@ function CopilotChatView({
       ...props
     }
   );
-  CopilotChatView2.InputContainer = React11.forwardRef(({ children, className, keyboardHeight = 0, ...props }, ref) => /* @__PURE__ */ jsx18(
+  CopilotChatView2.InputContainer = React12.forwardRef(({ children, className, keyboardHeight = 0, ...props }, ref) => /* @__PURE__ */ jsx18(
     "div",
     {
       ref,
@@ -3246,14 +3428,14 @@ var CopilotChatView_default = CopilotChatView;
 
 // src/components/chat/CopilotChat.tsx
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID7, randomUUID as randomUUID2 } from "@copilotkitnext/shared";
-import { useCallback as useCallback7, useEffect as useEffect14, useMemo as useMemo8 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect14, useMemo as useMemo9 } from "react";
 import { merge } from "ts-deepmerge";
 import { AGUIConnectNotImplementedError } from "@ag-ui/client";
 import { jsx as jsx19 } from "react/jsx-runtime";
 function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen, ...props }) {
   const existingConfig = useCopilotChatConfiguration();
   const resolvedAgentId = agentId ?? existingConfig?.agentId ?? DEFAULT_AGENT_ID7;
-  const resolvedThreadId = useMemo8(
+  const resolvedThreadId = useMemo9(
     () => threadId ?? existingConfig?.threadId ?? randomUUID2(),
     [threadId, existingConfig?.threadId]
   );
@@ -3368,7 +3550,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 })(CopilotChat || (CopilotChat = {}));
 
 // src/components/chat/CopilotChatToggleButton.tsx
-import React12, { useState as useState10 } from "react";
+import React13, { useState as useState10 } from "react";
 import { MessageCircle, X as X2 } from "lucide-react";
 import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 var DefaultOpenIcon = ({
@@ -3395,7 +3577,7 @@ 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 = React12.forwardRef(function CopilotChatToggleButton2({ openIcon, closeIcon, className, ...buttonProps }, ref) {
+var CopilotChatToggleButton = React13.forwardRef(function CopilotChatToggleButton2({ openIcon, closeIcon, className, ...buttonProps }, ref) {
   const { onClick, type, disabled, ...restProps } = buttonProps;
   const configuration = useCopilotChatConfiguration();
   const labels = configuration?.labels ?? CopilotChatDefaultLabels;
@@ -3668,7 +3850,7 @@ function CopilotSidebarView({ header, width, ...props }) {
 CopilotSidebarView.displayName = "CopilotSidebarView";
 
 // src/components/chat/CopilotPopupView.tsx
-import { useEffect as useEffect16, useMemo as useMemo9, useRef as useRef9, useState as useState12 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo10, useRef as useRef9, useState as useState12 } from "react";
 import { Fragment as Fragment8, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 var DEFAULT_POPUP_WIDTH = 420;
 var DEFAULT_POPUP_HEIGHT = 560;
@@ -3762,10 +3944,10 @@ function CopilotPopupView({
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [isPopupOpen, clickOutsideToClose, setModalOpen]);
-  const headerElement = useMemo9(() => renderSlot(header, CopilotModalHeader, {}), [header]);
+  const headerElement = useMemo10(() => renderSlot(header, CopilotModalHeader, {}), [header]);
   const resolvedWidth = dimensionToCss(width, DEFAULT_POPUP_WIDTH);
   const resolvedHeight = dimensionToCss(height, DEFAULT_POPUP_HEIGHT);
-  const popupStyle = useMemo9(
+  const popupStyle = useMemo10(
     () => ({
       "--copilot-popup-width": resolvedWidth,
       "--copilot-popup-height": resolvedHeight,
@@ -3827,10 +4009,10 @@ function CopilotPopupView({
 CopilotPopupView.displayName = "CopilotPopupView";
 
 // src/components/chat/CopilotSidebar.tsx
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo11 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
-  const SidebarViewOverride = useMemo10(() => {
+  const SidebarViewOverride = useMemo11(() => {
     const Component = (viewProps) => {
       const { header: viewHeader, width: viewWidth, ...restProps } = viewProps;
       return /* @__PURE__ */ jsx24(
@@ -3856,7 +4038,7 @@ function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
 CopilotSidebar.displayName = "CopilotSidebar";
 
 // src/components/chat/CopilotPopup.tsx
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo12 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 function CopilotPopup({
   header,
@@ -3866,7 +4048,7 @@ function CopilotPopup({
   clickOutsideToClose,
   ...chatProps
 }) {
-  const PopupViewOverride = useMemo11(() => {
+  const PopupViewOverride = useMemo12(() => {
     const Component = (viewProps) => {
       const {
         header: viewHeader,