# Composer states > A chat composer in four states: a one-line pill, a box that grows as the message wraps, a dictation row with a live waveform, and tools riding as chips. One composer that moves between its states. Empty, it is a pill with a +, the model picker, a microphone and send; as the message wraps it springs open into a box, the text above and the buttons below. The + attaches tools as tinted chips that pop in and out. The microphone morphs the row into dictation: the + turns into a cancel ×, the microphone into a stop square, and a dotted line comes alive as a simulated voice writes into the message. Enter sends, and the box springs back down. A React component by Bruno Delorence: https://brunodelorence.com/components/composer-states. MIT License, Copyright (c) 2026 Bruno Delorence. Category: AI. ## Anatomy 1. **Shell**: A pill while the message fits beside the buttons, a box once it doesn’t. Its height springs from a foot that stays put, so it grows upwards; corners stay 26 px in both. 2. **Message**: A textarea measured by a hidden copy of itself: one line inline, up to six stacked, then it scrolls. Enter sends, Shift+Enter breaks the line. 3. **Add tools**: Opens the tools menu above the shell; while dictating it turns a quarter round into the cancel ×. 4. **Tool chip**: An attached tool, a tinted icon with a × to remove it. It springs open in its own width; with one in the row the composer stays stacked. 5. **Model picker**: The model’s name and the effort after it, quiet until pressed. Opens one menu with both. 6. **Dictate**: Starts the simulated dictation; while it runs the same button is the stop square, which keeps the words. 7. **Send**: The violet disc. Without words it is `aria-disabled`; sending lifts the message out and the arrow shoots up and back. ## When to use - The message box at the foot of a chat with an agent, where most messages are one line and some are a paragraph. - A conversation where the model, its effort and a few tools are picked per message, right where it is written. - Products where speaking a message is as likely as typing it: dictation lives in the same row. - A narrow column or a phone: below 140 px of room beside the buttons it simply stays a box. ## When not to use - A search field or a one-line command. Use a plain input or a command palette; nothing here needs to grow. - Long-form writing with formatting. Use an editor: the box stops growing at six lines and scrolls. - Attaching files, mentions or images. This row carries two tool chips; use a composer built for attachments. - A form field with a label, validation and a submit button of its own. ## Installation Install it with the shadcn CLI, into components/composer-states of any React project: ```sh npx shadcn@latest add https://brunodelorence.com/r/composer-states.json ``` Or copy all the source files below into one folder of your project. Either way it needs React 19.2 and a bundler with CSS Modules (Next.js, Vite). It has a dark colour scheme. Its colours are CSS light-dark() pairs, kept inside @supports so that builds which rewrite light-dark() for older browsers leave them alone: it follows your page’s color-scheme (light unless the page sets one) or its colorScheme prop, with nothing to configure. Browsers without light-dark() show it light. ## Usage ```tsx import { ComposerStates } from './composer-states'; export function AgentComposer({ onSend }: { onSend: (message: string) => void }) { return ( { console.log(model, effort, tools); onSend(message); }} autoplay={false} /> ); } ``` ## States - **Empty**: A 52 px pill with the placeholder between + and the model picker. Send is there but does nothing. - **Short message**: Still a pill: the words fit on one line beside the buttons. - **Grown**: The words no longer fit inline: the text slides to the top and the shell springs taller, a line at a time. - **Six lines**: The most the box grows to; past it the message scrolls inside. - **Tools attached**: Two chips in the row. With a chip there, even a short message keeps the box. - **Tools menu**: Opened by +: tick boxes that attach or remove a tool, the lit row under the pointer or the arrow keys. - **Model menu**: Models with a line each, and the three efforts as segments under them; the chosen ones ticked. - **Dictating**: The row morphs: cancel ×, a dotted line, stop. Here the line is held still; live, a voice runs along it and writes. ## How it works - One shell, two layouts. Inline, the text runs from the + button to 10 px before the model picker; stacked, it takes the top and the buttons a 52 px row of their own. The row is pinned to the shell’s foot in both and the stage holds the foot still, so the shell grows upwards and only the text moves. - The layout is measured, not guessed: a hidden copy of the message in the same type gives its width on one line (does it fit inline?) and its lines at the stacked width (how tall?). A ResizeObserver keeps both right as the shell changes width. The box grows to six lines, then scrolls; with under 140 px of room beside the buttons (a phone) it stays a box even when empty. - A change of layout is played from a layout effect before paint: the shell’s height springs from where it was to where it now is, and the text slides from its old left edge to its new one (a FLIP of 38 px). Both are Web Animations whose easing is a damped spring (stiffness 420, damping 34) stepped at 240 Hz and written as a CSS linear() curve; an animation cut short starts the next one from its current height. - Chips spring open in their own width, so the row makes room for them as they pop from half size (a livelier spring, damping 26), and close in 260 ms before they leave the DOM. With a chip in the row the composer stays stacked. - Dictation is CSS transitions on one attribute. The + turns 45° and fades as the × turns in from −45°, the microphone shrinks away as the stop square grows, each on a 35 px disc that scales in; the model picker and chips blur 4 px and fade, and become inert; the waveform opens from its middle with a clip-path over 520 ms. - The waveform is a canvas: a slot every 6.5 px, a 2.5 px dot for silence and a bar up to 20 px for speech, sliding left one slot every 82 ms and smoothly in between. There is no microphone: the voice is built from the words it will say, two bars a syllable, phrases parted by runs of dots, each phrase’s first and last three bars dimmer. Each word is written into the message once its last bar is in view, so the transcript keeps time with the line. Its two colours are read from the canvas’s own CSS, so it follows the scheme. - Stop keeps what was heard; cancel puts the message back as it was. Sending lifts a copy of the message up 14 px as it blurs and fades, the arrow shoots out of the top of the send button and comes back from below, and the shell springs back to its new height. - The model menu lists the models with a note each and the effort as a row of three; the + menu lists the tools, checked when attached. Both pop from their button’s edge in 180 ms and keep one highlight that follows the pointer, the arrows or the demo. - While on screen and untouched, a demo plays a 22 s round through all four states: it types the message, attaches both tools, looks through the models, dictates a sentence, stops, sends and removes the chips. It never moves the focus; its changes never reach the callbacks and are not announced, and any press or key hands the composer to the reader. - Every colour is a light-dark() token on the root: the night is the composer’s own near-black stage and #262626 shell, the day a white shell with a hairline and a soft lift on a pale stage, the same violet send on both. ## API reference - **models** (`ComposerModel[]`, default `three sample models`): What the model picker offers: { id, label, note? }. - **defaultModel** (`string`, default `the first model`): The model chosen at first. - **defaultEffort** (`'Low' | 'Medium' | 'High'`, default `'High'`): The effort chosen at first, shown after the model’s name. - **onModelChange** (`(model: string, effort: ComposerEffort) => void`): Called when the reader picks another model or effort. - **defaultTools** (`('web' | 'visual')[]`, default `[]`): Tools attached at first, shown as chips. - **onToolsChange** (`(tools: ComposerTool[]) => void`): Called with the attached tools whenever one is attached or removed. - **defaultValue** (`string`, default `''`): The message at first. - **defaultState** (`ComposerStatesState`): Opens the composer mid-way: menu ('tools' or 'model') with active, its lit row, or dictating, the waveform held still and hearing nothing until the composer is used. Setting it turns the demo off. - **placeholder** (`string`, default `'Ask about anything…'`): The empty composer’s words. - **listeningLabel** (`string`, default `'Listening…'`): The empty composer’s words while dictating. - **dictation** (`string`, default `'Keep it short, and put the fixes first.'`): What the simulated dictation hears, written in word by word in time with the waveform. There is no microphone. - **onSend** (`(message: string, options: { model, effort, tools }) => void`): Called with the trimmed message, the model, the effort and the tools when the reader sends. - **autoplay** (`boolean`, default `true`): While on screen and untouched, a demo plays the four states by itself. - **colorScheme** (`'light' | 'dark' | 'system'`): Its colours: light, dark, or the reader’s system setting. Without it the component follows the page’s color-scheme, which is light unless the page sets one. - **className** (`string`): Extra class for the root. ## Accessibility - The message is a real textarea named “Message”: Enter sends, Shift+Enter starts a new line. Tab goes from it to the +, the chips’ remove buttons, the model picker, the microphone and send, in the order they are seen. - The + and model buttons say they open menus and whether they are expanded; Enter, Space or the up arrow opens a menu with the focus on its first or chosen entry. Arrows, Home and End move, Enter picks, Escape closes and returns to the button, Tab closes. Tools are menuitemcheckbox entries and models and efforts menuitemradio ones, each with aria-checked. - Each chip names its tool to screen readers and has a remove button (“Remove web search”) in a group named “Attached tools”; removing one returns the focus to the message. - While dictating, the + button becomes “Cancel dictation” and the microphone “Stop dictation”, in the same places, so the focus stays put; the model picker and chips are inert. Send says it is disabled (aria-disabled) while there is nothing to send. - A polite live region says what changed: a tool attached or removed, the model or effort chosen, listening, dictation stopped or cancelled, a message sent. Focus rings are visible on every button; the waveform and icons are hidden from screen readers. - Under reduced motion the shell changes size at once, chips and menus appear without popping, the row swaps without a morph, the waveform stands still at its resting line (the words still arrive), and the demo never plays. ## Source ### composer-states/composer-states.tsx ```tsx // Copyright (c) 2026 Bruno Delorence. MIT License. 'use client'; import { useCallback, useEffect, useEffectEvent, useLayoutEffect, useRef, useId, useState, type CSSProperties, type KeyboardEvent as ReactKeyboardEvent, type PointerEvent as ReactPointerEvent, } from 'react'; import { EFFORTS, MODELS, SAMPLE_DICTATION, SAMPLE_MESSAGE, TOOLS, type ComposerEffort, type ComposerModel, type ComposerTool, } from './data'; import { ArrowUpIcon, CheckIcon, ChevronIcon, CloseIcon, GlobeIcon, MicIcon, PlusIcon, ScanIcon, StopIcon, } from './icons'; import { POP, SHELL } from './spring'; import { useAutoplay } from './use-autoplay'; import { playWave, type Wave } from './waveform'; import styles from './composer-states.module.css'; export type { ComposerEffort, ComposerModel, ComposerTool }; /** A state to open in, held still (it turns the demo off): a menu open, or dictation under way. */ export type ComposerStatesState = { /** A menu open at first, its row `active` lit (the first, or the chosen model). */ menu?: 'tools' | 'model'; active?: number; /** Dictating at first, the waveform's line held still until the reader takes over. */ dictating?: boolean; }; /* * Composer states: the message box of a chat with an agent, which is a one-line pill while the * message fits beside its buttons and grows into a box once it does not. * * - One shell, two layouts. Inline, the text sits between the + button and the model picker; stacked, * it takes the top and the buttons a row of their own below it. The buttons' row is pinned to the * shell's foot in both, so only the text moves: it slides from one place to the other (a FLIP of * its left edge) while the shell's height follows on a spring. The shell grows upwards, from a * foot that stays put. * - The layout is measured, not guessed: a hidden copy of the message in the same type gives its * width on one line (does it fit inline?) and its lines at the stacked width (how tall?). A * ResizeObserver keeps both right as the shell changes width. The box grows to six lines, then * scrolls. * - Tools from the + menu ride in the buttons' row as tinted chips, which spring open and close in * their own width; with a chip in the row, the composer stays stacked. * - Dictation morphs the row: the + turns a quarter round into the cancel ×, the microphone becomes * the stop square, each on a disc that grows in, and the model picker and chips blur away as a * dotted line opens from its middle. A simulated voice runs along the line (waveform.ts) and * writes what it hears into the message, word by word. Stop keeps the words; cancel takes them * back out. * - Sending lifts the message out (a ghost of it floats up and fades), the arrow shoots up and * comes back from below, and the shell springs back down. * - While on screen and untouched, a demo plays all four states by itself: it types the message, * attaches two tools, glances through the models, dictates, sends and tidies up. Its changes * never reach the callbacks and are not announced. Any press or key hands it to the reader. * - Light or dark: every colour is a light-dark() token in the CSS, so the scheme is the page's * color-scheme, or the one the colorScheme prop sets. */ /** One line of text, in px; the pill is a line plus 13 px above and below. */ const LINE = 26; /** The most lines the box grows to before the text scrolls. */ const MAX_ROWS = 6; /** Where the text starts inline (after the + button) and stacked. */ const INLINE_START = 54; const STACKED_START = 16; /** The room kept between the text and the model picker, inline. */ const INLINE_GAP = 10; /** The least room for the text inline; with less, the composer is a box even when empty. */ const MIN_INLINE = 140; type Menu = 'tools' | 'model' | null; type ChipState = { id: ComposerTool; leaving: boolean }; const reducedMotion = () => typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches; export function ComposerStates({ models = MODELS, defaultModel = models[0]?.id, defaultEffort = 'High', onModelChange, defaultTools = [], onToolsChange, defaultValue = '', placeholder = 'Ask about anything…', listeningLabel = 'Listening…', dictation = SAMPLE_DICTATION, onSend, autoplay = true, colorScheme, defaultState, className = '', }: { /** What the model picker offers: { id, label, note? }. */ models?: ComposerModel[]; /** The model chosen at first. */ defaultModel?: string; /** The effort chosen at first, shown after the model's name. */ defaultEffort?: ComposerEffort; /** Called when the reader picks another model or effort. */ onModelChange?: (model: string, effort: ComposerEffort) => void; /** Tools attached at first. */ defaultTools?: ComposerTool[]; /** Called with the attached tools whenever one is attached or removed. */ onToolsChange?: (tools: ComposerTool[]) => void; /** The message at first. */ defaultValue?: string; /** The empty composer's words. */ placeholder?: string; /** The empty composer's words while dictating. */ listeningLabel?: string; /** What the simulated dictation hears, word by word (there is no microphone). */ dictation?: string; /** Called with the trimmed message, the model, the effort and the tools when the reader sends. */ onSend?: ( message: string, options: { model: string; effort: ComposerEffort; tools: ComposerTool[] }, ) => void; /** While on screen and untouched, a demo plays the four states by itself. */ autoplay?: boolean; /** Light or dark colours, or the reader's ('system'); without it, the page's color-scheme. */ colorScheme?: 'light' | 'dark' | 'system'; /** Opens in a state, held still: a menu open or dictation under way. Turns the demo off. */ defaultState?: ComposerStatesState; className?: string; }) { const { ref: root, playing, take } = useAutoplay(6000); const demo = autoplay && !defaultState && playing; const [text, setText] = useState(defaultValue); const [chips, setChips] = useState(() => defaultTools.map((id) => ({ id, leaving: false })), ); const [model, setModel] = useState(defaultModel); const [effort, setEffort] = useState(defaultEffort); const [dictating, setDictating] = useState(!!defaultState?.dictating); const [menu, setMenu] = useState(defaultState?.menu ?? null); const [active, setActive] = useState( () => defaultState?.active ?? (defaultState?.menu === 'model' ? Math.max( 0, models.findIndex((entry) => entry.id === defaultModel), ) : 0), ); /** The menu was opened by the reader, so its items take the focus. */ const [menuFocus, setMenuFocus] = useState(false); const [stacked, setStacked] = useState(false); const [rows, setRows] = useState(1); const [ghost, setGhost] = useState<{ text: string; key: number } | null>(null); const [message, setMessage] = useState(''); const shell = useRef(null); const textBox = useRef(null); const area = useRef(null); const oneLine = useRef(null); const mirror = useRef(null); const modelButton = useRef(null); const leadButton = useRef(null); const micButton = useRef(null); const sendButton = useRef(null); const arrow = useRef(null); const canvas = useRef(null); const menuRef = useRef(null); /** The message as it was before dictation began, for cancel. */ const before = useRef(defaultValue); /** Opened dictating by defaultState: the line holds still until the reader takes over. */ const held = useRef(!!defaultState?.dictating); /** The demo is at the controls: no callbacks, no announcements. */ const demoOn = useRef(false); const heightAnimation = useRef(null); const lastHeight = useRef(0); const wasStacked = useRef(stacked); const [inlineEnd, setInlineEnd] = useState(260); const groupId = useId(); const tools = chips.filter((chip) => !chip.leaving).map((chip) => chip.id); const chosen = models.find((entry) => entry.id === model) ?? models[0]; /** Repeats are made to differ, so screen readers announce them again. */ const announce = (words: string) => { if (demoOn.current) return; setMessage((now) => (now === words ? `${words} ` : words)); }; // Measure the layout: does the message fit inline, and how many lines does it take stacked? const measure = useCallback(() => { const box = shell.current; const line = oneLine.current; const copy = mirror.current; const picker = modelButton.current; if (!box || !line || !copy || !picker) return; const width = box.clientWidth; // Inline, the text runs from the + button to INLINE_GAP before the model picker. const end = width - picker.offsetLeft + INLINE_GAP; setInlineEnd(end); const room = width - INLINE_START - end; const value = area.current?.value ?? ''; // Too little room beside the buttons (a phone), and the composer stays a box. const fits = room >= MIN_INLINE && !value.includes('\n') && line.offsetWidth <= room - 2; copy.style.width = `${width - STACKED_START * 2}px`; setRows(Math.min(MAX_ROWS, Math.max(1, Math.round(copy.offsetHeight / LINE)))); setStacked(!fits); }, []); const mustStack = dictating || chips.length > 0; useLayoutEffect(measure, [text, chips.length, model, effort, measure]); useEffect(() => { const box = shell.current; const picker = modelButton.current; if (!box || !picker) return; const observer = new ResizeObserver(() => measure()); observer.observe(box); observer.observe(picker); return () => observer.disconnect(); }, [measure]); const isStacked = stacked || mustStack; const lines = isStacked ? rows : 1; // The shell's height springs to its new value, and the text slides from where it was. useLayoutEffect(() => { const box = shell.current; const words = textBox.current; if (!box || !words) return; const running = heightAnimation.current?.playState === 'running'; const from = running ? box.offsetHeight : lastHeight.current; heightAnimation.current?.cancel(); const to = box.offsetHeight; lastHeight.current = to; const moved = wasStacked.current !== isStacked; wasStacked.current = isStacked; if (reducedMotion() || !from) return; const { duration, easing } = SHELL(); if (Math.abs(from - to) > 0.5) { heightAnimation.current = box.animate( { height: [`${from}px`, `${to}px`] }, { duration, easing }, ); } if (moved) { const shift = isStacked ? INLINE_START - STACKED_START : STACKED_START - INLINE_START; words.animate({ translate: [`${shift}px 0`, '0 0'] }, { duration, easing }); } }, [isStacked, lines]); const report = (next: ComposerTool[]) => { if (!demoOn.current) onToolsChange?.(next); }; const toggleTool = (id: ComposerTool) => { const label = TOOLS.find((tool) => tool.id === id)?.label ?? id; if (tools.includes(id)) { removeTool(id); return; } setChips((now) => [...now.filter((chip) => chip.id !== id), { id, leaving: false }]); report([...tools, id]); announce(`${label} attached`); }; const removeTool = (id: ComposerTool) => { const label = TOOLS.find((tool) => tool.id === id)?.label ?? id; setChips((now) => now.map((chip) => (chip.id === id ? { ...chip, leaving: true } : chip))); report(tools.filter((tool) => tool !== id)); announce(`${label} removed`); }; const dropChip = useCallback((id: ComposerTool) => { setChips((now) => now.filter((chip) => !(chip.id === id && chip.leaving))); }, []); const send = () => { const words = text.trim(); if (!words) return; if (dictating) setDictating(false); if (!reducedMotion()) setGhost({ text, key: Date.now() }); setText(''); if (!demoOn.current) onSend?.(words, { model, effort, tools }); announce('Message sent'); const glyph = arrow.current; if (glyph && !reducedMotion()) { glyph.animate( [ { transform: 'translateY(0)', opacity: 1 }, { transform: 'translateY(-16px)', opacity: 0, offset: 0.45 }, { transform: 'translateY(16px)', opacity: 0, offset: 0.46 }, { transform: 'translateY(0)', opacity: 1 }, ], { duration: 420, easing: 'cubic-bezier(0.3, 0.7, 0.4, 1)' }, ); } }; const startDictation = () => { setMenu(null); before.current = text; setDictating(true); announce(listeningLabel.replace(/…$/, '')); }; const stopDictation = (keep: boolean) => { setDictating(false); if (!keep) setText(before.current); announce(keep ? 'Dictation stopped' : 'Dictation cancelled'); }; // The waveform plays while dictating, its voice writing into the message. const hear = useEffectEvent((word: string) => { setText((now) => { const spaced = now && !/\s$/.test(now) && !word.startsWith(' ') ? ` ${word}` : word; return now ? now + spaced : spaced.trimStart(); }); }); useEffect(() => { const element = canvas.current; if (!dictating || !element) return; const wave: Wave = playWave(element, { // Held still: the line rests and hears nothing, so the message stays as it was given. text: held.current ? '' : dictation, live: !reducedMotion() && !held.current, onWord: hear, }); return () => wave.stop(); }, [dictating, dictation]); // Menus: the reader's open the focus moves in; any press outside closes them. useEffect(() => { if (!menu || !menuFocus) return; const items = menuRef.current?.querySelectorAll('[data-item]'); items?.[active]?.focus(); }, [menu, menuFocus, active]); useEffect(() => { if (!menu) return; const close = (event: PointerEvent) => { const target = event.target as Node; if (menuRef.current?.contains(target)) return; if (leadButton.current?.contains(target) || modelButton.current?.contains(target)) return; setMenu(null); }; // Escape closes a menu opened by the pointer too, whose items never took the focus. const escape = (event: KeyboardEvent) => { if (event.key === 'Escape') setMenu(null); }; document.addEventListener('pointerdown', close); document.addEventListener('keydown', escape); return () => { document.removeEventListener('pointerdown', close); document.removeEventListener('keydown', escape); }; }, [menu]); const openMenu = (which: Exclude, focus: boolean) => { if (menu === which) { setMenu(null); return; } setMenu(which); setMenuFocus(focus); if (which === 'model') setActive(Math.max(0, models.indexOf(chosen))); else setActive(0); }; const menuItems = menu === 'tools' ? TOOLS.length : models.length + EFFORTS.length; const closeMenu = (refocus: boolean) => { const which = menu; setMenu(null); if (refocus) (which === 'model' ? modelButton : leadButton).current?.focus(); }; const pickModel = (index: number) => { if (index < models.length) { const next = models[index]; setModel(next.id); if (!demoOn.current) onModelChange?.(next.id, effort); announce(`Model: ${next.label}`); } else { const next = EFFORTS[index - models.length]; setEffort(next); if (!demoOn.current) onModelChange?.(model, next); announce(`Effort: ${next}`); } }; const onMenuKey = (event: ReactKeyboardEvent) => { const last = menuItems - 1; const keys: Record void> = { ArrowDown: () => setActive((at) => (at >= last ? 0 : at + 1)), ArrowRight: () => setActive((at) => (at >= last ? 0 : at + 1)), ArrowUp: () => setActive((at) => (at <= 0 ? last : at - 1)), ArrowLeft: () => setActive((at) => (at <= 0 ? last : at - 1)), Home: () => setActive(0), End: () => setActive(last), Escape: () => closeMenu(true), Tab: () => setMenu(null), }; const action = keys[event.key]; if (!action) return; if (event.key !== 'Tab') event.preventDefault(); action(); }; const onAreaKey = (event: ReactKeyboardEvent) => { if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) { event.preventDefault(); send(); } }; // Tap the bare parts of the composer to write in it. const focusText = (event: ReactPointerEvent) => { if (event.target === event.currentTarget) { event.preventDefault(); area.current?.focus(); } }; // The demo. Every step is a state change, as the reader's own would make; it never moves the // focus. Its buttons show a press by a data attribute. const reset = useEffectEvent(() => { setText(defaultValue); setChips(defaultTools.map((id) => ({ id, leaving: false }))); setModel(defaultModel); setEffort(defaultEffort); setDictating(false); setGhost(null); setMenu((now) => (menuFocus ? now : null)); }); const step = useEffectEvent( ( action: | 'type' | 'tools' | 'pickTool' | 'model' | 'walk' | 'close' | 'mic' | 'stop' | 'send' | 'remove', value?: number | string, ) => { if (action === 'type') setText(String(value)); if (action === 'tools') openMenu('tools', false); if (action === 'model') openMenu('model', false); if (action === 'walk') setActive(Number(value)); if (action === 'close') setMenu(null); if (action === 'pickTool') { toggleTool(TOOLS[Number(value)].id); setMenu(null); } if (action === 'mic') startDictation(); if (action === 'stop') stopDictation(true); if (action === 'send') send(); if (action === 'remove') removeTool(TOOLS[Number(value)].id); }, ); useEffect(() => { if (!demo) return; demoOn.current = true; let stopped = false; const timers = new Set(); const wait = (ms: number) => new Promise((resolve, reject) => { const timer = window.setTimeout(() => { timers.delete(timer); if (stopped) reject(new Error('stopped')); else resolve(); }, ms); timers.add(timer); }); const press = async (button: HTMLElement | null | undefined) => { button?.setAttribute('data-press', ''); await wait(140); button?.removeAttribute('data-press'); }; const chipClose = (index: number) => shell.current?.querySelector(`[data-chip="${TOOLS[index].id}"] button`); (async () => { for (;;) { reset(); await wait(1300); // Typed: the pill grows into the box as the words wrap. for (let i = 1; i <= SAMPLE_MESSAGE.length; i++) { step('type', SAMPLE_MESSAGE.slice(0, i)); await wait(SAMPLE_MESSAGE[i - 1] === ' ' ? 70 : 34); } await wait(900); // Tools: two chips from the + menu. for (const index of [0, 1]) { await press(leadButton.current); step('tools'); await wait(520); step('walk', index); await wait(420); step('pickTool', index); await wait(760); } // A look through the models, then back as it was. await press(modelButton.current); step('model'); await wait(560); for (const index of [1, 2, 3 + 2]) { step('walk', index); await wait(380); } step('close'); await wait(700); // Dictation: the row morphs, the voice writes, stop. await press(micButton.current); step('mic'); await wait(5600); await press(micButton.current); step('stop'); await wait(1100); // Send, then tidy the chips away. await press(sendButton.current); step('send'); await wait(1100); for (const index of [1, 0]) { await press(chipClose(index)); step('remove', index); await wait(520); } await wait(1200); } })().catch(() => {}); return () => { stopped = true; for (const timer of timers) window.clearTimeout(timer); demoOn.current = false; shell.current ?.querySelectorAll('[data-press]') .forEach((element) => element.removeAttribute('data-press')); reset(); }; }, [demo]); const empty = !text; const showPlaceholder = empty && !ghost; return (
{ held.current = false; take(); }} onKeyDownCapture={() => { held.current = false; take(); }} >