From d263d2078a20465c84a8a3155174ebff10056a39 Mon Sep 17 00:00:00 2001
From: Chen Tao <70054568+eeee0717@users.noreply.github.com>
Date: Mon, 17 Feb 2025 22:18:10 +0800
Subject: [PATCH] feat: add knowledge base filter (#1822)

* feat: add search filter

* chore
---
 .../pages/agents/components/AddAgentPopup.tsx   |  7 ++++++-
 .../pages/home/Inputbar/KnowledgeBaseButton.tsx |  5 +++++
 .../AssistantKnowledgeBaseSettings.tsx          | 17 +++++++++--------
 3 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/src/renderer/src/pages/agents/components/AddAgentPopup.tsx b/src/renderer/src/pages/agents/components/AddAgentPopup.tsx
index 162c2e70be..506a28c8c1 100644
--- a/src/renderer/src/pages/agents/components/AddAgentPopup.tsx
+++ b/src/renderer/src/pages/agents/components/AddAgentPopup.tsx
@@ -37,8 +37,8 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
   const [emoji, setEmoji] = useState('')
   const [loading, setLoading] = useState(false)
   const knowledgeState = useAppSelector((state) => state.knowledge)
-  const knowledgeOptions: SelectProps['options'] = []
   const showKnowledgeIcon = useSidebarIconShow('knowledge')
+  const knowledgeOptions: SelectProps['options'] = []
 
   knowledgeState.bases.forEach((base) => {
     knowledgeOptions.push({
@@ -163,6 +163,11 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
               placeholder={t('agents.add.knowledge_base.placeholder')}
               menuItemSelectedIcon={<CheckOutlined />}
               options={knowledgeOptions}
+              filterOption={(input, option) =>
+                String(option?.label ?? '')
+                  .toLowerCase()
+                  .includes(input.toLowerCase())
+              }
             />
           </Form.Item>
         )}
diff --git a/src/renderer/src/pages/home/Inputbar/KnowledgeBaseButton.tsx b/src/renderer/src/pages/home/Inputbar/KnowledgeBaseButton.tsx
index 1065e53b66..e7d22fe254 100644
--- a/src/renderer/src/pages/home/Inputbar/KnowledgeBaseButton.tsx
+++ b/src/renderer/src/pages/home/Inputbar/KnowledgeBaseButton.tsx
@@ -33,6 +33,11 @@ const KnowledgeBaseSelector: FC<Props> = ({ selectedBases, onSelect }) => {
           placeholder={t('agents.add.knowledge_base.placeholder')}
           menuItemSelectedIcon={<CheckOutlined />}
           options={knowledgeOptions}
+          filterOption={(input, option) =>
+            String(option?.label ?? '')
+              .toLowerCase()
+              .includes(input.toLowerCase())
+          }
           onChange={(ids) => {
             const newSelected = knowledgeState.bases.filter((base) => ids.includes(base.id))
             onSelect(newSelected)
diff --git a/src/renderer/src/pages/settings/AssistantSettings/AssistantKnowledgeBaseSettings.tsx b/src/renderer/src/pages/settings/AssistantSettings/AssistantKnowledgeBaseSettings.tsx
index 90efde55a9..5b64861dbe 100644
--- a/src/renderer/src/pages/settings/AssistantSettings/AssistantKnowledgeBaseSettings.tsx
+++ b/src/renderer/src/pages/settings/AssistantSettings/AssistantKnowledgeBaseSettings.tsx
@@ -16,14 +16,10 @@ const AssistantKnowledgeBaseSettings: React.FC<Props> = ({ assistant, updateAssi
   const { t } = useTranslation()
 
   const knowledgeState = useAppSelector((state) => state.knowledge)
-  const knowledgeOptions: SelectProps['options'] = []
-
-  knowledgeState.bases.forEach((base) => {
-    knowledgeOptions.push({
-      label: base.name,
-      value: base.id
-    })
-  })
+  const knowledgeOptions: SelectProps['options'] = knowledgeState.bases.map((base) => ({
+    label: base.name,
+    value: base.id
+  }))
 
   const onUpdate = (value) => {
     const knowledge_bases = value.map((id) => knowledgeState.bases.find((b) => b.id === id))
@@ -44,6 +40,11 @@ const AssistantKnowledgeBaseSettings: React.FC<Props> = ({ assistant, updateAssi
         menuItemSelectedIcon={<CheckOutlined />}
         options={knowledgeOptions}
         onChange={(value) => onUpdate(value)}
+        filterOption={(input, option) =>
+          String(option?.label ?? '')
+            .toLowerCase()
+            .includes(input.toLowerCase())
+        }
       />
     </Container>
   )