feat: Add component DeepL #1739 (#1870)

### What problem does this PR solve?

feat: Add component DeepL #1739

### Type of change


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

web/src/assets/svg/deepl.svg

+<svg t="1723087653045" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4633"
+    width="200" height="200">
+    <path
+        d="M128 286.165333v376.661334c0 19.669333 9.813333 37.973333 26.709333 47.786666l324.693334 186.88c16.810667 9.898667 37.888 9.898667 53.333333 0l324.693333-188.288c16.853333-9.813333 26.709333-28.117333 26.709334-47.786666V286.165333c0-19.669333-9.813333-37.973333-26.709334-47.786666l-324.693333-188.330667c-16.853333-9.813333-37.930667-9.813333-53.333333 0l-324.693334 188.330667C137.813333 248.192 128 266.496 128 286.165333z"
+        fill="#0F2B46" p-id="4634"></path>
+    <path d="M649.728 981.333333v-179.712l-189.738667 70.101334" fill="#0F2B46" p-id="4635"></path>
+    <path
+        d="M382.037333 295.68a55.125333 55.125333 0 0 1 77.312 0c23.893333 22.442667 23.893333 59.008 0 81.493333a55.125333 55.125333 0 0 1-77.312 0 57.685333 57.685333 0 0 1 0-81.493333zM620.245333 437.930667a55.125333 55.125333 0 0 1 77.312 0c23.893333 22.485333 23.893333 59.050667 0 81.493333a55.125333 55.125333 0 0 1-77.312 0 55.296 55.296 0 0 1 0-81.493333zM382.037333 580.266667a55.125333 55.125333 0 0 1 77.312 0c23.893333 22.485333 23.893333 59.008 0 81.493333a55.125333 55.125333 0 0 1-77.312 0c-22.485333-21.077333-22.485333-59.008 0-81.493333z"
+        fill="#FFFFFF" p-id="4636"></path>
+    <path
+        d="M459.989333 390.186667l161.621334 94.165333 26.709333-15.488-161.621333-94.165333-26.709334 15.488zM632.874667 532.48l-146.176 84.309333-26.709334-15.445333 146.176-84.352 26.709334 15.488z"
+        fill="#FFFFFF" p-id="4637"></path>
+</svg>

web/src/locales/en.ts

       yearHigh: 'Year high',
       patents: 'Patents',
       data: 'Data',
+      deepL: 'DeepL',
+      deepLDescription:
+        'This component is used to get translations from https://www.deepl.com/. Typically, it provides a more specialized translation result.',
+      authKey: 'Auth key',
+      sourceLang: 'Source language',
+      targetLang: 'Target language',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/locales/zh-traditional.ts

       yearHigh: '結束年份',
       patents: '專利',
       data: '數據',
+      deepL: 'DeepL',
+      deepLDescription:
+        '此元件用於從 https://www.deepl.com/ 取得翻譯。通常，它提供更專業的翻譯結果。',
+      authKey: '授權鍵',
+      sourceLang: '原始語言',
+      targetLang: '目標語言',
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

       yearHigh: '结束年份',
       patents: '专利',
       data: '数据',
+      deepL: 'DeepL',
+      deepLDescription:
+        '该组件用于从 https://www.deepl.com/ 获取翻译。通常，它提供更专业的翻译结果。',
+      authKey: '授权键',
+      sourceLang: '源语言',
+      targetLang: '目标语言',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/pages/flow/constant.tsx

 import { ReactComponent as ArXivIcon } from '@/assets/svg/arxiv.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';
 import { ReactComponent as DuckIcon } from '@/assets/svg/duck.svg';
 import { ReactComponent as GoogleScholarIcon } from '@/assets/svg/google-scholar.svg';
 import { ReactComponent as GoogleIcon } from '@/assets/svg/google.svg';
   Google = 'Google',
   Bing = 'Bing',
   GoogleScholar = 'GoogleScholar',
+  DeepL = 'DeepL',
 }
 
 export const operatorIconMap = {
   [Operator.Google]: GoogleIcon,
   [Operator.Bing]: BingIcon,
   [Operator.GoogleScholar]: GoogleScholarIcon,
+  [Operator.DeepL]: DeepLIcon,
 };
 
 export const operatorMap = {
   },
   [Operator.Bing]: {},
   [Operator.GoogleScholar]: {},
+  [Operator.DeepL]: {},
 };
 
 export const componentMenuList = [
   {
     name: Operator.GoogleScholar,
   },
+  {
+    name: Operator.DeepL,
+  },
 ];
 
 export const initialRetrievalValues = {
   patents: true,
 };
 
+export const initialDeepLValues = {
+  text: 5,
+  auth_key: 'relevance',
+};
+
 export const CategorizeAnchorPointPositions = [
   { top: 1, right: 34 },
   { top: 8, right: 18 },
   [Operator.Google]: [Operator.Begin, Operator.Retrieval],
   [Operator.Bing]: [Operator.Begin, Operator.Retrieval],
   [Operator.GoogleScholar]: [Operator.Begin, Operator.Retrieval],
+  [Operator.DeepL]: [Operator.Begin, Operator.Retrieval],
 };
 
 export const NodeMap = {
   [Operator.Google]: 'ragNode',
   [Operator.Bing]: 'ragNode',
   [Operator.GoogleScholar]: 'ragNode',
+  [Operator.DeepL]: 'ragNode',
 };
 
 export const LanguageOptions = [
     language_name: 'Zulu',
   },
 ].map((x) => ({ label: x.language_name, value: x.language_code }));
+
 export const GoogleCountryOptions = [
   {
     country_code: 'af',
   { label: 'Ukrainian uk', value: 'uk' },
   { label: 'Vietnamese vi', value: 'vi' },
 ];
+
+export const DeepLSourceLangOptions = [
+  { label: 'Arabic [1]', value: 'AR' },
+  { label: 'Bulgarian', value: 'BG' },
+  { label: 'Czech', value: 'CS' },
+  { label: 'Danish', value: 'DA' },
+  { label: 'German', value: 'DE' },
+  { label: 'Greek', value: 'EL' },
+  { label: 'English', value: 'EN' },
+  { label: 'Spanish', value: 'ES' },
+  { label: 'Estonian', value: 'ET' },
+  { label: 'Finnish', value: 'FI' },
+  { label: 'French', value: 'FR' },
+  { label: 'Hungarian', value: 'HU' },
+  { label: 'Indonesian', value: 'ID' },
+  { label: 'Italian', value: 'IT' },
+  { label: 'Japanese', value: 'JA' },
+  { label: 'Korean', value: 'KO' },
+  { label: 'Lithuanian', value: 'LT' },
+  { label: 'Latvian', value: 'LV' },
+  { label: 'Norwegian Bokmål', value: 'NB' },
+  { label: 'Dutch', value: 'NL' },
+  { label: 'Polish', value: 'PL' },
+  { label: 'Portuguese (all Portuguese varieties mixed)', value: 'PT' },
+  { label: 'Romanian', value: 'RO' },
+  { label: 'Russian', value: 'RU' },
+  { label: 'Slovak', value: 'SK' },
+  { label: 'Slovenian', value: 'SL' },
+  { label: 'Swedish', value: 'SV' },
+  { label: 'Turkish', value: 'TR' },
+  { label: 'Ukrainian', value: 'UK' },
+  { label: 'Chinese', value: 'ZH' },
+];
+export const DeepLTargetLangOptions = [
+  { label: 'Arabic [1]', value: 'AR' },
+  { label: 'Bulgarian', value: 'BG' },
+  { label: 'Czech', value: 'CS' },
+  { label: 'Danish', value: 'DA' },
+  { label: 'German', value: 'DE' },
+  { label: 'Greek', value: 'EL' },
+  { label: 'English (British)', value: 'EN-GB' },
+  { label: 'English (American)', value: 'EN-US' },
+  { label: 'Spanish', value: 'ES' },
+  { label: 'Estonian', value: 'ET' },
+  { label: 'Finnish', value: 'FI' },
+  { label: 'French', value: 'FR' },
+  { label: 'Hungarian', value: 'HU' },
+  { label: 'Indonesian', value: 'ID' },
+  { label: 'Italian', value: 'IT' },
+  { label: 'Japanese', value: 'JA' },
+  { label: 'Korean', value: 'KO' },
+  { label: 'Lithuanian', value: 'LT' },
+  { label: 'Latvian', value: 'LV' },
+  { label: 'Norwegian Bokmål', value: 'NB' },
+  { label: 'Dutch', value: 'NL' },
+  { label: 'Polish', value: 'PL' },
+  { label: 'Portuguese (Brazilian)', value: 'PT-BR' },
+  {
+    label:
+      'Portuguese (all Portuguese varieties excluding Brazilian Portuguese)',
+    value: 'PT-PT',
+  },
+  { label: 'Romanian', value: 'RO' },
+  { label: 'Russian', value: 'RU' },
+  { label: 'Slovak', value: 'SK' },
+  { label: 'Slovenian', value: 'SL' },
+  { label: 'Swedish', value: 'SV' },
+  { label: 'Turkish', value: 'TR' },
+  { label: 'Ukrainian', value: 'UK' },
+  { label: 'Chinese (simplified)', value: 'ZH' },
+];

web/src/pages/flow/deepl-form/index.tsx

+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, InputNumber, Select } from 'antd';
+import { DeepLSourceLangOptions, DeepLTargetLangOptions } from '../constant';
+import { useBuildSortOptions } from '../form-hooks';
+import { IOperatorForm } from '../interface';
+
+const DeepLForm = ({ onValuesChange, form }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+  const options = useBuildSortOptions();
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 8 }}
+      wrapperCol={{ span: 16 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    >
+      <Form.Item label={t('text')} name={'text'}>
+        <InputNumber></InputNumber>
+      </Form.Item>
+      <Form.Item label={t('authKey')} name={'auth_key'}>
+        <Select options={options}></Select>
+      </Form.Item>
+      <Form.Item label={t('sourceLang')} name={'source_lang'}>
+        <Select options={DeepLSourceLangOptions}></Select>
+      </Form.Item>
+      <Form.Item label={t('targetLang')} name={'target_lang'}>
+        <Select options={DeepLTargetLangOptions}></Select>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default DeepLForm;

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

 import RewriteQuestionForm from '../rewrite-question-form';
 import WikipediaForm from '../wikipedia-form';
 
+import DeepLForm from '../deepl-form';
 import styles from './index.less';
 
 interface IProps {
   [Operator.Google]: GoogleForm,
   [Operator.Bing]: BingForm,
   [Operator.GoogleScholar]: GoogleScholarForm,
+  [Operator.DeepL]: DeepLForm,
 };
 
 const EmptyContent = () => <div>empty</div>;

web/src/pages/flow/form-hooks.ts

-import { useCallback } from 'react';
+import { useTranslate } from '@/hooks/common-hooks';
+import { useCallback, useMemo } from 'react';
 import { Operator } from './constant';
 import useGraphStore from './store';
 
 
   return { handleSelectChange };
 };
+
+export const useBuildSortOptions = () => {
+  const { t } = useTranslate('flow');
+
+  const options = useMemo(() => {
+    return ['data', 'relevance'].map((x) => ({
+      value: x,
+      label: t(x),
+    }));
+  }, [t]);
+  return options;
+};

web/src/pages/flow/google-scholar-form/index.tsx

 import { DatePicker, DatePickerProps, Form, Select, Switch } from 'antd';
 import dayjs from 'dayjs';
 import { useCallback, useMemo } from 'react';
+import { useBuildSortOptions } from '../form-hooks';
 import { IOperatorForm } from '../interface';
 
 const YearPicker = ({
 const GoogleScholarForm = ({ onValuesChange, form }: IOperatorForm) => {
   const { t } = useTranslate('flow');
 
-  const options = useMemo(() => {
-    return ['data', 'relevance'].map((x) => ({
-      value: x,
-      label: t(x),
-    }));
-  }, [t]);
+  const options = useBuildSortOptions();
 
   return (
     <Form

web/src/pages/flow/hooks.ts

   initialBeginValues,
   initialBingValues,
   initialCategorizeValues,
+  initialDeepLValues,
   initialDuckValues,
   initialGenerateValues,
   initialGoogleScholarValues,
       [Operator.Google]: initialGoogleValues,
       [Operator.Bing]: initialBingValues,
       [Operator.GoogleScholar]: initialGoogleScholarValues,
+      [Operator.DeepL]: initialDeepLValues,
     };
   }, [llmId]);