🌏 Translated with the assistance of DeepSeek and ChatGPT

Prompt

A rich input component for AI conversations, supporting adaptive multi-line input, chip mentions, attachment upload, speech input and a customizable toolbar.

Full Example

The input is kept by modelValue for the text and by content for the chips; chipConfig configures the mention triggers and candidates (see PromptChip), uploadConfig enables the attachment upload (see PromptAttachment), and speechConfig enables the speech input (see PromptSpeech). The toolbar is composed through the start, end and send slots: PromptAction, PromptSwitch and PromptSelect provide the actions, the switches and the dropdown selection (see PromptAction), and PromptSend provides the send entry (see PromptSend).

Speech Mode

Click

Hold

Prompt State

Normal

Readonly

Disabled

Ask anything, type @ or / to mention

0 / 200

Hide source code

Caret and Text Operations

Beyond focus and blur, the ref exposes methods that operate on the input directly: setCaret and placeCaretAtEnd move the caret, select selects everything, insertText inserts text at the caret, removeText removes characters before it, and insertChip inserts a chip (see PromptChip). disabled and readonly only block user input; these methods still work, consistent with a native input. The following example turns them all into buttons.

value: Hello Pixelium

Hide source code

API

PromptCounterConfig

Attribute	Type	Optional	Default	Description	Version
maxLength	number	True		The maximum length of the input.	0.2.1
countGraphemes	(value: string) => number	True		Custom function that counts the length of the text.	0.2.1
sliceGraphemes	(value: string, limit: number) => string	True		Custom function that slices the text with a length limit.	0.2.1

PromptProps

Attribute	Type	Optional	Default	Description	Version
modelValue	string | null	True		The input text of Prompt.	0.2.1
defaultValue	string | null	True		The initial input text in uncontrolled mode.	0.2.1
content	PromptContent | null	True		The input content of Prompt, holding both text and chip segments.	0.2.1
defaultContent	PromptContent | null	True		The initial input content in uncontrolled mode.	0.2.1
shape	'rect' | 'round'	True	'round'	The appearance shape of Prompt.	0.2.1
borderRadius	NumberOrPercentage | NumberOrPercentage[]	True		The corner radius of Prompt, accepting numbers, percentages or an array for the four corners.	0.2.1
disabled	boolean	True	false	Whether Prompt is disabled.	0.2.1
readonly	boolean	True	false	Whether Prompt is read only.	0.2.1
loading	boolean	True	false	Whether Prompt is submitting.	0.2.1
cancellable	boolean	True	true	Whether the submission can be aborted while Prompt is loading.	0.2.1
placeholder	string	True		The placeholder text shown while the input is empty.	0.2.1
autoSize	boolean	True	true	Whether the input area grows automatically with the content.	0.2.1
minRow	number	True	1	The minimum number of rows of the input area.	0.2.1
maxRow	number	True	Infinity	The maximum number of rows of the input area.	0.2.1
counterConfig	PromptCounterConfig	True		The configuration of the word counter; the counter area is shown once it is given.	0.2.1
submitKey	PromptSubmitKey	True	'ctrl+enter'	The key combination that submits the content.	0.2.1
newlineKey	PromptSubmitKey	True	'enter'	The key combination that inserts a new line.	0.2.1
requireContent	boolean	True	true	Whether submitting is forbidden while the input is empty.	0.2.1
clearOnSubmit	boolean	True	false	Whether the input is cleared after a submission.	0.2.1
uploadConfig	PromptUploadConfig	True		The configuration of the attachment upload; the attachment ability is enabled once it is given. See PromptAttachment.	0.2.1
speechConfig	PromptSpeechConfig	True		The configuration of the speech input; the speech ability is enabled once it is given. See PromptSpeech.	0.2.1
chipConfig	PromptChipConfig	True		The configuration of the chip mentions; see PromptChip.	0.2.1

PromptEvents

Event	Parameter	Description	Version
update:modelValue	value: string	Triggered when the input text changes.	0.2.1
input	value: string, e: Event	Triggered while typing in the input area.	0.2.1
change	value: string, e: Event | undefined	Triggered when the input area loses focus after the content changed.	0.2.1
submit	value: string, e: KeyboardEvent | MouseEvent | undefined	Triggered on submission, fired by the send entry, the submit key and the submit method alike.	0.2.1
cancel	e: MouseEvent | undefined	Triggered when the abort entry is clicked while Prompt is loading.	0.2.1
clear	value: string	Triggered when the input is cleared.	0.2.1
focus	e: FocusEvent	Triggered when the input area gains focus.	0.2.1
blur	e: FocusEvent	Triggered when the input area loses focus.	0.2.1
keydown	e: KeyboardEvent	Triggered when a key is pressed in the input area.	0.2.1
paste	e: ClipboardEvent	Triggered when content is pasted into the input area.	0.2.1
update:content	content: PromptContent	Triggered when the text or the chips of the content change.	0.2.1
chipAdd	chip: PromptChip	Triggered when a chip is inserted.	0.2.1
chipRemove	chip: PromptChip	Triggered when a chip is removed.	0.2.1
trigger	payload: PromptTriggerPayload	Triggered when a mention trigger character is typed.	0.2.1
select	option: string | PromptOption, e: MouseEvent | KeyboardEvent	Triggered when an option is chosen from the candidate list.	0.2.1

PromptSlots

Slot	Parameter	Description	Version
attachment	upload: PromptUploadScope	The attachment area, holding PromptAttachment and other attachment content; its scope provides the attachment actions, and the actions run on every matching file when no file is given.	0.2.1
footer	upload: PromptUploadScope, send: PromptSendScope, speech: PromptSpeechScope	The bottom row area, composed of the start, end and send slots by default and replaced as a whole when overridden; its scope provides the attachment actions, and the actions run on every matching file when no file is given.	0.2.1
start	upload: PromptUploadScope, send: PromptSendScope, speech: PromptSpeechScope	The leading area of the toolbar, whose scope provides the attachment actions, and the actions run on every matching file when no file is given.	0.2.1
end	upload: PromptUploadScope, send: PromptSendScope, speech: PromptSpeechScope	The trailing area of the toolbar, placed before the send entry, whose scope provides the attachment actions, and the actions run on every matching file when no file is given.	0.2.1
send	upload: PromptUploadScope, send: PromptSendScope, speech: PromptSpeechScope	The send entry area, whose scope provides the attachment actions, and the actions run on every matching file when no file is given.	0.2.1
count	value: string, count: number, maxLength: number | undefined	The counter area.	0.2.1
chip-option	option: string | PromptOption	The content of an option in the candidate list.	0.2.1
chip-group-label	option: PromptGroupOption	The content of a group label in the candidate list.	0.2.1
speech-panel	speech: PromptSpeechScope	The speech recording panel area, replacing the internal PromptSpeechPanel.	0.2.1
speech-cancel	speech: PromptSpeechScope	The cancel entry of the speech recording panel.	0.2.1
speech-visualizer	speech: PromptSpeechScope	The visualizer area of the speech recording panel.	0.2.1
speech-text	speech: PromptSpeechScope	The live text area of the speech recognition.	0.2.1
speech-accept	speech: PromptSpeechScope	The confirm entry of the speech recording panel.	0.2.1

PromptExpose

Attribute	Type	Optional	Default	Description	Version
focus	() => void	False		Focuses the input area.	0.2.1
blur	() => void	False		Removes the focus from the input area.	0.2.1
clear	() => void	False		Clears the input.	0.2.1
submit	() => void	False		Submits the current input.	0.2.1
select	() => void	False		Selects everything inside the input area.	0.2.1
setCaret	(position: PromptCaretPosition) => void	False			0.2.1
placeCaretAtEnd	() => void	False		Moves the caret to the end of the input.	0.2.1
insertChip	(chip: PromptChip) => void	False		Inserts a chip at the caret.	0.2.1
removeChip	(id: number | string | symbol) => void	False		Removes the chip with the given id.	0.2.1
insertText	(text: string) => void	False		Inserts text at the caret.	0.2.1
removeText	(length: number) => void	False		Removes length characters before the caret; a chip covered by the range is removed as a whole.	0.2.1
getContent	() => PromptContent	False		Reads the current input content.	0.2.1
setContent	(content: PromptContent) => void	False		Overwrites the current input content.	0.2.1

PromptSubmitModifier

export type PromptSubmitModifier =
	| 'ctrl'
	| 'control'
	| 'meta'
	| 'cmd'
	| 'command'
	| 'alt'
	| 'option'
	| 'shift'

PromptSubmitKey

type SubmitKeyPrefix =
	| PromptSubmitModifier
	| `${PromptSubmitModifier}+${PromptSubmitModifier}`
	| `${PromptSubmitModifier}+${PromptSubmitModifier}+${PromptSubmitModifier}`

export type PromptSubmitKey = 'enter' | `${SubmitKeyPrefix}+enter`

PromptSegment

export type PromptSegment = { type: 'text'; text: string } | { type: 'chip'; chip: PromptChip }

PromptContent

export type PromptContent = PromptSegment[]

PromptCaretPosition

export type PromptCaretPosition = 'start' | 'end' | number

EmitEvent

export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}

RestAttrs

import type { StyleValue } from 'vue'

export type VueClassValue = string | Record<string, any> | VueClassValue[]
export type VueStyleValue = StyleValue

export type RestAttrs = {
	style?: VueStyleValue | null
	class?: VueClassValue | null
	[x: string]: any
}