"use client"; import { useState } from "react"; import type { Lang } from "@/lib/config"; import { fetchWithCSRF } from "@/lib/csrf-client"; import { Check, ChevronRight, ChevronLeft, Loader2, Mic, MessageSquare, Calendar, Brain, Sparkles, Phone, X, } from "lucide-react"; interface VoiceAgentSetupWizardProps { lang: Lang; onComplete: () => void; } type WizardStep = 1 | 2 | 3 | 4 | 5; const FEATURES = [ { icon: Mic, en: "Natural voice conversations in Arabic & English", ar: "محادثات صوتية طبيعية بالعربية والإنجليزية", }, { icon: Calendar, en: "Automatic appointment booking & management", ar: "حجز وإدارة المواعيد تلقائياً", }, { icon: MessageSquare, en: "24/7 customer support with instant responses", ar: "دعم العملاء على مدار الساعة مع ردود فورية", }, { icon: Brain, en: "AI-powered knowledge base for accurate answers", ar: "قاعدة معرفة ذكية لإجابات دقيقة", }, ]; const VOICE_TONES = [ { value: "professional", en: "Professional", ar: "احترافي", desc_en: "Formal and business-appropriate", desc_ar: "رسمي ومناسب للأعمال", }, { value: "friendly", en: "Friendly", ar: "ودود", desc_en: "Warm and approachable", desc_ar: "دافئ وقريب", }, { value: "custom", en: "Casual", ar: "عفوي", desc_en: "Relaxed and conversational", desc_ar: "مريح وحواري", }, ]; const LANGUAGES = [ { value: "en", en: "English", ar: "الإنجليزية" }, { value: "ar", en: "Arabic", ar: "العربية" }, { value: "both", en: "Both (Arabic & English)", ar: "كلاهما (عربي وإنجليزي)", }, ]; export default function VoiceAgentSetupWizard({ lang, onComplete, }: VoiceAgentSetupWizardProps) { const isAr = lang === "ar"; const [step, setStep] = useState(1); const [creating, setCreating] = useState(false); const [error, setError] = useState(null); const [errorType, setErrorType] = useState(null); const [toolsWarning, setToolsWarning] = useState(null); // Form state const [agentName, setAgentName] = useState(""); const [language, setLanguage] = useState("both"); const [voiceTone, setVoiceTone] = useState("professional"); const [greetingEn, setGreetingEn] = useState(""); const [greetingAr, setGreetingAr] = useState(""); const [phoneConnectionType, setPhoneConnectionType] = useState< "none" | "twilio_native" | "custom_sip" >("none"); const [phoneNumber, setPhoneNumber] = useState(""); const [sipUri, setSipUri] = useState(""); const [businessHoursEnabled, setBusinessHoursEnabled] = useState(true); const [customPrompt, setCustomPrompt] = useState(""); const [customVariables, setCustomVariables] = useState< Array<{ key: string; value: string }> >([]); const [enabledTools, setEnabledTools] = useState({ checkAvailability: true, createBooking: true, cancelBooking: true, rescheduleBooking: true, }); const [useKnowledgeBase, setUseKnowledgeBase] = useState(true); const handleCreate = async () => { setCreating(true); setError(null); setErrorType(null); try { const res = await fetchWithCSRF("/api/voice-agent/provision", { method: "POST", body: JSON.stringify({ agentName: agentName.trim() || undefined, language, voiceTone, greetingMessage: greetingEn.trim() || greetingAr.trim() ? { en: greetingEn.trim() || undefined, ar: greetingAr.trim() || undefined, } : undefined, useKnowledgeBase, customPrompt: customPrompt || undefined, customVariables: customVariables.filter((v) => v.key && v.value).length > 0 ? customVariables.filter((v) => v.key && v.value) : undefined, enabledTools, phoneConfig: phoneConnectionType !== "none" ? { connectionType: phoneConnectionType, phoneNumber: phoneNumber.trim() || undefined, sipUri: sipUri.trim() || undefined, } : undefined, }), }); if (!res.ok) { const data = await res.json().catch(() => null); if (data?.errorType) setErrorType(data.errorType); throw new Error( data?.message || data?.error || (isAr ? "فشل في إنشاء الوكيل" : "Failed to create agent"), ); } const successData = await res.json().catch(() => null); if (successData?.data?.toolsWarning) { setToolsWarning( typeof successData.data.toolsWarning === "string" ? successData.data.toolsWarning : isAr ? "تم إنشاء الوكيل. أدوات الحجز تحتاج إعادة إعداد." : "Agent created. Booking tools need to be configured.", ); } onComplete(); } catch (err: unknown) { const message = err instanceof Error ? err.message : isAr ? "حدث خطأ غير متوقع" : "An unexpected error occurred"; setError(message); } finally { setCreating(false); } }; return (
{/* Progress indicator */}
{[1, 2, 3, 4, 5].map((s) => (
{s < step ? : s}
{s < 5 && (
)}
))}

{isAr ? `الخطوة ${step} من 5` : `Step ${step} of 5`}

{/* Step 1: Welcome */} {step === 1 && (

{isAr ? "أنشئ وكيلك الصوتي" : "Create Your Voice Agent"}

{isAr ? "وكيل ذكاء اصطناعي يتعامل مع مكالمات العملاء، يحجز المواعيد، ويجيب على الأسئلة - على مدار الساعة." : "An AI agent that handles customer calls, books appointments, and answers questions - 24/7."}

{FEATURES.map((f, idx) => { const Icon = f.icon; return (
{isAr ? f.ar : f.en}
); })}
)} {/* Step 2: Configure */} {step === 2 && (

{isAr ? "إعدادات الوكيل" : "Agent Configuration"}

{isAr ? "خصّص وكيلك الصوتي حسب احتياجات عملك" : "Customize your voice agent to fit your business needs"}

{/* Agent Name */}
setAgentName(e.target.value)} placeholder={ isAr ? "مثال: مساعد عيادة النور" : "e.g. Al Noor Clinic Assistant" } maxLength={100} className="w-full rounded-xl border border-slate-200 px-4 py-3 text-sm focus:border-brand-green focus:ring-1 focus:ring-brand-green outline-none" />

{isAr ? "اختر اسماً مميزاً لوكيلك الصوتي" : "Choose a distinctive name for your voice agent"}

{/* Language */}
{/* Voice Tone */}
{VOICE_TONES.map((t) => ( ))}
{/* Greeting Message */}