nyra voice beta

Author: sibisiddharth8

public/android-chrome-192x192.png.png public/android-chrome-192x192.pngpublic/android-chrome-192x192.png.png renamed to public/android-chrome-192x192.png

@@ -0,0 +1,73 @@
+// src/components/NyraMessage.tsx
+import { useState, useEffect } from 'react';
+import ReactMarkdown from 'react-markdown';
+import { motion } from 'framer-motion';
+import { FiLoader } from 'react-icons/fi';
+
+interface NyraMessageProps {
+  fullText: string;
+  isTyping: boolean;
+  onTypingComplete: () => void;
+  typingSpeed?: number;
+}
+
+// Helper to clean markdown for the speech engine
+export const cleanTextForSpeech = (text: string) => {
+    return text
+        .replace(/(\*\*|__)(.*?)\1/g, '$2') // Remove bold
+        .replace(/(\*|_)(.*?)\1/g, '$2')   // Remove italic
+        .replace(/`([^`]+)`/g, '$1')       // Remove inline code
+        .replace(/#+\s/g, '')             // Remove headings
+        .replace(/\[([^\]]+)\]\([^)]+\)/g, '$1'); // Remove links
+};
+
+const NyraMessage = ({ fullText, isTyping, onTypingComplete, typingSpeed = 100 }: NyraMessageProps) => {
+  const [typedText, setTypedText] = useState('');
+
+  useEffect(() => {
+    setTypedText(''); // Reset on new message
+    if (!isTyping || fullText === "...") {
+      // If it's a "thinking" message or not supposed to type, show it
+      setTypedText(fullText);
+      onTypingComplete();
+      return;
+    }
+
+    const words = fullText.split(' ');
+    let i = 0;
+    const timer = setInterval(() => {
+      if (i < words.length) {
+        setTypedText(prev => prev + words[i] + ' ');
+        i++;
+      } else {
+        clearInterval(timer);
+        onTypingComplete();
+      }
+    }, typingSpeed);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [fullText, isTyping, onTypingComplete, typingSpeed]);
+
+  // Show "thinking" spinner
+  if (fullText === "...") {
+    return (
+      <motion.div 
+        className="flex items-center gap-2 text-slate-500"
+        initial={{ opacity: 0 }} 
+        animate={{ opacity: 1 }}
+      >
+        <motion.div animate={{ rotate: 360 }} transition={{ repeat: Infinity, duration: 1, ease: "linear" }}>
+          <FiLoader />
+        </motion.div>
+        Nyra is thinking...
+      </motion.div>
+    );
+  }
+
+  // Show text (typed or final)
+  return <ReactMarkdown>{typedText}</ReactMarkdown>;
+};
+
+export default NyraMessage;

public/android-chrome-512x512.png.png public/android-chrome-512x512.pngpublic/android-chrome-512x512.png.png renamed to public/android-chrome-512x512.png

@@ -0,0 +1,66 @@
+import { motion, AnimatePresence } from 'framer-motion';
+import { FiMic, FiLoader, FiSquare } from 'react-icons/fi';
+
+interface NyraVoiceVisualizerProps {
+  state: 'listening' | 'thinking' | 'transcribing' | 'idle';
+  onClick: () => void;
+}
+
+export default function NyraVoiceVisualizer({ state, onClick }: NyraVoiceVisualizerProps) {
+  const isBusy = state === 'thinking' || state === 'transcribing';
+
+  return (
+    <div className="p-4 border-t border-slate-200 flex flex-col items-center justify-center bg-white rounded-b-xl h-[110px] relative">
+      <motion.button
+        key={state}
+        onClick={onClick}
+        disabled={isBusy}
+        aria-pressed={state === 'listening'}
+        className={`w-20 h-20 text-white rounded-full flex items-center justify-center shadow-2xl focus:outline-none relative transition-colors
+          ${state === 'listening' ? 'bg-red-600 hover:bg-red-700' : 'bg-blue-600 hover:bg-blue-700'}
+          ${isBusy ? 'bg-slate-400 cursor-not-allowed' : ''}
+        `}
+        initial={{ scale: 0.75, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{ type: 'spring', stiffness: 400, damping: 20 }}
+      >
+        {/* Soft pulsing rings when listening */}
+        <AnimatePresence>
+          {state === 'listening' && (
+            <motion.div
+              className="absolute w-full h-full rounded-full bg-red-500/30"
+              initial={{ scale: 1, opacity: 0.6 }}
+              animate={{ scale: 2.2, opacity: 0 }}
+              exit={{ opacity: 0 }}
+              transition={{ repeat: Infinity, duration: 1.6, ease: 'easeInOut' }}
+            />
+          )}
+        </AnimatePresence>
+
+        {/* Icon and tiny waveform indicator */}
+        {isBusy ? (
+          <motion.div animate={{ rotate: 360 }} transition={{ repeat: Infinity, duration: 1, ease: 'linear' }}>
+            <FiLoader size={28} />
+          </motion.div>
+        ) : (
+          <div className="flex flex-col items-center gap-1">
+            {state === 'listening' ? <FiSquare size={22} /> : <FiMic size={22} />}
+            <div className="w-16 h-2 bg-white/20 rounded-full overflow-hidden">
+              <div className="h-full bg-white/60 animate-pulse" style={{ width: state === 'listening' ? '70%' : '20%' }} />
+            </div>
+          </div>
+        )}
+      </motion.button>
+
+      <div className="text-xs text-slate-600 mt-3 flex flex-col items-center">
+        <div>
+          {state === 'listening' && 'Listening — auto-stops on silence'}
+          {state === 'transcribing' && 'Transcribing...'}
+          {state === 'thinking' && 'Nyra is thinking...'}
+          {state === 'idle' && 'Tap to speak'}
+        </div>
+        <div className="text-[10px] text-slate-400">Tip: tap to stop, or remain silent to auto-stop</div>
+      </div>
+    </div>
+  );
+}

src/components/NyraChatbot.tsx

@@ -1,7 +1,7 @@
 import { motion, AnimatePresence } from 'framer-motion';
 import { FiX, FiMail } from 'react-icons/fi';
 import SocialLinks from './SocialLinks';
-import MyMind from '../../../public/android-chrome-512x512.png.png';
+import MyMind from '../../../public/android-chrome-512x512.png';
 import { Link } from 'react-router-dom';
 // info icon import 
 import { FiInfo } from 'react-icons/fi';

src/components/NyraMessage.tsx

@@ -0,0 +1,52 @@
+import { useState, useRef, useCallback } from 'react';
+
+export const useAudioPlayer = () => {
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const [isMuted, setIsMuted] = useState(false);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
+
+  const play = useCallback((audioBlob: Blob, onEnd: () => void) => {
+    if (isMuted) {
+      onEnd(); // Call onEnd immediately if muted
+      return;
+    }
+    if (!audioRef.current) {
+      audioRef.current = new Audio();
+    }
+    const audioUrl = URL.createObjectURL(audioBlob);
+    audioRef.current.src = audioUrl;
+
+    audioRef.current.onplay = () => setIsSpeaking(true);
+    audioRef.current.onended = () => {
+      setIsSpeaking(false);
+      URL.revokeObjectURL(audioUrl); // Clean up
+      onEnd(); // This is the crucial callback for the loop
+    };
+    audioRef.current.onerror = () => {
+      setIsSpeaking(false);
+      URL.revokeObjectURL(audioUrl);
+      onEnd();
+    };
+    audioRef.current.play().catch(e => {
+        console.error("Audio play failed:", e);
+        onEnd();
+    });
+  }, [isMuted]);
+
+  const stop = useCallback(() => {
+    if (audioRef.current) {
+        audioRef.current.pause();
+        audioRef.current.src = "";
+    }
+    setIsSpeaking(false);
+  }, []);
+
+  const toggleMute = useCallback(() => {
+    setIsMuted(prev => {
+      if (!prev === true) stop(); // If muting, stop playback
+      return !prev;
+    });
+  }, [stop]);
+
+  return { play, stop, isSpeaking, isMuted, toggleMute };
+};