feat: dataset list struct

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

@@ -0,0 +1,21 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { DataSet } from '@/models/datasets'
+
+type Props = {
+  payload: DataSet
+  onRemove: () => void
+}
+
+const DatasetItem: FC<Props> = ({
+  payload,
+  onRemove,
+}) => {
+  return (
+    <div>
+      {payload.name}
+    </div>
+  )
+}
+export default React.memo(DatasetItem)

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

@@ -0,0 +1,41 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import produce from 'immer'
+import Item from './dataset-item'
+import type { DataSet } from '@/models/datasets'
+type Props = {
+  list: DataSet[]
+  onChange: (list: DataSet[]) => void
+}
+
+const DatasetList: FC<Props> = ({
+  list,
+  onChange,
+}) => {
+  const handleRemove = useCallback((index: number) => {
+    return () => {
+      const newList = produce(list, (draft) => {
+        draft.splice(index, 1)
+      })
+      onChange(newList)
+    }
+  }, [])
+  return (
+    <div>
+      {
+        list.map((item, index) => {
+          return (
+            <Item
+              key={index}
+              payload={item}
+              onRemove={handleRemove(index)}
+            />
+          )
+        })
+      }
+
+    </div>
+  )
+}
+export default React.memo(DatasetList)

web/app/components/workflow/nodes/knowledge-retrieval/mock.ts

@@ -7,7 +7,7 @@ export const mockData: KnowledgeRetrievalNodeType = {
   desc: 'xxx',
   title: 'KnowledgeRetrieval',
   query_variable_selector: ['aaa', 'name'],
-  dataset_ids: ['1'],
+  dataset_ids: ['744a0635-2496-4a87-8e6d-fae410f610be'],
   retrieval_mode: RETRIEVE_TYPE.oneWay,
   multiple_retrieval_config: {
     top_k: 10,

web/app/components/workflow/nodes/knowledge-retrieval/panel.tsx

@@ -5,9 +5,11 @@ import useConfig from './use-config'
 import { mockData } from './mock'
 import RetrievalConfig from './components/retrieval-config'
 import AddKnowledge from './components/add-dataset'
+import DatasetList from './components/dataset-list'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import OutputVars, { VarItem } from '@/app/components/workflow/nodes/_base/components/output-vars'
+
 const i18nPrefix = 'workflow.nodes.knowledgeRetrieval'
 
 const Panel: FC = () => {
@@ -19,6 +21,7 @@ const Panel: FC = () => {
     handleQueryVarChange,
     handleRetrievalModeChange,
     handleMultipleRetrievalConfigChange,
+    selectedDatasets,
     handleOnDatasetsChange,
   } = useConfig(mockData)
 
@@ -56,7 +59,10 @@ const Panel: FC = () => {
             </div>
           }
         >
-          list
+          <DatasetList
+            list={selectedDatasets}
+            onChange={handleOnDatasetsChange}
+          />
         </Field>
       </div>
 

web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts

@@ -1,13 +1,13 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import produce from 'immer'
 import type { ValueSelector } from '../../types'
 import type { KnowledgeRetrievalNodeType, MultipleRetrievalConfig } from './types'
 import type { RETRIEVE_TYPE } from '@/types/app'
 import type { DataSet } from '@/models/datasets'
+import { fetchDatasets } from '@/service/datasets'
 
 const useConfig = (initInputs: KnowledgeRetrievalNodeType) => {
   const [inputs, setInputs] = useState<KnowledgeRetrievalNodeType>(initInputs)
-  const [selectedDatasets, setSelectedDatasets] = useState<DataSet[]>([])
   const handleQueryVarChange = useCallback((newVar: ValueSelector) => {
     const newInputs = produce(inputs, (draft) => {
       draft.query_variable_selector = newVar
@@ -29,6 +29,19 @@ const useConfig = (initInputs: KnowledgeRetrievalNodeType) => {
     setInputs(newInputs)
   }, [inputs, setInputs])
 
+  // datasets
+  const [selectedDatasets, setSelectedDatasets] = useState<DataSet[]>([])
+  useEffect(() => {
+    (async () => {
+      const datasetIds = inputs.dataset_ids
+      if (datasetIds?.length > 0) {
+        const { data: dataSetsWithDetail } = await fetchDatasets({ url: '/datasets', params: { page: 1, ids: datasetIds } })
+        setSelectedDatasets(dataSetsWithDetail)
+        console.log(dataSetsWithDetail)
+      }
+    })()
+  }, [])
+
   const handleOnDatasetsChange = useCallback((newDatasets: DataSet[]) => {
     const newInputs = produce(inputs, (draft) => {
       draft.dataset_ids = newDatasets.map(d => d.id)
@@ -42,6 +55,7 @@ const useConfig = (initInputs: KnowledgeRetrievalNodeType) => {
     handleQueryVarChange,
     handleRetrievalModeChange,
     handleMultipleRetrievalConfigChange,
+    selectedDatasets,
     handleOnDatasetsChange,
   }
 }