@elabs-ai/components-ai 4.2.0 → 5.1.0

package/src/chat-shell.tsx

@@ -1,25 +1,31 @@
 "use client";
 
 import type { ReactNode } from "react";
+import { useLayoutEffect, useRef } from "react";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 
 export interface ChatShellProps {
   /** Scrollable transcript — typically a <Conversation>. */
   children: ReactNode;
-  /** Sticky composer — typically a <Composer> (the standard chat input). */
+  /**
+   * Floating composer — typically a <Composer> (the standard chat input). It
+   * floats, padded, over the bottom of the transcript, centred at
+   * `--chat-composer-column` (default `--container-3xl`) under a transcript
+   * column of `--chat-column` (default `--container-4xl`, read by
+   * `ConversationContent`); turns scroll up behind it and fade out.
+   */
   composer?: ReactNode;
   /** Optional header row (title, model picker, actions). */
   header?: ReactNode;
   /** Optional right-side context rail (sources, files, memory). */
   aside?: ReactNode;
   /**
-   * Layout treatment:
-   * - `"card"` (default) — a self-contained rounded, bordered chat card. Use
-   *   when the shell sits on a page among other content and needs its own frame.
-   * - `"bare"` — an immersive pane that fills its container with NO frame: the
-   *   transcript fades under the header and above the composer (a token-driven
-   *   top/bottom scrim) and the composer floats on the pane background instead
-   *   of a hard bordered bar. Use when the shell already lives inside a bounded
+   * Frame treatment (the transcript/composer layout is the same in both):
+   * - `"card"` (default) — a self-contained rounded, bordered chat card with a
+   *   divider under the header. Use when the shell sits on a page among other
+   *   content and needs its own frame.
+   * - `"bare"` — an immersive pane that fills its container with NO frame and
+   *   no header divider. Use when the shell already lives inside a bounded
    *   region (an AppShell `SidebarInset`, a full-page workspace) so it doesn't
    *   draw a redundant second frame.
    */
@@ -28,14 +34,15 @@ export interface ChatShellProps {
 }
 
 /**
- * Layout shell for an AI chat built from the AI Elements: a header, a scrollable
- * transcript (give it a <Conversation>, which is `flex-1`), a sticky composer
- * (a <Composer>, the standard chat input), and an optional context rail. Fills
+ * Layout shell for an AI chat built from the AI Elements: a header, a
+ * full-height scrollable transcript (give it a <Conversation>, which is
+ * `flex-1`), a composer floating over the transcript's bottom edge (a
+ * <Composer>, the standard chat input), and an optional context rail. Fills
  * its parent's height.
  *
- * Two layout modes (`variant`): a framed `"card"` for in-page use, and a
- * frameless `"bare"` immersive pane for when the shell already sits inside a
- * bounded region and a second frame would just read as boxy.
+ * Two frames (`variant`): a framed `"card"` for in-page use, and a frameless
+ * `"bare"` immersive pane for when the shell already sits inside a bounded
+ * region and a second frame would just read as boxy.
  */
 export function ChatShell({
   children,
@@ -46,50 +53,89 @@ export function ChatShell({
   className,
 }: ChatShellProps) {
   const bare = variant === "bare";
+  const rootRef = useRef<HTMLDivElement>(null);
+  const composerRef = useRef<HTMLDivElement>(null);
+  const hasComposer = composer != null;
+
+  // The composer floats OVER the transcript, so the transcript has to
+  // know how tall it is — `ConversationContent` pads its bottom by
+  // `--chat-composer-inset` (so the last turn scrolls clear of the composer)
+  // and `ConversationScrollButton` sits just above it. Written straight onto
+  // the root's style: no React state, no re-render per resize.
+  useLayoutEffect(() => {
+    const root = rootRef.current;
+    const node = composerRef.current;
+    if (!root) return;
+    if (!node) {
+      root.style.removeProperty("--chat-composer-inset");
+      return;
+    }
+    const sync = () =>
+      root.style.setProperty("--chat-composer-inset", `${node.getBoundingClientRect().height}px`);
+    sync();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(sync);
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [hasComposer]);
+
   return (
     <div
+      ref={rootRef}
+      data-slot="chat-shell"
+      data-variant={variant}
       className={cn(
-        "flex h-full min-h-0 w-full overflow-hidden bg-background",
+        // Reading columns: the transcript (`ConversationContent`) reads a
+        // little wider than the composer beneath it. Override per app, e.g.
+        // `className="[--chat-column:var(--container-5xl)]"`.
+        "flex h-full min-h-0 w-full overflow-hidden bg-background [--chat-column:var(--container-4xl)] [--chat-composer-column:var(--container-3xl)]",
         bare ? null : "rounded-xl border",
         className,
       )}
     >
       <div className="flex min-h-0 min-w-0 flex-1 flex-col">
         {header ? (
-          <div className={cn("flex h-12 shrink-0 items-center px-4", bare ? null : "border-b")}>
+          <div className={cn("flex h-header shrink-0 items-center px-4", bare ? null : "border-b")}>
             {header}
           </div>
         ) : null}
 
-        {bare ? (
-          // Immersive transcript: the scroll area fades at both edges so content
-          // dissolves under the header and above the composer instead of hitting
-          // a hard bordered bar. The overlays are token-driven (`from-background`)
-          // so they fade to the shell's own ground in every theme, and inert
-          // (`pointer-events-none` + `aria-hidden`) so they never block scroll,
-          // steal a tap, or get announced.
-          <div className="relative flex min-h-0 flex-1 flex-col">
-            {children}
-            <div
-              aria-hidden
-              className="pointer-events-none absolute inset-x-0 top-0 z-10 h-8 bg-gradient-to-b from-background to-transparent"
-            />
+        {/* The transcript runs the FULL height of the pane and the composer
+            floats over its bottom edge, so turns scroll up behind the composer
+            and dissolve under the top edge instead of stopping at a hard bar.
+            The scrims are token-driven (`from-background`) so they fade to the
+            shell's own ground in every theme, and inert (`pointer-events-none`
+            + `aria-hidden`) so they never block scroll, steal a tap, or get
+            announced. */}
+        <div className="relative flex min-h-0 flex-1 flex-col">
+          {children}
+          <div
+            aria-hidden
+            className="pointer-events-none absolute inset-x-0 top-0 z-10 h-8 bg-gradient-to-b from-background to-transparent"
+          />
+          <div
+            aria-hidden
+            data-slot="chat-shell-scrim"
+            // Solid under the composer, fading out a little above it.
+            className="pointer-events-none absolute inset-x-0 bottom-0 z-10 bg-gradient-to-t from-background from-50% to-transparent"
+            style={{ height: "calc(var(--chat-composer-inset, 0px) + 3rem)" }}
+          />
+          {composer ? (
+            // The float layer passes pointer events through, so the
+            // transcript's scrollbar and the gutters beside the composer stay
+            // live; only the composer itself takes input. DOM order still puts
+            // it after the transcript (tab order follows reading order).
             <div
-              aria-hidden
-              className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-12 bg-gradient-to-t from-background to-transparent"
-            />
-          </div>
-        ) : (
-          <div className="flex min-h-0 flex-1 flex-col">{children}</div>
-        )}
-
-        {composer ? (
-          // Bare: the composer floats on the pane ground (transparent, no
-          // divider) above the fade; card: the classic bordered footer.
-          <div className={cn("shrink-0", bare ? "relative z-20 px-4 pb-4" : "border-t p-3")}>
-            {composer}
-          </div>
-        ) : null}
+              ref={composerRef}
+              data-slot="chat-shell-composer"
+              className="pointer-events-none absolute inset-x-0 bottom-0 z-20 px-4 pb-4"
+            >
+              <div className="pointer-events-auto mx-auto w-full max-w-(--chat-composer-column)">
+                {composer}
+              </div>
+            </div>
+          ) : null}
+        </div>
       </div>
       {aside ? <div className="hidden w-80 shrink-0 border-s lg:block">{aside}</div> : null}
     </div>

package/src/chat.stories.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
+import { ChatShell } from "./chat-shell";
 import { Conversation, ConversationContent, ConversationScrollButton } from "./conversation";
 import { Message, MessageContent, MessageResponse } from "./message";
 import { Composer } from "./composer";
@@ -45,45 +46,49 @@ function ChatExample() {
   };
 
   return (
-    <div className="mx-auto flex h-[640px] max-w-2xl flex-col overflow-hidden rounded-xl border">
-      <Conversation className="flex-1">
-        <ConversationContent>
-          {messages.map((m) => (
-            <Message from={m.role} key={m.id}>
-              <MessageContent>
-                {m.reasoning ? (
-                  <Reasoning>
-                    <ReasoningTrigger />
-                    <ReasoningContent>{m.reasoning}</ReasoningContent>
-                  </Reasoning>
-                ) : null}
-                <MessageResponse>{m.text}</MessageResponse>
-                {m.role === "assistant" ? (
-                  <Sources>
-                    <SourcesTrigger count={2} />
-                    <SourcesContent>
-                      <Source href="https://example.com" title="Deploy log — wk 23" />
-                      <Source href="https://example.com" title="Billing runbook" />
-                    </SourcesContent>
-                  </Sources>
-                ) : null}
-              </MessageContent>
-            </Message>
-          ))}
-        </ConversationContent>
-        <ConversationScrollButton />
-      </Conversation>
-
-      <Composer
-        className="m-3 mt-0"
-        placeholder="Ask about deploys…"
-        status={status === "submitted" ? "Generating…" : "Awaiting your input"}
-        sendStatus={status}
-        onSubmit={(message) => {
-          const text = message.text?.trim();
-          if (text) send(text);
-        }}
-      />
+    <div className="mx-auto h-[640px] max-w-4xl overflow-hidden rounded-xl border bg-background">
+      <ChatShell
+        variant="bare"
+        composer={
+          <Composer
+            placeholder="Ask about deploys…"
+            status={status === "submitted" ? "Generating…" : "Awaiting your input"}
+            sendStatus={status}
+            onSubmit={(message) => {
+              const text = message.text?.trim();
+              if (text) send(text);
+            }}
+          />
+        }
+      >
+        <Conversation className="flex-1">
+          <ConversationContent>
+            {messages.map((m) => (
+              <Message from={m.role} key={m.id}>
+                <MessageContent>
+                  {m.reasoning ? (
+                    <Reasoning>
+                      <ReasoningTrigger />
+                      <ReasoningContent>{m.reasoning}</ReasoningContent>
+                    </Reasoning>
+                  ) : null}
+                  <MessageResponse>{m.text}</MessageResponse>
+                  {m.role === "assistant" ? (
+                    <Sources>
+                      <SourcesTrigger count={2} />
+                      <SourcesContent>
+                        <Source href="https://example.com" title="Deploy log — wk 23" />
+                        <Source href="https://example.com" title="Billing runbook" />
+                      </SourcesContent>
+                    </Sources>
+                  ) : null}
+                </MessageContent>
+              </Message>
+            ))}
+          </ConversationContent>
+          <ConversationScrollButton />
+        </Conversation>
+      </ChatShell>
     </div>
   );
 }
@@ -100,9 +105,9 @@ const meta = {
           "composed from the @elabs-ai/components-ai grammar: a scrolling " +
           "[Conversation](?path=/story/ai-conversation--default) of " +
           "[Messages](?path=/story/ai-message--presets) with reasoning and sources, plus a " +
-          "[Composer](?path=/story/ai-composer--default). Reach for " +
-          "[ChatShell](?path=/story/ai-chatshell--default) when you want that header + " +
-          "transcript + composer layout as one component instead of assembling it yourself.",
+          "[Composer](?path=/story/ai-composer--default), laid out by " +
+          "[ChatShell](?path=/story/ai-chatshell--default): the transcript scrolls behind the " +
+          "floating composer and both sit in centred reading columns.",
       },
     },
   },

package/src/composer.stories.tsx

@@ -24,9 +24,8 @@
  *   the three controls the `mode`, `effort` and `slashCommands` slots render.
  *   The fourth slot, `modelPicker`, takes a `ModelPicker` from
  *   `@elabs-ai/components-ui`, which is why it has no page of its own here.
- * - **`WithMentionInput`** — the one documented bespoke shell: a mention
- *   roster has to WRAP the textarea, which is the seam `Composer` owns, so
- *   that page drops to `PromptInput` on purpose.
+ * - **`WithMentionInput`** — the `mentions` slot: an `@`-mention roster
+ *   (`MentionInput` from `@elabs-ai/components-ui`) on the composer's field.
  *
  * `Terminal/TerminalComposer` is the console skin of this same family — same
  * footer order, different surface.
@@ -147,8 +146,8 @@ const meta = {
           "[PromptInputMode](?path=/docs/ai-composer-promptinputmode--docs), " +
           "[PromptInputEffort](?path=/docs/ai-composer-promptinputeffort--docs) and " +
           "[PromptInputSlash](?path=/docs/ai-composer-promptinputslash--docs) are the three controls the `mode`, `effort` and `slashCommands` slots render (the fourth slot, `modelPicker`, takes a `ModelPicker` from @elabs-ai/components-ui, which is why it has no page of its own); and " +
-          "[WithMentionInput](?path=/docs/ai-composer-withmentioninput--docs) is the one documented bespoke shell — a mention roster has to WRAP the textarea, the seam Composer owns, so that page drops to PromptInput on purpose. " +
-          "The scaffold that puts this composer under a transcript is [Patterns/Blocks/AI Chat Shell](?path=/docs/patterns-blocks-ai-chat-shell--docs); the console skin of the same family is [Terminal/TerminalComposer](?path=/docs/terminal-terminalcomposer--docs).",
+          "[WithMentionInput](?path=/docs/ai-composer-withmentioninput--docs) shows the `mentions` slot — an @-mention roster on the composer's own field. " +
+          "The scaffold that puts this composer under a transcript is [Patterns/Blocks/AI and Terminal/AI Chat Shell](?path=/docs/patterns-blocks-ai-and-terminal-ai-chat-shell--docs); the console skin of the same family is [Terminal/TerminalComposer](?path=/docs/terminal-terminalcomposer--docs).",
       },
     },
   },

package/src/composer.test.tsx

@@ -531,3 +531,48 @@ describe("Composer — shortcut hints change with a busy state (#107)", () => {
     expect(shortcutRow).not.toContainElement(stopButton);
   });
 });
+
+describe("Composer — mentions slot", () => {
+  const ROSTER = [
+    { id: "u-ada", label: "Ada Lovelace" },
+    { id: "u-grace", label: "Grace Hopper" },
+  ];
+
+  it("opens the roster on @, inserts on Enter without submitting, then submits and resets", async () => {
+    const user = userEvent.setup();
+    const onSubmit = vi.fn();
+    const onValueChange = vi.fn();
+    render(
+      <Composer
+        onSubmit={onSubmit}
+        showAttach={false}
+        showVoice={false}
+        mentions={{ options: ROSTER, onValueChange }}
+      />,
+    );
+    const field = screen.getByRole("textbox") as HTMLTextAreaElement;
+    // The composer's own field — what PromptInput's submit reads.
+    expect(field).toHaveAttribute("name", "message");
+
+    await user.click(field);
+    await user.keyboard("hi @ada");
+    expect(field).toHaveAttribute("data-state", "open");
+    await user.keyboard("{Enter}");
+    expect(field.value).toBe("hi @Ada Lovelace ");
+    expect(onSubmit).not.toHaveBeenCalled();
+    expect(onValueChange).toHaveBeenLastCalledWith(
+      expect.objectContaining({ mentions: [expect.objectContaining({ id: "u-ada" })] }),
+    );
+
+    await user.keyboard("{Enter}");
+    expect(onSubmit).toHaveBeenCalledTimes(1);
+    expect(onSubmit.mock.calls[0]![0].text.trim()).toBe("hi @Ada Lovelace");
+    expect(field.value).toBe("");
+    expect(onValueChange).toHaveBeenLastCalledWith({ text: "", mentions: [] });
+  });
+
+  it("refuses slashCommands and mentions together at the type level", () => {
+    // @ts-expect-error — the field takes a slash palette OR a mention roster.
+    render(<Composer slashCommands={[]} mentions={{ options: ROSTER }} />);
+  });
+});

package/src/composer.tsx

@@ -2,7 +2,20 @@
 
 import { useCallback, useRef, useState, type ComponentProps, type ReactNode } from "react";
 import { ArrowUp, Mic, Paperclip, Sparkles } from "lucide-react";
-import { cn, Kbd, useLocale } from "@elabs-ai/components-ui";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  cn,
+  Kbd,
+  MentionInput,
+  MentionInputContent,
+  MentionInputEmpty,
+  MentionInputItem,
+  MentionInputList,
+  MentionInputTextarea,
+  useLocale,
+  type MentionOption,
+  type MentionValue,
+} from "@elabs-ai/components-ui";
 
 import {
   PromptInput,
@@ -62,7 +75,29 @@ export interface ComposerShortcut {
   label: string;
 }
 
-export interface ComposerProps {
+/**
+ * An `@`-mention roster for the composer field (`MentionInput` from
+ * `@elabs-ai/components-ui`). The field keeps its own submit contract; the
+ * mentions ride alongside the text in a `MentionValue`.
+ *
+ * Read the mentions on submit from `value` (controlled) or from
+ * `onValueChange`, and resolve them with `serializeMentions(value)`
+ * (`{ text, mentionedIds }`). `Composer` resets the value to empty after a
+ * submit it accepts — through `onValueChange`, so a controlled caller's state
+ * clears too.
+ */
+export interface ComposerMentions {
+  /** Who (or what) can be mentioned. */
+  options: MentionOption[];
+  /** Controlled value. Omit for an uncontrolled roster. */
+  value?: MentionValue;
+  /** Fires on every edit, pick and post-submit reset. */
+  onValueChange?: (value: MentionValue) => void;
+}
+
+const EMPTY_MENTION_VALUE: MentionValue = { text: "", mentions: [] };
+
+export interface ComposerBaseProps {
   /** Submit handler — receives the assembled message (text + attachments). */
   onSubmit?: PromptInputProps["onSubmit"];
   /** Textarea placeholder. Default `"Ask me anything…"`. */
@@ -96,20 +131,6 @@ export interface ComposerProps {
    * and is entirely yours; `aria-label` names the scale.
    */
   effort?: ComposerEffortProps;
-  /**
-   * Slash-command palette. When set (and non-empty) the textarea becomes a
-   * `PromptInputSlashTextarea` wrapped in a `PromptInputSlash`, so typing `/`
-   * at the start of a line opens a filtered command list — nothing else about
-   * the composer changes.
-   *
-   * Note this makes the textarea REACT-CONTROLLED (the palette needs to read
-   * and splice the text), which is why `Composer` clears its own copy of the
-   * text on submit: `PromptInput`'s `form.reset()` reaches the DOM node, not
-   * React state.
-   */
-  slashCommands?: PromptInputSlashProps["commands"];
-  /** Fires with the chosen slash command (alongside the text splice). */
-  onSlashCommand?: PromptInputSlashProps["onSelect"];
   /**
    * Override the DEFAULT tool buttons (today: the attach button) — e.g. to add
    * a web-search or connect-data control. Render `PromptInputButton`s /
@@ -185,6 +206,38 @@ export interface ComposerProps {
   className?: string;
 }
 
+/**
+ * The field enhancements that each take over the textarea — a slash palette OR
+ * a mention roster, never both. The union makes the impossible combination a
+ * type error instead of a silent precedence rule.
+ */
+export type ComposerFieldProps =
+  | {
+      /**
+       * Slash-command palette. When set (and non-empty) the textarea becomes a
+       * `PromptInputSlashTextarea` wrapped in a `PromptInputSlash`, so typing `/`
+       * at the start of a line opens a filtered command list — nothing else about
+       * the composer changes.
+       *
+       * Note this makes the textarea REACT-CONTROLLED (the palette needs to read
+       * and splice the text), which is why `Composer` clears its own copy of the
+       * text on submit: `PromptInput`'s `form.reset()` reaches the DOM node, not
+       * React state.
+       */
+      slashCommands?: PromptInputSlashProps["commands"];
+      /** Fires with the chosen slash command (alongside the text splice). */
+      onSlashCommand?: PromptInputSlashProps["onSelect"];
+      mentions?: never;
+    }
+  | {
+      /** `@`-mention roster on the field — see `ComposerMentions`. */
+      mentions?: ComposerMentions;
+      slashCommands?: never;
+      onSlashCommand?: never;
+    };
+
+export type ComposerProps = ComposerBaseProps & ComposerFieldProps;
+
 /**
  * Composer — the standard brand-ui AI chat input.
  *
@@ -202,9 +255,10 @@ export interface ComposerProps {
  *
  * **Composer is the chat input. Every control the `PromptInput` family ships
  * is reachable from a `Composer` prop; drop to `PromptInput` only for a
- * bespoke shell.** `modelPicker`, `mode`, `effort` and `slashCommands` are the
- * four slots that make that true — they render `ModelPicker`,
- * `PromptInputMode`, `PromptInputEffort` and `PromptInputSlash` respectively,
+ * bespoke shell.** `modelPicker`, `mode`, `effort`, `slashCommands` and
+ * `mentions` are the slots that make that true — they render `ModelPicker`,
+ * `PromptInputMode`, `PromptInputEffort`, `PromptInputSlash` and
+ * `MentionInput` respectively,
  * in the footer order `attach · modelPicker · mode · effort │ voice · send`
  * (the same left-to-right arrangement `TerminalComposer` uses, so the chat and
  * console skins agree).
@@ -218,6 +272,7 @@ export function Composer({
   effort,
   slashCommands,
   onSlashCommand,
+  mentions,
   tools,
   sendStatus,
   onStop,
@@ -239,6 +294,12 @@ export function Composer({
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const [text, setText] = useState("");
   const hasSlash = slashCommands !== undefined && slashCommands.length > 0;
+  // Always called (hook order); only read when `mentions` is set.
+  const [mentionValue, setMentionValue] = useControllableState<MentionValue>({
+    prop: mentions?.value,
+    defaultProp: EMPTY_MENTION_VALUE,
+    onChange: mentions?.onValueChange,
+  });
 
   // #107: "Composer shortcut hints change with a busy state" — derived from
   // the existing canonical `sendStatus`, never a second boolean prop. The
@@ -258,9 +319,12 @@ export function Composer({
       // keep rendering the sent text straight back. Clearing here is a no-op in
       // the uncontrolled (non-slash) arrangement.
       setText("");
-      return onSubmit?.(message, event);
+      const result = onSubmit?.(message, event);
+      // `form.reset()` cannot clear a value MentionInput controls either.
+      if (mentions) setMentionValue(EMPTY_MENTION_VALUE);
+      return result;
     },
-    [onSubmit],
+    [onSubmit, mentions, setMentionValue],
   );
 
   const resolvedPlaceholder = placeholder ?? t("ai.composer.placeholder");
@@ -305,6 +369,25 @@ export function Composer({
                   placeholder={resolvedPlaceholder}
                 />
               </PromptInputSlash>
+            ) : mentions ? (
+              <MentionInput
+                options={mentions.options}
+                value={mentionValue}
+                onValueChange={setMentionValue}
+              >
+                {/* `asChild` lends the mention behaviour to the composer's own
+                    textarea, so `name="message"` — what PromptInput's submit
+                    reads — survives. */}
+                <MentionInputTextarea asChild>
+                  <PromptInputTextarea placeholder={resolvedPlaceholder} />
+                </MentionInputTextarea>
+                <MentionInputContent>
+                  <MentionInputList>
+                    {(option) => <MentionInputItem key={option.id} option={option} />}
+                  </MentionInputList>
+                  <MentionInputEmpty />
+                </MentionInputContent>
+              </MentionInput>
             ) : (
               <PromptInputTextarea placeholder={resolvedPlaceholder} />
             )}

package/src/context-panel.stories.tsx

@@ -102,7 +102,7 @@ function WorkspaceDemo(providerProps: Omit<ContextPanelProviderProps, "children"
     <ContextPanelProvider {...providerProps}>
       <div className="flex h-[520px] w-full overflow-hidden rounded-xl border bg-background">
         <div className="flex min-w-0 flex-1 flex-col">
-          <header className="flex h-12 shrink-0 items-center justify-between border-b px-4">
+          <header className="flex h-header shrink-0 items-center justify-between border-b px-4">
             <span className="text-subtitle">Agentic workspace</span>
             <ContextPanelTrigger />
           </header>

package/src/context-panel.tsx

@@ -469,7 +469,7 @@ export const ContextPanelHeader = forwardRef<HTMLDivElement, ContextPanelHeaderP
       <div
         ref={ref}
         data-slot="context-panel-header"
-        className={cn("flex h-12 shrink-0 items-center gap-2 border-b px-3", className)}
+        className={cn("flex h-header shrink-0 items-center gap-2 border-b px-3", className)}
         {...props}
       >
         {isDetail ? (

package/src/conversation.stories.tsx

@@ -5,6 +5,7 @@ import { Message, MessageContent } from "./message";
 const meta = {
   title: "AI/Conversation",
   component: Conversation,
+  tags: ["autodocs"],
   parameters: {
     layout: "padded",
     docs: {

package/src/conversation.test.tsx

@@ -45,6 +45,22 @@ describe("Conversation — transcript region", () => {
     expect(screen.getByRole("log")).toBeInTheDocument();
   });
 
+  it("lets the content grow past the viewport so its composer inset stays scrollable", () => {
+    render(
+      <Conversation>
+        <ConversationContent>
+          <p>turn</p>
+        </ConversationContent>
+      </Conversation>,
+    );
+    const content = screen.getByText("turn").parentElement!;
+    // `min-h-0` clamps the content to the viewport height: the turns then
+    // overflow it and the bottom padding (the floating-composer inset) is
+    // left behind, so the last turn scrolls under the composer.
+    expect(content).not.toHaveClass("min-h-0");
+    expect(content).toHaveClass("shrink-0", "flex-1");
+  });
+
   it("renders its children inside the log, in order", () => {
     render(
       <Conversation>

package/src/conversation.tsx

@@ -48,7 +48,19 @@ export const ConversationContent = ({
     // can't resolve against a block-level parent whose own height is
     // `min-height`-only (the #72 empty-state-pinned-to-the-top bug).
     scrollClassName={cn("flex flex-col", scrollClassName)}
-    className={cn("flex flex-1 min-h-0 flex-col gap-8 p-4", className)}
+    // Inside a `ChatShell variant="bare"` the composer floats over the
+    // transcript: the shell publishes `--chat-composer-inset` (its measured
+    // height) so the last turn scrolls clear of it, and `--chat-column` so
+    // turns share the composer's reading column. Outside such a shell both
+    // variables are unset: the inset falls back to 0 and `max-width` to none.
+    // `shrink-0`, never `min-h-0`: the content div must grow with its turns.
+    // Clamped to the viewport height, the turns overflow it and its bottom
+    // padding stays behind at the viewport's edge, so the last turn ends up
+    // under the floating composer instead of above it.
+    className={cn(
+      "mx-auto flex w-full max-w-(--chat-column) flex-1 shrink-0 flex-col gap-8 p-4 pb-[calc(var(--chat-composer-inset,0px)+--spacing(4))]",
+      className,
+    )}
     {...props}
   />
 );
@@ -113,7 +125,9 @@ export const ConversationScrollButton = ({
           // the quieter `hover:bg-muted` (in place of `outline`'s default
           // `hover:bg-accent`) now applies in every theme, not only the two
           // shipped ones.
-          "absolute bottom-4 left-[50%] translate-x-[-50%] rounded-full bg-background hover:bg-muted",
+          // `--chat-composer-inset`: lift the button clear of a floating
+          // `ChatShell variant="bare"` composer (0 anywhere else).
+          "absolute bottom-[calc(var(--chat-composer-inset,0px)+--spacing(4))] left-[50%] z-30 translate-x-[-50%] rounded-full bg-background hover:bg-muted",
           className,
         )}
         aria-label={t("ai.turnStatus.scrollToBottom")}