@chai-ui/react 0.7.1 → 0.9.0

package/src/Composer.tsx

@@ -1,5 +1,5 @@
-import { StopIcon } from "./icons.js";
-import { useEffect, useRef, useState, type ChangeEvent } from "react";
+import { AddIcon, ArrowForwardIcon, CloseSymbolIcon, StopIcon } from "./icons.js";
+import { useEffect, useId, useRef, useState, useSyncExternalStore, type ChangeEvent } from "react";
 import { createComponent } from "@lit/react";
 import * as React from "react";
 import { MdFab } from "@material/web/fab/fab.js";
@@ -7,13 +7,19 @@ import {
   composerAttachmentsFromFiles,
   composerAttachMenuItems,
   composerView,
+  createVoiceInput,
   enhanceRevealDurationMs,
+  formatVoiceElapsed,
+  VOICE_LEVEL_COUNT,
   MAX_ANIMATE_ENHANCE_LENGTH,
   regionColor,
   TEXT_USE_CASE,
   type ComposerAttachMenuAction,
+  type ComposerPromptField,
+  type VoiceInputConfig,
 } from "@chai-ui/core";
-import type { EditRegion, ModelOption, ParameterOption, MediaKind } from "@chai-ui/core";
+import { useLatest } from "./use-latest.js";
+import type { EditRegion, GenerationUseCase, ModelOption, ParameterOption, MediaKind, OutputKind } from "@chai-ui/core";
 import { SearchMenu } from "./primitives/SearchMenu.js";
 import type { ComposerAttachment, ComposerSubmitPayload, ComposerUseCase } from "@chai-ui/core";
 
@@ -22,6 +28,7 @@ export {
   TEXT_USE_CASE,
   type ComposerAttachMenuAction,
   type ComposerAttachment,
+  type ComposerPromptField,
   type ComposerSelection,
   type ComposerSubmitPayload,
   type ComposerUseCase,
@@ -61,7 +68,7 @@ export interface ComposerProps {
   useCases?: ComposerUseCase[];
   onUseCasesChange?: (next: ComposerUseCase[]) => void;
   /** Models per use-case kind, for `multiSelectUseCases`. A kind left out gets Chai's suggested models (see `models`). */
-  modelsByKind?: Partial<Record<MediaKind, ModelOption[]>>;
+  modelsByKind?: Partial<Record<OutputKind, ModelOption[]>>;
   /**
    * Builder opt-in, off by default: the end user can pick several models,
    * each producing its own result (ResultCard pages through them). Uses
@@ -118,11 +125,26 @@ export interface ComposerProps {
    * runs the rewrite is still an open question at the design-doc level,
    * not just an implementation gap — see the design open question 5
    * ("Enhance model"). Receives the current prompt text so the handler is
-   * self-contained — doesn't need its own closure over `value`.
+   * self-contained — doesn't need its own closure over `value`. With a
+   * world use case each field has its own button: `field` is "environment"
+   * or "character" (otherwise "prompt"), so the rewrite can fit the field,
+   * and the handler calls `onChange` or `onCharacterChange` to match.
+   * `mode` is the use case on screen, e.g. "text-to-text" with none picked:
+   * rewrite a text request as one, not as a media prompt.
    */
-  onEnhance?: (value: string) => void;
-  /** True while the builder's own `onEnhance` handler is running its LLM call — shows the button's active state. */
+  onEnhance?: (value: string, field: ComposerPromptField, mode?: GenerationUseCase) => void;
+  /** True while the builder's own `onEnhance` handler is running its LLM call — shows the active state on the button that was clicked. */
   enhancing?: boolean;
+  /**
+   * A world's character field (Create world), shown beside the environment
+   * while the use case is a world. `value` is the environment. Without
+   * `onCharacterChange`, only the environment shows.
+   */
+  character?: string;
+  onCharacterChange?: (value: string) => void;
+  /** A world's frame rate menu, from the selected models' `ModelOption.frameRates`. */
+  frameRate?: number | null;
+  onFrameRateChange?: (value: number) => void;
   /** Fires with everything Composer tracks — see `ComposerSubmitPayload`. Also what retry calls, with the same payload, when `submitError` is set. */
   onSubmit: (payload: ComposerSubmitPayload) => void;
   /**
@@ -164,6 +186,14 @@ export interface ComposerProps {
    */
   regions?: EditRegion[];
   onRegionsChange?: (next: EditRegion[]) => void;
+  /**
+   * Turns on the mic, left of submit: the person speaks, and the transcript
+   * is added to the prompt (never submitted). Name a Fal speech-to-text
+   * model, e.g. `{ model: "fal-ai/wizper" }`, and the clip goes through your
+   * `/api/chai/fal` route; or pass `{ transcribe }` for any other provider.
+   * Off by default, and there's no default model.
+   */
+  voiceInput?: VoiceInputConfig;
   disabled?: boolean;
 }
 
@@ -206,6 +236,10 @@ export function Composer({
   onAspectRatioChange,
   onEnhance,
   enhancing = false,
+  character = "",
+  onCharacterChange,
+  frameRate = null,
+  onFrameRateChange,
   onSubmit,
   submitError = null,
   submitDisabled,
@@ -215,6 +249,7 @@ export function Composer({
   attachMenuActions,
   regions = [],
   onRegionsChange,
+  voiceInput,
   disabled = false,
 }: ComposerProps) {
   const view = composerView({
@@ -235,6 +270,8 @@ export function Composer({
     autoSelectModel,
     aspectRatios,
     aspectRatio,
+    character,
+    frameRate,
     submitError,
     submitDisabled,
     submitting,
@@ -271,79 +308,21 @@ export function Composer({
     wasAutoSelect.current = autoSelectModel;
   }, [autoSelectModel, multiModel, onModelChange, onModelIdsChange]);
 
-  // Auto-grows with wrapped content instead of a fixed row count — a
-  // static `rows` either hides wrapped lines behind a scrollbar (too
-  // short) or wastes space while empty (too tall). Starts at one line
-  // (matching the mock's compact minimal state) and grows only as typed
-  // text actually wraps.
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-  useEffect(() => {
-    const el = textareaRef.current;
-    if (!el) return;
-    el.style.height = "auto";
-    el.style.height = `${el.scrollHeight}px`;
-  }, [value]);
-
-  // The optimize/undo cycle (§ its own button below). `value` is already
-  // the final rewritten text the instant `enhancing` drops back to false —
-  // the reveal below is a purely cosmetic overlay on top of it, not a
-  // delay, so nothing here ever gates what the real `<textarea>` holds.
-  const [originalValue, setOriginalValue] = useState<string | null>(null);
-  const [enhancedValue, setEnhancedValue] = useState<string | null>(null);
-  const [prevEnhancing, setPrevEnhancing] = useState(enhancing);
-  const [animatingText, setAnimatingText] = useState<string | null>(null);
-  const [revealedLength, setRevealedLength] = useState(0);
-
-  // React to `enhancing` dropping back to false while rendering, not in an
-  // effect (the rules of React): that's the moment the rewrite has landed.
-  if (prevEnhancing !== enhancing) {
-    setPrevEnhancing(enhancing);
-    if (prevEnhancing && !enhancing && originalValue != null && value !== originalValue) {
-      setEnhancedValue(value);
-      // Bails on length (see the constant's own comment) or on a real
-      // `prefers-reduced-motion` request — the reveal is itself motion, not
-      // just the shimmer the CSS `@media` query above separately turns off.
-      const reducedMotion =
-        typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
-      if (value.length <= MAX_ANIMATE_ENHANCE_LENGTH && !reducedMotion) {
-        setRevealedLength(0);
-        setAnimatingText(value);
-      }
-    }
-  }
-
-  useEffect(() => {
-    if (animatingText == null) return;
-    const total = animatingText.length;
-    const duration = enhanceRevealDurationMs(total);
-    const start = performance.now();
-    let raf: number;
-    const tick = (now: number) => {
-      const elapsed = now - start;
-      const next = Math.min(total, Math.floor((elapsed / duration) * total));
-      setRevealedLength((prev) => (prev === next ? prev : next));
-      if (next < total) raf = requestAnimationFrame(tick);
-      else setAnimatingText(null);
-    };
-    raf = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(raf);
-  }, [animatingText]);
-
-  const animating = animatingText != null;
-  const isEnhanced = !animating && enhancedValue != null && value === enhancedValue;
-  const enhanceBusy = enhancing || animating;
+  // Which field's Enhance is running: `enhancing` is one flag for the bar.
+  const [enhancingField, setEnhancingField] = useState<ComposerPromptField>("prompt");
+  const enhanceField = (field: ComposerPromptField) =>
+    onEnhance &&
+    ((current: string) => {
+      setEnhancingField(field);
+      onEnhance(current, field, view.enhanceMode);
+    });
 
-  function handleOptimizeClick() {
-    if (isEnhanced) {
-      const original = originalValue;
-      setEnhancedValue(null);
-      setOriginalValue(null);
-      if (original != null) onChange(original);
-      return;
-    }
-    setOriginalValue(value); // snapshot now — before the rewrite lands, for undo
-    onEnhance?.(value);
-  }
+  // Voice input: a transcript is added to the prompt, never submitted.
+  const latestPrompt = useLatest({ value, onChange });
+  const voice = useVoice(voiceInput, (text) => {
+    const { value: current, onChange: change } = latestPrompt.current;
+    change(current.trim() ? `${current.trimEnd()} ${text}` : text);
+  });
 
   async function handleFilesSelected(fileList: FileList | null) {
     if (!fileList || fileList.length === 0 || !onAttachmentsChange) return;
@@ -391,49 +370,45 @@ export function Composer({
         </ul>
       )}
 
-      <div className="chai-composer__field">
-        <textarea
-          ref={textareaRef}
-          className={`chai-composer__input chai-composer__type${animating ? " chai-composer__input--revealing" : ""}`}
+      {voiceInput && voice.state.status === "recording" ? (
+        <VoiceWaveform levels={voice.state.levels} elapsedMs={voice.state.elapsedMs} />
+      ) : view.world ? (
+        <div className="chai-composer__world-fields">
+          <PromptField
+            value={value}
+            onChange={onChange}
+            placeholder={view.placeholder}
+            heading="Environment"
+            note="(required)"
+            hint={view.environmentHint}
+            onEnhance={enhanceField("environment")}
+            enhancing={enhancing && enhancingField === "environment"}
+            disabled={disabled}
+          />
+          {onCharacterChange && (
+            <PromptField
+              value={character}
+              onChange={onCharacterChange}
+              placeholder={view.characterPlaceholder}
+              heading="Character"
+              note="(optional)"
+              onEnhance={enhanceField("character")}
+              enhancing={enhancing && enhancingField === "character"}
+              disabled={disabled}
+            />
+          )}
+        </div>
+      ) : (
+        <PromptField
           value={value}
-          onChange={(e) => onChange(e.target.value)}
+          onChange={onChange}
           placeholder={view.placeholder}
-          aria-label={promptLabel ?? view.placeholder}
-          rows={1}
-          disabled={disabled || animating}
+          label={promptLabel}
+          onEnhance={enhanceField("prompt")}
+          enhancing={enhancing}
+          disabled={disabled}
         />
-        {/* The optimize/undo reveal overlay — decorative only. The real
-            textarea above already holds the final text throughout (just
-            visually suppressed via `--revealing`); this div paints the
-            same text back in progressively with a gradient, then unmounts.
-            `aria-hidden` so a screen reader isn't told the text twice —
-            the textarea's own (already-final) value is what it reads. */}
-        {animating && (
-          <div className="chai-composer__reveal chai-composer__type" aria-hidden="true">
-            <span className="chai-composer__reveal-text">{animatingText!.slice(0, revealedLength)}</span>
-          </div>
-        )}
-        {/* "Optimize prompt" / "Revert to original prompt" — see
-            `onEnhance`'s own doc comment on `ComposerProps` for what the
-            rewrite itself actually does and why Composer doesn't run it.
-            Once a rewrite lands, this becomes an undo affordance instead —
-            an already-optimized prompt can't be re-optimized — and reverts
-            to a plain optimize button again the moment `value` no longer
-            matches that rewrite exactly, i.e. the person has since edited
-            it by hand. */}
-        {onEnhance && (
-          <button
-            type="button"
-            className={`chai-composer__optimize${enhanceBusy ? " chai-composer__optimize--active" : ""}`}
-            onClick={handleOptimizeClick}
-            disabled={disabled || (isEnhanced ? false : !value.trim() || enhanceBusy)}
-            aria-label={isEnhanced ? "Revert to original prompt" : "Optimize prompt"}
-            title={isEnhanced ? "Revert to original prompt" : "Optimize prompt"}
-          >
-            {isEnhanced ? <UndoIcon /> : <OptimizeIcon />}
-          </button>
-        )}
-      </div>
+      )}
 
       {submitError && (
         <p className="chai-composer__error" role="alert">
@@ -442,6 +417,13 @@ export function Composer({
         </p>
       )}
 
+      {voiceInput && voice.state.status === "error" && (
+        <p className="chai-composer__error" role="alert">
+          <ErrorIcon />
+          {voice.state.error}
+        </p>
+      )}
+
       <div className="chai-composer__controls">
         <div className="chai-composer__controls-start">
           {menuItems.length > 0 && (
@@ -511,6 +493,19 @@ export function Composer({
               disabled={disabled}
             />
           )}
+
+          {view.frameRateOptions.length > 0 && onFrameRateChange && (
+            <SearchMenu
+              options={view.frameRateOptions.map((r) => ({ id: String(r), label: `${r}fps` }))}
+              value={view.offeredFrameRate == null ? null : String(view.offeredFrameRate)}
+              triggerLabel={view.offeredFrameRate == null ? "Frame rate" : `${view.offeredFrameRate}fps`}
+              menuLabel="Frame rate"
+              onSelect={(opt) => onFrameRateChange(Number(opt.id))}
+              searchable={false}
+              triggerVariant="text"
+              disabled={disabled}
+            />
+          )}
         </div>
 
         {/* MD3's `<md-fab>` has no `disabled` property of its own (FABs are
@@ -549,6 +544,11 @@ export function Composer({
             (same filled look — reads as "in progress," not "empty/error"),
             clickable regardless of `isSubmitDisabled` since a request
             already in flight isn't gated on the field having content. */}
+        <div className="chai-composer__controls-end">
+        {voiceInput && <VoiceButton voice={voice} disabled={disabled} />}
+        {/* No submit while a recording is being made or transcribed: the
+            person sends the transcript once it's in the prompt to check. */}
+        {!(voiceInput && (voice.state.status === "recording" || voice.state.status === "transcribing")) && (
         <MdFabElement
           className="chai-composer__submit"
           size="small"
@@ -575,7 +575,267 @@ export function Composer({
             {showStop ? <StopIcon /> : submitError ? <RefreshIcon /> : <ArrowForwardIcon />}
           </span>
         </MdFabElement>
+        )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/** The core recorder, created once, with the latest config and transcript handler. */
+function useVoice(config: VoiceInputConfig | undefined, onTranscript: (text: string) => void) {
+  const latest = useLatest({ config, onTranscript });
+  const [voice] = useState(() =>
+    createVoiceInput(
+      () => latest.current.config ?? { transcribe: async () => "" },
+      (text) => latest.current.onTranscript(text)
+    )
+  );
+  const state = useSyncExternalStore(voice.subscribe, voice.getState, voice.getState);
+  useEffect(() => () => voice.dispose(), [voice]);
+  return { ...voice, state };
+}
+
+/**
+ * What replaces the prompt while recording: the mic's recent loudness as
+ * bars, newest on the right, and how long it's run. Decorative: the mic
+ * button's label and the status line say it's recording.
+ */
+function VoiceWaveform({ levels, elapsedMs }: { levels: number[]; elapsedMs: number }) {
+  const bars = [...Array<number>(Math.max(0, VOICE_LEVEL_COUNT - levels.length)).fill(0), ...levels];
+  return (
+    <div className="chai-composer__waveform" aria-hidden="true">
+      <div className="chai-composer__waveform-bars">
+        {bars.map((level, i) => (
+          <span key={i} className="chai-composer__waveform-bar" style={{ height: `${Math.max(20, level * 100)}%` }} />
+        ))}
+      </div>
+      <span className="chai-composer__waveform-time">{formatVoiceElapsed(elapsedMs)}</span>
+    </div>
+  );
+}
+
+/**
+ * The mic: click to record; while recording it's a stop button that ends
+ * the recording and transcribes it; while transcribing, a spinner, and a
+ * click cancels.
+ */
+function VoiceButton({ voice, disabled }: { voice: ReturnType<typeof useVoice>; disabled: boolean }) {
+  const { status } = voice.state;
+  const label =
+    status === "recording" ? "Stop recording and transcribe" : status === "transcribing" ? "Cancel transcription" : "Start voice input";
+  function handleClick() {
+    if (status === "recording") voice.stop();
+    else if (status === "transcribing") voice.cancel();
+    else {
+      voice.dismiss();
+      void voice.start();
+    }
+  }
+  return (
+    <div className="chai-composer__voice" data-status={status}>
+      <button
+        type="button"
+        className="chai-composer__voice-button"
+        onClick={handleClick}
+        onKeyDown={(e) => {
+          if (e.key === "Escape" && status === "recording") voice.cancel();
+        }}
+        disabled={disabled}
+        aria-label={label}
+        title={label}
+      >
+        {status === "transcribing" ? (
+          <span className="chai-composer__voice-spinner" aria-hidden="true" />
+        ) : status === "recording" ? (
+          <StopIcon />
+        ) : (
+          <MicIcon />
+        )}
+      </button>
+      {/* Announces each change of state once, not every tick of the timer. */}
+      <span className="chai-visually-hidden" role="status">
+        {status === "recording" ? "Recording" : status === "transcribing" ? "Transcribing" : ""}
+      </span>
+    </div>
+  );
+}
+
+/**
+ * One prompt textarea with its Enhance button: grows with wrapped text,
+ * reveals a rewrite as it lands, and offers undo until the text is edited
+ * by hand. A `heading` gives it a visible label above a filled box (a
+ * world's Environment and Character); without one it's the bar's plain
+ * prompt.
+ */
+function PromptField({
+  value,
+  onChange,
+  placeholder,
+  label,
+  heading,
+  note,
+  hint,
+  onEnhance,
+  enhancing,
+  disabled,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  /** Accessible name for the plain prompt. Defaults to `placeholder`. */
+  label?: string;
+  heading?: string;
+  note?: string;
+  /** Shown under a headed field, e.g. why submit can't go yet. */
+  hint?: string | null;
+  onEnhance?: (value: string) => void;
+  enhancing: boolean;
+  disabled: boolean;
+}) {
+  const id = useId();
+  const hintId = `${id}-hint`;
+
+  // Auto-grows with wrapped content instead of a fixed row count — a
+  // static `rows` either hides wrapped lines behind a scrollbar (too
+  // short) or wastes space while empty (too tall). Starts at one line
+  // (matching the mock's compact minimal state) and grows only as typed
+  // text actually wraps.
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+  useEffect(() => {
+    const el = textareaRef.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = `${el.scrollHeight}px`;
+  }, [value]);
+
+  // The optimize/undo cycle (§ its own button below). `value` is already
+  // the final rewritten text the instant `enhancing` drops back to false —
+  // the reveal below is a purely cosmetic overlay on top of it, not a
+  // delay, so nothing here ever gates what the real `<textarea>` holds.
+  const [originalValue, setOriginalValue] = useState<string | null>(null);
+  const [enhancedValue, setEnhancedValue] = useState<string | null>(null);
+  const [prevEnhancing, setPrevEnhancing] = useState(enhancing);
+  const [animatingText, setAnimatingText] = useState<string | null>(null);
+  const [revealedLength, setRevealedLength] = useState(0);
+
+  // React to `enhancing` dropping back to false while rendering, not in an
+  // effect (the rules of React): that's the moment the rewrite has landed.
+  if (prevEnhancing !== enhancing) {
+    setPrevEnhancing(enhancing);
+    if (prevEnhancing && !enhancing && originalValue != null && value !== originalValue) {
+      setEnhancedValue(value);
+      // Bails on length (see the constant's own comment) or on a real
+      // `prefers-reduced-motion` request — the reveal is itself motion, not
+      // just the shimmer the CSS `@media` query above separately turns off.
+      const reducedMotion =
+        typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+      if (value.length <= MAX_ANIMATE_ENHANCE_LENGTH && !reducedMotion) {
+        setRevealedLength(0);
+        setAnimatingText(value);
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (animatingText == null) return;
+    const total = animatingText.length;
+    const duration = enhanceRevealDurationMs(total);
+    const start = performance.now();
+    let raf: number;
+    const tick = (now: number) => {
+      const elapsed = now - start;
+      const next = Math.min(total, Math.floor((elapsed / duration) * total));
+      setRevealedLength((prev) => (prev === next ? prev : next));
+      if (next < total) raf = requestAnimationFrame(tick);
+      else setAnimatingText(null);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [animatingText]);
+
+  const animating = animatingText != null;
+  const isEnhanced = !animating && enhancedValue != null && value === enhancedValue;
+  const enhanceBusy = enhancing || animating;
+
+  function handleOptimizeClick() {
+    if (isEnhanced) {
+      const original = originalValue;
+      setEnhancedValue(null);
+      setOriginalValue(null);
+      if (original != null) onChange(original);
+      return;
+    }
+    setOriginalValue(value); // snapshot now — before the rewrite lands, for undo
+    onEnhance?.(value);
+  }
+
+  const optimizeLabel = isEnhanced ? "Revert to original" : "Optimize";
+  const optimizeName = `${optimizeLabel} ${heading ? heading.toLowerCase() : "prompt"}`;
+  /* "Optimize prompt" / "Revert to original prompt" — see `onEnhance`'s own
+     doc comment on `ComposerProps` for what the rewrite itself actually
+     does and why Composer doesn't run it. Once a rewrite lands, this
+     becomes an undo affordance instead — an already-optimized prompt can't
+     be re-optimized — and reverts to a plain optimize button again the
+     moment `value` no longer matches that rewrite exactly, i.e. the person
+     has since edited it by hand. */
+  const optimize = onEnhance && (
+    <button
+      type="button"
+      className={`chai-composer__optimize${enhanceBusy ? " chai-composer__optimize--active" : ""}`}
+      onClick={handleOptimizeClick}
+      disabled={disabled || (isEnhanced ? false : !value.trim() || enhanceBusy)}
+      aria-label={optimizeName}
+      title={optimizeName}
+    >
+      {isEnhanced ? <UndoIcon /> : <OptimizeIcon />}
+    </button>
+  );
+
+  const field = (
+    <div className={`chai-composer__field${heading ? " chai-composer__field--boxed" : ""}`}>
+      <textarea
+        ref={textareaRef}
+        id={id}
+        className={`chai-composer__input chai-composer__type${animating ? " chai-composer__input--revealing" : ""}`}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        aria-label={heading ? undefined : (label ?? placeholder)}
+        aria-describedby={hint ? hintId : undefined}
+        rows={1}
+        disabled={disabled || animating}
+      />
+      {/* The optimize/undo reveal overlay — decorative only. The real
+          textarea above already holds the final text throughout (just
+          visually suppressed via `--revealing`); this div paints the
+          same text back in progressively with a gradient, then unmounts.
+          `aria-hidden` so a screen reader isn't told the text twice —
+          the textarea's own (already-final) value is what it reads. */}
+      {animating && (
+        <div className="chai-composer__reveal chai-composer__type" aria-hidden="true">
+          <span className="chai-composer__reveal-text">{animatingText!.slice(0, revealedLength)}</span>
+        </div>
+      )}
+      {!heading && optimize}
+    </div>
+  );
+
+  if (!heading) return field;
+  return (
+    <div className="chai-composer__world-field">
+      <div className="chai-composer__world-field-head">
+        <label htmlFor={id} className="chai-composer__world-field-label">
+          <strong>{heading}</strong> {note}
+        </label>
+        {optimize}
       </div>
+      {field}
+      {hint && (
+        <p id={hintId} className="chai-composer__field-hint">
+          {hint}
+        </p>
+      )}
     </div>
   );
 }
@@ -584,6 +844,7 @@ const ATTACH_MENU_ICONS: Record<ComposerAttachMenuAction, React.ReactNode> = {
   "add-media": <AttachFileIcon />,
   "create-image": <ImageIcon />,
   "create-video": <VideocamIcon />,
+  "create-world": <GlobeIcon />,
   "edit-media": <ContentCutIcon />,
 };
 
@@ -645,7 +906,7 @@ function ComposerAttachMenu({
         aria-haspopup="menu"
         aria-label={open ? "Close attach menu" : "Add media"}
       >
-        {open ? <CloseIcon /> : <PlusIcon />}
+        {open ? <CloseSymbolIcon /> : <AddIcon />}
       </button>
 
       {open && (
@@ -693,7 +954,7 @@ function ComposerThumbnail({ attachment, onRemove }: { attachment: ComposerAttac
       )}
       {onRemove && (
         <button type="button" className="chai-composer__thumb-remove" onClick={onRemove} aria-label="Remove attachment">
-          <CloseIcon />
+          <CloseSymbolIcon />
         </button>
       )}
     </div>
@@ -732,7 +993,7 @@ function UseCaseChip({
           disabled={disabled}
           aria-label={`Remove ${useCase.label}`}
         >
-          <CloseIcon />
+          <CloseSymbolIcon />
         </button>
       )}
     </span>
@@ -771,7 +1032,7 @@ function RegionChip({
           disabled={disabled}
           aria-label={`Remove ${name}`}
         >
-          <CloseIcon />
+          <CloseSymbolIcon />
         </button>
       )}
     </span>
@@ -813,32 +1074,6 @@ function kindIcon(kind: MediaKind) {
 // themed via the active/inactive CSS class instead of two hardcoded-color
 // SVGs. See its button's own doc comment above for what it actually does.
 
-function PlusIcon() {
-  return (
-    <svg viewBox="0 -960 960 960" aria-hidden="true">
-      <path d="M450-450H200v-60h250v-250h60v250h250v60H510v250h-60v-250Z" fill="currentColor" />
-    </svg>
-  );
-}
-
-// Material Symbols "close" — reproduced here since icons aren't shared
-// across files yet in this codebase.
-function CloseIcon() {
-  return (
-    <svg viewBox="0 -960 960 960" aria-hidden="true">
-      <path d="m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z" fill="currentColor" />
-    </svg>
-  );
-}
-
-function ArrowForwardIcon() {
-  return (
-    <svg viewBox="0 -960 960 960" aria-hidden="true">
-      <path d="M686-450H160v-60h526L438-758l42-42 320 320-320 320-42-42 248-248Z" fill="currentColor" />
-    </svg>
-  );
-}
-
 // Material Symbols "refresh" — the submit FAB's retry state.
 function RefreshIcon() {
   return (
@@ -902,6 +1137,30 @@ function AttachFileIcon() {
   );
 }
 
+// Material Symbols "mic" — voice input.
+function MicIcon() {
+  return (
+    <svg viewBox="0 -960 960 960" aria-hidden="true">
+      <path
+        d="M408-453.92q-29-30.91-29-75.08v-251q0-41.67 29.44-70.83Q437.88-880 479.94-880t71.56 29.17Q581-821.67 581-780v251q0 44.17-29 75.08Q523-423 480-423t-72-30.92ZM480-651Zm-30 531v-136q-106-11-178-89t-72-184h60q0 91 64.29 153t155.5 62q91.21 0 155.71-62Q700-438 700-529h60q0 106-72 184t-178 89v136h-60Zm59.5-376.5Q521-510 521-529v-251q0-17-11.79-28.5T480-820q-17.42 0-29.21 11.5T439-780v251q0 19 11.5 32.5T480-483q18 0 29.5-13.5Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+// Material Symbols "globe" — the attach menu's Create world.
+function GlobeIcon() {
+  return (
+    <svg viewBox="0 -960 960 960" aria-hidden="true">
+      <path
+        d="M480.27-80q-82.74 0-155.5-31.5Q252-143 197.5-197.5t-86-127.34Q80-397.68 80-480.5t31.5-155.66Q143-709 197.5-763t127.34-85.5Q397.68-880 480.5-880t155.66 31.5Q709-817 763-763t85.5 127Q880-563 880-480.27q0 82.74-31.5 155.5Q817-252 763-197.68q-54 54.31-127 86Q563-80 480.27-80Zm-.27-60q142.38 0 241.19-99.5T820-480v-13q-6 26-27.41 43.5Q771.19-432 742-432h-80q-33 0-56.5-23.5T582-512v-40H422v-80q0-33 23.5-56.5T502-712h40v-22q0-16 13.5-40t30.5-29q-25-8-51.36-12.5Q508.29-820 480-820q-141 0-240.5 98.81T140-480h150q66 0 113 47t47 113v40H330v105q34 17 71.7 26t78.3 9Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
 function ImageIcon() {
   return (
     <svg viewBox="0 -960 960 960" aria-hidden="true">