@copilotkit/vue 2.0.0-rc.3 → 2.0.0-rc.31

package/src/v2/components/MCPAppsActivityRenderer.ts

@@ -1,4 +1,12 @@
-import { computed, defineComponent, h, ref, shallowRef, watch } from "vue";
+import {
+  computed,
+  defineComponent,
+  h,
+  onBeforeUnmount,
+  ref,
+  shallowRef,
+  watch,
+} from "vue";
 import type { PropType } from "vue";
 import type { AbstractAgent } from "@ag-ui/client";
 import type { VueActivityMessageRendererProps } from "../types";
@@ -27,12 +35,8 @@ export type {
 } from "@copilotkit/mcp-apps-renderer/activity";
 
 import type { MCPAppsActivityContent } from "@copilotkit/mcp-apps-renderer/activity";
-// Type-only imports: erased at build, so they never pull the ext-apps bridge
-// into the bundle. Only the dynamic import() below does, and only lazily.
-import type {
-  McpAppSession,
-  FetchedResource,
-} from "@copilotkit/mcp-apps-renderer";
+import { ɵMcpAppHost } from "@copilotkit/mcp-apps-renderer/activity";
+import type { ɵMcpAppHostState } from "@copilotkit/mcp-apps-renderer/activity";
 
 /**
  * MCP Apps Extension Activity Renderer
@@ -77,213 +81,82 @@ export const MCPAppsActivityRenderer = defineComponent({
   setup(props) {
     const { copilotkit } = useCopilotKit();
     const containerRef = ref<HTMLDivElement | null>(null);
-    // UI-only state: plain refs are fine (no agent-bound payload crosses here).
-    const error = ref<Error | null>(null);
-    // Recoverable: an activity update the content schema rejected, from the
-    // store or from props. Cleared as soon as valid content resumes, unlike
-    // `error`, which is a fatal setup failure.
-    const contentError = ref<Error | null>(null);
-    const isLoading = ref(true);
-    const iframeSize = ref<{ width?: number; height?: number }>({});
-    // shallowRef for externally-owned objects: the session, the iframe element
-    // and the fetched resource must never be wrapped in a reactive proxy (the
-    // resource crosses into the widget, and proxies are not clone-safe).
-    const iframeRef = shallowRef<HTMLIFrameElement | null>(null);
-    const sessionRef = shallowRef<McpAppSession | null>(null);
-    const fetchedResource = shallowRef<FetchedResource | null>(null);
-
-    // The activity message id. Passed to the session so it self-subscribes to
-    // the agent's activity stream and pushes tool input/result itself (this
-    // adapter does not forward store-backed activities).
-    const messageId = computed(() => props.message?.id);
+    // The shared host owns the iframe, its size and its state, and binds the
+    // protocol session (loaded lazily); this component only draws the state.
+    const app = shallowRef<ɵMcpAppHost | null>(null);
+    // Set by the immediate watcher below, before the first render.
+    const state = shallowRef<ɵMcpAppHostState>({
+      loading: true,
+      error: null,
+      contentError: null,
+      size: {},
+      prefersBorder: false,
+    });
+    let unsubscribe: () => void = () => undefined;
 
-    // Create the sandbox iframe and bind the MCP session. Re-binds only when the
-    // widget identity (resourceUri/serverHash/serverId) or the agent/host/message
-    // changes - NOT when tool input/result stream in (those are pushed without
-    // recreating the iframe). `flush: "post"` so the container element is mounted
-    // when the callback runs.
+    // A new host or sandbox setting needs a new host object.
     watch(
-      [
-        // The container element is a watch source, not just a read: `immediate`
-        // runs the callback synchronously at setup, before the template ref is
-        // populated. Watching it re-runs the bind once the element mounts.
-        containerRef,
-        () => props.agent,
-        () => copilotkit.value,
-        messageId,
-        () => props.content.resourceUri,
-        () => props.content.serverHash,
-        () => props.content.serverId,
-        () => props.allowSameOriginFallback,
-      ],
-      ([container, agent], _old, onCleanup) => {
-        if (!agent) {
-          error.value = new Error("No agent available to fetch resource");
-          isLoading.value = false;
-          return;
-        }
-        if (!container) {
-          return;
-        }
-
-        let mounted = true;
-        isLoading.value = true;
-        error.value = null;
-        contentError.value = null;
-        iframeSize.value = {};
-        fetchedResource.value = null;
-
-        // The host owns the iframe: create + mount it here (bindMcpApp only
-        // configures the sandbox contract + talks to it through the bridge).
-        const iframe = document.createElement("iframe");
-        iframe.style.width = "100%";
-        iframe.style.height = "100px";
-        iframe.style.border = "none";
-        iframe.style.backgroundColor = "transparent";
-        iframe.style.display = "block";
-        container.appendChild(iframe);
-        iframeRef.value = iframe;
-
-        // Register cleanup BEFORE the async import: if this watcher is
-        // invalidated (props change / unmount) while the import is in flight,
-        // `mounted` is already false when it resolves, so we never bind.
-        onCleanup(() => {
-          mounted = false;
-          sessionRef.value?.teardown();
-          sessionRef.value = null;
-          iframe.remove();
-          if (iframeRef.value === iframe) {
-            iframeRef.value = null;
-          }
+      [() => copilotkit.value, () => props.allowSameOriginFallback],
+      ([core, allowSameOriginFallback]) => {
+        unsubscribe();
+        app.value?.destroy();
+        const created = new ɵMcpAppHost({
+          host: core,
+          sessionOptions: { allowSameOriginFallback },
+          importRenderer: () => import("@copilotkit/mcp-apps-renderer"),
         });
-
-        const setup = async () => {
-          try {
-            // Load the bridge package lazily. The bridge is heavy (it pulls the
-            // MCP SDK Protocol + zod schemas, ~40-50 kB gzipped); keeping it
-            // behind a dynamic import() means a non-MCP app never pays for it.
-            const mod = await import("@copilotkit/mcp-apps-renderer").catch(
-              (importErr) => {
-                throw new Error(
-                  "MCP Apps require '@copilotkit/mcp-apps-renderer' and its " +
-                    "'@modelcontextprotocol/ext-apps' dependency. Reinstall your " +
-                    "dependencies if this package is missing.",
-                  { cause: importErr },
-                );
-              },
-            );
-            if (!mounted) return;
-
-            const session = mod.bindMcpApp({
-              iframe,
-              getContent: () => props.content,
-              getAgent: () => props.agent,
-              host: copilotkit.value,
-              // Self-driving: the session subscribes to the agent's activity
-              // stream (filtered by messageId) and pushes tool input/result to
-              // the widget itself, so this adapter does not forward STORE-backed
-              // activities. It still calls syncContent for activities rendered
-              // from an external messages list (see the seed below).
-              messageId: messageId.value,
-              options: {
-                allowSameOriginFallback: props.allowSameOriginFallback,
-              },
-              hooks: {
-                onResource: (resource) => {
-                  if (!mounted) return;
-                  fetchedResource.value = resource;
-                  isLoading.value = false;
-                },
-                onSizeChanged: (size) => {
-                  if (mounted) iframeSize.value = size;
-                },
-                onContentError: (err) => {
-                  if (mounted) contentError.value = err;
-                },
-                onError: (err) => {
-                  if (!mounted) return;
-                  error.value = err;
-                  isLoading.value = false;
-                },
-              },
-            });
-            sessionRef.value = session;
-            // Seed the initial content now: the content watcher below does not
-            // re-run for unchanged props, so an activity rendered from an
-            // EXTERNAL messages list (absent from agent.messages) would never
-            // receive its initial tool input/result. Deduped + store precedence
-            // make this a no-op for agent-backed activities.
-            session.syncContent(props.content);
-          } catch (err) {
-            console.error("[MCPAppsRenderer] Setup error:", err);
-            if (mounted) {
-              error.value = err instanceof Error ? err : new Error(String(err));
-              isLoading.value = false;
-            }
-          }
-        };
-
-        void setup();
+        unsubscribe = created.subscribe(() => {
+          state.value = created.getState();
+        });
+        state.value = created.getState();
+        app.value = created;
       },
-      { immediate: true, flush: "post" },
+      { immediate: true },
     );
-
-    // Size the iframe when the widget reports a new content size.
+    // `flush: "post"` so the container element is mounted when this runs.
     watch(
-      iframeSize,
-      (size) => {
-        const iframe = iframeRef.value;
-        if (!iframe) return;
-        if (size.width !== undefined) {
-          // Use minWidth with min() to allow expansion but cap at 100%
-          iframe.style.minWidth = `min(${size.width}px, 100%)`;
-          iframe.style.width = "100%";
-        }
-        if (size.height !== undefined) {
-          iframe.style.height = `${size.height}px`;
-        }
+      [
+        app,
+        () => props.agent,
+        () => props.message?.id,
+        () => props.content,
+        containerRef,
+      ],
+      ([host, agent, messageId, content, container]) => {
+        if (!host) return;
+        host.setAgent(agent);
+        host.setMessageId(messageId);
+        host.setContent(content);
+        host.setContainer(container);
       },
-      { deep: true },
+      { immediate: true, flush: "post" },
     );
+    onBeforeUnmount(() => {
+      unsubscribe();
+      app.value?.destroy();
+    });
 
-    // Forward tool input/result from the content prop. The session is
-    // self-driving for activities that live in the agent's message store, but a
-    // host can render an activity from an EXTERNAL messages list that is absent
-    // from `agent.messages`; this keeps such widgets fed. `syncContent` is
-    // deduped and shares the subscription's dedup, so the agent-driven path
-    // never double-sends.
-    watch(
-      [() => props.content.toolInput, () => props.content.result],
-      () => {
-        sessionRef.value?.syncContent(props.content);
-      },
-      { deep: true },
+    // prefersBorder: true = border and background; otherwise none.
+    const borderStyle = computed(() =>
+      state.value.prefersBorder
+        ? {
+            borderRadius: "8px",
+            backgroundColor: "#f9f9f9",
+            border: "1px solid #e0e0e0",
+          }
+        : {},
     );
 
-    // Determine border styling based on prefersBorder metadata from fetched
-    // resource: true = show border/background, false = none, undefined = host
-    // decides (we default to none).
-    const borderStyle = computed(() => {
-      const prefersBorder = fetchedResource.value?._meta?.ui?.prefersBorder;
-      if (prefersBorder !== true) return {};
-      return {
-        borderRadius: "8px",
-        backgroundColor: "#f9f9f9",
-        border: "1px solid #e0e0e0",
-      };
-    });
-
-    return () =>
-      h(
+    return () => {
+      const { loading, error, contentError, size } = state.value;
+      const shownError = error ?? contentError;
+      return h(
         "div",
         {
           ref: containerRef,
           style: {
             width: "100%",
-            height:
-              iframeSize.value.height !== undefined
-                ? `${iframeSize.value.height}px`
-                : "auto",
+            height: size.height !== undefined ? `${size.height}px` : "auto",
             minHeight: "100px",
             overflow: "hidden",
             position: "relative",
@@ -291,22 +164,23 @@ export const MCPAppsActivityRenderer = defineComponent({
           },
         },
         [
-          isLoading.value
+          loading
             ? h(
                 "div",
                 { style: { padding: "1rem", color: "#666" } },
                 "Loading...",
               )
             : null,
-          error.value || contentError.value
+          shownError
             ? h(
                 "div",
                 { style: { color: "red", padding: "1rem" } },
-                `Error: ${(error.value ?? contentError.value)!.message}`,
+                `Error: ${shownError}`,
               )
             : null,
         ],
       );
+    };
   },
 });