Props

Prop	Type	Default	Description
v-model	string	—	The draft. Bound with v-model, the composer renders exactly that string; left unbound, it keeps the draft itself.
placeholder	string	Localized “Type a message…”	Text shown while the draft is empty.
isDisabled	boolean	false	Stops editing and sending. A visible stop button stays reachable, so the reader can still cancel a reply.
density	ChatComposerDensity	'balanced'	Spacing inside the body. compact, balanced, or spacious.
elevation	'none' | 'low'	'low'	low is raised and deepens on hover and focus. none is flat and draws a border. Keyboard focus in the editor adds the shared focus ring either way; pointer focus does not.
isStopShown	boolean	false	Swaps the send action for stop. Use it while a reply is still streaming in.
status	ChatComposerStatus	—	Feedback object, { type: 'error' | 'warning', message }. The error type is announced as an alert, the warning type as a status.
statusPosition	'top' | 'bottom'	'bottom'	Which side of the body the status sits on.

Events

Event	Payload	Description
submit	string	A trimmed, non-empty draft was submitted. The draft is then cleared.
stop	—	The stop action was activated.
change	string	The draft changed, including the clear after a successful submit.
update:modelValue	string	The draft the composer is asking for. This is what v-model binds.

Slots

Slot	Description
drawer	Collapsible content above the body. Usually ChatComposerDrawer.
headerActions	Start side of the header. Small icon buttons line up with the row.
headerContext	End side of the header. Context such as a usage meter.
input	Replaces the default token input. Read the draft from useChatComposerContext.
footerActions	Start side of the footer. Medium buttons match the send button.
sendActions	Sits just before the send button, for example a dictation or microphone button.
sendButton	Replaces the default send and stop button.

Exposed

Name	Type	Description
element	HTMLElement | null	The root frame, for measuring or scrolling.