I9kChatComposer

The free-text answer of an I9kChat footer: a rounded field with a send button. Enter sends; a multiline composer grows with the text and takes Shift+Enter for a new line.

View as MarkdownView source

import { I9kChatComposer } from '@9klabs/design';

Examples

Single line

<I9kChatComposer v-model="name" label="What's your name?" placeholder="Your name" />

Multiline, invalid

Too short

<I9kChatComposer v-model="summary" label="What do you need?" multiline invalid />

Watch out

• The composer does not clear itself after submit; reset the bound value when the answer is accepted.
• Blank and whitespace-only input never emits submit.
• Error text is yours to render; invalid only styles the field and sets aria-invalid.

API

Props

Prop	Type	Default	Required
modelValue	string	''	no
label	string	—	yes
placeholder	string	''	no
sendLabel	string	'Send'	no
multiline	boolean	false	no
maxlength	number	undefined	no
invalid	boolean	false	no
disabled	boolean	false	no

Emits

Event	Payload
update:modelValue	[value: string]
submit	[value: string]

Agent prompt

Paste this into an agent to have it use the component correctly. It is self-contained.

Use I9kChatComposer from @9klabs/design in the footer slot of I9kChat when the answer is typed.

import { I9kChatComposer } from '@9klabs/design';

Props:
- modelValue: string — bind with v-model.
- label: string (required) — accessible name of the field; use the question text.
- placeholder?: string.
- sendLabel?: string (default 'Send') — accessible name of the send button; translate it.
- multiline?: boolean — a textarea that grows up to 10rem; Shift+Enter inserts a line break.
- maxlength?: number.
- invalid?: boolean — accent border and aria-invalid; render your error message next to it.
- disabled?: boolean.

Emits:
- update:modelValue(value: string).
- submit(value: string) — Enter or the send button, only for non-blank input. Validate and clear the model yourself.

Exposes: focus().

Usage:
<p v-if="error" role="alert">{{ error }}</p>
<I9kChatComposer v-model="draft" label="What's your name?" placeholder="Your name" :invalid="!!error" @submit="answer" />