x0x 0.19.18 - Docs.rs

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>x0x chat</title>
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0a0a0f; --card: #12121a; --card-hover: #1a1a28;
  --accent: #00d4ff; --accent-dim: #00d4ff33; --text: #e0e0e8;
  --text-dim: #6a6a7a; --border: #1e1e2e; --danger: #ff4060;
  --success: #00e676; --own-msg: #141428; --other-msg: #1a1a24;
  --radius: 8px; --font: system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
}
html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; }
body { display: flex; flex-direction: column; overflow: hidden; }

header {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: var(--card); border-bottom: 1px solid var(--border); flex-shrink: 0; min-height: 48px;
}
.logo { font-weight: 700; font-size: 16px; letter-spacing: 1px; color: var(--accent); font-family: var(--mono); }
.room-label { color: var(--text-dim); font-size: 12px; }
.room-name { color: var(--text); font-size: 13px; font-family: var(--mono); }
.spacer { flex: 1; }
.agent-tag { font-family: var(--mono); font-size: 11px; color: var(--text-dim); background: var(--bg); padding: 3px 8px; border-radius: 4px; }
.status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-dim); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex-shrink: 0; transition: background 0.3s; }
.dot.on { background: var(--success); }

.app { display: flex; flex: 1; overflow: hidden; }

.sidebar {
  width: 220px; background: var(--card); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; flex-shrink: 0; transition: margin-left 0.25s;
}
.sidebar.collapsed { margin-left: -220px; }
.sidebar-header { padding: 12px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.sidebar-header button { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 16px; line-height: 1; }
.sidebar-header button:hover { color: var(--text); }
.room-list { flex: 1; overflow-y: auto; padding: 6px 0; }
.room-item {
  padding: 8px 14px; font-size: 13px; font-family: var(--mono); color: var(--text-dim);
  cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.room-item:hover { background: var(--card-hover); color: var(--text); }
.room-item.active { color: var(--accent); background: var(--accent-dim); }
.room-input-wrap { padding: 10px; border-top: 1px solid var(--border); }
.room-input-wrap input {
  width: 100%; padding: 7px 10px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-family: var(--mono); font-size: 12px; outline: none;
}
.room-input-wrap input:focus { border-color: var(--accent); }

.toggle-sidebar {
  display: none; background: none; border: none; color: var(--text-dim); font-size: 20px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.toggle-sidebar:hover { color: var(--text); }

.chat { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.msg {
  max-width: 72%; padding: 8px 12px; border-radius: var(--radius); font-size: 13px; line-height: 1.45; word-break: break-word;
}
.msg.own { align-self: flex-end; background: var(--own-msg); border: 1px solid #1c1c3a; }
.msg.other { align-self: flex-start; background: var(--other-msg); border: 1px solid var(--border); }
.msg-sender { font-family: var(--mono); font-size: 11px; margin-bottom: 3px; }
.msg.own .msg-sender { color: var(--accent); }
.msg.other .msg-sender { color: #a080e0; }
.msg-text { color: var(--text); }
.msg-time { font-size: 10px; color: var(--text-dim); margin-top: 3px; text-align: right; }
.sys-msg { text-align: center; color: var(--text-dim); font-size: 12px; padding: 6px 0; font-style: italic; }

.input-bar {
  display: flex; gap: 8px; padding: 12px 16px; background: var(--card); border-top: 1px solid var(--border); flex-shrink: 0;
}
.input-bar input {
  flex: 1; padding: 10px 14px; background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text); font-size: 14px; outline: none;
}
.input-bar input:focus { border-color: var(--accent); }
.input-bar button {
  padding: 10px 20px; background: var(--accent); color: #000; border: none;
  border-radius: var(--radius); font-weight: 600; font-size: 13px; cursor: pointer; transition: opacity 0.15s;
}
.input-bar button:hover { opacity: 0.85; }
.input-bar button:disabled { opacity: 0.3; cursor: default; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2a2a3a; }

@media (max-width: 640px) {
  .toggle-sidebar { display: block; }
  .sidebar { position: absolute; z-index: 10; height: calc(100% - 48px); top: 48px; left: 0; }
  .sidebar.collapsed { margin-left: -220px; }
  .agent-tag { display: none; }
}
</style>
</head>
<body>

<header>
  <button class="toggle-sidebar" id="btnToggle" aria-label="Toggle sidebar">&#9776;</button>
  <span class="logo">x0x</span>
  <span class="room-label">room:</span>
  <span class="room-name" id="headerRoom">—</span>
  <span class="spacer"></span>
  <span class="agent-tag" id="agentTag">—</span>
  <span class="status"><span class="dot" id="statusDot"></span><span id="statusText">Connecting…</span></span>
</header>

<div class="app">
  <aside class="sidebar" id="sidebar">
    <div class="sidebar-header">Rooms <button id="btnCloseSidebar">&times;</button></div>
    <div class="room-list" id="roomList"></div>
    <div class="room-input-wrap">
      <input type="text" id="roomInput" placeholder="Join room…" spellcheck="false">
    </div>
  </aside>

  <main class="chat">
    <div class="messages" id="messages"></div>
    <div class="input-bar">
      <input type="text" id="msgInput" placeholder="Type a message…" disabled autocomplete="off" spellcheck="false">
      <button id="btnSend" disabled>Send</button>
    </div>
  </main>
</div>

<script>
const API_URL = "http://localhost:12700";
const WS_URL = "ws://localhost:12700/ws";

const DEFAULT_ROOM = "x0x-chat/general";
const RECONNECT_MS = 3000;

let ws = null, agentId = "", currentRoom = DEFAULT_ROOM;
let rooms = new Set([DEFAULT_ROOM]), connected = false, subscribedTopics = new Set();

const $dot = document.getElementById("statusDot");
const $statusText = document.getElementById("statusText");
const $agentTag = document.getElementById("agentTag");
const $headerRoom = document.getElementById("headerRoom");
const $messages = document.getElementById("messages");
const $msgInput = document.getElementById("msgInput");
const $btnSend = document.getElementById("btnSend");
const $roomList = document.getElementById("roomList");
const $roomInput = document.getElementById("roomInput");
const $sidebar = document.getElementById("sidebar");

function shortId(id) { return (id || "").substring(0, 8); }
function formatTime(ts) {
  const d = ts ? new Date(ts) : new Date();
  return String(d.getHours()).padStart(2, "0") + ":" + String(d.getMinutes()).padStart(2, "0");
}
function b64Encode(str) { return btoa(unescape(encodeURIComponent(str))); }
function b64Decode(b64) { try { return decodeURIComponent(escape(atob(b64))); } catch { return null; } }
function scrollBottom() { $messages.scrollTop = $messages.scrollHeight; }
function escHtml(s) { const d = document.createElement("div"); d.textContent = s; return d.innerHTML; }

function addSystemMsg(text) {
  const el = document.createElement("div");
  el.className = "sys-msg"; el.textContent = text;
  $messages.appendChild(el); scrollBottom();
}

function addChatMsg(sender, text, time, own) {
  const el = document.createElement("div");
  el.className = "msg " + (own ? "own" : "other");
  el.innerHTML =
    '<div class="msg-sender">' + escHtml(sender) + '</div>' +
    '<div class="msg-text">' + escHtml(text) + '</div>' +
    '<div class="msg-time">' + escHtml(time) + '</div>';
  $messages.appendChild(el); scrollBottom();
}

function renderRooms() {
  $roomList.innerHTML = "";
  for (const r of rooms) {
    const el = document.createElement("div");
    el.className = "room-item" + (r === currentRoom ? " active" : "");
    el.textContent = r;
    el.addEventListener("click", () => switchRoom(r));
    $roomList.appendChild(el);
  }
}

function switchRoom(room) {
  if (room === currentRoom) return;
  currentRoom = room; rooms.add(room);
  $headerRoom.textContent = room;
  $messages.innerHTML = "";
  addSystemMsg("Joined " + room);
  renderRooms(); subscribe(room);
  if (window.innerWidth <= 640) $sidebar.classList.add("collapsed");
}

function subscribe(topic) {
  if (!ws || ws.readyState !== WebSocket.OPEN || subscribedTopics.has(topic)) return;
  ws.send(JSON.stringify({ type: "subscribe", topics: [topic] }));
  subscribedTopics.add(topic);
}

function connect() {
  setStatus(false, "Connecting…");
  try { ws = new WebSocket(WS_URL); } catch { scheduleReconnect(); return; }

  ws.onmessage = function (ev) {
    let msg; try { msg = JSON.parse(ev.data); } catch { return; }
    if (msg.type === "connected") {
      agentId = msg.agent_id || "";
      $agentTag.textContent = shortId(agentId);
      setStatus(true, "Connected"); connected = true;
      $msgInput.disabled = false; $btnSend.disabled = false;
      addSystemMsg("Connected as " + shortId(agentId));
      subscribedTopics.clear();
      for (const r of rooms) subscribe(r);
    } else if (msg.type === "message") {
      handleIncoming(msg);
    }
  };
  ws.onclose = function () { handleDisconnect(); };
  ws.onerror = function () { /* onclose fires after */ };
}

function handleDisconnect() {
  if (connected) addSystemMsg("Disconnected");
  connected = false; $msgInput.disabled = true; $btnSend.disabled = true;
  setStatus(false, "Disconnected"); subscribedTopics.clear();
  scheduleReconnect();
}

function scheduleReconnect() { setTimeout(connect, RECONNECT_MS); }
function setStatus(on, text) { $dot.classList.toggle("on", on); $statusText.textContent = text; }

function handleIncoming(msg) {
  if (msg.topic !== currentRoom) return;
  const raw = b64Decode(msg.payload || "");
  if (!raw) return;
  let data; try { data = JSON.parse(raw); } catch { return; }
  const sender = data.sender_name || shortId(msg.origin || "unknown");
  const own = msg.origin === agentId;
  addChatMsg(sender, data.text || "", formatTime(data.timestamp), own);
}

function sendMessage() {
  const text = $msgInput.value.trim();
  if (!text || !connected) return;
  const payload = JSON.stringify({ text, sender_name: shortId(agentId), timestamp: Date.now() });
  ws.send(JSON.stringify({ type: "publish", topic: currentRoom, payload: b64Encode(payload) }));
  addChatMsg(shortId(agentId), text, formatTime(), true);
  $msgInput.value = ""; $msgInput.focus();
}

$btnSend.addEventListener("click", sendMessage);
$msgInput.addEventListener("keydown", e => { if (e.key === "Enter") sendMessage(); });
$roomInput.addEventListener("keydown", e => {
  if (e.key === "Enter") { const v = $roomInput.value.trim(); if (v) { switchRoom(v); $roomInput.value = ""; } }
});
document.getElementById("btnToggle").addEventListener("click", () => $sidebar.classList.toggle("collapsed"));
document.getElementById("btnCloseSidebar").addEventListener("click", () => $sidebar.classList.add("collapsed"));

$headerRoom.textContent = currentRoom;
renderRooms();
addSystemMsg("Connecting to x0xd…");
connect();
</script>
</body>
</html>