+ );
+};
+
+export default Controls;
\ No newline at end of file
diff --git a/ui/tts-client-app/src/hooks/useVoiceChat.js b/ui/tts-client-app/src/hooks/useVoiceChat.js
new file mode 100644
index 0000000..4c74745
--- /dev/null
+++ b/ui/tts-client-app/src/hooks/useVoiceChat.js
@@ -0,0 +1,394 @@
+// src/hooks/useVoiceChat.js
+
+// This file is a custom React hook that contains all the stateful logic
+// and side effects for the voice chat application.
+
+import { useState, useRef, useEffect } from "react";
+import {
+ createSession,
+ transcribeAudio,
+ chatWithAI,
+ streamSpeech,
+} from "../services/apiService";
+import {
+ stopAllPlayingAudio,
+ stopAllMediaStreams,
+ resampleBuffer,
+} from "../services/audioUtils";
+
+// Constants for Voice Activity Detection and timing
+const VAD_THRESHOLD = 0.01;
+const VAD_SILENCE_DURATION = 2500;
+const MINIMUM_AUDIO_DURATION_MS = 500;
+const AUTO_MODE_COOLDOWN_MS = 3000;
+
+const useVoiceChat = ({ chatContainerRef }) => {
+ const [chatHistory, setChatHistory] = useState([
+ {
+ text: "Hello! I'm an AI assistant. How can I help you today?",
+ isUser: false,
+ },
+ ]);
+ const [status, setStatus] = useState("Click the microphone to start recording.");
+ const [isBusy, setIsBusy] = useState(false);
+ const [isRecording, setIsRecording] = useState(false);
+ const [showErrorModal, setShowErrorModal] = useState(false);
+ const [errorMessage, setErrorMessage] = useState("");
+ const [sessionId, setSessionId] = useState(null);
+ const [isAutoMode, setIsAutoMode] = useState(false);
+ const [isAutoListening, setIsAutoListening] = useState(false);
+
+ // All refs must be declared here, inside the custom hook.
+ const mediaRecorderRef = useRef(null);
+ const audioChunksRef = useRef([]);
+ const audioContextRef = useRef(null);
+ const playbackTimeRef = useRef(0);
+ const isRecordingRef = useRef(false);
+ const playingSourcesRef = useRef([]);
+ const vadStreamRef = useRef(null);
+ const scriptProcessorRef = useRef(null);
+ const silenceTimeoutRef = useRef(null);
+ const lastRequestTimeRef = useRef(0);
+ const streamRef = useRef(null);
+
+ // --- Initial Session Creation Effect ---
+ useEffect(() => {
+ const startSession = async () => {
+ setIsBusy(true);
+ setStatus("Starting new chat session...");
+ try {
+ const session = await createSession();
+ setSessionId(session.id);
+ console.log(`Session created with ID: ${session.id}`);
+ setStatus("Click the microphone to start recording.");
+ } catch (err) {
+ console.error("Error creating session:", err);
+ setStatus(`Error: Could not start session. ${err.message}`);
+ setErrorMessage(`Failed to create a chat session: ${err.message}`);
+ setShowErrorModal(true);
+ } finally {
+ setIsBusy(false);
+ }
+ };
+ startSession();
+
+ return () => {
+ // Pass the refs to the utility function here
+ stopAllMediaStreams(vadStreamRef, mediaRecorderRef, scriptProcessorRef, streamRef);
+ };
+ }, []);
+
+ // New useEffect hook to automatically scroll to the bottom of the chat history
+ // The fix: `chatContainerRef` is now included in the dependency array.
+ useEffect(() => {
+ if (chatContainerRef.current) {
+ chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+ }
+ }, [chatHistory, chatContainerRef]);
+
+ const addMessage = (text, isUser) => {
+ setChatHistory((prevHistory) => [...prevHistory, { text, isUser }]);
+ };
+
+ /**
+ * Plays a stream of audio chunks using the Web Audio API by fetching them from the API.
+ * This is the orchestrator that uses the stateless streamSpeech API function.
+ * @param {string} text - The text to be synthesized by the TTS service.
+ */
+ const playStreamingAudio = async (text) => {
+ setIsBusy(true);
+ setStatus("Streaming audio...");
+ // Pass the refs to the utility function
+ stopAllPlayingAudio(playingSourcesRef, audioContextRef, playbackTimeRef);
+
+ try {
+ if (!audioContextRef.current) {
+ audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();
+ playbackTimeRef.current = audioContextRef.current.currentTime;
+ }
+
+ const audioContext = audioContextRef.current;
+
+ const onChunkReceived = (rawFloat32Data) => {
+ // This is the callback that receives processed audio data from apiService.
+ // It's responsible for using the Web Audio API to play the sound.
+ const float32Resampled = resampleBuffer(
+ rawFloat32Data,
+ 24000, // The model's sample rate is hardcoded to 24000
+ audioContext.sampleRate
+ );
+ const audioBuffer = audioContext.createBuffer(
+ 1,
+ float32Resampled.length,
+ audioContext.sampleRate
+ );
+ audioBuffer.copyToChannel(float32Resampled, 0);
+
+ const source = audioContext.createBufferSource();
+ source.buffer = audioBuffer;
+ source.connect(audioContext.destination);
+
+ const currentTime = audioContext.currentTime;
+ const startTime = Math.max(playbackTimeRef.current, currentTime);
+
+ source.start(startTime);
+ playbackTimeRef.current = startTime + audioBuffer.duration;
+
+ playingSourcesRef.current.push(source);
+ source.onended = () => {
+ playingSourcesRef.current = playingSourcesRef.current.filter(
+ (s) => s !== source
+ );
+ };
+ };
+
+ const onStreamDone = () => {
+ // This callback is triggered when the stream finishes.
+ console.log("TTS Stream complete.");
+ };
+
+ // Call the stateless API function, passing the UI-related callbacks
+ await streamSpeech(text, onChunkReceived, onStreamDone);
+
+ } catch (err) {
+ console.error("Failed to stream speech:", err);
+ setStatus(`Error: Failed to stream speech. ${err.message}`);
+ setErrorMessage(`Failed to stream speech: ${err.message}`);
+ setShowErrorModal(true);
+ } finally {
+ setIsBusy(false);
+ lastRequestTimeRef.current = Date.now();
+ if (isAutoMode && isAutoListening) {
+ setStatus("Listening for voice...");
+ } else if (!isAutoMode) {
+ setStatus("Click the microphone to start recording.");
+ } else {
+ setStatus("Click to start listening.");
+ }
+ }
+ };
+
+
+ const processConversation = async (audioBlob) => {
+ console.log("Processing conversation...");
+ try {
+ const audioDuration = audioBlob.size / (48000 * 2 * 1) * 1000;
+ if (audioDuration < MINIMUM_AUDIO_DURATION_MS) {
+ console.log(`Audio too short (${audioDuration.toFixed(2)}ms), skipping.`);
+ setStatus("Audio was too short. Please speak a little longer.");
+ lastRequestTimeRef.current = Date.now();
+ return;
+ }
+ if (audioBlob.size === 0) {
+ console.warn("Audio blob is empty, skipping STT API call.");
+ setStatus("Recording stopped, but no audio was captured. Please try again.");
+ lastRequestTimeRef.current = Date.now();
+ return;
+ }
+
+ setStatus("Transcribing audio...");
+ const userText = await transcribeAudio(audioBlob);
+ addMessage(userText, true);
+
+ setStatus("AI is thinking...");
+ const aiText = await chatWithAI(sessionId, userText);
+ addMessage(aiText, false);
+
+ await playStreamingAudio(aiText);
+ } catch (error) {
+ console.error("Conversation processing failed:", error);
+ setStatus(`Error: ${error.message}`);
+ setErrorMessage(`An error occurred: ${error.message}`);
+ setShowErrorModal(true);
+ } finally {
+ setIsBusy(false);
+ lastRequestTimeRef.current = Date.now();
+ // This is the main correction: only stop streams if not in auto-listening mode
+ if (!isAutoMode) {
+ setStatus("Click the microphone to start recording.");
+ stopAllMediaStreams(vadStreamRef, mediaRecorderRef, scriptProcessorRef, streamRef);
+ } else if (isAutoMode && isAutoListening) {
+ setStatus("Listening for voice...");
+ } else {
+ setStatus("Click to start listening.");
+ }
+ }
+ };
+
+ const startManualRecording = async () => {
+ if (isRecording) return;
+
+ try {
+ if (!sessionId) {
+ setErrorMessage("Please wait for the chat session to be initialized.");
+ setShowErrorModal(true);
+ return;
+ }
+ const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+ streamRef.current = stream;
+ mediaRecorderRef.current = new MediaRecorder(stream);
+ mediaRecorderRef.current.start();
+ audioChunksRef.current = [];
+
+ mediaRecorderRef.current.ondataavailable = (event) => {
+ audioChunksRef.current.push(event.data);
+ };
+
+ mediaRecorderRef.current.onstop = async () => {
+ if (streamRef.current) {
+ streamRef.current.getTracks().forEach(track => track.stop());
+ streamRef.current = null;
+ }
+ mediaRecorderRef.current = null;
+ const audioBlob = new Blob(audioChunksRef.current, { type: "audio/wav" });
+ await processConversation(audioBlob);
+ };
+ setIsRecording(true);
+ isRecordingRef.current = true;
+ setStatus("Recording... Click to stop.");
+ } catch (err) {
+ console.error("Error accessing microphone:", err);
+ setStatus("Error: Cannot access microphone.");
+ setErrorMessage("Microphone access has been denied. Please enable it.");
+ setShowErrorModal(true);
+ }
+ };
+
+ const stopManualRecording = () => {
+ if (mediaRecorderRef.current?.state === "recording") {
+ setIsBusy(true);
+ setIsRecording(false);
+ mediaRecorderRef.current.stop();
+ }
+ };
+
+ const startAutoListening = async () => {
+ try {
+ if (!sessionId) {
+ setErrorMessage("Please wait for the chat session to be initialized.");
+ setShowErrorModal(true);
+ return;
+ }
+ const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+ vadStreamRef.current = stream;
+ const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+ const source = audioContext.createMediaStreamSource(stream);
+ const bufferSize = 4096;
+ const scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
+ scriptProcessorRef.current = scriptProcessor;
+ source.connect(scriptProcessor);
+ scriptProcessor.connect(audioContext.destination);
+
+ scriptProcessor.onaudioprocess = (event) => {
+ const inputBuffer = event.inputBuffer.getChannelData(0);
+ let sum = 0.0;
+ for (let i = 0; i < inputBuffer.length; i++) {
+ sum += inputBuffer[i] * inputBuffer[i];
+ }
+ const volume = Math.sqrt(sum / inputBuffer.length);
+ const isVoiceDetected = volume > VAD_THRESHOLD;
+ const timeSinceLastRequest = Date.now() - lastRequestTimeRef.current;
+ const isCooldownPassed = timeSinceLastRequest > AUTO_MODE_COOLDOWN_MS;
+
+ if (isVoiceDetected) {
+ if (silenceTimeoutRef.current) {
+ clearTimeout(silenceTimeoutRef.current);
+ silenceTimeoutRef.current = null;
+ }
+ if (!isRecordingRef.current && isCooldownPassed) {
+ startAutoRecording(stream);
+ }
+ } else if (isRecordingRef.current) {
+ if (!silenceTimeoutRef.current) {
+ silenceTimeoutRef.current = setTimeout(() => {
+ stopAutoRecording();
+ }, VAD_SILENCE_DURATION);
+ }
+ }
+ };
+ setIsAutoListening(true);
+ setStatus("Listening for voice...");
+ } catch (err) {
+ console.error("Error accessing microphone for VAD:", err);
+ setStatus("Error: Cannot access microphone.");
+ setErrorMessage("Microphone access has been denied. Please enable it.");
+ setShowErrorModal(true);
+ }
+ };
+
+ const stopAutoListening = () => {
+ setIsAutoListening(false);
+ // Pass the refs here to the utility function
+ stopAllMediaStreams(vadStreamRef, mediaRecorderRef, scriptProcessorRef, streamRef);
+ setStatus("Click to start listening.");
+ };
+
+ const startAutoRecording = (stream) => {
+ if (mediaRecorderRef.current?.state === "recording") return;
+ mediaRecorderRef.current = new MediaRecorder(stream);
+ audioChunksRef.current = [];
+ mediaRecorderRef.current.ondataavailable = (event) => {
+ audioChunksRef.current.push(event.data);
+ };
+ mediaRecorderRef.current.onstop = async () => {
+ isRecordingRef.current = false;
+ setIsRecording(false);
+ if (audioChunksRef.current.length > 0) {
+ setIsBusy(true);
+ setStatus("Transcribing audio...");
+ const audioBlob = new Blob(audioChunksRef.current, { type: "audio/wav" });
+ await processConversation(audioBlob);
+ } else {
+ setIsBusy(false);
+ setStatus("Listening for voice...");
+ }
+ };
+ mediaRecorderRef.current.start();
+ isRecordingRef.current = true;
+ setIsRecording(true);
+ setStatus("Recording...");
+ };
+
+ const stopAutoRecording = () => {
+ if (mediaRecorderRef.current?.state === "recording") {
+ mediaRecorderRef.current.stop();
+ }
+ };
+
+ const handleMicClick = () => {
+ // Correctly pass the refs to the utility function
+ stopAllPlayingAudio(playingSourcesRef, audioContextRef, playbackTimeRef);
+ if (isBusy) return;
+
+ if (isAutoMode) {
+ if (isAutoListening) {
+ stopAutoListening();
+ } else {
+ startAutoListening();
+ }
+ } else {
+ if (isRecording) {
+ stopManualRecording();
+ } else {
+ startManualRecording();
+ }
+ }
+ };
+
+ return {
+ chatHistory,
+ status,
+ isBusy,
+ isRecording,
+ isAutoMode,
+ isAutoListening,
+ sessionId,
+ showErrorModal,
+ errorMessage,
+ setIsAutoMode,
+ handleMicClick,
+ setShowErrorModal,
+ };
+};
+
+export default useVoiceChat;
diff --git a/ui/tts-client-app/src/index.css b/ui/tts-client-app/src/index.css
index ec2585e..bd6213e 100644
--- a/ui/tts-client-app/src/index.css
+++ b/ui/tts-client-app/src/index.css
@@ -1,13 +1,3 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
\ No newline at end of file
diff --git a/ui/tts-client-app/src/pages/HomePage.js b/ui/tts-client-app/src/pages/HomePage.js
new file mode 100644
index 0000000..648a249
--- /dev/null
+++ b/ui/tts-client-app/src/pages/HomePage.js
@@ -0,0 +1,75 @@
+// src/pages/HomePage.js
+import React, { useRef, useEffect } from "react";
+import ChatWindow from "../components/ChatWindow";
+import Controls from "../components/Controls.js";
+import useVoiceChat from "../hooks/useVoiceChat";
+
+const HomePage = () => {
+ // Chat container ref for scrolling
+ const chatContainerRef = useRef(null);
+
+ // Custom hook for all voice chat logic
+ // The 'sessionId' variable has been removed from the destructuring
+ // because it is not used in this component.
+ const {
+ chatHistory,
+ status,
+ isRecording,
+ isBusy,
+ isAutoMode,
+ isAutoListening,
+ showErrorModal,
+ errorMessage,
+ setIsAutoMode,
+ handleMicClick,
+ setShowErrorModal,
+ } = useVoiceChat({ chatContainerRef });
+
+ // Effect to automatically scroll to the bottom of the chat history
+ // This useEffect is duplicated from the custom hook; it might be redundant,
+ // but it's kept here to match the provided code's logic.
+ useEffect(() => {
+ if (chatContainerRef.current) {
+ chatContainerRef.current.scrollTop = chatContainerRef.current.scrollHeight;
+ }
+ }, [chatHistory]);
+
+ const toggleAutoMode = () => {
+ setIsAutoMode(!isAutoMode);
+ };
+
+ return (
+
+
+
+
+
+
+
+ {showErrorModal && (
+
+
+
Error
+
{errorMessage}
+
+
+
+ )}
+
+ );
+};
+
+export default HomePage;
diff --git a/ui/tts-client-app/src/services/apiService.js b/ui/tts-client-app/src/services/apiService.js
new file mode 100644
index 0000000..ed4c4ec
--- /dev/null
+++ b/ui/tts-client-app/src/services/apiService.js
@@ -0,0 +1,126 @@
+// src/services/apiService.js
+
+// This file handles all communication with your API endpoints.
+// It is designed to be stateless and does not use any React hooks.
+
+import { convertPcmToFloat32 } from "./audioUtils";
+
+// Please replace with your actual endpoints
+const STT_ENDPOINT = "http://localhost:8001/stt/transcribe";
+const SESSIONS_CREATE_ENDPOINT = "http://localhost:8001/sessions";
+const SESSIONS_CHAT_ENDPOINT = (id) => `http://localhost:8001/sessions/${id}/chat`;
+const TTS_ENDPOINT = "http://localhost:8001/speech";
+
+/**
+ * Creates a new chat session with a unique user ID.
+ * @returns {Promise