Fix(i18n): Added new translations #3221 (#9727)

### What problem does this PR solve?

Fix(i18n): Added new translations #3221

- Added and updated internationalization translations in multiple
components


### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

---------

Co-authored-by: Kevin Hu <kevinhu.sh@gmail.com>

web/src/pages/agent/form/agent-form/agent-tools.tsx

@@ -6,6 +6,7 @@ import {
 } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
 import { Position } from '@xyflow/react';
+import { t } from 'i18next';
 import { PencilLine, X } from 'lucide-react';
 import {
   MouseEventHandler,
@@ -106,7 +107,7 @@ export function AgentTools() {
 
   return (
     <section className="space-y-2.5">
-      <span className="text-text-secondary">Tools</span>
+      <span className="text-text-secondary">{t('flow.tools')}</span>
       <ul className="space-y-2">
         {toolNames.map((x) => (
           <ToolCard key={x}>
@@ -133,7 +134,7 @@ export function AgentTools() {
         ))}
       </ul>
       <ToolPopover>
-        <BlockButton>Add Tool</BlockButton>
+        <BlockButton>{t('flow.addTools')}</BlockButton>
       </ToolPopover>
     </section>
   );
@@ -160,7 +161,7 @@ export function Agents({ node }: INextOperatorForm) {
 
   return (
     <section className="space-y-2.5">
-      <span className="text-text-secondary">Agents</span>
+      <span className="text-text-secondary">{t('flow.agent')}</span>
       <ul className="space-y-2">
         {subBottomAgentNodeIds.map((id) => {
           const currentNode = getNode(id);
@@ -183,7 +184,7 @@ export function Agents({ node }: INextOperatorForm) {
           position: Position.Bottom,
         })}
       >
-        Add Agent
+        {t('flow.addAgent')}
       </BlockButton>
     </section>
   );

web/src/pages/agent/form/agent-form/index.tsx

@@ -144,7 +144,7 @@ function AgentForm({ node }: INextOperatorForm) {
             name={`sys_prompt`}
             render={({ field }) => (
               <FormItem className="flex-1">
-                <FormLabel>System Prompt</FormLabel>
+                <FormLabel>{t('flow.systemPrompt')}</FormLabel>
                 <FormControl>
                   <PromptEditor
                     {...field}
@@ -164,7 +164,7 @@ function AgentForm({ node }: INextOperatorForm) {
               name={`prompts`}
               render={({ field }) => (
                 <FormItem className="flex-1">
-                  <FormLabel>User Prompt</FormLabel>
+                  <FormLabel>{t('flow.userPrompt')}</FormLabel>
                   <FormControl>
                     <section>
                       <PromptEditor
@@ -183,7 +183,7 @@ function AgentForm({ node }: INextOperatorForm) {
           <AgentTools></AgentTools>
           <Agents node={node}></Agents>
         </FormContainer>
-        <Collapse title={<div>Advanced Settings</div>}>
+        <Collapse title={<div>{t('flow.advancedSettings')}</div>}>
           <FormContainer>
             <MessageHistoryWindowSizeFormField></MessageHistoryWindowSizeFormField>
             <FormField
@@ -208,7 +208,7 @@ function AgentForm({ node }: INextOperatorForm) {
               name={`max_retries`}
               render={({ field }) => (
                 <FormItem className="flex-1">
-                  <FormLabel>Max retries</FormLabel>
+                  <FormLabel>{t('flow.maxRetries')}</FormLabel>
                   <FormControl>
                     <NumberInput {...field} max={8}></NumberInput>
                   </FormControl>
@@ -220,7 +220,7 @@ function AgentForm({ node }: INextOperatorForm) {
               name={`delay_after_error`}
               render={({ field }) => (
                 <FormItem className="flex-1">
-                  <FormLabel>Delay after error</FormLabel>
+                  <FormLabel>{t('flow.delayEfterError')}</FormLabel>
                   <FormControl>
                     <NumberInput {...field} max={5} step={0.1}></NumberInput>
                   </FormControl>
@@ -232,7 +232,7 @@ function AgentForm({ node }: INextOperatorForm) {
               name={`max_rounds`}
               render={({ field }) => (
                 <FormItem className="flex-1">
-                  <FormLabel>Max rounds</FormLabel>
+                  <FormLabel>{t('flow.maxRounds')}</FormLabel>
                   <FormControl>
                     <NumberInput {...field}></NumberInput>
                   </FormControl>
@@ -244,7 +244,7 @@ function AgentForm({ node }: INextOperatorForm) {
               name={`exception_method`}
               render={({ field }) => (
                 <FormItem className="flex-1">
-                  <FormLabel>Exception method</FormLabel>
+                  <FormLabel>{t('flow.exceptionMethod')}</FormLabel>
                   <FormControl>
                     <SelectWithSearch
                       {...field}
@@ -261,7 +261,7 @@ function AgentForm({ node }: INextOperatorForm) {
                 name={`exception_default_value`}
                 render={({ field }) => (
                   <FormItem className="flex-1">
-                    <FormLabel>Exception default value</FormLabel>
+                    <FormLabel>{t('flow.ExceptionDefaultValue')}</FormLabel>
                     <FormControl>
                       <Input {...field} />
                     </FormControl>

web/src/pages/agent/form/agent-form/tool-popover/index.tsx

@@ -8,6 +8,7 @@ import { Operator } from '@/pages/agent/constant';
 import { AgentFormContext, AgentInstanceContext } from '@/pages/agent/context';
 import useGraphStore from '@/pages/agent/store';
 import { Position } from '@xyflow/react';
+import { t } from 'i18next';
 import { PropsWithChildren, useCallback, useContext, useEffect } from 'react';
 import { useGetAgentMCPIds, useGetAgentToolNames } from '../use-get-tools';
 import { MCPCommand, ToolCommand } from './tool-command';
@@ -65,8 +66,12 @@ export function ToolPopover({ children }: PropsWithChildren) {
       <PopoverContent className="w-80 p-4">
         <Tabs defaultValue={ToolType.Common}>
           <TabsList>
-            <TabsTrigger value={ToolType.Common}>Built-in</TabsTrigger>
-            <TabsTrigger value={ToolType.MCP}>MCP</TabsTrigger>
+            <TabsTrigger value={ToolType.Common} className="bg-bg-card">
+              {t('flow.builtIn')}
+            </TabsTrigger>
+            <TabsTrigger value={ToolType.MCP} className="bg-bg-card">
+              MCP
+            </TabsTrigger>
           </TabsList>
           <TabsContent value={ToolType.Common}>
             <ToolCommand

web/src/pages/agent/form/agent-form/tool-popover/tool-command.tsx

@@ -12,13 +12,14 @@ import { useListMcpServer } from '@/hooks/use-mcp-request';
 import { cn } from '@/lib/utils';
 import { Operator } from '@/pages/agent/constant';
 import OperatorIcon from '@/pages/agent/operator-icon';
+import { t } from 'i18next';
 import { lowerFirst } from 'lodash';
 import { PropsWithChildren, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 const Menus = [
   {
-    label: 'Search',
+    label: t('flow.search'),
     list: [
       Operator.TavilySearch,
       Operator.TavilyExtract,
@@ -34,7 +35,7 @@ const Menus = [
     ],
   },
   {
-    label: 'Communication',
+    label: t('flow.communication'),
     list: [Operator.Email],
   },
   // {
@@ -42,7 +43,7 @@ const Menus = [
   //   list: [],
   // },
   {
-    label: 'Developer',
+    label: t('flow.developer'),
     list: [Operator.GitHub, Operator.ExeSQL, Operator.Code, Operator.Retrieval],
   },
 ];
@@ -116,7 +117,7 @@ export function ToolCommand({ value, onChange }: ToolCommandProps) {
 
   return (
     <Command>
-      <CommandInput placeholder="Type a command or search..." />
+      <CommandInput placeholder={t('flow.typeCommandOrsearch')} />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
         {Menus.map((x) => (