fix: remove react-speech-kit.

app/components/voice.tsx

@@ -1,16 +1,26 @@
 // implement a voice component by speech synthesis to read the text with the voice of the user's choice
 import * as React from "react";
 import { useState } from "react";
-import { useSpeechSynthesis } from "react-speech-kit";
 import { IconButton } from "./button";
 import VoiceIcon from "../icons/voice.svg";
 
 const voices = window.speechSynthesis.getVoices();
+const speak = ({
+  text,
+  voice,
+}: {
+  text: string;
+  voice?: SpeechSynthesisVoice;
+}) => {
+  if (!text) return;
+  const utterance = new SpeechSynthesisUtterance(text);
+  utterance.voice = voice || voices[0];
+  window.speechSynthesis.speak(utterance);
+};
 export function Voice(props: { text: string }) {
-  const { speak } = useSpeechSynthesis();
   const [voice, setVoice] = useState<SpeechSynthesisVoice | null>(null);
 
-  return (
+  return props.text ? (
     <div>
       <IconButton
         onClick={() => {
@@ -36,5 +46,7 @@ export function Voice(props: { text: string }) {
         ))}
       </select>
     </div>
+  ) : (
+    <></>
   );
 }