npm - @copilotkitnext/react - Versions diffs - 0.0.0-0.0.0-max-changeset-10101010101010-20260109194224 → 0.0.0-fix-runtime-openai-api-key-passthrough-20260115015318 - Mend

@copilotkitnext/react 0.0.0-0.0.0-max-changeset-10101010101010-20260109194224 → 0.0.0-fix-runtime-openai-api-key-passthrough-20260115015318

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.js CHANGED Viewed

@@ -74,7 +74,6 @@ __export(index_exports, {
   useSuggestions: () => useSuggestions
 });
 module.exports = __toCommonJS(index_exports);
-__reExport(index_exports, require("@ag-ui/core"), module.exports);
 __reExport(index_exports, require("@ag-ui/client"), module.exports);
 // src/components/chat/CopilotChatInput.tsx
@@ -1517,6 +1516,104 @@ var import_react6 = require("react");
 var import_zod = require("zod");
 var import_jsx_runtime8 = require("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 = import_zod.z.object({
   result: import_zod.z.object({
@@ -1524,13 +1621,11 @@ var MCPAppsActivityContentSchema = import_zod.z.object({
     structuredContent: import_zod.z.any().optional(),
     isError: import_zod.z.boolean().optional()
   }),
-  resource: import_zod.z.object({
-    uri: import_zod.z.string(),
-    mimeType: import_zod.z.string().optional(),
-    text: import_zod.z.string().optional(),
-    blob: import_zod.z.string().optional()
-  }),
-  // Server ID for proxying requests (MD5 hash of server config)
+  // Resource URI to fetch (e.g., "ui://server/dashboard")
+  resourceUri: import_zod.z.string(),
+  // MD5 hash of server config (renamed from serverId in 0.0.1)
+  serverHash: import_zod.z.string(),
+  // Optional stable server ID from config (takes precedence over serverHash)
   serverId: import_zod.z.string().optional(),
   // Original tool input arguments
   toolInput: import_zod.z.record(import_zod.z.unknown()).optional()
@@ -1541,25 +1636,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 = (0, import_react6.useRef)(null);
   const iframeRef = (0, import_react6.useRef)(null);
   const [iframeReady, setIframeReady] = (0, import_react6.useState)(false);
   const [error, setError] = (0, import_react6.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react6.useState)(true);
   const [iframeSize, setIframeSize] = (0, import_react6.useState)({});
+  const [fetchedResource, setFetchedResource] = (0, import_react6.useState)(null);
   const contentRef = (0, import_react6.useRef)(content);
   contentRef.current = content;
   const agentRef = (0, import_react6.useRef)(agent);
   agentRef.current = agent;
+  const fetchStateRef = (0, import_react6.useRef)({ inProgress: false, promise: null, resourceUri: null });
   const sendToIframe = (0, import_react6.useCallback)((msg) => {
     if (iframeRef.current?.contentWindow) {
       console.log("[MCPAppsRenderer] Sending to iframe:", msg);
@@ -1588,31 +1677,112 @@ var MCPAppsActivityRenderer = ({ content, agent }) => {
     });
   }, [sendToIframe]);
   (0, import_react6.useEffect)(() => {
-    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]);
+  (0, import_react6.useEffect)(() => {
+    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");
@@ -1642,8 +1812,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": {
@@ -1657,10 +1846,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) {
@@ -1668,15 +1857,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);
@@ -1697,7 +1891,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) {
@@ -1716,7 +1910,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);
@@ -1728,19 +1929,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]);
   (0, import_react6.useEffect)(() => {
     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`;
@@ -1761,22 +1968,31 @@ var MCPAppsActivityRenderer = ({ content, agent }) => {
       sendNotification("ui/notifications/tool-result", content.result);
     }
   }, [iframeReady, content.result, sendNotification]);
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  const prefersBorder = fetchedResource?._meta?.ui?.prefersBorder;
+  const borderStyle = prefersBorder === true ? {
+    borderRadius: "8px",
+    backgroundColor: "#f9f9f9",
+    border: "1px solid #e0e0e0"
+  } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "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__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { color: "red", padding: "1rem" }, children: [
-        "Error: ",
-        error.message
-      ] })
+      children: [
+        isLoading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { padding: "1rem", color: "#666" }, children: "Loading..." }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { color: "red", padding: "1rem" }, children: [
+          "Error: ",
+          error.message
+        ] })
+      ]
     }
   );
 };
@@ -2205,15 +2421,21 @@ function useRenderActivityMessage() {
   const config = useCopilotChatConfiguration();
   const agentId = config?.agentId ?? import_shared4.DEFAULT_AGENT_ID;
   const renderers = copilotkit.renderActivityMessages;
-  return (0, import_react9.useCallback)(
-    (message) => {
+  const findRenderer = (0, import_react9.useCallback)(
+    (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 = (0, import_react9.useCallback)(
+    (message) => {
+      const renderer = findRenderer(message.activityType);
       if (!renderer) {
         return null;
       }
@@ -2238,7 +2460,11 @@ function useRenderActivityMessage() {
         message.id
       );
     },
-    [agentId, copilotkit, renderers]
+    [agentId, copilotkit, findRenderer]
+  );
+  return (0, import_react9.useMemo)(
+    () => ({ renderActivityMessage, findRenderer }),
+    [renderActivityMessage, findRenderer]
   );
 }
@@ -2410,20 +2636,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();
@@ -3382,7 +3600,7 @@ function CopilotChatMessageView({
   ...props
 }) {
   const renderCustomMessage = useRenderCustomMessages();
-  const renderActivityMessage = useRenderActivityMessage();
+  const { renderActivityMessage } = useRenderActivityMessage();
   const { copilotkit } = useCopilotKit();
   const config = useCopilotChatConfiguration();
   const [, forceUpdate] = (0, import_react22.useReducer)((x) => x + 1, 0);
@@ -3391,10 +3609,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);
@@ -3445,11 +3663,12 @@ function CopilotChatMessageView({
         )
       );
     } else if (message.role === "activity") {
+      const activityMsg = message;
       elements.push(
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           MemoizedActivityMessage,
           {
-            message,
+            message: activityMsg,
             renderActivityMessage
           },
           message.id
@@ -3912,8 +4131,9 @@ function CopilotChat({ agentId, threadId, labels, chatView, isModalDefaultOpen,
     isRunning: agent.isRunning
   };
   finalInputProps.mode = agent.isRunning ? "processing" : finalInputProps.mode ?? "input";
+  const messages = (0, import_react25.useMemo)(() => [...agent.messages], [JSON.stringify(agent.messages)]);
   const finalProps = (0, import_ts_deepmerge.merge)(mergedProps, {
-    messages: agent.messages,
+    messages,
     inputProps: finalInputProps
   });
   const RenderedChatView = renderSlot(chatView, CopilotChatView, finalProps);
@@ -4581,7 +4801,6 @@ var WildcardToolCallRender = defineToolCallRenderer({
   useRenderCustomMessages,
   useRenderToolCall,
   useSuggestions,
-  ...require("@ag-ui/core"),
   ...require("@ag-ui/client")
 });
 //# sourceMappingURL=index.js.map