Voice input

client/package.json

@@ -17,6 +17,7 @@
     "react-markdown": "^10.1.0",
     "react-router-dom": "^6.28.1",
     "react-scripts": "5.0.1",
+    "react-speech-recognition": "^4.0.0",
     "rehype-highlight": "^7.0.2",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",

client/src/components/layout/index.tsx

@@ -3,6 +3,7 @@ import './index.css';
 import { Outlet } from 'react-router-dom';
 import SideBarNav from '../main/sideBarNav';
 import Header from '../header';
+import VoiceNavigator from '../main/voiceRecognition';
 
 /**
  * Main component represents the layout of the main page, including a sidebar and the main content area.
@@ -13,6 +14,7 @@ const Layout = () => (
     <div id='main' className='main'>
       <SideBarNav />
       <div id='right_main' className='right_main'>
+        <VoiceNavigator />
         <Outlet />
       </div>
     </div>

client/src/components/main/voiceRecognition/index.tsx

@@ -0,0 +1,26 @@
+import useVoiceRecognition from '../../../hooks/useVoiceRecognition';
+
+const VoiceNavigator = () => {
+  const { transcript, listening, browserSupportsSpeechRecognition, startL, stopL } =
+    useVoiceRecognition();
+
+  if (!browserSupportsSpeechRecognition) {
+    return <p>Your browser doesn&apos;t support speech recognition.</p>;
+  }
+
+  return (
+    <div style={{ padding: '1rem', background: '#222', color: '#fff' }}>
+      <p>Status: {listening ? '🎙️ Listening...' : '🛑 Not listening'}</p>
+      <button onClick={startL} style={{ marginRight: '1rem' }}>
+        Start Listening
+      </button>
+      <button onClick={stopL}>Stop Listening</button>
+
+      <div style={{ marginTop: '1rem', fontStyle: 'italic' }}>
+        <strong>Transcript:</strong> {transcript}
+      </div>
+    </div>
+  );
+};
+
+export default VoiceNavigator;

client/src/hooks/useVoiceRecognition.ts

@@ -0,0 +1,76 @@
+import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const useVoiceRecognition = () => {
+  const navigate = useNavigate();
+  const startL = () => SpeechRecognition.startListening({ continuous: true });
+  const stopL = () => SpeechRecognition.stopListening();
+
+  const commands = [
+    {
+      command: ['Go to home', 'Open home', 'Home page'],
+      callback: () => navigate('/home'),
+    },
+    {
+      command: [
+        'Open chats',
+        'Go to chats',
+        'Chat page',
+        'Chats',
+        'Messages',
+        'Go to messages',
+        'Messages page',
+      ],
+      callback: () => navigate('/messages'),
+    },
+    {
+      command: ['Open questions', 'Go to questions', 'Questions', 'Question page'],
+      callback: () => navigate(`/questionPage`),
+    },
+    {
+      command: ['Open tags', 'Go to tags', 'Tags', 'Tags page'],
+      callback: () => navigate(`/tags`),
+    },
+    {
+      command: ['Open users', 'Go to users', 'Users', 'Users page'],
+      callback: () => navigate(`/users`),
+    },
+    {
+      command: ['Open games', 'Go to games', 'Games', 'Games page'],
+      callback: () => navigate(`/games`),
+    },
+    {
+      command: ['Open communities', 'Go to communities', 'Communities', 'Communities page'],
+      callback: () => navigate(`/communities/all`),
+    },
+    {
+      command: ['Go back', 'Navigate back'],
+      callback: () => navigate(-1),
+    },
+    {
+      command: 'Stop listening',
+      callback: () => SpeechRecognition.stopListening(),
+    },
+  ];
+
+  const { transcript, listening, browserSupportsSpeechRecognition } = useSpeechRecognition({
+    commands,
+  });
+
+  useEffect(() => {
+    if (browserSupportsSpeechRecognition) {
+      SpeechRecognition.startListening({ continuous: true });
+    }
+  }, [browserSupportsSpeechRecognition]);
+
+  return {
+    transcript,
+    listening,
+    browserSupportsSpeechRecognition,
+    startL,
+    stopL,
+  };
+};
+
+export default useVoiceRecognition;

package.json

@@ -17,12 +17,16 @@
     "react-hotkeys-hook": "^4.6.1",
     "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
+    "react-speech-recognition": "^4.0.0",
     "rehype-highlight": "^7.0.2",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "rehype-sanitize": "^6.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "ts-node": "^10.9.2"
+  },
+  "devDependencies": {
+    "@types/react-speech-recognition": "^3.9.6"
   }
 }