violentwave/CodeAssist

1import React, { useState } from "react";2import { askLLM } from "@/shared/ai/llmClient";3 4export default function VoiceAssistant() {5  const [listening, setListening] = useState(false);6  const [transcript, setTranscript] = useState("");7  const [response, setResponse] = useState("");8 9  const startListening = () => {10    const recognition = new (window.SpeechRecognition ||11      window.webkitSpeechRecognition)();12    recognition.lang = "en-US";13    recognition.start();14 15    recognition.onresult = (event: any) => {16      const text = event.results[0][0].transcript;17      setTranscript(text);18      sendToAI(text); // auto-send to AI19    };20 21    recognition.onend = () => setListening(false);22    setListening(true);23  };24 25  const speakText = (text: string) => {26    const synth = window.speechSynthesis;27    const utterance = new SpeechSynthesisUtterance(text);28    utterance.lang = "en-US";29    synth.speak(utterance);30  };31 32  const sendToAI = async (prompt: string) => {33    const result = await askLLM(prompt);34    setResponse(result);35    speakText(result);36  };37 38  return (39    <div className="p-6 text-center">40      <h1 className="text-2xl font-bold mb-4">🎙️ AI Voice Coding Assistant</h1>41      <button42        onClick={startListening}43        className="bg-blue-600 text-white px-4 py-2 rounded"44      >45        {listening ? "Listening..." : "🎤 Start Talking"}46      </button>47 48      <p className="mt-4">Transcript: {transcript}</p>49 50      <div className="mt-6">51        <strong>AI Response:</strong>52        <pre className="bg-gray-100 p-3 rounded mt-2">{response}</pre>53      </div>54    </div>55  );56}