Add chatId in ws connection

examples/webpage/app.js

@@ -44,6 +44,7 @@ function defaultWsUrl() {
 
 const els = {
   url: document.getElementById("ws-url"),
+  chatId: document.getElementById("chat-id"),
   connectBtn: document.getElementById("connect-btn"),
   statusDot: document.getElementById("status-dot"),
   statusText: document.getElementById("status-text"),
@@ -69,6 +70,21 @@ const els = {
   sendBtn: document.getElementById("send-btn"),
 };
 
+function wsUrlWithChatId() {
+  const rawUrl = (els.url.value || "").trim();
+  const chatId = (els.chatId.value || "").trim();
+  if (!rawUrl || !chatId) return rawUrl;
+
+  try {
+    const url = new URL(rawUrl, location.href);
+    url.searchParams.set("chatId", chatId);
+    return url.href;
+  } catch (_) {
+    const separator = rawUrl.includes("?") ? "&" : "?";
+    return `${rawUrl}${separator}chatId=${encodeURIComponent(chatId)}`;
+  }
+}
+
 const state = {
   ws: null,
   connected: false,
@@ -110,6 +126,7 @@ function setStatus(kind, text) {
 }
 
 function setConnectButton() {
+  els.chatId.disabled = state.connected || state.connecting;
   if (state.connecting) {
     els.connectBtn.textContent = "Connecting…";
     els.connectBtn.disabled = true;
@@ -874,7 +891,7 @@ function handleEvent(event) {
 
 async function connect() {
   if (state.connected || state.connecting) return;
-  const url = (els.url.value || "").trim();
+  const url = wsUrlWithChatId();
   if (!url) {
     setStatus("error", "Missing URL");
     return;
@@ -912,6 +929,7 @@ async function connect() {
   state.ws = ws;
 
   ws.addEventListener("open", () => {
+    const chatId = (els.chatId.value || "").trim();
     const startMessage = {
       type: "session.start",
       protocol: PROTOCOL,
@@ -921,6 +939,9 @@ async function connect() {
         channels: CHANNELS,
       },
     };
+    if (chatId) {
+      startMessage.chatId = chatId;
+    }
 
     state.connecting = false;
     state.connected = true;

examples/webpage/index.html

@@ -25,6 +25,16 @@
               autocomplete="off"
             />
           </label>
+          <label class="connection__field connection__field--chat">
+            <span>Chat ID</span>
+            <input
+              id="chat-id"
+              type="text"
+              placeholder="optional chatId"
+              spellcheck="false"
+              autocomplete="off"
+            />
+          </label>
           <button id="connect-btn" class="btn btn--primary" type="button">
             Connect
           </button>

examples/webpage/styles.css

@@ -304,6 +304,10 @@ body {
   flex: 1;
 }
 
+.connection__field--chat {
+  flex: 0 1 220px;
+}
+
 .connection__field span {
   font-size: 11px;
   color: var(--text-dim);
@@ -1013,6 +1017,10 @@ body {
     align-items: stretch;
   }
 
+  .connection__field--chat {
+    flex-basis: auto;
+  }
+
   .ws-log__entry,
   .ws-log__group-header {
     grid-template-columns: 54px 38px minmax(0, 1fr);