Prompt Input

kai-prompt-input

A Shadow DOM chat composer — auto-resizing textarea, send button, suggestion chips, attachments, and an extensible toolbar. Drop it into any framework without style conflicts.

• Shadow DOM
• 8 events
• Uncontrolled by default
• Starter suggestions
• Slash-command palette
• Custom toolbar buttons
• Pre-seeded attachments

Preview

When to use

Reach for <kai-prompt-input> whenever you need a chat composer outside of SolidJS — React, Vue, Svelte, Angular, or plain HTML. It manages its own input state uncontrolled by default; listen for kai-submit to receive the typed text and any staged attachments. Pin it to the bottom of a chat surface at full width for the canonical layout.

Usage

Register elements once, then wire up JS properties and DOM events:

<kai-prompt-input id="input" style="display:block; width:100%;"></kai-prompt-input>

<script type="module">
  import '@kitn.ai/ui/elements';
  const input = document.getElementById('input');

  input.suggestions = ['Summarize this thread', 'Draft a reply'];
  input.slashCommands = [
    { id: 'summarize', label: '/summarize', description: 'Summarize', category: 'Actions' },
  ];

  input.addEventListener('kai-submit', (e) => console.log('send:', e.detail.value, e.detail.attachments));
  input.addEventListener('kai-value-change', (e) => console.log('typing:', e.detail.value));
</script>

• Array props — suggestions, slashCommands, slashActiveIds, and attachments are arrays, so set them in JavaScript rather than as HTML attributes.
• Scalar flags — placeholder, disabled, loading, search, voice, stoppable, slashCompact, and suggestionMode work as plain attributes or properties.
• Loading + stoppable — set loading while a response streams; add stoppable to swap the send button for a Stop button that fires kai-stop.
• Custom toolbar buttons — place <kai-action id icon tooltip> children inside the element; clicks fire kai-toolbar-action with detail.action.

Examples

Default

Out-of-the-box composer with starter suggestions. Type and press Enter (or click a chip) to fire kai-submit.

Code

With Voice and Search

search and voice flags add Globe and Mic buttons to the toolbar, firing kai-search and kai-voice respectively.

Code

Slash-Command Palette

Set slashCommands to enable the palette. Typing / opens it; selecting an entry fires kai-slash-select. Use slashActiveIds to highlight active commands.

Code

Pre-Seeded Attachments

Set attachments to pre-populate staged files. The element manages attachment state — the paperclip adds more, each chip has a remove button.

Code

Loading State

loading blocks submit while a response streams. stoppable swaps send for a Stop button that fires kai-stop.

Code

Disabled

disabled makes the composer entirely non-interactive — useful for read-only or locked states.

Code

Props

Property	Type	Default	Notes
value	string	—	Controlled value of the input. When set, the host owns the text and must update it on `kai-value-change`; leave unset for uncontrolled behavior.
placeholder	string	'Send a message...'	Placeholder text shown in the empty input.
disabled	boolean	false	Disable the input and submit button entirely (non-interactive).
loading	boolean	false	Show the loading/streaming state and block submit (use while awaiting a reply).
suggestions	string[]	—	Starter prompts shown above the input. Clicking one follows `suggestionMode`. Set as a JS property.
suggestionMode	"submit" | "fill"	'submit'	What clicking a suggestion does: `'submit'` (default) sends it immediately as if typed and submitted; `'fill'` just places it in the input.
slashCommands	SlashCommandItem[]	—	Slash commands — when set, typing `/` opens the command palette. Set as a JS property.
slashActiveIds	string[]	—	Command ids to highlight as active.
slashCompact	boolean	false	Single-line palette rows.
search	boolean	false	Show a Search (Globe) button in the left toolbar; clicking it fires a `search` event.
voice	boolean	false	Show a Voice (Mic) button in the left toolbar; clicking it fires a `voice` event.
stoppable	boolean	false	When set and `loading` is true, the send button is replaced by a Stop button (square icon, "Stop" aria-label). Clicking it fires `kai-stop`.
attachments	AttachmentData[]	—	Attachments to seed the input with (so a consumer can pre-populate staged files without an upload). Set as a JS property; the element then manages its own attachment state from there (add via the paperclip, remove per chip).

Events

Event	Detail	Notes
kai-search	Record<string, never>	The Search (Globe) toolbar button was clicked.
kai-slash-select	{ … }	A slash command was chosen from the palette.
kai-stop	Record<string, never>	The Stop button was clicked while `stoppable` and `loading` are both true.
kai-submit	{ … }	The user submitted the prompt (Enter or send button) with its attachments.
kai-suggestion-click	{ … }	A suggestion was clicked while `suggestion-mode="fill"`.
kai-toolbar-action	{ … }	A custom `<kai-action>` toolbar button was clicked. `action` is the `id` of the `<kai-action>` element that was clicked.
kai-value-change	{ … }	The input text changed (fires on every keystroke).
kai-voice	Record<string, never>	The Voice (Mic) toolbar button was clicked.

---

Need a hand? Report a bug Ask for help