Sync voice chatId session handling

static/voice-demo/app.js

@@ -44,6 +44,8 @@ function defaultWsUrl() {
 
 const els = {
   url: document.getElementById("ws-url"),
+  chatId: document.getElementById("chat-id"),
+  copyChatIdBtn: document.getElementById("copy-chat-id-btn"),
   connectBtn: document.getElementById("connect-btn"),
   statusDot: document.getElementById("status-dot"),
   statusText: document.getElementById("status-text"),
@@ -69,10 +71,38 @@ const els = {
   sendBtn: document.getElementById("send-btn"),
 };
 
+function generateChatId() {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
+    return `voice_${crypto.randomUUID().replaceAll("-", "").slice(0, 16)}`;
+  }
+  return `voice_${Date.now().toString(36)}${Math.random()
+    .toString(36)
+    .slice(2, 10)}`;
+}
+
+function currentChatIdInput() {
+  return (els.chatId.value || "").trim();
+}
+
+function wsUrlWithChatId(chatId) {
+  const rawUrl = (els.url.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,
   connecting: false,
+  chatId: "",
 
   audioContext: null,
   micStream: null,
@@ -110,6 +140,8 @@ function setStatus(kind, text) {
 }
 
 function setConnectButton() {
+  els.chatId.disabled = state.connected || state.connecting;
+  els.copyChatIdBtn.disabled = !state.connected || !state.chatId;
   if (state.connecting) {
     els.connectBtn.textContent = "Connecting…";
     els.connectBtn.disabled = true;
@@ -125,6 +157,26 @@ function setConnectButton() {
   }
 }
 
+async function copyChatId() {
+  if (!state.connected || !state.chatId) return;
+  try {
+    await navigator.clipboard.writeText(state.chatId);
+  } catch (_) {
+    const selectionStart = els.chatId.selectionStart;
+    const selectionEnd = els.chatId.selectionEnd;
+    els.chatId.disabled = false;
+    els.chatId.select();
+    document.execCommand("copy");
+    els.chatId.setSelectionRange(selectionStart, selectionEnd);
+    els.chatId.disabled = true;
+  }
+
+  els.copyChatIdBtn.classList.add("copied");
+  window.setTimeout(() => {
+    els.copyChatIdBtn.classList.remove("copied");
+  }, 1200);
+}
+
 function setMicButton() {
   els.micBtn.disabled = !state.connected;
   els.micBtn.setAttribute("aria-pressed", state.micEnabled ? "true" : "false");
@@ -874,13 +926,17 @@ function handleEvent(event) {
 
 async function connect() {
   if (state.connected || state.connecting) return;
-  const url = (els.url.value || "").trim();
+  const inputChatId = currentChatIdInput();
+  const chatId = inputChatId || generateChatId();
+  const url = wsUrlWithChatId(chatId);
   if (!url) {
     setStatus("error", "Missing URL");
     return;
   }
 
   state.connecting = true;
+  state.chatId = chatId;
+  els.chatId.value = chatId;
   setStatus("connecting", "Connecting…");
   setConnectButton();
   addWsLog("system", `connecting ${url}`);
@@ -891,6 +947,8 @@ async function connect() {
   } catch (err) {
     console.error("AudioContext failed", err);
     state.connecting = false;
+    state.chatId = "";
+    if (!inputChatId) els.chatId.value = "";
     setStatus("error", "Audio init failed");
     setConnectButton();
     addWsLog("error", `audio init failed: ${err.message || err}`, "error");
@@ -903,6 +961,8 @@ async function connect() {
   } catch (err) {
     console.error("WebSocket constructor failed", err);
     state.connecting = false;
+    state.chatId = "";
+    if (!inputChatId) els.chatId.value = "";
     setStatus("error", "Bad URL");
     setConnectButton();
     addWsLog("error", `bad websocket URL: ${err.message || err}`, "error");
@@ -921,6 +981,7 @@ async function connect() {
         channels: CHANNELS,
       },
     };
+    startMessage.chatId = state.chatId;
 
     state.connecting = false;
     state.connected = true;
@@ -974,6 +1035,7 @@ async function connect() {
     state.ws = null;
     state.connected = false;
     state.connecting = false;
+    state.chatId = "";
     setAssistantState("");
     if (state.micEnabled) stopMic();
     stopPlaybackQueue();
@@ -1026,6 +1088,8 @@ els.connectBtn.addEventListener("click", () => {
   else connect();
 });
 
+els.copyChatIdBtn.addEventListener("click", copyChatId);
+
 els.micBtn.addEventListener("click", async () => {
   if (!state.connected) return;
   els.micBtn.disabled = true;