@btst/stack 2.3.0 → 2.4.0

package/dist/packages/stack/src/client/components/compose.cjs

@@ -40,8 +40,7 @@ function ComposedRoute({
 }) {
   if (PageComponent) {
     const content = /* @__PURE__ */ jsxRuntime.jsx(PageComponent, { ...props });
-    const isBrowser = typeof window !== "undefined";
-    const suspenseFallback = isBrowser && LoadingComponent ? /* @__PURE__ */ jsxRuntime.jsx(LoadingComponent, {}) : null;
+    const suspenseFallback = LoadingComponent ? /* @__PURE__ */ jsxRuntime.jsx(LoadingComponent, {}) : null;
     if (ErrorComponent) {
       return /* @__PURE__ */ jsxRuntime.jsx(React.Suspense, { fallback: suspenseFallback, children: /* @__PURE__ */ jsxRuntime.jsx(
         errorBoundary.ErrorBoundary,

package/dist/packages/stack/src/client/components/compose.mjs

@@ -38,8 +38,7 @@ function ComposedRoute({
 }) {
   if (PageComponent) {
     const content = /* @__PURE__ */ jsx(PageComponent, { ...props });
-    const isBrowser = typeof window !== "undefined";
-    const suspenseFallback = isBrowser && LoadingComponent ? /* @__PURE__ */ jsx(LoadingComponent, {}) : null;
+    const suspenseFallback = LoadingComponent ? /* @__PURE__ */ jsx(LoadingComponent, {}) : null;
     if (ErrorComponent) {
       return /* @__PURE__ */ jsx(Suspense, { fallback: suspenseFallback, children: /* @__PURE__ */ jsx(
         ErrorBoundary,

package/dist/packages/stack/src/plugins/ai-chat/api/page-tools.cjs

@@ -0,0 +1,71 @@
+'use strict';
+
+const ai = require('ai');
+const z = require('zod');
+
+const BUILT_IN_PAGE_TOOL_ROUTE_ALLOWLIST = {
+  /** Blog new-post and edit-post pages */
+  fillBlogForm: ["blog-new-post", "blog-edit-post", "newPost", "editPost"],
+  /** UI builder edit page */
+  updatePageLayers: ["ui-builder-edit-page"]
+};
+const BUILT_IN_PAGE_TOOL_SCHEMAS = {
+  /**
+   * Fill in the blog post editor form fields.
+   * Registered by blog new/edit page via useRegisterPageAIContext.
+   */
+  fillBlogForm: ai.tool({
+    description: "Fill in the blog post editor form fields. Call this when the user asks to write, draft, or populate a blog post. You can fill any combination of title, content, excerpt, and tags.",
+    inputSchema: z.z.object({
+      title: z.z.string().optional().describe("The post title"),
+      content: z.z.string().optional().describe(
+        "Full markdown content for the post body. Use proper markdown formatting with headings, lists, etc."
+      ),
+      excerpt: z.z.string().optional().describe("A short summary/excerpt of the post (1-2 sentences)"),
+      tags: z.z.array(z.z.string()).optional().describe("Array of tag names to apply to the post")
+    })
+  }),
+  /**
+   * Replace the UI builder page layers with new ones.
+   * Registered by the UI builder edit page via useRegisterPageAIContext.
+   */
+  updatePageLayers: ai.tool({
+    description: `Replace the UI builder page component layers. Call this when the user asks to change, add, redesign, or update the page layout and components.
+
+Rules:
+- Provide the COMPLETE layer tree, not a partial diff. The entire tree will replace the current layers.
+- Only use component types that appear in the "Available Component Types" list in the page context.
+- Every layer must have a unique \`id\` string (e.g. "hero-section", "card-title-1").
+- The \`type\` field must exactly match a name from the component registry (e.g. "div", "Button", "Card", "Flexbox").
+- The \`name\` field is the human-readable label shown in the layers panel.
+- \`props\` contains component-specific props (className uses Tailwind classes).
+- \`children\` is either an array of child ComponentLayer objects, or a plain string for text content.
+- Use \`Flexbox\` or \`Grid\` for layout instead of raw div flex/grid when possible.
+- Preserve any layers the user has not asked to change \u2014 read the current layers from the page context first.
+- ALWAYS use shadcn/ui semantic color tokens in className (e.g. bg-background, bg-card, bg-primary, text-foreground, text-muted-foreground, text-primary-foreground, border-border) instead of hardcoded Tailwind colors like bg-white, bg-gray-*, text-black, etc. This ensures the UI automatically adapts to light and dark themes.`,
+    inputSchema: z.z.object({
+      layers: z.z.array(
+        z.z.object({
+          id: z.z.string().describe("Unique identifier for this layer"),
+          type: z.z.string().describe(
+            "Component type \u2014 must match a key in the component registry (e.g. 'div', 'Button', 'Card', 'Flexbox')"
+          ),
+          name: z.z.string().describe(
+            "Human-readable display name shown in the layers panel"
+          ),
+          props: z.z.record(z.z.string(), z.z.any()).describe(
+            "Component props object. Use Tailwind classes for className. See the component registry for valid props per type."
+          ),
+          children: z.z.any().optional().describe(
+            "Child layers (array of ComponentLayer) or plain text string"
+          )
+        })
+      ).describe(
+        "Complete replacement layer tree. Must include ALL layers for the page, not just changed ones."
+      )
+    })
+  })
+};
+
+exports.BUILT_IN_PAGE_TOOL_ROUTE_ALLOWLIST = BUILT_IN_PAGE_TOOL_ROUTE_ALLOWLIST;
+exports.BUILT_IN_PAGE_TOOL_SCHEMAS = BUILT_IN_PAGE_TOOL_SCHEMAS;

package/dist/packages/stack/src/plugins/ai-chat/api/page-tools.mjs

@@ -0,0 +1,68 @@
+import { tool } from 'ai';
+import { z } from 'zod';
+
+const BUILT_IN_PAGE_TOOL_ROUTE_ALLOWLIST = {
+  /** Blog new-post and edit-post pages */
+  fillBlogForm: ["blog-new-post", "blog-edit-post", "newPost", "editPost"],
+  /** UI builder edit page */
+  updatePageLayers: ["ui-builder-edit-page"]
+};
+const BUILT_IN_PAGE_TOOL_SCHEMAS = {
+  /**
+   * Fill in the blog post editor form fields.
+   * Registered by blog new/edit page via useRegisterPageAIContext.
+   */
+  fillBlogForm: tool({
+    description: "Fill in the blog post editor form fields. Call this when the user asks to write, draft, or populate a blog post. You can fill any combination of title, content, excerpt, and tags.",
+    inputSchema: z.object({
+      title: z.string().optional().describe("The post title"),
+      content: z.string().optional().describe(
+        "Full markdown content for the post body. Use proper markdown formatting with headings, lists, etc."
+      ),
+      excerpt: z.string().optional().describe("A short summary/excerpt of the post (1-2 sentences)"),
+      tags: z.array(z.string()).optional().describe("Array of tag names to apply to the post")
+    })
+  }),
+  /**
+   * Replace the UI builder page layers with new ones.
+   * Registered by the UI builder edit page via useRegisterPageAIContext.
+   */
+  updatePageLayers: tool({
+    description: `Replace the UI builder page component layers. Call this when the user asks to change, add, redesign, or update the page layout and components.
+
+Rules:
+- Provide the COMPLETE layer tree, not a partial diff. The entire tree will replace the current layers.
+- Only use component types that appear in the "Available Component Types" list in the page context.
+- Every layer must have a unique \`id\` string (e.g. "hero-section", "card-title-1").
+- The \`type\` field must exactly match a name from the component registry (e.g. "div", "Button", "Card", "Flexbox").
+- The \`name\` field is the human-readable label shown in the layers panel.
+- \`props\` contains component-specific props (className uses Tailwind classes).
+- \`children\` is either an array of child ComponentLayer objects, or a plain string for text content.
+- Use \`Flexbox\` or \`Grid\` for layout instead of raw div flex/grid when possible.
+- Preserve any layers the user has not asked to change \u2014 read the current layers from the page context first.
+- ALWAYS use shadcn/ui semantic color tokens in className (e.g. bg-background, bg-card, bg-primary, text-foreground, text-muted-foreground, text-primary-foreground, border-border) instead of hardcoded Tailwind colors like bg-white, bg-gray-*, text-black, etc. This ensures the UI automatically adapts to light and dark themes.`,
+    inputSchema: z.object({
+      layers: z.array(
+        z.object({
+          id: z.string().describe("Unique identifier for this layer"),
+          type: z.string().describe(
+            "Component type \u2014 must match a key in the component registry (e.g. 'div', 'Button', 'Card', 'Flexbox')"
+          ),
+          name: z.string().describe(
+            "Human-readable display name shown in the layers panel"
+          ),
+          props: z.record(z.string(), z.any()).describe(
+            "Component props object. Use Tailwind classes for className. See the component registry for valid props per type."
+          ),
+          children: z.any().optional().describe(
+            "Child layers (array of ComponentLayer) or plain text string"
+          )
+        })
+      ).describe(
+        "Complete replacement layer tree. Must include ALL layers for the page, not just changed ones."
+      )
+    })
+  })
+};
+
+export { BUILT_IN_PAGE_TOOL_ROUTE_ALLOWLIST, BUILT_IN_PAGE_TOOL_SCHEMAS };

package/dist/packages/stack/src/plugins/ai-chat/api/plugin.cjs

@@ -5,6 +5,7 @@ const ai = require('ai');
 const db = require('../db.cjs');
 const schemas = require('../schemas.cjs');
 const getters = require('./getters.cjs');
+const pageTools = require('./page-tools.cjs');
 
 const aiChatBackendPlugin = (config) => api.defineBackendPlugin({
   name: "ai-chat",
@@ -52,7 +53,13 @@ const aiChatBackendPlugin = (config) => api.defineBackendPlugin({
         body: schemas.chatRequestSchema
       },
       async (ctx) => {
-        const { messages: rawMessages, conversationId } = ctx.body;
+        const {
+          messages: rawMessages,
+          conversationId,
+          pageContext,
+          availableTools,
+          routeName
+        } = ctx.body;
         const uiMessages = rawMessages;
         const context = {
           body: ctx.body,
@@ -83,17 +90,57 @@ const aiChatBackendPlugin = (config) => api.defineBackendPlugin({
           }
           const firstMessageContent = getMessageTextContent(firstMessage);
           const modelMessages = ai.convertToModelMessages(uiMessages);
-          const messagesWithSystem = config.systemPrompt ? [
-            { role: "system", content: config.systemPrompt },
+          const pageContextContent = pageContext && pageContext.trim() ? `
+
+Current page context:
+${pageContext}` : "";
+          const systemContent = config.systemPrompt ? `${config.systemPrompt}${pageContextContent}` : pageContextContent || void 0;
+          const messagesWithSystem = systemContent ? [
+            { role: "system", content: systemContent },
             ...modelMessages
           ] : modelMessages;
+          const activePageTools = config.enablePageTools && availableTools && availableTools.length > 0 ? (() => {
+            const consumerSchemas = config.clientToolSchemas ?? {};
+            return Object.fromEntries(
+              availableTools.filter((name) => {
+                if (name in pageTools.BUILT_IN_PAGE_TOOL_SCHEMAS) {
+                  const allowed = pageTools.BUILT_IN_PAGE_TOOL_ROUTE_ALLOWLIST[name];
+                  return allowed && routeName && allowed.includes(routeName);
+                }
+                return name in consumerSchemas;
+              }).map((name) => {
+                const schema = pageTools.BUILT_IN_PAGE_TOOL_SCHEMAS[name] ?? consumerSchemas[name];
+                return [name, schema];
+              })
+            );
+          })() : {};
+          if (config.hooks?.onBeforeToolsActivated && Object.keys(activePageTools).length > 0) {
+            try {
+              const allowed = await config.hooks.onBeforeToolsActivated(
+                Object.keys(activePageTools),
+                routeName,
+                context
+              );
+              const allowedSet = new Set(allowed);
+              for (const key of Object.keys(activePageTools)) {
+                if (!allowedSet.has(key)) {
+                  delete activePageTools[key];
+                }
+              }
+            } catch (hookError) {
+              throw ctx.error(403, {
+                message: hookError instanceof Error ? hookError.message : "Unauthorized: Tool activation denied"
+              });
+            }
+          }
+          const mergedTools = Object.keys(activePageTools).length > 0 ? { ...activePageTools, ...config.tools } : config.tools;
           if (isPublicMode) {
             const result2 = ai.streamText({
               model: config.model,
               messages: messagesWithSystem,
-              tools: config.tools,
+              tools: mergedTools,
               // Enable multi-step tool calls if tools are configured
-              ...config.tools ? { stopWhen: ai.stepCountIs(5) } : {}
+              ...mergedTools ? { stopWhen: ai.stepCountIs(5) } : {}
             });
             return result2.toUIMessageStreamResponse({
               originalMessages: uiMessages
@@ -201,9 +248,9 @@ const aiChatBackendPlugin = (config) => api.defineBackendPlugin({
           const result = ai.streamText({
             model: config.model,
             messages: messagesWithSystem,
-            tools: config.tools,
+            tools: mergedTools,
             // Enable multi-step tool calls if tools are configured
-            ...config.tools ? { stopWhen: ai.stepCountIs(5) } : {},
+            ...mergedTools ? { stopWhen: ai.stepCountIs(5) } : {},
             onFinish: async (completion) => {
               try {
                 const assistantParts = completion.text ? [{ type: "text", text: completion.text }] : [];

package/dist/packages/stack/src/plugins/ai-chat/api/plugin.mjs

@@ -3,6 +3,7 @@ import { convertToModelMessages, streamText, stepCountIs } from 'ai';
 import { aiChatSchema } from '../db.mjs';
 import { chatRequestSchema, createConversationSchema, updateConversationSchema } from '../schemas.mjs';
 import { getConversationById, getAllConversations } from './getters.mjs';
+import { BUILT_IN_PAGE_TOOL_SCHEMAS, BUILT_IN_PAGE_TOOL_ROUTE_ALLOWLIST } from './page-tools.mjs';
 
 const aiChatBackendPlugin = (config) => defineBackendPlugin({
   name: "ai-chat",
@@ -50,7 +51,13 @@ const aiChatBackendPlugin = (config) => defineBackendPlugin({
         body: chatRequestSchema
       },
       async (ctx) => {
-        const { messages: rawMessages, conversationId } = ctx.body;
+        const {
+          messages: rawMessages,
+          conversationId,
+          pageContext,
+          availableTools,
+          routeName
+        } = ctx.body;
         const uiMessages = rawMessages;
         const context = {
           body: ctx.body,
@@ -81,17 +88,57 @@ const aiChatBackendPlugin = (config) => defineBackendPlugin({
           }
           const firstMessageContent = getMessageTextContent(firstMessage);
           const modelMessages = convertToModelMessages(uiMessages);
-          const messagesWithSystem = config.systemPrompt ? [
-            { role: "system", content: config.systemPrompt },
+          const pageContextContent = pageContext && pageContext.trim() ? `
+
+Current page context:
+${pageContext}` : "";
+          const systemContent = config.systemPrompt ? `${config.systemPrompt}${pageContextContent}` : pageContextContent || void 0;
+          const messagesWithSystem = systemContent ? [
+            { role: "system", content: systemContent },
             ...modelMessages
           ] : modelMessages;
+          const activePageTools = config.enablePageTools && availableTools && availableTools.length > 0 ? (() => {
+            const consumerSchemas = config.clientToolSchemas ?? {};
+            return Object.fromEntries(
+              availableTools.filter((name) => {
+                if (name in BUILT_IN_PAGE_TOOL_SCHEMAS) {
+                  const allowed = BUILT_IN_PAGE_TOOL_ROUTE_ALLOWLIST[name];
+                  return allowed && routeName && allowed.includes(routeName);
+                }
+                return name in consumerSchemas;
+              }).map((name) => {
+                const schema = BUILT_IN_PAGE_TOOL_SCHEMAS[name] ?? consumerSchemas[name];
+                return [name, schema];
+              })
+            );
+          })() : {};
+          if (config.hooks?.onBeforeToolsActivated && Object.keys(activePageTools).length > 0) {
+            try {
+              const allowed = await config.hooks.onBeforeToolsActivated(
+                Object.keys(activePageTools),
+                routeName,
+                context
+              );
+              const allowedSet = new Set(allowed);
+              for (const key of Object.keys(activePageTools)) {
+                if (!allowedSet.has(key)) {
+                  delete activePageTools[key];
+                }
+              }
+            } catch (hookError) {
+              throw ctx.error(403, {
+                message: hookError instanceof Error ? hookError.message : "Unauthorized: Tool activation denied"
+              });
+            }
+          }
+          const mergedTools = Object.keys(activePageTools).length > 0 ? { ...activePageTools, ...config.tools } : config.tools;
           if (isPublicMode) {
             const result2 = streamText({
               model: config.model,
               messages: messagesWithSystem,
-              tools: config.tools,
+              tools: mergedTools,
               // Enable multi-step tool calls if tools are configured
-              ...config.tools ? { stopWhen: stepCountIs(5) } : {}
+              ...mergedTools ? { stopWhen: stepCountIs(5) } : {}
             });
             return result2.toUIMessageStreamResponse({
               originalMessages: uiMessages
@@ -199,9 +246,9 @@ const aiChatBackendPlugin = (config) => defineBackendPlugin({
           const result = streamText({
             model: config.model,
             messages: messagesWithSystem,
-            tools: config.tools,
+            tools: mergedTools,
             // Enable multi-step tool calls if tools are configured
-            ...config.tools ? { stopWhen: stepCountIs(5) } : {},
+            ...mergedTools ? { stopWhen: stepCountIs(5) } : {},
             onFinish: async (completion) => {
               try {
                 const assistantParts = completion.text ? [{ type: "text", text: completion.text }] : [];

package/dist/packages/stack/src/plugins/ai-chat/client/components/chat-input.cjs

@@ -184,7 +184,7 @@ function ChatInput({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 min-w-0", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           textarea.Textarea,
           {
@@ -193,7 +193,7 @@ function ChatInput({
             onKeyDown: handleKeyDown,
             placeholder: placeholder || localization.CHAT_PLACEHOLDER,
             className: utils.cn(
-              "resize-none pr-12",
+              "resize-none pr-12 max-w-full",
               isCompact ? "min-h-[40px] max-h-[120px] py-2" : "min-h-[50px] max-h-[200px] py-3"
             ),
             rows: 1

package/dist/packages/stack/src/plugins/ai-chat/client/components/chat-input.mjs

@@ -182,7 +182,7 @@ function ChatInput({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative flex-1 min-w-0", children: [
         /* @__PURE__ */ jsx(
           Textarea,
           {
@@ -191,7 +191,7 @@ function ChatInput({
             onKeyDown: handleKeyDown,
             placeholder: placeholder || localization.CHAT_PLACEHOLDER,
             className: cn(
-              "resize-none pr-12",
+              "resize-none pr-12 max-w-full",
               isCompact ? "min-h-[40px] max-h-[120px] py-2" : "min-h-[50px] max-h-[200px] py-3"
             ),
             rows: 1

package/dist/packages/stack/src/plugins/ai-chat/client/components/chat-interface.cjs

@@ -16,6 +16,7 @@ const index = require('../localization/index.cjs');
 const client = require('@btst/stack/plugins/client');
 const plugins_aiChat_queryKeys = require('../../../../../../../plugins/ai-chat/query-keys.cjs');
 const chatHooks = require('../hooks/chat-hooks.cjs');
+const plugins_aiChat_client_context_pageAiContext = require('../../../../../../../plugins/ai-chat/client/context/page-ai-context.cjs');
 
 function ChatInterface({
   apiPath = "/api/chat",
@@ -40,6 +41,7 @@ function ChatInterface({
   );
   const basePath = context.useBasePath();
   const isPublicMode = mode === "public";
+  const pageAIContext = plugins_aiChat_client_context_pageAiContext.usePageAIContext();
   const localization = { ...index.AI_CHAT_LOCALIZATION, ...customLocalization };
   const queryClient = reactQuery.useQueryClient();
   const conversationsListQueryKey = React.useMemo(() => {
@@ -83,13 +85,25 @@ function ChatInterface({
       !initialMessages || initialMessages.length === 0
     )
   );
+  const pageAIContextRef = React.useRef(pageAIContext);
+  React.useEffect(() => {
+    pageAIContextRef.current = pageAIContext;
+  }, [pageAIContext]);
   const transport = React.useMemo(
     () => new ai.DefaultChatTransport({
       api: apiPath,
       // In public mode, don't send conversationId
       body: isPublicMode ? void 0 : () => ({ conversationId: conversationIdRef.current }),
-      // Handle edit operations by using truncated messages from the ref
+      // Handle edit operations and inject page context
       prepareSendMessagesRequest: ({ messages: hookMessages }) => {
+        const currentPageContext = pageAIContextRef.current;
+        const pageContextBody = currentPageContext?.pageDescription ? {
+          pageContext: currentPageContext.pageDescription,
+          availableTools: Object.keys(
+            currentPageContext.clientTools ?? {}
+          ),
+          routeName: currentPageContext.routeName
+        } : {};
         if (editMessagesRef.current !== null) {
           const newUserMessage = hookMessages[hookMessages.length - 1];
           const messagesToSend = [...editMessagesRef.current];
@@ -100,22 +114,63 @@ function ChatInterface({
           return {
             body: {
               messages: messagesToSend,
-              conversationId: conversationIdRef.current
+              conversationId: conversationIdRef.current,
+              ...pageContextBody
             }
           };
         }
         return {
           body: {
             messages: hookMessages,
-            conversationId: conversationIdRef.current
+            conversationId: conversationIdRef.current,
+            ...pageContextBody
           }
         };
       }
     }),
     [apiPath, isPublicMode]
   );
-  const { messages, sendMessage, status, error, setMessages, regenerate } = react.useChat({
+  const addToolOutputRef = React.useRef(null);
+  const {
+    messages,
+    sendMessage,
+    status,
+    error,
+    setMessages,
+    regenerate,
+    addToolOutput
+  } = react.useChat({
     transport,
+    // Automatically resubmit after all client-side tool results are provided
+    sendAutomaticallyWhen: ai.lastAssistantMessageIsCompleteWithToolCalls,
+    onToolCall: async ({ toolCall }) => {
+      const toolName = toolCall.toolName;
+      const handler = pageAIContextRef.current?.clientTools?.[toolName];
+      if (handler) {
+        try {
+          const result = await handler(toolCall.input);
+          addToolOutputRef.current?.({
+            tool: toolName,
+            toolCallId: toolCall.toolCallId,
+            output: result
+          });
+        } catch (err) {
+          addToolOutputRef.current?.({
+            tool: toolName,
+            toolCallId: toolCall.toolCallId,
+            state: "output-error",
+            errorText: err instanceof Error ? err.message : "Tool execution failed"
+          });
+        }
+      } else {
+        addToolOutputRef.current?.({
+          tool: toolName,
+          toolCallId: toolCall.toolCallId,
+          state: "output-error",
+          errorText: `No client-side handler registered for tool "${toolName}". The page context may have changed while the response was streaming.`
+        });
+      }
+    },
     onError: (err) => {
       console.error("useChat onError:", err);
       if (!id && !hasNavigatedRef.current) {
@@ -138,19 +193,24 @@ function ChatInterface({
           if (newConversation) {
             setCurrentConversationId(newConversation.id);
             conversationIdRef.current = newConversation.id;
-            const newUrl = `${basePath}/chat/${newConversation.id}`;
-            if (typeof window !== "undefined") {
-              window.history.replaceState(
-                { ...window.history.state },
-                "",
-                newUrl
-              );
+            if (variant === "full") {
+              const newUrl = `${basePath}/chat/${newConversation.id}`;
+              if (typeof window !== "undefined") {
+                window.history.replaceState(
+                  { ...window.history.state },
+                  "",
+                  newUrl
+                );
+              }
             }
           }
         }
       }
     }
   });
+  React.useEffect(() => {
+    addToolOutputRef.current = addToolOutput;
+  }, [addToolOutput]);
   React.useEffect(() => {
     if (isEditInProgressRef.current) {
       return;
@@ -313,17 +373,24 @@ function ChatInterface({
             ),
             children: [
               messages.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col h-full min-h-[300px]", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: localization.CHAT_EMPTY_STATE }) }),
-                chatSuggestions && chatSuggestions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-2 pb-4 max-w-md mx-auto", children: chatSuggestions.map((suggestion, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    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",
-                    children: suggestion
-                  },
-                  index
-                )) })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center text-muted-foreground mb-4", children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: localization.CHAT_EMPTY_STATE }) }),
+                (() => {
+                  const pageSuggestions = pageAIContext?.suggestions ?? [];
+                  const allSuggestions = [
+                    ...pageSuggestions,
+                    ...chatSuggestions ?? []
+                  ];
+                  return allSuggestions.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap justify-center gap-2 pb-4 max-w-md mx-auto", children: allSuggestions.map((suggestion, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      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",
+                      children: suggestion
+                    },
+                    index
+                  )) }) : null;
+                })()
               ] }) : messages.map((m, index) => /* @__PURE__ */ jsxRuntime.jsx(
                 chatMessage.ChatMessage,
                 {