feat: add KeywordExtractForm and BaiduForm and DuckDuckGoForm #918 (#1477)

### What problem does this PR solve?
feat: add KeywordExtractForm and BaiduForm and DuckDuckGoForm #918


### Type of change


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

web/src/locales/en.ts

@@ -598,6 +598,15 @@ The above is the content you need to summarize.`,
       addItem: 'Add Item',
       nameRequiredMsg: 'Name is required',
       nameRepeatedMsg: 'The name cannot be repeated',
+      keywordExtract: 'KeywordExtract',
+      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.`,
+      duckDuckGo: 'DuckDuckGo',
+      duckDuckGoDescription:
+        'This component is used to get search result from www.duckduckgo.com. Typically, it performs as a supplement to knowledgebases. Top N specifies the number of search results you need to adopt.',
+      channel: 'Channel',
+      channelTip: 'channelTip',
     },
     footer: {
       profile: 'All rights reserved @ React',

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

@@ -0,0 +1,20 @@
+import TopNItem from '@/components/top-n-item';
+import { Form } from 'antd';
+import { IOperatorForm } from '../interface';
+
+const BaiduForm = ({ onValuesChange, form }: IOperatorForm) => {
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    >
+      <TopNItem></TopNItem>
+    </Form>
+  );
+};
+
+export default BaiduForm;

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

@@ -1,5 +1,4 @@
 import { useTranslate } from '@/hooks/commonHooks';
-import type { FormProps } from 'antd';
 import { Form, Input } from 'antd';
 import { IOperatorForm } from '../interface';
 
@@ -7,14 +6,6 @@ type FieldType = {
   prologue?: string;
 };
 
-const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
-  console.log('Success:', values);
-};
-
-const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
-  console.log('Failed:', errorInfo);
-};
-
 const BeginForm = ({ onValuesChange, form }: IOperatorForm) => {
   const { t } = useTranslate('chat');
 
@@ -23,10 +14,6 @@ const BeginForm = ({ onValuesChange, form }: IOperatorForm) => {
       name="basic"
       labelCol={{ span: 8 }}
       wrapperCol={{ span: 16 }}
-      style={{ maxWidth: 600 }}
-      initialValues={{ remember: true }}
-      onFinish={onFinish}
-      onFinishFailed={onFinishFailed}
       onValuesChange={onValuesChange}
       autoComplete="off"
       form={form}

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

@@ -52,11 +52,11 @@ export function RagNode({
         >
           <OperatorIcon
             name={data.label as Operator}
-            fontSize={style['iconFontSize'] ?? 24}
+            fontSize={style?.iconFontSize ?? 24}
           ></OperatorIcon>
           <span
             className={styles.type}
-            style={{ fontSize: style.fontSize ?? 14 }}
+            style={{ fontSize: style?.fontSize ?? 14 }}
           >
             {t(lowerFirst(data.label))}
           </span>

web/src/pages/flow/constant.tsx

@@ -125,18 +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,
-  // },
+  {
+    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 = {

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

@@ -0,0 +1,30 @@
+import TopNItem from '@/components/top-n-item';
+import { useTranslate } from '@/hooks/commonHooks';
+import { Form, Input } from 'antd';
+import { IOperatorForm } from '../interface';
+
+const DuckDuckGoForm = ({ onValuesChange, form }: IOperatorForm) => {
+  const { t } = useTranslate('flow');
+
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    >
+      <TopNItem></TopNItem>
+      <Form.Item
+        label={t('channel')}
+        name={'channel'}
+        tooltip={t('channelTip')}
+      >
+        <Input.TextArea rows={5} />
+      </Form.Item>
+    </Form>
+  );
+};
+
+export default DuckDuckGoForm;

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

@@ -4,11 +4,14 @@ import { Drawer, Flex, Form, Input } from 'antd';
 import { useEffect } from 'react';
 import { Node } from 'reactflow';
 import AnswerForm from '../answer-form';
+import BaiduForm from '../baidu-form';
 import BeginForm from '../begin-form';
 import CategorizeForm from '../categorize-form';
 import { Operator } from '../constant';
+import DuckDuckGoForm from '../duckduckgo-form';
 import GenerateForm from '../generate-form';
 import { useHandleFormValuesChange, useHandleNodeNameChange } from '../hooks';
+import KeywordExtractForm from '../keyword-extract-form';
 import MessageForm from '../message-form';
 import OperatorIcon from '../operator-icon';
 import RelevantForm from '../relevant-form';
@@ -30,6 +33,9 @@ const FormMap = {
   [Operator.Message]: MessageForm,
   [Operator.Relevant]: RelevantForm,
   [Operator.RewriteQuestion]: RewriteQuestionForm,
+  [Operator.Baidu]: BaiduForm,
+  [Operator.DuckDuckGo]: DuckDuckGoForm,
+  [Operator.KeywordExtract]: KeywordExtractForm,
 };
 
 const EmptyContent = () => <div>empty</div>;

web/src/pages/flow/keyword-extract-form/index.tsx

@@ -0,0 +1,20 @@
+import TopNItem from '@/components/top-n-item';
+import { Form } from 'antd';
+import { IOperatorForm } from '../interface';
+
+const KeywordExtractForm = ({ onValuesChange, form }: IOperatorForm) => {
+  return (
+    <Form
+      name="basic"
+      labelCol={{ span: 6 }}
+      wrapperCol={{ span: 18 }}
+      autoComplete="off"
+      form={form}
+      onValuesChange={onValuesChange}
+    >
+      <TopNItem></TopNItem>
+    </Form>
+  );
+};
+
+export default KeywordExtractForm;

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

@@ -27,7 +27,6 @@ const MessageForm = ({ onValuesChange, form }: IOperatorForm) => {
     <Form
       name="basic"
       {...formItemLayoutWithOutLabel}
-      initialValues={{ remember: true }}
       onValuesChange={onValuesChange}
       autoComplete="off"
       form={form}