feat: replace data source icons with AppIcon component in Item and DatasetItem

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

@@ -8,16 +8,13 @@ import {
 import { useTranslation } from 'react-i18next'
 import SettingsModal from '../settings-modal'
 import type { DataSet } from '@/models/datasets'
-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'
 import { useKnowledge } from '@/hooks/use-knowledge'
 import cn from '@/utils/classnames'
+import AppIcon from '@/app/components/base/app-icon'
 
 type ItemProps = {
   className?: string
@@ -47,33 +44,26 @@ const Item: FC<ItemProps> = ({
 
   const [isDeleting, setIsDeleting] = useState(false)
 
+  const iconInfo = config.icon_info || {
+    icon: '📙',
+    icon_type: 'emoji',
+    icon_background: '#FFF4ED',
+    icon_url: '',
+  }
+
   return (
     <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',
       isDeleting && 'border-state-destructive-border hover:bg-state-destructive-hover',
     )}>
       <div className='flex w-0 grow items-center space-x-1.5'>
-        {
+        <AppIcon
-          config.data_source_type === DataSourceType.FILE && (
+          size='tiny'
-            <div className='mr-2 flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#E0EAFF] bg-[#F5F8FF]'>
+          iconType={iconInfo.icon_type}
-              <Folder className='h-4 w-4 text-[#444CE7]' />
+          icon={iconInfo.icon}
-            </div>
+          background={iconInfo.icon_type === 'image' ? undefined : iconInfo.icon_background}
-          )
+          imageUrl={iconInfo.icon_type === 'image' ? iconInfo.icon_url : undefined}
-        }
+        />
-        {
-          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'>

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

@@ -8,15 +8,13 @@ import {
 } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import type { DataSet } from '@/models/datasets'
-import { DataSourceType } from '@/models/datasets'
 import ActionButton, { ActionButtonState } from '@/app/components/base/action-button'
-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'
 import Badge from '@/app/components/base/badge'
 import { useKnowledge } from '@/hooks/use-knowledge'
+import AppIcon from '@/app/components/base/app-icon'
 
 type Props = {
   payload: DataSet
@@ -54,25 +52,28 @@ const DatasetItem: FC<Props> = ({
     onRemove()
   }, [onRemove])
 
+  const iconInfo = payload.icon_info || {
+    icon: '📙',
+    icon_type: 'emoji',
+    icon_background: '#FFF4ED',
+    icon_url: '',
+  }
+
   return (
     <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'
+        ? 'border-state-destructive-border bg-state-destructive-hover'
-      : 'bg-components-panel-on-panel-item-bg hover:bg-components-panel-on-panel-item-bg-hover'
+        : 'bg-components-panel-on-panel-item-bg hover:bg-components-panel-on-panel-item-bg-hover'
-    }`}>
+      }`}>
       <div className='flex w-0 grow items-center space-x-1.5'>
-        {
+        <AppIcon
-          payload.data_source_type === DataSourceType.NOTION
+          size='tiny'
-            ? (
+          iconType={iconInfo.icon_type}
-              <div className='flex h-6 w-6 shrink-0 items-center justify-center rounded-md border-[0.5px] border-[#EAECF5]'>
+          icon={iconInfo.icon}
-                <FileIcon type='notion' className='h-4 w-4' />
+          background={iconInfo.icon_type === 'image' ? undefined : iconInfo.icon_background}
-              </div>
+          imageUrl={iconInfo.icon_type === 'image' ? iconInfo.icon_url : undefined}
-            )
+        />
-            : <div className='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>
-        }
         <div className='system-sm-medium w-0 grow truncate text-text-secondary'>{payload.name}</div>
       </div>
       {!readonly && (