@mcp-b/react-components 0.42.0 → 0.43.0

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

@@ -1,11 +1,11 @@
 import { l as WorkspaceNavigationAdapter } from "../../WorkspaceLink-Bh9-Jo1r.js";
 import { n as AgentToolEventsValue } from "../../AgentToolRunsContext-daY67hFM.js";
-import { McpPluginCatalogProps } from "./McpPluginCatalog.js";
+import { n as McpPluginCatalogProps } from "../../McpPluginCatalog-mbGw8FTu.js";
 import { ThinkChatMessagesProps } from "./ThinkChat.js";
-import { AppBarSlots, ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
+import { n as ResponsiveSidebarShell, t as AppBarSlots } from "../../ResponsiveSidebarShell-DOXd5T-d.js";
 import { ThinkThreadStatusSummary } from "./ThinkThreadPicker.js";
 import { r as WorkspaceFileAssetResolver } from "../../WorkspaceFile-BLaFmMrt.js";
-import { WorkspaceSource } from "./Workspace.js";
+import { v as WorkspaceSource } from "../../Workspace-F3raHdYV.js";
 import { t as ThinkAgent } from "../../think-agent-Cip5KAPj.js";
 import * as React from "react";
 import { UIMessage } from "ai";
@@ -15,6 +15,20 @@ import { useAgent } from "agents/react";
 //#region src/components/agents-sdk/ThinkFullApp.d.ts
 type ThinkFullAppAgent<State = unknown> = ThinkAgent<State>;
 type ThinkFullAppWorkbenchView = "files" | "plugins" | (string & {});
+/**
+ * ThinkFullApp bar: the shared shell slots plus the workbench view switch.
+ * `views` omitted uses the built-in Files/Plugins switch. Pass `null` when
+ * the host already offers those destinations (an overflow menu). `primary`
+ * is always last.
+ */
+interface ThinkFullAppBarSlots extends AppBarSlots {
+  /**
+   * View-switch slot. Omit for the built-in switch. `null` omits it so the
+   * host can own Files/Plugins in `actions` instead of showing a second set
+   * of icons.
+   */
+  views?: React.ReactNode | null;
+}
 /**
  * The one view axis: the conversation alone, or the conversation with a named
  * workbench panel raised beside it (leading at narrow widths). Apps that make
@@ -70,8 +84,8 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
   workspace?: ThinkFullAppWorkspaceConfig;
   /** Plugin directory backed by the host's live Agents MCP state and connection callbacks. */
   plugins?: McpPluginCatalogProps;
-  /** Application bar slots: back control, leading navigation, title, actions. */
-  bar?: AppBarSlots;
+  /** Application bar slots: back, leading, title, actions, views, primary. */
+  bar?: ThinkFullAppBarSlots;
   /** Aggregate thread activity rendered beside the compact thread-title disclosure. */
   threadStatusSummary?: ThinkThreadStatusSummary;
   /**
@@ -132,4 +146,4 @@ declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = u
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { ThinkFullApp, ThinkFullAppAgent, ThinkFullAppConversation, ThinkFullAppPanel, ThinkFullAppProps, ThinkFullAppView, ThinkFullAppWorkbenchView, ThinkFullAppWorkspaceConfig };
+export { ThinkFullApp, ThinkFullAppAgent, ThinkFullAppBarSlots, ThinkFullAppConversation, ThinkFullAppPanel, ThinkFullAppProps, ThinkFullAppView, ThinkFullAppWorkbenchView, ThinkFullAppWorkspaceConfig };

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

@@ -3,9 +3,9 @@ import { S as FileIcon, c as BoxIcon } from "../../icons-CVFSeTJn.js";
 import { n as mergeRefs } from "../../merge-refs-DF_7w2x_.js";
 import { ResizableSidePanel } from "../general-purpose/ResizableSidePanel.js";
 import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
-import { a as WorkspaceNavigationRestorationBoundary, i as WorkspaceNavigationFocusRestorer, n as WorkspaceNavigationProvider } from "../../WorkspaceLink-DtH66bAY.js";
-import { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-DkA4Wr71.js";
 import { McpPluginCatalog } from "./McpPluginCatalog.js";
+import { a as WorkspaceNavigationRestorationBoundary, i as WorkspaceNavigationFocusRestorer, n as WorkspaceNavigationProvider } from "../../WorkspaceLink-DtH66bAY.js";
+import { c as resolveThinkApprovalProps, s as useThinkPendingExecutionApprovals, t as ThinkChat } from "../../ThinkChat-BES_3Mb-.js";
 import { ThinkFullAppViewSwitch } from "./ThinkFullAppViewSwitch.js";
 import { ThinkThreadStatusIndicators } from "./ThinkThreadPicker.js";
 import { useWorkspace } from "./Workspace.js";
@@ -131,7 +131,7 @@ function ThinkFullApp({ bar, className, conversation, defaultView: defaultViewPr
 	const activePanel = requestedView === "chat" ? void 0 : availableWorkbenchPanels.find((panel) => panel.id === requestedView);
 	const hasWorkbench = activePanel !== void 0;
 	const activeMobileView = hasWorkbench ? "workbench" : "chat";
-	const hasAppBarRow = Boolean(bar?.back || bar?.leading || bar?.compactLeading || bar?.title || bar?.actions || threadSidebar) || availableWorkbenchPanels.length > 0;
+	const hasAppBarRow = Boolean(bar?.back || bar?.leading || bar?.compactLeading || bar?.title || bar?.actions || bar?.primary || bar?.views || threadSidebar) || availableWorkbenchPanels.length > 0;
 	React.useLayoutEffect(() => {
 		const pendingFocus = pendingPanelFocusRef.current;
 		if (!pendingFocus || pendingFocus.id !== activePanel?.id) return;
@@ -148,13 +148,13 @@ function ThinkFullApp({ bar, className, conversation, defaultView: defaultViewPr
 		} : null;
 		React.startTransition(() => setView(next));
 	};
-	const viewSwitch = availableWorkbenchPanels.length ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
+	const viewSwitch = bar?.views === void 0 && availableWorkbenchPanels.length ? /* @__PURE__ */ jsx(ThinkFullAppViewSwitch, {
 		views: availableWorkbenchPanels,
 		value: activePanel?.id,
 		allowEmpty: true,
 		"aria-label": "App views",
 		onValueChange: (next) => updateView(next ?? "chat")
-	}) : null;
+	}) : bar?.views ?? null;
 	const appBarActions = bar?.actions || viewSwitch ? /* @__PURE__ */ jsxs(Fragment, { children: [bar?.actions, viewSwitch] }) : void 0;
 	const appContent = /* @__PURE__ */ jsxs(ResizableSidePanel.Root, {
 		ref: mergeRefs(appRef, ref),
@@ -232,6 +232,7 @@ function ThinkFullApp({ bar, className, conversation, defaultView: defaultViewPr
 		bar: {
 			...bar,
 			actions: appBarActions,
+			primary: bar?.primary,
 			className: "think-full-app__app-bar",
 			label: "Workbench controls",
 			hidden: !hasAppBarRow,

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

@@ -1,6 +1,6 @@
 import { n as mergeBaseClassName } from "../../class-names-BiMDVpUo.js";
-import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
+import { ToggleGroup } from "../foundations/ToggleGroup.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkFullAppViewSwitch.tsx

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

@@ -1,6 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { Switch } from "../foundations/Switch.js";
 import { getThinkRoutineNextRun } from "./ThinkRoutine.js";
+import { Switch } from "../foundations/Switch.js";
 import { ThinkRoutineRuns } from "./ThinkRoutineRuns.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

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

@@ -1,4 +1,4 @@
-import { AppBarSlots } from "../general-purpose/ResponsiveSidebarShell.js";
+import { t as AppBarSlots } from "../../ResponsiveSidebarShell-DOXd5T-d.js";
 import { ThinkRoutine, ThinkRoutineRunOf } from "./ThinkRoutine.js";
 import * as React from "react";
 
@@ -31,8 +31,9 @@ interface ThinkRoutineLibraryProps<TRoutine extends ThinkRoutine = ThinkRoutine>
   /** Host-owned catalog error shown above the library without replacing loaded routines. */
   error?: React.ReactNode;
   /**
-   * Application bar slots. `title` defaults to the selected schedule's name;
-   * `actions` render before the built-in schedule actions.
+   * Application bar slots. `title` defaults to the selected schedule's name.
+   * `actions` render before Run / Edit / Delete. `primary` stays last — the
+   * host's identity chrome belongs there, not in a second overflow.
    */
   bar?: AppBarSlots;
   /** Starts the selected routine immediately. */

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

@@ -1,13 +1,12 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { K as SpinnerIcon, y as EllipsisIcon, z as PlayIcon } from "../../icons-CVFSeTJn.js";
+import { K as SpinnerIcon, Q as TrashIcon, R as PencilIcon, z as PlayIcon } from "../../icons-CVFSeTJn.js";
 import { buttonVariants } from "../foundations/Button.js";
-import { Menu } from "../foundations/Menu.js";
 import { i as formatErrorMessage } from "../../format-DB2mX9DA.js";
 import { n as isPlainPrimaryLinkActivation, t as NavigationLink } from "../../navigation-link-kqMa81v5.js";
-import { AlertDialog } from "../foundations/AlertDialog.js";
 import { EmptyState } from "../foundations/EmptyState.js";
 import { AppTopBar } from "../general-purpose/AppTopBar.js";
 import { ResponsiveSidebarShell } from "../general-purpose/ResponsiveSidebarShell.js";
+import { AlertDialog } from "../foundations/AlertDialog.js";
 import { ThinkRoutineBrowser } from "./ThinkRoutineBrowser.js";
 import { ThinkRoutineDetail } from "./ThinkRoutineDetail.js";
 import * as React from "react";
@@ -15,45 +14,32 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/agents-sdk/ThinkRoutineLibrary.tsx
 function RoutineTopBarActions({ appBarActions, busy, onDelete, editLink, onRun, routineName }) {
 	const [deleteOpen, setDeleteOpen] = React.useState(false);
-	const moreActionsRef = React.useRef(null);
-	const hasMenu = Boolean(editLink || onDelete);
-	if (!appBarActions && !onRun && !hasMenu) return null;
+	const deleteButtonRef = React.useRef(null);
+	if (!appBarActions && !onRun && !editLink && !onDelete) return null;
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		appBarActions,
 		onRun ? /* @__PURE__ */ jsx(AppTopBar.Button, {
 			label: "Run schedule",
-			tooltip: "Run now",
 			disabled: busy,
 			onClick: onRun,
 			children: busy ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(PlayIcon, {})
 		}) : null,
-		hasMenu ? /* @__PURE__ */ jsxs(Menu.Root, { children: [/* @__PURE__ */ jsx(AppTopBar.Button, {
-			label: "More schedule actions",
-			tooltip: "More actions",
+		editLink ? /* @__PURE__ */ jsx(AppTopBar.Link, {
+			label: "Edit schedule",
+			render: editLink,
+			children: /* @__PURE__ */ jsx(PencilIcon, {})
+		}) : null,
+		onDelete ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(AppTopBar.Button, {
+			ref: deleteButtonRef,
+			label: "Delete schedule",
 			disabled: busy,
-			render: /* @__PURE__ */ jsx(Menu.Trigger, {
-				ref: moreActionsRef,
-				unstyled: true
-			}),
-			children: /* @__PURE__ */ jsx(EllipsisIcon, {})
-		}), /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
-			align: "end",
-			sideOffset: 4,
-			children: /* @__PURE__ */ jsxs(Menu.Popup, { children: [editLink ? /* @__PURE__ */ jsx(Menu.Item, {
-				render: editLink,
-				children: "Edit schedule"
-			}) : null, onDelete ? /* @__PURE__ */ jsx(Menu.Item, {
-				variant: "destructive",
-				disabled: busy,
-				onClick: () => setDeleteOpen(true),
-				children: "Delete schedule"
-			}) : null] })
-		}) })] }) : null,
-		onDelete ? /* @__PURE__ */ jsx(AlertDialog.Root, {
+			onClick: () => setDeleteOpen(true),
+			children: /* @__PURE__ */ jsx(TrashIcon, {})
+		}), /* @__PURE__ */ jsx(AlertDialog.Root, {
 			open: deleteOpen,
 			onOpenChange: setDeleteOpen,
 			children: /* @__PURE__ */ jsxs(AlertDialog.Portal, { children: [/* @__PURE__ */ jsx(AlertDialog.Backdrop, {}), /* @__PURE__ */ jsx(AlertDialog.Viewport, { children: /* @__PURE__ */ jsxs(AlertDialog.Popup, {
-				finalFocus: moreActionsRef,
+				finalFocus: deleteButtonRef,
 				children: [
 					/* @__PURE__ */ jsxs(AlertDialog.Title, { children: [
 						"Delete ",
@@ -72,7 +58,7 @@ function RoutineTopBarActions({ appBarActions, busy, onDelete, editLink, onRun,
 					})] })
 				]
 			}) })] })
-		}) : null
+		})] }) : null
 	] });
 }
 /**

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

@@ -0,0 +1,173 @@
+import { ThinkChatDraft } from "./ThinkChat.js";
+import { ThinkThreadItem } from "./ThinkThreadPicker.js";
+import { ThinkFullAppAgent, ThinkFullAppConversation, ThinkFullAppProps } from "./ThinkFullApp.js";
+import { ThinkRoutine } from "./ThinkRoutine.js";
+import { SetupChecklistEntry } from "../general-purpose/SetupChecklist.js";
+import * as React from "react";
+import { UIMessage } from "ai";
+
+//#region src/components/agents-sdk/ThinkSidepanel.d.ts
+type ThinkSidepanelView = "chat" | "files" | "plugins" | "schedules" | "live";
+type ThinkSidepanelDestination = {
+  kind: "thread";
+  threadId: string;
+} | {
+  kind: "new-thread";
+} | {
+  kind: "view";
+  view: ThinkSidepanelView;
+} | {
+  kind: "agent-run";
+  runId: string;
+} | {
+  kind: "routine";
+  routineId: string;
+} | {
+  kind: "create-routine";
+} | {
+  kind: "edit-routine";
+  routineId: string;
+} | {
+  kind: "routine-run";
+  routineId: string;
+  runId: string;
+};
+type ThinkSidepanelStatus = "ready" | "connecting" | "offline" | "identity-blocked" | "needs-model";
+interface ThinkSidepanelModelSetup {
+  onSignIn?: () => void;
+  busy?: boolean;
+  error?: React.ReactNode;
+  label?: string;
+  onCustomEndpoint?: () => void;
+}
+interface ThinkSidepanelFollow {
+  followed: boolean;
+  onCheckedChange: (followed: boolean) => void;
+}
+interface ThinkSidepanelCompanion {
+  enabled: boolean;
+  origin: string;
+  setEnabled: (enabled: boolean) => void;
+}
+interface ThinkSidepanelPasskeyVault {
+  enabled: boolean;
+  setEnabled: (enabled: boolean) => void;
+}
+interface ThinkSidepanelConnection {
+  configured: boolean;
+  description?: string;
+  onSelect: () => void;
+}
+interface ThinkSidepanelStart {
+  onSubmit: ThinkChatDraft["onSubmit"];
+  suggestions?: readonly {
+    label: string;
+    value: string;
+  }[];
+  suggestionsError?: boolean;
+  onRetrySuggestions?: () => void;
+  hasConnectedApps?: boolean;
+  slack?: ThinkSidepanelConnection;
+  discord?: ThinkSidepanelConnection;
+  onAttachFolder?: () => void;
+  attachFolderBusy?: boolean;
+  personalization?: {
+    entries: readonly SetupChecklistEntry[];
+    onSelect: (id: string) => void;
+  };
+}
+interface ThinkSidepanelSchedules<TRoutine extends ThinkRoutine = ThinkRoutine> {
+  routines: readonly TRoutine[];
+  selectedRoutineId: string | null;
+  onRunRoutine?: (routine: TRoutine) => void | Promise<void>;
+  onRoutineEnabledChange?: (routine: TRoutine, enabled: boolean) => void | Promise<void>;
+  onDeleteRoutine?: (routine: TRoutine) => void | Promise<void>;
+  error?: React.ReactNode;
+  /** Host-owned create/edit form. The side panel only frames it. */
+  editor?: React.ReactNode;
+}
+interface ThinkSidepanelAgentRun {
+  title: string;
+  running?: boolean;
+  onCancel?: () => void;
+}
+interface ThinkSidepanelIdentity {
+  email?: string;
+  liveProfile: string;
+  assignedAccount: string;
+  managed?: boolean;
+  canBind?: boolean;
+  onBind?: () => void | Promise<void>;
+  onUnbind?: () => void | Promise<void>;
+}
+interface ThinkSidepanelProps<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage> extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  sourceKey: string;
+  view: ThinkSidepanelView;
+  thread?: {
+    id: string;
+    title: string;
+  };
+  threads?: readonly ThinkThreadItem[];
+  conversation?: ThinkFullAppConversation<AgentT, State, MessageT>;
+  workspace?: ThinkFullAppProps<AgentT, State, MessageT>["workspace"];
+  plugins?: ThinkFullAppProps<AgentT, State, MessageT>["plugins"];
+  messages?: ThinkFullAppProps<AgentT, State, MessageT>["messages"];
+  /** App-authored TanStack Link for a thread, view, routine, or agent-run destination. */
+  renderLink: (destination: ThinkSidepanelDestination) => React.ReactElement;
+  onDeleteThread?: (thread: ThinkThreadItem) => void | Promise<void>;
+  follow?: ThinkSidepanelFollow;
+  companion?: ThinkSidepanelCompanion;
+  passkeyVault?: ThinkSidepanelPasskeyVault;
+  identity?: ThinkSidepanelIdentity;
+  onModel?: () => void;
+  onSignOut?: () => void;
+  brand: {
+    logo: React.ReactNode;
+    name: string;
+  };
+  appBarLeading?: React.ReactNode;
+  status?: ThinkSidepanelStatus;
+  connectingLabel?: string;
+  modelSetup?: ThinkSidepanelModelSetup;
+  start?: ThinkSidepanelStart;
+  schedules?: ThinkSidepanelSchedules;
+  agentRun?: ThinkSidepanelAgentRun;
+  /** Host-owned live view. The side panel only frames it. */
+  live?: React.ReactNode;
+}
+/**
+ * The employee side panel: icon-and-tooltip chrome, start screen, schedules,
+ * conversation plus workbench. Hosts hydrate conversation, workspace,
+ * plugins, and callables. Storybook is the place to iterate the chrome.
+ */
+declare function ThinkSidepanel<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage>({
+  agentRun,
+  appBarLeading,
+  brand,
+  className,
+  companion,
+  connectingLabel,
+  conversation,
+  follow,
+  identity,
+  live,
+  messages,
+  modelSetup,
+  onDeleteThread,
+  onModel,
+  onSignOut,
+  passkeyVault,
+  plugins,
+  renderLink,
+  schedules,
+  sourceKey,
+  start,
+  status,
+  thread,
+  threads,
+  view,
+  workspace,
+  ...props
+}: ThinkSidepanelProps<AgentT, State, MessageT>): React.JSX.Element;
+//#endregion
+export { ThinkSidepanel, ThinkSidepanelAgentRun, ThinkSidepanelCompanion, ThinkSidepanelConnection, ThinkSidepanelDestination, ThinkSidepanelFollow, ThinkSidepanelIdentity, ThinkSidepanelModelSetup, ThinkSidepanelPasskeyVault, ThinkSidepanelProps, ThinkSidepanelSchedules, ThinkSidepanelStart, ThinkSidepanelStatus, ThinkSidepanelView };