From cf77a89123e5c236e4e5a901df54aa1599665f5a Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 1 Mar 2024 11:38:16 +0800
Subject: [PATCH] feat: dasetitem ui

---
 .../components/dataset-item.tsx               | 38 ++++++++++++++++++-
 .../components/dataset-list.tsx               |  2 +-
 .../nodes/knowledge-retrieval/use-config.ts   |  1 -
 3 files changed, 37 insertions(+), 4 deletions(-)

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 f6fe785e8d..4f00a4e021 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
@@ -2,6 +2,10 @@
 import type { FC } from 'react'
 import React from 'react'
 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'
 
 type Props = {
   payload: DataSet
@@ -13,8 +17,38 @@ const DatasetItem: FC<Props> = ({
   onRemove,
 }) => {
   return (
-    <div>
-      {payload.name}
+    <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 && (
+            <div className='shrink-0 flex items-center justify-center w-6 h-6 bg-[#F5F8FF] rounded-md border-[0.5px] border-[#E0EAFF]'>
+              <Folder className='w-4 h-4 text-[#444CE7]' />
+            </div>
+          )
+        }
+        {
+          payload.data_source_type === DataSourceType.NOTION && (
+            <div className='shrink-0 flex items-center justify-center w-6 h-6 rounded-md border-[0.5px] border-[#EAECF5]'>
+              <FileIcon type='notion' className='w-4 h-4' />
+            </div>
+          )
+        }
+        <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='flex items-center justify-center w-6 h-6 hover:bg-black/5 rounded-md cursor-pointer'
+        // onClick={() => setShowSettingsModal(true)}
+        >
+          <Settings01 className='w-4 h-4 text-gray-500' />
+        </div>
+        <div
+          className='flex items-center justify-center w-6 h-6 hover:bg-black/5 rounded-md cursor-pointer'
+          onClick={onRemove}
+        >
+          <Trash03 className='w-4 h-4 text-gray-500' />
+        </div>
+      </div>
     </div>
   )
 }
diff --git a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-list.tsx b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-list.tsx
index fdf4949e5a..54cd3a285a 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-list.tsx
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/components/dataset-list.tsx
@@ -22,7 +22,7 @@ const DatasetList: FC<Props> = ({
     }
   }, [])
   return (
-    <div>
+    <div className='space-y-1'>
       {
         list.map((item, index) => {
           return (
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 490f624321..1fa7e3bb04 100644
--- a/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
+++ b/web/app/components/workflow/nodes/knowledge-retrieval/use-config.ts
@@ -37,7 +37,6 @@ const useConfig = (initInputs: KnowledgeRetrievalNodeType) => {
       if (datasetIds?.length > 0) {
         const { data: dataSetsWithDetail } = await fetchDatasets({ url: '/datasets', params: { page: 1, ids: datasetIds } })
         setSelectedDatasets(dataSetsWithDetail)
-        console.log(dataSetsWithDetail)
       }
     })()
   }, [])