(feat:settings) sync with locales

frontend/src/settings/Documents.tsx

@@ -54,10 +54,10 @@ const Documents: React.FC<DocumentsProps> = ({
   const [totalPages, setTotalPages] = useState<number>(1);
   const currentDocuments = paginatedDocuments ?? [];
   const syncOptions = [
-    { label: 'Never', value: 'never' },
-    { label: 'Daily', value: 'daily' },
-    { label: 'Weekly', value: 'weekly' },
-    { label: 'Monthly', value: 'monthly' },
+    { label: t('settings.documents.syncFrequency.never'), value: 'never' },
+    { label: t('settings.documents.syncFrequency.daily'), value: 'daily' },
+    { label: t('settings.documents.syncFrequency.weekly'), value: 'weekly' },
+    { label: t('settings.documents.syncFrequency.monthly'), value: 'monthly' },
   ];
 
   const refreshDocs = useCallback(
@@ -153,7 +153,7 @@ const Documents: React.FC<DocumentsProps> = ({
             <div className="p-1">
               <Input
                 maxLength={256}
-                placeholder="Search..."
+                placeholder={t('settings.documents.searchPlaceholder')}
                 name="Document-search-input"
                 type="text"
                 id="document-search-input"
@@ -169,19 +169,19 @@ const Documents: React.FC<DocumentsProps> = ({
             </div>
             <button
               className="rounded-full w-40 bg-purple-30 px-4 py-3 text-white hover:bg-[#6F3FD1]"
-              title="Add New Document"
+              title={t('settings.documents.addNewTitle')}
               onClick={() => {
                 setIsOnboarding(false); // Set onboarding flag if needed
                 setModalState('ACTIVE'); // Open the upload modal
               }}
             >
-              Add New
+              {t('settings.documents.addNew')}
             </button>
           </div>
           {loading ? (
             <SkeletonLoader count={1} />
           ) : (
-           <div className="flex flex-col">
+            <div className="flex flex-col">
               <div className="flex-grow">
                 <div className="dark:border-silver/40 border-silver rounded-md border overflow-auto">
                   <table className="min-w-full divide-y divide-silver dark:divide-silver/40 text-xs sm:text-sm ">
@@ -270,7 +270,7 @@ const Documents: React.FC<DocumentsProps> = ({
                                 {document.type !== 'remote' && (
                                   <img
                                     src={Trash}
-                                    alt="Delete"
+                                    alt={t('convTile.delete')}
                                     className="h-4 w-4 cursor-pointer opacity-60 hover:opacity-100"
                                     id={`img-${index}`}
                                     onClick={(event) => {
@@ -282,7 +282,7 @@ const Documents: React.FC<DocumentsProps> = ({
                                 {document.syncFrequency && (
                                   <div className="ml-2">
                                     <DropdownMenu
-                                      name="Sync"
+                                      name={t('settings.documents.sync')}
                                       options={syncOptions}
                                       onSelect={(value: string) => {
                                         handleManageSync(document, value);

frontend/src/settings/General.tsx

@@ -21,33 +21,15 @@ export default function General() {
     t,
     i18n: { changeLanguage, language },
   } = useTranslation();
-  const themes = ['Light', 'Dark'];
+  const themes = [t('settings.general.light'), t('settings.general.dark')];
 
   const languageOptions = [
-    {
-      label: 'English',
-      value: 'en',
-    },
-    {
-      label: 'Spanish',
-      value: 'es',
-    },
-    {
-      label: 'Japanese',
-      value: 'jp',
-    },
-    {
-      label: 'Mandarin',
-      value: 'zh',
-    },
-    {
-      label: 'Traditional Chinese',
-      value: 'zhTW',
-    },
-    {
-      label: 'Russian',
-      value: 'ru',
-    },
+    { label: 'English', value: 'en' },
+    { label: 'Español', value: 'es' },
+    { label: '日本語', value: 'jp' },
+    { label: '普通话', value: 'zh' },
+    { label: '繁體中文（臺灣）', value: 'zhTW' },
+    { label: 'Русский', value: 'ru' },
   ];
   const chunks = ['0', '2', '4', '6', '8', '10'];
   const token_limits = new Map([

frontend/src/settings/Logs.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import userService from '../api/services/userService';
 import ChevronRight from '../assets/chevron-right.svg';
@@ -8,6 +9,7 @@ import { APIKeyData, LogData } from './types';
 import CoppyButton from '../components/CopyButton';
 
 export default function Logs() {
+  const { t } = useTranslation();
   const [chatbots, setChatbots] = useState<APIKeyData[]>([]);
   const [selectedChatbot, setSelectedChatbot] = useState<APIKeyData | null>();
   const [logs, setLogs] = useState<LogData[]>([]);
@@ -66,7 +68,7 @@ export default function Logs() {
       <div className="flex flex-col items-start">
         <div className="flex flex-col gap-3">
           <p className="font-bold text-jet dark:text-bright-gray">
-            Filter by chatbot
+            {t('settings.logs.filterByChatbot')}
           </p>
           {loadingChatbots ? (
             <SkeletonLoader />
@@ -78,9 +80,9 @@ export default function Logs() {
                   label: chatbot.name,
                   value: chatbot.id,
                 })),
-                { label: 'None', value: '' },
+                { label: t('settings.logs.none'), value: '' },
               ]}
-              placeholder="Select chatbot"
+              placeholder={t('settings.logs.selectChatbotPlaceholder')}
               onSelect={(chatbot: { label: string; value: string }) => {
                 setSelectedChatbot(
                   chatbots.find((item) => item.id === chatbot.value),
@@ -120,6 +122,7 @@ type LogsTableProps = {
 };
 
 function LogsTable({ logs, setPage }: LogsTableProps) {
+  const { t } = useTranslation();
   const observerRef = useRef<any>();
   const firstObserver = useCallback((node: HTMLDivElement) => {
     if (observerRef.current) {
@@ -134,7 +137,7 @@ function LogsTable({ logs, setPage }: LogsTableProps) {
     <div className="logs-table border rounded-2xl h-[55vh] w-full overflow-hidden border-silver dark:border-silver/40">
       <div className="h-8 bg-black/10 dark:bg-chinese-black flex flex-col items-start justify-center">
         <p className="px-3 text-xs dark:text-gray-6000">
-          API generated / chatbot conversations
+          {t('settings.logs.apiGeneratedConversations')}
         </p>
       </div>
       <div
@@ -156,6 +159,7 @@ function LogsTable({ logs, setPage }: LogsTableProps) {
 }
 
 function Log({ log }: { log: LogData }) {
+  const { t } = useTranslation();
   const logLevelColor = {
     info: 'text-green-500',
     error: 'text-red-500',