@btst/stack 1.4.0 → 1.5.0

package/dist/shared/stack.DwnJA87a.d.ts

@@ -0,0 +1,135 @@
+import { z } from 'zod';
+import { A as AutoFormFieldType } from './stack.NZJogTUn.js';
+
+/**
+ * Configuration for a content type defined by the developer
+ */
+interface ContentTypeConfig {
+    /** Display name for the content type (e.g., "Product", "Testimonial") */
+    name: string;
+    /** URL-friendly slug (e.g., "product", "testimonial") */
+    slug: string;
+    /** Optional description shown in the admin UI */
+    description?: string;
+    /** Zod schema defining the content type's fields */
+    schema: z.ZodObject<z.ZodRawShape>;
+    /**
+     * Optional field configuration for AutoForm customization.
+     *
+     * fieldType can be:
+     * - A built-in AutoForm type: "checkbox", "date", "select", "radio", "switch", "textarea", "number", "file", "fallback"
+     * - A custom type name that maps to a component provided via `fieldComponents` in overrides
+     */
+    fieldConfig?: Record<string, {
+        fieldType?: AutoFormFieldType | (string & {});
+    }>;
+}
+/**
+ * Content type stored in the database
+ */
+type ContentType = {
+    id: string;
+    /** Display name */
+    name: string;
+    /** URL-friendly slug - unique identifier */
+    slug: string;
+    /** Optional description */
+    description?: string;
+    /** JSON Schema representation of the Zod schema (stringified) */
+    jsonSchema: string;
+    /** Optional field configuration JSON (stringified) */
+    fieldConfig?: string;
+    createdAt: Date;
+    updatedAt: Date;
+};
+/**
+ * Content item stored in the database
+ */
+type ContentItem = {
+    id: string;
+    /** Reference to the content type */
+    contentTypeId: string;
+    /** URL-friendly slug - unique within content type */
+    slug: string;
+    /** JSON data matching the content type's schema (stringified) */
+    data: string;
+    /** Optional author ID for tracking who created/modified */
+    authorId?: string;
+    createdAt: Date;
+    updatedAt: Date;
+};
+/**
+ * Serialized content type for API responses (dates as strings)
+ */
+interface SerializedContentType extends Omit<ContentType, "createdAt" | "updatedAt"> {
+    createdAt: string;
+    updatedAt: string;
+}
+/**
+ * Serialized content item for API responses (dates as strings)
+ */
+interface SerializedContentItem extends Omit<ContentItem, "createdAt" | "updatedAt"> {
+    createdAt: string;
+    updatedAt: string;
+}
+/**
+ * Serialized content item with parsed data and joined content type
+ * @template TData - The type of the parsed data (defaults to Record<string, unknown>)
+ */
+interface SerializedContentItemWithType<TData = Record<string, unknown>> extends SerializedContentItem {
+    /** Parsed data object (JSON.parse of data field) */
+    parsedData: TData;
+    /** Joined content type */
+    contentType?: SerializedContentType;
+}
+/**
+ * Paginated list response for content items
+ * @template TData - The type of the parsed data (defaults to Record<string, unknown>)
+ */
+interface PaginatedContentItems<TData = Record<string, unknown>> {
+    items: SerializedContentItemWithType<TData>[];
+    total: number;
+    limit: number;
+    offset: number;
+}
+/**
+ * Context passed to CMS backend hooks
+ */
+interface CMSHookContext {
+    /** Content type slug */
+    typeSlug: string;
+    /** User ID if authenticated */
+    userId?: string;
+    /** Request headers */
+    headers?: Headers;
+}
+/**
+ * Hooks for customizing CMS backend behavior
+ */
+interface CMSBackendHooks {
+    /** Called before creating a content item */
+    onBeforeCreate?: (data: Record<string, unknown>, context: CMSHookContext) => Promise<Record<string, unknown> | false> | Record<string, unknown> | false;
+    /** Called after creating a content item */
+    onAfterCreate?: (item: SerializedContentItem, context: CMSHookContext) => Promise<void> | void;
+    /** Called before updating a content item */
+    onBeforeUpdate?: (id: string, data: Record<string, unknown>, context: CMSHookContext) => Promise<Record<string, unknown> | false> | Record<string, unknown> | false;
+    /** Called after updating a content item */
+    onAfterUpdate?: (item: SerializedContentItem, context: CMSHookContext) => Promise<void> | void;
+    /** Called before deleting a content item */
+    onBeforeDelete?: (id: string, context: CMSHookContext) => Promise<boolean> | boolean;
+    /** Called after deleting a content item */
+    onAfterDelete?: (id: string, context: CMSHookContext) => Promise<void> | void;
+    /** Called on any CMS error */
+    onError?: (error: Error, operation: "create" | "update" | "delete" | "list" | "get", context: CMSHookContext) => Promise<void> | void;
+}
+/**
+ * Configuration for the CMS backend plugin
+ */
+interface CMSBackendConfig {
+    /** Content types defined by the developer */
+    contentTypes: ContentTypeConfig[];
+    /** Optional hooks for customizing behavior */
+    hooks?: CMSBackendHooks;
+}
+
+export type { CMSBackendConfig as C, PaginatedContentItems as P, SerializedContentType as S, SerializedContentItemWithType as a };

package/dist/shared/stack.NZJogTUn.d.cts

@@ -0,0 +1,66 @@
+import { ControllerRenderProps, FieldValues } from 'react-hook-form';
+import * as zod from 'zod';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function AutoFormCheckbox({ label, isRequired, field, fieldConfigItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormDate({ label, isRequired, field, fieldConfigItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormEnum({ label, isRequired, field, fieldConfigItem, zodItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormFile({ label, isRequired, fieldConfigItem, fieldProps, field, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormInput({ label, isRequired, fieldConfigItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormNumber({ label, isRequired, fieldConfigItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormRadioGroup({ label, isRequired, field, zodItem, fieldProps, fieldConfigItem, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormSwitch({ label, isRequired, field, fieldConfigItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormTextarea({ label, isRequired, fieldConfigItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare const INPUT_COMPONENTS: {
+    checkbox: typeof AutoFormCheckbox;
+    date: typeof AutoFormDate;
+    select: typeof AutoFormEnum;
+    radio: typeof AutoFormRadioGroup;
+    switch: typeof AutoFormSwitch;
+    textarea: typeof AutoFormTextarea;
+    number: typeof AutoFormNumber;
+    file: typeof AutoFormFile;
+    fallback: typeof AutoFormInput;
+};
+
+/**
+ * Available field types for AutoForm fieldConfig.
+ * These map to the input components in ./config.ts
+ */
+type AutoFormFieldType = keyof typeof INPUT_COMPONENTS;
+type FieldConfigItem = {
+    description?: React.ReactNode;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement> & React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+        showLabel?: boolean;
+    };
+    label?: string;
+    fieldType?: keyof typeof INPUT_COMPONENTS | React.FC<AutoFormInputComponentProps>;
+    renderParent?: (props: {
+        children: React.ReactNode;
+    }) => React.ReactElement | null;
+    order?: number;
+};
+/**
+ * A FormInput component can handle a specific Zod type (e.g. "ZodBoolean")
+ */
+type AutoFormInputComponentProps = {
+    zodInputProps: React.InputHTMLAttributes<HTMLInputElement>;
+    field: ControllerRenderProps<FieldValues, any>;
+    fieldConfigItem: FieldConfigItem;
+    label: string;
+    isRequired: boolean;
+    fieldProps: any;
+    zodItem: zod.ZodType;
+    className?: string;
+};
+
+export type { AutoFormFieldType as A, AutoFormInputComponentProps as a };

package/dist/shared/stack.NZJogTUn.d.mts

@@ -0,0 +1,66 @@
+import { ControllerRenderProps, FieldValues } from 'react-hook-form';
+import * as zod from 'zod';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function AutoFormCheckbox({ label, isRequired, field, fieldConfigItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormDate({ label, isRequired, field, fieldConfigItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormEnum({ label, isRequired, field, fieldConfigItem, zodItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormFile({ label, isRequired, fieldConfigItem, fieldProps, field, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormInput({ label, isRequired, fieldConfigItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormNumber({ label, isRequired, fieldConfigItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormRadioGroup({ label, isRequired, field, zodItem, fieldProps, fieldConfigItem, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormSwitch({ label, isRequired, field, fieldConfigItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormTextarea({ label, isRequired, fieldConfigItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare const INPUT_COMPONENTS: {
+    checkbox: typeof AutoFormCheckbox;
+    date: typeof AutoFormDate;
+    select: typeof AutoFormEnum;
+    radio: typeof AutoFormRadioGroup;
+    switch: typeof AutoFormSwitch;
+    textarea: typeof AutoFormTextarea;
+    number: typeof AutoFormNumber;
+    file: typeof AutoFormFile;
+    fallback: typeof AutoFormInput;
+};
+
+/**
+ * Available field types for AutoForm fieldConfig.
+ * These map to the input components in ./config.ts
+ */
+type AutoFormFieldType = keyof typeof INPUT_COMPONENTS;
+type FieldConfigItem = {
+    description?: React.ReactNode;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement> & React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+        showLabel?: boolean;
+    };
+    label?: string;
+    fieldType?: keyof typeof INPUT_COMPONENTS | React.FC<AutoFormInputComponentProps>;
+    renderParent?: (props: {
+        children: React.ReactNode;
+    }) => React.ReactElement | null;
+    order?: number;
+};
+/**
+ * A FormInput component can handle a specific Zod type (e.g. "ZodBoolean")
+ */
+type AutoFormInputComponentProps = {
+    zodInputProps: React.InputHTMLAttributes<HTMLInputElement>;
+    field: ControllerRenderProps<FieldValues, any>;
+    fieldConfigItem: FieldConfigItem;
+    label: string;
+    isRequired: boolean;
+    fieldProps: any;
+    zodItem: zod.ZodType;
+    className?: string;
+};
+
+export type { AutoFormFieldType as A, AutoFormInputComponentProps as a };

package/dist/shared/stack.NZJogTUn.d.ts

@@ -0,0 +1,66 @@
+import { ControllerRenderProps, FieldValues } from 'react-hook-form';
+import * as zod from 'zod';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+declare function AutoFormCheckbox({ label, isRequired, field, fieldConfigItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormDate({ label, isRequired, field, fieldConfigItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormEnum({ label, isRequired, field, fieldConfigItem, zodItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormFile({ label, isRequired, fieldConfigItem, fieldProps, field, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormInput({ label, isRequired, fieldConfigItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormNumber({ label, isRequired, fieldConfigItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormRadioGroup({ label, isRequired, field, zodItem, fieldProps, fieldConfigItem, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormSwitch({ label, isRequired, field, fieldConfigItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare function AutoFormTextarea({ label, isRequired, fieldConfigItem, fieldProps, }: AutoFormInputComponentProps): react_jsx_runtime.JSX.Element;
+
+declare const INPUT_COMPONENTS: {
+    checkbox: typeof AutoFormCheckbox;
+    date: typeof AutoFormDate;
+    select: typeof AutoFormEnum;
+    radio: typeof AutoFormRadioGroup;
+    switch: typeof AutoFormSwitch;
+    textarea: typeof AutoFormTextarea;
+    number: typeof AutoFormNumber;
+    file: typeof AutoFormFile;
+    fallback: typeof AutoFormInput;
+};
+
+/**
+ * Available field types for AutoForm fieldConfig.
+ * These map to the input components in ./config.ts
+ */
+type AutoFormFieldType = keyof typeof INPUT_COMPONENTS;
+type FieldConfigItem = {
+    description?: React.ReactNode;
+    inputProps?: React.InputHTMLAttributes<HTMLInputElement> & React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+        showLabel?: boolean;
+    };
+    label?: string;
+    fieldType?: keyof typeof INPUT_COMPONENTS | React.FC<AutoFormInputComponentProps>;
+    renderParent?: (props: {
+        children: React.ReactNode;
+    }) => React.ReactElement | null;
+    order?: number;
+};
+/**
+ * A FormInput component can handle a specific Zod type (e.g. "ZodBoolean")
+ */
+type AutoFormInputComponentProps = {
+    zodInputProps: React.InputHTMLAttributes<HTMLInputElement>;
+    field: ControllerRenderProps<FieldValues, any>;
+    fieldConfigItem: FieldConfigItem;
+    label: string;
+    isRequired: boolean;
+    fieldProps: any;
+    zodItem: zod.ZodType;
+    className?: string;
+};
+
+export type { AutoFormFieldType as A, AutoFormInputComponentProps as a };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@btst/stack",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "A composable, plugin-based library for building full-stack applications.",
   "repository": {
     "type": "git",
@@ -165,6 +165,47 @@
     },
     "./plugins/ai-chat/css": "./dist/plugins/ai-chat/style.css",
     "./plugins/blog/css": "./dist/plugins/blog/style.css",
+    "./plugins/cms/api": {
+      "import": {
+        "types": "./dist/plugins/cms/api/index.d.ts",
+        "default": "./dist/plugins/cms/api/index.mjs"
+      },
+      "require": {
+        "types": "./dist/plugins/cms/api/index.d.cts",
+        "default": "./dist/plugins/cms/api/index.cjs"
+      }
+    },
+    "./plugins/cms/client": {
+      "import": {
+        "types": "./dist/plugins/cms/client/index.d.ts",
+        "default": "./dist/plugins/cms/client/index.mjs"
+      },
+      "require": {
+        "types": "./dist/plugins/cms/client/index.d.cts",
+        "default": "./dist/plugins/cms/client/index.cjs"
+      }
+    },
+    "./plugins/cms/client/components": {
+      "import": {
+        "types": "./dist/plugins/cms/client/components/index.d.ts",
+        "default": "./dist/plugins/cms/client/components/index.mjs"
+      },
+      "require": {
+        "types": "./dist/plugins/cms/client/components/index.d.cts",
+        "default": "./dist/plugins/cms/client/components/index.cjs"
+      }
+    },
+    "./plugins/cms/client/hooks": {
+      "import": {
+        "types": "./dist/plugins/cms/client/hooks/index.d.ts",
+        "default": "./dist/plugins/cms/client/hooks/index.mjs"
+      },
+      "require": {
+        "types": "./dist/plugins/cms/client/hooks/index.d.cts",
+        "default": "./dist/plugins/cms/client/hooks/index.cjs"
+      }
+    },
+    "./plugins/cms/css": "./dist/plugins/cms/style.css",
     "./dist/*": "./dist/*",
     "./ui/css": "./dist/ui/components.css",
     "./package.json": "./package.json"
@@ -206,6 +247,18 @@
       ],
       "plugins/ai-chat/client/hooks": [
         "./dist/plugins/ai-chat/client/hooks/index.d.ts"
+      ],
+      "plugins/cms/api": [
+        "./dist/plugins/cms/api/index.d.ts"
+      ],
+      "plugins/cms/client": [
+        "./dist/plugins/cms/client/index.d.ts"
+      ],
+      "plugins/cms/client/components": [
+        "./dist/plugins/cms/client/components/index.d.ts"
+      ],
+      "plugins/cms/client/hooks": [
+        "./dist/plugins/cms/client/hooks/index.d.ts"
       ]
     }
   },
@@ -227,7 +280,7 @@
     "@radix-ui/react-switch": ">=1.1.0",
     "@tanstack/react-query": "^5.0.0",
     "ai": ">=5.0.0",
-    "better-call": ">=1.0.0",
+    "better-call": ">=1.1.5",
     "class-variance-authority": ">=0.7.0",
     "clsx": ">=2.1.0",
     "cmdk": ">=1.1.0",
@@ -249,7 +302,7 @@
     "sonner": ">=2.0.0",
     "tailwind-merge": ">=2.6.0",
     "tailwindcss": ">=3.0.0",
-    "zod": ">=3.24.0"
+    "zod": ">=4.2.0"
   },
   "devDependencies": {
     "@ai-sdk/react": "^2.0.94",
@@ -259,7 +312,7 @@
     "@types/slug": "^5.0.9",
     "@workspace/ui": "workspace:*",
     "ai": "^5.0.94",
-    "better-call": "1.0.19",
+    "better-call": "catalog:",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-error-boundary": "^4.1.2",
@@ -268,7 +321,7 @@
     "typescript": "catalog:",
     "unbuild": "catalog:",
     "vitest": "catalog:",
-    "vue": "^3.5.18"
+    "zod": "^4.2.0"
   },
   "files": [
     "dist",

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

@@ -28,6 +28,8 @@ interface ChatInterfaceProps {
 	/** Variant: 'full' for full-page layout, 'widget' for embedded widget */
 	variant?: "full" | "widget";
 	className?: string;
+	/** Called whenever messages change (for persistence). Only fires in public mode. */
+	onMessagesChange?: (messages: UIMessage[]) => void;
 }
 
 export function ChatInterface({
@@ -36,6 +38,7 @@ export function ChatInterface({
 	id,
 	variant = "full",
 	className,
+	onMessagesChange,
 }: ChatInterfaceProps) {
 	const {
 		navigate,
@@ -45,6 +48,7 @@ export function ChatInterface({
 		headers,
 		mode,
 		showAttribution,
+		chatSuggestions,
 	} = usePluginOverrides<AiChatPluginOverrides, Partial<AiChatPluginOverrides>>(
 		"ai-chat",
 		{ showAttribution: true },
@@ -81,6 +85,8 @@ export function ChatInterface({
 			setCurrentConversationId(id);
 			isFirstMessageSentRef.current = false;
 			hasNavigatedRef.current = false;
+			// Reset edit flag on navigation
+			isEditInProgressRef.current = false;
 		}
 	}, [id, isPublicMode]);
 
@@ -108,6 +114,18 @@ export function ChatInterface({
 	// Ref to track edit operation with messages to use
 	const editMessagesRef = useRef<UIMessage[] | null>(null);
 
+	// Flag to prevent load conversation effect from overwriting messages during edit
+	const isEditInProgressRef = useRef(false);
+
+	// Track if we've finished initializing messages
+	// This prevents onMessagesChange from firing with an empty array before initialMessages are loaded
+	// Without this guard, the effect would fire on mount with [], overwriting any saved messages
+	const [isMessagesInitialized, setIsMessagesInitialized] = useState(
+		() =>
+			// Start as initialized if there are no initialMessages to load
+			!initialMessages || initialMessages.length === 0,
+	);
+
 	// Memoize the transport to prevent recreation on every render
 	const transport = useMemo(
 		() =>
@@ -199,6 +217,10 @@ export function ChatInterface({
 
 	// Load existing conversation messages when navigating to a conversation
 	useEffect(() => {
+		// Don't overwrite messages if an edit is in progress
+		if (isEditInProgressRef.current) {
+			return;
+		}
 		if (
 			conversation?.messages &&
 			conversation.messages.length > 0 &&
@@ -240,6 +262,8 @@ export function ChatInterface({
 			messages.length === 0
 		) {
 			setMessages(initialMessages);
+			// Mark as initialized - this is batched with setMessages so both take effect in the same render
+			setIsMessagesInitialized(true);
 		}
 	}, [initialMessages, setMessages, messages.length]);
 
@@ -259,6 +283,14 @@ export function ChatInterface({
 		}
 	}, [messages]);
 
+	// Notify parent when messages change (for persistence in public mode)
+	// Only fire after initialization to prevent overwriting saved messages with an empty array
+	useEffect(() => {
+		if (isPublicMode && onMessagesChange && isMessagesInitialized) {
+			onMessagesChange(messages);
+		}
+	}, [messages, isPublicMode, onMessagesChange, isMessagesInitialized]);
+
 	const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
 		setInput(e.target.value);
 	};
@@ -331,6 +363,9 @@ export function ChatInterface({
 		if (pendingEdit && messages.length === pendingEdit.expectedLength) {
 			const textToSend = pendingEdit.text;
 			setPendingEdit(null);
+			// Clear edit in progress flag - the new message will now be sent
+			// and we want subsequent effects to work normally
+			isEditInProgressRef.current = false;
 			sendMessage({ text: textToSend });
 		}
 	}, [messages.length, pendingEdit, sendMessage]);
@@ -348,6 +383,9 @@ export function ChatInterface({
 			// Truncate to BEFORE the edited message (remove it and all subsequent)
 			const truncatedMessages = messages.slice(0, messageIndex);
 
+			// Mark edit in progress to prevent load conversation effect from overwriting
+			isEditInProgressRef.current = true;
+
 			// Store the truncated messages in the ref for the transport to use
 			editMessagesRef.current = truncatedMessages;
 
@@ -382,8 +420,24 @@ export function ChatInterface({
 							)}
 						>
 							{messages.length === 0 ? (
-								<div className="flex flex-col items-center justify-center h-full min-h-[300px] text-muted-foreground">
-									<p>{localization.CHAT_EMPTY_STATE}</p>
+								<div className="flex flex-col h-full min-h-[300px]">
+									<div className="flex-1 flex items-center justify-center text-muted-foreground">
+										<p>{localization.CHAT_EMPTY_STATE}</p>
+									</div>
+									{chatSuggestions && chatSuggestions.length > 0 && (
+										<div className="flex flex-wrap justify-center gap-2 pb-4 max-w-md mx-auto">
+											{chatSuggestions.map((suggestion, index) => (
+												<button
+													key={index}
+													type="button"
+													onClick={() => setInput(suggestion)}
+													className="px-3 py-2 text-sm rounded-lg border border-border bg-background hover:bg-accent hover:text-accent-foreground transition-colors text-foreground"
+												>
+													{suggestion}
+												</button>
+											))}
+										</div>
+									)}
 								</div>
 							) : (
 								messages.map((m, index) => (

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

@@ -11,6 +11,7 @@ import { Menu, PanelLeftClose, PanelLeft } from "lucide-react";
 import { cn } from "@workspace/ui/lib/utils";
 import { ChatSidebar } from "./chat-sidebar";
 import { ChatInterface } from "./chat-interface";
+import type { UIMessage } from "ai";
 
 export interface ChatLayoutProps {
 	/** API base URL */
@@ -27,6 +28,10 @@ export interface ChatLayoutProps {
 	showSidebar?: boolean;
 	/** Height of the widget (only applies to widget layout) */
 	widgetHeight?: string | number;
+	/** Initial messages to populate the chat (useful for localStorage persistence in public mode) */
+	initialMessages?: UIMessage[];
+	/** Called whenever messages change (for persistence). Only fires in public mode. */
+	onMessagesChange?: (messages: UIMessage[]) => void;
 }
 
 /**
@@ -41,6 +46,8 @@ export function ChatLayout({
 	className,
 	showSidebar = true,
 	widgetHeight = "600px",
+	initialMessages,
+	onMessagesChange,
 }: ChatLayoutProps) {
 	const [sidebarOpen, setSidebarOpen] = useState(true);
 	const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
@@ -67,7 +74,13 @@ export function ChatLayout({
 				)}
 				style={{ height: widgetHeight }}
 			>
-				<ChatInterface apiPath={apiPath} id={conversationId} variant="widget" />
+				<ChatInterface
+					apiPath={apiPath}
+					id={conversationId}
+					variant="widget"
+					initialMessages={initialMessages}
+					onMessagesChange={onMessagesChange}
+				/>
 			</div>
 		);
 	}
@@ -153,6 +166,8 @@ export function ChatLayout({
 					apiPath={apiPath}
 					id={conversationId}
 					variant="full"
+					initialMessages={initialMessages}
+					onMessagesChange={onMessagesChange}
 				/>
 			</div>
 		</div>