@btst/stack 4.1.1 → 4.3.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

@@ -3,6 +3,8 @@
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
+const ReactDOM = require('react-dom');
+const dialog = require('../../../../../../ui/src/components/dialog.cjs');
 const button = require('../../../../../../ui/src/components/button.cjs');
 const badge = require('../../../../../../ui/src/components/badge.cjs');
 const sheet = require('../../../../../../ui/src/components/sheet.cjs');
@@ -13,13 +15,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,16 +38,77 @@ 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(640px, calc(100dvh - 112px))" : void 0;
+  const widgetWidth = props.layout === "widget" ? props.widgetWidth ?? "min(440px, calc(100vw - 32px))" : void 0;
   const defaultOpen = props.layout === "widget" ? props.defaultOpen ?? false : false;
   const showTrigger = props.layout === "widget" ? props.showTrigger ?? true : true;
+  const triggerIcon = props.layout === "widget" ? props.triggerIcon : void 0;
   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 [expanded, setExpanded] = React.useState(false);
+  const expandable = props.layout === "widget" && props.expandable === true;
+  const widgetExpanded = expandable && expanded && widgetOpen;
+  React.useEffect(() => {
+    if (!expandable) setExpanded(false);
+  }, [expandable]);
+  const compactPanelRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const expandRef = React.useRef(null);
+  const [panelContainer, setPanelContainer] = React.useState(
+    null
+  );
+  const expandLabel = widgetExpanded ? tr("A11Y_COLLAPSE_CHAT", "aiChat.a11y.collapseChat", "Collapse chat") : tr("A11Y_EXPAND_CHAT", "aiChat.a11y.expandChat", "Expand chat");
+  React.useEffect(() => {
+    if (layout !== "widget") return;
+    const container = document.createElement("div");
+    container.className = "flex h-full min-h-0 flex-col";
+    compactPanelRef.current?.appendChild(container);
+    setPanelContainer(container);
+    return () => container.remove();
+  }, [layout]);
+  const mountExpandedPanel = React.useCallback(
+    (node) => {
+      if (panelContainer) {
+        (node ?? compactPanelRef.current)?.appendChild(panelContainer);
+      }
+    },
+    [panelContainer]
+  );
   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,95 +121,198 @@ 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: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          introTip && showTrigger && !tipDismissed && !widgetOpen && /* @__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 },
+              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.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: tr("A11Y_CHAT_TITLE", "aiChat.a11y.title", "AI Chat") }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    button.Button,
-                    {
-                      variant: "ghost",
-                      size: "icon",
-                      className: "h-5 w-5",
-                      onClick: () => {
-                        onClear?.();
-                        setWidgetResetKey((prev) => prev + 1);
-                      },
-                      "aria-label": tr(
-                        "A11Y_CLEAR_CHAT",
-                        "aiChat.a11y.clearChat",
-                        "Clear chat"
-                      ),
-                      title: tr(
-                        "A11Y_CLEAR_CHAT",
-                        "aiChat.a11y.clearChat",
-                        "Clear chat"
-                      ),
-                      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": tr(
-                        "A11Y_CLOSE_CHAT",
-                        "aiChat.a11y.closeChat",
-                        "Close chat"
-                      ),
-                      children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-3.5 w-3.5" })
-                    }
-                  )
-                ] }),
-                widgetEverOpened && /* @__PURE__ */ jsxRuntime.jsx(
-                  chatInterface.ChatInterface,
+                /* @__PURE__ */ jsxRuntime.jsx("span", { children: introTip }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
                   {
-                    id: conversationId,
-                    variant: "widget",
-                    initialMessages,
-                    onMessagesChange
-                  },
-                  `widget-${conversationId ?? "new"}-${widgetResetKey}`
+                    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.jsx(
+            "div",
+            {
+              ref: compactPanelRef,
+              role: "dialog",
+              tabIndex: -1,
+              "aria-label": tr("A11Y_CHAT_TITLE", "aiChat.a11y.title", "AI Chat"),
+              className: utils.cn(
+                "overflow-hidden rounded-xl border bg-background shadow-xl",
+                (!widgetOpen || widgetExpanded) && "hidden"
+              ),
+              style: { height: widgetHeight, width: widgetWidth }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: widgetExpanded, onOpenChange: setExpanded, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            dialog.DialogContent,
+            {
+              showCloseButton: false,
+              style: {
+                ...style,
+                position: "fixed",
+                inset: 0,
+                top: 0,
+                right: 0,
+                bottom: 0,
+                left: 0,
+                width: "100vw",
+                height: "100dvh",
+                minWidth: 0,
+                minHeight: 0,
+                maxWidth: "none",
+                maxHeight: "none",
+                margin: 0,
+                transform: "none",
+                translate: "none",
+                zIndex: 50,
+                animation: "none"
+              },
+              "aria-describedby": void 0,
+              className: utils.cn(
+                className,
+                classNames?.container,
+                "fixed inset-0 z-50 flex h-dvh w-screen max-w-none translate-x-0 translate-y-0 flex-col gap-0 rounded-none border-0 p-0 sm:max-w-none pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]"
+              ),
+              onCloseAutoFocus: (event) => {
+                const target = widgetOpen ? expandRef.current ?? compactPanelRef.current : triggerRef.current;
+                if (target) {
+                  event.preventDefault();
+                  target.focus();
+                }
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { className: "sr-only", children: tr("A11Y_CHAT_TITLE", "aiChat.a11y.title", "AI Chat") }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mountExpandedPanel, className: "min-h-0 flex-1" })
+              ]
+            }
+          ) }),
+          panelContainer && ReactDOM.createPortal(
+            /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 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: tr("A11Y_CHAT_TITLE", "aiChat.a11y.title", "AI Chat") }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+                expandable && /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-7 w-7",
+                    ref: expandRef,
+                    onClick: () => setExpanded((prev) => !prev),
+                    "aria-label": expandLabel,
+                    title: expandLabel,
+                    "aria-expanded": widgetExpanded,
+                    children: widgetExpanded ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Minimize2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Maximize2, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  button.Button,
+                  {
+                    variant: "ghost",
+                    size: "icon",
+                    className: "h-5 w-5",
+                    onClick: () => {
+                      track({ type: "conversation_cleared" });
+                      onClear?.();
+                      setWidgetResetKey((prev) => prev + 1);
+                    },
+                    "aria-label": tr(
+                      "A11Y_CLEAR_CHAT",
+                      "aiChat.a11y.clearChat",
+                      "Clear chat"
+                    ),
+                    title: tr(
+                      "A11Y_CLEAR_CHAT",
+                      "aiChat.a11y.clearChat",
+                      "Clear chat"
+                    ),
+                    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);
+                      setExpanded(false);
+                      triggerRef.current?.focus();
+                      track({ type: "widget_closed" });
+                    },
+                    "aria-label": tr(
+                      "A11Y_CLOSE_CHAT",
+                      "aiChat.a11y.closeChat",
+                      "Close chat"
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-3.5 w-3.5" })
+                  }
+                )
+              ] }),
+              widgetEverOpened && /* @__PURE__ */ jsxRuntime.jsx(
+                chatInterface.ChatInterface,
+                {
+                  id: conversationId,
+                  variant: "widget",
+                  initialMessages,
+                  onMessagesChange
+                },
+                `widget-${conversationId ?? "new"}-${widgetResetKey}`
+              )
+            ] }),
+            panelContainer
+          ),
           showTrigger && /* @__PURE__ */ jsxRuntime.jsx(
             button.Button,
             {
+              ref: triggerRef,
               size: "icon",
               className: "h-12 w-12 rounded-full shadow-lg",
               onClick: () => {
+                dismissTip("open");
+                track({ type: widgetOpen ? "widget_closed" : "widget_opened" });
                 setWidgetOpen((prev) => !prev);
+                setExpanded(false);
                 setWidgetEverOpened(true);
               },
               "aria-label": widgetOpen ? tr("A11Y_CLOSE_CHAT", "aiChat.a11y.closeChat", "Close chat") : tr("A11Y_OPEN_CHAT", "aiChat.a11y.openChat", "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" })
+              children: widgetOpen ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "h-5 w-5" }) : triggerIcon ?? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Sparkles, { className: "h-5 w-5" })
             }
           )
         ]
@@ -156,6 +328,7 @@ function ChatLayout(props) {
         classNames?.container
       ),
       "data-testid": "chat-layout",
+      style,
       children: [
         showSidebar && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -240,6 +413,7 @@ function ChatLayout(props) {
                 variant: "ghost",
                 size: "icon",
                 onClick: () => {
+                  track({ type: "conversation_cleared" });
                   onClear();
                   setChatResetKey((prev) => prev + 1);
                 },