@btst/stack 2.3.0 → 2.5.0

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,
                 {

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

@@ -7,13 +7,14 @@ import { ChatMessage } from './chat-message.mjs';
 import { ChatInput } from './chat-input.mjs';
 import { StackAttribution } from '../../../../../../ui/src/components/stack-attribution.mjs';
 import { ScrollArea } from '../../../../../../ui/src/components/scroll-area.mjs';
-import { DefaultChatTransport } from 'ai';
+import { DefaultChatTransport, lastAssistantMessageIsCompleteWithToolCalls } from 'ai';
 import { cn } from '../../../../../../ui/src/lib/utils.mjs';
 import { usePluginOverrides, useBasePath } from '@btst/stack/context';
 import { AI_CHAT_LOCALIZATION } from '../localization/index.mjs';
 import { createApiClient } from '@btst/stack/plugins/client';
 import { createAiChatQueryKeys } from '../../../../../../../plugins/ai-chat/query-keys.mjs';
 import { useConversation, useConversations } from '../hooks/chat-hooks.mjs';
+import { usePageAIContext } from '../../../../../../../plugins/ai-chat/client/context/page-ai-context.mjs';
 
 function ChatInterface({
   apiPath = "/api/chat",
@@ -38,6 +39,7 @@ function ChatInterface({
   );
   const basePath = useBasePath();
   const isPublicMode = mode === "public";
+  const pageAIContext = usePageAIContext();
   const localization = { ...AI_CHAT_LOCALIZATION, ...customLocalization };
   const queryClient = useQueryClient();
   const conversationsListQueryKey = useMemo(() => {
@@ -81,13 +83,25 @@ function ChatInterface({
       !initialMessages || initialMessages.length === 0
     )
   );
+  const pageAIContextRef = useRef(pageAIContext);
+  useEffect(() => {
+    pageAIContextRef.current = pageAIContext;
+  }, [pageAIContext]);
   const transport = useMemo(
     () => new 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];
@@ -98,22 +112,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 } = useChat({
+  const addToolOutputRef = useRef(null);
+  const {
+    messages,
+    sendMessage,
+    status,
+    error,
+    setMessages,
+    regenerate,
+    addToolOutput
+  } = useChat({
     transport,
+    // Automatically resubmit after all client-side tool results are provided
+    sendAutomaticallyWhen: 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) {
@@ -136,19 +191,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
+                );
+              }
             }
           }
         }
       }
     }
   });
+  useEffect(() => {
+    addToolOutputRef.current = addToolOutput;
+  }, [addToolOutput]);
   useEffect(() => {
     if (isEditInProgressRef.current) {
       return;
@@ -311,17 +371,24 @@ function ChatInterface({
             ),
             children: [
               messages.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full min-h-[300px]", children: [
-                /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsx("p", { children: localization.CHAT_EMPTY_STATE }) }),
-                chatSuggestions && chatSuggestions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-2 pb-4 max-w-md mx-auto", children: chatSuggestions.map((suggestion, index) => /* @__PURE__ */ 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__ */ jsx("div", { className: "flex-1 flex items-center justify-center text-muted-foreground mb-4", children: /* @__PURE__ */ jsx("p", { children: localization.CHAT_EMPTY_STATE }) }),
+                (() => {
+                  const pageSuggestions = pageAIContext?.suggestions ?? [];
+                  const allSuggestions = [
+                    ...pageSuggestions,
+                    ...chatSuggestions ?? []
+                  ];
+                  return allSuggestions.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-2 pb-4 max-w-md mx-auto", children: allSuggestions.map((suggestion, index) => /* @__PURE__ */ 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__ */ jsx(
                 ChatMessage,
                 {

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

@@ -4,26 +4,36 @@
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const button = require('../../../../../../ui/src/components/button.cjs');
+const badge = require('../../../../../../ui/src/components/badge.cjs');
 const sheet = require('../../../../../../ui/src/components/sheet.cjs');
 const LucideIcons = require('lucide-react');
 const utils = require('../../../../../../ui/src/lib/utils.cjs');
 const chatSidebar = require('./chat-sidebar.cjs');
 const chatInterface = require('./chat-interface.cjs');
+const plugins_aiChat_client_context_pageAiContext = require('../../../../../../../plugins/ai-chat/client/context/page-ai-context.cjs');
 
-function ChatLayout({
-  apiBaseURL,
-  apiBasePath,
-  conversationId,
-  layout = "full",
-  className,
-  showSidebar = true,
-  widgetHeight = "600px",
-  initialMessages,
-  onMessagesChange
-}) {
+function ChatLayout(props) {
+  const {
+    apiBaseURL,
+    apiBasePath,
+    conversationId,
+    layout = "full",
+    className,
+    showSidebar = true,
+    initialMessages,
+    onMessagesChange
+  } = props;
+  const widgetHeight = props.layout === "widget" ? props.widgetHeight ?? "600px" : "600px";
+  const widgetWidth = props.layout === "widget" ? props.widgetWidth ?? "380px" : "380px";
+  const defaultOpen = props.layout === "widget" ? props.defaultOpen ?? false : false;
+  const showTrigger = props.layout === "widget" ? props.showTrigger ?? true : true;
   const [sidebarOpen, setSidebarOpen] = React.useState(true);
   const [mobileSidebarOpen, setMobileSidebarOpen] = React.useState(false);
   const [chatResetKey, setChatResetKey] = React.useState(0);
+  const [widgetOpen, setWidgetOpen] = React.useState(defaultOpen);
+  const [widgetResetKey, setWidgetResetKey] = React.useState(0);
+  const [widgetEverOpened, setWidgetEverOpened] = React.useState(defaultOpen);
+  const pageAIContext = plugins_aiChat_client_context_pageAiContext.usePageAIContext();
   const apiPath = `${apiBaseURL}${apiBasePath}/chat`;
   const handleNewChat = React.useCallback(() => {
     if (!conversationId) {
@@ -31,26 +41,81 @@ function ChatLayout({
     }
   }, [conversationId]);
   if (layout === "widget") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: utils.cn(
-          "flex flex-col w-full border rounded-xl overflow-hidden bg-background shadow-sm",
-          className
-        ),
-        style: { height: widgetHeight },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          chatInterface.ChatInterface,
-          {
-            apiPath,
-            id: conversationId,
-            variant: "widget",
-            initialMessages,
-            onMessagesChange
-          }
-        )
-      }
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex flex-col items-end gap-3", className), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: utils.cn(
+            "flex flex-col border rounded-xl overflow-hidden bg-background shadow-xl",
+            widgetOpen ? "flex" : "hidden"
+          ),
+          style: { height: widgetHeight, width: widgetWidth },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 px-3 py-1.5 border-b bg-muted/40", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Sparkles, { className: "h-3 w-3 text-muted-foreground" }),
+              pageAIContext ? /* @__PURE__ */ jsxRuntime.jsx(
+                badge.Badge,
+                {
+                  variant: "secondary",
+                  className: "text-xs",
+                  "data-testid": "page-context-badge",
+                  children: pageAIContext.routeName
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground font-medium", children: "AI Chat" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                button.Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-5 w-5",
+                  onClick: () => setWidgetResetKey((prev) => prev + 1),
+                  "aria-label": "Clear chat",
+                  title: "Clear chat",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                button.Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-5 w-5",
+                  onClick: () => setWidgetOpen(false),
+                  "aria-label": "Close chat",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-3.5 w-3.5" })
+                }
+              )
+            ] }),
+            widgetEverOpened && /* @__PURE__ */ jsxRuntime.jsx(
+              chatInterface.ChatInterface,
+              {
+                apiPath,
+                id: conversationId,
+                variant: "widget",
+                initialMessages,
+                onMessagesChange
+              },
+              `widget-${conversationId ?? "new"}-${widgetResetKey}`
+            )
+          ]
+        }
+      ),
+      showTrigger && /* @__PURE__ */ jsxRuntime.jsx(
+        button.Button,
+        {
+          size: "icon",
+          className: "h-12 w-12 rounded-full shadow-lg",
+          onClick: () => {
+            setWidgetOpen((prev) => !prev);
+            setWidgetEverOpened(true);
+          },
+          "aria-label": widgetOpen ? "Close chat" : "Open chat",
+          "data-testid": "widget-trigger",
+          children: widgetOpen ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Sparkles, { className: "h-5 w-5" })
+        }
+      )
+    ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -79,7 +144,7 @@ function ChatLayout({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col min-w-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-2 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 p-2 border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60", children: [
             showSidebar && /* @__PURE__ */ jsxRuntime.jsxs(sheet.Sheet, { open: mobileSidebarOpen, onOpenChange: setMobileSidebarOpen, children: [
               /* @__PURE__ */ jsxRuntime.jsx(sheet.SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
                 button.Button,
@@ -113,7 +178,19 @@ function ChatLayout({
                 children: sidebarOpen ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.PanelLeftClose, { className: "h-5 w-5" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.PanelLeft, { className: "h-5 w-5" })
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+            pageAIContext && /* @__PURE__ */ jsxRuntime.jsxs(
+              badge.Badge,
+              {
+                variant: "secondary",
+                className: "text-xs gap-1 mr-2",
+                "data-testid": "page-context-badge",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Sparkles, { className: "h-3 w-3" }),
+                  pageAIContext.routeName
+                ]
+              }
+            )
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             chatInterface.ChatInterface,