feat: modify DuckDuckGo's style #918 (#1485)

### What problem does this PR solve?

feat: modify DuckDuckGo's style #918
### Type of change


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

web/src/locales/en.ts

@@ -598,7 +598,7 @@ The above is the content you need to summarize.`,
       addItem: 'Add Item',
       nameRequiredMsg: 'Name is required',
       nameRepeatedMsg: 'The name cannot be repeated',
-      keywordExtract: 'KeywordExtract',
+      keywordExtract: 'Keyword',
       keywordExtractDescription: `This component is used to extract keywords from user's question. Top N specifies the number of keywords you need to extract.`,
       baidu: 'Baidu',
       baiduDescription: `This component is used to get search result from www.baidu.com. Typically, it performs as a supplement to knowledgebases. Top N specifies the number of search results you need to adopt.`,

web/src/pages/flow/canvas/node/index.tsx

@@ -11,6 +11,8 @@ import NodeDropdown from './dropdown';
 import styles from './index.less';
 import NodePopover from './popover';
 
+const ZeroGapOperators = [Operator.RewriteQuestion, Operator.KeywordExtract];
+
 export function RagNode({
   id,
   data,
@@ -47,20 +49,29 @@ export function RagNode({
         <Flex
           vertical
           align="center"
-          justify={'center'}
-          gap={data.label === Operator.RewriteQuestion ? 0 : 6}
+          justify={'space-around'}
+          gap={ZeroGapOperators.some((x) => x === data.label) ? 0 : 6}
         >
-          <OperatorIcon
-            name={data.label as Operator}
-            fontSize={style?.iconFontSize ?? 24}
-          ></OperatorIcon>
-          <span
-            className={styles.type}
-            style={{ fontSize: style?.fontSize ?? 14 }}
-          >
-            {t(lowerFirst(data.label))}
-          </span>
-          <NodeDropdown id={id}></NodeDropdown>
+          <Flex flex={1} justify="center" align="center">
+            <OperatorIcon
+              name={data.label as Operator}
+              fontSize={style?.iconFontSize ?? 24}
+              width={style?.iconWidth}
+            ></OperatorIcon>
+          </Flex>
+
+          <Flex flex={1}>
+            <span
+              className={styles.type}
+              style={{ fontSize: style?.fontSize ?? 14 }}
+            >
+              {t(lowerFirst(data.label))}
+            </span>
+          </Flex>
+          <Flex flex={1}>
+            {' '}
+            <NodeDropdown id={id}></NodeDropdown>
+          </Flex>
         </Flex>
 
         <section className={styles.bottomBox}>

web/src/pages/flow/canvas/node/relevant-node.tsx

@@ -47,18 +47,24 @@ export function RelevantNode({ id, data, selected }: NodeProps<NodeData>) {
         ></Handle>
         <CategorizeHandle top={20} right={6} text={'yes'}></CategorizeHandle>
         <CategorizeHandle top={80} right={6} text={'no'}></CategorizeHandle>
-        <Flex vertical align="center" justify="center">
-          <OperatorIcon
-            name={data.label as Operator}
-            fontSize={style.iconFontSize}
-          ></OperatorIcon>
-          <span
-            className={styles.type}
-            style={{ fontSize: style.fontSize ?? 14 }}
-          >
-            {t(lowerFirst(data.label))}
-          </span>
-          <NodeDropdown id={id}></NodeDropdown>
+        <Flex vertical align="center" justify="center" gap={0}>
+          <Flex flex={1}>
+            <OperatorIcon
+              name={data.label as Operator}
+              fontSize={style.iconFontSize}
+            ></OperatorIcon>
+          </Flex>
+          <Flex flex={1}>
+            <span
+              className={styles.type}
+              style={{ fontSize: style.fontSize ?? 14 }}
+            >
+              {t(lowerFirst(data.label))}
+            </span>
+          </Flex>
+          <Flex flex={1}>
+            <NodeDropdown id={id}></NodeDropdown>
+          </Flex>
         </Flex>
         <section className={styles.bottomBox}>
           <div className={styles.nodeName}>{data.name}</div>

web/src/pages/flow/constant.tsx

@@ -43,12 +43,10 @@ export const operatorIconMap = {
 
 export const operatorMap = {
   [Operator.Retrieval]: {
-    description: 'This is where the flow begin',
     backgroundColor: '#cad6e0',
     color: '#385974',
   },
   [Operator.Generate]: {
-    description: 'Generate description',
     backgroundColor: '#ebd6d6',
     width: 150,
     height: 150,
@@ -57,27 +55,21 @@ export const operatorMap = {
     color: '#996464',
   },
   [Operator.Answer]: {
-    description:
-      'This component is used as an interface between bot and human. It receives input of user and display the result of the computation of the bot.',
     backgroundColor: '#f4816d',
     color: 'white',
   },
   [Operator.Begin]: {
-    description: 'Begin description',
     backgroundColor: '#4f51d6',
   },
   [Operator.Categorize]: {
-    description: 'Categorize description',
     backgroundColor: '#ffebcd',
     color: '#cc8a26',
   },
   [Operator.Message]: {
-    description: 'Message description',
     backgroundColor: '#c5ddc7',
     color: 'green',
   },
   [Operator.Relevant]: {
-    description: 'BranchesOutlined description',
     backgroundColor: '#9fd94d',
     color: 'white',
     width: 70,
@@ -86,7 +78,6 @@ export const operatorMap = {
     iconFontSize: 16,
   },
   [Operator.RewriteQuestion]: {
-    description: 'RewriteQuestion description',
     backgroundColor: '#f8c7f8',
     color: 'white',
     width: 70,
@@ -94,48 +85,52 @@ export const operatorMap = {
     fontSize: 12,
     iconFontSize: 16,
   },
+  [Operator.KeywordExtract]: {
+    width: 70,
+    height: 70,
+    backgroundColor: '#0f0e0f',
+    color: '#e1dcdc',
+    fontSize: 12,
+    iconWidth: 16,
+    // iconFontSize: 16,
+  },
+  [Operator.DuckDuckGo]: {
+    backgroundColor: '#e7e389',
+    color: '#aea00c',
+  },
+  [Operator.Baidu]: {},
 };
 
 export const componentMenuList = [
   {
     name: Operator.Retrieval,
-    description: operatorMap[Operator.Retrieval].description,
   },
   {
     name: Operator.Generate,
-    description: operatorMap[Operator.Generate].description,
   },
   {
     name: Operator.Answer,
-    description: operatorMap[Operator.Answer].description,
   },
   {
     name: Operator.Categorize,
-    description: operatorMap[Operator.Categorize].description,
   },
   {
     name: Operator.Message,
-    description: operatorMap[Operator.Message].description,
   },
   {
     name: Operator.Relevant,
-    description: operatorMap[Operator.Relevant].description,
   },
   {
     name: Operator.RewriteQuestion,
-    description: operatorMap[Operator.RewriteQuestion].description,
   },
   {
     name: Operator.KeywordExtract,
-    description: operatorMap[Operator.Message].description,
   },
   {
     name: Operator.DuckDuckGo,
-    description: operatorMap[Operator.Relevant].description,
   },
   {
     name: Operator.Baidu,
-    description: operatorMap[Operator.RewriteQuestion].description,
   },
 ];
 
@@ -254,9 +249,13 @@ export const RestrictedUpstreamMap = {
     Operator.Categorize,
     Operator.Relevant,
   ],
-  [Operator.KeywordExtract]: [Operator.Begin],
-  [Operator.Baidu]: [Operator.Begin],
-  [Operator.DuckDuckGo]: [Operator.Begin],
+  [Operator.KeywordExtract]: [
+    Operator.Begin,
+    Operator.Message,
+    Operator.Relevant,
+  ],
+  [Operator.Baidu]: [Operator.Begin, Operator.Retrieval],
+  [Operator.DuckDuckGo]: [Operator.Begin, Operator.Retrieval],
 };
 
 export const NodeMap = {
@@ -268,4 +267,7 @@ export const NodeMap = {
   [Operator.Message]: 'ragNode',
   [Operator.Relevant]: 'relevantNode',
   [Operator.RewriteQuestion]: 'ragNode',
+  [Operator.KeywordExtract]: 'ragNode',
+  [Operator.DuckDuckGo]: 'ragNode',
+  [Operator.Baidu]: 'ragNode',
 };

web/src/pages/flow/operator-icon/index.tsx

@@ -6,11 +6,14 @@ import styles from './index.less';
 interface IProps {
   name: Operator;
   fontSize?: number;
+  width?: number;
 }
 
-const OperatorIcon = ({ name, fontSize }: IProps) => {
+const OperatorIcon = ({ name, fontSize, width }: IProps) => {
   const Icon = operatorIconMap[name] || React.Fragment;
-  return <Icon className={styles.icon} style={{ fontSize }}></Icon>;
+  return (
+    <Icon className={styles.icon} style={{ fontSize }} width={width}></Icon>
+  );
 };
 
 export default OperatorIcon;