@mcp-b/react-components 0.31.0 → 0.31.1

package/dist/components/agents-sdk/ThinkFullApp.d.ts

@@ -67,6 +67,8 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
   threadStatusSummary?: ThinkThreadStatusSummary;
   /** Whether narrow layouts render the built-in chat/workbench switch. Defaults to true. */
   showMobileViewSwitch?: boolean;
+  /** Whether desktop layouts render the built-in workbench switch. Defaults to true. */
+  showWorkbenchViewSwitch?: boolean;
   /** Hide the thread app bar when a narrow workbench supplies its own navigation. */
   hideAppBarInWorkbench?: boolean;
   /** Whole native execution selected by the application route. */
@@ -112,6 +114,12 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
   defaultWorkbenchView?: ThinkFullAppWorkbenchView;
   /** Called when the shell toolbar asks to switch workbench lanes. */
   onWorkbenchViewChange?: (view: ThinkFullAppWorkbenchView) => void;
+  /** Whether the desktop workbench panel is open. Omit for internal state. */
+  workbenchOpen?: boolean;
+  /** Initial desktop workbench state when `workbenchOpen` is uncontrolled. */
+  defaultWorkbenchOpen?: boolean;
+  /** Called when toolbar or resize input opens or closes the workbench. */
+  onWorkbenchOpenChange?: (open: boolean) => void;
 }
 /** Combines ThinkChat with an optional resizable workbench shell. */
 declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage>({
@@ -121,6 +129,7 @@ declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = u
   className,
   conversation,
   defaultMobileView,
+  defaultWorkbenchOpen,
   defaultWorkbenchView,
   defaultThreadSidebarOpen,
   hideAppBarInWorkbench,
@@ -128,6 +137,7 @@ declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = u
   mobileView,
   onMobileViewChange,
   onThreadSidebarOpenChange,
+  onWorkbenchOpenChange,
   onWorkbenchViewChange,
   plugins,
   ref,
@@ -135,11 +145,13 @@ declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = u
   renderExecutionRunLink,
   selectedExecutionRun,
   showMobileViewSwitch,
+  showWorkbenchViewSwitch,
   sourceKey,
   style,
   threadSidebar,
   threadSidebarOpen,
   threadStatusSummary,
+  workbenchOpen,
   workbenchPanels,
   workbenchView,
   workspace,

package/dist/components/agents-sdk/ThinkFullApp.js

@@ -21,6 +21,7 @@ const workbenchPanelDefaultWidth = 340;
 const workbenchPanelMinWidth = 300;
 const workbenchPanelMaxWidth = 600;
 const workbenchPanelKeyboardStep = 24;
+const workbenchPanelCollapseThreshold = 240;
 function WorkspacePanel({ config }) {
 	const selectedPath = config.navigation.current.destination.kind === "file" ? config.navigation.current.destination.path : null;
 	return /* @__PURE__ */ jsx(WorkspaceExplorer, {
@@ -81,15 +82,17 @@ function ThinkFullAppThreadChat({ agent, chat, messages, renderAgentToolRunLink,
 	});
 }
 /** Combines ThinkChat with an optional resizable workbench shell. */
-function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, conversation, defaultMobileView, defaultWorkbenchView, defaultThreadSidebarOpen, hideAppBarInWorkbench = false, messages, mobileView, onMobileViewChange, onThreadSidebarOpenChange, onWorkbenchViewChange, plugins, ref, renderAgentToolRunLink, renderExecutionRunLink, selectedExecutionRun = null, showMobileViewSwitch = true, sourceKey, style, threadSidebar, threadSidebarOpen, threadStatusSummary, workbenchPanels, workbenchView, workspace, ...props }) {
+function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, conversation, defaultMobileView, defaultWorkbenchOpen, defaultWorkbenchView, defaultThreadSidebarOpen, hideAppBarInWorkbench = false, messages, mobileView, onMobileViewChange, onThreadSidebarOpenChange, onWorkbenchOpenChange, onWorkbenchViewChange, plugins, ref, renderAgentToolRunLink, renderExecutionRunLink, selectedExecutionRun = null, showMobileViewSwitch = true, showWorkbenchViewSwitch = true, sourceKey, style, threadSidebar, threadSidebarOpen, threadStatusSummary, workbenchOpen, workbenchPanels, workbenchView, workspace, ...props }) {
 	const agent = conversation?.agent;
 	const appRef = React.useRef(null);
 	const workbenchPanelRef = React.useRef(null);
 	const pendingPanelFocusRef = React.useRef(null);
 	const [innerMobileView, setInnerMobileView] = React.useState(defaultMobileView ?? "chat");
 	const [innerWorkbenchView, setInnerWorkbenchView] = React.useState(defaultWorkbenchView ?? "files");
+	const [innerWorkbenchOpen, setInnerWorkbenchOpen] = React.useState(defaultWorkbenchOpen ?? true);
 	const requestedMobileView = mobileView ?? innerMobileView;
 	const requestedWorkbenchView = workbenchView ?? innerWorkbenchView;
+	const requestedWorkbenchOpen = workbenchOpen ?? innerWorkbenchOpen;
 	const setWorkbenchView = React.useCallback((next) => {
 		if (workbenchView === void 0) setInnerWorkbenchView(next);
 		onWorkbenchViewChange?.(next);
@@ -98,6 +101,10 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, co
 		if (mobileView === void 0) setInnerMobileView(next);
 		onMobileViewChange?.(next);
 	}, [mobileView, onMobileViewChange]);
+	const setWorkbenchOpen = React.useCallback((next) => {
+		if (workbenchOpen === void 0) setInnerWorkbenchOpen(next);
+		onWorkbenchOpenChange?.(next);
+	}, [onWorkbenchOpenChange, workbenchOpen]);
 	const updateAppView = React.useCallback((update) => {
 		React.startTransition(update);
 	}, []);
@@ -135,13 +142,15 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, co
 		render: () => /* @__PURE__ */ jsx(PluginsPanel, { config: plugins })
 	});
 	if (workbenchPanels) availableWorkbenchPanels.push(...workbenchPanels);
-	const activePanel = availableWorkbenchPanels.find((panel) => panel.id === requestedWorkbenchView) ?? availableWorkbenchPanels[0];
+	const selectedPanel = availableWorkbenchPanels.find((panel) => panel.id === requestedWorkbenchView) ?? availableWorkbenchPanels[0];
+	const activePanel = requestedWorkbenchOpen ? selectedPanel : void 0;
 	const activeWorkbenchView = activePanel?.id;
 	const hasWorkbench = activePanel !== void 0;
+	const hasAvailableWorkbench = selectedPanel !== void 0;
 	const activeMobileView = hasWorkbench ? requestedMobileView : "chat";
-	const showWorkbenchViewSwitch = availableWorkbenchPanels.length > 1;
+	const shouldShowWorkbenchViewSwitch = showWorkbenchViewSwitch && availableWorkbenchPanels.length > 0;
 	const workbenchViews = availableWorkbenchPanels;
-	const shouldRenderInlineAppBar = !threadSidebar && (Boolean(appBarActions || appBarLeading || appBarTitle || threadSidebar) || hasWorkbench);
+	const shouldRenderInlineAppBar = !threadSidebar && (Boolean(appBarActions || appBarLeading || appBarTitle || threadSidebar) || hasAvailableWorkbench);
 	const hasAppBarRow = shouldRenderInlineAppBar;
 	React.useLayoutEffect(() => {
 		const pendingFocus = pendingPanelFocusRef.current;
@@ -189,19 +198,27 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, co
 			}) : null] }) : null,
 			/* @__PURE__ */ jsxs(AppTopBar.Trailing, { children: [
 				appBarActions,
-				showWorkbenchViewSwitch && activeWorkbenchView ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
+				shouldShowWorkbenchViewSwitch && selectedPanel ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
 					className: "think-full-app__workbench-view-switch",
 					views: workbenchViews,
 					value: activeWorkbenchView,
+					allowEmpty: true,
 					onValueChange: (next) => {
-						if (next) updateWorkbenchPanel(next);
+						updateAppView(() => {
+							if (!next) {
+								setWorkbenchOpen(false);
+								return;
+							}
+							updateWorkbenchPanel(next);
+							setWorkbenchOpen(true);
+						});
 					},
 					"aria-label": "Workbench views"
 				}) : null,
-				activePanel && showMobileViewSwitch ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
+				selectedPanel && showMobileViewSwitch ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
 					className: "think-full-app__mobile-view-switch",
 					views: workbenchViews,
-					value: activeMobileView === "workbench" ? activePanel.id : void 0,
+					value: activeMobileView === "workbench" ? activeWorkbenchView : void 0,
 					allowEmpty: true,
 					onValueChange: (next) => {
 						updateAppView(() => {
@@ -227,6 +244,8 @@ function ThinkFullApp({ appBarActions, appBarLeading, appBarTitle, className, co
 		minSize: workbenchPanelMinWidth,
 		maxSize: workbenchPanelMaxWidth,
 		keyboardStep: workbenchPanelKeyboardStep,
+		collapseThreshold: workbenchPanelCollapseThreshold,
+		onCollapse: () => setWorkbenchOpen(false),
 		"data-has-thread-sidebar": threadSidebar ? "true" : "false",
 		"data-has-workbench": hasWorkbench ? "true" : "false",
 		"data-has-workbench-topbar": hasAppBarRow ? "true" : "false",

package/dist/components/agents-sdk/ThinkThreadPicker.d.ts

@@ -41,7 +41,11 @@ interface ThinkThreadPickerProps extends Omit<React.HTMLAttributes<HTMLElement>,
    * inferred from the consuming application's registered route tree.
    */
   renderThreadLink: (thread: ThinkThreadItem) => React.ReactElement;
-  /** Optional parent-agent create action, usually `parent.stub.createThread()`. */
+  /**
+   * Optional create action. An app whose threads are minted by their first
+   * message should navigate to its new-thread screen here rather than create
+   * one: a thread created on click is an empty thread until someone writes in it.
+   */
   onCreate?: () => void | Promise<void>;
   /**
    * Notified on unmodified primary activation. The link still navigates — the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mcp-b/react-components",
-  "version": "0.31.0",
+  "version": "0.31.1",
   "description": "MCP-B React components built on Base UI and shared design tokens, including Cloudflare Think chat primitives.",
   "homepage": "https://design-system.sigvelo.com",
   "bugs": {
@@ -58,7 +58,7 @@
     "streamdown": "^2.5.0",
     "unist-util-visit": "^5.1.0",
     "yet-another-react-lightbox": "^3.32.1",
-    "@mcp-b/design-tokens": "0.31.0"
+    "@mcp-b/design-tokens": "0.31.1"
   },
   "devDependencies": {
     "@ai-sdk/react": "^3.0.230",