@copilotkitnext/react 0.0.34-alpha.0 → 2.0.0-next.1

package/dist/index.mjs

@@ -2293,6 +2293,12 @@ function useHumanInTheLoop(tool, deps) {
 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 UseAgentUpdate = /* @__PURE__ */ ((UseAgentUpdate2) => {
+  UseAgentUpdate2["OnMessagesChanged"] = "OnMessagesChanged";
+  UseAgentUpdate2["OnStateChanged"] = "OnStateChanged";
+  UseAgentUpdate2["OnRunStatusChanged"] = "OnRunStatusChanged";
+  return UseAgentUpdate2;
+})(UseAgentUpdate || {});
 var ALL_UPDATES = [
   "OnMessagesChanged" /* OnMessagesChanged */,
   "OnStateChanged" /* OnStateChanged */,
@@ -3210,7 +3216,7 @@ CopilotChatSuggestionView.displayName = "CopilotChatSuggestionView";
 var CopilotChatSuggestionView_default = CopilotChatSuggestionView;
 
 // src/components/chat/CopilotChatMessageView.tsx
-import React12 from "react";
+import React12, { useEffect as useEffect12, useReducer as useReducer3 } from "react";
 import { twMerge as twMerge6 } from "tailwind-merge";
 import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 var MemoizedAssistantMessage = React12.memo(
@@ -3304,6 +3310,7 @@ var MemoizedCustomMessage = React12.memo(
     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;
+    if (JSON.stringify(prevProps.stateSnapshot) !== JSON.stringify(nextProps.stateSnapshot)) return false;
     return true;
   }
 );
@@ -3319,8 +3326,27 @@ function CopilotChatMessageView({
 }) {
   const renderCustomMessage = useRenderCustomMessages();
   const renderActivityMessage = useRenderActivityMessage();
+  const { copilotkit } = useCopilotKit();
+  const config = useCopilotChatConfiguration();
+  const [, forceUpdate] = useReducer3((x) => x + 1, 0);
+  useEffect12(() => {
+    if (!config?.agentId) return;
+    const agent = copilotkit.getAgent(config.agentId);
+    if (!agent) return;
+    const subscription = agent.subscribe({
+      onStateChanged: () => forceUpdate()
+    });
+    return () => subscription.unsubscribe();
+  }, [config?.agentId, copilotkit]);
+  const getStateSnapshotForMessage = (messageId) => {
+    if (!config) return void 0;
+    const runId = copilotkit.getRunIdForMessage(config.agentId, config.threadId, messageId);
+    if (!runId) return void 0;
+    return copilotkit.getStateByRun(config.agentId, config.threadId, runId);
+  };
   const messageElements = messages.flatMap((message) => {
     const elements = [];
+    const stateSnapshot = getStateSnapshotForMessage(message.id);
     if (renderCustomMessage) {
       elements.push(
         /* @__PURE__ */ jsx18(
@@ -3328,7 +3354,8 @@ function CopilotChatMessageView({
           {
             message,
             position: "before",
-            renderCustomMessage
+            renderCustomMessage,
+            stateSnapshot
           },
           `${message.id}-custom-before`
         )
@@ -3379,7 +3406,8 @@ function CopilotChatMessageView({
           {
             message,
             position: "after",
-            renderCustomMessage
+            renderCustomMessage,
+            stateSnapshot
           },
           `${message.id}-custom-after`
         )
@@ -3407,13 +3435,13 @@ CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
 var CopilotChatMessageView_default = CopilotChatMessageView;
 
 // src/components/chat/CopilotChatView.tsx
-import React13, { useRef as useRef7, useState as useState10, useEffect as useEffect13 } from "react";
+import React13, { useRef as useRef7, useState as useState10, useEffect as useEffect14 } 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 useState9, useEffect as useEffect12 } from "react";
+import { useState as useState9, useEffect as useEffect13 } from "react";
 function useKeyboardHeight() {
   const [keyboardState, setKeyboardState] = useState9({
     isKeyboardOpen: false,
@@ -3421,7 +3449,7 @@ function useKeyboardHeight() {
     availableHeight: typeof window !== "undefined" ? window.innerHeight : 0,
     viewportHeight: typeof window !== "undefined" ? window.innerHeight : 0
   });
-  useEffect12(() => {
+  useEffect13(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -3479,7 +3507,7 @@ function CopilotChatView({
   const [isResizing, setIsResizing] = useState10(false);
   const resizeTimeoutRef = useRef7(null);
   const { isKeyboardOpen, keyboardHeight, availableHeight } = useKeyboardHeight();
-  useEffect13(() => {
+  useEffect14(() => {
     const element = inputContainerRef.current;
     if (!element) return;
     const resizeObserver = new ResizeObserver((entries) => {
@@ -3591,10 +3619,10 @@ function CopilotChatView({
     const [hasMounted, setHasMounted] = useState10(false);
     const { scrollRef, contentRef, scrollToBottom } = useStickToBottom();
     const [showScrollButton, setShowScrollButton] = useState10(false);
-    useEffect13(() => {
+    useEffect14(() => {
       setHasMounted(true);
     }, []);
-    useEffect13(() => {
+    useEffect14(() => {
       if (autoScroll) return;
       const scrollElement = scrollRef.current;
       if (!scrollElement) return;
@@ -3726,7 +3754,7 @@ 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 useCallback8, useEffect as useEffect14, useMemo as useMemo10 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect15, useMemo as useMemo10 } from "react";
 import { merge } from "ts-deepmerge";
 import { AGUIConnectNotImplementedError } from "@ag-ui/client";
 import { jsx as jsx20 } from "react/jsx-runtime";
@@ -3746,7 +3774,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     suggestionView: providedSuggestionView,
     ...restProps
   } = props;
-  useEffect14(() => {
+  useEffect15(() => {
     const connect = async (agent2) => {
       try {
         await copilotkit.connectAgent({ agent: agent2 });
@@ -3965,7 +3993,7 @@ CopilotChatToggleButton.displayName = "CopilotChatToggleButton";
 var CopilotChatToggleButton_default = CopilotChatToggleButton;
 
 // src/components/chat/CopilotSidebarView.tsx
-import { useEffect as useEffect15, useRef as useRef8, useState as useState12 } from "react";
+import { useEffect as useEffect16, useRef as useRef8, useState as useState12 } from "react";
 
 // src/components/chat/CopilotModalHeader.tsx
 import { useCallback as useCallback9 } from "react";
@@ -4069,7 +4097,7 @@ function CopilotSidebarView({ header, width, ...props }) {
     }
     return w;
   };
-  useEffect15(() => {
+  useEffect16(() => {
     if (width !== void 0) {
       return;
     }
@@ -4148,7 +4176,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 useState13 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo11, useRef as useRef9, useState as useState13 } from "react";
 import { Fragment as Fragment8, jsx as jsx24, jsxs as jsxs15 } from "react/jsx-runtime";
 var DEFAULT_POPUP_WIDTH = 420;
 var DEFAULT_POPUP_HEIGHT = 560;
@@ -4176,7 +4204,7 @@ function CopilotPopupView({
   const containerRef = useRef9(null);
   const [isRendered, setIsRendered] = useState13(isPopupOpen);
   const [isAnimatingOut, setIsAnimatingOut] = useState13(false);
-  useEffect16(() => {
+  useEffect17(() => {
     if (isPopupOpen) {
       setIsRendered(true);
       setIsAnimatingOut(false);
@@ -4192,7 +4220,7 @@ function CopilotPopupView({
     }, 200);
     return () => clearTimeout(timeout);
   }, [isPopupOpen, isRendered]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!isPopupOpen) {
       return;
     }
@@ -4208,7 +4236,7 @@ function CopilotPopupView({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isPopupOpen, setModalOpen]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!isPopupOpen) {
       return;
     }
@@ -4217,7 +4245,7 @@ function CopilotPopupView({
     }, 200);
     return () => clearTimeout(focusTimer);
   }, [isPopupOpen]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!isPopupOpen || !clickOutsideToClose) {
       return;
     }
@@ -4481,6 +4509,7 @@ export {
   MCPAppsActivityContentSchema,
   MCPAppsActivityRenderer,
   MCPAppsActivityType,
+  UseAgentUpdate,
   WildcardToolCallRender,
   defineToolCallRenderer,
   useAgent,