Update localization messages for Chinese, English, and Japanese languages

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

@@ -1,14 +1,12 @@
 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"
-import { Select, Skeleton, Switch, InputNumber } from "antd"
+import { useQuery } from "@tanstack/react-query"
+import { Select, Skeleton, Switch } from "antd"
 import { useTranslation } from "react-i18next"
 
-export const TTSModeSettings = ({ hideTitle }: { hideTitle?: boolean }) => {
+export const TTSModeSettings = ({ hideBorder }: { hideBorder?: boolean }) => {
   const { t } = useTranslation("settings")
   const { setTTSEnabled } = useWebUI()
 
@@ -36,14 +34,14 @@ export const TTSModeSettings = ({ hideTitle }: { hideTitle?: boolean }) => {
 
   return (
     <div>
-      {!hideTitle && (
-        <div className="mb-5">
-          <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
-            {t("generalSettings.tts.heading")}
-          </h2>
+      <div className="mb-5">
+        <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
+          {t("generalSettings.tts.heading")}
+        </h2>
+        {!hideBorder && (
           <div className="border border-b border-gray-200 dark:border-gray-600 mt-3"></div>
-        </div>
-      )}
+        )}
+      </div>
       <form
         onSubmit={form.onSubmit(async (values) => {
           await setTTSSettings(values)

src/components/Sidepanel/Chat/body.tsx

@@ -2,10 +2,12 @@ import React from "react"
 import { PlaygroundMessage } from "~/components/Common/Playground/Message"
 import { useMessage } from "~/hooks/useMessage"
 import { EmptySidePanel } from "../Chat/empty"
+import { useWebUI } from "@/store/webui"
 
 export const SidePanelBody = () => {
   const { messages, streaming } = useMessage()
   const divRef = React.useRef<HTMLDivElement>(null)
+  const {ttsEnabled} = useWebUI()
   React.useEffect(() => {
     if (divRef.current) {
       divRef.current.scrollIntoView({ behavior: "smooth" })
@@ -27,6 +29,7 @@ export const SidePanelBody = () => {
           onRengerate={() => {}}
           isProcessing={streaming}
           hideEditAndRegenerate
+          isTTSEnabled={ttsEnabled}
         />
       ))}
       <div className="w-full h-32 md:h-48 flex-shrink-0"></div>

src/components/Sidepanel/Chat/empty.tsx

@@ -8,7 +8,8 @@ import {
   getAllModels,
   getOllamaURL,
   isOllamaRunning,
-  setOllamaURL as saveOllamaURL
+  setOllamaURL as saveOllamaURL,
+  fetchChatModels
 } from "~/services/ollama"
 
 export const EmptySidePanel = () => {
@@ -24,7 +25,7 @@ export const EmptySidePanel = () => {
     queryFn: async () => {
       const ollamaURL = await getOllamaURL()
       const isOk = await isOllamaRunning()
-      const models = await getAllModels({ returnEmpty: false })
+      const models = await fetchChatModels({ returnEmpty: false })
 
       return {
         isOk,

src/components/Sidepanel/Chat/header.tsx

@@ -2,10 +2,10 @@ import logoImage from "~/assets/icon.png"
 import { useMessage } from "~/hooks/useMessage"
 import { Link } from "react-router-dom"
 import { Tooltip } from "antd"
-import { BoxesIcon, CogIcon, RefreshCcw } from "lucide-react"
+import { BoxesIcon, CogIcon, EraserIcon, HistoryIcon } from "lucide-react"
 import { useTranslation } from "react-i18next"
 export const SidepanelHeader = () => {
-  const { clearChat, isEmbedding } = useMessage()
+  const { clearChat, isEmbedding, messages } = useMessage()
   const { t } = useTranslation(["sidepanel", "common"])
 
   return (
@@ -25,13 +25,22 @@ export const SidepanelHeader = () => {
             <BoxesIcon className="h-5 w-5 text-gray-500 dark:text-gray-400 animate-bounce animate-infinite" />
           </Tooltip>
         ) : null}
-        <button
-          onClick={() => {
-            clearChat()
-          }}
-          className="flex items-center space-x-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700">
-          <RefreshCcw className="h-5 w-5 text-gray-500 dark:text-gray-400" />
-        </button>
+        {messages.length > 0 && (
+          <Tooltip title={t("tooltip.clear")}>
+            <button
+              onClick={() => {
+                clearChat()
+              }}
+              className="flex items-center space-x-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-pink-700">
+              <EraserIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
+            </button>
+          </Tooltip>
+        )}
+        {/* <Tooltip title={t("tooltip.history")}>
+          <Link to="/history">
+            <HistoryIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
+          </Link>
+        </Tooltip> */}
         <Link to="/settings">
           <CogIcon className="h-5 w-5 text-gray-500 dark:text-gray-400" />
         </Link>

src/components/Sidepanel/Settings/body.tsx

@@ -22,6 +22,7 @@ import { useMessage } from "~/hooks/useMessage"
 import { MoonIcon, SunIcon } from "lucide-react"
 import { useTranslation } from "react-i18next"
 import { useI18n } from "@/hooks/useI18n"
+import { TTSModeSettings } from "@/components/Option/Settings/tts-mode"
 
 export const SettingsBody = () => {
   const { t } = useTranslation("settings")
@@ -285,6 +286,9 @@ export const SettingsBody = () => {
           </div>
         </Form>
       </div>
+      <div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
+        <TTSModeSettings hideBorder />
+      </div>
       <div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
         <h2 className="text-md mb-4 font-semibold dark:text-white">
           {t("generalSettings.settings.language.label")}{" "}