@copilotkitnext/react 0.0.28 → 0.0.30

package/dist/index.mjs

@@ -1364,7 +1364,7 @@ CopilotChatInput.AddMenuButton.displayName = "CopilotChatInput.AddMenuButton";
 var CopilotChatInput_default = CopilotChatInput;
 
 // src/components/chat/CopilotChatAssistantMessage.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import {
   Copy,
   Check as Check2,
@@ -1378,7 +1378,7 @@ import "katex/dist/katex.min.css";
 import { Streamdown } from "streamdown";
 
 // src/hooks/use-render-tool-call.tsx
-import React6, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo4, useState as useState4, useSyncExternalStore } from "react";
+import React6, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo4, useState as useState5, useSyncExternalStore } from "react";
 import { ToolCallStatus } from "@copilotkitnext/core";
 
 // src/providers/CopilotKitProvider.tsx
@@ -1388,8 +1388,8 @@ import {
   useMemo as useMemo3,
   useEffect as useEffect4,
   useReducer,
-  useRef as useRef4,
-  useState as useState3
+  useRef as useRef3,
+  useState as useState4
 } from "react";
 import { z } from "zod";
 
@@ -1438,36 +1438,29 @@ var CopilotKitCoreReact = class extends CopilotKitCore {
 // src/components/CopilotKitInspector.tsx
 import * as React4 from "react";
 import { createComponent } from "@lit-labs/react";
-import {
-  WEB_INSPECTOR_TAG,
-  WebInspectorElement,
-  defineWebInspector
-} from "@copilotkitnext/web-inspector";
 import { jsx as jsx7 } from "react/jsx-runtime";
-defineWebInspector();
-var CopilotKitInspectorBase = createComponent({
-  tagName: WEB_INSPECTOR_TAG,
-  elementClass: WebInspectorElement,
-  react: React4
-});
-var CopilotKitInspector = React4.forwardRef(
-  ({ core, ...rest }, ref) => {
-    const innerRef = React4.useRef(null);
-    React4.useImperativeHandle(ref, () => innerRef.current, []);
-    React4.useEffect(() => {
-      if (innerRef.current) {
-        innerRef.current.core = core ?? null;
-      }
-    }, [core]);
-    return /* @__PURE__ */ jsx7(
-      CopilotKitInspectorBase,
-      {
-        ...rest,
-        ref: innerRef
+var CopilotKitInspector = ({ core, ...rest }) => {
+  const [InspectorComponent, setInspectorComponent] = React4.useState(null);
+  React4.useEffect(() => {
+    let mounted = true;
+    import("@copilotkitnext/web-inspector").then((mod) => {
+      mod.defineWebInspector?.();
+      const Component = createComponent({
+        tagName: mod.WEB_INSPECTOR_TAG,
+        elementClass: mod.WebInspectorElement,
+        react: React4
+      });
+      if (mounted) {
+        setInspectorComponent(() => Component);
       }
-    );
-  }
-);
+    });
+    return () => {
+      mounted = false;
+    };
+  }, []);
+  if (!InspectorComponent) return null;
+  return /* @__PURE__ */ jsx7(InspectorComponent, { ...rest, core: core ?? null });
+};
 CopilotKitInspector.displayName = "CopilotKitInspector";
 
 // src/providers/CopilotKitProvider.tsx
@@ -1478,7 +1471,7 @@ var CopilotKitContext = createContext2({
 function useStableArrayProp(prop, warningMessage, isMeaningfulChange) {
   const empty = useMemo3(() => [], []);
   const value = prop ?? empty;
-  const initial = useRef4(value);
+  const initial = useRef3(value);
   useEffect4(() => {
     if (warningMessage && value !== initial.current && (isMeaningfulChange ? isMeaningfulChange(initial.current, value) : true)) {
       console.error(warningMessage);
@@ -1500,7 +1493,7 @@ var CopilotKitProvider = ({
   showDevConsole = false,
   useSingleEndpoint = false
 }) => {
-  const [shouldRenderInspector, setShouldRenderInspector] = useState3(false);
+  const [shouldRenderInspector, setShouldRenderInspector] = useState4(false);
   useEffect4(() => {
     if (typeof window === "undefined") {
       return;
@@ -1728,7 +1721,7 @@ function useRenderToolCall() {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
   const agentId = config?.agentId ?? DEFAULT_AGENT_ID2;
-  const [executingToolCallIds, setExecutingToolCallIds] = useState4(() => /* @__PURE__ */ new Set());
+  const [executingToolCallIds, setExecutingToolCallIds] = useState5(() => /* @__PURE__ */ new Set());
   const renderToolCalls = useSyncExternalStore(
     (callback) => {
       return copilotkit.subscribe({
@@ -1931,11 +1924,11 @@ function useFrontendTool(tool, deps) {
 }
 
 // src/hooks/use-human-in-the-loop.tsx
-import { useCallback as useCallback4, useRef as useRef5, useEffect as useEffect7 } from "react";
+import { useCallback as useCallback4, useRef as useRef4, useEffect as useEffect7 } from "react";
 import React7 from "react";
 function useHumanInTheLoop(tool, deps) {
   const { copilotkit } = useCopilotKit();
-  const resolvePromiseRef = useRef5(null);
+  const resolvePromiseRef = useRef4(null);
   const respond = useCallback4(async (result) => {
     if (resolvePromiseRef.current) {
       resolvePromiseRef.current(result);
@@ -2099,17 +2092,17 @@ function useAgentContext(context) {
 }
 
 // src/hooks/use-suggestions.tsx
-import { useCallback as useCallback5, useEffect as useEffect10, useMemo as useMemo7, useState as useState5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect10, useMemo as useMemo7, useState as useState6 } from "react";
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID5 } from "@copilotkitnext/shared";
 function useSuggestions({ agentId } = {}) {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
   const resolvedAgentId = useMemo7(() => agentId ?? config?.agentId ?? DEFAULT_AGENT_ID5, [agentId, config?.agentId]);
-  const [suggestions, setSuggestions] = useState5(() => {
+  const [suggestions, setSuggestions] = useState6(() => {
     const result = copilotkit.getSuggestions(resolvedAgentId);
     return result.suggestions;
   });
-  const [isLoading, setIsLoading] = useState5(() => {
+  const [isLoading, setIsLoading] = useState6(() => {
     const result = copilotkit.getSuggestions(resolvedAgentId);
     return result.isLoading;
   });
@@ -2163,7 +2156,7 @@ function useSuggestions({ agentId } = {}) {
 }
 
 // src/hooks/use-configure-suggestions.tsx
-import { useCallback as useCallback6, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef5 } from "react";
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID6 } from "@copilotkitnext/shared";
 function useConfigureSuggestions(config, deps) {
   const { copilotkit } = useCopilotKit();
@@ -2171,7 +2164,7 @@ function useConfigureSuggestions(config, deps) {
   const extraDeps = deps ?? [];
   const resolvedConsumerAgentId = useMemo8(() => chatConfig?.agentId ?? DEFAULT_AGENT_ID6, [chatConfig?.agentId]);
   const rawConsumerAgentId = useMemo8(() => config ? config.consumerAgentId : void 0, [config]);
-  const normalizationCacheRef = useRef6({
+  const normalizationCacheRef = useRef5({
     serialized: null,
     config: null
   });
@@ -2205,9 +2198,9 @@ function useConfigureSuggestions(config, deps) {
     normalizationCacheRef.current = { serialized, config: built };
     return { normalizedConfig: built, serializedConfig: serialized };
   }, [config, resolvedConsumerAgentId, ...extraDeps]);
-  const latestConfigRef = useRef6(null);
+  const latestConfigRef = useRef5(null);
   latestConfigRef.current = normalizedConfig;
-  const previousSerializedConfigRef = useRef6(null);
+  const previousSerializedConfigRef = useRef5(null);
   const targetAgentId = useMemo8(() => {
     if (!normalizedConfig) {
       return resolvedConsumerAgentId;
@@ -2474,7 +2467,7 @@ function CopilotChatAssistantMessage({
   CopilotChatAssistantMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    const [copied, setCopied] = useState6(false);
+    const [copied, setCopied] = useState7(false);
     const handleClick = (event) => {
       setCopied(true);
       setTimeout(() => setCopied(false), 2e3);
@@ -2552,7 +2545,7 @@ CopilotChatAssistantMessage.RegenerateButton.displayName = "CopilotChatAssistant
 var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
 
 // src/components/chat/CopilotChatUserMessage.tsx
-import { useMemo as useMemo9, useState as useState7 } from "react";
+import { useMemo as useMemo9, useState as useState8 } 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";
@@ -2715,7 +2708,7 @@ function CopilotChatUserMessage({
   CopilotChatUserMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    const [copied, setCopied] = useState7(false);
+    const [copied, setCopied] = useState8(false);
     const handleClick = (event) => {
       setCopied(true);
       setTimeout(() => setCopied(false), 2e3);
@@ -3115,15 +3108,15 @@ CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
 var CopilotChatMessageView_default = CopilotChatMessageView;
 
 // src/components/chat/CopilotChatView.tsx
-import React12, { useRef as useRef7, useState as useState9, useEffect as useEffect13 } from "react";
+import React12, { useRef as useRef6, useState as useState10, 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";
 
 // src/hooks/use-keyboard-height.tsx
-import { useState as useState8, useEffect as useEffect12 } from "react";
+import { useState as useState9, useEffect as useEffect12 } from "react";
 function useKeyboardHeight() {
-  const [keyboardState, setKeyboardState] = useState8({
+  const [keyboardState, setKeyboardState] = useState9({
     isKeyboardOpen: false,
     keyboardHeight: 0,
     availableHeight: typeof window !== "undefined" ? window.innerHeight : 0,
@@ -3182,10 +3175,10 @@ function CopilotChatView({
   className,
   ...props
 }) {
-  const inputContainerRef = useRef7(null);
-  const [inputContainerHeight, setInputContainerHeight] = useState9(0);
-  const [isResizing, setIsResizing] = useState9(false);
-  const resizeTimeoutRef = useRef7(null);
+  const inputContainerRef = useRef6(null);
+  const [inputContainerHeight, setInputContainerHeight] = useState10(0);
+  const [isResizing, setIsResizing] = useState10(false);
+  const resizeTimeoutRef = useRef6(null);
   const { isKeyboardOpen, keyboardHeight, availableHeight } = useKeyboardHeight();
   useEffect13(() => {
     const element = inputContainerRef.current;
@@ -3296,9 +3289,9 @@ function CopilotChatView({
     className,
     ...props
   }) => {
-    const [hasMounted, setHasMounted] = useState9(false);
+    const [hasMounted, setHasMounted] = useState10(false);
     const { scrollRef, contentRef, scrollToBottom } = useStickToBottom();
-    const [showScrollButton, setShowScrollButton] = useState9(false);
+    const [showScrollButton, setShowScrollButton] = useState10(false);
     useEffect13(() => {
       setHasMounted(true);
     }, []);
@@ -3556,7 +3549,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 })(CopilotChat || (CopilotChat = {}));
 
 // src/components/chat/CopilotChatToggleButton.tsx
-import React13, { useState as useState10 } from "react";
+import React13, { useState as useState11 } from "react";
 import { MessageCircle, X as X2 } from "lucide-react";
 import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
 var DefaultOpenIcon = ({
@@ -3587,7 +3580,7 @@ var CopilotChatToggleButton = React13.forwardRef(function CopilotChatToggleButto
   const { onClick, type, disabled, ...restProps } = buttonProps;
   const configuration = useCopilotChatConfiguration();
   const labels = configuration?.labels ?? CopilotChatDefaultLabels;
-  const [fallbackOpen, setFallbackOpen] = useState10(false);
+  const [fallbackOpen, setFallbackOpen] = useState11(false);
   const isOpen = configuration?.isModalOpen ?? fallbackOpen;
   const setModalOpen = configuration?.setModalOpen ?? setFallbackOpen;
   const handleClick = (event) => {
@@ -3673,7 +3666,7 @@ CopilotChatToggleButton.displayName = "CopilotChatToggleButton";
 var CopilotChatToggleButton_default = CopilotChatToggleButton;
 
 // src/components/chat/CopilotSidebarView.tsx
-import { useEffect as useEffect15, useRef as useRef8, useState as useState11 } from "react";
+import { useEffect as useEffect15, useRef as useRef7, useState as useState12 } from "react";
 
 // src/components/chat/CopilotModalHeader.tsx
 import { useCallback as useCallback8 } from "react";
@@ -3766,8 +3759,8 @@ var SIDEBAR_TRANSITION_MS = 260;
 function CopilotSidebarView({ header, width, ...props }) {
   const configuration = useCopilotChatConfiguration();
   const isSidebarOpen = configuration?.isModalOpen ?? false;
-  const sidebarRef = useRef8(null);
-  const [sidebarWidth, setSidebarWidth] = useState11(width ?? DEFAULT_SIDEBAR_WIDTH);
+  const sidebarRef = useRef7(null);
+  const [sidebarWidth, setSidebarWidth] = useState12(width ?? DEFAULT_SIDEBAR_WIDTH);
   const widthToCss = (w) => {
     return typeof w === "number" ? `${w}px` : w;
   };
@@ -3856,7 +3849,7 @@ function CopilotSidebarView({ header, width, ...props }) {
 CopilotSidebarView.displayName = "CopilotSidebarView";
 
 // src/components/chat/CopilotPopupView.tsx
-import { useEffect as useEffect16, useMemo as useMemo11, useRef as useRef9, useState as useState12 } from "react";
+import { useEffect as useEffect16, useMemo as useMemo11, useRef as useRef8, useState as useState13 } 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;
@@ -3881,9 +3874,9 @@ function CopilotPopupView({
   const isPopupOpen = configuration?.isModalOpen ?? false;
   const setModalOpen = configuration?.setModalOpen;
   const labels = configuration?.labels ?? CopilotChatDefaultLabels;
-  const containerRef = useRef9(null);
-  const [isRendered, setIsRendered] = useState12(isPopupOpen);
-  const [isAnimatingOut, setIsAnimatingOut] = useState12(false);
+  const containerRef = useRef8(null);
+  const [isRendered, setIsRendered] = useState13(isPopupOpen);
+  const [isAnimatingOut, setIsAnimatingOut] = useState13(false);
   useEffect16(() => {
     if (isPopupOpen) {
       setIsRendered(true);
@@ -4100,12 +4093,12 @@ function defineToolCallRenderer(def) {
 }
 
 // src/components/WildcardToolCallRender.tsx
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 var WildcardToolCallRender = defineToolCallRenderer({
   name: "*",
   render: ({ args, result, name, status }) => {
-    const [isExpanded, setIsExpanded] = useState13(false);
+    const [isExpanded, setIsExpanded] = useState14(false);
     const statusString = String(status);
     const isActive = statusString === "inProgress" || statusString === "executing";
     const isComplete = statusString === "complete";