@copilotkitnext/react 0.0.33 → 0.0.34-pr.fix-express-endpoint

package/dist/index.mjs

@@ -1378,12 +1378,12 @@ 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 useState5, useSyncExternalStore } from "react";
+import React7, { useCallback as useCallback3, useMemo as useMemo4, useSyncExternalStore } from "react";
 import { ToolCallStatus } from "@copilotkitnext/core";
 
 // src/providers/CopilotKitProvider.tsx
-import { createContext as createContext2, useContext as useContext2, useMemo as useMemo3, useEffect as useEffect4, useReducer, useRef as useRef3, useState as useState4 } from "react";
-import { z } from "zod";
+import { createContext as createContext2, useContext as useContext2, useMemo as useMemo3, useEffect as useEffect5, useReducer, useRef as useRef4, useState as useState5 } from "react";
+import { z as z2 } from "zod";
 
 // src/lib/react-core.ts
 import { CopilotKitCore } from "@copilotkitnext/core";
@@ -1455,18 +1455,289 @@ var CopilotKitInspector = ({ core, ...rest }) => {
 };
 CopilotKitInspector.displayName = "CopilotKitInspector";
 
-// src/providers/CopilotKitProvider.tsx
+// src/components/MCPAppsActivityRenderer.tsx
+import { useEffect as useEffect4, useRef as useRef3, useState as useState4, useCallback as useCallback2 } from "react";
+import { z } from "zod";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var PROTOCOL_VERSION = "2025-06-18";
+var MCPAppsActivityType = "mcp-apps";
+var MCPAppsActivityContentSchema = z.object({
+  result: z.object({
+    content: z.array(z.any()).optional(),
+    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)
+  serverId: z.string().optional(),
+  // Original tool input arguments
+  toolInput: z.record(z.unknown()).optional()
+});
+function isRequest(msg) {
+  return "id" in msg && "method" in 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 }) => {
+  const containerRef = useRef3(null);
+  const iframeRef = useRef3(null);
+  const [iframeReady, setIframeReady] = useState4(false);
+  const [error, setError] = useState4(null);
+  const [iframeSize, setIframeSize] = useState4({});
+  const contentRef = useRef3(content);
+  contentRef.current = content;
+  const agentRef = useRef3(agent);
+  agentRef.current = agent;
+  const sendToIframe = useCallback2((msg) => {
+    if (iframeRef.current?.contentWindow) {
+      console.log("[MCPAppsRenderer] Sending to iframe:", msg);
+      iframeRef.current.contentWindow.postMessage(msg, "*");
+    }
+  }, []);
+  const sendResponse = useCallback2((id, result) => {
+    sendToIframe({
+      jsonrpc: "2.0",
+      id,
+      result
+    });
+  }, [sendToIframe]);
+  const sendErrorResponse = useCallback2((id, code, message) => {
+    sendToIframe({
+      jsonrpc: "2.0",
+      id,
+      error: { code, message }
+    });
+  }, [sendToIframe]);
+  const sendNotification = useCallback2((method, params) => {
+    sendToIframe({
+      jsonrpc: "2.0",
+      method,
+      params: params || {}
+    });
+  }, [sendToIframe]);
+  useEffect4(() => {
+    if (!containerRef.current) return;
+    let mounted = true;
+    let messageHandler = null;
+    const setup = async () => {
+      try {
+        const iframe = document.createElement("iframe");
+        iframe.style.width = "100%";
+        iframe.style.height = "300px";
+        iframe.style.border = "none";
+        iframe.style.backgroundColor = "transparent";
+        iframe.setAttribute("sandbox", "allow-scripts allow-same-origin allow-forms");
+        const sandboxReady = new Promise((resolve) => {
+          const initialListener = (event) => {
+            if (event.source === iframe.contentWindow) {
+              if (event.data?.method === "ui/notifications/sandbox-proxy-ready") {
+                window.removeEventListener("message", initialListener);
+                resolve();
+              }
+            }
+          };
+          window.addEventListener("message", initialListener);
+        });
+        iframe.src = "/sandbox.html";
+        iframeRef.current = iframe;
+        containerRef.current?.appendChild(iframe);
+        await sandboxReady;
+        if (!mounted) return;
+        console.log("[MCPAppsRenderer] Sandbox proxy ready");
+        messageHandler = async (event) => {
+          if (event.source !== iframe.contentWindow) return;
+          const msg = event.data;
+          if (!msg || typeof msg !== "object" || msg.jsonrpc !== "2.0") return;
+          console.log("[MCPAppsRenderer] Received from iframe:", msg);
+          if (isRequest(msg)) {
+            switch (msg.method) {
+              case "ui/initialize": {
+                sendResponse(msg.id, {
+                  protocolVersion: PROTOCOL_VERSION,
+                  hostInfo: {
+                    name: "CopilotKit MCP Apps Host",
+                    version: "1.0.0"
+                  },
+                  hostCapabilities: {
+                    openLinks: {},
+                    logging: {}
+                  },
+                  hostContext: {
+                    theme: "light",
+                    platform: "web"
+                  }
+                });
+                break;
+              }
+              case "ui/message": {
+                console.log("[MCPAppsRenderer] ui/message request:", msg.params);
+                sendResponse(msg.id, { isError: false });
+                break;
+              }
+              case "ui/open-link": {
+                const url = msg.params?.url;
+                if (url) {
+                  window.open(url, "_blank", "noopener,noreferrer");
+                  sendResponse(msg.id, { isError: false });
+                } else {
+                  sendErrorResponse(msg.id, -32602, "Missing url parameter");
+                }
+                break;
+              }
+              case "tools/call": {
+                const { serverId } = contentRef.current;
+                const currentAgent = agentRef.current;
+                if (!serverId) {
+                  sendErrorResponse(msg.id, -32603, "No server ID available for proxying");
+                  break;
+                }
+                if (!currentAgent) {
+                  sendErrorResponse(msg.id, -32603, "No agent available for proxying");
+                  break;
+                }
+                try {
+                  const runResult = await currentAgent.runAgent({
+                    forwardedProps: {
+                      __proxiedMCPRequest: {
+                        serverId,
+                        method: "tools/call",
+                        params: msg.params
+                      }
+                    }
+                  });
+                  sendResponse(msg.id, runResult.result || {});
+                } catch (err) {
+                  console.error("[MCPAppsRenderer] tools/call error:", err);
+                  sendErrorResponse(msg.id, -32603, String(err));
+                }
+                break;
+              }
+              default:
+                sendErrorResponse(msg.id, -32601, `Method not found: ${msg.method}`);
+            }
+          }
+          if (isNotification(msg)) {
+            switch (msg.method) {
+              case "ui/notifications/initialized": {
+                console.log("[MCPAppsRenderer] Inner iframe initialized");
+                if (mounted) {
+                  setIframeReady(true);
+                }
+                break;
+              }
+              case "ui/notifications/size-change": {
+                const { width, height } = msg.params || {};
+                console.log("[MCPAppsRenderer] Size change:", { width, height });
+                if (mounted) {
+                  setIframeSize({
+                    width: typeof width === "number" ? width : void 0,
+                    height: typeof height === "number" ? height : void 0
+                  });
+                }
+                break;
+              }
+              case "notifications/message": {
+                console.log("[MCPAppsRenderer] App log:", msg.params);
+                break;
+              }
+            }
+          }
+        };
+        window.addEventListener("message", messageHandler);
+        const html = extractHtmlFromResource(content.resource);
+        sendNotification("ui/notifications/sandbox-resource-ready", { html });
+      } catch (err) {
+        console.error("[MCPAppsRenderer] Setup error:", err);
+        if (mounted) {
+          setError(err instanceof Error ? err : new Error(String(err)));
+        }
+      }
+    };
+    setup();
+    return () => {
+      mounted = false;
+      if (messageHandler) {
+        window.removeEventListener("message", messageHandler);
+      }
+      if (iframeRef.current && containerRef.current?.contains(iframeRef.current)) {
+        containerRef.current.removeChild(iframeRef.current);
+      }
+      iframeRef.current = null;
+    };
+  }, [content.resource, sendNotification, sendResponse, sendErrorResponse]);
+  useEffect4(() => {
+    if (iframeRef.current) {
+      if (iframeSize.width !== void 0) {
+        iframeRef.current.style.width = `${iframeSize.width}px`;
+      }
+      if (iframeSize.height !== void 0) {
+        iframeRef.current.style.height = `${iframeSize.height}px`;
+      }
+    }
+  }, [iframeSize]);
+  useEffect4(() => {
+    if (iframeReady && content.toolInput) {
+      console.log("[MCPAppsRenderer] Sending tool input:", content.toolInput);
+      sendNotification("ui/notifications/tool-input", {
+        arguments: content.toolInput
+      });
+    }
+  }, [iframeReady, content.toolInput, sendNotification]);
+  useEffect4(() => {
+    if (iframeReady && content.result) {
+      console.log("[MCPAppsRenderer] Sending tool result:", content.result);
+      sendNotification("ui/notifications/tool-result", content.result);
+    }
+  }, [iframeReady, content.result, sendNotification]);
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        width: "100%",
+        minHeight: "100px",
+        borderRadius: "8px",
+        overflow: "hidden",
+        backgroundColor: "#f9f9f9",
+        border: "1px solid #e0e0e0"
+      },
+      children: error && /* @__PURE__ */ jsxs4("div", { style: { color: "red", padding: "1rem" }, children: [
+        "Error: ",
+        error.message
+      ] })
+    }
+  );
+};
+
+// src/providers/CopilotKitProvider.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var HEADER_NAME = "X-CopilotCloud-Public-Api-Key";
 var COPILOT_CLOUD_CHAT_URL = "https://api.cloud.copilotkit.ai/copilotkit/v1";
+var EMPTY_SET = /* @__PURE__ */ new Set();
 var CopilotKitContext = createContext2({
-  copilotkit: null
+  copilotkit: null,
+  executingToolCallIds: EMPTY_SET
 });
 function useStableArrayProp(prop, warningMessage, isMeaningfulChange) {
   const empty = useMemo3(() => [], []);
   const value = prop ?? empty;
-  const initial = useRef3(value);
-  useEffect4(() => {
+  const initial = useRef4(value);
+  useEffect5(() => {
     if (warningMessage && value !== initial.current && (isMeaningfulChange ? isMeaningfulChange(initial.current, value) : true)) {
       console.error(warningMessage);
     }
@@ -1489,8 +1760,8 @@ var CopilotKitProvider = ({
   showDevConsole = false,
   useSingleEndpoint = false
 }) => {
-  const [shouldRenderInspector, setShouldRenderInspector] = useState4(false);
-  useEffect4(() => {
+  const [shouldRenderInspector, setShouldRenderInspector] = useState5(false);
+  useEffect5(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -1528,6 +1799,16 @@ var CopilotKitProvider = ({
     renderActivityMessages,
     "renderActivityMessages must be a stable array."
   );
+  const builtInActivityRenderers = useMemo3(() => [
+    {
+      activityType: MCPAppsActivityType,
+      content: MCPAppsActivityContentSchema,
+      render: MCPAppsActivityRenderer
+    }
+  ], []);
+  const allActivityRenderers = useMemo3(() => {
+    return [...renderActivityMessagesList, ...builtInActivityRenderers];
+  }, [renderActivityMessagesList, builtInActivityRenderers]);
   const resolvedPublicKey = publicApiKey ?? publicLicenseKey;
   const hasLocalAgents = agents && Object.keys(agents).length > 0;
   const mergedHeaders = useMemo3(() => {
@@ -1594,7 +1875,7 @@ var CopilotKitProvider = ({
     const combined = [...renderToolCallsList];
     frontendToolsList.forEach((tool) => {
       if (tool.render) {
-        const args = tool.parameters || (tool.name === "*" ? z.any() : void 0);
+        const args = tool.parameters || (tool.name === "*" ? z2.any() : void 0);
         if (args) {
           combined.push({
             name: tool.name,
@@ -1616,13 +1897,13 @@ var CopilotKitProvider = ({
       agents__unsafe_dev_only: agents,
       tools: allTools,
       renderToolCalls: allRenderToolCalls,
-      renderActivityMessages: renderActivityMessagesList,
+      renderActivityMessages: allActivityRenderers,
       renderCustomMessages: renderCustomMessagesList
     });
     return copilotkit2;
-  }, [allTools, allRenderToolCalls, renderActivityMessagesList, renderCustomMessagesList, useSingleEndpoint]);
+  }, [allTools, allRenderToolCalls, allActivityRenderers, renderCustomMessagesList, useSingleEndpoint]);
   const [, forceUpdate] = useReducer((x) => x + 1, 0);
-  useEffect4(() => {
+  useEffect5(() => {
     const subscription = copilotkit.subscribe({
       onRenderToolCallsChanged: () => {
         forceUpdate();
@@ -1632,22 +1913,47 @@ var CopilotKitProvider = ({
       subscription.unsubscribe();
     };
   }, [copilotkit]);
-  useEffect4(() => {
+  const [executingToolCallIds, setExecutingToolCallIds] = useState5(() => /* @__PURE__ */ new Set());
+  useEffect5(() => {
+    const subscription = copilotkit.subscribe({
+      onToolExecutionStart: ({ toolCallId }) => {
+        setExecutingToolCallIds((prev) => {
+          if (prev.has(toolCallId)) return prev;
+          const next = new Set(prev);
+          next.add(toolCallId);
+          return next;
+        });
+      },
+      onToolExecutionEnd: ({ toolCallId }) => {
+        setExecutingToolCallIds((prev) => {
+          if (!prev.has(toolCallId)) return prev;
+          const next = new Set(prev);
+          next.delete(toolCallId);
+          return next;
+        });
+      }
+    });
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [copilotkit]);
+  useEffect5(() => {
     copilotkit.setRuntimeUrl(chatApiEndpoint);
     copilotkit.setRuntimeTransport(useSingleEndpoint ? "single" : "rest");
     copilotkit.setHeaders(mergedHeaders);
     copilotkit.setProperties(properties);
     copilotkit.setAgents__unsafe_dev_only(agents);
   }, [chatApiEndpoint, mergedHeaders, properties, agents, useSingleEndpoint]);
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     CopilotKitContext.Provider,
     {
       value: {
-        copilotkit
+        copilotkit,
+        executingToolCallIds
       },
       children: [
         children,
-        shouldRenderInspector ? /* @__PURE__ */ jsx8(CopilotKitInspector, { core: copilotkit }) : null
+        shouldRenderInspector ? /* @__PURE__ */ jsx9(CopilotKitInspector, { core: copilotkit }) : null
       ]
     }
   );
@@ -1658,7 +1964,7 @@ var useCopilotKit = () => {
   if (!context) {
     throw new Error("useCopilotKit must be used within CopilotKitProvider");
   }
-  useEffect4(() => {
+  useEffect5(() => {
     const subscription = context.copilotkit.subscribe({
       onRuntimeConnectionStatusChanged: () => {
         forceUpdate();
@@ -1674,8 +1980,8 @@ var useCopilotKit = () => {
 // src/hooks/use-render-tool-call.tsx
 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(
+import { jsx as jsx10 } from "react/jsx-runtime";
+var ToolCallRenderer = React7.memo(
   function ToolCallRenderer2({
     toolCall,
     toolMessage,
@@ -1688,7 +1994,7 @@ var ToolCallRenderer = React6.memo(
     );
     const toolName = toolCall.function.name;
     if (toolMessage) {
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         RenderComponent,
         {
           name: toolName,
@@ -1698,7 +2004,7 @@ var ToolCallRenderer = React6.memo(
         }
       );
     } else if (isExecuting) {
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         RenderComponent,
         {
           name: toolName,
@@ -1708,7 +2014,7 @@ var ToolCallRenderer = React6.memo(
         }
       );
     } else {
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         RenderComponent,
         {
           name: toolName,
@@ -1733,10 +2039,9 @@ var ToolCallRenderer = React6.memo(
   }
 );
 function useRenderToolCall() {
-  const { copilotkit } = useCopilotKit();
+  const { copilotkit, executingToolCallIds } = useCopilotKit();
   const config = useCopilotChatConfiguration();
   const agentId = config?.agentId ?? DEFAULT_AGENT_ID2;
-  const [executingToolCallIds, setExecutingToolCallIds] = useState5(() => /* @__PURE__ */ new Set());
   const renderToolCalls = useSyncExternalStore(
     (callback) => {
       return copilotkit.subscribe({
@@ -1746,28 +2051,7 @@ function useRenderToolCall() {
     () => copilotkit.renderToolCalls,
     () => copilotkit.renderToolCalls
   );
-  useEffect5(() => {
-    const subscription = copilotkit.subscribe({
-      onToolExecutionStart: ({ toolCallId }) => {
-        setExecutingToolCallIds((prev) => {
-          if (prev.has(toolCallId)) return prev;
-          const next = new Set(prev);
-          next.add(toolCallId);
-          return next;
-        });
-      },
-      onToolExecutionEnd: ({ toolCallId }) => {
-        setExecutingToolCallIds((prev) => {
-          if (!prev.has(toolCallId)) return prev;
-          const next = new Set(prev);
-          next.delete(toolCallId);
-          return next;
-        });
-      }
-    });
-    return () => subscription.unsubscribe();
-  }, [copilotkit]);
-  const renderToolCall = useCallback2(
+  const renderToolCall = useCallback3(
     ({
       toolCall,
       toolMessage
@@ -1781,7 +2065,7 @@ function useRenderToolCall() {
       }
       const RenderComponent = renderConfig.render;
       const isExecuting = executingToolCallIds.has(toolCall.id);
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         ToolCallRenderer,
         {
           toolCall,
@@ -1798,7 +2082,7 @@ function useRenderToolCall() {
 }
 
 // src/hooks/use-render-custom-messages.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function useRenderCustomMessages() {
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
@@ -1833,7 +2117,7 @@ function useRenderCustomMessages() {
         continue;
       }
       const Component = renderer.render;
-      result = /* @__PURE__ */ jsx10(
+      result = /* @__PURE__ */ jsx11(
         Component,
         {
           message,
@@ -1857,14 +2141,14 @@ function useRenderCustomMessages() {
 
 // src/hooks/use-render-activity-message.tsx
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID3 } from "@copilotkitnext/shared";
-import { useCallback as useCallback3 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { useCallback as useCallback4 } 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 useCallback3(
+  return useCallback4(
     (message) => {
       if (!renderers.length) {
         return null;
@@ -1886,7 +2170,7 @@ function useRenderActivityMessage() {
       }
       const Component = renderer.render;
       const agent = copilotkit.getAgent(agentId);
-      return /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx12(
         Component,
         {
           activityType: message.activityType,
@@ -1939,23 +2223,23 @@ function useFrontendTool(tool, deps) {
 }
 
 // src/hooks/use-human-in-the-loop.tsx
-import { useCallback as useCallback4, useRef as useRef4, useEffect as useEffect7 } from "react";
-import React7 from "react";
+import { useCallback as useCallback5, useRef as useRef5, useEffect as useEffect7 } from "react";
+import React8 from "react";
 function useHumanInTheLoop(tool, deps) {
   const { copilotkit } = useCopilotKit();
-  const resolvePromiseRef = useRef4(null);
-  const respond = useCallback4(async (result) => {
+  const resolvePromiseRef = useRef5(null);
+  const respond = useCallback5(async (result) => {
     if (resolvePromiseRef.current) {
       resolvePromiseRef.current(result);
       resolvePromiseRef.current = null;
     }
   }, []);
-  const handler = useCallback4(async () => {
+  const handler = useCallback5(async () => {
     return new Promise((resolve) => {
       resolvePromiseRef.current = resolve;
     });
   }, []);
-  const RenderComponent = useCallback4(
+  const RenderComponent = useCallback5(
     (props) => {
       const ToolComponent = tool.render;
       if (props.status === "inProgress") {
@@ -1965,7 +2249,7 @@ function useHumanInTheLoop(tool, deps) {
           description: tool.description || "",
           respond: void 0
         };
-        return React7.createElement(ToolComponent, enhancedProps);
+        return React8.createElement(ToolComponent, enhancedProps);
       } else if (props.status === "executing") {
         const enhancedProps = {
           ...props,
@@ -1973,7 +2257,7 @@ function useHumanInTheLoop(tool, deps) {
           description: tool.description || "",
           respond
         };
-        return React7.createElement(ToolComponent, enhancedProps);
+        return React8.createElement(ToolComponent, enhancedProps);
       } else if (props.status === "complete") {
         const enhancedProps = {
           ...props,
@@ -1981,9 +2265,9 @@ function useHumanInTheLoop(tool, deps) {
           description: tool.description || "",
           respond: void 0
         };
-        return React7.createElement(ToolComponent, enhancedProps);
+        return React8.createElement(ToolComponent, enhancedProps);
       }
-      return React7.createElement(ToolComponent, props);
+      return React8.createElement(ToolComponent, props);
     },
     [tool.render, tool.name, tool.description, respond]
   );
@@ -2009,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 */,
@@ -2107,7 +2397,7 @@ function useAgentContext(context) {
 }
 
 // src/hooks/use-suggestions.tsx
-import { useCallback as useCallback5, useEffect as useEffect10, useMemo as useMemo7, useState as useState6 } from "react";
+import { useCallback as useCallback6, 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();
@@ -2156,10 +2446,10 @@ function useSuggestions({ agentId } = {}) {
       subscription.unsubscribe();
     };
   }, [copilotkit, resolvedAgentId]);
-  const reloadSuggestions = useCallback5(() => {
+  const reloadSuggestions = useCallback6(() => {
     copilotkit.reloadSuggestions(resolvedAgentId);
   }, [copilotkit, resolvedAgentId]);
-  const clearSuggestions = useCallback5(() => {
+  const clearSuggestions = useCallback6(() => {
     copilotkit.clearSuggestions(resolvedAgentId);
   }, [copilotkit, resolvedAgentId]);
   return {
@@ -2171,7 +2461,7 @@ function useSuggestions({ agentId } = {}) {
 }
 
 // src/hooks/use-configure-suggestions.tsx
-import { useCallback as useCallback6, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef5 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect11, useMemo as useMemo8, useRef as useRef6 } from "react";
 import { DEFAULT_AGENT_ID as DEFAULT_AGENT_ID6 } from "@copilotkitnext/shared";
 function useConfigureSuggestions(config, deps) {
   const { copilotkit } = useCopilotKit();
@@ -2179,7 +2469,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 = useRef5({
+  const normalizationCacheRef = useRef6({
     serialized: null,
     config: null
   });
@@ -2213,9 +2503,9 @@ function useConfigureSuggestions(config, deps) {
     normalizationCacheRef.current = { serialized, config: built };
     return { normalizedConfig: built, serializedConfig: serialized };
   }, [config, resolvedConsumerAgentId, ...extraDeps]);
-  const latestConfigRef = useRef5(null);
+  const latestConfigRef = useRef6(null);
   latestConfigRef.current = normalizedConfig;
-  const previousSerializedConfigRef = useRef5(null);
+  const previousSerializedConfigRef = useRef6(null);
   const targetAgentId = useMemo8(() => {
     if (!normalizedConfig) {
       return resolvedConsumerAgentId;
@@ -2227,7 +2517,7 @@ function useConfigureSuggestions(config, deps) {
     return consumer;
   }, [normalizedConfig, resolvedConsumerAgentId]);
   const isGlobalConfig = rawConsumerAgentId === void 0 || rawConsumerAgentId === "*";
-  const requestReload = useCallback6(() => {
+  const requestReload = useCallback7(() => {
     if (!normalizedConfig) {
       return;
     }
@@ -2290,8 +2580,8 @@ function normalizeStaticSuggestions(suggestions) {
 }
 
 // src/components/chat/CopilotChatToolCallsView.tsx
-import React8 from "react";
-import { Fragment as Fragment2, jsx as jsx12 } from "react/jsx-runtime";
+import React9 from "react";
+import { Fragment as Fragment2, jsx as jsx13 } from "react/jsx-runtime";
 function CopilotChatToolCallsView({
   message,
   messages = []
@@ -2300,11 +2590,11 @@ function CopilotChatToolCallsView({
   if (!message.toolCalls || message.toolCalls.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx12(Fragment2, { children: message.toolCalls.map((toolCall) => {
+  return /* @__PURE__ */ jsx13(Fragment2, { children: message.toolCalls.map((toolCall) => {
     const toolMessage = messages.find(
       (m) => m.role === "tool" && m.toolCallId === toolCall.id
     );
-    return /* @__PURE__ */ jsx12(React8.Fragment, { children: renderToolCall({
+    return /* @__PURE__ */ jsx13(React9.Fragment, { children: renderToolCall({
       toolCall,
       toolMessage
     }) }, toolCall.id);
@@ -2313,7 +2603,7 @@ function CopilotChatToolCallsView({
 var CopilotChatToolCallsView_default = CopilotChatToolCallsView;
 
 // src/components/chat/CopilotChatAssistantMessage.tsx
-import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
 function CopilotChatAssistantMessage({
   message,
   messages,
@@ -2390,7 +2680,7 @@ function CopilotChatAssistantMessage({
     toolbar,
     CopilotChatAssistantMessage.Toolbar,
     {
-      children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1", children: [
+      children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1", children: [
         boundCopyButton,
         (onThumbsUp || thumbsUpButton) && boundThumbsUpButton,
         (onThumbsDown || thumbsDownButton) && boundThumbsDownButton,
@@ -2412,7 +2702,7 @@ function CopilotChatAssistantMessage({
   const isLatestAssistantMessage = message.role === "assistant" && messages?.[messages.length - 1]?.id === message.id;
   const shouldShowToolbar = toolbarVisible && hasContent && !(isRunning && isLatestAssistantMessage);
   if (children) {
-    return /* @__PURE__ */ jsx13(Fragment3, { children: children({
+    return /* @__PURE__ */ jsx14(Fragment3, { children: children({
       markdownRenderer: boundMarkdownRenderer,
       toolbar: boundToolbar,
       toolCallsView: boundToolCallsView,
@@ -2432,7 +2722,7 @@ function CopilotChatAssistantMessage({
       toolbarVisible: shouldShowToolbar
     }) });
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: twMerge4(
@@ -2450,11 +2740,11 @@ function CopilotChatAssistantMessage({
   );
 }
 ((CopilotChatAssistantMessage2) => {
-  CopilotChatAssistantMessage2.MarkdownRenderer = ({ content, className, ...props }) => /* @__PURE__ */ jsx13(Streamdown, { className, ...props, children: content ?? "" });
+  CopilotChatAssistantMessage2.MarkdownRenderer = ({ content, className, ...props }) => /* @__PURE__ */ jsx14(Streamdown, { className, ...props, children: content ?? "" });
   CopilotChatAssistantMessage2.Toolbar = ({
     className,
     ...props
-  }) => /* @__PURE__ */ jsx13(
+  }) => /* @__PURE__ */ jsx14(
     "div",
     {
       className: twMerge4(
@@ -2465,8 +2755,8 @@ function CopilotChatAssistantMessage({
     }
   );
   CopilotChatAssistantMessage2.ToolbarButton = ({ title, children, ...props }) => {
-    return /* @__PURE__ */ jsxs5(Tooltip, { children: [
-      /* @__PURE__ */ jsx13(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsxs6(Tooltip, { children: [
+      /* @__PURE__ */ jsx14(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx14(
         Button,
         {
           type: "button",
@@ -2476,7 +2766,7 @@ function CopilotChatAssistantMessage({
           children
         }
       ) }),
-      /* @__PURE__ */ jsx13(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx13("p", { children: title }) })
+      /* @__PURE__ */ jsx14(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx14("p", { children: title }) })
     ] });
   };
   CopilotChatAssistantMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
@@ -2490,62 +2780,62 @@ function CopilotChatAssistantMessage({
         onClick(event);
       }
     };
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
         title: title || labels.assistantMessageToolbarCopyMessageLabel,
         onClick: handleClick,
         className,
         ...props,
-        children: copied ? /* @__PURE__ */ jsx13(Check2, { className: "size-[18px]" }) : /* @__PURE__ */ jsx13(Copy, { className: "size-[18px]" })
+        children: copied ? /* @__PURE__ */ jsx14(Check2, { className: "size-[18px]" }) : /* @__PURE__ */ jsx14(Copy, { className: "size-[18px]" })
       }
     );
   };
   CopilotChatAssistantMessage2.ThumbsUpButton = ({ title, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
         title: title || labels.assistantMessageToolbarThumbsUpLabel,
         ...props,
-        children: /* @__PURE__ */ jsx13(ThumbsUp, { className: "size-[18px]" })
+        children: /* @__PURE__ */ jsx14(ThumbsUp, { className: "size-[18px]" })
       }
     );
   };
   CopilotChatAssistantMessage2.ThumbsDownButton = ({ title, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
         title: title || labels.assistantMessageToolbarThumbsDownLabel,
         ...props,
-        children: /* @__PURE__ */ jsx13(ThumbsDown, { className: "size-[18px]" })
+        children: /* @__PURE__ */ jsx14(ThumbsDown, { className: "size-[18px]" })
       }
     );
   };
   CopilotChatAssistantMessage2.ReadAloudButton = ({ title, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
         title: title || labels.assistantMessageToolbarReadAloudLabel,
         ...props,
-        children: /* @__PURE__ */ jsx13(Volume2, { className: "size-[20px]" })
+        children: /* @__PURE__ */ jsx14(Volume2, { className: "size-[20px]" })
       }
     );
   };
   CopilotChatAssistantMessage2.RegenerateButton = ({ title, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       CopilotChatAssistantMessage2.ToolbarButton,
       {
         title: title || labels.assistantMessageToolbarRegenerateLabel,
         ...props,
-        children: /* @__PURE__ */ jsx13(RefreshCw, { className: "size-[18px]" })
+        children: /* @__PURE__ */ jsx14(RefreshCw, { className: "size-[18px]" })
       }
     );
   };
@@ -2563,7 +2853,7 @@ var CopilotChatAssistantMessage_default = CopilotChatAssistantMessage;
 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";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
 function flattenUserMessageContent(content) {
   if (!content) {
     return "";
@@ -2639,7 +2929,7 @@ function CopilotChatUserMessage({
   );
   const showBranchNavigation = numberOfBranches && numberOfBranches > 1 && onSwitchToBranch;
   const BoundToolbar = renderSlot(toolbar, CopilotChatUserMessage.Toolbar, {
-    children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 justify-end", children: [
+    children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1 justify-end", children: [
       additionalToolbarItems,
       BoundCopyButton,
       onEditMessage && BoundEditButton,
@@ -2647,7 +2937,7 @@ function CopilotChatUserMessage({
     ] })
   });
   if (children) {
-    return /* @__PURE__ */ jsx14(Fragment4, { children: children({
+    return /* @__PURE__ */ jsx15(Fragment4, { children: children({
       messageRenderer: BoundMessageRenderer,
       toolbar: BoundToolbar,
       copyButton: BoundCopyButton,
@@ -2659,7 +2949,7 @@ function CopilotChatUserMessage({
       additionalToolbarItems
     }) });
   }
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       className: twMerge5("flex flex-col items-end group pt-10", className),
@@ -2673,7 +2963,7 @@ function CopilotChatUserMessage({
   );
 }
 ((CopilotChatUserMessage2) => {
-  CopilotChatUserMessage2.Container = ({ children, className, ...props }) => /* @__PURE__ */ jsx14(
+  CopilotChatUserMessage2.Container = ({ children, className, ...props }) => /* @__PURE__ */ jsx15(
     "div",
     {
       className: twMerge5("flex flex-col items-end group", className),
@@ -2681,7 +2971,7 @@ function CopilotChatUserMessage({
       children
     }
   );
-  CopilotChatUserMessage2.MessageRenderer = ({ content, className }) => /* @__PURE__ */ jsx14(
+  CopilotChatUserMessage2.MessageRenderer = ({ content, className }) => /* @__PURE__ */ jsx15(
     "div",
     {
       className: twMerge5(
@@ -2694,7 +2984,7 @@ function CopilotChatUserMessage({
   CopilotChatUserMessage2.Toolbar = ({
     className,
     ...props
-  }) => /* @__PURE__ */ jsx14(
+  }) => /* @__PURE__ */ jsx15(
     "div",
     {
       className: twMerge5(
@@ -2705,8 +2995,8 @@ function CopilotChatUserMessage({
     }
   );
   CopilotChatUserMessage2.ToolbarButton = ({ title, children, className, ...props }) => {
-    return /* @__PURE__ */ jsxs6(Tooltip, { children: [
-      /* @__PURE__ */ jsx14(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsxs7(Tooltip, { children: [
+      /* @__PURE__ */ jsx15(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx15(
         Button,
         {
           type: "button",
@@ -2717,7 +3007,7 @@ function CopilotChatUserMessage({
           children
         }
       ) }),
-      /* @__PURE__ */ jsx14(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx14("p", { children: title }) })
+      /* @__PURE__ */ jsx15(TooltipContent, { side: "bottom", children: /* @__PURE__ */ jsx15("p", { children: title }) })
     ] });
   };
   CopilotChatUserMessage2.CopyButton = ({ className, title, onClick, ...props }) => {
@@ -2731,27 +3021,27 @@ function CopilotChatUserMessage({
         onClick(event);
       }
     };
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       CopilotChatUserMessage2.ToolbarButton,
       {
         title: title || labels.userMessageToolbarCopyMessageLabel,
         onClick: handleClick,
         className,
         ...props,
-        children: copied ? /* @__PURE__ */ jsx14(Check3, { className: "size-[18px]" }) : /* @__PURE__ */ jsx14(Copy2, { className: "size-[18px]" })
+        children: copied ? /* @__PURE__ */ jsx15(Check3, { className: "size-[18px]" }) : /* @__PURE__ */ jsx15(Copy2, { className: "size-[18px]" })
       }
     );
   };
   CopilotChatUserMessage2.EditButton = ({ className, title, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       CopilotChatUserMessage2.ToolbarButton,
       {
         title: title || labels.userMessageToolbarEditMessageLabel,
         className,
         ...props,
-        children: /* @__PURE__ */ jsx14(Edit, { className: "size-[18px]" })
+        children: /* @__PURE__ */ jsx15(Edit, { className: "size-[18px]" })
       }
     );
   };
@@ -2768,8 +3058,8 @@ function CopilotChatUserMessage({
     }
     const canGoPrev = currentBranch > 0;
     const canGoNext = currentBranch < numberOfBranches - 1;
-    return /* @__PURE__ */ jsxs6("div", { className: twMerge5("flex items-center gap-1", className), ...props, children: [
-      /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsxs7("div", { className: twMerge5("flex items-center gap-1", className), ...props, children: [
+      /* @__PURE__ */ jsx15(
         Button,
         {
           type: "button",
@@ -2781,15 +3071,15 @@ function CopilotChatUserMessage({
           }),
           disabled: !canGoPrev,
           className: "h-6 w-6 p-0",
-          children: /* @__PURE__ */ jsx14(ChevronLeft, { className: "size-[20px]" })
+          children: /* @__PURE__ */ jsx15(ChevronLeft, { className: "size-[20px]" })
         }
       ),
-      /* @__PURE__ */ jsxs6("span", { className: "text-sm text-muted-foreground px-0 font-medium", children: [
+      /* @__PURE__ */ jsxs7("span", { className: "text-sm text-muted-foreground px-0 font-medium", children: [
         currentBranch + 1,
         "/",
         numberOfBranches
       ] }),
-      /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsx15(
         Button,
         {
           type: "button",
@@ -2801,7 +3091,7 @@ function CopilotChatUserMessage({
           }),
           disabled: !canGoNext,
           className: "h-6 w-6 p-0",
-          children: /* @__PURE__ */ jsx14(ChevronRight, { className: "size-[20px]" })
+          children: /* @__PURE__ */ jsx15(ChevronRight, { className: "size-[20px]" })
         }
       )
     ] });
@@ -2817,14 +3107,14 @@ CopilotChatUserMessage.BranchNavigation.displayName = "CopilotChatUserMessage.Br
 var CopilotChatUserMessage_default = CopilotChatUserMessage;
 
 // src/components/chat/CopilotChatSuggestionPill.tsx
-import React9 from "react";
+import React10 from "react";
 import { Loader2 } from "lucide-react";
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 var baseClasses = "group inline-flex h-7 sm:h-8 items-center gap-1 sm:gap-1.5 rounded-full border border-border/60 bg-background px-2.5 sm:px-3 text-[11px] sm:text-xs leading-none text-foreground transition-colors cursor-pointer hover:bg-accent/60 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:text-muted-foreground disabled:hover:bg-background disabled:hover:text-muted-foreground pointer-events-auto";
 var labelClasses = "whitespace-nowrap font-medium leading-none";
-var CopilotChatSuggestionPill = React9.forwardRef(function CopilotChatSuggestionPill2({ className, children, icon, isLoading, type, ...props }, ref) {
+var CopilotChatSuggestionPill = React10.forwardRef(function CopilotChatSuggestionPill2({ className, children, icon, isLoading, type, ...props }, ref) {
   const showIcon = !isLoading && icon;
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     "button",
     {
       ref,
@@ -2835,8 +3125,8 @@ var CopilotChatSuggestionPill = React9.forwardRef(function CopilotChatSuggestion
       disabled: isLoading || props.disabled,
       ...props,
       children: [
-        isLoading ? /* @__PURE__ */ jsx15("span", { className: "flex h-3.5 sm:h-4 w-3.5 sm:w-4 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx15(Loader2, { className: "h-3.5 sm:h-4 w-3.5 sm:w-4 animate-spin", "aria-hidden": "true" }) }) : showIcon && /* @__PURE__ */ jsx15("span", { className: "flex h-3.5 sm:h-4 w-3.5 sm:w-4 items-center justify-center text-muted-foreground", children: icon }),
-        /* @__PURE__ */ jsx15("span", { className: labelClasses, children })
+        isLoading ? /* @__PURE__ */ jsx16("span", { className: "flex h-3.5 sm:h-4 w-3.5 sm:w-4 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx16(Loader2, { className: "h-3.5 sm:h-4 w-3.5 sm:w-4 animate-spin", "aria-hidden": "true" }) }) : showIcon && /* @__PURE__ */ jsx16("span", { className: "flex h-3.5 sm:h-4 w-3.5 sm:w-4 items-center justify-center text-muted-foreground", children: icon }),
+        /* @__PURE__ */ jsx16("span", { className: labelClasses, children })
       ]
     }
   );
@@ -2845,10 +3135,10 @@ CopilotChatSuggestionPill.displayName = "CopilotChatSuggestionPill";
 var CopilotChatSuggestionPill_default = CopilotChatSuggestionPill;
 
 // src/components/chat/CopilotChatSuggestionView.tsx
-import React10 from "react";
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
-var DefaultContainer = React10.forwardRef(function DefaultContainer2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx16(
+import React11 from "react";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+var DefaultContainer = React11.forwardRef(function DefaultContainer2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       ref,
@@ -2860,7 +3150,7 @@ var DefaultContainer = React10.forwardRef(function DefaultContainer2({ className
     }
   );
 });
-var CopilotChatSuggestionView = React10.forwardRef(function CopilotChatSuggestionView2({
+var CopilotChatSuggestionView = React11.forwardRef(function CopilotChatSuggestionView2({
   suggestions,
   onSelectSuggestion,
   loadingIndexes,
@@ -2870,7 +3160,7 @@ var CopilotChatSuggestionView = React10.forwardRef(function CopilotChatSuggestio
   children,
   ...restProps
 }, ref) {
-  const loadingSet = React10.useMemo(() => {
+  const loadingSet = React11.useMemo(() => {
     if (!loadingIndexes || loadingIndexes.length === 0) {
       return /* @__PURE__ */ new Set();
     }
@@ -2889,11 +3179,11 @@ var CopilotChatSuggestionView = React10.forwardRef(function CopilotChatSuggestio
       type: "button",
       onClick: () => onSelectSuggestion?.(suggestion, index)
     });
-    return React10.cloneElement(pill, {
+    return React11.cloneElement(pill, {
       key: `${suggestion.title}-${index}`
     });
   });
-  const boundContainer = React10.cloneElement(
+  const boundContainer = React11.cloneElement(
     ContainerElement,
     void 0,
     suggestionElements
@@ -2904,7 +3194,7 @@ var CopilotChatSuggestionView = React10.forwardRef(function CopilotChatSuggestio
       isLoading: suggestions.length > 0 ? loadingSet.has(0) || suggestions[0]?.isLoading === true : false,
       type: "button"
     });
-    return /* @__PURE__ */ jsx16(Fragment5, { children: children({
+    return /* @__PURE__ */ jsx17(Fragment5, { children: children({
       container: boundContainer,
       suggestion: sampleSuggestion,
       suggestions,
@@ -2915,7 +3205,7 @@ var CopilotChatSuggestionView = React10.forwardRef(function CopilotChatSuggestio
     }) });
   }
   if (children) {
-    return /* @__PURE__ */ jsxs8(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs9(Fragment5, { children: [
       boundContainer,
       children
     ] });
@@ -2926,17 +3216,17 @@ CopilotChatSuggestionView.displayName = "CopilotChatSuggestionView";
 var CopilotChatSuggestionView_default = CopilotChatSuggestionView;
 
 // src/components/chat/CopilotChatMessageView.tsx
-import React11 from "react";
+import React12, { useEffect as useEffect12, useReducer as useReducer3 } from "react";
 import { twMerge as twMerge6 } from "tailwind-merge";
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
-var MemoizedAssistantMessage = React11.memo(
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+var MemoizedAssistantMessage = React12.memo(
   function MemoizedAssistantMessage2({
     message,
     messages,
     isRunning,
     AssistantMessageComponent
   }) {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       AssistantMessageComponent,
       {
         message,
@@ -2979,12 +3269,12 @@ var MemoizedAssistantMessage = React11.memo(
     return true;
   }
 );
-var MemoizedUserMessage = React11.memo(
+var MemoizedUserMessage = React12.memo(
   function MemoizedUserMessage2({
     message,
     UserMessageComponent
   }) {
-    return /* @__PURE__ */ jsx17(UserMessageComponent, { message });
+    return /* @__PURE__ */ jsx18(UserMessageComponent, { message });
   },
   (prevProps, nextProps) => {
     if (prevProps.message.id !== nextProps.message.id) return false;
@@ -2993,7 +3283,7 @@ var MemoizedUserMessage = React11.memo(
     return true;
   }
 );
-var MemoizedActivityMessage = React11.memo(
+var MemoizedActivityMessage = React12.memo(
   function MemoizedActivityMessage2({
     message,
     renderActivityMessage
@@ -3007,7 +3297,7 @@ var MemoizedActivityMessage = React11.memo(
     return true;
   }
 );
-var MemoizedCustomMessage = React11.memo(
+var MemoizedCustomMessage = React12.memo(
   function MemoizedCustomMessage2({
     message,
     position,
@@ -3020,6 +3310,7 @@ var MemoizedCustomMessage = React11.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;
   }
 );
@@ -3035,16 +3326,36 @@ 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__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           MemoizedCustomMessage,
           {
             message,
             position: "before",
-            renderCustomMessage
+            renderCustomMessage,
+            stateSnapshot
           },
           `${message.id}-custom-before`
         )
@@ -3053,7 +3364,7 @@ function CopilotChatMessageView({
     if (message.role === "assistant") {
       const AssistantComponent = typeof assistantMessage === "function" ? assistantMessage : CopilotChatAssistantMessage_default;
       elements.push(
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           MemoizedAssistantMessage,
           {
             message,
@@ -3067,7 +3378,7 @@ function CopilotChatMessageView({
     } else if (message.role === "user") {
       const UserComponent = typeof userMessage === "function" ? userMessage : CopilotChatUserMessage_default;
       elements.push(
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           MemoizedUserMessage,
           {
             message,
@@ -3078,7 +3389,7 @@ function CopilotChatMessageView({
       );
     } else if (message.role === "activity") {
       elements.push(
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           MemoizedActivityMessage,
           {
             message,
@@ -3090,12 +3401,13 @@ function CopilotChatMessageView({
     }
     if (renderCustomMessage) {
       elements.push(
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           MemoizedCustomMessage,
           {
             message,
             position: "after",
-            renderCustomMessage
+            renderCustomMessage,
+            stateSnapshot
           },
           `${message.id}-custom-after`
         )
@@ -3106,13 +3418,13 @@ function CopilotChatMessageView({
   if (children) {
     return children({ messageElements, messages, isRunning });
   }
-  return /* @__PURE__ */ jsxs9("div", { className: twMerge6("flex flex-col", className), ...props, children: [
+  return /* @__PURE__ */ jsxs10("div", { className: twMerge6("flex flex-col", className), ...props, children: [
     messageElements,
     isRunning && renderSlot(cursor, CopilotChatMessageView.Cursor, {})
   ] });
 }
 CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       className: twMerge6("w-[11px] h-[11px] rounded-full bg-foreground animate-pulse-cursor ml-1", className),
@@ -3123,13 +3435,13 @@ CopilotChatMessageView.Cursor = function Cursor({ className, ...props }) {
 var CopilotChatMessageView_default = CopilotChatMessageView;
 
 // src/components/chat/CopilotChatView.tsx
-import React12, { useRef as useRef6, 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,
@@ -3137,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;
     }
@@ -3169,7 +3481,7 @@ function useKeyboardHeight() {
 }
 
 // src/components/chat/CopilotChatView.tsx
-import { Fragment as Fragment6, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 function CopilotChatView({
   messageView,
   input,
@@ -3190,12 +3502,12 @@ function CopilotChatView({
   className,
   ...props
 }) {
-  const inputContainerRef = useRef6(null);
+  const inputContainerRef = useRef7(null);
   const [inputContainerHeight, setInputContainerHeight] = useState10(0);
   const [isResizing, setIsResizing] = useState10(false);
-  const resizeTimeoutRef = useRef6(null);
+  const resizeTimeoutRef = useRef7(null);
   const { isKeyboardOpen, keyboardHeight, availableHeight } = useKeyboardHeight();
-  useEffect13(() => {
+  useEffect14(() => {
     const element = inputContainerRef.current;
     if (!element) return;
     const resizeObserver = new ResizeObserver((entries) => {
@@ -3243,9 +3555,9 @@ function CopilotChatView({
     scrollToBottomButton,
     inputContainerHeight,
     isResizing,
-    children: /* @__PURE__ */ jsx18("div", { style: { paddingBottom: `${inputContainerHeight + (hasSuggestions ? 4 : 32)}px` }, children: /* @__PURE__ */ jsxs10("div", { className: "max-w-3xl mx-auto", children: [
+    children: /* @__PURE__ */ jsx19("div", { style: { paddingBottom: `${inputContainerHeight + (hasSuggestions ? 4 : 32)}px` }, children: /* @__PURE__ */ jsxs11("div", { className: "max-w-3xl mx-auto", children: [
       BoundMessageView,
-      hasSuggestions ? /* @__PURE__ */ jsx18("div", { className: "pl-0 pr-4 sm:px-0 mt-4", children: BoundSuggestionView }) : null
+      hasSuggestions ? /* @__PURE__ */ jsx19("div", { className: "pl-0 pr-4 sm:px-0 mt-4", children: BoundSuggestionView }) : null
     ] }) })
   });
   const BoundScrollToBottomButton = renderSlot(scrollToBottomButton, CopilotChatView.ScrollToBottomButton, {});
@@ -3253,8 +3565,8 @@ function CopilotChatView({
   const BoundInputContainer = renderSlot(inputContainer, CopilotChatView.InputContainer, {
     ref: inputContainerRef,
     keyboardHeight: isKeyboardOpen ? keyboardHeight : 0,
-    children: /* @__PURE__ */ jsxs10(Fragment6, { children: [
-      /* @__PURE__ */ jsx18("div", { className: "max-w-3xl mx-auto py-0 px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6 pointer-events-auto", children: BoundInput }),
+    children: /* @__PURE__ */ jsxs11(Fragment6, { children: [
+      /* @__PURE__ */ jsx19("div", { className: "max-w-3xl mx-auto py-0 px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6 pointer-events-auto", children: BoundInput }),
       BoundDisclaimer
     ] })
   });
@@ -3267,10 +3579,10 @@ function CopilotChatView({
       feather: BoundFeather,
       inputContainer: BoundInputContainer,
       disclaimer: BoundDisclaimer,
-      suggestionView: BoundSuggestionView ?? /* @__PURE__ */ jsx18(Fragment6, {})
+      suggestionView: BoundSuggestionView ?? /* @__PURE__ */ jsx19(Fragment6, {})
     });
   }
-  return /* @__PURE__ */ jsxs10("div", { className: twMerge7("relative h-full", className), ...props, children: [
+  return /* @__PURE__ */ jsxs11("div", { className: twMerge7("relative h-full", className), ...props, children: [
     BoundScrollView,
     BoundFeather,
     BoundInputContainer
@@ -3279,9 +3591,9 @@ function CopilotChatView({
 ((CopilotChatView2) => {
   const ScrollContent = ({ children, scrollToBottomButton, inputContainerHeight, isResizing }) => {
     const { isAtBottom, scrollToBottom } = useStickToBottomContext();
-    return /* @__PURE__ */ jsxs10(Fragment6, { children: [
-      /* @__PURE__ */ jsx18(StickToBottom.Content, { className: "overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ jsx18("div", { className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6", children }) }),
-      !isAtBottom && !isResizing && /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsxs11(Fragment6, { children: [
+      /* @__PURE__ */ jsx19(StickToBottom.Content, { className: "overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ jsx19("div", { className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6", children }) }),
+      !isAtBottom && !isResizing && /* @__PURE__ */ jsx19(
         "div",
         {
           className: "absolute inset-x-0 flex justify-center z-10 pointer-events-none",
@@ -3307,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;
@@ -3328,10 +3640,10 @@ function CopilotChatView({
       };
     }, [scrollRef, autoScroll]);
     if (!hasMounted) {
-      return /* @__PURE__ */ jsx18("div", { className: "h-full max-h-full flex flex-col min-h-0 overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ jsx18("div", { className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6", children }) });
+      return /* @__PURE__ */ jsx19("div", { className: "h-full max-h-full flex flex-col min-h-0 overflow-y-scroll overflow-x-hidden", children: /* @__PURE__ */ jsx19("div", { className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6", children }) });
     }
     if (!autoScroll) {
-      return /* @__PURE__ */ jsxs10(
+      return /* @__PURE__ */ jsxs11(
         "div",
         {
           ref: scrollRef,
@@ -3341,8 +3653,8 @@ function CopilotChatView({
           ),
           ...props,
           children: [
-            /* @__PURE__ */ jsx18("div", { ref: contentRef, className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6", children }),
-            showScrollButton && !isResizing && /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsx19("div", { ref: contentRef, className: "px-4 sm:px-0 [div[data-sidebar-chat]_&]:px-8 [div[data-popup-chat]_&]:px-6", children }),
+            showScrollButton && !isResizing && /* @__PURE__ */ jsx19(
               "div",
               {
                 className: "absolute inset-x-0 flex justify-center z-10 pointer-events-none",
@@ -3358,14 +3670,14 @@ function CopilotChatView({
         }
       );
     }
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       StickToBottom,
       {
         className: cn("h-full max-h-full flex flex-col min-h-0 relative", className),
         resize: "smooth",
         initial: "smooth",
         ...props,
-        children: /* @__PURE__ */ jsx18(
+        children: /* @__PURE__ */ jsx19(
           ScrollContent,
           {
             scrollToBottomButton,
@@ -3380,7 +3692,7 @@ function CopilotChatView({
   CopilotChatView2.ScrollToBottomButton = ({
     className,
     ...props
-  }) => /* @__PURE__ */ jsx18(
+  }) => /* @__PURE__ */ jsx19(
     Button,
     {
       variant: "outline",
@@ -3394,10 +3706,10 @@ function CopilotChatView({
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx18(ChevronDown, { className: "w-4 h-4 text-gray-600 dark:text-white" })
+      children: /* @__PURE__ */ jsx19(ChevronDown, { className: "w-4 h-4 text-gray-600 dark:text-white" })
     }
   );
-  CopilotChatView2.Feather = ({ className, style, ...props }) => /* @__PURE__ */ jsx18(
+  CopilotChatView2.Feather = ({ className, style, ...props }) => /* @__PURE__ */ jsx19(
     "div",
     {
       className: cn(
@@ -3410,7 +3722,7 @@ function CopilotChatView({
       ...props
     }
   );
-  CopilotChatView2.InputContainer = React12.forwardRef(({ children, className, keyboardHeight = 0, ...props }, ref) => /* @__PURE__ */ jsx18(
+  CopilotChatView2.InputContainer = React13.forwardRef(({ children, className, keyboardHeight = 0, ...props }, ref) => /* @__PURE__ */ jsx19(
     "div",
     {
       ref,
@@ -3428,7 +3740,7 @@ function CopilotChatView({
   CopilotChatView2.Disclaimer = ({ className, ...props }) => {
     const config = useCopilotChatConfiguration();
     const labels = config?.labels ?? CopilotChatDefaultLabels;
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       "div",
       {
         className: cn("text-center text-xs text-muted-foreground py-3 px-4 max-w-3xl mx-auto", className),
@@ -3442,10 +3754,10 @@ 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 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 jsx19 } from "react/jsx-runtime";
+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;
@@ -3462,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 });
@@ -3478,7 +3790,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     return () => {
     };
   }, [resolvedThreadId, agent, copilotkit, resolvedAgentId]);
-  const onSubmitInput = useCallback7(
+  const onSubmitInput = useCallback8(
     async (value) => {
       agent.addMessage({
         id: randomUUID2(),
@@ -3493,7 +3805,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     },
     [agent, copilotkit]
   );
-  const handleSelectSuggestion = useCallback7(
+  const handleSelectSuggestion = useCallback8(
     async (suggestion) => {
       agent.addMessage({
         id: randomUUID2(),
@@ -3508,7 +3820,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     },
     [agent, copilotkit]
   );
-  const stopCurrentRun = useCallback7(() => {
+  const stopCurrentRun = useCallback8(() => {
     try {
       copilotkit.stopAgent({ agent });
     } catch (error) {
@@ -3548,7 +3860,7 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     inputProps: finalInputProps
   });
   const RenderedChatView = renderSlot(chatView, CopilotChatView, finalProps);
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     CopilotChatConfigurationProvider,
     {
       agentId: resolvedAgentId,
@@ -3564,17 +3876,17 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
 })(CopilotChat || (CopilotChat = {}));
 
 // src/components/chat/CopilotChatToggleButton.tsx
-import React13, { useState as useState11 } from "react";
+import React14, { useState as useState11 } from "react";
 import { MessageCircle, X as X2 } from "lucide-react";
-import { jsx as jsx20, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
 var DefaultOpenIcon = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx20(MessageCircle, { className: cn("h-6 w-6", className), strokeWidth: 1.75, fill: "currentColor", ...props });
+}) => /* @__PURE__ */ jsx21(MessageCircle, { className: cn("h-6 w-6", className), strokeWidth: 1.75, fill: "currentColor", ...props });
 var DefaultCloseIcon = ({
   className,
   ...props
-}) => /* @__PURE__ */ jsx20(X2, { className: cn("h-6 w-6", className), strokeWidth: 1.75, ...props });
+}) => /* @__PURE__ */ jsx21(X2, { className: cn("h-6 w-6", className), strokeWidth: 1.75, ...props });
 DefaultOpenIcon.displayName = "CopilotChatToggleButton.OpenIcon";
 DefaultCloseIcon.displayName = "CopilotChatToggleButton.CloseIcon";
 var ICON_TRANSITION_STYLE = Object.freeze({
@@ -3591,7 +3903,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 = React13.forwardRef(function CopilotChatToggleButton2({ openIcon, closeIcon, className, ...buttonProps }, ref) {
+var CopilotChatToggleButton = React14.forwardRef(function CopilotChatToggleButton2({ openIcon, closeIcon, className, ...buttonProps }, ref) {
   const { onClick, type, disabled, ...restProps } = buttonProps;
   const configuration = useCopilotChatConfiguration();
   const labels = configuration?.labels ?? CopilotChatDefaultLabels;
@@ -3629,7 +3941,7 @@ var CopilotChatToggleButton = React13.forwardRef(function CopilotChatToggleButto
       focusable: false
     }
   );
-  const openIconElement = /* @__PURE__ */ jsx20(
+  const openIconElement = /* @__PURE__ */ jsx21(
     "span",
     {
       "aria-hidden": "true",
@@ -3643,7 +3955,7 @@ var CopilotChatToggleButton = React13.forwardRef(function CopilotChatToggleButto
       children: renderedOpenIcon
     }
   );
-  const closeIconElement = /* @__PURE__ */ jsx20(
+  const closeIconElement = /* @__PURE__ */ jsx21(
     "span",
     {
       "aria-hidden": "true",
@@ -3657,7 +3969,7 @@ var CopilotChatToggleButton = React13.forwardRef(function CopilotChatToggleButto
       children: renderedCloseIcon
     }
   );
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "button",
     {
       ref,
@@ -3681,12 +3993,12 @@ CopilotChatToggleButton.displayName = "CopilotChatToggleButton";
 var CopilotChatToggleButton_default = CopilotChatToggleButton;
 
 // src/components/chat/CopilotSidebarView.tsx
-import { useEffect as useEffect15, useRef as useRef7, 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 useCallback8 } from "react";
+import { useCallback as useCallback9 } from "react";
 import { X as X3 } from "lucide-react";
-import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 function CopilotModalHeader({
   title,
   titleContent,
@@ -3698,7 +4010,7 @@ function CopilotModalHeader({
   const configuration = useCopilotChatConfiguration();
   const fallbackTitle = configuration?.labels.modalHeaderTitle ?? CopilotChatDefaultLabels.modalHeaderTitle;
   const resolvedTitle = title ?? fallbackTitle;
-  const handleClose = useCallback8(() => {
+  const handleClose = useCallback9(() => {
     configuration?.setModalOpen(false);
   }, [configuration]);
   const BoundTitle = renderSlot(titleContent, CopilotModalHeader.Title, {
@@ -3715,7 +4027,7 @@ function CopilotModalHeader({
       ...rest
     });
   }
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "header",
     {
       "data-slot": "copilot-modal-header",
@@ -3725,17 +4037,17 @@ function CopilotModalHeader({
         className
       ),
       ...rest,
-      children: /* @__PURE__ */ jsxs12("div", { className: "flex w-full items-center gap-2", children: [
-        /* @__PURE__ */ jsx21("div", { className: "flex-1", "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx21("div", { className: "flex flex-1 justify-center text-center", children: BoundTitle }),
-        /* @__PURE__ */ jsx21("div", { className: "flex flex-1 justify-end", children: BoundCloseButton })
+      children: /* @__PURE__ */ jsxs13("div", { className: "flex w-full items-center gap-2", children: [
+        /* @__PURE__ */ jsx22("div", { className: "flex-1", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx22("div", { className: "flex flex-1 justify-center text-center", children: BoundTitle }),
+        /* @__PURE__ */ jsx22("div", { className: "flex flex-1 justify-end", children: BoundCloseButton })
       ] })
     }
   );
 }
 CopilotModalHeader.displayName = "CopilotModalHeader";
 ((CopilotModalHeader2) => {
-  CopilotModalHeader2.Title = ({ children, className, ...props }) => /* @__PURE__ */ jsx21(
+  CopilotModalHeader2.Title = ({ children, className, ...props }) => /* @__PURE__ */ jsx22(
     "div",
     {
       className: cn(
@@ -3749,7 +4061,7 @@ CopilotModalHeader.displayName = "CopilotModalHeader";
   CopilotModalHeader2.CloseButton = ({
     className,
     ...props
-  }) => /* @__PURE__ */ jsx21(
+  }) => /* @__PURE__ */ jsx22(
     "button",
     {
       type: "button",
@@ -3760,7 +4072,7 @@ CopilotModalHeader.displayName = "CopilotModalHeader";
       ),
       "aria-label": "Close",
       ...props,
-      children: /* @__PURE__ */ jsx21(X3, { className: "h-4 w-4", "aria-hidden": "true" })
+      children: /* @__PURE__ */ jsx22(X3, { className: "h-4 w-4", "aria-hidden": "true" })
     }
   );
 })(CopilotModalHeader || (CopilotModalHeader = {}));
@@ -3768,13 +4080,13 @@ CopilotModalHeader.Title.displayName = "CopilotModalHeader.Title";
 CopilotModalHeader.CloseButton.displayName = "CopilotModalHeader.CloseButton";
 
 // src/components/chat/CopilotSidebarView.tsx
-import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx23, jsxs as jsxs14 } from "react/jsx-runtime";
 var DEFAULT_SIDEBAR_WIDTH = 480;
 var SIDEBAR_TRANSITION_MS = 260;
 function CopilotSidebarView({ header, width, ...props }) {
   const configuration = useCopilotChatConfiguration();
   const isSidebarOpen = configuration?.isModalOpen ?? false;
-  const sidebarRef = useRef7(null);
+  const sidebarRef = useRef8(null);
   const [sidebarWidth, setSidebarWidth] = useState12(width ?? DEFAULT_SIDEBAR_WIDTH);
   const widthToCss = (w) => {
     return typeof w === "number" ? `${w}px` : w;
@@ -3785,7 +4097,7 @@ function CopilotSidebarView({ header, width, ...props }) {
     }
     return w;
   };
-  useEffect15(() => {
+  useEffect16(() => {
     if (width !== void 0) {
       return;
     }
@@ -3812,8 +4124,8 @@ function CopilotSidebarView({ header, width, ...props }) {
     return () => window.removeEventListener("resize", updateWidth);
   }, [width]);
   const headerElement = renderSlot(header, CopilotModalHeader, {});
-  return /* @__PURE__ */ jsxs13(Fragment7, { children: [
-    isSidebarOpen && /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsxs14(Fragment7, { children: [
+    isSidebarOpen && /* @__PURE__ */ jsx23(
       "style",
       {
         dangerouslySetInnerHTML: {
@@ -3827,8 +4139,8 @@ function CopilotSidebarView({ header, width, ...props }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx22(CopilotChatToggleButton_default, {}),
-    /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx23(CopilotChatToggleButton_default, {}),
+    /* @__PURE__ */ jsx23(
       "aside",
       {
         ref: sidebarRef,
@@ -3853,9 +4165,9 @@ function CopilotSidebarView({ header, width, ...props }) {
         "aria-hidden": !isSidebarOpen,
         "aria-label": "Copilot chat sidebar",
         role: "complementary",
-        children: /* @__PURE__ */ jsxs13("div", { className: "flex h-full w-full flex-col overflow-hidden", children: [
+        children: /* @__PURE__ */ jsxs14("div", { className: "flex h-full w-full flex-col overflow-hidden", children: [
           headerElement,
-          /* @__PURE__ */ jsx22("div", { className: "flex-1 overflow-hidden", "data-sidebar-chat": true, children: /* @__PURE__ */ jsx22(CopilotChatView_default, { ...props }) })
+          /* @__PURE__ */ jsx23("div", { className: "flex-1 overflow-hidden", "data-sidebar-chat": true, children: /* @__PURE__ */ jsx23(CopilotChatView_default, { ...props }) })
         ] })
       }
     )
@@ -3864,8 +4176,8 @@ function CopilotSidebarView({ header, width, ...props }) {
 CopilotSidebarView.displayName = "CopilotSidebarView";
 
 // src/components/chat/CopilotPopupView.tsx
-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";
+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;
 var dimensionToCss = (value, fallback) => {
@@ -3889,10 +4201,10 @@ function CopilotPopupView({
   const isPopupOpen = configuration?.isModalOpen ?? false;
   const setModalOpen = configuration?.setModalOpen;
   const labels = configuration?.labels ?? CopilotChatDefaultLabels;
-  const containerRef = useRef8(null);
+  const containerRef = useRef9(null);
   const [isRendered, setIsRendered] = useState13(isPopupOpen);
   const [isAnimatingOut, setIsAnimatingOut] = useState13(false);
-  useEffect16(() => {
+  useEffect17(() => {
     if (isPopupOpen) {
       setIsRendered(true);
       setIsAnimatingOut(false);
@@ -3908,7 +4220,7 @@ function CopilotPopupView({
     }, 200);
     return () => clearTimeout(timeout);
   }, [isPopupOpen, isRendered]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!isPopupOpen) {
       return;
     }
@@ -3924,7 +4236,7 @@ function CopilotPopupView({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isPopupOpen, setModalOpen]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!isPopupOpen) {
       return;
     }
@@ -3933,7 +4245,7 @@ function CopilotPopupView({
     }, 200);
     return () => clearTimeout(focusTimer);
   }, [isPopupOpen]);
-  useEffect16(() => {
+  useEffect17(() => {
     if (!isPopupOpen || !clickOutsideToClose) {
       return;
     }
@@ -3975,14 +4287,14 @@ function CopilotPopupView({
     [resolvedHeight, resolvedWidth]
   );
   const popupAnimationClass = isPopupOpen && !isAnimatingOut ? "pointer-events-auto translate-y-0 opacity-100 md:scale-100" : "pointer-events-none translate-y-4 opacity-0 md:translate-y-5 md:scale-[0.95]";
-  const popupContent = isRendered ? /* @__PURE__ */ jsx23(
+  const popupContent = isRendered ? /* @__PURE__ */ jsx24(
     "div",
     {
       className: cn(
         "fixed inset-0 z-[1200] flex max-w-full flex-col items-stretch",
         "md:inset-auto md:bottom-24 md:right-6 md:items-end md:gap-4"
       ),
-      children: /* @__PURE__ */ jsxs14(
+      children: /* @__PURE__ */ jsxs15(
         "div",
         {
           ref: containerRef,
@@ -4003,7 +4315,7 @@ function CopilotPopupView({
           style: popupStyle,
           children: [
             headerElement,
-            /* @__PURE__ */ jsx23("div", { className: "flex-1 overflow-hidden", "data-popup-chat": true, children: /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24("div", { className: "flex-1 overflow-hidden", "data-popup-chat": true, children: /* @__PURE__ */ jsx24(
               CopilotChatView_default,
               {
                 ...restProps,
@@ -4015,8 +4327,8 @@ function CopilotPopupView({
       )
     }
   ) : null;
-  return /* @__PURE__ */ jsxs14(Fragment8, { children: [
-    /* @__PURE__ */ jsx23(CopilotChatToggleButton_default, {}),
+  return /* @__PURE__ */ jsxs15(Fragment8, { children: [
+    /* @__PURE__ */ jsx24(CopilotChatToggleButton_default, {}),
     popupContent
   ] });
 }
@@ -4024,12 +4336,12 @@ CopilotPopupView.displayName = "CopilotPopupView";
 
 // src/components/chat/CopilotSidebar.tsx
 import { useMemo as useMemo12 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
   const SidebarViewOverride = useMemo12(() => {
     const Component = (viewProps) => {
       const { header: viewHeader, width: viewWidth, ...restProps } = viewProps;
-      return /* @__PURE__ */ jsx24(
+      return /* @__PURE__ */ jsx25(
         CopilotSidebarView,
         {
           ...restProps,
@@ -4040,7 +4352,7 @@ function CopilotSidebar({ header, defaultOpen, width, ...chatProps }) {
     };
     return Object.assign(Component, CopilotChatView_default);
   }, [header, width]);
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     CopilotChat,
     {
       ...chatProps,
@@ -4053,7 +4365,7 @@ CopilotSidebar.displayName = "CopilotSidebar";
 
 // src/components/chat/CopilotPopup.tsx
 import { useMemo as useMemo13 } from "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 function CopilotPopup({
   header,
   defaultOpen,
@@ -4071,7 +4383,7 @@ function CopilotPopup({
         clickOutsideToClose: viewClickOutsideToClose,
         ...restProps
       } = viewProps;
-      return /* @__PURE__ */ jsx25(
+      return /* @__PURE__ */ jsx26(
         CopilotPopupView,
         {
           ...restProps,
@@ -4084,7 +4396,7 @@ function CopilotPopup({
     };
     return Object.assign(Component, CopilotChatView_default);
   }, [clickOutsideToClose, header, height, width]);
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     CopilotChat,
     {
       ...chatProps,
@@ -4096,9 +4408,9 @@ function CopilotPopup({
 CopilotPopup.displayName = "CopilotPopup";
 
 // src/types/defineToolCallRenderer.ts
-import { z as z2 } from "zod";
+import { z as z3 } from "zod";
 function defineToolCallRenderer(def) {
-  const argsSchema = def.name === "*" && !def.args ? z2.any() : def.args;
+  const argsSchema = def.name === "*" && !def.args ? z3.any() : def.args;
   return {
     name: def.name,
     args: argsSchema,
@@ -4109,7 +4421,7 @@ function defineToolCallRenderer(def) {
 
 // src/components/WildcardToolCallRender.tsx
 import { useState as useState14 } from "react";
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 var WildcardToolCallRender = defineToolCallRenderer({
   name: "*",
   render: ({ args, result, name, status }) => {
@@ -4118,15 +4430,15 @@ var WildcardToolCallRender = defineToolCallRenderer({
     const isActive = statusString === "inProgress" || statusString === "executing";
     const isComplete = statusString === "complete";
     const statusStyles = isActive ? "bg-amber-100 text-amber-800 dark:bg-amber-500/15 dark:text-amber-400" : isComplete ? "bg-emerald-100 text-emerald-800 dark:bg-emerald-500/15 dark:text-emerald-400" : "bg-zinc-100 text-zinc-800 dark:bg-zinc-700/40 dark:text-zinc-300";
-    return /* @__PURE__ */ jsx26("div", { className: "mt-2 pb-2", children: /* @__PURE__ */ jsxs15("div", { className: "rounded-xl border border-zinc-200/60 dark:border-zinc-800/60 bg-white/70 dark:bg-zinc-900/50 shadow-sm backdrop-blur p-4", children: [
-      /* @__PURE__ */ jsxs15(
+    return /* @__PURE__ */ jsx27("div", { className: "mt-2 pb-2", children: /* @__PURE__ */ jsxs16("div", { className: "rounded-xl border border-zinc-200/60 dark:border-zinc-800/60 bg-white/70 dark:bg-zinc-900/50 shadow-sm backdrop-blur p-4", children: [
+      /* @__PURE__ */ jsxs16(
         "div",
         {
           className: "flex items-center justify-between gap-3 cursor-pointer",
           onClick: () => setIsExpanded(!isExpanded),
           children: [
-            /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2 min-w-0", children: [
-              /* @__PURE__ */ jsx26(
+            /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2 min-w-0", children: [
+              /* @__PURE__ */ jsx27(
                 "svg",
                 {
                   className: `h-4 w-4 text-zinc-500 dark:text-zinc-400 transition-transform ${isExpanded ? "rotate-90" : ""}`,
@@ -4134,7 +4446,7 @@ var WildcardToolCallRender = defineToolCallRenderer({
                   viewBox: "0 0 24 24",
                   strokeWidth: 2,
                   stroke: "currentColor",
-                  children: /* @__PURE__ */ jsx26(
+                  children: /* @__PURE__ */ jsx27(
                     "path",
                     {
                       strokeLinecap: "round",
@@ -4144,10 +4456,10 @@ var WildcardToolCallRender = defineToolCallRenderer({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx26("span", { className: "inline-block h-2 w-2 rounded-full bg-blue-500" }),
-              /* @__PURE__ */ jsx26("span", { className: "truncate text-sm font-medium text-zinc-900 dark:text-zinc-100", children: name })
+              /* @__PURE__ */ jsx27("span", { className: "inline-block h-2 w-2 rounded-full bg-blue-500" }),
+              /* @__PURE__ */ jsx27("span", { className: "truncate text-sm font-medium text-zinc-900 dark:text-zinc-100", children: name })
             ] }),
-            /* @__PURE__ */ jsx26(
+            /* @__PURE__ */ jsx27(
               "span",
               {
                 className: `inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${statusStyles}`,
@@ -4157,14 +4469,14 @@ var WildcardToolCallRender = defineToolCallRenderer({
           ]
         }
       ),
-      isExpanded && /* @__PURE__ */ jsxs15("div", { className: "mt-3 grid gap-4", children: [
-        /* @__PURE__ */ jsxs15("div", { children: [
-          /* @__PURE__ */ jsx26("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Arguments" }),
-          /* @__PURE__ */ jsx26("pre", { className: "mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words", children: JSON.stringify(args ?? {}, null, 2) })
+      isExpanded && /* @__PURE__ */ jsxs16("div", { className: "mt-3 grid gap-4", children: [
+        /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx27("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Arguments" }),
+          /* @__PURE__ */ jsx27("pre", { className: "mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words", children: JSON.stringify(args ?? {}, null, 2) })
         ] }),
-        result !== void 0 && /* @__PURE__ */ jsxs15("div", { children: [
-          /* @__PURE__ */ jsx26("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Result" }),
-          /* @__PURE__ */ jsx26("pre", { className: "mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words", children: typeof result === "string" ? result : JSON.stringify(result, null, 2) })
+        result !== void 0 && /* @__PURE__ */ jsxs16("div", { children: [
+          /* @__PURE__ */ jsx27("div", { className: "text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Result" }),
+          /* @__PURE__ */ jsx27("pre", { className: "mt-2 max-h-64 overflow-auto rounded-md bg-zinc-50 dark:bg-zinc-800/60 p-3 text-xs leading-relaxed text-zinc-800 dark:text-zinc-200 whitespace-pre-wrap break-words", children: typeof result === "string" ? result : JSON.stringify(result, null, 2) })
         ] })
       ] })
     ] }) });
@@ -4194,6 +4506,10 @@ export {
   CopilotPopupView,
   CopilotSidebar,
   CopilotSidebarView,
+  MCPAppsActivityContentSchema,
+  MCPAppsActivityRenderer,
+  MCPAppsActivityType,
+  UseAgentUpdate,
   WildcardToolCallRender,
   defineToolCallRenderer,
   useAgent,