@iloveagents/foundry-web-ui 0.28.0 → 0.28.1

package/dist/workbench/chat-header.d.ts

@@ -1,6 +1,7 @@
 import { useChatWidth } from "./use-chat-width.js";
-export declare function WorkbenchChatHeader({ collapsed, chatWidth, buttonClass, toggleNavigation, setCollapsed, showHistory, startChat, returnToChat, openHistory, chatOnly, setContentCollapsed, }: {
+export declare function WorkbenchChatHeader({ collapsed, running, chatWidth, buttonClass, toggleNavigation, setCollapsed, showHistory, startChat, returnToChat, openHistory, chatOnly, setContentCollapsed, }: {
     collapsed: boolean;
+    running: boolean;
     chatWidth: ReturnType<typeof useChatWidth>;
     buttonClass: string;
     toggleNavigation: () => void;

package/dist/workbench/chat-header.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { TooltipIconButton } from "../index.js";
-import { SquarePen, PanelLeft, MessageSquare, Menu, History } from "lucide-react";
-export function WorkbenchChatHeader({ collapsed, chatWidth, buttonClass, toggleNavigation, setCollapsed, showHistory, startChat, returnToChat, openHistory, chatOnly, setContentCollapsed, }) {
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-chat-header": true, className: `relative flex shrink-0 items-center ${collapsed ? "justify-center" : "gap-1 px-2"}`, children: [!collapsed && !chatWidth.compact && (_jsx(TooltipIconButton, { tooltip: "Open navigation", className: `${buttonClass} preview-mobile-navigation`, "aria-label": "Open navigation", onClick: toggleNavigation, children: _jsx(Menu, { size: 18 }) })), collapsed ? (_jsx(TooltipIconButton, { tooltip: "Expand chat", className: buttonClass, "aria-label": "Expand chat", onClick: () => setCollapsed(false), children: _jsx(MessageSquare, { size: 18 }) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "min-w-0 flex-1 px-2 py-2", children: _jsx("div", { className: "text-sm font-semibold", children: showHistory ? "Conversations" : "Chat" }) }), _jsx(TooltipIconButton, { tooltip: "New chat", className: buttonClass, "aria-label": "New chat", onClick: startChat, children: _jsx(SquarePen, { size: 18 }) }), _jsx(TooltipIconButton, { tooltip: "Chat history", className: buttonClass, "aria-label": "Chat history", "aria-expanded": showHistory, onClick: () => (showHistory ? returnToChat() : openHistory()), children: _jsx(History, { size: 18 }) }), _jsx(TooltipIconButton, { tooltip: "Collapse chat", style: chatOnly || chatWidth.compact ? { display: "none" } : undefined, className: buttonClass, "aria-label": "Collapse chat", onClick: () => {
+import { SquarePen, PanelLeft, MessageSquare, Menu, History, LoaderCircle } from "lucide-react";
+export function WorkbenchChatHeader({ collapsed, running, chatWidth, buttonClass, toggleNavigation, setCollapsed, showHistory, startChat, returnToChat, openHistory, chatOnly, setContentCollapsed, }) {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { "data-chat-header": true, className: `relative flex shrink-0 items-center ${collapsed ? "justify-center" : "gap-1 px-2"}`, children: [!collapsed && !chatWidth.compact && (_jsx(TooltipIconButton, { tooltip: "Open navigation", className: `${buttonClass} preview-mobile-navigation`, "aria-label": "Open navigation", onClick: toggleNavigation, children: _jsx(Menu, { size: 18 }) })), collapsed ? (_jsx(TooltipIconButton, { tooltip: running ? "AI is working — expand chat" : "Expand chat", className: buttonClass, "aria-label": running ? "AI is working — expand chat" : "Expand chat", onClick: () => setCollapsed(false), children: running ? (_jsx(LoaderCircle, { size: 18, className: "animate-spin motion-reduce:animate-none text-primary" })) : (_jsx(MessageSquare, { size: 18 })) })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "min-w-0 flex-1 px-2 py-2", children: _jsx("div", { className: "text-sm font-semibold", children: showHistory ? "Conversations" : "Chat" }) }), _jsx(TooltipIconButton, { tooltip: "New chat", className: buttonClass, "aria-label": "New chat", onClick: startChat, children: _jsx(SquarePen, { size: 18 }) }), _jsx(TooltipIconButton, { tooltip: "Chat history", className: buttonClass, "aria-label": "Chat history", "aria-expanded": showHistory, onClick: () => (showHistory ? returnToChat() : openHistory()), children: _jsx(History, { size: 18 }) }), _jsx(TooltipIconButton, { tooltip: "Collapse chat", style: chatOnly || chatWidth.compact ? { display: "none" } : undefined, className: buttonClass, "aria-label": "Collapse chat", onClick: () => {
                                     setContentCollapsed(false);
                                     setCollapsed(true);
                                 }, children: _jsx(PanelLeft, { size: 18 }) })] }))] }), collapsed && (_jsxs("div", { "data-chat-rail": true, className: "flex flex-col items-center gap-1", children: [_jsx(TooltipIconButton, { tooltip: "Open navigation", className: `${buttonClass} preview-mobile-navigation`, "aria-label": "Open navigation", onClick: toggleNavigation, children: _jsx(Menu, { size: 18 }) }), _jsx(TooltipIconButton, { tooltip: "Chat history", className: buttonClass, "aria-label": "Chat history", onClick: () => {

package/dist/workbench/use-workbench-state.d.ts

@@ -12,6 +12,7 @@ export declare function useWorkbenchState(chatRoute: boolean): {
         compact: boolean;
     };
     collapsed: boolean;
+    running: boolean;
     setCollapsed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     compactPane: "content" | "chat";
     setCompactPane: import("react").Dispatch<import("react").SetStateAction<"content" | "chat">>;

package/dist/workbench/use-workbench-state.js

@@ -73,6 +73,7 @@ export function useWorkbenchState(chatRoute) {
         // the same address again. Collapsing remains local until the next entry.
     }, [chatOnly, location.key]);
     const [historyOpen, setHistoryOpen] = useState(false);
+    const running = useAuiState((s) => s.thread.isRunning);
     const emptyChat = useAuiState((s) => s.thread.messages.length === 0 && !s.thread.isRunning && !s.thread.isLoading);
     const wasEmptyChat = useRef(emptyChat);
     useEffect(() => {
@@ -122,6 +123,7 @@ export function useWorkbenchState(chatRoute) {
         pageLabel,
         chatWidth,
         collapsed,
+        running,
         setCollapsed,
         compactPane,
         setCompactPane,

package/dist/workbench/workbench.js

@@ -8,14 +8,14 @@ import { useWorkbenchState } from "./use-workbench-state.js";
 import { WorkbenchStyles } from "./workbench-styles.js";
 import { Button } from "@iloveagents/foundry-web-primitives";
 import { ChatContent, TooltipIconButton } from "../index.js";
-import { FileText, MessageSquare, Menu } from "lucide-react";
+import { FileText, MessageSquare, Menu, LoaderCircle } from "lucide-react";
 import { ConversationHistory } from "./conversation-history.js";
 export function WorkbenchPreview({ page, chatOnly: chatRoute = false, }) {
-    const { panelOpen, chatOnly, pageLabel, chatWidth, collapsed, setCollapsed, compactPane, setCompactPane, contentCollapsed, setContentCollapsed, contentHidden, historyOpen, emptyChat, showHistory, spaciousChat, returnToChat, openHistory, historyShortcut, toggleNavigation, navGroups, workspaceGroups, staticNavigationGroups, closePanel, startChat, } = useWorkbenchState(chatRoute);
+    const { panelOpen, chatOnly, pageLabel, chatWidth, collapsed, running, setCollapsed, compactPane, setCompactPane, contentCollapsed, setContentCollapsed, contentHidden, historyOpen, emptyChat, showHistory, spaciousChat, returnToChat, openHistory, historyShortcut, toggleNavigation, navGroups, workspaceGroups, staticNavigationGroups, closePanel, startChat, } = useWorkbenchState(chatRoute);
     const buttonClass = "inline-flex items-center justify-center rounded-lg p-2 text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-2 focus-visible:outline-primary";
     return (_jsxs("div", { className: "workbench-preview flex min-h-0 flex-1 overflow-hidden", "data-workspace-navigation": workspaceGroups ? "true" : undefined, children: [_jsx(WorkbenchStyles, {}), _jsx(WorkbenchNavigation, { groups: staticNavigationGroups, workspace: !!workspaceGroups, onNewConversation: startChat }), _jsxs("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden", "data-workbench-surface": true, role: "region", "aria-label": "Workspace working area", children: [chatWidth.compact && (_jsxs("div", { className: "flex shrink-0 items-center gap-1 border-b border-border px-2 py-1", role: "group", "aria-label": "Workspace panes", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "preview-mobile-navigation size-11", "aria-label": "Open navigation", onClick: toggleNavigation, children: _jsx(Menu, { className: "size-4" }) }), ["content", "chat"]
                                 .filter((pane) => !chatOnly || pane === "chat")
-                                .map((pane) => (_jsxs(Button, { variant: "ghost", className: "h-11 gap-1.5 px-3 aria-pressed:bg-muted", "aria-pressed": chatOnly || compactPane === pane, "aria-controls": pane === "chat" ? "preview-assistant" : "preview-content", onClick: () => setCompactPane(pane), children: [pane === "chat" ? (_jsx(MessageSquare, { className: "size-4" })) : (_jsx(FileText, { className: "size-4" })), pane === "chat" ? "Chat" : "Content"] }, pane)))] })), _jsxs("div", { ref: chatWidth.containerRef, className: "relative flex min-h-0 min-w-0 flex-1 overflow-x-auto", children: [_jsxs("section", { id: "preview-assistant", "data-panel-motion": true, "data-global-chat": spaciousChat || undefined, "data-chat-collapsed": collapsed ? "true" : undefined, inert: chatWidth.compact && !chatOnly && compactPane !== "chat", "aria-label": "Assistant conversation", className: "relative flex min-h-0 shrink-0 flex-col", style: {
+                                .map((pane) => (_jsxs(Button, { variant: "ghost", className: "h-11 gap-1.5 px-3 aria-pressed:bg-muted", "aria-pressed": chatOnly || compactPane === pane, "aria-controls": pane === "chat" ? "preview-assistant" : "preview-content", "aria-label": pane === "chat" && running ? "Chat — AI is working" : undefined, onClick: () => setCompactPane(pane), children: [pane === "chat" ? (running ? (_jsx(LoaderCircle, { className: "size-4 animate-spin motion-reduce:animate-none text-primary" })) : (_jsx(MessageSquare, { className: "size-4" }))) : (_jsx(FileText, { className: "size-4" })), pane === "chat" ? "Chat" : "Content"] }, pane)))] })), _jsxs("div", { ref: chatWidth.containerRef, className: "relative flex min-h-0 min-w-0 flex-1 overflow-x-auto", children: [_jsxs("section", { id: "preview-assistant", "data-panel-motion": true, "data-global-chat": spaciousChat || undefined, "data-chat-collapsed": collapsed ? "true" : undefined, inert: chatWidth.compact && !chatOnly && compactPane !== "chat", "aria-label": "Assistant conversation", className: "relative flex min-h-0 shrink-0 flex-col", style: {
                                     display: chatWidth.compact && !chatOnly && compactPane !== "chat" ? "none" : "flex",
                                     width: chatWidth.compact || chatOnly
                                         ? "100%"
@@ -25,7 +25,7 @@ export function WorkbenchPreview({ page, chatOnly: chatRoute = false, }) {
                                                 ? "calc(100% - 44px)"
                                                 : chatWidth.width,
                                     background: "var(--background)",
-                                }, children: [_jsx(WorkbenchChatHeader, { collapsed: collapsed, chatWidth: chatWidth, buttonClass: buttonClass, toggleNavigation: toggleNavigation, setCollapsed: setCollapsed, showHistory: showHistory, startChat: startChat, returnToChat: returnToChat, openHistory: openHistory, chatOnly: chatOnly, setContentCollapsed: setContentCollapsed }), !collapsed && showHistory && (_jsx(ConversationHistory, { groups: navGroups, workspaceId: workspaceGroups?.[0]?.meta?.exclusiveRootId, onClose: returnToChat, showBack: true })), !chatWidth.compact && !collapsed && !contentCollapsed && (_jsx(ChatResizeHandle, { chatWidth: chatWidth })), _jsx("div", { className: "min-h-0 flex-1 flex-col", style: {
+                                }, children: [_jsx(WorkbenchChatHeader, { collapsed: collapsed, running: running, chatWidth: chatWidth, buttonClass: buttonClass, toggleNavigation: toggleNavigation, setCollapsed: setCollapsed, showHistory: showHistory, startChat: startChat, returnToChat: returnToChat, openHistory: openHistory, chatOnly: chatOnly, setContentCollapsed: setContentCollapsed }), !collapsed && showHistory && (_jsx(ConversationHistory, { groups: navGroups, workspaceId: workspaceGroups?.[0]?.meta?.exclusiveRootId, onClose: returnToChat, showBack: true })), !chatWidth.compact && !collapsed && !contentCollapsed && (_jsx(ChatResizeHandle, { chatWidth: chatWidth })), _jsx("div", { className: "min-h-0 flex-1 flex-col", style: {
                                             display: collapsed || showHistory ? "none" : "flex",
                                             paddingBottom: spaciousChat && emptyChat && !historyOpen ? "clamp(32px, 10vh, 96px)" : undefined,
                                         }, children: _jsx(ChatContent, { centerComposer: spaciousChat && emptyChat && !historyOpen, composerIntro: spaciousChat && emptyChat ? (_jsx(WelcomeIntro, { navGroups: navGroups, historyShortcut: historyShortcut })) : undefined, compactComposer: !spaciousChat, hideCurrentPageBadge: true, showPinButton: false, starterSuggestions: [], emptyState: _jsxs("div", { className: "flex min-h-full flex-col justify-center gap-3 px-6 py-8", children: [_jsx("h1", { className: "text-lg font-semibold tracking-tight", children: "What would you like to get done?" }), _jsx("p", { className: "max-w-sm text-sm leading-relaxed text-muted-foreground", children: pageLabel && !pageLabel.startsWith("/") ? (_jsxs(_Fragment, { children: ["Work with ", _jsx("span", { className: "font-medium text-foreground", children: pageLabel }), " ", "or across your spaces: find information, create or edit content, and run actions."] })) : ("Find information, create or edit content, and run actions across your spaces.") }), _jsx("p", { className: "max-w-sm text-xs leading-relaxed text-muted-foreground", children: "Your conversation continues as you browse. Select text or a field to work more specifically." }), historyShortcut] }) }) })] }), _jsx(WorkbenchContentPane, { contentHidden: contentHidden, panelOpen: panelOpen, chatWidth: chatWidth, contentCollapsed: contentCollapsed, collapsed: collapsed, buttonClass: buttonClass, setCollapsed: setCollapsed, setContentCollapsed: setContentCollapsed, closePanel: closePanel, page: page }), contentCollapsed && !chatOnly && !chatWidth.compact && (_jsx("aside", { "aria-label": "Collapsed content", className: "flex w-11 shrink-0 flex-col items-center", style: { width: 44 }, children: _jsx("div", { className: "flex h-full w-full flex-col items-center", "data-chat-rail": true, children: _jsx("div", { className: "flex items-center justify-center", style: { height: 60 }, children: _jsx(TooltipIconButton, { tooltip: "Expand content", className: buttonClass, "aria-label": "Expand content", onClick: () => setContentCollapsed(false), children: _jsx(FileText, { size: 18 }) }) }) }) }))] })] })] }));

package/package.json

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