Feat: Why can't Retrieval component support internet web search. #5973 (#5978)

### What problem does this PR solve?

Feat: Why can't Retrieval component support internet web search. #5973

### Type of change


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

web/src/components/tavily-item.tsx

@@ -0,0 +1,25 @@
+import { useTranslate } from '@/hooks/common-hooks';
+import { Form, Input, Typography } from 'antd';
+
+interface IProps {
+  name?: string | string[];
+}
+
+export function TavilyItem({
+  name = ['prompt_config', 'tavily_api_key'],
+}: IProps) {
+  const { t } = useTranslate('chat');
+
+  return (
+    <Form.Item label={'Tavily API Key'} tooltip={t('tavilyApiKeyTip')}>
+      <div className="flex flex-col gap-1">
+        <Form.Item name={name} noStyle>
+          <Input.Password placeholder={t('tavilyApiKeyMessage')} />
+        </Form.Item>
+        <Typography.Link href="https://app.tavily.com/home" target={'_blank'}>
+          {t('tavilyApiKeyHelp')}
+        </Typography.Link>
+      </div>
+    </Form.Item>
+  );
+}

web/src/components/use-knowledge-graph-item.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { SwitchFormField } from './switch-fom-field';
 
 type IProps = {
-  filedName: string[];
+  filedName: string[] | string;
 };
 
 export function UseKnowledgeGraphItem({ filedName }: IProps) {

web/src/pages/chat/chat-configuration-modal/assistant-setting.tsx

@@ -1,8 +1,9 @@
 import KnowledgeBaseItem from '@/components/knowledge-base-item';
+import { TavilyItem } from '@/components/tavily-item';
 import { useTranslate } from '@/hooks/common-hooks';
 import { useFetchTenantInfo } from '@/hooks/user-setting-hooks';
 import { PlusOutlined } from '@ant-design/icons';
-import { Form, Input, message, Select, Switch, Typography, Upload } from 'antd';
+import { Form, Input, message, Select, Switch, Upload } from 'antd';
 import classNames from 'classnames';
 import { useCallback } from 'react';
 import { ISegmentedContentProps } from '../interface';
@@ -147,16 +148,7 @@ const AssistantSetting = ({
       >
         <Switch onChange={handleTtsChange} />
       </Form.Item>
-      <Form.Item label={'Tavily API Key'} tooltip={t('tavilyApiKeyTip')}>
-        <div className="flex flex-col gap-1">
-          <Form.Item name={['prompt_config', 'tavily_api_key']} noStyle>
-            <Input.Password placeholder={t('tavilyApiKeyMessage')} />
-          </Form.Item>
-          <Typography.Link href="https://app.tavily.com/home" target={'_blank'}>
-            {t('tavilyApiKeyHelp')}
-          </Typography.Link>
-        </div>
-      </Form.Item>
+      <TavilyItem></TavilyItem>
       <KnowledgeBaseItem
         required={false}
         onChange={handleChange}

web/src/pages/flow/constant.tsx

@@ -397,6 +397,7 @@ export const initialRetrievalValues = {
   similarity_threshold: 0.2,
   keywords_similarity_weight: 0.3,
   top_n: 8,
+  use_kg: false,
   ...initialQueryBaseValues,
 };
 

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

@@ -1,7 +1,9 @@
 import KnowledgeBaseItem from '@/components/knowledge-base-item';
 import Rerank from '@/components/rerank';
 import SimilaritySlider from '@/components/similarity-slider';
+import { TavilyItem } from '@/components/tavily-item';
 import TopNItem from '@/components/top-n-item';
+import { UseKnowledgeGraphItem } from '@/components/use-knowledge-graph-item';
 import { useTranslate } from '@/hooks/common-hooks';
 import type { FormProps } from 'antd';
 import { Form, Input } from 'antd';
@@ -39,6 +41,8 @@ const RetrievalForm = ({ onValuesChange, form, node }: IOperatorForm) => {
       ></SimilaritySlider>
       <TopNItem></TopNItem>
       <Rerank></Rerank>
+      <TavilyItem name={'tavily_api_key'}></TavilyItem>
+      <UseKnowledgeGraphItem filedName={'use_kg'}></UseKnowledgeGraphItem>
       <KnowledgeBaseItem></KnowledgeBaseItem>
       <Form.Item
         name={'empty_response'}