store/chatroom.sune

[{"id":"4awhhn5","name":"LIVE CHAT (alpha)","pinned":false,"avatar":"","url":"gh://sune-org/store/chatroom.sune","updatedAt":1757301454238,"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.2.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-yellow-400 animate-pulse\"></span>\n      <span id=\"wsStatusText\" class=\"font-medium text-gray-700\">Connecting...</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  <pre id=\"wsLog\" class=\"w-full h-24 p-2 mb-3 bg-gray-900 text-white text-xs rounded-lg overflow-y-auto font-mono whitespace-pre-wrap break-all\">Connecting to endpoint...</pre>\n\n  <div class=\"flex items-center gap-2\">\n    <button id=\"wsToggleButton\" class=\"flex-1 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\">Disconnect</button>\n    <button id=\"wsClearLogButton\" title=\"Clear Log\" class=\"p-2 text-gray-500 bg-gray-100 rounded-lg hover:bg-gray-200 active:scale-[.98] transition-transform focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500\">\n      <i data-lucide=\"trash-2\" class=\"h-5 w-5\"></i>\n    </button>\n  </div>\n</div>\n\n<script>\n(() => {\n  const SID = window.SUNE.id || 'chatroom-sune';\n  const URL = 'wss://chatsune.awww.workers.dev/ws';\n  const USERNAME = 'Master';\n\n  const ui = {\n    dot: document.getElementById('wsStatusDot'),\n    text: document.getElementById('wsStatusText'),\n    log: document.getElementById('wsLog'),\n    toggle: document.getElementById('wsToggleButton'),\n    clear: document.getElementById('wsClearLogButton'),\n    count: document.getElementById('wsUserCount'),\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;\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.toggle.textContent = isConnected ? 'Disconnect' : 'Connect';\n  };\n\n  const disconnect = () => ws?.readyState < 2 && (ws.close(), log('Manual disconnection.'));\n\n  const connect = () => {\n    if (ws?.readyState < 2) return;\n    \n    updateStatus('Connecting...', 'bg-yellow-400', false);\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: USERNAME } }));\n    };\n\n    ws.onmessage = e => {\n      log(`RECV: ${e.data}`);\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 === USERNAME) 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 === USERNAME) return;\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 = () => (updateStatus('Error', 'bg-red-500', false), log('Connection error.'));\n    ws.onclose = () => (updateStatus('Disconnected', 'bg-gray-400', false), log('Connection closed.'), ws = null, renderSystemMessage('You have been disconnected from the chatroom.'));\n  };\n\n  ui.composer.addEventListener('sune:send', e => {\n    const msg = e.detail?.message;\n    if (!msg) return;\n    \n    const txt = (Array.isArray(msg.content) ? msg.content.filter(p => p.type === 'text').map(p => p.text).join('\\n') : String(msg.content || '')).trim();\n    if (!txt) return;\n\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.toggle.onclick = () => ws?.readyState === 1 ? disconnect() : connect();\n  ui.clear.onclick = () => { ui.log.textContent = ''; log('Log cleared.'); };\n  \n  connect();\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":{}}]