import { Head, Link, router } from '@inertiajs/react'; import { ChevronRight, MessagesSquare, Trash2, User } from 'lucide-react'; import { useConfirm } from '@/components/confirm-dialog-provider'; import { TablePagination } from '@/components/table-pagination'; import type { PaginationMeta } from '@/components/table-pagination'; import { TableSearch } from '@/components/table-search'; import { Card } from '@/components/ui/card'; import AppLayout from '@/layouts/app-layout'; import { useT } from '@/lib/i18n'; import { index as agentsIndex, show as showAgent } from '@/routes/agents'; import { index as agentConversationsIndex } from '@/routes/agents/conversations'; import { destroy as conversationDestroy } from '@/routes/conversations'; import type { BreadcrumbItem } from '@/types'; type ShowMode = 'engaged' | 'all'; type ConversationRow = { id: string; started_at: string | null; last_activity_at: string | null; page_url: string | null; lang: string | null; visitor_anon: string | null; is_returning: boolean; message_count: number; preview: string; }; type Props = { agent: { id: string; name: string }; totals: { conversations: number; messages: number; last_24h: number; empty: number; }; conversations: ConversationRow[]; pagination: PaginationMeta; filters: { q: string; show: ShowMode }; can_delete: boolean; }; function useRelativeTime(): (iso: string | null) => string { const { t } = useT(); return (iso: string | null): string => { if (!iso) { return '—'; } const ms = Date.now() - new Date(iso).getTime(); const sec = Math.max(1, Math.round(ms / 1000)); if (sec < 60) { return t('just now'); } const min = Math.round(sec / 60); if (min < 60) { return t(':min m ago', { min }); } const h = Math.round(min / 60); if (h < 24) { return t(':h h ago', { h }); } const d = Math.round(h / 24); return t(':d d ago', { d }); }; } export default function ConversationsPage({ agent, totals, conversations, pagination, filters, can_delete, }: Props) { const { t, tChoice } = useT(); const relativeTime = useRelativeTime(); const confirm = useConfirm(); const breadcrumbs: BreadcrumbItem[] = [ { title: t('Agents'), href: agentsIndex.url() }, { title: agent.name, href: showAgent({ agent: agent.id }).url }, { title: t('Conversations'), href: agentConversationsIndex({ agent: agent.id }).url, }, ]; const isEmpty = conversations.length === 0; const hasQuery = filters.q.trim() !== ''; const showMode: ShowMode = filters.show === 'all' ? 'all' : 'engaged'; const setShowMode = (next: ShowMode) => { const query: Record = {}; if (filters.q) { query.q = filters.q; } if (next === 'all') { query.show = 'all'; } router.get(`/app/agents/${agent.id}/conversations`, query, { preserveScroll: true, preserveState: true, only: ['conversations', 'pagination', 'filters', 'totals'], }); }; const deleteOne = async (id: string) => { if (!can_delete) { return; } const ok = await confirm({ title: t('Delete conversation?'), message: t('Delete this conversation? This cannot be undone.'), confirmLabel: t('Delete'), danger: true, }); if (!ok) { return; } router.delete(conversationDestroy(id), { preserveScroll: true }); }; return (

{t('Conversations')}

{t( 'Every visitor session this agent has handled. Click a row to read the full thread.', )}

{t('Total')}

{totals.conversations.toLocaleString()}

{t('all time')}

{t('Messages')}

{totals.messages.toLocaleString()}

{t('across all conversations')}

{t('Last 24h')}

{totals.last_24h.toLocaleString()}

{t('new conversations')}

{isEmpty ? (

{hasQuery ? t('No conversations match that search.') : showMode === 'engaged' ? t('No engaged conversations yet.') : t('No conversations yet.')}

{hasQuery ? t('Try a different keyword.') : showMode === 'engaged' ? t( 'Drive-by widget loads are hidden here. Toggle "Show all" to see every session.', ) : t( 'Once visitors start chatting, every session shows up here.', )}

) : (
{conversations.map((c) => (

{c.preview}

{c.is_returning && ( {t('returning')} )} {c.lang && c.lang !== 'en' && ( {c.lang} )}

{c.page_url ?? t('(no page url)')}

{c.visitor_anon ? c.visitor_anon.slice( 0, 16, ) : t('(unknown visitor)')}

{tChoice( ':count msg|:count msgs', c.message_count, { count: c.message_count }, )} {relativeTime( c.last_activity_at, )}
{can_delete && ( )}
))}
)}
); }