feat: Add bing and google operator #918 (#1745)

### What problem does this PR solve?

feat: Add bing and google operator #918

### Type of change


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

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

@@ -65,7 +65,7 @@ export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
   return (
     <NodePopover nodeId={id}>
       <section
-        className={classNames(styles.ragNode, {
+        className={classNames(styles.logicNode, {
           [styles.selectedNode]: selected,
         })}
         style={{

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

@@ -5,6 +5,74 @@
     -3px 0 6px -4px rgba(0, 0, 0, 0.12),
     -6px 0 16px 6px rgba(0, 0, 0, 0.05);
 
+  padding: 5px;
+  border-radius: 5px;
+  background: white;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  // align-items: center;
+  // justify-self: center;
+  justify-content: center;
+  .nodeName {
+    font-size: 10px;
+    color: black;
+  }
+  label {
+    display: block;
+    color: #777;
+    font-size: 12px;
+  }
+  .type {
+    // font-size: 12px;
+  }
+  .description {
+    font-size: 10px;
+  }
+  .bottomBox {
+    position: absolute;
+    bottom: -34px;
+    background: white;
+    padding: 2px 5px;
+    border-radius: 5px;
+    box-shadow:
+      -6px 0 12px 0 rgba(179, 177, 177, 0.08),
+      -3px 0 6px -4px rgba(0, 0, 0, 0.12),
+      -6px 0 16px 6px rgba(0, 0, 0, 0.05);
+  }
+  .categorizeAnchorPointText {
+    position: absolute;
+    top: -4px;
+    left: 8px;
+    white-space: nowrap;
+  }
+}
+
+.selectedNode {
+  border: 1px solid rgb(59, 118, 244);
+}
+
+.handle {
+  display: inline-flex;
+  text-align: center;
+  // align-items: center;
+}
+
+.jsonView {
+  word-wrap: break-word;
+  overflow: auto;
+  max-width: 300px;
+  max-height: 500px;
+}
+
+.logicNode {
+  position: relative;
+  box-shadow:
+    -6px 0 12px 0 rgba(179, 177, 177, 0.08),
+    -3px 0 6px -4px rgba(0, 0, 0, 0.12),
+    -6px 0 16px 6px rgba(0, 0, 0, 0.05);
+
   padding: 5px;
   border-radius: 5px;
   background: white;
@@ -48,19 +116,3 @@
     white-space: nowrap;
   }
 }
-.selectedNode {
-  border: 1px solid rgb(59, 118, 244);
-}
-
-.handle {
-  display: inline-flex;
-  text-align: center;
-  // align-items: center;
-}
-
-.jsonView {
-  word-wrap: break-word;
-  overflow: auto;
-  max-width: 300px;
-  max-height: 500px;
-}

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

@@ -1,7 +1,6 @@
 import { useTranslate } from '@/hooks/common-hooks';
 import { Flex } from 'antd';
 import classNames from 'classnames';
-import lowerFirst from 'lodash/lowerFirst';
 import pick from 'lodash/pick';
 import { Handle, NodeProps, Position } from 'reactflow';
 import { Operator, operatorMap } from '../../constant';
@@ -32,7 +31,9 @@ export function RagNode({
         className={classNames(styles.ragNode, {
           [styles.selectedNode]: selected,
         })}
-        style={pick(style, ['backgroundColor', 'width', 'height', 'color'])}
+        style={{
+          ...pick(style, ['backgroundColor', 'color']),
+        }}
       >
         <Handle
           id="c"
@@ -54,23 +55,18 @@ export function RagNode({
           vertical
           align="center"
           justify={'space-around'}
-          gap={ZeroGapOperators.some((x) => x === data.label) ? 0 : 6}
+          // gap={ZeroGapOperators.some((x) => x === data.label) ? 0 : 6}
         >
           <Flex flex={1} justify="center" align="center">
-            <OperatorIcon
-              name={data.label as Operator}
-              fontSize={style?.iconFontSize ?? 24}
-              width={style?.iconWidth}
-            ></OperatorIcon>
+            <label htmlFor=""> </label>
           </Flex>
 
           <Flex flex={1}>
-            <span
-              className={styles.type}
-              style={{ fontSize: style?.fontSize ?? 14 }}
-            >
-              {t(lowerFirst(data.label))}
-            </span>
+            <OperatorIcon
+              name={data.label as Operator}
+              fontSize={style?.iconFontSize ?? 16}
+              width={style?.iconWidth}
+            ></OperatorIcon>
           </Flex>
           <Flex flex={1}>
             <NodeDropdown

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

@@ -0,0 +1,89 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { Flex } from 'antd';
+import classNames from 'classnames';
+import lowerFirst from 'lodash/lowerFirst';
+import pick from 'lodash/pick';
+import { Handle, NodeProps, Position } from 'reactflow';
+import { Operator, operatorMap } from '../../constant';
+import { NodeData } from '../../interface';
+import OperatorIcon from '../../operator-icon';
+import NodeDropdown from './dropdown';
+import styles from './index.less';
+import NodePopover from './popover';
+
+const ZeroGapOperators = [
+  Operator.RewriteQuestion,
+  Operator.KeywordExtract,
+  Operator.ArXiv,
+];
+
+export function LogicNode({
+  id,
+  data,
+  isConnectable = true,
+  selected,
+}: NodeProps<NodeData>) {
+  const style = operatorMap[data.label as Operator];
+  const { t } = useTranslate('flow');
+
+  return (
+    <NodePopover nodeId={id}>
+      <section
+        className={classNames(styles.logicNode, {
+          [styles.selectedNode]: selected,
+        })}
+        style={pick(style, ['backgroundColor', 'width', 'height', 'color'])}
+      >
+        <Handle
+          id="c"
+          type="source"
+          position={Position.Left}
+          isConnectable={isConnectable}
+          className={styles.handle}
+        ></Handle>
+        <Handle type="source" position={Position.Top} id="d" isConnectable />
+        <Handle
+          type="source"
+          position={Position.Right}
+          isConnectable={isConnectable}
+          className={styles.handle}
+          id="b"
+        ></Handle>
+        <Handle type="source" position={Position.Bottom} id="a" isConnectable />
+        <Flex
+          vertical
+          align="center"
+          justify={'space-around'}
+          gap={ZeroGapOperators.some((x) => x === data.label) ? 0 : 6}
+        >
+          <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}
+              iconFontColor={style?.moreIconColor}
+            ></NodeDropdown>
+          </Flex>
+        </Flex>
+
+        <section className={styles.bottomBox}>
+          <div className={styles.nodeName}>{data.name}</div>
+        </section>
+      </section>
+    </NodePopover>
+  );
+}

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

@@ -19,7 +19,7 @@ export function RelevantNode({ id, data, selected }: NodeProps<NodeData>) {
   return (
     <NodePopover nodeId={id}>
       <section
-        className={classNames(styles.ragNode, {
+        className={classNames(styles.logicNode, {
           [styles.selectedNode]: selected,
         })}
         style={pick(style, ['backgroundColor', 'width', 'height', 'color'])}