@btst/stack 4.2.0 → 4.3.0

package/README.md

@@ -52,13 +52,13 @@ Render the generated `<Toaster />` in your root layout and start from a clean co
 Run the released generator from the application root:
 
 ```bash
-pnpm dlx @btst/codegen@4.2.0 init \
+pnpm dlx @btst/codegen@4.3.0 init \
   --framework nextjs \
   --adapter memory \
   --plugins blog
 ```
 
-The generator shows detected-file and conflict prompts before it writes. It installs `@btst/stack@4.2.0`, `next-themes@0.4.6`, registers Blog on the backend and client, mounts the API and page routes, adds the plugin CSS, and wires the shared provider.
+The generator shows detected-file and conflict prompts before it writes. It installs `@btst/stack@4.3.0`, `next-themes@0.4.6`, registers Blog on the backend and client, mounts the API and page routes, adds the plugin CSS, and wires the shared provider.
 
 Set the trusted local origins in `.env.local`:
 

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');
@@ -36,14 +38,44 @@ function ChatLayoutContent(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 ?? "min(600px, calc(100dvh - 112px))" : void 0;
-  const widgetWidth = props.layout === "widget" ? props.widgetWidth ?? "min(380px, calc(100vw - 32px))" : void 0;
+  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);
@@ -121,97 +153,166 @@ function ChatLayoutContent(props) {
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__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(
-                "flex flex-col border rounded-xl overflow-hidden bg-background shadow-xl",
-                widgetOpen ? "flex" : "hidden"
+                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)]"
               ),
-              style: { height: widgetHeight, width: widgetWidth },
+              onCloseAutoFocus: (event) => {
+                const target = widgetOpen ? expandRef.current ?? compactPanelRef.current : triggerRef.current;
+                if (target) {
+                  event.preventDefault();
+                  target.focus();
+                }
+              },
               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: () => {
-                        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);
-                        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}`
-                )
+                /* @__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" })
             }
           )
         ]

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

@@ -1,10 +1,12 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { Dialog, DialogContent, DialogTitle } from '../../../../../../ui/src/components/dialog.mjs';
 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 { X, Sparkles, Trash2, Menu, PanelLeftClose, PanelLeft } from 'lucide-react';
+import { X, Sparkles, Minimize2, Maximize2, 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';
@@ -34,14 +36,44 @@ function ChatLayoutContent(props) {
   const resolvedMode = resolveAiChatMode(plugins?.aiChat?.config);
   const showSidebar = requestedShowSidebar && resolvedMode !== "public";
   const tr = useAiChatTranslation(localization);
-  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 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] = useState(true);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const [chatResetKey, setChatResetKey] = useState(0);
   const [widgetOpen, setWidgetOpen] = useState(defaultOpen);
+  const [expanded, setExpanded] = useState(false);
+  const expandable = props.layout === "widget" && props.expandable === true;
+  const widgetExpanded = expandable && expanded && widgetOpen;
+  useEffect(() => {
+    if (!expandable) setExpanded(false);
+  }, [expandable]);
+  const compactPanelRef = useRef(null);
+  const triggerRef = useRef(null);
+  const expandRef = useRef(null);
+  const [panelContainer, setPanelContainer] = useState(
+    null
+  );
+  const expandLabel = widgetExpanded ? tr("A11Y_COLLAPSE_CHAT", "aiChat.a11y.collapseChat", "Collapse chat") : tr("A11Y_EXPAND_CHAT", "aiChat.a11y.expandChat", "Expand chat");
+  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 = useCallback(
+    (node) => {
+      if (panelContainer) {
+        (node ?? compactPanelRef.current)?.appendChild(panelContainer);
+      }
+    },
+    [panelContainer]
+  );
   const [widgetResetKey, setWidgetResetKey] = useState(0);
   const [widgetEverOpened, setWidgetEverOpened] = useState(defaultOpen);
   const [tipDismissed, setTipDismissed] = useState(defaultOpen);
@@ -119,97 +151,166 @@ function ChatLayoutContent(props) {
               ]
             }
           ),
-          /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(
             "div",
             {
+              ref: compactPanelRef,
+              role: "dialog",
+              tabIndex: -1,
+              "aria-label": tr("A11Y_CHAT_TITLE", "aiChat.a11y.title", "AI Chat"),
+              className: cn(
+                "overflow-hidden rounded-xl border bg-background shadow-xl",
+                (!widgetOpen || widgetExpanded) && "hidden"
+              ),
+              style: { height: widgetHeight, width: widgetWidth }
+            }
+          ),
+          /* @__PURE__ */ jsx(Dialog, { open: widgetExpanded, onOpenChange: setExpanded, children: /* @__PURE__ */ jsxs(
+            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: cn(
-                "flex flex-col border rounded-xl overflow-hidden bg-background shadow-xl",
-                widgetOpen ? "flex" : "hidden"
+                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)]"
               ),
-              style: { height: widgetHeight, width: widgetWidth },
+              onCloseAutoFocus: (event) => {
+                const target = widgetOpen ? expandRef.current ?? compactPanelRef.current : triggerRef.current;
+                if (target) {
+                  event.preventDefault();
+                  target.focus();
+                }
+              },
               children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-3 py-1.5 border-b bg-muted/40", children: [
-                  /* @__PURE__ */ jsx(Sparkles, { className: "h-3 w-3 text-muted-foreground" }),
-                  pageAIContext ? /* @__PURE__ */ jsx(
-                    Badge,
-                    {
-                      variant: "secondary",
-                      className: "text-xs",
-                      "data-testid": "page-context-badge",
-                      children: pageAIContext.routeName
-                    }
-                  ) : /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground font-medium", children: tr("A11Y_CHAT_TITLE", "aiChat.a11y.title", "AI Chat") }),
-                  /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-                  /* @__PURE__ */ jsx(
-                    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__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      variant: "ghost",
-                      size: "icon",
-                      className: "h-5 w-5",
-                      onClick: () => {
-                        setWidgetOpen(false);
-                        track({ type: "widget_closed" });
-                      },
-                      "aria-label": tr(
-                        "A11Y_CLOSE_CHAT",
-                        "aiChat.a11y.closeChat",
-                        "Close chat"
-                      ),
-                      children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
-                    }
-                  )
-                ] }),
-                widgetEverOpened && /* @__PURE__ */ jsx(
-                  ChatInterface,
-                  {
-                    id: conversationId,
-                    variant: "widget",
-                    initialMessages,
-                    onMessagesChange
-                  },
-                  `widget-${conversationId ?? "new"}-${widgetResetKey}`
-                )
+                /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: tr("A11Y_CHAT_TITLE", "aiChat.a11y.title", "AI Chat") }),
+                /* @__PURE__ */ jsx("div", { ref: mountExpandedPanel, className: "min-h-0 flex-1" })
               ]
             }
+          ) }),
+          panelContainer && createPortal(
+            /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5 px-3 py-1.5 border-b bg-muted/40", children: [
+                /* @__PURE__ */ jsx(Sparkles, { className: "h-3 w-3 text-muted-foreground" }),
+                pageAIContext ? /* @__PURE__ */ jsx(
+                  Badge,
+                  {
+                    variant: "secondary",
+                    className: "text-xs",
+                    "data-testid": "page-context-badge",
+                    children: pageAIContext.routeName
+                  }
+                ) : /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground font-medium", children: tr("A11Y_CHAT_TITLE", "aiChat.a11y.title", "AI Chat") }),
+                /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+                expandable && /* @__PURE__ */ jsx(
+                  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__ */ jsx(Minimize2, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Maximize2, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  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__ */ jsx(Trash2, { className: "h-3.5 w-3.5" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  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__ */ jsx(X, { className: "h-3.5 w-3.5" })
+                  }
+                )
+              ] }),
+              widgetEverOpened && /* @__PURE__ */ jsx(
+                ChatInterface,
+                {
+                  id: conversationId,
+                  variant: "widget",
+                  initialMessages,
+                  onMessagesChange
+                },
+                `widget-${conversationId ?? "new"}-${widgetResetKey}`
+              )
+            ] }),
+            panelContainer
           ),
           showTrigger && /* @__PURE__ */ jsx(
             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__ */ jsx(X, { className: "h-5 w-5" }) : /* @__PURE__ */ jsx(Sparkles, { className: "h-5 w-5" })
+              children: widgetOpen ? /* @__PURE__ */ jsx(X, { className: "h-5 w-5" }) : triggerIcon ?? /* @__PURE__ */ jsx(Sparkles, { className: "h-5 w-5" })
             }
           )
         ]

package/dist/plugins/ai-chat/client/components/index.d.cts

@@ -1,4 +1,4 @@
-export { j as ChatInput, C as ChatInterface, f as ChatLayout, g as ChatLayoutProps, i as ChatMessage, h as ChatSidebar, k as ToolCallDisplay } from '../../../../shared/stack.xAiy2VtO.cjs';
+export { j as ChatInput, C as ChatInterface, f as ChatLayout, g as ChatLayoutProps, i as ChatMessage, h as ChatSidebar, k as ToolCallDisplay } from '../../../../shared/stack.DzJgoNqJ.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FallbackProps } from 'react-error-boundary';
 import 'ai';

package/dist/plugins/ai-chat/client/components/index.d.mts

@@ -1,4 +1,4 @@
-export { j as ChatInput, C as ChatInterface, f as ChatLayout, g as ChatLayoutProps, i as ChatMessage, h as ChatSidebar, k as ToolCallDisplay } from '../../../../shared/stack.C5FZr-jJ.mjs';
+export { j as ChatInput, C as ChatInterface, f as ChatLayout, g as ChatLayoutProps, i as ChatMessage, h as ChatSidebar, k as ToolCallDisplay } from '../../../../shared/stack.CHrtGKLz.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FallbackProps } from 'react-error-boundary';
 import 'ai';

package/dist/plugins/ai-chat/client/components/index.d.ts

@@ -1,4 +1,4 @@
-export { j as ChatInput, C as ChatInterface, f as ChatLayout, g as ChatLayoutProps, i as ChatMessage, h as ChatSidebar, k as ToolCallDisplay } from '../../../../shared/stack.C-eQN_Jt.js';
+export { j as ChatInput, C as ChatInterface, f as ChatLayout, g as ChatLayoutProps, i as ChatMessage, h as ChatSidebar, k as ToolCallDisplay } from '../../../../shared/stack.qMp2VzNw.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FallbackProps } from 'react-error-boundary';
 import 'ai';

package/dist/plugins/ai-chat/client/index.d.cts

@@ -3,8 +3,8 @@ import * as _btst_yar from '@btst/yar';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ComponentType } from 'react';
 import { S as SerializedConversation, a as SerializedMessage, A as AiChatIdentityPartition } from '../../../shared/stack.Dgt3MCtW.cjs';
-import { A as AiChatMode, a as AiChatPluginOverrides } from '../../../shared/stack.xAiy2VtO.cjs';
-export { l as AiChatAnalyticsEvent, b as AiChatProviderConfig, c as AllowedFileType, j as ChatInput, C as ChatInterface, f as ChatLayout, g as ChatLayoutProps, i as ChatMessage, h as ChatSidebar, D as DEFAULT_ALLOWED_FILE_TYPES, k as ToolCallDisplay, T as ToolCallProps, e as ToolCallRenderer, d as ToolCallState } from '../../../shared/stack.xAiy2VtO.cjs';
+import { A as AiChatMode, a as AiChatPluginOverrides } from '../../../shared/stack.DzJgoNqJ.cjs';
+export { l as AiChatAnalyticsEvent, b as AiChatProviderConfig, c as AllowedFileType, j as ChatInput, C as ChatInterface, f as ChatLayout, g as ChatLayoutProps, i as ChatMessage, h as ChatSidebar, D as DEFAULT_ALLOWED_FILE_TYPES, k as ToolCallDisplay, T as ToolCallProps, e as ToolCallRenderer, d as ToolCallState } from '../../../shared/stack.DzJgoNqJ.cjs';
 export { UIMessage } from 'ai';
 import '@btst/stack/plugins/api';
 import '@btst/stack/authorization';

package/dist/plugins/ai-chat/client/index.d.mts

@@ -3,8 +3,8 @@ import * as _btst_yar from '@btst/yar';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ComponentType } from 'react';
 import { S as SerializedConversation, a as SerializedMessage, A as AiChatIdentityPartition } from '../../../shared/stack.B7Mj74BQ.mjs';
-import { A as AiChatMode, a as AiChatPluginOverrides } from '../../../shared/stack.C5FZr-jJ.mjs';
-export { l as AiChatAnalyticsEvent, b as AiChatProviderConfig, c as AllowedFileType, j as ChatInput, C as ChatInterface, f as ChatLayout, g as ChatLayoutProps, i as ChatMessage, h as ChatSidebar, D as DEFAULT_ALLOWED_FILE_TYPES, k as ToolCallDisplay, T as ToolCallProps, e as ToolCallRenderer, d as ToolCallState } from '../../../shared/stack.C5FZr-jJ.mjs';
+import { A as AiChatMode, a as AiChatPluginOverrides } from '../../../shared/stack.CHrtGKLz.mjs';
+export { l as AiChatAnalyticsEvent, b as AiChatProviderConfig, c as AllowedFileType, j as ChatInput, C as ChatInterface, f as ChatLayout, g as ChatLayoutProps, i as ChatMessage, h as ChatSidebar, D as DEFAULT_ALLOWED_FILE_TYPES, k as ToolCallDisplay, T as ToolCallProps, e as ToolCallRenderer, d as ToolCallState } from '../../../shared/stack.CHrtGKLz.mjs';
 export { UIMessage } from 'ai';
 import '@btst/stack/plugins/api';
 import '@btst/stack/authorization';