Imagine barPro

The image prompt bar: chips for aspect, style, count, model and seed, typed flags that become chips, a credit cost that follows every change, enhance with undo, reroll and reference images.

Markdown

On this page

ProChips for aspect, style, count, model and seed, a cost that follows them, enhance, reroll and a simulated run.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/imagine-bar

Usage

tsx

import { ImagineBar } from "@/components/ui/chatcn/pro/imagine-bar"

<ImagineBar
  models={models}
  styles={styles}
  balance={credits}
  onGenerate={({ prompt, params, references, cost }) => run(prompt, params)}
  onEnhance={(prompt) => api.enhance(prompt)}
  onReroll={rerollLast}
/>

Parameters live in the line. Each chip opens a small editor: the free aspect-ratio-picker and style-picker, a batch-stepper for the count, the image-model-picker list for the model and a seed field with a lock. People who type parameters keep their habit: --ar 16:9, --seed 42 and --n 4 turn into chips once a space follows them.

The cost hint is the model's credits times the count unless you pass getCost. When a run costs more than balance, Generate stays off, Enter says why, and a line under the bar offers onTopUp. The text stays editable so nothing typed is lost.

Examples

References and a moodboard

Paste, drop or attach images to use them as references. Anything in header rides above the text, such as a MoodboardChip.

ProTwo reference images, a moodboard chip riding along, a locked seed and a wide aspect.

States

ProShort on credits, out of credits, generating and disabled.

Props

Prop	Type	Notes
`value`, `defaultValue`, `onValueChange`	`string`	The prompt
`params`, `defaultParams`, `onParamsChange`	`ImagineParams`	`aspect`, `style`, `count`, `model`, `seed` (null for random)
`models`	`StudioImageModel[]`	Required. Name, credits, speed, quality, samples
`styles`	`StylePreset[]`	The style chip shows only when there are styles
`aspectRatios`	`string[]`	Default 1:1, 4:5, 3:2, 4:3, 16:9, 9:16, 21:9
`maxCount`	`number`	Default 8
`getCost`	`(params) => number`	Default model credits times count
`balance`, `onTopUp`		Generate is held while a run costs more than the balance
`onGenerate`	`(request) => void`	Prompt, params, references and cost
`status`, `onStop`	`"idle" \| "submitting" \| "generating"`	Generating turns Generate into Stop
`onEnhance`	`(prompt) => string \| Promise<string>`	Shows Undo enhance after
`onReroll`	`() => void`	Button and Alt+R
`lastPrompt`	`string`	Up arrow in an empty bar brings it back
`references`, `defaultReferences`, `onReferencesChange`	`ImagineReference[]`
`maxReferences`	`number`	Default 4. 0 turns references off
`header`	`ReactNode`	Chips above the text
`variant`	`"default" \| "floating" \| "hero"`	The `prompt-input` surfaces

Keyboard

Key	Action
`Enter`	Generate. Never while composing with an IME
`Shift` + `Enter`	New line
`Alt` + `R`	Reroll the last run
`↑` in an empty bar	Bring back the last prompt
`Esc`	Stop while generating; close a chip editor

Accessibility

Every chip is a button named with its parameter and value: "Aspect ratio: 3:2".
Flags typed into the prompt are announced as they convert: "Set aspect 16:9".
The cost hint is focusable and names the cost and the balance; the breakdown is in its tooltip.
Out of credits, the reason is in text and announced when Enter is pressed, not only shown in amber.

Motion

Chip editors grow from their chip in 180 ms. A chip whose value changes swaps its text with a 150 ms blur crossfade, so a typed flag visibly lands.
The cost rolls its digits on pointer changes and swaps at once from the keyboard.
Enhance shows the kit's text shimmer while it waits. Reduced motion keeps only fades.