Update import statements, set TTSEnabled in TTSModeSettings, and fix fetchChatModels error handling

src/components/Layouts/Layout.tsx

@@ -4,7 +4,7 @@ import { useLocation, NavLink } from "react-router-dom"
 import { Sidebar } from "../Option/Sidebar"
 import { Drawer, Select, Tooltip } from "antd"
 import { useQuery } from "@tanstack/react-query"
-import { getAllModels } from "~/services/ollama"
+import { fetchChatModels, getAllModels } from "~/services/ollama"
 import { useMessageOption } from "~/hooks/useMessageOption"
 import {
   ChevronLeft,
@@ -46,7 +46,7 @@ export default function OptionLayout({
     isFetching: isModelsFetching
   } = useQuery({
     queryKey: ["fetchModel"],
-    queryFn: () => getAllModels({ returnEmpty: true }),
+    queryFn: () => fetchChatModels({ returnEmpty: true }),
     refetchInterval: 15000
   })
 

src/components/Option/Settings/tts-mode.tsx

@@ -1,6 +1,7 @@
 import { SaveButton } from "@/components/Common/SaveButton"
 import { getSearchSettings, setSearchSettings } from "@/services/search"
 import { getTTSSettings, setTTSSettings } from "@/services/tts"
+import { useWebUI } from "@/store/webui"
 import { SUPPORTED_SERACH_PROVIDERS } from "@/utils/search-provider"
 import { useForm } from "@mantine/form"
 import { useQuery, useQueryClient } from "@tanstack/react-query"
@@ -9,7 +10,7 @@ import { useTranslation } from "react-i18next"
 
 export const TTSModeSettings = ({ hideTitle }: { hideTitle?: boolean }) => {
   const { t } = useTranslation("settings")
-  const queryClient = useQueryClient()
+  const { setTTSEnabled } = useWebUI()
 
   const form = useForm({
     initialValues: {
@@ -46,6 +47,7 @@ export const TTSModeSettings = ({ hideTitle }: { hideTitle?: boolean }) => {
       <form
         onSubmit={form.onSubmit(async (values) => {
           await setTTSSettings(values)
+          setTTSEnabled(values.ttsEnabled)
         })}
         className="space-y-4">
         <div className="flex sm:flex-row flex-col space-y-4 sm:space-y-0 sm:justify-between">

src/hooks/useMessageOption.tsx

@@ -75,14 +75,6 @@ export const useMessageOption = () => {
   const navigate = useNavigate()
   const textareaRef = React.useRef<HTMLTextAreaElement>(null)
 
-  React.useEffect(() => {
-    const checkTTSEnabled = async () => {
-      const tts = await isTTSEnabled()
-      setTTSEnabled(tts)
-    }
-
-    checkTTSEnabled()
-  }, [])
 
   const clearChat = () => {
     navigate("/")

src/services/ollama.ts

@@ -113,11 +113,18 @@ export const deleteModel = async (model: string) => {
   return response.json()
 }
 
-export const fetchChatModels = async () => {
+export const fetchChatModels = async ({
+  returnEmpty = false
+}: {
+  returnEmpty?: boolean
+}) => {
   try {
     const baseUrl = await getOllamaURL()
     const response = await fetch(`${cleanUrl(baseUrl)}/api/tags`)
     if (!response.ok) {
+      if (returnEmpty) {
+        return []
+      }
       throw new Error(response.statusText)
     }
     const json = await response.json()
@@ -127,8 +134,8 @@ export const fetchChatModels = async () => {
       modified_at: string
       size: number
       digest: string
-      details: {
+      details?: {
-        parent_model: string
+        parent_model?: string
         format: string
         family: string
         families: string[]
@@ -136,7 +143,7 @@ export const fetchChatModels = async () => {
         quantization_level: string
       }
     }[]
-    return models.filter((model) => {
+    return models?.filter((model) => {
       return (
         !model?.details?.families?.includes("bert") &&
         !model?.details?.families?.includes("nomic-bert")
@@ -144,7 +151,7 @@ export const fetchChatModels = async () => {
     })
   } catch (e) {
     console.error(e)
-    return []
+    return await getAllModels({ returnEmpty })
   }
 }
 

src/services/tts.ts

@@ -36,6 +36,9 @@ export const setVoice = async (voice: string) => {
 
 export const isTTSEnabled = async () => {
   const data = await storage.get("isTTSEnabled")
+  if(!data  || data.length === 0) {
+    return true
+  }
   return data === "true"
 }
 
@@ -45,6 +48,9 @@ export const setTTSEnabled = async (isTTSEnabled: boolean) => {
 
 export const isSSMLEnabled = async () => {
   const data = await storage.get("isSSMLEnabled")
+  if(!data  || data.length === 0) {
+    return true
+  }
   return data === "true"
 }
 

src/store/webui.tsx

@@ -12,6 +12,6 @@ export const useWebUI = create<State>((set) => ({
   sendWhenEnter: true,
   setSendWhenEnter: (sendWhenEnter) => set({ sendWhenEnter }),
 
-  ttsEnabled: false,
+  ttsEnabled: true,
   setTTSEnabled: (ttsEnabled) => set({ ttsEnabled })
 }))