Add emotion display and fix Whisper integration

frontend/app/voice/page.tsx

@@ -88,9 +88,11 @@ export default function OraVoice() {
 
             const data = await res.json();
             const reply = data.response;
+            const detectedEmotion = data.emotion;
 
             setResponse(reply);
-            setHistory(prev => [...prev, { role: "user", content: text }, { role: "assistant", content: reply }]);
+            setEmotion(detectedEmotion);
+            setHistory((prev: any) => [...prev, { role: "user", content: text }, { role: "assistant", content: reply }]);
 
             speak(reply);
         } catch (e) {
@@ -147,9 +149,11 @@ export default function OraVoice() {
 
     const toggleListen = () => {
         if (state === "IDLE") {
-            recognitionRef.current?.start();
+            startWhisperRecording();
+        } else if (state === "LISTENING") {
+            stopWhisperRecording();
         } else if (state === "SPEAKING") {
-            // Audio will stop naturally or can be stopped via audio element
+            // Audio will stop naturally
             setState("IDLE");
         }
     };
@@ -186,12 +190,20 @@ export default function OraVoice() {
                 <div className="h-32 w-full max-w-2xl text-center px-4 space-y-4">
                     <p className="text-gray-400 font-light tracking-widest text-sm uppercase">{state}</p>
 
+                    {/* Emotion Badge */}
+                    {emotion && state !== "LISTENING" && (
+                        <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-500/20 border border-blue-400/30">
+                            <span className="text-xl">{emotion === "joy" ? "😊" : emotion === "sadness" ? "😔" : emotion === "anger" ? "😠" : emotion === "fear" ? "😰" : "💭"}</span>
+                            <span className="text-blue-200 text-sm capitalize">{emotion}</span>
+                        </div>
+                    )}
+
                     {state === "LISTENING" && (
                         <p className="text-2xl text-white font-serif italic">"I'm listening..."</p>
                     )}
 
                     {state === "THINKING" && (
-                        <p className="text-2xl text-purple-300 font-serif italic animate-pulse">Divining wisdom...</p>
+                        <p className="text-2xl text-purple-300 font-serif italic animate-pulse">Seeking wisdom...</p>
                     )}
 
                     {(state === "SPEAKING" || state === "IDLE") && response && (