feat: Add component Concentrator #1739 (#2604)

### What problem does this PR solve?

feat: Add component Concentrator #1739
### Type of change

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

web/src/assets/svg/concentrator.svg

@@ -0,0 +1,7 @@
+<svg t="1727330687293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4353"
+    width="200" height="200">
+    <path d="M254.350222 268.970667v108.259555h185.571556V268.970667H254.350222z" p-id="4354" fill="#3b76f4"></path>
+    <path
+        d="M187.904 106.666667a85.333333 85.333333 0 0 0-85.333333 85.333333v411.192889a85.333333 85.333333 0 0 0 85.333333 85.333333h43.434667v95.317334a69.006222 69.006222 0 1 0 49.123555 0v-95.288889h121.6v95.288889a69.006222 69.006222 0 1 0 49.152 0v-95.288889h121.6v95.288889a69.006222 69.006222 0 1 0 49.123556 0v-95.288889h121.628444v95.288889a69.006222 69.006222 0 1 0 49.123556 0v-95.288889h43.406222a85.333333 85.333333 0 0 0 85.333333-85.333334V192a85.333333 85.333333 0 0 0-85.333333-85.333333H187.904z m25.884444 430.222222h596.394667a40.533333 40.533333 0 0 1 0 81.066667H213.816889a40.533333 40.533333 0 0 1 0-81.066667z m0-348.984889h266.666667c22.385778 0 40.533333 18.147556 40.533333 40.533333v189.326223c0 22.385778-18.147556 40.533333-40.533333 40.533333H213.816889a40.533333 40.533333 0 0 1-40.533333-40.533333V228.437333c0-22.385778 18.147556-40.533333 40.533333-40.533333z m439.381334 0c22.385778 0 40.533333 18.147556 40.533333 40.533333v189.326223a40.533333 40.533333 0 0 1-81.066667 0V228.437333c0-22.385778 18.119111-40.533333 40.533334-40.533333z m116.48 40.533333a40.533333 40.533333 0 0 1 81.066666 0v189.326223a40.533333 40.533333 0 0 1-81.066666 0V228.437333z"
+        p-id="4355" fill="#3b76f4"></path>
+</svg>

web/src/locales/en.ts

@@ -682,7 +682,7 @@ The above is the content you need to summarize.`,
       createFromTemplates: 'Create from templates',
       retrieval: 'Retrieval',
       generate: 'Generate',
-      answer: 'Answer',
+      answer: 'Interact',
       categorize: 'Categorize',
       relevant: 'Relevant',
       rewriteQuestion: 'Rewrite',
@@ -964,6 +964,9 @@ The above is the content you need to summarize.`,
         symbols: 'Commodity List',
         quotes: ' Latest Market Quotes',
       },
+      concentrator: 'Concentrator',
+      concentratorDescription:
+        'This component can be used to connect multiple downstream components. It receives input from the upstream component and passes it to each downstream component.',
     },
     footer: {
       profile: 'All rights reserved @ React',

web/src/locales/zh-traditional.ts

@@ -916,6 +916,9 @@ export default {
         symbols: '品種列表',
         quotes: '最新行情',
       },
+      concentrator: '集線器',
+      concentratorDescription:
+        '此組件可用於連接多個下游組件。它接收來自上游組件的輸入並將其傳遞給每個下游組件。 ',
     },
     footer: {
       profile: '“保留所有權利 @ react”',

web/src/locales/zh.ts

@@ -934,6 +934,9 @@ export default {
         symbols: '品种列表',
         quotes: '最新行情',
       },
+      concentrator: '集线器',
+      concentratorDescription:
+        '该组件可用于连接多个下游组件。它接收来自上游组件的输入并将其传递给每个下游组件。',
     },
     footer: {
       profile: 'All rights reserved @ React',

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

@@ -0,0 +1,17 @@
+import { Form } from 'antd';
+import { IOperatorForm } from '../interface';
+
+const ConcentratorForm = ({ onValuesChange, form }: IOperatorForm) => {
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 8 }}
+      wrapperCol={{ span: 16 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    ></Form>
+  );
+};
+
+export default ConcentratorForm;

web/src/pages/flow/constant.tsx

@@ -3,6 +3,7 @@ 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 ConcentratorIcon } from '@/assets/svg/concentrator.svg';
 import { ReactComponent as DeepLIcon } from '@/assets/svg/deepl.svg';
 import { ReactComponent as DuckIcon } from '@/assets/svg/duck.svg';
 import { ReactComponent as ExeSqlIcon } from '@/assets/svg/exesql.svg';
@@ -67,6 +68,7 @@ export enum Operator {
   AkShare = 'AkShare',
   YahooFinance = 'YahooFinance',
   Jin10 = 'Jin10',
+  Concentrator = 'Concentrator',
 }
 
 export const operatorIconMap = {
@@ -97,6 +99,7 @@ export const operatorIconMap = {
   [Operator.AkShare]: AkShareIcon,
   [Operator.YahooFinance]: YahooFinanceIcon,
   [Operator.Jin10]: Jin10Icon,
+  [Operator.Concentrator]: ConcentratorIcon,
 };
 
 export const operatorMap: Record<
@@ -210,6 +213,14 @@ export const operatorMap: Record<
   [Operator.AkShare]: { backgroundColor: '#8085f5' },
   [Operator.YahooFinance]: { backgroundColor: '#b474ff' },
   [Operator.Jin10]: { backgroundColor: '#a0b9f8' },
+  [Operator.Concentrator]: {
+    backgroundColor: '#32d2a3',
+    color: 'white',
+    width: 70,
+    height: 70,
+    fontSize: 10,
+    iconFontSize: 16,
+  },
 };
 
 export const componentMenuList = [
@@ -240,6 +251,9 @@ export const componentMenuList = [
   {
     name: Operator.Switch,
   },
+  {
+    name: Operator.Concentrator,
+  },
   {
     name: Operator.DuckDuckGo,
   },
@@ -451,6 +465,8 @@ export const initialJin10Values = {
   filter: '',
 };
 
+export const initialConcentratorValues = {};
+
 export const CategorizeAnchorPointPositions = [
   { top: 1, right: 34 },
   { top: 8, right: 18 },
@@ -525,6 +541,7 @@ export const RestrictedUpstreamMap = {
   [Operator.AkShare]: [Operator.Begin],
   [Operator.YahooFinance]: [Operator.Begin],
   [Operator.Jin10]: [Operator.Begin],
+  [Operator.Concentrator]: [Operator.Begin],
 };
 
 export const NodeMap = {
@@ -551,6 +568,7 @@ export const NodeMap = {
   [Operator.QWeather]: 'ragNode',
   [Operator.ExeSQL]: 'ragNode',
   [Operator.Switch]: 'categorizeNode',
+  [Operator.Concentrator]: 'logicNode',
   [Operator.WenCai]: 'ragNode',
   [Operator.AkShare]: 'ragNode',
   [Operator.YahooFinance]: 'ragNode',

web/src/pages/flow/hooks.ts

@@ -38,6 +38,7 @@ import {
   initialBeginValues,
   initialBingValues,
   initialCategorizeValues,
+  initialConcentratorValues,
   initialDeepLValues,
   initialDuckValues,
   initialExeSqlValues,
@@ -121,6 +122,7 @@ export const useInitializeOperatorParams = () => {
       [Operator.AkShare]: initialAkShareValues,
       [Operator.YahooFinance]: initialYahooFinanceValues,
       [Operator.Jin10]: initialJin10Values,
+      [Operator.Concentrator]: initialConcentratorValues,
     };
   }, [llmId]);