30Get started
HextaUI

Prompt Input

A chat composer that starts as one calm line, grows into a card as you write, and moves down once the conversation starts. Enter sends, safe with Japanese and Chinese input. Paste, drop or pick files with previews, progress and retry. @ adds files and / runs commands from a menu at the caret. A model picker with number keys, an effort slider that comes alive at Max, a context ring, dictation with a live waveform, tool chips, a queue for messages typed while a reply streams, and drafts that survive a reload.

Open in new tab

Overview

The composer is the part of a chat people touch most, so every keystroke has to feel right. Prompt Input starts as one calm line with the + on the left and send on the right. As soon as the text wraps or files are added, it grows into a card with the tools underneath, and it settles back when cleared.

Everything is composed from parts. Use only the textarea and send button, or add files, menus, a model picker, effort, context usage, dictation, tool chips and a queue. The parts share one context, so they work together without wiring.

  • Grows with you. Auto height with field-sizing, a compact single line that becomes a card when text wraps or tools crowd it, and a smooth height change instead of a jump.
  • Enter that respects typing. Enter sends and Shift+Enter adds a line. Composition with Japanese, Chinese or Korean input is never interrupted. On touch screens Enter adds a line, because the keyboard has no Shift.
  • Never drops a key. The textarea stays uncontrolled by animations and menus, inserts use the browser’s own undo stack, and typing anywhere on the page can jump into the field with focusOnType.
  • Files. Paste, drop anywhere with globalDrop, or pick from the + menu. Images get previews, uploads show progress and can be retried or cancelled, and limits reject files with a reason you can show.
  • Long pastes. Text longer than pasteLimit becomes a “Pasted text” attachment with a line count, which can be previewed or put back inline.
  • Mentions and commands. A menu opens at the caret for any trigger. @ mentions become chips, / commands insert text, and the list filters and highlights as you type.
  • Model, effort and context. A model picker with 1–9 shortcuts, an effort slider with haptics that comes alive at Max, an extended-thinking switch, and a ring that shows how full the context window is.
  • Dictation. A live waveform while recording, then the transcript lands in the field and can send itself. Uses the browser’s speech recognition, or your own model through transcribe.
  • Queue. Messages sent while a reply streams wait in a queue, can be sent now or removed, and go out in order when the reply ends.
  • Drafts. With draftKey, unsent text survives reloads and is cleared once sent.
  • Up to edit. Press ↑ in an empty field to bring back your last message, through onEditLast.

Installation

  1. Add the Pro registry to components.json

    components.json
    {
  "registries": {
    "@hextaui-pro": {
      "url": "https://hextaui.com/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${HEXTAUI_PRO_TOKEN}"
      }
    }
  }
}

  2. Add your token

    Create a token on your account page and put it in .env.local as HEXTAUI_PRO_TOKEN.

  3. Add the block

    pnpm dlx shadcn@latest add @hextaui-pro/prompt-input

Usage

With the AI SDK

Pass useChat’s status and stop. Files arrive as FileUIPart with a data URL, and a message typed while a reply streams is queued and sent when it finishes.

"use client"

import { useChat } from "@ai-sdk/react"
import type { FileUIPart } from "ai"

import { PromptInputAddMenu } from "@/components/blocks/prompt-input/prompt-controls"
import {
  PromptInput,
  PromptInputAttachments,
  PromptInputBody,
  PromptInputActions,
  PromptInputQueue,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputTools,
  type PromptMessage,
} from "@/components/blocks/prompt-input/prompt-input"

function toDataUrl(file: File) {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(String(reader.result))
    reader.onerror = () => reject(reader.error)
    reader.readAsDataURL(file)
  })
}

export function Composer({ chatId }: { chatId: string }) {
  const { sendMessage, status, stop } = useChat({ id: chatId })

  const send = async ({ text, files }: PromptMessage) => {
    const parts: FileUIPart[] = await Promise.all(
      files.map(async ({ file }) => ({
        type: "file" as const,
        mediaType: file.type,
        filename: file.name,
        url: await toDataUrl(file),
      }))
    )
    await sendMessage({ text, files: parts })
  }

  return (
    <PromptInput
      status={status}
      onStop={stop}
      onSubmit={send}
      accept="image/*,.pdf"
      maxFileSize={20 * 1024 * 1024}
      draftKey={chatId}
    >
      <PromptInputQueue />
      <PromptInputBody>
        <PromptInputAttachments />
        <PromptInputTools>
          <PromptInputAddMenu />
        </PromptInputTools>
        <PromptInputTextarea />
        <PromptInputActions>
          <PromptInputSubmit />
        </PromptInputActions>
      </PromptInputBody>
    </PromptInput>
  )
}

Model, effort and dictation

Put the model picker, effort slider and context ring under the composer with PromptInputMeta. Turn tools on from the + menu and show them as chips. Pass transcribe to send recordings to your own speech model, and autoSend to send as soon as the text lands.

"use client"

import * as React from "react"
import { IconWorld } from "@tabler/icons-react"

import { DropdownMenuCheckboxItem } from "@/components/ui/dropdown-menu"

import {
  PromptInputAddMenu,
  PromptInputContextUsage,
  PromptInputDictation,
  PromptInputEffort,
  PromptInputMeta,
  PromptInputModelSelect,
  PromptInputTool,
} from "@/components/blocks/prompt-input/prompt-controls"
import {
  PromptInput,
  PromptInputActions,
  PromptInputAttachments,
  PromptInputBody,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputTools,
  type PromptMessage,
} from "@/components/blocks/prompt-input/prompt-input"

const models = [
  { value: "large", label: "Large" },
  { value: "small", label: "Small" },
]

const efforts = [
  { value: "low", label: "Low" },
  { value: "medium", label: "Medium" },
  { value: "high", label: "High" },
  { value: "max", label: "Max" },
]

export function Composer({
  onSend,
  contextUsed,
  transcribe,
}: {
  onSend: (message: PromptMessage) => void
  contextUsed: number
  transcribe: (audio: Blob) => Promise<string>
}) {
  const [model, setModel] = React.useState("large")
  const [effort, setEffort] = React.useState("medium")
  const [thinking, setThinking] = React.useState(true)
  const [search, setSearch] = React.useState(false)

  return (
    <PromptInput onSubmit={onSend} focusOnType>
      <PromptInputBody>
        <PromptInputAttachments />
        <PromptInputTools>
          <PromptInputAddMenu>
            <DropdownMenuCheckboxItem
              indicator="end"
              checked={search}
              onCheckedChange={setSearch}
            >
              <IconWorld />
              Web search
            </DropdownMenuCheckboxItem>
          </PromptInputAddMenu>
          {search ? (
            <PromptInputTool
              icon={<IconWorld />}
              tone="blue"
              onRemove={() => setSearch(false)}
            >
              Search
            </PromptInputTool>
          ) : null}
        </PromptInputTools>
        <PromptInputTextarea autoFocus />
        <PromptInputActions>
          <PromptInputDictation transcribe={transcribe} autoSend />
          <PromptInputSubmit />
        </PromptInputActions>
      </PromptInputBody>
      <PromptInputMeta>
        <PromptInputModelSelect
          models={models}
          value={model}
          onValueChange={setModel}
        />
        <PromptInputEffort
          levels={efforts}
          value={effort}
          onValueChange={setEffort}
          recommended="medium"
          thinking={thinking}
          onThinkingChange={setThinking}
        />
        <PromptInputContextUsage used={contextUsed} limit={200000} />
      </PromptInputMeta>
    </PromptInput>
  )
}

Mentions and commands

Add a menu per trigger. @ turns a pick into a chip above the text, and / inserts the command. Arrow keys move, Enter or Tab picks and Escape closes, all without leaving the text.

"use client"

import { IconBrandTypescript, IconTrash } from "@tabler/icons-react"

import {
  PromptInput,
  PromptInputAttachments,
  PromptInputBody,
  PromptInputActions,
  PromptInputSubmit,
  PromptInputTextarea,
  type PromptMessage,
} from "@/components/blocks/prompt-input/prompt-input"
import { PromptInputMenu, type PromptMenuItem } from "@/components/blocks/prompt-input/prompt-menu"

const files: PromptMenuItem[] = [
  {
    value: "app/page.tsx",
    label: "page.tsx",
    description: "app",
    icon: <IconBrandTypescript />,
  },
  {
    value: "lib/utils.ts",
    label: "utils.ts",
    description: "lib",
    icon: <IconBrandTypescript />,
  },
]

const commands: PromptMenuItem[] = [
  { value: "explain", label: "explain", description: "Explain code step by step" },
  { value: "test", label: "test", description: "Write tests for a file" },
  {
    value: "clear",
    label: "clear",
    description: "Start a new conversation",
    icon: <IconTrash />,
    insert: "",
  },
]

export function Composer({
  onSend,
  onClear,
}: {
  onSend: (message: PromptMessage) => void
  onClear: () => void
}) {
  return (
    <PromptInput onSubmit={onSend}>
      <PromptInputBody>
        <PromptInputAttachments />
        <PromptInputTextarea placeholder="Ask anything, @ to add files, / for commands" />
        <PromptInputActions>
          <PromptInputSubmit />
        </PromptInputActions>
      </PromptInputBody>
      <PromptInputMenu trigger="@" items={files} />
      <PromptInputMenu
        trigger="/"
        items={commands}
        onSelect={(item) => {
          if (item.value === "clear") onClear()
        }}
      />
    </PromptInput>
  )
}

Uploading files

Give upload a function that reports progress and honours the abort signal. Throw UploadError with retryable: false for errors a retry can’t fix, like a file that’s too large for the server.

"use client"

import {
  PromptInput,
  PromptInputAttachments,
  PromptInputBody,
  PromptInputActions,
  PromptInputSubmit,
  PromptInputTextarea,
  PromptInputTools,
  type PromptMessage,
} from "@/components/blocks/prompt-input/prompt-input"
import { PromptInputAddMenu } from "@/components/blocks/prompt-input/prompt-controls"
import { UploadError, type PromptUpload } from "@/components/blocks/prompt-input/use-prompt-files"

const upload: PromptUpload = (file, { signal, onProgress }) =>
  new Promise((resolve, reject) => {
    const request = new XMLHttpRequest()
    request.open("POST", "/api/upload")
    request.upload.onprogress = (event) => {
      if (event.lengthComputable) onProgress((event.loaded / event.total) * 100)
    }
    request.onload = () => {
      if (request.status < 300) {
        resolve(JSON.parse(request.responseText))
        return
      }
      reject(
        new UploadError(
          request.status === 413 ? "Too large for the server" : "Upload failed",
          { retryable: request.status === 429 || request.status >= 500 }
        )
      )
    }
    request.onerror = () => reject(new UploadError("Network error. Try again."))
    signal.addEventListener("abort", () => request.abort())
    const body = new FormData()
    body.append("file", file)
    request.send(body)
  })

export function Composer({ onSend }: { onSend: (message: PromptMessage) => void }) {
  return (
    <PromptInput
      onSubmit={onSend}
      upload={upload}
      accept="image/*,.pdf,.csv"
      maxFiles={5}
      maxFileSize={25 * 1024 * 1024}
      globalDrop
    >
      <PromptInputBody>
        <PromptInputAttachments />
        <PromptInputTools>
          <PromptInputAddMenu />
        </PromptInputTools>
        <PromptInputTextarea />
        <PromptInputActions>
          <PromptInputSubmit />
        </PromptInputActions>
      </PromptInputBody>
    </PromptInput>
  )
}

Anatomy

The parts you compose, from the outside in.

PartDescription
PromptInputThe form and shared state: text, files, mentions, queue and status.
PromptInputBodyThe rounded surface that changes between compact and expanded.
PromptInputTextareaThe field. All keyboard handling lives here.
PromptInputToolsLeft side: the + menu and tool chips.
PromptInputActionsRight side: dictation and send.
PromptInputSubmitSend, stop or queue, depending on status and text.
PromptInputAttachmentsFile and mention chips above the text.
PromptInputMenuA caret menu for one trigger character.
PromptInputMetaThe row under the composer for the model, effort and context controls.
PromptInputQueue, PromptInputSuggestions, PromptInputMeterQueued messages, starter prompts and a character meter near maxLength.

API reference

PromptInput

Also accepts every form prop except onSubmit and defaultValue.

PropTypeDefault
onSubmitReceives { text, files, mentions }. Return a promise to keep the text until it resolves.
(message: PromptMessage) => void | Promise<unknown>–
statusPass useChat’s status. While busy, send becomes stop or queue.
"ready" | "submitted" | "streaming" | "error""ready"
onStopCalled from the stop button or Escape.
() => void–
onEditLastReturn the last message to load it with ↑ in an empty field.
() => string | void–
valueControlled text.
string–
defaultValueInitial text.
string""
onValueChangeCalled as the text changes.
(value: string) => void–
submitOnWhich key sends. ⌘↵ always sends.
"enter" | "mod+enter""enter"
pasteLimitCharacters before a paste becomes an attachment.
number | false5000
maxLengthHard limit, shown by PromptInputMeter.
number–
draftKeySaves unsent text to local storage under this key.
string–
globalDropAccept files dropped anywhere on the page.
booleanfalse
focusOnTypeTyping while nothing else has focus starts typing here.
booleanfalse
layoutForce a layout instead of switching.
"auto" | "compact" | "expanded""auto"
acceptAccepted file types, like the input attribute.
string–
maxFilesMost files at once.
number–
maxFileSizeLargest file in bytes.
number–
uploadUploads each file. Throw UploadError with retryable: false for permanent failures.
(file, { signal, onProgress }) => Promise<unknown>–
onRejectCalled for files over a limit or of the wrong type.
(file: File, reason: string) => void–
disabledDisables the whole composer.
booleanfalse

PromptInputMenu

PropTypeDefault
triggerThe character that opens it, such as @ or /.
string–
items{ value, label, description?, icon?, hint?, keywords?, insert? }
PromptMenuItem[]–
modeMentions add a chip; text inserts insert ?? label.
"mention" | "text"–
labelSection label at the top of the menu.
string–
limitMost rows shown.
number–
onSelectCalled after a pick.
(item: PromptMenuItem) => void–

PromptInputModelSelect

PropTypeDefault
modelsThe first nine get 1–9 shortcuts.
{ value, label }[]–
valueSelected model.
string–
onValueChangeCalled on pick.
(value: string) => void–

PromptInputEffort

PropTypeDefault
levelsFrom least to most.
{ value, label }[]–
valueSelected level.
string–
onValueChangeCalled as the slider moves.
(value: string) => void–
recommendedMarks one level as recommended.
string–
thinkingShows the extended-thinking switch when set.
boolean–
onThinkingChangeCalled from the switch.
(thinking: boolean) => void–
thinkingLabelSwitch label.
string–
descriptionHelp text in the tooltip.
string–

PromptInputContextUsage

PropTypeDefault
usedTokens used.
number–
limitContext window size.
number–
limitsExtra rows, such as plan usage.
{ label, used, detail? }[]–
limitsLabelHeading for those rows.
string–

PromptInputDictation

PropTypeDefault
transcribeSend the recording to your speech model. Without it, the browser’s speech recognition is used.
(audio: Blob) => Promise<string>–
shortcutStarts and finishes a recording from anywhere.
string | false"ctrl+shift+d"
autoSendSend as soon as the transcript lands.
booleanfalse

PromptInputTool

PropTypeDefault
iconShown in the chip, and replaced by × on hover.
ReactNode–
childrenTool name.
string–
toneChip color.
"blue" | "green" | "amber" | "violet" | "pink""blue"
onRemoveCalled when the chip is clicked.
() => void–

Keyboard

KeyAction
EnterSends. On touch screens it adds a line instead.
ShiftEnterAdds a line.
⌘EnterAlways sends, even when submitOn is mod+enter.
EscStops a streaming reply, closes a menu, or cancels a recording.
↑In an empty field, brings back your last message when onEditLast is set.
↑↓Moves through an open @ or / menu.
EnterTabPicks the highlighted menu row.
1–9Picks a model while the model menu is open.
←→Moves the effort slider. Home and End jump to the ends.
CtrlShiftDStarts dictation, and inserts the transcript when pressed again.

Accessibility

  • The field has a visible placeholder and an accessible name, and every icon button has a label and tooltip with its shortcut.
  • The caret menu is a combobox with aria-activedescendant, so focus never leaves the text while moving through it.
  • Uploads, rejections, queue changes and dictation are announced through a polite live region.
  • The effort control is a slider with a value text, and it keeps working with arrow keys and Home and End.
  • Inputs are at least 16px on touch screens, so iOS never zooms in on focus.
  • With reduced motion, height changes, the waveform and the effort fill all settle without animating.

Code

8 files, added to components/blocks/prompt-input.