import { useState, useEffect, useRef } from 'react'; import { Send, Bot, User, Phone, MessageSquare } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Badge } from '@/components/ui/badge'; import { Head, router } from '@inertiajs/react'; import AppLayout from '@/layouts/app-layout'; import { dashboard } from '@/routes'; import { type BreadcrumbItem } from '@/types'; import axios from 'axios'; import { formatDistanceToNow } from 'date-fns'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Home', href: dashboard().url, }, { title: 'SMS', href: '/sms', }, { title: 'Conversations', }, ]; interface Message { id: number; conversation_id: number; direction: 'inbound' | 'outbound'; message_body: string; sender_phone: string; receiver_phone: string; status: string; ai_generated: boolean; created_at: string; } interface Conversation { id: number; contact_phone: string; contact_name: string | null; status: string; last_message_at: string; unread_count: number; messages_count: number; phone_number: { id: number; number: string; friendly_name: string | null; }; ai_agent: { id: number; name: string; } | null; } interface Props { conversations: { data: Conversation[]; }; currentPhone?: any; } export default function SmsConversations({ conversations, currentPhone }: Props) { const [selectedConversation, setSelectedConversation] = useState(null); const [messages, setMessages] = useState([]); const [loadingMessages, setLoadingMessages] = useState(false); const [newMessage, setNewMessage] = useState(''); const [sending, setSending] = useState(false); const messagesEndRef = useRef(null); const scrollToBottom = () => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }; useEffect(() => { scrollToBottom(); }, [messages]); useEffect(() => { if (conversations.data.length > 0 && !selectedConversation) { handleSelectConversation(conversations.data[0]); } }, [conversations]); const handleSelectConversation = async (conversation: Conversation) => { setSelectedConversation(conversation); setLoadingMessages(true); try { const response = await axios.get(`/sms/conversations/${conversation.id}/messages`); setMessages(response.data.messages || []); } catch (error) { console.error('Failed to load messages:', error); } finally { setLoadingMessages(false); } }; const handleSendMessage = async () => { if (!newMessage.trim() || !selectedConversation) return; setSending(true); try { const response = await axios.post( `/sms/conversations/${selectedConversation.id}/send`, { message: newMessage } ); if (response.data.success) { setMessages([...messages, response.data.message]); setNewMessage(''); } } catch (error) { console.error('Failed to send message:', error); alert('Failed to send message'); } finally { setSending(false); } }; const formatPhoneNumber = (phone: string) => { const cleaned = phone.replace(/\D/g, ''); if (cleaned.length === 11 && cleaned[0] === '1') { return `+${cleaned[0]} (${cleaned.slice(1, 4)}) ${cleaned.slice(4, 7)}-${cleaned.slice(7)}`; } return phone; }; return (

SMS Conversations

{currentPhone ? `Messages for ${currentPhone.number}` : 'All SMS conversations'}

{/* Conversation List */} Conversations {conversations.data.length} active conversations
{conversations.data.length === 0 ? (

No Conversations

No SMS conversations yet

) : ( conversations.data.map((conv) => (
handleSelectConversation(conv)} >

{conv.contact_name || formatPhoneNumber(conv.contact_phone)}

{conv.unread_count > 0 && ( {conv.unread_count} )}
{conv.ai_agent ? (
{conv.ai_agent.name}
) : ( Manual )} {conv.last_message_at && ( {formatDistanceToNow(new Date(conv.last_message_at), { addSuffix: true, })} )}
)) )}
{/* Message Thread */} {selectedConversation ? ( <>
{selectedConversation.contact_name || formatPhoneNumber(selectedConversation.contact_phone)} {selectedConversation.phone_number.friendly_name || selectedConversation.phone_number.number} {selectedConversation.ai_agent && ( • AI Agent: {selectedConversation.ai_agent.name} )}
{/* Messages */} {loadingMessages ? (
Loading messages...
) : messages.length === 0 ? (

No Messages

Start the conversation by sending a message

) : ( <> {messages.map((msg) => (
{msg.direction === 'inbound' ? ( ) : msg.ai_generated ? ( ) : ( )} {formatDistanceToNow(new Date(msg.created_at), { addSuffix: true })}

{msg.message_body}

))}
)} {/* Message Input */}
setNewMessage(e.target.value)} onKeyPress={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSendMessage(); } }} disabled={sending} className="bg-background text-foreground" />

Press Enter to send, Shift+Enter for new line

) : (

Select a conversation to view messages

)}
); }