@agent-native/toolkit 0.203.0-nightly-20261007093643 → 0.203.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.203.0-nightly-20261007093643",
+  "version": "0.203.0",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -673,7 +673,7 @@
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.33",
     "zod": "^4.3.6",
-    "@agent-native/agentkit": "^0.203.0-nightly-20261007093643"
+    "@agent-native/agentkit": "^0.203.0"
   },
   "devDependencies": {
     "@excalidraw/excalidraw": "0.18.1",
@@ -697,10 +697,10 @@
     "typescript-7": "npm:typescript@^7.0.2",
     "vite": "8.1.0",
     "vitest": "^4.1.5",
-    "@agent-native/core": "^0.203.0-nightly-20261007093643"
+    "@agent-native/core": "^0.203.0"
   },
   "peerDependencies": {
-    "@agent-native/core": "0.203.0-nightly-20261007093643",
+    "@agent-native/core": ">=0.196.0",
     "@excalidraw/excalidraw": ">=0.18",
     "@excalidraw/mermaid-to-excalidraw": ">=2",
     "@tanstack/react-query": "^5.99.2",

package/src/agentkit.ts

@@ -3,6 +3,7 @@ export {
   AgentSuggestionBar,
   agentSuggestionPrompt,
 } from "./composer/AgentSuggestionBar.js";
+export { formatAttachmentError } from "./composer/attachment-accept.js";
 export { MessageQueueDrawer } from "./composer/MessageQueueDrawer.js";
 export {
   ComposerContextMenu,
@@ -21,6 +22,7 @@ export {
   type ComposerContextPickerFooterAction,
 } from "./composer/ComposerContextMenu.js";
 export {
+  createChatAttachmentAdapter,
   PromptComposer,
   type PromptComposerFile,
   type PromptComposerProps,

package/src/app/agentkit/react/components.interaction.spec.tsx

@@ -870,6 +870,74 @@ describe("AgentKitChat interactions", () => {
     }
   });
 
+  it("attaches dropped SVGs and names rejected drops without the accept list", async () => {
+    const transport: AgentTransport = {
+      capabilities: { uploads: true },
+      async startRun() {
+        return { runId: "run-svg" };
+      },
+      async *subscribeToRun() {},
+      async cancelRun() {},
+    };
+    const client = new AgentKitClient({ transport });
+    const onAttachmentError = vi.fn();
+    const container = document.createElement("div");
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    const actEnvironment = globalThis as typeof globalThis & {
+      IS_REACT_ACT_ENVIRONMENT?: boolean;
+    };
+    const previousActEnvironment = actEnvironment.IS_REACT_ACT_ENVIRONMENT;
+    actEnvironment.IS_REACT_ACT_ENVIRONMENT = true;
+    const dropOnChat = async (file: File) => {
+      const drop = new Event("drop", { bubbles: true, cancelable: true });
+      Object.defineProperty(drop, "dataTransfer", {
+        value: { types: ["Files"], files: [file], dropEffect: "none" },
+      });
+      await act(async () => {
+        container.querySelector(".agentkit-chat")?.dispatchEvent(drop);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+    };
+
+    try {
+      await act(async () => {
+        root.render(
+          <AgentKitProvider controller={client} threadId="thread-svg">
+            <AgentKitChat composerProps={{ onAttachmentError }} />
+          </AgentKitProvider>,
+        );
+        await Promise.resolve();
+      });
+
+      await dropOnChat(
+        new File(['<svg xmlns="http://www.w3.org/2000/svg"/>'], "logo.svg", {
+          type: "image/svg+xml",
+        }),
+      );
+      expect(container.textContent).toContain("logo.svg");
+      expect(onAttachmentError).not.toHaveBeenCalled();
+
+      await dropOnChat(
+        new File(["zip"], "archive.zip", { type: "application/zip" }),
+      );
+      expect(onAttachmentError).toHaveBeenCalledWith(
+        "archive.zip: Could not add the dropped file. Try a different format.",
+      );
+    } finally {
+      await act(async () => {
+        root.unmount();
+        await Promise.resolve();
+      });
+      container.remove();
+      if (previousActEnvironment === undefined) {
+        delete actEnvironment.IS_REACT_ACT_ENVIRONMENT;
+      } else {
+        actEnvironment.IS_REACT_ACT_ENVIRONMENT = previousActEnvironment;
+      }
+    }
+  });
+
   it("disables transcript file drops when the host disables uploads", async () => {
     const transport: AgentTransport = {
       capabilities: { uploads: true },

package/src/app/agentkit/react/components.tsx

@@ -68,6 +68,8 @@ import {
   Surface,
   TextField,
   agentSuggestionPrompt,
+  createChatAttachmentAdapter,
+  formatAttachmentError,
   type PromptComposerFile,
   type PromptComposerProps,
   type TiptapComposerHandle,
@@ -4065,6 +4067,10 @@ export function AgentKitComposer({
   }, []);
   const [uncontrolledMode, setUncontrolledMode] = useState(defaultMode);
   const [attachmentError, setAttachmentError] = useState<string | null>(null);
+  const composerAttachmentAdapter = useMemo(
+    () => attachmentAdapter ?? createChatAttachmentAdapter(),
+    [attachmentAdapter],
+  );
   const executionMode = mode ?? uncontrolledMode;
   const active = hasActiveRuns(thread);
   const composerInitialText = editingMessage
@@ -4095,12 +4101,13 @@ export function AgentKitComposer({
         await composer.addAttachment(file);
         setAttachmentError(null);
       } catch (error) {
-        const message = error instanceof Error ? error.message : labels.error;
-        reportAttachmentError(message);
+        reportAttachmentError(
+          `${file.name}: ${formatAttachmentError(error, labels.dropFileFailed)}`,
+        );
         throw error;
       }
     },
-    [labels.error, reportAttachmentError],
+    [labels.dropFileFailed, labels.error, reportAttachmentError],
   );
   useEffect(() => {
     const receiveAttachments = (event: Event) => {
@@ -4494,7 +4501,7 @@ export function AgentKitComposer({
         onInspectContextItem={onInspectContextItem}
         onRetryContextItem={onRetryContextItem}
         contextMenuItems={contextMenuItems}
-        attachmentAdapter={attachmentAdapter}
+        attachmentAdapter={composerAttachmentAdapter}
         inlineTextAttachments={inlineTextAttachments}
         rootClassName="agentkit-composer"
         className={

package/src/app/agentkit/react/context.tsx

@@ -274,6 +274,7 @@ export interface AgentKitLabels {
   imagePreview: string;
   closePreview: string;
   dropFilesToAttach: string;
+  dropFileFailed: string;
   scrollToBottom: string;
   formatTimestamp?: (createdAt: string) => string;
   error: string;
@@ -384,6 +385,7 @@ export const defaultAgentKitLabels: AgentKitLabels = {
   imagePreview: "Image preview",
   closePreview: "Close preview",
   dropFilesToAttach: "Drop files to attach",
+  dropFileFailed: "Could not add the dropped file. Try a different format.",
   scrollToBottom: "Scroll to bottom",
   error: "Something went wrong",
   renderError: "This content couldn’t be displayed.",

package/src/app/agentkit/react/styles.css

@@ -1715,11 +1715,16 @@ button.agentkit-object {
 
 .agentkit-composer-error {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 0.375rem;
   padding: 0.375rem 0.625rem 0;
 }
 
+.agentkit-composer-error > span {
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
 .agentkit-file {
   display: inline-flex;
   align-items: center;

package/src/app/chat/AgentKitAssistantChat.tsx

@@ -887,6 +887,7 @@ export const AgentKitAssistantChat = forwardRef<
       imagePreview: t("agentChat.composer.imagePreview"),
       closePreview: t("agentChat.composer.closePreview"),
       dropFilesToAttach: t("agentChat.composer.dropToAttach"),
+      dropFileFailed: t("agentChat.composer.droppedFileError"),
       scrollToBottom: t("agentChat.composer.scrollToBottom"),
       formatTimestamp: (createdAt: string) => {
         const date = new Date(createdAt);
@@ -4239,7 +4240,9 @@ function AgentKitComposerSurface({
             className="mx-3 mb-1.5 flex shrink-0 items-start gap-2 rounded-md border border-border bg-muted/70 px-3 py-2 text-xs text-foreground shadow-sm"
           >
             <IconAlertTriangle className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-            <span className="flex-1 leading-snug">{composerError}</span>
+            <span className="min-w-0 flex-1 break-words leading-snug">
+              {composerError}
+            </span>
             <button
               type="button"
               aria-label={t("agentChat.common.dismissError")}

package/src/composer/PromptComposer.spec.ts

@@ -6,6 +6,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import {
   buildPromptComposerSubmission,
+  createChatAttachmentAdapter,
   PromptComposer,
   resolveComposerModelStatusChecksEnabled,
   shouldGateComposerForEngine,
@@ -234,3 +235,82 @@ describe("PromptComposer scoped runtime", () => {
     expect(attachedFiles).toHaveLength(0);
   });
 });
+
+describe("PromptComposer attachment policy", () => {
+  it("keeps SVGs out of standalone prompts while chat stages them as documents", async () => {
+    await act(async () => {
+      root.render(
+        React.createElement(PromptComposer, {
+          attachmentsEnabled: true,
+          includeDefaultSlashSkills: false,
+          onSubmit: () => {},
+          plusMenuMode: "upload-only",
+          showModelSelector: false,
+          voiceEnabled: false,
+        }),
+      );
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    const standaloneAccept = container
+      .querySelector<HTMLInputElement>('input[type="file"]')
+      ?.getAttribute("accept")
+      ?.split(",");
+    expect(standaloneAccept).toContain(".pdf");
+    expect(standaloneAccept).not.toContain(".svg");
+
+    const chatAdapter = createChatAttachmentAdapter();
+    expect(chatAdapter.accept.split(",")).toEqual(
+      expect.arrayContaining(["image/svg+xml", ".svg", ".png", ".pdf"]),
+    );
+    await expect(
+      chatAdapter.add({
+        file: new File(["<svg/>"], "logo.svg", { type: "image/svg+xml" }),
+      }),
+    ).resolves.toMatchObject({
+      type: "document",
+      name: "logo.svg",
+      contentType: "image/svg+xml",
+    });
+    await expect(
+      chatAdapter.add({
+        file: new File(["png"], "logo.png", { type: "image/png" }),
+      }),
+    ).resolves.toMatchObject({ type: "image", name: "logo.png" });
+  });
+
+  it("shows why a file was rejected when the host passes no error handler", async () => {
+    await act(async () => {
+      root.render(
+        React.createElement(PromptComposer, {
+          attachmentsEnabled: true,
+          includeDefaultSlashSkills: false,
+          onSubmit: () => {},
+          plusMenuMode: "upload-only",
+          showModelSelector: false,
+          voiceEnabled: false,
+        }),
+      );
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    const editor = container.querySelector<HTMLElement>(
+      ".agent-composer-prosemirror",
+    );
+    expect(editor).not.toBeNull();
+    const pasteEvent = new Event("paste", { bubbles: true, cancelable: true });
+    Object.defineProperty(pasteEvent, "clipboardData", {
+      value: {
+        files: [new File(["<svg/>"], "logo.svg", { type: "image/svg+xml" })],
+        getData: () => "",
+      },
+    });
+
+    await act(async () => {
+      editor?.dispatchEvent(pasteEvent);
+      await new Promise((resolve) => setTimeout(resolve, 20));
+    });
+
+    expect(container.querySelector('[role="alert"]')?.textContent).toBe(
+      "Could not attach the pasted image. Try a different format.",
+    );
+  });
+});

package/src/composer/PromptComposer.tsx

@@ -33,6 +33,7 @@ import { cn } from "../utils.js";
 import { AgentComposerFrame } from "./AgentComposerFrame.js";
 import { IMAGE_ATTACHMENT_ACCEPT } from "./attachment-accept.js";
 import {
+  CHAT_DOCUMENT_ATTACHMENT_ACCEPT,
   PROMPT_DOCUMENT_ATTACHMENT_ACCEPT,
   TextAttachmentAdapter,
 } from "./attachment-accept.js";
@@ -314,6 +315,20 @@ class RasterImageAttachmentAdapter extends SimpleImageAttachmentAdapter {
   }
 }
 
+// SVGs never match the raster adapter, so agent chat stages them as reference
+// documents rather than images a model would try to read as pixels.
+class ChatDocumentAttachmentAdapter extends BinaryDocumentAttachmentAdapter {
+  public accept = CHAT_DOCUMENT_ATTACHMENT_ACCEPT;
+}
+
+export function createChatAttachmentAdapter(): AttachmentAdapter {
+  return new CompositeAttachmentAdapter([
+    new RasterImageAttachmentAdapter(),
+    new ChatDocumentAttachmentAdapter(),
+    new TextAttachmentAdapter(),
+  ]);
+}
+
 function isInlineableTextFile(file: File): boolean {
   if (file.type.startsWith("text/")) return true;
   if (

package/src/composer/TiptapComposer.spec.ts

@@ -2554,6 +2554,29 @@ describe("createTiptapComposerExtensions", () => {
     });
   });
 
+  it("names a rejected image drop by the file the user dropped", async () => {
+    const file = new File(["<svg/>"], "logo.svg", { type: "image/svg+xml" });
+    const added: File[] = [];
+    const onError = vi.fn();
+    handleComposerFileDrop({
+      event: {
+        dataTransfer: { files: [file] },
+        preventDefault: () => {},
+        stopPropagation: () => {},
+      } as unknown as DragEvent,
+      addAttachment: async (attachment) => {
+        added.push(attachment);
+        throw new Error("File type image/svg+xml is not accepted.");
+      },
+      onError,
+    });
+
+    await vi.waitFor(() => {
+      expect(onError).toHaveBeenCalledWith(expect.any(Error), "logo.svg");
+    });
+    expect(added[0]?.name).toMatch(/^\d+-[a-z0-9]+-logo\.svg$/);
+  });
+
   it("caps the model picker height without forcing empty vertical space", () => {
     expect(MODEL_SELECTOR_POPOVER_STYLE).toMatchObject({
       fontSize: 13,

package/src/composer/TiptapComposer.tsx

@@ -770,16 +770,15 @@ export function handleComposerFileDrop(options: {
   options.event.preventDefault();
   options.event.stopPropagation();
   if (options.attachmentsEnabled === false) return true;
-  const attachments = droppedFiles.map(uniquifyComposerImageFile);
   let errorReported = false;
   void Promise.all(
-    attachments.map(async (file) => {
+    droppedFiles.map(async (droppedFile) => {
       try {
-        await options.addAttachment(file);
+        await options.addAttachment(uniquifyComposerImageFile(droppedFile));
       } catch (error) {
         if (errorReported) return;
         errorReported = true;
-        options.onError?.(error, file.name);
+        options.onError?.(error, droppedFile.name);
       }
     }),
   );
@@ -1223,8 +1222,8 @@ export interface TiptapComposerProps {
   interceptBuildRequestsForBuilder?: boolean;
   /**
    * Called when a drag-drop or paste attachment fails (e.g. unsupported format,
-   * size cap). Use this to surface a visible error in the parent chat surface
-   * rather than silently swallowing the problem.
+   * size cap) so the host can show it in its own surface. Without it, the
+   * composer shows the message inline.
    */
   onAttachmentError?: (message: string) => void;
 }
@@ -2873,8 +2872,10 @@ export function TiptapComposer({
   // Refs for values accessed in handleKeyDown (ProseMirror doesn't re-bind)
   const popoverStateRef = useRef<PopoverState>(null);
   const composingRef = useRef(false);
+  const [attachmentError, setAttachmentError] = useState<string | null>(null);
   const onAttachmentErrorRef = useRef(onAttachmentError);
-  onAttachmentErrorRef.current = onAttachmentError;
+  // Many standalone prompts pass no handler; a rejected file must still say so.
+  onAttachmentErrorRef.current = onAttachmentError ?? setAttachmentError;
   const onSubmitRef = useRef(onSubmit);
   onSubmitRef.current = onSubmit;
   const execModeRef = useRef(execMode);
@@ -3101,6 +3102,7 @@ export function TiptapComposer({
   }, [cleanStaleAttachments, composerRuntime]);
   const addAttachmentForCurrentScope = useCallback(
     (file: File) => {
+      setAttachmentError(null);
       const scopeGeneration = draftScopeGenerationRef.current;
       const submissionBarrier = attachmentSubmissionBarrierRef.current;
       let resolveOperation!: () => void;
@@ -3297,6 +3299,7 @@ export function TiptapComposer({
       // Drive the send button's enabled state from the actual editor contents;
       // the composer runtime is only synced on submit, so its isEmpty lags.
       setEditorHasText(composerDocumentHasContent(ed.state.doc));
+      setAttachmentError(null);
       onTextChangeRef.current?.(ed.getText({ blockSeparator: "\n" }).trim());
       setReferenceRevision((revision) => revision + 1);
 
@@ -5871,6 +5874,14 @@ export function TiptapComposer({
           {contextSubmissionError}
         </p>
       ) : null}
+      {attachmentError ? (
+        <p
+          role="alert"
+          className="break-words px-2.5 pt-2 text-xs text-destructive"
+        >
+          {attachmentError}
+        </p>
+      ) : null}
       <div
         data-agent-composer-variant={layoutVariant}
         data-agent-composer-slot="editor-wrap"