fix

package.json

@@ -46,7 +46,6 @@
     "react-i18next": "^14.1.0",
     "react-markdown": "8.0.0",
     "react-router-dom": "6.10.0",
-    "react-speech-recognition": "^3.10.0",
     "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^10.0.4",
     "rehype-mathjax": "4.0.3",

src/components/Option/Playground/PlaygroundForm.tsx

@@ -12,8 +12,7 @@ import { ImageIcon, MicIcon, StopCircleIcon, X } from "lucide-react"
 import { getVariable } from "~/utils/select-varaible"
 import { useTranslation } from "react-i18next"
 import { KnowledgeSelect } from "../Knowledge/KnowledgeSelect"
-import { useSpeechRecognition } from "react-speech-recognition"
-import SpeechRecognition from "react-speech-recognition"
+import { useSpeechRecognition } from "@/hooks/useSpeechRecognition"
 
 type Props = {
   dropedFile: File | undefined
@@ -86,11 +85,12 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
 
   const {
     transcript,
-    listening: isListening,
+    isListening,
     resetTranscript,
-    browserSupportsSpeechRecognition
+    start: startListening,
+    stop: stopSpeechRecognition,
+    supported: browserSupportsSpeechRecognition
   } = useSpeechRecognition()
-
   const { sendWhenEnter, setSendWhenEnter } = useWebUI()
 
   React.useEffect(() => {
@@ -169,7 +169,7 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
 
   const stopListening = async () => {
     if (isListening) {
-      SpeechRecognition.stopListening()
+      stopSpeechRecognition()
     }
   }
 
@@ -281,12 +281,12 @@ export const PlaygroundForm = ({ dropedFile }: Props) => {
                         type="button"
                         onClick={async () => {
                           if (isListening) {
-                            SpeechRecognition.stopListening()
+                            stopSpeechRecognition()
                           } else {
                             resetTranscript()
-                            SpeechRecognition.startListening({
+                            startListening({
                               continuous: true,
-                              language: speechToTextLanguage
+                              lang: speechToTextLanguage
                             })
                           }
                         }}

src/components/Sidepanel/Chat/form.tsx

@@ -10,8 +10,7 @@ import { defaultEmbeddingModelForRag } from "~/services/ollama"
 import { ImageIcon, MicIcon, StopCircleIcon, X } from "lucide-react"
 import { useTranslation } from "react-i18next"
 import { ModelSelect } from "@/components/Common/ModelSelect"
-import { useSpeechRecognition } from "react-speech-recognition"
-import SpeechRecognition from "react-speech-recognition"
+import { useSpeechRecognition } from "@/hooks/useSpeechRecognition"
 
 type Props = {
   dropedFile: File | undefined
@@ -32,16 +31,16 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
   })
   const {
     transcript,
-    listening: isListening,
+    isListening,
     resetTranscript,
-    browserSupportsSpeechRecognition
-  } = useSpeechRecognition({
-
-  })
+    start: startListening,
+    stop: stopSpeechRecognition,
+    supported: browserSupportsSpeechRecognition
+  } = useSpeechRecognition()
 
   const stopListening = async () => {
     if (isListening) {
-       SpeechRecognition.stopListening()
+      stopSpeechRecognition()
     }
   }
 
@@ -218,12 +217,12 @@ export const SidepanelForm = ({ dropedFile }: Props) => {
                       type="button"
                       onClick={async () => {
                         if (isListening) {
-                           SpeechRecognition.stopListening()
+                          stopListening()
                         } else {
                           resetTranscript()
-                          SpeechRecognition.startListening({
+                          startListening({
                             continuous: true,
-                            language: speechToTextLanguage
+                            lang: speechToTextLanguage
                           })
                         }
                       }}

src/hooks/useSpeechRecognition.tsx

@@ -48,6 +48,7 @@ type SpeechRecognitionHook = {
   stop: () => void
   supported: boolean
   transcript: string
+  resetTranscript: () => void
 }
 
 const useEventCallback = <T extends (...args: any[]) => any>(
@@ -88,6 +89,10 @@ export const useSpeechRecognition = (
     }
   }, [])
 
+  const resetTranscript = () => {
+    setLiveTranscript("")
+  }
+
   const processResult = (event: SpeechRecognitionEvent) => {
     const transcript = Array.from(event.results)
       .map((result) => result[0])
@@ -167,6 +172,7 @@ export const useSpeechRecognition = (
     isListening: listening,
     stop,
     supported,
-    transcript: liveTranscript
+    transcript: liveTranscript,
+    resetTranscript
   }
 }

wxt.config.ts

@@ -48,7 +48,7 @@ export default defineConfig({
   outDir: "build",
 
   manifest: {
-    version: "1.1.9",
+    version: "1.1.10",
     name:
       process.env.TARGET === "firefox"
         ? "Page Assist - A Web UI for Local AI Models"
@@ -60,10 +60,10 @@ export default defineConfig({
     browser_specific_settings:
       process.env.TARGET === "firefox"
         ? {
-            gecko: {
-              id: "page-assist@nazeem"
-            }
+          gecko: {
+            id: "page-assist@nazeem"
           }
+        }
         : undefined,
     host_permissions:
       process.env.TARGET !== "firefox"