toggle text-to-speech for jamie

src/components/voice/VoiceMessagesDrawer.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
-import { SendHorizontal } from "lucide-react";
+import { SendHorizontal, Volume2, VolumeOff } from "lucide-react";
 import { useVoiceStore, type AgentMessage } from "@/stores/useVoiceStore";
 import {
   Sheet,
@@ -50,6 +50,8 @@
   const transcription = useVoiceStore((s) => s.transcription);
   const isConnected = useVoiceStore((s) => s.isConnected);
   const sendMessage = useVoiceStore((s) => s.sendMessage);
+  const ttsState = useVoiceStore((s) => s.ttsState);
+  const toggleTts = useVoiceStore((s) => s.toggleTts);
   const bottomRef = useRef<HTMLDivElement>(null);
   const [inputValue, setInputValue] = useState("");
 
@@ -77,9 +79,25 @@
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent side="right" className="w-full sm:max-w-sm flex flex-col h-full">
-        <SheetHeader>
-          <SheetTitle>Voice Agent</SheetTitle>
-          <SheetDescription>Chat with Jamie</SheetDescription>
+        <SheetHeader className="flex flex-row items-center justify-between">
+          <div>
+            <SheetTitle>Voice Agent</SheetTitle>
+            <SheetDescription>Chat with Jamie</SheetDescription>
+          </div>
+          {ttsState !== null && (
+            <Button
+              size="icon"
+              variant="ghost"
+              onClick={toggleTts}
+              aria-label={ttsState === "on" ? "Mute agent voice" : "Unmute agent voice"}
+            >
+              {ttsState === "on" ? (
+                <Volume2 className="h-4 w-4" />
+              ) : (
+                <VolumeOff className="h-4 w-4" />
+              )}
+            </Button>
+          )}
         </SheetHeader>
 
         <div className="flex-1 overflow-y-auto px-4 pb-4 space-y-3">

src/stores/useVoiceStore.ts

@@ -31,10 +31,14 @@ interface VoiceState {
   messages: AgentMessage[];
   transcription: Transcription | null;
 
+  // TTS (voice mode) – mirrors the agent's `tts` attribute
+  ttsState: string | null;
+
   // Actions
   connect: (slug: string) => Promise<void>;
   disconnect: () => void;
   toggleMic: () => Promise<void>;
+  toggleTts: () => void;
   sendMessage: (text: string) => void;
   clearError: () => void;
 }
@@ -49,6 +53,7 @@ export const useVoiceStore = create<VoiceState>((set, get) => ({
   error: null,
   messages: [],
   transcription: null,
+  ttsState: null,
 
   connect: async (slug: string) => {
     if (get().isConnected || get().isConnecting) return;
@@ -104,8 +109,23 @@ export const useVoiceStore = create<VoiceState>((set, get) => ({
         },
       );
 
+      // Track the agent's TTS attribute (voice mode on/off)
+      const updateTts = () => {
+        for (const [, p] of room.remoteParticipants) {
+          if (p.attributes?.tts !== undefined) {
+            set({ ttsState: p.attributes.tts });
+            return;
+          }
+        }
+        set({ ttsState: null });
+      };
+      room.on(RoomEvent.Connected, updateTts);
+      room.on(RoomEvent.ParticipantConnected, updateTts);
+      room.on(RoomEvent.ParticipantDisconnected, updateTts);
+      room.on(RoomEvent.ParticipantAttributesChanged, updateTts);
+
       room.on(RoomEvent.Disconnected, () => {
-        set({ isConnected: false, isConnecting: false, isMicEnabled: false, room: null });
+        set({ isConnected: false, isConnecting: false, isMicEnabled: false, ttsState: null, room: null });
       });
 
       await room.connect(LIVEKIT_URL, token);
@@ -132,6 +152,7 @@ export const useVoiceStore = create<VoiceState>((set, get) => ({
       isMicEnabled: false,
       messages: [],
       transcription: null,
+      ttsState: null,
     });
   },
 
@@ -156,5 +177,17 @@ export const useVoiceStore = create<VoiceState>((set, get) => ({
     set((s) => ({ messages: [...s.messages, msg] }));
   },
 
+  toggleTts: () => {
+    const { room } = get();
+    if (!room) return;
+    const payload = new TextEncoder().encode(
+      JSON.stringify({ type: "tts-toggle" }),
+    );
+    room.localParticipant.publishData(payload, {
+      reliable: true,
+      topic: "lk-chat-topic",
+    });
+  },
+
   clearError: () => set({ error: null }),
 }));