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/components/api-key-field.tsx

@@ -6,6 +6,7 @@ import {
   FormMessage,
 } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
+import { t } from 'i18next';
 import { useFormContext } from 'react-hook-form';
 
 interface IApiKeyFieldProps {
@@ -19,7 +20,7 @@ export function ApiKeyField({ placeholder }: IApiKeyFieldProps) {
       name="api_key"
       render={({ field }) => (
         <FormItem>
-          <FormLabel>Api Key</FormLabel>
+          <FormLabel>{t('flow.apiKey')}</FormLabel>
           <FormControl>
             <Input type="password" {...field} placeholder={placeholder}></Input>
           </FormControl>

web/src/pages/agent/form/components/description-field.tsx

@@ -5,6 +5,7 @@ import {
   FormLabel,
 } from '@/components/ui/form';
 import { Textarea } from '@/components/ui/textarea';
+import { t } from 'i18next';
 import { useFormContext } from 'react-hook-form';
 
 export function DescriptionField() {
@@ -15,7 +16,7 @@ export function DescriptionField() {
       name={`description`}
       render={({ field }) => (
         <FormItem className="flex-1">
-          <FormLabel>Description</FormLabel>
+          <FormLabel>{t('flow.description')}</FormLabel>
           <FormControl>
             <Textarea {...field}></Textarea>
           </FormControl>

web/src/pages/agent/form/components/output.tsx

@@ -1,3 +1,5 @@
+import { t } from 'i18next';
+
 export type OutputType = {
   title: string;
   type?: string;
@@ -17,7 +19,7 @@ export function transferOutputs(outputs: Record<string, any>) {
 export function Output({ list }: OutputProps) {
   return (
     <section className="space-y-2">
-      <div>Output</div>
+      <div>{t('flow.output')}</div>
       <ul>
         {list.map((x, idx) => (
           <li

web/src/pages/agent/form/components/query-variable.tsx

@@ -47,7 +47,7 @@ export function QueryVariable({
       render={({ field }) => (
         <FormItem>
           {label || (
-            <FormLabel tooltip={t('chat.modelTip')}>
+            <FormLabel tooltip={t('flow.queryTip')}>
               {t('flow.query')}
             </FormLabel>
           )}