import { Head, useForm } from '@inertiajs/react'; import { Building, CheckCircle2, Clock, MessageSquare, User as UserIcon, } from 'lucide-react'; import { useMemo } from 'react'; import { BusinessHoursGrid } from '@/components/live-chat/business-hours-grid'; import type { BusinessHoursValue } from '@/components/live-chat/business-hours-grid'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Card } from '@/components/ui/card'; import { Checkbox } from '@/components/ui/checkbox'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import AppLayout from '@/layouts/app-layout'; import { useT } from '@/lib/i18n'; import type { BreadcrumbItem } from '@/types'; type Props = { workspace: { id: string; live_chat_personalize: boolean; slack_webhook_url: string | null; teams_webhook_url: string | null; business_hours: BusinessHoursValue; }; preview: { is_open_now: boolean; next_open_at: string | null; server_now: string; }; }; export default function LiveChatSettings({ workspace, preview }: Props) { const { t } = useT(); const form = useForm({ live_chat_personalize: workspace.live_chat_personalize, slack_webhook_url: workspace.slack_webhook_url ?? '', teams_webhook_url: workspace.teams_webhook_url ?? '', business_hours: workspace.business_hours as BusinessHoursValue, }); const breadcrumbs: BreadcrumbItem[] = [ { title: t('Live chat settings'), href: '/app/settings/live-chat' }, ]; const onSubmit = (e: React.FormEvent) => { e.preventDefault(); form.patch('/app/settings/live-chat', { preserveScroll: true }); }; const previewLine = useMemo(() => { if (preview.is_open_now) { return t( 'Workspace is currently OPEN. Visitors who request a human will be queued.', ); } if (preview.next_open_at) { return t('Workspace is currently CLOSED. Next open at :time.', { time: new Date(preview.next_open_at).toLocaleString(), }); } return t( 'Workspace is currently CLOSED (no upcoming open slots configured).', ); }, [preview.is_open_now, preview.next_open_at, t]); return (

{t('Live chat settings')}

{t( "Configure how visitors reach a human, where operators get pinged, and when you're available.", )}

{/* Personalization */}

{t( 'On — visitors see "Sarah joined the chat". Off — visitors see "An agent joined" with no individual identity exposed (recommended for legal, healthcare, finance).', )}

form.setData( 'live_chat_personalize', v === true, ) } />
{/* Webhooks */}

{t( "Paste an incoming-webhook URL. When a visitor asks for a human, we'll fire a compact ping with the conversation link so an operator can jump in from wherever they are.", )}

form.setData( 'slack_webhook_url', e.target.value, ) } placeholder="https://hooks.slack.com/services/..." /> {form.errors.slack_webhook_url && (

{form.errors.slack_webhook_url}

)}
form.setData( 'teams_webhook_url', e.target.value, ) } placeholder="https://outlook.office.com/webhook/..." /> {form.errors.teams_webhook_url && (

{form.errors.teams_webhook_url}

)}
{/* Business hours */}

{t( 'When configured + outside the schedule, the visitor sees "We\'re closed right now" and the lead form. Leave the JSON as-is with enabled: false to stay always-on.', )}

{preview.is_open_now ? ( <> {t('Open')} ) : ( t('Closed') )}
{previewLine}
form.setData('business_hours', next) } />
); }