@fayz-ai/plugin-conversations 0.2.0

package/src/views/ContactPanel.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import { MapPin, User, Tag, Link2, StickyNote, X } from 'lucide-react'
+import { Button, cn } from '@fayz-ai/ui'
+import { CHANNEL_LABELS } from '../channel'
+import type { Conversation } from '../types'
+import { Avatar, ChannelBadge } from './shared'
+
+function Section({ icon: Icon, title, children }: {
+  icon: React.ComponentType<{ className?: string }>
+  title: string
+  children: React.ReactNode
+}) {
+  return (
+    <div className="border-t border-border px-4 py-3">
+      <p className="mb-1.5 flex items-center gap-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
+        <Icon className="h-3 w-3" /> {title}
+      </p>
+      {children}
+    </div>
+  )
+}
+
+export function ContactPanel({ contact, onClose, className }: {
+  contact: Conversation
+  onClose?: () => void
+  className?: string
+}) {
+  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">
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      )}
+      <div className="flex flex-col items-center gap-2 px-4 py-5 text-center">
+        <Avatar name={contact.contactName} accent={contact.accent} size="lg" channel={contact.channel} />
+        <div>
+          <p className="text-sm font-semibold text-foreground">{contact.contactName}</p>
+          <p className="text-xs text-muted-foreground">{contact.contactHandle}</p>
+        </div>
+        <ChannelBadge channel={contact.channel} />
+      </div>
+
+      <Section icon={User} title="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>
+            <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>
+          </div>
+          {contact.assignedTo && (
+            <div className="flex items-center justify-between gap-2">
+              <dt className="text-muted-foreground">Assigned to</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>
+              <dd className="text-foreground">{contact.location}</dd>
+            </div>
+          )}
+        </dl>
+      </Section>
+
+      {contact.tags.length > 0 && (
+        <Section icon={Tag} title="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">
+                {tag}
+              </span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {contact.note && (
+        <Section icon={StickyNote} title="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>
+    </aside>
+  )
+}

package/src/views/ConversationList.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import { Search, Inbox as InboxIcon } from 'lucide-react'
+import { Input, cn } from '@fayz-ai/ui'
+import { useConversationsStore } from '../ConversationsContext'
+import type { Channel } from '../types'
+import { Avatar, ChannelBadge, relativeTime } from './shared'
+
+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' },
+]
+
+export function ConversationList({ className }: { className?: string }) {
+  const {
+    conversations, selectedId, channelFilter, search, loading,
+    select, setChannelFilter, setSearch,
+  } = useConversationsStore((s) => s)
+
+  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="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"
+            className="pl-8"
+          />
+        </div>
+        <div className="mt-2 flex flex-wrap gap-1">
+          {FILTERS.map((f) => (
+            <button
+              key={f.id}
+              onClick={() => setChannelFilter(f.id)}
+              className={cn(
+                'rounded-full px-2.5 py-1 text-xs font-medium transition-colors',
+                channelFilter === f.id
+                  ? 'bg-primary text-primary-foreground'
+                  : 'bg-muted text-muted-foreground hover:bg-muted/70',
+              )}
+            >
+              {f.label}
+            </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 && (
+          <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>
+          </div>
+        )}
+        {conversations.map((c) => {
+          const active = c.id === selectedId
+          const unread = c.unreadCount > 0
+          return (
+            <button
+              key={c.id}
+              onClick={() => select(c.id)}
+              className={cn(
+                'flex w-full items-start gap-3 border-b border-border/50 px-3 py-3 text-left transition-colors',
+                active ? 'bg-accent' : 'hover:bg-muted/50',
+              )}
+            >
+              <Avatar name={c.contactName} accent={c.accent} channel={c.channel} />
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center justify-between gap-2">
+                  <span className={cn('truncate text-sm text-foreground', unread ? 'font-semibold' : 'font-medium')}>
+                    {c.contactName}
+                  </span>
+                  <span className={cn('shrink-0 text-[11px]', unread ? 'font-semibold text-primary' : 'text-muted-foreground')}>
+                    {relativeTime(c.lastMessageAt)}
+                  </span>
+                </div>
+                <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>
+                  )}
+                </div>
+                <div className="mt-1 flex items-center justify-between gap-2">
+                  <span className={cn('truncate text-xs', unread ? 'text-foreground' : 'text-muted-foreground')}>
+                    {c.lastMessagePreview}
+                  </span>
+                  {unread && (
+                    <span className="flex h-[18px] min-w-[18px] shrink-0 items-center justify-center rounded-full bg-primary px-1.5 text-[10px] font-semibold text-primary-foreground">
+                      {c.unreadCount}
+                    </span>
+                  )}
+                </div>
+              </div>
+            </button>
+          )
+        })}
+      </div>
+    </aside>
+  )
+}

package/src/views/InboxView.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import { MessageSquare } from 'lucide-react'
+import { cn } from '@fayz-ai/ui'
+import { useConversationsStore } from '../ConversationsContext'
+import { ConversationList } from './ConversationList'
+import { MessageThread } from './MessageThread'
+import { ContactPanel } from './ContactPanel'
+import { useMediaQuery } from './shared'
+
+export function InboxView() {
+  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">Select a conversation to start chatting</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

@@ -0,0 +1,169 @@
+import React from 'react'
+import { Send, Clock, Archive, PanelRight, MessageSquare, Smile, Paperclip, ChevronLeft } from 'lucide-react'
+import { Button, cn } from '@fayz-ai/ui'
+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 { 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="Back to conversations">
+              <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="Snooze">
+            <Clock className="h-3.5 w-3.5 sm:mr-1" /> <span className="hidden sm:inline">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>
+          <Button
+            variant={panelOpen ? 'secondary' : 'ghost'}
+            size="icon"
+            onClick={onTogglePanel}
+            aria-label="Toggle contact 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">No messages yet</p>
+          </div>
+        )}
+      </div>
+
+      {/* Composer */}
+      <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)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault()
+                void handleSend()
+              }
+            }}
+            rows={1}
+            placeholder={`Reply via ${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">
+            <Send className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/views/shared.tsx

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