# Prompt Input

A self-contained chat composer with auto-resizing text input, a send button, starter suggestions, and an extensible toolbar — ready to drop into any framework or plain HTML.

<p class="kai-tag-sub">kai-prompt-input</p>

A Shadow DOM chat composer — an auto-growing rich input, send button, suggestion chips, attachments, and an extensible toolbar. It supports inline <strong>entity pills</strong> (skills, agents, plugins) and drops into any framework without style conflicts.

## Preview

> **tip:** 
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:

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

<script type="module">

  await customElements.whenDefined('kai-prompt-input');

  const input = document.getElementById('input');

  input.suggestions = ['Summarize this thread', 'Draft a reply'];
  // `/` inserts skill pills, `@` opens an agent/plugin menu.
  input.triggers = [
    { char: '/', kind: 'skill', items: [{ id: 'summarize', label: 'Summarize', description: 'Summarize the thread' }] },
    { char: '@', kind: 'agent', items: [{ id: 'code-reviewer', label: 'Code Reviewer', group: 'Agents' }] },
  ];

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

- **Array / object props** — `suggestions`, `triggers`, `kindIcons`, and `attachments` are arrays/objects, so set them in JavaScript rather than as HTML attributes.
- **Scalar flags** — `placeholder`, `disabled`, `loading`, `search`, `voice`, `stoppable`, 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`.
- **Entity pills** — set `triggers` to let `/` and `@` insert atomic skill/agent/plugin pills. `kai-submit` and `kai-value-change` then carry the structured `doc` + `entities` alongside the flattened `value` string. See [`<kai-composer>`](/components/composer/) for the full pill model.
- **Pre-populate pills** — set `value` to an array of segments (`{ type: 'text', text }` and `{ type: 'entity', entity }`) instead of a string to seed pills programmatically; the user edits from there. The prop tables call that shape a **ComposerDoc**; it is a structural type, not something you import.

## Examples

### Default

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

### With Voice and Search

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

### Entity Pills

Set `triggers` so `/` inserts a skill and `@` opens a sectioned menu of agents and plugins. Each selection becomes an atomic pill; Backspace deletes one whole. `kai-submit` carries the structured `doc` + `entities`.

### Pre-Populated Pills

Set `value` to a **ComposerDoc** to seed pills programmatically — handy for "edit this message" or templated drafts. The pills render on mount and stay editable; submit still emits the flattened `value` plus the structured `doc` + `entities`.

### 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.

### Loading State

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

### Disabled

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

## Slots

Project controls into the input's shadow: a status strip above the textarea, or leading/trailing toolbar clusters — where a `+` menu or a model switcher goes.

## Styling

Restyle the send button via `::part(send)`, or hide it for an Enter-only composer.

## Props

## Events

## Methods