Type @ for sources or / for commands, then press Enter to send.
)}
)
}
```
## Overview [#overview]
Prompt Bar is the field a person types into. On its own it is a text area that grows with its content and a Send button. Each extra is added by passing a prop: `mentions` for an `@` list, `commands` for a `/` list, `models` for a model menu, and `allowAttachments` for files.
When the person sends, `onSubmit` receives the text, the files, and the selected model, and the bar clears. While a reply is in progress, pass `onStop` and Stop takes the place of Send. Prompt Bar does not call a model, upload a file, or cancel a request. What happens to the prompt, and what stopping means, are your application's decisions.
## Anatomy [#anatomy]
`PromptBar` is one component. Installing `prompt-bar` brings [Button](https://www.honestui.com/docs/components/button) and [Menu](https://www.honestui.com/docs/components/menu) along as registry dependencies.
## Behavior [#behavior]
### Sending [#sending]
Enter sends. Shift + Enter adds a line. Send is disabled while there is no text and no file. While a person is composing text with an input method editor, Enter confirms the composition and does not send.
### Suggestions [#suggestions]
Typing `@` or `/` at the start of a word opens the matching list. Typing more filters it: sources match anywhere in the label, commands match from the start. Choosing an item replaces what was typed with `@label` or `/label` and a space, and calls `onItemSelect` so your application can record what the text refers to.
Escape closes the list and leaves the text as typed. The list stays closed until the text changes.
Prompt Bar inserts text. It does not turn a mention into a token or run a command. Read the selection from `onItemSelect`, or parse the text you receive.
### Attachments [#attachments]
With `allowAttachments`, the attach button opens the system file picker, and each chosen file appears as a chip that can be removed. Pass `accept` to limit the file types the picker offers. Prompt Bar does not check file size or type itself, and does not read or upload the files. `onSubmit` receives them as `File` objects.
### Model [#model]
Passing `models` adds a menu. The first model is selected unless you pass `defaultModel` or control it with `model` and `onModelChange`. Each model has an `id` and a `label`, and can have a `description` shown beside it and an `icon` shown before it.
### Stopping [#stopping]
Pass `onStop` while a reply is in progress, and leave it out the rest of the time. While it is passed, the Send button becomes Stop and calls your handler. Cancelling the request is your application's work, and so is leaving `onStop` out once the reply has ended.
Typing stays possible while Stop is shown, so the next prompt can be written during a reply. Enter does not send it until the reply has ended or been stopped. The draft is kept either way.
Stop and Send are one button, so focus does not move when a reply starts. After Stop is pressed, focus moves to the text area.
### Disabled [#disabled]
`disabled` blocks typing, attaching, and sending, and dims the bar. Use it while the bar cannot be used at all, such as before a conversation has loaded, or during a reply that cannot be stopped. The typed text is kept. Stop still works while the bar is disabled.
## Accessibility [#accessibility]
The bar is a form, the input is a native text area named "Prompt", and Send is a submit button. Attach, Send, and each remove button have names. While `onStop` is passed, the same button is named "Stop". The model button is read as "Model: " followed by the selection.
When `mentions` or `commands` are passed, the text area stays a text box and points at the list with `aria-controls`. Focus stays in the text area while the list is open. The active option is exposed through `aria-activedescendant`, and a polite status region says how many suggestions there are, or that nothing matches.
Every string comes from `labels`.
This behavior has been checked with a keyboard. It has not been checked with a screen reader yet, and suggestions on a multi-line field are read differently across them. Test it with the screen readers your product supports before you rely on it.
| Key | Action |
| ----------------------------------- | ----------------------------------------------------------- |
| Enter | Send, or choose the active suggestion when the list is open |
| Shift + Enter | Add a line |
| ↓ and ↑ | Move through an open list |
| Tab | Choose the active suggestion when the list is open |
| Escape | Close the list |
## Installation [#installation]
Add the components it is built from.
Copy and paste this file into your project.
### components/ai/prompt-bar.tsx
```tsx
"use client"
import * as React from "react"
import {
ArrowUp as ArrowUpIcon,
ChevronDown as ChevronDownIcon,
File as FileIcon,
Paperclip as PaperclipIcon,
Square as SquareIcon,
X as CloseIcon,
} from "honestui/icons"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
Menu,
MenuPopup,
MenuRadioGroup,
MenuRadioItem,
MenuTrigger,
} from "@/components/ui/menu"
export type PromptBarItem = {
id: string
/** The text inserted after the trigger character, and matched against what is typed. */
label: string
description?: string
icon?: React.ReactNode
}
export type PromptBarModel = {
id: string
label: string
description?: string
/** Shown before the label, such as the logo of the model's maker. Decorative: the label names the model. */
icon?: React.ReactNode
}
export type PromptBarSubmission = {
/** The prompt, trimmed. */
text: string
attachments: File[]
/** The selected model's `id`, when `models` is passed. */
model: string | undefined
}
export type PromptBarLabels = {
prompt: string
send: string
stop: string
attach: string
attachments: string
removeAttachment: (name: string) => string
model: string
mentions: string
commands: string
noMatches: (query: string) => string
suggestionCount: (count: number) => string
}
export const defaultPromptBarLabels: PromptBarLabels = {
prompt: "Prompt",
send: "Send",
stop: "Stop",
attach: "Attach files",
attachments: "Attachments",
removeAttachment: (name) => `Remove ${name}`,
model: "Model",
mentions: "Sources",
commands: "Commands",
noMatches: (query) => `No matches for “${query}”.`,
suggestionCount: (count) => (count === 1 ? "1 suggestion" : `${count} suggestions`),
}
const MAX_INPUT_HEIGHT = 160
const bodyText =
"[font-size:var(--hui-font-size-regular)] [letter-spacing:var(--hui-letter-spacing-regular)] [line-height:var(--hui-line-height-regular)]"
const smallText =
"[font-size:var(--hui-font-size-small)] [letter-spacing:var(--hui-letter-spacing-small)] [line-height:var(--hui-line-height-small)]"
type Suggestion = {
kind: "mention" | "command"
/** Where the trigger character sits in the text. */
start: number
query: string
}
/** Finds an `@word` or `/word` that ends at the caret and starts a word. */
function findSuggestion(text: string, caret: number): Suggestion | null {
const match = /(^|\s)([@/])([\w-]*)$/.exec(text.slice(0, caret))
if (!match) return null
return {
kind: match[2] === "@" ? "mention" : "command",
start: match.index + match[1].length,
query: match[3].toLowerCase(),
}
}
function useControllableState(
controlled: T | undefined,
defaultValue: T,
onChange: ((value: T) => void) | undefined
) {
const [uncontrolled, setUncontrolled] = React.useState(defaultValue)
const value = controlled !== undefined ? controlled : uncontrolled
const setValue = (next: T) => {
if (controlled === undefined) setUncontrolled(next)
onChange?.(next)
}
return [value, setValue] as const
}
export type PromptBarProps = Omit<
React.ComponentProps<"form">,
"children" | "onSubmit" | "defaultValue"
> & {
value?: string
defaultValue?: string
onValueChange?: (value: string) => void
/** Receives the prompt when the person sends it. The bar then clears. */
onSubmit: (submission: PromptBarSubmission) => void
placeholder?: string
/** Blocks typing and sending, for example while a reply is streaming. */
disabled?: boolean
/** Pass it only while a reply is in progress. Stop then takes the place of Send. */
onStop?: () => void
/** Offered after the person types `@`. */
mentions?: PromptBarItem[]
/** Offered after the person types `/`. */
commands?: PromptBarItem[]
/** Called when a suggestion is inserted, so you can track what the text refers to. */
onItemSelect?: (item: PromptBarItem, kind: "mention" | "command") => void
/** Passing models adds the model menu. */
models?: PromptBarModel[]
model?: string
defaultModel?: string
onModelChange?: (model: string) => void
/** Adds the attach button and the list of chosen files. */
allowAttachments?: boolean
attachments?: File[]
onAttachmentsChange?: (attachments: File[]) => void
/** Passed to the file input, such as "image/*,.pdf". */
accept?: string
/** Extra controls placed before Send, such as a dictation button you wire up. */
actions?: React.ReactNode
labels?: Partial
}
/**
* A prompt field with optional `@` and `/` suggestions, attachments, a model
* menu, and a Stop button. It collects the prompt and hands it to `onSubmit`;
* the request, the reply, and cancelling it are your application's.
*/
function PromptBar({
value: valueProp,
defaultValue = "",
onValueChange,
onSubmit,
placeholder,
disabled = false,
onStop,
mentions,
commands,
onItemSelect,
models,
model: modelProp,
defaultModel,
onModelChange,
allowAttachments = false,
attachments: attachmentsProp,
onAttachmentsChange,
accept,
actions,
labels: labelsProp,
className,
...props
}: PromptBarProps) {
const labels = React.useMemo(
() => ({ ...defaultPromptBarLabels, ...labelsProp }),
[labelsProp]
)
const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange)
const [model, setModel] = useControllableState(
modelProp,
defaultModel ?? models?.[0]?.id ?? "",
onModelChange
)
const [attachments, setAttachments] = useControllableState(
attachmentsProp,
[],
onAttachmentsChange
)
const [caret, setCaret] = React.useState(value.length)
const [activeIndex, setActiveIndex] = React.useState(0)
// Escape closes the suggestions until the text changes again.
const [dismissedAt, setDismissedAt] = React.useState(null)
const inputRef = React.useRef(null)
const fileInputRef = React.useRef(null)
const sendButtonRef = React.useRef(null)
const shouldRefocusInput = React.useRef(false)
const pendingCaret = React.useRef(null)
const listId = React.useId()
const hasSuggestions = Boolean(mentions?.length || commands?.length)
const suggestion = dismissedAt === value ? null : findSuggestion(value, caret)
const source = suggestion?.kind === "mention" ? mentions : commands
const matches = React.useMemo(() => {
if (!suggestion || !source?.length) return []
return source.filter((item) => {
const label = item.label.toLowerCase()
return suggestion.kind === "mention"
? label.includes(suggestion.query)
: label.startsWith(suggestion.query)
})
}, [suggestion, source])
const isMenuOpen = Boolean(suggestion && source?.length)
const activeItem = matches[Math.min(activeIndex, matches.length - 1)]
React.useLayoutEffect(() => {
const input = inputRef.current
if (!input) return
// Grow with the text up to a limit, then scroll.
input.style.height = "0px"
input.style.height = `${Math.min(input.scrollHeight, MAX_INPUT_HEIGHT)}px`
input.style.overflowY = input.scrollHeight > MAX_INPUT_HEIGHT ? "auto" : "hidden"
if (pendingCaret.current !== null) {
input.setSelectionRange(pendingCaret.current, pendingCaret.current)
pendingCaret.current = null
}
}, [value])
const changeValue = (next: string, nextCaret: number) => {
setValue(next)
setCaret(nextCaret)
setActiveIndex(0)
setDismissedAt(null)
}
const insertItem = (item: PromptBarItem) => {
if (!suggestion) return
const trigger = suggestion.kind === "mention" ? "@" : "/"
const inserted = `${trigger}${item.label} `
const nextCaret = suggestion.start + inserted.length
pendingCaret.current = nextCaret
changeValue(value.slice(0, suggestion.start) + inserted + value.slice(caret), nextCaret)
onItemSelect?.(item, suggestion.kind)
inputRef.current?.focus()
}
const text = value.trim()
const isStoppable = onStop !== undefined
const canSend = !disabled && !isStoppable && (text !== "" || attachments.length > 0)
// Stop becomes Send again, often a disabled one. Hand focus to the field once
// it can take it, unless the person has already moved somewhere else.
React.useEffect(() => {
if (!shouldRefocusInput.current || isStoppable || disabled) return
shouldRefocusInput.current = false
if (document.activeElement === sendButtonRef.current) inputRef.current?.focus()
}, [isStoppable, disabled])
const send = () => {
if (!canSend) return
onSubmit({ text, attachments, model: models?.length ? model : undefined })
changeValue("", 0)
setAttachments([])
}
const handleKeyDown = (event: React.KeyboardEvent) => {
// Enter confirms an in-progress IME composition; it must not send or pick.
if (event.nativeEvent.isComposing) return
if (isMenuOpen) {
if (event.key === "Escape") {
event.preventDefault()
setDismissedAt(value)
return
}
if (matches.length > 0) {
if (event.key === "ArrowDown" || event.key === "ArrowUp") {
event.preventDefault()
const step = event.key === "ArrowDown" ? 1 : matches.length - 1
setActiveIndex((current) => (Math.min(current, matches.length - 1) + step) % matches.length)
return
}
if ((event.key === "Enter" && !event.shiftKey) || event.key === "Tab") {
event.preventDefault()
if (activeItem) insertItem(activeItem)
return
}
}
}
if (event.key === "Enter" && !event.shiftKey) {
event.preventDefault()
send()
}
}
const optionId = (item: PromptBarItem) => `${listId}-${item.id}`
const selectedModel = models?.find((item) => item.id === model)
return (