+ )
+}
+
+export default memo(OptionCard)
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/full-text-search.tsx b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/full-text-search.tsx
new file mode 100644
index 0000000000..13b602b08d
--- /dev/null
+++ b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/full-text-search.tsx
@@ -0,0 +1,20 @@
+import { FullTextSearch } from '@/app/components/base/icons/src/vender/knowledge'
+import OptionCard from '../option-card'
+
+const FullTextSearchCard = () => {
+ return (
+ }
+ title='Full-Text Search'
+ description="Execute full-text search and vector searches simultaneously, re-rank to select the best match for the user's query. Users can choose to set weights or configure to a Rerank model."
+ effectColor='purple'
+ >
+
+
Vector Search Settings
+
Additional Settings
+
+
+ )
+}
+
+export default FullTextSearchCard
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/hybrid-search.tsx b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/hybrid-search.tsx
new file mode 100644
index 0000000000..7eec4f97c7
--- /dev/null
+++ b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/hybrid-search.tsx
@@ -0,0 +1,21 @@
+import { HybridSearch } from '@/app/components/base/icons/src/vender/knowledge'
+import OptionCard from '../option-card'
+
+const HybridSearchCard = () => {
+ return (
+ }
+ title='Hybrid Search'
+ description="Execute full-text search and vector searches simultaneously, re-rank to select the best match for the user's query. Users can choose to set weights or configure to a Rerank model."
+ effectColor='purple'
+ isRecommended
+ >
+
+
Vector Search Settings
+
Additional Settings
+
+
+ )
+}
+
+export default HybridSearchCard
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/index.tsx b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/index.tsx
new file mode 100644
index 0000000000..bbcba2c72a
--- /dev/null
+++ b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/index.tsx
@@ -0,0 +1,35 @@
+import { Field } from '@/app/components/workflow/nodes/_base/components/layout'
+import VectorSearchCard from './vector-search'
+import FullTextSearchCard from './full-text-search'
+import HybridSearchCard from './hybrid-search'
+
+const RetrievalSetting = () => {
+ return (
+
+
+ Learn more
+
+
+ about retrieval method.
+
+ ),
+ }}
+ >
+
+
+
+
+
+
+ )
+}
+
+export default RetrievalSetting
diff --git a/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/vector-search.tsx b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/vector-search.tsx
new file mode 100644
index 0000000000..8d17858b1c
--- /dev/null
+++ b/web/app/components/workflow/nodes/knowledge-base/components/retrieval-setting/vector-search.tsx
@@ -0,0 +1,20 @@
+import { VectorSearch } from '@/app/components/base/icons/src/vender/knowledge'
+import OptionCard from '../option-card'
+
+const VectorSearchCard = () => {
+ return (
+ }
+ title='Vector Search'
+ description='Generate query embeddings and search for the text chunk most similar to its vector representation.'
+ effectColor='purple'
+ >
+
+
Vector Search Settings
+
Additional Settings
+
+
+ )
+}
+
+export default VectorSearchCard
diff --git a/web/app/components/workflow/nodes/knowledge-base/panel.tsx b/web/app/components/workflow/nodes/knowledge-base/panel.tsx
index 8303a61a5a..344a79a207 100644
--- a/web/app/components/workflow/nodes/knowledge-base/panel.tsx
+++ b/web/app/components/workflow/nodes/knowledge-base/panel.tsx
@@ -1,12 +1,40 @@
import type { FC } from 'react'
import { memo } from 'react'
import type { KnowledgeBaseNodeType } from './types'
+import InputVariable from './components/input-variable'
+import ChunkStructure from './components/chunk-structure'
+import IndexMethod from './components/index-method'
+import RetrievalSetting from './components/retrieval-setting'
+import EmbeddingModel from './components/embedding-model'
import type { NodePanelProps } from '@/app/components/workflow/types'
+import {
+ Group,
+ GroupWithBox,
+} from '@/app/components/workflow/nodes/_base/components/layout'
+import Split from '../_base/components/split'
const Panel: FC> = () => {
return (
-