@iloveagents/foundry-web-ui 0.11.1 → 0.12.1

package/dist/components/ag-ui-runtime-provider.js

@@ -4,6 +4,7 @@ import { AssistantRuntimeProvider, useLocalRuntime } from "@assistant-ui/react";
 import { TooltipProvider } from "../ui/tooltip.js";
 import { AGUIAdapterSDK } from "../lib/ag-ui-adapter.js";
 import { FileAttachmentAdapter } from "../lib/attachment-adapter.js";
+import { useAttachmentAdapterStore } from "../lib/attachment-registry.js";
 import { ShowDocumentToolUI } from "./show-document-tool-ui.js";
 import { ClientToolExecutor } from "./client-tool-executor.js";
 const AGUIAdapterContext = createContext(null);
@@ -33,7 +34,10 @@ function AGUIRuntimeInner({ children, fetchFn, threadId, urlMatch, historyAdapte
     // Only pass options if at least one is set, mirroring the prior
     // single-arg semantics for the "fresh chat, no overrides" case.
     fetchFn || threadId ? { fetchFn, threadId } : undefined), [fetchFn, threadId]);
-    const attachmentAdapter = useMemo(() => new FileAttachmentAdapter(), []);
+    // Hosts may register a custom adapter (see ``registerAttachmentAdapter``);
+    // the shell's inline-base64 adapter is the default.
+    const registeredAdapter = useAttachmentAdapterStore((s) => s.adapter);
+    const attachmentAdapter = useMemo(() => registeredAdapter ?? new FileAttachmentAdapter(), [registeredAdapter]);
     // Build the history adapter ONCE per inner mount, after the AG-UI
     // adapter exists so we know its thread id. The keyed-remount in the
     // outer wrapper ensures threadId changes trigger a fresh adapter +

package/dist/components/assistant-chat.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useRef, useCallback } from "react";
+import { useState, useRef, useCallback, useEffect } from "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";
@@ -53,8 +53,22 @@ const ScrollToBottomButton = () => {
 };
 const DropZone = ({ children }) => {
     const [isDragging, setIsDragging] = useState(false);
+    const [dropError, setDropError] = useState(null);
+    const dropErrorTimer = useRef(null);
     const dragCounter = useRef(0);
     const aui = useAui();
+    const showDropError = useCallback((message) => {
+        setDropError(message);
+        if (dropErrorTimer.current)
+            clearTimeout(dropErrorTimer.current);
+        dropErrorTimer.current = setTimeout(() => setDropError(null), 4000);
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (dropErrorTimer.current)
+                clearTimeout(dropErrorTimer.current);
+        };
+    }, []);
     const handleDragEnter = useCallback((e) => {
         e.preventDefault();
         dragCounter.current++;
@@ -75,11 +89,25 @@ const DropZone = ({ children }) => {
         dragCounter.current = 0;
         setIsDragging(false);
         const files = Array.from(e.dataTransfer.files);
+        // Drops bypass the file picker's ``accept`` filter, so the adapter's
+        // add() is the real gate here — surface its rejections instead of
+        // leaving an unhandled promise rejection and a silently missing chip.
+        const rejected = [];
         for (const file of files) {
-            await aui.composer.addAttachment(file);
+            try {
+                await aui.composer.addAttachment(file);
+            }
+            catch (err) {
+                rejected.push(`${file.name}: ${err instanceof Error ? err.message : "unsupported file type"}`);
+            }
+        }
+        if (rejected.length > 0) {
+            showDropError(rejected.length === 1
+                ? `Couldn't attach ${rejected[0]}`
+                : `Couldn't attach ${rejected.length} files (${rejected.join("; ")})`);
         }
-    }, [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" }) }))] }));
+    }, [aui, showDropError]);
+    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" }) })), dropError && (_jsx("div", { role: "alert", className: cn("absolute bottom-4 left-1/2 -translate-x-1/2 z-50 max-w-[90%]", "rounded-md border border-destructive/50 bg-background px-3 py-2", "text-sm text-destructive shadow-md pointer-events-none truncate"), children: dropError }))] }));
 };
 /**
  * Reusable chat content — used by ChatPage and ChatBubble.

package/dist/components/chat-bubble.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import { ThreadPrimitive, ComposerPrimitive, MessagePrimitive, ActionBarPrimitive, useAuiState, useThreadViewport, } from "@assistant-ui/react";
-import { MessageSquare, X, Maximize2, SquarePen, ArrowUp, Square, ChevronDown, Copy, Check, Paperclip, RefreshCw, } from "lucide-react";
+import { Sparkles, X, Maximize2, SquarePen, ArrowUp, Square, ChevronDown, Copy, Check, Paperclip, RefreshCw, } from "lucide-react";
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { Button } from "@iloveagents/foundry-web-primitives";
 import { TooltipIconButton } from "./tooltip-icon-button.js";
@@ -99,9 +99,9 @@ export function ChatBubble() {
     return (_jsxs(_Fragment, { children: [!isOpen && (_jsx("div", { "aria-hidden": "true", className: cn("pointer-events-none fixed bottom-0 left-0 z-40 hidden md:block", "border-r border-sidebar-border", "bg-gradient-to-b from-sidebar/0 via-sidebar/88 to-sidebar/96", "supports-[backdrop-filter]:backdrop-blur"), style: {
                     width: isSidebarOpen ? sidebarWidth : RAIL_WIDTH,
                     height: 64,
-                } })), !isOpen && (_jsxs("div", { className: "fixed z-50 group", style: { left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }, children: [_jsx("button", { type: "button", onClick: openBubble, className: cn("size-10 rounded-full", "bg-primary text-primary-foreground shadow-lg", "flex items-center justify-center", "hover:bg-primary/90 transition-all duration-200", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), "aria-label": "Open chat", children: _jsx(MessageSquare, { className: "size-4" }) }), _jsx(ChatLauncherBadgeSlot, {})] })), isOpen && (_jsxs("div", { ref: panelRef, className: cn("fixed z-50", "rounded-2xl border border-border", "bg-background shadow-2xl", "flex flex-col overflow-hidden", "w-95 h-150"), style: dragPos
+                } })), !isOpen && (_jsxs("div", { className: "fixed z-50 group", style: { left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }, children: [_jsx("button", { type: "button", onClick: openBubble, className: cn("size-10 rounded-full", "bg-primary text-primary-foreground shadow-lg", "flex items-center justify-center", "hover:bg-primary/90 transition-all duration-200", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"), "aria-label": "Ask the AI", children: _jsx(Sparkles, { className: "size-4" }) }), _jsx(ChatLauncherBadgeSlot, {})] })), isOpen && (_jsxs("div", { ref: panelRef, className: cn("fixed z-50", "rounded-2xl border border-border", "bg-background shadow-2xl", "flex flex-col overflow-hidden", "w-95 h-150"), style: dragPos
                     ? { left: dragPos.x, top: dragPos.y }
-                    : { left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }, children: [_jsxs("div", { className: cn("flex items-center justify-between px-4 py-2.5 border-b border-border shrink-0", "cursor-grab active:cursor-grabbing select-none"), style: { touchAction: "none" }, onPointerDown: onHeaderPointerDown, onPointerMove: onHeaderPointerMove, onPointerUp: onHeaderPointerUp, onLostPointerCapture: onHeaderLostPointerCapture, children: [_jsxs("div", { className: "flex flex-col min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-sm", children: [_jsx(MessageSquare, { className: "size-3.5 text-primary shrink-0" }), _jsx("span", { className: "font-semibold text-foreground truncate", children: pageLabel })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: threadActive ? "Active thread" : "New conversation" })] }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsx(TooltipIconButton, { tooltip: "New Thread", size: "icon", className: "size-7", onClick: startNewThread, children: _jsx(SquarePen, { className: "size-3.5" }) }), _jsx(TooltipIconButton, { tooltip: "Expand chat", size: "icon", className: "size-7", onClick: expandChat, children: _jsx(Maximize2, { className: "size-3.5" }) }), _jsx(TooltipIconButton, { tooltip: "Close", size: "icon", className: "size-7", onClick: handleClose, children: _jsx(X, { className: "size-4" }) })] })] }), _jsxs(ThreadPrimitive.Root, { className: "flex flex-col flex-1 overflow-hidden", children: [_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsxs(ThreadPrimitive.Viewport, { className: "absolute inset-0 overflow-y-auto", children: [_jsx(ThreadPrimitive.Empty, { children: _jsx("div", { className: "flex h-full items-center justify-center p-4", children: _jsx("p", { className: "text-sm text-muted-foreground text-center", children: "Ask the agent about this page" }) }) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "px-4 pt-4", children: [_jsx(ThreadPrimitive.Messages, { components: {
+                    : { left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }, children: [_jsxs("div", { className: cn("flex items-center justify-between px-4 py-2.5 border-b border-border shrink-0", "cursor-grab active:cursor-grabbing select-none"), style: { touchAction: "none" }, onPointerDown: onHeaderPointerDown, onPointerMove: onHeaderPointerMove, onPointerUp: onHeaderPointerUp, onLostPointerCapture: onHeaderLostPointerCapture, children: [_jsxs("div", { className: "flex flex-col min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1.5 text-sm", children: [_jsx(Sparkles, { className: "size-3.5 text-primary shrink-0" }), _jsx("span", { className: "font-semibold text-foreground truncate", children: pageLabel })] }), _jsx("span", { className: "text-xs text-muted-foreground", children: threadActive ? "Active thread" : "New conversation" })] }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsx(TooltipIconButton, { tooltip: "New Thread", size: "icon", className: "size-7", onClick: startNewThread, children: _jsx(SquarePen, { className: "size-3.5" }) }), _jsx(TooltipIconButton, { tooltip: "Expand chat", size: "icon", className: "size-7", onClick: expandChat, children: _jsx(Maximize2, { className: "size-3.5" }) }), _jsx(TooltipIconButton, { tooltip: "Close", size: "icon", className: "size-7", onClick: handleClose, children: _jsx(X, { className: "size-4" }) })] })] }), _jsxs(ThreadPrimitive.Root, { className: "flex flex-col flex-1 overflow-hidden", children: [_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsxs(ThreadPrimitive.Viewport, { className: "absolute inset-0 overflow-y-auto", children: [_jsx(ThreadPrimitive.Empty, { children: _jsx("div", { className: "flex h-full items-center justify-center p-4", children: _jsx("p", { className: "text-sm text-muted-foreground text-center", children: "Ask the agent about this page" }) }) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "px-4 pt-4", children: [_jsx(ThreadPrimitive.Messages, { components: {
                                                                 UserMessage: BubbleUserMessage,
                                                                 AssistantMessage: BubbleAssistantMessage,
                                                             } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsx(BubbleScrollToBottomButton, {}) })] }), _jsxs("div", { className: "shrink-0 border-t border-border", children: [_jsx(ChatComposerBannerSlot, {}), _jsx("div", { className: "px-3 py-3", children: _jsxs(ComposerPrimitive.Root, { className: cn("flex flex-col gap-1", "rounded-2xl border border-input", "bg-background shadow-sm", "px-3 py-2", "focus-within:border-primary/50", "transition-all duration-200"), children: [_jsx(ComposerSubmitBridge, {}), _jsx(ComposerContextBadges, {}), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("div", { className: "flex items-center -space-x-1 shrink-0", children: [_jsx(ComposerPrimitive.AddAttachment, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Attach file", size: "icon", className: "size-7 shrink-0", children: _jsx(Paperclip, { className: "size-3.5" }) }) }), _jsx(ContextPins, { compact: true })] }), _jsx(ComposerPrimitive.Input, { autoFocus: true, placeholder: "Message...", rows: 1, className: cn("flex-1 bg-transparent", "py-1 text-sm", "text-foreground outline-none", "placeholder:text-muted-foreground", "resize-none max-h-20") }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(ComposerPrimitive.Cancel, { asChild: true, children: _jsx(Button, { variant: "secondary", size: "icon", className: "rounded-full size-8 shrink-0", "aria-label": "Stop", children: _jsx(Square, { className: "size-3" }) }) }) }), _jsx(ThreadPrimitive.If, { running: false, children: _jsx(ComposerPrimitive.Send, { asChild: true, children: _jsx(Button, { size: "icon", className: "rounded-full size-8 shrink-0", "aria-label": "Send", children: _jsx(ArrowUp, { className: "size-4" }) }) }) })] })] }) })] })] })] }))] }));

package/dist/index.d.ts

@@ -65,7 +65,8 @@ export type { NavItem, NavItemAction, NavItemDnd, NavGroup, NavGroupCreateAction
 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 { FileAttachmentAdapter, resolveMimeType } from "./lib/attachment-adapter.js";
+export { registerAttachmentAdapter, useAttachmentAdapterStore, } from "./lib/attachment-registry.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

@@ -73,7 +73,8 @@ export { usePageTools } from "./lib/use-page-tools.js";
 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 { FileAttachmentAdapter, resolveMimeType } from "./lib/attachment-adapter.js";
+export { registerAttachmentAdapter, useAttachmentAdapterStore, } from "./lib/attachment-registry.js";
 export { ReasoningPart, ReasoningMessagePartComponent } from "./components/reasoning-part.js";
 export { ReasoningEffortPicker } from "./components/reasoning-effort-picker.js";
 // --- Auth ---

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

@@ -20,6 +20,10 @@
  * lastspace's `_elide_inline_media` for the pattern.
  */
 import type { AttachmentAdapter, PendingAttachment, CompleteAttachment, Attachment } from "@assistant-ui/react";
+/** Resolve a file's MIME type, falling back to extension inference when
+ * the browser reports an empty ``file.type`` (common for Office files).
+ * Exported for host attachment adapters that need the same resolution. */
+export declare function resolveMimeType(file: File): string;
 export interface FileAttachmentAdapterOptions {
     /**
      * How non-image documents (PDF, DOCX) are sent.

package/dist/lib/attachment-adapter.js

@@ -20,17 +20,22 @@
  * 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) */
+/** Infer MIME type from extension when browser reports empty file.type (common for Office files) */
 const EXTENSION_MIME = {
     ".pdf": "application/pdf",
     ".docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+    ".xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+    ".pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
     ".png": "image/png",
     ".jpg": "image/jpeg",
     ".jpeg": "image/jpeg",
     ".gif": "image/gif",
     ".webp": "image/webp",
 };
-function resolveMimeType(file) {
+/** Resolve a file's MIME type, falling back to extension inference when
+ * the browser reports an empty ``file.type`` (common for Office files).
+ * Exported for host attachment adapters that need the same resolution. */
+export function resolveMimeType(file) {
     if (file.type)
         return file.type;
     const ext = file.name.slice(file.name.lastIndexOf(".")).toLowerCase();

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

@@ -0,0 +1,34 @@
+/**
+ * Attachment adapter registry — host-injectable composer attachment handling.
+ *
+ * The shell's AG-UI runtime builds its attachment adapter internally
+ * (``FileAttachmentAdapter``), which reads files client-side and inlines
+ * them as base64 message parts. Hosts sometimes need a different
+ * strategy — e.g. uploading Office documents into a backend workspace
+ * and handing the agent a reference instead of bytes. Threading an
+ * adapter through every chat mount would couple the shell to feature
+ * modules, so this is a tiny registry instead — the exact pattern of
+ * ``registerChatSlots``: a module calls :func:`registerAttachmentAdapter`
+ * once (import time or ``useInit``) and the runtime provider picks it up
+ * on its next mount.
+ *
+ * Compose, don't replace: hosts typically wrap their special-case
+ * adapter together with the default in assistant-ui's
+ * ``CompositeAttachmentAdapter`` so images/PDF keep the stock inline
+ * behavior while selected types get the custom path. The composite also
+ * closes the drag-and-drop loophole — its ``add()`` rejects files no
+ * member adapter accepts, whereas drops bypass the file picker's
+ * ``accept`` filter.
+ */
+import type { AttachmentAdapter } from "@assistant-ui/react";
+interface AttachmentAdapterState {
+    adapter: AttachmentAdapter | null;
+}
+export declare const useAttachmentAdapterStore: import("zustand").UseBoundStore<import("zustand").StoreApi<AttachmentAdapterState>>;
+/**
+ * Register the composer attachment adapter. ``null`` restores the
+ * shell's default (``FileAttachmentAdapter``). Later calls overwrite
+ * earlier ones — last registration wins.
+ */
+export declare function registerAttachmentAdapter(adapter: AttachmentAdapter | null): void;
+export {};

package/dist/lib/attachment-registry.js

@@ -0,0 +1,34 @@
+/**
+ * Attachment adapter registry — host-injectable composer attachment handling.
+ *
+ * The shell's AG-UI runtime builds its attachment adapter internally
+ * (``FileAttachmentAdapter``), which reads files client-side and inlines
+ * them as base64 message parts. Hosts sometimes need a different
+ * strategy — e.g. uploading Office documents into a backend workspace
+ * and handing the agent a reference instead of bytes. Threading an
+ * adapter through every chat mount would couple the shell to feature
+ * modules, so this is a tiny registry instead — the exact pattern of
+ * ``registerChatSlots``: a module calls :func:`registerAttachmentAdapter`
+ * once (import time or ``useInit``) and the runtime provider picks it up
+ * on its next mount.
+ *
+ * Compose, don't replace: hosts typically wrap their special-case
+ * adapter together with the default in assistant-ui's
+ * ``CompositeAttachmentAdapter`` so images/PDF keep the stock inline
+ * behavior while selected types get the custom path. The composite also
+ * closes the drag-and-drop loophole — its ``add()`` rejects files no
+ * member adapter accepts, whereas drops bypass the file picker's
+ * ``accept`` filter.
+ */
+import { create } from "zustand";
+export const useAttachmentAdapterStore = create(() => ({
+    adapter: null,
+}));
+/**
+ * Register the composer attachment adapter. ``null`` restores the
+ * shell's default (``FileAttachmentAdapter``). Later calls overwrite
+ * earlier ones — last registration wins.
+ */
+export function registerAttachmentAdapter(adapter) {
+    useAttachmentAdapterStore.setState({ adapter });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.11.1",
+  "version": "0.12.1",
   "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": [
@@ -70,8 +70,8 @@
     "tailwind-merge": "^3.5.0",
     "react-markdown": "^10.0.0",
     "remark-gfm": "^4.0.0",
-    "@iloveagents/foundry-agent": "^0.11.1",
-    "@iloveagents/foundry-web-primitives": "^0.11.1"
+    "@iloveagents/foundry-agent": "^0.12.1",
+    "@iloveagents/foundry-web-primitives": "^0.12.1"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",