diff --git a/frontend/src/components/form/custom-input.tsx b/frontend/src/components/form/custom-input.tsx index b5f7b360370d..5fff6b7a55fa 100644 --- a/frontend/src/components/form/custom-input.tsx +++ b/frontend/src/components/form/custom-input.tsx @@ -1,3 +1,6 @@ +import { useTranslation } from "react-i18next"; +import { I18nKey } from "#/i18n/declaration"; + interface CustomInputProps { name: string; label: string; @@ -13,12 +16,19 @@ export function CustomInput({ defaultValue, type = "text", }: CustomInputProps) { + const { t } = useTranslation(); + return ( - Base URL + {t(I18nKey.SETTINGS_FORM$BASE_URL_LABEL)} - API Key + {t(I18nKey.SETTINGS_FORM$API_KEY_LABEL)}

- Don't know your API key?{" "} + {t(I18nKey.SETTINGS_FORM$DONT_KNOW_API_KEY_LABEL)}{" "} - Click here for instructions + {t(I18nKey.SETTINGS_FORM$CLICK_HERE_FOR_INSTRUCTIONS_LABEL)}

@@ -255,7 +258,7 @@ export function SettingsForm({ htmlFor="agent" className="font-[500] text-[#A3A3A3] text-xs" > - Agent + {t(I18nKey.SETTINGS_FORM$AGENT_LABEL)} - Security Analyzer (Optional) + {t(I18nKey.SETTINGS_FORM$SECURITY_ANALYZER_LABEL)} - Enable Confirmation Mode + {t(I18nKey.SETTINGS_FORM$ENABLE_CONFIRMATION_MODE_LABEL)} )} @@ -345,18 +348,18 @@ export function SettingsForm({ { @@ -369,15 +372,17 @@ export function SettingsForm({ {confirmResetDefaultsModalOpen && ( setConfirmResetDefaultsModalOpen(false), }, }} @@ -387,12 +392,17 @@ export function SettingsForm({ {confirmEndSessionModalOpen && ( setConfirmEndSessionModalOpen(false), }, }} diff --git a/frontend/src/components/modals/AccountSettingsModal.tsx b/frontend/src/components/modals/AccountSettingsModal.tsx index 0ca6df56be32..b2adc2d7bb32 100644 --- a/frontend/src/components/modals/AccountSettingsModal.tsx +++ b/frontend/src/components/modals/AccountSettingsModal.tsx @@ -1,5 +1,6 @@ import { useFetcher, useRouteLoaderData } from "@remix-run/react"; import React from "react"; +import { useTranslation } from "react-i18next"; import { BaseModalTitle } from "./confirmation-modals/BaseModal"; import ModalBody from "./ModalBody"; import ModalButton from "../buttons/ModalButton"; @@ -9,6 +10,7 @@ import { clientLoader } from "#/routes/_oh"; import { clientAction as settingsClientAction } from "#/routes/settings"; import { clientAction as loginClientAction } from "#/routes/login"; import { AvailableLanguages } from "#/i18n"; +import { I18nKey } from "#/i18n/declaration"; interface AccountSettingsModalProps { onClose: () => void; @@ -23,6 +25,7 @@ function AccountSettingsModal({ gitHubError, analyticsConsent, }: AccountSettingsModalProps) { + const { t } = useTranslation(); const data = useRouteLoaderData("routes/_oh"); const settingsFetcher = useFetcher({ key: "settings", @@ -86,13 +89,13 @@ function AccountSettingsModal({ /> {gitHubError && (

- GitHub token is invalid. Please try again. + {t(I18nKey.ACCOUNT_SETTINGS_MODAL$GITHUB_TOKEN_INVALID)}

)} {data?.ghToken && !gitHubError && ( { settingsFetcher.submit( {}, @@ -122,11 +125,11 @@ function AccountSettingsModal({ } type="submit" intent="account" - text="Save" + text={t(I18nKey.ACCOUNT_SETTINGS_MODAL$SAVE)} className="bg-[#4465DB]" /> diff --git a/frontend/src/components/modals/ConnectToGitHubByTokenModal.tsx b/frontend/src/components/modals/ConnectToGitHubByTokenModal.tsx index f9ec5ca673d9..f56b0f707ca0 100644 --- a/frontend/src/components/modals/ConnectToGitHubByTokenModal.tsx +++ b/frontend/src/components/modals/ConnectToGitHubByTokenModal.tsx @@ -1,4 +1,5 @@ import { Form, useNavigation } from "@remix-run/react"; +import { useTranslation } from "react-i18next"; import { BaseModalDescription, BaseModalTitle, @@ -7,10 +8,11 @@ import ModalButton from "../buttons/ModalButton"; import AllHandsLogo from "#/assets/branding/all-hands-logo-spark.svg?react"; import ModalBody from "./ModalBody"; import { CustomInput } from "../form/custom-input"; +import { I18nKey } from "#/i18n/declaration"; function ConnectToGitHubByTokenModal() { const navigation = useNavigation(); - + const { t } = useTranslation(); return (
@@ -29,13 +31,18 @@ function ConnectToGitHubByTokenModal() { required />

- By connecting you agree to our{" "} - terms of service. + {t( + I18nKey.CONNECT_TO_GITHUB_BY_TOKEN_MODAL$BY_CONNECTING_YOU_AGREE, + )}{" "} + + {t(I18nKey.CONNECT_TO_GITHUB_BY_TOKEN_MODAL$TERMS_OF_SERVICE)} + + .

diff --git a/frontend/src/components/modals/LoadingProject.tsx b/frontend/src/components/modals/LoadingProject.tsx index 3e45882a7cc1..1630a66983d6 100644 --- a/frontend/src/components/modals/LoadingProject.tsx +++ b/frontend/src/components/modals/LoadingProject.tsx @@ -1,6 +1,8 @@ +import { useTranslation } from "react-i18next"; import LoadingSpinnerOuter from "#/assets/loading-outer.svg?react"; import { cn } from "#/utils/utils"; import ModalBody from "./ModalBody"; +import { I18nKey } from "#/i18n/declaration"; interface LoadingSpinnerProps { size: "small" | "large"; @@ -28,10 +30,12 @@ interface LoadingProjectModalProps { } function LoadingProjectModal({ message }: LoadingProjectModalProps) { + const { t } = useTranslation(); + return ( - {message || "Loading..."} + {message || t(I18nKey.LOADING_PROJECT$LOADING)} diff --git a/frontend/src/components/modals/connect-to-github-modal.tsx b/frontend/src/components/modals/connect-to-github-modal.tsx index 165dab852105..19cc4ac36ff4 100644 --- a/frontend/src/components/modals/connect-to-github-modal.tsx +++ b/frontend/src/components/modals/connect-to-github-modal.tsx @@ -1,4 +1,5 @@ import { useFetcher, useRouteLoaderData } from "@remix-run/react"; +import { useTranslation } from "react-i18next"; import ModalBody from "./ModalBody"; import { CustomInput } from "../form/custom-input"; import ModalButton from "../buttons/ModalButton"; @@ -8,6 +9,7 @@ import { } from "./confirmation-modals/BaseModal"; import { clientLoader } from "#/routes/_oh"; import { clientAction } from "#/routes/login"; +import { I18nKey } from "#/i18n/declaration"; interface ConnectToGitHubModalProps { onClose: () => void; @@ -16,6 +18,7 @@ interface ConnectToGitHubModalProps { export function ConnectToGitHubModal({ onClose }: ConnectToGitHubModalProps) { const data = useRouteLoaderData("routes/_oh"); const fetcher = useFetcher({ key: "login" }); + const { t } = useTranslation(); return ( @@ -24,14 +27,14 @@ export function ConnectToGitHubModal({ onClose }: ConnectToGitHubModalProps) { - Get your token{" "} + {t(I18nKey.CONNECT_TO_GITHUB_MODAL$GET_YOUR_TOKEN)}{" "} - here + {t(I18nKey.CONNECT_TO_GITHUB_MODAL$HERE)} } @@ -55,13 +58,13 @@ export function ConnectToGitHubModal({ onClose }: ConnectToGitHubModalProps) {
diff --git a/frontend/src/components/modals/security/Security.tsx b/frontend/src/components/modals/security/Security.tsx index 6d5d5305948a..6346ba1ffaf4 100644 --- a/frontend/src/components/modals/security/Security.tsx +++ b/frontend/src/components/modals/security/Security.tsx @@ -1,6 +1,8 @@ import React from "react"; +import { useTranslation } from "react-i18next"; import SecurityInvariant from "./invariant/Invariant"; import BaseModal from "../base-modal/BaseModal"; +import { I18nKey } from "#/i18n/declaration"; interface SecurityProps { isOpen: boolean; @@ -17,11 +19,13 @@ const SecurityAnalyzers: Record = { }; function Security({ isOpen, onOpenChange, securityAnalyzer }: SecurityProps) { + const { t } = useTranslation(); + const AnalyzerComponent = securityAnalyzer && SecurityAnalyzers[securityAnalyzer as SecurityAnalyzerOption] ? SecurityAnalyzers[securityAnalyzer as SecurityAnalyzerOption] - : () =>
Unknown security analyzer chosen
; + : () =>
{t(I18nKey.SECURITY$UNKNOWN_ANALYZER_LABEL)}
; return ( { const data = await request(`/api/security/export-trace`); - toast.info("Trace exported"); + toast.info(t(I18nKey.INVARIANT$TRACE_EXPORTED_MESSAGE)); const filename = `openhands-trace-${getFormattedDateTime()}.json`; downloadJSON(data, filename); @@ -134,7 +134,7 @@ function SecurityInvariant(): JSX.Element { method: "POST", body: JSON.stringify({ policy }), }); - toast.info("Policy updated"); + toast.info(t(I18nKey.INVARIANT$POLICY_UPDATED_MESSAGE)); } async function updateSettings(): Promise { @@ -143,7 +143,7 @@ function SecurityInvariant(): JSX.Element { method: "POST", body: JSON.stringify(payload), }); - toast.info("Settings updated"); + toast.info(t(I18nKey.INVARIANT$SETTINGS_UPDATED_MESSAGE)); } const handleExportTraces = useCallback(() => { @@ -162,9 +162,9 @@ function SecurityInvariant(): JSX.Element { logs: ( <>
-

Logs

+

{t(I18nKey.INVARIANT$LOG_LABEL)}

@@ -195,9 +195,9 @@ function SecurityInvariant(): JSX.Element { policy: ( <>
-

Policy

+

{t(I18nKey.INVARIANT$POLICY_LABEL)}

@@ -214,14 +214,16 @@ function SecurityInvariant(): JSX.Element { settings: ( <>
-

Settings

+

{t(I18nKey.INVARIANT$SETTINGS_LABEL)}

-

Ask for user confirmation on risk severity:

+

+ {t(I18nKey.INVARIANT$ASK_CONFIRMATION_RISK_SEVERITY_LABEL)} +

@@ -278,18 +280,17 @@ function SecurityInvariant(): JSX.Element {
- Invariant Analyzer + {t(I18nKey.INVARIANT$INVARIANT_ANALYZER_LABEL)}

- Invariant Analyzer continuously monitors your OpenHands agent for - security issues.{" "} + {t(I18nKey.INVARIANT$INVARIANT_ANALYZER_MESSAGE)}{" "} - Click to learn more + {t(I18nKey.INVARIANT$CLICK_TO_LEARN_MORE_LABEL)}

@@ -298,19 +299,19 @@ function SecurityInvariant(): JSX.Element { className={`cursor-pointer p-2 rounded ${activeSection === "logs" && "bg-neutral-600"}`} onClick={() => setActiveSection("logs")} > - Logs + {t(I18nKey.INVARIANT$LOG_LABEL)}
setActiveSection("policy")} > - Policy + {t(I18nKey.INVARIANT$POLICY_LABEL)}
setActiveSection("settings")} > - Settings + {t(I18nKey.INVARIANT$SETTINGS_LABEL)}
diff --git a/frontend/src/components/project-menu/project-menu-details-placeholder.tsx b/frontend/src/components/project-menu/project-menu-details-placeholder.tsx index ea0aa7f80e50..153f4e8093c9 100644 --- a/frontend/src/components/project-menu/project-menu-details-placeholder.tsx +++ b/frontend/src/components/project-menu/project-menu-details-placeholder.tsx @@ -1,5 +1,7 @@ +import { useTranslation } from "react-i18next"; import { cn } from "#/utils/utils"; import CloudConnection from "#/assets/cloud-connection.svg?react"; +import { I18nKey } from "#/i18n/declaration"; interface ProjectMenuDetailsPlaceholderProps { isConnectedToGitHub: boolean; @@ -10,9 +12,13 @@ export function ProjectMenuDetailsPlaceholder({ isConnectedToGitHub, onConnectToGitHub, }: ProjectMenuDetailsPlaceholderProps) { + const { t } = useTranslation(); + return ( diff --git a/frontend/src/i18n/translation.json b/frontend/src/i18n/translation.json index 6db2520b6b8a..160e15f076ad 100644 --- a/frontend/src/i18n/translation.json +++ b/frontend/src/i18n/translation.json @@ -798,7 +798,96 @@ "tr": "İptal" }, "FEEDBACK$EMAIL_PLACEHOLDER": { - "en": "Enter your email address." + "en": "Enter your email address", + "es": "Ingresa tu correo electrónico" + }, + "FEEDBACK$PASSWORD_COPIED_MESSAGE": { + "en": "Password copied to clipboard.", + "es": "Contraseña copiada al portapapeles." + }, + "FEEDBACK$GO_TO_FEEDBACK": { + "en": "Go to shared feedback", + "es": "Ir a feedback compartido" + }, + "FEEDBACK$PASSWORD": { + "en": "Password:", + "es": "Contraseña:" + }, + "FEEDBACK$INVALID_EMAIL_FORMAT": { + "en": "Invalid email format", + "es": "Formato de correo inválido" + }, + "FEEDBACK$FAILED_TO_SHARE": { + "en": "Failed to share, please contact the developers:", + "es": "Error al compartir, por favor contacta con los desarrolladores:" + }, + "FEEDBACK$COPY_LABEL": { + "en": "Copy", + "es": "Copiar" + }, + "FEEDBACK$SHARING_SETTINGS_LABEL": { + "en": "Sharing settings", + "es": "Configuración de compartir" + }, + "SECURITY$UNKNOWN_ANALYZER_LABEL":{ + "en": "Unknown security analyzer chosen", + "es": "Analizador de seguridad desconocido" + }, + "INVARIANT$UPDATE_POLICY_LABEL": { + "en": "Update Policy", + "es": "Actualizar política" + }, + "INVARIANT$UPDATE_SETTINGS_LABEL": { + "en": "Update Settings", + "es": "Actualizar configuración" + }, + "INVARIANT$SETTINGS_LABEL": { + "en": "Settings", + "es": "Configuración" + }, + "INVARIANT$ASK_CONFIRMATION_RISK_SEVERITY_LABEL": { + "en": "Ask for user confirmation on risk severity:", + "es": "Preguntar por confirmación del usuario sobre severidad del riesgo:" + }, + "INVARIANT$DONT_ASK_FOR_CONFIRMATION_LABEL": { + "en": "Don't ask for confirmation", + "es": "No solicitar confirmación" + }, + "INVARIANT$INVARIANT_ANALYZER_LABEL": { + "en": "Invariant Analyzer", + "es": "Analizador de invariantes" + }, + "INVARIANT$INVARIANT_ANALYZER_MESSAGE": { + "en": "Invariant Analyzer continuously monitors your OpenHands agent for security issues.", + "es": "Analizador de invariantes continuamente monitorea tu agente de OpenHands por problemas de seguridad." + }, + "INVARIANT$CLICK_TO_LEARN_MORE_LABEL": { + "en": "Click to learn more", + "es": "Clic para aprender más" + }, + "INVARIANT$POLICY_LABEL": { + "en": "Policy", + "es": "Política" + }, + "INVARIANT$LOG_LABEL": { + "en": "Logs", + "es": "Logs" + }, + "INVARIANT$EXPORT_TRACE_LABEL": { + "en": "Export Trace", + "es": "Exportar traza" + }, + "INVARIANT$TRACE_EXPORTED_MESSAGE": { + "en": "Trace exported", + "es": "Traza exportada" + }, + "INVARIANT$POLICY_UPDATED_MESSAGE": { + "en": "Policy updated", + "es": "Política actualizada" + }, + "INVARIANT$SETTINGS_UPDATED_MESSAGE": { + "en": "Settings updated", + "es": "Configuración actualizada" }, "CHAT_INTERFACE$INITIALIZING_AGENT_LOADING_MESSAGE": { "en": "Starting up!", @@ -1517,6 +1606,134 @@ "fr": "En attente que le client soit prêt...", "tr": "İstemcinin hazır olması bekleniyor..." }, + "ACCOUNT_SETTINGS_MODAL$DISCONNECT":{ + "en": "Disconnect", + "es": "Desconectar" + }, + "ACCOUNT_SETTINGS_MODAL$SAVE":{ + "en": "Save", + "es": "Guardar" + }, + "ACCOUNT_SETTINGS_MODAL$CLOSE":{ + "en": "Close", + "es": "" + }, + "ACCOUNT_SETTINGS_MODAL$GITHUB_TOKEN_INVALID":{ + "en": "GitHub token is invalid. Please try again.", + "es": "" + }, + "CONNECT_TO_GITHUB_MODAL$GET_YOUR_TOKEN": { + "en": "Get your token", + "es": "Obten tu token" + }, + "CONNECT_TO_GITHUB_MODAL$HERE": { + "en": "here", + "es": "aquí" + }, + "CONNECT_TO_GITHUB_MODAL$CONNECT": { + "en": "Connect", + "es": "Conectar" + }, + "CONNECT_TO_GITHUB_MODAL$CLOSE": { + "en": "Close", + "es": "Cerrar" + }, + "CONNECT_TO_GITHUB_BY_TOKEN_MODAL$BY_CONNECTING_YOU_AGREE": { + "en": "By connecting you agree to our", + "es": "Al conectarte tu aceptas nuestros" + }, + "CONNECT_TO_GITHUB_BY_TOKEN_MODAL$TERMS_OF_SERVICE": { + "en": "terms of service", + "es": "términos de servicio" + }, + "CONNECT_TO_GITHUB_BY_TOKEN_MODAL$CONTINUE": { + "en": "Continue", + "es": "Continuar" + }, + "LOADING_PROJECT$LOADING": { + "en": "Loading...", + "es": "Cargando..." + }, + "CUSTOM_INPUT$OPTIONAL_LABEL": { + "en": "(Optional)", + "es": "(Opcional)" + }, + "SETTINGS_FORM$ADVANCED_OPTIONS_LABEL": { + "en": "Advanced Options", + "es": "Opciones avanzadas" + }, + "SETTINGS_FORM$CUSTOM_MODEL_LABEL": { + "en": "Custom Model", + "es": "Modelo personalizado" + }, + "SETTINGS_FORM$BASE_URL_LABEL": { + "en": "Base URL", + "es": "URL base" + }, + "SETTINGS_FORM$API_KEY_LABEL": { + "en": "API Key", + "es": "API Key" + }, + "SETTINGS_FORM$DONT_KNOW_API_KEY_LABEL": { + "en": "Don't know your API key?", + "es": "¿No sabes tu API key?" + }, + "SETTINGS_FORM$CLICK_HERE_FOR_INSTRUCTIONS_LABEL": { + "en": "Click here for instructions", + "es": "Clic aquí para instrucciones" + }, + "SETTINGS_FORM$AGENT_LABEL": { + "en": "Agent", + "es": "Agente" + }, + "SETTINGS_FORM$SECURITY_ANALYZER_LABEL": { + "en": "Security Analyzer (Optional)", + "es": "Analizador de seguridad (opcional)" + }, + "SETTINGS_FORM$ENABLE_CONFIRMATION_MODE_LABEL": { + "en": "Enable Confirmation Mode", + "es": "Habilitar modo de confirmación" + }, + "SETTINGS_FORM$SAVE_LABEL": { + "en": "Save", + "es": "Guardar" + }, + "SETTINGS_FORM$CLOSE_LABEL": { + "en": "Close", + "es": "Cerrar" + }, + "SETTINGS_FORM$RESET_TO_DEFAULTS_LABEL": { + "en": "Reset to defaults", + "es": "Reiniciar valores por defect" + }, + "SETTINGS_FORM$CANCEL_LABEL": { + "en": "Cancel", + "es": "Cancelar" + }, + "SETTINGS_FORM$END_SESSION_LABEL": { + "en": "End Session", + "es": "Terminar sesión" + }, + "SETTINGS_FORM$CHANGING_WORKSPACE_WARNING_MESSAGE": { + "en": "Changing your settings will clear your workspace and start a new session. Are you sure you want to continue?", + "es": "Cambiar tu configuración limpiará tu espacio de trabajo e iniciará una nueva sesión. ¿Estás seguro de continuar?" + }, + "SETTINGS_FORM$ARE_YOU_SURE_LABEL": { + "en": "Are you sure?", + "es": "¿Estás seguro?" + }, + "SETTINGS_FORM$ALL_INFORMATION_WILL_BE_DELETED_MESSAGE": { + "en": "All saved information in your AI settings will be deleted, including any API keys.", + "es": "Toda la información guardada en tu configuración de IA será eliminada, incluyendo tus API Keys" + }, + "PROJECT_MENU_DETAILS_PLACEHOLDER$NEW_PROJECT_LABEL": { + "en":"New Project", + "es":"Nuevo proyecto" + }, + "PROJECT_MENU_DETAILS$AGO_LABEL": { + "en":"ago", + "es":"atrás" + }, "STATUS$ERROR_LLM_AUTHENTICATION": { "en": "Error authenticating with the LLM provider. Please check your API key" },