feat: Add component BaiduFanyi #1739 (#1874)

### What problem does this PR solve?

feat: Add component BaiduFanyi #1739

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/flow/baidu-fanyi-form/index.tsx

@@ -0,0 +1,70 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Input, Select } from 'antd';
+import { useMemo } from 'react';
+import {
+  BaiduFanyiDomainOptions,
+  BaiduFanyiSourceLangOptions,
+} from '../constant';
+import { IOperatorForm } from '../interface';
+
+const BaiduFanyiForm = ({ onValuesChange, form }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+  const options = useMemo(() => {
+    return ['translate', 'fieldtranslate'].map((x) => ({
+      value: x,
+      label: t(`baiduSecretKeyOptions.${x}`),
+    }));
+  }, [t]);
+
+  const baiduFanyiOptions = useMemo(() => {
+    return BaiduFanyiDomainOptions.map((x) => ({
+      value: x,
+      label: t(`baiduDomainOptions.${x}`),
+    }));
+  }, [t]);
+
+  const baiduFanyiSourceLangOptions = useMemo(() => {
+    return BaiduFanyiSourceLangOptions.map((x) => ({
+      value: x,
+      label: t(`baiduSourceLangOptions.${x}`),
+    }));
+  }, [t]);
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 8 }}
+      wrapperCol={{ span: 16 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    >
+      <Form.Item label={t('appid')} name={'appid'}>
+        <Input></Input>
+      </Form.Item>
+      <Form.Item label={t('secretKey')} name={'secret_key'}>
+        <Input></Input>
+      </Form.Item>
+      <Form.Item label={t('transType')} name={'trans_type'}>
+        <Select options={options}></Select>
+      </Form.Item>
+      <Form.Item noStyle dependencies={['model_type']}>
+        {({ getFieldValue }) =>
+          getFieldValue('trans_type') === 'fieldtranslate' && (
+            <Form.Item label={t('domain')} name={'domain'}>
+              <Select options={baiduFanyiOptions}></Select>
+            </Form.Item>
+          )
+        }
+      </Form.Item>
+      <Form.Item label={t('sourceLang')} name={'source_lang'}>
+        <Select options={baiduFanyiSourceLangOptions}></Select>
+      </Form.Item>
+      <Form.Item label={t('targetLang')} name={'target_lang'}>
+        <Select options={baiduFanyiSourceLangOptions}></Select>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default BaiduFanyiForm;

web/src/pages/flow/constant.tsx

@@ -1,4 +1,5 @@
 import { ReactComponent as ArXivIcon } from '@/assets/svg/arxiv.svg';
+import { ReactComponent as baiduFanyiIcon } from '@/assets/svg/baidu-fanyi.svg';
 import { ReactComponent as BaiduIcon } from '@/assets/svg/baidu.svg';
 import { ReactComponent as BingIcon } from '@/assets/svg/bing.svg';
 import { ReactComponent as DeepLIcon } from '@/assets/svg/deepl.svg';
@@ -50,6 +51,7 @@ export enum Operator {
   GoogleScholar = 'GoogleScholar',
   DeepL = 'DeepL',
   GitHub = 'GitHub',
+  BaiduFanyi = 'BaiduFanyi',
 }
 
 export const operatorIconMap = {
@@ -72,6 +74,7 @@ export const operatorIconMap = {
   [Operator.GoogleScholar]: GoogleScholarIcon,
   [Operator.DeepL]: DeepLIcon,
   [Operator.GitHub]: GithubIcon,
+  [Operator.BaiduFanyi]: baiduFanyiIcon,
 };
 
 export const operatorMap = {
@@ -157,6 +160,7 @@ export const operatorMap = {
   [Operator.GoogleScholar]: {},
   [Operator.DeepL]: {},
   [Operator.GitHub]: {},
+  [Operator.BaiduFanyi]: {},
 };
 
 export const componentMenuList = [
@@ -214,6 +218,9 @@ export const componentMenuList = [
   {
     name: Operator.GitHub,
   },
+  {
+    name: Operator.BaiduFanyi,
+  },
 ];
 
 export const initialRetrievalValues = {
@@ -327,6 +334,12 @@ export const initialGithubValues = {
   top_n: 5,
 };
 
+export const initialBaiduFanyiValues = {
+  appid: 'xxx',
+  secret_key: 'xxx',
+  trans_type: 'translate',
+};
+
 export const CategorizeAnchorPointPositions = [
   { top: 1, right: 34 },
   { top: 8, right: 18 },
@@ -393,6 +406,7 @@ export const RestrictedUpstreamMap = {
   [Operator.GoogleScholar]: [Operator.Begin, Operator.Retrieval],
   [Operator.DeepL]: [Operator.Begin, Operator.Retrieval],
   [Operator.GitHub]: [Operator.Begin, Operator.Retrieval],
+  [Operator.BaiduFanyi]: [Operator.Begin, Operator.Retrieval],
 };
 
 export const NodeMap = {
@@ -415,6 +429,7 @@ export const NodeMap = {
   [Operator.GoogleScholar]: 'ragNode',
   [Operator.DeepL]: 'ragNode',
   [Operator.GitHub]: 'ragNode',
+  [Operator.BaiduFanyi]: 'ragNode',
 };
 
 export const LanguageOptions = [
@@ -2452,3 +2467,49 @@ export const DeepLTargetLangOptions = [
   { label: 'Ukrainian', value: 'UK' },
   { label: 'Chinese (simplified)', value: 'ZH' },
 ];
+
+export const BaiduFanyiDomainOptions = [
+  'it',
+  'finance',
+  'machinery',
+  'senimed',
+  'novel',
+  'academic',
+  'aerospace',
+  'wiki',
+  'news',
+  'law',
+  'contract',
+];
+
+export const BaiduFanyiSourceLangOptions = [
+  'auto',
+  'zh',
+  'en',
+  'yue',
+  'wyw',
+  'jp',
+  'kor',
+  'fra',
+  'spa',
+  'th',
+  'ara',
+  'ru',
+  'pt',
+  'de',
+  'it',
+  'el',
+  'nl',
+  'pl',
+  'bul',
+  'est',
+  'dan',
+  'fin',
+  'cs',
+  'rom',
+  'slo',
+  'swe',
+  'hu',
+  'cht',
+  'vie',
+];

web/src/pages/flow/flow-drawer/index.tsx

@@ -5,6 +5,7 @@ import { useEffect } from 'react';
 import { Node } from 'reactflow';
 import AnswerForm from '../answer-form';
 import ArXivForm from '../arxiv-form';
+import BaiduFanyiForm from '../baidu-fanyi-form';
 import BaiduForm from '../baidu-form';
 import BeginForm from '../begin-form';
 import BingForm from '../bing-form';
@@ -52,6 +53,7 @@ const FormMap = {
   [Operator.GoogleScholar]: GoogleScholarForm,
   [Operator.DeepL]: DeepLForm,
   [Operator.GitHub]: GithubForm,
+  [Operator.BaiduFanyi]: BaiduFanyiForm,
 };
 
 const EmptyContent = () => <div>empty</div>;

web/src/pages/flow/flow-sider/index.less

@@ -11,4 +11,6 @@
 
 .siderContent {
   padding: 10px 4px;
+  overflow: auto;
+  height: calc(100vh - 80px);
 }

web/src/pages/flow/hooks.ts

@@ -31,6 +31,7 @@ import {
   Operator,
   RestrictedUpstreamMap,
   initialArXivValues,
+  initialBaiduFanyiValues,
   initialBaiduValues,
   initialBeginValues,
   initialBingValues,
@@ -103,6 +104,7 @@ export const useInitializeOperatorParams = () => {
       [Operator.GoogleScholar]: initialGoogleScholarValues,
       [Operator.DeepL]: initialDeepLValues,
       [Operator.GitHub]: initialGithubValues,
+      [Operator.BaiduFanyi]: initialBaiduFanyiValues,
     };
   }, [llmId]);