@djangocfg/widget-chat 0.1.1

package/src/styles/turn-mark.css

@@ -0,0 +1,97 @@
+/**
+ * The turn marker: one shape for the live turn, absent once it settles.
+ *
+ * Waiting and working differ in PACE, not in shape, so the moment the first
+ * token lands reads as the mark picking up speed rather than as one icon being
+ * swapped for another.
+ *
+ * A square that turns, rather than a pulse. A pulsing dot says "busy" and
+ * nothing else — every spinner on the web says that. Rotation has a direction,
+ * so a glance distinguishes "still going" from "stalled".
+ *
+ * Sized in `em` throughout, so it tracks whatever text it sits beside.
+ */
+
+.turn-mark {
+  display: inline-block;
+  /* Slightly over cap height: the mark leads the line rather than sitting in
+   * it, and below ~0.7em the tumble reads as a jitter because the corners
+   * travel too few pixels to register as rotation. */
+  inline-size: 0.72em;
+  block-size: 0.72em;
+  /* Not a circle: the corners are what make the rotation visible at all. At
+   * this size a rotating circle is indistinguishable from a still one. */
+  border-radius: 0.14em;
+  /* `currentColor` — the mark takes the colour of the row it leads, so it reads
+   * as part of the line rather than as a badge dropped onto it. Motion is what
+   * marks it as live; colour would say the same thing twice, louder. */
+  background: currentColor;
+  /* The mark sits on the text baseline rather than the line box's middle, which
+   * is where a raw inline-block lands and reads as floating high. */
+  vertical-align: 0.02em;
+}
+
+/**
+ * Working — a continuous turn, never a rest.
+ *
+ * `linear`, and the keyframes carry no hold: any easing curve decelerates into
+ * the final frame and accelerates out of the first, which on a loop is a stop
+ * and a restart every cycle. That hitch is what reads as jerky at speed. An
+ * even angular rate is the only thing that loops seamlessly.
+ */
+.turn-mark[data-state="working"] {
+  animation: turn-mark-tumble 1.6s linear infinite;
+}
+
+/**
+ * Waiting for the first token, when there is no text yet to lead.
+ *
+ * Dimmer and slower: nothing has been said, and a mark racing beside an empty
+ * line overstates what is happening. Same shape, so the transition into
+ * `working` is a change of pace rather than a swap.
+ */
+.turn-mark[data-state="waiting"] {
+  animation: turn-mark-tumble 2.6s linear infinite;
+  opacity: 0.5;
+}
+
+/* Also drives the composer's recording glyph (`composer.css`) and the running
+ * tool marker (`tool.css`) — deleting this with the turn mark would silently
+ * still both. */
+@keyframes turn-mark-tumble {
+  /* A FULL turn, not the quarter a square's symmetry would allow. A quarter
+   * needs the cycle to end where it began, so the loop seam falls inside the
+   * motion; over 360° every frame is mid-rotation and there is no seam to see.
+   *
+   * The scale breathes twice per turn — at 90° and 270°, where the square is
+   * back to square-on. It rides the rotation instead of interrupting it, so the
+   * mark has weight without any pause in the movement. */
+  0% {
+    transform: rotate(0deg) scale(1);
+  }
+  25% {
+    transform: rotate(90deg) scale(0.88);
+  }
+  50% {
+    transform: rotate(180deg) scale(1);
+  }
+  75% {
+    transform: rotate(270deg) scale(0.88);
+  }
+  100% {
+    transform: rotate(360deg) scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* Still, but not invisible: a turn is in flight either way, and the accent
+   * colour alone carries that once motion is off. */
+  .turn-mark[data-state="working"],
+  .turn-mark[data-state="waiting"] {
+    animation: none;
+    opacity: 1;
+  }
+  .turn-mark[data-state="waiting"] {
+    opacity: 0.5;
+  }
+}

package/src/testing/index.ts

@@ -0,0 +1,15 @@
+// Test doubles: mock adapter, chat factory, chunk builders.
+//
+// Exported under the "./testing" subpath so consumers can drive a chat in their
+// own tests. Never re-exported from the package root.
+//
+// Stories use these too, and that is the reason they live in `src/` rather than
+// beside the story files: a second scripted adapter inside the Storybook app
+// would drift from the chunk vocabulary it imitates, and a story passing
+// against a private mock proves nothing about the shipped adapter contract.
+
+export { mockAdapter, tokenize } from "./mock-adapter";
+export type { MockOptions } from "./mock-adapter";
+export { mockVoice } from "./mock-voice";
+export type { MockVoiceOptions } from "./mock-voice";
+export { MOCK_TOOL_CATALOGUE, MOCK_TOOL_CATALOGUE_NO_STT } from "./mock-tools";

package/src/testing/mock-adapter.ts

@@ -0,0 +1,69 @@
+/**
+ * A scripted adapter for stories and tests.
+ *
+ * Shipped from `src/` rather than kept in a test file because stories need it
+ * too, and a second copy in the Storybook app would drift from the chunk
+ * vocabulary it mimics. It is the reference implementation of `ChatAdapter`:
+ * about forty lines, which is the argument that the one-method contract works.
+ */
+
+import type { ChatAdapter, SendRequest } from "../core/adapter";
+import type { StreamChunk } from "../core/chunks";
+
+export interface MockOptions {
+  /** Chunks to replay per turn. A function receives the request. */
+  readonly script: readonly StreamChunk[] | ((request: SendRequest) => readonly StreamChunk[]);
+  /** Milliseconds between chunks. 0 replays synchronously. */
+  readonly delayMs?: number;
+}
+
+export function mockAdapter(options: MockOptions): ChatAdapter {
+  const { script, delayMs = 0 } = options;
+
+  return {
+    sendMessage(request) {
+      const chunks = typeof script === "function" ? script(request) : script;
+      let index = 0;
+
+      return Promise.resolve(
+        new ReadableStream<StreamChunk>({
+          async pull(controller) {
+            if (index >= chunks.length) {
+              controller.close();
+              return;
+            }
+            // Honour the signal between chunks so Stop works in a story the
+            // same way it works against a real transport.
+            if (request.signal.aborted) {
+              controller.close();
+              return;
+            }
+            if (delayMs > 0) await sleep(delayMs, request.signal);
+            const chunk = chunks[index];
+            index += 1;
+            if (chunk !== undefined) controller.enqueue(chunk);
+          },
+        }),
+      );
+    },
+  };
+}
+
+function sleep(ms: number, signal: AbortSignal): Promise<void> {
+  return new Promise((resolve) => {
+    const timer = setTimeout(resolve, ms);
+    signal.addEventListener("abort", () => {
+      clearTimeout(timer);
+      resolve();
+    }, { once: true });
+  });
+}
+
+/** Split text into token-sized deltas — what makes a story look like streaming. */
+export function tokenize(text: string, partId = "t1"): StreamChunk[] {
+  const words = text.split(/(\s+)/).filter((w) => w !== "");
+  return [
+    { type: "text-start", partId },
+    ...words.map((delta): StreamChunk => ({ type: "text-delta", partId, delta })),
+  ];
+}

package/src/testing/mock-tools.ts

@@ -0,0 +1,101 @@
+import type { ToolCatalogEntry } from "../core";
+
+/**
+ * A stand-in arsenal, shaped like the registry's projection.
+ *
+ * Ids, categories and keywords are shaped like the ones a server actually
+ * reports, so the filter is exercised against realistic strings rather than
+ * against the words a test author would have picked.
+ */
+export const MOCK_TOOL_CATALOGUE: readonly ToolCatalogEntry[] = [
+  {
+    id: "transcribe_audio",
+    name: "Transcribe audio",
+    summary: "Read back what was said in a recording",
+    category: "stt",
+    keywords: ["stt", "speech", "transcribe", "audio", "voice", "recording", "listen", "said"],
+    icon: "mic",
+    // The one entry here that wants an object a sentence cannot carry, so the
+    // placeholder hint has something real to fire on.
+    needs: "file",
+  },
+  {
+    id: "read_text",
+    name: "Read an image",
+    summary: "Pull the text out of a screenshot or a scan",
+    category: "image",
+    keywords: ["ocr", "screenshot", "scan", "read"],
+    icon: "image",
+  },
+  {
+    id: "web_search",
+    name: "Search the web",
+    summary: "Look something up online",
+    category: "web",
+    keywords: ["search", "google", "lookup", "internet"],
+    icon: "globe",
+  },
+  {
+    id: "web_fetch",
+    name: "Open a page",
+    summary: "Fetch one URL and read it",
+    category: "web",
+    keywords: ["fetch", "url", "page", "browse"],
+    icon: "globe",
+  },
+  {
+    id: "read_document",
+    name: "Read a document",
+    summary: "Open an uploaded document and quote it",
+    category: "documents",
+    keywords: ["file", "open", "document", "text"],
+    icon: "file",
+  },
+  {
+    id: "write_document",
+    name: "Write a document",
+    summary: "Draft a new document from this conversation",
+    category: "documents",
+    keywords: ["file", "save", "create", "edit"],
+    icon: "file",
+  },
+  {
+    id: "list_documents",
+    name: "List documents",
+    summary: "See what has been uploaded to this conversation",
+    category: "documents",
+    keywords: ["ls", "library", "folder", "browse"],
+    icon: "file",
+  },
+  {
+    id: "generate_image",
+    name: "Generate an image",
+    summary: "Draw a picture from a description",
+    category: "generation",
+    keywords: ["draw", "picture", "render", "illustrate"],
+    icon: "image",
+  },
+  {
+    id: "run_code",
+    name: "Run code",
+    summary: "Execute a snippet in a sandbox and report what it printed",
+    category: "code",
+    keywords: ["python", "sandbox", "execute", "script"],
+    icon: "terminal",
+  },
+  {
+    id: "sandbox_info",
+    name: "Sandbox details",
+    summary: "Report the runtime and which packages are installed",
+    category: "code",
+    keywords: ["runtime", "system", "packages", "versions"],
+    icon: "terminal",
+  },
+];
+
+/**
+ * The arsenal without speech, as a server with no STT engine reports it.
+ * Registration is conditional, so the catalogue differs per deployment.
+ */
+export const MOCK_TOOL_CATALOGUE_NO_STT: readonly ToolCatalogEntry[] =
+  MOCK_TOOL_CATALOGUE.filter((entry) => entry.category !== "stt");

package/src/testing/mock-voice.ts

@@ -0,0 +1,81 @@
+import type { VoiceCapability } from "../core";
+
+export interface MockVoiceOptions {
+  /**
+   * The sentence to dictate, revealed word by word.
+   *
+   * Each step emits the phrase so far as an INTERIM result, exactly as a real
+   * engine does — it re-sends its whole current guess rather than the delta.
+   * That is the behaviour `VoiceSession` exists to absorb, so a mock that
+   * emitted deltas would make the story agree for the wrong reason.
+   */
+  readonly phrase?: string;
+  /** Delay between words. Slow enough that `Recording` is visible on screen. */
+  readonly delayMs?: number;
+  /**
+   * Fail instead of dictating — a denied microphone permission.
+   *
+   * The realistic failure: the user presses the mic and clicks "Block". It
+   * settles on the snapshot as `error`; nothing throws.
+   */
+  readonly failWith?: string;
+}
+
+/**
+ * A scripted `VoiceCapability` — no microphone, no Web Speech API.
+ *
+ * A story that needed real speech is a story nobody can run: it would demand a
+ * permission prompt, a quiet room, and an engine that Firefox does not have. So
+ * the mock owns the timing and the transcript, and the story asserts what the
+ * COMPOSER does with them.
+ */
+export function mockVoice({
+  phrase = "summarise the last three replies",
+  delayMs = 260,
+  failWith,
+}: MockVoiceOptions = {}): VoiceCapability {
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let abort: (() => void) | undefined;
+
+  return {
+    start: (onText, signal) =>
+      new Promise((resolve, reject) => {
+        if (failWith !== undefined) {
+          // Asynchronously, like a real permission denial: a synchronous throw
+          // would reject before the session has stored its controller, and the
+          // error would land on a session it can no longer match.
+          timer = setTimeout(() => reject(new Error(failWith)), delayMs);
+          return;
+        }
+
+        const words = phrase.split(" ");
+        let index = 0;
+
+        const step = () => {
+          if (signal.aborted) return;
+          index += 1;
+          const soFar = words.slice(0, index).join(" ");
+          if (index >= words.length) {
+            // The last emission COMMITS. Without a final result the session
+            // holds the whole sentence as interim, and a stop would still work
+            // but the story would never exercise the commit path.
+            onText(soFar, true);
+            resolve();
+            return;
+          }
+          onText(soFar, false);
+          timer = setTimeout(step, delayMs);
+        };
+
+        abort = () => resolve();
+        signal.addEventListener("abort", () => {
+          clearTimeout(timer);
+          abort?.();
+        });
+        timer = setTimeout(step, delayMs);
+      }),
+    stop: () => {
+      clearTimeout(timer);
+    },
+  };
+}

package/src/ui/chat-composer.tsx

@@ -0,0 +1,286 @@
+import { Brain, CornerDownLeft, Mic, Plus, Square, type LucideProps } from "lucide-react";
+import type { ReactNode } from "react";
+
+import {
+  Composer,
+  ComposerField,
+  ComposerPickedTools,
+  ComposerQueue,
+  ComposerSend,
+  ComposerThink,
+  ComposerTools,
+  ComposerVoice,
+  useDraftPersistence,
+  type AskReplace,
+} from "../composer";
+import { ChatReplyChip } from "./chat-reply-chip";
+import { ChatSuggestions } from "./chat-suggestions";
+
+export interface ChatComposerProps {
+  /** Sent prompts for ↑ recall, OLDEST first. Empty ⇒ the arrows never navigate. */
+  readonly history?: readonly string[];
+  /** The dictation language, when the host offers a picker. */
+  readonly speechLanguage?: {
+    readonly value: string;
+    readonly onChange: (language: string) => void;
+  };
+  /**
+   * Asked before a queued prompt interrupts the running turn.
+   *
+   * Passed through to `ComposerQueue`; the package acquires no dialog of its
+   * own. Absent ⇒ no interrupt control at all, because an unconfirmed one is
+   * the shape this must never ship.
+   */
+  readonly confirmSendQueuedNow?: () => Promise<boolean>;
+  /**
+   * Asked before a prompt taken back for editing overwrites a draft in progress.
+   *
+   * Three outcomes, not a confirm: "keep what I typed" and "keep both" are
+   * different answers, and a two-button dialog makes them the same one. Absent ⇒
+   * the take replaces the draft outright.
+   */
+  readonly askReplaceDraft?: AskReplace;
+  /**
+   * Room identity, to keep an unsent draft across a reload.
+   *
+   * Absent ⇒ no persistence, and the draft dies with the mount. The VALUE is
+   * the host's because this package has no notion of a room; two rooms given
+   * one string share a draft, which nothing here can detect.
+   */
+  readonly draftRoom?: string;
+  /** Extra controls, between the field and the mic. */
+  readonly toolbarEnd?: ReactNode;
+  /**
+   * Room-wide surfaces that belong ABOVE the field, inside the same column.
+   *
+   * An allowance banner and the agent's question describe the ROOM, not the
+   * draft, so they sit outside the box — but within the column and its
+   * positioning context, because a card that floats `bottom-full` grows upward
+   * from this slot's top edge. A host rendering them as a sibling of `<Chat>`
+   * puts them outside the reading column, at a different width from the
+   * conversation they belong to.
+   */
+  readonly above?: ReactNode;
+  /**
+   * Icon KEY → glyph for the empty room's starter rows.
+   *
+   * The host's, because the catalogue names glyphs as DATA — it crosses Go→TS
+   * and can name a picture but cannot be one — and this package ships no icon
+   * library. Absent, or an unmapped key, draws no glyph and the row still works.
+   */
+  readonly suggestionIcon?: (key: string) => ReactNode;
+  /**
+   * Icon KEY → glyph for a row in the `+` arsenal menu. Same seam, same reason.
+   */
+  readonly toolIcon?: (key: string) => ReactNode;
+  /**
+   * The heading for a tool CATEGORY key. Absent ⇒ the registry's raw key.
+   *
+   * The host's, because the keys are Go's (`stt`, `web`, `disk`) and their
+   * translations belong beside the catalogue that mints them: a mapping in this
+   * package would go stale the moment a new tool family is registered, and go
+   * stale SILENTLY — an unmapped key still renders.
+   */
+  readonly toolCategoryLabel?: (category: string) => string;
+  readonly className?: string;
+}
+
+/**
+ * Mounts the persistence effects, which need the draft from context. A component
+ * rather than a call in `ChatComposer`, because that body sits OUTSIDE
+ * `<Composer>` and `useComposer()` throws there. Renders nothing.
+ */
+function DraftPersistence({ room }: { readonly room: string | undefined }) {
+  useDraftPersistence(room);
+  return null;
+}
+
+/**
+ * The composer, assembled.
+ *
+ * ONE assembly, so a surface cannot silently ship without the queue or the
+ * controls beside it — each of which was built, exported, and then left
+ * unrendered by a host that composed the parts by hand.
+ *
+ * The layout AND the copy are the package's; what a host varies is capabilities
+ * and data. Copy was the host's until adding one label proved to be a four-file
+ * change, and until a host assembled a translated string into a DOM selector —
+ * which broke the caret in one locale with types and tests green.
+ *
+ * `flex-wrap` with `items-end` rather than a measured grid: the controls share
+ * the field's row while the draft is short and wrap beneath it when it grows,
+ * which is layout doing the work with no measurement, no state and no frame lag.
+ */
+export function ChatComposer({
+  history = [],
+  speechLanguage,
+  confirmSendQueuedNow,
+  askReplaceDraft,
+  draftRoom,
+  toolbarEnd,
+  above,
+  suggestionIcon,
+  toolIcon,
+  toolCategoryLabel,
+  className,
+}: ChatComposerProps) {
+  return (
+    /*
+      The reading column and the positioning context, both owned HERE.
+
+      `chat-column` caps and centres each child so the composer and the
+      transcript agree on where the conversation is; the stylesheet used to ask
+      the HOST to put the same class on its own wrapper, which is a rule a host
+      can only forget silently — the two surfaces then sit at different widths
+      with nothing failing. `relative` anchors an ask card that grows upward
+      from this element's top edge (`bottom-full`); without a positioned
+      ancestor it resolves against the viewport and lands away from the
+      conversation it answers.
+
+      `pr-4` matches the padding the host drops on its right edge so the
+      transcript's scrollbar can reach the pane. Here rather than there because
+      only this element knows it is the composer's outer box.
+    */
+    <div className="chat-column chat-inset-r relative">
+      {above}
+      {/*
+        Part of the assembly, not a host slot — the same reason `ComposerQueue`
+        is: a surface composing this by hand ships without whichever piece it
+        forgot, and nothing fails. It is self-gating, so it costs every other
+        room one null. ABOVE the box because it describes the ROOM; the reply
+        chip sits inside it because it describes the DRAFT.
+      */}
+      <ChatSuggestions icon={suggestionIcon} />
+      <Composer
+      /*
+        Radius and inset are NOT here. They are one measurement, not two: the
+        outer radius has to equal the controls' plus the inset or the corners
+        stop running parallel, and a Tailwind pair states them as unrelated
+        numbers that drift apart on the next edit. `composer-box` derives one
+        from the other in the chat stylesheet, which also carries the
+        `:has(textarea[data-multiline])` rule — a selector that looks DOWN at a
+        descendant and acts on a different child, legible as CSS and unreadable
+        as a class list.
+      */
+      className={`composer-box flex cursor-text flex-wrap items-end gap-2 border border-border bg-background focus-within:border-ring ${className ?? ""}`}
+    >
+      <DraftPersistence room={draftRoom} />
+      <ChatReplyChip />
+      {/* Absent when empty, which is almost always. `w-full` for the same reason
+          the tray takes one: it describes the whole draft, not the field. */}
+      <ComposerQueue
+        confirmSendNow={confirmSendQueuedNow}
+        askReplace={askReplaceDraft}
+        className="w-full"
+        listClassName="flex flex-col gap-1"
+        // One class, styled in `styles/composer.css`. The row addresses its
+        // children by `data-action`, which a Tailwind arbitrary variant can only
+        // express as a quoted selector repeated per property — where a misplaced
+        // bracket reads as ordinary noise.
+        itemClassName="queued-row"
+      />
+      {/* BEFORE the field, where the reader starts. `composer-lead` is what
+          sends it DOWN with the other controls on a wrapped draft — the
+          stylesheet owns that, because a class list cannot say "while a
+          sibling's descendant is multiline". A `+`, not a wrench: any icon
+          naming a tool names the wrong one. */}
+      <div className="composer-lead order-1 flex min-w-0 shrink-0 items-center gap-1">
+        <ComposerTools icon={toolIcon} categoryLabel={toolCategoryLabel}>
+          <Plus className="size-4" aria-hidden />
+        </ComposerTools>
+        {/* Directly after the `+` that staged them, so a pick lands where the
+            user clicked. `min-w-0` lets it shrink rather than push the field
+            off the line; `tool-chips` carries the fades and hidden scrollbar. */}
+        <ComposerPickedTools
+          icon={toolIcon}
+          className="tool-chips flex min-w-0 gap-1 overflow-x-auto empty:hidden"
+          chipClassName="tool-chip"
+        />
+      </div>
+      <ComposerField
+        /*
+          `min-w-[60%]` on the WRAPPER, which is the element flex lays out.
+          Measured: without it the field held 83% of the composer and STOPPED —
+          a four-line draft wrapped inside 634px while 134px sat empty to its
+          right, because the controls never left the row for it to claim.
+        */
+        wrapperClassName="order-2 min-w-[60%]"
+        /*
+          `w-full`, NOT `flex-1`: the flex item is the positioned wrapper that
+          anchors the mention menu, and the textarea inside it is an ordinary
+          block, so `flex-1` here resolves against nothing and the box keeps a
+          textarea's intrinsic `cols` width.
+
+          The field reads at the TRANSCRIPT's size, from the same token. What
+          you type and what comes back are one conversation; two scales would
+          say otherwise.
+        */
+        /*
+          `pt-[3px] pb-[5px]`, not `py-1`: an OPTICAL correction, and the 8px
+          total is unchanged so the field still matches the 32px buttons beside
+          it. SF Pro's metrics are asymmetric — 10px ascent against 2px descent —
+          and a line box centres on those, not on cap height, so symmetric
+          padding rendered 10px of air above the glyphs and 7px below. Measured
+          by scanning the rendered ink, which is the only thing that sees this:
+          every box in the row already measured identical and bottom-aligned.
+        */
+        className="w-full resize-none bg-transparent pt-[3px] pb-[5px] text-[length:var(--chat-text)] leading-[var(--chat-leading)] outline-none placeholder:text-muted-foreground"
+        history={history}
+      />
+      {/*
+        The trailing controls; `+` leads the row rather than sitting here.
+        `flex-1`, not `w-full`: this SHARES the line with `+` while claiming the
+        rest of it, which keeps the send button at the far edge in both states.
+      */}
+      <div className="composer-controls order-3 flex flex-1 items-center gap-1">
+        {/*
+          `ml-auto` rather than `justify-end` on the row: `+` holds the left
+          edge, so the row cannot end-align as a whole — this group has to push
+          itself right against whatever leads it.
+        */}
+        <div className="ml-auto flex shrink-0 items-center gap-1">
+          {/* Anything a host puts here MUST render `ComposerButton`, including a
+              menu or popover trigger, which wraps it. These controls belong to
+              three packages and that component is the one place they agree on
+              size, radius and hover; `wide` is the variant that carries text. */}
+          {toolbarEnd}
+          {/* Renders nothing without a `think` capability. Only a third of the
+              catalogue accepts the request field behind it, so the host decides
+              per active model — an always-present toggle would be inert on the
+              rest, which reads as broken rather than unavailable. */}
+          <ComposerThink className="aria-pressed:text-primary">
+            {() => <Brain className="size-4" aria-hidden />}
+          </ComposerThink>
+          {/* Size, radius, hover and focus come from `ComposerButton`, which both
+              of these render.
+
+              Renders nothing without a `voice` capability — the host decides
+              whether a microphone exists at all.
+
+              `composer-mic` carries the whole recording appearance — the tumbling
+              glyph, the ring, and the red that must outrank hover. All three live
+              in `styles/composer.css`: an `aria-pressed:` utility ties with the
+              button's own `hover:text-foreground` on specificity, so source order
+              decided the colour and the glyph went white under the pointer. */}
+          <ComposerVoice className="composer-mic" language={speechLanguage}>
+            {(recording) => (recording ? <StopGlyph /> : <Mic className="size-4" aria-hidden />)}
+          </ComposerVoice>
+          {/* A GLYPH is required. Without children this renders an empty pill — a
+              button with no affordance and no indication that a turn can be
+              stopped. */}
+          <ComposerSend>
+            {(streaming) =>
+              streaming ? <StopGlyph /> : <CornerDownLeft className="size-4" aria-hidden />
+            }
+          </ComposerSend>
+        </div>
+      </div>
+      </Composer>
+    </div>
+  );
+}
+
+/** Filled, so "stop" reads as a state rather than an outline among outlines. */
+function StopGlyph(props: LucideProps) {
+  return <Square className="size-3.5 fill-current" aria-hidden {...props} />;
+}