Added speech recognition to prompt box

app/components/chat/BaseChat.tsx

@@ -7,6 +7,7 @@ import { Workbench } from '~/components/workbench/Workbench.client';
 import { classNames } from '~/utils/classNames';
 import { Messages } from './Messages.client';
 import { SendButton } from './SendButton.client';
+import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'; // Import SpeechRecognition
 
 import styles from './BaseChat.module.scss';
 
@@ -59,6 +60,17 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
   ) => {
     const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200;
 
+    // SpeechRecognition hooks
+    const { transcript, listening, resetTranscript } = useSpeechRecognition();
+    
+    const handleStartListening = () => {
+        SpeechRecognition.startListening({ continuous: true, language: 'en-US' });
+    };
+
+    const handleStopListening = () => {
+        SpeechRecognition.stopListening();
+    };
+
     return (
       <div
         ref={ref}
@@ -122,7 +134,7 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
                         sendMessage?.(event);
                       }
                     }}
-                    value={input}
+                    value={input || transcript}
                     onChange={(event) => {
                       handleInputChange?.(event);
                     }}

package.json

@@ -74,7 +74,8 @@
     "remix-island": "^0.2.0",
     "remix-utils": "^7.6.0",
     "shiki": "^1.9.1",
-    "unist-util-visit": "^5.0.0"
+    "unist-util-visit": "^5.0.0",
+    "web-speech-cognitive-services": "^8.1.1"
   },
   "devDependencies": {
     "@blitz/eslint-plugin": "0.1.0",