@fayz-ai/plugin-conversations 0.8.0 → 0.9.0-next.0

package/src/store.ts

@@ -1,6 +1,12 @@
 import { createStore, type StoreApi } from 'zustand/vanilla'
 import type { ConversationsProvider } from './data/types'
-import type { Conversation, Message, Channel, ConversationStatus } from './types'
+import type {
+  Conversation,
+  Message,
+  Channel,
+  ConversationStatus,
+  CreateConversationInput,
+} from './types'
 
 export interface ConversationsUIState {
   conversations: Conversation[]
@@ -16,6 +22,7 @@ export interface ConversationsUIState {
   deselect(): void
   setChannelFilter(channel: Channel | 'all'): Promise<void>
   setSearch(search: string): Promise<void>
+  create(input: CreateConversationInput): Promise<Conversation>
   send(body: string): Promise<void>
   setStatus(status: ConversationStatus): Promise<void>
 }
@@ -67,6 +74,42 @@ export function createConversationsStore(
       await get().load()
     },
 
+    async create(input) {
+      const created = await provider.createConversation(input)
+      // The thread EXISTS the moment the insert returns, so resolve on that and
+      // show it optimistically. Clear filters that would hide it, prepend it,
+      // select it — all local.
+      set((s) => ({
+        channelFilter: 'all',
+        search: '',
+        conversations: [created, ...s.conversations.filter((c) => c.id !== created.id)],
+        selectedId: created.id,
+      }))
+
+      // Reconciliation (authoritative list + the thread's messages) runs in the
+      // BACKGROUND. It used to be awaited here, which made the caller — the
+      // compose modal — hostage to two extra round-trips: on a slow pool the
+      // conversation was already in the database while the modal sat open
+      // looking broken, inviting a second click and a duplicate thread.
+      // Failures are non-fatal: the optimistic row above already renders.
+      void (async () => {
+        try {
+          const conversations = await provider.listConversations({})
+          // Read-after-write guard: a refetch that races the insert may not
+          // return the new row yet — keep the local one rather than dropping it.
+          const merged = conversations.some((c) => c.id === created.id)
+            ? conversations
+            : [created, ...conversations]
+          set({ conversations: merged })
+          await get().select(created.id)
+        } catch {
+          /* optimistic state stands; the next load() reconciles */
+        }
+      })()
+
+      return created
+    },
+
     async send(body: string) {
       const id = get().selectedId
       if (!id || !body.trim()) return

package/src/types.ts

@@ -12,6 +12,12 @@ export type MessageDirection = 'inbound' | 'outbound'
 export interface Conversation {
   id: string
   contactName: string
+  /**
+   * `public.people` id when the thread is tied to a real contact record (the
+   * compose modal resolves one via the shared ContactPicker). Absent for legacy
+   * threads and for inbound messages from an unknown handle.
+   */
+  contactPersonId?: string
   /** Phone, @handle, or email depending on channel */
   contactHandle: string
   channel: Channel
@@ -49,6 +55,19 @@ export interface SendMessageInput {
   body: string
 }
 
+export interface CreateConversationInput {
+  contactName: string
+  /** `public.people` id, when the contact was resolved/created by the picker. */
+  contactPersonId?: string
+  /** Phone, @handle, or email depending on channel. */
+  contactHandle?: string
+  channel: Channel
+  /** Optional first outbound message; stamps preview + last_message_at. */
+  firstMessage?: string
+  /** Optional free-text note surfaced in the contact panel. */
+  note?: string
+}
+
 export const CHANNEL_LABELS: Record<Channel, string> = {
   sms: 'SMS',
   whatsapp: 'WhatsApp',

package/src/views/ContactPanel.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { MapPin, User, Tag, Link2, StickyNote, X } from 'lucide-react'
 import { Button, cn } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
 import { CHANNEL_LABELS } from '../channel'
 import type { Conversation } from '../types'
 import { Avatar, ChannelBadge } from './shared'
@@ -25,12 +26,13 @@ export function ContactPanel({ contact, onClose, className }: {
   onClose?: () => void
   className?: string
 }) {
+  const t = useTranslation()
   return (
     <aside className={cn('flex shrink-0 flex-col overflow-y-auto border-l border-border bg-card', className)}>
       {onClose && (
         <div className="flex items-center justify-between border-b border-border px-3 py-2 xl:hidden">
-          <span className="text-sm font-semibold text-foreground">Details</span>
-          <Button variant="ghost" size="icon" onClick={onClose} aria-label="Close details">
+          <span className="text-sm font-semibold text-foreground">{t('conversations.contact.details')}</span>
+          <Button variant="ghost" size="icon" onClick={onClose} aria-label={t('conversations.contact.closeDetails')}>
             <X className="h-4 w-4" />
           </Button>
         </div>
@@ -44,25 +46,25 @@ export function ContactPanel({ contact, onClose, className }: {
         <ChannelBadge channel={contact.channel} />
       </div>
 
-      <Section icon={User} title="Details">
+      <Section icon={User} title={t('conversations.contact.details')}>
         <dl className="space-y-1.5 text-sm">
           <div className="flex items-center justify-between gap-2">
-            <dt className="text-muted-foreground">Channel</dt>
+            <dt className="text-muted-foreground">{t('conversations.contact.channel')}</dt>
             <dd className="text-foreground">{CHANNEL_LABELS[contact.channel]}</dd>
           </div>
           <div className="flex items-center justify-between gap-2">
-            <dt className="text-muted-foreground">Status</dt>
-            <dd className="capitalize text-foreground">{contact.status}</dd>
+            <dt className="text-muted-foreground">{t('conversations.contact.status')}</dt>
+            <dd className="text-foreground">{t(`conversations.status.${contact.status}`)}</dd>
           </div>
           {contact.assignedTo && (
             <div className="flex items-center justify-between gap-2">
-              <dt className="text-muted-foreground">Assigned to</dt>
+              <dt className="text-muted-foreground">{t('conversations.contact.assignedTo')}</dt>
               <dd className="text-foreground">{contact.assignedTo}</dd>
             </div>
           )}
           {contact.location && (
             <div className="flex items-center justify-between gap-2">
-              <dt className="flex items-center gap-1 text-muted-foreground"><MapPin className="h-3 w-3" /> Location</dt>
+              <dt className="flex items-center gap-1 text-muted-foreground"><MapPin className="h-3 w-3" /> {t('conversations.contact.location')}</dt>
               <dd className="text-foreground">{contact.location}</dd>
             </div>
           )}
@@ -70,7 +72,7 @@ export function ContactPanel({ contact, onClose, className }: {
       </Section>
 
       {contact.tags.length > 0 && (
-        <Section icon={Tag} title="Tags">
+        <Section icon={Tag} title={t('conversations.contact.tags')}>
           <div className="flex flex-wrap gap-1.5">
             {contact.tags.map((tag) => (
               <span key={tag} className="rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-foreground">
@@ -82,13 +84,13 @@ export function ContactPanel({ contact, onClose, className }: {
       )}
 
       {contact.note && (
-        <Section icon={StickyNote} title="Note">
+        <Section icon={StickyNote} title={t('conversations.contact.note')}>
           <p className="text-sm text-foreground">{contact.note}</p>
         </Section>
       )}
 
-      <Section icon={Link2} title="Linked records">
-        <p className="text-xs text-muted-foreground">No linked records yet.</p>
+      <Section icon={Link2} title={t('conversations.contact.linkedRecords')}>
+        <p className="text-xs text-muted-foreground">{t('conversations.contact.noLinkedRecords')}</p>
       </Section>
     </aside>
   )

package/src/views/ConversationList.tsx

@@ -1,63 +1,86 @@
 import React from 'react'
-import { Search, Inbox as InboxIcon } from 'lucide-react'
-import { Input, cn } from '@fayz-ai/ui'
+import { Search, Inbox as InboxIcon, Plus } from 'lucide-react'
+import { Button, Input, Skeleton, cn } from '@fayz-ai/ui'
+import { PermissionGate } from '@fayz-ai/saas'
+import { useTranslation } from '@fayz-ai/core'
 import { useConversationsStore } from '../ConversationsContext'
 import type { Channel } from '../types'
 import { Avatar, ChannelBadge, relativeTime } from './shared'
+import { NewConversationModal } from './NewConversationModal'
 
-const FILTERS: Array<{ id: Channel | 'all'; label: string }> = [
-  { id: 'all', label: 'All' },
-  { id: 'whatsapp', label: 'WhatsApp' },
-  { id: 'sms', label: 'SMS' },
-  { id: 'instagram', label: 'Instagram' },
-  { id: 'email', label: 'Email' },
-  { id: 'webchat', label: 'Web' },
-]
+const FILTERS: Array<Channel | 'all'> = ['all', 'whatsapp', 'sms', 'instagram', 'email', 'webchat']
 
 export function ConversationList({ className }: { className?: string }) {
+  const t = useTranslation()
   const {
     conversations, selectedId, channelFilter, search, loading,
     select, setChannelFilter, setSearch,
   } = useConversationsStore((s) => s)
+  const [newOpen, setNewOpen] = React.useState(false)
 
   return (
     <aside className={cn('w-full shrink-0 flex-col border-r border-border bg-card lg:w-[320px]', className)}>
       <div className="border-b border-border px-3 py-3">
+        <div className="mb-2 flex items-center justify-between gap-2">
+          <span className="text-sm font-semibold text-foreground">{t('conversations.title')}</span>
+          <PermissionGate feature="conversations" action="create">
+            <Button
+              size="sm"
+              onClick={() => setNewOpen(true)}
+              aria-label={t('conversations.list.new')}
+              data-testid="conversations-new"
+            >
+              <Plus className="h-3.5 w-3.5 sm:mr-1" />
+              <span className="hidden sm:inline">{t('conversations.list.new')}</span>
+            </Button>
+          </PermissionGate>
+        </div>
         <div className="relative">
           <Search className="pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
           <Input
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            placeholder="Search conversations"
+            placeholder={t('conversations.list.search')}
             className="pl-8"
           />
         </div>
         <div className="mt-2 flex flex-wrap gap-1">
-          {FILTERS.map((f) => (
+          {FILTERS.map((id) => (
             <button
-              key={f.id}
-              onClick={() => setChannelFilter(f.id)}
+              key={id}
+              onClick={() => setChannelFilter(id)}
               className={cn(
                 'rounded-full px-2.5 py-1 text-xs font-medium transition-colors',
-                channelFilter === f.id
+                channelFilter === id
                   ? 'bg-primary text-primary-foreground'
                   : 'bg-muted text-muted-foreground hover:bg-muted/70',
               )}
             >
-              {f.label}
+              {t(`conversations.filter.${id}`)}
             </button>
           ))}
         </div>
       </div>
 
       <div className="min-h-0 flex-1 overflow-y-auto">
-        {loading && conversations.length === 0 && (
-          <p className="p-4 text-sm text-muted-foreground">Loading…</p>
-        )}
+        {loading && conversations.length === 0 &&
+          Array.from({ length: 6 }, (_, i) => (
+            <div key={i} className="flex w-full items-start gap-3 border-b border-border/50 px-3 py-3">
+              <Skeleton className="h-10 w-10 shrink-0 rounded-full" />
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center justify-between gap-2">
+                  <Skeleton className="h-4 w-28" />
+                  <Skeleton className="h-3 w-8" />
+                </div>
+                <Skeleton className="mt-1.5 h-4 w-16 rounded-full" />
+                <Skeleton className="mt-1.5 h-3 w-3/4" />
+              </div>
+            </div>
+          ))}
         {!loading && conversations.length === 0 && (
           <div className="flex flex-col items-center gap-2 p-8 text-center text-muted-foreground">
             <InboxIcon className="h-6 w-6" />
-            <p className="text-sm">No conversations</p>
+            <p className="text-sm">{t('conversations.list.empty')}</p>
           </div>
         )}
         {conversations.map((c) => {
@@ -85,7 +108,9 @@ export function ConversationList({ className }: { className?: string }) {
                 <div className="mt-1 flex items-center gap-2">
                   <ChannelBadge channel={c.channel} />
                   {c.status !== 'open' && (
-                    <span className="text-[10px] uppercase tracking-wide text-muted-foreground/70">{c.status}</span>
+                    <span className="text-[10px] uppercase tracking-wide text-muted-foreground/70">
+                      {t(`conversations.status.${c.status}`)}
+                    </span>
                   )}
                 </div>
                 <div className="mt-1 flex items-center justify-between gap-2">
@@ -103,6 +128,8 @@ export function ConversationList({ className }: { className?: string }) {
           )
         })}
       </div>
+
+      <NewConversationModal open={newOpen} onOpenChange={setNewOpen} />
     </aside>
   )
 }

package/src/views/InboxView.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { MessageSquare } from 'lucide-react'
 import { cn } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
 import { useConversationsStore } from '../ConversationsContext'
 import { ConversationList } from './ConversationList'
 import { MessageThread } from './MessageThread'
@@ -8,6 +9,7 @@ import { ContactPanel } from './ContactPanel'
 import { useMediaQuery } from './shared'
 
 export function InboxView() {
+  const t = useTranslation()
   const { conversations, selectedId, deselect } = useConversationsStore((s) => s)
   // xl+ shows the contact panel inline (three panes); below that it's an
   // on-demand slide-over so the list + thread keep room to breathe.
@@ -38,7 +40,7 @@ export function InboxView() {
       ) : (
         <section className="hidden min-w-0 flex-1 flex-col items-center justify-center bg-muted/20 text-muted-foreground lg:flex">
           <MessageSquare className="h-9 w-9" />
-          <p className="mt-2 text-sm">Select a conversation to start chatting</p>
+          <p className="mt-2 text-sm">{t('conversations.empty.select')}</p>
         </section>
       )}
 

package/src/views/MessageThread.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
-import { Send, Clock, Archive, PanelRight, MessageSquare, Smile, Paperclip, ChevronLeft } from 'lucide-react'
+import { Send, Clock, Archive, PanelRight, MessageSquare, ChevronLeft } from 'lucide-react'
 import { Button, cn } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
 import { useConversationsStore } from '../ConversationsContext'
 import { CHANNEL_ACCENT, CHANNEL_LABELS } from '../channel'
 import type { Conversation, Message } from '../types'
@@ -37,6 +38,7 @@ export function MessageThread({ selected, onTogglePanel, panelOpen, onBack, clas
   onBack?: () => void
   className?: string
 }) {
+  const t = useTranslation()
   const { messages, sending, send, setStatus } = useConversationsStore((s) => s)
   const [draft, setDraft] = React.useState('')
   const threadRef = React.useRef<HTMLDivElement>(null)
@@ -61,7 +63,7 @@ export function MessageThread({ selected, onTogglePanel, panelOpen, onBack, clas
       <div className="flex items-center justify-between gap-2 border-b border-border bg-card px-3 py-2.5 md:px-5">
         <div className="flex min-w-0 items-center gap-2 md:gap-3">
           {onBack && (
-            <Button variant="ghost" size="icon" className="-ml-1 shrink-0 lg:hidden" onClick={onBack} aria-label="Back to conversations">
+            <Button variant="ghost" size="icon" className="-ml-1 shrink-0 lg:hidden" onClick={onBack} aria-label={t('conversations.thread.back')}>
               <ChevronLeft className="h-5 w-5" />
             </Button>
           )}
@@ -75,17 +77,17 @@ export function MessageThread({ selected, onTogglePanel, panelOpen, onBack, clas
           </div>
         </div>
         <div className="flex shrink-0 items-center gap-1.5">
-          <Button variant="outline" size="sm" onClick={() => setStatus('snoozed')} aria-label="Snooze">
-            <Clock className="h-3.5 w-3.5 sm:mr-1" /> <span className="hidden sm:inline">Snooze</span>
+          <Button variant="outline" size="sm" onClick={() => setStatus('snoozed')} aria-label={t('conversations.thread.snooze')}>
+            <Clock className="h-3.5 w-3.5 sm:mr-1" /> <span className="hidden sm:inline">{t('conversations.thread.snooze')}</span>
           </Button>
-          <Button variant="outline" size="sm" onClick={() => setStatus('closed')} aria-label="Close conversation">
-            <Archive className="h-3.5 w-3.5 sm:mr-1" /> <span className="hidden sm:inline">Close</span>
+          <Button variant="outline" size="sm" onClick={() => setStatus('closed')} aria-label={t('conversations.thread.close')}>
+            <Archive className="h-3.5 w-3.5 sm:mr-1" /> <span className="hidden sm:inline">{t('conversations.thread.close')}</span>
           </Button>
           <Button
             variant={panelOpen ? 'secondary' : 'ghost'}
             size="icon"
             onClick={onTogglePanel}
-            aria-label="Toggle contact details"
+            aria-label={t('conversations.thread.details')}
           >
             <PanelRight className="h-4 w-4" />
           </Button>
@@ -132,20 +134,16 @@ export function MessageThread({ selected, onTogglePanel, panelOpen, onBack, clas
         {rows.length === 0 && (
           <div className="flex h-full flex-col items-center justify-center text-muted-foreground">
             <MessageSquare className="h-7 w-7" />
-            <p className="mt-2 text-sm">No messages yet</p>
+            <p className="mt-2 text-sm">{t('conversations.thread.empty')}</p>
           </div>
         )}
       </div>
 
       {/* Composer */}
+      {/* TODO(follow-up): wire real emoji picker + attachment upload (removed the
+          dead placeholder buttons rather than shipping non-functional UI). */}
       <div className="border-t border-border bg-card px-4 py-3">
         <div className="flex items-end gap-2">
-          <Button variant="ghost" size="icon" className="mb-0.5 text-muted-foreground" aria-label="Add emoji">
-            <Smile className="h-4 w-4" />
-          </Button>
-          <Button variant="ghost" size="icon" className="mb-0.5 text-muted-foreground" aria-label="Attach file">
-            <Paperclip className="h-4 w-4" />
-          </Button>
           <textarea
             value={draft}
             onChange={(e) => setDraft(e.target.value)}
@@ -156,10 +154,10 @@ export function MessageThread({ selected, onTogglePanel, panelOpen, onBack, clas
               }
             }}
             rows={1}
-            placeholder={`Reply via ${CHANNEL_LABELS[selected.channel]}…`}
+            placeholder={t('conversations.thread.reply', { channel: CHANNEL_LABELS[selected.channel] })}
             className="max-h-32 min-h-[40px] flex-1 resize-none rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-primary"
           />
-          <Button onClick={() => void handleSend()} disabled={sending || !draft.trim()} aria-label="Send">
+          <Button onClick={() => void handleSend()} disabled={sending || !draft.trim()} aria-label={t('conversations.thread.send')}>
             <Send className="h-4 w-4" />
           </Button>
         </div>

package/src/views/NewConversationModal.tsx

@@ -0,0 +1,204 @@
+import React from 'react'
+import { Button, Modal, ModalContent, cn, toast } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+import { useLimitGuard, invalidateLimit, ContactPicker, type ContactPickerValue } from '@fayz-ai/saas'
+import { useConversationsStore, useConversationsConfig } from '../ConversationsContext'
+import { CHANNEL_ACCENT, CHANNEL_ICON, CHANNEL_LABELS } from '../channel'
+import type { Channel } from '../types'
+
+const CHANNELS: Channel[] = ['whatsapp', 'sms', 'instagram', 'email', 'webchat']
+
+/**
+ * Which field of a person IS the handle on a given channel. Phone channels read
+ * the phone, email reads the email; Instagram and web chat have no counterpart
+ * on a person record, so they always have to be typed. Deliberately NOT
+ * cross-filling (an email in a WhatsApp handle looked plausible on screen and
+ * was simply wrong).
+ */
+function personHandleFor(channel: Channel, contact: ContactPickerValue | null): string {
+  if (!contact) return ''
+  if (channel === 'email') return contact.email ?? ''
+  if (channel === 'sms' || channel === 'whatsapp') return contact.phone ?? ''
+  return ''
+}
+
+const HANDLE_LABEL_KEY: Record<Channel, string> = {
+  whatsapp: 'conversations.new.handleLabel.phone',
+  sms: 'conversations.new.handleLabel.phone',
+  email: 'conversations.new.handleLabel.email',
+  instagram: 'conversations.new.handleLabel.instagram',
+  webchat: 'conversations.new.handleLabel.webchat',
+}
+
+export function NewConversationModal({
+  open,
+  onOpenChange,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  const t = useTranslation()
+  const create = useConversationsStore((s) => s.create)
+  const config = useConversationsConfig()
+  const guardConversations = useLimitGuard('conversations_month')
+
+  const [channel, setChannel] = React.useState<Channel>('whatsapp')
+  const [contact, setContact] = React.useState<ContactPickerValue | null>(null)
+  // Handle the user typed themselves. The one taken FROM the contact is derived
+  // (see personHandleFor) and shown on the picker's chip — same as the agenda,
+  // which never had a second phone field.
+  const [typedHandle, setTypedHandle] = React.useState('')
+  // While the picker's inline create form is open it already asks for phone and
+  // email, so showing our own handle field would ask for the phone twice.
+  const [creatingContact, setCreatingContact] = React.useState(false)
+  const [firstMessage, setFirstMessage] = React.useState('')
+  const [submitting, setSubmitting] = React.useState(false)
+
+  // Reset the form each time the modal opens. `pickerKey` remounts the picker so
+  // its internal search text resets too.
+  const [pickerKey, setPickerKey] = React.useState(0)
+  React.useEffect(() => {
+    if (open) {
+      setChannel('whatsapp')
+      setContact(null)
+      setTypedHandle('')
+      setCreatingContact(false)
+      setFirstMessage('')
+      setSubmitting(false)
+      setPickerKey((k) => k + 1)
+    }
+  }, [open])
+
+  // What we'd message on this channel: the contact's own datum when they have
+  // one, otherwise whatever the user typed. Recomputed on every channel switch,
+  // so flipping WhatsApp → Email swaps phone for email with no stale state.
+  const derivedHandle = personHandleFor(channel, contact)
+  const effectiveHandle = derivedHandle || typedHandle
+  const handleLabel = t(HANDLE_LABEL_KEY[channel])
+
+  const canSubmit = (contact?.name.trim().length ?? 0) > 0 && !submitting
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (!canSubmit) return
+    setSubmitting(true)
+    try {
+      // Plan quantity guard (client-side, before the store call): opens the
+      // global UpgradeModal and aborts when the monthly cap is reached. Inside
+      // the try on purpose — it hits the network to count usage, and a rejection
+      // out here used to escape unhandled, leaving the modal open with no
+      // feedback at all (indistinguishable from a dead button).
+      if ((await guardConversations()) === 'blocked') return
+      await create({
+        channel,
+        contactName: contact!.name.trim(),
+        contactPersonId: contact?.id,
+        contactHandle: effectiveHandle.trim() || undefined,
+        firstMessage: firstMessage.trim() || undefined,
+      })
+      invalidateLimit('conversations_month')
+      onOpenChange(false)
+    } catch (err) {
+      // A failed insert (unresolved tenant, RLS rejection, offline…) previously
+      // threw past the `finally` — `onOpenChange(false)` never ran, so the modal
+      // stayed open with no feedback and the thread silently vanished. Surface
+      // the failure and keep the form open so the user can retry.
+      const message = err instanceof Error ? err.message : String(err)
+      toast.error(t('conversations.new.createFailed'), { description: message })
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  return (
+    <Modal open={open} onOpenChange={onOpenChange}>
+      <ModalContent size="md">
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          <h2 className="text-base font-semibold text-foreground">{t('conversations.new.title')}</h2>
+
+          {/* Channel picker */}
+          <div>
+            <label className="mb-1.5 block text-xs font-medium text-muted-foreground">
+              {t('conversations.new.channel')}
+            </label>
+            <div className="flex flex-wrap gap-1.5">
+              {CHANNELS.map((ch) => {
+                const Icon = CHANNEL_ICON[ch]
+                const active = channel === ch
+                return (
+                  <button
+                    key={ch}
+                    type="button"
+                    onClick={() => setChannel(ch)}
+                    aria-pressed={active}
+                    className={cn(
+                      'inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium transition-colors',
+                      active
+                        ? 'text-white'
+                        : 'bg-muted text-muted-foreground hover:bg-muted/70',
+                    )}
+                    style={active ? { backgroundColor: CHANNEL_ACCENT[ch].color } : undefined}
+                  >
+                    <Icon className="h-3 w-3" />
+                    {CHANNEL_LABELS[ch]}
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+
+          {/* Contact — shared find-or-create flow (@fayz-ai/saas), the same one
+              the agenda uses to pick a client. The picker owns its label, the
+              search field, the chip and the channel handle, so this composer and
+              the appointment modal render the SAME thing from the same code. */}
+          <ContactPicker
+            key={pickerKey}
+            value={contact}
+            onChange={setContact}
+            kind={config.contactKind}
+            extensionTable={config.contactExtensionTable}
+            lookup={config.contactLookup}
+            allowFreeText
+            onCreatingChange={setCreatingContact}
+            autoFocus
+            label={t('conversations.new.contactName')}
+            placeholder={t('conversations.new.contactNamePlaceholder')}
+            secondaryText={derivedHandle || undefined}
+            handleField={{
+              label: handleLabel,
+              derived: derivedHandle || undefined,
+              value: typedHandle,
+              onChange: setTypedHandle,
+              fieldLabel: t('conversations.new.handle'),
+              placeholder: t('conversations.new.handlePlaceholder'),
+            }}
+          />
+
+          {/* First message */}
+          <div>
+            <label htmlFor="conv-first-message" className="mb-1.5 block text-xs font-medium text-muted-foreground">
+              {t('conversations.new.firstMessage')}
+            </label>
+            <textarea
+              id="conv-first-message"
+              value={firstMessage}
+              onChange={(e) => setFirstMessage(e.target.value)}
+              rows={3}
+              placeholder={t('conversations.new.firstMessagePlaceholder')}
+              className="max-h-40 min-h-[64px] w-full resize-none rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:border-primary"
+            />
+          </div>
+
+          <div className="mt-1 flex justify-end gap-2">
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              {t('conversations.new.cancel')}
+            </Button>
+            <Button type="submit" disabled={!canSubmit}>
+              {submitting ? t('conversations.new.creating') : t('conversations.new.create')}
+            </Button>
+          </div>
+        </form>
+      </ModalContent>
+    </Modal>
+  )
+}