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/begin-form/index.tsx

@@ -12,8 +12,8 @@ import { RAGFlowSelect } from '@/components/ui/select';
 import { Switch } from '@/components/ui/switch';
 import { Textarea } from '@/components/ui/textarea';
 import { FormTooltip } from '@/components/ui/tooltip';
-import { buildSelectOptions } from '@/utils/component-util';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { t } from 'i18next';
 import { Plus } from 'lucide-react';
 import { memo, useEffect, useRef } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
@@ -27,10 +27,10 @@ import { useEditQueryRecord } from './use-edit-query';
 import { useValues } from './use-values';
 import { useWatchFormChange } from './use-watch-change';
 
-const ModeOptions = buildSelectOptions([
-  AgentDialogueMode.Conversational,
-  AgentDialogueMode.Task,
-]);
+const ModeOptions = [
+  { value: AgentDialogueMode.Conversational, label: t('flow.conversational') },
+  { value: AgentDialogueMode.Task, label: t('flow.task') },
+];
 
 function BeginForm({ node }: INextOperatorForm) {
   const { t } = useTranslation();
@@ -103,7 +103,9 @@ function BeginForm({ node }: INextOperatorForm) {
           name={'mode'}
           render={({ field }) => (
             <FormItem>
-              <FormLabel tooltip={t('flow.modeTip')}>Mode</FormLabel>
+              <FormLabel tooltip={t('flow.modeTip')}>
+                {t('flow.mode')}
+              </FormLabel>
               <FormControl>
                 <RAGFlowSelect
                   placeholder={t('common.pleaseSelect')}

web/src/pages/agent/form/begin-form/parameter-dialog.tsx

@@ -138,7 +138,7 @@ function ParameterForm({
           control={form.control}
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Type</FormLabel>
+              <FormLabel>{t('type')}</FormLabel>
               <FormControl>
                 <RAGFlowSelect {...field} options={options} />
               </FormControl>
@@ -151,7 +151,7 @@ function ParameterForm({
           control={form.control}
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Key</FormLabel>
+              <FormLabel>{t('key')}</FormLabel>
               <FormControl>
                 <Input {...field} autoComplete="off" onBlur={handleKeyChange} />
               </FormControl>
@@ -164,7 +164,7 @@ function ParameterForm({
           control={form.control}
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Name</FormLabel>
+              <FormLabel>{t('name')}</FormLabel>
               <FormControl>
                 <Input {...field} />
               </FormControl>
@@ -177,7 +177,7 @@ function ParameterForm({
           control={form.control}
           render={({ field }) => (
             <FormItem>
-              <FormLabel>Optional</FormLabel>
+              <FormLabel>{t('optional')}</FormLabel>
               <FormControl>
                 <Switch
                   checked={field.value}
@@ -217,7 +217,7 @@ export function ParameterDialog({
         ></ParameterForm>
         <DialogFooter>
           <Button type="submit" form={FormId}>
-            Confirm
+            {t('modal.okText')}
           </Button>
         </DialogFooter>
       </DialogContent>

web/src/pages/agent/form/begin-form/query-table.tsx

@@ -53,7 +53,7 @@ export function QueryTable({ data = [], deleteRecord, showModal }: IProps) {
   const columns: ColumnDef<BeginQuery>[] = [
     {
       accessorKey: 'key',
-      header: 'Key',
+      header: t('flow.key'),
       meta: { cellClassName: 'max-w-30' },
       cell: ({ row }) => {
         const key: string = row.getValue('key');