Update language files and fix UI issues

src/entries/background.ts

@@ -86,26 +86,27 @@ export default defineBackground({
         })
       } else if (message.type === "pull_model") {
         const ollamaURL = await getOllamaURL()
-  
+
         const isRunning = await isOllamaRunning()
-  
+
         if (!isRunning) {
           chrome.action.setBadgeText({ text: "E" })
           chrome.action.setBadgeBackgroundColor({ color: "#FF0000" })
-          chrome.action.setTitle({ title: "Ollama is not running" })
+          chrome.action.setTitle({ title: "Ollama is not running"
+         })
           setTimeout(() => {
             clearBadge()
           }, 5000)
         }
-  
+
         await streamDownload(ollamaURL, message.modelName)
       }
     })
-  
+
     chrome.action.onClicked.addListener((tab) => {
       chrome.tabs.create({ url: chrome.runtime.getURL("options.html") })
     })
-  
+
     chrome.commands.onCommand.addListener((command) => {
       switch (command) {
         case "execute_side_panel":
@@ -120,13 +121,13 @@ export default defineBackground({
           break
       }
     })
-  
+
     chrome.contextMenus.create({
       id: "open-side-panel-pa",
-      title: "Open Side Panel to Chat",
+      title: browser.i18n.getMessage("openSidePanelToChat"),
       contexts: ["all"]
     })
-  
+
     chrome.contextMenus.onClicked.addListener((info, tab) => {
       if (info.menuItemId === "open-side-panel-pa") {
         chrome.tabs.query({ active: true, currentWindow: true }, async (tabs) => {

src/entries/options/App.tsx

@@ -3,21 +3,32 @@ import { MemoryRouter } from "react-router-dom"
 import { ToastContainer } from "react-toastify"
 import "react-toastify/dist/ReactToastify.css"
 const queryClient = new QueryClient()
-import { ConfigProvider, theme } from "antd"
+import { ConfigProvider, Empty, theme } from "antd"
 import { StyleProvider } from "@ant-design/cssinjs"
 import { useDarkMode } from "~/hooks/useDarkmode"
 import { OptionRouting } from "~/routes"
 import "~/i18n"
+import { useTranslation } from "react-i18next"
 
 function IndexOption() {
   const { mode } = useDarkMode()
+  const { t } = useTranslation()
   return (
     <MemoryRouter>
       <ConfigProvider
         theme={{
           algorithm:
             mode === "dark" ? theme.darkAlgorithm : theme.defaultAlgorithm
-        }}>
+        }}
+        renderEmpty={() => (
+          <Empty
+            imageStyle={{
+              height: 60
+            }}
+            description={t("common:noData")}
+          />
+        )}
+        >
         <StyleProvider hashPriority="high">
           <QueryClientProvider client={queryClient}>
             <OptionRouting />

src/entries/sidepanel/App.tsx

@@ -4,13 +4,15 @@ import { SidepanelRouting } from "~/routes"
 import { ToastContainer } from "react-toastify"
 import "react-toastify/dist/ReactToastify.css"
 const queryClient = new QueryClient()
-import { ConfigProvider, theme } from "antd"
+import { ConfigProvider, Empty, theme } from "antd"
 import { StyleProvider } from "@ant-design/cssinjs"
 import { useDarkMode } from "~/hooks/useDarkmode"
 import "~/i18n"
+import { useTranslation } from "react-i18next"
 
 function IndexSidepanel() {
   const { mode } = useDarkMode()
+  const { t } = useTranslation()
 
   return (
     <MemoryRouter>
@@ -18,7 +20,16 @@ function IndexSidepanel() {
         theme={{
           algorithm:
             mode === "dark" ? theme.darkAlgorithm : theme.defaultAlgorithm
-        }}>
+        }}
+        renderEmpty={() => (
+          <Empty
+            imageStyle={{
+              height: 60
+            }}
+            description={t("common:noData")}
+          />
+        )}
+        >
         <StyleProvider hashPriority="high">
           <QueryClientProvider client={queryClient}>
             <SidepanelRouting />