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/bing-form/index.tsx

@@ -0,0 +1,41 @@
+import TopNItem from '@/components/top-n-item';
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Input, Select } from 'antd';
+import { useMemo } from 'react';
+import { BingCountryOptions, BingLanguageOptions } from '../constant';
+import { IOperatorForm } from '../interface';
+
+const BingForm = ({ onValuesChange, form }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+
+  const options = useMemo(() => {
+    return ['Webpages', 'News'].map((x) => ({ label: x, value: x }));
+  }, []);
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    >
+      <TopNItem initialValue={10}></TopNItem>
+      <Form.Item label={t('channel')} name={'channel'}>
+        <Select options={options}></Select>
+      </Form.Item>
+      <Form.Item label={t('apiKey')} name={'api_key'}>
+        <Input></Input>
+      </Form.Item>
+      <Form.Item label={t('country')} name={'country'}>
+        <Select options={BingCountryOptions}></Select>
+      </Form.Item>
+      <Form.Item label={t('language')} name={'language'}>
+        <Select options={BingLanguageOptions}></Select>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default BingForm;

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

@@ -24,6 +24,7 @@ import ChatDrawer from '../chat/drawer';
 import styles from './index.less';
 import { BeginNode } from './node/begin-node';
 import { CategorizeNode } from './node/categorize-node';
+import { LogicNode } from './node/logic-node';
 import { RelevantNode } from './node/relevant-node';
 
 const nodeTypes = {
@@ -31,6 +32,7 @@ const nodeTypes = {
   categorizeNode: CategorizeNode,
   beginNode: BeginNode,
   relevantNode: RelevantNode,
+  logicNode: LogicNode,
 };
 
 const edgeTypes = {

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'])}

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

@@ -7,10 +7,12 @@ import AnswerForm from '../answer-form';
 import ArXivForm from '../arxiv-form';
 import BaiduForm from '../baidu-form';
 import BeginForm from '../begin-form';
+import BingForm from '../bing-form';
 import CategorizeForm from '../categorize-form';
 import { Operator } from '../constant';
 import DuckDuckGoForm from '../duckduckgo-form';
 import GenerateForm from '../generate-form';
+import GoogleForm from '../google-form';
 import { useHandleFormValuesChange, useHandleNodeNameChange } from '../hooks';
 import KeywordExtractForm from '../keyword-extract-form';
 import MessageForm from '../message-form';
@@ -42,6 +44,8 @@ const FormMap = {
   [Operator.Wikipedia]: WikipediaForm,
   [Operator.PubMed]: PubMedForm,
   [Operator.ArXiv]: ArXivForm,
+  [Operator.Google]: GoogleForm,
+  [Operator.Bing]: BingForm,
 };
 
 const EmptyContent = () => <div>empty</div>;

web/src/pages/flow/google-form/index.tsx

@@ -0,0 +1,33 @@
+import TopNItem from '@/components/top-n-item';
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Input, Select } from 'antd';
+import { GoogleCountryOptions, GoogleLanguageOptions } from '../constant';
+import { IOperatorForm } from '../interface';
+
+const GoogleForm = ({ onValuesChange, form }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    >
+      <TopNItem initialValue={10}></TopNItem>
+      <Form.Item label={t('apiKey')} name={'api_key'}>
+        <Input></Input>
+      </Form.Item>
+      <Form.Item label={t('country')} name={'country'}>
+        <Select options={GoogleCountryOptions}></Select>
+      </Form.Item>
+      <Form.Item label={t('language')} name={'language'}>
+        <Select options={GoogleLanguageOptions}></Select>
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default GoogleForm;

web/src/pages/flow/hooks.ts

@@ -30,12 +30,14 @@ import {
   NodeMap,
   Operator,
   RestrictedUpstreamMap,
-  initialArxivValues,
+  initialArXivValues,
   initialBaiduValues,
   initialBeginValues,
+  initialBingValues,
   initialCategorizeValues,
   initialDuckValues,
   initialGenerateValues,
+  initialGoogleValues,
   initialKeywordExtractValues,
   initialMessageValues,
   initialPubMedValues,
@@ -92,7 +94,9 @@ export const useInitializeOperatorParams = () => {
       [Operator.Baidu]: initialBaiduValues,
       [Operator.Wikipedia]: initialWikipediaValues,
       [Operator.PubMed]: initialPubMedValues,
-      [Operator.ArXiv]: initialArxivValues,
+      [Operator.ArXiv]: initialArXivValues,
+      [Operator.Google]: initialGoogleValues,
+      [Operator.Bing]: initialBingValues,
     };
   }, [llmId]);