Components
AIPrompt
Prompt input for AI features — suggestion chips, Cmd+Enter submit, busy/stop, output slot.
AIPrompt is a ready-made prompt surface for AI features: a multiline input
that submits on Cmd/Ctrl+Enter, optional suggestions chips, a busy state
that swaps the send button for a stop affordance (onStop), and an output
slot for the rendered response. It is transport-free — wire your own model call
in onSubmit, which receives the prompt text. Add a hint for footer notes
like the model name.
Example
Preview
import { AIPrompt } from '@officina/ui';
import { useState } from 'react';
function Assistant() {
const [busy, setBusy] = useState(false);
const [output, setOutput] = useState<React.ReactNode>(null);
return (
<AIPrompt
busy={busy}
onStop={() => setBusy(false)}
suggestions={['Summarize this report', 'Draft a follow-up email']}
hint="gpt-style model"
output={output ?? undefined}
onSubmit={async (prompt) => {
setBusy(true);
setOutput(await runModel(prompt));
setBusy(false);
}}
/>
);
}API
| Prop | Type | Default | Description |
|---|---|---|---|
| onSubmit* | (prompt: string) => void | — | Called with the prompt text on submit. Wire your model call here. |
| busy | boolean | false | Streaming/working state — shows stop affordance and disables input. |
| disabled | boolean | false | Disables the input and submit affordance. |
| hint | string | — | Footer hint, e.g. model name or token budget. |
| label | string | AI prompt | Accessible label for the input (visually hidden). Defaults to `'AI prompt'`. |
| onStop | () => void | — | Called when the user clicks stop during a busy/streaming response. |
| output | ReactNode | — | Rendered output region (markdown, streamed text, components). |
| placeholder | string | Ask anything… | Placeholder text for the input. Defaults to `'Ask anything…'`. |
| suggestions | string[] | — | Quick-start suggestion chips shown above the input. |