@btst/stack 4.2.0 → 4.4.0

package/src/plugins/ai-chat/client/components/chat-layout.tsx

@@ -6,7 +6,14 @@ import {
 	useEffect,
 	useRef,
 	type CSSProperties,
+	type ReactNode,
 } from "react";
+import { createPortal } from "react-dom";
+import {
+	Dialog,
+	DialogContent,
+	DialogTitle,
+} from "@workspace/ui/components/dialog";
 import { Button } from "@workspace/ui/components/button";
 import { Badge } from "@workspace/ui/components/badge";
 import {
@@ -19,6 +26,8 @@ import {
 	PanelLeftClose,
 	PanelLeft,
 	Sparkles,
+	Maximize2,
+	Minimize2,
 	Trash2,
 	X,
 } from "lucide-react";
@@ -67,10 +76,12 @@ interface ChatLayoutBaseProps {
 interface ChatLayoutWidgetProps extends ChatLayoutBaseProps {
 	/** Widget mode: compact embeddable panel with a floating trigger button */
 	layout: "widget";
-	/** Height of the widget panel. Default: `"min(600px, calc(100dvh - 112px))"` */
+	/** Height of the widget panel. Default: `"min(640px, calc(100dvh - 112px))"` */
 	widgetHeight?: string | number;
-	/** Width of the widget panel. Default: `"min(380px, calc(100vw - 32px))"` */
+	/** Width of the widget panel. Default: `"min(440px, calc(100vw - 32px))"` */
 	widgetWidth?: string | number;
+	/** Show a button to expand the widget to the viewport. Default: false. Escape restores the compact size. */
+	expandable?: boolean;
 	/** Fix the widget to the bottom right. Default: false (embedded). Override offsets with className or style. */
 	floating?: boolean;
 	/** Optional dismissible introduction shown while the widget is closed. */
@@ -91,6 +102,8 @@ interface ChatLayoutWidgetProps extends ChatLayoutBaseProps {
 	 * so that the built-in button does not appear alongside your own UI.
 	 */
 	showTrigger?: boolean;
+	/** Icon shown in the closed widget's trigger button. Defaults to Sparkles. */
+	triggerIcon?: ReactNode;
 }
 
 interface ChatLayoutFullProps extends ChatLayoutBaseProps {
@@ -139,16 +152,17 @@ function ChatLayoutContent(props: ChatLayoutProps) {
 	// Widget-specific props — TypeScript narrows props to ChatLayoutWidgetProps here
 	const widgetHeight =
 		props.layout === "widget"
-			? (props.widgetHeight ?? "min(600px, calc(100dvh - 112px))")
+			? (props.widgetHeight ?? "min(640px, calc(100dvh - 112px))")
 			: undefined;
 	const widgetWidth =
 		props.layout === "widget"
-			? (props.widgetWidth ?? "min(380px, calc(100vw - 32px))")
+			? (props.widgetWidth ?? "min(440px, calc(100vw - 32px))")
 			: undefined;
 	const defaultOpen =
 		props.layout === "widget" ? (props.defaultOpen ?? false) : false;
 	const showTrigger =
 		props.layout === "widget" ? (props.showTrigger ?? true) : true;
+	const triggerIcon = props.layout === "widget" ? props.triggerIcon : undefined;
 
 	const [sidebarOpen, setSidebarOpen] = useState(true);
 	const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
@@ -156,6 +170,40 @@ function ChatLayoutContent(props: ChatLayoutProps) {
 	const [chatResetKey, setChatResetKey] = useState(0);
 	// Widget open/closed state — starts with defaultOpen value
 	const [widgetOpen, setWidgetOpen] = useState(defaultOpen);
+	const [expanded, setExpanded] = useState(false);
+	const expandable = props.layout === "widget" && props.expandable === true;
+	const widgetExpanded = expandable && expanded && widgetOpen;
+	useEffect(() => {
+		if (!expandable) setExpanded(false);
+	}, [expandable]);
+	const compactPanelRef = useRef<HTMLDivElement>(null);
+	const triggerRef = useRef<HTMLButtonElement>(null);
+	const expandRef = useRef<HTMLButtonElement>(null);
+	const [panelContainer, setPanelContainer] = useState<HTMLDivElement | null>(
+		null,
+	);
+	const expandLabel = widgetExpanded
+		? tr("A11Y_COLLAPSE_CHAT", "aiChat.a11y.collapseChat", "Collapse chat")
+		: tr("A11Y_EXPAND_CHAT", "aiChat.a11y.expandChat", "Expand chat");
+
+	useEffect(() => {
+		if (layout !== "widget") return;
+		const container = document.createElement("div");
+		container.className = "flex h-full min-h-0 flex-col";
+		compactPanelRef.current?.appendChild(container);
+		setPanelContainer(container);
+		return () => container.remove();
+	}, [layout]);
+	// The portal target stays the same; only its DOM parent changes. This keeps
+	// the draft, attachments and active stream mounted while Dialog owns modality.
+	const mountExpandedPanel = useCallback(
+		(node: HTMLDivElement | null) => {
+			if (panelContainer) {
+				(node ?? compactPanelRef.current)?.appendChild(panelContainer);
+			}
+		},
+		[panelContainer],
+	);
 	// Key to force widget ChatInterface remount on clear
 	const [widgetResetKey, setWidgetResetKey] = useState(0);
 	// Only mount the widget ChatInterface after the widget has been opened at least once.
@@ -243,90 +291,167 @@ function ChatLayoutContent(props: ChatLayoutProps) {
 						</Button>
 					</div>
 				)}
-				{/* Chat panel — always mounted to preserve conversation state, hidden when closed */}
+				{/* Compact panel remains available when the fullscreen dialog closes. */}
 				<div
+					ref={compactPanelRef}
+					role="dialog"
+					tabIndex={-1}
+					aria-label={tr("A11Y_CHAT_TITLE", "aiChat.a11y.title", "AI Chat")}
 					className={cn(
-						"flex flex-col border rounded-xl overflow-hidden bg-background shadow-xl",
-						widgetOpen ? "flex" : "hidden",
+						"overflow-hidden rounded-xl border bg-background shadow-xl",
+						(!widgetOpen || widgetExpanded) && "hidden",
 					)}
 					style={{ height: widgetHeight, width: widgetWidth }}
-				>
-					{/* Widget header with page context badge and action buttons */}
-					<div className="flex items-center gap-1.5 px-3 py-1.5 border-b bg-muted/40">
-						<Sparkles className="h-3 w-3 text-muted-foreground" />
-						{pageAIContext ? (
-							<Badge
-								variant="secondary"
-								className="text-xs"
-								data-testid="page-context-badge"
-							>
-								{pageAIContext.routeName}
-							</Badge>
-						) : (
-							<span className="text-xs text-muted-foreground font-medium">
-								{tr("A11Y_CHAT_TITLE", "aiChat.a11y.title", "AI Chat")}
-							</span>
+				/>
+				<Dialog open={widgetExpanded} onOpenChange={setExpanded}>
+					<DialogContent
+						showCloseButton={false}
+						style={{
+							...style,
+							position: "fixed",
+							inset: 0,
+							top: 0,
+							right: 0,
+							bottom: 0,
+							left: 0,
+							width: "100vw",
+							height: "100dvh",
+							minWidth: 0,
+							minHeight: 0,
+							maxWidth: "none",
+							maxHeight: "none",
+							margin: 0,
+							transform: "none",
+							translate: "none",
+							zIndex: 50,
+							animation: "none",
+						}}
+						aria-describedby={undefined}
+						className={cn(
+							className,
+							classNames?.container,
+							"fixed inset-0 z-50 flex h-dvh w-screen max-w-none translate-x-0 translate-y-0 flex-col gap-0 rounded-none border-0 p-0 sm:max-w-none pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]",
 						)}
-						<div className="flex-1" />
-						<Button
-							variant="ghost"
-							size="icon"
-							className="h-5 w-5"
-							onClick={() => {
-								track({ type: "conversation_cleared" });
-								onClear?.();
-								setWidgetResetKey((prev) => prev + 1);
-							}}
-							aria-label={tr(
-								"A11Y_CLEAR_CHAT",
-								"aiChat.a11y.clearChat",
-								"Clear chat",
-							)}
-							title={tr(
-								"A11Y_CLEAR_CHAT",
-								"aiChat.a11y.clearChat",
-								"Clear chat",
-							)}
-						>
-							<Trash2 className="h-3.5 w-3.5" />
-						</Button>
-						<Button
-							variant="ghost"
-							size="icon"
-							className="h-5 w-5"
-							onClick={() => {
-								setWidgetOpen(false);
-								track({ type: "widget_closed" });
-							}}
-							aria-label={tr(
-								"A11Y_CLOSE_CHAT",
-								"aiChat.a11y.closeChat",
-								"Close chat",
+						onCloseAutoFocus={(event) => {
+							const target = widgetOpen
+								? (expandRef.current ?? compactPanelRef.current)
+								: triggerRef.current;
+							if (target) {
+								event.preventDefault();
+								target.focus();
+							}
+						}}
+					>
+						<DialogTitle className="sr-only">
+							{tr("A11Y_CHAT_TITLE", "aiChat.a11y.title", "AI Chat")}
+						</DialogTitle>
+						<div ref={mountExpandedPanel} className="min-h-0 flex-1" />
+					</DialogContent>
+				</Dialog>
+				{panelContainer &&
+					createPortal(
+						<>
+							{/* Widget header with page context badge and action buttons */}
+							<div className="flex shrink-0 items-center gap-1.5 px-3 py-1.5 border-b bg-muted/40">
+								<Sparkles className="h-3 w-3 text-muted-foreground" />
+								{pageAIContext ? (
+									<Badge
+										variant="secondary"
+										className="text-xs"
+										data-testid="page-context-badge"
+									>
+										{pageAIContext.routeName}
+									</Badge>
+								) : (
+									<span className="text-xs text-muted-foreground font-medium">
+										{tr("A11Y_CHAT_TITLE", "aiChat.a11y.title", "AI Chat")}
+									</span>
+								)}
+								<div className="flex-1" />
+								{expandable && (
+									<Button
+										type="button"
+										variant="ghost"
+										size="icon"
+										className="h-7 w-7"
+										ref={expandRef}
+										onClick={() => setExpanded((prev) => !prev)}
+										aria-label={expandLabel}
+										title={expandLabel}
+										aria-expanded={widgetExpanded}
+									>
+										{widgetExpanded ? (
+											<Minimize2 className="h-3.5 w-3.5" aria-hidden="true" />
+										) : (
+											<Maximize2 className="h-3.5 w-3.5" aria-hidden="true" />
+										)}
+									</Button>
+								)}
+								<Button
+									variant="ghost"
+									size="icon"
+									className="h-5 w-5"
+									onClick={() => {
+										track({ type: "conversation_cleared" });
+										onClear?.();
+										setWidgetResetKey((prev) => prev + 1);
+									}}
+									aria-label={tr(
+										"A11Y_CLEAR_CHAT",
+										"aiChat.a11y.clearChat",
+										"Clear chat",
+									)}
+									title={tr(
+										"A11Y_CLEAR_CHAT",
+										"aiChat.a11y.clearChat",
+										"Clear chat",
+									)}
+								>
+									<Trash2 className="h-3.5 w-3.5" />
+								</Button>
+								<Button
+									variant="ghost"
+									size="icon"
+									className="h-5 w-5"
+									onClick={() => {
+										setWidgetOpen(false);
+										setExpanded(false);
+										triggerRef.current?.focus();
+										track({ type: "widget_closed" });
+									}}
+									aria-label={tr(
+										"A11Y_CLOSE_CHAT",
+										"aiChat.a11y.closeChat",
+										"Close chat",
+									)}
+								>
+									<X className="h-3.5 w-3.5" />
+								</Button>
+							</div>
+							{widgetEverOpened && (
+								<ChatInterface
+									key={`widget-${conversationId ?? "new"}-${widgetResetKey}`}
+									id={conversationId}
+									variant="widget"
+									initialMessages={initialMessages}
+									onMessagesChange={onMessagesChange}
+								/>
 							)}
-						>
-							<X className="h-3.5 w-3.5" />
-						</Button>
-					</div>
-					{widgetEverOpened && (
-						<ChatInterface
-							key={`widget-${conversationId ?? "new"}-${widgetResetKey}`}
-							id={conversationId}
-							variant="widget"
-							initialMessages={initialMessages}
-							onMessagesChange={onMessagesChange}
-						/>
+						</>,
+						panelContainer,
 					)}
-				</div>
 
 				{/* Trigger button — rendered only when showTrigger is true */}
 				{showTrigger && (
 					<Button
+						ref={triggerRef}
 						size="icon"
 						className="h-12 w-12 rounded-full shadow-lg"
 						onClick={() => {
 							dismissTip("open");
 							track({ type: widgetOpen ? "widget_closed" : "widget_opened" });
 							setWidgetOpen((prev) => !prev);
+							setExpanded(false);
 							setWidgetEverOpened(true);
 						}}
 						aria-label={
@@ -339,7 +464,7 @@ function ChatLayoutContent(props: ChatLayoutProps) {
 						{widgetOpen ? (
 							<X className="h-5 w-5" />
 						) : (
-							<Sparkles className="h-5 w-5" />
+							(triggerIcon ?? <Sparkles className="h-5 w-5" />)
 						)}
 					</Button>
 				)}

package/src/plugins/ai-chat/client/context-checkpoint.ts

@@ -0,0 +1,47 @@
+import type { UIMessage } from "ai";
+
+/** Browser-only snapshot; never replaces or mutates the visible transcript. */
+export interface ContextCheckpoint {
+	summary: string;
+	throughMessageId: string;
+	prefix: string;
+}
+
+export function captureContextCheckpoint(
+	messages: UIMessage[],
+	summary: string,
+	throughMessageId: string,
+): ContextCheckpoint | undefined {
+	const index = messages.findIndex(
+		(message) => message.id === throughMessageId,
+	);
+	if (index < 0) return undefined;
+	return {
+		summary,
+		throughMessageId,
+		prefix: JSON.stringify(messages.slice(0, index + 1)),
+	};
+}
+
+export function contextRequest(
+	messages: UIMessage[],
+	checkpoint?: ContextCheckpoint,
+) {
+	if (checkpoint) {
+		const index = messages.findIndex(
+			(message) => message.id === checkpoint.throughMessageId,
+		);
+		if (
+			index >= 0 &&
+			JSON.stringify(messages.slice(0, index + 1)) === checkpoint.prefix
+		) {
+			return {
+				messages: messages.slice(index + 1),
+				contextSummary: checkpoint.summary,
+			};
+		}
+	}
+	// Editing or retrying a summarized turn invalidates the snapshot. Resend
+	// the original transcript so the server builds a fresh summary if needed.
+	return { messages };
+}

package/src/plugins/ai-chat/client/localization/index.ts

@@ -12,6 +12,7 @@ export interface AiChatLocalization {
 	CHAT_SEND_BUTTON: string;
 	CHAT_EMPTY_STATE: string;
 	CHAT_LOADING: string;
+	CHAT_COMPACTING?: string;
 	CHAT_ERROR: string;
 	CHAT_RETRY: string;
 
@@ -86,6 +87,8 @@ export interface AiChatLocalization {
 	A11Y_CHAT_TITLE: string;
 	A11Y_CLEAR_CHAT: string;
 	A11Y_CLOSE_CHAT: string;
+	A11Y_EXPAND_CHAT: string;
+	A11Y_COLLAPSE_CHAT: string;
 	A11Y_OPEN_CHAT: string;
 	A11Y_DISMISS_CHAT_TIP: string;
 	PAGE_CONTENT_READING: string;
@@ -194,6 +197,8 @@ export const AI_CHAT_LOCALIZATION: AiChatLocalization = {
 	A11Y_CHAT_TITLE: "AI Chat",
 	A11Y_CLEAR_CHAT: "Clear chat",
 	A11Y_CLOSE_CHAT: "Close chat",
+	A11Y_EXPAND_CHAT: "Expand chat",
+	A11Y_COLLAPSE_CHAT: "Collapse chat",
 	A11Y_OPEN_CHAT: "Open chat",
 	A11Y_DISMISS_CHAT_TIP: "Dismiss chat tip",
 	PAGE_CONTENT_READING: "Reading page content…",

package/src/plugins/ai-chat/schemas.ts

@@ -36,6 +36,8 @@ export const chatRequestSchema = z.object({
 		]),
 	),
 	conversationId: z.string().optional(),
+	/** Untrusted continuation summary for opt-in public context compaction. */
+	contextSummary: z.string().max(32_000).optional(),
 	model: z.string().optional(),
 	/**
 	 * Description of the current page context, injected into the AI system prompt.

package/dist/shared/{stack.CKc_Bais.d.cts → stack.Csi-4Mgz.d.cts}

@@ -1,6 +1,13 @@
 import { z } from 'zod';
 
 declare const createPostSchema: z.ZodObject<{
+    tags: z.ZodDefault<z.ZodOptional<z.ZodArray<z.ZodUnion<readonly [z.ZodObject<{
+        name: z.ZodString;
+    }, z.core.$strip>, z.ZodObject<{
+        id: z.ZodString;
+        name: z.ZodString;
+        slug: z.ZodString;
+    }, z.core.$strip>]>>>>;
     slug: z.ZodOptional<z.ZodString>;
     publishedAt: z.ZodOptional<z.ZodCoercedDate<unknown>>;
     createdAt: z.ZodOptional<z.ZodCoercedDate<unknown>>;
@@ -10,13 +17,6 @@ declare const createPostSchema: z.ZodObject<{
     excerpt: z.ZodString;
     image: z.ZodOptional<z.ZodString>;
     published: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
-    tags: z.ZodDefault<z.ZodOptional<z.ZodArray<z.ZodUnion<readonly [z.ZodObject<{
-        name: z.ZodString;
-    }, z.core.$strip>, z.ZodObject<{
-        id: z.ZodString;
-        name: z.ZodString;
-        slug: z.ZodString;
-    }, z.core.$strip>]>>>>;
 }, z.core.$strip>;
 declare const updatePostSchema: z.ZodObject<{
     publishedAt: z.ZodOptional<z.ZodCoercedDate<unknown>>;

package/dist/shared/{stack.CKc_Bais.d.mts → stack.Csi-4Mgz.d.mts}

@@ -1,6 +1,13 @@
 import { z } from 'zod';
 
 declare const createPostSchema: z.ZodObject<{
+    tags: z.ZodDefault<z.ZodOptional<z.ZodArray<z.ZodUnion<readonly [z.ZodObject<{
+        name: z.ZodString;
+    }, z.core.$strip>, z.ZodObject<{
+        id: z.ZodString;
+        name: z.ZodString;
+        slug: z.ZodString;
+    }, z.core.$strip>]>>>>;
     slug: z.ZodOptional<z.ZodString>;
     publishedAt: z.ZodOptional<z.ZodCoercedDate<unknown>>;
     createdAt: z.ZodOptional<z.ZodCoercedDate<unknown>>;
@@ -10,13 +17,6 @@ declare const createPostSchema: z.ZodObject<{
     excerpt: z.ZodString;
     image: z.ZodOptional<z.ZodString>;
     published: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
-    tags: z.ZodDefault<z.ZodOptional<z.ZodArray<z.ZodUnion<readonly [z.ZodObject<{
-        name: z.ZodString;
-    }, z.core.$strip>, z.ZodObject<{
-        id: z.ZodString;
-        name: z.ZodString;
-        slug: z.ZodString;
-    }, z.core.$strip>]>>>>;
 }, z.core.$strip>;
 declare const updatePostSchema: z.ZodObject<{
     publishedAt: z.ZodOptional<z.ZodCoercedDate<unknown>>;

package/dist/shared/{stack.CKc_Bais.d.ts → stack.Csi-4Mgz.d.ts}

@@ -1,6 +1,13 @@
 import { z } from 'zod';
 
 declare const createPostSchema: z.ZodObject<{
+    tags: z.ZodDefault<z.ZodOptional<z.ZodArray<z.ZodUnion<readonly [z.ZodObject<{
+        name: z.ZodString;
+    }, z.core.$strip>, z.ZodObject<{
+        id: z.ZodString;
+        name: z.ZodString;
+        slug: z.ZodString;
+    }, z.core.$strip>]>>>>;
     slug: z.ZodOptional<z.ZodString>;
     publishedAt: z.ZodOptional<z.ZodCoercedDate<unknown>>;
     createdAt: z.ZodOptional<z.ZodCoercedDate<unknown>>;
@@ -10,13 +17,6 @@ declare const createPostSchema: z.ZodObject<{
     excerpt: z.ZodString;
     image: z.ZodOptional<z.ZodString>;
     published: z.ZodDefault<z.ZodOptional<z.ZodBoolean>>;
-    tags: z.ZodDefault<z.ZodOptional<z.ZodArray<z.ZodUnion<readonly [z.ZodObject<{
-        name: z.ZodString;
-    }, z.core.$strip>, z.ZodObject<{
-        id: z.ZodString;
-        name: z.ZodString;
-        slug: z.ZodString;
-    }, z.core.$strip>]>>>>;
 }, z.core.$strip>;
 declare const updatePostSchema: z.ZodObject<{
     publishedAt: z.ZodOptional<z.ZodCoercedDate<unknown>>;