Instant Message Compose Dialog

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

Edit on GitHubEditllms.txt

Client Only

Instant Message Compose Dialog opens the Docyrus InstantMessageComposer inside a modal, wired to the tenant SMS / WhatsApp messaging API through useDocyrusInstantMessageComposer. 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.

This is a Docyrus-connection component. It needs an authenticated RestApiClient to list SMS / WhatsApp accounts and send, so the preview above is informational only — wire it against your tenant (or the playground) to see it work. Sending requires the OAuth token to carry the relevant messaging send scope.

Installation

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

Required Packages(3 packages)

pnpm add @tanstack/react-query sonner @docyrus/api-client

Usage

Standalone

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 (
    <InstantMessageComposeDialog
      client={client}
      to={[phone]}
      channel="sms"
      onSent={result => console.log('accepted', result.accepted)} />
  );
}

Custom trigger / WhatsApp-only

<InstantMessageComposeDialog
  client={client}
  to={[phone]}
  availableChannels={['whatsapp']}
  trigger={<Button variant="outline">Message contact</Button>} />

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:

// Value renderer
<PhoneValue field={field} value={record.phone} record={record} client={client} />

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

InstantMessageComposer — the presentational composer this dialog mounts.
useDocyrusInstantMessageComposer — the hook that wires the composer to the SMS / WhatsApp API.
EmailComposeDialog — the email counterpart for email fields.