# ChatLauncher

A floating chat bubble for a website that opens a chat panel, full screen on phones.

- **Use it for**: A chat a visitor opens from a corner of your website.
- **Not for**: The main screen of a chat app. Try [Chat](https://unseenui.com/components/chat/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { ChatLauncher } from '@stackunseen/ui/chat';
import '@stackunseen/ui/styles.css';
import '@stackunseen/ui/chat.css';

<ChatLauncher variant="default" open={open} onOpenChange={setOpen} title="Ask Acme"><Chat {...chat} /></ChatLauncher>
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `children` (required) | `ReactNode` | The chat itself, usually <Chat />. |
| `className` | `string` |  |
| `label` | `string` | Accessible name of the bubble. |
| `onOpenChange` (required) | `(open: boolean) => void` |  |
| `open` (required) | `boolean` | Whether the chat panel is open. |
| `placement` | `"bottom-end" \| "bottom-start"` | Which bottom corner the bubble sits in. |
| `title` (required) | `string` | Heading of the panel, such as "Ask Acme". |
| `unread` | `number` | Unread replies, shown on the bubble while the panel is closed. |

## Keyboard

The bubble reports aria-expanded. Opening focuses the composer; Escape or Close returns focus to the bubble. The panel is non-modal, so the page stays usable.

## Works with

[Reasoning](https://unseenui.com/components/reasoning/), [SuggestTextarea](https://unseenui.com/components/suggest-textarea/), [Checkpoint](https://unseenui.com/components/checkpoint/), [SlashCommandMenu](https://unseenui.com/components/slash-command-menu/), [ThreadList](https://unseenui.com/components/thread-list/), [BranchSwitcher](https://unseenui.com/components/branch-switcher/), [MessageQueue](https://unseenui.com/components/message-queue/), [PromptInput](https://unseenui.com/components/prompt-input/), [Message](https://unseenui.com/components/message/), [MessageActions](https://unseenui.com/components/message-actions/), [StreamingResponse](https://unseenui.com/components/streaming-response/), [Suggestions](https://unseenui.com/components/suggestions/)

Page: https://unseenui.com/components/chat-launcher/