@iloveagents/foundry-web-ui 0.3.1 → 0.5.0

package/README.md

@@ -1,6 +1,12 @@
 # @iloveagents/foundry-web-ui
 
-React UI core for the AG-UI protocol agent starter. Provides hooks, stores, extension-point registries, the AG-UI adapter, ChatPanel, sidebar, and layout components. Depends on `@iloveagents/foundry-web-primitives` for leaf primitives (Button, Input, Field, Checkbox, Textarea, `cn`).
+React UI core for Foundry UI apps.
+
+`web-ui` is the package that renders the actual agent experience: chat UI,
+composer, AG-UI adapter, message rendering, tool-call cards, side panels,
+sidebar, theme runtime, context pins, attachment handling, and UI stores. It
+depends on `@iloveagents/foundry-web-primitives` for leaf primitives (Button,
+Input, Field, Checkbox, Textarea, `cn`).
 
 ## Install
 
@@ -22,11 +28,14 @@ import {
 import { cn } from "@iloveagents/foundry-web-primitives";
 ```
 
-Consumed as TypeScript source (no build step). Requires Tailwind v4 `@source` directives for both packages:
+This package publishes built ESM JavaScript and `.d.ts` declarations. Host apps
+must include Tailwind v4 `@source` directives so classes used inside package
+components are generated:
 
 ```css
-@source "../../packages/web-primitives/src";
-@source "../../packages/web-ui/src";
+@import "@iloveagents/foundry-web-ui/styles.css";
+@source "../node_modules/@iloveagents/foundry-web-primitives/dist";
+@source "../node_modules/@iloveagents/foundry-web-ui/dist";
 ```
 
 ## Extension Points

package/dist/components/ag-ui-runtime-provider.d.ts

@@ -0,0 +1,64 @@
+import type { ThreadHistoryAdapter } from "@assistant-ui/react";
+import { AGUIAdapterSDK } from "../lib/ag-ui-adapter.js";
+/**
+ * Per-mount inputs the host shell passes when it wants a chat
+ * conversation history wired to the runtime. Mirrors
+ * :type:`ChatConversationFactoryArgs` in ``foundry-web-shell`` —
+ * duplicated here (rather than imported) so the web-ui package stays
+ * independent of the shell package's dependency graph.
+ */
+export interface AGUIChatConversationFactoryArgs {
+    /** Conversation id captured from the URL (resumed chat) or undefined (fresh). */
+    urlMatch?: string;
+    /** Stable AG-UI adapter thread id — present in both cases. */
+    aguiThreadId: string;
+}
+/**
+ * Factory the consumer passes to build a :type:`ThreadHistoryAdapter`
+ * once the AG-UI adapter has minted its thread id. Called inside the
+ * keyed runtime mount; assistant-ui invokes ``load()``/``append()``
+ * via the returned adapter.
+ */
+export type AGUIHistoryAdapterFactory = (args: AGUIChatConversationFactoryArgs) => ThreadHistoryAdapter;
+interface AGUIRuntimeProviderProps {
+    children: React.ReactNode;
+    /** Custom fetch for agent requests. Handles URL rewriting + auth in production. */
+    fetchFn?: typeof fetch;
+    /**
+     * Optional stable thread id for the AG-UI adapter. When set, the
+     * agent's POST body carries this id so server-side persistence
+     * (Foundry thread, conversation row) targets the same conversation
+     * across reloads / resumes. Changing the id remounts the inner
+     * runtime — past messages from a different thread don't bleed
+     * into the new one.
+     */
+    threadId?: string;
+    /**
+     * Conversation id captured from the current URL when the user
+     * resumed an existing chat (e.g. ``/chat/<id>``), or ``undefined``
+     * for a brand-new chat. Distinct from ``threadId``: the host shell
+     * MAY set ``threadId`` from a non-URL source (a sticky active
+     * conversation, a freshly-minted UUID) so ``threadId`` alone can't
+     * tell a history adapter "we're resuming". ``urlMatch`` carries
+     * that signal verbatim into ``historyAdapterFactory`` so the
+     * adapter can decide whether to load history (resume) or
+     * initialise empty (fresh) without inferring from ``threadId``.
+     */
+    urlMatch?: string;
+    /**
+     * Factory that builds the assistant-ui ``ThreadHistoryAdapter`` for
+     * this mount. Called once after the AG-UI adapter exists so it can
+     * receive both the URL match (when resuming) and the adapter's own
+     * thread id (always set — covers fresh chats). Pass alongside
+     * ``threadId`` for resumed chats; pass without ``threadId`` to get
+     * a fresh-chat runtime that still persists.
+     */
+    historyAdapterFactory?: AGUIHistoryAdapterFactory;
+}
+interface AGUIContextValue {
+    adapter: AGUIAdapterSDK;
+    resetThread: () => void;
+}
+export declare function useAGUIAdapter(): AGUIContextValue;
+export declare function AGUIRuntimeProvider(props: AGUIRuntimeProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState, useCallback, useMemo } from "react";
+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 { ShowDocumentToolUI } from "./show-document-tool-ui.js";
+import { ClientToolExecutor } from "./client-tool-executor.js";
+const AGUIAdapterContext = createContext(null);
+export function useAGUIAdapter() {
+    const context = useContext(AGUIAdapterContext);
+    if (!context) {
+        throw new Error("useAGUIAdapter must be used within AGUIRuntimeProvider");
+    }
+    return context;
+}
+export function AGUIRuntimeProvider(props) {
+    // Splitting render across an outer wrapper + a keyed inner is the
+    // canonical React idiom for "rebuild this stateful subtree when X
+    // changes". assistant-ui's runtime is created inside useLocalRuntime
+    // and tracks its messages internally; swapping threadId or history
+    // mid-life would leave stale state. Keying the inner subtree on
+    // threadId (+ the manual reset counter) guarantees a clean runtime
+    // per conversation, matching the ChatGPT-style "click → fresh chat
+    // backed by past messages" UX.
+    const [resetKey, setResetKey] = useState(0);
+    const resetThread = useCallback(() => setResetKey((p) => p + 1), []);
+    const innerKey = `${props.threadId ?? "fresh"}:${resetKey}`;
+    return (_jsx(AGUIRuntimeInner, { ...props, resetThread: resetThread }, innerKey));
+}
+function AGUIRuntimeInner({ children, fetchFn, threadId, urlMatch, historyAdapterFactory, resetThread, }) {
+    const adapter = useMemo(() => new AGUIAdapterSDK("/api/agent", 
+    // 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(), []);
+    // 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 +
+    // fresh history adapter together, so resumed chats hydrate from the
+    // right conversation and fresh chats persist under their assistant-
+    // ui-minted UUID.
+    const historyAdapter = useMemo(() => {
+        if (!historyAdapterFactory)
+            return undefined;
+        return historyAdapterFactory({
+            // ``urlMatch`` is the URL-derived resume signal (undefined for
+            // fresh chats). ``aguiThreadId`` is always defined — the AG-UI
+            // adapter mints it on construction. The factory uses ``urlMatch``
+            // to decide "load history" vs "initialise empty", and
+            // ``aguiThreadId`` to identify the row to write into.
+            urlMatch,
+            aguiThreadId: adapter.threadId,
+        });
+        // adapter is stable for the life of this inner mount (keyed remount
+        // covers the threadId change case), so it's OK to depend on the
+        // factory + urlMatch here.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [historyAdapterFactory, urlMatch]);
+    const runtime = useLocalRuntime(adapter, {
+        adapters: {
+            attachments: attachmentAdapter,
+            // history is optional — when undefined, the runtime acts as a
+            // pure in-memory thread (the original behaviour). When provided,
+            // assistant-ui calls .load() on mount to seed past messages and
+            // .append() after every turn.
+            ...(historyAdapter ? { history: historyAdapter } : {}),
+        },
+    });
+    return (_jsx(AGUIAdapterContext.Provider, { value: { adapter, resetThread }, children: _jsx(AssistantRuntimeProvider, { runtime: runtime, children: _jsxs(TooltipProvider, { children: [_jsx(ShowDocumentToolUI, {}), _jsx(ClientToolExecutor, {}), children] }) }) }));
+}

package/dist/components/app-brand.d.ts

@@ -0,0 +1,6 @@
+export declare function AppBrand({ showName, className, iconClassName, labelClassName, }: {
+    showName?: boolean;
+    className?: string;
+    iconClassName?: string;
+    labelClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/app-brand.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Layers3 } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { useThemeRuntime } from "./theme-runtime-provider.js";
+export function AppBrand({ showName = true, className, iconClassName, labelClassName, }) {
+    const runtime = useThemeRuntime();
+    const brandName = runtime.branding.appName || "Foundry UI";
+    const logoUrl = runtime.mode === "dark"
+        ? runtime.branding.darkLogoUrl || runtime.branding.logoUrl
+        : runtime.branding.logoUrl || runtime.branding.darkLogoUrl;
+    const shouldShowName = showName && !logoUrl;
+    return (_jsxs("span", { className: cn("flex items-center gap-2", className), children: [logoUrl ? (_jsx("img", { src: logoUrl, alt: brandName, className: cn("h-5 w-auto max-w-[7rem] shrink-0 object-contain", iconClassName) })) : (_jsx(Layers3, { className: cn("size-5 shrink-0 text-primary", iconClassName) })), shouldShowName && _jsx("span", { className: cn("truncate", labelClassName), children: brandName })] }));
+}

package/dist/components/assistant-chat.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Default starter prompts shown on empty state. Override per-app by passing
+ * a `starterSuggestions` prop to `<ChatContent>`. An empty array (`[]`)
+ * suppresses the suggestion buttons entirely.
+ */
+export declare const DEFAULT_STARTER_SUGGESTIONS: string[];
+export interface ChatContentProps {
+    /**
+     * Starter prompts shown when the thread is empty. Defaults to
+     * `DEFAULT_STARTER_SUGGESTIONS`. Pass an empty array to hide the
+     * suggestion buttons entirely. Customer apps (e.g. ANDRITZ Contracts)
+     * can pass a workspace-aware list derived from app context.
+     */
+    starterSuggestions?: string[];
+    /**
+     * Show the page pin button in the composer. Defaults to false so generic
+     * starter apps only show attachment, input, and send controls. Apps with
+     * page-aware workflows can opt in explicitly.
+     */
+    showPinButton?: boolean;
+}
+/**
+ * Reusable chat content — used by ChatPage and ChatBubble.
+ * Renders inside a ThreadPrimitive.Root context.
+ */
+export declare function ChatContent({ starterSuggestions, showPinButton, }?: ChatContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/assistant-chat.js

@@ -0,0 +1,94 @@
+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 { 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";
+import { TooltipIconButton } from "./tooltip-icon-button.js";
+import { userAttachmentComponents, composerAttachmentComponents } from "./chat-attachments.js";
+import { SentContextBadges, ComposerContextBadges } from "./context-badges.js";
+import { ContextPins } from "./context-bar.js";
+import { ComposerSubmitBridge } from "./composer-submit-bridge.js";
+import { useChatBubbleStore } from "../lib/chat-bubble-store.js";
+import { MarkdownText } from "./markdown-text.js";
+import { ToolFallback } from "./tool-fallback.js";
+import { LoadingIndicator, LoadingBar } from "./loading-indicator.js";
+import { MessageTimestamp } from "./message-timestamp.js";
+import { MessageError } from "./message-error.js";
+const BranchPicker = () => (_jsxs(BranchPickerPrimitive.Root, { hideWhenSingleBranch: true, className: "inline-flex items-center gap-1 text-xs", children: [_jsx(BranchPickerPrimitive.Previous, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Previous", size: "icon", children: _jsx(ChevronLeft, { className: "size-4" }) }) }), _jsxs("span", { className: "text-muted-foreground", children: [_jsx(BranchPickerPrimitive.Number, {}), " / ", _jsx(BranchPickerPrimitive.Count, {})] }), _jsx(BranchPickerPrimitive.Next, { asChild: true, children: _jsx(TooltipIconButton, { tooltip: "Next", size: "icon", children: _jsx(ChevronRight, { className: "size-4" }) }) })] }));
+const UserMessage = () => {
+    const messageId = useAuiState((s) => s.message.id);
+    return (_jsx(MessagePrimitive.Root, { className: "w-full mb-2 group", children: _jsxs("div", { className: "flex flex-col items-end gap-1", children: [_jsx(MessagePrimitive.Attachments, { components: userAttachmentComponents }), _jsx(SentContextBadges, { messageId: messageId }), _jsx("div", { className: cn("max-w-[80%]", "bg-muted rounded-2xl", "px-4 py-3", "text-foreground"), children: _jsx(MessagePrimitive.Content, {}) }), _jsxs("div", { className: "flex h-8 items-center justify-end gap-2 pr-2", children: [_jsx(MessageTimestamp, {}), _jsx(BranchPicker, {}), _jsx("div", { className: "flex h-8 w-10 items-center justify-end", children: _jsx(UserActionBar, {}) })] })] }) }));
+};
+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,
+                        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" }) }) }) })] }));
+};
+/**
+ * Default starter prompts shown on empty state. Override per-app by passing
+ * a `starterSuggestions` prop to `<ChatContent>`. An empty array (`[]`)
+ * suppresses the suggestion buttons entirely.
+ */
+export const DEFAULT_STARTER_SUGGESTIONS = [
+    "Say hello world",
+    "What tools can you use?",
+    "Help me get started",
+];
+const ScrollToBottomButton = () => {
+    const isAtBottom = useThreadViewport((s) => s.isAtBottom);
+    const scrollToBottom = useThreadViewport((s) => s.scrollToBottom);
+    if (isAtBottom)
+        return null;
+    return (_jsx(Button, { variant: "outline", size: "icon", className: "absolute bottom-4 left-1/2 -translate-x-1/2 z-10 rounded-full shadow-md", onClick: () => scrollToBottom({ behavior: "smooth" }), children: _jsx(ChevronDown, { className: "size-4" }) }));
+};
+const DropZone = ({ children }) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const dragCounter = useRef(0);
+    const composerRuntime = useComposerRuntime();
+    const handleDragEnter = useCallback((e) => {
+        e.preventDefault();
+        dragCounter.current++;
+        if (dragCounter.current === 1)
+            setIsDragging(true);
+    }, []);
+    const handleDragLeave = useCallback((e) => {
+        e.preventDefault();
+        dragCounter.current--;
+        if (dragCounter.current === 0)
+            setIsDragging(false);
+    }, []);
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+    }, []);
+    const handleDrop = useCallback(async (e) => {
+        e.preventDefault();
+        dragCounter.current = 0;
+        setIsDragging(false);
+        const files = Array.from(e.dataTransfer.files);
+        for (const file of files) {
+            await composerRuntime.addAttachment(file);
+        }
+    }, [composerRuntime]);
+    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" }) }))] }));
+};
+/**
+ * Reusable chat content — used by ChatPage and ChatBubble.
+ * Renders inside a ThreadPrimitive.Root context.
+ */
+export function ChatContent({ starterSuggestions = DEFAULT_STARTER_SUGGESTIONS, showPinButton = false, } = {}) {
+    const isExpanded = useChatBubbleStore((s) => s.isExpanded);
+    const collapseChat = useChatBubbleStore((s) => s.collapse);
+    const showPagePanel = useChatBubbleStore((s) => s.showPagePanel);
+    const togglePagePanel = useChatBubbleStore((s) => s.togglePagePanel);
+    return (_jsxs(ThreadPrimitive.Root, { className: cn("flex flex-col flex-1", "bg-background text-foreground", "overflow-hidden"), children: [isExpanded && (_jsxs("div", { className: "shrink-0 flex items-center justify-between px-4 py-2 border-b border-border", children: [_jsxs("span", { className: "text-sm font-medium text-foreground flex items-center gap-2", children: [_jsx(Bot, { className: "size-4 text-primary" }), "Chat"] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(TooltipIconButton, { tooltip: showPagePanel ? "Hide page panel" : "Show page panel", size: "icon", onClick: togglePagePanel, className: "hidden xl:inline-flex", children: showPagePanel ? (_jsx(PanelRightClose, { className: "size-4" })) : (_jsx(PanelRightOpen, { className: "size-4" })) }), _jsx(TooltipIconButton, { tooltip: "Minimize to bubble", size: "icon", onClick: collapseChat, children: _jsx(Minimize2, { className: "size-4" }) })] })] })), _jsxs(DropZone, { children: [_jsxs("div", { className: "relative flex-1 overflow-hidden", children: [_jsxs(ThreadPrimitive.Viewport, { className: "absolute inset-0 overflow-y-auto bg-background", children: [_jsx(ThreadPrimitive.Empty, { children: _jsxs("div", { className: cn("flex min-h-full flex-col", "items-center justify-center", "px-4"), children: [_jsx(Bot, { className: "size-16 mb-6 text-primary/70" }), _jsx("h1", { className: "text-[2rem] font-normal text-foreground text-center mb-6", children: "How can I help you today?" }), starterSuggestions.length > 0 && (_jsx("div", { className: "flex flex-wrap justify-center gap-2 max-w-lg", children: starterSuggestions.map((prompt) => (_jsx(ThreadPrimitive.Suggestion, { prompt: prompt, send: true, asChild: true, children: _jsx(Button, { variant: "outline", className: "text-sm", children: prompt }) }, prompt))) }))] }) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "mx-auto max-w-3xl px-4 pt-8", children: [_jsx(ThreadPrimitive.Messages, { components: {
+                                                        UserMessage,
+                                                        EditComposer,
+                                                        AssistantMessage,
+                                                    } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsx(ScrollToBottomButton, {}) })] }), _jsxs("div", { className: "shrink-0 bg-background", children: [_jsx(ThreadPrimitive.If, { running: false, children: _jsx("div", { className: "border-t border-border" }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingBar, {}) }), _jsx("div", { className: "mx-auto max-w-3xl px-4 py-4", children: _jsxs(ComposerPrimitive.Root, { className: cn("flex flex-col gap-2", "rounded-3xl border border-input", "bg-background shadow-sm", "px-4 py-2", "focus-within:border-primary/50 focus-within:shadow-md", "transition-all duration-300"), children: [_jsx(ComposerSubmitBridge, {}), _jsx(ComposerContextBadges, {}), _jsx(ComposerPrimitive.Attachments, { components: composerAttachmentComponents }), _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", variant: "ghost", className: "shrink-0", children: _jsx(Paperclip, { className: "size-5" }) }) }), _jsx(ContextPins, { showPinButton: showPinButton })] }), _jsx(ComposerPrimitive.Input, { autoFocus: true, placeholder: "Message Assistant...", rows: 1, className: cn("flex-1 bg-transparent", "py-2 text-base", "text-foreground outline-none", "placeholder:text-muted-foreground", "resize-none max-h-32") }), _jsx(ComposerActionButton, {})] })] }) })] })] })] }));
+}

package/dist/components/chat-attachments.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Attachment rendering components for chat messages and composer.
+ *
+ * Following the official assistant-ui pattern, attachment components
+ * live in a separate file from the main thread components.
+ *
+ * @see https://www.assistant-ui.com/ - assistant-ui Documentation
+ */
+import { type FC } from "react";
+/** Renders a pending file attachment chip in the composer with a remove button. */
+export declare const ComposerAttachment: FC;
+/** Renders a file badge on sent user messages. */
+export declare const UserMessageAttachment: FC;
+/** Component map for MessagePrimitive.Attachments on user messages. */
+export declare const userAttachmentComponents: {
+    Document: FC;
+    Image: FC;
+    File: FC;
+};
+/** Component map for ComposerPrimitive.Attachments in the composer. */
+export declare const composerAttachmentComponents: {
+    Document: FC;
+    Image: FC;
+    File: FC;
+};

package/dist/components/chat-attachments.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AttachmentPrimitive } from "@assistant-ui/react";
+import { FileText, X } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+/** Renders a pending file attachment chip in the composer with a remove button. */
+export const ComposerAttachment = () => (_jsxs(AttachmentPrimitive.Root, { className: cn("inline-flex items-center gap-2 max-w-[250px]", "rounded-lg border border-border bg-muted/50", "px-3 py-2"), children: [_jsx(FileText, { className: "size-4 text-muted-foreground flex-shrink-0" }), _jsx("span", { className: "text-sm truncate", children: _jsx(AttachmentPrimitive.Name, {}) }), _jsx(AttachmentPrimitive.Remove, { asChild: true, children: _jsx("button", { type: "button", className: "p-0.5 rounded hover:bg-muted flex-shrink-0", "aria-label": "Remove attachment", children: _jsx(X, { className: "size-3.5" }) }) })] }));
+/** Renders a file badge on sent user messages. */
+export const UserMessageAttachment = () => (_jsxs(AttachmentPrimitive.Root, { className: cn("inline-flex items-center gap-2 max-w-[250px]", "rounded-lg border border-border/50 bg-muted/30", "px-3 py-1.5"), children: [_jsx(FileText, { className: "size-3.5 text-muted-foreground flex-shrink-0" }), _jsx("span", { className: "text-xs truncate", children: _jsx(AttachmentPrimitive.Name, {}) })] }));
+/** Component map for MessagePrimitive.Attachments on user messages. */
+export const userAttachmentComponents = {
+    Document: UserMessageAttachment,
+    Image: UserMessageAttachment,
+    File: UserMessageAttachment,
+};
+/** Component map for ComposerPrimitive.Attachments in the composer. */
+export const composerAttachmentComponents = {
+    Document: ComposerAttachment,
+    Image: ComposerAttachment,
+    File: ComposerAttachment,
+};

package/dist/components/chat-bubble.d.ts

@@ -0,0 +1 @@
+export declare function ChatBubble(): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/chat-bubble.js

@@ -0,0 +1,105 @@
+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 { cn } from "@iloveagents/foundry-web-primitives";
+import { Button } from "@iloveagents/foundry-web-primitives";
+import { TooltipIconButton } from "./tooltip-icon-button.js";
+import { ContextPins } from "./context-bar.js";
+import { ComposerContextBadges, SentContextBadges } from "./context-badges.js";
+import { ComposerSubmitBridge } from "./composer-submit-bridge.js";
+import { MarkdownText } from "./markdown-text.js";
+import { LoadingIndicator } from "./loading-indicator.js";
+import { MessageTimestamp } from "./message-timestamp.js";
+import { MessageError } from "./message-error.js";
+import { useAppStore } from "../lib/app-store.js";
+import { useChatBubbleStore } from "../lib/chat-bubble-store.js";
+import { useNewConversation } from "../lib/use-new-conversation.js";
+import { RAIL_WIDTH, useSidebarStore } from "../lib/sidebar-store.js";
+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,
+                    } }) }), _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() {
+    const messageId = useAuiState((s) => s.message.id);
+    return (_jsx(MessagePrimitive.Root, { className: "w-full mb-2", children: _jsxs("div", { className: "flex flex-col items-end gap-1", children: [_jsx(SentContextBadges, { messageId: messageId }), _jsx("div", { className: "max-w-[85%] bg-muted rounded-2xl px-3 py-2 text-sm text-foreground", children: _jsx(MessagePrimitive.Content, {}) })] }) }));
+}
+function BubbleScrollToBottomButton() {
+    const isAtBottom = useThreadViewport((s) => s.isAtBottom);
+    const scrollToBottom = useThreadViewport((s) => s.scrollToBottom);
+    if (isAtBottom)
+        return null;
+    return (_jsx(Button, { variant: "outline", size: "icon", className: "absolute bottom-2 left-1/2 -translate-x-1/2 z-10 rounded-full shadow-md size-7", onClick: () => scrollToBottom({ behavior: "smooth" }), children: _jsx(ChevronDown, { className: "size-3" }) }));
+}
+export function ChatBubble() {
+    const isOpen = useChatBubbleStore((s) => s.isOpen);
+    const isExpanded = useChatBubbleStore((s) => s.isExpanded);
+    const openBubble = useChatBubbleStore((s) => s.open);
+    const closeBubble = useChatBubbleStore((s) => s.close);
+    const expandChat = useChatBubbleStore((s) => s.expand);
+    const startNewThread = useNewConversation({ navigateToChat: false, preserveNavigation: true });
+    const isSidebarOpen = useSidebarStore((s) => s.isOpen);
+    const sidebarWidth = useSidebarStore((s) => s.width);
+    const pageLabel = useAppStore((s) => s.navContext.label);
+    const currentPage = useAppStore((s) => s.currentPage);
+    const threadActive = useAppStore((s) => s.threadActive);
+    // Draggable position: null = use default CSS anchored with equal left/bottom inset.
+    const [dragPos, setDragPos] = useState(null);
+    const dragStart = useRef(null);
+    const panelRef = useRef(null);
+    // Close and reset drag position so it reopens at the default spot
+    const handleClose = () => {
+        setDragPos(null);
+        closeBubble();
+    };
+    const onHeaderPointerDown = (e) => {
+        // Don't start drag when clicking header buttons
+        if (e.target.closest("button"))
+            return;
+        const panel = panelRef.current;
+        if (!panel)
+            return;
+        e.preventDefault();
+        const rect = panel.getBoundingClientRect();
+        dragStart.current = { mx: e.clientX, my: e.clientY, px: rect.left, py: rect.top };
+        // Capture the initial position so first pointer-move works correctly
+        setDragPos({ x: rect.left, y: rect.top });
+        e.currentTarget.setPointerCapture(e.pointerId);
+    };
+    const onHeaderPointerMove = (e) => {
+        if (!dragStart.current)
+            return;
+        const panel = panelRef.current;
+        const panelW = panel?.offsetWidth ?? 380;
+        const panelH = panel?.offsetHeight ?? 600;
+        const dx = e.clientX - dragStart.current.mx;
+        const dy = e.clientY - dragStart.current.my;
+        // Clamp within viewport so the panel can't be dragged fully off-screen
+        const x = Math.max(0, Math.min(window.innerWidth - panelW, dragStart.current.px + dx));
+        const y = Math.max(0, Math.min(window.innerHeight - panelH, dragStart.current.py + dy));
+        setDragPos({ x, y });
+    };
+    const onHeaderPointerUp = (e) => {
+        if (!dragStart.current)
+            return;
+        dragStart.current = null;
+        e.currentTarget.releasePointerCapture(e.pointerId);
+    };
+    const onHeaderLostPointerCapture = () => {
+        dragStart.current = null;
+    };
+    // Hide bubble on chat page (already full-screen) and in expanded mode
+    if (currentPage === "/" || isExpanded)
+        return null;
+    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 && (_jsx("button", { type: "button", onClick: openBubble, className: cn("fixed bottom-4 z-50", "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"), style: { left: CHAT_BUBBLE_INSET, bottom: CHAT_BUBBLE_INSET }, "aria-label": "Open chat", children: _jsx(MessageSquare, { className: "size-4" }) })), 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: {
+                                                                UserMessage: BubbleUserMessage,
+                                                                AssistantMessage: BubbleAssistantMessage,
+                                                            } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsx(BubbleScrollToBottomButton, {}) })] }), _jsx("div", { className: "shrink-0 border-t border-border 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/components/chat-header.d.ts

@@ -0,0 +1,2 @@
+import { type FC } from "react";
+export declare const ChatHeader: FC;

package/dist/components/chat-header.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link } from "react-router";
+import { SquarePen, Menu } from "lucide-react";
+import { cn } from "@iloveagents/foundry-web-primitives";
+import { AppBrand } from "./app-brand.js";
+import { TooltipIconButton } from "./tooltip-icon-button.js";
+import { ThemeToggle } from "./theme-toggle.js";
+import { UserMenu } from "./user-menu.js";
+import { useSidebarStore } from "../lib/sidebar-store.js";
+import { useNewConversation } from "../lib/use-new-conversation.js";
+export const ChatHeader = () => {
+    const handleNewConversation = useNewConversation();
+    const toggleMobile = useSidebarStore((s) => s.toggleMobile);
+    const isSidebarOpen = useSidebarStore((s) => s.isOpen);
+    return (_jsx("div", { className: cn("shrink-0", "bg-background border-b border-border"), children: _jsxs("div", { className: "px-4 py-3 flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TooltipIconButton, { tooltip: "Open sidebar", onClick: toggleMobile, className: "md:hidden", children: _jsx(Menu, { className: "size-5" }) }), _jsx(Link, { to: "/", className: cn("flex items-center gap-2.5 hover:opacity-80 transition-opacity", isSidebarOpen && "md:hidden"), children: _jsx(AppBrand, { labelClassName: "text-sm font-semibold text-foreground" }) })] }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(ThemeToggle, {}), _jsx(TooltipIconButton, { tooltip: "New Thread", size: "icon", onClick: handleNewConversation, children: _jsx(SquarePen, { className: "size-4 text-primary" }) }), _jsx(UserMenu, {})] })] }) }));
+};

package/dist/components/client-tool-executor.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Client Tool Executor — registers custom UIs for client-side tools.
+ *
+ * Tool execution happens in the AGUIRunner (client-side tools intercepted at
+ * `tool-call-end`). This component only registers the UI rendering and
+ * injects the navigate function (which requires React Router context).
+ *
+ * Modern assistant-ui v0.12 pattern: each tool UI is a top-level
+ * `makeAssistantToolUI(...)` component. We mount them as children of
+ * `<ClientToolExecutor>` inside the AssistantRuntimeProvider tree.
+ */
+export declare function ClientToolExecutor(): import("react/jsx-runtime").JSX.Element;