\n https://portal.insurco-demo.com/claims/{slides[currentSlide].id}\n

\n {isPresenter && (\n \n {isFullscreen ? \"⤓\" : \"⤢\"}\n \n )}\n

\n\n {/* App Header */}\n

\n 🛡️ InsurCo\n

\n \n

\n\n {/* Main Content Area */}\n

\n {currentSlide === 0 && (\n setCurrentSlide(idx)} />\n )}\n {currentSlide === 1 && }\n {currentSlide === 2 && }\n {currentSlide === 3 && (\n setCurrentSlide(idx)} />\n )}\n {currentSlide === 4 && (\n setCurrentSlide(idx)} />\n )}\n {currentSlide === 5 && }\n

\n\n {/* Presentation Navigation Controls (Overlay) */}\n

\n \n ← Prev\n \n\n

\n {slides.map((slide, idx) => (\n setCurrentSlide(idx)}\n className={`h-2 rounded-full transition-all ${\n currentSlide === idx\n ? \"bg-indigo-600 w-6 sm:w-8\"\n : \"bg-gray-300 w-2 hover:bg-gray-400\"\n }`}\n aria-label={`Go to ${slide.title}`}\n title={slide.title}\n />\n ))}\n

\n\n \n Next →\n \n

\n \n );\n\n // When fullscreen, render to body via portal to bypass parent container constraints\n // Also render a placeholder in the normal position to maintain layout\n if (isFullscreen && typeof document !== 'undefined') {\n return (\n <>\n {createPortal(widgetContent, document.body)}\n

\n \n );\n }\n\n return widgetContent;\n}\n\n// --- Slide Components ---\n\nfunction SlideIntegration({\n onNavigate,\n}: {\n onNavigate: (idx: number) => void;\n}) {\n const [toast, setToast] = useState(null);\n\n const handleAction = (action: string, targetSlide?: number) => {\n if (targetSlide !== undefined) {\n onNavigate(targetSlide);\n } else {\n setToast(`Action triggered: ${action}`);\n setTimeout(() => setToast(null), 2000);\n }\n };\n\n return (\n

\n {toast && (\n

\n {toast}\n

\n )}\n

\n Peace of mind when you need it most.\n

\n InsurCo provides comprehensive coverage for your life, home, and\n auto. We are here to support you 24/7.\n

\n handleAction(\"Get a Quote\")}\n className=\"bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold shadow-lg hover:bg-indigo-700 transition-colors w-full md:w-auto\"\n >\n Get a Quote\n \n

\n\n {/* Embedded Widget Mockup */}\n

Claims Support Options

\n Our AI assistant can help with your claim 24/7.\n

\n handleAction(\"Ask Question\", 1)}\n readOnly\n />\n handleAction(\"Ask Question\", 1)}\n className=\"absolute right-2 top-2 bottom-2 bg-indigo-600 text-white px-3 rounded-lg text-sm font-bold\"\n >\n Ask\n \n

\n\n handleAction(\"Start Claim\", 5)}\n className=\"bg-red-50 border border-red-100 rounded-xl p-4 flex justify-between items-center cursor-pointer hover:bg-red-100 transition-colors group\"\n >\n

\n \n 📝\n \n \n Start a claim\n \n

\n Now{\" \"}\n \n

\n\n handleAction(\"Callback Request\", 2)}\n className=\"bg-white border border-gray-100 rounded-xl p-4 flex justify-between items-center hover:bg-gray-50 transition-colors cursor-pointer\"\n >\n

\n \n 📞\n \n \n Request call back\n \n

\n Now \n

\n\n handleAction(\"Call Phone\")}\n className=\"bg-white border border-gray-100 rounded-xl p-4 flex justify-between items-center hover:bg-gray-50 transition-colors cursor-pointer\"\n >\n

\n \n ☎️\n \n \n Call us\n \n

\n \n 10 mins wait\n \n

\n \n \n );\n}\n\nfunction SlideChat() {\n const [messages, setMessages] = useState([\n {\n role: \"user\",\n text: \"how long will it take to get my payment?\",\n time: \"09:41 pm\",\n },\n {\n role: \"ai\",\n text: \"I'm sorry for your loss. The time it takes to receive a death benefit payment from InsurCo can vary:\\n\\n• Simple claims are usually paid within about 2 months.\\n• Most claims are completed within 6 months.\\n• Complex claims (e.g., disputes) can take 2 years or more.\\n\\nThe process includes claim assessment, a 28-day objection period after a decision, and then payment.\",\n time: \"09:41 pm\",\n options: true,\n },\n ]);\n const [inputValue, setInputValue] = useState(\"\");\n\n const handleSend = () => {\n if (!inputValue.trim()) return;\n\n setMessages((prev) => [\n ...prev,\n {\n role: \"user\",\n text: inputValue,\n time: new Date().toLocaleTimeString([], {\n hour: \"2-digit\",\n minute: \"2-digit\",\n }),\n },\n ]);\n setInputValue(\"\");\n\n setTimeout(() => {\n setMessages((prev) => [\n ...prev,\n {\n role: \"ai\",\n text: \"Thank you for your question. A claims specialist will review this and get back to you shortly.\",\n time: new Date().toLocaleTimeString([], {\n hour: \"2-digit\",\n minute: \"2-digit\",\n }),\n },\n ]);\n }, 1000);\n };\n\n return (\n

\n {messages.map((msg, idx) => (\n \n {msg.role === \"ai\" && (\n

\n AI\n

\n )}\n \n

\n {msg.text}\n

\n {msg.options && (\n

\n Would you like help with checking your claim status or\n understanding the process?\n

\n \n \n

\n )}\n \n {msg.time}\n

\n ))}\n \n\n

\n setInputValue(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && handleSend()}\n className=\"flex-1 bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 placeholder:text-gray-400\"\n placeholder=\"Type your message...\"\n />\n \n \n \n \n \n \n

\n \n );\n}\n\nfunction SlideCallback() {\n const [status, setStatus] = useState<\"idle\" | \"calling\" | \"connected\">(\n \"idle\"\n );\n\n const handleCall = () => {\n setStatus(\"calling\");\n setTimeout(() => setStatus(\"connected\"), 2000);\n setTimeout(() => setStatus(\"idle\"), 6000);\n };\n\n return (\n

\n {status === \"idle\"\n ? \"Request an AI call-back\"\n : status === \"calling\"\n ? \"Connecting...\"\n : \"Call in Progress\"}\n

\n \n

\n\n {status === \"idle\" && (\n

\n Our 24/7 AI Claim Assistant can ring you in minutes.\n

\n\n

\n No business-hour limits — we can call any time, day or night.\n

\n\n

\n \n What do you need help with?\n \n \n

\n\n

\n \n Your name\n \n \n

\n \n Mobile number\n \n \n

\n\n

\n We'll use these details only to call you about this claim or\n question — never for marketing, never shared.\n

\n )}\n\n {status !== \"idle\" && (\n

\n \n

\n {status === \"calling\" ? \"📞\" : \"📱\"}\n

\n {status === \"calling\" ? \"Calling Alex...\" : \"Connected\"}\n

\n {status === \"calling\"\n ? \"Please keep your phone nearby.\"\n : \"Call duration: 00:12\"}\n

\n )}\n\n

\n setStatus(\"idle\")}\n className=\"flex-1 px-6 py-3 bg-white border border-gray-300 rounded-xl font-semibold text-gray-700 hover:bg-gray-50 transition-colors\"\n >\n {status === \"idle\" ? \"Cancel\" : \"End Call\"}\n \n {status === \"idle\" && (\n \n Call me now\n \n )}\n

\n \n );\n}\n\nfunction SlideProcess({ onNavigate }: { onNavigate: (idx: number) => void }) {\n return (\n

\n AI\n

\n I'm truly sorry for your loss. I understand how difficult this time\n must be for you. I'm here to support you through the process.\n

\n To begin, here are the first steps:\n

\n\n

\n 1\n

\n Start the Notification Process\n

\n We'll need basic details about the deceased, such as full\n name, date of birth, and member number.\n

\n 2\n

\n Assignment of a Case Manager\n

\n Once submitted, a dedicated case manager will be assigned to\n guide you.\n

\n\n

\n This is the first step in a multi-step process. Please let me know\n if you're ready to start or if you need any specific help right now.\n

\n\n

\n How would you like to proceed?\n

\n onNavigate(5)}\n className=\"flex items-center justify-center gap-2 px-4 py-2 bg-indigo-50 text-indigo-700 rounded-lg hover:bg-indigo-100 transition-colors font-medium text-sm\"\n >\n 🚀 Start the Process\n \n \n

\n );\n}\n\nfunction SlideLetter({ onNavigate }: { onNavigate: (idx: number) => void }) {\n return (\n

InsurCo

CLAIMS DEPARTMENT

Ref: CLM-2024-8829

Date: 20 Nov 2025

\n\n

Required Documentation

\n\n

\n Death Certificate: Certified copy required\n
\n Proof of Identity: Driver's license or passport\n
\n Will or Estate Documents: Copy of the will\n
\n Proof of Relationship: Birth certificate to\n confirm relationship\n
\n Beneficiary Declaration Form: To authorise the\n release of information\n

\n\n

What happens next:

\n Continue your claim: Use the link sent to your\n email to open the claims portal to complete the required form and\n upload supporting documents.\n
\n Prepare the following documentation:\n
- \n Death Certificate: A certified copy of Test Deceased's death\n certificate.\n
- Proof of Identity: Your proof of identity.
- \n Will or Estate Documents: If there's a will, a copy may be\n required.\n
\n

\n\n

\n This reference number is important - please keep it handy for all\n communications. If you have questions,{\" \"}\n I'm here to help.\n

\n\n

\n onNavigate(5)}\n className=\"text-indigo-600 underline cursor-pointer hover:text-indigo-800\"\n >\n You can start your claim here\n

\n Sincerely,
\n InsurCo Claims Team\n

\n );\n}\n\nfunction SlidePortal() {\n const [activeTab, setActiveTab] = useState<\"form\" | \"chat\">(\"chat\");\n const [saved, setSaved] = useState(false);\n const [chatMessages, setChatMessages] = useState([\n {\n role: \"ai\" as const,\n text: \"I'm here to help you complete the Beneficiary Declaration form. Let's start with your relationship details.\",\n time: \"Just now\",\n },\n ]);\n const [chatInput, setChatInput] = useState(\"\");\n\n const handleSave = () => {\n setSaved(true);\n setTimeout(() => setSaved(false), 2000);\n };\n\n const generateDemoResponse = (userMessage: string): string => {\n const lowerMessage = userMessage.toLowerCase();\n \n // Extract form data (from the form fields)\n const userName = \"Test Notifier\";\n const relationship = \"Child\";\n const claimStatus = \"Active\";\n const referenceNumber = \"CLM-2024-8829\";\n \n if (lowerMessage.includes(\"name\") || lowerMessage.includes(\"who\")) {\n return `Hello! I can see you're ${userName}. I'm here to assist you with your claim. How can I help you today?`;\n }\n \n if (lowerMessage.includes(\"status\") || lowerMessage.includes(\"progress\")) {\n return `Your claim status is currently **${claimStatus}**. You're currently working on Step 2: Documents & Forms. You've completed the Death Certificate upload, and you're now filling out the Beneficiary Declaration form.`;\n }\n \n if (lowerMessage.includes(\"relationship\") || lowerMessage.includes(\"beneficiary\")) {\n return `I can see you've selected \"${relationship}\" as your relationship. This is correct for your claim. Is there anything specific about the relationship section you'd like help with?`;\n }\n \n if (lowerMessage.includes(\"reference\") || lowerMessage.includes(\"number\")) {\n return `Your claim reference number is **${referenceNumber}**. Please keep this handy for all communications about your claim.`;\n }\n \n if (lowerMessage.includes(\"document\") || lowerMessage.includes(\"upload\") || lowerMessage.includes(\"file\")) {\n return `For your claim, you'll need to upload:\\n\\n• Death Certificate (✓ Completed)\\n• Proof of Identity (Pending)\\n• Beneficiary Declaration Form (In Progress)\\n\\nYou can upload documents directly in the form section. Need help with any specific document?`;\n }\n \n if (lowerMessage.includes(\"help\") || lowerMessage.includes(\"assist\")) {\n return `I'm here to help you complete your Beneficiary Declaration form, ${userName}. You can ask me about:\\n\\n• Your claim status\\n• Required documents\\n• Form fields and requirements\\n• Next steps in the process\\n\\nWhat would you like to know?`;\n }\n \n if (lowerMessage.includes(\"next\") || lowerMessage.includes(\"step\") || lowerMessage.includes(\"after\")) {\n return `After you complete the Beneficiary Declaration form, the next steps are:\\n\\n1. Review and submit your form\\n2. Upload any remaining documents\\n3. Wait for case manager review\\n4. Receive confirmation and next instructions\\n\\nYou're making great progress!`;\n }\n \n // Default response\n return `Thank you for your question, ${userName}. I understand you're working on your Beneficiary Declaration form. Could you provide a bit more detail so I can assist you better? You can ask about your claim status, required documents, or any form-related questions.`;\n };\n\n const handleChatSend = () => {\n if (!chatInput.trim()) return;\n\n const userMessage = chatInput.trim();\n setChatMessages((prev) => [\n ...prev,\n {\n role: \"user\",\n text: userMessage,\n time: new Date().toLocaleTimeString([], {\n hour: \"2-digit\",\n minute: \"2-digit\",\n }),\n },\n ]);\n setChatInput(\"\");\n\n // Generate and add AI response after a short delay\n setTimeout(() => {\n const aiResponse = generateDemoResponse(userMessage);\n setChatMessages((prev) => [\n ...prev,\n {\n role: \"ai\",\n text: aiResponse,\n time: new Date().toLocaleTimeString([], {\n hour: \"2-digit\",\n minute: \"2-digit\",\n }),\n },\n ]);\n }, 800);\n };\n\n return (\n

\n {/* Mobile Tab Switcher */}\n

\n setActiveTab(\"form\")}\n className={`flex-1 py-3 text-sm font-semibold border-b-2 ${\n activeTab === \"form\"\n ? \"border-indigo-600 text-indigo-600\"\n : \"border-transparent text-gray-500\"\n }`}\n >\n Form\n \n setActiveTab(\"chat\")}\n className={`flex-1 py-3 text-sm font-semibold border-b-2 ${\n activeTab === \"chat\"\n ? \"border-indigo-600 text-indigo-600\"\n : \"border-transparent text-gray-500\"\n }`}\n >\n AI Assistant\n \n

\n\n

\n {/* Sidebar (Desktop Only) */}\n \n\n {/* Main Content */}\n

\n {/* Chat Column (Desktop: visible, Mobile: toggled) */}\n \n {/* Chat Header */}\n

\n AI\n

\n AI Assistant\n

\n Beneficiary Declaration Form\n

\n \n \n ?\n {\" \"}\n Get Help\n \n

\n\n

\n \n \n \n \n

\n\n

\n ℹ️ Please provide your personal details. Some\n information has been pre-filled.\n

\n\n {/* Form Fields... (Simplified for brevity but fully functional layout) */}\n

\n \n Title\n \n \n

\n \n Surname\n \n \n

\n\n

\n \n Given Names\n \n \n

\n\n {/* ... More fields ... */}\n\n

\n Relationship & Benefit Eligibility\n

\n\n

\n \n What was your relationship?\n \n \n

\n\n

\n \n \n \n Yes, I wish to be considered for a\n benefit payment.\n \n \n

\n\n

\n \n {saved ? \"Saved ✓\" : \"Save & Continue\"}\n \n

\n \n \n \n \n );\n}\n","deleted","label",[168,169,170,149],"frontend","components","widgets","permalink","https://www.val.town/x/fwfben/live-talk/code/frontend/components/widgets/PrototypeDemoWidget.tsx","extension","actionData","errors"]