rift-ds 1.0.0

package/components/Composer/Composer.css

@@ -0,0 +1,427 @@
+/* ============================================
+   COMPOSER COMPONENT
+   The chat input shell: attachments, auto-growing textarea, send/stop
+   ============================================ */
+
+/* The focus treatment animates a registered custom property, exactly as
+   AiButton does: a conic gradient's angle cannot tween otherwise. Browsers
+   without @property render the ring at its initial angle, static — a
+   correct, quieter fallback. Registered under its own name so Composer
+   never depends on AiButton's stylesheet being loaded. */
+@property --ds-composer-glow-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.ds-composer {
+  /* Anchors the focus ring and glow pseudo-elements */
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  /* The send button's diameter — CircularButton's default size, which is
+     a raw value in CircularButton.css too (icon-button sizes are not on
+     a token scale). Everything concentric derives from it. */
+  --ds-composer-send-size: 40px;
+  /* The shell's concentric corner, derived rather than frozen: the send
+     button's EFFECTIVE radius (its --radius-pill capped at half its own
+     size — 999px never renders rounder than a circle), plus the action
+     bar's padding-200 ring, plus the border width (border-radius applies
+     to the border's outer edge). Shipped theme: min(999, 20) + 8 + 1 =
+     the historical 29px. A theme that squares the pill (radiusOverrides'
+     pill branch, the crisp presets) flows straight through, so the shell
+     always sits concentric with whatever button it wraps. Component-local
+     by design — one component's geometry, not a step on the global radius
+     scale (design.md's Composer section owns the contract). */
+  --ds-composer-radius: calc(
+    min(var(--radius-pill), var(--ds-composer-send-size) / 2) +
+      var(--padding-200) + var(--border-025)
+  );
+  background-color: var(--color-input-bg-primary);
+  border: var(--border-025) solid var(--color-input-border-primary);
+  border-radius: var(--ds-composer-radius);
+  box-shadow: var(--shadow-floating);
+  transition: border-color var(--motion-duration-fast) var(--motion-ease-standard);
+  /* The whole shell is the input affordance — clicking anywhere that is
+     not a control focuses the textarea, and the cursor says so. The
+     action bar below opts back out. */
+  cursor: text;
+}
+
+/* The shell carries the input focus/hover treatment — the textarea inside
+   is borderless, so the whole surface reads as one control */
+.ds-composer:hover:not(:focus-within) {
+  border-color: var(--color-input-border-hover);
+}
+
+.ds-composer:focus-within {
+  border-color: var(--color-input-border-selected);
+}
+
+/* ============================================
+   AI GLOW — opt-in via the `aiGlow` prop
+   While focused, the plain selected border stands down and the AI gradient
+   ring takes its place — the same "a model answers here" signal AiButton
+   carries, for composers whose messages are answered by a model.
+   ============================================ */
+
+.ds-composer--ai-glow:focus-within {
+  border-color: transparent;
+}
+
+/* The gradient ring: AiButton's treatment on the composer shell — a conic
+   gradient painted across the whole box, masked to the border band (two
+   fills, exclude-composited, inset by the border width). The gradient
+   repeats back to its start colour so the seam at 360° is invisible while
+   it turns. Negative inset lays the pseudo over the shell's own border
+   box, so the ring replaces the border exactly. */
+.ds-composer--ai-glow::before {
+  content: '';
+  position: absolute;
+  inset: calc(-1 * var(--border-025));
+  border-radius: inherit;
+  /* One step up from the shell's --border-025 border: the outer edge stays on
+     the border box and the extra pixel grows inward, so the thicker band
+     reads clearly on low-density screens without changing the geometry. */
+  padding: var(--border-050);
+  background: conic-gradient(
+    from var(--ds-composer-glow-angle),
+    var(--color-ai-gradient-start),
+    var(--color-ai-gradient-mid),
+    var(--color-ai-gradient-end),
+    var(--color-ai-gradient-mid),
+    var(--color-ai-gradient-start)
+  );
+  /* Standard properties only — the build pipeline prefixes per its browser
+     targets, and hand-written -webkit- duplicates confuse its merging. */
+  /* ds-allow(color): mask luminance keying — the #fff paints alpha coverage
+     for mask-composite, not a theme colour */
+  mask:
+    linear-gradient(#fff 0 0) content-box,
+    linear-gradient(#fff 0 0);
+  mask-composite: exclude;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
+  /* ds-allow(motion): ambient signature rotation, matched to AiButton's —
+     deliberately far slower than the interaction-scale motion tokens; the
+     21s loop is AiButton's three-uneven-turns cadence */
+  animation: ds-composer-glow-turn 21s var(--motion-ease-emphasized) infinite paused;
+}
+
+/* The glow: the same gradient, blurred behind the opaque shell at low
+   opacity, so it reads as a halo around the border. A colour effect, not
+   an elevation shadow — depth stays token-owned. */
+.ds-composer--ai-glow::after {
+  content: '';
+  position: absolute;
+  inset: calc(-1 * var(--border-025));
+  border-radius: inherit;
+  background: conic-gradient(
+    from var(--ds-composer-glow-angle),
+    var(--color-ai-gradient-start),
+    var(--color-ai-gradient-mid),
+    var(--color-ai-gradient-end),
+    var(--color-ai-gradient-mid),
+    var(--color-ai-gradient-start)
+  );
+  /* The glow's spread; a length with no token family, matched to AiButton. */
+  --ds-composer-glow: 14px;
+  filter: blur(var(--ds-composer-glow));
+  opacity: 0;
+  /* Resting, the glow waits collapsed at the send-button corner (fractions
+     chosen by eye, matching AiButton's entry) — waking is a bloom out of
+     that corner, not a flat fade. This rest-state transition is the way
+     back: losing focus collapses the halo quickly on the base pace. */
+  transform-origin: 95% 85%;
+  transform: scale(0.35);
+  z-index: -1;
+  pointer-events: none;
+  transition:
+    opacity var(--motion-duration-base) var(--motion-ease-standard),
+    transform var(--motion-duration-base) var(--motion-ease-standard);
+  /* ds-allow(motion): same ambient rotation as the ring, kept in phase */
+  animation: ds-composer-glow-turn 21s var(--motion-ease-emphasized) infinite paused;
+}
+
+/* Waking: the entry. The glow blooms out of the send-button corner over
+   the entrance pace and the ring fades up a --motion-duration-fast beat
+   behind it — the transition here (the destination state's) governs the
+   way in; the resting rules above govern the quick way back. */
+.ds-composer--ai-glow:focus-within::before {
+  opacity: 1;
+  transition: opacity var(--motion-duration-slower) var(--motion-ease-entrance) var(--motion-duration-fast);
+  animation-play-state: running;
+}
+
+.ds-composer--ai-glow:focus-within::after {
+  opacity: 0.3;
+  transform: none;
+  transition:
+    opacity var(--motion-duration-slower) var(--motion-ease-entrance),
+    transform var(--motion-duration-slower) var(--motion-ease-entrance);
+  animation-play-state: running;
+}
+
+/* AiButton's cadence, restated on the Composer-scoped angle: three uneven
+   turns eased per segment, ending on a whole turn so the wrap is seamless
+   and the average pace stays one turn per 7s. */
+@keyframes ds-composer-glow-turn {
+  0% {
+    --ds-composer-glow-angle: 0deg;
+  }
+  14% {
+    --ds-composer-glow-angle: 168deg;
+  }
+  31% {
+    --ds-composer-glow-angle: 306deg;
+  }
+  46% {
+    --ds-composer-glow-angle: 570deg;
+  }
+  62% {
+    --ds-composer-glow-angle: 690deg;
+  }
+  79% {
+    --ds-composer-glow-angle: 936deg;
+  }
+  100% {
+    --ds-composer-glow-angle: 1080deg;
+  }
+}
+
+/* Working: while a response streams, the ring stays lit and keeps turning
+   whether or not the field holds focus — the visible half of the `streaming`
+   contract for glowing composers. The pairing is defined in design.md's
+   Composer section; streaming without aiGlow changes nothing. */
+.ds-composer--ai-glow.ds-composer--streaming {
+  border-color: transparent;
+}
+
+.ds-composer--ai-glow.ds-composer--streaming::before {
+  opacity: 1;
+  transition: opacity var(--motion-duration-slower) var(--motion-ease-entrance) var(--motion-duration-fast);
+  animation-play-state: running;
+}
+
+.ds-composer--ai-glow.ds-composer--streaming::after {
+  opacity: 0.3;
+  transform: none;
+  transition:
+    opacity var(--motion-duration-slower) var(--motion-ease-entrance),
+    transform var(--motion-duration-slower) var(--motion-ease-entrance);
+  animation-play-state: running;
+}
+
+/* Reduced motion: the ring and glow stay, the turning stops. */
+@media (prefers-reduced-motion: reduce) {
+  .ds-composer--ai-glow::before,
+  .ds-composer--ai-glow::after {
+    animation: none;
+  }
+}
+
+/* ============================================
+   CONTEXT CHIP
+   A full-width, non-interactive note at the very top of the shell — what
+   the model is currently looking at. Composer owns the chrome; the caller
+   passes the text.
+   ============================================ */
+
+.ds-composer__context {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+  /* The action bar's tight --padding-200 ring, open toward the text below */
+  margin: var(--padding-200) var(--padding-200) 0;
+  /* ModelPicker's trigger geometry — the send button's height with the same
+     0/padding-md inset — so the chip and the bar's pills read as one family */
+  height: var(--ds-composer-send-size);
+  padding: 0 var(--padding-400);
+  background-color: var(--color-chat-context-bg);
+  /* A full pill, matching the suggestion chips around the composer */
+  border-radius: var(--radius-pill);
+  font-family: var(--font-paragraph-sm-family);
+  font-size: var(--font-paragraph-sm-size);
+  font-weight: var(--font-paragraph-sm-weight);
+  line-height: var(--font-paragraph-sm-line-height);
+  letter-spacing: var(--font-paragraph-sm-letter-spacing);
+  /* Tertiary, like DocumentChip's metadata line — the note is ambient
+     context, quieter than anything a person typed. The icon inherits it:
+     one tone for the whole note. */
+  color: var(--color-text-tertiary);
+  /* Not editable, not a control — but a click still falls through the shell
+     handler and focuses the textarea */
+  cursor: default;
+}
+
+.ds-composer__context-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.ds-composer__context-icon .material-symbols-rounded {
+  --icon-size: var(--icon-size-500);
+}
+
+/* The text owns the truncation: one line, ellipsized only when the note
+   actually outgrows the shell — an ellipsis is a truncation mark, not
+   punctuation. The icon beside it never shrinks. */
+.ds-composer__context-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ============================================
+   ATTACHMENTS ROW
+   ============================================ */
+
+.ds-composer__attachments {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: var(--gap-100);
+  /* Top ring only — the text zone below keeps its own full padding-md,
+     so chips sit a clear padding-md above the first text line */
+  padding: var(--padding-400) var(--padding-500) 0;
+}
+
+/* ============================================
+   CONTENT ZONE
+   The text zone breathes more than the action bar: generous top and
+   inline padding, tighter toward the bar below it.
+   ============================================ */
+
+.ds-composer__content {
+  display: flex;
+  /* The textarea keeps its own natural height rather than stretching to the
+     zone's — the measurement below reads it, so a stretched textarea would
+     feed its own height back in and the zone could never shrink. */
+  align-items: flex-start;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--padding-400) var(--padding-500) var(--padding-200);
+  /* Growing and shrinking is animated, which needs two pixel heights to run
+     between — `auto` has nothing to interpolate. So the zone states its own
+     height: the measured textarea (published as --ds-composer-text-height on
+     every resize) plus the block padding it owns. The fallback is a single
+     row, which is what the shell renders before the first measurement. */
+  height: calc(
+    var(--ds-composer-text-height, var(--font-paragraph-line-height)) + var(--padding-400) +
+      var(--padding-200)
+  );
+  /* Mid-transition the textarea is already at its new height, so the extra
+     line is clipped on the way in and released on the way out. */
+  overflow: hidden;
+  transition: height var(--motion-duration-instant) var(--motion-ease-emphasized);
+}
+
+.ds-composer__textarea {
+  width: 100%;
+  padding: 0;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  resize: none;
+  font-family: var(--font-paragraph-family);
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  letter-spacing: var(--font-paragraph-letter-spacing);
+  color: var(--color-input-text-primary);
+  /* Growth cap: the shell owns the block padding, so the cap is rows × line-height.
+     --ds-composer-max-rows is set inline from the maxRows prop. */
+  max-height: calc(var(--ds-composer-max-rows, 8) * var(--font-paragraph-line-height));
+  overflow-y: auto;
+}
+
+.ds-composer__textarea::placeholder {
+  color: var(--color-input-text-placeholder);
+}
+
+/* Overflow scrollbar — thin, trackless, and quiet instead of the bulky
+   platform default. scrollbar-* covers Firefox and modern Chromium;
+   the -webkit rules cover Safari. */
+.ds-composer__textarea {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-bg-container-secondary) transparent;
+}
+
+.ds-composer__textarea::-webkit-scrollbar {
+  width: 6px;
+}
+
+.ds-composer__textarea::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.ds-composer__textarea::-webkit-scrollbar-thumb {
+  background-color: var(--color-bg-container-secondary);
+  border-radius: var(--radius-pill);
+}
+
+/* Native auto-grow where supported; the JS measurement path stands down
+   (it checks the same capability) */
+@supports (field-sizing: content) {
+  .ds-composer__textarea {
+    field-sizing: content;
+  }
+}
+
+/* ============================================
+   FOOTER ROW
+   ============================================ */
+
+.ds-composer__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+  /* The tight uniform ring the concentric corner is computed from */
+  padding: var(--padding-200);
+  /* Empty bar space still focuses the textarea on click, but the bar is
+     control territory, so it keeps the default cursor. */
+  cursor: default;
+}
+
+.ds-composer__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+}
+
+.ds-composer__trailing {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+  margin-left: auto;
+}
+
+/* ============================================
+   DISABLED
+   ============================================ */
+
+.ds-composer--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  background-color: var(--color-input-bg-disabled);
+}
+
+.ds-composer--disabled:hover:not(:focus-within),
+.ds-composer--disabled:focus-within {
+  border-color: var(--color-input-border-disabled);
+}
+
+.ds-composer--disabled:focus-within::before,
+.ds-composer--disabled:focus-within::after {
+  opacity: 0;
+  animation-play-state: paused;
+}
+
+.ds-composer--disabled .ds-composer__textarea {
+  cursor: not-allowed;
+  color: var(--color-input-text-disabled);
+}

package/components/Composer/Composer.d.ts

@@ -0,0 +1,97 @@
+import { default as React } from 'react';
+/** Props owned by Composer itself — everything else falls through to the <textarea>. */
+type ComposerOwnProps = {
+    /** Current value for controlled use. Pair with `onValueChange`. */
+    value?: string;
+    /** Initial value for uncontrolled use. */
+    defaultValue?: string;
+    /**
+     * Convenience callback receiving the value directly.
+     * Fires alongside `onChange`, which keeps the standard React event signature
+     * so form libraries work unmodified.
+     */
+    onValueChange?: (value: string) => void;
+    /**
+     * Fires with the current value on Enter (without Shift) and on the send
+     * button — never while `streaming`, and never when the trimmed value is
+     * empty. Composer does not clear the value: the consumer owns it and clears
+     * it after a successful submit. Shadows the native `onSubmit` attribute,
+     * which never fires on a textarea anyway.
+     */
+    onSubmit?: (value: string) => void;
+    /**
+     * A response is streaming: the send button becomes a stop button, submit
+     * is blocked, and Enter is inert. On a glowing composer (`aiGlow`) the
+     * gradient ring also stays lit and keeps turning while this is true.
+     */
+    streaming?: boolean;
+    /** Fires when the stop button is pressed while `streaming`. */
+    onStop?: () => void;
+    /** Growth cap in text rows before the textarea scrolls internally. */
+    maxRows?: number;
+    /**
+     * While focused, the shell wears AiButton's slowly rotating gradient ring
+     * and glow in place of the plain selected border — the system's "a model
+     * answers here" signal, for composers whose messages are answered by one.
+     * While `streaming`, the ring stays lit and turning whether or not the
+     * field holds focus. Off by default.
+     */
+    aiGlow?: boolean;
+    /**
+     * Contextual note rendered as a full-width, non-interactive chip at the
+     * very top of the shell, above any attachments — the "what the model is
+     * looking at" line a chat host pins over the message ("Looking at
+     * “Page name”"). One line: a note too long for the shell truncates with
+     * an ellipsis. Composer owns the chip's chrome; the caller passes the
+     * text.
+     */
+    context?: React.ReactNode;
+    /**
+     * Icon at the left of the context chip — Material Symbol name (string,
+     * e.g. `visibility`, `article`) or custom element (ReactNode). Decorative
+     * and hidden from assistive technology — the chip's text carries the
+     * meaning. None by default, matching the ai set's icon-free-unless-asked
+     * convention.
+     */
+    contextIcon?: string | React.ReactNode;
+    /**
+     * Attachment row rendered above the textarea (DocumentChips). Fully
+     * controlled by the caller — Composer never owns the list.
+     */
+    attachments?: React.ReactNode;
+    /** Leading actions on the left of the action bar (attach button, model picker). */
+    actions?: React.ReactNode;
+    /**
+     * Trailing actions on the right of the action bar, just before the send
+     * button (dictation, voice mode).
+     */
+    trailingActions?: React.ReactNode;
+    /** Accessible label for the send button. */
+    sendLabel?: string;
+    /** Accessible label for the stop button. */
+    stopLabel?: string;
+    /** Additional CSS classes — applied to the shell, not the <textarea>. */
+    className?: string;
+};
+export interface ComposerProps extends ComposerOwnProps, Omit<React.ComponentPropsWithoutRef<'textarea'>, keyof ComposerOwnProps> {
+}
+/**
+ * Composer is the chat input shell: an optional context note ("Looking at
+ * “Page name”"), an attachments row, an auto-growing textarea, a leading
+ * actions slot, and a trailing send button — the one sanctioned
+ * primary-action teal in the chat set, because sending a message is a
+ * genuine primary CTA. While `streaming`, send becomes stop and Enter
+ * is inert.
+ *
+ * The textarea grows with its content up to `maxRows`, then scrolls
+ * internally. Where the browser supports `field-sizing: content` the sizing
+ * is fully native; elsewhere a measurement effect keeps the height in step.
+ * Either way the text zone glides between the two heights rather than
+ * snapping — 75ms, short enough to soften the step without reading as an
+ * animation. The action bar's buttons never move relative to the bar.
+ *
+ * Forwards a ref to the underlying `<textarea>` and spreads unrecognised
+ * props onto it; `className` lands on the shell.
+ */
+export declare const Composer: React.ForwardRefExoticComponent<ComposerProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/components/Composer/Composer.js

@@ -0,0 +1,146 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useRef, useState, useLayoutEffect } from "react";
+import { CircularButton } from "../CircularButton/CircularButton.js";
+import "../../fonts/material-symbols.css";
+import "./Composer.css";
+const Composer = React.forwardRef(
+  ({
+    value,
+    defaultValue,
+    onValueChange,
+    onSubmit,
+    streaming = false,
+    onStop,
+    maxRows = 8,
+    aiGlow = false,
+    context,
+    contextIcon,
+    attachments,
+    actions,
+    trailingActions,
+    sendLabel = "Send message",
+    stopLabel = "Stop generating",
+    className = "",
+    onChange,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-composer";
+    const textareaRef = useRef(null);
+    const contentRef = useRef(null);
+    const isControlled = value !== void 0;
+    const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+    const currentValue = isControlled ? value : uncontrolledValue;
+    const disabled = Boolean(rest.disabled);
+    const canSend = !disabled && currentValue.trim() !== "";
+    const setTextareaRef = (node) => {
+      textareaRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    };
+    useLayoutEffect(() => {
+      const node = textareaRef.current;
+      if (!node) return;
+      if (typeof CSS !== "undefined" && CSS.supports("field-sizing", "content")) return;
+      node.style.height = "auto";
+      node.style.height = `${node.scrollHeight}px`;
+    }, [currentValue]);
+    useLayoutEffect(() => {
+      const node = textareaRef.current;
+      const content = contentRef.current;
+      if (!node || !content) return;
+      const observer = new ResizeObserver(() => {
+        content.style.setProperty("--ds-composer-text-height", `${node.offsetHeight}px`);
+      });
+      observer.observe(node);
+      return () => observer.disconnect();
+    }, []);
+    const submit = () => {
+      if (streaming || !canSend) return;
+      onSubmit?.(currentValue);
+    };
+    const handleChange = (e) => {
+      if (!isControlled) setUncontrolledValue(e.target.value);
+      onChange?.(e);
+      onValueChange?.(e.target.value);
+    };
+    const handleKeyDown = (e) => {
+      onKeyDown?.(e);
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault();
+        submit();
+      }
+    };
+    const handleShellClick = (e) => {
+      const target = e.target;
+      if (target.closest('button, a, textarea, input, select, [role="button"]')) return;
+      textareaRef.current?.focus();
+    };
+    const classes = [
+      baseClass,
+      aiGlow ? `${baseClass}--ai-glow` : "",
+      streaming ? `${baseClass}--streaming` : "",
+      disabled ? `${baseClass}--disabled` : "",
+      className
+    ].filter(Boolean).join(" ");
+    const ariaLabel = rest["aria-label"] ?? (rest["aria-labelledby"] !== void 0 ? void 0 : "Message");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classes,
+        style: { "--ds-composer-max-rows": maxRows },
+        onClick: handleShellClick,
+        children: [
+          context && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__context`, children: [
+            contextIcon && /* @__PURE__ */ jsx("span", { className: `${baseClass}__context-icon`, "aria-hidden": "true", children: typeof contextIcon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: contextIcon }) : contextIcon }),
+            /* @__PURE__ */ jsx("span", { className: `${baseClass}__context-text`, children: context })
+          ] }),
+          attachments && /* @__PURE__ */ jsx("div", { className: `${baseClass}__attachments`, children: attachments }),
+          /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, ref: contentRef, children: /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ...rest,
+              ref: setTextareaRef,
+              className: `${baseClass}__textarea`,
+              rows: 1,
+              value: currentValue,
+              "aria-label": ariaLabel,
+              onChange: handleChange,
+              onKeyDown: handleKeyDown
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__footer`, children: [
+            actions && /* @__PURE__ */ jsx("div", { className: `${baseClass}__actions`, children: actions }),
+            /* @__PURE__ */ jsxs("div", { className: `${baseClass}__trailing`, children: [
+              trailingActions,
+              streaming ? /* @__PURE__ */ jsx(
+                CircularButton,
+                {
+                  icon: "stop",
+                  variant: "primary",
+                  ariaLabel: stopLabel,
+                  disabled,
+                  onClick: onStop
+                }
+              ) : /* @__PURE__ */ jsx(
+                CircularButton,
+                {
+                  icon: "arrow_upward",
+                  variant: "primary",
+                  ariaLabel: sendLabel,
+                  disabled: !canSend,
+                  onClick: submit
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+Composer.displayName = "Composer";
+export {
+  Composer
+};