# Chat Composer

Message bar with attachments, a field that grows line by line, emoji and camera buttons, and a mic that turns into a send button. Sent text lifts out of the field as a new bubble.

> Composed · Pro · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/chat-composer
```

## Import

```tsx
import { ChatComposer } from "@/components/ui/chat-composer/chat-composer";
```

## Variants

- `messenger` — Messenger: `npx @lumioui/cli add pro/chat-composer-messenger`
- `minimal` — Minimal comment pill: `npx @lumioui/cli add pro/chat-composer-minimal`
- `offer` — Marketplace offer: `npx @lumioui/cli add pro/chat-composer-offer`
- `support` — Support quick actions: `npx @lumioui/cli add pro/chat-composer-support`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `value?` | `string` | — |
| `defaultValue?` | `string` | — |
| `onChangeText?` | `(text: string) => void` | — |
| `onSend?` | `(text: string, replyTo?: ChatComposerReply) => void` | Fires with the trimmed text (and the reply being answered). |
| `placeholder?` | `string` | — |
| `maxLines?` | `number` | Lines the field grows to before it scrolls. Default 5. |
| `onAttachPress?` | `() => void` | — |
| `attachIcon?` | `IconName` | Leading button glyph. Default "plus". |
| `onEmojiPress?` | `() => void` | — |
| `onCameraPress?` | `() => void` | In-field camera — slides away while typing. |
| `onMicPress?` | `() => void` | Mic sits where send goes while the field is empty. Omit to always show send. |
| `replyTo?` | `ChatComposerReply | null` | Quote strip docked above the bar. |
| `onCancelReply?` | `() => void` | — |
| `attachments?` | `ChatComposerAttachment[]` | Queued attachments shown in a tray above the bar. |
| `onRemoveAttachment?` | `(id: string) => void` | — |
| `accessory?` | `React.ReactNode` | Anything that rides above the bar (quick actions, an offer strip). |
| `variant?` | `"docked" | "floating"` | docked — full-width bar with a hairline on top. floating — a single  rounded pill with send inside, for sheets and minimal threads. |
| `disabled?` | `boolean` | Read-only thread: the bar is replaced by this message. |
| `disabledMessage?` | `string` | — |
| `sendLabel?` | `string` | Screen-reader label for send. Default "Send message". |
| `liftOnSend?` | `boolean` | On send, the text lifts out of the field as a bubble rising into the  thread. Turn off when the thread above animates its own arrival. Default true. |
| `className?` | `string` | Classes for the outer wrapper. |

## Icons rendered

- `lock` — /icons.html?i=lock
- `mic` — /icons.html?i=mic
- `arrow-up` — /icons.html?i=arrow-up
- `camera` — /icons.html?i=camera
- `x` — /icons.html?i=x
- `file-text` — /icons.html?i=file-text

Source: https://lumioui.com/components/chat-composer