Add i18n

2024-03-24 12:43:43 +05:30
parent 4055231bbc
commit 9a2adbd859
27 changed files with 725 additions and 3616 deletions
--- a/src/components/Option/Settings/ollama.tsx
+++ b/src/components/Option/Settings/ollama.tsx
@@ -12,16 +12,19 @@ import {
  setOllamaURL as saveOllamaURL
 } from "~/services/ollama"
 import { SettingPrompt } from "./prompt"
+import { useTranslation } from "react-i18next"

 export const SettingsOllama = () => {
  const [ollamaURL, setOllamaURL] = useState<string>("")
+  const { t } = useTranslation("option")
+
  const { data: ollamaInfo, status } = useQuery({
    queryKey: ["fetchOllamURL"],
    queryFn: async () => {
      const [ollamaURL, allModels, chunkOverlap, chunkSize, defaultEM] =
        await Promise.all([
          getOllamaURL(),
-          getAllModels({returnEmpty: true}),
+          getAllModels({ returnEmpty: true }),
          defaultEmbeddingChunkOverlap(),
          defaultEmbeddingChunkSize(),
          defaultEmbeddingModelForRag()
@@ -54,7 +57,7 @@ export const SettingsOllama = () => {
          <div>
            <div>
              <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
-                Configure Ollama
+                {t("ollamaSettings.heading")}
              </h2>
              <div className="border border-b border-gray-200 dark:border-gray-600 mt-3 mb-6"></div>
            </div>
@@ -62,7 +65,7 @@ export const SettingsOllama = () => {
              <label
                htmlFor="ollamaURL"
                className="text-sm font-medium dark:text-gray-200">
-                Ollama URL
+                {t("ollamaSettings.settings.ollamaUrl.label")}
              </label>
              <input
                type="url"
@@ -71,7 +74,7 @@ export const SettingsOllama = () => {
                onChange={(e) => {
                  setOllamaURL(e.target.value)
                }}
-                placeholder="Your Ollama URL"
+                placeholder={t("ollamaSettings.settings.ollamaUrl.placeholder")}
                className="w-full p-2 border border-gray-300 rounded-md dark:bg-[#262626] dark:text-gray-100"
              />
            </div>
@@ -88,7 +91,7 @@ export const SettingsOllama = () => {
          <div>
            <div>
              <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
-                Configure RAG
+                {t("ollamaSettings.settings.ragSettings.label")}
              </h2>
              <div className="border border-b border-gray-200 dark:border-gray-600 mt-3 mb-6"></div>
            </div>
@@ -108,18 +111,26 @@ export const SettingsOllama = () => {
              }}>
              <Form.Item
                name="defaultEM"
-                label="Embedding Model"
-                help="Highly recommended to use embedding models like `nomic-embed-text`."
-                rules={[{ required: true, message: "Please select a model!" }]}>
+                label={t("ollamaSettings.settings.ragSettings.model.label")}
+                help={t("ollamaSettings.settings.ragSettings.model.help")}
+                rules={[
+                  {
+                    required: true,
+                    message: t(
+                      "ollamaSettings.settings.ragSettings.model.required"
+                    )
+                  }
+                ]}>
                <Select
                  size="large"
                  filterOption={(input, option) =>
-                    option.label.toLowerCase().indexOf(input.toLowerCase()) >=
+                    option!.label.toLowerCase().indexOf(input.toLowerCase()) >=
                      0 ||
-                    option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                    option!.value.toLowerCase().indexOf(input.toLowerCase()) >=
+                      0
                  }
                  showSearch
-                  placeholder="Select a model"
+                  placeholder={t("ollamaSettings.settings.ragSettings.model.placeholder")}
                  style={{ width: "100%" }}
                  className="mt-4"
                  options={ollamaInfo.models?.map((model) => ({
@@ -131,27 +142,28 @@ export const SettingsOllama = () => {

              <Form.Item
                name="chunkSize"
-                label="Chunk Size"
+                label={t("ollamaSettings.settings.ragSettings.chunkSize.label")}
                rules={[
-                  { required: true, message: "Please input your chunk size!" }
+                  { required: true, message: t("ollamaSettings.settings.ragSettings.chunkSize.required")
+                 }
                ]}>
                <InputNumber
                  style={{ width: "100%" }}
-                  placeholder="Chunk Size"
+                  placeholder={t("ollamaSettings.settings.ragSettings.chunkSize.placeholder")}
                />
              </Form.Item>
              <Form.Item
                name="chunkOverlap"
-                label="Chunk Overlap"
+                label={t("ollamaSettings.settings.ragSettings.chunkOverlap.label")}
                rules={[
                  {
                    required: true,
-                    message: "Please input your chunk overlap!"
+                    message: t("ollamaSettings.settings.ragSettings.chunkOverlap.required")
                  }
                ]}>
                <InputNumber
                  style={{ width: "100%" }}
-                  placeholder="Chunk Overlap"
+                  placeholder={t("ollamaSettings.settings.ragSettings.chunkOverlap.placeholder")}
                />
              </Form.Item>

@@ -164,7 +176,7 @@ export const SettingsOllama = () => {
          <div>
            <div>
              <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
-                Configure RAG Prompt
+                {t("ollamaSettings.settings.prompt.label")}
              </h2>
              <div className="border border-b border-gray-200 dark:border-gray-600 mt-3 mb-6"></div>
            </div>
--- a/src/components/Option/Settings/other.tsx
+++ b/src/components/Option/Settings/other.tsx
@@ -6,6 +6,7 @@ import { Select } from "antd"
 import { SUPPORTED_LANGUAGES } from "~/utils/supporetd-languages"
 import { MoonIcon, SunIcon } from "lucide-react"
 import { SearchModeSettings } from "./search-mode"
+import { useTranslation } from "react-i18next"

 export const SettingOther = () => {
  const { clearChat, speechToTextLanguage, setSpeechToTextLanguage } =
@@ -14,29 +15,31 @@ export const SettingOther = () => {
  const queryClient = useQueryClient()

  const { mode, toggleDarkMode } = useDarkMode()
+  const { t } = useTranslation("option")
+

  return (
-    <dl className="flex flex-col space-y-6">
+    <dl className="flex flex-col space-y-6 text-sm">
      <div>
        <h2 className="text-base font-semibold leading-7 text-gray-900 dark:text-white">
-          Web UI Settings
+          {t("generalSettings.heading")}
        </h2>
        <div className="border border-b border-gray-200 dark:border-gray-600 mt-3"></div>
      </div>
      <div className="flex flex-row justify-between">
-        <span className="text-gray-500 dark:text-neutral-50">
-          Speech Recognition Language
+        <span className="text-gray-500   dark:text-neutral-50">
+          {t("generalSettings.settings.speechRecognitionLang.label")}
        </span>

        <Select
-          placeholder="Select Language"
+          placeholder={t("generalSettings.settings.speechRecognitionLang.placeholder")}
          allowClear
          showSearch
          options={SUPPORTED_LANGUAGES}
          value={speechToTextLanguage}
          filterOption={(input, option) =>
-            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
-            option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
+            option!.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
+            option!.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
          }
          onChange={(value) => {
            setSpeechToTextLanguage(value)
@@ -44,7 +47,9 @@ export const SettingOther = () => {
        />
      </div>
      <div className="flex flex-row justify-between">
-        <span className="text-gray-500 dark:text-neutral-50 ">Change Theme</span>
+        <span className="text-gray-500 dark:text-neutral-50 ">
+          {t("generalSettings.settings.darkMode.label")}
+        </span>

        <button
          onClick={toggleDarkMode}
@@ -54,19 +59,19 @@ export const SettingOther = () => {
          ) : (
            <MoonIcon className="w-4 h-4 mr-2" />
          )}
-          {mode === "dark" ? "Light" : "Dark"}
+          {mode === "dark" ? t("generalSettings.settings.darkMode.options.light") : t("generalSettings.settings.darkMode.options.dark")}
        </button>
      </div>
      <SearchModeSettings />
      <div className="flex flex-row justify-between">
        <span className="text-gray-500 dark:text-neutral-50 ">
-          Delete Chat History
+          {t("generalSettings.settings.deleteChatHistory.label")}
        </span>

        <button
          onClick={async () => {
            const confirm = window.confirm(
-              "Are you sure you want to delete your chat history? This action cannot be undone."
+              t("generalSettings.settings.deleteChatHistory.confirm")
            )

            if (confirm) {
@@ -79,7 +84,7 @@ export const SettingOther = () => {
            }
          }}
          className="bg-red-500 dark:bg-red-600 text-white dark:text-gray-200 px-4 py-2 rounded-md">
-          Delete
+          {t("generalSettings.settings.deleteChatHistory.button")}
        </button>
      </div>
    </dl>
--- a/src/components/Option/Settings/prompt.tsx
+++ b/src/components/Option/Settings/prompt.tsx
@@ -1,6 +1,7 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query"
 import { Skeleton, Radio, Form, Alert } from "antd"
 import React from "react"
+import { useTranslation } from "react-i18next"
 import { SaveButton } from "~/components/Common/SaveButton"
 import {
  getWebSearchPrompt,
@@ -11,6 +12,8 @@ import {
 } from "~/services/ollama"

 export const SettingPrompt = () => {
+  const { t } = useTranslation("option")
+
  const [selectedValue, setSelectedValue] = React.useState<"normal" | "web">(
    "web"
  )
@@ -45,8 +48,12 @@ export const SettingPrompt = () => {
            <Radio.Group
              defaultValue={selectedValue}
              onChange={(e) => setSelectedValue(e.target.value)}>
-              <Radio.Button value="normal">Normal</Radio.Button>
-              <Radio.Button value="web">Web</Radio.Button>
+              <Radio.Button value="normal">
+                {t("ollamaSettings.settings.prompt.option1")}
+              </Radio.Button>
+              <Radio.Button value="web">
+                {t("ollamaSettings.settings.prompt.option2")}
+              </Radio.Button>
            </Radio.Group>
          </div>

@@ -64,18 +71,22 @@ export const SettingPrompt = () => {
              }}>
              <Form.Item>
                <Alert
-                  message="Configuring the system prompt here is deprecated. Please use the Manage Prompts section to add or edit prompts. This section will be removed in a future release"
+                  message={t("ollamaSettings.settings.prompt.alert")}
                  type="warning"
                  showIcon
                  closable
                />
              </Form.Item>
-              <Form.Item label="System Prompt" name="prompt">
+              <Form.Item
+                label={t("ollamaSettings.settings.prompt.systemPrompt")}
+                name="prompt">
                <textarea
                  value={data.prompt}
                  rows={5}
                  id="ollamaPrompt"
-                  placeholder="Your System Prompt"
+                  placeholder={t(
+                    "ollamaSettings.settings.prompt.systemPromptPlaceholder"
+                  )}
                  className="w-full p-2 border border-gray-300 rounded-md dark:bg-[#262626] dark:text-gray-100"
                />
              </Form.Item>
@@ -104,38 +115,42 @@ export const SettingPrompt = () => {
                webSearchFollowUpPrompt: data.webSearchFollowUpPrompt
              }}>
              <Form.Item
-                label="Web Search Prompt"
+                label={t("ollamaSettings.settings.prompt.webSearchPrompt")}
                name="webSearchPrompt"
-                help="Do not remove `{search_results}` from the prompt."
+                help={t("ollamaSettings.settings.prompt.webSearchPromptHelp")}
                rules={[
                  {
                    required: true,
-                    message: "Please input your Web Search Prompt!"
+                    message: t(
+                      "ollamaSettings.settings.prompt.webSearchPromptError"
+                    )
                  }
                ]}>
                <textarea
                  value={data.webSearchPrompt}
                  rows={5}
                  id="ollamaWebSearchPrompt"
-                  placeholder="Your Web Search Prompt"
+                  placeholder={t(
+                    "ollamaSettings.settings.prompt.webSearchPromptPlaceholder"
+                  )}
                  className="w-full p-2 border border-gray-300 rounded-md dark:bg-[#262626] dark:text-gray-100"
                />
              </Form.Item>
              <Form.Item
-                label="Web Search Follow Up Prompt"
+                label={t("ollamaSettings.settings.prompt.webSearchFollowUpPrompt")}
                name="webSearchFollowUpPrompt"
-                help="Do not remove `{chat_history}` and `{question}` from the prompt."
+                help={t("ollamaSettings.settings.prompt.webSearchFollowUpPromptHelp")}
                rules={[
                  {
                    required: true,
-                    message: "Please input your Web Search Follow Up Prompt!"
+                    message: t("ollamaSettings.settings.prompt.webSearchFollowUpPromptError")
                  }
                ]}>
                <textarea
                  value={data.webSearchFollowUpPrompt}
                  rows={5}
                  id="ollamaWebSearchFollowUpPrompt"
-                  placeholder="Your Web Search Follow Up Prompt"
+                  placeholder={t("ollamaSettings.settings.prompt.webSearchFollowUpPromptPlaceholder")}
                  className="w-full p-2 border border-gray-300 rounded-md dark:bg-[#262626] dark:text-gray-100"
                />
              </Form.Item>
--- a/src/components/Option/Settings/search-mode.tsx
+++ b/src/components/Option/Settings/search-mode.tsx
@@ -1,11 +1,14 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query"
 import { Skeleton, Switch } from "antd"
+import { useTranslation } from "react-i18next"
 import {
  getIsSimpleInternetSearch,
  setIsSimpleInternetSearch
 } from "~/services/ollama"

 export const SearchModeSettings = () => {
+  const { t } = useTranslation("option")
+  
  const { data, status } = useQuery({
    queryKey: ["fetchIsSimpleInternetSearch"],
    queryFn: () => getIsSimpleInternetSearch()
@@ -20,7 +23,7 @@ export const SearchModeSettings = () => {
  return (
    <div className="flex flex-row justify-between">
      <span className="text-gray-500 dark:text-neutral-50 ">
-        Perform Simple Internet Search
+        {t("generalSettings.settings.searchMode.label")}
      </span>

      <Switch