e.stopPropagation()}>\n

{title}

\n \n

{children}

\n );\n};\n\ninterface AlertModalProps { isOpen: boolean; onClose: () => void; message: string; isError?: boolean; }\nconst AlertModal: React.FC = ({ isOpen, onClose, message, isError = false }) => {\n if (!isOpen) return null;\n return (\n

{isError ? : }

{isError ? 'Error' : 'Success'}

{message}

\n \n

\n );\n};\n\ninterface ConfirmModalProps { isOpen: boolean; onClose: () => void; onConfirm: () => void; message: string; }\nconst ConfirmModal: React.FC = ({ isOpen, onClose, onConfirm, message }) => {\n if (!isOpen) return null;\n return (\n

Confirm

{message}

\n \n \n

\n );\n};\n\n// ============================================\n// CHAT LIST ITEM\n// ============================================\n\ninterface ChatListItemProps { chat: Chat; isActive: boolean; isPinned: boolean; onClick: () => void; }\nconst ChatListItem: React.FC = ({ chat, isActive, isPinned, onClick }) => {\n const last = chat.messages[chat.messages.length - 1];\n const lastText = last ? truncateString(last.content, 40) : 'No messages yet';\n return (\n

\n {chat.image\n ? $\"\"$ \n :

{chat.name.charAt(0).toUpperCase()}

}\n

{chat.name}

\n {chat.isNotes && NOTES}\n {!chat.isNotes && (chat.model || 'auto-mode') === 'auto-mode' && AUTO}\n {isPinned && 📌}\n

{lastText}

{formatDate(chat.updatedAt)}

\n );\n};\n\n// ============================================\n// MAIN APP COMPONENT\n// ============================================\n\nconst CheapRouter: React.FC = () => {\n const [chats, setChats] = useState([]);\n const [activeChat, setActiveChat] = useState(null);\n const [pinnedChats, setPinnedChats] = useState([]);\n const [selectedFiles, setSelectedFiles] = useState([]);\n const [currentModel, setCurrentModel] = useState('auto-mode');\n const [messageInput, setMessageInput] = useState('');\n const [searchQuery, setSearchQuery] = useState('');\n const [isTyping, setIsTyping] = useState(false);\n const [sidebarOpen, setSidebarOpen] = useState(true);\n const [isMobile, setIsMobile] = useState(false);\n const [user, setUser] = useState(null);\n const [activationCodeInput, setActivationCodeInput] = useState('');\n const [settingsOpen, setSettingsOpen] = useState(false);\n const [chatMenuOpen, setChatMenuOpen] = useState(false);\n const [upgradeOpen, setUpgradeOpen] = useState(false);\n const [alertModal, setAlertModal] = useState<{ isOpen: boolean; message: string; isError: boolean }>({ isOpen: false, message: '', isError: false });\n const [confirmModal, setConfirmModal] = useState<{ isOpen: boolean; message: string; onConfirm: () => void }>({ isOpen: false, message: '', onConfirm: () => {} });\n const [promptModal, setPromptModal] = useState<{ isOpen: boolean; title: string; message: string; defaultValue: string; onConfirm: (v: string) => void }>({ isOpen: false, title: '', message: '', defaultValue: '', onConfirm: () => {} });\n const [prefs, setPrefs] = useState({ theme: 'system', sendOnEnter: true, systemPrompt: '' });\n\n const messagesEndRef = useRef(null);\n const fileInputRef = useRef(null);\n const textareaRef = useRef(null);\n\n useEffect(() => {\n const init = async () => {\n await db.init();\n const ip = '127.0.0.1';\n let u = await db.getUserByIp(ip);\n if (!u) u = await db.createUser(ip);\n setUser(u);\n const userChats = await db.getChats(u.id);\n const userPinned = await db.getPinnedChats(u.id);\n if (userChats.length === 0) {\n const dc: Chat = { id: generateUniqueId(), name: 'New Chat', messages: [], createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), model: 'auto-mode', isNotes: false };\n const dn: Chat = { id: generateUniqueId(), name: 'Welcome Notes', messages: [{ role: 'user', content: '# Welcome to Notes!\\n\\nUse this for quick jotting, ideas, reminders.\\nSupports **Markdown** for rich text.', timestamp: new Date().toISOString() }], createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), model: 'notes', isNotes: true };\n const initial = [dn, dc]; setChats(initial); setActiveChat(dc.id); await db.saveChats(u.id, initial);\n } else { setChats(userChats); setPinnedChats(userPinned); setActiveChat(userChats[0]?.id || null); }\n const checkMobile = () => { const m = window.innerWidth < 768; setIsMobile(m); setSidebarOpen(!m); };\n checkMobile(); window.addEventListener('resize', checkMobile);\n return () => window.removeEventListener('resize', checkMobile);\n };\n init();\n }, []);\n\n const applyTheme = (theme: string) => { const dark = theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches); document.documentElement.classList.toggle('dark', dark); };\n useEffect(() => { applyTheme(prefs.theme); }, [prefs.theme]);\n useEffect(() => { messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }); }, [chats, isTyping]);\n useEffect(() => { if (textareaRef.current) { textareaRef.current.style.height = 'auto'; textareaRef.current.style.height = Math.min(textareaRef.current.scrollHeight, 120) + 'px'; } }, [messageInput]);\n\n const saveChats = async (c: Chat[]) => { setChats(c); if (user) await db.saveChats(user.id, c); };\n const savePinned = async (p: string[]) => { setPinnedChats(p); if (user) await db.savePinnedChats(user.id, p); };\n\n const createNewChat = () => {\n const c: Chat = { id: generateUniqueId(), name: 'New Chat', messages: [], createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), model: currentModel, isNotes: false };\n saveChats([c, ...chats]); setActiveChat(c.id); if (isMobile) setSidebarOpen(false);\n setTimeout(() => textareaRef.current?.focus(), 100);\n };\n\n const createNewNotes = () => {\n const n: Chat = { id: generateUniqueId(), name: 'New Notes', messages: [], createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), model: 'notes', isNotes: true };\n saveChats([n, ...chats]); setActiveChat(n.id); if (isMobile) setSidebarOpen(false);\n setTimeout(() => textareaRef.current?.focus(), 100);\n };\n\n const selectChat = (id: string) => { setActiveChat(id); if (isMobile) setSidebarOpen(false); };\n\n const renameChat = () => {\n const chat = chats.find(c => c.id === activeChat); if (!chat) return;\n setPromptModal({ isOpen: true, title: 'Rename Chat', message: 'Enter new name:', defaultValue: chat.name, onConfirm: (name) => { if (name && name !== chat.name) saveChats(chats.map(c => c.id === activeChat ? { ...c, name, updatedAt: new Date().toISOString() } : c)); setPromptModal(p => ({ ...p, isOpen: false })); } });\n setChatMenuOpen(false);\n };\n\n const deleteChat = () => {\n setConfirmModal({ isOpen: true, message: 'Delete this chat? This cannot be undone.', onConfirm: async () => {\n const updated = chats.filter(c => c.id !== activeChat);\n await saveChats(updated); await savePinned(pinnedChats.filter(id => id !== activeChat));\n if (updated.length === 0) { const d: Chat = { id: generateUniqueId(), name: 'New Chat', messages: [], createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), model: 'auto-mode', isNotes: false }; await saveChats([d]); setActiveChat(d.id); }\n else setActiveChat(updated[0].id);\n setConfirmModal(p => ({ ...p, isOpen: false })); setChatMenuOpen(false);\n }});\n };\n\n const togglePinChat = () => { if (!activeChat) return; const isPinned = pinnedChats.includes(activeChat); savePinned(isPinned ? pinnedChats.filter(id => id !== activeChat) : [...pinnedChats, activeChat]); };\n\n const exportChat = () => {\n const chat = chats.find(c => c.id === activeChat); if (!chat) return;\n let txt = `Chat: ${chat.name}\\n\\n`;\n chat.messages.forEach(m => { txt += `[${new Date(m.timestamp).toLocaleString()}] ${m.role === 'user' ? 'You' : 'AI'}${m.bot ? ` (${m.bot})` : ''}: ${m.content}\\n\\n`; });\n const url = URL.createObjectURL(new Blob([txt], { type: 'text/plain' }));\n const a = document.createElement('a'); a.href = url; a.download = `chat_${chat.name.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.txt`; a.click();\n URL.revokeObjectURL(url);\n setAlertModal({ isOpen: true, message: `\"${chat.name}\" downloaded.`, isError: false });\n };\n\n const clearAllChats = () => {\n setConfirmModal({ isOpen: true, message: 'Delete ALL chats? This cannot be undone.', onConfirm: async () => {\n const d: Chat = { id: generateUniqueId(), name: 'New Chat', messages: [], createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(), model: 'auto-mode', isNotes: false };\n await saveChats([d]); await savePinned([]); setActiveChat(d.id);\n setConfirmModal(p => ({ ...p, isOpen: false })); setSettingsOpen(false);\n }});\n };\n\n const exportAllChats = () => {\n const url = URL.createObjectURL(new Blob([JSON.stringify({ chats, pinnedChats, version: '1.0' }, null, 2)], { type: 'application/json' }));\n const a = document.createElement('a'); a.href = url; a.download = `backup_${new Date().toISOString().split('T')[0]}.json`; a.click(); URL.revokeObjectURL(url);\n };\n\n const importChats = (e: React.ChangeEvent) => {\n const file = e.target.files?.[0]; if (!file) return;\n const reader = new FileReader();\n reader.onload = async (ev) => {\n try {\n const data = JSON.parse(ev.target?.result as string);\n if (!Array.isArray(data.chats) || !Array.isArray(data.pinnedChats)) throw new Error('Invalid backup format');\n setConfirmModal({ isOpen: true, message: `Import ${data.chats.length} chats?`, onConfirm: async () => {\n await saveChats([...chats, ...data.chats]); await savePinned([...new Set([...pinnedChats, ...data.pinnedChats])]);\n setAlertModal({ isOpen: true, message: `Imported ${data.chats.length} chats.`, isError: false });\n setConfirmModal(p => ({ ...p, isOpen: false }));\n }});\n } catch (err: any) { setAlertModal({ isOpen: true, message: `Import error: ${err.message}`, isError: true }); }\n };\n reader.readAsText(file); e.target.value = '';\n };\n\n const handleFileSelect = (e: React.ChangeEvent) => {\n const files = e.target.files; if (!files) return;\n for (const file of Array.from(files)) {\n if (file.size > 10 * 1024 * 1024) { setAlertModal({ isOpen: true, message: `\"${file.name}\" exceeds 10 MB.`, isError: true }); continue; }\n const reader = new FileReader();\n reader.onload = (ev) => setSelectedFiles(prev => [...prev, { name: file.name, type: file.type || 'application/octet-stream', size: file.size, dataURL: ev.target?.result as string }]);\n reader.readAsDataURL(file);\n }\n e.target.value = '';\n };\n\n const applyActivationCode = async () => {\n if (!user || !activationCodeInput.trim()) return;\n const ok = await db.applyActivationCode(user.ipAddress, activationCodeInput.trim());\n if (ok) { const u = await db.getUserByIp(user.ipAddress); if (u) { setUser(u); setAlertModal({ isOpen: true, message: `Code applied! ${u.freeMessagesRemaining} free messages added.`, isError: false }); setActivationCodeInput(''); } }\n else setAlertModal({ isOpen: true, message: 'Invalid activation code.', isError: true });\n };\n\n const handleUpgrade = async () => {\n if (!user) return;\n const url = await createStripeCheckoutSession(user.id);\n if (url) window.open(url, '_blank'); else setAlertModal({ isOpen: true, message: 'Failed to create checkout session.', isError: true });\n };\n\n const sendMessage = async () => {\n const text = messageInput.trim();\n if (!text && selectedFiles.length === 0) return;\n if (user && !await db.canUseMessage(user.ipAddress)) { setUpgradeOpen(true); return; }\n if (!activeChat) { createNewChat(); return; }\n const chat = chats.find(c => c.id === activeChat); if (!chat) return;\n if (!chat.isNotes && user) {\n if (!await db.useMessage(user.ipAddress)) { setUpgradeOpen(true); return; }\n const u = await db.getUserByIp(user.ipAddress); if (u) setUser(u);\n }\n const fileSnapshot = [...selectedFiles];\n const userMsg: ChatMessage = { role: 'user', content: text, timestamp: new Date().toISOString(), files: fileSnapshot };\n const updatedChat = { ...chat, messages: [...chat.messages, userMsg], updatedAt: new Date().toISOString() };\n if (chat.messages.length === 0 && text) updatedChat.name = truncateString(text, 30);\n await saveChats(chats.map(c => c.id === activeChat ? updatedChat : c));\n setMessageInput(''); setSelectedFiles([]);\n if (chat.isNotes) return;\n setIsTyping(true);\n const chatModel = chat.model || currentModel;\n const bot = chatModel === 'auto-mode' ? detectIntentAndBot(text, fileSnapshot).bot : chatModel;\n setTimeout(async () => {\n const aiMsg: ChatMessage = { role: 'assistant', content: `Hello! I'm **${bot}**. I received:\\n\\n> ${escapeHTML(text)}\\n\\n*(Demo — connect to Poe API for real responses.)*`, timestamp: new Date().toISOString(), bot, status: 'complete', attachmentUrls: [] };\n const finalChat = { ...updatedChat, messages: [...updatedChat.messages, aiMsg], updatedAt: new Date().toISOString() };\n await saveChats(chats.map(c => c.id === activeChat ? finalChat : c));\n setIsTyping(false);\n }, 1000 + Math.random() * 1000);\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key !== 'Enter') return;\n if (prefs.sendOnEnter ? !e.shiftKey : (e.ctrlKey || e.metaKey)) { e.preventDefault(); sendMessage(); }\n };\n\n const getModelDisplayName = (v: string) => {\n if (v === 'notes') return 'Notes'; if (v === 'auto-mode') return 'Router';\n for (const o of MODEL_OPTIONS) { if ('options' in o && o.options) { const f = o.options.find((x: any) => x.value === v); if (f) return f.label; } else if ((o as any).value === v) return (o as any).label; }\n return v;\n };\n\n const activeChatData = chats.find(c => c.id === activeChat);\n const filteredChats = chats.filter(c => !searchQuery || c.name.toLowerCase().includes(searchQuery.toLowerCase()) || c.messages.some(m => m.content.toLowerCase().includes(searchQuery.toLowerCase())));\n const pinnedFiltered = filteredChats.filter(c => pinnedChats.includes(c.id));\n const regularFiltered = filteredChats.filter(c => !pinnedChats.includes(c.id));\n const renderMsg = (content: string, isUser: boolean) => isUser ?

{content}

;\n const routingPreview = () => currentModel !== 'auto-mode' ? '' : detectIntentAndBot(messageInput, selectedFiles).bot;\n\n return (\n

\n \n

\n {/* Sidebar */}\n

Cheap-Router

\n \n \n \n

\n setSearchQuery(e.target.value)} placeholder=\"Search chats…\" className=\"w-full rounded-lg border border-gray-300 dark:border-gray-600 pl-10 pr-4 py-2 bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary text-base\" />\n

\n {user && (\n

\n {user.freeMessagesRemaining > 0 ? {user.freeMessagesRemaining} free messages : user.subscriptionStatus === 'active' ? {user.monthlyMessageLimit - user.monthlyMessagesUsed} / {user.monthlyMessageLimit} messages : No messages remaining}\n \n

\n )}\n

\n {pinnedFiltered.length > 0 && <>

Pinned

{pinnedFiltered.map(c => selectChat(c.id)} />)}}\n {regularFiltered.length > 0 && pinnedFiltered.length > 0 &&

Chats

}\n {regularFiltered.map(c => selectChat(c.id)} />)}\n {filteredChats.length === 0 &&

No chats found

}\n

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

\n {!activeChatData ? (\n

Welcome to Cheap-Router

Access 100+ AI models from Poe in one unified interface.

Text Chat

Image Gen

Video Gen

Notes

\n \n \n

\n ) : (\n

\n {/* Header */}\n

\n {isMobile && }\n

\n {activeChatData.image ? $\"\"$ : {activeChatData.name.charAt(0).toUpperCase()}}\n

{activeChatData.name}

\n \n {activeChatData.isNotes ? 'Local Notes' : getModelDisplayName(activeChatData.model)}\n {(activeChatData.model || currentModel) === 'auto-mode' && !activeChatData.isNotes && AUTO}\n {activeChatData.isNotes && NOTES}\n

\n \n \n \n \n

\n )}\n \n

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

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

\n {msg.role !== 'user' &&

{activeChatData.isNotes ? 'N' : 'A'}

}\n

\n {msg.role !== 'user' && msg.bot && !activeChatData.isNotes &&

via {msg.bot}

}\n

{renderMsg(msg.content, msg.role === 'user')}

\n {msg.files && msg.files.length > 0 && (\n

\n {msg.files.map((f, i) => f.type.startsWith('image/') ?

: {f.name})}\n

\n )}\n

{formatTime(msg.timestamp)}

\n {msg.role === 'user' &&

}\n

\n ))}\n {isTyping && (\n

\n )}\n

\n\n {/* File Preview */}\n {selectedFiles.length > 0 && (\n

Attached Files

\n \n

\n {selectedFiles.map((f, idx) => (\n

\n {f.type.startsWith('image/') ?

📄

}\n

{f.name}
({(f.size / 1024).toFixed(1)} KB)

\n \n

\n ))}\n

\n )}\n\n {/* Input Area */}\n

\n {!activeChatData.isNotes && (\n

\n 🤖 Model:\n \n

\n )}\n

\n {!activeChatData.isNotes && }\n

setMessageInput(e.target.value)} onKeyDown={handleKeyDown} placeholder={prefs.sendOnEnter ? \"Type a message… (Shift+Enter for new line)\" : \"Type a message… (Ctrl+Enter to send)\"} rows={1} className=\"w-full rounded-lg border border-gray-300 dark:border-gray-600 py-2 px-4 resize-none bg-gray-50 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary text-base\" />\n                    </div>\n                    <button onClick={sendMessage} disabled={!messageInput.trim() && selectedFiles.length === 0} className=\"p-2 bg-primary hover:bg-primary-dark text-white rounded-full disabled:opacity-50 disabled:cursor-not-allowed transition-colors mb-1\"><Icons.PaperPlane /></button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n\n      {/* Settings Modal */}\n      <Modal isOpen={settingsOpen} onClose={() => setSettingsOpen(false)} title=\"Settings\">\n        <div className=\"mb-6\">\n          <h3 className=\"text-lg font-medium mb-3 border-b border-gray-200 dark:border-gray-700 pb-2\">Preferences</h3>\n          <div className=\"flex items-center justify-between mb-4\">\n            <label className=\"text-sm font-medium\">Theme</label>\n            <select value={prefs.theme} onChange={e => setPrefs({ ...prefs, theme: e.target.value as any })} className=\"border border-gray-300 rounded-md py-1 px-2 text-sm bg-white dark:bg-gray-700 dark:border-gray-600\">\n              <option value=\"system\">System</option><option value=\"light\">Light</option><option value=\"dark\">Dark</option>\n            </select>\n          </div>\n          <div className=\"flex items-center justify-between mb-4\">\n            <label className=\"text-sm font-medium\">Send on Enter <span className=\"text-xs text-gray-500 font-normal block\">(off = Ctrl+Enter)</span></label>\n            <label className=\"relative inline-flex items-center cursor-pointer\">\n              <input type=\"checkbox\" checked={prefs.sendOnEnter} onChange={e => setPrefs({ ...prefs, sendOnEnter: e.target.checked })} className=\"sr-only peer\" />\n              <div className=\"w-9 h-5 bg-gray-200 peer-focus:ring-2 peer-focus:ring-primary rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary\"></div>\n            </label>\n          </div>\n          <div className=\"mb-4\">\n            <label className=\"text-sm font-medium block mb-2\">System Prompt</label>\n            <textarea value={prefs.systemPrompt} onChange={e => setPrefs({ ...prefs, systemPrompt: e.target.value })} rows={3} className=\"w-full rounded-md border border-gray-300 dark:border-gray-600 p-2 text-sm bg-gray-50 dark:bg-gray-700 focus:ring-2 focus:ring-primary focus:outline-none\" placeholder=\"e.g. You are a concise and helpful assistant...\" />\n          </div>\n        </div>\n        <div className=\"mb-6\">\n          <h3 className=\"text-lg font-medium mb-3 border-b border-gray-200 dark:border-gray-700 pb-2\">Activation Code</h3>\n          <div className=\"flex gap-2\">\n            <input type=\"text\" value={activationCodeInput} onChange={e => setActivationCodeInput(e.target.value)} placeholder=\"e.g., FR33\" className=\"flex-1 rounded-md border border-gray-300 dark:border-gray-600 px-3 py-2 text-sm bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary\" />\n            <button onClick={applyActivationCode} className=\"px-4 py-2 bg-primary hover:bg-primary-dark text-white rounded-md transition-colors\">Apply</button>\n          </div>\n          <p className=\"text-xs text-gray-500 mt-2\">Use code <strong>FR33</strong> for 20 free messages!</p>\n        </div>\n        <div className=\"mb-4\">\n          <h3 className=\"text-lg font-medium mb-3 border-b border-gray-200 dark:border-gray-700 pb-2\">Chat Management</h3>\n          <div className=\"flex flex-wrap gap-2\">\n            <button onClick={clearAllChats} className=\"px-3 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md text-sm\">Clear All</button>\n            <button onClick={exportAllChats} className=\"px-3 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md text-sm\">Export</button>\n            <button onClick={() => document.getElementById('import-file')?.click()} className=\"px-3 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md text-sm\">Import</button>\n          </div>\n          <input type=\"file\" id=\"import-file\" accept=\".json\" className=\"hidden\" onChange={importChats} />\n        </div>\n      </Modal>\n\n      {/* Upgrade Modal */}\n      <Modal isOpen={upgradeOpen} onClose={() => setUpgradeOpen(false)} title=\"Upgrade Your Account\">\n        <div className=\"text-center mb-6\"><div className=\"text-4xl mb-3\">💎</div><h3 className=\"text-lg font-semibold mb-2\">Get More Messages</h3><p className=\"text-gray-600 dark:text-gray-400 text-sm\">You've used all your free messages.</p></div>\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 mb-6\">\n          <div className=\"border border-gray-200 dark:border-gray-700 rounded-lg p-4\">\n            <div className=\"flex items-center mb-2\"><Icons.Gift /><h4 className=\"font-semibold ml-2\">Free Trial</h4></div>\n            <p className=\"text-2xl font-bold mb-2\">20 messages</p><p className=\"text-sm text-gray-500 mb-4\">Use code <strong>FR33</strong></p>\n            <button onClick={() => { setUpgradeOpen(false); setSettingsOpen(true); }} className=\"w-full py-2 border border-primary text-primary rounded-lg hover:bg-primary hover:text-white transition-colors\">Enter Code</button>\n          </div>\n          <div className=\"border-2 border-primary rounded-lg p-4 relative\">\n            <div className=\"absolute -top-3 left-1/2 -translate-x-1/2 bg-primary text-white text-xs px-3 py-1 rounded-full\">RECOMMENDED</div>\n            <div className=\"flex items-center mb-2\"><Icons.CreditCard /><h4 className=\"font-semibold ml-2\">Monthly</h4></div>\n            <p className=\"text-2xl font-bold mb-2\">$8<span className=\"text-sm font-normal text-gray-500\">/month</span></p><p className=\"text-sm text-gray-500 mb-4\">40 messages per month</p>\n            <button onClick={handleUpgrade} className=\"w-full py-2 bg-primary hover:bg-primary-dark text-white rounded-lg transition-colors\">Subscribe with Stripe</button>\n          </div>\n        </div>\n      </Modal>\n\n      <AlertModal isOpen={alertModal.isOpen} onClose={() => setAlertModal({ ...alertModal, isOpen: false })} message={alertModal.message} isError={alertModal.isError} />\n      <ConfirmModal isOpen={confirmModal.isOpen} onClose={() => setConfirmModal({ ...confirmModal, isOpen: false })} onConfirm={confirmModal.onConfirm} message={confirmModal.message} />\n\n      {promptModal.isOpen && (\n        <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50\">\n          <div className=\"bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full max-w-md mx-4 p-4\">\n            <h2 className=\"text-lg font-semibold mb-2\">{promptModal.title}</h2>\n            <p className=\"text-gray-600 dark:text-gray-400 mb-2\">{promptModal.message}</p>\n            <input type=\"text\" defaultValue={promptModal.defaultValue} id=\"prompt-input\" className=\"w-full rounded-md border border-gray-300 dark:border-gray-600 px-3 py-2 text-base bg-white dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary mb-4\"\n              onKeyDown={e => { if (e.key === 'Enter') { const v = (document.getElementById('prompt-input') as HTMLInputElement)?.value; promptModal.onConfirm(v); } }} />\n            <div className=\"flex justify-end space-x-3\">\n              <button onClick={() => setPromptModal(p => ({ ...p, isOpen: false }))} className=\"px-4 py-2 text-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 rounded\">Cancel</button>\n              <button onClick={() => { const v = (document.getElementById('prompt-input') as HTMLInputElement)?.value; promptModal.onConfirm(v); }} className=\"px-4 py-2 bg-primary text-white hover:bg-primary-dark rounded\">OK</button>\n            </div>\n          </div>\n        </div>\n      )}\n\n      <input type=\"file\" ref={fileInputRef} multiple className=\"hidden\" onChange={handleFileSelect} />\n    </div>\n  );\n};\n\n// ============================================\n// BROWSER-ONLY MOUNT\n// Runs only when loaded as an ES module in a\n// real browser (document exists). Safe no-op\n// when imported server-side by Val.town.\n// ============================================\n\nif (typeof document !== 'undefined') {\n  const rootEl = document.getElementById('root');\n  if (rootEl) createRoot(rootEl).render(<CheapRouter />);\n}\n\n// ============================================\n// VAL.TOWN HTTP HANDLER  ← the ONLY default export\n//\n// Previously `export default CheapRouter` caused\n// Val.town to call the React component as an HTTP\n// handler (passing it a Request object), which\n// triggered useState outside any React renderer.\n//\n// Now we export a proper Request → Response function.\n// The browser receives an HTML shell, then loads\n// THIS same file as an ES module via import.meta.url.\n// In that browser context `document` exists, so the\n// mount block above fires and React starts normally.\n// ============================================\n\nexport default function handler(_req: Request): Response {\n  const moduleUrl = import.meta.url; // e.g. https://esm.town/v/user/val/main.tsx\n\n  return new Response(\n    `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n  <title>Cheap-Router</title>\n  <script src=\"https://cdn.tailwindcss.com\"></script>\n  <style>html,body,#root{height:100%;margin:0;padding:0}</style>\n</head>\n<body>\n  <div id=\"root\"></div>\n  <script type=\"module\" src=\"${moduleUrl}\"></script>\n</body>\n</html>`,\n    { headers: { 'Content-Type': 'text/html; charset=utf-8' } }\n  );\n}","deleted","label",[103],"permalink","https://www.val.town/x/aibotcommander/Cheap-Router-17/code/main.tsx","extension","actionData","errors"]
</article></body></html>