Email Compose Dialog

Email Compose Dialog opens the Docyrus EmailComposer inside a modal, fully wired to the tenant messaging API through useDocyrusEmailComposer. Give it a client and an optional to / cc / bcc / subject / body seed and it handles 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 GET /v1/messaging/email/accounts query fires only when visible. On a successful send it calls onSent(result), shows a toast, and closes.

The body editor's @ mention autocomplete is active out of the box — the underlying hook loads the tenant's users from /v1/users by default (see the hook's mentions option to disable).

It is the component behind the inline compose action on the EmailFormField and EmailValue renderer — pass a client to those (directly or via useDocyrusFormView / useDocyrusDataGrid / useDocyrusDataTable) and the action lights up automatically.

Installation

pnpm dlx @docyrus/cli add @docyrus/ui-email-compose-dialog

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

Usage

Standalone

import { useDocyrusAuth } from '@docyrus/signin';
import { EmailComposeDialog } from '@docyrus/ui/components/email-compose-dialog';

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

  if (!client) return null;

  return (
    <EmailComposeDialog
      client={client}
      to={[email]}
      subject="Following up"
      onSent={result => console.log('accepted', result.accepted)} />
  );
}

Custom trigger

<EmailComposeDialog
  client={client}
  to={[email]}
  trigger={<Button variant="outline">Email contact</Button>} />

Automatic on fields, values, and grids

Pass a client to the email form field / value renderer (or let the Docyrus hooks thread it for you) and the compose action appears with no extra wiring:

// Form field + value renderer
<EmailFormField field={field} form={form} client={client} />
<EmailValue field={field} value={record.email} client={client} />

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

// Grids — EmailCell (data grid) and EmailValue (data table) light up automatically
const grid = useDocyrusDataGrid({ client, appSlug, dataSourceSlug });

API Reference

Related

• EmailComposer — the presentational composer this dialog mounts.
• useDocyrusEmailComposer — the hook that wires the composer to the messaging API.
• InstantMessageComposeDialog — the SMS / WhatsApp counterpart for phone fields.