npm - @copilotkitnext/react - Versions diffs - 0.0.0-max-changeset-20260109200053 → 0.0.0-max-no-peerage-20260115011549 - Mend

@copilotkitnext/react 0.0.0-max-changeset-20260109200053 → 0.0.0-max-no-peerage-20260115011549

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.mjs CHANGED Viewed

@@ -1,7 +1,6 @@
 "use client";
 // src/index.ts
-export * from "@ag-ui/core";
 export * from "@ag-ui/client";
 // src/components/chat/CopilotChatInput.tsx
@@ -1386,7 +1385,9 @@ import { createContext as createContext2, useContext as useContext2, useMemo as
 import { z as z2 } from "zod";
 // src/lib/react-core.ts
-import { CopilotKitCore } from "@copilotkitnext/core";
+import {
+  CopilotKitCore
+} from "@copilotkitnext/core";
 var CopilotKitCoreReact = class extends CopilotKitCore {
   _renderToolCalls = [];
   _renderCustomMessages = [];
@@ -1460,6 +1461,104 @@ import { useEffect as useEffect4, useRef as useRef3, useState as useState4, useC
 import { z } from "zod";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var PROTOCOL_VERSION = "2025-06-18";
+var SANDBOX_HTML = `<!doctype html>
+<html>
+<head>
+<meta charset="utf-8" />
+<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src * data: blob: 'unsafe-inline'; media-src * blob: data:; font-src * blob: data:; script-src 'self' 'wasm-unsafe-eval' 'unsafe-inline' 'unsafe-eval' blob: data: http://localhost:* https://localhost:*; style-src * blob: data: 'unsafe-inline'; connect-src *; frame-src * blob: data: http://localhost:* https://localhost:*; base-uri 'self';" />
+<style>html,body{margin:0;padding:0;height:100%;width:100%;overflow:hidden}*{box-sizing:border-box}iframe{background-color:transparent;border:none;padding:0;overflow:hidden;width:100%;height:100%}</style>
+</head>
+<body>
+<script>
+if(window.self===window.top){throw new Error("This file must be used in an iframe.")}
+const inner=document.createElement("iframe");
+inner.style="width:100%;height:100%;border:none;";
+inner.setAttribute("sandbox","allow-scripts allow-same-origin allow-forms");
+document.body.appendChild(inner);
+window.addEventListener("message",async(event)=>{
+if(event.source===window.parent){
+if(event.data&&event.data.method==="ui/notifications/sandbox-resource-ready"){
+const{html,sandbox}=event.data.params;
+if(typeof sandbox==="string")inner.setAttribute("sandbox",sandbox);
+if(typeof html==="string")inner.srcdoc=html;
+}else if(inner&&inner.contentWindow){
+inner.contentWindow.postMessage(event.data,"*");
+}
+}else if(event.source===inner.contentWindow){
+window.parent.postMessage(event.data,"*");
+}
+});
+window.parent.postMessage({jsonrpc:"2.0",method:"ui/notifications/sandbox-proxy-ready",params:{}},"*");
+</script>
+</body>
+</html>`;
+var MCPAppsRequestQueue = class {
+  queues = /* @__PURE__ */ new Map();
+  processing = /* @__PURE__ */ new Map();
+  /**
+   * Add a request to the queue for a specific agent thread.
+   * Returns a promise that resolves when the request completes.
+   */
+  async enqueue(agent, request) {
+    const threadId = agent.threadId || "default";
+    return new Promise((resolve, reject) => {
+      let queue = this.queues.get(threadId);
+      if (!queue) {
+        queue = [];
+        this.queues.set(threadId, queue);
+      }
+      queue.push({ execute: request, resolve, reject });
+      this.processQueue(threadId, agent);
+    });
+  }
+  async processQueue(threadId, agent) {
+    if (this.processing.get(threadId)) {
+      return;
+    }
+    this.processing.set(threadId, true);
+    try {
+      const queue = this.queues.get(threadId);
+      if (!queue) return;
+      while (queue.length > 0) {
+        const item = queue[0];
+        try {
+          await this.waitForAgentIdle(agent);
+          const result = await item.execute();
+          item.resolve(result);
+        } catch (error) {
+          item.reject(error instanceof Error ? error : new Error(String(error)));
+        }
+        queue.shift();
+      }
+    } finally {
+      this.processing.set(threadId, false);
+    }
+  }
+  waitForAgentIdle(agent) {
+    return new Promise((resolve) => {
+      if (!agent.isRunning) {
+        resolve();
+        return;
+      }
+      let done = false;
+      const finish = () => {
+        if (done) return;
+        done = true;
+        clearInterval(checkInterval);
+        sub.unsubscribe();
+        resolve();
+      };
+      const sub = agent.subscribe({
+        onRunFinalized: finish,
+        onRunFailed: finish
+      });
+      const checkInterval = setInterval(() => {
+        if (!agent.isRunning) finish();
+      }, 500);
+    });
+  }
+};
+var mcpAppsRequestQueue = new MCPAppsRequestQueue();
 var MCPAppsActivityType = "mcp-apps";
 var MCPAppsActivityContentSchema = z.object({
   result: z.object({
@@ -1467,13 +1566,11 @@ var MCPAppsActivityContentSchema = z.object({
     structuredContent: z.any().optional(),
     isError: z.boolean().optional()
   }),
-  resource: z.object({
-    uri: z.string(),
-    mimeType: z.string().optional(),
-    text: z.string().optional(),
-    blob: z.string().optional()
-  }),
-  // Server ID for proxying requests (MD5 hash of server config)
+  // Resource URI to fetch (e.g., "ui://server/dashboard")
+  resourceUri: z.string(),
+  // MD5 hash of server config (renamed from serverId in 0.0.1)
+  serverHash: z.string(),
+  // Optional stable server ID from config (takes precedence over serverHash)
   serverId: z.string().optional(),
   // Original tool input arguments
   toolInput: z.record(z.unknown()).optional()
@@ -1484,25 +1581,19 @@ function isRequest(msg) {
 function isNotification(msg) {
   return !("id" in msg) && "method" in msg;
 }
-function extractHtmlFromResource(resource) {
-  if (resource.text) {
-    return resource.text;
-  }
-  if (resource.blob) {
-    return atob(resource.blob);
-  }
-  throw new Error("Resource has no text or blob content");
-}
-var MCPAppsActivityRenderer = ({ content, agent }) => {
+var MCPAppsActivityRenderer = function MCPAppsActivityRenderer2({ content, agent }) {
   const containerRef = useRef3(null);
   const iframeRef = useRef3(null);
   const [iframeReady, setIframeReady] = useState4(false);
   const [error, setError] = useState4(null);
+  const [isLoading, setIsLoading] = useState4(true);
   const [iframeSize, setIframeSize] = useState4({});
+  const [fetchedResource, setFetchedResource] = useState4(null);
   const contentRef = useRef3(content);
   contentRef.current = content;
   const agentRef = useRef3(agent);
   agentRef.current = agent;
+  const fetchStateRef = useRef3({ inProgress: false, promise: null, resourceUri: null });
   const sendToIframe = useCallback2((msg) => {
     if (iframeRef.current?.contentWindow) {
       console.log("[MCPAppsRenderer] Sending to iframe:", msg);
@@ -1531,31 +1622,112 @@ var MCPAppsActivityRenderer = ({ content, agent }) => {
     });
   }, [sendToIframe]);
   useEffect4(() => {
-    if (!containerRef.current) return;
+    const { resourceUri, serverHash, serverId } = content;
+    if (fetchStateRef.current.inProgress && fetchStateRef.current.resourceUri === resourceUri) {
+      fetchStateRef.current.promise?.then((resource) => {
+        if (resource) {
+          setFetchedResource(resource);
+          setIsLoading(false);
+        }
+      }).catch((err) => {
+        setError(err instanceof Error ? err : new Error(String(err)));
+        setIsLoading(false);
+      });
+      return;
+    }
+    if (!agent) {
+      setError(new Error("No agent available to fetch resource"));
+      setIsLoading(false);
+      return;
+    }
+    fetchStateRef.current.inProgress = true;
+    fetchStateRef.current.resourceUri = resourceUri;
+    const fetchPromise = (async () => {
+      try {
+        const runResult = await mcpAppsRequestQueue.enqueue(
+          agent,
+          () => agent.runAgent({
+            forwardedProps: {
+              __proxiedMCPRequest: {
+                serverHash,
+                serverId,
+                // optional, takes precedence if provided
+                method: "resources/read",
+                params: { uri: resourceUri }
+              }
+            }
+          })
+        );
+        const resultData = runResult.result;
+        const resource = resultData?.contents?.[0];
+        if (!resource) {
+          throw new Error("No resource content in response");
+        }
+        return resource;
+      } catch (err) {
+        console.error("[MCPAppsRenderer] Failed to fetch resource:", err);
+        throw err;
+      } finally {
+        fetchStateRef.current.inProgress = false;
+      }
+    })();
+    fetchStateRef.current.promise = fetchPromise;
+    fetchPromise.then((resource) => {
+      if (resource) {
+        setFetchedResource(resource);
+        setIsLoading(false);
+      }
+    }).catch((err) => {
+      setError(err instanceof Error ? err : new Error(String(err)));
+      setIsLoading(false);
+    });
+  }, [agent, content]);
+  useEffect4(() => {
+    if (isLoading || !fetchedResource) {
+      return;
+    }
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
     let mounted = true;
     let messageHandler = null;
+    let initialListener = null;
+    let createdIframe = null;
     const setup = async () => {
       try {
         const iframe = document.createElement("iframe");
+        createdIframe = iframe;
         iframe.style.width = "100%";
-        iframe.style.height = "300px";
+        iframe.style.height = "100px";
         iframe.style.border = "none";
         iframe.style.backgroundColor = "transparent";
+        iframe.style.display = "block";
         iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
         const sandboxReady = new Promise((resolve) => {
-          const initialListener = (event) => {
+          initialListener = (event) => {
             if (event.source === iframe.contentWindow) {
               if (event.data?.method === "ui/notifications/sandbox-proxy-ready") {
-                window.removeEventListener("message", initialListener);
+                if (initialListener) {
+                  window.removeEventListener("message", initialListener);
+                  initialListener = null;
+                }
                 resolve();
               }
             }
           };
           window.addEventListener("message", initialListener);
         });
-        iframe.src = "/sandbox.html";
+        if (!mounted) {
+          if (initialListener) {
+            window.removeEventListener("message", initialListener);
+            initialListener = null;
+          }
+          return;
+        }
+        iframe.srcdoc = SANDBOX_HTML;
         iframeRef.current = iframe;
-        containerRef.current?.appendChild(iframe);
+        container.appendChild(iframe);
         await sandboxReady;
         if (!mounted) return;
         console.log("[MCPAppsRenderer] Sandbox proxy ready");
@@ -1585,8 +1757,27 @@ var MCPAppsActivityRenderer = ({ content, agent }) => {
                 break;
               }
               case "ui/message": {
-                console.log("[MCPAppsRenderer] ui/message request:", msg.params);
-                sendResponse(msg.id, { isError: false });
+                const currentAgent = agentRef.current;
+                if (!currentAgent) {
+                  console.warn("[MCPAppsRenderer] ui/message: No agent available");
+                  sendResponse(msg.id, { isError: false });
+                  break;
+                }
+                try {
+                  const params = msg.params;
+                  const textContent = params.content?.filter((c) => c.type === "text" && c.text).map((c) => c.text).join("\n") || "";
+                  if (textContent) {
+                    currentAgent.addMessage({
+                      id: crypto.randomUUID(),
+                      role: params.role || "user",
+                      content: textContent
+                    });
+                  }
+                  sendResponse(msg.id, { isError: false });
+                } catch (err) {
+                  console.error("[MCPAppsRenderer] ui/message error:", err);
+                  sendResponse(msg.id, { isError: true });
+                }
                 break;
               }
               case "ui/open-link": {
@@ -1600,10 +1791,10 @@ var MCPAppsActivityRenderer = ({ content, agent }) => {
                 break;
               }
               case "tools/call": {
-                const { serverId } = contentRef.current;
+                const { serverHash, serverId } = contentRef.current;
                 const currentAgent = agentRef.current;
-                if (!serverId) {
-                  sendErrorResponse(msg.id, -32603, "No server ID available for proxying");
+                if (!serverHash) {
+                  sendErrorResponse(msg.id, -32603, "No server hash available for proxying");
                   break;
                 }
                 if (!currentAgent) {
@@ -1611,15 +1802,20 @@ var MCPAppsActivityRenderer = ({ content, agent }) => {
                   break;
                 }
                 try {
-                  const runResult = await currentAgent.runAgent({
-                    forwardedProps: {
-                      __proxiedMCPRequest: {
-                        serverId,
-                        method: "tools/call",
-                        params: msg.params
+                  const runResult = await mcpAppsRequestQueue.enqueue(
+                    currentAgent,
+                    () => currentAgent.runAgent({
+                      forwardedProps: {
+                        __proxiedMCPRequest: {
+                          serverHash,
+                          serverId,
+                          // optional, takes precedence if provided
+                          method: "tools/call",
+                          params: msg.params
+                        }
                       }
-                    }
-                  });
+                    })
+                  );
                   sendResponse(msg.id, runResult.result || {});
                 } catch (err) {
                   console.error("[MCPAppsRenderer] tools/call error:", err);
@@ -1640,7 +1836,7 @@ var MCPAppsActivityRenderer = ({ content, agent }) => {
                 }
                 break;
               }
-              case "ui/notifications/size-change": {
+              case "ui/notifications/size-changed": {
                 const { width, height } = msg.params || {};
                 console.log("[MCPAppsRenderer] Size change:", { width, height });
                 if (mounted) {
@@ -1659,7 +1855,14 @@ var MCPAppsActivityRenderer = ({ content, agent }) => {
           }
         };
         window.addEventListener("message", messageHandler);
-        const html = extractHtmlFromResource(content.resource);
+        let html;
+        if (fetchedResource.text) {
+          html = fetchedResource.text;
+        } else if (fetchedResource.blob) {
+          html = atob(fetchedResource.blob);
+        } else {
+          throw new Error("Resource has no text or blob content");
+        }
         sendNotification("ui/notifications/sandbox-resource-ready", { html });
       } catch (err) {
         console.error("[MCPAppsRenderer] Setup error:", err);
@@ -1671,19 +1874,25 @@ var MCPAppsActivityRenderer = ({ content, agent }) => {
     setup();
     return () => {
       mounted = false;
+      if (initialListener) {
+        window.removeEventListener("message", initialListener);
+        initialListener = null;
+      }
       if (messageHandler) {
         window.removeEventListener("message", messageHandler);
       }
-      if (iframeRef.current && containerRef.current?.contains(iframeRef.current)) {
-        containerRef.current.removeChild(iframeRef.current);
+      if (createdIframe) {
+        createdIframe.remove();
+        createdIframe = null;
       }
       iframeRef.current = null;
     };
-  }, [content.resource, sendNotification, sendResponse, sendErrorResponse]);
+  }, [isLoading, fetchedResource, sendNotification, sendResponse, sendErrorResponse]);
   useEffect4(() => {
     if (iframeRef.current) {
       if (iframeSize.width !== void 0) {
-        iframeRef.current.style.width = `${iframeSize.width}px`;
+        iframeRef.current.style.minWidth = `min(${iframeSize.width}px, 100%)`;
+        iframeRef.current.style.width = "100%";
       }
       if (iframeSize.height !== void 0) {
         iframeRef.current.style.height = `${iframeSize.height}px`;
@@ -1704,22 +1913,31 @@ var MCPAppsActivityRenderer = ({ content, agent }) => {
       sendNotification("ui/notifications/tool-result", content.result);
     }
   }, [iframeReady, content.result, sendNotification]);
-  return /* @__PURE__ */ jsx8(
+  const prefersBorder = fetchedResource?._meta?.ui?.prefersBorder;
+  const borderStyle = prefersBorder === true ? {
+    borderRadius: "8px",
+    backgroundColor: "#f9f9f9",
+    border: "1px solid #e0e0e0"
+  } : {};
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       ref: containerRef,
       style: {
         width: "100%",
+        height: iframeSize.height ? `${iframeSize.height}px` : "auto",
         minHeight: "100px",
-        borderRadius: "8px",
         overflow: "hidden",
-        backgroundColor: "#f9f9f9",
-        border: "1px solid #e0e0e0"
+        position: "relative",
+        ...borderStyle
       },
-      children: error && /* @__PURE__ */ jsxs4("div", { style: { color: "red", padding: "1rem" }, children: [
-        "Error: ",
-        error.message
-      ] })
+      children: [
+        isLoading && /* @__PURE__ */ jsx8("div", { style: { padding: "1rem", color: "#666" }, children: "Loading..." }),
+        error && /* @__PURE__ */ jsxs4("div", { style: { color: "red", padding: "1rem" }, children: [
+          "Error: ",
+          error.message
+        ] })
+      ]
     }
   );
 };
@@ -2141,22 +2359,28 @@ function useRenderCustomMessages() {
 // src/hooks/use-render-activity-message.tsx
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID3 } from "@copilotkitnext/shared";
-import { useCallback as useCallback4 } from "react";
+import { useCallback as useCallback4, useMemo as useMemo5 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
 function useRenderActivityMessage() {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
   const agentId = config?.agentId ?? DEFAULT_AGENT_ID3;
   const renderers = copilotkit.renderActivityMessages;
-  return useCallback4(
-    (message) => {
+  const findRenderer = useCallback4(
+    (activityType) => {
       if (!renderers.length) {
         return null;
       }
       const matches = renderers.filter(
-        (renderer2) => renderer2.activityType === message.activityType
+        (renderer) => renderer.activityType === activityType
       );
-      const renderer = matches.find((candidate) => candidate.agentId === agentId) ?? matches.find((candidate) => candidate.agentId === void 0) ?? renderers.find((candidate) => candidate.activityType === "*");
+      return matches.find((candidate) => candidate.agentId === agentId) ?? matches.find((candidate) => candidate.agentId === void 0) ?? renderers.find((candidate) => candidate.activityType === "*") ?? null;
+    },
+    [agentId, renderers]
+  );
+  const renderActivityMessage = useCallback4(
+    (message) => {
+      const renderer = findRenderer(message.activityType);
       if (!renderer) {
         return null;
       }
@@ -2181,7 +2405,11 @@ function useRenderActivityMessage() {
         message.id
       );
     },
-    [agentId, copilotkit, renderers]
+    [agentId, copilotkit, findRenderer]
+  );
+  return useMemo5(
+    () => ({ renderActivityMessage, findRenderer }),
+    [renderActivityMessage, findRenderer]
   );
 }
@@ -2290,7 +2518,7 @@ function useHumanInTheLoop(tool, deps) {
 }
 // src/hooks/use-agent.tsx
-import { useMemo as useMemo5, useEffect as useEffect8, useReducer as useReducer2 } from "react";
+import { useMemo as useMemo6, 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) => {
@@ -2308,11 +2536,11 @@ function useAgent({ agentId, updates } = {}) {
   agentId ??= DEFAULT_AGENT_ID4;
   const { copilotkit } = useCopilotKit();
   const [, forceUpdate] = useReducer2((x) => x + 1, 0);
-  const updateFlags = useMemo5(
+  const updateFlags = useMemo6(
     () => updates ?? ALL_UPDATES,
     [JSON.stringify(updates)]
   );
-  const agent = useMemo5(() => {
+  const agent = useMemo6(() => {
     const existing = copilotkit.getAgent(agentId);
     if (existing) {
       return existing;
@@ -2353,20 +2581,12 @@ function useAgent({ agentId, updates } = {}) {
       };
     }
     if (updateFlags.includes("OnStateChanged" /* OnStateChanged */)) {
-      handlers.onStateChanged = () => {
-        forceUpdate();
-      };
+      handlers.onStateChanged = forceUpdate;
     }
     if (updateFlags.includes("OnRunStatusChanged" /* OnRunStatusChanged */)) {
-      handlers.onRunInitialized = () => {
-        forceUpdate();
-      };
-      handlers.onRunFinalized = () => {
-        forceUpdate();
-      };
-      handlers.onRunFailed = () => {
-        forceUpdate();
-      };
+      handlers.onRunInitialized = forceUpdate;
+      handlers.onRunFinalized = forceUpdate;
+      handlers.onRunFailed = forceUpdate;
     }
     const subscription = agent.subscribe(handlers);
     return () => subscription.unsubscribe();
@@ -2377,11 +2597,11 @@ function useAgent({ agentId, updates } = {}) {
 }
 // src/hooks/use-agent-context.tsx
-import { useEffect as useEffect9, useMemo as useMemo6 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo7 } from "react";
 function useAgentContext(context) {
   const { description, value } = context;
   const { copilotkit } = useCopilotKit();
-  const stringValue = useMemo6(() => {
+  const stringValue = useMemo7(() => {
     if (typeof value === "string") {
       return value;
     }
@@ -2397,12 +2617,12 @@ function useAgentContext(context) {
 }
 // src/hooks/use-suggestions.tsx
-import { useCallback as useCallback6, useEffect as useEffect10, useMemo as useMemo7, useState as useState6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect10, useMemo as useMemo8, 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 resolvedAgentId = useMemo8(() => agentId ?? config?.agentId ?? DEFAULT_AGENT_ID5, [agentId, config?.agentId]);
   const [suggestions, setSuggestions] = useState6(() => {
     const result = copilotkit.getSuggestions(resolvedAgentId);
     return result.suggestions;
@@ -2461,19 +2681,19 @@ function useSuggestions({ agentId } = {}) {
 }
 // src/hooks/use-configure-suggestions.tsx
-import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef6 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo9, useRef as useRef6 } from "react";
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID6 } from "@copilotkitnext/shared";
 function useConfigureSuggestions(config, deps) {
   const { copilotkit } = useCopilotKit();
   const chatConfig = useCopilotChatConfiguration();
   const extraDeps = deps ?? [];
-  const resolvedConsumerAgentId = useMemo8(() => chatConfig?.agentId ?? DEFAULT_AGENT_ID6, [chatConfig?.agentId]);
-  const rawConsumerAgentId = useMemo8(() => config ? config.consumerAgentId : void 0, [config]);
+  const resolvedConsumerAgentId = useMemo9(() => chatConfig?.agentId ?? DEFAULT_AGENT_ID6, [chatConfig?.agentId]);
+  const rawConsumerAgentId = useMemo9(() => config ? config.consumerAgentId : void 0, [config]);
   const normalizationCacheRef = useRef6({
     serialized: null,
     config: null
   });
-  const { normalizedConfig, serializedConfig } = useMemo8(() => {
+  const { normalizedConfig, serializedConfig } = useMemo9(() => {
     if (!config) {
       normalizationCacheRef.current = { serialized: null, config: null };
       return { normalizedConfig: null, serializedConfig: null };
@@ -2506,7 +2726,7 @@ function useConfigureSuggestions(config, deps) {
   const latestConfigRef = useRef6(null);
   latestConfigRef.current = normalizedConfig;
   const previousSerializedConfigRef = useRef6(null);
-  const targetAgentId = useMemo8(() => {
+  const targetAgentId = useMemo9(() => {
     if (!normalizedConfig) {
       return resolvedConsumerAgentId;
     }
@@ -2850,7 +3070,7 @@ CopilotChatAssistantMessage.RegenerateButton.displayName = "CopilotChatAssistant
 var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
 // src/components/chat/CopilotChatUserMessage.tsx
-import { useMemo as useMemo9, useState as useState8 } from "react";
+import { useMemo as useMemo10, 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 jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
@@ -2884,7 +3104,7 @@ function CopilotChatUserMessage({
   className,
   ...props
 }) {
-  const flattenedContent = useMemo9(
+  const flattenedContent = useMemo10(
     () => flattenUserMessageContent(message.content),
     [message.content]
   );
@@ -3325,7 +3545,7 @@ function CopilotChatMessageView({
   ...props
 }) {
   const renderCustomMessage = useRenderCustomMessages();
-  const renderActivityMessage = useRenderActivityMessage();
+  const { renderActivityMessage } = useRenderActivityMessage();
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
   const [, forceUpdate] = useReducer3((x) => x + 1, 0);
@@ -3334,10 +3554,10 @@ function CopilotChatMessageView({
     const agent = copilotkit.getAgent(config.agentId);
     if (!agent) return;
     const subscription = agent.subscribe({
-      onStateChanged: () => forceUpdate()
+      onStateChanged: forceUpdate
     });
     return () => subscription.unsubscribe();
-  }, [config?.agentId, copilotkit]);
+  }, [config?.agentId, copilotkit, forceUpdate]);
   const getStateSnapshotForMessage = (messageId) => {
     if (!config) return void 0;
     const runId = copilotkit.getRunIdForMessage(config.agentId, config.threadId, messageId);
@@ -3388,11 +3608,12 @@ function CopilotChatMessageView({
         )
       );
     } else if (message.role === "activity") {
+      const activityMsg = message;
       elements.push(
         /* @__PURE__ */ jsx18(
           MemoizedActivityMessage,
           {
-            message,
+            message: activityMsg,
             renderActivityMessage
           },
           message.id
@@ -3754,14 +3975,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 useCallback8, useEffect as useEffect15, useMemo as useMemo10 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect15, useMemo as useMemo11 } from "react";
 import { merge } from "ts-deepmerge";
 import { AGUIConnectNotImplementedError } from "@ag-ui/client";
 import { jsx as jsx20 } 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 = useMemo10(
+  const resolvedThreadId = useMemo11(
     () => threadId ?? existingConfig?.threadId ?? randomUUID2(),
     [threadId, existingConfig?.threadId]
   );
@@ -3855,8 +4076,9 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     isRunning: agent.isRunning
   };
   finalInputProps.mode = agent.isRunning ? "processing" : finalInputProps.mode ?? "input";
+  const messages = useMemo11(() => [...agent.messages], [JSON.stringify(agent.messages)]);
   const finalProps = merge(mergedProps, {
-    messages: agent.messages,
+    messages,
     inputProps: finalInputProps
   });
   const RenderedChatView = renderSlot(chatView, CopilotChatView, finalProps);
@@ -4176,7 +4398,7 @@ function CopilotSidebarView({ header, width, ...props }) {
 CopilotSidebarView.displayName = "CopilotSidebarView";
 // src/components/chat/CopilotPopupView.tsx
-import { useEffect as useEffect17, useMemo as useMemo11, useRef as useRef9, useState as useState13 } from "react";
+import { useEffect as useEffect17, useMemo as useMemo12, 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;
@@ -4270,10 +4492,10 @@ function CopilotPopupView({
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [isPopupOpen, clickOutsideToClose, setModalOpen]);
-  const headerElement = useMemo11(() => renderSlot(header, CopilotModalHeader, {}), [header]);
+  const headerElement = useMemo12(() => renderSlot(header, CopilotModalHeader, {}), [header]);
   const resolvedWidth = dimensionToCss(width, DEFAULT_POPUP_WIDTH);
   const resolvedHeight = dimensionToCss(height, DEFAULT_POPUP_HEIGHT);
-  const popupStyle = useMemo11(
+  const popupStyle = useMemo12(
     () => ({
       "--copilot-popup-width": resolvedWidth,
       "--copilot-popup-height": resolvedHeight,
@@ -4335,10 +4557,10 @@ function CopilotPopupView({
 CopilotPopupView.displayName = "CopilotPopupView";
 // src/components/chat/CopilotSidebar.tsx
-import { useMemo as useMemo12 } from "react";
+import { useMemo as useMemo13 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
-  const SidebarViewOverride = useMemo12(() => {
+  const SidebarViewOverride = useMemo13(() => {
     const Component = (viewProps) => {
       const { header: viewHeader, width: viewWidth, ...restProps } = viewProps;
       return /* @__PURE__ */ jsx25(
@@ -4364,7 +4586,7 @@ function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
 CopilotSidebar.displayName = "CopilotSidebar";
 // src/components/chat/CopilotPopup.tsx
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo14 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
 function CopilotPopup({
   header,
@@ -4374,7 +4596,7 @@ function CopilotPopup({
   clickOutsideToClose,
   ...chatProps
 }) {
-  const PopupViewOverride = useMemo13(() => {
+  const PopupViewOverride = useMemo14(() => {
     const Component = (viewProps) => {
       const {
         header: viewHeader,