@iloveagents/foundry-web-ui 0.7.1 → 0.8.0

package/dist/components/assistant-chat.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useCallback } from "react";
-import { ThreadPrimitive, ComposerPrimitive, MessagePrimitive, ActionBarPrimitive, BranchPickerPrimitive, useAuiState, useComposerRuntime, useThreadViewport, } from "@assistant-ui/react";
+import { ThreadPrimitive, ComposerPrimitive, MessagePrimitive, ActionBarPrimitive, BranchPickerPrimitive, useAui, useAuiState, useThreadViewport, } from "@assistant-ui/react";
 import { ArrowUp, Copy, Check, RefreshCw, PencilIcon, ChevronLeft, ChevronRight, ChevronDown, Square, Bot, Paperclip, Minimize2, PanelRightClose, PanelRightOpen, } from "lucide-react";
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { Button } from "@iloveagents/foundry-web-primitives";
@@ -12,6 +12,8 @@ import { ComposerSubmitBridge } from "./composer-submit-bridge.js";
 import { ChatComposerBannerSlot } from "./chat-slots.js";
 import { useChatBubbleStore } from "../lib/chat-bubble-store.js";
 import { MarkdownText } from "./markdown-text.js";
+import { ReasoningMessagePartComponent } from "./reasoning-part.js";
+import { ReasoningEffortPicker } from "./reasoning-effort-picker.js";
 import { ToolFallback } from "./tool-fallback.js";
 import { LoadingIndicator, LoadingBar } from "./loading-indicator.js";
 import { MessageTimestamp } from "./message-timestamp.js";
@@ -24,12 +26,13 @@ const UserMessage = () => {
 const UserActionBar = () => (_jsx(ActionBarPrimitive.Root, { hideWhenRunning: true, className: "flex items-center opacity-0 group-hover:opacity-100 transition-opacity", children: _jsx(ActionBarPrimitive.Edit, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Edit", size: "icon", children: _jsx(PencilIcon, { className: "size-4" }) }) }) }));
 const AssistantMessage = () => (_jsx(MessagePrimitive.Root, { className: "w-full mb-2 group", children: _jsxs("div", { className: "mx-auto max-w-3xl px-4", children: [_jsx("div", { className: "text-foreground leading-relaxed flex flex-col gap-4", children: _jsx(MessagePrimitive.Parts, { components: {
                         Text: MarkdownText,
+                        Reasoning: ReasoningMessagePartComponent,
                         tools: { Fallback: ToolFallback },
                     } }) }), _jsx(MessageError, {}), _jsxs("div", { className: "flex items-center gap-2 mt-1", children: [_jsx("div", { className: "flex h-8 w-[4.25rem] items-center", children: _jsx(AssistantActionBar, {}) }), _jsx(BranchPicker, {}), _jsx(MessageTimestamp, {})] })] }) }));
 const AssistantActionBar = () => (_jsxs(ActionBarPrimitive.Root, { hideWhenRunning: true, className: cn("pointer-events-none flex items-center gap-1 -ml-2 opacity-0 transition-opacity", "group-hover:pointer-events-auto group-hover:opacity-100", "group-focus-within:pointer-events-auto group-focus-within:opacity-100"), children: [_jsx(ActionBarPrimitive.Copy, { asChild: true, children: _jsxs(TooltipIconButton, { tooltip: "Copy", size: "icon", children: [_jsx(MessagePrimitive.If, { copied: false, children: _jsx(Copy, { className: "size-4" }) }), _jsx(MessagePrimitive.If, { copied: true, children: _jsx(Check, { className: "size-4 text-primary" }) })] }) }), _jsx(ActionBarPrimitive.Reload, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Refresh", size: "icon", children: _jsx(RefreshCw, { className: "size-4" }) }) })] }));
 const EditComposer = () => (_jsx(MessagePrimitive.Root, { className: "w-full mb-2", children: _jsx("div", { className: "flex items-start justify-end", children: _jsx("div", { className: "w-full max-w-[80%]", children: _jsxs(ComposerPrimitive.Root, { className: cn("flex flex-col gap-2", "rounded-2xl border border-input", "bg-background shadow-sm", "px-4 py-3"), children: [_jsx(ComposerPrimitive.Input, { autoFocus: true, className: cn("w-full bg-transparent", "text-base text-foreground", "outline-none resize-none", "placeholder:text-muted-foreground") }), _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "sm", children: "Cancel" }) }), _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "sm", children: "Update" }) })] })] }) }) }) }));
 const ComposerActionButton = () => {
-    return (_jsxs(_Fragment, { children: [_jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon", className: "rounded-full size-10 flex-shrink-0", "aria-label": "Stop generating", children: _jsx(Square, { className: "size-4" }) }) }) }), _jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "icon", className: "rounded-full size-10 flex-shrink-0", "aria-label": "Send message", children: _jsx(ArrowUp, { className: "size-5" }) }) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ThreadPrimitive.If, { running: false, children: _jsx(ReasoningEffortPicker, { className: "mr-1" }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon", className: "rounded-full size-10 flex-shrink-0", "aria-label": "Stop generating", children: _jsx(Square, { className: "size-4" }) }) }) }), _jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "icon", className: "rounded-full size-10 flex-shrink-0", "aria-label": "Send message", children: _jsx(ArrowUp, { className: "size-5" }) }) }) })] }));
 };
 /**
  * Default starter prompts shown on empty state. Override per-app by passing
@@ -51,7 +54,7 @@ const ScrollToBottomButton = () => {
 const DropZone = ({ children }) => {
     const [isDragging, setIsDragging] = useState(false);
     const dragCounter = useRef(0);
-    const composerRuntime = useComposerRuntime();
+    const aui = useAui();
     const handleDragEnter = useCallback((e) => {
         e.preventDefault();
         dragCounter.current++;
@@ -73,9 +76,9 @@ const DropZone = ({ children }) => {
         setIsDragging(false);
         const files = Array.from(e.dataTransfer.files);
         for (const file of files) {
-            await composerRuntime.addAttachment(file);
+            await aui.composer.addAttachment(file);
         }
-    }, [composerRuntime]);
+    }, [aui]);
     return (_jsxs("div", { className: "relative flex flex-col flex-1 overflow-hidden", onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, children: [children, isDragging && (_jsx("div", { className: cn("absolute inset-0 z-50 flex items-center justify-center pointer-events-none", "bg-background/80 backdrop-blur-sm", "border-2 border-dashed border-primary rounded-xl"), children: _jsx("p", { className: "text-lg text-primary font-medium", children: "Drop files here" }) }))] }));
 };
 /**

package/dist/components/chat-bubble.js

@@ -9,6 +9,7 @@ import { ContextPins } from "./context-bar.js";
 import { ComposerContextBadges, SentContextBadges } from "./context-badges.js";
 import { ComposerSubmitBridge } from "./composer-submit-bridge.js";
 import { ChatComposerBannerSlot, ChatLauncherBadgeSlot } from "./chat-slots.js";
+import { ReasoningMessagePartComponent } from "./reasoning-part.js";
 import { MarkdownText } from "./markdown-text.js";
 import { LoadingIndicator } from "./loading-indicator.js";
 import { MessageTimestamp } from "./message-timestamp.js";
@@ -21,6 +22,7 @@ const CHAT_BUBBLE_INSET = 8;
 function BubbleAssistantMessage() {
     return (_jsxs(MessagePrimitive.Root, { className: "w-full mb-2 group", children: [_jsx("div", { className: "text-foreground text-sm leading-relaxed flex flex-col gap-2", children: _jsx(MessagePrimitive.Parts, { components: {
                         Text: MarkdownText,
+                        Reasoning: ReasoningMessagePartComponent,
                     } }) }), _jsx(MessageError, { compact: true }), _jsxs("div", { className: "flex h-7 items-center gap-2 mt-1", children: [_jsxs(ActionBarPrimitive.Root, { hideWhenRunning: true, className: cn("pointer-events-none flex items-center gap-1 opacity-0 transition-opacity", "group-hover:pointer-events-auto group-hover:opacity-100", "group-focus-within:pointer-events-auto group-focus-within:opacity-100"), children: [_jsx(ActionBarPrimitive.Copy, { asChild: true, children: _jsxs(TooltipIconButton, { tooltip: "Copy", size: "icon", className: "size-7", children: [_jsx(MessagePrimitive.If, { copied: false, children: _jsx(Copy, { className: "size-3" }) }), _jsx(MessagePrimitive.If, { copied: true, children: _jsx(Check, { className: "size-3 text-primary" }) })] }) }), _jsx(ActionBarPrimitive.Reload, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Retry", size: "icon", className: "size-7", children: _jsx(RefreshCw, { className: "size-3" }) }) })] }), _jsx(MessageTimestamp, {})] })] }));
 }
 function BubbleUserMessage() {

package/dist/components/composer-submit-bridge.js

@@ -1,15 +1,17 @@
 import { useEffect } from "react";
-import { useComposerRuntime } from "@assistant-ui/react";
+import { useAui } from "@assistant-ui/react";
 import { useComposerSubmitStore } from "../lib/composer-submit-store.js";
 export function ComposerSubmitBridge() {
-    const composerRuntime = useComposerRuntime();
+    const aui = useAui();
     const pending = useComposerSubmitStore((s) => s.pending);
     useEffect(() => {
         if (!pending)
             return;
-        composerRuntime.setText(pending.text);
-        composerRuntime.send({ startRun: true });
+        // send() starts the run for the queued text; steering/queueing semantics
+        // are handled by the composer client (assistant-ui >= 0.15).
+        aui.composer.setText(pending.text);
+        aui.composer.send();
         useComposerSubmitStore.getState().consume(pending.id);
-    }, [composerRuntime, pending]);
+    }, [aui, pending]);
     return null;
 }

package/dist/components/reasoning-effort-picker.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Lets the user choose how hard the model thinks, per conversation.
+ *
+ * Sits in the composer next to Send. The choice rides on every request as
+ * an AG-UI forwarded prop and is read at send time, so switching it
+ * mid-conversation applies from the next message on. `Auto` sends nothing
+ * and leaves the backend's configured level in place.
+ */
+export declare function ReasoningEffortPicker({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/reasoning-effort-picker.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useStore } from "zustand";
+import { Check, ChevronDown } from "lucide-react";
+import { reasoningEffortStore, REASONING_EFFORT_LABELS, } from "@iloveagents/foundry-agent";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "../ui/dropdown-menu.js";
+const OPTIONS = [
+    { value: "default", hint: "Let the app decide" },
+    { value: "low", hint: "Answers sooner, thinks less" },
+    { value: "medium", hint: "Good default for most questions" },
+    { value: "high", hint: "Slower, best for hard problems" },
+];
+/**
+ * Lets the user choose how hard the model thinks, per conversation.
+ *
+ * Sits in the composer next to Send. The choice rides on every request as
+ * an AG-UI forwarded prop and is read at send time, so switching it
+ * mid-conversation applies from the next message on. `Auto` sends nothing
+ * and leaves the backend's configured level in place.
+ */
+export function ReasoningEffortPicker({ className }) {
+    const effort = useStore(reasoningEffortStore, (s) => s.effort);
+    const setEffort = useStore(reasoningEffortStore, (s) => s.setEffort);
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("flex items-center gap-1 rounded-md px-2 py-1", "text-xs text-muted-foreground hover:text-foreground hover:bg-muted", "transition-colors", className), "aria-label": `Thinking effort: ${REASONING_EFFORT_LABELS[effort]}`, children: [_jsx("span", { children: REASONING_EFFORT_LABELS[effort] }), _jsx(ChevronDown, { className: "size-3.5" })] }) }), _jsx(DropdownMenuContent, { align: "end", className: "w-56", children: OPTIONS.map((opt) => (_jsxs(DropdownMenuItem, { onSelect: () => setEffort(opt.value), className: "flex items-start gap-2", children: [_jsx(Check, { className: cn("size-4 mt-0.5", effort === opt.value ? "opacity-100" : "opacity-0") }), _jsxs("span", { className: "flex flex-col", children: [_jsx("span", { className: "text-sm", children: REASONING_EFFORT_LABELS[opt.value] }), _jsx("span", { className: "text-xs text-muted-foreground", children: opt.hint })] })] }, opt.value))) })] }));
+}

package/dist/components/reasoning-part.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Renders a `reasoning` message part — the model's own thinking, streamed
+ * over AG-UI's `REASONING_*` events and kept separate from the answer.
+ *
+ * Collapsed by default and deliberately understated: reasoning is context for
+ * a curious reader, not the response. It stays visible after the run so a
+ * reader can check *why* an answer came out the way it did.
+ */
+export declare function ReasoningPart({ text }: {
+    text: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+/** Adapter for assistant-ui's `Reasoning` part slot. */
+export declare const ReasoningMessagePartComponent: ({ text }: {
+    text: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/reasoning-part.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Brain, ChevronDown } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
+/**
+ * Renders a `reasoning` message part — the model's own thinking, streamed
+ * over AG-UI's `REASONING_*` events and kept separate from the answer.
+ *
+ * Collapsed by default and deliberately understated: reasoning is context for
+ * a curious reader, not the response. It stays visible after the run so a
+ * reader can check *why* an answer came out the way it did.
+ */
+export function ReasoningPart({ text }) {
+    const [isOpen, setIsOpen] = useState(false);
+    if (!text.trim())
+        return null;
+    return (_jsxs(Collapsible, { open: isOpen, onOpenChange: setIsOpen, className: "w-full", children: [_jsx(CollapsibleTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("flex items-center gap-1.5 text-xs text-muted-foreground", "hover:text-foreground transition-colors"), "aria-label": isOpen ? "Hide reasoning" : "Show reasoning", children: [_jsx(Brain, { className: "size-3.5" }), _jsx("span", { children: "Reasoning" }), _jsx(ChevronDown, { className: cn("size-3.5 transition-transform", isOpen && "rotate-180") })] }) }), _jsx(CollapsibleContent, { children: _jsx("div", { className: cn("mt-1.5 whitespace-pre-wrap border-l-2 border-border pl-3", "text-xs text-muted-foreground"), children: text }) })] }));
+}
+/** Adapter for assistant-ui's `Reasoning` part slot. */
+export const ReasoningMessagePartComponent = ({ text }) => (_jsx(ReasoningPart, { text: text }));

package/dist/index.d.ts

@@ -40,8 +40,8 @@ export { FormDialog } from "./components/form-dialog.js";
 export { ConfirmDialog } from "./components/confirm-dialog.js";
 export { NameDialog } from "./components/name-dialog.js";
 export { SurfaceCard, surfaceCardVariants } from "./components/surface-card.js";
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, } from "./ui/tooltip.js";
-export { Collapsible, CollapsibleTrigger, CollapsibleContent, } from "./ui/collapsible.js";
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./ui/tooltip.js";
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./ui/collapsible.js";
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel, } from "./ui/dropdown-menu.js";
 export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } from "./ui/dialog.js";
 export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent } from "./ui/popover.js";
@@ -66,4 +66,6 @@ export { usePageTools } from "./lib/use-page-tools.js";
 export { useNewConversation } from "./lib/use-new-conversation.js";
 export { AGUIAdapterSDK } from "./lib/ag-ui-adapter.js";
 export { FileAttachmentAdapter } from "./lib/attachment-adapter.js";
+export { ReasoningPart, ReasoningMessagePartComponent } from "./components/reasoning-part.js";
+export { ReasoningEffortPicker } from "./components/reasoning-effort-picker.js";
 export { AuthProvider } from "./lib/auth-provider.js";

package/dist/index.js

@@ -44,8 +44,8 @@ export { SurfaceCard, surfaceCardVariants } from "./components/surface-card.js";
 // coupling to ThemeScope (theme-runtime-provider.tsx) — they need a
 // theme-system refactor before they can move to the leaf primitives
 // package. Tracked for a follow-up under #95/#96.
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider, } from "./ui/tooltip.js";
-export { Collapsible, CollapsibleTrigger, CollapsibleContent, } from "./ui/collapsible.js";
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "./ui/tooltip.js";
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./ui/collapsible.js";
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel, } from "./ui/dropdown-menu.js";
 export { Dialog, DialogPortal, DialogOverlay, DialogTrigger, DialogClose, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, } from "./ui/dialog.js";
 export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent } from "./ui/popover.js";
@@ -74,6 +74,8 @@ export { useNewConversation } from "./lib/use-new-conversation.js";
 // --- Adapters ---
 export { AGUIAdapterSDK } from "./lib/ag-ui-adapter.js";
 export { FileAttachmentAdapter } from "./lib/attachment-adapter.js";
+export { ReasoningPart, ReasoningMessagePartComponent } from "./components/reasoning-part.js";
+export { ReasoningEffortPicker } from "./components/reasoning-effort-picker.js";
 // --- Auth ---
 // `AuthProvider` is the React MSAL bootstrap (uses `@azure/msal-react`).
 // Token store, config, fetch wrapper all live in `@iloveagents/foundry-agent/msal`.

package/dist/lib/ag-ui-adapter.js

@@ -46,6 +46,10 @@ export class AGUIAdapterSDK {
             useAppStore.getState().consumeContextForMessage(lastUserMsg.id);
         }
         let currentText = "";
+        // Reasoning accumulates across the WHOLE run, unlike `currentText` which
+        // is per-turn: the collapsed reasoning panel shouldn't lose what the model
+        // thought before a tool call just because the runner re-issued the turn.
+        let currentReasoning = "";
         const toolCalls = new Map();
         let runError = null;
         // Liveness clock for the working indicator: every runner event (incl.
@@ -64,6 +68,11 @@ export class AGUIAdapterSDK {
          */
         const buildResult = (statusOverride) => {
             const content = [];
+            // Reasoning first: it precedes the answer chronologically, and
+            // assistant-ui renders parts in array order.
+            if (currentReasoning) {
+                content.push({ type: "reasoning", text: currentReasoning });
+            }
             for (const [id, tc] of toolCalls) {
                 let parsedArgs = {};
                 try {
@@ -143,6 +152,18 @@ export class AGUIAdapterSDK {
                         currentText += event.delta;
                         shouldYield = true;
                         break;
+                    case "reasoning-delta":
+                        currentReasoning += event.delta;
+                        shouldYield = true;
+                        break;
+                    case "reasoning-end":
+                        shouldYield = true;
+                        break;
+                    case "step-started":
+                    case "step-finished":
+                        // Progress only — the status store already carries the step name
+                        // (pushed by the runner alongside these events).
+                        break;
                     case "text-message-end":
                         shouldYield = true;
                         break;

package/dist/lib/attachment-adapter.d.ts

@@ -1,17 +1,41 @@
 /**
  * File attachment adapter for assistant-ui.
  *
- * Reads image files client-side as base64 and produces FileMessagePart content.
- * Non-image documents are represented as text metadata so starter apps don't
- * send malformed multimodal payloads to providers that require a separate file
- * upload or document extraction pipeline.
+ * Reads attachments client-side as base64 and produces FileMessagePart content
+ * for both images and documents. The AG-UI adapter turns those into `binary`
+ * message parts (mimeType + data + filename), which the protocol carries
+ * natively and model providers accept as file input.
  *
- * Supported: images (PNG, JPEG, WEBP, GIF). PDFs/DOCX can be attached, but the
- * default starter only sends their metadata to the agent.
+ * Documents used to degrade to a text stub (`[Attached file: x.pdf; ...]`) so
+ * the starter wouldn't send payloads to providers lacking file input. That
+ * silently discarded the bytes: the user attaches a PDF, the model receives
+ * only its filename, and — having been told a file was attached — goes hunting
+ * for a matching document in the backend and reports that it can't read it.
+ * Losing user data silently is the worse failure, so documents are sent by
+ * default. Pass `{ documentMode: "metadata" }` to restore the stub for agents
+ * whose model genuinely can't accept file input.
+ *
+ * Note for hosts: the bytes ride along on every turn of the live conversation
+ * and land in persisted history unless the backend elides them — see
+ * lastspace's `_elide_inline_media` for the pattern.
  */
 import type { AttachmentAdapter, PendingAttachment, CompleteAttachment, Attachment } from "@assistant-ui/react";
+export interface FileAttachmentAdapterOptions {
+    /**
+     * How non-image documents (PDF, DOCX) are sent.
+     *
+     * - `"binary"` (default) — base64 bytes as a file part, so the model can
+     *   actually read the document.
+     * - `"metadata"` — filename/type/size as text only. For agents whose model
+     *   cannot accept file input; the agent sees that a file was attached but
+     *   never its contents.
+     */
+    documentMode?: "binary" | "metadata";
+}
 export declare class FileAttachmentAdapter implements AttachmentAdapter {
     accept: string;
+    private readonly documentMode;
+    constructor(options?: FileAttachmentAdapterOptions);
     add({ file }: {
         file: File;
     }): Promise<PendingAttachment>;

package/dist/lib/attachment-adapter.js

@@ -1,13 +1,23 @@
 /**
  * File attachment adapter for assistant-ui.
  *
- * Reads image files client-side as base64 and produces FileMessagePart content.
- * Non-image documents are represented as text metadata so starter apps don't
- * send malformed multimodal payloads to providers that require a separate file
- * upload or document extraction pipeline.
+ * Reads attachments client-side as base64 and produces FileMessagePart content
+ * for both images and documents. The AG-UI adapter turns those into `binary`
+ * message parts (mimeType + data + filename), which the protocol carries
+ * natively and model providers accept as file input.
  *
- * Supported: images (PNG, JPEG, WEBP, GIF). PDFs/DOCX can be attached, but the
- * default starter only sends their metadata to the agent.
+ * Documents used to degrade to a text stub (`[Attached file: x.pdf; ...]`) so
+ * the starter wouldn't send payloads to providers lacking file input. That
+ * silently discarded the bytes: the user attaches a PDF, the model receives
+ * only its filename, and — having been told a file was attached — goes hunting
+ * for a matching document in the backend and reports that it can't read it.
+ * Losing user data silently is the worse failure, so documents are sent by
+ * default. Pass `{ documentMode: "metadata" }` to restore the stub for agents
+ * whose model genuinely can't accept file input.
+ *
+ * Note for hosts: the bytes ride along on every turn of the live conversation
+ * and land in persisted history unless the backend elides them — see
+ * lastspace's `_elide_inline_media` for the pattern.
  */
 const MAX_FILE_SIZE = 20 * 1024 * 1024; // 20 MB
 /** Infer MIME type from extension when browser reports empty file.type (common for .docx) */
@@ -39,8 +49,9 @@ function fileToBase64(file) {
     });
 }
 export class FileAttachmentAdapter {
-    constructor() {
+    constructor(options = {}) {
         this.accept = "image/*,application/pdf,.pdf,.docx,application/vnd.openxmlformats-officedocument.wordprocessingml.document";
+        this.documentMode = options.documentMode ?? "binary";
     }
     async add({ file }) {
         if (file.size > MAX_FILE_SIZE) {
@@ -58,7 +69,7 @@ export class FileAttachmentAdapter {
     }
     async send(attachment) {
         const mimeType = attachment.contentType ?? "application/octet-stream";
-        if (!mimeType.startsWith("image/")) {
+        if (!mimeType.startsWith("image/") && this.documentMode === "metadata") {
             return {
                 ...attachment,
                 status: { type: "complete" },
@@ -67,7 +78,9 @@ export class FileAttachmentAdapter {
                         type: "text",
                         text: `[Attached file: ${attachment.name}` +
                             `; type: ${mimeType}` +
-                            `; size: ${formatFileSize(attachment.file.size)}]`,
+                            `; size: ${formatFileSize(attachment.file.size)}` +
+                            `. Contents were not sent — this agent is configured for ` +
+                            `metadata-only attachments, so tell the user you cannot read it.]`,
                     },
                 ],
             };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "license": "MIT",
   "description": "React agent UI core for Foundry UI — chat, composer, AG-UI adapter for assistant-ui, tool cards, panels, sidebar, theme runtime, and UI stores.",
   "keywords": [
@@ -41,7 +41,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-router": "^7.0.0",
-    "@assistant-ui/react": "^0.12.25",
+    "@assistant-ui/react": "^0.15.1",
     "@ag-ui/client": "^0.0.52",
     "@ag-ui/core": "^0.0.52",
     "zustand": "^5.0.0",
@@ -70,13 +70,13 @@
     "tailwind-merge": "^3.5.0",
     "react-markdown": "^10.0.0",
     "remark-gfm": "^4.0.0",
-    "@iloveagents/foundry-agent": "^0.7.1",
-    "@iloveagents/foundry-web-primitives": "^0.7.1"
+    "@iloveagents/foundry-agent": "^0.8.0",
+    "@iloveagents/foundry-web-primitives": "^0.8.0"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",
     "@ag-ui/core": "^0.0.52",
-    "@assistant-ui/react": "^0.12.25",
+    "@assistant-ui/react": "^0.15.1",
     "@azure/msal-browser": "^5.0.0",
     "@azure/msal-react": "^5.0.0",
     "@types/react": "^19.2.2",