[{"_1":2,"_191":-5,"_192":-5},"loaderData",{"_3":4,"_96":97},"root",{"_5":6,"_37":38,"_69":70},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":-5,"_32":33,"_34":20,"_35":20,"_36":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesChatPanelState","notificationCount",0,"flagDenols","isBusinessOrgMember","isHigherTownieTier","ENV",{"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64,"_65":66,"_67":68},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","efeea19332d9bfe7de1049656877be9cb817c45f","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","API_URL","https://api.val.town","clerkState",{"_71":72},"__internal_clerk_state",{"_73":74,"_75":48,"_76":77,"_78":77,"_79":20,"_80":77,"_81":77,"_82":77,"_83":77,"_84":85,"_94":20,"_95":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_86":20,"_19":20,"_87":77,"_88":89,"_90":77,"_91":48,"_92":20,"_93":77},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_98":99,"_100":101,"_102":103,"_104":105,"_165":166,"_188":189,"_190":-5},"handle","jeannettehauck","name","Kikko","path","frontend/components/ChatApp.ts","project",{"_106":107,"_100":101,"_108":109,"_110":-5,"_111":20,"_112":113,"_114":115,"_116":-5,"_12":117,"_118":-5,"_119":20,"_120":-5,"_121":-5,"_122":33,"_14":123,"_124":125,"_126":127,"_128":129,"_130":-5,"_131":132,"_133":132,"_134":135,"_136":135,"_137":135,"_138":132,"_139":132,"_23":140,"_142":143,"_147":148,"_164":20},"id","15c13c42-385c-11f1-9665-42b51c65c3df","createdAt",["D",1776210357794],"deletedAt","legacyEnvVars","privacy","public","description","Kikko - real time messaging app","imageUrl","870b7e35-8ef5-4636-b971-bff1fd6a6e2b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019d8e62-5858-7425-9af4-1885703035d6","tursoName","15c13c42385c11f1966542b51c65c3df","tursoHostname","15c13c42385c11f1966542b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1776213035057],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_98":99,"_141":77},"profileImageUrl","org",{"_98":99,"_144":77,"_12":117,"_145":146},"avatar","tier","free","branch",{"_149":150,"_100":46,"_106":151,"_152":107,"_153":154,"_155":156,"_157":113,"_158":159,"_160":161,"_162":101,"_163":99},"version",16,"15c6b88e-385c-11f1-9665-42b51c65c3df","projectId","forkedBranchId","65a82a10-36ed-11f1-b56f-42b51c65c3df","forkedBranchVersion",3,"forkedProjectPrivacy","forkedProjectId","65a1d32c-36ed-11f1-b56f-42b51c65c3df","forkedProjectOrgId","019d84ff-a03f-708c-9555-09bac13e13b3","projectName","userHandle","isOwned","file",{"_106":167,"_100":168,"_169":170,"_171":172,"_173":151,"_174":175,"_176":177,"_108":178,"_149":33,"_179":180,"_181":182,"_183":20,"_184":-5,"_102":185},"596acbba-385d-11f1-bba7-42b51c65c3df","ChatApp.ts","fileId","596acc5a-385d-11f1-bba7-42b51c65c3df","parentId","28dd156c-385c-11f1-b5ef-42b51c65c3df","branchId","branchVersion",14,"latest",true,["D",1776210900840],"fileType","script","content","import { createElement as h, useState, useEffect, useRef, useCallback, Fragment } from \"react\";\nimport { Ico } from \"../icons.ts\";\nimport { api } from \"../utils.ts\";\nimport { KikkoLogo } from \"./KikkoLogo.ts\";\nimport { ScrollToBottomBtn } from \"./shared.ts\";\nimport { MessageList } from \"./MessageList.ts\";\nimport { SearchPanel, RoomPanel, ProfilePanel, AdminPanel, UsersPanel } from \"./panels.ts\";\nimport { AIChat, AdminAIChat } from \"./AIChat.ts\";\n\n// ── ChatApp ────────────────────────────────────────────────────────────────────\nexport function ChatApp({ user, token, onLogout, dark, toggleDark }: any) {\n const [rooms, setRooms] = useState([]);\n const [adminViewRooms, setAdminViewRooms] = useState([]);\n const [activeId, setActiveId] = useState(1);\n const [messages, setMessages] = useState([]);\n const [reactions, setReactions] = useState([]);\n const [input, setInput] = useState(\"\");\n const [panel, setPanel] = useState(\"none\");\n const [newRoomName, setNewRoomName] = useState(\"\");\n const [showNewRoom, setShowNewRoom] = useState(false);\n const [error, setError] = useState(\"\");\n const [replyTo, setReplyTo] = useState(null);\n const [showSearch, setShowSearch] = useState(false);\n const [pastedContent, setPastedContent] = useState(null);\n const [sidebarOpen, setSidebarOpen] = useState(false);\n const [typingUsers, setTypingUsers] = useState([]);\n const [unreadMap, setUnreadMap] = useState>({});\n const lastIdRef = useRef(0);\n const textareaRef = useRef(null);\n const fileInputRef = useRef(null);\n const typingTimerRef = useRef(null);\n const chatRef = useRef(null);\n const activeRoom = rooms.find((r: any) => r.id === activeId) || adminViewRooms.find((r: any) => r.id === activeId) || null;\n\n const loadRooms = useCallback(async () => {\n const r = await api(\"/api/rooms\", {}, token);\n const d = await r.json();\n if (d.rooms) {\n const rs = d.rooms.map((rm: any) => ({ ...rm, id: Number(rm.id) }));\n setRooms(rs);\n if (activeId !== \"ai\" && !rs.find((r: any) => r.id === activeId) && rs.length > 0) setActiveId(Number(rs[0].id));\n }\n }, [activeId, token]);\n\n useEffect(() => { if (token) loadRooms(); }, [token]);\n\n const loadedKeyRef = useRef(\"\");\n useEffect(() => {\n if (activeId === \"ai\" || activeId === \"admin-ai\") return;\n const key = String(activeId) + \"|\" + token;\n if (loadedKeyRef.current === key) return;\n loadedKeyRef.current = key;\n lastIdRef.current = 0; setMessages([]); setReactions([]); setTypingUsers([]); setReplyTo(null);\n api(\"/api/rooms/\" + activeId + \"/messages\", {}, token).then((r: any) => r.json()).then((d: any) => {\n if (d.messages) {\n setMessages(d.messages);\n if (d.messages.length > 0) lastIdRef.current = Number(d.messages[d.messages.length - 1].id);\n }\n if (d.reactions) setReactions(d.reactions);\n setUnreadMap((m: any) => ({ ...m, [activeId]: 0 }));\n });\n }, [activeId, token]);\n\n // ── Inactivity: slow down polling after 5 min idle ──────────\n const INACTIVE_MS = 5 * 60 * 1000;\n const lastActivityRef = useRef(Date.now());\n const isActiveRef = useRef(true);\n useEffect(() => {\n const bump = () => { lastActivityRef.current = Date.now(); isActiveRef.current = true; };\n const EVTS = [\"mousemove\", \"mousedown\", \"keydown\", \"touchstart\", \"scroll\", \"click\", \"pointerdown\", \"focus\"];\n EVTS.forEach((ev: string) => document.addEventListener(ev, bump, { passive: true }));\n window.addEventListener(\"focus\", bump, { passive: true });\n document.addEventListener(\"visibilitychange\", () => { if (!document.hidden) bump(); });\n const checker = setInterval(() => {\n isActiveRef.current = !document.hidden && (Date.now() - lastActivityRef.current < INACTIVE_MS);\n }, 15000);\n return () => { EVTS.forEach((ev: string) => document.removeEventListener(ev, bump)); window.removeEventListener(\"focus\", bump); clearInterval(checker); };\n }, []);\n\n useEffect(() => {\n if (activeId === \"ai\" || activeId === \"admin-ai\") return;\n let active = true;\n const poll = async () => {\n while (active) {\n try {\n const r = await api(\"/api/rooms/\" + activeId + \"/poll?since=\" + lastIdRef.current, {}, token);\n if (!r.ok) { await new Promise((res: any) => setTimeout(res, 2000)); continue; }\n const d = await r.json();\n if (d.typing !== undefined) setTypingUsers(d.typing || []);\n if (d.messages?.length > 0 && active) {\n setMessages((prev: any) => {\n const confirmedIds = new Set(prev.filter((m: any) => !m._optimistic).map((m: any) => Number(m.id)));\n const fresh = d.messages.filter((m: any) => !confirmedIds.has(Number(m.id)));\n if (!fresh.length) return prev;\n lastIdRef.current = Number(fresh[fresh.length - 1].id);\n const optimistics = prev.filter((m: any) => m._optimistic);\n let pending = [...optimistics];\n const mapped = fresh.map((real: any) => {\n const idx = pending.findIndex(\n (o: any) => Number(o.user_id) === Number(real.user_id) && o.content === real.content\n );\n if (idx !== -1) {\n const matched = pending[idx];\n pending.splice(idx, 1);\n return { ...real, _stableKey: matched.id, _silentSwap: true };\n }\n return real;\n });\n const base = prev.filter((m: any) => !m._optimistic);\n return [...base, ...pending, ...mapped];\n });\n api(\"/api/rooms/\" + activeId + \"/messages\", {}, token).then((r: any) => r.json()).then((d2: any) => {\n if (d2.reactions) setReactions(d2.reactions);\n });\n }\n } catch { await new Promise((res: any) => setTimeout(res, 2000)); }\n const delay = document.hidden ? 30000 : isActiveRef.current ? 2000 : 10000;\n await new Promise((res: any) => setTimeout(res, delay));\n }\n };\n poll();\n return () => { active = false; };\n }, [activeId, token]);\n\n const sendTyping = useCallback(async (isTyping: boolean) => {\n try { await api(\"/api/rooms/\" + activeId + \"/typing\", { method: \"POST\", body: JSON.stringify({ typing: isTyping }) }, token); } catch {}\n }, [activeId, token]);\n\n const handleInputChange = (e: any) => {\n setInput(e.target.value);\n e.target.style.height = \"22px\";\n e.target.style.height = Math.min(e.target.scrollHeight, 120) + \"px\";\n if (activeId !== \"ai\") {\n sendTyping(true);\n clearTimeout(typingTimerRef.current);\n typingTimerRef.current = setTimeout(() => sendTyping(false), 3000);\n }\n };\n\n const send = async () => {\n let content = input.trim();\n if (pastedContent) {\n content = content ? (content + \"\\n\\n\" + pastedContent) : pastedContent;\n setPastedContent(null);\n }\n if (!content) return;\n setInput(\"\");\n if (textareaRef.current) textareaRef.current.style.height = \"22px\";\n clearTimeout(typingTimerRef.current);\n sendTyping(false);\n const body: any = { content };\n if (replyTo) body.reply_to_id = replyTo.id;\n const replySnapshot = replyTo;\n setReplyTo(null);\n const optimisticId = \"opt-\" + Date.now();\n const optimisticMsg = {\n id: optimisticId,\n user_id: user.id,\n username: user.username,\n avatar_blob_key: user.avatar_blob_key || null,\n content,\n created_at: new Date().toISOString(),\n reply_to_id: replySnapshot?.id || null,\n _optimistic: true,\n };\n setMessages((prev: any) => [...prev, optimisticMsg]);\n const r = await api(\"/api/rooms/\" + activeId + \"/messages\", { method: \"POST\", body: JSON.stringify(body) }, token);\n const d = await r.json();\n if (!r.ok) {\n setMessages((prev: any) => prev.filter((m: any) => m.id !== optimisticId));\n setError(d.error || \"Send failed\");\n setTimeout(() => setError(\"\"), 3000);\n } else if (d.message || d.id) {\n const real = d.message || d;\n const realId = Number(real.id);\n if (realId > lastIdRef.current) lastIdRef.current = realId;\n setMessages((prev: any) => prev.map((m: any) =>\n m.id === optimisticId\n ? { ...real, id: realId, _stableKey: optimisticId, _silentSwap: true }\n : m\n ));\n }\n };\n\n const handlePaste = (e: any) => {\n const text = e.clipboardData?.getData(\"text/plain\") || \"\";\n if (text && (text.includes(\"\\n\") || text.length > 100)) {\n e.preventDefault();\n setPastedContent(text);\n }\n };\n\n const upload = async (file: File) => {\n if (file.size > 200 * 1024) { setError(\"File too large (max 200 KB)\"); setTimeout(() => setError(\"\"), 3000); return; }\n const fd = new FormData(); fd.append(\"file\", file);\n const r = await fetch(\"/api/rooms/\" + activeId + \"/upload\", { method: \"POST\", body: fd, headers: token ? { Authorization: \"Bearer \" + token } : {} });\n const d = await r.json();\n if (!r.ok) { setError(d.error || \"Upload failed\"); setTimeout(() => setError(\"\"), 3000); }\n };\n\n const createRoom = async () => {\n if (!newRoomName.trim()) return;\n const r = await api(\"/api/rooms\", { method: \"POST\", body: JSON.stringify({ name: newRoomName.trim() }) }, token);\n const d = await r.json();\n if (r.ok) { setShowNewRoom(false); setNewRoomName(\"\"); await loadRooms(); setActiveId(d.roomId); }\n };\n\n const onKey = (e: any) => { if (e.key === \"Enter\" && !e.shiftKey) { e.preventDefault(); send(); } };\n\n const switchRoom = (id: any) => { setActiveId(id); setPanel(\"none\"); setShowSearch(false); };\n\n const handleReact = async (msgId: number, emoji: string, isMine: boolean) => {\n if (isMine) {\n setReactions((prev: any) => prev.filter((r: any) => !(Number(r.message_id) === Number(msgId) && r.emoji === emoji && Number(r.user_id) === Number(user.id))));\n await api(\"/api/messages/\" + msgId + \"/react\", { method: \"DELETE\", body: JSON.stringify({ emoji }) }, token);\n } else {\n setReactions((prev: any) => [...prev, { message_id: msgId, user_id: user.id, emoji, username: user.username }]);\n await api(\"/api/messages/\" + msgId + \"/react\", { method: \"POST\", body: JSON.stringify({ emoji }) }, token);\n }\n };\n\n const handleJumpTo = (msg: any) => { setShowSearch(false); setMessages((prev: any) => prev); };\n\n const handleDeleteMsg = async (msgId: number) => {\n setMessages((prev: any) => prev.map((m: any) => Number(m.id) === Number(msgId) ? { ...m, is_deleted: 1, deleted_username: m.username, content: \"\" } : m));\n const r = await api(\"/api/messages/\" + msgId, { method: \"DELETE\" }, token);\n if (!r.ok) {\n const d = await r.json().catch(() => ({}));\n setMessages((prev: any) => prev.map((m: any) => Number(m.id) === Number(msgId) ? { ...m, is_deleted: 0 } : m));\n setError(d.error || \"Failed to delete message\");\n setTimeout(() => setError(\"\"), 3000);\n }\n };\n\n const closeSidebar = () => setSidebarOpen(false);\n const switchRoomMobile = (id: any) => { switchRoom(id); setSidebarOpen(false); };\n\n return h(\"div\", { className: \"app-layout\" },\n sidebarOpen && h(\"div\", { style: { position: \"fixed\", inset: 0, zIndex: 59, background: \"rgba(0,0,0,0.45)\" }, onClick: closeSidebar }),\n h(\"button\", { className: \"mobile-menu-btn icon-btn\", onClick: () => setSidebarOpen((s: boolean) => !s), title: \"Menu\" },\n h(\"svg\", { width: 18, height: 18, viewBox: \"0 0 24 24\", fill: \"none\", stroke: \"currentColor\", strokeWidth: 2.2, strokeLinecap: \"round\" },\n h(\"line\", { x1: 3, y1: 6, x2: 21, y2: 6 }), h(\"line\", { x1: 3, y1: 12, x2: 21, y2: 12 }), h(\"line\", { x1: 3, y1: 18, x2: 21, y2: 18 })\n )\n ),\n h(\"aside\", { className: \"sidebar\" + (sidebarOpen ? \" mobile-open\" : \"\") },\n h(\"div\", { className: \"sidebar-header\" },\n h(\"div\", { className: \"sidebar-logo-wrap\" }, h(KikkoLogo, { height: 26, fill: \"var(--logo-fill)\" })),\n h(\"button\", { className: \"theme-btn\", title: dark ? \"Light mode\" : \"Dark mode\", onClick: toggleDark }, dark ? h(Ico.sun) : h(Ico.moon)),\n h(\"button\", { className: \"icon-btn\", title: \"Users\", onClick: () => setPanel((p: string) => p === \"users\" ? \"none\" : \"users\") }, h(Ico.users))\n ),\n h(\"div\", { className: \"sidebar-section\" },\n h(\"div\", { className: \"sidebar-section-title\" }, \"Chats\"),\n h(\"div\", { className: \"room-item\" + (activeId === \"ai\" ? \" active\" : \"\"), onClick: () => switchRoomMobile(\"ai\") },\n h(\"span\", { className: \"room-icon\" }, h(Ico.ai)),\n h(\"span\", { className: \"room-item-name\" }, \"Mistral AI\")\n ),\n user.isAdmin && h(\"div\", { className: \"room-item\" + (activeId === \"admin-ai\" ? \" active\" : \"\"), onClick: () => switchRoomMobile(\"admin-ai\") },\n h(\"span\", { className: \"room-icon\" }, h(Ico.shield)),\n h(\"span\", { className: \"room-item-name\" }, \"Admin AI\")\n ),\n rooms.map((room: any) => {\n const unread = unreadMap[room.id] || 0;\n return h(\"div\", { key: room.id, className: \"room-item\" + (activeId === room.id ? \" active\" : \"\"), onClick: () => switchRoomMobile(room.id) },\n h(\"span\", { className: \"room-icon\" }, room.type === \"world\" ? h(Ico.world) : h(Ico.lock)),\n h(\"span\", { className: \"room-item-name\" }, room.name),\n unread > 0 && h(\"span\", { className: \"unread-badge\" }, unread > 9 ? \"9+\" : unread)\n );\n }),\n h(\"div\", { style: { padding: \"0.25rem 0.5rem 0.5rem\" } },\n showNewRoom\n ? h(\"div\", { className: \"new-room-form\" },\n h(\"input\", { type: \"text\", placeholder: \"Group name…\", value: newRoomName, onChange: (e: any) => setNewRoomName(e.target.value), onKeyDown: (e: any) => e.key === \"Enter\" && createRoom(), autoFocus: true, className: \"new-room-input\" }),\n h(\"div\", { className: \"new-room-actions\" },\n h(\"button\", { className: \"btn btn-primary btn-sm\", onClick: createRoom, style: { flex: 1 } }, h(Ico.check), \" Create\"),\n h(\"button\", { className: \"btn btn-ghost btn-sm\", onClick: () => { setShowNewRoom(false); setNewRoomName(\"\"); } }, h(Ico.close))\n )\n )\n : h(\"button\", { className: \"btn btn-ghost btn-sm new-room-btn\", onClick: () => setShowNewRoom(true) }, h(Ico.plus), \" New Group\")\n )\n ),\n h(\"div\", { className: \"sidebar-footer\" },\n h(\"div\", { className: \"user-pill\", onClick: () => setPanel((p: string) => p === \"profile\" ? \"none\" : \"profile\"), title: \"Edit profile\" },\n h(\"div\", { style: { position: \"relative\", flexShrink: 0 } },\n h(\"div\", { className: \"avatar\" },\n user.avatar_blob_key ? h(\"img\", { src: \"/api/blob/\" + user.avatar_blob_key, alt: \"\", style: { width: \"100%\", height: \"100%\", objectFit: \"cover\" } }) : user.username[0].toUpperCase()\n ),\n h(\"div\", { className: \"online-dot pulse\", style: { position: \"absolute\", bottom: 0, right: 0 } })\n ),\n h(\"span\", { className: \"uname\" }, user.username),\n user.isAdmin && h(\"span\", { className: \"admin-badge\" }, h(Ico.shield), \" Admin\")\n ),\n user.isAdmin && h(\"button\", { className: \"sidebar-action-btn\", onClick: () => setPanel((p: string) => p === \"admin\" ? \"none\" : \"admin\") }, h(Ico.shield), \"Admin Panel\"),\n h(\"button\", { className: \"sidebar-action-btn\", onClick: onLogout }, h(Ico.logout), \"Sign Out\"),\n h(\"div\", { style: { textAlign: \"center\", marginTop: \"0.25rem\" } },\n h(\"a\", { href: \"/bookmarklet\", style: { fontSize: \"0.68rem\", color: \"var(--text-dim)\", textDecoration: \"none\" } }, \"Get bookmarklet\")\n )\n )\n ),\n h(\"div\", { className: \"chat-area\" },\n activeId === \"ai\"\n ? h(AIChat, { currentUser: user, token })\n : activeId === \"admin-ai\" && user.isAdmin\n ? h(AdminAIChat, { currentUser: user, token })\n : h(Fragment, null,\n h(\"div\", { className: \"chat-header\" },\n h(\"div\", { className: \"chat-header-info\" },\n h(\"div\", { className: \"chat-header-name\" },\n h(\"span\", { style: { marginRight: \"0.4rem\" } }, activeRoom?.type === \"world\" ? h(Ico.world) : h(Ico.lock)),\n activeRoom?.name || \"…\"\n ),\n h(\"div\", { className: \"chat-header-sub\" }, activeRoom?.type === \"world\" ? \"Public · Everyone can join\" : \"Private group\")\n ),\n h(\"div\", { className: \"chat-header-actions\" },\n h(\"button\", { className: \"icon-btn\", title: \"Search messages\", onClick: () => setShowSearch((s: boolean) => !s) }, h(Ico.search)),\n activeRoom?.type !== \"world\" && h(\"button\", { className: \"btn btn-ghost btn-sm\", onClick: () => setPanel((p: string) => p === \"room\" ? \"none\" : \"room\") }, h(Ico.settings), \" Manage\")\n )\n ),\n error && h(\"div\", { className: \"error-msg\", style: { margin: \"0.5rem 1.5rem\", cursor: \"pointer\" }, onClick: () => setError(\"\") }, error),\n h(\"div\", { style: { position: \"relative\", flex: 1, overflow: \"hidden\", display: \"flex\", flexDirection: \"column\" } },\n showSearch && h(SearchPanel, { roomId: activeId, token, onClose: () => setShowSearch(false), onJumpTo: handleJumpTo }),\n h(MessageList, {\n messages, currentUser: user, token, reactions,\n onReact: handleReact,\n onReply: (msg: any) => setReplyTo(msg),\n onEdit: () => {},\n onDeleteMsg: handleDeleteMsg,\n typingUsers,\n dark,\n chatRef,\n roomKey: activeId\n }),\n h(ScrollToBottomBtn, { chatRef })\n ),\n h(\"div\", { className: \"message-input-area\" },\n replyTo && h(\"div\", { className: \"reply-bar\" },\n h(Ico.reply),\n h(\"div\", { className: \"reply-bar-info\" },\n h(\"div\", { className: \"reply-bar-user\" }, \"Replying to \" + replyTo.username),\n h(\"div\", { className: \"reply-bar-text\" }, replyTo.content || \"[file]\")\n ),\n h(\"button\", { className: \"icon-btn\", onClick: () => setReplyTo(null) }, h(Ico.close))\n ),\n pastedContent && h(\"div\", { className: \"pasted-chip\" },\n h(\"div\", { className: \"pasted-chip-header\" },\n h(Ico.file),\n h(\"span\", null, \"Pasted content\"),\n h(\"span\", { className: \"pasted-chip-size\" }, (pastedContent.split(\"\\n\").length) + \" lines · \" + (pastedContent.length) + \" chars\"),\n h(\"button\", { className: \"icon-btn\", onClick: () => setPastedContent(null), style: { marginLeft: \"auto\" } }, h(Ico.close))\n ),\n h(\"pre\", { className: \"pasted-chip-preview\" }, pastedContent.slice(0, 200) + (pastedContent.length > 200 ? \"…\" : \"\"))\n ),\n h(\"div\", { className: \"input-wrapper\" },\n h(\"textarea\", { ref: textareaRef, className: \"msg-textarea\", placeholder: \"Message \" + (activeRoom?.name || \"…\") + \" — use @username to mention\", value: input, onChange: handleInputChange, onKeyDown: onKey, onPaste: handlePaste, rows: 1, maxLength: 2000 }),\n input.length > 1600 && h(\"span\", { className: \"char-counter\" + (input.length > 1900 ? \" danger\" : input.length > 1800 ? \" warn\" : \"\") }, 2000 - input.length),\n h(\"div\", { className: \"input-actions\" },\n h(\"button\", { className: \"icon-btn\", title: \"Attach file (max 200 KB)\", onClick: () => fileInputRef.current?.click() }, h(Ico.attach)),\n h(\"button\", { className: \"icon-btn send\", title: \"Send\", onClick: send, disabled: !input.trim() && !pastedContent }, h(Ico.send))\n )\n ),\n h(\"input\", { ref: fileInputRef, type: \"file\", style: { display: \"none\" }, onChange: (e: any) => { if (e.target.files?.[0]) { upload(e.target.files[0]); e.target.value = \"\"; } } })\n )\n )\n ),\n panel === \"room\" && activeRoom && h(RoomPanel, { room: activeRoom, currentUser: user, token, onClose: () => setPanel(\"none\"), onLeave: () => { setActiveId(1); loadRooms(); setPanel(\"none\"); }, onDelete: () => { setActiveId(1); loadRooms(); setPanel(\"none\"); }, loadRooms, isAdminView: user.isAdmin }),\n panel === \"profile\" && h(ProfilePanel, { user, token, onClose: () => setPanel(\"none\"), onLogout }),\n panel === \"admin\" && user.isAdmin && h(AdminPanel, { token, onClose: () => setPanel(\"none\"), onLogout, onEnterRoom: async (roomId: number) => {\n const rid = Number(roomId);\n if (rooms.find((r: any) => r.id === rid)) { setActiveId(rid); return; }\n const r = await api(\"/api/admin/rooms\", {}, token);\n const d = await r.json();\n if (d.rooms) {\n const allRooms = d.rooms.map((rm: any) => ({ ...rm, id: Number(rm.id) }));\n setAdminViewRooms((prev: any) => {\n const ids = new Set(prev.map((x: any) => x.id));\n const toAdd = allRooms.filter((rm: any) => !ids.has(rm.id));\n return toAdd.length ? [...prev, ...toAdd] : prev;\n });\n }\n setActiveId(rid);\n } }),\n panel === \"users\" && h(UsersPanel, { currentUser: user, token, onClose: () => setPanel(\"none\") })\n );\n}\n","deleted","label",[186,187,168],"frontend","components","permalink","https://www.val.town/x/jeannettehauck/Kikko/code/frontend/components/ChatApp.ts","extension","actionData","errors"]