Add voice integration

package.json

@@ -35,6 +35,8 @@
     "esbuild": "^0.25.0",
     "esbuild-plugin-tailwindcss": "^2.0.1",
     "framer-motion": "^12.4.9",
+    "i18next": "^23.16.8",
+    "i18next-browser-languagedetector": "^8.2.0",
     "katex": "^0.16.21",
     "langgraph-nextjs-api-passthrough": "^0.0.4",
     "lodash": "^4.17.21",
@@ -43,8 +45,10 @@
     "nuqs": "^2.4.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-i18next": "^15.6.0",
     "react-markdown": "^10.0.1",
     "react-syntax-highlighter": "^15.5.0",
+    "react-use-websocket": "^4.13.0",
     "recharts": "^2.15.1",
     "rehype-katex": "^7.0.1",
     "remark-gfm": "^4.0.1",

public/audio-playback-worklet.js

@@ -0,0 +1,33 @@
+class AudioPlaybackWorklet extends AudioWorkletProcessor {
+    constructor() {
+        super();
+        this.port.onmessage = this.handleMessage.bind(this);
+        this.buffer = [];
+    }
+
+    handleMessage(event) {
+        if (event.data === null) {
+            this.buffer = [];
+            return;
+        }
+        this.buffer.push(...event.data);
+    }
+
+    process(inputs, outputs, parameters) {
+        const output = outputs[0];
+        const channel = output[0];
+
+        if (this.buffer.length > channel.length) {
+            const toProcess = this.buffer.slice(0, channel.length);
+            this.buffer = this.buffer.slice(channel.length);
+            channel.set(toProcess.map(v => v / 32768));
+        } else {
+            channel.set(this.buffer.map(v => v / 32768));
+            this.buffer = [];
+        }
+
+        return true;
+    }
+}
+
+registerProcessor("audio-playback-worklet", AudioPlaybackWorklet);

public/audio-processor-worklet.js

@@ -0,0 +1,30 @@
+const MIN_INT16 = -0x8000;
+const MAX_INT16 = 0x7fff;
+
+class PCMAudioProcessor extends AudioWorkletProcessor {
+    constructor() {
+        super();
+    }
+
+    process(inputs, outputs, parameters) {
+        const input = inputs[0];
+        if (input.length > 0) {
+            const float32Buffer = input[0];
+            const int16Buffer = this.float32ToInt16(float32Buffer);
+            this.port.postMessage(int16Buffer);
+        }
+        return true;
+    }
+
+    float32ToInt16(float32Array) {
+        const int16Array = new Int16Array(float32Array.length);
+        for (let i = 0; i < float32Array.length; i++) {
+            let val = Math.floor(float32Array[i] * MAX_INT16);
+            val = Math.max(MIN_INT16, Math.min(MAX_INT16, val));
+            int16Array[i] = val;
+        }
+        return int16Array;
+    }
+}
+
+registerProcessor("audio-processor-worklet", PCMAudioProcessor);

src/app/layout.tsx

@@ -11,7 +11,7 @@ const inter = Inter({
 });
 
 export const metadata: Metadata = {
-  title: "Agent Chat",
+  title: "EchOS Chat",
   description: "Agent Chat UX by LangChain",
 };
 

src/components/audio/player.ts

@@ -0,0 +1,32 @@
+export class Player {
+    private playbackNode: AudioWorkletNode | null = null;
+    private audioContext: AudioContext | null = null;
+
+    async init(sampleRate: number) {
+        this.audioContext = new AudioContext({ sampleRate });
+        await this.audioContext.audioWorklet.addModule("/audio-playback-worklet.js");
+
+        this.playbackNode = new AudioWorkletNode(this.audioContext, "audio-playback-worklet");
+        this.playbackNode.connect(this.audioContext.destination);
+    }
+
+    play(buffer: Int16Array) {
+        if (this.playbackNode) {
+            this.playbackNode.port.postMessage(buffer);
+        }
+    }
+
+    stop() {
+        if (this.playbackNode) {
+            this.playbackNode.port.postMessage(null);
+        }
+    }
+
+    async close() {
+        if (this.audioContext) {
+            await this.audioContext.close();
+            this.audioContext = null;
+        }
+        this.playbackNode = null;
+    }
+}

src/components/audio/recorder.ts

@@ -0,0 +1,52 @@
+export class Recorder {
+    onDataAvailable: (buffer: Iterable<number>) => void;
+    private audioContext: AudioContext | null = null;
+    private mediaStream: MediaStream | null = null;
+    private mediaStreamSource: MediaStreamAudioSourceNode | null = null;
+    private workletNode: AudioWorkletNode | null = null;
+
+    public constructor(onDataAvailable: (buffer: Iterable<number>) => void) {
+        this.onDataAvailable = onDataAvailable;
+    }
+
+    async start(stream: MediaStream) {
+        try {
+            if (this.audioContext) {
+                await this.audioContext.close();
+            }
+
+            this.audioContext = new AudioContext({ sampleRate: 24000 });
+
+            await this.audioContext.audioWorklet.addModule("/audio-processor-worklet.js");
+
+            this.mediaStream = stream;
+            this.mediaStreamSource = this.audioContext.createMediaStreamSource(this.mediaStream);
+
+            this.workletNode = new AudioWorkletNode(this.audioContext, "audio-processor-worklet");
+            this.workletNode.port.onmessage = event => {
+                this.onDataAvailable(event.data.buffer);
+            };
+
+            this.mediaStreamSource.connect(this.workletNode);
+            this.workletNode.connect(this.audioContext.destination);
+        } catch (error) {
+            console.error("Error starting audio recorder:", error);
+            this.stop();
+        }
+    }
+
+    async stop() {
+        if (this.mediaStream) {
+            this.mediaStream.getTracks().forEach(track => track.stop());
+            this.mediaStream = null;
+        }
+
+        if (this.audioContext) {
+            await this.audioContext.close();
+            this.audioContext = null;
+        }
+
+        this.mediaStreamSource = null;
+        this.workletNode = null;
+    }
+}