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/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>