Use i18n Keys

frontend/src/components/agent-control-bar.tsx

@@ -1,12 +1,14 @@
 import { Tooltip } from "@nextui-org/react";
 import React from "react";
 import { useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
 import PauseIcon from "#/assets/pause";
 import PlayIcon from "#/assets/play";
 import { generateAgentStateChangeEvent } from "#/services/agent-state-service";
 import { RootState } from "#/store";
-import AgentState from "#/types/agent-state";
-import { useWsClient } from "#/context/ws-client-provider";
+import AgentState from "#/types/AgentState";
+import { useSocket } from "#/context/socket";
+import { I18nKey } from "#/i18n/declaration";
 
 const IgnoreTaskStateMap: Record<string, AgentState[]> = {
   [AgentState.PAUSED]: [
@@ -81,6 +83,8 @@
     }
   };
 
+  const { t } = useTranslation();
+
   return (
     <div className="flex justify-between items-center gap-20">
       <ActionButton
@@ -90,8 +94,8 @@
         }
         content={
           curAgentState === AgentState.PAUSED
-            ? "Resume the agent task"
-            : "Pause the current task"
+            ? t(I18nKey.ACTION_BUTTON$RESUME)
+            : t(I18nKey.ACTION_BUTTON$PAUSE)
         }
         action={
           curAgentState === AgentState.PAUSED

frontend/src/components/browser.tsx

@@ -27,7 +27,7 @@ function BrowserPanel() {
             src={imgSrc}
             style={{ objectFit: "contain", width: "100%", height: "auto" }}
             className="rounded-xl"
-            alt="Browser Screenshot"
+            alt={t(I18nKey.BROWSER$SCREENSHOT_ALT)}
           />
         ) : (
           <div className="flex flex-col items-center h-full justify-center">

frontend/src/components/chat/confirmation-buttons.tsx

@@ -25,7 +25,7 @@ function ActionTooltip({ type, onClick }: ActionTooltipProps) {
       <button
         data-testid={`action-${type}-button`}
         type="button"
-        aria-label={type === "confirm" ? "Confirm action" : "Reject action"}
+        aria-label={content}
         className="bg-neutral-700 rounded-full p-1 hover:bg-neutral-800"
         onClick={onClick}
       >

frontend/src/components/context-menu/account-settings-context-menu.tsx

@@ -1,7 +1,9 @@
+import { useTranslation } from "react-i18next";
 import { ContextMenu } from "./context-menu";
 import { ContextMenuListItem } from "./context-menu-list-item";
 import { ContextMenuSeparator } from "./context-menu-separator";
 import { useClickOutsideElement } from "#/hooks/use-click-outside-element";
+import { I18nKey } from "#/i18n/declaration";
 
 interface AccountSettingsContextMenuProps {
   onClickAccountSettings: () => void;
@@ -17,19 +19,19 @@ export function AccountSettingsContextMenu({
   isLoggedIn,
 }: AccountSettingsContextMenuProps) {
   const ref = useClickOutsideElement<HTMLUListElement>(onClose);
-
+  const { t } = useTranslation();
   return (
     <ContextMenu
       testId="account-settings-context-menu"
       ref={ref}
       className="absolute left-full -top-1 z-10"
     >
       <ContextMenuListItem onClick={onClickAccountSettings}>
-        Account Settings
+        {t(I18nKey.ACCOUNT_SETTINGS$SETTINGS)}
       </ContextMenuListItem>
       <ContextMenuSeparator />
       <ContextMenuListItem onClick={onLogout} isDisabled={!isLoggedIn}>
-        Logout
+        {t(I18nKey.ACCOUNT_SETTINGS$LOGOUT)}
       </ContextMenuListItem>
     </ContextMenu>
   );

frontend/src/components/error-toast.tsx

@@ -1,11 +1,14 @@
 import toast, { Toast } from "react-hot-toast";
+import { useTranslation } from "react-i18next";
+import { I18nKey } from "#/i18n/declaration";
 
 interface ErrorToastProps {
   id: Toast["id"];
   error: string;
 }
 
 export function ErrorToast({ id, error }: ErrorToastProps) {
+  const { t } = useTranslation();
   return (
     <div className="flex items-center justify-between w-full h-full">
       <span>{error}</span>
@@ -14,7 +17,7 @@ export function ErrorToast({ id, error }: ErrorToastProps) {
         onClick={() => toast.dismiss(id)}
         className="bg-neutral-500 px-1 rounded h-full"
       >
-        Close
+        {t(I18nKey.CLOSE)}
       </button>
     </div>
   );

frontend/src/components/file-explorer/file-explorer.tsx

@@ -35,6 +35,8 @@ function ExplorerActions({
   onUpload,
   isHidden,
 }: ExplorerActionsProps) {
+  const { t } = useTranslation();
+
   return (
     <div
       className={twMerge(
@@ -52,7 +54,7 @@ function ExplorerActions({
               />
             }
             testId="refresh"
-            ariaLabel="Refresh workspace"
+            ariaLabel={t(I18nKey.FILE_EXPLORER$REFRESH_WORKSPACE)}
             onClick={onRefresh}
           />
           <IconButton
@@ -63,7 +65,7 @@ function ExplorerActions({
               />
             }
             testId="upload"
-            ariaLabel="Upload File"
+            ariaLabel={t(I18nKey.FILE_EXPLORER$UPLOAD)}
             onClick={onUpload}
           />
         </>
@@ -84,7 +86,11 @@ function ExplorerActions({
           )
         }
         testId="toggle"
-        ariaLabel={isHidden ? "Open workspace" : "Close workspace"}
+        ariaLabel={
+          isHidden
+            ? t(I18nKey.FILE_EXPLORER$OPEN_WORKSPACE)
+            : t(I18nKey.FILE_EXPLORER$CLOSE_WORKSPACE)
+        }
         onClick={toggleHidden}
       />
     </div>

frontend/src/components/project-menu/ProjectMenuCard.tsx

@@ -39,6 +39,8 @@ export function ProjectMenuCard({
     setContextMenuIsOpen((prev) => !prev);
   };
 
+  const { t } = useTranslation();
+
   const handlePushToGitHub = () => {
     posthog.capture("push_to_github_button_clicked");
     const rawEvent = {
@@ -99,7 +101,7 @@ Please push the changes to GitHub and open a pull request.
       <button
         type="button"
         onClick={toggleMenuVisibility}
-        aria-label="Open project menu"
+        aria-label={t(I18nKey.PROJECT_MENU$OPEN)}
       >
         {working ? (
           <LoadingSpinner size="small" />

frontend/src/components/project-menu/project-menu-details-placeholder.tsx

@@ -30,7 +30,9 @@ export function ProjectMenuDetailsPlaceholder({
             "hover:underline hover:underline-offset-2",
           )}
         >
-          {!isConnectedToGitHub ? "Connect to GitHub" : "Connected"}
+          {!isConnectedToGitHub
+            ? t(I18nKey.PROJECT_MENU$CONNECT_GITHUB)
+            : t(I18nKey.PROJECT_MENU$CONNECTED)}
           <CloudConnection width={12} height={12} />
         </span>
       </button>

frontend/src/components/user-avatar.tsx

@@ -1,6 +1,8 @@
-import { LoadingSpinner } from "./modals/loading-project";
-import DefaultUserAvatar from "#/icons/default-user.svg?react";
+import { useTranslation } from "react-i18next";
+import { LoadingSpinner } from "./modals/LoadingProject";
+import DefaultUserAvatar from "#/assets/default-user.svg?react";
 import { cn } from "#/utils/utils";
+import { I18nKey } from "#/i18n/declaration";
 
 interface UserAvatarProps {
   onClick: () => void;
@@ -9,6 +11,7 @@ interface UserAvatarProps {
 }
 
 export function UserAvatar({ onClick, avatarUrl, isLoading }: UserAvatarProps) {
+  const { t } = useTranslation();
   return (
     <button
       data-testid="user-avatar"
@@ -22,13 +25,13 @@ export function UserAvatar({ onClick, avatarUrl, isLoading }: UserAvatarProps) {
       {!isLoading && avatarUrl && (
         <img
           src={avatarUrl}
-          alt="user avatar"
+          alt={t(I18nKey.USER_AVATAR)}
           className="w-full h-full rounded-full"
         />
       )}
       {!isLoading && !avatarUrl && (
         <DefaultUserAvatar
-          aria-label="user avatar placeholder"
+          aria-label={t(I18nKey.USER_AVATAR)}
           width={20}
           height={20}
         />

frontend/src/i18n/translation.json

@@ -385,7 +385,7 @@
     "fr": "Sélectionnez un analyseur de sécurité (facultatif)",
     "tr": "Bir güvenlik analizörü seçin (isteğe bağlı)"
   },
-  "CONFIGURATION$MODAL_CLOSE_BUTTON_LABEL": {
+  "CLOSE": {
     "en": "Close",
     "zh-CN": "关闭",
     "de": "Schließen",
@@ -1740,6 +1740,20 @@
     "fr": "Aucune page chargée.",
     "tr": "Sayfa yüklenmedi."
   },
+  "BROWSER$SCREENSHOT_ALT": {
+    "en": "Browser Screenshot",
+    "zh-CN": "浏览器截图",
+    "de": "Browser-Screenshot",
+    "ko-KR": "브라우저 스크린샷",
+    "no": "Nettleserskjermbilde",
+    "zh-TW": "瀏覽器截圖",
+    "it": "Screenshot del browser",
+    "pt": "Captura de tela do navegador",
+    "es": "Captura de pantalla del navegador",
+    "ar": "لقطة شاشة المتصفح",
+    "fr": "Capture d'écran du navigateur",
+    "tr": "Tarayıcı Ekran Görüntüsü"
+  },
   "PLANNER$EMPTY_MESSAGE": {
     "en": "No plan created.",
     "zh-CN": "计划未创建",
@@ -1860,6 +1874,57 @@
     "fr": "En attente que le client soit prêt...",
     "tr": "İstemcinin hazır olması bekleniyor..."
   },
+  "ACTION_BUTTON$RESUME": {
+    "en": "Resume the agent task"
+  },
+  "ACTION_BUTTON$PAUSE": {
+    "en": "Pause the current task"
+  },
+  "USER_AVATAR": {
+    "en": "User Avatar"
+  },
+  "ACCOUNT_SETTINGS$SETTINGS": {
+    "en": "Account Settings"
+  },
+  "ACCOUNT_SETTINGS$LOGOUT": {
+    "en": "Logout"
+  },
+  "FILE_EXPLORER$UPLOAD": {
+    "en": "Upload File"
+  },
+  "FILE_EXPLORER$REFRESH_WORKSPACE": {
+    "en": "Refresh workspace"
+  },
+  "FILE_EXPLORER$OPEN_WORKSPACE": {
+    "en": "Open workspace"
+  },
+  "FILE_EXPLORER$CLOSE_WORKSPACE": {
+    "en": "Close workspace"
+  },
+  "PROJECT_MENU$NEW_PROJECT": {
+    "en": "New Project"
+  },
+  "PROJECT_MENU$CONNECT_GITHUB": {
+    "en": "Connect to GitHub"
+  },
+  "PROJECT_MENU$PUSH_GITHUB": {
+    "en": "Push to GitHub"
+  },
+  "PROJECT_MENU$CONNECTED": {
+    "en": "Connected"
+  },
+  "PROJECT_MENU$TIME_AGO": {
+    "en": "ago"
+  },
+  "PROJECT_MENU$DOWNLOAD_AS_ZIP": {
+    "en": "Download as .zip"
+  },
+  "PROJECT_MENU$OPEN": {
+    "en": "Open project menu"
+  },
+  "PROJECT_MENU$RAW_EVENT_CONTENT": {
+    "en": "\nLet's push the code to GitHub.\nIf we're currently on the openhands-workspace branch, please create a new branch with a descriptive name.\nCommit any changes and push them to the remote repository.\nFinally, open up a pull request using the GitHub API and the token in the GITHUB_TOKEN environment variable, then show me the URL of the pull request."
+  },
   "ACCOUNT_SETTINGS_MODAL$DISCONNECT":{
     "en": "Disconnect",
     "es": "Desconectar"