@copilotkit/vue 1.63.0 → 1.63.2-canary.1784918757

package/dist/v2/hooks/use-attachments.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-attachments.d.ts","sourceRoot":"","sources":["../../../src/v2/hooks/use-attachments.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAUjD,OAAO,KAAK,EACV,UAAU,EAEV,iBAAiB,EAClB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,gBAAgB,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAC;CAC1D;AAED,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,GAAG,CAAC,UAAU,EAAE,CAAC,CAAC;IAC/B,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACtB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACvB,YAAY,EAAE,GAAG,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC3C,YAAY,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtC,YAAY,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,cAAc,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC3C,eAAe,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC5C,UAAU,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChD,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,kBAAkB,EAAE,MAAM,UAAU,EAAE,CAAC;CACxC;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,mBAAmB,GACzB,oBAAoB,CA8NtB"}
+{"version":3,"file":"use-attachments.d.ts","sourceRoot":"","sources":["../../../src/v2/hooks/use-attachments.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAUjD,OAAO,KAAK,EACV,UAAU,EAEV,iBAAiB,EAClB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,WAAW,mBAAmB;IAClC,MAAM,CAAC,EAAE,gBAAgB,CAAC,iBAAiB,GAAG,SAAS,CAAC,CAAC;CAC1D;AAED,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,GAAG,CAAC,UAAU,EAAE,CAAC,CAAC;IAC/B,OAAO,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACtB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC;IACvB,YAAY,EAAE,GAAG,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;IAC3C,YAAY,EAAE,GAAG,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACtC,YAAY,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC/C,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,cAAc,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC3C,eAAe,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IAC5C,UAAU,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAChD,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,kBAAkB,EAAE,MAAM,UAAU,EAAE,CAAC;CACxC;AAED,wBAAgB,cAAc,CAC5B,KAAK,EAAE,mBAAmB,GACzB,oBAAoB,CA8NtB"}

package/dist/v2/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@copilotkit/core"),i=require("@ag-ui/client"),e=require("../use-render-activity-message-CIvEoQzA.cjs"),n=require("@copilotkit/shared");exports.A2UIActivityContentSchema=e.A2UIActivityContentSchema;exports.A2UISurfaceActivityRenderer=e._sfc_main;exports.A2UISurfaceActivityType=e.A2UISurfaceActivityType;exports.CopilotChat=e.CopilotChat;exports.CopilotChatAssistantMessage=e._sfc_main$1;exports.CopilotChatAttachmentQueue=e._sfc_main$2;exports.CopilotChatAttachmentRenderer=e._sfc_main$3;exports.CopilotChatAudioRecorder=e._sfc_main$4;exports.CopilotChatConfigurationProvider=e._sfc_main$5;exports.CopilotChatDefaultLabels=e.CopilotChatDefaultLabels;exports.CopilotChatInput=e._sfc_main$6;exports.CopilotChatMessageView=e._sfc_main$7;exports.CopilotChatReasoningMessage=e._sfc_main$8;exports.CopilotChatSuggestionPill=e._sfc_main$9;exports.CopilotChatSuggestionView=e._sfc_main$10;exports.CopilotChatToggleButton=e.CopilotChatToggleButton;exports.CopilotChatToggleButtonCloseIcon=e.CopilotChatToggleButtonCloseIcon;exports.CopilotChatToggleButtonOpenIcon=e.CopilotChatToggleButtonOpenIcon;exports.CopilotChatToolCallsView=e._sfc_main$11;exports.CopilotChatUserMessage=e._sfc_main$12;exports.CopilotChatView=e._sfc_main$13;exports.CopilotKitCoreVue=e.CopilotKitCoreVue;exports.CopilotKitInspector=e._sfc_main$14;exports.CopilotKitProvider=e._sfc_main$15;exports.CopilotModalHeader=e.CopilotModalHeader;exports.CopilotPopup=e._sfc_main$16;exports.CopilotPopupView=e.CopilotPopupView;exports.CopilotSidebar=e._sfc_main$17;exports.CopilotSidebarView=e.CopilotSidebarView;exports.CopilotThreadsDrawer=e._sfc_main$18;exports.GenerateSandboxedUiArgsSchema=e.GenerateSandboxedUiArgsSchema;exports.LicenseContextKey=e.LicenseContextKey;exports.MCPAppsActivityContentSchema=e.MCPAppsActivityContentSchema;exports.MCPAppsActivityRenderer=e.MCPAppsActivityRenderer;exports.MCPAppsActivityType=e.MCPAppsActivityType;exports.OpenGenerativeUIActivityRenderer=e.OpenGenerativeUIActivityRenderer;exports.OpenGenerativeUIActivityType=e.OpenGenerativeUIActivityType;exports.OpenGenerativeUIContentSchema=e.OpenGenerativeUIContentSchema;exports.OpenGenerativeUIRenderer=e.OpenGenerativeUIRenderer;exports.OpenGenerativeUIToolRenderer=e.OpenGenerativeUIToolRenderer;exports.UseAgentUpdate=e.UseAgentUpdate;exports.createA2UIMessageRenderer=e.createA2UIMessageRenderer;exports.createDefaultLicenseRef=e.createDefaultLicenseRef;exports.defineToolCallRenderer=e.defineToolCallRenderer;exports.extractCompleteStyles=e.extractCompleteStyles;exports.getOperationSurfaceId=e.getOperationSurfaceId;exports.processPartialHtml=e.processPartialHtml;exports.useAgent=e.useAgent;exports.useAgentContext=e.useAgentContext;exports.useAttachments=e.useAttachments;exports.useCapabilities=e.useCapabilities;exports.useComponent=e.useComponent;exports.useConfigureSuggestions=e.useConfigureSuggestions;exports.useCopilotChatConfiguration=e.useCopilotChatConfiguration;exports.useCopilotKit=e.useCopilotKit;exports.useDefaultRenderTool=e.useDefaultRenderTool;exports.useFrontendTool=e.useFrontendTool;exports.useHumanInTheLoop=e.useHumanInTheLoop;exports.useInterrupt=e.useInterrupt;exports.useKatexStyles=e.useKatexStyles;exports.useKeyboardHeight=e.useKeyboardHeight;exports.useLicenseContext=e.useLicenseContext;exports.useRenderActivityMessage=e.useRenderActivityMessage;exports.useRenderCustomMessages=e.useRenderCustomMessages;exports.useRenderTool=e.useRenderTool;exports.useSandboxFunctions=e.useSandboxFunctions;exports.useSuggestions=e.useSuggestions;exports.useThreads=e.useThreads;exports.vueBasicCatalog=e.vueBasicCatalog;Object.defineProperty(exports,"createLicenseContextValue",{enumerable:!0,get:()=>n.createLicenseContextValue});Object.keys(o).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>o[t]})});Object.keys(i).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>i[t]})});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@copilotkit/core"),i=require("@ag-ui/client"),e=require("../use-render-activity-message-DzgJkxe2.cjs"),n=require("@copilotkit/shared");exports.A2UIActivityContentSchema=e.A2UIActivityContentSchema;exports.A2UISurfaceActivityRenderer=e._sfc_main;exports.A2UISurfaceActivityType=e.A2UISurfaceActivityType;exports.CopilotChat=e.CopilotChat;exports.CopilotChatAssistantMessage=e._sfc_main$1;exports.CopilotChatAttachmentQueue=e._sfc_main$2;exports.CopilotChatAttachmentRenderer=e._sfc_main$3;exports.CopilotChatAudioRecorder=e._sfc_main$4;exports.CopilotChatConfigurationProvider=e._sfc_main$5;exports.CopilotChatDefaultLabels=e.CopilotChatDefaultLabels;exports.CopilotChatInput=e._sfc_main$6;exports.CopilotChatMessageView=e._sfc_main$7;exports.CopilotChatReasoningMessage=e._sfc_main$8;exports.CopilotChatSuggestionPill=e._sfc_main$9;exports.CopilotChatSuggestionView=e._sfc_main$10;exports.CopilotChatToggleButton=e.CopilotChatToggleButton;exports.CopilotChatToggleButtonCloseIcon=e.CopilotChatToggleButtonCloseIcon;exports.CopilotChatToggleButtonOpenIcon=e.CopilotChatToggleButtonOpenIcon;exports.CopilotChatToolCallsView=e._sfc_main$11;exports.CopilotChatUserMessage=e._sfc_main$12;exports.CopilotChatView=e._sfc_main$13;exports.CopilotKitCoreVue=e.CopilotKitCoreVue;exports.CopilotKitInspector=e._sfc_main$14;exports.CopilotKitProvider=e._sfc_main$15;exports.CopilotModalHeader=e.CopilotModalHeader;exports.CopilotPopup=e._sfc_main$16;exports.CopilotPopupView=e.CopilotPopupView;exports.CopilotSidebar=e._sfc_main$17;exports.CopilotSidebarView=e.CopilotSidebarView;exports.CopilotThreadsDrawer=e._sfc_main$18;exports.GenerateSandboxedUiArgsSchema=e.GenerateSandboxedUiArgsSchema;exports.LicenseContextKey=e.LicenseContextKey;exports.MCPAppsActivityContentSchema=e.MCPAppsActivityContentSchema;exports.MCPAppsActivityRenderer=e.MCPAppsActivityRenderer;exports.MCPAppsActivityType=e.MCPAppsActivityType;exports.OpenGenerativeUIActivityRenderer=e.OpenGenerativeUIActivityRenderer;exports.OpenGenerativeUIActivityType=e.OpenGenerativeUIActivityType;exports.OpenGenerativeUIContentSchema=e.OpenGenerativeUIContentSchema;exports.OpenGenerativeUIRenderer=e.OpenGenerativeUIRenderer;exports.OpenGenerativeUIToolRenderer=e.OpenGenerativeUIToolRenderer;exports.UseAgentUpdate=e.UseAgentUpdate;exports.createA2UIMessageRenderer=e.createA2UIMessageRenderer;exports.createDefaultLicenseRef=e.createDefaultLicenseRef;exports.defineToolCallRenderer=e.defineToolCallRenderer;exports.extractCompleteStyles=e.extractCompleteStyles;exports.getOperationSurfaceId=e.getOperationSurfaceId;exports.processPartialHtml=e.processPartialHtml;exports.useAgent=e.useAgent;exports.useAgentContext=e.useAgentContext;exports.useAttachments=e.useAttachments;exports.useCapabilities=e.useCapabilities;exports.useComponent=e.useComponent;exports.useConfigureSuggestions=e.useConfigureSuggestions;exports.useCopilotChatConfiguration=e.useCopilotChatConfiguration;exports.useCopilotKit=e.useCopilotKit;exports.useDefaultRenderTool=e.useDefaultRenderTool;exports.useFrontendTool=e.useFrontendTool;exports.useHumanInTheLoop=e.useHumanInTheLoop;exports.useInterrupt=e.useInterrupt;exports.useKatexStyles=e.useKatexStyles;exports.useKeyboardHeight=e.useKeyboardHeight;exports.useLicenseContext=e.useLicenseContext;exports.useRenderActivityMessage=e.useRenderActivityMessage;exports.useRenderCustomMessages=e.useRenderCustomMessages;exports.useRenderTool=e.useRenderTool;exports.useSandboxFunctions=e.useSandboxFunctions;exports.useSuggestions=e.useSuggestions;exports.useThreads=e.useThreads;exports.vueBasicCatalog=e.vueBasicCatalog;Object.defineProperty(exports,"createLicenseContextValue",{enumerable:!0,get:()=>n.createLicenseContextValue});Object.keys(o).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>o[t]})});Object.keys(i).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>i[t]})});
 //# sourceMappingURL=index.cjs.map

package/dist/v2/index.mjs

@@ -1,6 +1,6 @@
 export * from "@copilotkit/core";
 export * from "@ag-ui/client";
-import { A as o, _ as i, a as n, C, b as r, c as p, d as l, e as u, f as c, g, h as d, i as h, j as A, k as v, l as S, m, n as y, o as I, p as f, q as R, r as T, s as U, t as x, u as M, v as P, w as b, x as V, y as w, z as K, B as O, G, L, M as B, D, E as H, O as F, F as Q, H as j, I as k, J as q, U as z, K as E, N as J, P as N, Q as W, R as X, S as Y, T as Z, V as _, W as $, X as ee, Y as ae, Z as te, $ as se, a0 as oe, a1 as ie, a2 as ne, a3 as Ce, a4 as re, a5 as pe, a6 as le, a7 as ue, a8 as ce, a9 as ge, aa as de, ab as he, ac as Ae, ad as ve, ae as Se } from "../use-render-activity-message-CbKeqosY.js";
+import { A as o, _ as i, a as n, C, b as r, c as p, d as l, e as u, f as c, g, h as d, i as h, j as A, k as v, l as S, m, n as y, o as I, p as f, q as R, r as T, s as U, t as x, u as M, v as P, w as b, x as V, y as w, z as K, B as O, G, L, M as B, D, E as H, O as F, F as Q, H as j, I as k, J as q, U as z, K as E, N as J, P as N, Q as W, R as X, S as Y, T as Z, V as _, W as $, X as ee, Y as ae, Z as te, $ as se, a0 as oe, a1 as ie, a2 as ne, a3 as Ce, a4 as re, a5 as pe, a6 as le, a7 as ue, a8 as ce, a9 as ge, aa as de, ab as he, ac as Ae, ad as ve, ae as Se } from "../use-render-activity-message-CszKQeFs.js";
 import { createLicenseContextValue as ye } from "@copilotkit/shared";
 export {
   o as A2UIActivityContentSchema,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@copilotkit/vue",
-  "version": "1.63.0",
+  "version": "1.63.2-canary.1784918757",
   "private": false,
   "description": "Vue 3 components and composables for CopilotKit",
   "keywords": [
@@ -70,10 +70,10 @@
     "streamdown-vue": "^1.0.29",
     "zod": "^3.25.75",
     "zod-to-json-schema": "^3.24.5",
-    "@copilotkit/core": "1.63.0",
-    "@copilotkit/shared": "1.63.0",
-    "@copilotkit/web-components": "1.63.0",
-    "@copilotkit/web-inspector": "1.63.0"
+    "@copilotkit/shared": "1.63.2-canary.1784918757",
+    "@copilotkit/web-components": "1.63.2-canary.1784918757",
+    "@copilotkit/web-inspector": "1.63.2-canary.1784918757",
+    "@copilotkit/core": "1.63.2-canary.1784918757"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.2",

package/src/v2/components/chat/__tests__/CopilotChat.attachments.test.ts

@@ -1,24 +1,89 @@
 import { describe, expect, it, vi } from "vitest";
-import { fireEvent, waitFor } from "@testing-library/vue";
-import type { BaseEvent, RunAgentInput } from "@ag-ui/client";
-import { Observable, EMPTY } from "rxjs";
+import { fireEvent, screen, waitFor } from "@testing-library/vue";
+import type {
+  AgentSubscriber,
+  BaseEvent,
+  Message,
+  RunAgentInput,
+  RunAgentParameters,
+  RunAgentResult,
+} from "@ag-ui/client";
+import type { Observable } from "rxjs";
+import { EMPTY } from "rxjs";
 import CopilotChat from "../CopilotChat.vue";
 import {
   MockStepwiseAgent,
   renderWithCopilotKit,
 } from "../../../__tests__/utils/test-helpers";
-import type { AttachmentUploadError } from "@copilotkit/shared";
+import type { AttachmentUploadError, InputContent } from "@copilotkit/shared";
 
 class NoopAgent extends MockStepwiseAgent {
-  run(_input: RunAgentInput): Observable<BaseEvent> {
+  run(): Observable<BaseEvent> {
     return EMPTY;
   }
 
-  connect(_input: RunAgentInput): Observable<BaseEvent> {
+  connect(): Observable<BaseEvent> {
     return EMPTY;
   }
 }
 
+class CloneCapturingAgent extends NoopAgent {
+  constructor(
+    private readonly inputs: RunAgentInput[] = [],
+    public readonly addedMessages: Message[] = [],
+    public readonly runErrors: unknown[] = [],
+  ) {
+    super();
+  }
+
+  get capturedInputs() {
+    return this.inputs;
+  }
+
+  override clone(): CloneCapturingAgent {
+    const clone = new CloneCapturingAgent(
+      this.inputs,
+      this.addedMessages,
+      this.runErrors,
+    );
+    clone.agentId = this.agentId;
+    clone.threadId = this.threadId;
+    return clone;
+  }
+
+  override addMessage(message: Message): void {
+    this.addedMessages.push(message);
+    super.addMessage(message);
+  }
+
+  override async runAgent(
+    parameters: RunAgentParameters = {},
+    subscriber?: AgentSubscriber,
+  ): Promise<RunAgentResult> {
+    let input: RunAgentInput;
+    try {
+      input = this.prepareRunAgentInput(parameters);
+    } catch (error) {
+      this.runErrors.push(error);
+      throw error;
+    }
+    this.inputs.push(input);
+    await subscriber?.onRunInitialized?.({
+      agent: this,
+      messages: this.messages,
+      state: this.state,
+      input,
+    });
+    await subscriber?.onRunFinalized?.({
+      agent: this,
+      messages: this.messages,
+      state: this.state,
+      input,
+    });
+    return { newMessages: [] };
+  }
+}
+
 function createFile(name: string, size: number, type: string): File {
   const content = new Uint8Array(size);
   return new File([content], name, { type });
@@ -29,9 +94,10 @@ function renderChat(props: {
   accept?: string;
   maxSize?: number;
   onUpload?: (file: File) => unknown;
+  agent?: NoopAgent;
 }) {
-  const agent = new NoopAgent();
-  return renderWithCopilotKit({
+  const agent = props.agent ?? new NoopAgent();
+  const result = renderWithCopilotKit({
     agent,
     children: {
       components: { CopilotChat },
@@ -54,14 +120,17 @@ function renderChat(props: {
       `,
     },
   });
+  return { ...result, agent };
 }
 
-async function dropFiles(container: HTMLElement, files: File[]) {
-  const dropTarget = container.querySelector(
-    '[data-testid="copilot-chat-view"]',
-  );
+async function dropFiles(
+  container: HTMLElement,
+  files: File[],
+  selector = '[data-testid="copilot-chat-view"]',
+) {
+  const dropTarget = container.querySelector(selector);
   if (!dropTarget) {
-    throw new Error("Could not find copilot-chat drop target");
+    throw new Error(`Could not find drop target: ${selector}`);
   }
 
   await fireEvent.dragOver(dropTarget, {
@@ -234,4 +303,106 @@ describe("CopilotChat attachments", () => {
       expect(onUploadFailed).not.toHaveBeenCalled();
     });
   });
+
+  describe("Vue-specific reactive semantics", () => {
+    it("submits custom uploaded attachments through clone-safe agent input", async () => {
+      const agent = new CloneCapturingAgent();
+      const props = {
+        accept: "application/pdf",
+        onUpload: async () => ({
+          type: "url" as const,
+          value: "https://example.com/report.pdf",
+          mimeType: "application/pdf",
+          metadata: { source: "test-upload" },
+        }),
+      };
+      const { container } = renderWithCopilotKit({
+        agent,
+        children: {
+          components: { CopilotChat },
+          data() {
+            return { props };
+          },
+          template: `
+            <div style="height: 400px;">
+              <CopilotChat
+                :welcome-screen="false"
+                :attachments="{
+                  enabled: true,
+                  accept: props.accept,
+                  onUpload: props.onUpload
+                }"
+              >
+                <template #chat-view="{ attachments, onDragOver, onDrop, onSubmitMessage }">
+                  <div
+                    data-testid="attachment-submit-harness"
+                    @dragover="onDragOver?.($event)"
+                    @drop="onDrop?.($event)"
+                  >
+                    <span
+                      v-for="attachment in attachments"
+                      :key="attachment.id"
+                    >
+                      {{ attachment.filename }}
+                    </span>
+                    <button
+                      data-testid="submit-attachment-message"
+                      @click="onSubmitMessage('Review this report')"
+                    >
+                      submit
+                    </button>
+                  </div>
+                </template>
+              </CopilotChat>
+            </div>
+          `,
+        },
+      });
+
+      await dropFiles(
+        container,
+        [createFile("report.pdf", 128, "application/pdf")],
+        '[data-testid="attachment-submit-harness"]',
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText("report.pdf")).toBeDefined();
+      });
+
+      await fireEvent.click(screen.getByTestId("submit-attachment-message"));
+
+      await waitFor(() => {
+        expect(agent.addedMessages).toHaveLength(1);
+      });
+      expect(agent.runErrors).toEqual([]);
+
+      await waitFor(() => {
+        expect(agent.capturedInputs).toHaveLength(1);
+      });
+
+      const userMessage = agent.capturedInputs[0].messages.find(
+        (message) => message.role === "user",
+      );
+      expect(userMessage).toBeDefined();
+      expect(Array.isArray(userMessage?.content)).toBe(true);
+
+      const content = userMessage?.content as InputContent[];
+      expect(() => structuredClone(content)).not.toThrow();
+      expect(content).toEqual([
+        { type: "text", text: "Review this report" },
+        {
+          type: "document",
+          source: {
+            type: "url",
+            value: "https://example.com/report.pdf",
+            mimeType: "application/pdf",
+          },
+          metadata: {
+            filename: "report.pdf",
+            source: "test-upload",
+          },
+        },
+      ]);
+    });
+  });
 });

package/src/v2/hooks/__tests__/use-attachments.test.ts

@@ -1,4 +1,12 @@
-import { nextTick, defineComponent, h, onUpdated, ref } from "vue";
+import {
+  nextTick,
+  defineComponent,
+  h,
+  isProxy,
+  isReactive,
+  onUpdated,
+  ref,
+} from "vue";
 import { render } from "@testing-library/vue";
 import { describe, expect, it, vi } from "vitest";
 import type {
@@ -178,4 +186,39 @@ describe("useAttachments", () => {
       expect(onUploadFailed.mock.calls[0][0].message).toContain("audio/*");
     });
   });
+
+  describe("Vue-specific reactive semantics", () => {
+    it("keeps uploaded attachment source cloneable and non-reactive", async () => {
+      const harness = mountHook({
+        enabled: true,
+        onUpload: async () => ({
+          type: "url",
+          value: "https://example.com/report.pdf",
+          mimeType: "application/pdf",
+          metadata: { source: "test-upload" },
+        }),
+      });
+
+      await harness.api.processFiles([
+        createFile("report.pdf", 128, "application/pdf"),
+      ]);
+
+      const [attachment] = harness.api.attachments.value;
+      expect(attachment).toBeDefined();
+      expect(attachment.source).toEqual({
+        type: "url",
+        value: "https://example.com/report.pdf",
+        mimeType: "application/pdf",
+      });
+      expect(isProxy(attachment.source)).toBe(false);
+      expect(isReactive(attachment.source)).toBe(false);
+      expect(() => structuredClone(attachment.source)).not.toThrow();
+
+      const [consumed] = harness.api.consumeAttachments();
+      expect(consumed).toBeDefined();
+      expect(isProxy(consumed.source)).toBe(false);
+      expect(isReactive(consumed.source)).toBe(false);
+      expect(() => structuredClone(consumed.source)).not.toThrow();
+    });
+  });
 });

package/src/v2/hooks/use-attachments.ts

@@ -1,4 +1,12 @@
-import { computed, onBeforeUnmount, onMounted, ref, toValue, watch } from "vue";
+import {
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  shallowRef,
+  toValue,
+  watch,
+} from "vue";
 import type { MaybeRefOrGetter, Ref } from "vue";
 import {
   randomUUID,
@@ -37,12 +45,12 @@ export interface UseAttachmentsReturn {
 export function useAttachments(
   props: UseAttachmentsProps,
 ): UseAttachmentsReturn {
-  const attachments = ref<Attachment[]>([]);
+  const attachments = shallowRef<Attachment[]>([]);
   const dragOver = ref(false);
   const fileInputRef = ref<HTMLInputElement | null>(null);
   const containerRef = ref<HTMLElement | null>(null);
   const configRef = ref<AttachmentsConfig | undefined>(toValue(props.config));
-  const attachmentsRef = ref<Attachment[]>(attachments.value);
+  const attachmentsRef = shallowRef<Attachment[]>(attachments.value);
   const enabled = computed(() => configRef.value?.enabled ?? false);
 
   watch(