729 lines
30 KiB
TypeScript
729 lines
30 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import {
|
|
MessageCircle,
|
|
Search,
|
|
Send,
|
|
Phone,
|
|
PhoneCall,
|
|
Paperclip,
|
|
MoreVertical,
|
|
Link as LinkIcon,
|
|
User,
|
|
Settings,
|
|
Bot,
|
|
AlertCircle,
|
|
CheckCheck,
|
|
Clock,
|
|
ChevronLeft,
|
|
Inbox,
|
|
Voicemail,
|
|
Plus,
|
|
Hash,
|
|
} from 'lucide-react';
|
|
import { useStore } from '@/store/useStore';
|
|
import {
|
|
fetchCommsThreads,
|
|
fetchCommsMessages,
|
|
sendCommsMessage,
|
|
linkCommsThreadToPerson,
|
|
fetchCommsSettings,
|
|
} from '@/lib/commsApi';
|
|
import type {
|
|
CommsThread,
|
|
CommsMessage,
|
|
CommsSettings,
|
|
SendMessagePayload,
|
|
} from '@/types/commsTypes';
|
|
|
|
/* ── Mock generators for demo / offline mode ─────────────────────────────── */
|
|
|
|
function generateMockThreads(): CommsThread[] {
|
|
const now = new Date().toISOString();
|
|
return [
|
|
{
|
|
threadId: 'mock-1',
|
|
phoneE164: '+919876543210',
|
|
displayName: 'Rahul Sharma',
|
|
channel: 'whatsapp',
|
|
status: 'open',
|
|
unreadCount: 2,
|
|
lastMessageAt: now,
|
|
lastMessagePreview: 'Is the 3BHK still available?',
|
|
provider: 'mock',
|
|
createdAt: now,
|
|
updatedAt: now,
|
|
crmPerson: {
|
|
id: 'p1',
|
|
fullName: 'Rahul Sharma',
|
|
primaryPhone: '+919876543210',
|
|
leadStatus: 'hot',
|
|
projectName: 'Atri Aqua',
|
|
},
|
|
},
|
|
{
|
|
threadId: 'mock-2',
|
|
phoneE164: '+919988776655',
|
|
displayName: 'Unknown Number',
|
|
channel: 'whatsapp',
|
|
status: 'open',
|
|
unreadCount: 1,
|
|
lastMessageAt: now,
|
|
lastMessagePreview: 'Send me the brochure please',
|
|
provider: 'mock',
|
|
createdAt: now,
|
|
updatedAt: now,
|
|
},
|
|
{
|
|
threadId: 'mock-3',
|
|
phoneE164: '+911122334455',
|
|
displayName: 'Priya Patel',
|
|
channel: 'call',
|
|
status: 'resolved',
|
|
unreadCount: 0,
|
|
lastMessageAt: now,
|
|
provider: 'mock',
|
|
createdAt: now,
|
|
updatedAt: now,
|
|
crmPerson: {
|
|
id: 'p2',
|
|
fullName: 'Priya Patel',
|
|
primaryPhone: '+911122334455',
|
|
leadStatus: 'qualified',
|
|
projectName: 'Godrej Elevate',
|
|
},
|
|
},
|
|
];
|
|
}
|
|
|
|
function generateMockMessages(threadId: string): CommsMessage[] {
|
|
const now = new Date();
|
|
const t1 = new Date(now.getTime() - 1000 * 60 * 60 * 2).toISOString();
|
|
const t2 = new Date(now.getTime() - 1000 * 60 * 30).toISOString();
|
|
const t3 = new Date(now.getTime() - 1000 * 60 * 5).toISOString();
|
|
|
|
if (threadId === 'mock-1') {
|
|
return [
|
|
{
|
|
messageId: 'm1',
|
|
threadId,
|
|
direction: 'inbound',
|
|
messageType: 'text',
|
|
body: 'Hi, I saw your listing for Atri Aqua. Is the 3BHK still available?',
|
|
deliveryStatus: 'read',
|
|
createdAt: t1,
|
|
provider: 'mock',
|
|
senderName: 'Rahul Sharma',
|
|
},
|
|
{
|
|
messageId: 'm2',
|
|
threadId,
|
|
direction: 'outbound',
|
|
messageType: 'text',
|
|
body: 'Yes sir, absolutely. We have a premium corner unit on the 12th floor with marina view.',
|
|
deliveryStatus: 'read',
|
|
createdAt: t2,
|
|
provider: 'mock',
|
|
},
|
|
{
|
|
messageId: 'm3',
|
|
threadId,
|
|
direction: 'inbound',
|
|
messageType: 'text',
|
|
body: 'What is the final price and can I schedule a visit this weekend?',
|
|
deliveryStatus: 'delivered',
|
|
createdAt: t3,
|
|
provider: 'mock',
|
|
senderName: 'Rahul Sharma',
|
|
},
|
|
];
|
|
}
|
|
if (threadId === 'mock-2') {
|
|
return [
|
|
{
|
|
messageId: 'm4',
|
|
threadId,
|
|
direction: 'inbound',
|
|
messageType: 'text',
|
|
body: 'Send me the brochure please',
|
|
deliveryStatus: 'delivered',
|
|
createdAt: t3,
|
|
provider: 'mock',
|
|
senderName: 'Unknown',
|
|
},
|
|
];
|
|
}
|
|
return [];
|
|
}
|
|
|
|
/* ── Component ───────────────────────────────────────────────────────────── */
|
|
|
|
export function Comms() {
|
|
useStore();
|
|
const [threads, setThreads] = useState<CommsThread[]>([]);
|
|
const [activeThreadId, setActiveThreadId] = useState<string | null>(null);
|
|
const [messages, setMessages] = useState<CommsMessage[]>([]);
|
|
const [settings, setSettings] = useState<CommsSettings | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [composerText, setComposerText] = useState('');
|
|
const [sending, setSending] = useState(false);
|
|
const [mockMode, setMockMode] = useState(false);
|
|
const [showCrmRail, setShowCrmRail] = useState(true);
|
|
const messagesEndRef = useRef<HTMLDivElement>(null);
|
|
|
|
const activeThread = threads.find((t) => t.threadId === activeThreadId) || null;
|
|
|
|
useEffect(() => { loadInitial(); }, []);
|
|
useEffect(() => { if (activeThreadId) loadMessages(activeThreadId); }, [activeThreadId]);
|
|
useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [messages]);
|
|
|
|
async function loadInitial() {
|
|
try {
|
|
setLoading(true);
|
|
const [threadsRes, settingsRes] = await Promise.all([
|
|
fetchCommsThreads({ limit: 50 }),
|
|
fetchCommsSettings().catch(() => null),
|
|
]);
|
|
setThreads(threadsRes.threads || []);
|
|
setSettings(settingsRes);
|
|
setMockMode(false);
|
|
} catch (e) {
|
|
console.warn('Comms backend unavailable, switching to mock mode', e);
|
|
setMockMode(true);
|
|
setThreads(generateMockThreads());
|
|
setSettings({
|
|
provider: 'mock',
|
|
webhookSecretSet: false,
|
|
autoLinkByPhone: false,
|
|
createCrmInteractionOnInbound: false,
|
|
defaultCountryCode: '91',
|
|
});
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
async function loadMessages(threadId: string) {
|
|
try {
|
|
if (mockMode) {
|
|
setMessages(generateMockMessages(threadId));
|
|
return;
|
|
}
|
|
const res = await fetchCommsMessages(threadId, { limit: 100 });
|
|
setMessages(res.messages || []);
|
|
} catch (e) {
|
|
setMessages([]);
|
|
}
|
|
}
|
|
|
|
async function handleSend(e?: React.FormEvent) {
|
|
e?.preventDefault();
|
|
if (!composerText.trim() || !activeThreadId) return;
|
|
|
|
const payload: SendMessagePayload = {
|
|
messageType: 'text',
|
|
body: composerText.trim(),
|
|
};
|
|
|
|
const optimistic: CommsMessage = {
|
|
messageId: `opt-${Date.now()}`,
|
|
threadId: activeThreadId,
|
|
direction: 'outbound',
|
|
messageType: 'text',
|
|
body: payload.body,
|
|
deliveryStatus: 'pending',
|
|
createdAt: new Date().toISOString(),
|
|
provider: activeThread?.provider || 'mock',
|
|
};
|
|
setMessages((prev) => [...prev, optimistic]);
|
|
setComposerText('');
|
|
setSending(true);
|
|
|
|
try {
|
|
if (mockMode) {
|
|
await new Promise((r) => setTimeout(r, 800));
|
|
setMessages((prev) =>
|
|
prev.map((m) =>
|
|
m.messageId === optimistic.messageId
|
|
? { ...m, deliveryStatus: 'sent', messageId: `mock-${Date.now()}` }
|
|
: m
|
|
)
|
|
);
|
|
} else {
|
|
await sendCommsMessage(activeThreadId, payload);
|
|
await loadMessages(activeThreadId);
|
|
}
|
|
} catch (err) {
|
|
setMessages((prev) =>
|
|
prev.map((m) =>
|
|
m.messageId === optimistic.messageId ? { ...m, deliveryStatus: 'failed' } : m
|
|
)
|
|
);
|
|
} finally {
|
|
setSending(false);
|
|
}
|
|
}
|
|
|
|
async function handleLinkPerson(personId: string) {
|
|
if (!activeThreadId || mockMode) return;
|
|
try {
|
|
await linkCommsThreadToPerson(activeThreadId, { personId });
|
|
await loadInitial();
|
|
if (activeThreadId) await loadMessages(activeThreadId);
|
|
} catch (e) {
|
|
console.error(e);
|
|
}
|
|
}
|
|
|
|
const filteredThreads = threads.filter((t) => {
|
|
const q = searchQuery.toLowerCase();
|
|
return (
|
|
(t.displayName || '').toLowerCase().includes(q) ||
|
|
t.phoneE164.includes(q) ||
|
|
(t.lastMessagePreview || '').toLowerCase().includes(q)
|
|
);
|
|
});
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="h-full flex items-center justify-center text-zinc-400">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-5 h-5 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
|
|
Loading conversations…
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/* ── Empty state: provider not configured ──────────────────────────────── */
|
|
if (!mockMode && (!settings || settings.provider === 'mock')) {
|
|
return (
|
|
<div className="h-full flex items-center justify-center">
|
|
<div
|
|
className="max-w-md w-full p-8 rounded-2xl text-center"
|
|
style={{
|
|
background: 'hsl(var(--surface))',
|
|
border: '1px solid hsl(var(--border-subtle))',
|
|
}}
|
|
>
|
|
<div
|
|
className="w-14 h-14 rounded-2xl flex items-center justify-center mx-auto mb-5"
|
|
style={{ background: 'hsl(var(--accent) / 0.1)' }}
|
|
>
|
|
<MessageCircle className="w-7 h-7 text-blue-400" />
|
|
</div>
|
|
<h2 className="text-lg font-semibold text-white mb-2">Conversations</h2>
|
|
<p className="text-sm text-zinc-400 mb-6">
|
|
Connect a WhatsApp provider to start receiving and sending messages.
|
|
Until then, preview the interface with mock data.
|
|
</p>
|
|
<div className="flex gap-3 justify-center">
|
|
<button
|
|
onClick={() => setMockMode(true)}
|
|
className="px-4 py-2 rounded-xl text-sm font-medium text-white transition-colors"
|
|
style={{ background: 'hsl(var(--surface-2))', border: '1px solid hsl(var(--border-subtle))' }}
|
|
>
|
|
<Bot className="w-4 h-4 inline mr-2" />
|
|
Preview Mock Data
|
|
</button>
|
|
<button
|
|
onClick={() => { /* router push to settings */ }}
|
|
className="px-4 py-2 rounded-xl text-sm font-medium text-white transition-colors"
|
|
style={{ background: 'hsl(var(--accent))' }}
|
|
>
|
|
<Settings className="w-4 h-4 inline mr-2" />
|
|
Configure Provider
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="h-full flex gap-4" style={{ minHeight: 0 }}>
|
|
{/* ════════════════════════════════════════════════════════════════════
|
|
LEFT: Inbox
|
|
════════════════════════════════════════════════════════════════════ */}
|
|
<aside
|
|
className="flex-none flex flex-col rounded-2xl overflow-hidden"
|
|
style={{
|
|
width: 320,
|
|
background: 'hsl(var(--surface))',
|
|
border: '1px solid hsl(var(--border-subtle))',
|
|
}}
|
|
>
|
|
<div className="p-4 border-b" style={{ borderColor: 'hsl(var(--border-subtle))' }}>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h2 className="text-sm font-semibold text-white">Inbox</h2>
|
|
{mockMode && (
|
|
<span className="tag text-amber-400 border-amber-500/20 bg-amber-500/10">
|
|
Mock Mode
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="relative">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-zinc-500" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search threads…"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="w-full pl-9 pr-3 py-2 rounded-xl text-sm text-white placeholder-zinc-500 outline-none"
|
|
style={{
|
|
background: 'hsl(var(--surface-2))',
|
|
border: '1px solid hsl(var(--border-subtle))',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto custom-scrollbar">
|
|
{filteredThreads.length === 0 ? (
|
|
<div className="p-8 text-center text-zinc-500 text-sm">No threads found</div>
|
|
) : (
|
|
filteredThreads.map((thread) => (
|
|
<button
|
|
key={thread.threadId}
|
|
onClick={() => setActiveThreadId(thread.threadId)}
|
|
className="w-full text-left px-4 py-3 transition-colors relative"
|
|
style={{
|
|
background: activeThreadId === thread.threadId ? 'hsl(var(--accent) / 0.08)' : 'transparent',
|
|
borderLeft: activeThreadId === thread.threadId ? '2px solid hsl(var(--accent))' : '2px solid transparent',
|
|
}}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div
|
|
className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0"
|
|
style={{
|
|
background: thread.crmPerson ? 'hsl(var(--accent) / 0.15)' : 'hsl(var(--surface-3))',
|
|
color: thread.crmPerson ? 'hsl(var(--accent))' : 'hsl(var(--muted-fg))',
|
|
}}
|
|
>
|
|
{thread.displayName?.[0]?.toUpperCase() || <User className="w-4 h-4" />}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-sm font-medium text-white truncate">
|
|
{thread.displayName || thread.phoneE164}
|
|
</span>
|
|
{thread.unreadCount > 0 && (
|
|
<span className="ml-2 px-1.5 py-0.5 rounded-md text-[10px] font-bold bg-blue-500 text-white">
|
|
{thread.unreadCount}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-zinc-400 truncate mt-0.5">{thread.lastMessagePreview || 'No messages'}</p>
|
|
<div className="flex items-center gap-2 mt-1">
|
|
<span className="text-[10px] text-zinc-500">{thread.phoneE164}</span>
|
|
{!thread.personId && (
|
|
<span className="text-[10px] px-1.5 rounded bg-amber-500/10 text-amber-400 border border-amber-500/20">
|
|
Unresolved
|
|
</span>
|
|
)}
|
|
{thread.channel === 'call' && <Phone className="w-3 h-3 text-zinc-500" />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
))
|
|
)}
|
|
</div>
|
|
</aside>
|
|
|
|
{/* ════════════════════════════════════════════════════════════════════
|
|
CENTER: Conversation Timeline
|
|
════════════════════════════════════════════════════════════════════ */}
|
|
<section
|
|
className="flex-1 flex flex-col rounded-2xl overflow-hidden"
|
|
style={{
|
|
background: 'hsl(var(--surface))',
|
|
border: '1px solid hsl(var(--border-subtle))',
|
|
}}
|
|
>
|
|
{activeThread ? (
|
|
<>
|
|
{/* ── Client Identity Strip ── */}
|
|
<div
|
|
className="flex-none px-5 py-3 flex items-center justify-between border-b"
|
|
style={{ borderColor: 'hsl(var(--border-subtle))' }}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div
|
|
className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold"
|
|
style={{
|
|
background: activeThread.crmPerson ? 'hsl(var(--accent) / 0.15)' : 'hsl(var(--surface-3))',
|
|
color: activeThread.crmPerson ? 'hsl(var(--accent))' : 'hsl(var(--muted-fg))',
|
|
}}
|
|
>
|
|
{activeThread.displayName?.[0]?.toUpperCase() || <User className="w-4 h-4" />}
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<h3 className="text-sm font-semibold text-white">
|
|
{activeThread.displayName || activeThread.phoneE164}
|
|
</h3>
|
|
{activeThread.channel === 'whatsapp' && (
|
|
<span className="tag text-emerald-400 border-emerald-500/20 bg-emerald-500/10 text-[10px]">
|
|
WhatsApp
|
|
</span>
|
|
)}
|
|
{activeThread.channel === 'call' && (
|
|
<span className="tag text-blue-300 border-blue-400/20 bg-blue-400/10 text-[10px]">
|
|
Call
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-zinc-400">{activeThread.phoneE164}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button className="p-2 rounded-lg hover:bg-white/5 text-zinc-400 hover:text-white transition-colors">
|
|
<PhoneCall className="w-4 h-4" />
|
|
</button>
|
|
<button className="p-2 rounded-lg hover:bg-white/5 text-zinc-400 hover:text-white transition-colors">
|
|
<MoreVertical className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => setShowCrmRail((v) => !v)}
|
|
className="p-2 rounded-lg hover:bg-white/5 text-zinc-400 hover:text-white transition-colors"
|
|
title="Toggle CRM rail"
|
|
>
|
|
<ChevronLeft className={`w-4 h-4 transition-transform ${showCrmRail ? '' : 'rotate-180'}`} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ── Messages ── */}
|
|
<div className="flex-1 overflow-y-auto custom-scrollbar px-5 py-4 space-y-4">
|
|
<AnimatePresence initial={false}>
|
|
{messages.map((msg) => (
|
|
<motion.div
|
|
key={msg.messageId}
|
|
initial={{ opacity: 0, y: 8 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
className={`flex ${msg.direction === 'outbound' ? 'justify-end' : 'justify-start'}`}
|
|
>
|
|
<div
|
|
className={`max-w-[70%] px-4 py-2.5 rounded-2xl text-sm ${
|
|
msg.direction === 'outbound' ? 'rounded-br-md' : 'rounded-bl-md'
|
|
}`}
|
|
style={{
|
|
background:
|
|
msg.direction === 'outbound'
|
|
? 'hsl(var(--accent) / 0.9)'
|
|
: 'hsl(var(--surface-3))',
|
|
color: msg.direction === 'outbound' ? '#fff' : 'hsl(var(--foreground))',
|
|
}}
|
|
>
|
|
{msg.messageType === 'text' && <p className="leading-relaxed">{msg.body}</p>}
|
|
{msg.mediaUrl && (
|
|
<div className="mt-2 rounded-lg overflow-hidden">
|
|
<img src={msg.mediaUrl} alt="media" className="max-w-full max-h-48 object-cover" />
|
|
</div>
|
|
)}
|
|
<div className="flex items-center justify-end gap-1.5 mt-1.5">
|
|
<span className="text-[10px] opacity-60">
|
|
{new Date(msg.createdAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
|
</span>
|
|
{msg.direction === 'outbound' && (
|
|
<>
|
|
{msg.deliveryStatus === 'pending' && <Clock className="w-3 h-3 opacity-60" />}
|
|
{msg.deliveryStatus === 'sent' && <CheckCheck className="w-3 h-3 opacity-60" />}
|
|
{msg.deliveryStatus === 'delivered' && <CheckCheck className="w-3 h-3 text-blue-200" />}
|
|
{msg.deliveryStatus === 'read' && <CheckCheck className="w-3 h-3 text-emerald-300" />}
|
|
{msg.deliveryStatus === 'failed' && <AlertCircle className="w-3 h-3 text-red-300" />}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</AnimatePresence>
|
|
<div ref={messagesEndRef} />
|
|
</div>
|
|
|
|
{/* ── Composer ── */}
|
|
<div
|
|
className="flex-none px-4 py-3 border-t"
|
|
style={{ borderColor: 'hsl(var(--border-subtle))' }}
|
|
>
|
|
{!activeThread.personId && (
|
|
<div
|
|
className="mb-3 px-3 py-2 rounded-xl flex items-center gap-2 text-xs"
|
|
style={{
|
|
background: 'hsl(38 92% 50% / 0.08)',
|
|
border: '1px solid hsl(38 92% 50% / 0.2)',
|
|
color: 'hsl(38 92% 65%)',
|
|
}}
|
|
>
|
|
<AlertCircle className="w-4 h-4 flex-shrink-0" />
|
|
<span className="flex-1">This number is not linked to a CRM contact.</span>
|
|
<button
|
|
onClick={() => handleLinkPerson('demo-person-id')}
|
|
className="px-2 py-1 rounded-md bg-amber-500/10 hover:bg-amber-500/20 transition-colors font-medium"
|
|
>
|
|
Link
|
|
</button>
|
|
</div>
|
|
)}
|
|
<form onSubmit={handleSend} className="flex items-end gap-2">
|
|
<button
|
|
type="button"
|
|
className="p-2.5 rounded-xl text-zinc-400 hover:text-white hover:bg-white/5 transition-colors"
|
|
>
|
|
<Paperclip className="w-5 h-5" />
|
|
</button>
|
|
<div className="flex-1 relative">
|
|
<textarea
|
|
rows={1}
|
|
value={composerText}
|
|
onChange={(e) => setComposerText(e.target.value)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
handleSend();
|
|
}
|
|
}}
|
|
placeholder="Type a message…"
|
|
className="w-full px-4 py-2.5 rounded-xl text-sm text-white placeholder-zinc-500 outline-none resize-none max-h-32"
|
|
style={{
|
|
background: 'hsl(var(--surface-2))',
|
|
border: '1px solid hsl(var(--border-subtle))',
|
|
}}
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
disabled={!composerText.trim() || sending}
|
|
className="p-2.5 rounded-xl text-white transition-all disabled:opacity-40 disabled:cursor-not-allowed"
|
|
style={{ background: 'hsl(var(--accent))' }}
|
|
>
|
|
<Send className="w-5 h-5" />
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="flex-1 flex flex-col items-center justify-center text-zinc-500">
|
|
<Inbox className="w-12 h-12 mb-4 opacity-20" />
|
|
<p className="text-sm">Select a conversation to start</p>
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
{/* ════════════════════════════════════════════════════════════════════
|
|
RIGHT: CRM Intelligence Rail
|
|
════════════════════════════════════════════════════════════════════ */}
|
|
<AnimatePresence>
|
|
{showCrmRail && activeThread && (
|
|
<motion.aside
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: 20 }}
|
|
className="flex-none flex flex-col rounded-2xl overflow-hidden"
|
|
style={{
|
|
width: 300,
|
|
background: 'hsl(var(--surface))',
|
|
border: '1px solid hsl(var(--border-subtle))',
|
|
}}
|
|
>
|
|
<div className="p-4 border-b" style={{ borderColor: 'hsl(var(--border-subtle))' }}>
|
|
<h3 className="text-sm font-semibold text-white">CRM Intelligence</h3>
|
|
<p className="text-xs text-zinc-500 mt-0.5">Velocity Lens · {activeThread.phoneE164}</p>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto custom-scrollbar p-4 space-y-4">
|
|
{activeThread.crmPerson ? (
|
|
<>
|
|
<div
|
|
className="p-4 rounded-xl"
|
|
style={{ background: 'hsl(var(--surface-2))', border: '1px solid hsl(var(--border-subtle))' }}
|
|
>
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<div
|
|
className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold"
|
|
style={{ background: 'hsl(var(--accent) / 0.15)', color: 'hsl(var(--accent))' }}
|
|
>
|
|
{activeThread.crmPerson.fullName?.[0] || 'C'}
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-white">{activeThread.crmPerson.fullName || 'Unknown'}</p>
|
|
<p className="text-xs text-zinc-400">{activeThread.crmPerson.primaryEmail || 'No email'}</p>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-zinc-500">Status</span>
|
|
<span className="text-white capitalize">{activeThread.crmPerson.leadStatus || 'New'}</span>
|
|
</div>
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-zinc-500">Project</span>
|
|
<span className="text-white">{activeThread.crmPerson.projectName || '-'}</span>
|
|
</div>
|
|
<div className="flex justify-between text-xs">
|
|
<span className="text-zinc-500">Buyer Type</span>
|
|
<span className="text-white">{activeThread.crmPerson.buyerType || '-'}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className="p-4 rounded-xl"
|
|
style={{ background: 'hsl(var(--surface-2))', border: '1px solid hsl(var(--border-subtle))' }}
|
|
>
|
|
<h4 className="text-xs font-semibold text-zinc-300 uppercase tracking-wider mb-3">Next Best Action</h4>
|
|
<p className="text-sm text-white font-medium">Schedule site visit</p>
|
|
<p className="text-xs text-zinc-400 mt-1">High intent signal detected</p>
|
|
</div>
|
|
|
|
<div
|
|
className="p-4 rounded-xl"
|
|
style={{ background: 'hsl(var(--surface-2))', border: '1px solid hsl(var(--border-subtle))' }}
|
|
>
|
|
<h4 className="text-xs font-semibold text-zinc-300 uppercase tracking-wider mb-3">Quick Actions</h4>
|
|
<div className="space-y-2">
|
|
<button className="w-full text-left px-3 py-2 rounded-lg text-xs text-white hover:bg-white/5 transition-colors flex items-center gap-2">
|
|
<Phone className="w-3.5 h-3.5 text-zinc-400" />
|
|
Log Call
|
|
</button>
|
|
<button className="w-full text-left px-3 py-2 rounded-lg text-xs text-white hover:bg-white/5 transition-colors flex items-center gap-2">
|
|
<Voicemail className="w-3.5 h-3.5 text-zinc-400" />
|
|
Add Recording
|
|
</button>
|
|
<button className="w-full text-left px-3 py-2 rounded-lg text-xs text-white hover:bg-white/5 transition-colors flex items-center gap-2">
|
|
<Plus className="w-3.5 h-3.5 text-zinc-400" />
|
|
Create Task
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div
|
|
className="p-4 rounded-xl text-center"
|
|
style={{ background: 'hsl(var(--surface-2))', border: '1px solid hsl(var(--border-subtle))' }}
|
|
>
|
|
<Hash className="w-8 h-8 text-amber-500/60 mx-auto mb-3" />
|
|
<p className="text-sm text-white font-medium mb-1">Unresolved Number</p>
|
|
<p className="text-xs text-zinc-400 mb-4">
|
|
No CRM match found for {activeThread.phoneE164}
|
|
</p>
|
|
<button
|
|
onClick={() => handleLinkPerson('demo-person-id')}
|
|
className="w-full px-3 py-2 rounded-lg text-xs font-medium text-white transition-colors"
|
|
style={{ background: 'hsl(var(--accent))' }}
|
|
>
|
|
<LinkIcon className="w-3.5 h-3.5 inline mr-1.5" />
|
|
Link to Contact
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.aside>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}
|