@mcp-b/react-components 0.41.0 → 0.43.0

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

@@ -1,7 +1,6 @@
 import { t as cx } from "../../class-names-BiMDVpUo.js";
-import { $ as WarningIcon, 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 { EmptyState } from "../foundations/EmptyState.js";
@@ -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
 	] });
 }
 /**
@@ -83,7 +69,7 @@ function RoutineTopBarActions({ appBarActions, busy, onDelete, editLink, onRun,
 * and `ThinkRoutineRuns`; consumers compose `ThinkRoutineForm` in their create
 * route and may also use these surfaces independently.
 */
-function ThinkRoutineLibrary({ appBarActions, appBarLeading, className, createRoutineLink, error: catalogError, onDeleteRoutine, onRoutineEnabledChange, onRunRoutine, renderEditRoutineLink, renderRoutineLink, renderRoutineDetail, renderRunLink, ref, routines, selectedRoutineId, showOwner = true, ...props }) {
+function ThinkRoutineLibrary({ bar, className, createRoutineLink, error: catalogError, onDeleteRoutine, onRoutineEnabledChange, onRunRoutine, renderEditRoutineLink, renderRoutineLink, renderRoutineDetail, renderRunLink, ref, routines, selectedRoutineId, showOwner = true, ...props }) {
 	const [busy, setBusy] = React.useState(false);
 	const [announcement, setAnnouncement] = React.useState("");
 	const [actionError, setActionError] = React.useState(null);
@@ -108,73 +94,65 @@ function ThinkRoutineLibrary({ appBarActions, appBarLeading, className, createRo
 		renderRunLink: renderRunLink ? (run) => renderRunLink(selectedRoutine, run) : void 0,
 		onEnabledChange: onRoutineEnabledChange ? (enabled) => void perform(() => onRoutineEnabledChange(selectedRoutine, enabled), `${selectedRoutine.name} ${enabled ? "activated" : "paused"}.`) : void 0
 	} : void 0;
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs(ResponsiveSidebarShell, {
 		ref,
 		className: cx("think-routine-library", className),
 		...props,
-		children: [
-			catalogError || actionError ? /* @__PURE__ */ jsxs("div", {
-				className: "think-routine-library__error",
-				role: "alert",
-				children: [/* @__PURE__ */ jsx(WarningIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", { children: catalogError || actionError })]
-			}) : null,
-			/* @__PURE__ */ jsx(ResponsiveSidebarShell, {
-				className: "think-routine-library__layout",
-				sidebarLabel: "schedules",
-				showMainLabel: "Show selected schedule",
-				topBarProps: { "aria-label": "Schedule controls" },
-				topBarLeading: appBarLeading,
-				topBarTitle: selectedRoutine?.name ?? "Schedules",
-				compactTitleTrigger: selectedRoutine ? /* @__PURE__ */ jsx("span", { children: selectedRoutine.name }) : void 0,
-				topBarTrailing: /* @__PURE__ */ jsx(RoutineTopBarActions, {
-					appBarActions,
-					busy,
-					routineName: selectedRoutine?.name ?? "schedule",
-					editLink: selectedRoutine && renderEditRoutineLink ? renderEditRoutineLink(selectedRoutine) : void 0,
-					onRun: selectedRoutine && onRunRoutine ? () => void perform(() => onRunRoutine(selectedRoutine), `Started ${selectedRoutine.name}.`) : void 0,
-					onDelete: selectedRoutine && onDeleteRoutine ? () => void perform(() => onDeleteRoutine(selectedRoutine), `Deleted ${selectedRoutine.name}.`) : void 0
-				}),
-				sidebar: ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ThinkRoutineBrowser, {
-					routines,
-					selectedRoutineId,
-					showOwner,
-					renderRoutineLink,
-					createRoutineLink,
-					onRoutineLinkClick: (event) => {
-						if (!isPlainPrimaryLinkActivation(event)) return;
-						closeSidebarOnCompact();
-					}
-				}),
-				children: /* @__PURE__ */ jsx("main", {
-					className: "think-routine-library__main",
-					children: detailProps ? /* @__PURE__ */ jsx(React.Fragment, { children: renderRoutineDetail ? renderRoutineDetail({
-						...detailProps,
-						defaultDetail: /* @__PURE__ */ jsx(ThinkRoutineDetail, {
-							...detailProps,
-							showOwner
-						})
-					}) : /* @__PURE__ */ jsx(ThinkRoutineDetail, {
-						...detailProps,
-						showOwner
-					}) }, detailProps.routine.id) : /* @__PURE__ */ jsx(EmptyState, {
-						className: "think-routine-library__empty-detail",
-						title: selectedRoutineId ? "Schedule unavailable" : routines.length ? "Select a schedule" : "No schedules yet",
-						description: routines.length ? "Select an available schedule." : "Create a schedule to run recurring Think prompts.",
-						children: !routines.length && createRoutineLink ? /* @__PURE__ */ jsx(NavigationLink, {
-							render: createRoutineLink,
-							className: buttonVariants({ color: "primary" }),
-							children: "Create schedule"
-						}) : null
-					})
+		sidebarLabel: "schedules",
+		showMainLabel: "Show selected schedule",
+		error: catalogError || actionError || void 0,
+		bar: {
+			...bar,
+			label: "Schedule controls",
+			title: bar?.title ?? selectedRoutine?.name ?? "Schedules",
+			compactTitleTrigger: selectedRoutine ? /* @__PURE__ */ jsx("span", { children: selectedRoutine.name }) : void 0,
+			actions: /* @__PURE__ */ jsx(RoutineTopBarActions, {
+				appBarActions: bar?.actions,
+				busy,
+				routineName: selectedRoutine?.name ?? "schedule",
+				editLink: selectedRoutine && renderEditRoutineLink ? renderEditRoutineLink(selectedRoutine) : void 0,
+				onRun: selectedRoutine && onRunRoutine ? () => void perform(() => onRunRoutine(selectedRoutine), `Started ${selectedRoutine.name}.`) : void 0,
+				onDelete: selectedRoutine && onDeleteRoutine ? () => void perform(() => onDeleteRoutine(selectedRoutine), `Deleted ${selectedRoutine.name}.`) : void 0
+			})
+		},
+		sidebar: ({ closeSidebarOnCompact }) => /* @__PURE__ */ jsx(ThinkRoutineBrowser, {
+			routines,
+			selectedRoutineId,
+			showOwner,
+			renderRoutineLink,
+			createRoutineLink,
+			onRoutineLinkClick: (event) => {
+				if (!isPlainPrimaryLinkActivation(event)) return;
+				closeSidebarOnCompact();
+			}
+		}),
+		children: [/* @__PURE__ */ jsx("main", {
+			className: "think-routine-library__main",
+			children: detailProps ? /* @__PURE__ */ jsx(React.Fragment, { children: renderRoutineDetail ? renderRoutineDetail({
+				...detailProps,
+				defaultDetail: /* @__PURE__ */ jsx(ThinkRoutineDetail, {
+					...detailProps,
+					showOwner
 				})
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "think-routine-library__status sigvelo-visually-hidden",
-				role: "status",
-				"aria-atomic": "true",
-				children: announcement
+			}) : /* @__PURE__ */ jsx(ThinkRoutineDetail, {
+				...detailProps,
+				showOwner
+			}) }, detailProps.routine.id) : /* @__PURE__ */ jsx(EmptyState, {
+				className: "think-routine-library__empty-detail",
+				title: selectedRoutineId ? "Schedule unavailable" : routines.length ? "Select a schedule" : "No schedules yet",
+				description: routines.length ? "Select an available schedule." : "Create a schedule to run recurring Think prompts.",
+				children: !routines.length && createRoutineLink ? /* @__PURE__ */ jsx(NavigationLink, {
+					render: createRoutineLink,
+					className: buttonVariants({ color: "primary" }),
+					children: "Create schedule"
+				}) : null
 			})
-		]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "think-routine-library__status sigvelo-visually-hidden",
+			role: "status",
+			"aria-atomic": "true",
+			children: announcement
+		})]
 	});
 }
 //#endregion

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 };