From c57f16d16f0660b98aa9085c78acc1ed78baa012 Mon Sep 17 00:00:00 2001
From: balibabu <cike8899@users.noreply.github.com>
Date: Wed, 12 Mar 2025 18:47:22 +0800
Subject: [PATCH] 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            | 25 +++++++++++++++++++
 .../components/use-knowledge-graph-item.tsx   |  2 +-
 .../assistant-setting.tsx                     | 14 +++--------
 web/src/pages/flow/constant.tsx               |  1 +
 .../pages/flow/form/retrieval-form/index.tsx  |  4 +++
 5 files changed, 34 insertions(+), 12 deletions(-)
 create mode 100644 web/src/components/tavily-item.tsx

diff --git a/web/src/components/tavily-item.tsx b/web/src/components/tavily-item.tsx
new file mode 100644
index 00000000..a457dd2f
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/web/src/components/use-knowledge-graph-item.tsx b/web/src/components/use-knowledge-graph-item.tsx
index 5cf89147..cebf576c 100644
--- a/web/src/components/use-knowledge-graph-item.tsx
+++ b/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) {
diff --git a/web/src/pages/chat/chat-configuration-modal/assistant-setting.tsx b/web/src/pages/chat/chat-configuration-modal/assistant-setting.tsx
index 039a2e58..69a5b2c7 100644
--- a/web/src/pages/chat/chat-configuration-modal/assistant-setting.tsx
+++ b/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}
diff --git a/web/src/pages/flow/constant.tsx b/web/src/pages/flow/constant.tsx
index 5a8df53f..697c0f71 100644
--- a/web/src/pages/flow/constant.tsx
+++ b/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,
 };
 
diff --git a/web/src/pages/flow/form/retrieval-form/index.tsx b/web/src/pages/flow/form/retrieval-form/index.tsx
index 4a92a7f9..3d7f29e6 100644
--- a/web/src/pages/flow/form/retrieval-form/index.tsx
+++ b/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'}