store/chatroom.sune

[{"id":"4awhhn5","name":"LIVE CHAT (alpha)","pinned":false,"avatar":"","url":"gh://sune-org/store/chatroom.sune","updatedAt":1757302077925,"settings":{"model":"","temperature":"","top_p":"","top_k":"","frequency_penalty":"","repetition_penalty":"","min_p":"","top_a":"","verbosity":"","reasoning_effort":"default","system_prompt":"","html":"<div class=\"max-w-sm mx-auto my-4 p-4 font-sans bg-white rounded-2xl border border-gray-200 shadow-lg text-sm\">\n  <div class=\"flex justify-between items-center mb-3\">\n    <h3 class=\"font-semibold text-gray-800\">Sune LIVE Chatroom</h3>\n    <span class=\"text-xs text-gray-400\">v0.3.0</span>\n  </div>\n\n  <div class=\"flex items-center justify-between gap-4 p-3 mb-3 bg-gray-50 rounded-lg\">\n    <div class=\"flex items-center gap-2\">\n      <span id=\"wsStatusDot\" class=\"h-3 w-3 rounded-full bg-gray-400\"></span>\n      <span id=\"wsStatusText\" class=\"font-medium text-gray-700\">Offline</span>\n    </div>\n    <div class=\"flex items-center gap-1.5 text-gray-500\" title=\"Users online\">\n      <i data-lucide=\"users\" class=\"h-4 w-4\"></i>\n      <span id=\"wsUserCount\" class=\"text-sm font-medium\">0</span>\n    </div>\n  </div>\n\n  <div class=\"flex items-center gap-2 mb-3\">\n    <input id=\"wsUsernameInput\" type=\"text\" placeholder=\"Your name\" class=\"flex-1 min-w-0 px-3 py-2 text-sm bg-white border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-400 focus:outline-none disabled:bg-gray-100\">\n    <button id=\"wsConnectButton\" class=\"px-4 py-2 text-white font-semibold bg-gray-800 rounded-lg hover:bg-gray-700 active:scale-[.98] transition-transform focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500\">Connect</button>\n  </div>\n\n  <pre id=\"wsLog\" class=\"w-full h-24 p-2 bg-gray-900 text-white text-xs rounded-lg overflow-y-auto font-mono whitespace-pre-wrap break-all\">Welcome, Master. Enter a name and connect.</pre>\n</div>\n\n<script>\n(() => {\n  const SID = window.SUNE.id || 'chatroom-sune';\n  const URL = 'wss://chatsune.awww.workers.dev/ws';\n  \n  const ui = {\n    dot: document.getElementById('wsStatusDot'),\n    text: document.getElementById('wsStatusText'),\n    log: document.getElementById('wsLog'),\n    count: document.getElementById('wsUserCount'),\n    usernameInput: document.getElementById('wsUsernameInput'),\n    connectBtn: document.getElementById('wsConnectButton'),\n    composer: document.getElementById('composer'),\n    messages: document.getElementById('messages')\n  };\n\n  if (Object.values(ui).some(el => !el)) return console.error('Sune Error: Missing required elements.');\n\n  let ws = null, currentUsername = '';\n  ui.usernameInput.value = `Random${Math.floor(Math.random() * 900 + 100)}`;\n\n  const log = m => {\n    if (!ui.log.textContent.endsWith('\\n')) ui.log.textContent += '\\n';\n    ui.log.textContent += `[${new Date().toLocaleTimeString()}] ${m}`;\n    ui.log.scrollTop = ui.log.scrollHeight;\n  };\n  \n  const renderSystemMessage = text => {\n    const el = document.createElement('div');\n    el.className = 'px-4 py-2 text-xs text-center text-gray-500 italic';\n    el.textContent = text;\n    ui.messages.appendChild(el);\n    ui.messages.parentElement.scrollTo({ top: ui.messages.parentElement.scrollHeight, behavior: 'smooth' });\n  };\n\n  const updateStatus = (status, color, isConnected) => {\n    ui.text.textContent = status;\n    ui.dot.className = `h-3 w-3 rounded-full ${color}`;\n    ui.dot.classList.toggle('animate-pulse', status === 'Connecting...');\n    ui.connectBtn.textContent = isConnected ? 'Disconnect' : 'Connect';\n    ui.usernameInput.disabled = isConnected;\n  };\n\n  const disconnect = () => ws?.readyState < 2 && ws.close();\n\n  const connect = () => {\n    if (ws?.readyState < 2) return;\n    \n    currentUsername = ui.usernameInput.value.trim() || `Random${Math.floor(Math.random() * 900 + 100)}`;\n    ui.usernameInput.value = currentUsername;\n    updateStatus('Connecting...', 'bg-yellow-400', true);\n    ws = new WebSocket(URL);\n    \n    ws.onopen = () => {\n      updateStatus('Connected', 'bg-green-500', true);\n      log('Connection established.');\n      ui.messages.innerHTML = '';\n      ws.send(JSON.stringify({ type: 'USER_JOINED', payload: { name: currentUsername } }));\n    };\n\n    ws.onmessage = e => {\n      log(`RECV: ${e.data.substring(0, 150)}`);\n      try {\n        const data = JSON.parse(e.data);\n        switch (data.type) {\n          case 'HISTORY':\n            ui.messages.innerHTML = '';\n            data.payload.forEach(msg => {\n              if (msg.author.name === 'system') renderSystemMessage(msg.text);\n              else if (msg.author.name === currentUsername) window.addMessage({ role: 'user', content: msg.text }, false);\n              else window.addMessage({ role: 'assistant', content: msg.text, sune_name: msg.author.name, model: 'live' }, false);\n            });\n            break;\n          case 'NEW_MESSAGE':\n            if (data.payload.author.name === currentUsername) return; // Don't echo own messages\n            if (data.payload.author.name === 'system') renderSystemMessage(data.payload.text);\n            else window.addMessage({ role: 'assistant', content: data.payload.text, sune_name: data.payload.author.name, model: 'live' }, false);\n            break;\n          case 'CONNECTION_COUNT':\n            ui.count.textContent = data.payload.count || 0;\n            break;\n        }\n      } catch (err) { log(`Error parsing message: ${err}`); }\n    };\n\n    ws.onerror = () => log('Connection error.');\n    ws.onclose = () => {\n        updateStatus('Offline', 'bg-gray-400', false);\n        log('Connection closed.');\n        ws = null;\n        renderSystemMessage('You have been disconnected from the chatroom.');\n    };\n  };\n\n  ui.composer.addEventListener('sune:send', e => {\n    const txt = (e.detail?.message?.content?.find(p => p.type === 'text')?.text || '').trim();\n    if (!txt) return;\n    if (ws?.readyState === 1) {\n      ws.send(JSON.stringify({ type: 'NEW_MESSAGE', payload: { text: txt } }));\n      log(`SENT: ${txt.length > 80 ? txt.slice(0, 80) + '...' : txt}`);\n    } else {\n      log('Cannot send, WS disconnected.');\n    }\n  });\n\n  ui.connectBtn.addEventListener('click', () => ws?.readyState === 1 ? disconnect() : connect());\n  \n  window.lucide?.createIcons();\n})();\n</script>\n","extension_html":"<sune src='https://raw.githubusercontent.com/sune-org/store/refs/heads/main/sync.sune' private />","hide_composer":false},"storage":{}}]