@iloveagents/foundry-web-ui 0.32.0 → 0.32.2

package/dist/components/assistant-chat.js

@@ -11,7 +11,7 @@ import { SentContextBadges } from "./context-badges.js";
 import { ComposerAddMenu } from "./composer-add-menu.js";
 import { ChatContext } from "./chat-context.js";
 import { ComposerSubmitBridge } from "./composer-submit-bridge.js";
-import { ChatComposerActionsSlot, ChatComposerBannerSlot, ChatHomeStartersSlot, useChatThreadSurface, useComposerActionsOwnSend, } from "./chat-slots.js";
+import { ChatComposerActionsSlot, ChatComposerBannerSlot, ChatHomeStartersSlot, useChatThreadSurface, useChatSlotsStore, useComposerActionsOwnSend, } from "./chat-slots.js";
 import { useChatBubbleStore } from "../lib/chat-bubble-store.js";
 import { ReasoningEffortPicker } from "./reasoning-effort-picker.js";
 import { ChatMessageParts } from "./chat-message-parts.js";
@@ -129,11 +129,12 @@ export const DEFAULT_COMPOSER_PLACEHOLDER = "Do anything";
  */
 export function ChatContent({ centerComposer = false, composerIntro, composerFooter, compactComposer = false, emptyState, starterSuggestions = DEFAULT_STARTER_SUGGESTIONS, placeholder = DEFAULT_COMPOSER_PLACEHOLDER, } = {}) {
     const ThreadSurface = useChatThreadSurface();
+    const hideComposer = useChatSlotsStore((s) => !!s.threadSurface && s.threadSurfaceHidesComposer);
     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, { centered: centerComposer, children: [_jsxs("div", { className: "relative flex-1 overflow-hidden", style: centerComposer && !ThreadSurface ? { display: "none" } : undefined, children: [ThreadSurface && (
+    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, { centered: centerComposer && !ThreadSurface, children: [_jsxs("div", { className: "relative flex-1 overflow-hidden", style: centerComposer && !ThreadSurface ? { display: "none" } : undefined, children: [ThreadSurface && (
                             // `overflow-hidden`, not scroll: a surface owns its own layout,
                             // and a full-bleed one (an avatar cropped to the frame) must be
                             // able to reach the edges rather than sit in a scroll box.
@@ -141,7 +142,7 @@ export function ChatContent({ centerComposer = false, composerIntro, composerFoo
                                                         UserMessage,
                                                         EditComposer,
                                                         AssistantMessage,
-                                                    } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), !ThreadSurface && (_jsx(ThreadPrimitive.If, { empty: false, children: _jsx(ScrollToBottomButton, {}) }))] }), _jsxs("div", { className: "shrink-0 bg-background", children: [composerIntro && _jsx("div", { className: "mx-auto max-w-3xl px-4 pt-4", children: composerIntro }), _jsx(ChatComposerBannerSlot, {}), _jsx(ThreadPrimitive.If, { running: false, children: _jsx("div", { "data-chat-composer-divider": true, className: "border-t border-border" }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingBar, {}) }), _jsxs("div", { className: "mx-auto max-w-3xl px-4 py-4", children: [_jsx(ChatContext, {}), _jsxs(ComposerPrimitive.Root, { style: compactComposer ? { borderRadius: 16 } : undefined, className: cn(
+                                                    } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), !ThreadSurface && (_jsx(ThreadPrimitive.If, { empty: false, children: _jsx(ScrollToBottomButton, {}) }))] }), _jsxs("div", { className: "shrink-0 bg-background", hidden: hideComposer, children: [composerIntro && !ThreadSurface && (_jsx("div", { className: "mx-auto max-w-3xl px-4 pt-4", children: composerIntro })), _jsx(ChatComposerBannerSlot, {}), _jsx(ThreadPrimitive.If, { running: false, children: _jsx("div", { "data-chat-composer-divider": true, className: "border-t border-border" }) }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingBar, {}) }), _jsxs("div", { className: "mx-auto max-w-3xl px-4 py-4", children: [_jsx(ChatContext, {}), _jsxs(ComposerPrimitive.Root, { style: compactComposer ? { borderRadius: 16 } : undefined, className: cn(
                                         // Query container for the controls inside, so they size
                                         // against the composer rather than the viewport. This one
                                         // is wide, so the effort picker keeps its full label.

package/dist/components/chat-bubble.js

@@ -11,7 +11,7 @@ import { SentContextBadges } from "./context-badges.js";
 import { ComposerSubmitBridge } from "./composer-submit-bridge.js";
 import { ComposerAddMenu } from "./composer-add-menu.js";
 import { DEFAULT_COMPOSER_PLACEHOLDER } from "./assistant-chat.js";
-import { ChatComposerActionsSlot, ChatComposerBannerSlot, ChatHomeStartersSlot, ChatLauncherBadgeSlot, useChatThreadSurface, useComposerActionsOwnSend, } from "./chat-slots.js";
+import { ChatComposerActionsSlot, ChatComposerBannerSlot, ChatHomeStartersSlot, ChatLauncherBadgeSlot, useChatThreadSurface, useChatSlotsStore, useComposerActionsOwnSend, } from "./chat-slots.js";
 import { ChatMessageParts } from "./chat-message-parts.js";
 import { ReasoningEffortPicker } from "./reasoning-effort-picker.js";
 import { LoadingIndicator } from "./loading-indicator.js";
@@ -39,6 +39,7 @@ function BubbleScrollToBottomButton() {
 }
 export function ChatBubble() {
     const ThreadSurface = useChatThreadSurface();
+    const hideComposer = useChatSlotsStore((s) => !!s.threadSurface && s.threadSurfaceHidesComposer);
     const isOpen = useChatBubbleStore((s) => s.isOpen);
     const isExpanded = useChatBubbleStore((s) => s.isExpanded);
     const openBubble = useChatBubbleStore((s) => s.open);
@@ -108,7 +109,7 @@ export function ChatBubble() {
                             : { 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: [ThreadSurface && (_jsx("div", { className: "absolute inset-0 z-10 overflow-hidden bg-background", children: _jsx(ThreadSurface, {}) })), _jsxs(ThreadPrimitive.Viewport, { className: cn("absolute inset-0 overflow-y-auto", ThreadSurface && "invisible"), "aria-hidden": ThreadSurface ? true : undefined, children: [_jsx(ThreadPrimitive.Empty, { children: _jsxs("div", { className: "flex min-h-full flex-col items-center justify-center gap-4 p-4", children: [_jsx("p", { className: "text-sm text-muted-foreground text-center", children: "Ask the agent about this page" }), _jsx(ChatHomeStartersSlot, {})] }) }), _jsx(ThreadPrimitive.If, { empty: false, children: _jsxs("div", { className: "px-4 pt-4 pb-3", children: [_jsx(ThreadPrimitive.Messages, { components: {
                                                                         UserMessage: BubbleUserMessage,
                                                                         AssistantMessage: BubbleAssistantMessage,
-                                                                    } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), _jsx(ThreadPrimitive.If, { empty: false, children: !ThreadSurface && _jsx(BubbleScrollToBottomButton, {}) })] }), _jsxs("div", { className: "shrink-0 border-t border-border", children: [_jsx(ChatComposerBannerSlot, {}), _jsxs("div", { className: "px-3 py-3", children: [_jsx(ChatContext, {}), _jsx(ComposerPrimitive.Root, { className: cn(
+                                                                    } }), _jsx(ThreadPrimitive.If, { running: true, children: _jsx(LoadingIndicator, {}) })] }) })] }), _jsx(ThreadPrimitive.If, { empty: false, children: !ThreadSurface && _jsx(BubbleScrollToBottomButton, {}) })] }), _jsxs("div", { className: "shrink-0 border-t border-border", hidden: hideComposer, children: [_jsx(ChatComposerBannerSlot, {}), _jsxs("div", { className: "px-3 py-3", children: [_jsx(ChatContext, {}), _jsx(ComposerPrimitive.Root, { className: cn(
                                                         // Query container for the controls inside: the bubble is
                                                         // a narrow panel in a wide window, so they have to size
                                                         // against THIS box, not the viewport.

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

@@ -58,6 +58,8 @@ interface ChatSlotsState {
     composerActionsReplaceSend: boolean;
     /** Replaces the message viewport entirely while set. */
     threadSurface: ComponentType | null;
+    /** The surface supplies its own controls. Hide (but retain) the text composer. */
+    threadSurfaceHidesComposer: boolean;
 }
 export declare const useChatSlotsStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ChatSlotsState>>;
 /**

package/dist/components/chat-slots.js

@@ -54,6 +54,7 @@ export const useChatSlotsStore = create(() => ({
     composerActions: null,
     composerActionsReplaceSend: false,
     threadSurface: null,
+    threadSurfaceHidesComposer: false,
 }));
 const homeStarterHosts = new Map();
 let homeStarterHostOrder = 0;
@@ -93,8 +94,14 @@ export function registerChatSlots(slots) {
     if (slots.composerActionsReplaceSend !== undefined) {
         next.composerActionsReplaceSend = slots.composerActionsReplaceSend;
     }
-    if (slots.threadSurface !== undefined)
+    if (slots.threadSurface !== undefined) {
         next.threadSurface = slots.threadSurface;
+        // Composer ownership belongs to this surface, never to the next module.
+        next.threadSurfaceHidesComposer = slots.threadSurfaceHidesComposer ?? false;
+    }
+    if (slots.threadSurfaceHidesComposer !== undefined) {
+        next.threadSurfaceHidesComposer = slots.threadSurfaceHidesComposer;
+    }
     useChatSlotsStore.setState(next);
 }
 export function ChatComposerBannerSlot() {

package/dist/components/tool-call-card.js

@@ -16,5 +16,5 @@ export function ToolCallCard({ icon, title, description, status, action, childre
     const isError = status.type === "incomplete" && status.reason === "error";
     const isRunning = status.type === "running";
     const requiresAction = status.type === "requires-action";
-    return (_jsx(Collapsible, { open: isOpen, onOpenChange: setIsOpen, className: className, children: _jsxs("div", { className: cn("flex items-start gap-3 p-3 rounded-lg border", "bg-muted/50 text-sm transition-colors", isSuccess && "border-primary/30 bg-primary/5", isError && "border-destructive/30 bg-destructive/5", requiresAction && "border-primary/30 bg-primary/5"), children: [_jsxs("div", { className: "flex-shrink-0 mt-0.5", children: [isRunning && _jsx(Loader2, { className: "size-4 text-primary animate-spin" }), isSuccess && _jsx(CheckCircle2, { className: "size-4 text-primary" }), isError && _jsx(XCircle, { className: "size-4 text-destructive" }), requiresAction && _jsx(AlertCircle, { className: "size-4 text-primary" })] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [icon && _jsx("span", { className: "text-muted-foreground", children: icon }), _jsx("span", { className: "font-medium text-foreground", children: title }), _jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [action && !isRunning && (_jsx("button", { type: "button", onClick: action.onClick, disabled: action.disabled, className: cn("h-6 px-2.5 text-xs font-medium rounded-md", "border border-primary/30 text-primary", "hover:bg-primary/10 transition-colors", "disabled:opacity-50 disabled:pointer-events-none"), children: action.label })), children && (_jsx(CollapsibleTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "p-0.5 hover:bg-muted rounded transition-colors", "aria-label": "Toggle details", children: _jsx(ChevronDown, { className: cn("size-4 text-muted-foreground transition-transform", isOpen && "rotate-180") }) }) }))] })] }), description && (_jsx("div", { className: cn("text-xs mt-0.5", isError ? "text-destructive" : "text-primary"), children: description })), children && (_jsx(CollapsibleContent, { children: _jsx("div", { className: "mt-2", children: children }) }))] })] }) }));
+    return (_jsx(Collapsible, { open: isOpen, onOpenChange: setIsOpen, className: className, children: _jsxs("div", { className: cn("flex items-start gap-3 p-3 rounded-lg border", "bg-muted/50 text-sm transition-colors", isSuccess && "border-primary/30 bg-primary/5", isError && "border-destructive/30 bg-destructive/5", requiresAction && "border-primary/30 bg-primary/5"), children: [_jsxs("div", { className: "flex-shrink-0 mt-0.5", children: [isRunning && _jsx(Loader2, { className: "size-4 text-primary animate-spin" }), isSuccess && _jsx(CheckCircle2, { className: "size-4 text-primary" }), isError && _jsx(XCircle, { className: "size-4 text-destructive" }), requiresAction && _jsx(AlertCircle, { className: "size-4 text-primary" })] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("div", { className: "flex items-center gap-2", children: [icon && _jsx("span", { className: "text-muted-foreground", children: icon }), _jsx("span", { className: "font-medium text-foreground", children: title }), _jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [action && !isRunning && (_jsx("button", { type: "button", onClick: action.onClick, disabled: action.disabled, className: cn("min-h-6 px-1.5 text-xs font-medium rounded-md text-primary", "hover:bg-primary/10 transition-colors", "disabled:opacity-50 disabled:pointer-events-none"), children: action.label })), children && (_jsx(CollapsibleTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "p-0.5 hover:bg-muted rounded transition-colors", "aria-label": "Toggle details", children: _jsx(ChevronDown, { className: cn("size-4 text-muted-foreground transition-transform", isOpen && "rotate-180") }) }) }))] })] }), description && (_jsx("div", { className: cn("text-xs mt-0.5 wrap-anywhere", isError ? "text-destructive" : "text-primary"), children: description })), children && (_jsx(CollapsibleContent, { children: _jsx("div", { className: "mt-2", children: children }) }))] })] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.32.0",
+  "version": "0.32.2",
   "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": [
@@ -80,8 +80,8 @@
     "recharts": "^3.10.1",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^3.5.0",
-    "@iloveagents/foundry-agent": "^0.32.0",
-    "@iloveagents/foundry-web-primitives": "^0.32.0"
+    "@iloveagents/foundry-agent": "^0.32.2",
+    "@iloveagents/foundry-web-primitives": "^0.32.2"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",