@xenide-io/the-old-ui-theme 0.6.2 → 0.6.5

package/dist/suite.js

@@ -306,12 +306,12 @@ function TodayPageFrame({ children }) {
     "div",
     {
       "data-test": "today-page",
-      className: "today-page-frame relative flex min-h-0 w-full flex-1 flex-col overflow-x-hidden",
+      className: "today-page-frame relative flex min-h-0 w-full flex-1 flex-col overflow-x-clip",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
           "div",
           {
-            className: "pointer-events-none absolute inset-0 overflow-hidden",
+            className: "today-page-frame__backdrop pointer-events-none overflow-hidden",
             "aria-hidden": true,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "today-page-frame__glow absolute inset-0" }),
@@ -1908,7 +1908,7 @@ function SuitePage({
       role,
       "aria-live": ariaLive,
       className: cn(
-        "suite-page-stage flex w-full min-w-0 flex-col",
+        "suite-page-stage relative flex w-full min-w-0 flex-col",
         inset && "suite-page-inset",
         className
       ),
@@ -1933,20 +1933,28 @@ function SuitePageHeader({
   badge,
   /** Breadcrumb line rendered above the title. */
   breadcrumb,
-  /** Stick to the top of the scrollport (desktop page titles). */
-  sticky = false
+  /**
+   * Keep the title parked at the top of the scrollport while the page scrolls.
+   * On by default — opt out only for pages that are not the page's own title.
+   */
+  sticky = true
 }) {
   const headerRef = (0, import_react6.useRef)(null);
   const [stuck, setStuck] = (0, import_react6.useState)(false);
   (0, import_react6.useEffect)(() => {
-    var _a;
     if (!sticky) return;
+    if (typeof IntersectionObserver === "undefined") return;
     const el = headerRef.current;
     if (!el) return;
+    const parent = el.parentElement;
+    if (!parent) return;
     const sentinel = document.createElement("div");
     sentinel.setAttribute("aria-hidden", "true");
-    sentinel.style.cssText = "position:relative;height:1px;width:100%;margin:0;padding:0;pointer-events:none";
-    (_a = el.parentElement) == null ? void 0 : _a.insertBefore(sentinel, el);
+    sentinel.style.cssText = "position:absolute;top:0;left:0;height:1px;width:1px;margin:0;padding:0;pointer-events:none";
+    if (getComputedStyle(parent).position === "static") {
+      parent.style.position = "relative";
+    }
+    parent.insertBefore(sentinel, el);
     const observer = new IntersectionObserver(
       ([entry]) => {
         setStuck(!entry.isIntersecting);
@@ -1963,7 +1971,7 @@ function SuitePageHeader({
     TodayTimeIcon,
     {
       className: cn(
-        "h-7 w-7 text-amber-500 sm:h-8 sm:w-8",
+        "h-6 w-6 text-amber-500",
         todayIconClassName
       )
     }
@@ -1975,9 +1983,8 @@ function SuitePageHeader({
       "data-test": dataTest,
       "data-stuck": sticky ? stuck ? "true" : "false" : void 0,
       className: cn(
-        "flex min-w-0 flex-col items-start gap-3 pb-2 sm:flex-row sm:justify-between sm:gap-4 sm:pb-3",
+        "flex min-w-0 shrink-0 flex-col items-start gap-3 pb-2 sm:flex-row sm:justify-between sm:gap-4 sm:pb-3",
         // No extra pt here — page inset sets the shared title baseline.
-        // Stuck state adds pad via .suite-page-header-sticky[data-stuck].
         sticky && "suite-page-header-sticky",
         className
       ),
@@ -1989,7 +1996,7 @@ function SuitePageHeader({
             resolvedIcon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "div",
               {
-                className: "hidden shrink-0 sm:flex sm:items-center [&_svg]:h-7 [&_svg]:w-7 sm:[&_svg]:h-8 sm:[&_svg]:w-8",
+                className: "hidden shrink-0 sm:flex sm:items-center [&_svg]:h-6 [&_svg]:w-6",
                 "aria-hidden": "true",
                 children: resolvedIcon
               }
@@ -1999,7 +2006,7 @@ function SuitePageHeader({
                 "h1",
                 {
                   className: cn(
-                    "min-w-0 break-words font-display text-[1.625rem] font-bold leading-none tracking-tight text-ph-ink text-balance sm:text-[2.25rem]",
+                    "min-w-0 break-words font-display text-[1.375rem] font-semibold leading-tight tracking-tight text-ph-ink text-balance sm:text-2xl",
                     titleClassName
                   ),
                   children: title
@@ -2013,7 +2020,7 @@ function SuitePageHeader({
             {
               className: cn(
                 "mt-1.5 max-w-2xl text-pretty text-sm leading-5 text-ph-subtle",
-                resolvedIcon && "sm:pl-11"
+                resolvedIcon && "sm:pl-9"
               ),
               children: description
             }
@@ -2296,6 +2303,20 @@ function computeInitials(name, email) {
   const source = (name || email || "?").trim();
   return source.split(/[\s@]+/).filter(Boolean).slice(0, 2).map((part) => part[0]).join("").toUpperCase();
 }
+var AVATAR_TOKENS = [
+  "bg-ph-brand",
+  "bg-ph-violet",
+  "bg-ph-info",
+  "bg-ph-success",
+  "bg-ph-danger"
+];
+function avatarColorClass(seed) {
+  let hash = 0;
+  for (let i = 0; i < seed.length; i += 1) {
+    hash = seed.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return AVATAR_TOKENS[Math.abs(hash) % AVATAR_TOKENS.length];
+}
 function SuiteUserMenu({
   name,
   email,
@@ -2311,17 +2332,27 @@ function SuiteUserMenu({
 }) {
   const router = (0, import_navigation2.useRouter)();
   const initials = fallbackInitials != null ? fallbackInitials : computeInitials(name, email);
-  const avatar = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "inline-flex h-11 w-11 items-center justify-center rounded-full ring-2 ring-ph-border ring-offset-1 ring-offset-ph-canvas transition-colors hover:bg-ph-muted", children: image ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  const fallbackColor = avatarColorClass(email || name || "?");
+  const avatar = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full border border-ph-border", children: image ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     import_image2.default,
     {
       src: image,
       alt: "",
       width: 40,
       height: 40,
-      className: "h-10 w-10 rounded-full object-cover",
+      className: "h-full w-full object-cover",
       unoptimized: true
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "flex h-10 w-10 items-center justify-center rounded-full bg-ph-muted text-sm font-semibold text-ph-brand", children: initials }) });
+  ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "span",
+    {
+      className: cn(
+        "flex h-full w-full items-center justify-center text-sm font-semibold text-white",
+        fallbackColor
+      ),
+      children: initials
+    }
+  ) });
   const accountMenu = /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     DropdownMenu,
     {
@@ -2334,7 +2365,10 @@ function SuiteUserMenu({
       sideOffset: 6,
       collisionPadding: 16,
       modal: false,
-      className: showSignOutAction ? void 0 : className,
+      className: cn(
+        "[&_.ph-dropdown-trigger]:rounded-full",
+        showSignOutAction ? void 0 : className
+      ),
       "data-test": dataTest,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "px-2 py-1.5", children: [
@@ -2363,21 +2397,30 @@ function SuiteUserMenu({
   if (!showSignOutAction) {
     return accountMenu;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cn("flex min-w-0 items-center gap-2", className), children: [
-    accountMenu,
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-      "button",
-      {
-        type: "button",
-        "data-test": `${dataTest}-visible-sign-out`,
-        title: "Sign out",
-        "aria-label": "Sign out",
-        className: "inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ph-focus-ring",
-        onClick: onSignOut,
-        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_iconoir_react6.LogOut, { className: "h-4 w-4", "aria-hidden": true })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex w-full min-w-0 flex-1 items-center justify-between gap-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "shrink-0", children: accountMenu }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          "button",
+          {
+            type: "button",
+            "data-test": `${dataTest}-visible-sign-out`,
+            title: "Sign out",
+            "aria-label": "Sign out",
+            className: "inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ph-focus-ring",
+            onClick: onSignOut,
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_iconoir_react6.LogOut, { className: "h-4 w-4", "aria-hidden": true })
+          }
+        )
+      ]
+    }
+  );
 }
 
 // src/suite/components/suite-bottom-nav.tsx
@@ -2592,11 +2635,14 @@ function SuiteAiPanel({
   const [hydrating, setHydrating] = (0, import_react10.useState)(false);
   const [error, setError] = (0, import_react10.useState)("");
   const [copiedId, setCopiedId] = (0, import_react10.useState)(null);
+  const [atBottom, setAtBottom] = (0, import_react10.useState)(true);
   const [launcherSide, setLauncherSide] = (0, import_react10.useState)("right");
   const [panelSide, setPanelSide] = (0, import_react10.useState)("right");
   const [launcherPosition, setLauncherPosition] = (0, import_react10.useState)(null);
   const [draggingLauncher, setDraggingLauncher] = (0, import_react10.useState)(false);
   const scrollerRef = (0, import_react10.useRef)(null);
+  const textareaRef = (0, import_react10.useRef)(null);
+  const abortRef = (0, import_react10.useRef)(null);
   const launcherRef = (0, import_react10.useRef)(null);
   const launcherSideRef = (0, import_react10.useRef)("right");
   const launcherPositionRef = (0, import_react10.useRef)(null);
@@ -2648,10 +2694,17 @@ function SuiteAiPanel({
     window.addEventListener("resize", placeLauncher);
     return () => window.removeEventListener("resize", placeLauncher);
   }, []);
-  const scrollToBottom = (0, import_react10.useCallback)(() => {
+  const scrollToBottom = (0, import_react10.useCallback)((behavior = "auto") => {
     const el = scrollerRef.current;
     if (!el) return;
-    el.scrollTop = el.scrollHeight;
+    el.scrollTo({ top: el.scrollHeight, behavior });
+    setAtBottom(true);
+  }, []);
+  const handleScroll = (0, import_react10.useCallback)(() => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    const distance = el.scrollHeight - el.scrollTop - el.clientHeight;
+    setAtBottom(distance < 64);
   }, []);
   const hydrate = (0, import_react10.useCallback)(async () => {
     var _a;
@@ -2695,20 +2748,46 @@ function SuiteAiPanel({
     });
   }, [open, hydrate]);
   (0, import_react10.useEffect)(() => {
-    if (open) scrollToBottom();
-  }, [messages, loading, open, scrollToBottom]);
+    if (open && atBottom) scrollToBottom();
+  }, [messages, loading, open, atBottom, scrollToBottom]);
+  (0, import_react10.useEffect)(() => {
+    var _a;
+    if (open && !hydrating) (_a = textareaRef.current) == null ? void 0 : _a.focus();
+  }, [open, hydrating]);
+  (0, import_react10.useEffect)(() => {
+    if (!open) return;
+    function onKey(event) {
+      if (event.key === "Escape") setOpen(false);
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open]);
+  (0, import_react10.useLayoutEffect)(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${Math.min(el.scrollHeight, 176)}px`;
+  }, [prompt, open]);
   async function ask(text) {
     var _a;
     const trimmed = text.trim();
     if (!trimmed || loading) return;
+    const controller = new AbortController();
+    abortRef.current = controller;
     setLoading(true);
     setError("");
     setPrompt("");
+    setAtBottom(true);
     setMessages((prev) => [...prev, { role: "user", content: trimmed }]);
     try {
-      const result = await sendMessage({ prompt: trimmed });
+      const result = await sendMessage({
+        prompt: trimmed,
+        signal: controller.signal
+      });
+      if (controller.signal.aborted) return;
       setMessages((_a = result.messages) != null ? _a : []);
     } catch (err) {
+      if (controller.signal.aborted) return;
       setMessages(
         (prev) => {
           var _a2, _b;
@@ -2720,9 +2799,23 @@ function SuiteAiPanel({
         err instanceof Error ? err.message : "The AI request failed. Try again."
       );
     } finally {
+      if (abortRef.current === controller) abortRef.current = null;
       setLoading(false);
     }
   }
+  function stop() {
+    var _a;
+    (_a = abortRef.current) == null ? void 0 : _a.abort();
+    abortRef.current = null;
+    setLoading(false);
+  }
+  function retry() {
+    var _a;
+    const lastUser = (_a = [...messages].reverse().find((m2) => m2.role === "user")) == null ? void 0 : _a.content;
+    setError("");
+    if (lastUser) void ask(lastUser);
+    else void hydrate();
+  }
   async function handleClear() {
     if (loading) return;
     try {
@@ -2884,154 +2977,258 @@ function SuiteAiPanel({
       ),
       /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { id: "suite-ask-ai-launcher-help", className: "sr-only", children: "Drag to reposition, or use arrow keys. The launcher docks to the nearest screen edge." })
     ] }) : null,
-    open ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "fixed inset-0 z-40", role: "dialog", "aria-modal": "true", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-        "button",
-        {
-          type: "button",
-          className: "absolute inset-0 bg-black/25",
-          onClick: () => setOpen(false),
-          "aria-label": "Close Ask AI"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-        "aside",
-        {
-          className: `absolute inset-y-0 flex w-full max-w-md flex-col bg-ph-surface shadow-2xl ${panelSide === "left" ? "left-0 border-r border-ph-border" : "right-0 border-l border-ph-border"}`,
-          "data-test": "suite-ask-ai-panel",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between border-b border-ph-border px-4 py-3", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "h-4 w-4 shrink-0 text-ph-brand" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-sm font-semibold text-ph-ink", children: title })
+    open ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "div",
+      {
+        className: "fixed inset-0 z-40",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": title,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            "button",
+            {
+              type: "button",
+              className: "absolute inset-0 bg-ph-ink/25",
+              onClick: () => setOpen(false),
+              "aria-label": "Close Ask AI",
+              tabIndex: -1
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+            "aside",
+            {
+              className: `absolute inset-y-0 flex w-full flex-col bg-ph-canvas shadow-2xl sm:max-w-xl ${panelSide === "left" ? "left-0 border-r border-ph-border" : "right-0 border-l border-ph-border"}`,
+              "data-test": "suite-ask-ai-panel",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("header", { className: "flex items-center gap-2 px-4 py-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h2", { className: "min-w-0 flex-1 truncate text-sm font-semibold text-ph-ink", children: title }),
+                  messages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => void handleClear(),
+                      disabled: loading,
+                      className: "inline-flex h-10 items-center gap-1.5 rounded-lg px-2.5 text-xs font-medium text-ph-subtle transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40",
+                      "data-test": "ask-ai-clear",
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_iconoir_react8.Erase, { className: "h-3.5 w-3.5" }),
+                        "Clear"
+                      ]
+                    }
+                  ) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setOpen(false),
+                      className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-ph-subtle transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus",
+                      "aria-label": "Close Ask AI",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_iconoir_react8.Xmark, { className: "h-4 w-4" })
+                    }
+                  )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "mt-0.5 text-[11px] text-ph-mutedtext", children: "Shared across your suite \xB7 same chat in every app" })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1", children: [
-                messages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => void handleClear(),
-                    disabled: loading,
-                    className: "rounded-md px-2 py-1 text-xs text-ph-mutedtext hover:bg-ph-muted hover:text-ph-ink disabled:opacity-50",
-                    "data-test": "ask-ai-clear",
-                    children: "Clear"
-                  }
-                ) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setOpen(false),
-                    className: "rounded p-1 hover:bg-ph-muted",
-                    "aria-label": "Close",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_iconoir_react8.Xmark, { className: "h-4 w-4" })
-                  }
-                )
-              ] })
-            ] }),
-            presets.length > 0 && messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex flex-wrap gap-1.5 border-b border-ph-border px-4 py-2", children: presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-              "button",
-              {
-                type: "button",
-                onClick: () => void ask(preset.prompt),
-                disabled: loading || hydrating,
-                className: "rounded-full border border-ph-border px-2.5 py-1 text-xs text-ph-ink hover:bg-ph-muted disabled:opacity-50",
-                children: preset.label
-              },
-              preset.label
-            )) }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-              "div",
-              {
-                ref: scrollerRef,
-                className: "flex-1 space-y-3 overflow-y-auto p-4",
-                children: [
-                  error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "bg-ph-danger/10 rounded-lg px-3 py-2 text-sm text-ph-danger", children: error }) : null,
-                  hydrating && messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 text-sm text-ph-mutedtext", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Spinner, { className: "h-4 w-4 animate-spin" }),
-                    "Loading chat\u2026"
-                  ] }) : null,
-                  !hydrating && messages.length === 0 && !error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mt-10 px-2 text-center", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "font-display text-base font-semibold text-ph-ink", children: "How can I help?" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "mt-2 text-sm leading-relaxed text-ph-subtle", children: emptyState })
-                  ] }) : null,
-                  messages.map((message, index) => {
-                    const isUser = message.role === "user";
-                    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-                      "div",
-                      {
-                        className: isUser ? "ml-8 rounded-2xl bg-ph-brand/10 px-3.5 py-2.5 text-sm text-ph-ink" : "mr-4 rounded-2xl bg-ph-muted px-3.5 py-2.5 text-sm text-ph-ink",
-                        "data-test": isUser ? "ask-ai-user" : "ask-ai-assistant",
-                        children: [
-                          isUser ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "whitespace-pre-wrap", children: message.content }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                            import_react10.Suspense,
-                            {
-                              fallback: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "whitespace-pre-wrap", children: message.content }),
-                              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SuiteAiBlockNoteMessage2, { markdown: message.content })
-                            }
-                          ),
-                          !isUser ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "relative min-h-0 flex-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                    "div",
+                    {
+                      ref: scrollerRef,
+                      onScroll: handleScroll,
+                      role: "log",
+                      "aria-live": "polite",
+                      "aria-label": "Conversation",
+                      className: "suite-scroll-lock h-full space-y-5 overflow-y-auto px-4 py-5",
+                      children: [
+                        hydrating && messages.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 text-sm text-ph-subtle", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Spinner, { className: "h-4 w-4 animate-spin" }),
+                          "Loading your chat\u2026"
+                        ] }) : null,
+                        !hydrating && messages.length === 0 && !error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "mx-auto mt-6 flex max-w-sm flex-col items-center px-2 text-center", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "flex h-12 w-12 items-center justify-center rounded-2xl bg-ph-brand/10 text-ph-brand", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "h-6 w-6" }) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "mt-4 font-display text-lg font-semibold text-ph-ink", children: "How can I help?" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "mt-1.5 text-sm leading-relaxed text-ph-subtle", children: emptyState }),
+                          presets.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "mt-5 flex w-full flex-col gap-2", children: presets.map((preset) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                             "button",
                             {
                               type: "button",
-                              onClick: () => void copyMessage(index, message.content),
-                              className: "mt-2 inline-flex items-center gap-1 text-xs text-ph-mutedtext hover:text-ph-ink",
+                              onClick: () => void ask(preset.prompt),
+                              disabled: loading || hydrating,
+                              className: "group flex w-full items-center gap-2 rounded-xl border border-ph-border bg-ph-surface px-3.5 py-2.5 text-left text-sm text-ph-ink transition-colors hover:border-ph-brand/40 hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40",
                               children: [
-                                copiedId === index ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_iconoir_react8.Check, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_iconoir_react8.Copy, { className: "h-3 w-3" }),
-                                copiedId === index ? "Copied" : "Copy"
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_iconoir_react8.Sparks, { className: "h-4 w-4 shrink-0 text-ph-brand" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "min-w-0 flex-1 truncate", children: preset.label }),
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_iconoir_react8.ArrowUp, { className: "h-3.5 w-3.5 shrink-0 rotate-45 text-ph-mutedtext transition-transform group-hover:translate-x-0.5" })
                               ]
-                            }
-                          ) : null
-                        ]
-                      },
-                      `${message.role}-${index}-${message.content.slice(0, 24)}`
-                    );
-                  }),
-                  loading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 text-sm text-ph-mutedtext", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Spinner, { className: "h-4 w-4 animate-spin" }),
-                    "Thinking\u2026"
-                  ] }) : null
-                ]
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "border-t border-ph-border p-3", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                "textarea",
-                {
-                  value: prompt,
-                  onChange: (e) => setPrompt(e.target.value),
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" && !e.shiftKey) {
-                      e.preventDefault();
-                      void ask(prompt);
+                            },
+                            preset.label
+                          )) }) : null
+                        ] }) : null,
+                        messages.map((message, index) => {
+                          const isUser = message.role === "user";
+                          if (isUser) {
+                            return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                              "div",
+                              {
+                                className: "flex justify-end",
+                                "data-test": "ask-ai-user",
+                                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "max-w-[min(85%,42rem)] whitespace-pre-wrap break-words rounded-2xl rounded-br-md bg-ph-brand/12 px-3.5 py-2.5 text-sm leading-relaxed text-ph-ink", children: message.content })
+                              },
+                              `user-${index}`
+                            );
+                          }
+                          return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                            "div",
+                            {
+                              className: "flex gap-3",
+                              "data-test": "ask-ai-assistant",
+                              children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                                  "span",
+                                  {
+                                    className: "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-ph-brand/10 text-ph-brand",
+                                    "aria-hidden": true,
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "h-4 w-4" })
+                                  }
+                                ),
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "text-sm leading-relaxed text-ph-ink", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                                    import_react10.Suspense,
+                                    {
+                                      fallback: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "whitespace-pre-wrap break-words", children: message.content }),
+                                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                                        SuiteAiBlockNoteMessage2,
+                                        {
+                                          markdown: message.content
+                                        }
+                                      )
+                                    }
+                                  ) }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                                    "button",
+                                    {
+                                      type: "button",
+                                      onClick: () => void copyMessage(index, message.content),
+                                      className: "mt-1.5 inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs text-ph-mutedtext transition-colors hover:bg-ph-muted hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus",
+                                      children: [
+                                        copiedId === index ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_iconoir_react8.Check, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_iconoir_react8.Copy, { className: "h-3 w-3" }),
+                                        copiedId === index ? "Copied" : "Copy"
+                                      ]
+                                    }
+                                  )
+                                ] })
+                              ]
+                            },
+                            `assistant-${index}`
+                          );
+                        }),
+                        loading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex gap-3", "aria-hidden": true, children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-ph-brand/10 text-ph-brand", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { className: "h-4 w-4" }) }),
+                          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1.5 py-1.5", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce [animation-delay:0.15s]" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-ph-mutedtext motion-safe:animate-bounce [animation-delay:0.3s]" })
+                          ] })
+                        ] }) : null,
+                        loading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "sr-only", "aria-live": "polite", children: "Assistant is responding\u2026" }) : null,
+                        error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                          "div",
+                          {
+                            role: "alert",
+                            className: "flex items-start gap-2.5 rounded-xl border border-ph-danger/30 bg-ph-danger/10 px-3.5 py-3 text-sm text-ph-ink",
+                            children: [
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_iconoir_react8.WarningTriangle, { className: "mt-0.5 h-4 w-4 shrink-0 text-ph-danger" }),
+                              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "min-w-0 flex-1", children: [
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "font-medium text-ph-danger", children: "Something went wrong" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { className: "mt-0.5 text-ph-subtle", children: error }),
+                                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    onClick: retry,
+                                    disabled: loading,
+                                    className: "mt-2 inline-flex min-h-8 items-center gap-1.5 rounded-lg border border-ph-border bg-ph-surface px-2.5 text-xs font-medium text-ph-ink transition-colors hover:bg-ph-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40",
+                                    children: "Try again"
+                                  }
+                                )
+                              ] })
+                            ]
+                          }
+                        ) : null
+                      ]
                     }
-                  },
-                  placeholder: "Ask anything\u2026",
-                  rows: 2,
-                  disabled: loading,
-                  "data-test": "ask-ai-input",
-                  className: "flex-1 resize-none rounded-xl border border-ph-border bg-ph-canvas p-2.5 text-sm text-ph-ink outline-none focus:ring-1 focus:ring-ph-brand"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => void ask(prompt),
-                  disabled: loading || !prompt.trim(),
-                  "data-test": "ask-ai-send",
-                  className: "self-end rounded-xl bg-ph-brand px-3.5 py-2 text-sm font-medium text-white disabled:opacity-50",
-                  children: "Ask"
-                }
-              )
-            ] }) })
-          ]
-        }
-      )
-    ] }) : null
+                  ),
+                  !atBottom ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => scrollToBottom("smooth"),
+                      className: "absolute bottom-3 left-1/2 flex h-9 w-9 -translate-x-1/2 items-center justify-center rounded-full border border-ph-border bg-ph-surface text-ph-subtle shadow-ph-md transition-colors hover:text-ph-ink focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus motion-safe:animate-[suite-ai-fade_150ms_ease-out]",
+                      "aria-label": "Scroll to latest",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_iconoir_react8.ArrowDown, { className: "h-4 w-4" })
+                    }
+                  ) : null
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "px-3 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-end gap-2 rounded-3xl border border-ph-border bg-ph-surface px-2 py-1 shadow-sm transition-colors focus-within:border-ph-brand/45 focus-within:ring-2 focus-within:ring-ph-focus/35", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("label", { htmlFor: "suite-ask-ai-input", className: "sr-only", children: "Ask a question" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      "textarea",
+                      {
+                        id: "suite-ask-ai-input",
+                        ref: textareaRef,
+                        value: prompt,
+                        onChange: (e) => setPrompt(e.target.value),
+                        onKeyDown: (e) => {
+                          if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
+                            e.preventDefault();
+                            void ask(prompt);
+                          }
+                        },
+                        placeholder: "Ask anything\u2026",
+                        rows: 1,
+                        "data-test": "ask-ai-input",
+                        className: "max-h-44 min-h-[44px] flex-1 resize-none bg-transparent px-2 py-2.5 text-sm leading-relaxed text-ph-ink outline-none placeholder:text-ph-mutedtext"
+                      }
+                    ),
+                    loading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: stop,
+                        "data-test": "ask-ai-stop",
+                        className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-ph-muted text-ph-ink transition-colors hover:bg-ph-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus",
+                        "aria-label": "Stop generating",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_iconoir_react8.Square, { className: "h-3.5 w-3.5 fill-current" })
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => void ask(prompt),
+                        disabled: !prompt.trim(),
+                        "data-test": "ask-ai-send",
+                        className: "flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-ph-brand text-[color:var(--ph-on-accent)] transition-opacity hover:bg-ph-brand-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ph-focus disabled:opacity-40",
+                        "aria-label": "Send message",
+                        children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_iconoir_react8.ArrowUp, { className: "h-[18px] w-[18px]" })
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("p", { className: "mt-1.5 px-1 text-center text-xs text-ph-mutedtext", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("kbd", { className: "font-mono", children: "Enter" }),
+                    " to send \xB7",
+                    " ",
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("kbd", { className: "font-mono", children: "Shift" }),
+                    "+",
+                    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("kbd", { className: "font-mono", children: "Enter" }),
+                    " for a new line"
+                  ] })
+                ] })
+              ]
+            }
+          )
+        ]
+      }
+    ) : null
   ] });
 }
 
@@ -3616,7 +3813,7 @@ function SuiteSidebar({
               {
                 className: cn(
                   "flex items-center gap-2",
-                  collapsed ? "flex-col justify-center" : "min-w-0"
+                  collapsed ? "flex-col items-center justify-center [&_[data-test$='-visible-sign-out']]:hidden [&>div]:w-auto" : "w-full min-w-0"
                 ),
                 children: [
                   renderNode(userMenu, collapsed),