Update import statement in local-duckduckgo.ts, prompt.tsx, wxt.config.ts, webui.tsx, PlaygroundChat.tsx, other.tsx, Markdown.tsx, and useMessageOption.tsx

src/hooks/useMessageOption.tsx

@@ -28,6 +28,8 @@ import { usePageAssist } from "@/context"
 import { OllamaEmbeddings } from "@langchain/community/embeddings/ollama"
 import { PageAssistVectorStore } from "@/libs/PageAssistVectorStore"
 import { formatDocs } from "@/chain/chat-with-x"
+import { useWebUI } from "@/store/webui"
+import { isTTSEnabled } from "@/services/tts"
 
 export const useMessageOption = () => {
   const {
@@ -66,11 +68,22 @@ export const useMessageOption = () => {
     setSelectedKnowledge
   } = useStoreMessageOption()
 
+  const { ttsEnabled, setTTSEnabled } = useWebUI()
+
   const { t } = useTranslation("option")
 
   const navigate = useNavigate()
   const textareaRef = React.useRef<HTMLTextAreaElement>(null)
 
+  React.useEffect(() => {
+    const checkTTSEnabled = async () => {
+      const tts = await isTTSEnabled()
+      setTTSEnabled(tts)
+    }
+
+    checkTTSEnabled()
+  }, [])
+
   const clearChat = () => {
     navigate("/")
     setMessages([])
@@ -835,7 +848,7 @@ export const useMessageOption = () => {
       }
 
       const currentHumanMessage = newMessages[index]
-
+      newMessages[index].message = message
       const previousMessages = newMessages.slice(0, index + 1)
       setMessages(previousMessages)
       const previousHistory = newHistory.slice(0, index)
@@ -893,6 +906,7 @@ export const useMessageOption = () => {
     setSelectedSystemPrompt,
     textareaRef,
     selectedKnowledge,
-    setSelectedKnowledge
+    setSelectedKnowledge,
+    ttsEnabled
   }
 }

src/hooks/useTTS.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react"
+import { notification } from "antd"
+import { getVoice, isSSMLEnabled } from "@/services/tts"
+import { markdownToSSML } from "@/utils/markdown-to-ssml"
+
+type VoiceOptions = {
+  utterance: string
+}
+
+export const useTTS = () => {
+  const [isSpeaking, setIsSpeaking] = useState(false)
+
+  const speak = async ({ utterance }: VoiceOptions) => {
+    try {
+      const voice = await getVoice()
+      const isSSML = await isSSMLEnabled()
+      if (isSSML) {
+        utterance = markdownToSSML(utterance)
+      }
+      chrome.tts.speak(utterance, {
+        voiceName: voice,
+        onEvent(event) {
+          if (event.type === "start") {
+            setIsSpeaking(true)
+          } else if (event.type === "end") {
+            setIsSpeaking(false)
+          }
+        }
+      })
+    } catch (error) {
+      notification.error({
+        message: "Error",
+        description: "Something went wrong while trying to play the audio"
+      })
+    }
+  }
+
+  const cancel = () => {
+    chrome.tts.stop()
+    setIsSpeaking(false)
+  }
+
+  useEffect(() => {
+    return () => {
+      cancel()
+    }
+  }, [])
+
+  return {
+    speak,
+    cancel,
+    isSpeaking
+  }
+}