feat(i18n): modals, Hero, Nav

frontend/src/Hero.tsx

@@ -1,28 +1,15 @@
 import DocsGPT3 from './assets/cute_docsgpt3.svg';
-const demos: { header: string; query: string }[] = [
+import { useTranslation } from 'react-i18next';
-  {
-    header: 'Learn about DocsGPT',
-    query: 'What is DocsGPT?',
-  },
-  {
-    header: 'Summarise documentation',
-    query: 'Summarise current context',
-  },
-  {
-    header: 'Write Code',
-    query: 'Write code for api request to /api/answer',
-  },
-  {
-    header: 'Learning Assistance',
-    query: 'Write potential questions for context',
-  },
-];
-
 export default function Hero({
   handleQuestion,
 }: {
   handleQuestion: (question: string) => void;
 }) {
+  const { t } = useTranslation();
+  const demos = t('demo', { returnObjects: true }) as Array<{
+    header: string;
+    query: string;
+  }>;
   return (
     <div
       className={`mt-14 mb-4 flex w-full flex-col justify-end text-black-1000 dark:text-bright-gray sm:w-full lg:mt-6`}
@@ -36,7 +23,10 @@ export default function Hero({
         <div className="mb-4 flex flex-col items-center justify-center dark:text-white"></div>
       </div>
       <div className="grid w-full grid-cols-1 items-center gap-4 self-center text-xs sm:w-auto sm:gap-6 md:text-sm  lg:grid-cols-2">
-        {demos.map((demo) => (
+        {demos?.map(
+          (demo: { header: string; query: string }) =>
+            demo.header &&
+            demo.query && (
               <>
                 <button
                   onClick={() => handleQuestion(demo.query)}
@@ -48,7 +38,8 @@ export default function Hero({
                   <span className="text-gray-400">{demo.query}</span>
                 </button>
               </>
-        ))}
+            ),
+        )}
       </div>
     </div>
   );

frontend/src/Navigation.tsx

@@ -39,7 +39,7 @@ import SelectDocsModal from './preferences/SelectDocsModal';
 import ConversationTile from './conversation/ConversationTile';
 import { useDarkTheme } from './hooks';
 import SourceDropdown from './components/SourceDropdown';
-
+import { useTranslation } from 'react-i18next';
 interface NavigationProps {
   navOpen: boolean;
   setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -70,6 +70,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const { isMobile } = useMediaQuery();
   const [isDarkTheme] = useDarkTheme();
   const [isDocsListOpen, setIsDocsListOpen] = useState(false);
+  const { t } = useTranslation();
 
   const isApiKeySet = useSelector(selectApiKeyStatus);
   const [apiKeyModalState, setApiKeyModalState] =
@@ -265,14 +266,14 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
             className="opacity-80 group-hover:opacity-100"
           />
           <p className=" text-sm text-dove-gray group-hover:text-neutral-600 dark:text-chinese-silver dark:group-hover:text-bright-gray">
-            New Chat
+            {t('newChat')}
           </p>
         </NavLink>
         <div className="mb-auto h-[78vh] overflow-y-auto overflow-x-hidden dark:text-white">
           {conversations && conversations.length > 0 ? (
             <div>
               <div className=" my-auto mx-4 mt-2 flex h-6 items-center justify-between gap-4 rounded-3xl">
-                <p className="mt-1 ml-4 text-sm font-semibold">Chats</p>
+                <p className="mt-1 ml-4 text-sm font-semibold">{t('chats')}</p>
               </div>
               <div className="conversations-container">
                 {conversations?.map((conversation) => (
@@ -310,7 +311,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                 onClick={() => setUploadModalState('ACTIVE')}
               ></img>
             </div>
-            <p className="ml-5 mt-3 text-sm font-semibold">Source Docs</p>
+            <p className="ml-5 mt-3 text-sm font-semibold">{t('sourceDocs')}</p>
           </div>
           <div className="flex flex-col gap-2 border-b-[1px] py-2 dark:border-b-purple-taupe">
             <NavLink
@@ -327,7 +328,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                 className="ml-2 w-5 filter dark:invert"
               />
               <p className="my-auto text-sm text-eerie-black  dark:text-white">
-                Settings
+                {t('settings.label')}
               </p>
             </NavLink>
           </div>
@@ -345,7 +346,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                 alt="icon"
                 className="ml-2 w-5 filter dark:invert"
               />
-              <p className="my-auto mr-2 text-sm">About</p>
+              <p className="my-auto pr-1 text-sm">{t('about')}</p>
             </NavLink>
             <div className="flex items-center justify-evenly gap-1 px-1">
               <NavLink

frontend/src/components/SourceDropdown.tsx

@@ -2,7 +2,7 @@ import Trash from '../assets/trash.svg';
 import Arrow2 from '../assets/dropdown-arrow.svg';
 import { Doc } from '../preferences/preferenceApi';
 import { useDispatch } from 'react-redux';
-
+import { useTranslation } from 'react-i18next';
 type Props = {
   options: Doc[] | null;
   selectedDocs: Doc | null;
@@ -30,6 +30,8 @@ function SourceDropdown({
     setIsDocsListOpen(false);
   };
 
+  const { t } = useTranslation();
+
   return (
     <div className="relative w-5/6 rounded-3xl">
       <button
@@ -104,7 +106,7 @@ function SourceDropdown({
             onClick={handleEmptyDocumentSelect}
           >
             <span className="ml-4 flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap py-3">
-              None
+              {t('none')}
             </span>
           </div>
         </div>

frontend/src/conversation/Conversation.tsx

@@ -17,6 +17,7 @@ import Spinner from './../assets/spinner.svg';
 import SpinnerDark from './../assets/spinner-dark.svg';
 import { FEEDBACK, Query } from './conversationModels';
 import { sendFeedback } from './conversationApi';
+import { useTranslation } from 'react-i18next';
 import ArrowDown from './../assets/arrow-down.svg';
 export default function Conversation() {
   const queries = useSelector(selectQueries);
@@ -28,6 +29,7 @@ export default function Conversation() {
   const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
   const fetchStream = useRef<any>(null);
   const [eventInterrupt, setEventInterrupt] = useState(false);
+  const { t } = useTranslation();
 
   const handleUserInterruption = () => {
     if (!eventInterrupt && status === 'loading') setEventInterrupt(true);
@@ -177,7 +179,7 @@ export default function Conversation() {
             id="inputbox"
             ref={inputRef}
             tabIndex={1}
-            placeholder="Type your message here..."
+            placeholder={t('inputPlaceholder')}
             contentEditable
             onPaste={handlePaste}
             className={`max-h-24 min-h-[3.8rem] w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap rounded-full bg-white py-2 pl-4 pr-9 text-base leading-10 opacity-100 focus:outline-none dark:bg-raisin-black dark:text-bright-gray`}
@@ -212,7 +214,7 @@ export default function Conversation() {
           )}
         </div>
         <p className="text-gray-595959 hidden w-[100vw] self-center bg-white bg-transparent p-5 text-center text-xs dark:bg-raisin-black dark:text-bright-gray md:inline md:w-full">
-          DocsGPT uses GenAI, please review critial information using sources.
+          {t('tagline')}
         </p>
       </div>
     </div>

frontend/src/locale/en.json

@@ -7,6 +7,25 @@
   "inputPlaceholder": "Type your message here...",
   "tagline": "DocsGPT uses GenAI, please review critial information using sources.",
   "sourceDocs": "Source Docs",
+  "none":"None",
+  "demo":[
+    {
+      "header": "Learn about DocsGPT",
+      "query": "What is DocsGPT?"
+    },
+    {
+      "header": "Summarise documentation",
+      "query": "Summarise current context"
+    },
+    {
+      "header": "Write Code",
+      "query": "Write code for api request to /api/answer"
+    },
+    {
+      "header": "Learning Assistance",
+      "query": "Write potential questions for context"
+    }
+  ],
   "settings": {
     "label": "Settings",
     "general": {
@@ -35,5 +54,46 @@
       "sourceDoc": "Source Document",
       "createNew": "Create New"
     }
+  },
+  "modals":{
+    "uploadDoc":{
+      "label":"Upload New Documentation",
+      "file":"From File",
+      "remote":"Remote",
+      "name":"Name",
+      "choose":"Choose Files",
+      "info":"Please upload .pdf, .txt, .rst, .docx, .md, .zip limited to 25mb",
+      "uploadedFiles":"Uploaded Files",
+      "cancel":"Cancel",
+      "train":"Train",
+      "link":"Link",
+      "urlLink":"URL Link",
+      "reddit":{
+        "id":"Client ID",
+        "secret":"Client Secret",
+        "agent":"User agent",
+        "searchQueries":"Search queries",
+        "numberOfPosts":"Number of posts"
+      }
+    },
+    "createAPIKey":{
+      "label":"Create New API Key",
+      "apiKeyName":"API Key Name",
+      "chunks":"Chunks processed per query",
+      "prompt":"Select active prompt",
+      "sourceDoc":"Source document",
+      "create":"Create"
+    },
+    "saveKey":{
+      "note":"Please save your Key",
+      "disclaimer":"This is the only time your key will be shown.",
+      "copy":"Copy",
+      "copied":"Copied",
+      "confirm":"I saved the Key"
+    },
+    "deleteConv":{
+      "confirm":"Are you sure you want to delete all the conversations?",
+      "delete":"Delete"
+    }
   }
 }

frontend/src/locale/es.json

@@ -7,6 +7,25 @@
   "inputPlaceholder": "Escribe tu mensaje aquí...",
   "tagline": "DocsGPT utiliza GenAI, por favor revisa información crítica utilizando fuentes.",
   "sourceDocs": "Documentos Fuente",
+  "none": "Nada",
+  "demo": [
+    {
+      "header": "Aprende sobre DocsGPT",
+      "query": "¿Qué es DocsGPT?"
+    },
+    {
+      "header": "Resumir documentación",
+      "query": "Resumir contexto actual"
+    },
+    {
+      "header": "Escribir Código",
+      "query": "Escribir código para solicitud de API a /api/answer"
+    },
+    {
+      "header": "Asistencia de Aprendizaje",
+      "query": "Escribe posibles preguntas para el contexto"
+    }
+  ],
   "settings": {
     "label": "Configuración",
     "general": {
@@ -35,5 +54,42 @@
       "sourceDoc": "Documento Fuente",
       "createNew": "Crear Nuevo"
     }
+  },
+  "modals": {
+    "uploadDoc": {
+      "label": "Subir Nueva Documentación",
+      "file": "Desde Archivo",
+      "remote": "Remota",
+      "name": "Nombre",
+      "choose": "Seleccionar Archivos",
+      "info": "Por favor, suba archivos .pdf, .txt, .rst, .docx, .md, .zip limitados a 25 MB",
+      "uploadedFiles": "Archivos Subidos",
+      "cancel": "Cancelar",
+      "train": "Entrenar",
+      "link": "Enlace",
+      "urlLink": "Enlace URL",
+      "reddit": {
+        "id": "ID de Cliente",
+        "secret": "Secreto de Cliente",
+        "agent": "Agente de Usuario",
+        "searchQueries": "Consultas de Búsqueda",
+        "numberOfPosts": "Número de publicaciones"
+      }
+    },
+    "createAPIKey": {
+      "label": "Crear Nueva Clave de API",
+      "apiKeyName": "Nombre de la Clave de API",
+      "chunks": "Fragmentos procesados por consulta",
+      "prompt": "Seleccione el prompt activo",
+      "sourceDoc": "Documento Fuente",
+      "create": "Crear"
+    },
+    "saveKey": {
+      "note": "Por favor, guarde su Clave",
+      "disclaimer": "Esta es la única vez que se mostrará su clave.",
+      "copy": "Copiar",
+      "copied": "Copiado",
+      "confirm": "He guardado la Clave"
+    }
   }
 }

frontend/src/modals/DeleteConvModal.tsx

@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
 import { ActiveState } from '../models/misc';
 import { useMediaQuery, useOutsideAlerter } from '../hooks';
 import ConfirmationModal from './ConfirmationModal';
-
+import { useTranslation } from 'react-i18next';
 import { Action } from '@reduxjs/toolkit';
 
 export default function DeleteConvModal({
@@ -18,7 +18,7 @@ export default function DeleteConvModal({
   const modalRef = React.useRef(null);
   const dispatch = useDispatch();
   const { isMobile } = useMediaQuery();
-
+  const { t } = useTranslation();
   useOutsideAlerter(
     modalRef,
     () => {
@@ -40,10 +40,10 @@ export default function DeleteConvModal({
 
   return (
     <ConfirmationModal
-      message="Are you sure you want to delete all the conversations?"
+      message={t('modals.deleteConv.confirm')}
       modalState={modalState}
       setModalState={setModalState}
-      submitLabel={'Delete'}
+      submitLabel={t('modals.deleteConv.delete')}
       handleSubmit={handleSubmit}
       handleCancel={handleCancel}
     />

frontend/src/settings/APIKeys.tsx

@@ -221,7 +221,7 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
             };
           })
       : [];
-
+  const { t } = useTranslation();
   return (
     <div className="fixed top-0 left-0 z-30 flex h-screen w-screen items-center justify-center bg-gray-alpha bg-opacity-50">
       <div className="relative w-11/12 rounded-2xl bg-white p-10 dark:bg-outer-space sm:w-[512px]">
@@ -230,12 +230,12 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
         </button>
         <div className="mb-6">
           <span className="text-xl text-jet dark:text-bright-gray">
-            Create New API Key
+            {t('modals.createAPIKey.label')}
           </span>
         </div>
         <div className="relative mt-5 mb-4">
           <span className="absolute left-2 -top-2 bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
-            API Key Name
+            {t('modals.createAPIKey.apiKeyName')}
           </span>
           <input
             type="text"
@@ -246,7 +246,7 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
         </div>
         <div className="my-4">
           <Dropdown
-            placeholder="Source document"
+            placeholder={t('modals.createAPIKey.sourceDoc')}
             selectedValue={sourcePath}
             onSelect={(selection: { label: string; value: string }) =>
               setSourcePath(selection)
@@ -260,7 +260,7 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
           <Dropdown
             options={activePrompts}
             selectedValue={prompt ? prompt.name : null}
-            placeholder="Select active prompt"
+            placeholder={t('modals.createAPIKey.prompt')}
             onSelect={(value: { name: string; id: string; type: string }) =>
               setPrompt(value)
             }
@@ -269,7 +269,7 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
         </div>
         <div className="my-4">
           <p className="mb-2 ml-2 font-bold text-jet dark:text-bright-gray">
-            Chunks processed per query
+            {t('modals.createAPIKey.chunks')}
           </p>
           <Dropdown
             options={chunkOptions}
@@ -292,7 +292,7 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
           }
           className="float-right mt-4 rounded-full bg-purple-30 px-5 py-2 text-sm text-white hover:bg-[#6F3FD1] disabled:opacity-50"
         >
-          Create
+          {t('modals.createAPIKey.create')}
         </button>
       </div>
     </div>
@@ -301,6 +301,7 @@ const CreateAPIKeyModal: React.FC<CreateAPIKeyModalProps> = ({
 
 const SaveAPIKeyModal: React.FC<SaveAPIKeyModalProps> = ({ apiKey, close }) => {
   const [isCopied, setIsCopied] = React.useState(false);
+  const { t } = useTranslation();
   const handleCopyKey = () => {
     navigator.clipboard.writeText(apiKey);
     setIsCopied(true);
@@ -311,9 +312,12 @@ const SaveAPIKeyModal: React.FC<SaveAPIKeyModalProps> = ({ apiKey, close }) => {
         <button className="absolute top-3 right-4 m-2 w-3" onClick={close}>
           <img className="filter dark:invert" src={Exit} />
         </button>
-        <h1 className="my-0 text-xl font-medium">Please save your Key</h1>
+        <h1 className="my-0 text-xl font-medium">
+          {' '}
+          {t('modals.saveKey.note')}
+        </h1>
         <h3 className="text-sm font-normal text-outer-space">
-          This is the only time your key will be shown.
+          {t('modals.saveKey.disclaimer')}
         </h3>
         <div className="flex justify-between py-2">
           <div>
@@ -324,14 +328,14 @@ const SaveAPIKeyModal: React.FC<SaveAPIKeyModalProps> = ({ apiKey, close }) => {
             className="my-1 h-10 w-20 rounded-full border border-solid border-purple-30 p-2 text-sm text-purple-30 hover:bg-purple-30 hover:text-white"
             onClick={handleCopyKey}
           >
-            {isCopied ? 'Copied' : 'Copy'}
+            {isCopied ? t('modals.saveKey.copied') : t('modals.saveKey.copy')}
           </button>
         </div>
         <button
           onClick={close}
           className="rounded-full bg-philippine-yellow px-4 py-3 font-medium text-black hover:bg-[#E6B91A]"
         >
-          I saved the Key
+          {t('modals.saveKey.confirm')}
         </button>
       </div>
     </div>

frontend/src/settings/General.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import Prompts from './Prompts';
 import { useDarkTheme } from '../hooks';
@@ -19,7 +19,7 @@ const General: React.FC = () => {
     t,
     i18n: { changeLanguage, language },
   } = useTranslation();
-  const themes = [t('settings.general.light'), t('settings.general.dark')];
+  const themes = ['Light', 'Dark'];
 
   const languageOptions = [
     {
@@ -38,7 +38,7 @@ const General: React.FC = () => {
   const selectedChunks = useSelector(selectChunks);
   const [isDarkTheme, toggleTheme] = useDarkTheme();
   const [selectedTheme, setSelectedTheme] = React.useState(
-    isDarkTheme ? t('settings.general.dark') : t('settings.general.light'),
+    isDarkTheme ? 'Dark' : 'Light',
   );
   const dispatch = useDispatch();
   const locale = localStorage.getItem('docsgpt-locale');
@@ -46,10 +46,7 @@ const General: React.FC = () => {
     locale ? languageOptions.find((option) => option.value === locale) : 'en',
   );
   const selectedPrompt = useSelector(selectPrompt);
-  useEffect(() => {
+
-    console.log(selectedLanguage);
-    console.log(language);
-  }, [selectedLanguage]);
   React.useEffect(() => {
     const fetchPrompts = async () => {
       try {

frontend/src/upload/Upload.tsx

@@ -6,7 +6,7 @@ import { ActiveState } from '../models/misc';
 import { getDocs } from '../preferences/preferenceApi';
 import { setSourceDocs } from '../preferences/preferenceSlice';
 import Dropdown from '../components/Dropdown';
-
+import { useTranslation } from 'react-i18next';
 export default function Upload({
   modalState,
   setModalState,
@@ -24,6 +24,7 @@ export default function Upload({
     search_queries: [''],
     number_posts: 10,
   });
+  const { t } = useTranslation();
   const urlOptions: { label: string; value: string }[] = [
     { label: 'Crawler', value: 'crawler' },
     // { label: 'Sitemap', value: 'sitemap' },
@@ -238,7 +239,7 @@ export default function Upload({
     view = (
       <>
         <p className="text-xl text-jet dark:text-bright-gray">
-          Upload New Documentation
+          {t('modals.uploadDoc.label')}
         </p>
         <div>
           <button
@@ -249,7 +250,7 @@ export default function Upload({
                 : 'text-sonic-silver  hover:text-purple-30'
             } mr-4 rounded-full px-[20px] py-[5px] text-sm font-semibold`}
           >
-            From File
+            {t('modals.uploadDoc.file')}
           </button>
           <button
             onClick={() => setActiveTab('remote')}
@@ -259,7 +260,7 @@ export default function Upload({
                 : 'text-sonic-silver  hover:text-purple-30'
             } mr-4 rounded-full px-[20px] py-[5px] text-sm font-semibold`}
           >
-            Remote
+            {t('modals.uploadDoc.remote')}
           </button>
         </div>
         {activeTab === 'file' && (
@@ -272,21 +273,21 @@ export default function Upload({
             ></input>
             <div className="relative bottom-12 left-2 mt-[-20px]">
               <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
-                Name
+                {t('modals.uploadDoc.name')}
               </span>
             </div>
             <div {...getRootProps()}>
               <span className="rounded-3xl border border-purple-30 px-4 py-2 font-medium text-purple-30 hover:cursor-pointer dark:bg-purple-taupe dark:text-silver">
                 <input type="button" {...getInputProps()} />
-                Choose Files
+                {t('modals.uploadDoc.choose')}
               </span>
             </div>
             <p className="mb-0 text-xs italic text-gray-4000">
-              Please upload .pdf, .txt, .rst, .docx, .md, .zip limited to 25mb
+              {t('modals.uploadDoc.info')}
             </p>
             <div className="mt-0">
               <p className="mb-[14px] font-medium text-eerie-black dark:text-light-gray">
-                Uploaded Files
+                {t('modals.uploadDoc.uploadedFiles')}
               </p>
               {files.map((file) => (
                 <p key={file.name} className="text-gray-6000">
@@ -294,7 +295,9 @@ export default function Upload({
                 </p>
               ))}
               {files.length === 0 && (
-                <p className="text-gray-6000 dark:text-light-gray">None</p>
+                <p className="text-gray-6000 dark:text-light-gray">
+                  {t('none')}
+                </p>
               )}
             </div>
           </>
@@ -313,7 +316,7 @@ export default function Upload({
             {urlType.label !== 'Reddit' ? (
               <>
                 <input
-                  placeholder="Enter name"
+                  placeholder={`Enter ${t('modals.uploadDoc.name')}`}
                   type="text"
                   className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
                   value={urlName}
@@ -321,11 +324,11 @@ export default function Upload({
                 ></input>
                 <div className="relative bottom-12 left-2 mt-[-20px]">
                   <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
-                    Name
+                    {t('modals.uploadDoc.name')}
                   </span>
                 </div>
                 <input
-                  placeholder="URL Link"
+                  placeholder={t('modals.uploadDoc.urlLink')}
                   type="text"
                   className="h-[42px] w-full rounded-full border-2 border-silver px-3 outline-none dark:border-silver/40 dark:bg-transparent dark:text-white"
                   value={url}
@@ -333,7 +336,7 @@ export default function Upload({
                 ></input>
                 <div className="relative bottom-12 left-2 mt-[-20px]">
                   <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
-                    Link
+                    {t('modals.uploadDoc.link')}
                   </span>
                 </div>
               </>
@@ -349,7 +352,7 @@ export default function Upload({
                 ></input>
                 <div className="relative bottom-12 left-2 mt-[-20px]">
                   <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
-                    Client ID
+                    {t('modals.uploadDoc.reddit.id')}
                   </span>
                 </div>
                 <input
@@ -362,7 +365,7 @@ export default function Upload({
                 ></input>
                 <div className="relative bottom-12 left-2 mt-[-20px]">
                   <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
-                    Client secret
+                    {t('modals.uploadDoc.reddit.secret')}
                   </span>
                 </div>
                 <input
@@ -375,7 +378,7 @@ export default function Upload({
                 ></input>
                 <div className="relative bottom-12 left-2 mt-[-20px]">
                   <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
-                    User agent
+                    {t('modals.uploadDoc.reddit.agent')}
                   </span>
                 </div>
                 <input
@@ -388,7 +391,7 @@ export default function Upload({
                 ></input>
                 <div className="relative bottom-12 left-2 mt-[-20px]">
                   <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
-                    Search queries
+                    {t('modals.uploadDoc.reddit.searchQueries')}
                   </span>
                 </div>
                 <input
@@ -401,7 +404,7 @@ export default function Upload({
                 ></input>
                 <div className="relative bottom-12 left-2 mt-[-20px]">
                   <span className="bg-white px-2 text-xs text-gray-4000 dark:bg-outer-space dark:text-silver">
-                    Number of posts
+                    {t('modals.uploadDoc.reddit.numberOfPosts')}
                   </span>
                 </div>
               </>
@@ -422,14 +425,14 @@ export default function Upload({
                 activeTab === 'file'
               }
             >
-              Train
+              {t('modals.uploadDoc.train')}
             </button>
           ) : (
             <button
               onClick={uploadRemote}
               className={`ml-2 cursor-pointer rounded-3xl bg-purple-30 py-2 px-6 text-sm text-white hover:bg-[#6F3FD1]`}
             >
-              Train
+              {t('modals.uploadDoc.train')}
             </button>
           )}
           <button
@@ -440,7 +443,7 @@ export default function Upload({
             }}
             className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
           >
-            Cancel
+            {t('modals.uploadDoc.cancel')}
           </button>
         </div>
       </>