const { useState, useEffect, useRef, useMemo, useCallback } = React; // React Error Boundary to prevent black screen crashes class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error: null }; } static getDerivedStateFromError(error) { return { hasError: true, error }; } componentDidCatch(error, errorInfo) { console.error("App Error Caught by Boundary:", error, errorInfo); } render() { if (this.state.hasError) { return (

Assistant Encountered a Temporary Error

The page remained visible and protected from crashing. Click below to reload the assistant.

); } return this.props.children; } } // Safe inline React SVG Icon Component (Prevents DOM mutation crashes caused by Lucide) function Icon({ name, className = "w-4 h-4" }) { const icons = { mic: , "message-square": , "phone-call": , "phone-off": , wifi: , activity: , info: , camera: , "upload-cloud": , "map-pin": , crosshair: , "shield-check": , "credit-card": , "external-link": , "check-circle": , download: , calendar: , clock: , check: , x: , refresh: , user: , slash: , send: , mail: , "cloud-rain": }; return icons[name] || ; } // Safe Money Formatter Helper (Global & Resilient) const formatMoney = function(amount) { if (typeof window.formatMoney === 'function') { return window.formatMoney(amount); } const num = typeof amount === 'number' ? amount : parseFloat(String(amount ?? '').replace(/[^0-9.-]+/g, '')); const safeNum = (isNaN(num) || num < 0) ? 50 : num; return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(safeNum); }; // Firebase Config fallback const firebaseConfig = { apiKey: "AIzaSy_MOCK_FIREBASE_KEY_FOR_KUOTE_FIELD_AGENT", authDomain: "kuote-field-agent.firebaseapp.com", projectId: "kuote-field-agent", storageBucket: "kuote-field-agent.appspot.com", messagingSenderId: "1234567890", appId: "1:1234567890:web:abcdef123456" }; let db = null; try { if (typeof window !== 'undefined' && window.firebase && Array.isArray(window.firebase.apps)) { if (!window.firebase.apps.length) { window.firebase.initializeApp(firebaseConfig); } db = window.firebase.firestore(); } else if (typeof firebase !== 'undefined' && firebase && Array.isArray(firebase.apps)) { if (!firebase.apps.length) { firebase.initializeApp(firebaseConfig); } db = firebase.firestore(); } } catch (e) { console.warn("Firebase/Firestore local fallback mode initialized:", e); } // 2026 UI Design System Archetypes & Tokens const ARCHETYPES = { tech_dark: { id: "tech_dark", name: "Tech Dark (Cyber Emerald)", archetype: "tech_dark", primaryColorHex: "#00E676", surfaceBgHex: "#0A0D14", accentGlowHex: "rgba(0, 230, 118, 0.20)", heroBadgeText: "VERIFIED PRO DISPATCH • 2026 CERTIFIED", cardBlurIntensity: "backdrop-blur-xl", layoutVariant: "split_hero_voice_first", cardBorder: "border-emerald-500/30", gradientText: "from-emerald-400 via-teal-300 to-cyan-400", orbGlow: "#00E676", taglineBadge: "STARLINK CERTIFIED EXPERT • 24/7 AI DISPATCH" }, modern_clean: { id: "modern_clean", name: "Modern Clean (Electric Indigo)", archetype: "modern_clean", primaryColorHex: "#6366F1", surfaceBgHex: "#0B1120", accentGlowHex: "rgba(99, 102, 241, 0.22)", heroBadgeText: "MASTER CERTIFIED • 2026 PRECISION DISPATCH", cardBlurIntensity: "backdrop-blur-2xl", layoutVariant: "card_stack_catalog", cardBorder: "border-indigo-500/30", gradientText: "from-indigo-400 via-purple-300 to-cyan-400", orbGlow: "#6366F1", taglineBadge: "PRECISION NETWORK PROS • SMART DISPATCH" }, luxury_minimal: { id: "luxury_minimal", name: "Luxury Minimal (White Glove Gold)", archetype: "luxury_minimal", primaryColorHex: "#F59E0B", surfaceBgHex: "#09090B", accentGlowHex: "rgba(245, 158, 11, 0.18)", heroBadgeText: "WHITE GLOVE VIP SERVICE • 2026 ARCHITECTURAL", cardBlurIntensity: "backdrop-blur-xl", layoutVariant: "split_hero_voice_first", cardBorder: "border-amber-500/30", gradientText: "from-amber-300 via-yellow-200 to-amber-500", orbGlow: "#F59E0B", taglineBadge: "CONCIERGE SATELLITE & AUDIO • VIP DISPATCH" }, rugged_industrial: { id: "rugged_industrial", name: "Rugged Industrial (High-Vis Amber)", archetype: "rugged_industrial", primaryColorHex: "#F97316", surfaceBgHex: "#121214", accentGlowHex: "rgba(249, 115, 22, 0.25)", heroBadgeText: "COMMERCIAL RAPID RESPONSE • 24/7 HEAVY DUTY", cardBlurIntensity: "backdrop-blur-lg", layoutVariant: "card_stack_catalog", cardBorder: "border-orange-500/30", gradientText: "from-orange-400 via-amber-300 to-red-500", orbGlow: "#F97316", taglineBadge: "HEAVY DUTY EMERGENCY CREW • DISPATCH READY" } }; // Starlink Installation Default Fallback Configuration with 2026 Theme Tokens const DEFAULT_CONFIG = { companyName: "Skynet One", siteTitle: "Skynet One Starlink Installation", siteSubtitle: "Official Starlink Dish Mounting, Fiber Cable Routing & Mesh Setup", themeColorHex: "#00E676", voiceCallButtonText: "Instant AI Dispatch / Voice Assistant", voiceCallDescription: "Speak or text directly with our AI assistant to book Starlink roof mounting, cable routing, or mesh setup.", quickDepositFee: 50.00, industry: "Starlink & Fiber Installation", logoUrl: "https://images.unsplash.com/photo-1544197150-b99a580bb7a8?w=150&auto=format&fit=crop&q=80", themeConfig: { archetype: "tech_dark", primaryColorHex: "#00E676", surfaceBgHex: "#0A0D14", accentGlowHex: "rgba(0, 230, 118, 0.18)", heroBadgeText: "VERIFIED PRO DISPATCH • 2026 CERTIFIED", cardBlurIntensity: "backdrop-blur-xl", layoutVariant: "split_hero_voice_first" }, protectionPlans: [ { id: "plan_care_vip", title: "Skynet Care VIP Shield", monthlyPrice: 19.99, features: [ "1 Free Annual Satellite Re-Alignment & Roof Check", "Priority 24/7 Voice AI Dispatch & Same-Day Window", "15% Discount on In-Wall Wiring & Mesh Wi-Fi Add-ons", "Zero Deductible Storm & Wind Realignment Guarantee" ], isActive: true } ], services: [ { id: "srv_1", name: "Standard Starlink Roof/Wall Installation (Customer Mount)", price: 200.00, depositAmount: 50.00, desc: "Professional dish mounting on roof/eaves using customer bracket with obstruction check" }, { id: "srv_2", name: "Standard Starlink Roof/Wall Installation (Mount Included)", price: 299.00, depositAmount: 50.00, desc: "Complete installation including commercial heavy-duty mounting bracket" }, { id: "srv_3", name: "Custom Surface Cable Routing", price: 75.00, depositAmount: 50.00, desc: "Weatherproof exterior surface cable pass-through routing" }, { id: "srv_4", name: "Interior Wall Fishing Cable Routing", price: 125.00, depositAmount: 50.00, desc: "Concealed interior wall fishing cable routing" }, { id: "srv_5", name: "Wi-Fi Mesh Network Setup", price: 80.00, depositAmount: 50.00, desc: "Whole-home wireless mesh network configuration (up to 2 routers)" }, { id: "srv_6", name: "Site Survey & Obstruction Check", price: 130.00, depositAmount: 50.00, desc: "On-site satellite clearance check and dish alignment" }, { id: "srv_7", name: "Ground Pole Mount Installation (Specialty option)", price: 199.00, depositAmount: 50.00, desc: "Ground pole installation with conduit line trenching" } ], systemInstruction: "You are the official AI Assistant for Skynet One Starlink Installation. Direct Answers First: When asked about standard installation, state clearly that Standard Installation is $200 (customer provides mount) or $299 (mount included). NEVER confuse with or mention Pole Mount ($199) unless the customer specifically asks about pole mounting. MANDATORY BOOKING INTAKE: Before finalizing any appointment or triggering in-app checkout, you MUST collect ALL 4 required intake details: 1) Preferred Date & Time, 2) Installation Address or Zip Code, 3) Full Name, 4) Phone Number. Ask for Date & Address first, then Name & Phone. Once all 4 fields are collected, summarize them directly and instruct the customer to click the on-screen 'Pay $50 Deposit' button. Output strictly in JSON format with customer_name, customer_phone, installation_address, and preferred_date fields." }; function App() { const [config, setConfig] = useState(DEFAULT_CONFIG); const [loading, setLoading] = useState(true); const [issueText, setIssueText] = useState(""); const [selectedPhoto, setSelectedPhoto] = useState(null); const [photoPreview, setPhotoPreview] = useState(null); // Gemini Voice State const [isLiveConnected, setIsLiveConnected] = useState(false); const [voiceStatus, setVoiceStatus] = useState("Disconnected"); const [aiResponseText, setAiResponseText] = useState(""); const [transcript, setTranscript] = useState([]); const transcriptRef = useRef([]); const [depositLink, setDepositLink] = useState(null); const [bookingDetails, setBookingDetails] = useState(null); const bookingDetailsRef = useRef({ customerName: "", customerPhone: "", installationAddress: "", preferredDate: "" }); const [isProcessingStripe, setIsProcessingStripe] = useState(false); const [callDuration, setCallDuration] = useState(0); const [audioLevels, setAudioLevels] = useState([20, 40, 60, 30, 50]); const [showPostCallSummary, setShowPostCallSummary] = useState(false); const [voiceLanguage, setVoiceLanguage] = useState('auto'); // 'auto', 'en-US', 'pl-PL', 'es-ES' // Text Chat Fallback State const [activeTab, setActiveTab] = useState('voice'); // 'voice' or 'chat' const [chatInput, setChatInput] = useState(''); const [chatMessages, setChatMessages] = useState([ { sender: 'AI', text: 'Hello! Thanks for reaching out to Skynet One. How can I help with your Starlink or networking setup today?' } ]); const [isAiTyping, setIsAiTyping] = useState(false); // GPS Location State const [gpsLocation, setGpsLocation] = useState(null); const [isGettingGps, setIsGettingGps] = useState(false); const [gpsStatusMessage, setGpsStatusMessage] = useState(""); const [copiedGpsLink, setCopiedGpsLink] = useState(false); // Dispatch Timeline State const [dispatchStage, setDispatchStage] = useState(0); // 0: Requested, 1: Tech Assigned, 2: En Route, 3: Arrived const [smsNotification, setSmsNotification] = useState(null); // Appointment Status & Contractor Reschedule Workflow const [appointmentId, setAppointmentId] = useState(null); const [bookingStatus, setBookingStatus] = useState("PENDING_CONFIRMATION"); // PENDING_CONFIRMATION, CONFIRMED, RESCHEDULE_PROPOSED, CANCELLED_REFUNDED const [activeRole, setActiveRole] = useState("contractor"); // "contractor" or "customer" const [rescheduleData, setRescheduleData] = useState(null); const [isRescheduleModalOpen, setIsRescheduleModalOpen] = useState(false); const [rescheduleSlot1, setRescheduleSlot1] = useState(""); const [rescheduleSlot2, setRescheduleSlot2] = useState(""); const [rescheduleNote, setRescheduleNote] = useState(""); const [isUpdatingStatus, setIsUpdatingStatus] = useState(false); const [statusFeedbackMessage, setStatusFeedbackMessage] = useState(null); // 2026 AI Storefront Customizer & Dynamic Theme State const [activeArchetypeKey, setActiveArchetypeKey] = useState("tech_dark"); const [aiCustomizerPrompt, setAiCustomizerPrompt] = useState(""); const [isAiMutating, setIsAiMutating] = useState(false); const [customizerFeedback, setCustomizerFeedback] = useState(null); const [isCustomizerOpen, setIsCustomizerOpen] = useState(false); const [isCarePlanSelected, setIsCarePlanSelected] = useState(false); // Provider Stripe Connect Quick-Action States const [isGeneratingConnectCheckout, setIsGeneratingConnectCheckout] = useState(false); const [providerCheckoutResult, setProviderCheckoutResult] = useState(null); const [customDepositAmount, setCustomDepositAmount] = useState("50"); const [copiedCheckoutLink, setCopiedCheckoutLink] = useState(false); const [smsSentSuccess, setSmsSentSuccess] = useState(false); // Derive Current Archetype Design Tokens const currentArchetype = useMemo(() => { const archKey = config?.themeConfig?.archetype || activeArchetypeKey || "tech_dark"; const base = ARCHETYPES[archKey] || ARCHETYPES.tech_dark; return { ...base, primaryColorHex: config?.themeConfig?.primaryColorHex || config?.themeColorHex || base.primaryColorHex, surfaceBgHex: config?.themeConfig?.surfaceBgHex || base.surfaceBgHex, accentGlowHex: config?.themeConfig?.accentGlowHex || base.accentGlowHex, heroBadgeText: config?.themeConfig?.heroBadgeText || base.heroBadgeText, cardBlurIntensity: config?.themeConfig?.cardBlurIntensity || base.cardBlurIntensity, layoutVariant: config?.themeConfig?.layoutVariant || base.layoutVariant }; }, [config, activeArchetypeKey]); // Handle 1-Click Archetype Switch const handleApplyArchetype = (archKey) => { setActiveArchetypeKey(archKey); const chosen = ARCHETYPES[archKey]; if (!chosen) return; setConfig(prev => ({ ...prev, themeColorHex: chosen.primaryColorHex, themeConfig: { ...(prev.themeConfig || {}), archetype: chosen.archetype, primaryColorHex: chosen.primaryColorHex, surfaceBgHex: chosen.surfaceBgHex, accentGlowHex: chosen.accentGlowHex, heroBadgeText: chosen.heroBadgeText, cardBlurIntensity: chosen.cardBlurIntensity, layoutVariant: chosen.layoutVariant } })); setCustomizerFeedback(`Switched archetype to "${chosen.name}" in real-time!`); setTimeout(() => setCustomizerFeedback(null), 4000); }; // Handle Natural Language AI Mutation Engine Call const handleAiMutationSubmit = async (e) => { if (e) e.preventDefault(); if (!aiCustomizerPrompt.trim()) return; setIsAiMutating(true); setCustomizerFeedback("Gemini AI is re-architecting your storefront tokens..."); try { const searchParams = new URLSearchParams(window.location.search); const slug = searchParams.get("slug") || "tenant_starlink_batavia"; const mutationEndpoints = [ '/mutateMerchantProfileWithAI', 'https://us-central1-kuote-field-agent.cloudfunctions.net/mutateMerchantProfileWithAI' ]; let mutationSuccess = false; let updatedData = null; for (const url of mutationEndpoints) { try { const res = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ slug, prompt: aiCustomizerPrompt, currentConfig: config }) }); if (res.ok) { const resJson = await res.json(); if (resJson && resJson.updatedConfig) { updatedData = resJson.updatedConfig; mutationSuccess = true; break; } } } catch (err) { console.warn("Mutation endpoint note:", err); } } if (mutationSuccess && updatedData) { setConfig(updatedData); if (updatedData.themeConfig?.archetype) { setActiveArchetypeKey(updatedData.themeConfig.archetype); } setCustomizerFeedback("✨ Storefront successfully updated with AI!"); setAiCustomizerPrompt(""); } else { // Fallback local heuristic mutation for instant responsiveness const promptLower = aiCustomizerPrompt.toLowerCase(); let nextArchetype = activeArchetypeKey; if (promptLower.includes("luxury") || promptLower.includes("gold")) nextArchetype = "luxury_minimal"; else if (promptLower.includes("clean") || promptLower.includes("indigo") || promptLower.includes("blue")) nextArchetype = "modern_clean"; else if (promptLower.includes("orange") || promptLower.includes("rugged") || promptLower.includes("industrial")) nextArchetype = "rugged_industrial"; else if (promptLower.includes("green") || promptLower.includes("cyber") || promptLower.includes("tech")) nextArchetype = "tech_dark"; const chosenArch = ARCHETYPES[nextArchetype] || ARCHETYPES.tech_dark; let newDeposit = config.quickDepositFee; const depositMatch = promptLower.match(/\$?(\d+)\s*(deposit|fee)/); if (depositMatch) newDeposit = parseFloat(depositMatch[1]); setConfig(prev => ({ ...prev, themeColorHex: chosenArch.primaryColorHex, quickDepositFee: newDeposit, themeConfig: { ...chosenArch, archetype: nextArchetype } })); setActiveArchetypeKey(nextArchetype); setCustomizerFeedback("✨ Storefront customized with requested tokens!"); setAiCustomizerPrompt(""); } } catch (e) { console.warn("AI Mutation exception:", e); setCustomizerFeedback("Applied custom styling tokens locally."); } finally { setIsAiMutating(false); setTimeout(() => setCustomizerFeedback(null), 5000); } }; const mediaStreamRef = useRef(null); const voiceTimerRef = useRef(null); const isLiveConnectedRef = useRef(false); const audioCtxRef = useRef(null); const analyserRef = useRef(null); const animationFrameRef = useRef(null); const recognitionRef = useRef(null); const isSpeakingRef = useRef(false); const vadSilenceTimerRef = useRef(null); const accumulatedSpeechRef = useRef(''); const lastActiveTimestampRef = useRef(Date.now()); // Locked Voice Persona ID (en-US-Neural2-F - Skynet One Voice) const LOCKED_VOICE_PERSONA = { id: 'en-US-Neural2-F', name: 'Skynet One Neural Assistant', sampleRate: 24000 }; // Safe Money Formatter Helper (Prevents crash when rendering prices/fees) const formatMoney = (val) => window.formatMoney(val); // Text Cleaner for Speech Synthesis (Removes markdown, brackets, and formats money) const cleanSpeechText = (raw) => { if (!raw) return ""; return raw .replace(/\[.*?\]/g, '') .replace(/[\*\_~`#]/g, '') .replace(/https?:\/\/\S+/g, 'the website link') .replace(/\$(\d+)(\.\d{2})?/g, '$1 dollars') .trim(); }; // Helper to convert base64 PCM (16-bit, 24kHz) to Web Audio Buffer const decodePcmToAudioBuffer = (base64Data, audioCtx, sampleRate = 24000) => { try { const binaryString = window.atob(base64Data); const len = binaryString.length; const bytes = new Uint8Array(len); for (let i = 0; i < len; i++) { bytes[i] = binaryString.charCodeAt(i); } const int16Array = new Int16Array(bytes.buffer); const numSamples = int16Array.length; const audioBuffer = audioCtx.createBuffer(1, numSamples, sampleRate); const channelData = audioBuffer.getChannelData(0); for (let i = 0; i < numSamples; i++) { channelData[i] = int16Array[i] / 32768.0; } return audioBuffer; } catch (err) { console.warn("[QuoteBit Voice] PCM decode notice:", err); return null; } }; // Controlled QuoteBit AI Engine using Firebase Cloud Function Backend const generateAiResponseAsync = async (userMsg, historyMessages = []) => { const searchParams = new URLSearchParams(window.location.search); const currentSlug = searchParams.get("slug") || "skynet-one"; console.log(`[QuoteBit AI] Starting AI request for slug: ${currentSlug}, message: "${userMsg}"`); const endpoints = [ '/chat', 'https://us-central1-kuote-field-agent.cloudfunctions.net/chat' ]; let lastData = null; let success = false; let lastError = null; // Try backend proxy endpoints (/chat, Cloud Function) for (const url of endpoints) { try { console.log(`[QuoteBit AI] Attempting backend endpoint: ${url}`); const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 7000); const response = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: userMsg, prompt: userMsg, history: historyMessages, slug: currentSlug, voice: true, wantAudio: true }), signal: controller.signal }); clearTimeout(timeoutId); console.log(`[QuoteBit AI] Endpoint ${url} returned HTTP status: ${response.status}`); if (response.ok) { const contentType = response.headers.get("content-type") || ""; if (contentType.includes("application/json")) { lastData = await response.json(); if (lastData && (lastData.text || lastData.aiReply)) { console.log(`[QuoteBit AI] Success from backend endpoint ${url}`); success = true; break; } } } else { const errText = await response.text(); lastError = new Error(`HTTP ${response.status}: ${errText}`); console.warn(`[QuoteBit AI] Endpoint ${url} error:`, response.status, errText); } } catch (e) { lastError = e; console.warn(`[QuoteBit AI] Endpoint ${url} fetch exception:`, e?.message || e); } } if (success && lastData) { const responseText = lastData.text || lastData.aiReply || ""; const isBooking = !!(lastData.bookingTriggered || lastData.in_app_checkout_required || lastData.action === "QUOTEBIT_BOOKING"); return { action: "QUOTEBIT_BOOKING", text: responseText, aiReply: responseText, audioBase64: lastData.audioBase64 || null, mimeType: lastData.mimeType || "audio/pcm;rate=24000", bookingTriggered: isBooking, in_app_checkout_required: isBooking, deposit_amount: lastData.deposit_amount || (config?.quickDepositFee || 50.00), serviceName: lastData.serviceName || lastData.detected_service || (config?.services?.[0]?.name || "Standard Starlink Roof/Wall Installation (Customer Mount)"), customer_name: lastData.customer_name || "", customer_phone: lastData.customer_phone || "", installation_address: lastData.installation_address || "", preferred_date: lastData.preferred_date || "" }; } console.error("[QUOTEBIT AI] Backend Cloud Function request failed. Last error:", lastError); const unavailableMsg = "QuoteBit AI is temporarily unavailable. Please try again in a moment."; return { text: unavailableMsg, aiReply: unavailableMsg, audioBase64: null, mimeType: null, bookingTriggered: false, serviceName: "" }; }; // Safe restart of speech recognition const restartListeningSafely = () => { if (!isLiveConnectedRef.current || isSpeakingRef.current) return; try { if (recognitionRef.current) { recognitionRef.current.stop(); } } catch (e) {} setTimeout(() => { if (isLiveConnectedRef.current && !isSpeakingRef.current && recognitionRef.current) { try { recognitionRef.current.start(); setVoiceStatus("Listening... (Speak in English, Polish, or Spanish)"); } catch (err) { // Ignore if already started } } }, 150); }; // Unified Neural Audio Playback Engine (Zero robotic browser TTS) const playGeminiNeuralAudio = async (audioPayload, textFallback, onEndCallback) => { try { if (typeof window === 'undefined') return; lastActiveTimestampRef.current = Date.now(); isSpeakingRef.current = true; setVoiceStatus("Skynet One Speaking..."); // Mute / pause speech recognition to prevent crosstalk loop if (recognitionRef.current) { try { recognitionRef.current.stop(); } catch (e) {} } const AudioContextClass = window.AudioContext || window.webkitAudioContext; if (AudioContextClass) { if (!audioCtxRef.current) { audioCtxRef.current = new AudioContextClass(); } const ctx = audioCtxRef.current; if (ctx.state === 'suspended') { ctx.resume().catch(() => {}); } // Soft harmonic chime try { const osc = ctx.createOscillator(); const gain = ctx.createGain(); osc.type = 'sine'; osc.frequency.setValueAtTime(587.33, ctx.currentTime); // D5 osc.frequency.exponentialRampToValueAtTime(880.00, ctx.currentTime + 0.08); // A5 gain.gain.setValueAtTime(0.04, ctx.currentTime); gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.16); osc.connect(gain); gain.connect(ctx.destination); osc.start(); osc.stop(ctx.currentTime + 0.16); } catch (e) {} const handleAudioDone = () => { isSpeakingRef.current = false; setVoiceStatus("Listening... (Speak anytime)"); if (onEndCallback) { try { onEndCallback(); } catch (e) {} } restartListeningSafely(); }; // If we have Gemini neural audio stream if (audioPayload && audioPayload.audioBase64) { try { let buffer = null; if (audioPayload.mimeType && audioPayload.mimeType.includes("pcm")) { buffer = decodePcmToAudioBuffer(audioPayload.audioBase64, ctx, 24000); } else { const binaryString = window.atob(audioPayload.audioBase64); const len = binaryString.length; const bytes = new Uint8Array(len); for (let i = 0; i < len; i++) bytes[i] = binaryString.charCodeAt(i); buffer = await ctx.decodeAudioData(bytes.buffer); } if (buffer) { const source = ctx.createBufferSource(); source.buffer = buffer; source.connect(ctx.destination); source.onended = handleAudioDone; source.start(0); return; } } catch (bufErr) { console.warn("[QuoteBit Voice] Neural audio playback note:", bufErr); } } } // Safe natural timing fallback const estDurationMs = Math.max(1600, Math.min(6000, ((textFallback || '').length * 55))); setTimeout(() => { isSpeakingRef.current = false; setVoiceStatus("Listening... (Speak anytime)"); if (onEndCallback) { try { onEndCallback(); } catch (e) {} } restartListeningSafely(); }, estDurationMs); } catch (err) { console.warn("Audio playback notice handled safely:", err); isSpeakingRef.current = false; restartListeningSafely(); } }; // Setup Real-time Microphone Input Level Analyzer with Hardware Echo Cancellation const setupMicAnalyser = (stream) => { try { const AudioContextClass = window.AudioContext || window.webkitAudioContext; if (!AudioContextClass || !stream) return; if (!audioCtxRef.current) { audioCtxRef.current = new AudioContextClass(); } const ctx = audioCtxRef.current; if (ctx.state === 'suspended') { ctx.resume().catch(() => {}); } const source = ctx.createMediaStreamSource(stream); const analyser = ctx.createAnalyser(); analyser.fftSize = 64; source.connect(analyser); analyserRef.current = analyser; const dataArray = new Uint8Array(analyser.frequencyBinCount); const updateLevels = () => { if (!isLiveConnectedRef.current) return; try { if (!isSpeakingRef.current) { analyser.getByteFrequencyData(dataArray); const l1 = Math.min(100, Math.max(15, Math.round((dataArray[0] || 0) / 2.55))); const l2 = Math.min(100, Math.max(15, Math.round((dataArray[2] || 0) / 2.55))); const l3 = Math.min(100, Math.max(15, Math.round((dataArray[4] || 0) / 2.55))); const l4 = Math.min(100, Math.max(15, Math.round((dataArray[6] || 0) / 2.55))); const l5 = Math.min(100, Math.max(15, Math.round((dataArray[8] || 0) / 2.55))); setAudioLevels([l1, l2, l3, l4, l5]); } } catch (e) {} animationFrameRef.current = requestAnimationFrame(updateLevels); }; updateLevels(); } catch (err) { console.warn("Mic analyzer notice handled safely:", err); } }; // Audio level animation & Post-Call Summary trigger useEffect(() => { let levelInterval = null; if (isLiveConnected) { setShowPostCallSummary(false); } else { if (transcript.length > 0) { setShowPostCallSummary(true); } } return () => { if (levelInterval) clearInterval(levelInterval); }; }, [isLiveConnected]); // Space bar keyboard shortcut to toggle voice call useEffect(() => { const handleKeyDown = (e) => { if (e.code === 'Space' && activeTab === 'voice') { const activeTag = document.activeElement ? document.activeElement.tagName : ''; if (activeTag !== 'INPUT' && activeTag !== 'TEXTAREA') { e.preventDefault(); toggleGeminiLiveCall(); } } }; window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [activeTab, isLiveConnected]); // Download Transcript function const downloadTranscript = () => { const text = transcript.join('\n'); const blob = new Blob([text], { type: 'text/plain;charset=utf-8' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = `skynet_one_call_transcript_${Date.now()}.txt`; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); }; // Session Watchdog Timer (Preserves persistent connection; resets on any activity) useEffect(() => { let watchdogTimer = null; if (isLiveConnected) { lastActiveTimestampRef.current = Date.now(); watchdogTimer = setInterval(() => { const idleMs = Date.now() - lastActiveTimestampRef.current; if (idleMs > 120000) { // 2 minutes idle timeout if (mediaStreamRef.current) { try { mediaStreamRef.current.getTracks().forEach(track => track.stop()); } catch (e) {} mediaStreamRef.current = null; } setIsLiveConnected(false); setVoiceStatus("Call ended automatically due to 2m inactivity."); } }, 10000); } return () => { if (watchdogTimer) clearInterval(watchdogTimer); }; }, [isLiveConnected]); // Keep isLiveConnectedRef in sync useEffect(() => { isLiveConnectedRef.current = isLiveConnected; }, [isLiveConnected]); // Active Call Duration Timer useEffect(() => { let timer = null; if (isLiveConnected) { setCallDuration(0); timer = setInterval(() => { setCallDuration((prev) => prev + 1); }, 1000); } else { setCallDuration(0); } return () => { if (timer) clearInterval(timer); }; }, [isLiveConnected]); const formatCallDuration = (seconds) => { const mins = Math.floor(seconds / 60); const secs = seconds % 60; return `${String(mins).padStart(2, '0')}:${String(secs).padStart(2, '0')}`; }; // Refresh Lucide Icons useEffect(() => { if (window.lucide) { window.lucide.createIcons(); } }); // Load Firestore Configuration for Tenant / Slug useEffect(() => { let isMounted = true; const loadTimer = setTimeout(() => { if (isMounted) setLoading(false); }, 1000); try { const searchParams = new URLSearchParams(window.location.search); let slug = searchParams.get("slug") || "tenant_starlink_batavia"; if (db && typeof db.collection === 'function') { db.collection("microsites").doc(slug).get() .then((doc) => { if (!isMounted) return; clearTimeout(loadTimer); if (doc.exists) { const data = doc.data(); const mergedThemeConfig = data.themeConfig || { archetype: data.archetype || "tech_dark", primaryColorHex: data.themeColors || data.primaryColorHex || "#00E676", surfaceBgHex: data.surfaceBgHex || "#0A0D14", accentGlowHex: data.accentGlowHex || "rgba(0, 230, 118, 0.18)", heroBadgeText: data.heroBadgeText || "VERIFIED PRO DISPATCH • 2026 CERTIFIED", cardBlurIntensity: data.cardBlurIntensity || "backdrop-blur-xl", layoutVariant: data.layoutVariant || "split_hero_voice_first" }; setConfig(prev => ({ ...prev, companyName: data.businessName || data.companyName || "Skynet One", siteTitle: data.businessName || data.siteTitle || "Skynet One Starlink Installation", siteSubtitle: data.headline || data.siteSubtitle || "Official Starlink Dish Mounting, Fiber Cable Routing & Mesh Setup", themeColorHex: mergedThemeConfig.primaryColorHex || data.themeColors || "#00E676", quickDepositFee: data.depositAmount || prev.quickDepositFee || 50.00, logoUrl: data.logoUrl || prev.logoUrl, themeConfig: mergedThemeConfig, protectionPlans: (data.protectionPlans && Array.isArray(data.protectionPlans)) ? data.protectionPlans : prev.protectionPlans, services: (data.services && Array.isArray(data.services) && data.services.length > 0) ? data.services : prev.services })); if (mergedThemeConfig.archetype) { setActiveArchetypeKey(mergedThemeConfig.archetype); } } setLoading(false); }) .catch((err) => { console.warn("Firestore fetch notice (using defaults):", err); if (isMounted) setLoading(false); }); } else { if (isMounted) setLoading(false); } } catch (err) { console.warn("useEffect setup notice (using defaults):", err); if (isMounted) setLoading(false); } return () => { isMounted = false; clearTimeout(loadTimer); }; }, []); // Image selection handler const handleImageUpload = (e) => { const file = e.target.files && e.target.files[0]; if (file) { setSelectedPhoto(file); const reader = new FileReader(); reader.onloadend = () => setPhotoPreview(reader.result); reader.readAsDataURL(file); } }; // Stripe Deposit Function Call Callback function triggerStripeDepositFunctionCalling(params) { setIsProcessingStripe(true); const newApptId = appointmentId || `appt_${Date.now()}_${Math.floor(1000 + Math.random() * 9000)}`; setAppointmentId(newApptId); setBookingStatus("PENDING_CONFIRMATION"); if (params) { const mergedDetails = { serviceName: params.serviceType || bookingDetailsRef.current.serviceName || "Standard Starlink Roof/Wall Installation (Customer Mount)", depositAmount: params.depositAmount || bookingDetailsRef.current.depositAmount || 50.00, customerName: params.customerName || bookingDetailsRef.current.customerName || "", customerPhone: params.customerPhone || bookingDetailsRef.current.customerPhone || "", installationAddress: params.installationAddress || bookingDetailsRef.current.installationAddress || "", preferredDate: params.preferredDate || bookingDetailsRef.current.preferredDate || "", notes: params.notes || bookingDetailsRef.current.notes || "" }; bookingDetailsRef.current = mergedDetails; setBookingDetails(mergedDetails); if (db && typeof db.collection === 'function') { db.collection("appointments").doc(newApptId).set({ customerName: mergedDetails.customerName, customerPhone: mergedDetails.customerPhone, installationAddress: mergedDetails.installationAddress, preferredDate: mergedDetails.preferredDate, serviceName: mergedDetails.serviceName, depositAmount: mergedDetails.depositAmount, status: "PENDING_CONFIRMATION", createdAt: new Date().toISOString() }, { merge: true }).catch(err => console.warn("Firestore appointment save notice:", err)); } } setTimeout(() => { const generatedCheckoutUrl = `https://checkout.stripe.com/c/pay/cs_test_quotecall_${Date.now()}?amount=${params?.depositAmount || 50.00}`; setDepositLink(generatedCheckoutUrl); setIsProcessingStripe(false); setDispatchStage(1); }, 800); } // Quick Voice Prompt Trigger const handleQuickVoicePrompt = async (promptText) => { if (!isLiveConnected) return; const currentHistory = [...transcriptRef.current, `[User] ${promptText}`]; transcriptRef.current = currentHistory; setTranscript(currentHistory); const { aiReply, text, audioBase64, mimeType, bookingTriggered, serviceName, customer_name, customer_phone, installation_address, preferred_date, deposit_amount } = await generateAiResponseAsync(promptText, currentHistory); const replyMsg = text || aiReply; setAiResponseText(`"${replyMsg}"`); const updatedHistory = [...transcriptRef.current, `[AI] ${replyMsg}`]; transcriptRef.current = updatedHistory; setTranscript(updatedHistory); // Update cumulative details if new ones were provided if (customer_name) bookingDetailsRef.current.customerName = customer_name; if (customer_phone) bookingDetailsRef.current.customerPhone = customer_phone; if (installation_address) bookingDetailsRef.current.installationAddress = installation_address; if (preferred_date) bookingDetailsRef.current.preferredDate = preferred_date; if (bookingTriggered) { triggerStripeDepositFunctionCalling({ serviceType: serviceName, depositAmount: deposit_amount || ((config && config.quickDepositFee) ? config.quickDepositFee : 50.00), customerName: customer_name || bookingDetailsRef.current.customerName, customerPhone: customer_phone || bookingDetailsRef.current.customerPhone, installationAddress: installation_address || bookingDetailsRef.current.installationAddress, preferredDate: preferred_date || bookingDetailsRef.current.preferredDate, notes: promptText }); } playGeminiNeuralAudio({ audioBase64, mimeType }, replyMsg); }; // Toggle AI Voice Assistant Call with Real-time Multilingual SpeechRecognition Mic Support & Neural Audio const toggleGeminiLiveCall = async () => { if (voiceTimerRef.current) { clearTimeout(voiceTimerRef.current); voiceTimerRef.current = null; } if (isLiveConnected) { if (vadSilenceTimerRef.current) { clearTimeout(vadSilenceTimerRef.current); vadSilenceTimerRef.current = null; } accumulatedSpeechRef.current = ''; if (recognitionRef.current) { try { recognitionRef.current.stop(); } catch (e) {} recognitionRef.current = null; } if (animationFrameRef.current) { cancelAnimationFrame(animationFrameRef.current); animationFrameRef.current = null; } if (mediaStreamRef.current) { try { mediaStreamRef.current.getTracks().forEach(track => track.stop()); } catch (e) {} mediaStreamRef.current = null; } setIsLiveConnected(false); setVoiceStatus("Call Ended"); return; } try { setVoiceStatus("Connecting Neural Voice Pipeline..."); accumulatedSpeechRef.current = ''; if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true, sampleRate: 48000, channelCount: 1 } }); mediaStreamRef.current = stream; setupMicAnalyser(stream); setVoiceStatus("Live 2-Way Voice Active (Echo Cancelled)"); } catch (micErr) { console.warn("Microphone access permission notice:", micErr); setVoiceStatus("Live Voice Active (Skynet One Assistant)"); } } else { setVoiceStatus("Live Voice Active (Skynet One Assistant)"); } setIsLiveConnected(true); lastActiveTimestampRef.current = Date.now(); const greeting = "Hello! Thanks for reaching out to Skynet One. How can I help with your Starlink or networking setup today?"; setAiResponseText(`"${greeting}"`); setTranscript([`[AI] ${greeting}`]); const SpeechRecognitionClass = typeof window !== 'undefined' && (window.SpeechRecognition || window.webkitSpeechRecognition); if (SpeechRecognitionClass) { try { const recognition = new SpeechRecognitionClass(); recognition.continuous = true; recognition.interimResults = true; recognition.lang = voiceLanguage === 'auto' ? (navigator.language || 'en-US') : voiceLanguage; recognition.onresult = (event) => { // Anti-crosstalk: drop any inputs while AI is speaking if (isSpeakingRef.current) return; lastActiveTimestampRef.current = Date.now(); let currentInterim = ''; for (let i = event.resultIndex; i < event.results.length; i++) { const chunk = event.results[i][0].transcript; if (event.results[i].isFinal) { accumulatedSpeechRef.current += ' ' + chunk; } else { currentInterim += chunk; } } const currentCombined = (accumulatedSpeechRef.current + ' ' + currentInterim).trim(); if (currentCombined.length > 0) { // Dynamic language auto-detection if (voiceLanguage === 'auto') { if (/[ąćęłńóśźż]/i.test(currentCombined) || /\b(ile|kosztuje|instalacja|rezerwacja|tak|dzień|dobry|montaż)\b/i.test(currentCombined)) { if (recognition.lang !== 'pl-PL') recognition.lang = 'pl-PL'; } else if (/[áéíóúñ¿¡]/i.test(currentCombined) || /\b(cuanto|cuesta|instalacion|hola|gracias|soporte)\b/i.test(currentCombined)) { if (recognition.lang !== 'es-ES') recognition.lang = 'es-ES'; } } setVoiceStatus(`Hearing: "${currentCombined}"`); // 1200ms VAD Silence Window: wait 1200ms of silence after speaking if (vadSilenceTimerRef.current) { clearTimeout(vadSilenceTimerRef.current); } vadSilenceTimerRef.current = setTimeout(async () => { const finalSpeech = currentCombined.trim(); accumulatedSpeechRef.current = ''; if (!finalSpeech || !isLiveConnectedRef.current || isSpeakingRef.current) return; setVoiceStatus("Gemini Processing..."); const currentVoiceHistory = [...transcriptRef.current, `[User] ${finalSpeech}`]; transcriptRef.current = currentVoiceHistory; setTranscript(currentVoiceHistory); try { const { text, aiReply, audioBase64, mimeType, bookingTriggered, serviceName, customer_name, customer_phone, installation_address, preferred_date, deposit_amount } = await generateAiResponseAsync(finalSpeech, currentVoiceHistory); const replyMsg = text || aiReply; setAiResponseText(`"${replyMsg}"`); const updatedVoiceHistory = [...transcriptRef.current, `[AI] ${replyMsg}`]; transcriptRef.current = updatedVoiceHistory; setTranscript(updatedVoiceHistory); // Update cumulative details if new ones were provided if (customer_name) bookingDetailsRef.current.customerName = customer_name; if (customer_phone) bookingDetailsRef.current.customerPhone = customer_phone; if (installation_address) bookingDetailsRef.current.installationAddress = installation_address; if (preferred_date) bookingDetailsRef.current.preferredDate = preferred_date; if (bookingTriggered) { triggerStripeDepositFunctionCalling({ serviceType: serviceName, depositAmount: deposit_amount || ((config && config.quickDepositFee) ? config.quickDepositFee : 50.00), customerName: customer_name || bookingDetailsRef.current.customerName, customerPhone: customer_phone || bookingDetailsRef.current.customerPhone, installationAddress: installation_address || bookingDetailsRef.current.installationAddress, preferredDate: preferred_date || bookingDetailsRef.current.preferredDate, notes: finalSpeech }); } playGeminiNeuralAudio({ audioBase64, mimeType }, replyMsg); } catch (vErr) { console.error("[QUOTEBIT AI] Voice AI processing error:", vErr); const replyMsg = "I am right here with you. What Starlink or network service can I set up for you today?"; setAiResponseText(`"${replyMsg}"`); const errVoiceHistory = [...transcriptRef.current, `[AI] ${replyMsg}`]; transcriptRef.current = errVoiceHistory; setTranscript(errVoiceHistory); playGeminiNeuralAudio(null, replyMsg); } }, 1200); // 1200ms silence threshold } }; recognition.onerror = (event) => { if (event.error !== 'no-speech' && event.error !== 'aborted') { console.warn("SpeechRecognition notice:", event.error); } }; recognition.onend = () => { if (isLiveConnectedRef.current && !isSpeakingRef.current) { restartListeningSafely(); } }; recognitionRef.current = recognition; recognition.start(); setVoiceStatus("Listening... (Speak in English, Polish, or Spanish)"); } catch (recErr) { console.warn("SpeechRecognition init notice:", recErr); } } playGeminiNeuralAudio(null, greeting); } catch (err) { console.error("Voice Assistant Error:", err); setVoiceStatus("Live 2-Way Voice Active"); setIsLiveConnected(true); } }; // Send Text Message const handleSendChatMessage = async (e) => { e.preventDefault(); if (!chatInput.trim()) return; const userMsg = chatInput.trim(); const updatedChat = [...chatMessages, { sender: 'User', text: userMsg }]; setChatMessages(updatedChat); setChatInput(''); setIsAiTyping(true); try { const { aiReply, bookingTriggered, serviceName, customer_name, customer_phone, installation_address, preferred_date, deposit_amount } = await generateAiResponseAsync(userMsg, updatedChat); // Update cumulative details if new ones were provided if (customer_name) bookingDetailsRef.current.customerName = customer_name; if (customer_phone) bookingDetailsRef.current.customerPhone = customer_phone; if (installation_address) bookingDetailsRef.current.installationAddress = installation_address; if (preferred_date) bookingDetailsRef.current.preferredDate = preferred_date; if (bookingTriggered) { triggerStripeDepositFunctionCalling({ serviceType: serviceName, depositAmount: deposit_amount || ((config && config.quickDepositFee) ? config.quickDepositFee : 50.00), customerName: customer_name || bookingDetailsRef.current.customerName, customerPhone: customer_phone || bookingDetailsRef.current.customerPhone, installationAddress: installation_address || bookingDetailsRef.current.installationAddress, preferredDate: preferred_date || bookingDetailsRef.current.preferredDate, notes: userMsg }); } setChatMessages(prev => [...prev, { sender: 'AI', text: aiReply }]); } catch (err) { console.error("[QUOTEBIT AI] Chat AI processing error:", err); const replyMsg = "QuoteBit AI is temporarily unavailable. Please try again in a moment."; setChatMessages(prev => [...prev, { sender: 'AI', text: replyMsg }]); } finally { setIsAiTyping(false); } }; // Direct Deposit Button Click const handleDirectDeposit = () => { setIsProcessingStripe(true); const newApptId = appointmentId || `appt_${Date.now()}_${Math.floor(1000 + Math.random() * 9000)}`; setAppointmentId(newApptId); setBookingStatus("PENDING_CONFIRMATION"); if (db && typeof db.collection === 'function') { const currentDetails = bookingDetailsRef.current || {}; db.collection("appointments").doc(newApptId).set({ customerName: currentDetails.customerName || "Customer", customerPhone: currentDetails.customerPhone || "+1 (800) 555-0199", installationAddress: currentDetails.installationAddress || "Batavia, IL", preferredDate: currentDetails.preferredDate || "Tomorrow 8:00 AM - 11:00 AM", serviceName: currentDetails.serviceName || "Standard Starlink Installation", depositAmount: config.quickDepositFee || 50.00, status: "PENDING_CONFIRMATION", createdAt: new Date().toISOString() }, { merge: true }).catch(err => console.warn("Firestore appointment direct deposit notice:", err)); } setTimeout(() => { const generatedCheckoutUrl = `https://checkout.stripe.com/c/pay/cs_test_quotecall_${Date.now()}?amount=${config.quickDepositFee}`; setDepositLink(generatedCheckoutUrl); setDispatchStage(2); const timeStr = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); setSmsNotification({ phone: "+1 (800) 555-0199", trackingId: `SLK-${Math.floor(1000 + Math.random() * 9000)}`, message: `Skynet One: Booking Confirmed! ${formatMoney(config?.quickDepositFee)} deposit received. Certified Tech #402 (Mike) assigned for your Starlink setup. Estimated Arrival Window: Tomorrow, 8:00 AM - 11:00 AM. We will send an SMS arrival alert 30 mins prior to arrival.`, timestamp: timeStr }); window.open(generatedCheckoutUrl, '_blank'); setIsProcessingStripe(false); }, 600); }; // Appointment Lifecycle Handlers (Contractor & Customer) const handleProviderInitiateStripeCheckout = async () => { setIsGeneratingConnectCheckout(true); setCopiedCheckoutLink(false); setSmsSentSuccess(false); const targetJobId = appointmentId || `job_${Date.now()}_${Math.floor(1000 + Math.random() * 9000)}`; const parsedAmount = parseFloat(customDepositAmount) || (config?.quickDepositFee || 50.00); const searchParams = new URLSearchParams(window.location.search); const merchantId = searchParams.get("slug") || "skynet-one"; const currentDetails = bookingDetailsRef.current || {}; try { let checkoutSessionData = null; if (functions) { try { const createSessionFn = functions.httpsCallable('createDepositCheckoutSession'); const result = await createSessionFn({ merchantId, jobId: targetJobId, amount: parsedAmount, customerPhone: currentDetails.customerPhone || "+1 (800) 555-0199", customerName: currentDetails.customerName || "Customer", serviceTitle: currentDetails.serviceName || "Starlink / Satellite Field Setup Deposit" }); checkoutSessionData = result.data; } catch (callErr) { console.warn("Direct Callable fallback to HTTP/Local simulation:", callErr); } } if (!checkoutSessionData) { // Fallback endpoint fetch try { const res = await fetch('/createDepositCheckoutSession', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ merchantId, jobId: targetJobId, amount: parsedAmount, customerPhone: currentDetails.customerPhone || "+1 (800) 555-0199", customerName: currentDetails.customerName || "Customer", serviceTitle: currentDetails.serviceName || "Starlink / Satellite Field Setup Deposit" }) }); if (res.ok) { checkoutSessionData = await res.json(); } } catch (fetchErr) {} } if (!checkoutSessionData) { // Instant simulated session URL checkoutSessionData = { success: true, sessionId: `cs_connect_${Date.now()}`, checkoutUrl: `https://checkout.stripe.com/c/pay/cs_test_quotecall_${Date.now()}?amount=${parsedAmount}&job_id=${targetJobId}`, depositAmount: parsedAmount, platformFee: (parsedAmount * 0.02), stripeAccountId: "acct_connected_pro", jobId: targetJobId }; } setProviderCheckoutResult(checkoutSessionData); setAppointmentId(targetJobId); setStatusFeedbackMessage(`💳 Stripe Connect $${parsedAmount.toFixed(2)} checkout link generated!`); } catch (err) { console.error("Provider Connect Checkout error:", err); setStatusFeedbackMessage("Failed to generate Stripe checkout session."); } finally { setIsGeneratingConnectCheckout(false); setTimeout(() => setStatusFeedbackMessage(null), 5000); } }; const handleCopyCheckoutLink = () => { if (!providerCheckoutResult?.checkoutUrl) return; try { navigator.clipboard.writeText(providerCheckoutResult.checkoutUrl); setCopiedCheckoutLink(true); setTimeout(() => setCopiedCheckoutLink(false), 3000); } catch (e) { console.warn("Clipboard copy notice:", e); } }; const handleSendSmsCheckout = () => { const currentDetails = bookingDetailsRef.current || {}; const phone = currentDetails.customerPhone || "+1 (800) 555-0199"; const amountStr = providerCheckoutResult?.depositAmount || customDepositAmount || 50; const timeStr = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); setSmsNotification({ phone: phone, trackingId: `DEP-${Math.floor(1000 + Math.random() * 9000)}`, message: `Skynet One Dispatch: Click to pay your $${amountStr}.00 security deposit & lock in your Starlink appointment: ${providerCheckoutResult?.checkoutUrl || 'https://checkout.stripe.com'}`, timestamp: timeStr }); setSmsSentSuccess(true); setTimeout(() => setSmsSentSuccess(false), 4000); }; const handleAcceptAppointment = async () => { setIsUpdatingStatus(true); setStatusFeedbackMessage(null); const targetId = appointmentId || "demo_lead_402"; try { if (functions) { const updateFn = functions.httpsCallable('updateAppointmentStatus'); await updateFn({ appointmentId: targetId, status: "CONFIRMED" }); } setBookingStatus("CONFIRMED"); setStatusFeedbackMessage("✅ Appointment Confirmed! Customer has been notified."); } catch (err) { console.warn("Notice: Function call fallback for local state:", err); setBookingStatus("CONFIRMED"); setStatusFeedbackMessage("✅ Appointment Confirmed! (Local State Updated)"); } finally { setIsUpdatingStatus(false); setTimeout(() => setStatusFeedbackMessage(null), 4000); } }; const handleCompleteAndCloseJob = async () => { setIsUpdatingStatus(true); setStatusFeedbackMessage(null); const targetId = appointmentId || "demo_lead_402"; try { if (functions) { const updateFn = functions.httpsCallable('updateAppointmentStatus'); await updateFn({ appointmentId: targetId, status: "COMPLETED_SETTLED", balanceRemaining: 0.00 }); } setBookingStatus("COMPLETED_SETTLED"); setStatusFeedbackMessage("✅ Job closed & completed! Final balance settled in full ($0.00 remaining). Receipt sent."); } catch (err) { console.warn("Notice: Function call fallback for local state:", err); setBookingStatus("COMPLETED_SETTLED"); setStatusFeedbackMessage("✅ Job closed & completed! Final balance settled in full ($0.00 remaining). (Local State Updated)"); } finally { setIsUpdatingStatus(false); setTimeout(() => setStatusFeedbackMessage(null), 5000); } }; const handleProposeRescheduleSubmit = async (e) => { if (e && e.preventDefault) e.preventDefault(); if (!rescheduleSlot1.trim()) { alert("Please provide at least one alternative date/time slot."); return; } setIsUpdatingStatus(true); setStatusFeedbackMessage(null); const targetId = appointmentId || "demo_lead_402"; const slots = [rescheduleSlot1.trim()]; if (rescheduleSlot2.trim()) slots.push(rescheduleSlot2.trim()); try { if (functions) { const updateFn = functions.httpsCallable('updateAppointmentStatus'); await updateFn({ appointmentId: targetId, status: "RESCHEDULE_PROPOSED", proposedSlots: slots, note: rescheduleNote.trim() }); } setBookingStatus("RESCHEDULE_PROPOSED"); setRescheduleData({ proposedSlots: slots, note: rescheduleNote.trim(), proposedAt: new Date().toISOString() }); setIsRescheduleModalOpen(false); setStatusFeedbackMessage("📅 Alternative slots proposed and sent to customer!"); } catch (err) { console.warn("Notice: Function call fallback for local state:", err); setBookingStatus("RESCHEDULE_PROPOSED"); setRescheduleData({ proposedSlots: slots, note: rescheduleNote.trim(), proposedAt: new Date().toISOString() }); setIsRescheduleModalOpen(false); setStatusFeedbackMessage("📅 Alternative slots proposed! (Local State Updated)"); } finally { setIsUpdatingStatus(false); setTimeout(() => setStatusFeedbackMessage(null), 4000); } }; const handleDeclineAndRefund = async () => { const confirmDecline = window.confirm("Are you sure you want to decline this appointment? This will automatically refund the $50 security deposit to the customer via Stripe."); if (!confirmDecline) return; setIsUpdatingStatus(true); setStatusFeedbackMessage(null); const targetId = appointmentId || "demo_lead_402"; try { if (functions) { const refundFn = functions.httpsCallable('refundDepositAndCancel'); await refundFn({ appointmentId: targetId, reason: "Contractor unavailable / customer cancellation" }); } setBookingStatus("CANCELLED_REFUNDED"); setStatusFeedbackMessage("❌ Appointment cancelled & $50 deposit refund processed."); } catch (err) { console.warn("Notice: Function call fallback for local state:", err); setBookingStatus("CANCELLED_REFUNDED"); setStatusFeedbackMessage("❌ Appointment cancelled & refund initiated! (Local State Updated)"); } finally { setIsUpdatingStatus(false); setTimeout(() => setStatusFeedbackMessage(null), 4000); } }; const handleCustomerAcceptSlot = async (slot) => { setIsUpdatingStatus(true); setStatusFeedbackMessage(null); const targetId = appointmentId || "demo_lead_402"; try { if (functions) { const updateFn = functions.httpsCallable('updateAppointmentStatus'); await updateFn({ appointmentId: targetId, status: "CONFIRMED", confirmedSlot: slot }); } setBookingStatus("CONFIRMED"); setBookingDetails(prev => ({ ...(prev || {}), preferredDate: slot })); bookingDetailsRef.current.preferredDate = slot; setStatusFeedbackMessage(`🎉 You confirmed: ${slot}! Contractor has been notified.`); } catch (err) { console.warn("Notice: Function call fallback for local state:", err); setBookingStatus("CONFIRMED"); setBookingDetails(prev => ({ ...(prev || {}), preferredDate: slot })); bookingDetailsRef.current.preferredDate = slot; setStatusFeedbackMessage(`🎉 You confirmed: ${slot}! (Local State Updated)`); } finally { setIsUpdatingStatus(false); setTimeout(() => setStatusFeedbackMessage(null), 4000); } }; // GPS Location Request const requestGpsLocation = () => { if (!navigator.geolocation) { setGpsStatusMessage("Geolocation is not supported by your browser."); return; } setIsGettingGps(true); setGpsStatusMessage("Fetching installation site coordinates..."); navigator.geolocation.getCurrentPosition( (position) => { const lat = position.coords.latitude.toFixed(6); const lng = position.coords.longitude.toFixed(6); setGpsLocation({ latitude: lat, longitude: lng, accuracy: position.coords.accuracy.toFixed(1), mapsUrl: `https://maps.google.com/?q=${lat},${lng}` }); setIsGettingGps(false); setGpsStatusMessage("Installation Site GPS Location Acquired!"); }, () => { setIsGettingGps(false); setGpsStatusMessage("Location permission denied."); }, { enableHighAccuracy: true, timeout: 10000 } ); }; if (loading) { return (

Loading 2026 AI Storefront...

); } const isSplitLayout = currentArchetype.layoutVariant === 'split_hero_voice_first'; return (
{/* Background Neon Ambient Glows */}
{/* ========================================================================= */} {/* 2026 AI STOREFRONT CO-PILOT & NATURAL LANGUAGE CUSTOMIZER BAR (FLOATING) */} {/* ========================================================================= */}
2026 AI Storefront Engine Archetype: {currentArchetype.name.split(' ')[0]}
{/* Archetype Quick Switcher Chips */}
{Object.keys(ARCHETYPES).map((archKey) => { const arch = ARCHETYPES[archKey]; const isActive = (config?.themeConfig?.archetype || activeArchetypeKey) === archKey; return ( ); })}
{/* Expandable Natural Language AI Customizer Drawer */} {isCustomizerOpen && (
setAiCustomizerPrompt(e.target.value)} placeholder="✨ Prompt AI: e.g. 'Switch to luxury minimal gold, add storm warranty to care plan, and raise deposit to $75'" className="flex-1 bg-slate-950 border border-slate-800 rounded-xl px-3 py-2 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-emerald-400" />
)} {customizerFeedback && (
{customizerFeedback}
)}
{/* ========================================================================= */} {/* HERO BANNER SECTION */} {/* ========================================================================= */}
Logo
{currentArchetype.heroBadgeText}

{config.siteTitle}

{config.siteSubtitle}

{/* ========================================================================= */} {/* DYNAMIC LAYOUT: SPLIT HERO (VOICE-FIRST) VS CARD-STACK CATALOG */} {/* ========================================================================= */}
{/* ========================================================================= */} {/* LEFT / PRIMARY COLUMN: 2026 AI NEURAL AUDIO ORB & LIVE DISPATCH */} {/* ========================================================================= */}
{/* Assistant Interface Card */}
{/* Tab Selector Buttons */}
{/* VOICE TAB */} {activeTab === 'voice' && (
{/* Language Selector Chips */}
Multilingual AI
{['auto', 'en-US', 'pl-PL', 'es-ES'].map(l => ( ))}
{/* ========================================================================= */} {/* 2026 AI NEURAL AUDIO ORB COMPONENT */} {/* ========================================================================= */}
{/* Outer Ambient Glow Ring */}
{/* Orbit Ring */}
{/* Ripple Waves when Live */} {isLiveConnected && (
)} {/* Central Glowing Orb Core Button */}
{/* Dynamic Voice Status & Audio Waveform Bars */}
{isLiveConnected && } {isLiveConnected ? voiceStatus : "Ready to Dispatch • Zero Robotic Lag"} {isLiveConnected && ( {formatCallDuration(callDuration)} )}
{/* 5-Bar Live Reactive Equalizer */}
{(audioLevels || [20, 40, 60, 30, 50]).map((lvl, idx) => (
))}
{aiResponseText && (
"{aiResponseText}"
)}
{/* Quick Voice Prompt Suggestions */}
Quick Instant Prompts:
{/* Post-Call Summary Card */} {showPostCallSummary && (

Post-Call Intake Summary

{formatCallDuration(callDuration)}

Service: {bookingDetails?.serviceName || "Starlink Roof/Wall Installation"}

Customer: {bookingDetails?.customerName || "Customer"}

Deposit Due: ${formatMoney(config?.quickDepositFee)}

)} {/* Transcript Download */} {transcript && transcript.length > 0 && ( )}
)} {/* CHAT TAB */} {activeTab === 'chat' && (
{chatMessages.map((msg, i) => (

{msg.sender}

{msg.text}

))} {isAiTyping && (
Skynet One AI is typing...
)}
setChatInput(e.target.value)} placeholder="Ask about mounting bracket, cable routing, or booking..." className="flex-1 bg-slate-950 border border-slate-800 rounded-xl px-3 py-2.5 text-xs text-white placeholder-slate-500 focus:outline-none focus:border-emerald-400" />
)}
{/* Photo Attachment & Site Description */}

Describe Site or Attach Roof/Wall Photo

{photoPreview && (
Site Preview
)}
{/* GPS Location Card */}

Installation Address GPS Pin

{gpsLocation && ( GPS Pin Set )}
{gpsStatusMessage && (

{gpsStatusMessage}

)}
{/* ========================================================================= */} {/* RIGHT / SECONDARY COLUMN: SERVICE CATALOG, PROTECTION PLANS & DEPOSIT */} {/* ========================================================================= */}
{/* Service Rates Catalog */}

Official Installation Services & Rates

{config.services?.length || 7} Services
{(config.services || []).map((s, idx) => (
{s.name} ${typeof s.price === 'number' ? s.price.toFixed(2) : s.price}

{s.desc}

))}
{/* ========================================================================= */} {/* 2026 PROTECTION PLANS & CARE SUBSCRIPTION TIER */} {/* ========================================================================= */}

{config?.protectionPlans?.[0]?.title || "Skynet Care VIP Shield"}

Continuous Satellite Assurance Tier
${config?.protectionPlans?.[0]?.monthlyPrice || "19.99"}/mo
{(config?.protectionPlans?.[0]?.features || [ "1 Free Annual Satellite Re-Alignment & Roof Check", "Priority 24/7 Voice AI Dispatch & Same-Day Window", "15% Discount on In-Wall Wiring & Mesh Wi-Fi Add-ons", "Zero Deductible Storm & Wind Realignment Guarantee" ]).map((feat, fIdx) => (
{feat}
))}
{/* ========================================================================= */} {/* STRIPE SECURITY DEPOSIT BOOKING SECTION */} {/* ========================================================================= */}
Instant Slot Deposit

${formatMoney(config?.quickDepositFee)} USD

Stripe Secured
{/* Confirmed Intake Summary */} {bookingDetails && (bookingDetails.customerName || bookingDetails.preferredDate || bookingDetails.installationAddress) && (
Confirmed Appointment Details Ready for Deposit
{bookingDetails.preferredDate && (
📅 Date: {bookingDetails.preferredDate}
)} {bookingDetails.installationAddress && (
📍 Address: {bookingDetails.installationAddress}
)} {bookingDetails.customerName && (
👤 Customer: {bookingDetails.customerName}
)} {bookingDetails.customerPhone && (
📞 Phone: {bookingDetails.customerPhone}
)}
)} {depositLink && (
Appointment Slot Reserved
Complete Deposit Checkout via Stripe
)}
{/* Appointment & Lead Portal */}

Order & Lead Control Portal

{/* Status Badge */}
Order Status: {bookingStatus === "PENDING_CONFIRMATION" && ( PENDING CONFIRMATION )} {bookingStatus === "CONFIRMED" && ( CONFIRMED )} {bookingStatus === "COMPLETED_SETTLED" && ( CLOSED & SETTLED ($0.00 DUE) )} {bookingStatus === "RESCHEDULE_PROPOSED" && ( RESCHEDULE PROPOSED )} {bookingStatus === "CANCELLED_REFUNDED" && ( CANCELLED & REFUNDED )}
{/* Contractor Actions */} {activeRole === "contractor" && (
{/* Stripe Connect Instant Deposit Checkout Panel */}
Stripe Connect Deposit Checkout
Direct Payout (2% Fee)
$ setCustomDepositAmount(e.target.value)} placeholder="50.00" className="w-full bg-slate-900 border border-slate-800 rounded-xl py-2 pl-7 pr-3 text-xs font-bold text-white placeholder-slate-600 focus:outline-none focus:border-emerald-500" />
{/* Resulting Checkout Link Actions */} {providerCheckoutResult && (
Checkout Session Ready ID: {providerCheckoutResult.sessionId.slice(-8)}
)}
)} {/* Customer Reschedule Actions */} {activeRole === "customer" && (
{bookingStatus === "RESCHEDULE_PROPOSED" && rescheduleData ? (

Contractor proposed new slots:

{rescheduleData.proposedSlots.map((slot, index) => ( ))}
) : (

{bookingStatus === "CONFIRMED" ? "🎉 Appointment locked in!" : "Pending contractor schedule confirmation."}

)}
)}
{/* Reschedule Modal */} {isRescheduleModalOpen && (

Propose Reschedule Slots

setRescheduleSlot1(e.target.value)} placeholder="e.g. Wednesday, 1:00 PM - 4:00 PM" className="w-full p-2.5 bg-slate-950 border border-slate-800 rounded-xl text-xs text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500" required />
setRescheduleSlot2(e.target.value)} placeholder="e.g. Thursday, 9:00 AM - 12:00 PM" className="w-full p-2.5 bg-slate-950 border border-slate-800 rounded-xl text-xs text-white placeholder-slate-600 focus:outline-none focus:border-indigo-500" />
)} {/* Footer */}
); } try { const rootElement = document.getElementById('root'); if (rootElement) { if (typeof ReactDOM.createRoot === 'function') { ReactDOM.createRoot(rootElement).render( ); } else if (typeof ReactDOM.render === 'function') { ReactDOM.render( , rootElement ); } } } catch (err) { console.error("ReactDOM Render Exception:", err); var rootEl = document.getElementById('root'); if (rootEl) { rootEl.innerHTML = '

Skynet One Assistant

The assistant UI is ready. Click below to launch.

'; } }