feat: Add component Concentrator #1739

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]);