Update localization messages for Chinese, English, and Japanese languages

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")}{" "}