Invalid presentation ID

\", 400);\n }\n\n // Serve the participant view HTML\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n // Inject the presentation ID into the page\n const script = ``;\n html = html.replace(\"\", `${script}`);\n return c.html(html);\n });\n\n // Presenter route\n app.get(\"/present/:presentationId\", async (c) => {\n const presentationId = parseInt(c.req.param(\"presentationId\"));\n if (isNaN(presentationId)) {\n return c.html(\"

Invalid presentation ID

\", 400);\n }\n\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n const script = ``;\n html = html.replace(\"\", `${script}`);\n return c.html(html);\n });\n\n // Management route\n app.get(\"/manage\", async (c) => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n });\n\n // Step management route\n app.get(\"/manage/:presentationId/steps\", async (c) => {\n const presentationId = parseInt(c.req.param(\"presentationId\"));\n if (isNaN(presentationId)) {\n return c.html(\"

Invalid presentation ID

\", 400);\n }\n\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n });\n\n return app;\n}\n",[],[151,293],{"_103":302,"_95":303,"_152":304,"_154":153,"_155":137,"_156":305,"_158":159,"_105":306,"_100":307,"_161":182,"_163":308,"_164":22,"_165":-5,"_166":309,"_98":310},"cd0db5cc-c51d-11f0-b9b3-42dde27851f2","index.ts","351c9514-c516-11f0-9cfd-42dde27851f2",190,["D",1763539223331],9,"import { createApp } from \"./app.ts\";\n\n// Detect environment and use appropriate file utilities\nconst isValTown = Deno.env.get(\"valtown\") !== undefined;\n\nlet readFile: (path: string, importMetaUrl: string) => Promise;\nlet serveFile: (path: string, importMetaUrl: string) => Promise;\n\nif (isValTown) {\n // Use Val Town utilities\n const valTownUtils = await import(\n \"https://esm.town/v/std/utils@85-main/index.ts\"\n );\n readFile = valTownUtils.readFile;\n serveFile = valTownUtils.serveFile;\n} else {\n // Use local Deno utilities\n const localUtils = await import(\"./utils/localFiles.ts\");\n readFile = localUtils.readLocalFile;\n serveFile = localUtils.serveLocalFile;\n}\n\n// Create app with all routes registered in one place\nconst app = await createApp({\n fileUtils: { readFile, serveFile },\n runMigrationsOnStartup: true,\n});\n\nexport default app.fetch; // This is the entry point for HTTP vals\n",[],[151,303],[151],{"_103":313,"_95":314,"_152":315,"_154":-5,"_155":137,"_156":316,"_158":159,"_105":317,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":318,"_98":573},"2ec631e8-c516-11f0-b86e-42dde27851f2","frontend","2ec63292-c516-11f0-b86e-42dde27851f2",18,["D",1763535951270],[319,528,554,564],{"_103":320,"_95":321,"_152":322,"_154":315,"_155":137,"_156":323,"_158":159,"_105":324,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":325,"_98":527},"2f4d8f12-c516-11f0-9a1a-42dde27851f2","components","2f4d8fee-c516-11f0-9a1a-42dde27851f2",21,["D",1763535952200],[326,462,471,480,489,498,508,517],{"_103":327,"_95":328,"_152":329,"_154":322,"_155":137,"_156":330,"_158":159,"_105":331,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":332,"_98":461},"89942e58-c517-11f0-8508-42dde27851f2","widgets","89942f84-c517-11f0-8508-42dde27851f2",82,["D",1763536533152],[333,342,351,360,369,379,388,397,406,416,425,434,443,452],{"_103":334,"_95":335,"_152":336,"_154":329,"_155":137,"_156":337,"_158":159,"_105":338,"_100":240,"_161":182,"_163":339,"_164":22,"_165":-5,"_166":340,"_98":341},"afa52532-c604-11f0-a767-42dde27851f2","BoxesAndLinesPresenter.tsx","6d3fc398-c602-11f0-a662-42dde27851f2",357,["D",1763638387740],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport {\n useState,\n useMemo,\n useEffect,\n useRef,\n} from \"https://esm.sh/react@18.2.0\";\nimport { createPortal } from \"https://esm.sh/react-dom@18.2.0\";\nimport type {\n BoxesAndLinesWidgetConfig,\n BoxesAndLinesResponse,\n} from \"../../../shared/types.ts\";\nimport type { Response } from \"../../../shared/types.ts\";\n\ninterface BoxesAndLinesPresenterProps {\n config: BoxesAndLinesWidgetConfig;\n responses: Response[];\n}\n\nconst BOX_WIDTH = 120;\nconst BOX_HEIGHT = 80;\nconst BOX_RADIUS = 8;\n\ninterface Box {\n id: string;\n x: number;\n y: number;\n label: string;\n}\n\ninterface Line {\n id: string;\n fromBoxId: string;\n toBoxId: string;\n}\n\nexport function BoxesAndLinesPresenter({\n config,\n responses,\n}: BoxesAndLinesPresenterProps) {\n const [maximizedIndex, setMaximizedIndex] = useState(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\n const containerRef = useRef(null);\n\n const toggleFullscreen = () => {\n if (!isFullscreen) {\n setIsFullscreen(true);\n } else {\n setIsFullscreen(false);\n }\n };\n\n useEffect(() => {\n const handleEsc = (e: KeyboardEvent) => {\n if (e.key === \"Escape\" && isFullscreen) {\n setIsFullscreen(false);\n }\n };\n\n window.addEventListener(\"keydown\", handleEsc);\n\n // Prevent body scroll when fullscreen\n if (isFullscreen) {\n document.body.style.overflow = \"hidden\";\n } else {\n document.body.style.overflow = \"\";\n }\n\n return () => {\n window.removeEventListener(\"keydown\", handleEsc);\n document.body.style.overflow = \"\";\n };\n }, [isFullscreen]);\n\n const diagrams = useMemo(() => {\n return responses\n .map((response) => {\n try {\n const data = JSON.parse(\n response.response_data\n ) as BoxesAndLinesResponse;\n return {\n sessionId: response.session_id,\n boxes: data.boxes || [],\n lines: data.lines || [],\n createdAt: response.created_at,\n };\n } catch {\n return null;\n }\n })\n .filter((d): d is NonNullable => d !== null);\n }, [responses]);\n\n const getBoxCenter = (box: Box) => {\n return {\n x: box.x + BOX_WIDTH / 2,\n y: box.y + BOX_HEIGHT / 2,\n };\n };\n\n const renderDiagram = (\n diagram: { boxes: Box[]; lines: Line[] },\n isMaximized: boolean = false\n ) => {\n // Calculate bounds for auto-scaling\n const allX = diagram.boxes.map((b) => b.x);\n const allY = diagram.boxes.map((b) => b.y);\n const minX = Math.min(...allX, 0);\n const minY = Math.min(...allY, 0);\n const maxX = Math.max(...allX.map((x) => x + BOX_WIDTH), 400);\n const maxY = Math.max(...allY.map((y) => y + BOX_HEIGHT), 400);\n\n const width = Math.max(maxX - minX, 400);\n const height = Math.max(maxY - minY, 400);\n const padding = 40;\n const scale = isMaximized ? 1 : 0.8;\n const offsetX = -minX + padding;\n const offsetY = -minY + padding;\n\n return (\n \n \n {/* Lines */}\n {diagram.lines.map((line) => {\n const fromBox = diagram.boxes.find((b) => b.id === line.fromBoxId);\n const toBox = diagram.boxes.find((b) => b.id === line.toBoxId);\n if (!fromBox || !toBox) return null;\n\n const from = getBoxCenter(fromBox);\n const to = getBoxCenter(toBox);\n\n return (\n \n );\n })}\n \n \n \n \n \n\n {/* Boxes */}\n {diagram.boxes.map((box) => (\n \n \n \n {box.label}\n \n \n ))}\n \n \n );\n };\n\n if (diagrams.length === 0) {\n return (\n

\n {config.title && (\n

\n {config.title}\n

\n )}\n

📊

No diagrams yet

\n Waiting for participants to create diagrams...\n

\n );\n }\n\n const content = (\n \n {/* Header with maximize button */}\n

\n {config.title || \"Boxes and Lines\"}\n

\n \n {isFullscreen ? \"⤓\" : \"⤢\"}\n \n

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

\n {diagrams.length === 0 ? (\n

📊

No diagrams yet

\n Waiting for participants to create diagrams...\n

\n ) : maximizedIndex !== null ? (\n <>\n

\n Diagram {maximizedIndex + 1} of {diagrams.length}\n

\n setMaximizedIndex(null)}\n className=\"px-4 py-2 glass-button-secondary rounded-lg font-semibold text-sm\"\n >\n ← Back to Grid\n \n

\n {renderDiagram(diagrams[maximizedIndex], true)}\n

\n \n setMaximizedIndex(Math.max(0, maximizedIndex - 1))\n }\n disabled={maximizedIndex === 0}\n className=\"px-4 py-2 glass-button-secondary rounded-lg font-semibold text-sm disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n ← Previous\n \n \n setMaximizedIndex(\n Math.min(diagrams.length - 1, maximizedIndex + 1)\n )\n }\n disabled={maximizedIndex === diagrams.length - 1}\n className=\"px-4 py-2 glass-button-secondary rounded-lg font-semibold text-sm disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n Next →\n \n

\n \n ) : (\n <>\n

\n {diagrams.length} {diagrams.length === 1 ? \"diagram\" : \"diagrams\"}\n

\n {diagrams.map((diagram, index) => (\n setMaximizedIndex(index)}\n >\n

\n Diagram {index + 1}\n

\n {renderDiagram(diagram, false)}\n

\n Click to maximise\n

\n ))}\n

\n \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(content, document.body)}\n

\n \n );\n }\n\n return content;\n}\n",[],[314,321,328,335],{"_103":343,"_95":344,"_152":345,"_154":329,"_155":137,"_156":346,"_158":159,"_105":347,"_100":297,"_161":182,"_163":348,"_164":22,"_165":-5,"_166":349,"_98":350},"b00ae64c-c604-11f0-8160-42dde27851f2","BoxesAndLinesWidget.tsx","6d311708-c602-11f0-9227-42dde27851f2",364,["D",1763638387759],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport {\n useState,\n useEffect,\n useRef,\n useCallback,\n} from \"https://esm.sh/react@18.2.0\";\nimport {\n submitResponse,\n getResponseForSessionAndStep,\n} from \"../../utils/api.ts\";\nimport type {\n BoxesAndLinesWidgetConfig,\n BoxesAndLinesResponse,\n Box,\n Line,\n} from \"../../../shared/types.ts\";\n\nfunction useIsMobile() {\n const [isMobile, setIsMobile] = useState(false);\n\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n\n const checkMobile = () => {\n setIsMobile(window.innerWidth < 768 || window.innerHeight < 800);\n };\n\n checkMobile();\n window.addEventListener(\"resize\", checkMobile);\n return () => window.removeEventListener(\"resize\", checkMobile);\n }, []);\n\n return isMobile;\n}\n\ninterface BoxesAndLinesWidgetProps {\n stepId: number;\n config: BoxesAndLinesWidgetConfig;\n sessionId: string;\n onSubmit?: () => void;\n}\n\nconst BOX_WIDTH = 120;\nconst BOX_HEIGHT = 80;\nconst BOX_RADIUS = 8;\n\nexport function BoxesAndLinesWidget({\n stepId,\n config,\n sessionId,\n onSubmit,\n}: BoxesAndLinesWidgetProps) {\n const isMobile = useIsMobile();\n const [boxes, setBoxes] = useState([]);\n const [lines, setLines] = useState([]);\n const [selectedBoxId, setSelectedBoxId] = useState(null);\n const [draggingBoxId, setDraggingBoxId] = useState(null);\n const [dragOffset, setDragOffset] = useState<{ x: number; y: number } | null>(\n null\n );\n const [connectingFrom, setConnectingFrom] = useState(null);\n const [editingBoxId, setEditingBoxId] = useState(null);\n const [editingLabel, setEditingLabel] = useState(\"\");\n const [hasExistingResponse, setHasExistingResponse] = useState(false);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [lastSubmitted, setLastSubmitted] = useState(false);\n const canvasRef = useRef(null);\n const nextBoxIdRef = useRef(1);\n\n useEffect(() => {\n // Check if user already submitted\n getResponseForSessionAndStep(sessionId, stepId)\n .then((response) => {\n if (response) {\n const data = JSON.parse(\n response.response_data\n ) as BoxesAndLinesResponse;\n setBoxes(data.boxes || []);\n setLines(data.lines || []);\n setHasExistingResponse(true);\n // Find the highest box ID number\n const maxId = Math.max(\n ...(data.boxes || []).map((b) => {\n const match = b.id.match(/box(\\d+)/);\n return match ? parseInt(match[1]) : 0;\n }),\n 0\n );\n nextBoxIdRef.current = maxId + 1;\n }\n })\n .catch(() => {\n // No previous response\n });\n }, [sessionId, stepId]);\n\n const handleAddBox = useCallback(() => {\n if (!canvasRef.current) return;\n const rect = canvasRef.current.getBoundingClientRect();\n const centerX = rect.width / 2;\n const centerY = rect.height / 2;\n\n const newBox: Box = {\n id: `box${nextBoxIdRef.current++}`,\n x: centerX - BOX_WIDTH / 2,\n y: centerY - BOX_HEIGHT / 2,\n label: `Box ${nextBoxIdRef.current - 1}`,\n };\n setBoxes((prev) => [...prev, newBox]);\n }, []);\n\n const startDrag = useCallback(\n (clientX: number, clientY: number, boxId: string) => {\n const box = boxes.find((b) => b.id === boxId);\n if (!box) return;\n\n const rect = canvasRef.current?.getBoundingClientRect();\n if (!rect) return;\n\n setDraggingBoxId(boxId);\n setDragOffset({\n x: clientX - rect.left - box.x,\n y: clientY - rect.top - box.y,\n });\n setSelectedBoxId(boxId);\n },\n [boxes]\n );\n\n const handleBoxMouseDown = useCallback(\n (e: React.MouseEvent, boxId: string) => {\n e.preventDefault();\n e.stopPropagation();\n startDrag(e.clientX, e.clientY, boxId);\n },\n [startDrag]\n );\n\n const handleBoxTouchStart = useCallback(\n (e: React.TouchEvent, boxId: string) => {\n e.preventDefault();\n e.stopPropagation();\n const touch = e.touches[0];\n if (touch) {\n startDrag(touch.clientX, touch.clientY, boxId);\n }\n },\n [startDrag]\n );\n\n const updateDrag = useCallback(\n (clientX: number, clientY: number) => {\n if (!draggingBoxId || !dragOffset || !canvasRef.current) return;\n\n const rect = canvasRef.current.getBoundingClientRect();\n const newX = clientX - rect.left - dragOffset.x;\n const newY = clientY - rect.top - dragOffset.y;\n\n // Keep box within canvas bounds\n const clampedX = Math.max(0, Math.min(newX, rect.width - BOX_WIDTH));\n const clampedY = Math.max(0, Math.min(newY, rect.height - BOX_HEIGHT));\n\n setBoxes((prev) =>\n prev.map((box) =>\n box.id === draggingBoxId ? { ...box, x: clampedX, y: clampedY } : box\n )\n );\n },\n [draggingBoxId, dragOffset]\n );\n\n const handleMouseMove = useCallback(\n (e: React.MouseEvent) => {\n updateDrag(e.clientX, e.clientY);\n },\n [updateDrag]\n );\n\n const handleTouchMove = useCallback(\n (e: React.TouchEvent) => {\n e.preventDefault();\n const touch = e.touches[0];\n if (touch) {\n updateDrag(touch.clientX, touch.clientY);\n }\n },\n [updateDrag]\n );\n\n const handleMouseUp = useCallback(() => {\n setDraggingBoxId(null);\n setDragOffset(null);\n }, []);\n\n const handleTouchEnd = useCallback(() => {\n setDraggingBoxId(null);\n setDragOffset(null);\n }, []);\n\n const handleEditBox = useCallback(\n (boxId: string) => {\n const box = boxes.find((b) => b.id === boxId);\n if (box) {\n setEditingBoxId(boxId);\n setEditingLabel(box.label);\n }\n },\n [boxes]\n );\n\n const handleLabelSave = useCallback(() => {\n if (!editingBoxId) return;\n setBoxes((prev) =>\n prev.map((box) =>\n box.id === editingBoxId\n ? { ...box, label: editingLabel.trim() || box.label }\n : box\n )\n );\n setEditingBoxId(null);\n setEditingLabel(\"\");\n }, [editingBoxId, editingLabel]);\n\n const handleBoxClick = useCallback(\n (boxId: string) => {\n if (connectingFrom) {\n if (connectingFrom !== boxId) {\n // Create a new line\n const newLine: Line = {\n id: `line${Date.now()}`,\n fromBoxId: connectingFrom,\n toBoxId: boxId,\n };\n setLines((prev) => [...prev, newLine]);\n }\n setConnectingFrom(null);\n } else {\n setSelectedBoxId(boxId);\n }\n },\n [connectingFrom]\n );\n\n const handleStartConnecting = useCallback((boxId: string) => {\n setConnectingFrom(boxId);\n setSelectedBoxId(boxId);\n }, []);\n\n const handleDeleteBox = useCallback(\n (boxId: string) => {\n setBoxes((prev) => prev.filter((b) => b.id !== boxId));\n setLines((prev) =>\n prev.filter((l) => l.fromBoxId !== boxId && l.toBoxId !== boxId)\n );\n if (selectedBoxId === boxId) {\n setSelectedBoxId(null);\n }\n if (connectingFrom === boxId) {\n setConnectingFrom(null);\n }\n },\n [selectedBoxId, connectingFrom]\n );\n\n const handleDeleteLine = useCallback((lineId: string) => {\n setLines((prev) => prev.filter((l) => l.id !== lineId));\n }, []);\n\n const getBoxCenter = useCallback((box: Box) => {\n return {\n x: box.x + BOX_WIDTH / 2,\n y: box.y + BOX_HEIGHT / 2,\n };\n }, []);\n\n const handleSubmit = async () => {\n setLoading(true);\n setError(null);\n try {\n await submitResponse(sessionId, {\n step_id: stepId,\n response_data: {\n boxes,\n lines,\n } as BoxesAndLinesResponse,\n });\n setHasExistingResponse(true);\n setLastSubmitted(true);\n onSubmit?.();\n\n setTimeout(() => setLastSubmitted(false), 2000);\n } catch (err) {\n console.error(\"Failed to submit response:\", err);\n setError(\"Failed to submit response. Please try again.\");\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

\n {config.title && !isMobile && (\n

\n {config.title}\n

\n )}\n\n {error && (\n \n ⚠️\n {error}\n setError(null)}\n className=\"ml-auto text-red-500 hover:text-red-700\"\n aria-label=\"Dismiss error\"\n >\n ✕\n \n

\n )}\n\n

\n \n + Add Box\n \n {selectedBoxId && (\n <>\n handleEditBox(selectedBoxId)}\n className=\"px-4 py-2 glass-button-secondary rounded-lg font-semibold text-sm\"\n >\n Edit\n \n handleStartConnecting(selectedBoxId)}\n className={`px-4 py-2 rounded-lg font-semibold text-sm ${\n connectingFrom === selectedBoxId\n ? \"bg-last-pink text-white\"\n : \"glass-button-secondary\"\n }`}\n >\n {connectingFrom === selectedBoxId\n ? \"Click target box\"\n : \"Connect\"}\n \n handleDeleteBox(selectedBoxId)}\n className=\"px-4 py-2 bg-red-500 text-white rounded-lg font-semibold text-sm hover:bg-red-600\"\n >\n Delete Box\n \n \n )}\n {connectingFrom && (\n setConnectingFrom(null)}\n className=\"px-4 py-2 bg-gray-500 text-white rounded-lg font-semibold text-sm hover:bg-gray-600\"\n >\n Cancel Connect\n \n )}\n

\n\n {/* Edit Box Modal */}\n {editingBoxId && (\n {\n handleLabelSave();\n }}\n >\n e.stopPropagation()}\n >\n

\n Edit Box Label\n

\n setEditingLabel(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") {\n handleLabelSave();\n } else if (e.key === \"Escape\") {\n setEditingBoxId(null);\n setEditingLabel(\"\");\n }\n }}\n autoFocus\n className=\"w-full px-4 py-3 text-lg border-2 border-gray-300 rounded-lg focus:outline-none focus:border-last-pink mb-4\"\n placeholder=\"Enter box label\"\n />\n

\n \n Save\n \n {\n setEditingBoxId(null);\n setEditingLabel(\"\");\n }}\n className=\"flex-1 px-4 py-3 glass-button-secondary rounded-lg font-semibold text-sm\"\n >\n Cancel\n \n

\n \n )}\n\n {\n if (e.target === canvasRef.current) {\n setSelectedBoxId(null);\n setConnectingFrom(null);\n }\n }}\n >\n {/* SVG overlay for lines */}\n \n {lines.map((line) => {\n const fromBox = boxes.find((b) => b.id === line.fromBoxId);\n const toBox = boxes.find((b) => b.id === line.toBoxId);\n if (!fromBox || !toBox) return null;\n\n const from = getBoxCenter(fromBox);\n const to = getBoxCenter(toBox);\n\n return (\n \n \n {\n e.stopPropagation();\n handleDeleteLine(line.id);\n }}\n className=\"cursor-pointer\"\n />\n \n );\n })}\n \n \n \n \n \n \n\n {/* Boxes */}\n {boxes.map((box) => {\n const isSelected = selectedBoxId === box.id;\n const isConnecting = connectingFrom === box.id;\n\n return (\n handleBoxMouseDown(e, box.id)}\n onTouchStart={(e) => handleBoxTouchStart(e, box.id)}\n onClick={(e) => {\n e.stopPropagation();\n handleBoxClick(box.id);\n }}\n >\n \n \n {box.label}\n \n \n \n );\n })}\n \n\n {lastSubmitted ? (\n

\n ✓ Diagram {hasExistingResponse ? \"updated\" : \"saved\"}!\n

\n ) : (\n \n {loading\n ? hasExistingResponse\n ? \"Updating...\"\n : \"Saving...\"\n : hasExistingResponse\n ? \"Update Diagram\"\n : \"Save Diagram\"}\n \n )}\n \n );\n}\n",[],[314,321,328,344],{"_103":352,"_95":353,"_152":354,"_154":329,"_155":137,"_156":355,"_158":159,"_105":356,"_100":230,"_161":182,"_163":357,"_164":22,"_165":-5,"_166":358,"_98":359},"d4a96c94-c523-11f0-adce-42dde27851f2","ChatPresenter.tsx","1b538dbc-c51c-11f0-9a42-42dde27851f2",237,["D",1763541813078],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect, useMemo } from \"https://esm.sh/react@18.2.0\";\nimport { submitResponse, getResponsesForStep, getResponseForSessionAndStep, getUserAttribute, setUserAttribute, deleteResponsesForStep } from \"../../utils/api.ts\";\nimport type { ChatWidgetConfig, ChatResponse } from \"../../../shared/types.ts\";\nimport type { Response } from \"../../../shared/types.ts\";\n\ninterface ChatPresenterProps {\n config: ChatWidgetConfig;\n responses: Response[];\n sessionId: string;\n stepId: number;\n onMessageSent?: () => void;\n}\n\ninterface ChatMessage {\n id: number;\n message: string;\n userName: string;\n createdAt: string;\n}\n\nexport function ChatPresenter({ config, responses, sessionId, stepId, onMessageSent }: ChatPresenterProps) {\n const [userName, setUserName] = useState(null);\n const [nameInput, setNameInput] = useState(\"\");\n const [nameLoading, setNameLoading] = useState(false);\n const [loadingName, setLoadingName] = useState(true);\n const [messageInput, setMessageInput] = useState(\"\");\n const [submitting, setSubmitting] = useState(false);\n const [clearing, setClearing] = useState(false);\n\n useEffect(() => {\n // Check if presenter has a name\n getUserAttribute(sessionId, \"name\").then((name) => {\n setUserName(name);\n setLoadingName(false);\n });\n }, [sessionId]);\n\n useEffect(() => {\n // Poll for new messages\n if (!userName) return;\n\n const loadMessages = async () => {\n try {\n const resps = await getResponsesForStep(stepId);\n // Update parent component's responses through a callback or just refresh\n // For now, we'll use the responses prop which should be updated by parent\n } catch (err) {\n console.error(\"Failed to load messages:\", err);\n }\n };\n\n const interval = setInterval(loadMessages, 2000);\n return () => clearInterval(interval);\n }, [stepId, userName]);\n\n // Disable auto-scroll in presenter mode to prevent input box from causing scroll\n // useEffect(() => {\n // // Scroll to bottom when new messages arrive\n // messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n // }, [responses]);\n\n const handleSetName = async () => {\n if (!nameInput.trim()) return;\n \n setNameLoading(true);\n try {\n await setUserAttribute(sessionId, \"name\", nameInput.trim());\n setUserName(nameInput.trim());\n setNameInput(\"\");\n } catch (err) {\n console.error(\"Failed to set name:\", err);\n alert(\"Failed to set name. Please try again.\");\n } finally {\n setNameLoading(false);\n }\n };\n\n const handleSubmitMessage = async () => {\n if (!messageInput.trim() || !userName) return;\n \n setSubmitting(true);\n try {\n // Get existing response for this user/step\n const existingResponse = await getResponseForSessionAndStep(sessionId, stepId);\n let existingMessages: Array<{ message: string; timestamp: string }> = [];\n \n if (existingResponse) {\n try {\n const existingData = JSON.parse(existingResponse.response_data) as ChatResponse;\n if (existingData.messages && Array.isArray(existingData.messages)) {\n existingMessages = existingData.messages;\n } else if ((existingData as any).message) {\n // Migrate old format to new format\n existingMessages = [{\n message: (existingData as any).message,\n timestamp: existingResponse.created_at,\n }];\n }\n } catch {\n // Invalid existing data, start fresh\n }\n }\n \n // Add new message\n const newMessage = {\n message: messageInput.trim(),\n timestamp: new Date().toISOString(),\n };\n existingMessages.push(newMessage);\n \n // Submit updated response\n await submitResponse(sessionId, {\n step_id: stepId,\n response_data: {\n messages: existingMessages,\n userName: userName,\n } as ChatResponse,\n });\n \n setMessageInput(\"\");\n // Notify parent to reload responses\n onMessageSent?.();\n } catch (err) {\n console.error(\"Failed to submit message:\", err);\n alert(\"Failed to send message. Please try again.\");\n } finally {\n setSubmitting(false);\n }\n };\n\n const handleClearMessages = async () => {\n if (!confirm(\"Are you sure you want to clear all messages? This cannot be undone.\")) {\n return;\n }\n \n setClearing(true);\n try {\n await deleteResponsesForStep(stepId);\n // Notify parent to reload responses\n onMessageSent?.();\n } catch (err) {\n console.error(\"Failed to clear messages:\", err);\n alert(\"Failed to clear messages. Please try again.\");\n } finally {\n setClearing(false);\n }\n };\n\n const messages = useMemo(() => {\n const chatMessages: ChatMessage[] = [];\n \n for (const response of responses) {\n try {\n const data = JSON.parse(response.response_data) as ChatResponse;\n // Handle both old format (single message) and new format (array of messages)\n if (data.messages && Array.isArray(data.messages)) {\n // New format: array of messages\n for (const msg of data.messages) {\n chatMessages.push({\n id: response.id,\n message: msg.message,\n userName: data.userName,\n createdAt: msg.timestamp || response.created_at,\n });\n }\n } else if ((data as any).message) {\n // Old format: single message (for backwards compatibility)\n chatMessages.push({\n id: response.id,\n message: (data as any).message,\n userName: data.userName,\n createdAt: response.created_at,\n });\n }\n } catch {\n // Invalid response data, skip\n }\n }\n \n chatMessages.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());\n return chatMessages;\n }, [responses]);\n\n if (loadingName) {\n return (\n

\n );\n }\n\n // Show name prompt if presenter doesn't have a name\n if (!userName) {\n return (\n

\n {config.title || \"Chat\"}\n

\n \n Please enter your name to participate in the chat\n \n setNameInput(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !nameLoading) {\n handleSetName();\n }\n }}\n placeholder=\"Your name\"\n className=\"w-full px-4 py-3 glass-input text-gray-800\"\n autoFocus\n />\n

\n \n {nameLoading ? \"Setting name...\" : \"Continue\"}\n \n

\n );\n }\n\n return (\n

\n {config.title || \"Chat\"}\n

\n {messages.length > 0 && (\n \n {clearing ? \"Clearing...\" : \"Clear\"}\n \n )}\n

\n {messages.length} {messages.length === 1 ? \"message\" : \"messages\"}\n

\n \n

\n {messages.length === 0 ? (\n

💬

No messages yet

Be the first to say something!

\n ) : (\n messages.map((msg, idx) => (\n \n

\n {msg.userName === userName ? \"You\" : msg.userName}\n

\n {new Date(msg.createdAt).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}\n

{msg.message}

\n ))\n )}\n

\n\n {/* Input area */}\n

\n setMessageInput(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !submitting && messageInput.trim()) {\n handleSubmitMessage();\n }\n }}\n placeholder={config.placeholder || \"Type your message...\"}\n className=\"flex-1 px-4 py-3 glass-input text-gray-800\"\n disabled={submitting}\n />\n \n {submitting ? \"...\" : \"Send\"}\n \n

\n \n );\n}\n\n",[],[314,321,328,353],{"_103":361,"_95":362,"_152":363,"_154":329,"_155":137,"_156":364,"_158":159,"_105":365,"_100":297,"_161":182,"_163":366,"_164":22,"_165":-5,"_166":367,"_98":368},"e0e86ea4-c606-11f0-9643-42dde27851f2","ChatWidget.tsx","1b7e9eee-c51c-11f0-be28-42dde27851f2",426,["D",1763639329306],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { submitResponse, getResponsesForStep, getResponseForSessionAndStep, getUserAttribute, setUserAttribute } from \"../../utils/api.ts\";\nimport { setName } from \"../../utils/session.ts\";\nimport type { ChatWidgetConfig, ChatResponse } from \"../../../shared/types.ts\";\nimport type { Response } from \"../../../shared/types.ts\";\n\ninterface ChatWidgetProps {\n stepId: number;\n config: ChatWidgetConfig;\n sessionId: string;\n onSubmit?: () => void;\n}\n\ninterface ChatMessage {\n id: number;\n message: string;\n userName: string;\n createdAt: string;\n}\n\nexport function ChatWidget({ stepId, config, sessionId }: ChatWidgetProps) {\n const [userName, setUserName] = useState(null);\n const [nameInput, setNameInput] = useState(\"\");\n const [nameLoading, setNameLoading] = useState(false);\n const [messages, setMessages] = useState([]);\n const [messageInput, setMessageInput] = useState(\"\");\n const [submitting, setSubmitting] = useState(false);\n const [loadingName, setLoadingName] = useState(true);\n const messagesEndRef = useRef(null);\n\n useEffect(() => {\n // Check if user has a name\n getUserAttribute(sessionId, \"name\").then((name) => {\n setUserName(name);\n setLoadingName(false);\n });\n }, [sessionId]);\n\n useEffect(() => {\n // Load messages and poll for updates\n if (!userName) return;\n\n const loadMessages = async () => {\n try {\n const responses = await getResponsesForStep(stepId);\n const chatMessages: ChatMessage[] = [];\n \n for (const response of responses) {\n try {\n const data = JSON.parse(response.response_data) as ChatResponse;\n // Handle both old format (single message) and new format (array of messages)\n if (data.messages && Array.isArray(data.messages)) {\n // New format: array of messages\n for (const msg of data.messages) {\n chatMessages.push({\n id: response.id,\n message: msg.message,\n userName: data.userName,\n createdAt: msg.timestamp || response.created_at,\n });\n }\n } else if ((data as any).message) {\n // Old format: single message (for backwards compatibility)\n chatMessages.push({\n id: response.id,\n message: (data as any).message,\n userName: data.userName,\n createdAt: response.created_at,\n });\n }\n } catch {\n // Invalid response data, skip\n }\n }\n \n chatMessages.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());\n setMessages(chatMessages);\n } catch (err) {\n console.error(\"Failed to load messages:\", err);\n }\n };\n\n loadMessages();\n const interval = setInterval(loadMessages, 2000);\n return () => clearInterval(interval);\n }, [stepId, userName]);\n\n useEffect(() => {\n // Scroll to bottom when new messages arrive\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages]);\n\n const handleSetName = async () => {\n if (!nameInput.trim()) return;\n \n setNameLoading(true);\n try {\n await setUserAttribute(sessionId, \"name\", nameInput.trim());\n // Also save to local storage\n setName(nameInput.trim());\n setUserName(nameInput.trim());\n setNameInput(\"\");\n } catch (err) {\n console.error(\"Failed to set name:\", err);\n alert(\"Failed to set name. Please try again.\");\n } finally {\n setNameLoading(false);\n }\n };\n\n const handleSubmitMessage = async () => {\n if (!messageInput.trim() || !userName) return;\n \n setSubmitting(true);\n try {\n // Get existing response for this user/step\n const existingResponse = await getResponseForSessionAndStep(sessionId, stepId);\n let existingMessages: Array<{ message: string; timestamp: string }> = [];\n \n if (existingResponse) {\n try {\n const existingData = JSON.parse(existingResponse.response_data) as ChatResponse;\n if (existingData.messages && Array.isArray(existingData.messages)) {\n existingMessages = existingData.messages;\n } else if ((existingData as any).message) {\n // Migrate old format to new format\n existingMessages = [{\n message: (existingData as any).message,\n timestamp: existingResponse.created_at,\n }];\n }\n } catch {\n // Invalid existing data, start fresh\n }\n }\n \n // Add new message\n const newMessage = {\n message: messageInput.trim(),\n timestamp: new Date().toISOString(),\n };\n existingMessages.push(newMessage);\n \n // Submit updated response\n await submitResponse(sessionId, {\n step_id: stepId,\n response_data: {\n messages: existingMessages,\n userName: userName,\n } as ChatResponse,\n });\n \n setMessageInput(\"\");\n \n // Reload messages to show the new one\n const responses = await getResponsesForStep(stepId);\n const chatMessages: ChatMessage[] = [];\n \n for (const response of responses) {\n try {\n const data = JSON.parse(response.response_data) as ChatResponse;\n if (data.messages && Array.isArray(data.messages)) {\n for (const msg of data.messages) {\n chatMessages.push({\n id: response.id,\n message: msg.message,\n userName: data.userName,\n createdAt: msg.timestamp || response.created_at,\n });\n }\n } else if ((data as any).message) {\n chatMessages.push({\n id: response.id,\n message: (data as any).message,\n userName: data.userName,\n createdAt: response.created_at,\n });\n }\n } catch {\n // Skip invalid responses\n }\n }\n \n chatMessages.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime());\n setMessages(chatMessages);\n } catch (err) {\n console.error(\"Failed to submit message:\", err);\n alert(\"Failed to send message. Please try again.\");\n } finally {\n setSubmitting(false);\n }\n };\n\n if (loadingName) {\n return (\n

\n );\n }\n\n // Show name prompt if user doesn't have a name\n if (!userName) {\n return (\n

\n {config.title || \"Welcome to the Chat\"}\n

\n \n Please enter your name to continue\n \n setNameInput(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !nameLoading) {\n handleSetName();\n }\n }}\n placeholder=\"Your name\"\n className=\"w-full px-4 py-3 glass-input text-gray-800\"\n autoFocus\n />\n

\n \n {nameLoading ? \"Setting name...\" : \"Continue\"}\n \n

\n );\n }\n\n // Show chat interface\n return (\n

\n {config.title || \"Chat\"}\n

\n \n {/* Messages area */}\n

\n {messages.length === 0 ? (\n

💬

No messages yet

Be the first to say something!

\n ) : (\n messages.map((msg) => (\n \n

\n {msg.userName === userName ? \"You\" : msg.userName}\n

{msg.message}

\n ))\n )}\n

\n\n {/* Input area */}\n

\n );\n}\n\n",[],[314,321,328,362],{"_103":370,"_95":371,"_152":372,"_154":329,"_155":137,"_156":373,"_158":159,"_105":374,"_100":375,"_161":182,"_163":376,"_164":22,"_165":-5,"_166":377,"_98":378},"747950a2-c607-11f0-b6e8-42dde27851f2","EmailCollectionPresenter.tsx","bc87f426-c606-11f0-8ff7-42dde27851f2",428,["D",1763639576957],1,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { getResponsesForStep } from \"../../utils/api.ts\";\nimport type { EmailCollectionWidgetConfig, Response } from \"../../../shared/types.ts\";\n\ninterface EmailCollectionPresenterProps {\n config: EmailCollectionWidgetConfig;\n responses: Response[];\n}\n\ninterface EmailSubmission {\n name: string;\n email: string;\n submittedAt: string;\n}\n\nexport function EmailCollectionPresenter({ config, responses }: EmailCollectionPresenterProps) {\n const [submissions, setSubmissions] = useState([]);\n\n useEffect(() => {\n const loadSubmissions = async () => {\n try {\n const allResponses = await getResponsesForStep(responses[0]?.step_id || 0);\n const emailSubmissions: EmailSubmission[] = [];\n\n for (const response of allResponses) {\n try {\n const data = JSON.parse(response.response_data) as { name: string; email: string };\n if (data.name && data.email) {\n emailSubmissions.push({\n name: data.name,\n email: data.email,\n submittedAt: response.created_at,\n });\n }\n } catch {\n // Invalid response data, skip\n }\n }\n\n // Sort by submission time, most recent first\n emailSubmissions.sort((a, b) => \n new Date(b.submittedAt).getTime() - new Date(a.submittedAt).getTime()\n );\n\n setSubmissions(emailSubmissions);\n } catch (err) {\n console.error(\"Failed to load submissions:\", err);\n }\n };\n\n if (responses.length > 0) {\n loadSubmissions();\n }\n }, [responses]);\n\n return (\n

\n {config.title || \"Email Collection\"}\n

\n\n {submissions.length === 0 ? (\n

📧

No submissions yet

Waiting for participants to submit their emails...

\n ) : (\n

\n Total Submissions: {submissions.length}\n

\n {submissions.map((submission, index) => (\n \n

{submission.name}

\n {new Date(submission.submittedAt).toLocaleTimeString()}\n

\n ))}\n

\n )}\n \n );\n}\n\n",[],[314,321,328,371],{"_103":380,"_95":381,"_152":382,"_154":329,"_155":137,"_156":383,"_158":159,"_105":384,"_100":250,"_161":182,"_163":385,"_164":22,"_165":-5,"_166":386,"_98":387},"2da54250-c60a-11f0-9bd7-42dde27851f2","EmailCollectionWidget.tsx","bc815292-c606-11f0-a95c-42dde27851f2",446,["D",1763640746585],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect, useMemo, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { getUserAttribute, setUserAttribute, submitResponse } from \"../../utils/api.ts\";\nimport { getEmail, setEmail, getName, setName } from \"../../utils/session.ts\";\nimport type { EmailCollectionWidgetConfig } from \"../../../shared/types.ts\";\nimport confetti from \"https://esm.sh/canvas-confetti@1.9.2\";\n\ninterface EmailCollectionWidgetProps {\n stepId: number;\n config: EmailCollectionWidgetConfig;\n sessionId: string;\n}\n\nconst DEFAULT_CHECKBOX_OPTIONS = [\n \"Send me the slides\",\n \"Let's connect on LinkedIn\",\n \"Let's chat about working together\",\n];\n\nexport function EmailCollectionWidget({ stepId, config, sessionId }: EmailCollectionWidgetProps) {\n const checkboxOptions = useMemo(\n () => config.checkboxOptions || DEFAULT_CHECKBOX_OPTIONS,\n [config.checkboxOptions]\n );\n \n const [name, setNameValue] = useState(\"\");\n const [email, setEmailValue] = useState(\"\");\n const [checkedOptions, setCheckedOptions] = useState>({});\n const [submitting, setSubmitting] = useState(false);\n const [submitted, setSubmitted] = useState(false);\n const [loading, setLoading] = useState(true);\n const loadedKeyRef = useRef(\"\");\n\n useEffect(() => {\n // Create a unique key for this sessionId + checkboxOptions combo\n const currentKey = `${sessionId}-${JSON.stringify(checkboxOptions)}`;\n \n // Skip if we've already loaded for this exact combo\n if (loadedKeyRef.current === currentKey) return;\n \n setLoading(true);\n \n // Load existing name and email from local storage and user attributes\n const loadUserData = async () => {\n try {\n // Try to get name from user attributes first\n const storedName = await getUserAttribute(sessionId, \"name\");\n const localName = getName();\n const storedEmail = await getUserAttribute(sessionId, \"email\");\n const localEmail = getEmail();\n\n // Pre-fill with existing data\n setNameValue(storedName || localName || \"\");\n setEmailValue(storedEmail || localEmail || \"\");\n\n // Load checkbox states from user attributes\n const checkboxStates: Record = {};\n for (const option of checkboxOptions) {\n try {\n const stored = await getUserAttribute(sessionId, `checkbox_${option}`);\n checkboxStates[option] = stored === \"true\";\n } catch {\n checkboxStates[option] = false;\n }\n }\n setCheckedOptions(checkboxStates);\n loadedKeyRef.current = currentKey;\n } catch (err) {\n console.error(\"Failed to load user data:\", err);\n } finally {\n setLoading(false);\n }\n };\n\n loadUserData();\n }, [sessionId, checkboxOptions]);\n\n const handleCheckboxChange = (option: string) => {\n setCheckedOptions((prev) => ({\n ...prev,\n [option]: !prev[option],\n }));\n };\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n \n if (!name.trim() || !email.trim()) return;\n \n // Check if at least one checkbox is selected\n const hasCheckedOption = Object.values(checkedOptions).some((checked) => checked);\n if (!hasCheckedOption) {\n alert(\"Please select at least one option\");\n return;\n }\n \n // Basic email validation\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n if (!emailRegex.test(email.trim())) {\n alert(\"Please enter a valid email address\");\n return;\n }\n\n setSubmitting(true);\n try {\n // Save to database via user attributes\n const attributePromises = [\n setUserAttribute(sessionId, \"name\", name.trim()),\n setUserAttribute(sessionId, \"email\", email.trim()),\n ];\n\n // Save checkbox states as user attributes\n for (const option of checkboxOptions) {\n attributePromises.push(\n setUserAttribute(sessionId, `checkbox_${option}`, checkedOptions[option] ? \"true\" : \"false\")\n );\n }\n\n await Promise.all(attributePromises);\n\n // Save to local storage\n setName(name.trim());\n setEmail(email.trim());\n\n // Submit response for this step\n await submitResponse(sessionId, {\n step_id: stepId,\n response_data: {\n name: name.trim(),\n email: email.trim(),\n checkedOptions: Object.entries(checkedOptions)\n .filter(([_, checked]) => checked)\n .map(([option, _]) => option),\n },\n });\n\n setSubmitted(true);\n \n // Trigger big extended confetti celebration\n const duration = 8000; // Extended duration\n const end = Date.now() + duration;\n const colors = ['#ff6b6b', '#4ecdc4', '#45b7d1', '#f9ca24', '#f0932b', '#eb4d4b', '#6c5ce7', '#a29bfe', '#ff9ff3', '#54a0ff'];\n \n // Continuous confetti from sides\n const frame = () => {\n confetti({\n particleCount: 5,\n angle: 60,\n spread: 70,\n origin: { x: 0 },\n colors: colors,\n startVelocity: 45,\n });\n confetti({\n particleCount: 5,\n angle: 120,\n spread: 70,\n origin: { x: 1 },\n colors: colors,\n startVelocity: 45,\n });\n \n if (Date.now() < end) {\n requestAnimationFrame(frame);\n }\n };\n frame();\n \n // Big bursts from center at different intervals\n const bursts = [\n { delay: 0, count: 150, spread: 80 },\n { delay: 300, count: 150, spread: 80 },\n { delay: 600, count: 150, spread: 80 },\n { delay: 1000, count: 200, spread: 90 },\n { delay: 2000, count: 200, spread: 90 },\n { delay: 3500, count: 150, spread: 85 },\n ];\n \n bursts.forEach(({ delay, count, spread }) => {\n setTimeout(() => {\n confetti({\n particleCount: count,\n spread: spread,\n origin: { y: 0.6 },\n colors: colors,\n startVelocity: 50,\n gravity: 0.8,\n });\n }, delay);\n });\n \n // Additional side bursts\n setTimeout(() => {\n confetti({\n particleCount: 100,\n angle: 45,\n spread: 60,\n origin: { x: 0.2, y: 0.8 },\n colors: colors,\n startVelocity: 40,\n });\n confetti({\n particleCount: 100,\n angle: 135,\n spread: 60,\n origin: { x: 0.8, y: 0.8 },\n colors: colors,\n startVelocity: 40,\n });\n }, 1500);\n } catch (err) {\n console.error(\"Failed to submit email:\", err);\n alert(\"Failed to save your information. Please try again.\");\n } finally {\n setSubmitting(false);\n }\n };\n\n if (loading) {\n return (\n

\n );\n }\n\n if (submitted) {\n return (\n

🎉

\n {config.successTitle || \"Thank you!\"}\n

\n {config.successMessage || \"We'll send you the slides shortly.\"}\n

\n );\n }\n\n return (\n

\n {config.title || \"Send me the slides\"}\n

\n {config.description && (\n

{config.description}

\n )}\n

\n\n

\n \n Name *\n \n setNameValue(e.target.value)}\n required\n placeholder=\"Your name\"\n className=\"w-full px-5 py-3.5 glass-input text-gray-800 rounded-xl border-2 border-transparent focus:border-last-pink/50 transition-all duration-200 text-base\"\n autoFocus\n />\n

\n\n

\n \n Email *\n \n setEmailValue(e.target.value)}\n required\n placeholder=\"your.email@example.com\"\n className=\"w-full px-5 py-3.5 glass-input text-gray-800 rounded-xl border-2 border-transparent focus:border-last-pink/50 transition-all duration-200 text-base\"\n />\n

\n\n

\n \n Select your preferences *\n \n

\n {checkboxOptions.map((option, index) => (\n \n handleCheckboxChange(option)}\n className=\"mt-0.5 mr-4 w-6 h-6 rounded-lg border-2 border-gray-300 text-last-pink focus:ring-2 focus:ring-last-pink focus:ring-offset-2 cursor-pointer flex-shrink-0 transition-all duration-200 checked:bg-last-pink checked:border-last-pink\"\n />\n \n {option}\n \n \n ))}\n

\n\n checked) || submitting}\n className=\"w-full py-4 px-8 glass-button rounded-xl font-bold text-lg shadow-lg hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98] disabled:transform-none mt-8 bg-gradient-to-r from-last-pink to-last-blue text-white\"\n >\n {submitting ? (\n \n \n Submitting...\n \n ) : (\n config.submitButtonText || \"Submit\"\n )}\n \n \n

\n );\n}\n\n",[],[314,321,328,381],{"_103":389,"_95":390,"_152":391,"_154":329,"_155":137,"_156":392,"_158":159,"_105":393,"_100":220,"_161":182,"_163":394,"_164":22,"_165":-5,"_166":395,"_98":396},"63c798c8-c53e-11f0-bb10-42dde27851f2","MultivotePresenter.tsx","6e4088ec-c53d-11f0-826e-42dde27851f2",292,["D",1763553220106],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useMemo } from \"https://esm.sh/react@18.2.0\";\nimport { deleteResponsesForStep } from \"../../utils/api.ts\";\nimport type { MultivoteWidgetConfig, MultivoteResponse } from \"../../../shared/types.ts\";\nimport type { Response } from \"../../../shared/types.ts\";\n\ninterface MultivotePresenterProps {\n config: MultivoteWidgetConfig;\n responses: Response[];\n stepId: number;\n onClear?: () => void;\n}\n\ninterface OptionCount {\n option: string;\n count: number;\n}\n\nexport function MultivotePresenter({ config, responses, stepId, onClear }: MultivotePresenterProps) {\n const [clearing, setClearing] = useState(false);\n\n const handleClearAll = async () => {\n if (!confirm(\"Are you sure you want to clear all votes? This cannot be undone.\")) {\n return;\n }\n \n setClearing(true);\n try {\n await deleteResponsesForStep(stepId);\n // Notify parent to reload responses\n onClear?.();\n } catch (err) {\n console.error(\"Failed to clear votes:\", err);\n alert(\"Failed to clear votes. Please try again.\");\n } finally {\n setClearing(false);\n }\n };\n\n const results = useMemo(() => {\n const optionCounts = new Map();\n let totalVotes = 0;\n let totalParticipants = 0;\n\n responses.forEach((response) => {\n try {\n const data = JSON.parse(response.response_data) as MultivoteResponse;\n if (data.selectedOptions && Array.isArray(data.selectedOptions)) {\n totalParticipants++;\n data.selectedOptions.forEach((option) => {\n if (option && option.trim()) {\n const trimmed = option.trim();\n optionCounts.set(trimmed, (optionCounts.get(trimmed) || 0) + 1);\n totalVotes++;\n }\n });\n }\n } catch {\n // Invalid response data\n }\n });\n\n // Convert to array and sort by count (descending), then alphabetically\n const sortedOptions: OptionCount[] = Array.from(optionCounts.entries())\n .map(([option, count]) => ({ option, count }))\n .sort((a, b) => {\n // First sort by count (descending)\n if (b.count !== a.count) {\n return b.count - a.count;\n }\n // Then alphabetically\n return a.option.localeCompare(b.option);\n });\n\n return { sortedOptions, totalVotes, totalParticipants };\n }, [responses]);\n\n const maxCount = results.sortedOptions.length > 0 \n ? Math.max(...results.sortedOptions.map(o => o.count), 1)\n : 1;\n\n return (\n

{config.question}

\n {results.sortedOptions.length > 0 && (\n \n {clearing ? \"Clearing...\" : \"Clear\"}\n \n )}\n

\n \n

\n {results.totalParticipants} {results.totalParticipants === 1 ? \"participant\" : \"participants\"}\n

\n {results.totalVotes} {results.totalVotes === 1 ? \"vote\" : \"votes\"}\n

\n\n {results.sortedOptions.length === 0 ? (\n

📊

No votes yet

Waiting for participants to submit their votes...

\n ) : (\n

\n {results.sortedOptions.map(({ option, count }) => {\n const percentage = maxCount > 0 ? (count / maxCount) * 100 : 0;\n \n return (\n

\n {option}\n \n {count} {count === 1 ? \"vote\" : \"votes\"}\n \n

\n \n

\n );\n })}\n

\n )}\n \n );\n}\n\n",[],[314,321,328,390],{"_103":398,"_95":399,"_152":400,"_154":329,"_155":137,"_156":401,"_158":159,"_105":402,"_100":240,"_161":182,"_163":403,"_164":22,"_165":-5,"_166":404,"_98":405},"2650dd2e-c53e-11f0-8fc4-42dde27851f2","MultivoteWidget.tsx","6e4e19d0-c53d-11f0-bb9a-42dde27851f2",290,["D",1763553116984],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect, useMemo } from \"https://esm.sh/react@18.2.0\";\nimport { submitResponse, getResponseForSessionAndStep, getResponsesForStep } from \"../../utils/api.ts\";\nimport type { MultivoteWidgetConfig, MultivoteResponse } from \"../../../shared/types.ts\";\n\ninterface MultivoteWidgetProps {\n stepId: number;\n config: MultivoteWidgetConfig;\n sessionId: string;\n onSubmit?: () => void;\n}\n\nexport function MultivoteWidget({ stepId, config, sessionId, onSubmit }: MultivoteWidgetProps) {\n const [selectedOptions, setSelectedOptions] = useState>(new Set());\n const [newOptionText, setNewOptionText] = useState(\"\");\n const [allOptions, setAllOptions] = useState>(new Set());\n const [hasExistingResponse, setHasExistingResponse] = useState(false);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [isSubmitting, setIsSubmitting] = useState(false);\n\n // Load existing response and all available options\n useEffect(() => {\n const loadData = async () => {\n // Don't update selectedOptions from server if we're currently submitting\n if (isSubmitting) return;\n \n try {\n // Load user's existing response\n const response = await getResponseForSessionAndStep(sessionId, stepId);\n if (response) {\n const data = JSON.parse(response.response_data) as MultivoteResponse;\n const serverSelected = new Set(data.selectedOptions || []);\n setSelectedOptions(serverSelected);\n setHasExistingResponse(true);\n }\n\n // Load all responses to get all available options\n const allResponses = await getResponsesForStep(stepId);\n const optionsSet = new Set();\n allResponses.forEach((resp) => {\n try {\n const data = JSON.parse(resp.response_data) as MultivoteResponse;\n if (data.selectedOptions && Array.isArray(data.selectedOptions)) {\n data.selectedOptions.forEach((opt) => {\n if (opt && opt.trim()) {\n optionsSet.add(opt.trim());\n }\n });\n }\n } catch {\n // Invalid response data\n }\n });\n setAllOptions(optionsSet);\n } catch (err) {\n console.error(\"Failed to load data:\", err);\n }\n };\n\n loadData();\n \n // Poll for new options\n const interval = setInterval(loadData, 2000);\n return () => clearInterval(interval);\n }, [sessionId, stepId, isSubmitting]);\n\n const handleToggleOption = async (option: string) => {\n const newSelected = new Set(selectedOptions);\n if (newSelected.has(option)) {\n newSelected.delete(option);\n } else {\n newSelected.add(option);\n }\n setSelectedOptions(newSelected);\n \n // Immediately submit the updated selection to avoid race conditions\n await handleSubmit(newSelected);\n };\n\n const handleAddOption = async () => {\n const trimmed = newOptionText.trim();\n if (!trimmed) return;\n\n // Add to local options set immediately\n const newOptions = new Set(allOptions);\n newOptions.add(trimmed);\n setAllOptions(newOptions);\n\n // Add to selected options\n const newSelected = new Set(selectedOptions);\n newSelected.add(trimmed);\n setSelectedOptions(newSelected);\n\n // Clear input\n setNewOptionText(\"\");\n\n // Submit response immediately with the new option included\n await handleSubmit(newSelected);\n };\n\n const handleSubmit = async (optionsToSubmit?: Set) => {\n const options = optionsToSubmit || selectedOptions;\n if (options.size === 0) return;\n \n setIsSubmitting(true);\n setLoading(true);\n setError(null);\n try {\n await submitResponse(sessionId, {\n step_id: stepId,\n response_data: {\n selectedOptions: Array.from(options),\n } as MultivoteResponse,\n });\n setHasExistingResponse(true);\n onSubmit?.();\n } catch (err) {\n console.error(\"Failed to submit response:\", err);\n setError(\"Failed to submit response. Please try again.\");\n // On error, revert to server state\n try {\n const response = await getResponseForSessionAndStep(sessionId, stepId);\n if (response) {\n const data = JSON.parse(response.response_data) as MultivoteResponse;\n setSelectedOptions(new Set(data.selectedOptions || []));\n }\n } catch {\n // Ignore errors when reverting\n }\n } finally {\n setLoading(false);\n setIsSubmitting(false);\n }\n };\n\n // Sort options alphabetically for display\n const sortedOptions = useMemo(() => {\n return Array.from(allOptions).sort((a, b) => a.localeCompare(b));\n }, [allOptions]);\n\n return (\n

{config.question}

\n \n {error && (\n

\n ⚠️\n {error}\n setError(null)}\n className=\"ml-auto text-red-500 hover:text-red-700\"\n aria-label=\"Dismiss error\"\n >\n ✕\n \n

\n )}\n\n {/* Add new option input */}\n

\n setNewOptionText(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") {\n handleAddOption();\n }\n }}\n placeholder=\"Type a new option and press Enter...\"\n className=\"flex-1 px-4 py-3 glass-input rounded-xl text-lg\"\n />\n \n Add\n \n

\n\n {/* Options list */}\n {sortedOptions.length === 0 ? (\n

No options yet

Add an option above to get started

\n ) : (\n

\n {sortedOptions.map((option) => {\n const isSelected = selectedOptions.has(option);\n return (\n handleToggleOption(option)}\n className={`w-full p-4 text-left rounded-xl border-2 transition-all transform duration-200 ${\n isSelected\n ? \"border-last-pink bg-gradient-to-r from-last-pink/10 to-last-orange/10 shadow-md scale-[1.02]\"\n : \"border-gray-200/60 hover:border-last-pink/50 hover:bg-white/50 bg-white/30\"\n } cursor-pointer`}\n >\n

\n {isSelected && (\n ✓\n )}\n

\n \n {option}\n \n

\n \n );\n })}\n

\n )}\n\n {loading && (\n

\n Saving...\n

\n )}\n

\n );\n}\n\n",[],[314,321,328,399],{"_103":407,"_95":408,"_152":409,"_154":329,"_155":137,"_156":410,"_158":159,"_105":411,"_100":412,"_161":182,"_163":413,"_164":22,"_165":-5,"_166":414,"_98":415},"14537692-c53c-11f0-8d43-42dde27851f2","Poll2DPresenter.tsx","aa97afc4-c537-11f0-8556-42dde27851f2",281,["D",1763552227810],12,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useMemo, useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport type {\n Poll2DWidgetConfig,\n Poll2DResponse,\n} from \"../../../shared/types.ts\";\nimport type { Response } from \"../../../shared/types.ts\";\n\ninterface Poll2DPresenterProps {\n config: Poll2DWidgetConfig;\n responses: Response[];\n}\n\ninterface Point {\n x: number; // Journey stage (0 to stages.length - 1)\n y: number; // Risk aversion (1 to 5)\n}\n\nexport function Poll2DPresenter({ config, responses }: Poll2DPresenterProps) {\n const [viewportHeight, setViewportHeight] = useState(\n typeof window !== \"undefined\" ? window.innerHeight : 800\n );\n\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n\n const handleResize = () => {\n setViewportHeight(window.innerHeight);\n };\n\n window.addEventListener(\"resize\", handleResize);\n // Set initial height\n setViewportHeight(window.innerHeight);\n\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n const { points, total } = useMemo(() => {\n const parsedPoints: Point[] = [];\n\n responses.forEach((response) => {\n try {\n const data = JSON.parse(response.response_data) as Poll2DResponse;\n if (\n data.journeyStage >= 0 &&\n data.journeyStage < config.journeyStages.length &&\n data.riskAversion >= config.riskScaleMin &&\n data.riskAversion <= config.riskScaleMax\n ) {\n parsedPoints.push({\n x: data.journeyStage,\n y: data.riskAversion,\n });\n }\n } catch {\n // Invalid response data\n }\n });\n\n return { points: parsedPoints, total: parsedPoints.length };\n }, [responses, config]);\n\n // Create a 2x2 grid by dividing journey stages and risk levels\n const gridData = useMemo(() => {\n const grid: Record = {\n \"top-left\": 0,\n \"top-right\": 0,\n \"bottom-left\": 0,\n \"bottom-right\": 0,\n };\n\n // Use Math.floor to ensure consistent division (early = first half, late = second half)\n const journeyMidpoint = Math.floor(config.journeyStages.length / 2);\n const riskMidpoint = (config.riskScaleMin + config.riskScaleMax) / 2;\n\n points.forEach((point) => {\n // For journey: early = first half (inclusive), late = second half\n const isEarlyJourney = point.x <= journeyMidpoint;\n // For risk: risk averse = at or above midpoint (goes to top), risk taking = below midpoint (goes to bottom)\n // Note: Top row in visualization = risk averse, bottom row = risk taking\n const isRiskAverse = point.y >= riskMidpoint;\n\n if (isEarlyJourney && isRiskAverse) {\n grid[\"top-left\"]++;\n } else if (!isEarlyJourney && isRiskAverse) {\n grid[\"top-right\"]++;\n } else if (isEarlyJourney && !isRiskAverse) {\n grid[\"bottom-left\"]++;\n } else {\n grid[\"bottom-right\"]++;\n }\n });\n\n return grid;\n }, [points, config]);\n\n const maxCount = Math.max(...Object.values(gridData), 1);\n\n // Calculate grid cell dimensions\n const gridSize = 500;\n const cellSize = gridSize / 2;\n const padding = 15;\n const axisLabelSpace = 70; // Space for axis labels\n const categoryLabelSpace = 35; // Space for category labels (numbers are smaller)\n const axisLabelGap = 20; // Gap between category numbers and axis label\n const totalWidth = gridSize + axisLabelSpace + categoryLabelSpace;\n const totalHeight =\n gridSize + axisLabelSpace + categoryLabelSpace + axisLabelGap;\n\n // Detect if we're in a very small embedded view\n const isEmbeddedView = viewportHeight < 1000;\n\n // Calculate scale factor based on viewport height\n // Reserve space for titles (~150px) and legend (~200px) and padding (~100px)\n // For small embedded views, reserve less space since we'll hide header and make titles compact\n // Use only gridSize for scaling calculation (exclude labels) to delay scaling much later\n // Increased reserved space significantly so graph takes up more space by default\n const reservedSpace = isEmbeddedView ? 250 : 800;\n const availableHeight = viewportHeight - reservedSpace;\n const scaleFactor = useMemo(() => {\n // Only scale when availableHeight is significantly less than gridSize\n // Threshold increased by 200px so scaling starts earlier\n const scalingThreshold = gridSize * 0.5 + 200; // 450px (250px + 200px)\n if (availableHeight > 0 && availableHeight < scalingThreshold) {\n return Math.max(0.5, availableHeight / scalingThreshold); // Minimum scale of 0.5\n }\n return 1;\n }, [availableHeight, gridSize]);\n\n // Generate risk labels (use provided labels or default to numbers)\n const riskLabels = useMemo(() => {\n const range = config.riskScaleMax - config.riskScaleMin + 1;\n if (config.riskLabels && config.riskLabels.length === range) {\n return config.riskLabels;\n }\n // Default to numbers if labels not provided\n return Array.from({ length: range }, (_, i) =>\n String(config.riskScaleMin + i)\n );\n }, [config.riskLabels, config.riskScaleMin, config.riskScaleMax]);\n\n return (\n

\n {!isEmbeddedView && (\n

\n {config.question1}\n

\n {config.question2}\n

\n\n

\n {total} {total === 1 ? \"response\" : \"responses\"}\n

\n )}\n\n {isEmbeddedView && (\n

\n \n {config.question1}\n \n •\n \n {config.question2}\n \n \n ({total} {total === 1 ? \"response\" : \"responses\"})\n \n

\n )}\n\n {total === 0 ? (\n

📊

No responses yet

\n Waiting for participants to submit their answers...\n

\n ) : (\n

\n {/* 2x2 Grid Visualization with Axes */}\n \n \n {/* Main grid area */}\n \n {/* Grid lines */}\n \n {/* Vertical line */}\n \n {/* Horizontal line */}\n \n \n\n {/* Grid cells with counts */}\n {[\n {\n key: \"top-left\",\n x: 0,\n y: 0,\n label: \"Early Journey\\nRisk Averse\",\n },\n {\n key: \"top-right\",\n x: cellSize,\n y: 0,\n label: \"Late Journey\\nRisk Averse\",\n },\n {\n key: \"bottom-left\",\n x: 0,\n y: cellSize,\n label: \"Early Journey\\nRisk Taking\",\n },\n {\n key: \"bottom-right\",\n x: cellSize,\n y: cellSize,\n label: \"Late Journey\\nRisk Taking\",\n },\n ].map(({ key, x, y, label }) => {\n const count = gridData[key];\n const percentage =\n maxCount > 0 ? (count / maxCount) * 100 : 0;\n\n return (\n 0\n ? `linear-gradient(135deg, rgba(255, 46, 99, ${\n (percentage / 100) * 0.3\n }), rgba(255, 153, 51, ${\n (percentage / 100) * 0.3\n }))`\n : \"rgba(255, 255, 255, 0.3)\",\n }}\n >\n

\n {count}\n

\n {label}\n

\n );\n })}\n\n {/* Scatter plot overlay */}\n \n {points.map((point, index) => {\n const circleRadius = 6;\n const edgePadding = circleRadius + 2; // Padding to keep circles visible at edges\n\n // Normalize journey stage to 0-1 range\n const normalizedX =\n config.journeyStages.length > 1\n ? point.x / (config.journeyStages.length - 1)\n : 0.5;\n\n // Normalize risk aversion to 0-1 range\n // Low risk (riskScaleMin) should be at top (y=0), High risk (riskScaleMax) at bottom (y=gridSize)\n const riskRange = config.riskScaleMax - config.riskScaleMin;\n const normalizedY =\n riskRange > 0\n ? (point.y - config.riskScaleMin) / riskRange\n : 0.5;\n\n // Map to SVG coordinates with padding to keep circles visible\n // X: 0 to gridSize, with padding\n const x =\n edgePadding + normalizedX * (gridSize - 2 * edgePadding);\n // Y: Invert so low risk (normalizedY=0) is at top, high risk (normalizedY=1) at bottom\n const y =\n edgePadding +\n (1 - normalizedY) * (gridSize - 2 * edgePadding);\n\n // Generate stable offset based on point data to prevent overlapping\n // Use a simple hash function for consistent positioning\n const hash = (point.x * 31 + point.y * 17 + index) % 100;\n const angle = (hash / 100) * Math.PI * 2;\n const radius = (hash % 20) / 2; // Vary radius slightly\n const offsetX = Math.cos(angle) * radius;\n const offsetY = Math.sin(angle) * radius;\n\n return (\n \n );\n })}\n \n

\n\n {/* Y-axis label (Risk Aversion) - positioned to align with grid, accounting for rotation */}\n \n

\n {config.question2}\n

\n \n\n {/* X-axis label (Journey Stage) - positioned below category labels with gap */}\n \n

\n {config.question1}\n

\n \n\n {/* Y-axis category labels (Risk levels) - show numbers only */}\n \n {Array.from(\n { length: config.riskScaleMax - config.riskScaleMin + 1 },\n (_, i) => {\n const value = config.riskScaleMin + i;\n const normalizedY =\n (value - config.riskScaleMin) /\n (config.riskScaleMax - config.riskScaleMin);\n const y = (1 - normalizedY) * gridSize; // Invert for SVG coordinates\n\n return (\n \n {value}\n \n );\n }\n )}\n \n\n {/* X-axis category labels (Journey stages) - show numbers only */}\n \n {config.journeyStages.map((stage, index) => {\n const normalizedX =\n config.journeyStages.length > 1\n ? index / (config.journeyStages.length - 1)\n : 0.5;\n const x = normalizedX * gridSize;\n\n return (\n \n {index + 1}\n \n );\n })}\n \n \n \n\n {/* Legend - Show number to label mapping for both axes */}\n

\n Journey Stages\n

\n {config.journeyStages.map((stage, index) => (\n \n \n {index + 1}\n \n {stage}\n

\n ))}\n

\n Risk Aversion Levels\n

\n {riskLabels.map((label, index) => {\n const value = config.riskScaleMin + index;\n return (\n \n \n {value}\n \n {label}\n

\n );\n })}\n

\n \n \n \n )}\n \n );\n}\n",[],[314,321,328,408],{"_103":417,"_95":418,"_152":419,"_154":329,"_155":137,"_156":420,"_158":159,"_105":421,"_100":32,"_161":182,"_163":422,"_164":22,"_165":-5,"_166":423,"_98":424},"aa875426-c537-11f0-9c84-42dde27851f2","Poll2DWidget.tsx","aa8754bc-c537-11f0-9c84-42dde27851f2",248,["D",1763550332330],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { submitResponse, getResponseForSessionAndStep } from \"../../utils/api.ts\";\nimport type { Poll2DWidgetConfig, Poll2DResponse } from \"../../../shared/types.ts\";\n\ninterface Poll2DWidgetProps {\n stepId: number;\n config: Poll2DWidgetConfig;\n sessionId: string;\n onSubmit?: () => void;\n}\n\nexport function Poll2DWidget({ stepId, config, sessionId, onSubmit }: Poll2DWidgetProps) {\n const [journeyStage, setJourneyStage] = useState(null);\n const [riskAversion, setRiskAversion] = useState(null);\n const [hasExistingResponse, setHasExistingResponse] = useState(false);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [lastSubmitted, setLastSubmitted] = useState(false);\n\n useEffect(() => {\n // Check if user already submitted\n getResponseForSessionAndStep(sessionId, stepId).then((response) => {\n if (response) {\n const data = JSON.parse(response.response_data) as Poll2DResponse;\n setJourneyStage(data.journeyStage);\n setRiskAversion(data.riskAversion);\n setHasExistingResponse(true);\n }\n }).catch(() => {\n // No previous response\n });\n }, [sessionId, stepId]);\n\n const handleSubmit = async () => {\n if (journeyStage === null || riskAversion === null) return;\n \n setLoading(true);\n setError(null);\n try {\n await submitResponse(sessionId, {\n step_id: stepId,\n response_data: {\n journeyStage,\n riskAversion,\n } as Poll2DResponse,\n });\n setHasExistingResponse(true);\n setLastSubmitted(true);\n onSubmit?.();\n \n // Reset the \"just submitted\" indicator after a short delay\n setTimeout(() => setLastSubmitted(false), 2000);\n } catch (err) {\n console.error(\"Failed to submit response:\", err);\n setError(\"Failed to submit response. Please try again.\");\n } finally {\n setLoading(false);\n }\n };\n\n const journeyPercentage = journeyStage !== null \n ? (journeyStage / (config.journeyStages.length - 1)) * 100 \n : 0;\n\n return (\n

\n {error && (\n

\n ⚠️\n {error}\n setError(null)}\n className=\"ml-auto text-red-500 hover:text-red-700\"\n aria-label=\"Dismiss error\"\n >\n ✕\n \n

\n )}\n\n {/* Journey Stage Question */}\n

{config.question1}

\n \n

\n {/* Timeline track */}\n

\n {/* Progress indicator */}\n {journeyStage !== null && (\n \n

\n )}\n

\n \n {/* Stage labels */}\n

\n {config.journeyStages.map((stage, index) => (\n setJourneyStage(index)}\n className=\"flex flex-col items-center gap-2 transition-all transform duration-200 cursor-pointer hover:scale-110\"\n >\n

\n {journeyStage === index && (\n

\n )}\n

\n \n {stage}\n \n \n ))}\n

\n\n {/* Risk Aversion Question */}\n

{config.question2}

\n \n

\n {Array.from({ length: config.riskScaleMax - config.riskScaleMin + 1 }, (_, i) => {\n const value = config.riskScaleMin + i;\n const label = config.riskLabels && config.riskLabels[i] \n ? config.riskLabels[i] \n : String(value);\n return (\n setRiskAversion(value)}\n className={`flex-1 py-4 px-2 rounded-xl border-2 transition-all transform duration-200 ${\n riskAversion === value\n ? \"border-last-pink bg-gradient-to-r from-last-pink/10 to-last-orange/10 shadow-md scale-[1.02]\"\n : \"border-gray-200/60 hover:border-last-pink/50 hover:bg-white/50 bg-white/30\"\n } cursor-pointer`}\n >\n

\n {value}\n

\n {label}\n

\n \n );\n })}\n

\n\n {lastSubmitted ? (\n

\n ✓ Response {hasExistingResponse ? \"updated\" : \"submitted\"}!\n

\n ) : (\n \n {loading ? (hasExistingResponse ? \"Updating...\" : \"Submitting...\") : (hasExistingResponse ? \"Update Answer\" : \"Submit Answer\")}\n \n )}\n

\n );\n}\n\n",[],[314,321,328,418],{"_103":426,"_95":427,"_152":428,"_154":329,"_155":137,"_156":429,"_158":159,"_105":430,"_100":220,"_161":182,"_163":431,"_164":22,"_165":-5,"_166":432,"_98":433},"1657b948-c524-11f0-8438-42dde27851f2","PollPresenter.tsx","8a09848c-c517-11f0-8427-42dde27851f2",238,["D",1763541923263],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useMemo } from \"https://esm.sh/react@18.2.0\";\nimport type { PollWidgetConfig, PollResponse } from \"../../../shared/types.ts\";\nimport type { Response } from \"../../../shared/types.ts\";\n\ninterface PollPresenterProps {\n config: PollWidgetConfig;\n responses: Response[];\n}\n\nexport function PollPresenter({ config, responses }: PollPresenterProps) {\n const results = useMemo(() => {\n const counts = new Array(config.options.length).fill(0);\n let total = 0;\n\n responses.forEach((response) => {\n try {\n const data = JSON.parse(response.response_data) as PollResponse;\n if (data.optionIndex >= 0 && data.optionIndex < config.options.length) {\n counts[data.optionIndex]++;\n total++;\n }\n } catch {\n // Invalid response data\n }\n });\n\n return { counts, total };\n }, [responses, config.options.length]);\n\n const maxCount = Math.max(...results.counts, 1);\n\n return (\n

{config.question}

\n \n

\n {results.total} {results.total === 1 ? \"response\" : \"responses\"}\n

\n\n {results.total === 0 ? (\n

📊

No responses yet

Waiting for participants to submit their answers...

\n ) : (\n

\n {config.options.map((option, index) => {\n const count = results.counts[index];\n const percentage = results.total > 0 ? (count / results.total) * 100 : 0;\n \n return (\n

\n {option}\n \n {count} ({percentage.toFixed(1)}%)\n \n

\n \n

\n );\n })}\n

\n )}\n \n );\n}\n\n",[],[314,321,328,427],{"_103":435,"_95":436,"_152":437,"_154":329,"_155":137,"_156":438,"_158":159,"_105":439,"_100":240,"_161":182,"_163":440,"_164":22,"_165":-5,"_166":441,"_98":442},"aad64004-c537-11f0-a382-42dde27851f2","PollWidget.tsx","8a232ff4-c517-11f0-87d0-42dde27851f2",255,["D",1763550332844],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { submitResponse, getResponseForSessionAndStep } from \"../../utils/api.ts\";\nimport type { PollWidgetConfig, PollResponse } from \"../../../shared/types.ts\";\n\ninterface PollWidgetProps {\n stepId: number;\n config: PollWidgetConfig;\n sessionId: string;\n onSubmit?: () => void;\n}\n\nexport function PollWidget({ stepId, config, sessionId, onSubmit }: PollWidgetProps) {\n const [selectedOption, setSelectedOption] = useState(null);\n const [hasExistingResponse, setHasExistingResponse] = useState(false);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [lastSubmitted, setLastSubmitted] = useState(false);\n\n useEffect(() => {\n // Check if user already submitted\n getResponseForSessionAndStep(sessionId, stepId).then((response) => {\n if (response) {\n const data = JSON.parse(response.response_data) as PollResponse;\n setSelectedOption(data.optionIndex);\n setHasExistingResponse(true);\n }\n }).catch(() => {\n // No previous response\n });\n }, [sessionId, stepId]);\n\n const handleSubmit = async () => {\n if (selectedOption === null) return;\n \n setLoading(true);\n setError(null);\n try {\n await submitResponse(sessionId, {\n step_id: stepId,\n response_data: {\n optionIndex: selectedOption,\n } as PollResponse,\n });\n setHasExistingResponse(true);\n setLastSubmitted(true);\n onSubmit?.();\n \n // Reset the \"just submitted\" indicator after a short delay\n setTimeout(() => setLastSubmitted(false), 2000);\n } catch (err) {\n console.error(\"Failed to submit response:\", err);\n setError(\"Failed to submit response. Please try again.\");\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

{config.question}

\n \n {error && (\n

\n ⚠️\n {error}\n setError(null)}\n className=\"ml-auto text-red-500 hover:text-red-700\"\n aria-label=\"Dismiss error\"\n >\n ✕\n \n

\n )}\n \n

\n {config.options.map((option, index) => (\n setSelectedOption(index)}\n className={`w-full p-4 text-left rounded-xl border-2 transition-all transform duration-200 ${\n selectedOption === index\n ? \"border-last-pink bg-gradient-to-r from-last-pink/10 to-last-orange/10 shadow-md scale-[1.02]\"\n : \"border-gray-200/60 hover:border-last-pink/50 hover:bg-white/50 bg-white/30\"\n } cursor-pointer`}\n >\n

\n {selectedOption === index && (\n

\n )}\n

\n \n {option}\n \n

\n \n ))}\n

\n\n {lastSubmitted ? (\n

\n ✓ Response {hasExistingResponse ? \"updated\" : \"submitted\"}!\n

\n ) : (\n \n {loading ? (hasExistingResponse ? \"Updating...\" : \"Submitting...\") : (hasExistingResponse ? \"Update Answer\" : \"Submit Answer\")}\n \n )}\n

\n );\n}\n\n",[],[314,321,328,436],{"_103":444,"_95":445,"_152":446,"_154":329,"_155":137,"_156":447,"_158":159,"_105":448,"_100":316,"_161":182,"_163":449,"_164":22,"_165":-5,"_166":450,"_98":451},"a2a402fc-c601-11f0-a197-42dde27851f2","PrototypeDemoWidget.tsx","c6d21406-c5f8-11f0-a597-42dde27851f2",342,["D",1763637077421],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createPortal } from \"https://esm.sh/react-dom@18.2.0\";\nimport type { PrototypeDemoWidgetConfig } from \"../../../shared/types.ts\";\n\ninterface PrototypeDemoWidgetProps {\n stepId?: number;\n config: PrototypeDemoWidgetConfig;\n sessionId?: string;\n isPresenter?: boolean;\n}\n\nexport function PrototypeDemoWidget({\n config,\n isPresenter = false,\n}: PrototypeDemoWidgetProps) {\n const [currentSlide, setCurrentSlide] = useState(0);\n const containerRef = useRef(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\n\n const slides = [\n { id: \"integration\", title: \"Website Integration\" },\n { id: \"chat\", title: \"AI Assistant\" },\n { id: \"callback\", title: \"Call-back Request\" },\n { id: \"process\", title: \"Process Overview\" },\n { id: \"letter\", title: \"Requirements Letter\" },\n { id: \"portal\", title: \"Claims Portal\" },\n ];\n\n const nextSlide = () => {\n setCurrentSlide((prev) => (prev + 1) % slides.length);\n };\n\n const prevSlide = () => {\n setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);\n };\n\n const toggleFullscreen = () => {\n if (!containerRef.current) return;\n\n if (!isFullscreen) {\n // Instead of browser fullscreen, just toggle our state\n setIsFullscreen(true);\n } else {\n setIsFullscreen(false);\n }\n };\n\n useEffect(() => {\n const handleEsc = (e: KeyboardEvent) => {\n if (e.key === \"Escape\" && isFullscreen) {\n setIsFullscreen(false);\n }\n };\n\n window.addEventListener(\"keydown\", handleEsc);\n \n // Prevent body scroll when fullscreen\n if (isFullscreen) {\n document.body.style.overflow = \"hidden\";\n } else {\n document.body.style.overflow = \"\";\n }\n \n return () => {\n window.removeEventListener(\"keydown\", handleEsc);\n document.body.style.overflow = \"\";\n };\n }, [isFullscreen]);\n\n const widgetContent = (\n \n {/* Mock Browser Header */}\n

\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 // 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",[],[314,321,328,445],{"_103":453,"_95":454,"_152":455,"_154":329,"_155":137,"_156":456,"_158":159,"_105":457,"_100":240,"_161":182,"_163":458,"_164":22,"_165":-5,"_166":459,"_98":460},"d756c6e8-c600-11f0-afb7-42dde27851f2","VibeCodingWidget.tsx","4a9217ee-c600-11f0-a12a-42dde27851f2",338,["D",1763636736344],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createPortal } from \"https://esm.sh/react-dom@18.2.0\";\nimport type { VibeCodingWidgetConfig } from \"../../../shared/types.ts\";\n\ninterface VibeCodingWidgetProps {\n stepId?: number;\n config: VibeCodingWidgetConfig;\n sessionId?: string;\n isPresenter?: boolean;\n}\n\nexport function VibeCodingWidget({\n config,\n isPresenter = false,\n}: VibeCodingWidgetProps) {\n const containerRef = useRef(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\n\n const toggleFullscreen = () => {\n if (!containerRef.current) return;\n\n if (!isFullscreen) {\n setIsFullscreen(true);\n } else {\n setIsFullscreen(false);\n }\n };\n\n useEffect(() => {\n const handleEsc = (e: KeyboardEvent) => {\n if (e.key === \"Escape\" && isFullscreen) {\n setIsFullscreen(false);\n }\n };\n\n window.addEventListener(\"keydown\", handleEsc);\n \n // Prevent body scroll when fullscreen\n if (isFullscreen) {\n document.body.style.overflow = \"hidden\";\n } else {\n document.body.style.overflow = \"\";\n }\n \n return () => {\n window.removeEventListener(\"keydown\", handleEsc);\n document.body.style.overflow = \"\";\n };\n }, [isFullscreen]);\n\n const widgetContent = (\n \n {/* Header with maximize button */}\n

\n Vibe Coding\n

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

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

\n What should we build?\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",[],[314,321,328,454],[314,321,328],{"_103":463,"_95":464,"_152":465,"_154":322,"_155":137,"_156":466,"_158":159,"_105":467,"_100":250,"_161":182,"_163":468,"_164":22,"_165":-5,"_166":469,"_98":470},"f35d215a-c77e-11f0-86f0-42dde27851f2","App.tsx","89dbaff8-c517-11f0-8427-42dde27851f2",473,["D",1763800851117],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { PresenterMode } from \"./PresenterMode.tsx\";\nimport { ParticipantMode } from \"./ParticipantMode.tsx\";\nimport { ManageMode } from \"./ManageMode.tsx\";\nimport { StepManagement } from \"./StepManagement.tsx\";\nimport { Layout } from \"./Layout.tsx\";\nimport { findSessionByEmail, setUserAttribute, getAllUserAttributes } from \"../utils/api.ts\";\nimport { getOrCreateSessionId, setSessionId, getEmail, setEmail, getName, setName } from \"../utils/session.ts\";\n\ndeclare global {\n interface Window {\n __PRESENTATION_ID__?: number;\n __MODE__?: string;\n }\n}\n\nexport function App() {\n const [presentationId, setPresentationId] = useState(null);\n const [mode, setMode] = useState<\"presenter\" | \"participant\" | \"manage\" | \"steps\">(\"participant\");\n const [sessionId, setSessionIdState] = useState(null);\n const [showLoginModal, setShowLoginModal] = useState(false);\n const [loginEmail, setLoginEmail] = useState(\"\");\n const [loginLoading, setLoginLoading] = useState(false);\n const [showSignUpModal, setShowSignUpModal] = useState(false);\n const [signUpEmail, setSignUpEmail] = useState(\"\");\n const [signUpLoading, setSignUpLoading] = useState(false);\n\n useEffect(() => {\n // Get presentation ID from window (injected by server)\n const id = window.__PRESENTATION_ID__;\n const modeFromWindow = window.__MODE__;\n \n if (id) {\n setPresentationId(id);\n }\n \n if (modeFromWindow === \"presenter\") {\n setMode(\"presenter\");\n }\n\n // Check URL for routing\n const path = window.location.pathname;\n const joinMatch = path.match(/^\\/join\\/(\\d+)$/);\n const presentMatch = path.match(/^\\/present\\/(\\d+)$/);\n const manageMatch = path.match(/^\\/manage$/);\n const stepsMatch = path.match(/^\\/manage\\/(\\d+)\\/steps$/);\n \n if (manageMatch) {\n setMode(\"manage\");\n setPresentationId(null);\n } else if (stepsMatch) {\n setMode(\"steps\");\n setPresentationId(parseInt(stepsMatch[1]));\n } else if (joinMatch) {\n setPresentationId(parseInt(joinMatch[1]));\n setMode(\"participant\");\n } else if (presentMatch) {\n setPresentationId(parseInt(presentMatch[1]));\n setMode(\"presenter\");\n } else if (!id && !joinMatch && !presentMatch) {\n // Default to manage mode if no specific route\n setMode(\"manage\");\n }\n\n // Initialize session\n const localSessionId = getOrCreateSessionId();\n setSessionIdState(localSessionId);\n }, []);\n\n const handleLogin = async () => {\n if (!loginEmail.trim()) return;\n\n setLoginLoading(true);\n try {\n const session = await findSessionByEmail(loginEmail.trim());\n if (session) {\n // Set the session ID locally\n setSessionId(session.id);\n setSessionIdState(session.id);\n \n // Update local storage with email\n setEmail(loginEmail.trim());\n \n // Load user attributes to get name\n try {\n const attributes = await getAllUserAttributes(session.id);\n if (attributes.name) {\n setName(attributes.name);\n }\n } catch {\n // Ignore attribute loading errors\n }\n \n setShowLoginModal(false);\n setLoginEmail(\"\");\n // Redirect to manage page to see their presentations\n window.location.href = \"/manage\";\n } else {\n alert(\"No session found for this email address.\");\n }\n } catch (err) {\n console.error(\"Failed to login:\", err);\n alert(\"Failed to login. Please try again.\");\n } finally {\n setLoginLoading(false);\n }\n };\n\n const handleSignUp = async () => {\n if (!signUpEmail.trim() || !sessionId) return;\n\n // Basic email validation\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n if (!emailRegex.test(signUpEmail.trim())) {\n alert(\"Please enter a valid email address\");\n return;\n }\n\n setSignUpLoading(true);\n try {\n // Save email to current session's user attributes\n await setUserAttribute(sessionId, \"email\", signUpEmail.trim());\n \n // Save to local storage\n setEmail(signUpEmail.trim());\n \n setShowSignUpModal(false);\n setSignUpEmail(\"\");\n alert(\"Email saved successfully! You can now use Login to retrieve this session later.\");\n } catch (err) {\n console.error(\"Failed to sign up:\", err);\n alert(\"Failed to save email. Please try again.\");\n } finally {\n setSignUpLoading(false);\n }\n };\n\n const renderContent = () => {\n if (mode === \"manage\") {\n return ;\n }\n\n if (mode === \"steps\" && presentationId) {\n return ;\n }\n\n if (!presentationId) {\n return (\n <>\n

\n setShowSignUpModal(true)}\n className=\"text-sm font-semibold glass-button-secondary px-4 py-2 rounded-lg hover:bg-white/80 transition-colors\"\n >\n Sign Up\n \n setShowLoginModal(true)}\n className=\"text-sm font-semibold glass-button-secondary px-4 py-2 rounded-lg hover:bg-white/80 transition-colors\"\n >\n Login\n \n

\n Last Conference\n

Live Talk

Interactive sessions made simple.

\n \n Go to Management\n \n

\n\n {/* Login Modal */}\n {showLoginModal && (\n

Login

\n Enter your email to retrieve your previous session.\n

\n \n Email *\n \n setLoginEmail(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !loginLoading && loginEmail.trim()) {\n handleLogin();\n }\n }}\n placeholder=\"your.email@example.com\"\n className=\"w-full px-4 py-3 glass-input text-gray-800 rounded-xl\"\n autoFocus\n />\n

\n \n {loginLoading ? \"Logging in...\" : \"Login\"}\n \n {\n setShowLoginModal(false);\n setLoginEmail(\"\");\n }}\n className=\"px-6 py-3 glass-button-secondary rounded-xl font-semibold transition-all\"\n >\n Cancel\n \n

\n )}\n\n {/* Sign Up Modal */}\n {showSignUpModal && (\n

Sign Up

\n Enter your email to save it to this session. You can use Login later to retrieve this session.\n

\n \n Email *\n \n setSignUpEmail(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !signUpLoading && signUpEmail.trim()) {\n handleSignUp();\n }\n }}\n placeholder=\"your.email@example.com\"\n className=\"w-full px-4 py-3 glass-input text-gray-800 rounded-xl\"\n autoFocus\n />\n

\n \n {signUpLoading ? \"Saving...\" : \"Sign Up\"}\n \n {\n setShowSignUpModal(false);\n setSignUpEmail(\"\");\n }}\n className=\"px-6 py-3 glass-button-secondary rounded-xl font-semibold transition-all\"\n >\n Cancel\n \n

\n )}\n \n );\n }\n\n return mode === \"presenter\" ? (\n \n ) : (\n \n );\n };\n\n return (\n \n {renderContent()}\n \n );\n}\n",[],[314,321,464],{"_103":472,"_95":473,"_152":474,"_154":322,"_155":137,"_156":475,"_158":159,"_105":476,"_100":32,"_161":182,"_163":477,"_164":22,"_165":-5,"_166":478,"_98":479},"22298f72-c523-11f0-852e-42dde27851f2","Layout.tsx","22298ffe-c523-11f0-852e-42dde27851f2",228,["D",1763541513598],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { ReactNode } from \"https://esm.sh/react@18.2.0\";\n\ninterface LayoutProps {\n children: ReactNode;\n}\n\nexport function Layout({ children }: LayoutProps) {\n return (\n

\n {/* Liquid Background */}\n

\n\n {/* Content */}\n

\n {children}\n

\n );\n}\n\n",[],[314,321,473],{"_103":481,"_95":482,"_152":483,"_154":322,"_155":137,"_156":484,"_158":159,"_105":485,"_100":412,"_161":182,"_163":486,"_164":22,"_165":-5,"_166":487,"_98":488},"f3838d5e-c77e-11f0-9b3a-42dde27851f2","ManageMode.tsx","67cc70ac-c51a-11f0-b964-42dde27851f2",477,["D",1763800851366],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { getPresentations, createPresentation, updatePresentation, deletePresentation, deleteAllPresentations, findSessionByEmail, setUserAttribute, getAllUserAttributes } from \"../utils/api.ts\";\nimport { getOrCreateSessionId, setSessionId, getEmail, setEmail, getName, setName } from \"../utils/session.ts\";\nimport type { Presentation } from \"../../shared/types.ts\";\n\nexport function ManageMode() {\n const [presentations, setPresentations] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [showCreateForm, setShowCreateForm] = useState(false);\n const [deletingId, setDeletingId] = useState(null);\n const [deletingAll, setDeletingAll] = useState(false);\n const [sessionId, setSessionIdState] = useState(null);\n const [showLoginModal, setShowLoginModal] = useState(false);\n const [loginEmail, setLoginEmail] = useState(\"\");\n const [loginLoading, setLoginLoading] = useState(false);\n const [showSignUpModal, setShowSignUpModal] = useState(false);\n const [signUpEmail, setSignUpEmail] = useState(\"\");\n const [signUpLoading, setSignUpLoading] = useState(false);\n\n useEffect(() => {\n // Ensure session_id is set\n const localSessionId = getOrCreateSessionId();\n setSessionIdState(localSessionId);\n loadPresentations();\n }, []);\n\n const handleLogin = async () => {\n if (!loginEmail.trim()) return;\n\n setLoginLoading(true);\n try {\n const session = await findSessionByEmail(loginEmail.trim());\n if (session) {\n // Set the session ID locally\n setSessionId(session.id);\n setSessionIdState(session.id);\n \n // Update local storage with email\n setEmail(loginEmail.trim());\n \n // Load user attributes to get name\n try {\n const attributes = await getAllUserAttributes(session.id);\n if (attributes.name) {\n setName(attributes.name);\n }\n } catch {\n // Ignore attribute loading errors\n }\n \n setShowLoginModal(false);\n setLoginEmail(\"\");\n await loadPresentations();\n } else {\n alert(\"No session found for this email address.\");\n }\n } catch (err) {\n console.error(\"Failed to login:\", err);\n alert(\"Failed to login. Please try again.\");\n } finally {\n setLoginLoading(false);\n }\n };\n\n const handleSignUp = async () => {\n if (!signUpEmail.trim() || !sessionId) return;\n\n // Basic email validation\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n if (!emailRegex.test(signUpEmail.trim())) {\n alert(\"Please enter a valid email address\");\n return;\n }\n\n setSignUpLoading(true);\n try {\n // Save email to current session's user attributes\n await setUserAttribute(sessionId, \"email\", signUpEmail.trim());\n \n // Save to local storage\n setEmail(signUpEmail.trim());\n \n setShowSignUpModal(false);\n setSignUpEmail(\"\");\n alert(\"Email saved successfully! You can now use Login to retrieve this session later.\");\n } catch (err) {\n console.error(\"Failed to sign up:\", err);\n alert(\"Failed to save email. Please try again.\");\n } finally {\n setSignUpLoading(false);\n }\n };\n\n const loadPresentations = async () => {\n try {\n setError(null);\n const pres = await getPresentations();\n setPresentations(pres);\n } catch (err) {\n console.error(\"Failed to load presentations:\", err);\n setError(\"Failed to load presentations. Please refresh the page.\");\n } finally {\n setLoading(false);\n }\n };\n\n const handleCreatePresentation = async (data: { name: string; presenter: string; talk_deck_link?: string }) => {\n try {\n setError(null);\n await createPresentation(data);\n setShowCreateForm(false);\n await loadPresentations();\n } catch (err) {\n console.error(\"Failed to create presentation:\", err);\n setError(\"Failed to create presentation. Please try again.\");\n }\n };\n\n const handleDeletePresentation = async (id: number) => {\n if (!confirm(\"Are you sure you want to delete this presentation? This action cannot be undone.\")) {\n return;\n }\n \n try {\n setError(null);\n setDeletingId(id);\n await deletePresentation(id);\n await loadPresentations();\n } catch (err) {\n console.error(\"Failed to delete presentation:\", err);\n setError(\"Failed to delete presentation. Please try again.\");\n } finally {\n setDeletingId(null);\n }\n };\n\n const handleDeleteAllPresentations = async () => {\n if (!confirm(\"Are you sure you want to delete ALL your presentations? This action cannot be undone.\")) {\n return;\n }\n \n try {\n setError(null);\n setDeletingAll(true);\n await deleteAllPresentations();\n await loadPresentations();\n } catch (err) {\n console.error(\"Failed to delete all presentations:\", err);\n setError(\"Failed to delete all presentations. Please try again.\");\n } finally {\n setDeletingAll(false);\n }\n };\n\n const handleUpdatePresentation = async (id: number, data: { name: string; presenter: string; talk_deck_link?: string }) => {\n try {\n setError(null);\n await updatePresentation(id, data);\n await loadPresentations();\n } catch (err) {\n console.error(\"Failed to update presentation:\", err);\n setError(\"Failed to update presentation. Please try again.\");\n throw err;\n }\n };\n\n if (loading) {\n return (\n

Loading presentations...

\n );\n }\n\n return (\n

Live Talk

Presentation Management

\n Last Conference\n

\n\n

\n {error && (\n

\n ⚠️\n {error}\n setError(null)}\n className=\"ml-auto text-red-500 hover:text-red-700\"\n aria-label=\"Dismiss error\"\n >\n ✕\n \n

\n )}\n\n

Presentations

\n {presentations.length > 0 && (\n \n {deletingAll ? \"Deleting...\" : \"Delete All\"}\n \n )}\n setShowCreateForm(!showCreateForm)}\n className=\"glass-button px-6 py-2 rounded-xl font-bold shadow-lg hover:shadow-xl transition-all\"\n >\n {showCreateForm ? \"Cancel\" : \"+ New Presentation\"}\n \n

\n\n {showCreateForm && (\n

\n setShowCreateForm(false)}\n />\n

\n )}\n\n {presentations.length === 0 ? (\n

📊

No presentations yet

Create your first presentation to get started

\n ) : (\n

\n {presentations.map((pres) => (\n \n ))}\n

\n )}\n

\n\n {/* Login Modal */}\n {showLoginModal && (\n

Login

\n Enter your email to retrieve your previous session.\n

\n )}\n\n {/* Sign Up Modal */}\n {showSignUpModal && (\n

Sign Up

\n Enter your email to save it to this session. You can use Login later to retrieve this session.\n

\n )}\n

\n );\n}\n\ninterface PresentationCardProps {\n presentation: Presentation;\n onUpdate: (id: number, data: { name: string; presenter: string; talk_deck_link?: string }) => Promise;\n onDelete: (id: number) => void;\n deleting: boolean;\n}\n\nfunction PresentationCard({ presentation, onUpdate, onDelete, deleting }: PresentationCardProps) {\n const [isEditing, setIsEditing] = useState(false);\n const [name, setName] = useState(presentation.name);\n const [presenter, setPresenter] = useState(presentation.presenter);\n const [talkDeckLink, setTalkDeckLink] = useState(presentation.talk_deck_link || \"\");\n const [saving, setSaving] = useState(false);\n\n // Sync local state when presentation prop changes\n useEffect(() => {\n if (!isEditing) {\n setName(presentation.name);\n setPresenter(presentation.presenter);\n setTalkDeckLink(presentation.talk_deck_link || \"\");\n }\n }, [presentation, isEditing]);\n\n const handleSave = async () => {\n if (!name.trim() || !presenter.trim()) {\n return;\n }\n\n setSaving(true);\n try {\n await onUpdate(presentation.id, {\n name: name.trim(),\n presenter: presenter.trim(),\n talk_deck_link: talkDeckLink.trim() || undefined,\n });\n setIsEditing(false);\n } catch (err) {\n // Error is handled by parent component\n } finally {\n setSaving(false);\n }\n };\n\n const handleCancel = () => {\n setName(presentation.name);\n setPresenter(presentation.presenter);\n setTalkDeckLink(presentation.talk_deck_link || \"\");\n setIsEditing(false);\n };\n\n return (\n

\n {isEditing ? (\n

\n \n Presentation Name *\n \n setName(e.target.value)}\n className=\"w-full px-3 py-2 glass-input text-sm\"\n placeholder=\"e.g., Introduction to React\"\n />\n

\n \n Presenter Name *\n \n setPresenter(e.target.value)}\n className=\"w-full px-3 py-2 glass-input text-sm\"\n placeholder=\"e.g., Jane Doe\"\n />\n

\n \n Talk Deck Link (optional)\n \n setTalkDeckLink(e.target.value)}\n className=\"w-full px-3 py-2 glass-input text-sm\"\n placeholder=\"https://example.com/slides\"\n />\n

\n ) : (\n <>\n

{presentation.name}

by {presentation.presenter}

\n \n )}\n

\n \n {!isEditing && presentation.talk_deck_link && (\n \n 📎 View Slides\n \n )}\n\n

\n {isEditing ? (\n

\n \n {saving ? \"Saving...\" : \"Save\"}\n \n \n Cancel\n \n

\n ) : (\n <>\n

\n \n Manage Steps\n \n \n Present\n \n

\n setIsEditing(true)}\n className=\"flex-1 text-last-pink hover:text-last-orange hover:bg-pink-50 px-4 py-2 rounded-lg font-medium text-sm transition-colors\"\n >\n Edit\n \n onDelete(presentation.id)}\n disabled={deleting}\n className=\"flex-1 text-red-500 hover:text-red-700 hover:bg-red-50 px-4 py-2 rounded-lg font-medium text-sm transition-colors disabled:opacity-50\"\n >\n {deleting ? \"Deleting...\" : \"Delete\"}\n \n

\n \n )}\n

\n );\n}\n\ninterface PresentationFormProps {\n onSubmit: (data: { name: string; presenter: string; talk_deck_link?: string }) => Promise;\n onCancel: () => void;\n}\n\nfunction PresentationForm({ onSubmit, onCancel }: PresentationFormProps) {\n const [name, setName] = useState(\"\");\n const [presenter, setPresenter] = useState(\"\");\n const [talkDeckLink, setTalkDeckLink] = useState(\"\");\n const [loading, setLoading] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n if (!name.trim() || !presenter.trim()) {\n return;\n }\n\n setLoading(true);\n try {\n await onSubmit({\n name: name.trim(),\n presenter: presenter.trim(),\n talk_deck_link: talkDeckLink.trim() || undefined,\n });\n setName(\"\");\n setPresenter(\"\");\n setTalkDeckLink(\"\");\n } finally {\n setLoading(false);\n }\n };\n\n return (\n

Create New Presentation

\n \n

\n \n Presentation Name *\n \n setName(e.target.value)}\n required\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Introduction to React\"\n />\n

\n\n

\n \n Presenter Name *\n \n setPresenter(e.target.value)}\n required\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Jane Doe\"\n />\n

\n\n

\n \n Talk Deck Link (optional)\n \n setTalkDeckLink(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"https://example.com/slides\"\n />\n

\n\n

\n \n {loading ? \"Creating...\" : \"Create Presentation\"}\n \n \n Cancel\n \n

\n );\n}\n\n",[],[314,321,482],{"_103":490,"_95":491,"_152":492,"_154":322,"_155":137,"_156":493,"_158":159,"_105":494,"_100":211,"_161":182,"_163":495,"_164":22,"_165":-5,"_166":496,"_98":497},"f37c77f8-c77e-11f0-a0ee-42dde27851f2","ParticipantMode.tsx","89f89208-c517-11f0-8427-42dde27851f2",476,["D",1763800851323],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport {\n getOrCreateSession,\n getActiveStep,\n getResponsesForStep,\n findSessionByEmail,\n} from \"../utils/api.ts\";\nimport { getOrCreateSessionId, setSessionId, getEmail, setEmail, getName, setName } from \"../utils/session.ts\";\nimport { PollWidget } from \"./widgets/PollWidget.tsx\";\nimport { ChatWidget } from \"./widgets/ChatWidget.tsx\";\nimport { Poll2DWidget } from \"./widgets/Poll2DWidget.tsx\";\nimport { MultivoteWidget } from \"./widgets/MultivoteWidget.tsx\";\nimport { PrototypeDemoWidget } from \"./widgets/PrototypeDemoWidget.tsx\";\nimport { VibeCodingWidget } from \"./widgets/VibeCodingWidget.tsx\";\nimport { BoxesAndLinesWidget } from \"./widgets/BoxesAndLinesWidget.tsx\";\nimport { EmailCollectionWidget } from \"./widgets/EmailCollectionWidget.tsx\";\nimport type { Step, Presentation } from \"../../shared/types.ts\";\nimport type {\n PollWidgetConfig,\n ChatWidgetConfig,\n Poll2DWidgetConfig,\n MultivoteWidgetConfig,\n PrototypeDemoWidgetConfig,\n VibeCodingWidgetConfig,\n BoxesAndLinesWidgetConfig,\n EmailCollectionWidgetConfig,\n} from \"../../shared/types.ts\";\n\ninterface ParticipantModeProps {\n presentationId: number;\n}\n\nexport function ParticipantMode({ presentationId }: ParticipantModeProps) {\n const [sessionId, setSessionIdState] = useState(null);\n const [activeStep, setActiveStep] = useState(null);\n const [presentation, setPresentation] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [isMobile, setIsMobile] = useState(false);\n const [showLoginModal, setShowLoginModal] = useState(false);\n const [loginEmail, setLoginEmail] = useState(\"\");\n const [loginLoading, setLoginLoading] = useState(false);\n\n useEffect(() => {\n // Initialize session\n const localSessionId = getOrCreateSessionId();\n\n getOrCreateSession(localSessionId, presentationId)\n .then(async (session) => {\n setSessionIdState(session.id);\n // Also load presentation info\n try {\n const pres = await fetch(`/api/presentations/${presentationId}`).then(\n (r) => r.json()\n );\n setPresentation(pres);\n } catch {\n // Ignore presentation load errors\n }\n return loadActiveStep();\n })\n .catch((err) => {\n console.error(\"Failed to initialize:\", err);\n setError(\"Failed to join presentation\");\n })\n .finally(() => {\n setLoading(false);\n });\n }, [presentationId]);\n\n const handleLogin = async () => {\n if (!loginEmail.trim()) return;\n\n setLoginLoading(true);\n try {\n const session = await findSessionByEmail(loginEmail.trim());\n if (session) {\n // Set the session ID locally\n setSessionId(session.id);\n setSessionIdState(session.id);\n \n // Update local storage with email\n setEmail(loginEmail.trim());\n \n // Reload session for this presentation\n const updatedSession = await getOrCreateSession(session.id, presentationId);\n setSessionIdState(updatedSession.id);\n \n // Load user attributes to get name\n try {\n const { getAllUserAttributes } = await import(\"../utils/api.ts\");\n const attributes = await getAllUserAttributes(updatedSession.id);\n if (attributes.name) {\n setName(attributes.name);\n }\n } catch {\n // Ignore attribute loading errors\n }\n \n setShowLoginModal(false);\n setLoginEmail(\"\");\n await loadActiveStep();\n } else {\n alert(\"No session found for this email address.\");\n }\n } catch (err) {\n console.error(\"Failed to login:\", err);\n alert(\"Failed to login. Please try again.\");\n } finally {\n setLoginLoading(false);\n }\n };\n\n useEffect(() => {\n // Poll for active step changes\n if (!sessionId) return;\n\n const interval = setInterval(() => {\n loadActiveStep();\n }, 2000); // Poll every 2 seconds\n\n return () => clearInterval(interval);\n }, [sessionId, presentationId]);\n\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n const checkMobile = () => {\n setIsMobile(window.innerWidth < 768 || window.innerHeight < 800);\n };\n checkMobile();\n window.addEventListener(\"resize\", checkMobile);\n return () => window.removeEventListener(\"resize\", checkMobile);\n }, []);\n\n const loadActiveStep = async () => {\n try {\n const step = await getActiveStep(presentationId);\n setActiveStep(step);\n if (step) {\n setError(null);\n }\n } catch (err) {\n console.error(\"Failed to load active step:\", err);\n // Don't set error here - it's expected when no step is active\n }\n };\n\n if (loading) {\n return (\n

Joining presentation...

\n );\n }\n\n if (error) {\n return (\n

Unable to Join

{error}

\n );\n }\n\n if (!activeStep || !sessionId) {\n return (\n

⏳

\n Waiting for presenter...\n

\n The session will start automatically.\n

\n );\n }\n\n // Render widget based on type\n const widgetConfig = JSON.parse(activeStep.widget_config);\n\n const isPrototypeDemo = activeStep?.widget_type === \"prototype_demo\";\n const isVibeCoding = activeStep?.widget_type === \"vibe_coding\";\n const isBoxesAndLines = activeStep?.widget_type === \"boxes_and_lines\";\n const isFullWidthWidget = isPrototypeDemo || isVibeCoding;\n\n return (\n \n \n {presentation && (!isBoxesAndLines || !isMobile) && (\n \n {sessionId && presentation.creator_session_id === sessionId && (\n \n ← Back\n \n )}\n

\n Last Conference\n

\n {presentation.name}\n

\n by {presentation.presenter}\n

\n )}\n\n \n {activeStep.widget_type === \"poll\" && (\n \n )}\n\n {activeStep.widget_type === \"chat\" && (\n \n )}\n\n {activeStep.widget_type === \"poll2d\" && (\n \n )}\n\n {activeStep.widget_type === \"multivote\" && (\n \n )}\n\n {activeStep.widget_type === \"prototype_demo\" && (\n \n )}\n\n {activeStep.widget_type === \"vibe_coding\" && (\n \n )}\n\n {activeStep.widget_type === \"boxes_and_lines\" && (\n \n )}\n\n {activeStep.widget_type === \"connect\" && (\n \n )}\n \n \n\n {/* Login Modal */}\n {showLoginModal && (\n

Login

\n Enter your email to retrieve your previous session.\n

\n )}\n \n );\n}\n",[],[314,321,491],{"_103":499,"_95":500,"_152":501,"_154":322,"_155":137,"_156":502,"_158":159,"_105":503,"_100":504,"_161":182,"_163":505,"_164":22,"_165":-5,"_166":506,"_98":507},"f39bb352-c77e-11f0-9716-42dde27851f2","PresenterMode.tsx","89fce524-c517-11f0-b0f3-42dde27851f2",479,["D",1763800851517],38,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport {\n getPresentation,\n getSteps,\n activateStep,\n getResponsesForStep,\n getOrCreateSession,\n updateStepName,\n findSessionByEmail,\n setUserAttribute,\n getAllUserAttributes,\n} from \"../utils/api.ts\";\nimport { getOrCreateSessionId, setSessionId, getEmail, setEmail, getName, setName } from \"../utils/session.ts\";\nimport { QRCode } from \"./QRCode.tsx\";\nimport { PollPresenter } from \"./widgets/PollPresenter.tsx\";\nimport { ChatPresenter } from \"./widgets/ChatPresenter.tsx\";\nimport { Poll2DPresenter } from \"./widgets/Poll2DPresenter.tsx\";\nimport { MultivotePresenter } from \"./widgets/MultivotePresenter.tsx\";\nimport { PrototypeDemoWidget } from \"./widgets/PrototypeDemoWidget.tsx\";\nimport { VibeCodingWidget } from \"./widgets/VibeCodingWidget.tsx\";\nimport { BoxesAndLinesPresenter } from \"./widgets/BoxesAndLinesPresenter.tsx\";\nimport { EmailCollectionPresenter } from \"./widgets/EmailCollectionPresenter.tsx\";\nimport type { Presentation, Step, Response } from \"../../shared/types.ts\";\nimport type {\n PollWidgetConfig,\n ChatWidgetConfig,\n Poll2DWidgetConfig,\n MultivoteWidgetConfig,\n PrototypeDemoWidgetConfig,\n VibeCodingWidgetConfig,\n BoxesAndLinesWidgetConfig,\n EmailCollectionWidgetConfig,\n} from \"../../shared/types.ts\";\n\ninterface PresenterModeProps {\n presentationId: number;\n}\n\nexport function PresenterMode({ presentationId }: PresenterModeProps) {\n const [presentation, setPresentation] = useState(null);\n const [steps, setSteps] = useState([]);\n const [activeStep, setActiveStep] = useState(null);\n const [responses, setResponses] = useState([]);\n const [sessionId, setSessionIdState] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [editingStepId, setEditingStepId] = useState(null);\n const [editingStepName, setEditingStepName] = useState(\"\");\n const [viewportHeight, setViewportHeight] = useState(\n typeof window !== \"undefined\" ? window.innerHeight : 800\n );\n const [showLoginModal, setShowLoginModal] = useState(false);\n const [loginEmail, setLoginEmail] = useState(\"\");\n const [loginLoading, setLoginLoading] = useState(false);\n const [showSignUpModal, setShowSignUpModal] = useState(false);\n const [signUpEmail, setSignUpEmail] = useState(\"\");\n const [signUpLoading, setSignUpLoading] = useState(false);\n\n useEffect(() => {\n if (typeof window === \"undefined\") return;\n\n const handleResize = () => {\n setViewportHeight(window.innerHeight);\n };\n\n window.addEventListener(\"resize\", handleResize);\n setViewportHeight(window.innerHeight);\n\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n // Detect if we're in a small embedded view\n const isEmbeddedView = viewportHeight < 750;\n\n useEffect(() => {\n // Initialize session for presenter\n const localSessionId = getOrCreateSessionId();\n getOrCreateSession(localSessionId, presentationId)\n .then((session) => {\n setSessionIdState(session.id);\n return loadPresentation();\n })\n .catch((err) => {\n console.error(\"Failed to initialize session:\", err);\n setError(\"Failed to initialize session\");\n setLoading(false);\n });\n }, [presentationId]);\n\n const handleLogin = async () => {\n if (!loginEmail.trim()) return;\n\n setLoginLoading(true);\n try {\n const session = await findSessionByEmail(loginEmail.trim());\n if (session) {\n // Set the session ID locally\n setSessionId(session.id);\n setSessionIdState(session.id);\n \n // Update local storage with email\n setEmail(loginEmail.trim());\n \n // Reload session for this presentation\n const updatedSession = await getOrCreateSession(session.id, presentationId);\n setSessionIdState(updatedSession.id);\n \n // Load user attributes to get name\n try {\n const attributes = await getAllUserAttributes(updatedSession.id);\n if (attributes.name) {\n setName(attributes.name);\n }\n } catch {\n // Ignore attribute loading errors\n }\n \n setShowLoginModal(false);\n setLoginEmail(\"\");\n await loadPresentation();\n } else {\n alert(\"No session found for this email address.\");\n }\n } catch (err) {\n console.error(\"Failed to login:\", err);\n alert(\"Failed to login. Please try again.\");\n } finally {\n setLoginLoading(false);\n }\n };\n\n const handleSignUp = async () => {\n if (!signUpEmail.trim() || !sessionId) return;\n\n // Basic email validation\n const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n if (!emailRegex.test(signUpEmail.trim())) {\n alert(\"Please enter a valid email address\");\n return;\n }\n\n setSignUpLoading(true);\n try {\n // Save email to current session's user attributes\n await setUserAttribute(sessionId, \"email\", signUpEmail.trim());\n \n // Save to local storage\n setEmail(signUpEmail.trim());\n \n setShowSignUpModal(false);\n setSignUpEmail(\"\");\n alert(\"Email saved successfully! You can now use Login to retrieve this session later.\");\n } catch (err) {\n console.error(\"Failed to sign up:\", err);\n alert(\"Failed to save email. Please try again.\");\n } finally {\n setSignUpLoading(false);\n }\n };\n\n useEffect(() => {\n if (presentation) {\n loadSteps();\n }\n }, [presentation]);\n\n useEffect(() => {\n if (activeStep) {\n loadResponses();\n // Poll for new responses\n const interval = setInterval(() => {\n loadResponses();\n }, 2000);\n return () => clearInterval(interval);\n }\n }, [activeStep]);\n\n const loadPresentation = async () => {\n try {\n setError(null);\n const pres = await getPresentation(presentationId);\n setPresentation(pres);\n } catch (err) {\n console.error(\"Failed to load presentation:\", err);\n setError(\"Failed to load presentation. Please refresh the page.\");\n } finally {\n setLoading(false);\n }\n };\n\n const loadSteps = async () => {\n try {\n const stepList = await getSteps(presentationId);\n setSteps(stepList);\n const active = stepList.find((s) => s.is_active === 1);\n if (active) {\n setActiveStep(active);\n }\n } catch (err) {\n console.error(\"Failed to load steps:\", err);\n }\n };\n\n const loadResponses = async () => {\n if (!activeStep) return;\n try {\n const resps = await getResponsesForStep(activeStep.id);\n setResponses(resps);\n } catch (err) {\n console.error(\"Failed to load responses:\", err);\n }\n };\n\n const handleActivateStep = async (step: Step) => {\n try {\n setError(null);\n await activateStep(step.id);\n setActiveStep(step);\n await loadResponses();\n } catch (err) {\n console.error(\"Failed to activate step:\", err);\n setError(\"Failed to activate step. Please try again.\");\n }\n };\n\n const handleStartEditName = (step: Step) => {\n setEditingStepId(step.id);\n setEditingStepName(step.name || \"\");\n };\n\n const handleSaveName = async (stepId: number) => {\n try {\n setError(null);\n const updatedStep = await updateStepName(\n stepId,\n editingStepName.trim() || null\n );\n // Update the step in the steps array\n setSteps(steps.map((s) => (s.id === stepId ? updatedStep : s)));\n setEditingStepId(null);\n setEditingStepName(\"\");\n } catch (err) {\n console.error(\"Failed to update step name:\", err);\n setError(\"Failed to update step name. Please try again.\");\n }\n };\n\n const handleCancelEdit = () => {\n setEditingStepId(null);\n setEditingStepName(\"\");\n };\n\n if (loading) {\n return (\n

Loading presentation...

\n );\n }\n\n if (!presentation) {\n return (\n

Presentation not found

\n );\n }\n\n const joinUrl =\n typeof window !== \"undefined\"\n ? `${window.location.origin}/join/${presentationId}`\n : \"\";\n\n const widgetConfig = activeStep ? JSON.parse(activeStep.widget_config) : null;\n\n const getNextStep = () => {\n if (!activeStep) return null;\n const currentStepNumber = activeStep.step_number;\n return steps.find((s) => s.step_number === currentStepNumber + 1) || null;\n };\n\n const handleNextStep = async () => {\n const nextStep = getNextStep();\n if (nextStep) {\n await handleActivateStep(nextStep);\n }\n };\n\n const nextStep = getNextStep();\n\n return (\n

\n {!isEmbeddedView && (\n

\n {presentation.name}\n

\n by {presentation.presenter}\n

\n setShowSignUpModal(true)}\n className=\"text-sm font-semibold glass-button-secondary px-4 py-2 rounded-lg hover:bg-white/80 transition-all opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto\"\n >\n Sign Up\n \n setShowLoginModal(true)}\n className=\"text-sm font-semibold glass-button-secondary px-4 py-2 rounded-lg hover:bg-white/80 transition-all opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto\"\n >\n Login\n \n \n Manage\n \n

\n Last Conference\n

\n )}\n\n \n {error && (\n

\n ⚠️\n {error}\n setError(null)}\n className=\"ml-auto text-red-500 hover:text-red-700\"\n aria-label=\"Dismiss error\"\n >\n ✕\n \n

\n )}\n

\n {/* Left sidebar - QR Code and Steps */}\n

\n {/* QR Code */}\n {activeStep && (\n

\n Join URL\n

\n \n

\n \n {joinUrl.replace(/^https?:\\/\\//, \"\")}\n \n

\n )}\n\n {/* Steps */}\n

\n Steps\n

\n {steps.length === 0 ? (\n

\n No steps yet. Create steps to begin your presentation.\n

\n ) : (\n steps.map((step) => (\n \n {editingStepId === step.id ? (\n

\n setEditingStepName(e.target.value)}\n onBlur={() => handleSaveName(step.id)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") {\n handleSaveName(step.id);\n } else if (e.key === \"Escape\") {\n handleCancelEdit();\n }\n }}\n autoFocus\n className=\"w-full px-2 py-1 border border-gray-300 rounded text-sm font-semibold text-gray-800 focus:outline-none focus:ring-2 focus:ring-last-pink\"\n placeholder={`Step ${step.step_number}`}\n />\n

\n Press Enter to save, Esc to cancel\n

\n ) : (\n handleActivateStep(step)}\n onDoubleClick={(e) => {\n e.stopPropagation();\n handleStartEditName(step);\n }}\n className=\"w-full text-left p-3 group\"\n >\n

\n \n {step.name || `Step ${step.step_number}`}\n \n \n Double-click to edit\n \n

\n \n {step.widget_type}\n

\n \n )}\n

\n ))\n )}\n

\n\n {/* Main content - Widget */}\n

\n {/* Widget Display */}\n {activeStep && widgetConfig && (\n

\n {activeStep.widget_type === \"poll\" && (\n \n )}\n {activeStep.widget_type === \"chat\" && sessionId && (\n \n )}\n {activeStep.widget_type === \"poll2d\" && (\n \n )}\n {activeStep.widget_type === \"multivote\" && (\n \n )}\n {activeStep.widget_type === \"prototype_demo\" && (\n \n )}\n {activeStep.widget_type === \"vibe_coding\" && (\n \n )}\n {activeStep.widget_type === \"boxes_and_lines\" && (\n \n )}\n {activeStep.widget_type === \"connect\" && (\n \n )}\n

\n {nextStep && (\n

\n \n Next Step →\n \n

\n )}\n

\n )}\n\n {!activeStep && (\n

\n Select a step from the sidebar to begin presenting\n

\n )}\n

\n \n\n {/* Login Modal */}\n {showLoginModal && (\n

Login

\n Enter your email to retrieve your previous session.\n

\n )}\n\n {/* Sign Up Modal */}\n {showSignUpModal && (\n

Sign Up

\n Enter your email to save it to this session. You can use Login later to retrieve this session.\n

\n )}\n \n );\n}\n",[],[314,321,500],{"_103":509,"_95":510,"_152":511,"_154":322,"_155":137,"_156":512,"_158":159,"_105":513,"_100":220,"_161":182,"_163":514,"_164":22,"_165":-5,"_166":515,"_98":516},"a869903c-c523-11f0-8481-42dde27851f2","QRCode.tsx","8b2152be-c517-11f0-8508-42dde27851f2",235,["D",1763541738840],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport QRCodeLib from \"https://esm.sh/qrcode@1.5.3\";\n\ninterface QRCodeProps {\n url: string;\n size?: number;\n}\n\nexport function QRCode({ url, size = 256 }: QRCodeProps) {\n const canvasRef = useRef(null);\n const [error, setError] = useState(false);\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n\n setLoading(true);\n setError(false);\n\n // Generate QR code directly on canvas using local library\n QRCodeLib.toCanvas(canvas, url, {\n width: size,\n margin: 2,\n color: {\n dark: \"#000000\",\n light: \"#FFFFFF\",\n },\n })\n .then(() => {\n setError(false);\n setLoading(false);\n })\n .catch((err) => {\n console.error(\"Failed to generate QR code:\", err);\n setError(true);\n setLoading(false);\n const ctx = canvas.getContext(\"2d\");\n if (ctx) {\n ctx.fillStyle = \"#f3f4f6\";\n ctx.fillRect(0, 0, size, size);\n ctx.fillStyle = \"#6b7280\";\n ctx.font = \"16px sans-serif\";\n ctx.textAlign = \"center\";\n ctx.fillText(\"QR Code\", size / 2, size / 2 - 10);\n ctx.fillText(\"Error\", size / 2, size / 2 + 10);\n }\n });\n }, [url, size]);\n\n return (\n

\n );\n}\n\n",[],[314,321,510],{"_103":518,"_95":519,"_152":520,"_154":322,"_155":137,"_156":521,"_158":159,"_105":522,"_100":523,"_161":182,"_163":524,"_164":22,"_165":-5,"_166":525,"_98":526},"f378b05a-c77e-11f0-86f0-42dde27851f2","StepManagement.tsx","7f8de068-c51a-11f0-b0ed-42dde27851f2",475,["D",1763800851300],25,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport {\n getPresentation,\n getSteps,\n createStep,\n updateStep,\n deleteStep as deleteStepAPI,\n reorderSteps as reorderStepsAPI,\n} from \"../utils/api.ts\";\nimport type {\n Presentation,\n Step,\n PollWidgetConfig,\n ChatWidgetConfig,\n Poll2DWidgetConfig,\n MultivoteWidgetConfig,\n PrototypeDemoWidgetConfig,\n VibeCodingWidgetConfig,\n BoxesAndLinesWidgetConfig,\n EmailCollectionWidgetConfig,\n} from \"../../shared/types.ts\";\n\ninterface StepManagementProps {\n presentationId: number;\n}\n\nexport function StepManagement({ presentationId }: StepManagementProps) {\n const [presentation, setPresentation] = useState(null);\n const [steps, setSteps] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [editingStep, setEditingStep] = useState(null);\n const [showCreateForm, setShowCreateForm] = useState(false);\n\n useEffect(() => {\n loadData();\n }, [presentationId]);\n\n const loadData = async () => {\n try {\n setError(null);\n const [pres, stepList] = await Promise.all([\n getPresentation(presentationId),\n getSteps(presentationId),\n ]);\n setPresentation(pres);\n setSteps(stepList);\n } catch (err) {\n console.error(\"Failed to load data:\", err);\n setError(\"Failed to load presentation data. Please refresh the page.\");\n } finally {\n setLoading(false);\n }\n };\n\n const handleCreateStep = async (data: {\n widget_type: string;\n widget_config: Record;\n step_number?: number;\n }) => {\n try {\n setError(null);\n await createStep(presentationId, data);\n setShowCreateForm(false);\n await loadData();\n } catch (err) {\n console.error(\"Failed to create step:\", err);\n setError(\"Failed to create step. Please try again.\");\n }\n };\n\n const handleUpdateStep = async (\n stepId: number,\n data: { widget_type: string; widget_config: Record }\n ) => {\n try {\n setError(null);\n await updateStep(stepId, data);\n setEditingStep(null);\n await loadData();\n } catch (err) {\n console.error(\"Failed to update step:\", err);\n setError(\"Failed to update step. Please try again.\");\n }\n };\n\n const [deletingStepId, setDeletingStepId] = useState(null);\n\n const handleDeleteStep = async (stepId: number) => {\n setDeletingStepId(stepId);\n };\n\n const confirmDelete = async () => {\n if (!deletingStepId) return;\n\n try {\n setError(null);\n await deleteStepAPI(deletingStepId);\n setDeletingStepId(null);\n await loadData();\n } catch (err) {\n console.error(\"Failed to delete step:\", err);\n setError(\"Failed to delete step. Please try again.\");\n setDeletingStepId(null);\n }\n };\n\n const handleMoveStep = async (stepId: number, direction: \"up\" | \"down\") => {\n try {\n setError(null);\n const currentIndex = steps.findIndex(s => s.id === stepId);\n if (currentIndex === -1) return;\n\n const newIndex = direction === \"up\" ? currentIndex - 1 : currentIndex + 1;\n if (newIndex < 0 || newIndex >= steps.length) return;\n\n // Create new order array\n const newOrder = [...steps];\n [newOrder[currentIndex], newOrder[newIndex]] = [newOrder[newIndex], newOrder[currentIndex]];\n \n // Extract step IDs in new order\n const stepIds = newOrder.map(s => s.id);\n \n // Call API to reorder\n const reorderedSteps = await reorderStepsAPI(presentationId, stepIds);\n setSteps(reorderedSteps);\n } catch (err) {\n console.error(\"Failed to reorder steps:\", err);\n setError(\"Failed to reorder steps. Please try again.\");\n }\n };\n\n const [draggedStepId, setDraggedStepId] = useState(null);\n const [dragOverIndex, setDragOverIndex] = useState(null);\n\n const handleDragStart = (stepId: number) => {\n setDraggedStepId(stepId);\n };\n\n const handleDragOver = (e: React.DragEvent, index: number) => {\n e.preventDefault();\n setDragOverIndex(index);\n };\n\n const handleDragLeave = () => {\n setDragOverIndex(null);\n };\n\n const handleDrop = async (e: React.DragEvent, dropIndex: number) => {\n e.preventDefault();\n setDragOverIndex(null);\n \n if (draggedStepId === null) return;\n \n const dragIndex = steps.findIndex(s => s.id === draggedStepId);\n if (dragIndex === -1 || dragIndex === dropIndex) {\n setDraggedStepId(null);\n return;\n }\n\n try {\n setError(null);\n // Create new order array\n const newOrder = [...steps];\n const [removed] = newOrder.splice(dragIndex, 1);\n newOrder.splice(dropIndex, 0, removed);\n \n // Extract step IDs in new order\n const stepIds = newOrder.map(s => s.id);\n \n // Call API to reorder\n const reorderedSteps = await reorderStepsAPI(presentationId, stepIds);\n setSteps(reorderedSteps);\n } catch (err) {\n console.error(\"Failed to reorder steps:\", err);\n setError(\"Failed to reorder steps. Please try again.\");\n } finally {\n setDraggedStepId(null);\n }\n };\n\n const handleDragEnd = () => {\n setDraggedStepId(null);\n setDragOverIndex(null);\n };\n\n if (loading) {\n return (\n

\n );\n }\n\n if (!presentation) {\n return (\n

Presentation not found

\n );\n }\n\n return (\n

\n {presentation.name}\n

\n by {presentation.presenter}\n

\n \n ← Back\n \n \n Present →\n \n

\n\n

\n {error && (\n

\n ⚠️\n {error}\n setError(null)}\n className=\"ml-auto text-red-500 hover:text-red-700\"\n aria-label=\"Dismiss error\"\n >\n ✕\n \n

\n )}\n\n {deletingStepId && (\n

\n ⚠️\n \n Are you sure you want to delete this step? This cannot be\n undone.\n \n

\n \n Delete\n \n setDeletingStepId(null)}\n className=\"px-4 py-1 bg-white/50 text-gray-700 rounded-lg font-semibold hover:bg-white/80 transition-colors text-sm\"\n >\n Cancel\n \n

\n )}\n\n

\n Steps\n

\n {\n setShowCreateForm(!showCreateForm);\n setEditingStep(null);\n }}\n className=\"glass-button px-6 py-2 rounded-xl font-bold shadow-lg hover:shadow-xl transition-all\"\n >\n {showCreateForm ? \"Cancel\" : \"+ Add Step\"}\n \n

\n\n {(showCreateForm || editingStep) && (\n \n handleUpdateStep(editingStep.id, data)\n : handleCreateStep\n }\n onCancel={() => {\n setShowCreateForm(false);\n setEditingStep(null);\n }}\n />\n

\n )}\n\n {steps.length === 0 ? (\n

📝

\n No steps yet\n

\n Add steps to create interactive activities for your presentation\n

\n ) : (\n

\n {steps.map((step, index) => (\n {\n setEditingStep(step);\n setShowCreateForm(false);\n }}\n onDelete={() => handleDeleteStep(step.id)}\n onMoveUp={() => handleMoveStep(step.id, \"up\")}\n onMoveDown={() => handleMoveStep(step.id, \"down\")}\n onDragStart={() => handleDragStart(step.id)}\n onDragOver={(e) => handleDragOver(e, index)}\n onDragLeave={handleDragLeave}\n onDrop={(e) => handleDrop(e, index)}\n onDragEnd={handleDragEnd}\n />\n ))}\n

\n )}\n

\n \n );\n}\n\ninterface StepCardProps {\n step: Step;\n index: number;\n totalSteps: number;\n isDragging?: boolean;\n isDragOver?: boolean;\n onEdit: () => void;\n onDelete: () => void;\n onMoveUp: () => void;\n onMoveDown: () => void;\n onDragStart: () => void;\n onDragOver: (e: React.DragEvent) => void;\n onDragLeave: () => void;\n onDrop: (e: React.DragEvent) => void;\n onDragEnd: () => void;\n}\n\nfunction StepCard({ \n step, \n index, \n totalSteps, \n isDragging = false,\n isDragOver = false,\n onEdit, \n onDelete, \n onMoveUp, \n onMoveDown,\n onDragStart,\n onDragOver,\n onDragLeave,\n onDrop,\n onDragEnd,\n}: StepCardProps) {\n const config = JSON.parse(step.widget_config);\n\n return (\n

e.stopPropagation()}\n title=\"Drag to reorder\"\n >\n \n

\n \n {step.name || `Step ${step.step_number}`}\n \n \n {step.widget_type}\n \n {step.is_active === 1 && (\n \n Active\n \n )}\n

\n\n {step.widget_type === \"poll\" && (\n

\n {(config as PollWidgetConfig).question}\n

{option}

\n )}\n\n {step.widget_type === \"chat\" && (\n

\n {(config as ChatWidgetConfig).title || \"Chat\"}\n

\n \"\n {(config as ChatWidgetConfig).placeholder ||\n \"Type your message...\"}\n \"\n

\n )}\n\n {step.widget_type === \"poll2d\" && (\n

\n {(config as Poll2DWidgetConfig).question1}\n

\n {(config as Poll2DWidgetConfig).question2}\n

\n Journey stages:{\" \"}\n {(config as Poll2DWidgetConfig).journeyStages.join(\", \")}\n

\n Risk scale: {(config as Poll2DWidgetConfig).riskScaleMin} -{\" \"}\n {(config as Poll2DWidgetConfig).riskScaleMax}\n

\n )}\n\n {step.widget_type === \"multivote\" && (\n

\n {(config as MultivoteWidgetConfig).question}\n

\n )}\n\n {step.widget_type === \"prototype_demo\" && (\n

\n Prototype Demo Carousel\n

6 Interactive Mockups

\n )}\n\n {step.widget_type === \"vibe_coding\" && (\n

Vibe Coding

What should we build?

\n )}\n\n {step.widget_type === \"connect\" && (\n

\n {(config as EmailCollectionWidgetConfig).title || \"Connect\"}\n

\n {(config as EmailCollectionWidgetConfig).description || \"Email collection form\"}\n

\n )}\n

\n\n

\n e.stopPropagation()}\n disabled={index === 0}\n className=\"px-3 py-2 glass-button-secondary rounded-lg font-semibold text-sm disabled:opacity-50 disabled:cursor-not-allowed\"\n aria-label=\"Move up\"\n title=\"Move up\"\n >\n ↑\n \n e.stopPropagation()}\n disabled={index === totalSteps - 1}\n className=\"px-3 py-2 glass-button-secondary rounded-lg font-semibold text-sm disabled:opacity-50 disabled:cursor-not-allowed\"\n aria-label=\"Move down\"\n title=\"Move down\"\n >\n ↓\n \n

\n e.stopPropagation()}\n className=\"px-4 py-2 glass-button-secondary rounded-lg font-semibold text-sm\"\n >\n Edit\n \n e.stopPropagation()}\n className=\"px-4 py-2 bg-red-50/50 text-red-600 border border-red-100 rounded-lg font-semibold hover:bg-red-100 transition-colors text-sm\"\n >\n Delete\n \n

\n );\n}\n\ninterface StepFormProps {\n step?: Step | null;\n onSubmit: (data: {\n widget_type: string;\n widget_config: Record;\n step_number?: number;\n name?: string | null;\n }) => Promise;\n onCancel: () => void;\n}\n\nfunction StepForm({ step, onSubmit, onCancel }: StepFormProps) {\n const [widgetType, setWidgetType] = useState(\n step?.widget_type || \"poll\"\n );\n const [stepName, setStepName] = useState(step?.name || \"\");\n const [question, setQuestion] = useState(\n step && step.widget_type === \"poll\"\n ? (JSON.parse(step.widget_config) as PollWidgetConfig).question\n : \"\"\n );\n const [options, setOptions] = useState(\n step && step.widget_type === \"poll\"\n ? (JSON.parse(step.widget_config) as PollWidgetConfig).options\n : [\"\"]\n );\n const [chatTitle, setChatTitle] = useState(\n step && step.widget_type === \"chat\"\n ? (JSON.parse(step.widget_config) as ChatWidgetConfig).title || \"\"\n : \"\"\n );\n const [chatPlaceholder, setChatPlaceholder] = useState(\n step && step.widget_type === \"chat\"\n ? (JSON.parse(step.widget_config) as ChatWidgetConfig).placeholder || \"\"\n : \"\"\n );\n const [poll2dQuestion1, setPoll2dQuestion1] = useState(\n step && step.widget_type === \"poll2d\"\n ? (JSON.parse(step.widget_config) as Poll2DWidgetConfig).question1\n : \"\"\n );\n const [poll2dQuestion2, setPoll2dQuestion2] = useState(\n step && step.widget_type === \"poll2d\"\n ? (JSON.parse(step.widget_config) as Poll2DWidgetConfig).question2\n : \"\"\n );\n const [journeyStages, setJourneyStages] = useState(\n step && step.widget_type === \"poll2d\"\n ? (JSON.parse(step.widget_config) as Poll2DWidgetConfig).journeyStages\n : [\n \"Exploring ideas\",\n \"Internal pilot with staff only\",\n \"Limited member-facing pilot\",\n \"Production, low stakes\",\n \"Production, high stakes (like claims / advice)\",\n ]\n );\n const [riskScaleMin, setRiskScaleMin] = useState(\n step && step.widget_type === \"poll2d\"\n ? (JSON.parse(step.widget_config) as Poll2DWidgetConfig).riskScaleMin\n : 1\n );\n const [riskScaleMax, setRiskScaleMax] = useState(\n step && step.widget_type === \"poll2d\"\n ? (JSON.parse(step.widget_config) as Poll2DWidgetConfig).riskScaleMax\n : 5\n );\n const [riskLabels, setRiskLabels] = useState(\n step &&\n step.widget_type === \"poll2d\" &&\n (JSON.parse(step.widget_config) as Poll2DWidgetConfig).riskLabels\n ? (JSON.parse(step.widget_config) as Poll2DWidgetConfig).riskLabels!\n : []\n );\n const [multivoteQuestion, setMultivoteQuestion] = useState(\n step && step.widget_type === \"multivote\"\n ? (JSON.parse(step.widget_config) as MultivoteWidgetConfig).question\n : \"\"\n );\n const [boxesAndLinesTitle, setBoxesAndLinesTitle] = useState(\n step && step.widget_type === \"boxes_and_lines\"\n ? (JSON.parse(step.widget_config) as BoxesAndLinesWidgetConfig).title ||\n \"\"\n : \"\"\n );\n const [emailCollectionTitle, setEmailCollectionTitle] = useState(\n step && step.widget_type === \"connect\"\n ? (JSON.parse(step.widget_config) as EmailCollectionWidgetConfig).title ||\n \"\"\n : \"\"\n );\n const [emailCollectionDescription, setEmailCollectionDescription] = useState(\n step && step.widget_type === \"connect\"\n ? (JSON.parse(step.widget_config) as EmailCollectionWidgetConfig).description ||\n \"\"\n : \"\"\n );\n const [emailCollectionSuccessTitle, setEmailCollectionSuccessTitle] = useState(\n step && step.widget_type === \"connect\"\n ? (JSON.parse(step.widget_config) as EmailCollectionWidgetConfig).successTitle ||\n \"\"\n : \"\"\n );\n const [emailCollectionSuccessMessage, setEmailCollectionSuccessMessage] = useState(\n step && step.widget_type === \"connect\"\n ? (JSON.parse(step.widget_config) as EmailCollectionWidgetConfig).successMessage ||\n \"\"\n : \"\"\n );\n const [emailCollectionSubmitButtonText, setEmailCollectionSubmitButtonText] = useState(\n step && step.widget_type === \"connect\"\n ? (JSON.parse(step.widget_config) as EmailCollectionWidgetConfig).submitButtonText ||\n \"\"\n : \"\"\n );\n const [emailCollectionCheckboxOptions, setEmailCollectionCheckboxOptions] = useState(\n step && step.widget_type === \"connect\"\n ? (JSON.parse(step.widget_config) as EmailCollectionWidgetConfig).checkboxOptions || [\n \"Send me the slides\",\n \"Let's connect on LinkedIn\",\n \"Let's chat about working together\",\n ]\n : [\n \"Send me the slides\",\n \"Let's connect on LinkedIn\",\n \"Let's chat about working together\",\n ]\n );\n const [loading, setLoading] = useState(false);\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n\n setLoading(true);\n try {\n if (widgetType === \"poll\") {\n if (!question.trim() || options.filter((o) => o.trim()).length < 2) {\n return;\n }\n await onSubmit({\n widget_type: \"poll\",\n widget_config: {\n question: question.trim(),\n options: options.filter((o) => o.trim()),\n } as PollWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setQuestion(\"\");\n setOptions([\"\"]);\n setStepName(\"\");\n } else if (widgetType === \"chat\") {\n await onSubmit({\n widget_type: \"chat\",\n widget_config: {\n title: chatTitle.trim() || undefined,\n placeholder: chatPlaceholder.trim() || undefined,\n } as ChatWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setChatTitle(\"\");\n setChatPlaceholder(\"\");\n setStepName(\"\");\n } else if (widgetType === \"poll2d\") {\n if (\n !poll2dQuestion1.trim() ||\n !poll2dQuestion2.trim() ||\n journeyStages.filter((s) => s.trim()).length < 2\n ) {\n return;\n }\n const expectedRiskLabelCount = riskScaleMax - riskScaleMin + 1;\n const validRiskLabels =\n riskLabels.filter((l) => l.trim()).length === expectedRiskLabelCount\n ? riskLabels.filter((l) => l.trim())\n : undefined;\n\n await onSubmit({\n widget_type: \"poll2d\",\n widget_config: {\n question1: poll2dQuestion1.trim(),\n question2: poll2dQuestion2.trim(),\n journeyStages: journeyStages.filter((s) => s.trim()),\n riskScaleMin,\n riskScaleMax,\n riskLabels: validRiskLabels,\n } as Poll2DWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setPoll2dQuestion1(\"\");\n setPoll2dQuestion2(\"\");\n setJourneyStages([\n \"Exploring ideas\",\n \"Internal pilot with staff only\",\n \"Limited member-facing pilot\",\n \"Production, low stakes\",\n \"Production, high stakes (like claims / advice)\",\n ]);\n setRiskScaleMin(1);\n setRiskScaleMax(5);\n setRiskLabels([]);\n setStepName(\"\");\n } else if (widgetType === \"multivote\") {\n if (!multivoteQuestion.trim()) {\n return;\n }\n await onSubmit({\n widget_type: \"multivote\",\n widget_config: {\n question: multivoteQuestion.trim(),\n } as MultivoteWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setMultivoteQuestion(\"\");\n setStepName(\"\");\n } else if (widgetType === \"prototype_demo\") {\n await onSubmit({\n widget_type: \"prototype_demo\",\n widget_config: {\n title: \"Prototype Demos\",\n } as PrototypeDemoWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setStepName(\"\");\n } else if (widgetType === \"vibe_coding\") {\n await onSubmit({\n widget_type: \"vibe_coding\",\n widget_config: {\n title: \"Vibe Coding\",\n } as VibeCodingWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setStepName(\"\");\n } else if (widgetType === \"boxes_and_lines\") {\n await onSubmit({\n widget_type: \"boxes_and_lines\",\n widget_config: {\n title: boxesAndLinesTitle.trim() || undefined,\n } as BoxesAndLinesWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setBoxesAndLinesTitle(\"\");\n setStepName(\"\");\n } else if (widgetType === \"connect\") {\n await onSubmit({\n widget_type: \"connect\",\n widget_config: {\n title: emailCollectionTitle.trim() || undefined,\n description: emailCollectionDescription.trim() || undefined,\n successTitle: emailCollectionSuccessTitle.trim() || undefined,\n successMessage: emailCollectionSuccessMessage.trim() || undefined,\n submitButtonText: emailCollectionSubmitButtonText.trim() || undefined,\n checkboxOptions: emailCollectionCheckboxOptions.filter((o) => o.trim()).length > 0\n ? emailCollectionCheckboxOptions.filter((o) => o.trim())\n : undefined,\n } as EmailCollectionWidgetConfig,\n step_number: step?.step_number,\n name: stepName.trim() || null,\n });\n setEmailCollectionTitle(\"\");\n setEmailCollectionDescription(\"\");\n setEmailCollectionSuccessTitle(\"\");\n setEmailCollectionSuccessMessage(\"\");\n setEmailCollectionSubmitButtonText(\"\");\n setEmailCollectionCheckboxOptions([\n \"Send me the slides\",\n \"Let's connect on LinkedIn\",\n \"Let's chat about working together\",\n ]);\n setStepName(\"\");\n }\n } finally {\n setLoading(false);\n }\n };\n\n const addOption = () => {\n setOptions([...options, \"\"]);\n };\n\n const updateOption = (index: number, value: string) => {\n const newOptions = [...options];\n newOptions[index] = value;\n setOptions(newOptions);\n };\n\n const removeOption = (index: number) => {\n if (options.length > 1) {\n setOptions(options.filter((_, i) => i !== index));\n }\n };\n\n const addJourneyStage = () => {\n setJourneyStages([...journeyStages, \"\"]);\n };\n\n const updateJourneyStage = (index: number, value: string) => {\n const newStages = [...journeyStages];\n newStages[index] = value;\n setJourneyStages(newStages);\n };\n\n const removeJourneyStage = (index: number) => {\n if (journeyStages.length > 1) {\n setJourneyStages(journeyStages.filter((_, i) => i !== index));\n }\n };\n\n const addCheckboxOption = () => {\n setEmailCollectionCheckboxOptions([...emailCollectionCheckboxOptions, \"\"]);\n };\n\n const updateCheckboxOption = (index: number, value: string) => {\n const newOptions = [...emailCollectionCheckboxOptions];\n newOptions[index] = value;\n setEmailCollectionCheckboxOptions(newOptions);\n };\n\n const removeCheckboxOption = (index: number) => {\n if (emailCollectionCheckboxOptions.length > 1) {\n setEmailCollectionCheckboxOptions(\n emailCollectionCheckboxOptions.filter((_, i) => i !== index)\n );\n }\n };\n\n // Update risk labels when scale changes\n useEffect(() => {\n if (widgetType === \"poll2d\") {\n const expectedCount = riskScaleMax - riskScaleMin + 1;\n if (riskLabels.length !== expectedCount) {\n // Initialize or adjust risk labels\n const newLabels = Array.from({ length: expectedCount }, (_, i) => {\n if (i < riskLabels.length && riskLabels[i]) {\n return riskLabels[i];\n }\n return \"\";\n });\n setRiskLabels(newLabels);\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [riskScaleMin, riskScaleMax, widgetType]);\n\n const updateRiskLabel = (index: number, value: string) => {\n const newLabels = [...riskLabels];\n newLabels[index] = value;\n setRiskLabels(newLabels);\n };\n\n return (\n

\n {step ? \"Edit Step\" : \"Create New Step\"}\n

\n\n

\n \n Step Name (optional)\n \n setStepName(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder={`e.g., Introduction, Q&A, Poll 1`}\n />\n

\n Leave empty to use default \"Step {step?.step_number || \"N\"}\"\n

\n\n

\n \n Widget Type *\n \n setWidgetType(e.target.value)}\n disabled={!!step}\n className=\"w-full px-4 py-2 glass-input disabled:opacity-50 disabled:bg-gray-50/20\"\n >\n \n \n \n \n \n \n \n \n \n {step && (\n

\n Widget type cannot be changed after creation\n

\n )}\n

\n\n {widgetType === \"poll\" && (\n <>\n

\n \n Question *\n \n setQuestion(e.target.value)}\n required\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., What is your favourite programming language?\"\n />\n

\n\n

\n \n Options * (at least 2 required)\n \n

\n {options.map((option, index) => (\n

\n updateOption(index, e.target.value)}\n required\n className=\"flex-1 px-4 py-2 glass-input\"\n placeholder={`Option ${index + 1}`}\n />\n {options.length > 1 && (\n removeOption(index)}\n className=\"px-4 py-2 glass-button-secondary rounded-lg hover:bg-red-50 text-red-600 transition-colors\"\n aria-label=\"Remove option\"\n >\n ✕\n \n )}\n

\n ))}\n

\n \n + Add Option\n \n

\n \n )}\n\n {widgetType === \"chat\" && (\n <>\n

\n \n Title (optional)\n \n setChatTitle(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Q&A Session\"\n />\n

\n Leave empty to use default title\n

\n\n

\n \n Input Placeholder (optional)\n \n setChatPlaceholder(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Ask a question...\"\n />\n

\n Leave empty to use default placeholder\n

\n \n )}\n\n {widgetType === \"poll2d\" && (\n <>\n

\n \n Journey Question *\n \n setPoll2dQuestion1(e.target.value)}\n required\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Where are you on this journey?\"\n />\n

\n\n

\n \n Journey Stages * (at least 2 required)\n \n

\n {journeyStages.map((stage, index) => (\n

\n updateJourneyStage(index, e.target.value)}\n required\n className=\"flex-1 px-4 py-2 glass-input\"\n placeholder={`Stage ${index + 1}`}\n />\n {journeyStages.length > 1 && (\n removeJourneyStage(index)}\n className=\"px-4 py-2 glass-button-secondary rounded-lg hover:bg-red-50 text-red-600 transition-colors\"\n aria-label=\"Remove stage\"\n >\n ✕\n \n )}\n

\n ))}\n

\n \n + Add Stage\n \n

\n\n

\n \n Risk Aversion Question *\n \n setPoll2dQuestion2(e.target.value)}\n required\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., How risk averse is your organisation?\"\n />\n

\n\n

\n \n Risk Scale Minimum *\n \n setRiskScaleMin(parseInt(e.target.value) || 1)}\n required\n min=\"1\"\n max=\"10\"\n className=\"w-full px-4 py-2 glass-input\"\n />\n

\n \n Risk Scale Maximum *\n \n setRiskScaleMax(parseInt(e.target.value) || 5)}\n required\n min=\"2\"\n max=\"10\"\n className=\"w-full px-4 py-2 glass-input\"\n />\n

\n\n

\n \n Risk Labels (optional) - One label per risk level\n \n

\n If provided, these labels will be shown instead of numbers. You\n need {riskScaleMax - riskScaleMin + 1} labels.\n

\n {riskLabels.map((label, index) => {\n const value = riskScaleMin + index;\n return (\n

\n \n {value}:\n \n updateRiskLabel(index, e.target.value)}\n className=\"flex-1 px-4 py-2 glass-input\"\n placeholder={`Label for ${value} (optional)`}\n />\n

\n );\n })}\n

\n Leave labels empty to use numbers ({riskScaleMin}-{riskScaleMax})\n

\n \n )}\n\n {widgetType === \"multivote\" && (\n <>\n

\n \n Question *\n \n setMultivoteQuestion(e.target.value)}\n required\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., What topics would you like to discuss?\"\n />\n

\n Participants can add their own options and vote on multiple\n options\n

\n \n )}\n\n {widgetType === \"prototype_demo\" && (\n

\n This widget displays a carousel of 6 interactive prototypes (Claims\n Support, Chat Assistant, Call-back Request, Process Overview,\n Requirements Letter, Claims Portal).\n
\n
\n No configuration is required.\n

\n )}\n\n {widgetType === \"vibe_coding\" && (\n

\n This widget displays \"What should we build?\" for collaborative coding\n sessions.\n
\n
\n No configuration is required.\n

\n )}\n\n {widgetType === \"boxes_and_lines\" && (\n <>\n

\n \n Title (optional)\n \n setBoxesAndLinesTitle(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., System Architecture Diagram\"\n />\n

\n Participants can create diagrams by adding boxes, labelling them,\n and connecting them with lines.\n

\n \n )}\n\n {widgetType === \"connect\" && (\n <>\n

\n \n Title (optional)\n \n setEmailCollectionTitle(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Send me the slides\"\n />\n

\n Default: \"Send me the slides\"\n

\n\n

\n \n Description (optional)\n \n setEmailCollectionDescription(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Enter your details to receive the presentation slides\"\n rows={3}\n />\n

\n\n

\n \n Success Title (optional)\n \n setEmailCollectionSuccessTitle(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Thank you!\"\n />\n

\n Default: \"Thank you!\"\n

\n\n

\n \n Success Message (optional)\n \n setEmailCollectionSuccessMessage(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., We'll send you the slides shortly.\"\n rows={2}\n />\n

\n Default: \"We'll send you the slides shortly.\"\n

\n\n

\n \n Submit Button Text (optional)\n \n setEmailCollectionSubmitButtonText(e.target.value)}\n className=\"w-full px-4 py-2 glass-input\"\n placeholder=\"e.g., Submit\"\n />\n

\n Default: \"Submit\"\n

\n\n

\n \n Checkbox Options * (at least 1 required)\n \n

\n Users must select at least one checkbox option to submit the form.\n

\n {emailCollectionCheckboxOptions.map((option, index) => (\n

\n updateCheckboxOption(index, e.target.value)}\n required\n className=\"flex-1 px-4 py-2 glass-input\"\n placeholder={`Checkbox option ${index + 1}`}\n />\n {emailCollectionCheckboxOptions.length > 1 && (\n removeCheckboxOption(index)}\n className=\"px-4 py-2 glass-button-secondary rounded-lg hover:bg-red-50 text-red-600 transition-colors\"\n aria-label=\"Remove checkbox option\"\n >\n ✕\n \n )}\n

\n ))}\n

\n \n + Add Checkbox Option\n \n

\n \n )}\n\n

\n o.trim()).length < 2)) ||\n (widgetType === \"poll2d\" &&\n (!poll2dQuestion1.trim() ||\n !poll2dQuestion2.trim() ||\n journeyStages.filter((s) => s.trim()).length < 2))\n }\n className=\"flex-1 glass-button px-6 py-2 rounded-xl font-semibold disabled:opacity-50 disabled:cursor-not-allowed transition-all\"\n >\n {loading\n ? step\n ? \"Updating...\"\n : \"Creating...\"\n : step\n ? \"Update Step\"\n : \"Create Step\"}\n \n \n Cancel\n \n

\n );\n}\n",[],[314,321,519],[314,321],{"_103":529,"_95":276,"_152":530,"_154":315,"_155":137,"_156":531,"_158":159,"_105":532,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":533,"_98":553},"8965277a-c517-11f0-9a74-42dde27851f2","89652838-c517-11f0-9a74-42dde27851f2",81,["D",1763536532841],[534,544],{"_103":535,"_95":536,"_152":537,"_154":530,"_155":137,"_156":538,"_158":159,"_105":539,"_100":540,"_161":182,"_163":541,"_164":22,"_165":-5,"_166":542,"_98":543},"f3607a44-c77e-11f0-9d3d-42dde27851f2","api.ts","89c53750-c517-11f0-968d-42dde27851f2",474,["D",1763800851127],16,"import type {\n Presentation,\n Step,\n Session,\n Response,\n CreatePresentationRequest,\n CreateStepRequest,\n SubmitResponseRequest,\n} from \"../../shared/types.ts\";\n\nconst API_BASE = \"\"; // Relative to current domain\n\nasync function fetchJSON(url: string, options?: RequestInit): Promise {\n const response = await fetch(`${API_BASE}${url}`, options);\n \n if (!response.ok) {\n const error = await response.json().catch(() => ({ error: \"Unknown error\" }));\n throw new Error(error.error || `HTTP ${response.status}`);\n }\n \n return response.json();\n}\n\n// Helper function to get session_id from localStorage\nfunction getSessionId(): string | null {\n if (typeof window === \"undefined\") return null;\n return localStorage.getItem(\"live_talk_session_id\");\n}\n\n// Helper function to add session_id to headers\nfunction getHeadersWithSession(options?: RequestInit): RequestInit {\n const sessionId = getSessionId();\n return {\n ...options,\n headers: {\n \"Content-Type\": \"application/json\",\n ...(sessionId ? { \"X-Session-Id\": sessionId } : {}),\n ...options?.headers,\n },\n };\n}\n\n// Presentations\nexport async function getPresentations(): Promise {\n const sessionId = getSessionId();\n const url = sessionId ? `/api/presentations?session_id=${sessionId}` : \"/api/presentations\";\n return fetchJSON(url);\n}\n\nexport async function getPresentation(id: number): Promise {\n return fetchJSON(`/api/presentations/${id}`, getHeadersWithSession());\n}\n\nexport async function createPresentation(data: CreatePresentationRequest): Promise {\n return fetchJSON(\"/api/presentations\", {\n ...getHeadersWithSession(),\n method: \"POST\",\n body: JSON.stringify(data),\n });\n}\n\nexport async function updatePresentation(id: number, data: CreatePresentationRequest): Promise {\n return fetchJSON(`/api/presentations/${id}`, {\n ...getHeadersWithSession(),\n method: \"PUT\",\n body: JSON.stringify(data),\n });\n}\n\nexport async function deletePresentation(id: number): Promise {\n return fetchJSON(`/api/presentations/${id}`, {\n ...getHeadersWithSession(),\n method: \"DELETE\",\n });\n}\n\nexport async function deleteAllPresentations(): Promise {\n return fetchJSON(\"/api/presentations\", {\n ...getHeadersWithSession(),\n method: \"DELETE\",\n });\n}\n\n// Steps\nexport async function getSteps(presentationId: number): Promise {\n return fetchJSON(`/api/steps/presentation/${presentationId}`);\n}\n\nexport async function getStep(id: number): Promise {\n return fetchJSON(`/api/steps/${id}`);\n}\n\nexport async function getActiveStep(presentationId: number): Promise {\n try {\n return await fetchJSON(`/api/steps/presentation/${presentationId}/active`);\n } catch {\n return null;\n }\n}\n\nexport async function createStep(presentationId: number, data: CreateStepRequest & { step_number?: number }): Promise {\n return fetchJSON(`/api/steps/presentation/${presentationId}`, {\n method: \"POST\",\n body: JSON.stringify(data),\n });\n}\n\nexport async function updateStep(id: number, data: CreateStepRequest): Promise {\n return fetchJSON(`/api/steps/${id}`, {\n method: \"PUT\",\n body: JSON.stringify(data),\n });\n}\n\nexport async function updateStepName(id: number, name: string | null): Promise {\n return fetchJSON(`/api/steps/${id}/name`, {\n method: \"PUT\",\n body: JSON.stringify({ name }),\n });\n}\n\nexport async function activateStep(id: number): Promise {\n return fetchJSON(`/api/steps/${id}/activate`, {\n method: \"PUT\",\n });\n}\n\nexport async function deleteStep(id: number): Promise {\n return fetchJSON(`/api/steps/${id}`, {\n method: \"DELETE\",\n });\n}\n\nexport async function reorderSteps(presentationId: number, stepIds: number[]): Promise {\n return fetchJSON(`/api/steps/presentation/${presentationId}/reorder`, {\n method: \"PUT\",\n body: JSON.stringify({ stepIds }),\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n}\n\n// Sessions\nexport async function getOrCreateSession(sessionId: string | null, presentationId: number): Promise {\n return fetchJSON(\"/api/sessions\", {\n method: \"POST\",\n body: JSON.stringify({\n session_id: sessionId,\n presentation_id: presentationId,\n }),\n });\n}\n\nexport async function getSession(sessionId: string): Promise {\n return fetchJSON(`/api/sessions/${sessionId}`);\n}\n\nexport async function findSessionByEmail(email: string): Promise {\n try {\n return await fetchJSON(\"/api/sessions/find-by-email\", {\n method: \"POST\",\n body: JSON.stringify({ email }),\n headers: {\n \"Content-Type\": \"application/json\",\n },\n });\n } catch {\n return null;\n }\n}\n\n// Responses\nexport async function submitResponse(sessionId: string, data: SubmitResponseRequest): Promise {\n return fetchJSON(\"/api/responses\", {\n method: \"POST\",\n body: JSON.stringify({\n session_id: sessionId,\n ...data,\n }),\n });\n}\n\nexport async function getResponsesForStep(stepId: number): Promise {\n return fetchJSON(`/api/responses/step/${stepId}`);\n}\n\nexport async function getResponseForSessionAndStep(sessionId: string, stepId: number): Promise {\n try {\n return await fetchJSON(`/api/responses/session/${sessionId}/step/${stepId}`);\n } catch {\n return null;\n }\n}\n\nexport async function deleteResponsesForStep(stepId: number): Promise {\n return fetchJSON(`/api/responses/step/${stepId}`, {\n method: \"DELETE\",\n });\n}\n\n// User Attributes\nexport async function getUserAttribute(sessionId: string, attributeKey: string): Promise {\n try {\n const result = await fetchJSON<{ value: string }>(`/api/user-attributes/session/${sessionId}/${attributeKey}`);\n return result.value;\n } catch {\n return null;\n }\n}\n\nexport async function setUserAttribute(sessionId: string, attributeKey: string, value: string): Promise {\n return fetchJSON(`/api/user-attributes/session/${sessionId}/${attributeKey}`, {\n method: \"POST\",\n body: JSON.stringify({ value }),\n });\n}\n\nexport async function getAllUserAttributes(sessionId: string): Promise> {\n return fetchJSON>(`/api/user-attributes/session/${sessionId}`);\n}\n\n",[],[314,276,536],{"_103":545,"_95":546,"_152":547,"_154":530,"_155":137,"_156":548,"_158":159,"_105":549,"_100":260,"_161":182,"_163":550,"_164":22,"_165":-5,"_166":551,"_98":552},"bc851f58-c606-11f0-b4f7-42dde27851f2","session.ts","89f49e64-c517-11f0-8062-42dde27851f2",417,["D",1763639268315],"const SESSION_STORAGE_KEY = \"live_talk_session_id\";\nconst EMAIL_STORAGE_KEY = \"live_talk_email\";\nconst NAME_STORAGE_KEY = \"live_talk_name\";\n\nexport function getSessionId(): string | null {\n if (typeof window === \"undefined\") return null;\n return localStorage.getItem(SESSION_STORAGE_KEY);\n}\n\nexport function setSessionId(sessionId: string): void {\n if (typeof window === \"undefined\") return;\n localStorage.setItem(SESSION_STORAGE_KEY, sessionId);\n}\n\nexport function generateSessionId(): string {\n return crypto.randomUUID();\n}\n\nexport function getOrCreateSessionId(): string {\n let sessionId = getSessionId();\n if (!sessionId) {\n sessionId = generateSessionId();\n setSessionId(sessionId);\n }\n return sessionId;\n}\n\nexport function getEmail(): string | null {\n if (typeof window === \"undefined\") return null;\n return localStorage.getItem(EMAIL_STORAGE_KEY);\n}\n\nexport function setEmail(email: string): void {\n if (typeof window === \"undefined\") return;\n localStorage.setItem(EMAIL_STORAGE_KEY, email);\n}\n\nexport function getName(): string | null {\n if (typeof window === \"undefined\") return null;\n return localStorage.getItem(NAME_STORAGE_KEY);\n}\n\nexport function setName(name: string): void {\n if (typeof window === \"undefined\") return;\n localStorage.setItem(NAME_STORAGE_KEY, name);\n}\n\n\n\n\n",[],[314,276,546],[314,276],{"_103":555,"_95":556,"_152":557,"_154":315,"_155":137,"_156":558,"_158":159,"_105":559,"_100":240,"_161":560,"_163":561,"_164":22,"_165":-5,"_166":562,"_98":563},"aaa8c37c-c537-11f0-98f6-42dde27851f2","index.html","89cf358e-c517-11f0-841c-42dde27851f2",252,["D",1763550332378],"file","\n\n\n \n \n Live Talk - Last Conference\n \n \n \n \n \n\n\n

\n \n\n\n",[],[314,556],{"_103":565,"_95":566,"_152":567,"_154":315,"_155":137,"_156":568,"_158":159,"_105":569,"_100":240,"_161":182,"_163":570,"_164":22,"_165":-5,"_166":571,"_98":572},"b5607390-c5f6-11f0-88fa-42dde27851f2","index.tsx","368503d2-c516-11f0-a08e-42dde27851f2",296,["D",1763632384324],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();\n\n\n\n\n",[],[314,566],[314],{"_103":575,"_95":576,"_152":577,"_154":-5,"_155":137,"_156":578,"_158":159,"_105":579,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":580,"_98":608},"49788eee-c518-11f0-a08c-42dde27851f2","scripts","49788fac-c518-11f0-a08c-42dde27851f2",123,["D",1763536855088],[581,590,599],{"_103":582,"_95":583,"_152":584,"_154":577,"_155":137,"_156":585,"_158":159,"_105":586,"_100":32,"_161":182,"_163":587,"_164":22,"_165":-5,"_166":588,"_98":589},"9344aeca-c51f-11f0-b17a-42dde27851f2","clear-db.ts","9344af9c-c51f-11f0-b17a-42dde27851f2",208,["D",1763539985376],"#!/usr/bin/env -S deno run --allow-read --allow-write --allow-net\n\n/**\n * Script to clear the entire database by dropping all tables\n * This allows migrations to create a fresh database\n * \n * Usage:\n * deno run --allow-read --allow-write --allow-net scripts/clear-db.ts\n */\n\nimport { getAdapter } from \"../backend/database/adapter.ts\";\n\nconst sqlite = getAdapter();\n\nasync function getAllTables(): Promise {\n const result = await sqlite.execute(`\n SELECT name FROM sqlite_master \n WHERE type='table' \n AND name NOT LIKE 'sqlite_%'\n ORDER BY name\n `);\n \n return result.rows.map((row: any) => row.name as string);\n}\n\nasync function dropTable(tableName: string): Promise {\n try {\n await sqlite.execute(`DROP TABLE IF EXISTS ${tableName}`);\n console.log(`✓ Dropped table: ${tableName}`);\n } catch (error) {\n console.error(`✗ Failed to drop table ${tableName}:`, error);\n throw error;\n }\n}\n\nasync function main() {\n console.log(\"🔍 Scanning database for tables...\\n\");\n \n const allTables = await getAllTables();\n \n if (allTables.length === 0) {\n console.log(\"✓ No tables found in database. Database is already empty.\");\n return;\n }\n \n console.log(`Found ${allTables.length} table(s):`);\n allTables.forEach(table => console.log(` - ${table}`));\n console.log();\n \n console.log(\"🗑️ Dropping all tables to create a fresh database...\\n\");\n \n for (const table of allTables) {\n await dropTable(table);\n }\n \n console.log();\n \n // Verify all tables are dropped\n const remainingTables = await getAllTables();\n if (remainingTables.length === 0) {\n console.log(\"✅ Database cleared successfully! All tables have been dropped.\");\n console.log(\" Run migrations to create fresh tables.\");\n } else {\n console.log(`⚠️ Warning: ${remainingTables.length} table(s) still remain:`);\n remainingTables.forEach(table => console.log(` - ${table}`));\n }\n}\n\nif (import.meta.main) {\n main().catch((error) => {\n console.error(\"Error:\", error);\n Deno.exit(1);\n });\n}\n\n",[],[576,583],{"_103":591,"_95":592,"_152":593,"_154":577,"_155":137,"_156":594,"_158":159,"_105":595,"_100":375,"_161":560,"_163":596,"_164":22,"_165":-5,"_166":597,"_98":598},"5b073182-c519-11f0-a03c-42dde27851f2","dev.sh","49a488be-c518-11f0-a826-42dde27851f2",145,["D",1763537313959],"#!/bin/bash\n\n# Development server management script\n# Usage: ./scripts/dev.sh [start|stop|status|restart]\n\nSCRIPT_DIR=\"$(cd \"$(dirname \"${BASH_SOURCE[0]}\")\" && pwd)\"\nPROJECT_DIR=\"$(cd \"$SCRIPT_DIR/..\" && pwd)\"\nPID_FILE=\"$PROJECT_DIR/.dev-server.pid\"\nLOG_FILE=\"$PROJECT_DIR/.dev-server.log\"\n\n# Colors for output\nRED='\\033[0;31m'\nGREEN='\\033[0;32m'\nYELLOW='\\033[1;33m'\nNC='\\033[0m' # No Color\n\n# Function to check if server is running\nis_running() {\n if [ -f \"$PID_FILE\" ]; then\n PID=$(cat \"$PID_FILE\")\n if ps -p \"$PID\" > /dev/null 2>&1; then\n return 0\n else\n # PID file exists but process is dead\n rm -f \"$PID_FILE\"\n return 1\n fi\n fi\n return 1\n}\n\n# Function to start the server\nstart_server() {\n if is_running; then\n echo -e \"${YELLOW}Server is already running (PID: $(cat \"$PID_FILE\"))${NC}\"\n return 1\n fi\n\n echo -e \"${GREEN}Starting development server...${NC}\"\n cd \"$PROJECT_DIR\"\n \n # Start server in background and capture PID\n deno run \\\n --allow-net \\\n --allow-read \\\n --allow-write \\\n --allow-import \\\n --allow-env \\\n --allow-run \\\n --watch \\\n server.ts > \"$LOG_FILE\" 2>&1 &\n \n SERVER_PID=$!\n echo $SERVER_PID > \"$PID_FILE\"\n \n # Wait a moment to see if it starts successfully\n sleep 2\n \n if is_running; then\n echo -e \"${GREEN}✓ Server started successfully (PID: $SERVER_PID)${NC}\"\n echo -e \"${GREEN} Logs: $LOG_FILE${NC}\"\n echo -e \"${GREEN} URL: http://localhost:8000${NC}\"\n return 0\n else\n echo -e \"${RED}✗ Server failed to start. Check logs: $LOG_FILE${NC}\"\n rm -f \"$PID_FILE\"\n return 1\n fi\n}\n\n# Function to stop the server\nstop_server() {\n if ! is_running; then\n echo -e \"${YELLOW}Server is not running${NC}\"\n return 1\n fi\n\n PID=$(cat \"$PID_FILE\")\n echo -e \"${YELLOW}Stopping server (PID: $PID)...${NC}\"\n \n # Kill the process and all its children (deno watch spawns child processes)\n pkill -P \"$PID\" 2>/dev/null\n kill \"$PID\" 2>/dev/null\n \n # Wait a bit for graceful shutdown\n sleep 1\n \n # Force kill if still running\n if ps -p \"$PID\" > /dev/null 2>&1; then\n kill -9 \"$PID\" 2>/dev/null\n sleep 0.5\n fi\n \n # Clean up any remaining deno processes related to this server\n pkill -f \"deno run.*server.ts\" 2>/dev/null\n \n rm -f \"$PID_FILE\"\n \n if ! is_running; then\n echo -e \"${GREEN}✓ Server stopped${NC}\"\n return 0\n else\n echo -e \"${RED}✗ Failed to stop server${NC}\"\n return 1\n fi\n}\n\n# Function to show server status\nshow_status() {\n if is_running; then\n PID=$(cat \"$PID_FILE\")\n echo -e \"${GREEN}✓ Server is running (PID: $PID)${NC}\"\n echo -e \" URL: http://localhost:8000\"\n echo -e \" Logs: $LOG_FILE\"\n \n # Show last few log lines\n if [ -f \"$LOG_FILE\" ]; then\n echo -e \"\\n Last log entries:\"\n tail -n 5 \"$LOG_FILE\" | sed 's/^/ /'\n fi\n return 0\n else\n echo -e \"${RED}✗ Server is not running${NC}\"\n return 1\n fi\n}\n\n# Function to restart the server\nrestart_server() {\n stop_server\n sleep 1\n start_server\n}\n\n# Main command handling\ncase \"${1:-}\" in\n start)\n start_server\n ;;\n stop)\n stop_server\n ;;\n status)\n show_status\n ;;\n restart)\n restart_server\n ;;\n *)\n echo \"Usage: $0 {start|stop|status|restart}\"\n echo \"\"\n echo \"Commands:\"\n echo \" start - Start the development server\"\n echo \" stop - Stop the development server\"\n echo \" status - Show server status\"\n echo \" restart - Restart the development server\"\n exit 1\n ;;\nesac\n\nexit $?\n\n",[],[576,592],{"_103":600,"_95":601,"_152":602,"_154":577,"_155":137,"_156":603,"_158":159,"_105":604,"_100":32,"_161":182,"_163":605,"_164":22,"_165":-5,"_166":606,"_98":607},"b5511f3a-c5f6-11f0-85ab-42dde27851f2","remove-borders.ts","b551200c-c5f6-11f0-85ab-42dde27851f2",294,["D",1763632384286],"#!/usr/bin/env -S deno run --allow-run --allow-read --allow-write\n\n/**\n * Script to replace black borders with white and convert video to 16:9 aspect ratio.\n *\n * Usage:\n * deno run --allow-run --allow-read --allow-write scripts/remove-borders.ts [input_file] [output_file]\n *\n * If output_file is not specified, it will be generated from input_file with \"_16x9\" suffix.\n */\n\nconst inputFile = Deno.args[0] || \"./scripts/roles.mp4\";\nconst outputFile = Deno.args[1] || inputFile.replace(/\\.mp4$/, \"_16x9.mp4\");\nconst targetWidth = 1280;\nconst targetHeight = 720; // 16:9 aspect ratio\n\nasync function checkFFmpeg(): Promise {\n try {\n const command = new Deno.Command(\"ffmpeg\", {\n args: [\"-version\"],\n stdout: \"null\",\n stderr: \"null\",\n });\n await command.output();\n return true;\n } catch {\n return false;\n }\n}\n\nasync function detectCrop(\n inputFile: string\n): Promise<{ width: number; height: number; x: number; y: number }> {\n console.log(\"Detecting black borders...\");\n\n // Use cropdetect filter to find the optimal crop parameters\n const command = new Deno.Command(\"ffmpeg\", {\n args: [\n \"-i\",\n inputFile,\n \"-vf\",\n \"cropdetect=24:16:0\",\n \"-t\",\n \"10\", // Sample first 10 seconds\n \"-f\",\n \"null\",\n \"-\",\n ],\n stdout: \"piped\",\n stderr: \"piped\",\n });\n\n const { stderr } = await command.output();\n const stderrText = new TextDecoder().decode(stderr);\n\n // Extract crop parameters from ffmpeg output\n // Format: \"crop=WIDTH:HEIGHT:X:Y\"\n const cropMatch = stderrText.match(/crop=(\\d+):(\\d+):(\\d+):(\\d+)/);\n\n if (!cropMatch) {\n throw new Error(\n \"Could not detect crop parameters. The video might not have black borders.\"\n );\n }\n\n const cropParams = {\n width: parseInt(cropMatch[1]),\n height: parseInt(cropMatch[2]),\n x: parseInt(cropMatch[3]),\n y: parseInt(cropMatch[4]),\n };\n\n console.log(\n `Detected content area: ${cropParams.width}x${cropParams.height} at position (${cropParams.x}, ${cropParams.y})`\n );\n return cropParams;\n}\n\nasync function processVideo(\n inputFile: string,\n outputFile: string,\n cropParams: { width: number; height: number; x: number; y: number }\n): Promise {\n console.log(`Processing video: ${inputFile} -> ${outputFile}`);\n console.log(\n `Converting to 16:9 (${targetWidth}x${targetHeight}) with white background...`\n );\n\n // Filter chain:\n // 1. Crop to content area (remove black borders)\n // 2. Scale to fit within 16:9 while maintaining aspect ratio\n // 3. Pad to exact 16:9 with white background\n const filterChain = [\n `crop=${cropParams.width}:${cropParams.height}:${cropParams.x}:${cropParams.y}`,\n `scale=${targetWidth}:${targetHeight}:force_original_aspect_ratio=decrease`,\n `pad=${targetWidth}:${targetHeight}:(ow-iw)/2:(oh-ih)/2:white`,\n ].join(\",\");\n\n const command = new Deno.Command(\"ffmpeg\", {\n args: [\n \"-i\",\n inputFile,\n \"-vf\",\n filterChain,\n \"-c:a\",\n \"copy\", // Copy audio without re-encoding\n \"-y\", // Overwrite output file if it exists\n outputFile,\n ],\n stdout: \"piped\",\n stderr: \"piped\",\n });\n\n const process = command.spawn();\n\n // Stream stderr to show progress\n const stderr = process.stderr.getReader();\n const decoder = new TextDecoder();\n\n let stderrText = \"\";\n let lastTime = \"\";\n while (true) {\n const { done, value } = await stderr.read();\n if (done) break;\n const text = decoder.decode(value, { stream: true });\n stderrText += text;\n // Show progress (ffmpeg outputs time=...)\n const timeMatch = text.match(/time=(\\d+:\\d+:\\d+\\.\\d+)/);\n if (timeMatch && timeMatch[1] !== lastTime) {\n lastTime = timeMatch[1];\n Deno.stdout.write(\n new TextEncoder().encode(`\\rProcessing: ${timeMatch[1]} `)\n );\n }\n }\n\n const status = await process.status;\n\n if (!status.success) {\n console.error(\"\\nError processing video:\");\n console.error(stderrText);\n Deno.exit(1);\n }\n\n console.log(\"\\n✓ Video processed successfully!\");\n}\n\nasync function main() {\n console.log(`Input file: ${inputFile}`);\n console.log(`Output file: ${outputFile}\\n`);\n\n // Check if input file exists\n try {\n await Deno.stat(inputFile);\n } catch {\n console.error(`Error: Input file not found: ${inputFile}`);\n Deno.exit(1);\n }\n\n // Check if ffmpeg is available\n if (!(await checkFFmpeg())) {\n console.error(\"Error: ffmpeg is not installed or not in PATH.\");\n console.error(\"Please install ffmpeg: brew install ffmpeg (on macOS)\");\n Deno.exit(1);\n }\n\n try {\n const cropParams = await detectCrop(inputFile);\n await processVideo(inputFile, outputFile, cropParams);\n\n const inputStats = await Deno.stat(inputFile);\n const outputStats = await Deno.stat(outputFile);\n const inputSizeMB = (inputStats.size / 1024 / 1024).toFixed(2);\n const outputSizeMB = (outputStats.size / 1024 / 1024).toFixed(2);\n\n console.log(`\\nFile sizes:`);\n console.log(` Input: ${inputSizeMB} MB`);\n console.log(` Output: ${outputSizeMB} MB`);\n console.log(`\\nOutput resolution: ${targetWidth}x${targetHeight} (16:9)`);\n } catch (error) {\n const message = error instanceof Error ? error.message : String(error);\n console.error(`\\nError: ${message}`);\n Deno.exit(1);\n }\n}\n\nif (import.meta.main) {\n main();\n}\n",[],[576,601],[576],{"_103":610,"_95":611,"_152":612,"_154":-5,"_155":137,"_156":613,"_158":159,"_105":614,"_100":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":615,"_98":626},"2f243266-c516-11f0-a79d-42dde27851f2","shared","2f24332e-c516-11f0-a79d-42dde27851f2",20,["D",1763535951928],[616],{"_103":617,"_95":618,"_152":619,"_154":612,"_155":137,"_156":620,"_158":159,"_105":621,"_100":622,"_161":182,"_163":623,"_164":22,"_165":-5,"_166":624,"_98":625},"f3c9d566-c77e-11f0-a36f-42dde27851f2","types.ts","8a92dc78-c517-11f0-8370-42dde27851f2",483,["D",1763800851824],17,"export interface Presentation {\n id: number;\n name: string;\n presenter: string;\n talk_deck_link: string | null;\n creator_session_id: string;\n created_at: string;\n}\n\nexport interface Step {\n id: number;\n presentation_id: number;\n step_number: number;\n name: string | null;\n widget_type: string;\n widget_config: string; // JSON string\n is_active: number; // 0 or 1\n}\n\nexport interface Session {\n id: string; // UUID\n presentation_id: number;\n created_at: string;\n}\n\nexport interface Response {\n id: number;\n session_id: string;\n step_id: number;\n response_data: string; // JSON string\n created_at: string;\n}\n\nexport interface PollWidgetConfig {\n question: string;\n options: string[];\n}\n\nexport interface PollResponse {\n optionIndex: number;\n}\n\nexport interface ChatWidgetConfig {\n placeholder?: string;\n title?: string;\n}\n\nexport interface ChatResponse {\n messages: Array<{\n message: string;\n timestamp: string;\n }>;\n userName: string;\n}\n\nexport interface Poll2DWidgetConfig {\n question1: string; // Journey question\n journeyStages: string[]; // Array of journey stage labels\n question2: string; // Risk aversion question\n riskScaleMin: number; // Minimum risk scale value (typically 1)\n riskScaleMax: number; // Maximum risk scale value (typically 5)\n riskLabels?: string[]; // Optional labels for risk levels (length should match riskScaleMax - riskScaleMin + 1)\n}\n\nexport interface Poll2DResponse {\n journeyStage: number; // Index into journeyStages array (0-based)\n riskAversion: number; // Risk aversion value (1-5)\n}\n\nexport interface MultivoteWidgetConfig {\n question: string;\n}\n\nexport interface MultivoteResponse {\n selectedOptions: string[]; // Array of selected option texts\n}\n\nexport interface PrototypeDemoWidgetConfig {\n title?: string;\n}\n\nexport interface VibeCodingWidgetConfig {\n title?: string;\n}\n\nexport interface BoxesAndLinesWidgetConfig {\n title?: string;\n}\n\nexport interface EmailCollectionWidgetConfig {\n title?: string;\n description?: string;\n successTitle?: string;\n successMessage?: string;\n submitButtonText?: string;\n checkboxOptions?: string[]; // Array of checkbox labels\n}\n\nexport interface Box {\n id: string;\n x: number;\n y: number;\n label: string;\n}\n\nexport interface Line {\n id: string;\n fromBoxId: string;\n toBoxId: string;\n}\n\nexport interface BoxesAndLinesResponse {\n boxes: Box[];\n lines: Line[];\n}\n\nexport interface CreatePresentationRequest {\n name: string;\n presenter: string;\n talk_deck_link?: string;\n}\n\nexport interface CreateStepRequest {\n widget_type: string;\n widget_config: Record;\n name?: string | null;\n}\n\nexport interface SubmitResponseRequest {\n step_id: number;\n response_data: Record;\n}\n",[],[611,618],[611],{"_103":628,"_95":629,"_152":630,"_154":-5,"_155":137,"_156":631,"_158":159,"_105":632,"_100":297,"_161":560,"_163":633,"_164":22,"_165":-5,"_166":634,"_98":635},"7ab8aca4-c519-11f0-8741-42dde27851f2",".dev-server.log","4fe01b4e-c518-11f0-941c-42dde27851f2",146,["D",1763537367219],"\u001b[0m\u001b[38;5;12mWatcher\u001b[0m Process started.\nServer running at http://localhost:8000\nUsing local SQLite database: ./live_talk.db\nListening on http://0.0.0.0:8000/ (http://localhost:8000/)\n\u001b[0m\u001b[38;5;12mWatcher\u001b[0m \u001b[0m\u001b[38;5;245mRestarting! File change detected: \"/Users/agileben/dev/live-talk/backend/utils/localFiles.ts\"\u001b[0m\nServer running at http://localhost:8000\nUsing local SQLite database: ./live_talk.db\nListening on http://0.0.0.0:8000/ (http://localhost:8000/)\n",[],[629],{"_103":637,"_95":99,"_152":638,"_154":-5,"_155":137,"_156":639,"_158":159,"_105":640,"_100":307,"_161":560,"_163":641,"_164":22,"_165":-5,"_166":642,"_98":643},"f398e186-c77e-11f0-9d3d-42dde27851f2","e7039190-c518-11f0-b5b5-42dde27851f2",478,["D",1763800851510],"12483\n",[],[99],{"_103":645,"_95":646,"_152":647,"_154":-5,"_155":137,"_156":648,"_158":159,"_105":649,"_100":220,"_161":560,"_163":650,"_164":22,"_165":-5,"_166":651,"_98":652},"abdb1a38-c519-11f0-bfe4-42dde27851f2",".gitignore","e48c2784-c517-11f0-9d1d-42dde27851f2",147,["D",1763537449621],"# Database files\n*.db\n*.db-journal\n*.db-wal\n*.db-shm\n\n# Deno\n.deno/\n\n# Environment\n.env\n.env.local\n\n# IDE\n.vscode/\n.idea/\n\n# OS\n.DS_Store\nThumbs.db\n\n# Development server\n.dev-server.pid\n.dev-server.log\n\nnode_modules/\n*.log",[],[646],{"_103":654,"_95":655,"_152":656,"_154":-5,"_155":137,"_156":657,"_158":159,"_105":658,"_100":375,"_161":560,"_163":659,"_164":22,"_165":-5,"_166":660,"_98":661},"dd064290-c519-11f0-a139-42dde27851f2",".vtignore","1835a0c8-c514-11f0-b976-42dde27851f2",148,["D",1763537532138],".git\n.vscode\n.cursorrules\n.DS_Store\nnode_modules\nvendor\n*.log\n*.db\n",[],[655],{"_103":663,"_95":664,"_152":665,"_154":-5,"_155":137,"_156":666,"_158":159,"_105":667,"_100":375,"_161":560,"_163":668,"_164":22,"_165":-5,"_166":669,"_98":670},"e72fefd8-c518-11f0-89eb-42dde27851f2","AGENTS.md","182baf5a-c514-11f0-a7e2-42dde27851f2",138,["D",1763537119698],"You are an advanced assistant specialized in generating Val Town code.\n\n## Core Guidelines\n\n- Ask clarifying questions when requirements are ambiguous\n- Provide complete, functional solutions rather than skeleton implementations\n- Test your logic against edge cases before presenting the final solution\n- Ensure all code follows Val Town's specific platform requirements\n- If a section of code that you're working on is getting too complex, consider refactoring it into subcomponents\n\n## Code Standards\n\n- Generate code in TypeScript or TSX\n- Add appropriate TypeScript types and interfaces for all data structures\n- Prefer official SDKs or libraries than writing API calls directly\n- Ask the user to supply API or library documentation if you are at all unsure about it\n- **Never bake in secrets into the code** - always use environment variables\n- Include comments explaining complex logic (avoid commenting obvious operations)\n- Follow modern ES6+ conventions and functional programming practices if possible\n\n## Types of triggers\n\n### 1. HTTP Trigger\n\n- Create web APIs and endpoints\n- Handle HTTP requests and responses\n- Example structure:\n\n```ts\nexport default async function (req: Request) {\n return new Response(\"Hello World\");\n}\n```\n\nFiles that are HTTP triggers have http in their name like `foobar.http.tsx`\n\n### 2. Cron Triggers\n\n- Run on a schedule\n- Use cron expressions for timing\n- Example structure:\n\n```ts\nexport default async function () {\n // Scheduled task code\n}\n```\n\nFiles that are Cron triggers have cron in their name like `foobar.cron.tsx`\n\n### 3. Email Triggers\n\n- Process incoming emails\n- Handle email-based workflows\n- Example structure:\n\n```ts\nexport default async function (email: Email) {\n // Process email\n}\n```\n\nFiles that are Email triggers have email in their name like `foobar.email.tsx`\n\n\n## Val Town Standard Libraries\n\nVal Town provides several hosted services and utility functions.\n\n### Blob Storage\n\n```ts\nimport { blob } from \"https://esm.town/v/std/blob\";\nawait blob.setJSON(\"myKey\", { hello: \"world\" });\nlet blobDemo = await blob.getJSON(\"myKey\");\nlet appKeys = await blob.list(\"app_\");\nawait blob.delete(\"myKey\");\n```\n\n### SQLite\n\n```ts\nimport { sqlite } from \"https://esm.town/v/stevekrouse/sqlite\";\nconst TABLE_NAME = 'todo_app_users_2';\n// Create table - do this before usage and change table name when modifying schema\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL\n)`);\n// Query data\nconst result = await sqlite.execute(`SELECT * FROM ${TABLE_NAME} WHERE id = ?`, [1]);\n```\n\nNote: When changing a SQLite table's schema, change the table's name (e.g., add _2 or _3) to create a fresh table.\n\n### OpenAI\n\n```ts\nimport { OpenAI } from \"https://esm.town/v/std/openai\";\nconst openai = new OpenAI();\nconst completion = await openai.chat.completions.create({\n messages: [\n { role: \"user\", content: \"Say hello in a creative way\" },\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 30,\n});\n```\n\n### Email\n\n```ts\nimport { email } from \"https://esm.town/v/std/email\";\n// By default emails the owner of the val\nawait email({ \n subject: \"Hi\", \n text: \"Hi\", \n html: \"

Hi

\"\n});\n```\n\n## Val Town Utility Functions\n\nVal Town provides several utility functions to help with common project tasks.\n\n### Importing Utilities\n\nAlways import utilities with version pins to avoid breaking changes:\n\n```ts\nimport { parseProject, readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n```\n\n### Available Utilities\n\n\n#### **serveFile** - Serve project files with proper content types\n\nFor example, in Hono:\n\n```ts\n// serve all files in frontend/ and shared/\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n```\n\n#### **readFile** - Read files from within the project:\n\n```ts\n// Read a file from the project\nconst fileContent = await readFile(\"/frontend/index.html\", import.meta.url);\n```\n\n#### **listFiles** - List all files in the project\n\n```ts\nconst files = await listFiles(import.meta.url);\n```\n\n#### **parseProject** - Extract information about the current project from import.meta.url\n\nThis is useful for including info for linking back to a val, ie in \"view source\" urls:\n\n```ts\nconst projectVal = parseProject(import.meta.url);\nconsole.log(projectVal.username); // Owner of the project\nconsole.log(projectVal.name); // Project name\nconsole.log(projectVal.version); // Version number\nconsole.log(projectVal.branch); // Branch name\nconsole.log(projectVal.links.self.project); // URL to the project page\n```\n\nHowever, it's *extremely importing* to note that `parseProject` and other Standard Library utilities ONLY RUN ON THE SERVER.\nIf you need access to this data on the client, run it in the server and pass it to the client by splicing it into the HTML page\nor by making an API request for it.\n\n## Val Town Platform Specifics\n\n- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: \"/place/to/redirect\" }})` instead of `Response.redirect` which is broken\n- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead\n- **AI Image:** To inline generate an AI image use: `

`\n- **Storage:** DO NOT use the Deno KV module for storage\n- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods\n- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified\n- **View Source:** Add a view source link by importing & using `import.meta.url.replace(\"ems.sh\", \"val.town)\"` (or passing this data to the client) and include `target=\"_top\"` attribute\n- **Error Debugging:** Add `` to HTML to capture client-side errors\n- **Error Handling:** Only use try...catch when there's a clear local resolution; Avoid catches that merely log or return 500s. Let errors bubble up with full context\n- **Environment Variables:** Use `Deno.env.get('keyname')` when you need to, but generally prefer APIs that don't require keys\n- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser\n- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites\n- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`\n- Ensure all React dependencies and sub-dependencies are pinned to the same version\n- **Styling:** Default to using TailwindCSS via `` unless otherwise specified\n\n## Project Structure and Design Patterns\n\n### Recommended Directory Structure\n```\n├── backend/\n│ ├── database/\n│ │ ├── migrations.ts # Schema definitions\n│ │ ├── queries.ts # DB query functions\n│ │ └── README.md\n│ └── routes/ # Route modules\n│ ├── [route].ts\n│ └── static.ts # Static file serving\n│ ├── index.ts # Main entry point\n│ └── README.md\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx\n│ │ └── [Component].tsx\n│ ├── favicon.svg\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend JS entry point\n│ ├── README.md\n│ └── style.css\n├── README.md\n└── shared/\n ├── README.md\n └── utils.ts # Shared types and functions\n```\n\n### Backend (Hono) Best Practices\n\n- Hono is the recommended API framework\n- Main entry point should be `backend/index.ts`\n- **Static asset serving:** Use the utility functions to read and serve project files:\n ```ts\n import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n \n // serve all files in frontend/ and shared/\n app.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\n app.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n \n // For index.html, often you'll want to bootstrap with initial data\n app.get(\"/\", async c => {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject data to avoid extra round-trips\n const initialData = await fetchInitialData();\n const dataScript = ``;\n \n html = html.replace(\"\", `${dataScript}`);\n return c.html(html);\n });\n ```\n- Create RESTful API routes for CRUD operations\n- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:\n ```ts\n // Unwrap Hono errors to see original error details\n app.onError((err, c) => {\n throw err;\n });\n ```\n\n### Database Patterns\n- Run migrations on startup or comment out for performance\n- Change table names when modifying schemas rather than altering\n- Export clear query functions with proper TypeScript typing\n\n## Common Gotchas and Solutions\n\n1. **Environment Limitations:** \n - Val Town runs on Deno in a serverless context, not Node.js\n - Code in `shared/` must work in both frontend and backend environments\n - Cannot use `Deno` keyword in shared code\n - Use `https://esm.sh` for imports that work in both environments\n\n2. **SQLite Peculiarities:**\n - Limited support for ALTER TABLE operations\n - Create new tables with updated schemas and copy data when needed\n - Always run table creation before querying\n\n3. **React Configuration:**\n - All React dependencies must be pinned to 18.2.0\n - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files\n - Rendering issues often come from mismatched React versions\n\n4. **File Handling:**\n - Val Town only supports text files, not binary\n - Use the provided utilities to read files across branches and forks\n - For files in the project, use `readFile` helpers\n\n5. **API Design:**\n - `fetch` handler is the entry point for HTTP vals\n - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`\n\n6. **Development Server Management:**\n - ALWAYS Use the development script to manage the local server lifecycle\n - **Start server:** `./scripts/dev.sh start` or `make dev` or `npm run dev`\n - **Stop server:** `./scripts/dev.sh stop` or `make dev-stop` or `npm run dev:stop`\n - **Check status:** `./scripts/dev.sh status` or `make dev-status` or `npm run dev:status`\n - **Restart server:** `./scripts/dev.sh restart` or `make dev-restart` or `npm run dev:restart`\n - The script handles PID tracking (`.dev-server.pid`) and proper cleanup of all child processes\n - Logs are written to `.dev-server.log`\n - Always use the script to start and stop the server to avoid dangling processes from `deno watch`\n - Server runs on `http://localhost:8000` by default\n - Required Deno permissions: `--allow-net --allow-read --allow-write --allow-import --allow-env`\n\n",[],[664],{"_103":672,"_95":673,"_152":674,"_154":-5,"_155":137,"_156":675,"_158":159,"_105":676,"_100":220,"_161":560,"_163":677,"_164":22,"_165":-5,"_166":678,"_98":679},"b56bd67c-c5f6-11f0-bc08-42dde27851f2","Makefile","657b0f54-c518-11f0-84ae-42dde27851f2",297,["D",1763632384309],".PHONY: dev dev-start dev-stop dev-status dev-restart help\n\nhelp: ## Show this help message\n\t@echo \"Available commands:\"\n\t@grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = \":.*?## \"}; {printf \" \\033[36m%-15s\\033[0m %s\\n\", $$1, $$2}'\n\ndev: dev-start ## Alias for dev-start\n\ndev-start: ## Start the development server\n\t@./scripts/dev.sh start\n\ndev-stop: ## Stop the development server\n\t@./scripts/dev.sh stop\n\ndev-status: ## Show development server status\n\t@./scripts/dev.sh status\n\ndev-restart: ## Restart the development server\n\t@./scripts/dev.sh restart\n\nclear-db: ## Clear the entire database (drop all tables)\n\t@deno run --allow-read --allow-write --allow-net scripts/clear-db.ts\n\nremove-borders: ## Remove black borders from scripts/roles.mp4\n\t@deno run --allow-run --allow-read --allow-write scripts/remove-borders.ts\n\n",[],[673],{"_103":681,"_95":682,"_152":683,"_154":-5,"_155":137,"_156":684,"_158":159,"_105":685,"_100":297,"_161":560,"_163":686,"_164":22,"_165":-5,"_166":687,"_98":688},"657e8530-c518-11f0-ac25-42dde27851f2","README.md","8ad01228-c517-11f0-81e9-42dde27851f2",132,["D",1763536902098],"# Live Talk - Interactive Presentation Tool\n\nAn interactive presentation tool for Last Conference that allows presenters to embed real-time activities (polls, questions, etc.) throughout their talks. Audience members scan a QR code to participate, and responses are displayed in real-time to the presenter.\n\n## Features\n\n- **Real-time Interaction**: Participants join via QR code and respond to activities\n- **Session Persistence**: Participant sessions are stored in localStorage for consistent experience\n- **Multiple Steps**: Presentations can have multiple steps/activities\n- **Poll Widget**: Built-in poll widget with real-time results visualization\n- **Presenter & Participant Modes**: Separate views for presenter and audience\n- **Modern UI**: Clean, responsive design with TailwindCSS\n\n## Tech Stack\n\n- **Backend**: Hono (Deno-compatible web framework)\n- **Database**: SQLite (Val Town standard library)\n- **Frontend**: React 18.2.0 with TypeScript\n- **Styling**: TailwindCSS\n- **Platform**: Val Town / Deno\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # Main Hono app entry point\n│ ├── database/\n│ │ ├── migrations.ts # Database schema setup\n│ │ └── queries.ts # Database query functions\n│ └── routes/\n│ ├── presentations.ts # Presentation CRUD\n│ ├── steps.ts # Step management\n│ ├── sessions.ts # Session handling\n│ ├── responses.ts # Response handling\n│ └── admin.ts # Admin/presenter endpoints\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ ├── components/\n│ │ ├── App.tsx # Main app component\n│ │ ├── PresenterMode.tsx # Presenter view\n│ │ ├── ParticipantMode.tsx # Participant view\n│ │ ├── QRCode.tsx # QR code display\n│ │ └── widgets/\n│ │ ├── PollWidget.tsx # Poll participant view\n│ │ └── PollPresenter.tsx # Poll presenter view\n│ └── utils/\n│ ├── session.ts # Session management (localStorage)\n│ └── api.ts # API client functions\n├── shared/\n│ └── types.ts # TypeScript types/interfaces\n└── server.ts # Local development server\n```\n\n## Local Development\n\nThe app automatically detects the environment and uses:\n- **Local SQLite** (`./live_talk.db`) when running locally (using sql.js)\n- **Val Town SQLite** when deployed to Val Town (detected via `valtown` environment variable)\n\n### Quick Start\n\nUse the development script to manage the server:\n\n```bash\n# Start the server\n./scripts/dev.sh start\n# or\nmake dev\n# or\nnpm run dev\n\n# Check server status\n./scripts/dev.sh status\n# or\nmake dev-status\n# or\nnpm run dev:status\n\n# Stop the server\n./scripts/dev.sh stop\n# or\nmake dev-stop\n# or\nnpm run dev:stop\n\n# Restart the server\n./scripts/dev.sh restart\n# or\nmake dev-restart\n# or\nnpm run dev:restart\n```\n\nThe script handles:\n- Starting the server with all required Deno permissions\n- Process management (PID tracking)\n- Proper cleanup of all child processes when stopping\n- Logging to `.dev-server.log`\n\n### Manual Start (Alternative)\n\nIf you prefer to start manually:\n\n```bash\ndeno run --allow-net --allow-read --allow-write --allow-import --allow-env --watch server.ts\n```\n\n### Access the App\n\n- Open `http://localhost:8000` in your browser\n- The server will automatically reload on file changes\n- A local SQLite database file (`live_talk.db`) will be created automatically\n- Database operations work fully locally without Val Town credentials\n\n**Note**: The local SQLite uses sql.js (pure JavaScript SQLite) which loads WASM files. The first request might take a moment to initialize.\n\n## Usage\n\n### Creating a Presentation\n\nUse the API to create a presentation:\n\n```bash\ncurl -X POST http://localhost:8000/api/presentations \\\n -H \"Content-Type: application/json\" \\\n -d '{\n \"name\": \"My Awesome Talk\",\n \"presenter\": \"John Doe\",\n \"talk_deck_link\": \"https://example.com/slides\"\n }'\n```\n\n### Adding Steps\n\nCreate steps (activities) for your presentation:\n\n```bash\ncurl -X POST http://localhost:8000/api/steps/presentation/1 \\\n -H \"Content-Type: application/json\" \\\n -d '{\n \"widget_type\": \"poll\",\n \"widget_config\": {\n \"question\": \"What is your favourite programming language?\",\n \"options\": [\"JavaScript\", \"Python\", \"Rust\", \"Go\"]\n }\n }'\n```\n\n### Presenter View\n\nNavigate to `/present/:presentationId` to access the presenter view:\n- See QR code for participants to join\n- View real-time responses\n- Activate/deactivate steps\n- Navigate between steps\n\nExample: `http://localhost:8000/present/1`\n\n### Participant View\n\nParticipants navigate to `/join/:presentationId`:\n- Automatically assigned a session ID (stored in localStorage)\n- See the currently active step\n- Submit responses\n- Page auto-updates when presenter changes steps\n\nExample: `http://localhost:8000/join/1`\n\n## API Endpoints\n\n### Presentations\n- `GET /api/presentations` - List all presentations\n- `POST /api/presentations` - Create new presentation\n- `GET /api/presentations/:id` - Get presentation details\n- `PUT /api/presentations/:id` - Update presentation\n\n### Steps\n- `GET /api/steps/presentation/:id` - Get all steps for a presentation\n- `POST /api/steps/presentation/:id` - Create new step\n- `GET /api/steps/:id` - Get step details\n- `PUT /api/steps/:id` - Update step\n- `PUT /api/steps/:id/activate` - Activate a step\n- `GET /api/steps/presentation/:id/active` - Get active step\n\n### Sessions\n- `POST /api/sessions` - Create or get existing session\n- `GET /api/sessions/:id` - Get session details\n\n### Responses\n- `POST /api/responses` - Submit a response\n- `GET /api/responses/step/:id` - Get all responses for a step\n\n## Widget System\n\nThe system is designed to be extensible. Currently supports:\n\n- **Poll Widget**: Multiple choice questions with real-time results\n\nFuture widgets can be added by:\n1. Creating participant component in `frontend/components/widgets/`\n2. Creating presenter component in `frontend/components/widgets/`\n3. Adding widget type handling in `ParticipantMode.tsx` and `PresenterMode.tsx`\n\n## Database Schema\n\n- **presentations**: Presentation metadata\n- **steps**: Steps/activities within presentations\n- **sessions**: Participant sessions\n- **responses**: Participant responses to steps\n\nSee `backend/database/migrations.ts` for full schema details.\n\n## Deployment to Val Town\n\n1. Upload all files to a Val Town project\n2. **The HTTP trigger file is `app.http.ts`** - this is the main entry point for Val Town\n3. Val Town will automatically detect `app.http.ts` as an HTTP trigger (because it has `http` in the filename)\n4. Ensure all dependencies are available via esm.sh or Val Town standard libraries\n5. The app will automatically run migrations on startup\n6. Your app will be accessible at the URL provided by Val Town\n\n**Note**: For local development, use `server.ts` which imports from `backend/index.ts`. For Val Town deployment, use `app.http.ts` directly.\n\n## License\n\nBuilt for Last Conference\n\n",[],[682],{"_103":690,"_95":691,"_152":692,"_154":-5,"_155":137,"_156":693,"_158":159,"_105":694,"_100":297,"_161":695,"_163":696,"_164":22,"_165":96,"_166":697,"_98":698},"b3adde36-c51d-11f0-86bc-42dde27851f2","app.http.ts","8ad50288-c517-11f0-9328-42dde27851f2",187,["D",1763539180765],"http","import { createApp } from \"./backend/app.ts\";\nimport {\n readFile,\n serveFile,\n} from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\n// Create app with all routes registered in one place\nconst app = await createApp({\n fileUtils: { readFile, serveFile },\n runMigrationsOnStartup: true,\n});\n\n// This is the HTTP trigger entry point for Val Town\nexport default app.fetch;\n",[],[691],{"_103":700,"_95":701,"_152":702,"_154":-5,"_155":137,"_156":703,"_158":159,"_105":704,"_100":375,"_161":560,"_163":705,"_164":22,"_165":-5,"_166":706,"_98":707},"e71fe6e2-c518-11f0-90c4-42dde27851f2","deno.json","1830aa96-c514-11f0-bc8a-42dde27851f2",137,["D",1763537119420],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/98f62cee78e85bfc47c62ed703777c6bc8794f1c/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": true,\n \"types\": [\"https://www.val.town/types/valtown.d.ts\"],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"include\": [\"deno:/https/esm.town/**/*\"],\n \"rules\": {\n \"exclude\": [\"no-explicit-any\"]\n }\n },\n \"nodeModulesDir\": \"auto\",\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[701],{"_103":709,"_95":710,"_152":711,"_154":-5,"_155":137,"_156":712,"_158":159,"_105":713,"_100":32,"_161":695,"_163":714,"_164":22,"_165":-5,"_166":715,"_98":716},"8ac93c64-c517-11f0-87d0-42dde27851f2","hello.http.ts","8ac93d0e-c517-11f0-87d0-42dde27851f2",99,["D",1763536535139],"export default async function (req: Request) {\n return new Response(\"Hello World -- GOOD\");\n}\n",[],[710],{"_103":718,"_95":719,"_152":720,"_154":-5,"_155":137,"_156":721,"_158":159,"_105":722,"_100":220,"_161":560,"_163":723,"_164":22,"_165":-5,"_166":724,"_98":725},"b58423ee-c5f6-11f0-ae57-42dde27851f2","package.json","4d2bac42-c518-11f0-a4f2-42dde27851f2",298,["D",1763632384638],"{\n \"name\": \"live-talk\",\n \"version\": \"1.0.0\",\n \"scripts\": {\n \"dev\": \"./scripts/dev.sh start\",\n \"dev:stop\": \"./scripts/dev.sh stop\",\n \"dev:status\": \"./scripts/dev.sh status\",\n \"dev:restart\": \"./scripts/dev.sh restart\"\n }\n}\n\n\n\n\n",[],[719],{"_103":727,"_95":728,"_152":729,"_154":-5,"_155":137,"_156":730,"_158":159,"_105":731,"_100":220,"_161":560,"_163":732,"_164":22,"_165":-5,"_166":733,"_98":734},"4e4e5afa-c51a-11f0-8370-42dde27851f2","plan.md","230991f6-c516-11f0-973e-42dde27851f2",152,["D",1763537722036],"# Live Talk - Interactive Presentation Tool\n\n## Overview\nA real-time interactive presentation tool for Last Conference that allows presenters to embed activities (polls, questions, etc.) throughout their talks. Audience members scan a QR code to participate, and responses are displayed in real-time to the presenter.\n\n## Core Features\n\n### For Presenters\n- Create presentations with multiple steps\n- Each step contains a widget (poll, question, etc.)\n- Presenter view shows QR code and live results\n- Switch between steps during the presentation\n- View aggregated responses from participants\n\n### For Participants\n- Scan QR code to join\n- Get assigned a session ID (stored in localStorage)\n- See current step's widget/activity\n- Submit responses (answers, votes, etc.)\n- Responses are tied to their session ID\n\n## Data Model\n\n### Presentations\n- `id` (INTEGER PRIMARY KEY)\n- `name` (TEXT) - Name of the talk\n- `presenter` (TEXT) - Presenter name\n- `talk_deck_link` (TEXT) - Link to presentation slides\n- `created_at` (TEXT) - Timestamp\n\n### Steps\n- `id` (INTEGER PRIMARY KEY)\n- `presentation_id` (INTEGER) - Foreign key to presentations\n- `step_number` (INTEGER) - Order within presentation\n- `widget_type` (TEXT) - Type of widget (poll, question, etc.)\n- `widget_config` (TEXT) - JSON configuration for the widget\n- `is_active` (INTEGER) - Whether this step is currently active (0 or 1)\n\n### Sessions (Participants)\n- `id` (TEXT PRIMARY KEY) - Session ID (UUID)\n- `presentation_id` (INTEGER) - Which presentation they're in\n- `created_at` (TEXT) - Timestamp\n\n### Responses\n- `id` (INTEGER PRIMARY KEY)\n- `session_id` (TEXT) - Foreign key to sessions\n- `step_id` (INTEGER) - Foreign key to steps\n- `response_data` (TEXT) - JSON data of the response\n- `created_at` (TEXT) - Timestamp\n\n## Architecture\n\n### Backend Structure\n```\nbackend/\n├── index.ts # Main Hono app entry point\n├── database/\n│ ├── migrations.ts # Database schema setup\n│ └── queries.ts # Database query functions\n└── routes/\n ├── presentations.ts # Presentation CRUD\n ├── steps.ts # Step management\n ├── sessions.ts # Session handling\n ├── responses.ts # Response handling\n └── admin.ts # Admin/presenter endpoints\n```\n\n### Frontend Structure\n```\nfrontend/\n├── index.html # Main HTML template\n├── index.tsx # Frontend entry point\n├── components/\n│ ├── App.tsx # Main app component\n│ ├── PresenterMode.tsx # Presenter view\n│ ├── ParticipantMode.tsx # Participant view\n│ ├── QRCode.tsx # QR code display\n│ └── widgets/\n│ ├── PollWidget.tsx # Poll widget\n│ ├── PollPresenter.tsx # Poll presenter view\n│ └── [OtherWidgets].tsx # Future widgets\n└── utils/\n ├── session.ts # Session management (localStorage)\n └── api.ts # API client functions\n```\n\n### Shared\n```\nshared/\n└── types.ts # TypeScript types/interfaces\n```\n\n## Widget System\n\n### Widget Types\n1. **Poll** - Multiple choice question with real-time results\n2. **Open Question** - Text input with responses displayed\n3. **Word Cloud** - Collect words/phrases\n4. **Rating** - Star or scale rating\n\n### Widget Interface\nEach widget has:\n- **Participant Component**: What participants see and interact with\n- **Presenter Component**: What presenter sees (results, QR code)\n- **Config Schema**: JSON schema for widget configuration\n- **Response Schema**: JSON schema for response data\n\n## API Endpoints\n\n### Presentations\n- `GET /api/presentations` - List all presentations\n- `POST /api/presentations` - Create new presentation\n- `GET /api/presentations/:id` - Get presentation details\n- `PUT /api/presentations/:id` - Update presentation\n\n### Steps\n- `GET /api/presentations/:id/steps` - Get all steps for a presentation\n- `POST /api/presentations/:id/steps` - Create new step\n- `PUT /api/steps/:id` - Update step\n- `PUT /api/steps/:id/activate` - Activate a step (deactivates others)\n- `GET /api/steps/active` - Get currently active step\n\n### Sessions\n- `POST /api/sessions` - Create or get existing session\n- `GET /api/sessions/:id` - Get session details\n\n### Responses\n- `POST /api/responses` - Submit a response\n- `GET /api/steps/:id/responses` - Get all responses for a step\n\n### Admin/Presenter\n- `GET /present/:presentationId/step/:stepNumber` - Presenter view for a step\n- `GET /join/:presentationId` - Participant view (redirects to active step)\n\n## Implementation Plan\n\n### Phase 1: Foundation ✅\n- [x] Basic HTTP route setup\n- [x] Local development server with watch mode\n\n### Phase 2: Database & Backend Core ✅\n- [x] Set up SQLite database schema\n- [x] Create database migration functions\n- [x] Implement presentation CRUD endpoints\n- [x] Implement step management endpoints\n- [x] Implement session management\n- [x] Implement response handling\n\n### Phase 3: Frontend Core ✅\n- [x] Set up React frontend structure\n- [x] Create session management (localStorage)\n- [x] Build API client utilities\n- [x] Create routing system\n- [x] Build basic UI layout\n\n### Phase 4: Widget System ✅\n- [x] Create widget framework/interface\n- [x] Implement Poll widget (participant + presenter views)\n- [x] Add QR code generation/display\n- [x] Real-time updates (polling or WebSocket if needed)\n\n### Phase 5: Presentation Flow ✅\n- [x] Build presenter mode UI\n- [x] Build participant mode UI\n- [x] Implement step activation/deactivation\n- [x] Add navigation between steps\n\n### Phase 6: Polish ✅\n- [x] Modern UI styling (TailwindCSS)\n- [x] Last Conference branding\n- [x] Error handling\n- [x] Loading states\n- [x] Mobile responsiveness\n\n## Technical Decisions\n\n### Session Management\n- Client-side: UUID stored in localStorage\n- Server-side: Store session with presentation_id\n- If session exists in localStorage, reuse it; otherwise create new\n\n### Real-time Updates\n- Start with polling (simpler, works everywhere)\n- Can upgrade to WebSocket later if needed\n\n### QR Code Generation\n- Use a library like `qrcode` via esm.sh\n- QR code contains URL: `/join/:presentationId`\n- Participant visits URL, gets session ID, redirected to active step\n\n### Widget Configuration\n- Store as JSON in `widget_config` column\n- Each widget type has its own schema\n- Validate on backend before saving\n\n## UI/UX Considerations\n\n### Presenter View\n- Large QR code prominently displayed\n- Current step widget/results\n- Navigation to next/previous step\n- Response count indicator\n- Clean, minimal design\n\n### Participant View\n- Current step's widget\n- Clear call-to-action\n- Loading states\n- Success feedback after submission\n- Mobile-first design\n\n### Design Theme\n- Modern, clean aesthetic\n- Last Conference branding\n- Accessible colour contrast\n- Smooth animations/transitions\n\n## Future Enhancements\n- WebSocket for real-time updates\n- More widget types\n- Export responses as CSV\n- Presentation templates\n- Analytics dashboard\n- Multi-presentation management\n\n",[],[728],{"_103":736,"_95":737,"_152":738,"_154":-5,"_155":137,"_156":739,"_158":159,"_105":740,"_100":741,"_161":182,"_163":742,"_164":22,"_165":-5,"_166":743,"_98":744},"e486fbd8-c517-11f0-bf0c-42dde27851f2","server.ts","9b58f1f8-c514-11f0-8731-42dde27851f2",112,["D",1763536685736],5,"import handler from \"./backend/index.ts\";\n\nconst port = 8000;\nconsole.log(`Server running at http://localhost:${port}`);\nconsole.log(`Using local SQLite database: ./live_talk.db`);\n\nDeno.serve({ port }, handler);\n",[],[737],"files",[149,168,175,186,196,207,214,224,234,244,254,264,274,281,291,301,312,319,326,333,342,351,360,369,379,388,397,406,416,425,434,443,452,462,471,480,489,498,508,517,528,534,544,554,564,574,581,590,599,609,616,627,636,644,653,662,671,680,689,699,708,717,726,735],"counts",{"_749":32,"_750":375,"_751":32,"_752":753},"pulls","branches","forks","envVars",{"_754":32,"_755":32},"count","emptyCount","contents",[],{"_103":637,"_95":99,"_152":638,"_154":-5,"_155":137,"_156":639,"_158":159,"_105":759,"_100":307,"_161":560,"_163":641,"_164":22,"_165":-5,"_98":760},["D",1763800851510],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_93":94,"_95":96,"_97":43,"_98":99,"_101":769,"_560":774,"_777":778,"_826":827,"_839":-7,"_840":32,"_841":22},{"_103":104,"_95":96,"_105":770,"_107":-5,"_108":22,"_109":110,"_111":72,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":771,"_131":772,"_134":773,"_146":22},["D",1763534812047],{"_93":94,"_129":130},{"_93":94,"_133":130,"_14":113},{"_100":136,"_95":43,"_103":137,"_138":104,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},{"_103":637,"_95":99,"_152":638,"_154":-5,"_155":137,"_156":639,"_158":159,"_105":775,"_100":307,"_161":560,"_163":641,"_164":22,"_165":-5,"_98":776},["D",1763800851510],[99],"history",[779,781,786,791,796,801,806,811,816,821],{"_103":637,"_155":137,"_152":638,"_95":99,"_163":641,"_161":560,"_100":307,"_154":-5,"_105":780,"_156":639,"_165":-5},["D",1763800851510],{"_103":782,"_155":137,"_152":638,"_95":99,"_163":783,"_161":560,"_100":260,"_154":-5,"_105":784,"_156":785,"_165":-5},"b1576bd8-c5ff-11f0-b6ca-42dde27851f2","91002\n",["D",1763636243104],324,{"_103":787,"_155":137,"_152":638,"_95":99,"_163":788,"_161":560,"_100":230,"_154":-5,"_105":789,"_156":790,"_165":-5},"c7216986-c5fb-11f0-b195-42dde27851f2","17246\n",["D",1763634561666],315,{"_103":792,"_155":137,"_152":638,"_95":99,"_163":793,"_161":560,"_100":250,"_154":-5,"_105":794,"_156":795,"_165":-5},"e403535a-c5f8-11f0-9894-42dde27851f2","63326\n",["D",1763633321639],304,{"_103":797,"_155":137,"_152":638,"_95":99,"_163":798,"_161":560,"_100":741,"_154":-5,"_105":799,"_156":800,"_165":-5},"f48bb0e2-c539-11f0-a933-42dde27851f2","44323\n",["D",1763551315501],266,{"_103":802,"_155":137,"_152":638,"_95":99,"_163":803,"_161":560,"_100":297,"_154":-5,"_105":804,"_156":805,"_165":-5},"aae6b4ca-c537-11f0-9c84-42dde27851f2","72507\n",["D",1763550332947],256,{"_103":807,"_155":137,"_152":638,"_95":99,"_163":808,"_161":560,"_100":240,"_154":-5,"_105":809,"_156":810,"_165":-5},"bfd722a6-c51f-11f0-804c-42dde27851f2","77174\n",["D",1763540060160],209,{"_103":812,"_155":137,"_152":638,"_95":99,"_163":813,"_161":560,"_100":220,"_154":-5,"_105":814,"_156":815,"_165":-5},"f0be4b24-c51a-11f0-b157-42dde27851f2","18732\n",["D",1763537994723],165,{"_103":817,"_155":137,"_152":638,"_95":99,"_163":818,"_161":560,"_100":375,"_154":-5,"_105":819,"_156":820,"_165":-5},"5af5a6e2-c519-11f0-a03c-42dde27851f2","98171\n",["D",1763537313932],142,{"_103":822,"_155":137,"_152":638,"_95":99,"_163":823,"_161":560,"_100":32,"_154":-5,"_105":824,"_156":825,"_165":-5},"e70390e6-c518-11f0-b5b5-42dde27851f2","91883\n",["D",1763537119409],134,"versions",[828,830,831,832,833,834,835,836,837,838],{"_560":779,"_829":781},"previous",{"_560":781,"_829":786},{"_560":786,"_829":791},{"_560":791,"_829":796},{"_560":796,"_829":801},{"_560":801,"_829":806},{"_560":806,"_829":811},{"_560":811,"_829":816},{"_560":816,"_829":821},{"_560":821,"_829":-5},"versionNumber","page","hasNext","actionData","errors"]

fwfben

live-talk

History for .dev-server.pid