From 69c0f3f2ad8cbfb4ba2ad8ffbf00570b888b0bea Mon Sep 17 00:00:00 2001
From: Yi <yxiaoisme@gmail.com>
Date: Sat, 28 Sep 2024 14:13:02 +0800
Subject: [PATCH] fix: default selection issue & trigger retrieval setting
 unintentionally

---
 web/app/(commonLayout)/datasets/store.ts      | 11 +++++++++++
 .../create/ExternalApiSelect.tsx              | 15 ++++++++++-----
 .../create/ExternalApiSelection.tsx           | 19 ++++++++++++++++---
 .../components/dataset-item.tsx               | 12 ++++++++++--
 .../nodes/knowledge-retrieval/use-config.ts   |  3 ++-
 5 files changed, 49 insertions(+), 11 deletions(-)
 create mode 100644 web/app/(commonLayout)/datasets/store.ts

diff --git a/web/app/(commonLayout)/datasets/store.ts b/web/app/(commonLayout)/datasets/store.ts
new file mode 100644
index 0000000000..40b7b15594
--- /dev/null
+++ b/web/app/(commonLayout)/datasets/store.ts
@@ -0,0 +1,11 @@
+import { create } from 'zustand'
+
+type DatasetStore = {
+  showExternalApiPanel: boolean
+  setShowExternalApiPanel: (show: boolean) => void
+}
+
+export const useDatasetStore = create<DatasetStore>(set => ({
+  showExternalApiPanel: false,
+  setShowExternalApiPanel: show => set({ showExternalApiPanel: show }),
+}))
diff --git a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
index faddb2593b..3c4733933e 100644
--- a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelect.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import {
   RiAddLine,
   RiArrowDownSLine,
@@ -15,18 +15,23 @@ type ApiItem = {
 
 type ExternalApiSelectProps = {
   items: ApiItem[]
-  defaultValue?: string
+  value?: string
   onSelect: (item: ApiItem) => void
 }
 
-const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, defaultValue, onSelect }) => {
+const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, value, onSelect }) => {
   const { t } = useTranslation()
   const [isOpen, setIsOpen] = useState(false)
   const router = useRouter()
   const [selectedItem, setSelectedItem] = useState<ApiItem | null>(
-    items.find(item => item.value === defaultValue) || null,
+    items.find(item => item.value === value) || null,
   )
 
+  useEffect(() => {
+    const newSelectedItem = items.find(item => item.value === value) || null
+    setSelectedItem(newSelectedItem)
+  }, [value, items])
+
   const handleAddNewAPI = () => {
     router.push('/datasets?openExternalApiPanel=true')
   }
@@ -40,7 +45,7 @@ const ExternalApiSelect: React.FC<ExternalApiSelectProps> = ({ items, defaultVal
   return (
     <div className="relative w-full">
       <div
-        className={`flex items-center justify-between cursor-point px-2 py-1 gap-0.5 self-stretch rounded-lg 
+        className={`flex items-center justify-between cursor-pointer px-2 py-1 gap-0.5 self-stretch rounded-lg 
         bg-components-input-bg-normal hover:bg-state-base-hover-alt ${isOpen && 'bg-state-base-hover-alt'}`}
         onClick={() => setIsOpen(!isOpen)}
       >
diff --git a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
index 9f5b587c6b..d3a5325d38 100644
--- a/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
+++ b/web/app/components/datasets/external-knowledge-base/create/ExternalApiSelection.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiAddLine } from '@remixicon/react'
 import { useRouter } from 'next/navigation'
@@ -19,6 +19,7 @@ const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_kn
   const { t } = useTranslation()
   const router = useRouter()
   const { externalKnowledgeApiList } = useExternalKnowledgeApi()
+  const [selectedApiId, setSelectedApiId] = useState(external_knowledge_api_id)
 
   const apiItems = externalKnowledgeApiList.map(api => ({
     value: api.id,
@@ -26,6 +27,15 @@ const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_kn
     url: api.settings.endpoint,
   }))
 
+  useEffect(() => {
+    if (apiItems.length > 0) {
+      const newSelectedId = external_knowledge_api_id || apiItems[0].value
+      setSelectedApiId(newSelectedId)
+      if (newSelectedId !== external_knowledge_api_id)
+        onChange({ external_knowledge_api_id: newSelectedId, external_knowledge_id })
+    }
+  }, [apiItems, external_knowledge_api_id, external_knowledge_id, onChange])
+
   const handleAddNewAPI = () => {
     router.push('/datasets?openExternalApiPanel=true')
   }
@@ -44,8 +54,11 @@ const ExternalApiSelection: React.FC<ExternalApiSelectionProps> = ({ external_kn
         {apiItems.length > 0
           ? <ExternalApiSelect
             items={apiItems}
-            defaultValue={apiItems[0].value}
-            onSelect={e => onChange({ external_knowledge_api_id: e.value as string, external_knowledge_id })}
+            value={selectedApiId}
+            onSelect={(e) => {
+              setSelectedApiId(e.value)
+              onChange({ external_knowledge_api_id: e.value, external_knowledge_id })
+            }}
           />
           : <Button variant={'tertiary'} onClick={handleAddNewAPI} className='justify-start gap-0.5'>
             <RiAddLine className='w-4 h-4 text-text-tertiary' />
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
index f999240c0c..caf44d10bc 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx
@@ -47,6 +47,11 @@ const DatasetItem: FC<Props> = ({
     hideSettingsModal()
   }, [hideSettingsModal, onChange])
 
+  const handleRemove = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation()
+    onRemove()
+  }, [onRemove])
+
   return (
     <div className={`flex items-center h-10 justify-between rounded-xl px-2 border-[0.5px] 
       border-components-panel-border-subtle cursor-pointer group/dataset-item 
@@ -71,12 +76,15 @@ const DatasetItem: FC<Props> = ({
       {!readonly && (
         <div className='hidden group-hover/dataset-item:flex shrink-0 ml-2  items-center space-x-1'>
           <ActionButton
-            onClick={showSettingsModal}
+            onClick={(e) => {
+              e.stopPropagation()
+              showSettingsModal()
+            }}
           >
             <RiEditLine className='w-4 h-4 flex-shrink-0 text-text-tertiary' />
           </ActionButton>
           <ActionButton
-            onClick={onRemove}
+            onClick={handleRemove}
             state={ActionButtonState.Destructive}
             onMouseEnter={() => setIsDeleteHovered(true)}
             onMouseLeave={() => setIsDeleteHovered(false)}
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts b/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
index 994bf4f205..e45c4be257 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
@@ -208,6 +208,7 @@ const useConfig = (id: string, payload: KnowledgeRetrievalNodeType) => {
       allEconomic,
       mixtureHighQualityAndEconomic,
       inconsistentEmbeddingModel,
+      allInternal,
     } = getSelectedDatasetsMode(newDatasets)
     const newInputs = produce(inputs, (draft) => {
       draft.dataset_ids = newDatasets.map(d => d.id)
@@ -220,7 +221,7 @@ const useConfig = (id: string, payload: KnowledgeRetrievalNodeType) => {
     setInputs(newInputs)
     setSelectedDatasets(newDatasets)
 
-    if (allEconomic || mixtureHighQualityAndEconomic || inconsistentEmbeddingModel)
+    if (allInternal && (allEconomic || mixtureHighQualityAndEconomic || inconsistentEmbeddingModel))
       setRerankModelOpen(true)
   }, [inputs, setInputs, payload.retrieval_mode])