@mcp-b/react-components 0.11.0 → 0.13.0

package/dist/components/ThinkFullApp.d.ts

@@ -1,41 +1,44 @@
 import { WorkspaceSource } from "./WorkspaceExplorer.js";
 import { ThinkChatMessagesProps } from "./ThinkChat.js";
-import { ThinkExecutionAgent, ThinkExecutionWorkbench, ThinkExecutionWorkbenchProps, ThinkExecutionWorkbenchSource } from "./ThinkExecutionWorkbench.js";
 import * as React from "react";
 import { useAgentChat } from "@cloudflare/think/react";
 import { UIMessage } from "ai";
 import { useAgent } from "agents/react";
 import { Think } from "@cloudflare/think";
 
+//#region src/components/_internal/think-agent.d.ts
+/** Shared complete Think specialization for stateful React agent hooks. */
+type ThinkAgent<State = unknown> = Think<object, State>;
+//#endregion
 //#region src/components/ThinkFullApp.d.ts
-type ThinkFullAppAgent<State = unknown> = Think<object, State>;
+type ThinkFullAppAgent<State = unknown> = ThinkAgent<State>;
 type ThinkFullAppWorkbenchView = "files" | "execution" | (string & {});
-interface ThinkFullAppPanelContext<AgentT extends ThinkFullAppAgent<State>, State = unknown> {
+interface ThinkFullAppPanelContext<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage> {
   agent: ReturnType<typeof useAgent<AgentT, State>>;
-  chat: ReturnType<typeof useAgentChat<State, UIMessage>>;
+  chat: ReturnType<typeof useAgentChat<State, MessageT>>;
   workspace?: WorkspaceSource;
   workspaceRoot?: string;
 }
-interface ThinkFullAppPanel<AgentT extends ThinkFullAppAgent<State>, State = unknown> {
+interface ThinkFullAppPanel<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage> {
   /** Unique panel id used by `workbenchView`; custom panels should not reuse built-in ids. */
   id: ThinkFullAppWorkbenchView;
   label: string;
   icon: React.ReactNode;
-  render: (context: ThinkFullAppPanelContext<AgentT, State>) => React.ReactNode;
+  render: (context: ThinkFullAppPanelContext<AgentT, State, MessageT>) => React.ReactNode;
 }
-interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unknown> extends React.HTMLAttributes<HTMLDivElement> {
+interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage> extends React.HTMLAttributes<HTMLDivElement> {
   /** The `useAgent` value from `agents/react`; its stub drives approvals and execution records. */
   agent: ReturnType<typeof useAgent<AgentT, State>>;
   /** The `useAgentChat` value from `@cloudflare/think/react` used by the chat surface. */
-  chat: ReturnType<typeof useAgentChat<State, UIMessage>>;
+  chat: ReturnType<typeof useAgentChat<State, MessageT>>;
   /** Optional workspace source shown in the file explorer pane. */
   workspace?: WorkspaceSource;
   /** Root path passed to the workspace explorer. */
   workspaceRoot?: string;
   /** Message rendering labels and approval overrides for ThinkChat. */
-  messages?: ThinkChatMessagesProps;
+  messages?: ThinkChatMessagesProps<MessageT>;
   /** Extra workbench panels appended after the built-in Files and Execution panels. */
-  workbenchPanels?: readonly ThinkFullAppPanel<AgentT, State>[];
+  workbenchPanels?: readonly ThinkFullAppPanel<AgentT, State, MessageT>[];
   /** Optional parent-owned thread picker/sidebar rendered beside the selected child app. */
   threadSidebar?: React.ReactNode;
   /** Whether the thread sidebar is open. Omit for internal state. */
@@ -52,7 +55,7 @@ interface ThinkFullAppProps<AgentT extends ThinkFullAppAgent<State>, State = unk
   onWorkbenchViewChange?: (view: ThinkFullAppWorkbenchView) => void;
 }
 /** Combines ThinkChat with an optional resizable workbench shell. */
-declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = unknown>({
+declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = unknown, MessageT extends UIMessage = UIMessage>({
   agent,
   chat,
   className,
@@ -70,8 +73,8 @@ declare function ThinkFullApp<AgentT extends ThinkFullAppAgent<State>, State = u
   workspace,
   workspaceRoot,
   ...props
-}: ThinkFullAppProps<AgentT, State> & {
+}: ThinkFullAppProps<AgentT, State, MessageT> & {
   ref?: React.Ref<HTMLDivElement>;
 }): React.JSX.Element;
 //#endregion
-export { type ThinkExecutionAgent, ThinkExecutionWorkbench, type ThinkExecutionWorkbenchProps, type ThinkExecutionWorkbenchSource, ThinkFullApp, ThinkFullAppAgent, ThinkFullAppPanel, ThinkFullAppPanelContext, ThinkFullAppProps, ThinkFullAppWorkbenchView };
+export { ThinkFullApp, ThinkFullAppAgent, ThinkFullAppPanel, ThinkFullAppPanelContext, ThinkFullAppProps, ThinkFullAppWorkbenchView };

package/dist/components/ThinkFullApp.js

@@ -1,12 +1,13 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { P as TerminalIcon, h as FileIcon, n as ArrowLeftIcon } from "../icons-D2Q5n5C1.js";
+import { I as TerminalIcon, h as FileIcon, n as ArrowLeftIcon } from "../icons-Ba9THQKz.js";
+import { Separator } from "./Separator.js";
 import { Button } from "./Button.js";
-import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
-import { ToggleGroup, ToggleGroupItem } from "./ToggleGroup.js";
+import { Tooltip } from "./Tooltip.js";
+import { ToggleGroup } from "./ToggleGroup.js";
+import { o as useThinkPendingApprovals, s as resolveThinkApprovalProps, t as ThinkChat } from "../ThinkChat-7DQ2CogF.js";
 import { WorkspaceExplorer, useWorkspace } from "./WorkspaceExplorer.js";
-import { ThinkChat, useThinkPendingApprovals } from "./ThinkChat.js";
 import { ThinkExecutionWorkbench } from "./ThinkExecutionWorkbench.js";
-import { ThinkThreadShell } from "./ThinkThreadPicker.js";
+import { ThinkThreadShell } from "./ThinkThreadShell.js";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ThinkFullApp.tsx
@@ -27,9 +28,9 @@ function beginWorkbenchPanelResize(event, current, apply) {
 		window.removeEventListener("pointermove", onMove);
 		window.removeEventListener("pointerup", onUp);
 		window.removeEventListener("pointercancel", onUp);
-		document.body.classList.remove("is-resizing-columns");
+		document.body.classList.remove("is-resizing-think-full-app");
 	};
-	document.body.classList.add("is-resizing-columns");
+	document.body.classList.add("is-resizing-think-full-app");
 	window.addEventListener("pointermove", onMove);
 	window.addEventListener("pointerup", onUp);
 	window.addEventListener("pointercancel", onUp);
@@ -56,20 +57,20 @@ function WorkspacePanel({ source, root }) {
 	});
 }
 function WorkbenchViewItem({ children, label, value }) {
-	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(ToggleGroupItem, {
+	return /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: /* @__PURE__ */ jsx(ToggleGroup.Item, {
 		type: "button",
 		className: "think-full-app__workbench-view-item",
 		value,
 		"aria-label": label,
 		children
-	}) }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, {
+	}) }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
 		side: "bottom",
 		sideOffset: 6,
-		children: /* @__PURE__ */ jsx(TooltipPopup, { children: label })
+		children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: label })
 	}) })] });
 }
 function WorkbenchViewSwitch({ panels, value, onValueChange }) {
-	return /* @__PURE__ */ jsx(ToggleGroup, {
+	return /* @__PURE__ */ jsx(ToggleGroup.Root, {
 		className: "think-full-app__workbench-view-switch",
 		size: "sm",
 		value: [value],
@@ -88,13 +89,24 @@ function WorkbenchViewSwitch({ panels, value, onValueChange }) {
 /** Combines ThinkChat with an optional resizable workbench shell. */
 function ThinkFullApp({ agent, chat, className, defaultWorkbenchView, defaultThreadSidebarOpen, messages, onThreadSidebarOpenChange, onWorkbenchViewChange, ref, style, threadSidebar, threadSidebarOpen, workbenchPanels, workbenchView, workspace, workspaceRoot, ...props }) {
 	const approvals = useThinkPendingApprovals(agent.stub, `${chat.messages.length}:${chat.status}`);
-	const resolvedMessages = React.useMemo(() => ({
-		...messages,
-		executionApprovals: messages?.executionApprovals ?? approvals.executionApprovals,
-		pendingApprovals: messages?.pendingApprovals ?? approvals.pendingApprovals
-	}), [
-		approvals.executionApprovals,
+	const resolvedMessages = React.useMemo(() => {
+		const approvalProps = resolveThinkApprovalProps({
+			thinkStub: messages?.thinkStub,
+			pendingApprovals: messages?.pendingApprovals,
+			onExecutionSettled: messages?.onExecutionSettled
+		}, {
+			thinkStub: agent.stub,
+			pendingApprovals: approvals.pendingApprovals,
+			onExecutionSettled: approvals.refreshPendingApprovals
+		});
+		return {
+			...messages,
+			...approvalProps
+		};
+	}, [
+		agent.stub,
 		approvals.pendingApprovals,
+		approvals.refreshPendingApprovals,
 		messages
 	]);
 	const [mobileView, setMobileView] = React.useState("chat");
@@ -160,9 +172,7 @@ function ThinkFullApp({ agent, chat, className, defaultWorkbenchView, defaultThr
 	const app = /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: cx("think-full-app", className),
-		"data-has-files": hasWorkspace ? "true" : "false",
 		"data-has-thread-sidebar": threadSidebar ? "true" : "false",
-		"data-has-workbench": "true",
 		"data-has-workbench-topbar": showWorkbenchViewSwitch ? "true" : "false",
 		"data-mobile-view": activeMobileView,
 		style: rootStyle,
@@ -220,15 +230,15 @@ function ThinkFullApp({ agent, chat, className, defaultWorkbenchView, defaultThr
 					})
 				})
 			}),
-			/* @__PURE__ */ jsx("button", {
-				type: "button",
-				role: "separator",
+			/* @__PURE__ */ jsx(Separator, {
+				decorative: false,
+				orientation: "vertical",
+				tabIndex: 0,
 				"aria-label": "Resize workbench panel",
-				"aria-orientation": "vertical",
 				"aria-valuemin": workbenchPanelMinWidth,
 				"aria-valuemax": workbenchPanelMaxWidth,
 				"aria-valuenow": workbenchPanelWidth,
-				className: "think-full-app__resizer",
+				className: "think-resize-handle think-full-app__resizer",
 				onPointerDown: (event) => beginWorkbenchPanelResize(event, workbenchPanelWidth, setWorkbenchPanelWidth),
 				onKeyDown: (event) => {
 					if (event.key === "ArrowLeft") {
@@ -270,4 +280,4 @@ function ThinkFullApp({ agent, chat, className, defaultWorkbenchView, defaultThr
 	});
 }
 //#endregion
-export { ThinkExecutionWorkbench, ThinkFullApp };
+export { ThinkFullApp };

package/dist/components/ThinkThreadPicker.d.ts

@@ -33,16 +33,6 @@ interface ThinkThreadPickerProps extends Omit<React.HTMLAttributes<HTMLElement>,
   /** Accessible label for the list navigation. */
   "aria-label"?: string;
 }
-interface ThinkThreadShellProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Thread picker or app-owned sidebar shown beside the selected child shell. */
-  sidebar: React.ReactNode;
-  /** Whether the thread drawer is open. Omit for internal state. */
-  sidebarOpen?: boolean;
-  /** Initial thread drawer state when `sidebarOpen` is uncontrolled. */
-  defaultSidebarOpen?: boolean;
-  /** Called when the thread drawer is opened or closed. */
-  onSidebarOpenChange?: (open: boolean) => void;
-}
 /**
  * Thread roster UI for sub-agent chat apps.
  *
@@ -64,25 +54,5 @@ declare function ThinkThreadPicker({
 }: ThinkThreadPickerProps & {
   ref?: React.Ref<HTMLElement>;
 }): React.JSX.Element;
-/**
- * Layout wrapper for a thread picker beside one selected `ThinkFullApp`.
- *
- * Mobile keeps the drawer at about 80% width so the selected chat remains
- * visible as a preview. It only owns layout; callers still own the parent agent,
- * selected child agent, chat hook, and shared workspace.
- */
-declare function ThinkThreadShell({
-  sidebar,
-  sidebarOpen,
-  defaultSidebarOpen,
-  onSidebarOpenChange,
-  className,
-  children,
-  ref,
-  style,
-  ...props
-}: ThinkThreadShellProps & {
-  ref?: React.Ref<HTMLDivElement>;
-}): React.JSX.Element;
 //#endregion
-export { ThinkThreadItem, ThinkThreadPicker, ThinkThreadPickerProps, ThinkThreadShell, ThinkThreadShellProps };
+export { ThinkThreadItem, ThinkThreadPicker, ThinkThreadPickerProps };

package/dist/components/ThinkThreadPicker.js

@@ -1,42 +1,10 @@
 import { t as cx } from "../class-names-9UtZwb0J.js";
-import { M as SpinnerIcon, O as PlusIcon, j as SidebarIcon, u as DotIcon } from "../icons-D2Q5n5C1.js";
+import { N as SpinnerIcon, k as PlusIcon, u as DotIcon } from "../icons-Ba9THQKz.js";
 import { Button } from "./Button.js";
-import { Tooltip, TooltipPopup, TooltipPortal, TooltipPositioner, TooltipTrigger } from "./Tooltip.js";
 import { ScrollArea } from "./ScrollArea.js";
-import * as React from "react";
+import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/ThinkThreadPicker.tsx
-const threadSidebarDefaultWidth = 256;
-const threadSidebarMinWidth = 224;
-const threadSidebarMaxWidth = 384;
-const threadSidebarKeyboardStep = 24;
-function useControllableSidebar({ sidebarOpen, defaultSidebarOpen, onSidebarOpenChange }) {
-	const [innerOpen, setInnerOpen] = React.useState(defaultSidebarOpen ?? true);
-	return [sidebarOpen ?? innerOpen, React.useCallback((next) => {
-		if (sidebarOpen === void 0) setInnerOpen(next);
-		onSidebarOpenChange?.(next);
-	}, [sidebarOpen, onSidebarOpenChange])];
-}
-function clampThreadSidebarWidth(width) {
-	return Math.min(threadSidebarMaxWidth, Math.max(threadSidebarMinWidth, width));
-}
-function beginThreadSidebarResize(event, current, apply) {
-	event.preventDefault();
-	const startX = event.clientX;
-	const onMove = (move) => {
-		apply(clampThreadSidebarWidth(current + move.clientX - startX));
-	};
-	const onUp = () => {
-		window.removeEventListener("pointermove", onMove);
-		window.removeEventListener("pointerup", onUp);
-		window.removeEventListener("pointercancel", onUp);
-		document.body.classList.remove("is-resizing-columns");
-	};
-	document.body.classList.add("is-resizing-columns");
-	window.addEventListener("pointermove", onMove);
-	window.addEventListener("pointerup", onUp);
-	window.addEventListener("pointercancel", onUp);
-}
 function toThreadDate(value) {
 	if (value === void 0) return void 0;
 	const date = value instanceof Date ? value : new Date(value);
@@ -116,38 +84,35 @@ function ThinkThreadPicker({ threads, selectedId, onSelect, onCreate, className,
 								const timestamp = formatThreadTimestamp(thread);
 								const statusLabel = formatThreadStatus(thread);
 								const busy = isThreadBusy(thread.status);
-								return /* @__PURE__ */ jsx("li", {
-									className: "think-thread-picker__item",
-									children: /* @__PURE__ */ jsxs(Button, {
-										type: "button",
-										variant: "ghost",
-										color: "neutral",
-										size: "sm",
-										className: "think-thread-picker__thread",
-										"data-selected": thread.id === selectedId ? "true" : "false",
-										"data-status": thread.status,
-										"aria-current": thread.id === selectedId ? "page" : void 0,
-										onClick: () => onSelect(thread.id),
-										children: [/* @__PURE__ */ jsx("span", {
-											className: "think-thread-picker__thread-title",
-											children: thread.title
-										}), statusLabel ? /* @__PURE__ */ jsx("span", {
-											className: "think-thread-picker__thread-status",
-											role: "img",
-											"aria-label": statusLabel,
-											title: statusLabel,
-											children: busy ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(DotIcon, {})
-										}) : timestamp?.date ? /* @__PURE__ */ jsx("time", {
-											className: "think-thread-picker__thread-time",
-											dateTime: timestamp.date.toISOString(),
-											title: timestamp.date.toLocaleString(),
-											children: timestamp.label
-										}) : timestamp ? /* @__PURE__ */ jsx("span", {
-											className: "think-thread-picker__thread-time",
-											children: timestamp.label
-										}) : null]
-									})
-								}, thread.id);
+								return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(Button, {
+									type: "button",
+									variant: "ghost",
+									color: "neutral",
+									size: "sm",
+									className: "think-thread-picker__thread",
+									"data-selected": thread.id === selectedId ? "true" : "false",
+									"data-status": thread.status,
+									"aria-current": thread.id === selectedId ? "page" : void 0,
+									onClick: () => onSelect(thread.id),
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "think-thread-picker__thread-title",
+										children: thread.title
+									}), statusLabel ? /* @__PURE__ */ jsx("span", {
+										className: "think-thread-picker__thread-status",
+										role: "img",
+										"aria-label": statusLabel,
+										title: statusLabel,
+										children: busy ? /* @__PURE__ */ jsx(SpinnerIcon, {}) : /* @__PURE__ */ jsx(DotIcon, {})
+									}) : timestamp?.date ? /* @__PURE__ */ jsx("time", {
+										className: "think-thread-picker__thread-time",
+										dateTime: timestamp.date.toISOString(),
+										title: timestamp.date.toLocaleString(),
+										children: timestamp.label
+									}) : timestamp ? /* @__PURE__ */ jsx("span", {
+										className: "think-thread-picker__thread-time",
+										children: timestamp.label
+									}) : null]
+								}) }, thread.id);
 							})
 						}) : /* @__PURE__ */ jsx("p", {
 							className: "think-thread-picker__empty",
@@ -174,109 +139,5 @@ function ThinkThreadPicker({ threads, selectedId, onSelect, onCreate, className,
 		]
 	});
 }
-/**
-* Layout wrapper for a thread picker beside one selected `ThinkFullApp`.
-*
-* Mobile keeps the drawer at about 80% width so the selected chat remains
-* visible as a preview. It only owns layout; callers still own the parent agent,
-* selected child agent, chat hook, and shared workspace.
-*/
-function ThinkThreadShell({ sidebar, sidebarOpen, defaultSidebarOpen, onSidebarOpenChange, className, children, ref, style, ...props }) {
-	const sidebarId = React.useId();
-	const [isSidebarOpen, setSidebarOpen] = useControllableSidebar({
-		sidebarOpen,
-		defaultSidebarOpen,
-		onSidebarOpenChange
-	});
-	const [sidebarWidth, setSidebarWidth] = React.useState(threadSidebarDefaultWidth);
-	const toggleLabel = isSidebarOpen ? "Hide threads" : "Show threads";
-	const rootStyle = {
-		...style,
-		"--think-thread-sidebar-w": `${sidebarWidth}px`
-	};
-	const resizeThreadSidebarBy = (delta) => {
-		setSidebarWidth((current) => clampThreadSidebarWidth(current + delta));
-	};
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		className: cx("think-thread-shell", className),
-		style: rootStyle,
-		...props,
-		children: /* @__PURE__ */ jsxs("div", {
-			className: "think-thread-shell__frame",
-			"data-sidebar-open": isSidebarOpen ? "true" : "false",
-			children: [
-				/* @__PURE__ */ jsx("div", {
-					className: "think-thread-shell__toolbar",
-					role: "toolbar",
-					"aria-label": "Thread controls",
-					children: /* @__PURE__ */ jsx("div", {
-						className: "think-thread-shell__panel-toggle",
-						children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: /* @__PURE__ */ jsx(Button, {
-							type: "button",
-							variant: "ghost",
-							color: "neutral",
-							size: "icon",
-							"aria-label": toggleLabel,
-							"aria-controls": sidebarId,
-							"aria-expanded": isSidebarOpen,
-							"aria-pressed": isSidebarOpen,
-							"data-selected": isSidebarOpen,
-							onClick: () => setSidebarOpen(!isSidebarOpen),
-							children: /* @__PURE__ */ jsx(SidebarIcon, {})
-						}) }), /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(TooltipPositioner, {
-							side: "bottom",
-							sideOffset: 6,
-							children: /* @__PURE__ */ jsx(TooltipPopup, { children: toggleLabel })
-						}) })] })
-					})
-				}),
-				isSidebarOpen ? /* @__PURE__ */ jsx("button", {
-					type: "button",
-					role: "separator",
-					"aria-label": "Resize threads panel",
-					"aria-orientation": "vertical",
-					"aria-valuemin": threadSidebarMinWidth,
-					"aria-valuemax": threadSidebarMaxWidth,
-					"aria-valuenow": sidebarWidth,
-					className: "think-thread-shell__resizer",
-					onPointerDown: (event) => beginThreadSidebarResize(event, sidebarWidth, setSidebarWidth),
-					onKeyDown: (event) => {
-						if (event.key === "ArrowLeft") {
-							event.preventDefault();
-							resizeThreadSidebarBy(-24);
-						} else if (event.key === "ArrowRight") {
-							event.preventDefault();
-							resizeThreadSidebarBy(threadSidebarKeyboardStep);
-						} else if (event.key === "Home") {
-							event.preventDefault();
-							setSidebarWidth(threadSidebarMinWidth);
-						} else if (event.key === "End") {
-							event.preventDefault();
-							setSidebarWidth(threadSidebarMaxWidth);
-						}
-					}
-				}) : null,
-				/* @__PURE__ */ jsx("div", {
-					id: sidebarId,
-					className: "think-thread-shell__sidebar",
-					"aria-hidden": isSidebarOpen ? void 0 : true,
-					inert: isSidebarOpen ? void 0 : true,
-					children: sidebar
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "think-thread-shell__main",
-					children
-				}),
-				isSidebarOpen ? /* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: "think-thread-shell__peek",
-					"aria-label": "Show selected thread",
-					onClick: () => setSidebarOpen(false)
-				}) : null
-			]
-		})
-	});
-}
 //#endregion
-export { ThinkThreadPicker, ThinkThreadShell };
+export { ThinkThreadPicker };

package/dist/components/ThinkThreadShell.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+
+//#region src/components/ThinkThreadShell.d.ts
+interface ThinkThreadShellProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Thread picker or app-owned sidebar shown beside the selected child shell. */
+  sidebar: React.ReactNode;
+  /** Whether the thread drawer is open. Omit for internal state. */
+  sidebarOpen?: boolean;
+  /** Initial thread drawer state when `sidebarOpen` is uncontrolled. */
+  defaultSidebarOpen?: boolean;
+  /** Called when the thread drawer is opened or closed. */
+  onSidebarOpenChange?: (open: boolean) => void;
+}
+/**
+ * Layout wrapper for a thread picker beside one selected `ThinkFullApp`.
+ *
+ * Mobile keeps the drawer at about 80% width so the selected chat remains
+ * visible as a preview. It only owns layout; callers still own the parent agent,
+ * selected child agent, chat hook, and shared workspace.
+ */
+declare function ThinkThreadShell({
+  sidebar,
+  sidebarOpen,
+  defaultSidebarOpen,
+  onSidebarOpenChange,
+  className,
+  children,
+  ref,
+  style,
+  ...props
+}: ThinkThreadShellProps & {
+  ref?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+//#endregion
+export { ThinkThreadShell, ThinkThreadShellProps };

package/dist/components/ThinkThreadShell.js

@@ -0,0 +1,146 @@
+import { t as cx } from "../class-names-9UtZwb0J.js";
+import { M as SidebarIcon } from "../icons-Ba9THQKz.js";
+import { Separator } from "./Separator.js";
+import { Button } from "./Button.js";
+import { Tooltip } from "./Tooltip.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ThinkThreadShell.tsx
+const threadSidebarDefaultWidth = 256;
+const threadSidebarMinWidth = 224;
+const threadSidebarMaxWidth = 384;
+const threadSidebarKeyboardStep = 24;
+function useControllableSidebar({ sidebarOpen, defaultSidebarOpen, onSidebarOpenChange }) {
+	const [innerOpen, setInnerOpen] = React.useState(defaultSidebarOpen ?? true);
+	return [sidebarOpen ?? innerOpen, React.useCallback((next) => {
+		if (sidebarOpen === void 0) setInnerOpen(next);
+		onSidebarOpenChange?.(next);
+	}, [sidebarOpen, onSidebarOpenChange])];
+}
+function clampThreadSidebarWidth(width) {
+	return Math.min(threadSidebarMaxWidth, Math.max(threadSidebarMinWidth, width));
+}
+function beginThreadSidebarResize(event, current, apply) {
+	event.preventDefault();
+	const startX = event.clientX;
+	const onMove = (move) => {
+		apply(clampThreadSidebarWidth(current + move.clientX - startX));
+	};
+	const onUp = () => {
+		window.removeEventListener("pointermove", onMove);
+		window.removeEventListener("pointerup", onUp);
+		window.removeEventListener("pointercancel", onUp);
+		document.body.classList.remove("is-resizing-think-thread-shell");
+	};
+	document.body.classList.add("is-resizing-think-thread-shell");
+	window.addEventListener("pointermove", onMove);
+	window.addEventListener("pointerup", onUp);
+	window.addEventListener("pointercancel", onUp);
+}
+/**
+* Layout wrapper for a thread picker beside one selected `ThinkFullApp`.
+*
+* Mobile keeps the drawer at about 80% width so the selected chat remains
+* visible as a preview. It only owns layout; callers still own the parent agent,
+* selected child agent, chat hook, and shared workspace.
+*/
+function ThinkThreadShell({ sidebar, sidebarOpen, defaultSidebarOpen, onSidebarOpenChange, className, children, ref, style, ...props }) {
+	const sidebarId = React.useId();
+	const [isSidebarOpen, setSidebarOpen] = useControllableSidebar({
+		sidebarOpen,
+		defaultSidebarOpen,
+		onSidebarOpenChange
+	});
+	const [sidebarWidth, setSidebarWidth] = React.useState(threadSidebarDefaultWidth);
+	const toggleLabel = isSidebarOpen ? "Hide threads" : "Show threads";
+	const rootStyle = {
+		...style,
+		"--think-thread-sidebar-w": `${sidebarWidth}px`
+	};
+	const resizeThreadSidebarBy = (delta) => {
+		setSidebarWidth((current) => clampThreadSidebarWidth(current + delta));
+	};
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx("think-thread-shell", className),
+		style: rootStyle,
+		...props,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "think-thread-shell__frame",
+			"data-sidebar-open": isSidebarOpen ? "true" : "false",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "think-thread-shell__toolbar",
+					role: "toolbar",
+					"aria-label": "Thread controls",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "think-thread-shell__panel-toggle",
+						children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, { render: /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							color: "neutral",
+							size: "icon",
+							"aria-label": toggleLabel,
+							"aria-controls": sidebarId,
+							"aria-expanded": isSidebarOpen,
+							"aria-pressed": isSidebarOpen,
+							"data-selected": isSidebarOpen,
+							onClick: () => setSidebarOpen(!isSidebarOpen),
+							children: /* @__PURE__ */ jsx(SidebarIcon, {})
+						}) }), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Positioner, {
+							side: "bottom",
+							sideOffset: 6,
+							children: /* @__PURE__ */ jsx(Tooltip.Popup, { children: toggleLabel })
+						}) })] })
+					})
+				}),
+				isSidebarOpen ? /* @__PURE__ */ jsx(Separator, {
+					decorative: false,
+					orientation: "vertical",
+					tabIndex: 0,
+					"aria-label": "Resize threads panel",
+					"aria-valuemin": threadSidebarMinWidth,
+					"aria-valuemax": threadSidebarMaxWidth,
+					"aria-valuenow": sidebarWidth,
+					className: "think-resize-handle think-thread-shell__resizer",
+					onPointerDown: (event) => beginThreadSidebarResize(event, sidebarWidth, setSidebarWidth),
+					onKeyDown: (event) => {
+						if (event.key === "ArrowLeft") {
+							event.preventDefault();
+							resizeThreadSidebarBy(-24);
+						} else if (event.key === "ArrowRight") {
+							event.preventDefault();
+							resizeThreadSidebarBy(threadSidebarKeyboardStep);
+						} else if (event.key === "Home") {
+							event.preventDefault();
+							setSidebarWidth(threadSidebarMinWidth);
+						} else if (event.key === "End") {
+							event.preventDefault();
+							setSidebarWidth(threadSidebarMaxWidth);
+						}
+					}
+				}) : null,
+				/* @__PURE__ */ jsx("div", {
+					id: sidebarId,
+					className: "think-thread-shell__sidebar",
+					"aria-hidden": isSidebarOpen ? void 0 : true,
+					inert: isSidebarOpen ? void 0 : true,
+					children: sidebar
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "think-thread-shell__main",
+					children
+				}),
+				isSidebarOpen ? /* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					color: "neutral",
+					className: "think-thread-shell__peek",
+					"aria-label": "Show selected thread",
+					onClick: () => setSidebarOpen(false)
+				}) : null
+			]
+		})
+	});
+}
+//#endregion
+export { ThinkThreadShell };