feat: add duckduckgo icon #918 (#1391)

### What problem does this PR solve?
feat: add duckduckgo icon #918

### Type of change


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

web/src/pages/flow/constant.tsx

@@ -1,3 +1,6 @@
+import { ReactComponent as BaiduIcon } from '@/assets/svg/baidu.svg';
+import { ReactComponent as DuckIcon } from '@/assets/svg/duck.svg';
+import { ReactComponent as KeywordIcon } from '@/assets/svg/keyword.svg';
 import { variableEnabledFieldMap } from '@/constants/chat';
 import {
   BranchesOutlined,
@@ -19,6 +22,9 @@ export enum Operator {
   Message = 'Message',
   Relevant = 'Relevant',
   RewriteQuestion = 'RewriteQuestion',
+  KeywordExtract = 'KeywordExtract',
+  Baidu = 'Baidu',
+  DuckDuckGo = 'DuckDuckGo',
 }
 
 export const operatorIconMap = {
@@ -30,6 +36,9 @@ export const operatorIconMap = {
   [Operator.Message]: MessageOutlined,
   [Operator.Relevant]: BranchesOutlined,
   [Operator.RewriteQuestion]: FormOutlined,
+  [Operator.KeywordExtract]: KeywordIcon,
+  [Operator.DuckDuckGo]: DuckIcon,
+  [Operator.Baidu]: BaiduIcon,
 };
 
 export const operatorMap = {
@@ -116,6 +125,18 @@ export const componentMenuList = [
     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,
+  // },
 ];
 
 export const initialRetrievalValues = {
@@ -200,11 +221,21 @@ export const CategorizeAnchorPointPositions = [
 // key is the source of the edge, value is the target of the edge
 // no connection lines are allowed between key and value
 export const RestrictedUpstreamMap = {
-  [Operator.Begin]: [],
-  [Operator.Categorize]: [Operator.Begin, Operator.Categorize, Operator.Answer],
-  [Operator.Answer]: [Operator.Begin, Operator.Answer, Operator.Message],
-  [Operator.Retrieval]: [Operator.Begin, Operator.Relevant],
-  [Operator.Generate]: [Operator.Begin],
+  [Operator.Begin]: [Operator.Relevant],
+  [Operator.Categorize]: [
+    Operator.Begin,
+    Operator.Categorize,
+    Operator.Answer,
+    Operator.Relevant,
+  ],
+  [Operator.Answer]: [
+    Operator.Begin,
+    Operator.Answer,
+    Operator.Message,
+    Operator.Relevant,
+  ],
+  [Operator.Retrieval]: [Operator.Begin, Operator.Retrieval],
+  [Operator.Generate]: [Operator.Begin, Operator.Relevant],
   [Operator.Message]: [
     Operator.Begin,
     Operator.Message,
@@ -212,14 +243,16 @@ export const RestrictedUpstreamMap = {
     Operator.Retrieval,
     Operator.RewriteQuestion,
     Operator.Categorize,
+    Operator.Relevant,
   ],
-  [Operator.Relevant]: [Operator.Begin, Operator.Answer],
+  [Operator.Relevant]: [Operator.Begin, Operator.Answer, Operator.Relevant],
   [Operator.RewriteQuestion]: [
     Operator.Begin,
     Operator.Message,
     Operator.Generate,
     Operator.RewriteQuestion,
     Operator.Categorize,
+    Operator.Relevant,
   ],
 };
 

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

@@ -1,8 +1,8 @@
 import { useTranslate } from '@/hooks/commonHooks';
-import { Card, Flex, Layout, Space, Tooltip } from 'antd';
+import { Card, Divider, Flex, Layout, Tooltip } from 'antd';
 import classNames from 'classnames';
 import lowerFirst from 'lodash/lowerFirst';
-import { componentMenuList } from '../constant';
+import { Operator, componentMenuList } from '../constant';
 import { useHandleDrag } from '../hooks';
 import OperatorIcon from '../operator-icon';
 import styles from './index.less';
@@ -29,24 +29,35 @@ const FlowSide = ({ setCollapsed, collapsed }: IProps) => {
       <Flex vertical gap={10} className={styles.siderContent}>
         {componentMenuList.map((x) => {
           return (
-            <Card
-              key={x.name}
-              hoverable
-              draggable
-              className={classNames(styles.operatorCard)}
-              onDragStart={handleDragStart(x.name)}
-            >
-              <Flex justify="space-between" align="center">
-                <Space size={15}>
+            <>
+              {x.name === Operator.DuckDuckGo && (
+                <Divider
+                  style={{
+                    marginTop: 10,
+                    marginBottom: 10,
+                    padding: 0,
+                    borderBlockColor: '#b4afaf',
+                    borderStyle: 'dotted',
+                  }}
+                ></Divider>
+              )}
+              <Card
+                key={x.name}
+                hoverable
+                draggable
+                className={classNames(styles.operatorCard)}
+                onDragStart={handleDragStart(x.name)}
+              >
+                <Flex align="center" gap={15}>
                   <OperatorIcon name={x.name}></OperatorIcon>
                   <section>
                     <Tooltip title={t(`${lowerFirst(x.name)}Description`)}>
                       <b>{x.name}</b>
                     </Tooltip>
                   </section>
-                </Space>
-              </Flex>
-            </Card>
+                </Flex>
+              </Card>
+            </>
           );
         })}
       </Flex>

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

@@ -1,4 +1,6 @@
 .icon {
   color: rgb(59, 118, 244);
   font-size: 24px;
+  max-width: 24px;
+  max-height: 24px;
 }