Prompt Input

Installation#

# One-time setup (tokens + lib helpers)
npx koalaui-cli@latest init

# Activate your Pro license (once per machine)
npx koalaui-cli@latest login <key>

# Add this component (its dependencies come along)
npx koalaui-cli@latest add prompt-input

Usage#

The composer is uncontrolled by default: it owns its value and clears itself after a submit. Enter sends, Shift+Enter inserts a newline, and the field grows to fit its content up to a cap, then scrolls.

Anatomy#

import {
  PromptInputSuggestions,
  PromptInputSuggestion,
  PromptInputQuickActions,
  PromptInputQuickAction,
  PromptInputBanner,
  PromptInputBannerAction,
  PromptInput,
  PromptInputMentions,
  PromptInputTextarea,
  PromptInputMentionList,
  PromptInputMentionItem,
  PromptInputMentionEmpty,
  PromptInputToolbar,
  PromptInputMentionButton,
  PromptInputButton,
  PromptInputCount,
  PromptInputSubmit,
} from "@/components/ui/prompt-input"

<PromptInputSuggestions>
  <PromptInputSuggestion />
</PromptInputSuggestions>
<PromptInputQuickActions>
  <PromptInputQuickAction />
</PromptInputQuickActions>
<div className="relative isolate flex flex-col">
  <PromptInputBanner>
    …
    <PromptInputBannerAction />
  </PromptInputBanner>
  <PromptInput>
    <PromptInputMentions>
      <PromptInputTextarea />
      <PromptInputMentionList>
        <PromptInputMentionItem />
        <PromptInputMentionEmpty />
      </PromptInputMentionList>
      <PromptInputToolbar>
        <PromptInputMentionButton />
        <PromptInputButton />
        <PromptInputCount />
        <PromptInputSubmit />
      </PromptInputToolbar>
    </PromptInputMentions>
  </PromptInput>
</div>

Minimal#

Same capabilities, quieter chrome: each group becomes its own compact icon dropdown (attachments, model, tools) so the bar is just icons plus send. Models are a radio group; the tools (image, canvas, web / deep research, code) are mutually exclusive, so picking one clears the rest (at most one active; their check sits on the right, the menu convention). Each trigger is a static icon-only PromptInputButton.

Streaming (send ⇄ stop)#

Pass loading while a response streams and the send button becomes a stop button that fires onStop. The toolbar holds plain PromptInputButton actions (Search, Reason) on the left; the submit claims the right edge automatically.

Suggestions#

Prompt-starter chips sit above the composer, filled in the secondary color so the row reads as one quiet set. Give each its own 16px glyph (not a generic sparkle) and let the shape do the differentiating. They're context-free on purpose: wire each onClick to set the prompt, submit, or both.

The row is a single line that scrolls, never one that wraps. A starter is usually a whole question, so on a phone even two of them are wider than the screen, and a chip cannot give width back: wrapped, the second one simply ran off the edge. Scrolled, the edge fades toward the starters you have not seen yet, and the fade is inert whenever they already fit.

Banner#

A notice that tucks behind the composer for model availability, usage caps, or errors. The composer stays a complete rounded card on top and the banner slides under it, so only its outer edge peeks out. Drop the PromptInputBanner as a sibling of PromptInput in a flex flex-col isolate wrapper (the isolate keeps its negative z local), and add shadow-md to the composer so its shadow falls on the strip. side picks which edge it peeks from: top (banner before the composer) or bottom (banner after). No absolute positioning. tone tints the icon (default / info / warning / destructive); pass onClose for a dismiss button.

Move it below with side="bottom" for a promo (a "connect your apps" nudge, say). Same wrapper, but place the banner after the composer so it peeks out the bottom instead.

Connect your apps#

Instead of a single action, the strip can carry the apps themselves: PromptInputBannerApps holds a row of PromptInputBannerApp logos, each a button named by a tooltip. The banner's muted tint is what makes it read as sitting behind the composer, and when the row outgrows the strip it scrolls under a soft fade instead of wrapping.

PreviewCode

Opus 4.8

Get better answers from your apps

Character count#

Drop a PromptInputCount into the toolbar: it reads the composer's length from context (pass current to show tokens instead). With a max it renders current / max and turns destructive once exceeded.

Character limit#

Set maxLength once on the root. The textarea enforces it (typing and pasting stop at the cap), a PromptInputCount reads it as its max, and a value over it (one set from outside) cannot be sent. A count that is always on is noise; give it a threshold (a fraction of the limit) and it appears only near the cap. Here it shows from 80% on: type a few more words.

Quick actions#

PromptInputSuggestions is a scrolling row of question chips. When the starters are actions (an icon and a verb), stack them as a list instead: PromptInputQuickActions takes an optional label that names the group, and visible folds the rest behind a “Show N more” toggle (a Collapsible: it carries aria-expanded, the rows tween open and the label rolls). Each PromptInputQuickAction is a ghost Button row whose onClick you own: the pattern below writes the full prompt into the composer instead of sending it, so the reader can edit it first.

Mentions#

Wrap the textarea and a PromptInputMentionList in PromptInputMentions. Typing @ at the start of a word (or pressing PromptInputMentionButton) opens a list right at the line being typed: a Radix Popover anchored to the caret, flipping when there is no room. The query flows out through onQueryChange (filter or fetch with it), and picking a row replaces @query with @Name and fires onMentionSelect.

Focus never leaves the textarea. It controls the listbox (aria-controls, aria-haspopup) and names the highlighted row with aria-activedescendant. ↑ ↓ move, Enter and Tab pick (selectOnTab={false} keeps Tab for leaving), and Escape closes only the list: it is caught before a dialog or a panel that closes on Escape can see it. It is a plain textarea, no contenteditable, so it behaves the same in every engine, older embedded Chromium included.

API reference#

FAQ#