feat: knowledge retrieval dataset setting

web/app/components/base/drawer/index.tsx

@@ -47,7 +47,7 @@ export default function Drawer({
         <Dialog.Overlay
           className={`z-40 fixed inset-0 ${!mask ? '' : 'bg-black bg-opacity-30'}`}
         />
-        <div className={`z-50 flex flex-col justify-between bg-white w-full
+        <div className={`relative z-50 flex flex-col justify-between bg-white w-full
         max-w-sm p-6 overflow-hidden text-left align-middle
         shadow-xl ${panelClassname}`}>
           <>

web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-item.tsx

@@ -1,23 +1,42 @@
 'use client'
 import type { FC } from 'react'
-import React from 'react'
+import React, { useCallback } from 'react'
+import { useBoolean } from 'ahooks'
 import type { DataSet } from '@/models/datasets'
 import { DataSourceType } from '@/models/datasets'
 import { Settings01, Trash03 } from '@/app/components/base/icons/src/vender/line/general'
 import FileIcon from '@/app/components/base/file-icon'
 import { Folder } from '@/app/components/base/icons/src/vender/solid/files'
+import SettingsModal from '@/app/components/app/configuration/dataset-config/settings-modal'
+import Drawer from '@/app/components/base/drawer'
+import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 
 type Props = {
   payload: DataSet
   onRemove: () => void
+  onChange: (dataSet: DataSet) => void
 }
 
 const DatasetItem: FC<Props> = ({
   payload,
   onRemove,
+  onChange,
 }) => {
+  const media = useBreakpoints()
+  const isMobile = media === MediaType.mobile
+
+  const [isShowSettingsModal, {
+    setTrue: showSettingsModal,
+    setFalse: hideSettingsModal,
+  }] = useBoolean(false)
+
+  const handleSave = useCallback((newDataset: DataSet) => {
+    onChange(newDataset)
+    hideSettingsModal()
+  }, [payload])
+
   return (
-    <div className='flex items-center h-10 justify-between rounded-xl px-2 bg-white border border-gray-200  cursor-pointer group-[dataset-item]'>
+    <div className='flex items-center h-10 justify-between rounded-xl px-2 bg-white border border-gray-200  cursor-pointer group/dataset-item'>
       <div className='w-0 grow flex items-center space-x-1.5'>
         {
           payload.data_source_type === DataSourceType.FILE && (
@@ -35,10 +54,10 @@ const DatasetItem: FC<Props> = ({
         }
         <div className='w-0 grow text-[13px] font-normal text-gray-800 truncate'>{payload.name}</div>
       </div>
-      <div className='shrink-0 ml-2 flex items-center space-x-1'>
+      <div className='hidden group-hover/dataset-item:flex shrink-0 ml-2  items-center space-x-1'>
         <div
           className='flex items-center justify-center w-6 h-6 hover:bg-black/5 rounded-md cursor-pointer'
-        // onClick={() => setShowSettingsModal(true)}
+          onClick={showSettingsModal}
         >
           <Settings01 className='w-4 h-4 text-gray-500' />
         </div>
@@ -49,6 +68,15 @@ const DatasetItem: FC<Props> = ({
           <Trash03 className='w-4 h-4 text-gray-500' />
         </div>
       </div>
+      {isShowSettingsModal && (
+        <Drawer isOpen={isShowSettingsModal} onClose={hideSettingsModal} footer={null} mask={isMobile} panelClassname='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'>
+          <SettingsModal
+            currentDataset={payload}
+            onCancel={hideSettingsModal}
+            onSave={handleSave}
+          />
+        </Drawer>
+      )}
     </div>
   )
 }

web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-list.tsx

@@ -21,6 +21,15 @@ const DatasetList: FC<Props> = ({
       onChange(newList)
     }
   }, [])
+
+  const handleChange = useCallback((index: number) => {
+    return (value: DataSet) => {
+      const newList = produce(list, (draft) => {
+        draft[index] = value
+      })
+      onChange(newList)
+    }
+  }, [list, onChange])
   return (
     <div className='space-y-1'>
       {
@@ -30,6 +39,7 @@ const DatasetList: FC<Props> = ({
               key={index}
               payload={item}
               onRemove={handleRemove(index)}
+              onChange={handleChange(index)}
             />
           )
         })