# Instant Message Compose Dialog
URL: /docs/web/docyrus/instant-message-compose-dialog

A batteries-included launcher that opens the Docyrus InstantMessageComposer (SMS / WhatsApp) inside a dialog, seeded with recipients and body.

**Instant Message Compose Dialog** opens the Docyrus
[`InstantMessageComposer`](/docs/web/components/instant-message-composer) inside a modal, wired to the
tenant SMS / WhatsApp messaging API through
[`useDocyrusInstantMessageComposer`](/docs/web/hooks/use-docyrus-instant-message-composer). Give it a
`client` and an optional `to` / `body` seed and it handles channel switching, account loading,
sending, and a success/error toast.

The composer body only mounts while the dialog is open, so each open re-reads the current seeds and
the account-list queries (`GET /v1/messaging/sms/accounts`, `GET /v1/messaging/whatsapp/accounts`)
fire only when visible. On a successful send it calls `onSent(result)`, shows a toast, and closes.

It is the component behind the inline **send message** action on the `PhoneValue` renderer — pass a
`client` to it (directly or via `useDocyrusFormView` / `useDocyrusDataTable`) and the action lights up
automatically.

**Demo:**

```tsx
'use client';

import { MessageSquare } from 'lucide-react';

import { Button } from '@docyrus/ui/primitives/ui/button';

export function InstantMessageComposeDialogDemo() {
  return (
    <div className="flex w-full flex-col gap-3 rounded-lg border border-dashed border-border p-6 text-sm text-muted-foreground">
      <p>
        <code>{''}</code> requires an authenticated{' '}
        <code>RestApiClient</code> to list SMS / WhatsApp accounts and send. Wire
        it up against your own Docyrus tenant (or the playground) to see it in
        action.
      </p>
      <div>
        
      </div>
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-instant-message-compose-dialog
```

**Dependencies:**
- [@tanstack/react-query](https://www.npmjs.com/package/@tanstack/react-query)
- [lucide-react](https://www.npmjs.com/package/lucide-react)
- [sonner](https://www.npmjs.com/package/sonner)
- [@docyrus/api-client](https://www.npmjs.com/package/@docyrus/api-client)

## Usage

### Standalone

```tsx
import { useDocyrusAuth } from '@docyrus/signin';
import { InstantMessageComposeDialog } from '@docyrus/ui/components/instant-message-compose-dialog';

function ContactActions({ phone }: { phone: string }) {
  const { client } = useDocyrusAuth();

  if (!client) return null;

  return (
    } />
```

### Automatic on phone values and tables

Pass a `client` to the phone value renderer (or let the Docyrus hooks thread it for you) and the send
action appears with no extra wiring:

```tsx
// Value renderer

// Whole form / record detail — useDocyrusFormView threads `client` into every field
const formView = useDocyrusFormView({ client, appSlug, dataSourceSlug, itemId });

// Data table — cells render through the value renderers, so PhoneValue lights up
const table = useDocyrusDataTable({ client, appSlug, dataSourceSlug });
```

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `client` | `RestApiClient` | — | Authenticated Docyrus REST client. **Required.** |
| `to` | `string[]` | — | Pre-filled recipient phone numbers (E.164-style). |
| `body` | `string` | — | Pre-filled message body. |
| `channel` | `'sms' \| 'whatsapp'` | `'sms'` | Initial channel. |
| `availableChannels` | `ReadonlyArray<'sms' \| 'whatsapp'>` | `['sms', 'whatsapp']` | Channels offered in the switcher. |
| `trigger` | `ReactNode` | Ghost message icon button | Custom element that opens the dialog. |
| `open` | `boolean` | — | Controlled open state. |
| `onOpenChange` | `(open: boolean) => void` | — | Open-state change handler. |
| `title` | `string` | `"Send message"` | Dialog title. |
| `disabled` | `boolean` | `false` | Disables the default trigger button. |
| `onSent` | `(result: DocyrusInstantMessageSendResult) => void` | — | Called after a successful send. |
| `className` | `string` | — | Extra class for the default trigger button. |

## Related

- [`InstantMessageComposer`](/docs/web/components/instant-message-composer) — the presentational composer this dialog mounts.
- [`useDocyrusInstantMessageComposer`](/docs/web/hooks/use-docyrus-instant-message-composer) — the hook that wires the composer to the SMS / WhatsApp API.
- [`EmailComposeDialog`](/docs/web/docyrus/email-compose-dialog) — the email counterpart for email fields.