feat: add seamless text and voice chat

web/app.js

@@ -26,6 +26,7 @@ const VOICES = [
 
 const HISTORY_KEY = "voice_history";
 const HISTORY_MAX = 50;
+const MODE_KEY = "hope_conversation_mode";
 
 // ── State ───────────────────────────────────────────────────────────────────
 let room = null;
@@ -35,6 +36,8 @@ let micLevel = 0;                // 0..1, smoothed
 let agentAudioLevel = 0;         // 0..1, smoothed
 let userSpeaking = false;        // local VAD-ish flag from mic level
 let wakeLock = null;
+let conversationMode = localStorage.getItem(MODE_KEY) === "text" ? "text" : "voice";
+let connectionPromise = null;
 
 function escapeHtml(s) {
     const d = document.createElement("div");
@@ -65,6 +68,13 @@ const tasksPanel = document.getElementById("tasksPanel");
 const tasksList = document.getElementById("tasksList");
 const tasksBadge = document.getElementById("tasksBadge");
 const closeTasksBtn = document.getElementById("closeTasksBtn");
+const voiceModeBtn = document.getElementById("voiceModeBtn");
+const textModeBtn = document.getElementById("textModeBtn");
+const modeDescriptionEl = document.getElementById("modeDescription");
+const transcriptModeLabelEl = document.getElementById("transcriptModeLabel");
+const chatComposer = document.getElementById("chatComposer");
+const chatInput = document.getElementById("chatInput");
+const sendChatBtn = document.getElementById("sendChatBtn");
 
 // ── Background tasks state ──────────────────────────────────────────────────
 const tasks = new Map(); // task_id -> {id, description, status, steps: [], result, error}
@@ -133,6 +143,57 @@ tasksBtn.setAttribute("aria-expanded", "false");
 tasksBtn.addEventListener("click", () => setTasksOpen(!tasksPanel.classList.contains("open")));
 closeTasksBtn.addEventListener("click", () => setTasksOpen(false));
 
+// ── Voice / text mode ──────────────────────────────────────────────────────
+function updateModeUI() {
+    const isText = conversationMode === "text";
+    document.body.dataset.mode = conversationMode;
+    voiceModeBtn.classList.toggle("active", !isText);
+    textModeBtn.classList.toggle("active", isText);
+    voiceModeBtn.setAttribute("aria-pressed", String(!isText));
+    textModeBtn.setAttribute("aria-pressed", String(isText));
+    modeDescriptionEl.textContent = isText
+        ? "Type when quiet is better. Switch back to voice without losing the thread."
+        : "Speak naturally. I’ll listen, remember, and answer in real time.";
+    transcriptModeLabelEl.textContent = isText ? "Shared voice and text history" : "Live voice transcript";
+    startBtn.innerHTML = isText
+        ? '<span class="button-spark" aria-hidden="true"></span>Connect to Hope'
+        : '<span class="button-spark" aria-hidden="true"></span>Start conversation';
+    if (isText) {
+        setState(room ? "listening" : "idle");
+        window.setTimeout(() => chatInput.focus(), 0);
+    }
+}
+
+async function setConversationMode(mode) {
+    if (mode !== "voice" && mode !== "text") return;
+    conversationMode = mode;
+    localStorage.setItem(MODE_KEY, mode);
+    updateModeUI();
+
+    if (!room || !room.localParticipant) return;
+    sendModeMessage(mode);
+    if (mode === "text") {
+        await room.localParticipant.setMicrophoneEnabled(false);
+        micMuted = true;
+        muteBtn.disabled = true;
+        updateMuteIcon();
+        stopVisualLoop();
+        statusEl.textContent = "Secure room · Text mode";
+    } else {
+        await room.startAudio();
+        await room.localParticipant.setMicrophoneEnabled(true);
+        micMuted = false;
+        muteBtn.disabled = false;
+        updateMuteIcon();
+        setupMicAnalyser();
+        startVisualLoop();
+        statusEl.textContent = "Secure room · Microphone on";
+    }
+}
+
+voiceModeBtn.addEventListener("click", () => setConversationMode("voice"));
+textModeBtn.addEventListener("click", () => setConversationMode("text"));
+
 // ── Audio analysers (mic + remote agent audio) ─────────────────────────────
 let micCtx = null;
 let micAnalyser = null;
@@ -202,18 +263,26 @@ function readAgentAudioLevel() {
 
 // ── State machine ───────────────────────────────────────────────────────────
 const STATE_LABELS = {
-    idle: "Ready when you are",
-    connecting: "Opening a secure room",
-    listening: "Listening",
-    thinking: "Thinking it through",
-    speaking: "Hope is speaking",
+    voice: {
+        idle: "Ready when you are",
+        connecting: "Opening a secure room",
+        listening: "Listening",
+        thinking: "Thinking it through",
+        speaking: "Hope is speaking",
+    },
+    text: {
+        idle: "Ready to type",
+        connecting: "Opening a secure room",
+        listening: "Text chat ready",
+        thinking: "Hope is writing",
+        speaking: "Hope replied",
+    },
 };
 
 function setState(next) {
-    if (next === uiState) return;
     uiState = next;
     orbEl.dataset.state = next;
-    stateLabelEl.textContent = STATE_LABELS[next] || next;
+    stateLabelEl.textContent = STATE_LABELS[conversationMode][next] || next;
 
     // Thinking timer: show the "thinking..." chip if it lingers past 2s
     if (next === "thinking") {
@@ -235,6 +304,8 @@ function setState(next) {
     }
 }
 
+updateModeUI();
+
 function inferState() {
     if (!room || !room.localParticipant) return "idle";
     if (!agentParticipant) return "connecting";
@@ -441,6 +512,10 @@ function handleDataPacket(payload, participant, topic) {
         const msg = JSON.parse(new TextDecoder().decode(payload));
         if (msg.type === "transcript") {
             addMessage(msg.role || "agent", msg.text);
+            if (conversationMode === "text" && (msg.role || "agent") === "agent") {
+                setState("listening");
+                chatInput.focus();
+            }
         } else if (msg.type === "task_event") {
             handleTaskEvent(msg);
         }
@@ -558,9 +633,12 @@ function findAgent(rm) {
 
 function markAgentFound(rm, participant) {
     agentParticipant = participant;
-    statusEl.textContent = "Hope joined · Preparing microphone…";
-    // Send current voice selection to the agent
+    statusEl.textContent = conversationMode === "text"
+        ? "Hope joined · Text chat ready"
+        : "Hope joined · Preparing microphone…";
+    // Synchronize voice and interaction mode when the agent joins.
     sendVoiceMessage(currentVoiceId(), rm);
+    sendModeMessage(conversationMode, rm);
 }
 
 function createRoom(token) {
@@ -665,52 +743,116 @@ function waitForAgent(timeoutMs) {
     });
 }
 
-startBtn.addEventListener("click", async () => {
-    try {
-        setState("connecting");
-        statusEl.textContent = "Opening your secure room…";
-        await acquireWakeLock();
+async function connectConversation() {
+    if (room && agentParticipant) return room;
+    if (connectionPromise) return connectionPromise;
 
-        // Get a signed access token from the token endpoint
-        const token = await fetchToken(ROOM_NAME);
+    connectionPromise = (async () => {
+        try {
+            setState("connecting");
+            statusEl.textContent = "Opening your secure room…";
+            await acquireWakeLock();
 
-        room = await createRoom(token);
-        await room.startAudio();
+            // Get a signed access token from the token endpoint.
+            const token = await fetchToken(ROOM_NAME);
+            room = await createRoom(token);
 
-        // The agent is dispatched when we join. If it misses the dispatch
-        // (e.g. the server just started and the worker wasn't ready yet),
-        // reconnect once to trigger a fresh dispatch.
-        statusEl.textContent = "Inviting Hope into the room…";
-        if (!(await waitForAgent(10000))) {
-            statusEl.textContent = "Hope is taking a moment · Retrying…";
-            const stale = room;
-            room = null;          // detach first so its Disconnected handler
-            agentParticipant = null;  // cannot clobber the UI
-            await stale.disconnect();
-            const freshToken = await fetchToken(ROOM_NAME);
-            room = await createRoom(freshToken);
-            if (!(await waitForAgent(15000))) {
-                throw new Error("Assistant did not join — reload the page and try again");
+            // The agent is dispatched when we join. If it misses the dispatch
+            // (for example during a server restart), reconnect once.
+            statusEl.textContent = "Inviting Hope into the room…";
+            if (!(await waitForAgent(10000))) {
+                statusEl.textContent = "Hope is taking a moment · Retrying…";
+                const stale = room;
+                room = null;
+                agentParticipant = null;
+                await stale.disconnect();
+                const freshToken = await fetchToken(ROOM_NAME);
+                room = await createRoom(freshToken);
+                if (!(await waitForAgent(15000))) {
+                    throw new Error("Assistant did not join — reload the page and try again");
+                }
             }
+
+            sendModeMessage(conversationMode);
+            if (conversationMode === "voice") {
+                await room.startAudio();
+                statusEl.textContent = "Waiting for microphone permission…";
+                await room.localParticipant.setMicrophoneEnabled(true);
+                micMuted = false;
+                setupMicAnalyser();
+                startVisualLoop();
+                statusEl.textContent = "Secure room · Microphone on";
+            } else {
+                await room.localParticipant.setMicrophoneEnabled(false);
+                micMuted = true;
+                stopVisualLoop();
+                statusEl.textContent = "Secure room · Text mode";
+            }
+
+            startBtn.disabled = true;
+            stopBtn.disabled = false;
+            muteBtn.disabled = conversationMode !== "voice";
+            updateMuteIcon();
+            setState("listening");
+            return room;
+        } catch (err) {
+            console.error("Connection failed:", err);
+            statusEl.textContent = `Error: ${err.message}`;
+            setState("idle");
+            releaseWakeLock();
+            throw err;
+        } finally {
+            connectionPromise = null;
         }
+    })();
 
-        statusEl.textContent = "Waiting for microphone permission…";
-        await room.localParticipant.setMicrophoneEnabled(true);
+    return connectionPromise;
+}
 
-        statusEl.textContent = "Secure room · Microphone on";
-        startBtn.disabled = true;
-        stopBtn.disabled = false;
-        muteBtn.disabled = false;
-        micMuted = false;
+startBtn.addEventListener("click", () => {
+    connectConversation().catch(() => {});
+});
 
-        setupMicAnalyser();
-        startVisualLoop();
+// ── Text chat ──────────────────────────────────────────────────────────────
+function resizeChatInput() {
+    chatInput.style.height = "auto";
+    chatInput.style.height = `${Math.min(chatInput.scrollHeight, 144)}px`;
+}
 
+chatInput.addEventListener("input", () => {
+    resizeChatInput();
+    sendChatBtn.disabled = !chatInput.value.trim();
+});
+
+chatInput.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        chatComposer.requestSubmit();
+    }
+});
+
+chatComposer.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const text = chatInput.value.trim();
+    if (!text) return;
+
+    sendChatBtn.disabled = true;
+    chatInput.disabled = true;
+    try {
+        if (conversationMode !== "text") await setConversationMode("text");
+        await connectConversation();
+        setState("thinking");
+        await room.localParticipant.sendText(text, { topic: "lk.chat" });
+        chatInput.value = "";
+        resizeChatInput();
     } catch (err) {
-        console.error("Connection failed:", err);
-        statusEl.textContent = `Error: ${err.message}`;
-        setState("idle");
-        releaseWakeLock();
+        console.error("Text message failed:", err);
+        statusEl.textContent = `Message not sent: ${err.message}`;
+        setState("listening");
+    } finally {
+        chatInput.disabled = false;
+        sendChatBtn.disabled = !chatInput.value.trim();
+        chatInput.focus();
     }
 });
 
@@ -770,3 +912,13 @@ function sendVoiceMessage(voice, targetRoom) {
         reliable: true,
     });
 }
+
+function sendModeMessage(mode, targetRoom) {
+    const r = targetRoom || room;
+    if (!r || !r.localParticipant) return;
+    const payload = new TextEncoder().encode(JSON.stringify({ type: "set_mode", mode }));
+    r.localParticipant.publishData(payload, {
+        topic: "conversation-control",
+        reliable: true,
+    });
+}