Fix: style of dataset item in chatbot configure with theme dark (#19761)

web/app/components/app/configuration/dataset-config/card-item/item.tsx

@@ -12,6 +12,7 @@ import { DataSourceType } from '@/models/datasets'
 import FileIcon from '@/app/components/base/file-icon'
 import { Folder } from '@/app/components/base/icons/src/vender/solid/files'
 import { Globe06 } from '@/app/components/base/icons/src/vender/solid/mapsAndTravel'
+import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
 import Drawer from '@/app/components/base/drawer'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import Badge from '@/app/components/base/badge'
@@ -47,56 +48,66 @@ const Item: FC<ItemProps> = ({
   const [isDeleting, setIsDeleting] = useState(false)
 
   return (
-    <div className={cn('group relative mb-1 flex w-full items-center  rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg py-2 pl-2.5 pr-3 shadow-xs last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm', isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover')}>
+    <div className={cn(
-      {
+      'group relative mb-1 flex h-10 w-full cursor-pointer items-center justify-between rounded-lg border-[0.5px] border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2 last-of-type:mb-0 hover:bg-components-panel-on-panel-item-bg-hover',
-        config.data_source_type === DataSourceType.FILE && (
+      isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover',
-          <div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF]'>
+    )}>
-            <Folder className='h-4 w-4 text-[#444CE7]' />
+      <div className='flex w-0 grow items-center space-x-1.5'>
-          </div>
-        )
-      }
-      {
-        config.data_source_type === DataSourceType.NOTION && (
-          <div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#EAECF5]'>
-            <FileIcon type='notion' className='h-4 w-4' />
-          </div>
-        )
-      }
-      {
-        config.data_source_type === DataSourceType.WEB && (
-          <div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-blue-100 bg-[#F5FAFF]'>
-            <Globe06 className='h-4 w-4 text-blue-600' />
-          </div>
-        )
-      }
-      <div className='grow'>
-        <div className='flex h-[18px] items-center'>
-          <div className='grow truncate text-[13px] font-medium text-text-secondary' title={config.name}>{config.name}</div>
-          {config.provider === 'external'
-            ? <Badge text={t('dataset.externalTag') as string} />
-            : <Badge
-              text={formatIndexingTechniqueAndMethod(config.indexing_technique, config.retrieval_model_dict?.search_method)}
-            />}
-        </div>
-      </div >
-      <div className='absolute bottom-0 right-0 top-0 hidden w-[124px] items-center justify-end rounded-lg bg-gradient-to-r from-white/50 to-white to-50% pr-2 group-hover:flex'>
         {
-          editable && <div
+          config.data_source_type === DataSourceType.FILE && (
-            className='mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-black/5'
+            <div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF]'>
-            onClick={() => setShowSettingsModal(true)}
+              <Folder className='h-4 w-4 text-[#444CE7]' />
-          >
+            </div>
-            <RiEditLine className='h-4 w-4 text-text-tertiary' />
+          )
-          </div>
         }
-        <div
+        {
-          className='flex h-6 w-6 cursor-pointer items-center  justify-center text-text-tertiary hover:text-text-destructive'
+          config.data_source_type === DataSourceType.NOTION && (
+            <div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#EAECF5]'>
+              <FileIcon type='notion' className='h-4 w-4' />
+            </div>
+          )
+        }
+        {
+          config.data_source_type === DataSourceType.WEB && (
+            <div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-blue-100 bg-[#F5FAFF]'>
+              <Globe06 className='h-4 w-4 text-blue-600' />
+            </div>
+          )
+        }
+        <div className='system-sm-medium w-0 grow truncate text-text-secondary' title={config.name}>{config.name}</div>
+      </div>
+      <div className='ml-2 hidden shrink-0 items-center space-x-1 group-hover:flex'>
+        {
+          editable && <ActionButton
+            onClick={(e) => {
+              e.stopPropagation()
+              setShowSettingsModal(true)
+            }}
+          >
+            <RiEditLine className='h-4 w-4 shrink-0 text-text-tertiary' />
+          </ActionButton>
+        }
+        <ActionButton
           onClick={() => onRemove(config.id)}
-          onMouseOver={() => setIsDeleting(true)}
+          state={isDeleting ? ActionButtonState.Destructive : ActionButtonState.Default}
+          onMouseEnter={() => setIsDeleting(true)}
           onMouseLeave={() => setIsDeleting(false)}
         >
-          <RiDeleteBinLine className='h-4 w-4' />
+          <RiDeleteBinLine className={cn('h-4 w-4 shrink-0 text-text-tertiary', isDeleting && 'text-text-destructive')} />
-        </div>
+        </ActionButton>
       </div>
+      {
+        config.indexing_technique && <Badge
+          className='shrink-0 group-hover:hidden'
+          text={formatIndexingTechniqueAndMethod(config.indexing_technique, config.retrieval_model_dict?.search_method)}
+        />
+      }
+      {
+        config.provider === 'external' && <Badge
+          className='shrink-0 group-hover:hidden'
+          text={t('dataset.externalTag') as string}
+        />
+      }
       <Drawer isOpen={showSettingsModal} onClose={() => setShowSettingsModal(false)} footer={null} mask={isMobile} panelClassName='mt-16 mx-2 sm:mr-2 mb-3 !p-0 !max-w-[640px] rounded-xl'>
         <SettingsModal
           currentDataset={config}

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

@@ -55,7 +55,7 @@ const DatasetItem: FC<Props> = ({
   }, [onRemove])
 
   return (
-    <div className={`group/dataset-item flex h-10 cursor-pointer items-center justify-between rounded-xl
+    <div className={`group/dataset-item flex h-10 cursor-pointer items-center justify-between rounded-lg
       border-[0.5px] border-components-panel-border-subtle px-2
       ${isDeleteHovered
       ? 'border-state-destructive-border bg-state-destructive-hover'