i18n support

2024-03-24 21:00:00 +05:30
parent 3143dd3490
commit 01d27fd1c2
25 changed files with 583 additions and 491 deletions
--- a/src/components/Sidepanel/Settings/body.tsx
+++ b/src/components/Sidepanel/Settings/body.tsx
@@ -20,8 +20,11 @@ import { SaveButton } from "~/components/Common/SaveButton"
 import { SUPPORTED_LANGUAGES } from "~/utils/supporetd-languages"
 import { useMessage } from "~/hooks/useMessage"
 import { MoonIcon, SunIcon } from "lucide-react"
+import { useTranslation } from "react-i18next"
+import { useI18n } from "@/hooks/useI18n"

 export const SettingsBody = () => {
+  const { t } = useTranslation("settings")
  const [ollamaURL, setOllamaURL] = React.useState<string>("")
  const [systemPrompt, setSystemPrompt] = React.useState<string>("")
  const [ragPrompt, setRagPrompt] = React.useState<string>("")
@@ -33,6 +36,8 @@ export const SettingsBody = () => {
  const { speechToTextLanguage, setSpeechToTextLanguage } = useMessage()
  const { mode, toggleDarkMode } = useDarkMode()

+  const { changeLocale, locale, supportLanguage } = useI18n()
+
  const { data, status } = useQuery({
    queryKey: ["sidebarSettings"],
    queryFn: async () => {
@@ -104,20 +109,26 @@ export const SettingsBody = () => {
  return (
    <div className="flex flex-col gap-4 p-4 max-w-2xl mx-auto lg:max-w-3xl xl:max-w-4xl 2xl:max-w-5xl">
      <div className="border border-gray-300 dark:border-gray-700 rounded p-4 bg-white dark:bg-[#171717]">
-        <h2 className="text-md font-semibold dark:text-white">Prompt</h2>
+        <h2 className="text-md font-semibold dark:text-white">
+          {t("managePrompts.title")}
+        </h2>
        <div className="my-3 flex justify-end">
          <Radio.Group
            defaultValue={selectedValue}
            onChange={(e) => setSelectedValue(e.target.value)}>
-            <Radio.Button value="normal">Normal</Radio.Button>
-            <Radio.Button value="rag">Rag</Radio.Button>
+            <Radio.Button value="normal">
+              {t("managePrompts.option1")}
+            </Radio.Button>
+            <Radio.Button value="rag">
+              {t("managePrompts.option2")}
+            </Radio.Button>
          </Radio.Group>
        </div>

        {selectedValue === "normal" && (
          <div>
            <span className="text-md font-thin text-gray-500 dark:text-gray-400">
-              System Prompt
+              {t("managePrompts.systemPrompt")}
            </span>
            <textarea
              className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
@@ -138,7 +149,7 @@ export const SettingsBody = () => {
          <div>
            <div className="mb-3">
              <span className="text-md font-thin text-gray-500 dark:text-gray-400">
-                System Prompt
+                {t("managePrompts.systemPrompt")}
              </span>
              <textarea
                className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
@@ -148,7 +159,7 @@ export const SettingsBody = () => {
            </div>
            <div className="mb-3">
              <span className="text-md  font-thin text-gray-500 dark:text-gray-400">
-                Question Prompt
+                {t("managePrompts.questionPrompt")}
              </span>
              <textarea
                className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
@@ -170,14 +181,14 @@ export const SettingsBody = () => {

      <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">
-          Ollama URL
+          {t("ollamaSettings.heading")}
        </h2>
        <input
          className="w-full border border-gray-300 dark:border-gray-700 rounded p-2 dark:bg-[#171717] dark:text-white dark:placeholder-gray-400"
          value={ollamaURL}
          type="url"
          onChange={(e) => setOllamaURL(e.target.value)}
-          placeholder="Enter Ollama URL here"
+          placeholder={t("ollamaSettings.settings.ollamaUrl.placeholder")}
        />
        <div className="flex justify-end">
          <SaveButton
@@ -190,7 +201,7 @@ export const SettingsBody = () => {

      <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">
-          RAG Configuration
+          {t("ollamaSettings.settings.ragSettings.label")}
        </h2>
        <Form
          onFinish={(data) => {
@@ -207,9 +218,14 @@ export const SettingsBody = () => {
          }}>
          <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) =>
@@ -229,21 +245,38 @@ export const SettingsBody = () => {

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

@@ -254,10 +287,33 @@ export const SettingsBody = () => {
      </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">
-          Speech Recognition Language
+          {t("generalSettings.settings.language.label")}{" "}
        </h2>
        <Select
-          placeholder="Select Language"
+          placeholder={t("generalSettings.settings.language.placeholder")}
+          showSearch
+          options={supportLanguage}
+          value={locale}
+          filterOption={(input, option) =>
+            option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
+            option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
+          }
+          onChange={(value) => {
+            changeLocale(value)
+          }}
+          style={{
+            width: "100%"
+          }}
+        />
+      </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.speechRecognitionLang.label")}{" "}
+        </h2>
+        <Select
+          placeholder={t(
+            "generalSettings.settings.speechRecognitionLang.placeholder"
+          )}
          allowClear
          showSearch
          options={SUPPORTED_LANGUAGES}
@@ -275,20 +331,22 @@ export const SettingsBody = () => {
        />
      </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">Theme</h2>
+        <h2 className="text-md mb-4 font-semibold dark:text-white">
+          {t("generalSettings.settings.darkMode.label")}{" "}
+        </h2>
        {mode === "dark" ? (
          <button
            onClick={toggleDarkMode}
-            className="select-none inline-flex w-full rounded-lg border border-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
+            className="select-none inline-flex text-center w-full rounded-lg border border-gray-900 py-3 px-6 justify-center font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
            <SunIcon className="h-4 w-4 mr-2" />
-            Light
+            {t("generalSettings.settings.darkMode.options.light")}
          </button>
        ) : (
          <button
            onClick={toggleDarkMode}
-            className="select-none inline-flex w-full rounded-lg border border-gray-900 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
+            className="select-none inline-flex text-center w-full rounded-lg border border-gray-900 py-3 px-6 justify-center font-sans text-xs font-bold uppercase text-gray-900 transition-all hover:opacity-75 focus:ring focus:ring-gray-300 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none dark:border-gray-100 dark:text-white dark:hover:opacity-75 dark:focus:ring-dark dark:active:opacity-75 dark:disabled:pointer-events-none dark:disabled:opacity-50 dark:disabled:shadow-none">
            <MoonIcon className="h-4 w-4 mr-2" />
-            Dark
+            {t("generalSettings.settings.darkMode.options.dark")}
          </button>
        )}
      </div>