PromptBar

An AI composer with @ sources, / commands, a model picker, attachments and dictation, in rounded, pill and tall (hero) shapes.

When to use

• Use it as the main prompt input of an assistant surface, where people pick context sources, run slash commands and switch models.
• Use tall for an empty-state hero ("What should Lyra draft?"), and the default height for a docked composer.
• Not for a whole chat panel with replies — use ChatPanel or ChatThread. Not for a plain search field — use SearchField or ExpandingSearch.

Usage

import PromptBar from "@/components/iris/prompt-bar/prompt-bar";

h(PromptBar, { demo: false, placeholder: "Ask the desk", onSend: (text) => ask(text) });
h(PromptBar, { variant: "Pill", demo: false });
h(PromptBar, { tall: true, demo: false, placeholder: "What should Lyra draft?" });

Props

Prop	Type	Default	Description
variant	"Rounded" | "Pill"	"Rounded"	Corner shape. Pill is fully rounded until it grows to several lines or holds attachments.
demo	boolean	true	Runs the self-playing walkthrough (opening the @ menu, then the / menu, then upgrading the model) inside a 384px-tall stage. Set it to false in real surfaces.
tall	boolean	false	Hero sizing: a multi-line input with the controls on their own row.
placeholder	string	"Write a message…"	Input placeholder ("Listening…" while dictating).
onSend	(text: string) => void	—	Called with the prompt on Enter (without Shift) or on the send button.

Notes

• The @ sources, / commands and model lists are built-in demo data from an ErmisAI newsroom desk: sources such as Wire, Stories, Drafts and Delivery (which carries its own Connect button), commands /quick-brief, /full-story, /broadcast-script, /digest-block and /summarize, and models Large, Standard and Small. None of them can be overridden by props.
• Keyboard: typing @ or / opens a menu. Arrow Up and Down move the gliding highlight, Enter or Tab picks, and Escape dismisses. Enter sends and Shift+Enter adds a newline.
• Dictation is simulated: the mic button inserts a canned phrase. It does not use the Web Speech API.
• Choosing the flagship model plays a WebGL rainbow sweep (glimm) across the composer.
• Any pointer or key interaction stops the demo loop and hands control to the user.
• Reads --surface, --field, --line, --line-strong, --ink, --ink-2, --ink-3 and the raised and overlay shadows.