feat: added audio mode switch

normal-computing · Mar 14, 2024 · 9fe06e6 · 9fe06e6
1 parent b5dbacf
commit 9fe06e6
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 10 deletions.
diff --git a/src/common/TaskUI.tsx b/src/common/TaskUI.tsx
@@ -1,5 +1,14 @@
-import { Button, HStack, Spacer, Textarea, useToast } from "@chakra-ui/react";
 import React, { useCallback, useState } from "react";
+import {
+  Button,
+  HStack,
+  Spacer,
+  Textarea,
+  useToast,
+  Switch,
+  FormControl,
+  FormLabel,
+} from "@chakra-ui/react";
 import { debugMode } from "../constants";
 import { useAppState } from "../state/store";
 import RunTaskButton from "./RunTaskButton";
@@ -51,6 +60,7 @@ const TaskUI = () => {
     instructions: state.ui.instructions,
     setInstructions: state.ui.actions.setInstructions,
   }));
+  const [audioMode, setAudioMode] = useState(false);
 
   const taskInProgress = state.taskStatus === "running";
 
@@ -98,9 +108,19 @@ const TaskUI = () => {
         mb={2}
         onKeyDown={onKeyDown}
       />
+      <FormControl display="flex" alignItems="center">
+        <FormLabel htmlFor="audio-mode" mb="0">
+          Audio Mode
+        </FormLabel>
+        <Switch
+          id="audio-mode"
+          isChecked={audioMode}
+          onChange={(e) => setAudioMode(e.target.checked)}
+        />
+      </FormControl>
       <HStack>
         <RunTaskButton runTask={runTask} />
-        <VoiceButton />
+        <VoiceButton audioMode={audioMode} />
         <Spacer />
         {debugMode && <TaskStatus />}
       </HStack>

diff --git a/src/common/VoiceButton.tsx b/src/common/VoiceButton.tsx
@@ -3,21 +3,24 @@ import { Button, HStack, Icon } from "@chakra-ui/react";
 import { BsPlayFill, BsStopFill } from "react-icons/bs";
 import { voiceControl } from "../helpers/voiceControl";
 
-export default function VoiceButton() {
+export default function VoiceButton(props: { audioMode: boolean }) {
   const [isListening, setIsListening] = useState(false);
 
   const toggleVoiceControl = () => {
-    if (!isListening) {
-      voiceControl.startListening();
-    } else {
-      voiceControl.stopListening();
+    if (props.audioMode) {
+      if (!isListening) {
+        voiceControl.startListening();
+      } else {
+        voiceControl.stopListening();
+      }
+      setIsListening(!isListening);
     }
-    setIsListening(!isListening);
   };
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.code === "Space") {
+      // Only toggle voice control if audioMode is true
+      if (event.code === "Space" && props.audioMode) {
         event.preventDefault();
         toggleVoiceControl();
       }
@@ -28,7 +31,7 @@ export default function VoiceButton() {
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [isListening]);
+  }, [isListening, props.audioMode]);
 
   const button = (
     <Button
@@ -37,6 +40,7 @@ export default function VoiceButton() {
       }
       onClick={toggleVoiceControl}
       colorScheme={isListening ? "red" : "blue"}
+      isDisabled={!props.audioMode}
     >
       {isListening ? "Stop" : "Start"} Speaking
     </Button>