# Prompt bar > The composer of a chat with an agent: @ to mention a source, / for a command, a model picker, dictation and send, rounded or pill-shaped. A one-line composer that grows into two rows once the message would wrap. Typing @ lists the sources to mention and / the commands, both filtered as you type; the + button opens the sources too, with a Connect link for one not yet connected. The model picker opens above its button, and choosing the flagship sweeps a band of colour across the bar. Dictation listens with three bouncing bars and writes what it heard. A switch under the bar turns its corners from rounded to a pill. A React component by Bruno Delorence: https://brunodelorence.com/components/prompt-bar. MIT License, Copyright (c) 2026 Bruno Delorence. Category: AI. ## Anatomy 1. **Composer**: One grid with every control in it. It stays one row while the message fits and splits into two once it would wrap. 2. **Add button**: Opens the + menu: the same sources as `@`, plus files to attach through `onAttach`. 3. **Text box**: A combobox: an `@word` or `/word` before the caret opens its menu, filtered as you type. It grows with its lines up to 136 px, then scrolls. 4. **Model picker**: The chosen model’s name. Opens a 176 px menu over itself; picking a flagship model sweeps a band of colour across the composer. 5. **Dictation**: Listens until it hears something, with three bars bouncing in the button. Pressing it again stops. 6. **Send**: Quiet and disabled while there is nothing to send, ink once there is. Enter sends too; Shift+Enter breaks the line. 7. **Menu**: Pops in from its edge, 180 ms from 95%, just above the composer. A quiet line at its foot says typing filters it. 8. **Highlight**: One highlight that glides to the row under the pointer or the arrow keys, 220 ms. Enter or Tab puts the row in. ## When to use - The composer of a chat with an agent: one line to write in, with send, dictation and a model picker beside it. - When a message can point at sources: `@` lists the data, files and apps the agent can read, `/` the commands it knows. - Products that offer a few models and want the choice next to the message, not buried in settings. - Short prompts that sometimes grow: the bar stays one row until the text would wrap, then gives the message its own row. ## When not to use - Long-form writing or editing documents. Use a full editor with formatting. - A plain search field with no agent behind it. Use a search input or a command palette. - Chats between people: the model picker and the commands mean nothing there. Use a simpler message field. - Picking from many models with prices and limits to compare. Give that a settings page; the picker holds a handful. - Places where @ and / are ordinary text, like code or handles: the menus would keep opening. ## Installation Install it with the shadcn CLI, into components/prompt-bar of any React project: ```sh npx shadcn@latest add https://brunodelorence.com/r/prompt-bar.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 { PromptBar, type PromptSource } from './prompt-bar'; const sources: PromptSource[] = [ { id: 'files', label: 'Add photos & files', detail: 'Upload from your computer', attach: true }, { id: 'docs', label: 'Team docs', detail: 'Specs, notes and plans' }, { id: 'mail', label: 'Mail', detail: 'Read and manage mail', connect: true }, ]; export function AgentComposer({ onSend }: { onSend: (message: string, model: string) => void }) { return ( document.querySelector('#upload')?.click()} shapeSwitch={false} autoplay={false} /> ); } ``` ## States - **Empty**: The placeholder shows and Send waits, greyed and disabled. - **Ready to send**: Any text turns Send to ink. Everything still fits on one row. - **Two rows**: Once the message would wrap it takes the first row; the buttons drop below it. - **Mention menu**: Typing `@` lists the sources; picking one writes `@Name` in place of the word. - **Command menu**: Typing `/` lists the commands, filtered by the letters after it. - **Add menu**: The + button opens the sources too, and takes the focus so the arrow keys work at once. - **Model menu**: A tick on the current model. The flagship’s colour sweep plays once on choosing it, so it isn’t shown locked. - **Listening**: The button turns blue with bouncing bars, and the placeholder says “Listening…”. The bars keep moving. - **Pill**: Fully round corners on the bar and its buttons; 24 px corners once the message wraps. ## How it works - The composer is one grid. While the message fits on its line the + button, the text box, the model picker, dictation and send sit in one row; an invisible copy of the message in the same type measures it, and once it is wider than the room the row leaves the text box, the message takes the whole first row and the buttons drop below it, the model picker beside the +. A ResizeObserver keeps the choice right as the bar changes width, and the text box grows with its lines up to seven. - @ and / are read from the word that ends at the caret, wherever it is in the message: an @word opens the sources and a /word the commands, filtered by what follows the sign at the start of any word ("fla" finds Flavor records). Picking an entry replaces the word with "@Name " or "/name " and puts the caret after it. - Every menu pops in from the edge it opens from, 180 ms from 95 % and transparent on a fast-out curve, and closes at once. The source and command menus span the bar; the model menu is 176 px wide, opens 8 px above its button and is kept inside the bar. - Each menu has one highlight under its rows that glides to the row under the pointer or the keyboard (top and height over 220 ms, fading in over 150 ms). Rows are a fixed height, so its place is a sum, not a measurement. The demo moves it unseen, as a script would, and a new query hides it again. - Choosing a flagship model plays a flash on a canvas behind the bar’s content: a gradient whose hue runs from red at the left edge to violet at the right, and whose stops’ alpha is redrawn every frame. A front crosses the bar in about 110 ms; each point it passes holds its brightest, paler colour for 55 ms, dims to a faint tint, and the tint fades out by 900 ms. - Dictation tints the microphone button and swaps its icon for three bars that bounce by scaleY (900 ms each, 150 ms apart), with “Listening…” in the empty box and send disabled. Without onDictate it hears a sample sentence after 2.25 s; pressing the button again stops. - Send is a quiet grey square until there is something to send, then turns to ink (200 ms). Enter sends, Shift+Enter starts a new line, and the message clears. - While on screen and untouched, a demo replays a 13.5 s round: it types @ and walks the sources, connects the last one, types / and walks the commands, opens the model menu and picks the flagship, flash included, then puts the model back. Its changes never reach the callbacks and are not announced; any key or press hands the bar to the reader. - Every colour is a light-dark() token on the root, so the bar follows the page’s color-scheme or the colorScheme prop. Each shadow is written once with all its layers, those a scheme does not use being transparent: long soft lifts by day, short dark ones at night. ## API reference - **sources** (`PromptSource[]`, default `seven sample sources`): What @ and + list: { id, label, detail?, icon?, connect?, attach? }. connect shows a Connect link until it is connected; attach calls onAttach instead of mentioning it. - **commands** (`PromptCommand[]`, default `five sample commands`): What / lists: { name, detail? }, the name without its slash. - **models** (`PromptModel[]`, default `three sample models`): What the picker offers: { id, label, note?, flagship? }. Choosing a flagship model plays the flash. - **model** (`string`): The chosen model’s id, when the parent keeps it (with onModelChange). - **defaultModel** (`string`, default `'vanilla-1'`): The model chosen at first, when the bar keeps it. - **onModelChange** (`(id: string) => void`): Called when the reader chooses another model. - **shape** (`'rounded' | 'pill'`): The bar’s corners, when the parent keeps them (with onShapeChange). - **defaultShape** (`'rounded' | 'pill'`, default `'rounded'`): The corners at first: 14 px, or a pill (24 px once the message wraps). - **onShapeChange** (`(shape: 'rounded' | 'pill') => void`): Called when the reader switches the shape. - **shapeSwitch** (`boolean`, default `true`): Shows the Rounded | Pill switch under the bar. - **defaultState** (`PromptBarState`): Opens the bar mid-way: value (the message; an @ or / word at its end opens that menu), menu ('plus' or 'model'), active (the lit row), connected (source ids) and listening. A menu it opens doesn’t take the focus. Setting it turns the demo off. - **onSend** (`(message: string, model: string) => void`): Called with the trimmed message and the model’s id when the reader sends. - **onAttach** (`(source: PromptSource) => void`): Called when a source marked attach is picked, to open a file picker, say. - **onConnect** (`(source: PromptSource) => void`): Called when a source marked connect is connected. - **onDictate** (`() => Promise`): Listens and resolves to what was heard, added to the message. Without it, a sample sentence arrives after 2.25 s. - **placeholder** (`string`, default `'Write a message…'`): The empty box’s words. - **listeningLabel** (`string`, default `'Listening…'`): The empty box’s words while dictation listens. - **autoplay** (`boolean`, default `true`): While on screen and untouched, a demo plays the @ and / menus and the model picker 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 text box is a combobox named “Prompt”. While an @ or / menu is open it controls a listbox of options and points at the highlighted one with aria-activedescendant, so focus never leaves the text: the up and down arrows move, Enter or Tab picks, Escape closes. - The + and model buttons say they open menus and whether they are expanded. Their menus take the focus when they open: arrows, Home and End move, Enter or Space picks, Escape closes and returns to the button, Tab closes. Models are menuitemradio entries with aria-checked. - A source that needs connecting says so in its name (“Mail, Read and manage mail, not connected”); Enter on it connects it, and Enter again mentions it. The Connect link itself is for the pointer. - The dictation button is a toggle (aria-pressed) whose name changes from “Start dictation” to “Stop dictation”; Send is disabled while there is nothing to send. The shape switch is a group of two toggle buttons. - A polite live region says what changed: the model chosen, a source connected, listening, what was heard, a message sent. Focus rings are visible on every button; the text box shows focus by its border. - Under reduced motion the menus appear without popping, the highlight jumps, the flash is skipped, the bars stand still and the demo never plays. ## Source ### prompt-bar/prompt-bar.tsx ```tsx // Copyright (c) 2026 Bruno Delorence. MIT License. 'use client'; import { useEffect, useEffectEvent, useId, useLayoutEffect, useRef, useState, type ChangeEvent, type KeyboardEvent as ReactKeyboardEvent, type ReactNode, } from 'react'; import { COMMANDS, MODELS, SAMPLE_TRANSCRIPT, type PromptCommand, type PromptModel, type PromptShape, type PromptSource, } from './data'; import { playGlow } from './glow'; import { ArrowUpIcon, BarsIcon, BoardIcon, ChatIcon, CheckIcon, ChevronIcon, ClipIcon, GlobeIcon, LayersIcon, MailIcon, MicIcon, PlusIcon, } from './icons'; import { useAutoplay } from './use-autoplay'; import styles from './prompt-bar.module.css'; export type { PromptCommand, PromptModel, PromptShape, PromptSource } from './data'; /* * Prompt bar: the composer of a chat with an agent. A line to write in, a + button for sources * and files, a model picker, dictation and send; typing @ lists the sources to mention, typing / * the commands. Rounded or pill-shaped. * * - The composer is one grid. While the message fits on its line, everything sits in one row; * once it would wrap (measured by an invisible copy of the text in the same type) the message * takes the whole first row and the buttons drop below it, the model picker beside the +. * The text box grows with its lines. * - @ and / are read from the word just before the caret: an @word or /word opens its menu, * filtered by what follows the sign, and picking an entry replaces the word with "@Name " or * "/name ". The text box stays focused throughout (a combobox with a listbox); arrows move the * highlight, Enter or Tab picks, Escape closes. * - Every menu pops in from its edge (180 ms, from 95 %) and has one highlight that glides to the * row under the pointer or the keyboard (220 ms by top). It shows only for those: the demo * moves it unseen, as a script would. * - Choosing a flagship model sweeps a band of spectrum colours across the composer on a canvas * behind its content (glow.ts). * - Dictation listens until it hears something (a sample sentence after 2.25 s, or what onDictate * resolves to), with three bars bouncing in the button; pressing it again stops. * - While on screen and untouched, a demo types @ and walks the sources, connects one, tries a * / command, then picks the flagship model; it puts the model back before it starts over. Its * changes never reach the callbacks; any key or press hands the bar 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. */ /** Row heights in the menus, and the menus' inner padding: the highlight's top follows them. */ const ROW = 36; const MODEL_ROW = 30; const MENU_PAD = 4; /** The model menu's width; it opens over the picker, kept inside the bar. */ const MODEL_MENU = 176; /** The tallest the text box grows before it scrolls. */ const MAX_TEXT = 136; /** How long the sample dictation listens before it hears its sentence. */ const LISTEN = 2250; const SOURCES: PromptSource[] = [ { id: 'files', label: 'Add photos & files', detail: 'Upload from your computer', icon: , attach: true, }, { id: 'scoop-data', label: 'Scoop Data', detail: 'Sales & churn metrics', icon: }, { id: 'flavor-records', label: 'Flavor records', detail: '26 makers, tags, links', icon: , }, { id: 'web', label: 'Web search', detail: 'Real-time news and info', icon: }, { id: 'board', label: 'Design board', detail: 'Design-to-code workflows', icon: }, { id: 'chat', label: 'Team chat', detail: 'Read and manage threads', icon: }, { id: 'mail', label: 'Mail', detail: 'Read and manage mail', icon: , connect: true }, ]; /** The demo's script, in ms from the start of a round. */ const DEMO = { start: 600, mention: 0, sources: [900, 1534, 2150], connect: 2850, mentionEnd: 3851, command: 4550, commands: [5451, 6084], commandEnd: 7084, modelOpen: 7884, modelPick: 9084, modelBack: 12383, round: 13483, }; /** * A state to open in, held still (the demo stays off): for docs and tests. An @word or /word at * the end of `value` opens its menu. */ export type PromptBarState = { /** The message in the text box. */ value?: string; /** The + menu or the model menu open. */ menu?: 'plus' | 'model'; /** The open menu's highlighted row, drawn lit. */ active?: number; /** Source ids already connected. */ connected?: string[]; /** Dictation listening; it hears nothing until the button is pressed again. */ listening?: boolean; }; type Word = { kind: 'mention' | 'command'; from: number; query: string }; type Menu = Word | { kind: 'plus' } | { kind: 'model' } | null; /** The @word or /word that ends at the caret, if any. */ function wordAt(text: string, caret: number): Word | null { let from = caret; while (from > 0 && !/\s/.test(text[from - 1])) from--; const word = text.slice(from, caret); if (word.startsWith('@')) return { kind: 'mention', from, query: word.slice(1) }; if (word.startsWith('/')) return { kind: 'command', from, query: word.slice(1) }; return null; } /** Whether `query` begins the text or one of its words ("fla" finds Flavor records). */ const matches = (text: string, query: string) => { const q = query.trim().toLowerCase(); const lower = text.toLowerCase(); if (lower.startsWith(q)) return true; // From any later word on, in its own spelling: "rec" and "records" both find Flavor records. return [...lower.matchAll(/[\s-]+/g)].some((gap) => lower.startsWith(q, gap.index + gap[0].length), ); }; export function PromptBar({ sources = SOURCES, commands = COMMANDS, models = MODELS, model, defaultModel = 'vanilla-1', onModelChange, shape, defaultShape = 'rounded', onShapeChange, shapeSwitch = true, onSend, onAttach, onConnect, onDictate, placeholder = 'Write a message…', listeningLabel = 'Listening…', autoplay = true, colorScheme, defaultState, className = '', }: { /** What @ and + list. */ sources?: PromptSource[]; /** What / lists. */ commands?: PromptCommand[]; /** What the model picker offers. */ models?: PromptModel[]; /** The chosen model's id, when the parent keeps it. */ model?: string; /** The model chosen at first, when the bar keeps it. */ defaultModel?: string; onModelChange?: (id: string) => void; /** Rounded corners, or a pill (rounder when the message wraps). */ shape?: PromptShape; defaultShape?: PromptShape; onShapeChange?: (shape: PromptShape) => void; /** Shows the Rounded | Pill switch under the bar. */ shapeSwitch?: boolean; /** Called with the message and the model's id when the reader sends. */ onSend?: (message: string, model: string) => void; /** Called when a source marked attach is picked (a file picker, say). */ onAttach?: (source: PromptSource) => void; /** Called when a source marked connect is connected. */ onConnect?: (source: PromptSource) => void; /** Listens and resolves to what was heard; without it, a sample sentence after 2.25 s. */ onDictate?: () => Promise; placeholder?: string; /** The placeholder while dictation listens. */ listeningLabel?: string; /** While on screen and untouched, a demo plays the menus 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 this state, held still: the demo stays off. */ defaultState?: PromptBarState; className?: string; }) { const { ref: root, playing, take } = useAutoplay(6000); const demo = autoplay && !defaultState && playing; const uid = useId(); const [value, setValue] = useState(defaultState?.value ?? ''); const [menu, setMenu] = useState(() => { if (defaultState?.menu) return { kind: defaultState.menu }; const text = defaultState?.value ?? ''; return text ? wordAt(text, text.length) : null; }); const [active, setActive] = useState(() => defaultState?.active !== undefined ? defaultState.active : defaultState?.menu === 'model' ? Math.max( 0, models.findIndex((m) => m.id === (model ?? defaultModel)), ) : 0, ); /** The highlight shows for the pointer and the keyboard, not for the demo. */ const [lit, setLit] = useState(defaultState?.active !== undefined); const [connected, setConnected] = useState(defaultState?.connected ?? []); const [demoConnected, setDemoConnected] = useState([]); const [listening, setListening] = useState(defaultState?.listening ?? false); const [ownModel, setOwnModel] = useState(defaultModel); /** The demo's model, shown over the real one while it plays. */ const [demoModel, setDemoModel] = useState(null); const [ownShape, setOwnShape] = useState(defaultShape); const [stacked, setStacked] = useState(false); const [modelAt, setModelAt] = useState<{ left: number; bottom: number } | null>(null); const [glow, setGlow] = useState(0); const [message, setMessage] = useState(''); const anchor = useRef(null); const composer = useRef(null); const grid = useRef(null); const text = useRef(null); const measure = useRef(null); const canvas = useRef(null); const plusButton = useRef(null); const modelButton = useRef(null); const menuBox = useRef(null); /** Where the caret goes after an entry is put in, once the text has rendered. */ const caretTo = useRef(null); const dictation = useRef(0); const listenTimer = useRef(0); /** Whether the demo has changed anything the reader should not inherit. */ const demoTouched = useRef(false); /** Set once the reader opens the + or model menu (one opened by defaultState keeps no focus). */ const menuOpened = useRef(false); const modelId = demoModel ?? model ?? ownModel; const current = models.find((entry) => entry.id === modelId) ?? models[0]; const form = shape ?? ownShape; const linked = (id: string) => connected.includes(id) || demoConnected.includes(id); const sourceItems = menu?.kind === 'mention' ? sources.filter((source) => matches(source.label, menu.query)) : menu?.kind === 'plus' ? sources : []; const commandItems = menu?.kind === 'command' ? commands.filter((command) => matches(command.name, menu.query)) : []; const count = menu?.kind === 'model' ? models.length : menu?.kind === 'command' ? commandItems.length : sourceItems.length; /** Repeats are made to differ, so screen readers announce them again. */ const announce = (words: string) => setMessage((now) => (now === words ? `${words} ` : words)); const open = (next: Menu, first = 0) => { setMenu(next); setActive(first); setLit(false); }; // --- Layout: one row or two, the text box's height, the model menu's place --------------- const layout = useEffectEvent(() => { const box = grid.current; const copy = measure.current; const picker = modelButton.current; if (!box || !copy || !picker) return; // One row leaves the text box what the four buttons and the gaps do not take, less its own // 4 px padding on each side. const room = box.clientWidth - 28 * 3 - picker.offsetWidth - 4 * 4 - 8; const wraps = value.includes('\n') || copy.offsetWidth > room; if (wraps !== stacked) setStacked(wraps); if (menu?.kind === 'model' && anchor.current) { const frame = anchor.current.getBoundingClientRect(); const button = picker.getBoundingClientRect(); // In layout pixels, should the bar be drawn scaled (a zoomed preview). const scale = frame.width / (anchor.current.offsetWidth || frame.width) || 1; const width = frame.width / scale; const left = Math.max(0, Math.min((button.left - frame.left) / scale, width - MODEL_MENU)); const bottom = (frame.bottom - button.top) / scale + 8; if (!modelAt || modelAt.left !== left || modelAt.bottom !== bottom) setModelAt({ left, bottom }); } }); useLayoutEffect(() => layout()); useEffect(() => { const box = composer.current; if (!box) return; const observer = new ResizeObserver(() => layout()); observer.observe(box); return () => observer.disconnect(); }, []); // The text box is as tall as its lines, up to MAX_TEXT. useLayoutEffect(() => { const box = text.current; if (!box) return; box.style.height = 'auto'; const height = Math.max(28, Math.min(box.scrollHeight, MAX_TEXT)); box.style.height = `${height}px`; box.style.overflowY = box.scrollHeight > MAX_TEXT ? 'auto' : 'hidden'; }, [value, stacked, form]); // After an entry is put in, the caret lands right after it. useLayoutEffect(() => { const at = caretTo.current; const box = text.current; if (at === null || !box) return; caretTo.current = null; box.focus(); box.setSelectionRange(at, at); }, [value]); // The flash for a flagship model. useEffect(() => { if (!glow || !canvas.current) return; if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return; return playGlow(canvas.current); }, [glow]); // A press outside an open menu and its trigger closes it. useEffect(() => { if (!menu) return; const close = (event: PointerEvent) => { const target = event.target as Node; if (menuBox.current?.contains(target)) return; if (menu.kind === 'plus' && plusButton.current?.contains(target)) return; if (menu.kind === 'model' && modelButton.current?.contains(target)) return; if ((menu.kind === 'mention' || menu.kind === 'command') && text.current?.contains(target)) return; setMenu(null); }; document.addEventListener('pointerdown', close); return () => document.removeEventListener('pointerdown', close); }, [menu]); useEffect( () => () => { window.clearTimeout(listenTimer.current); }, [], ); // --- Writing ----------------------------------------------------------------------------- const onChange = (event: ChangeEvent) => { const next = event.target.value; setValue(next); const word = wordAt(next, event.target.selectionStart ?? next.length); const any = word?.kind === 'mention' ? sources.some((source) => matches(source.label, word.query)) : word?.kind === 'command' ? commands.some((command) => matches(command.name, word.query)) : false; if (word && any) { const same = menu?.kind === word.kind; // A new menu, or a new query, starts again from the first entry, unhighlighted. if (!same || (menu && 'query' in menu && menu.query !== word.query)) { setActive(0); setLit(false); } setMenu(word); } else if (menu) setMenu(null); }; /** Puts `entry` in place of [from, to) and a space after it, the caret following. */ const insert = (entry: string, from: number, to: number) => { const before = value.slice(0, from); if (!entry) { caretTo.current = before.length; setValue(before + value.slice(to)); return; } const lead = before && !/\s$/.test(before) ? ' ' : ''; const next = `${before}${lead}${entry} ${value.slice(to).replace(/^ /, '')}`; caretTo.current = before.length + lead.length + entry.length + 1; setValue(next); }; const send = () => { const words = value.trim(); if (!words || listening) return; onSend?.(words, modelId); setValue(''); setMenu(null); announce('Message sent'); }; // --- Picking ----------------------------------------------------------------------------- const connect = (source: PromptSource) => { if (linked(source.id)) return; setConnected((now) => [...now, source.id]); onConnect?.(source); announce(`${source.label} connected`); }; const chooseModel = (entry: PromptModel) => { setMenu(null); modelButton.current?.focus({ preventScroll: true }); if (entry.id === modelId) return; setOwnModel(entry.id); onModelChange?.(entry.id); if (entry.flagship) setGlow((n) => n + 1); announce(`Model: ${entry.label}`); }; /** Picks row `index` of the open menu; `keyboard` lets Enter connect a source first. */ const pick = (index: number, keyboard = false) => { if (!menu) return; if (menu.kind === 'model') { const entry = models[index]; if (entry) chooseModel(entry); return; } const box = text.current; const caret = box?.selectionStart ?? value.length; if (menu.kind === 'command') { const command = commandItems[index]; if (!command) return; setMenu(null); insert(`/${command.name}`, menu.from, caret); return; } const source = sourceItems[index]; if (!source) return; if (keyboard && source.connect && !linked(source.id)) { connect(source); return; } setMenu(null); if (source.attach) { onAttach?.(source); if (menu.kind === 'plus') box?.focus(); else insert('', menu.from, caret); return; } if (menu.kind === 'mention') insert(`@${source.label}`, menu.from, caret); else insert(`@${source.label}`, caret, caret); }; const move = (step: number | 'first' | 'last') => { if (!count) return; setLit(true); setActive((now) => step === 'first' ? 0 : step === 'last' ? count - 1 : (now + step + count) % count, ); }; const onTextKey = (event: ReactKeyboardEvent) => { if (event.nativeEvent.isComposing) return; if (menu && (menu.kind === 'mention' || menu.kind === 'command') && count) { if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault(); move(event.key === 'ArrowDown' ? 1 : -1); return; } if (event.key === 'Enter' || event.key === 'Tab') { event.preventDefault(); pick(active, true); return; } if (event.key === 'Escape') { event.preventDefault(); setMenu(null); return; } } if (event.key === 'Enter' && !event.shiftKey) { event.preventDefault(); send(); } }; /** Keys on the + and model menus, which hold the focus while they are open. */ const onMenuKey = (event: ReactKeyboardEvent) => { const keys: Record void> = { ArrowDown: () => move(1), ArrowUp: () => move(-1), Home: () => move('first'), End: () => move('last'), Enter: () => pick(active, true), ' ': () => pick(active, true), Escape: () => { const back = menu?.kind === 'model' ? modelButton.current : plusButton.current; setMenu(null); back?.focus(); }, Tab: () => setMenu(null), }; const run = keys[event.key]; if (!run) return; if (event.key !== 'Tab') event.preventDefault(); run(); }; // The + and model menus take the focus when they open, so arrows work at once. // (A frame later: the model menu is hidden until its place has been measured.) useEffect(() => { if (demo || !menuOpened.current || (menu?.kind !== 'plus' && menu?.kind !== 'model')) return; const frame = requestAnimationFrame(() => menuBox.current?.focus({ preventScroll: true })); return () => cancelAnimationFrame(frame); }, [menu?.kind, demo]); const toggleMenu = (kind: 'plus' | 'model', keyboard: boolean) => { if (menu?.kind === kind) { setMenu(null); return; } const first = kind === 'model' ? Math.max( 0, models.findIndex((m) => m.id === modelId), ) : 0; menuOpened.current = true; open({ kind }, first); if (keyboard) setLit(true); }; // --- Dictation --------------------------------------------------------------------------- const hear = (heard: string, token: number) => { if (token !== dictation.current) return; setListening(false); const words = heard.trim(); if (!words) { announce('Nothing heard'); return; } setValue((now) => (now.trim() ? `${now.replace(/\s*$/, ' ')}${words}` : words)); // The words go where the reader can carry on writing. if (root.current?.contains(document.activeElement)) { const box = text.current; caretTo.current = (box?.value.trim() ? box.value.replace(/\s*$/, ' ').length : 0) + words.length; } announce(`Heard: ${words}`); }; const dictate = () => { const token = ++dictation.current; window.clearTimeout(listenTimer.current); if (listening) { setListening(false); announce('Dictation stopped'); return; } setListening(true); setMenu(null); announce('Listening'); if (onDictate) onDictate().then( (heard) => hear(heard, token), () => hear('', token), ); else listenTimer.current = window.setTimeout(() => hear(SAMPLE_TRANSCRIPT, token), LISTEN); }; // --- Shape ------------------------------------------------------------------------------- const setShape = (next: PromptShape) => { if (next === form) return; setOwnShape(next); onShapeChange?.(next); }; // --- Demo -------------------------------------------------------------------------------- const demoStep = useEffectEvent((step: string, arg = 0) => { demoTouched.current = true; const connectable = sources.reduce((last, source, i) => (source.connect ? i : last), -1); const sourceStops = [Math.min(1, sources.length - 1), Math.min(4, sources.length - 1)]; sourceStops.push(connectable >= 0 ? connectable : sources.length - 1); const commandStops = [Math.min(1, commands.length - 1), Math.min(3, commands.length - 1)]; switch (step) { case 'mention': setDemoConnected([]); setValue('@'); open({ kind: 'mention', from: 0, query: '' }); break; case 'source': setActive(Math.max(0, sourceStops[arg])); break; case 'connect': if (connectable >= 0) setDemoConnected([sources[connectable].id]); break; case 'command': setValue('/'); open({ kind: 'command', from: 0, query: '' }); break; case 'commandStop': setActive(Math.max(0, commandStops[arg])); break; case 'close': setValue(''); setMenu(null); break; case 'modelOpen': open( { kind: 'model' }, Math.max( 0, models.findIndex((m) => m.id === modelId), ), ); break; case 'modelPick': { const flagship = models.find((m) => m.flagship) ?? models[0]; setMenu(null); if (flagship && flagship.id !== modelId) { setDemoModel(flagship.id); if (flagship.flagship) setGlow((n) => n + 1); } break; } case 'modelBack': setDemoModel(null); break; } }); const demoReset = useEffectEvent(() => { if (!demoTouched.current) return; demoTouched.current = false; setValue(''); setMenu(null); setLit(false); setDemoModel(null); setDemoConnected([]); }); useEffect(() => { if (!demo) { demoReset(); return; } const timers: number[] = []; const at = (ms: number, step: string, arg?: number) => timers.push(window.setTimeout(() => demoStep(step, arg), ms)); const round = (start: number) => { at(start + DEMO.mention, 'mention'); DEMO.sources.forEach((ms, i) => at(start + ms, 'source', i)); at(start + DEMO.connect, 'connect'); at(start + DEMO.mentionEnd, 'close'); at(start + DEMO.command, 'command'); DEMO.commands.forEach((ms, i) => at(start + ms, 'commandStop', i)); at(start + DEMO.commandEnd, 'close'); at(start + DEMO.modelOpen, 'modelOpen'); at(start + DEMO.modelPick, 'modelPick'); at(start + DEMO.modelBack, 'modelBack'); timers.push( window.setTimeout(() => { timers.length = 0; round(0); }, start + DEMO.round), ); }; round(DEMO.start); return () => timers.forEach((timer) => window.clearTimeout(timer)); }, [demo]); // --- Rendering --------------------------------------------------------------------------- const listId = `${uid}-menu`; const optionId = (i: number) => `${uid}-option-${i}`; const comboOpen = !!menu && (menu.kind === 'mention' || menu.kind === 'command') && count > 0; const ready = !!value.trim() && !listening; const rowHeight = menu?.kind === 'model' ? MODEL_ROW : ROW; const glide = (