blume 0.5.3 → 0.6.0

package/src/components/content/GithubInfo.astro

@@ -3,10 +3,17 @@
 // at build time (no client JS). Pass `owner`/`repo`, or omit them to use the
 // repo from blume.config. A `GITHUB_TOKEN` env var lifts the API rate limit.
 // If the API is unreachable the card still renders, just without counts.
+import { resolveIcon } from "../../theme/icons.ts";
 import data from "blume:data";
 import { GITHUB_MARK } from "../github-mark.ts";
 import { fetchRepositoryInfo } from "./github-info.ts";
 
+// Star/fork glyphs resolve from Lucide at build time; the `<svg>` wrappers below
+// supply size and the shared `statIcon` class. (The GitHub octocat above is a
+// brand mark, not a Lucide icon, so it stays as GITHUB_MARK.)
+const starIcon = resolveIcon("star")?.body ?? "";
+const forkIcon = resolveIcon("git-fork")?.body ?? "";
+
 interface Props {
   owner?: string;
   repo?: string;
@@ -77,9 +84,8 @@ const statIcon =
               stroke-width="2"
               viewBox="0 0 24 24"
               width="14"
-            >
-              <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" />
-            </svg>
+              set:html={starIcon}
+            />
             <span>{numbers.format(info.stars)}</span>
           </span>
           <span class="flex items-center gap-1.5">
@@ -94,13 +100,8 @@ const statIcon =
               stroke-width="2"
               viewBox="0 0 24 24"
               width="14"
-            >
-              <circle cx="12" cy="18" r="3" />
-              <circle cx="6" cy="6" r="3" />
-              <circle cx="18" cy="6" r="3" />
-              <path d="M18 9v2c0 .6-.4 1-1 1H7c-.6 0-1-.4-1-1V9" />
-              <path d="M12 12v3" />
-            </svg>
+              set:html={forkIcon}
+            />
             <span>{numbers.format(info.forks)}</span>
           </span>
         </span>

package/src/components/content/Prompt.astro

@@ -45,7 +45,7 @@ const secondaryButton =
 >
   <div class="flex items-center justify-between gap-3 px-4 py-3">
     <p
-      class="m-0! min-w-0 text-foreground text-sm [&_a]:font-medium [&_a]:text-foreground [&_a]:underline [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_strong]:font-semibold [&_strong]:text-foreground"
+      class="m-0! text-foreground text-sm [&_a]:font-medium [&_a]:text-foreground [&_a]:underline [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_strong]:font-semibold [&_strong]:text-foreground"
       data-blume-prompt-description
       set:html={descriptionHtml}
     />

package/src/components/content/Step.astro

@@ -4,11 +4,10 @@ import { hasIcon } from "../../theme/icons.ts";
 
 interface Props {
   icon?: string;
-  iconType?: string;
   title?: string;
 }
 
-const { icon, iconType, title } = Astro.props;
+const { icon, title } = Astro.props;
 const markerClass =
   "absolute top-0 -start-[2.75rem] flex size-6 items-center justify-center rounded-full bg-accent text-center font-semibold text-accent-foreground text-xs";
 const isImageIcon = (value: string): boolean =>
@@ -18,14 +17,14 @@ const canRenderIcon =
   icon !== undefined &&
   (/^\s*<svg[\s\S]*<\/svg>\s*$/u.test(icon) ||
     isImageIcon(icon) ||
-    hasIcon(icon, { iconType }));
+    hasIcon(icon));
 ---
 
 <div
   class="relative [counter-increment:blume-step]"
 >
   <span class:list={[markerClass, !canRenderIcon && "before:[content:counter(blume-step)]"]}>
-    {canRenderIcon && <Icon iconType={iconType} name={icon} size={14} />}
+    {canRenderIcon && <Icon name={icon} size={14} />}
   </span>
   {title && <p class="mb-1.5 font-semibold">{title}</p>}
   <div class="[&>:first-child]:mt-0! [&>:last-child]:mb-0!">

package/src/components/content/Tab.astro

@@ -4,13 +4,12 @@ import Icon from "../Icon.astro";
 interface Props {
   class?: string;
   icon?: string;
-  iconType?: string;
   id?: string;
   style?: string;
   title: string;
 }
 
-const { class: className, icon, iconType, id, style, title } = Astro.props;
+const { class: className, icon, id, style, title } = Astro.props;
 const slugify = (value: string): string =>
   value
     .toLowerCase()
@@ -39,7 +38,7 @@ const tabId = id ?? slugify(title);
   {
     icon && (
       <template data-blume-tab-icon>
-        <Icon class="shrink-0" iconType={iconType} name={icon} size={14} />
+        <Icon class="shrink-0" name={icon} size={14} />
       </template>
     )
   }

package/src/components/content/TypeTable.astro

@@ -4,6 +4,12 @@
 // the accent-colored prop name (with a `?` suffix when optional) and its type;
 // expanded, the row lifts into a card showing the description and a Type/Default
 // detail grid. Uses native <details>/<summary> so the core stays React-free.
+import { resolveIcon } from "../../theme/icons.ts";
+
+// The row disclosure caret; resolved from Lucide at build time and injected into
+// the summary's `<svg>` (which supplies size and the rotate-on-open transition).
+const chevronDown = resolveIcon("chevron-down")?.body ?? "";
+
 interface TypeEntry {
   default?: string;
   description?: string;
@@ -37,19 +43,19 @@ const columns = "grid grid-cols-[1fr_2fr_auto] items-center gap-4";
         {entries.map(([name, info]) => (
         <details class="group/tt border-border border-t [[open]+&]:border-t-transparent open:rounded-blume open:border-transparent open:bg-background open:shadow-sm open:ring-1 open:ring-border">
           <summary class={`${columns} cursor-pointer list-none px-3 py-2.5 [&::-webkit-details-marker]:hidden`}>
-            <code class="min-w-0 break-words font-mono text-accent text-xs">
+            <code class="break-words font-mono text-accent text-xs">
               {name}
               {info.required ? "" : "?"}
             </code>
             {info.typeDescriptionLink ? (
               <a
-                class="min-w-0 break-words font-mono text-foreground text-xs underline-offset-2 hover:underline"
+                class="break-words font-mono text-foreground text-xs underline-offset-2 hover:underline"
                 href={info.typeDescriptionLink}
               >
                 {info.type}
               </a>
             ) : (
-              <code class="min-w-0 break-words font-mono text-foreground text-xs">
+              <code class="break-words font-mono text-foreground text-xs">
                 {info.type}
               </code>
             )}
@@ -64,9 +70,8 @@ const columns = "grid grid-cols-[1fr_2fr_auto] items-center gap-4";
               stroke-width="2"
               viewBox="0 0 24 24"
               width="16"
-            >
-              <path d="m6 9 6 6 6-6" />
-            </svg>
+              set:html={chevronDown}
+            />
           </summary>
 
           <div class="border-border border-t px-3 py-3 text-xs">
@@ -81,7 +86,7 @@ const columns = "grid grid-cols-[1fr_2fr_auto] items-center gap-4";
             <div class="space-y-1.5">
               <div class={columns}>
                 <span class="text-muted-foreground">Type</span>
-                <code class="min-w-0 break-words font-mono text-foreground">
+                <code class="break-words font-mono text-foreground">
                   {info.type}
                 </code>
                 <span aria-hidden="true" class="size-3.5" />
@@ -89,7 +94,7 @@ const columns = "grid grid-cols-[1fr_2fr_auto] items-center gap-4";
               {info.default && (
                 <div class={columns}>
                   <span class="text-muted-foreground">Default</span>
-                  <code class="min-w-0 break-words font-mono text-foreground">
+                  <code class="break-words font-mono text-foreground">
                     {info.default}
                   </code>
                   <span aria-hidden="true" class="size-3.5" />

package/src/components/content/Update.astro

@@ -60,7 +60,7 @@ const tagList = Array.isArray(tags) ? tags : tags ? [tags] : [];
       )
     }
   </header>
-  <div class="min-w-0 text-muted-foreground text-sm leading-6 [&_a]:font-medium [&_a]:text-foreground [&_a]:underline [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_h2]:mt-0! [&_h2]:border-t-0! [&_h2]:pt-0! [&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-foreground [&_h3]:font-semibold [&_h3]:text-foreground [&_img]:rounded-blume [&_li]:my-1 [&_p:first-child]:mt-0! [&_p:last-child]:mb-0!">
+  <div class="text-muted-foreground text-sm leading-6 [&_a]:font-medium [&_a]:text-foreground [&_a]:underline [&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_h2]:mt-0! [&_h2]:border-t-0! [&_h2]:pt-0! [&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-foreground [&_h3]:font-semibold [&_h3]:text-foreground [&_img]:rounded-blume [&_li]:my-1 [&_p:first-child]:mt-0! [&_p:last-child]:mb-0!">
     <slot />
   </div>
 </article>

package/src/components/islands/AskAI.astro

@@ -1,12 +1,76 @@
 ---
 import type { UIStrings } from "../../core/i18n-ui.ts";
+import { resolveIcon } from "../../theme/icons.ts";
 import AskAI from "./ask-ai.tsx";
 
+interface Suggestion {
+  icon?: string;
+  label: string;
+}
+
 interface Props {
   strings?: UIStrings["ask"];
+  suggestions?: Suggestion[];
 }
 
-const { strings } = Astro.props;
+const { strings, suggestions = [] } = Astro.props;
+
+// Icons resolve to inline SVG here (server-only module), so the client island
+// gets ready-to-render markup rather than a name it can't resolve. Bare Lucide
+// bodies carry no styling, so wrap them in a stroke-styled root like Icon.astro.
+const svgFor = (name: string | undefined): string | null => {
+  const resolved = resolveIcon(name ?? "sparkles") ?? resolveIcon("sparkles");
+  return resolved
+    ? `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${resolved.viewBox}" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${resolved.body}</svg>`
+    : null;
+};
+
+const items = suggestions.map((suggestion) => ({
+  icon: svgFor(suggestion.icon),
+  label: suggestion.label,
+}));
+
+// The panel's own chrome glyphs resolve here too, so the client island carries
+// no icon data. Each value is the bare Lucide body; the island's <Glyph> wraps
+// it in a sized, stroke-styled <svg>. Keyed by role → Lucide icon name.
+const bodyFor = (name: string): string => resolveIcon(name)?.body ?? "";
+const icons = {
+  arrowUp: bodyFor("arrow-up"),
+  chat: bodyFor("message-circle"),
+  clear: bodyFor("trash-2"),
+  close: bodyFor("chevrons-right"),
+  copy: bodyFor("copy"),
+};
 ---
 
-<AskAI client:load strings={strings} />
+<AskAI client:load icons={icons} strings={strings} suggestions={items} />
+
+<style is:global>
+  :root {
+    --blume-ask-width: min(30rem, 100vw);
+  }
+
+  /* Desktop docks the panel and shrinks the page to fit, like vercel.com/docs.
+     On smaller screens the panel is a full-width overlay (no push). */
+  @media (min-width: 1024px) {
+    body {
+      transition: padding-inline-end 0.2s ease-out;
+    }
+
+    body[data-blume-ask="open"] {
+      padding-inline-end: var(--blume-ask-width);
+    }
+  }
+
+  /* The table of contents only shows at xl; reclaim its column for the article
+     while the panel is open so the shrunken content still has room to breathe. */
+  @media (min-width: 1280px) {
+    body[data-blume-ask="open"] [data-blume-toc] {
+      display: none;
+    }
+
+    body[data-blume-ask="open"] [data-blume-doc-grid] {
+      grid-template-columns: 17.5rem minmax(0, 1fr);
+    }
+  }
+</style>

package/src/components/islands/ask-ai.tsx

@@ -1,22 +1,57 @@
-import { useEffect, useState } from "react";
-import type { FormEvent } from "react";
+import DOMPurify from "dompurify";
+import { marked } from "marked";
+import { useEffect, useRef, useState } from "react";
+import type { FormEvent, KeyboardEvent as ReactKeyboardEvent } from "react";
+import { createPortal } from "react-dom";
 
 import type { UIStrings } from "../../core/i18n-ui.ts";
 import { joinBase, stripBase } from "./base-path.ts";
 
 interface ChatMessage {
-  id: number;
-  role: "user" | "assistant";
   content: string;
+  id: number;
+  role: "assistant" | "user";
+}
+
+/** A resolved empty-state prompt; `icon` is ready-to-inline SVG (or null). */
+interface Suggestion {
+  icon: string | null;
+  label: string;
 }
 
+/**
+ * The panel's chrome glyphs, resolved server-side in `AskAI.astro` and passed in
+ * as ready-to-inline Lucide bodies so this client island ships no icon data.
+ */
+interface AskIcons {
+  arrowUp: string;
+  chat: string;
+  clear: string;
+  close: string;
+  copy: string;
+}
+
+// Empty bodies so the island still renders (iconless) if instantiated without
+// the Astro wrapper that resolves the real Lucide glyphs.
+const EMPTY_ICONS: AskIcons = {
+  arrowUp: "",
+  chat: "",
+  clear: "",
+  close: "",
+  copy: "",
+};
+
 // English fallback so the island renders even if no dictionary is passed.
 const DEFAULT_ASK: UIStrings["ask"] = {
+  clear: "Clear conversation",
+  close: "Close",
+  copy: "Copy conversation",
   empty: "Ask a question about the docs.",
   error: "Sorry, something went wrong.",
   label: "Ask a question",
   placeholder: "Ask a question…",
   send: "Send",
+  tip: "Tip: You can open and close chat with",
   title: "Ask AI",
 };
 
@@ -34,20 +69,69 @@ const ASK_ENDPOINT = joinBase(import.meta.env.BASE_URL, "api/ask");
 const currentPath = (): string =>
   stripBase(import.meta.env.BASE_URL, window.location.pathname);
 
-const BUTTON_CLASS =
-  "inline-flex h-9 cursor-pointer items-center gap-2 rounded-blume border border-border bg-muted px-2.5 text-muted-foreground text-sm hover:border-accent disabled:opacity-50";
+// GitHub-flavored markdown with soft line breaks, matching how the docs read.
+marked.setOptions({ breaks: true, gfm: true });
+
+const renderMarkdown = (content: string): string =>
+  DOMPurify.sanitize(marked.parse(content, { async: false }));
+
+const Glyph = ({ path, size = 16 }: { path: string; size?: number }) => (
+  <svg
+    aria-hidden="true"
+    dangerouslySetInnerHTML={{ __html: path }}
+    fill="none"
+    height={size}
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+    width={size}
+    xmlns="http://www.w3.org/2000/svg"
+  />
+);
+
+// Stable empty default so an unset `suggestions` prop doesn't re-render.
+const EMPTY_SUGGESTIONS: Suggestion[] = [];
 
-const AskAI = ({ strings }: { strings?: UIStrings["ask"] }) => {
+// Ghost icon button, matching the header's theme toggle and repo link.
+const TRIGGER_CLASS =
+  "inline-flex size-9 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground";
+const ICON_BUTTON_CLASS =
+  "inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-blume text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:pointer-events-none disabled:opacity-40";
+
+// The assistant answer: standard prose, but citation links (every `[Title](/route)`
+// the model emits) render as small neutral pills so they read as sources instead
+// of inline text links. `no-underline`/color use `!` to beat the theme's unlayered
+// `.prose a` rule; `leading-none` drops the inherited prose line-height so the
+// pill hugs its label.
+const ANSWER_CLASS =
+  "prose prose-sm max-w-none text-foreground [&_a]:inline-flex [&_a]:items-center [&_a]:gap-1 [&_a]:rounded-full [&_a]:bg-muted [&_a]:px-2 [&_a]:py-1 [&_a]:align-middle [&_a]:font-medium [&_a]:text-[0.7rem] [&_a]:leading-none [&_a]:text-muted-foreground! [&_a]:no-underline! [&_a:hover]:text-foreground!";
+
+const AskAI = ({
+  icons = EMPTY_ICONS,
+  strings,
+  suggestions = EMPTY_SUGGESTIONS,
+}: {
+  icons?: AskIcons;
+  strings?: UIStrings["ask"];
+  suggestions?: Suggestion[];
+}) => {
   const t = strings ?? DEFAULT_ASK;
+  const [mounted, setMounted] = useState(false);
   const [open, setOpen] = useState(false);
   const [input, setInput] = useState("");
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [busy, setBusy] = useState(false);
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  // Portal target (document.body) only exists after mount; guards SSR.
+  useEffect(() => setMounted(true), []);
 
+  // The search modal forwards its query so "Ask AI: <query>" carries straight in.
   useEffect(() => {
     const handler = (event: Event) => {
-      // The search modal forwards the typed query so "Ask AI: <query>" carries
-      // straight into the chat input.
       const query = (event as CustomEvent<{ query?: string }>).detail?.query;
       if (query) {
         setInput(query);
@@ -58,9 +142,40 @@ const AskAI = ({ strings }: { strings?: UIStrings["ask"] }) => {
     return () => window.removeEventListener("blume:open-ask-ai", handler);
   }, []);
 
-  const send = async (event: FormEvent) => {
-    event.preventDefault();
-    const question = input.trim();
+  // ⌘I / Ctrl+I toggles the panel; Escape closes it.
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "i") {
+        event.preventDefault();
+        setOpen((value) => !value);
+      } else if (event.key === "Escape" && open) {
+        setOpen(false);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open]);
+
+  // Drive the desktop content push from a body attribute (see AskAI.astro CSS).
+  useEffect(() => {
+    if (open) {
+      document.body.dataset.blumeAsk = "open";
+      inputRef.current?.focus();
+    } else {
+      delete document.body.dataset.blumeAsk;
+    }
+    return () => {
+      delete document.body.dataset.blumeAsk;
+    };
+  }, [open]);
+
+  // Keep the newest message in view as it streams in.
+  useEffect(() => {
+    scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });
+  }, [messages]);
+
+  const runQuestion = async (raw: string) => {
+    const question = raw.trim();
     if (!question || busy) {
       return;
     }
@@ -114,52 +229,173 @@ const AskAI = ({ strings }: { strings?: UIStrings["ask"] }) => {
     }
   };
 
+  const onSubmit = (event: FormEvent) => {
+    event.preventDefault();
+    void runQuestion(input);
+  };
+
+  const onInputKeyDown = (event: ReactKeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      void runQuestion(input);
+    }
+  };
+
+  const copyConversation = () => {
+    const text = messages
+      .map((m) => `${m.role === "user" ? "You" : "AI"}: ${m.content}`)
+      .join("\n\n");
+    void navigator.clipboard?.writeText(text);
+  };
+
+  const hasMessages = messages.length > 0;
+
+  const panel = (
+    <aside
+      aria-hidden={open ? undefined : "true"}
+      aria-label={t.title}
+      className={`fixed inset-y-0 end-0 z-[60] flex w-[var(--blume-ask-width)] flex-col border-border border-s bg-background shadow-2xl transition-transform duration-200 ease-out ${
+        open ? "translate-x-0" : "translate-x-full rtl:-translate-x-full"
+      }`}
+    >
+      <header className="flex h-16 shrink-0 items-center justify-between gap-2 border-border border-b px-4">
+        <span className="font-semibold text-foreground">{t.title}</span>
+        <div className="flex items-center gap-0.5">
+          <button
+            aria-label={t.copy}
+            className={ICON_BUTTON_CLASS}
+            disabled={!hasMessages}
+            onClick={copyConversation}
+            title={t.copy}
+            type="button"
+          >
+            <Glyph path={icons.copy} />
+          </button>
+          <button
+            aria-label={t.clear}
+            className={ICON_BUTTON_CLASS}
+            disabled={!hasMessages}
+            onClick={() => setMessages([])}
+            title={t.clear}
+            type="button"
+          >
+            <Glyph path={icons.clear} />
+          </button>
+          <button
+            aria-label={t.close}
+            className={ICON_BUTTON_CLASS}
+            onClick={() => setOpen(false)}
+            title={t.close}
+            type="button"
+          >
+            <Glyph path={icons.close} size={18} />
+          </button>
+        </div>
+      </header>
+
+      <div className="flex flex-1 flex-col overflow-y-auto" ref={scrollRef}>
+        {hasMessages ? (
+          <div className="flex flex-col gap-4 p-4">
+            {messages.map((message) =>
+              message.role === "user" ? (
+                <div
+                  className="max-w-[85%] self-end whitespace-pre-wrap rounded-blume bg-muted px-3 py-2 text-foreground text-sm"
+                  key={message.id}
+                >
+                  {message.content}
+                </div>
+              ) : (
+                <div className={ANSWER_CLASS} key={message.id}>
+                  {message.content ? (
+                    // biome-ignore lint/security/noDangerouslySetInnerHtml: sanitized above
+                    <div
+                      dangerouslySetInnerHTML={{
+                        __html: renderMarkdown(message.content),
+                      }}
+                    />
+                  ) : (
+                    <span className="animate-pulse text-muted-foreground">
+                      …
+                    </span>
+                  )}
+                </div>
+              )
+            )}
+          </div>
+        ) : (
+          <div className="mt-auto flex flex-col gap-0.5 p-4">
+            {suggestions.length === 0 && (
+              <p className="px-2 text-muted-foreground text-sm">{t.empty}</p>
+            )}
+            {suggestions.map((suggestion) => (
+              <button
+                className="flex cursor-pointer items-center gap-2.5 rounded-blume px-2 py-2 text-start text-foreground text-sm transition-colors hover:bg-muted"
+                key={suggestion.label}
+                onClick={() => runQuestion(suggestion.label)}
+                type="button"
+              >
+                {suggestion.icon && (
+                  <span
+                    className="shrink-0 text-muted-foreground [&_svg]:h-[18px] [&_svg]:w-[18px]"
+                    dangerouslySetInnerHTML={{ __html: suggestion.icon }}
+                  />
+                )}
+                <span>{suggestion.label}</span>
+              </button>
+            ))}
+            <p className="mt-3 flex items-center gap-1.5 px-2 text-muted-foreground text-sm">
+              {t.tip}
+              <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 font-sans text-xs">
+                ⌘
+              </kbd>
+              <kbd className="rounded border border-border bg-muted px-1.5 py-0.5 font-sans text-xs">
+                I
+              </kbd>
+            </p>
+          </div>
+        )}
+      </div>
+
+      <form
+        className="relative shrink-0 border-border border-t"
+        onSubmit={onSubmit}
+      >
+        <textarea
+          aria-label={t.label}
+          className="max-h-48 min-h-[5rem] w-full resize-none bg-transparent px-4 py-3.5 pe-14 text-foreground text-sm outline-none placeholder:text-muted-foreground"
+          onChange={(event) => setInput(event.target.value)}
+          onKeyDown={onInputKeyDown}
+          placeholder={t.placeholder}
+          ref={inputRef}
+          rows={3}
+          value={input}
+        />
+        <button
+          aria-label={t.send}
+          className="absolute end-3 bottom-3 inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-blume bg-foreground text-background transition-opacity disabled:cursor-not-allowed disabled:opacity-40"
+          disabled={busy || input.trim().length === 0}
+          type="submit"
+        >
+          <Glyph path={icons.arrowUp} />
+        </button>
+      </form>
+    </aside>
+  );
+
   return (
-    <div className="relative">
+    <>
       <button
-        className={BUTTON_CLASS}
-        onClick={() => setOpen(!open)}
+        aria-expanded={open}
+        aria-label={t.title}
+        className={TRIGGER_CLASS}
+        onClick={() => setOpen((value) => !value)}
+        title={t.title}
         type="button"
       >
-        {t.title}
+        <Glyph path={icons.chat} size={18} />
       </button>
-      {open && (
-        <div className="absolute top-[calc(100%+0.5rem)] end-0 z-50 flex max-h-[70vh] w-[min(24rem,90vw)] flex-col overflow-hidden rounded-blume border border-border bg-background shadow-xl">
-          <div className="flex flex-1 flex-col gap-2.5 overflow-y-auto p-3.5">
-            {messages.length === 0 && (
-              <p className="m-0 text-muted-foreground text-sm">{t.empty}</p>
-            )}
-            {messages.map((message) => (
-              <div
-                className={`whitespace-pre-wrap rounded-blume px-2.5 py-2 text-sm ${
-                  message.role === "user"
-                    ? "self-end bg-accent/15"
-                    : "self-start bg-muted"
-                }`}
-                key={message.id}
-              >
-                {message.content}
-              </div>
-            ))}
-          </div>
-          <form
-            className="flex gap-2 border-border border-t p-2.5"
-            onSubmit={send}
-          >
-            <input
-              aria-label={t.label}
-              className="flex-1 rounded-blume border border-border bg-transparent px-2.5 py-1.5 text-sm"
-              onChange={(event) => setInput(event.target.value)}
-              placeholder={t.placeholder}
-              value={input}
-            />
-            <button className={BUTTON_CLASS} disabled={busy} type="submit">
-              {t.send}
-            </button>
-          </form>
-        </div>
-      )}
-    </div>
+      {mounted && createPortal(panel, document.body)}
+    </>
   );
 };