@btst/stack 4.1.1 → 4.2.0

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

@@ -17,6 +17,7 @@ import { createApiClient } from '@btst/stack/plugins/client';
 import { aiChatIdentityKey, createAiChatQueryKeys } from '../../../../../../../plugins/ai-chat/query-keys.mjs';
 import { useAiChatIdentityPartition, useConversation, useConversations } from '../hooks/chat-hooks.mjs';
 import { usePageAIContext } from '../../../../../../../plugins/ai-chat/client/context/page-ai-context.mjs';
+import { useChatAnalytics } from '../context/chat-analytics.mjs';
 import { navigateAiChatCrossOrigin } from '../navigation.mjs';
 
 function reconcilePersistedMessageIds(messages, persistedMessages) {
@@ -129,6 +130,8 @@ function PermissionedChatMessage({
   conversationId,
   ownerId,
   messageId,
+  toolNames,
+  routeName,
   ...messageProps
 }) {
   if (!action) return /* @__PURE__ */ jsx(ChatMessage, { ...messageProps });
@@ -140,6 +143,8 @@ function PermissionedChatMessage({
       conversationId,
       ownerId,
       messageId,
+      toolNames,
+      routeName,
       children: (allowed) => /* @__PURE__ */ jsx(
         ChatMessage,
         {
@@ -184,6 +189,10 @@ function ChatInterface({
   const siteBasePath = plugins?.aiChat?.site.basePath ?? stackBasePath;
   const isPublicMode = mode === "public";
   const pageAIContext = usePageAIContext();
+  const effectiveToolNames = [
+    ...Object.keys(pageAIContext?.clientTools ?? {}),
+    ...plugins?.aiChat?.config?.pageContent ? ["readPage"] : []
+  ];
   const tr = useAiChatTranslation(customLocalization);
   const queryClient = useQueryClient(stackQueryClient);
   const identityPartition = useAiChatIdentityPartition();
@@ -328,6 +337,29 @@ function ChatInterface({
     });
   }, [browserHeaders, credentials, isPublicMode, resolvedApiPath]);
   const addToolOutputRef = useRef(null);
+  const mounted = useRef(true);
+  const track = useChatAnalytics();
+  const inputKind = useRef("typed");
+  const responseStarted = useRef(null);
+  const trackSubmission = useCallback(
+    (kind, inputLength, messageCount, attachmentCount = 0) => {
+      responseStarted.current = Date.now();
+      track({
+        type: "message_submitted",
+        inputKind: kind,
+        inputLength,
+        messageCount,
+        attachmentCount
+      });
+    },
+    [track]
+  );
+  const trackFailure = useCallback(() => {
+    if (!mounted.current || responseStarted.current === null) return;
+    const durationMs = Math.max(0, Date.now() - responseStarted.current);
+    responseStarted.current = null;
+    track({ type: "response_failed", durationMs });
+  }, [track]);
   const {
     messages,
     sendMessage,
@@ -341,15 +373,16 @@ function ChatInterface({
     id: `${chatInstanceId}:${isPublicMode ? "public" : identitySessionVersion}`,
     transport,
     // Automatically resubmit after all client-side tool results are provided
-    sendAutomaticallyWhen: (options) => (isPublicMode || identitySessionVersion === identitySessionGeneration.current) && lastAssistantMessageIsCompleteWithToolCalls(options),
+    sendAutomaticallyWhen: (options) => mounted.current && (isPublicMode || identitySessionVersion === identitySessionGeneration.current) && lastAssistantMessageIsCompleteWithToolCalls(options),
     onToolCall: async ({ toolCall }) => {
+      if (!mounted.current) return;
       const toolRequest = pendingStreamRequests.current.at(-1);
       if (!isPublicMode && (identitySessionVersion !== identitySessionGeneration.current || !toolRequest || toolRequest.identityPartitionKey !== latestIdentityPartitionKey.current || toolRequest.generation !== latestStreamRequestGeneration.current || activeStreamPartitionKey.current !== toolRequest.identityPartitionKey)) {
         return;
       }
       const toolIdentityPartitionKey = toolRequest?.identityPartitionKey ?? latestIdentityPartitionKey.current;
       const toolStreamRequestGeneration = toolRequest?.generation ?? latestStreamRequestGeneration.current;
-      const toolRequestIsCurrent = () => isPublicMode || identitySessionVersion === identitySessionGeneration.current && toolIdentityPartitionKey === latestIdentityPartitionKey.current && toolStreamRequestGeneration === latestStreamRequestGeneration.current;
+      const toolRequestIsCurrent = () => mounted.current && (isPublicMode || identitySessionVersion === identitySessionGeneration.current && toolIdentityPartitionKey === latestIdentityPartitionKey.current && toolStreamRequestGeneration === latestStreamRequestGeneration.current);
       const toolName = toolCall.toolName;
       const handler = pageAIContextRef.current?.clientTools?.[toolName];
       if (handler) {
@@ -389,6 +422,7 @@ function ChatInterface({
       }
     },
     onError: (err) => {
+      if (!mounted.current) return;
       console.error("useChat onError:", err);
       if (!isPublicMode && identitySessionVersion !== identitySessionGeneration.current) {
         return;
@@ -398,8 +432,30 @@ function ChatInterface({
       if (!isPublicMode && failedPartitionKey !== latestIdentityPartitionKey.current) {
         return;
       }
+      trackFailure();
     },
-    onFinish: async () => {
+    onFinish: async (completion) => {
+      if (!mounted.current || !isPublicMode && identitySessionVersion !== identitySessionGeneration.current)
+        return;
+      if (completion?.isError || completion?.isDisconnect) trackFailure();
+      else if (completion?.isAbort) responseStarted.current = null;
+      else if (completion && responseStarted.current !== null && !lastAssistantMessageIsCompleteWithToolCalls({
+        messages: completion.messages
+      })) {
+        const durationMs = Math.max(0, Date.now() - responseStarted.current);
+        responseStarted.current = null;
+        track({
+          type: "response_completed",
+          durationMs,
+          outputLength: completion.message.parts.reduce(
+            (count, part) => count + (part.type === "text" ? part.text.length : 0),
+            0
+          ),
+          toolCallCount: completion.message.parts.filter(
+            (part) => part.type === "dynamic-tool" || part.type.startsWith("tool-")
+          ).length
+        });
+      }
       if (isPublicMode) {
         activeStreamPartitionKey.current = void 0;
         return;
@@ -415,7 +471,7 @@ function ChatInterface({
       if (!finishedRequest || finishedRequest.generation === latestStreamRequestGeneration.current) {
         activeStreamPartitionKey.current = void 0;
       }
-      const identityIsCurrent = () => finishingPartitionKey === latestIdentityPartitionKey.current && (!finishedRequest || finishedRequest.generation === latestStreamRequestGeneration.current);
+      const identityIsCurrent = () => mounted.current && finishingPartitionKey === latestIdentityPartitionKey.current && (!finishedRequest || finishedRequest.generation === latestStreamRequestGeneration.current);
       const finishingIdentityPartition = latestIdentityPartition.current;
       const finishingConversationsListQueryKey = latestConversationsListQueryKey.current;
       const finishingHeaders = latestHeaders.current;
@@ -596,6 +652,15 @@ function ChatInterface({
   useLayoutEffect(() => {
     latestMessages.current = messages;
   }, [messages]);
+  const stopRef = useRef(stop);
+  stopRef.current = stop;
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      void stopRef.current();
+    };
+  }, []);
   const previousIdentityPartition = useRef(identityPartitionKey);
   useLayoutEffect(() => {
     const nextPartition = identityPartitionKey;
@@ -609,6 +674,7 @@ function ChatInterface({
     activeStreamPartitionKey.current = void 0;
     pendingStreamRequests.current = [];
     identitySessionGeneration.current += 1;
+    responseStarted.current = null;
     setIdentitySessionVersion(identitySessionGeneration.current);
     latestStreamRequestGeneration.current = ++nextStreamRequestGeneration.current;
     void stop();
@@ -691,12 +757,20 @@ function ChatInterface({
     }
   }, [messages, isPublicMode, onMessagesChange, isMessagesInitialized]);
   const handleInputChange = (e) => {
+    inputKind.current = "typed";
     setInput(e.target.value);
   };
   const handleSubmit = async (e, files) => {
     e.preventDefault();
     const text = input.trim();
     if (!text && (!files || files.length === 0)) return;
+    trackSubmission(
+      inputKind.current,
+      text.length,
+      messages.length + 1,
+      files?.length ?? 0
+    );
+    inputKind.current = "typed";
     if (!isPublicMode && !id && messages.length === 0) {
       isFirstMessageSentRef.current = true;
     }
@@ -735,6 +809,7 @@ function ChatInterface({
       if (!isPublicMode && (sendIdentityPartitionKey !== latestIdentityPartitionKey.current || sendIdentitySessionGeneration !== identitySessionGeneration.current)) {
         return;
       }
+      trackFailure();
       setInput(savedInput);
       setAttachedFiles(savedFiles);
       if (isFirstMessageSentRef.current && !hasNavigatedRef.current) {
@@ -748,17 +823,19 @@ function ChatInterface({
   const handleRetry = useCallback(() => {
     setHistorySyncError(null);
     activeStreamPartitionKey.current = latestIdentityPartitionKey.current;
+    trackSubmission("retry", 0, messages.length);
     regenerate();
-  }, [regenerate]);
+  }, [regenerate, trackSubmission, messages.length]);
   useEffect(() => {
     if (pendingEdit && pendingEdit.identityPartitionKey === latestIdentityPartitionKey.current && pendingEdit.streamRequestGeneration === latestStreamRequestGeneration.current && messages.length === pendingEdit.expectedLength) {
       const textToSend = pendingEdit.text;
       setPendingEdit(null);
       isEditInProgressRef.current = false;
       activeStreamPartitionKey.current = latestIdentityPartitionKey.current;
+      trackSubmission("edit", textToSend.length, messages.length + 1);
       sendMessage({ text: textToSend });
     }
-  }, [messages.length, pendingEdit, sendMessage]);
+  }, [messages.length, pendingEdit, sendMessage, trackSubmission]);
   const handleEditMessage = useCallback(
     (messageId, newText) => {
       setHistorySyncError(null);
@@ -817,7 +894,11 @@ function ChatInterface({
                     "button",
                     {
                       type: "button",
-                      onClick: () => setInput(suggestion),
+                      onClick: () => {
+                        inputKind.current = "suggestion";
+                        track({ type: "suggestion_selected", index });
+                        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
                     },
@@ -828,6 +909,8 @@ function ChatInterface({
                 PermissionedChatMessage,
                 {
                   publicMode: isPublicMode,
+                  toolNames: effectiveToolNames,
+                  routeName: pageAIContext?.routeName,
                   action: m.role === "user" ? "edit" : m.role === "assistant" && index === messages.length - 1 ? "retry" : void 0,
                   conversationId: currentConversationId,
                   ownerId: currentConversationOwnerId,
@@ -878,7 +961,7 @@ function ChatInterface({
         action: "send",
         conversationId: currentConversationId,
         ownerId: currentConversationOwnerId,
-        toolNames: Object.keys(pageAIContext?.clientTools ?? {}),
+        toolNames: effectiveToolNames,
         routeName: pageAIContext?.routeName,
         children: (allowed) => allowed && !historySyncError ? /* @__PURE__ */ jsx(
           "div",

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

@@ -13,13 +13,19 @@ const chatInterface = require('./chat-interface.cjs');
 const plugins_aiChat_client_context_pageAiContext = require('../../../../../../../plugins/ai-chat/client/context/page-ai-context.cjs');
 const context = require('@btst/stack/context');
 const overrides = require('../overrides.cjs');
+const chatAnalytics = require('../context/chat-analytics.cjs');
 const index = require('../localization/index.cjs');
 
 function ChatLayout(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(plugins_aiChat_client_context_pageAiContext.PageAIContextScope.Provider, { value: props.pageContext, children: /* @__PURE__ */ jsxRuntime.jsx(chatAnalytics.ChatAnalyticsPageKey.Provider, { value: props.pageKey, children: /* @__PURE__ */ jsxRuntime.jsx(ChatLayoutContent, { ...props }, props.pageKey) }) });
+}
+function ChatLayoutContent(props) {
+  const track = chatAnalytics.useChatAnalytics();
   const {
     conversationId,
     layout = "full",
     className,
+    style,
     showSidebar: requestedShowSidebar = true,
     initialMessages,
     onMessagesChange,
@@ -30,8 +36,8 @@ function ChatLayout(props) {
   const resolvedMode = overrides.resolveAiChatMode(plugins?.aiChat?.config);
   const showSidebar = requestedShowSidebar && resolvedMode !== "public";
   const tr = index.useAiChatTranslation(localization);
-  const widgetHeight = props.layout === "widget" ? props.widgetHeight ?? "600px" : "600px";
-  const widgetWidth = props.layout === "widget" ? props.widgetWidth ?? "380px" : "380px";
+  const widgetHeight = props.layout === "widget" ? props.widgetHeight ?? "min(600px, calc(100dvh - 112px))" : void 0;
+  const widgetWidth = props.layout === "widget" ? props.widgetWidth ?? "min(380px, calc(100vw - 32px))" : void 0;
   const defaultOpen = props.layout === "widget" ? props.defaultOpen ?? false : false;
   const showTrigger = props.layout === "widget" ? props.showTrigger ?? true : true;
   const [sidebarOpen, setSidebarOpen] = React.useState(true);
@@ -40,6 +46,37 @@ function ChatLayout(props) {
   const [widgetOpen, setWidgetOpen] = React.useState(defaultOpen);
   const [widgetResetKey, setWidgetResetKey] = React.useState(0);
   const [widgetEverOpened, setWidgetEverOpened] = React.useState(defaultOpen);
+  const [tipDismissed, setTipDismissed] = React.useState(defaultOpen);
+  const introTip = props.layout === "widget" ? props.introTip : void 0;
+  const introTipDuration = props.layout === "widget" ? props.introTipDuration ?? 6e3 : 6e3;
+  const tipShown = React.useRef(false);
+  const tipDismissedRef = React.useRef(defaultOpen);
+  const dismissTip = React.useCallback(
+    (reason) => {
+      if (tipShown.current && !tipDismissedRef.current) {
+        tipDismissedRef.current = true;
+        track({ type: "intro_tip_dismissed", reason });
+      }
+      setTipDismissed(true);
+    },
+    [track]
+  );
+  React.useEffect(() => {
+    if (!introTip || !showTrigger || tipDismissed) return;
+    if (!tipShown.current) {
+      tipShown.current = true;
+      track({ type: "intro_tip_shown" });
+    }
+    const timeout = setTimeout(() => dismissTip("timeout"), introTipDuration);
+    return () => clearTimeout(timeout);
+  }, [
+    introTip,
+    introTipDuration,
+    showTrigger,
+    tipDismissed,
+    dismissTip,
+    track
+  ]);
   const pageAIContext = plugins_aiChat_client_context_pageAiContext.usePageAIContext();
   const handleNewChat = React.useCallback(() => {
     if (!conversationId) {
@@ -52,10 +89,38 @@ function ChatLayout(props) {
       {
         className: utils.cn(
           "flex flex-col items-end gap-3",
+          props.layout === "widget" && props.floating && "fixed right-4 bottom-[max(1rem,env(safe-area-inset-bottom))] z-50",
           className,
           classNames?.container
         ),
+        style,
         children: [
+          introTip && showTrigger && !tipDismissed && !widgetOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              role: "status",
+              className: "flex max-w-[min(280px,calc(100vw-32px))] items-center gap-2 rounded-lg border bg-background p-3 text-sm text-foreground shadow-lg",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: introTip }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-7 w-7 shrink-0",
+                    onClick: () => dismissTip("manual"),
+                    "aria-label": tr(
+                      "A11Y_DISMISS_CHAT_TIP",
+                      "aiChat.a11y.dismissChatTip",
+                      "Dismiss chat tip"
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-4 w-4", "aria-hidden": "true" })
+                  }
+                )
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
@@ -84,6 +149,7 @@ function ChatLayout(props) {
                       size: "icon",
                       className: "h-5 w-5",
                       onClick: () => {
+                        track({ type: "conversation_cleared" });
                         onClear?.();
                         setWidgetResetKey((prev) => prev + 1);
                       },
@@ -106,7 +172,10 @@ function ChatLayout(props) {
                       variant: "ghost",
                       size: "icon",
                       className: "h-5 w-5",
-                      onClick: () => setWidgetOpen(false),
+                      onClick: () => {
+                        setWidgetOpen(false);
+                        track({ type: "widget_closed" });
+                      },
                       "aria-label": tr(
                         "A11Y_CLOSE_CHAT",
                         "aiChat.a11y.closeChat",
@@ -135,6 +204,8 @@ function ChatLayout(props) {
               size: "icon",
               className: "h-12 w-12 rounded-full shadow-lg",
               onClick: () => {
+                dismissTip("open");
+                track({ type: widgetOpen ? "widget_closed" : "widget_opened" });
                 setWidgetOpen((prev) => !prev);
                 setWidgetEverOpened(true);
               },
@@ -156,6 +227,7 @@ function ChatLayout(props) {
         classNames?.container
       ),
       "data-testid": "chat-layout",
+      style,
       children: [
         showSidebar && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -240,6 +312,7 @@ function ChatLayout(props) {
                 variant: "ghost",
                 size: "icon",
                 onClick: () => {
+                  track({ type: "conversation_cleared" });
                   onClear();
                   setChatResetKey((prev) => prev + 1);
                 },

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

@@ -1,23 +1,29 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useCallback } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useCallback, useEffect } from 'react';
 import { Button } from '../../../../../../ui/src/components/button.mjs';
 import { Badge } from '../../../../../../ui/src/components/badge.mjs';
 import { Sheet, SheetTrigger, SheetContent } from '../../../../../../ui/src/components/sheet.mjs';
-import { Sparkles, Trash2, X, Menu, PanelLeftClose, PanelLeft } from 'lucide-react';
+import { X, Sparkles, Trash2, Menu, PanelLeftClose, PanelLeft } from 'lucide-react';
 import { cn } from '../../../../../../ui/src/lib/utils.mjs';
 import { ChatSidebar } from './chat-sidebar.mjs';
 import { ChatInterface } from './chat-interface.mjs';
-import { usePageAIContext } from '../../../../../../../plugins/ai-chat/client/context/page-ai-context.mjs';
+import { PageAIContextScope, usePageAIContext } from '../../../../../../../plugins/ai-chat/client/context/page-ai-context.mjs';
 import { usePluginOverrides, useStack } from '@btst/stack/context';
 import { resolveAiChatMode } from '../overrides.mjs';
+import { ChatAnalyticsPageKey, useChatAnalytics } from '../context/chat-analytics.mjs';
 import { useAiChatTranslation } from '../localization/index.mjs';
 
 function ChatLayout(props) {
+  return /* @__PURE__ */ jsx(PageAIContextScope.Provider, { value: props.pageContext, children: /* @__PURE__ */ jsx(ChatAnalyticsPageKey.Provider, { value: props.pageKey, children: /* @__PURE__ */ jsx(ChatLayoutContent, { ...props }, props.pageKey) }) });
+}
+function ChatLayoutContent(props) {
+  const track = useChatAnalytics();
   const {
     conversationId,
     layout = "full",
     className,
+    style,
     showSidebar: requestedShowSidebar = true,
     initialMessages,
     onMessagesChange,
@@ -28,8 +34,8 @@ function ChatLayout(props) {
   const resolvedMode = resolveAiChatMode(plugins?.aiChat?.config);
   const showSidebar = requestedShowSidebar && resolvedMode !== "public";
   const tr = useAiChatTranslation(localization);
-  const widgetHeight = props.layout === "widget" ? props.widgetHeight ?? "600px" : "600px";
-  const widgetWidth = props.layout === "widget" ? props.widgetWidth ?? "380px" : "380px";
+  const widgetHeight = props.layout === "widget" ? props.widgetHeight ?? "min(600px, calc(100dvh - 112px))" : void 0;
+  const widgetWidth = props.layout === "widget" ? props.widgetWidth ?? "min(380px, calc(100vw - 32px))" : void 0;
   const defaultOpen = props.layout === "widget" ? props.defaultOpen ?? false : false;
   const showTrigger = props.layout === "widget" ? props.showTrigger ?? true : true;
   const [sidebarOpen, setSidebarOpen] = useState(true);
@@ -38,6 +44,37 @@ function ChatLayout(props) {
   const [widgetOpen, setWidgetOpen] = useState(defaultOpen);
   const [widgetResetKey, setWidgetResetKey] = useState(0);
   const [widgetEverOpened, setWidgetEverOpened] = useState(defaultOpen);
+  const [tipDismissed, setTipDismissed] = useState(defaultOpen);
+  const introTip = props.layout === "widget" ? props.introTip : void 0;
+  const introTipDuration = props.layout === "widget" ? props.introTipDuration ?? 6e3 : 6e3;
+  const tipShown = useRef(false);
+  const tipDismissedRef = useRef(defaultOpen);
+  const dismissTip = useCallback(
+    (reason) => {
+      if (tipShown.current && !tipDismissedRef.current) {
+        tipDismissedRef.current = true;
+        track({ type: "intro_tip_dismissed", reason });
+      }
+      setTipDismissed(true);
+    },
+    [track]
+  );
+  useEffect(() => {
+    if (!introTip || !showTrigger || tipDismissed) return;
+    if (!tipShown.current) {
+      tipShown.current = true;
+      track({ type: "intro_tip_shown" });
+    }
+    const timeout = setTimeout(() => dismissTip("timeout"), introTipDuration);
+    return () => clearTimeout(timeout);
+  }, [
+    introTip,
+    introTipDuration,
+    showTrigger,
+    tipDismissed,
+    dismissTip,
+    track
+  ]);
   const pageAIContext = usePageAIContext();
   const handleNewChat = useCallback(() => {
     if (!conversationId) {
@@ -50,10 +87,38 @@ function ChatLayout(props) {
       {
         className: cn(
           "flex flex-col items-end gap-3",
+          props.layout === "widget" && props.floating && "fixed right-4 bottom-[max(1rem,env(safe-area-inset-bottom))] z-50",
           className,
           classNames?.container
         ),
+        style,
         children: [
+          introTip && showTrigger && !tipDismissed && !widgetOpen && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "status",
+              className: "flex max-w-[min(280px,calc(100vw-32px))] items-center gap-2 rounded-lg border bg-background p-3 text-sm text-foreground shadow-lg",
+              children: [
+                /* @__PURE__ */ jsx("span", { children: introTip }),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-7 w-7 shrink-0",
+                    onClick: () => dismissTip("manual"),
+                    "aria-label": tr(
+                      "A11Y_DISMISS_CHAT_TIP",
+                      "aiChat.a11y.dismissChatTip",
+                      "Dismiss chat tip"
+                    ),
+                    children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": "true" })
+                  }
+                )
+              ]
+            }
+          ),
           /* @__PURE__ */ jsxs(
             "div",
             {
@@ -82,6 +147,7 @@ function ChatLayout(props) {
                       size: "icon",
                       className: "h-5 w-5",
                       onClick: () => {
+                        track({ type: "conversation_cleared" });
                         onClear?.();
                         setWidgetResetKey((prev) => prev + 1);
                       },
@@ -104,7 +170,10 @@ function ChatLayout(props) {
                       variant: "ghost",
                       size: "icon",
                       className: "h-5 w-5",
-                      onClick: () => setWidgetOpen(false),
+                      onClick: () => {
+                        setWidgetOpen(false);
+                        track({ type: "widget_closed" });
+                      },
                       "aria-label": tr(
                         "A11Y_CLOSE_CHAT",
                         "aiChat.a11y.closeChat",
@@ -133,6 +202,8 @@ function ChatLayout(props) {
               size: "icon",
               className: "h-12 w-12 rounded-full shadow-lg",
               onClick: () => {
+                dismissTip("open");
+                track({ type: widgetOpen ? "widget_closed" : "widget_opened" });
                 setWidgetOpen((prev) => !prev);
                 setWidgetEverOpened(true);
               },
@@ -154,6 +225,7 @@ function ChatLayout(props) {
         classNames?.container
       ),
       "data-testid": "chat-layout",
+      style,
       children: [
         showSidebar && /* @__PURE__ */ jsx(
           "div",
@@ -238,6 +310,7 @@ function ChatLayout(props) {
                 variant: "ghost",
                 size: "icon",
                 onClick: () => {
+                  track({ type: "conversation_cleared" });
                   onClear();
                   setChatResetKey((prev) => prev + 1);
                 },

package/dist/packages/stack/src/plugins/ai-chat/client/components/tool-call-display.cjs

@@ -54,6 +54,23 @@ function ToolCallDisplay({
 }) {
   const { localization } = context.usePluginOverrides("aiChat", {});
   const tr = index.useAiChatTranslation(localization);
+  const { plugins } = context.useStack();
+  if (toolName === "readPage" && plugins?.aiChat?.config?.pageContent === true) {
+    const failed = state === "output-error";
+    return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", role: "status", children: failed ? tr(
+      "PAGE_CONTENT_ERROR",
+      "aiChat.pageContent.error",
+      "Unable to read this page."
+    ) : state === "output-available" ? tr(
+      "PAGE_CONTENT_READ",
+      "aiChat.pageContent.read",
+      "Read page content"
+    ) : tr(
+      "PAGE_CONTENT_READING",
+      "aiChat.pageContent.reading",
+      "Reading page content\u2026"
+    ) });
+  }
   const displayName = formatToolName(toolName);
   const statusLabel = isLoading || state === "input-streaming" ? tr("TOOL_STATUS_RUNNING", "aiChat.tools.status.running", "Running...") : state === "input-available" ? tr(
     "TOOL_STATUS_EXECUTING",

package/dist/packages/stack/src/plugins/ai-chat/client/components/tool-call-display.mjs

@@ -5,7 +5,7 @@ import { MarkdownContent } from '../../../../../../ui/src/components/markdown-co
 import { Skeleton } from '../../../../../../ui/src/components/skeleton.mjs';
 import { cn } from '../../../../../../ui/src/lib/utils.mjs';
 import { Wrench, Loader2, AlertCircle, Check } from 'lucide-react';
-import { usePluginOverrides } from '@btst/stack/context';
+import { usePluginOverrides, useStack } from '@btst/stack/context';
 import { useAiChatTranslation } from '../localization/index.mjs';
 
 function formatToolName(name) {
@@ -52,6 +52,23 @@ function ToolCallDisplay({
 }) {
   const { localization } = usePluginOverrides("aiChat", {});
   const tr = useAiChatTranslation(localization);
+  const { plugins } = useStack();
+  if (toolName === "readPage" && plugins?.aiChat?.config?.pageContent === true) {
+    const failed = state === "output-error";
+    return /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", role: "status", children: failed ? tr(
+      "PAGE_CONTENT_ERROR",
+      "aiChat.pageContent.error",
+      "Unable to read this page."
+    ) : state === "output-available" ? tr(
+      "PAGE_CONTENT_READ",
+      "aiChat.pageContent.read",
+      "Read page content"
+    ) : tr(
+      "PAGE_CONTENT_READING",
+      "aiChat.pageContent.reading",
+      "Reading page content\u2026"
+    ) });
+  }
   const displayName = formatToolName(toolName);
   const statusLabel = isLoading || state === "input-streaming" ? tr("TOOL_STATUS_RUNNING", "aiChat.tools.status.running", "Running...") : state === "input-available" ? tr(
     "TOOL_STATUS_EXECUTING",

package/dist/packages/stack/src/plugins/ai-chat/client/context/chat-analytics.cjs

@@ -0,0 +1,42 @@
+"use client";
+'use strict';
+
+const React = require('react');
+const context = require('@btst/stack/context');
+const plugins_aiChat_client_context_pageAiContext = require('../../../../../../../plugins/ai-chat/client/context/page-ai-context.cjs');
+const overrides = require('../overrides.cjs');
+
+const ChatAnalyticsPageKey = React.createContext(
+  void 0
+);
+function useChatAnalytics() {
+  const { onAnalyticsEvent } = context.usePluginOverrides("aiChat", {});
+  const { plugins } = context.useStack();
+  const pageKey = React.useContext(ChatAnalyticsPageKey);
+  const routeName = plugins_aiChat_client_context_pageAiContext.usePageAIContext()?.routeName;
+  const latest = React.useRef({
+    onAnalyticsEvent,
+    pageKey,
+    routeName,
+    mode: overrides.resolveAiChatMode(plugins?.aiChat?.config)
+  });
+  latest.current = {
+    onAnalyticsEvent,
+    pageKey,
+    routeName,
+    mode: overrides.resolveAiChatMode(plugins?.aiChat?.config)
+  };
+  return React.useCallback((event) => {
+    const { onAnalyticsEvent: callback, ...context } = latest.current;
+    try {
+      void Promise.resolve(callback?.({ ...context, ...event })).catch(
+        () => {
+        }
+      );
+    } catch {
+    }
+  }, []);
+}
+
+exports.ChatAnalyticsPageKey = ChatAnalyticsPageKey;
+exports.useChatAnalytics = useChatAnalytics;