@fayz-ai/plugin-conversations 0.9.0 → 0.9.2

package/src/views/InboxView.tsx

@@ -1,64 +0,0 @@
-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'
-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.
-  const isWidePanel = useMediaQuery('(min-width: 1280px)')
-  const [panelOpen, setPanelOpen] = React.useState(false)
-  const selected = conversations.find((c) => c.id === selectedId) ?? null
-
-  // Open the panel by default only when it fits inline; collapse it otherwise.
-  React.useEffect(() => {
-    setPanelOpen(isWidePanel)
-  }, [isWidePanel])
-
-  return (
-    <div className="relative flex h-full min-h-0 overflow-hidden bg-background">
-      {/* Conversation list — single-pane below lg (full width), fixed rail at lg+.
-          Below lg it yields to the thread once a conversation is open. */}
-      <ConversationList className={cn(selected ? 'hidden lg:flex' : 'flex')} />
-
-      {/* Thread — hidden below lg until a conversation is selected. */}
-      {selected ? (
-        <MessageThread
-          selected={selected}
-          panelOpen={panelOpen}
-          onTogglePanel={() => setPanelOpen((v) => !v)}
-          onBack={deselect}
-          className="flex"
-        />
-      ) : (
-        <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">{t('conversations.empty.select')}</p>
-        </section>
-      )}
-
-      {/* Contact panel — inline column at xl, slide-over overlay below xl. */}
-      {selected && panelOpen && (
-        <>
-          <button
-            className="absolute inset-0 z-10 bg-black/40 xl:hidden"
-            aria-label="Close details"
-            onClick={() => setPanelOpen(false)}
-          />
-          <ContactPanel
-            contact={selected}
-            onClose={() => setPanelOpen(false)}
-            className="absolute inset-y-0 right-0 z-20 w-[340px] max-w-[88%] shadow-2xl xl:static xl:z-auto xl:w-[300px] xl:max-w-none xl:shadow-none"
-          />
-        </>
-      )}
-    </div>
-  )
-}

package/src/views/MessageThread.tsx

@@ -1,167 +0,0 @@
-import React from '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'
-import { Avatar, ChannelBadge, dayLabel } from './shared'
-
-// Build a flat render list: day-separator rows interleaved with messages, and
-// each message flagged as the start of a new sender-run (WhatsApp grouping).
-type Row =
-  | { kind: 'day'; id: string; label: string }
-  | { kind: 'msg'; id: string; message: Message; startsRun: boolean; endsRun: boolean }
-
-function buildRows(messages: Message[]): Row[] {
-  const rows: Row[] = []
-  let lastDay = ''
-  messages.forEach((m, i) => {
-    const day = new Date(m.at).toDateString()
-    if (day !== lastDay) {
-      rows.push({ kind: 'day', id: `day-${day}`, label: dayLabel(m.at) })
-      lastDay = day
-    }
-    const prev = messages[i - 1]
-    const next = messages[i + 1]
-    const samePrev = prev && prev.direction === m.direction && new Date(prev.at).toDateString() === day
-    const sameNext = next && next.direction === m.direction && new Date(next.at).toDateString() === day
-    rows.push({ kind: 'msg', id: m.id, message: m, startsRun: !samePrev, endsRun: !sameNext })
-  })
-  return rows
-}
-
-export function MessageThread({ selected, onTogglePanel, panelOpen, onBack, className }: {
-  selected: Conversation
-  onTogglePanel: () => void
-  panelOpen: boolean
-  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)
-
-  React.useEffect(() => {
-    threadRef.current?.scrollTo({ top: threadRef.current.scrollHeight, behavior: 'smooth' })
-  }, [messages.length, selected.id])
-
-  async function handleSend() {
-    if (!draft.trim()) return
-    const body = draft
-    setDraft('')
-    await send(body)
-  }
-
-  const accent = CHANNEL_ACCENT[selected.channel]
-  const rows = React.useMemo(() => buildRows(messages), [messages])
-
-  return (
-    <section className={cn('flex min-w-0 flex-1 flex-col bg-muted/20', className)}>
-      {/* Header */}
-      <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={t('conversations.thread.back')}>
-              <ChevronLeft className="h-5 w-5" />
-            </Button>
-          )}
-          <Avatar name={selected.contactName} accent={selected.accent} size="sm" channel={selected.channel} />
-          <div className="min-w-0">
-            <p className="truncate text-sm font-semibold text-foreground">{selected.contactName}</p>
-            <p className="flex items-center gap-1.5 text-xs text-muted-foreground">
-              <ChannelBadge channel={selected.channel} />
-              <span className="truncate">{selected.contactHandle}</span>
-            </p>
-          </div>
-        </div>
-        <div className="flex shrink-0 items-center gap-1.5">
-          <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={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={t('conversations.thread.details')}
-          >
-            <PanelRight className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-
-      {/* Messages */}
-      <div ref={threadRef} className="min-h-0 flex-1 overflow-y-auto px-5 py-4">
-        {rows.map((row) => {
-          if (row.kind === 'day') {
-            return (
-              <div key={row.id} className="my-3 flex items-center justify-center">
-                <span className="rounded-full bg-muted px-3 py-0.5 text-[11px] font-medium text-muted-foreground">
-                  {row.label}
-                </span>
-              </div>
-            )
-          }
-          const m = row.message
-          const outbound = m.direction === 'outbound'
-          return (
-            <div
-              key={row.id}
-              className={cn('flex', outbound ? 'justify-end' : 'justify-start', row.startsRun ? 'mt-2.5' : 'mt-0.5')}
-            >
-              <div
-                className={cn(
-                  'max-w-[68%] px-3.5 py-2 text-sm shadow-sm',
-                  outbound ? 'rounded-2xl text-white' : 'rounded-2xl bg-card text-foreground',
-                  // Tail only on the last bubble of a run, on the sender's side.
-                  outbound && row.endsRun && 'rounded-br-sm',
-                  !outbound && row.endsRun && 'rounded-bl-sm',
-                )}
-                style={outbound ? { backgroundColor: accent.color } : undefined}
-              >
-                <p className="whitespace-pre-wrap break-words">{m.body}</p>
-                <div className={cn('mt-0.5 text-right text-[10px]', outbound ? 'text-white/70' : 'text-muted-foreground')}>
-                  {new Date(m.at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-                </div>
-              </div>
-            </div>
-          )
-        })}
-        {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">{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">
-          <textarea
-            value={draft}
-            onChange={(e) => setDraft(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter' && !e.shiftKey) {
-                e.preventDefault()
-                void handleSend()
-              }
-            }}
-            rows={1}
-            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={t('conversations.thread.send')}>
-            <Send className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-    </section>
-  )
-}

package/src/views/NewConversationModal.tsx

@@ -1,204 +0,0 @@
-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>
-  )
-}

package/src/views/shared.tsx

@@ -1,97 +0,0 @@
-import React from 'react'
-import { cn } from '@fayz-ai/ui'
-import { CHANNEL_ACCENT, CHANNEL_ICON, CHANNEL_LABELS } from '../channel'
-import type { Channel } from '../types'
-
-// ---------------------------------------------------------------------------
-// Small presentational helpers shared across the inbox panes.
-// ---------------------------------------------------------------------------
-
-/** Reactive media-query match — drives the responsive list/thread/panel layout. */
-export function useMediaQuery(query: string): boolean {
-  const [matches, setMatches] = React.useState(
-    () => typeof window !== 'undefined' && window.matchMedia(query).matches,
-  )
-  React.useEffect(() => {
-    if (typeof window === 'undefined') return
-    const mql = window.matchMedia(query)
-    const onChange = () => setMatches(mql.matches)
-    onChange()
-    mql.addEventListener('change', onChange)
-    return () => mql.removeEventListener('change', onChange)
-  }, [query])
-  return matches
-}
-
-export function initialsOf(name: string): string {
-  return name.replace('@', '').split(/\s+/).filter(Boolean).map((w) => w[0]).slice(0, 2).join('').toUpperCase()
-}
-
-export function Avatar({ name, accent, size = 'md', channel }: {
-  name: string
-  accent: string
-  size?: 'sm' | 'md' | 'lg'
-  /** When set, renders a small channel glyph badge over the avatar. */
-  channel?: Channel
-}) {
-  const dims = size === 'lg' ? 'h-14 w-14 text-lg' : size === 'sm' ? 'h-9 w-9 text-xs' : 'h-10 w-10 text-sm'
-  const Icon = channel ? CHANNEL_ICON[channel] : null
-  return (
-    <div className="relative shrink-0">
-      <div
-        className={cn('flex items-center justify-center rounded-full font-semibold text-white', dims)}
-        style={{ backgroundColor: accent }}
-      >
-        {initialsOf(name)}
-      </div>
-      {Icon && (
-        <span
-          className="absolute -bottom-0.5 -right-0.5 flex h-4 w-4 items-center justify-center rounded-full ring-2 ring-card"
-          style={{ backgroundColor: CHANNEL_ACCENT[channel!].color }}
-        >
-          <Icon className="h-2.5 w-2.5 text-white" />
-        </span>
-      )}
-    </div>
-  )
-}
-
-export function ChannelBadge({ channel, className }: { channel: Channel; className?: string }) {
-  const Icon = CHANNEL_ICON[channel]
-  return (
-    <span
-      className={cn(
-        'inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 text-[10px] font-medium',
-        CHANNEL_ACCENT[channel].badge,
-        className,
-      )}
-    >
-      <Icon className="h-2.5 w-2.5" />
-      {CHANNEL_LABELS[channel]}
-    </span>
-  )
-}
-
-export function relativeTime(iso: string): string {
-  const diff = Date.now() - new Date(iso).getTime()
-  const mins = Math.round(diff / 60_000)
-  if (mins < 1) return 'now'
-  if (mins < 60) return `${mins}m`
-  const hours = Math.round(mins / 60)
-  if (hours < 24) return `${hours}h`
-  const days = Math.round(hours / 24)
-  if (days < 7) return `${days}d`
-  return `${Math.round(days / 7)}w`
-}
-
-/** Day label for the thread date separators. */
-export function dayLabel(iso: string): string {
-  const d = new Date(iso)
-  const now = new Date()
-  const startOf = (x: Date) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime()
-  const dayDiff = Math.round((startOf(now) - startOf(d)) / 86_400_000)
-  if (dayDiff <= 0) return 'Today'
-  if (dayDiff === 1) return 'Yesterday'
-  if (dayDiff < 7) return d.toLocaleDateString([], { weekday: 'long' })
-  return d.toLocaleDateString([], { month: 'short', day: 'numeric', year: now.getFullYear() === d.getFullYear() ? undefined : 'numeric' })
-}