refactor: enhance dataset components with new icons and improve layout structure

web/app/components/datasets/create-from-pipeline/header-effect.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const HeaderEffect = () => {
-  return (
-    <div className='absolute left-8 top-[-34px] size-[112px] bg-util-colors-blue-brand-blue-brand-500 opacity-20 blur-[80px]' />
-  )
-}
-
-export default React.memo(HeaderEffect)

web/app/components/datasets/create-from-pipeline/index.tsx

@@ -1,8 +1,8 @@
 'use client'
-import HeaderEffect from './header-effect'
 import Header from './header'
 import CreateOptions from './create-options'
 import List from './list'
+import Effect from '../../base/effect'
 
 const CreateFromPipeline = () => {
   return (
@@ -10,7 +10,7 @@ const CreateFromPipeline = () => {
       className='relative flex flex-col rounded-t-2xl border-t border-effects-highlight bg-background-default-subtle'
       style={{ height: 'calc(100vh - 56px)' }}
     >
-      <HeaderEffect />
+      <Effect className='left-8 top-[-34px] opacity-20' />
       <Header />
       <CreateOptions />
       <List />

web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx

@@ -9,7 +9,7 @@ import Operations from './operations'
 import Modal from '@/app/components/base/modal'
 import EditPipelineInfo from './edit-pipeline-info'
 import type { PipelineTemple } from '@/models/pipeline'
-import { DOC_FORM_ICON, DOC_FORM_TEXT } from '@/models/datasets'
+import { DOC_FORM_ICON_WITH_BG, DOC_FORM_TEXT } from '@/models/datasets'
 import Confirm from '@/app/components/base/confirm'
 import { useDeletePipeline, useExportPipelineDSL, useImportPipelineDSL, usePipelineTemplateById } from '@/service/use-pipeline'
 import { downloadFile } from '@/utils/format'
@@ -131,7 +131,7 @@ const TemplateCard = ({
     })
   }, [pipeline.id, deletePipeline])
 
-  const Icon = DOC_FORM_ICON[pipeline.doc_form] || General
+  const Icon = DOC_FORM_ICON_WITH_BG[pipeline.doc_form] || General
   const iconInfo = pipeline.icon_info
 
   return (

web/app/components/datasets/list/dataset-card/index.tsx

@@ -3,7 +3,6 @@ import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import type { DataSet } from '@/models/datasets'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
-import { General } from '@/app/components/base/icons/src/public/knowledge/dataset-card'
 import { useKnowledge } from '@/hooks/use-knowledge'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { Tag } from '@/app/components/base/tag-management/constant'
@@ -22,7 +21,7 @@ import CustomPopover from '@/app/components/base/popover'
 import Operations from './operations'
 import AppIcon from '@/app/components/base/app-icon'
 import CornerLabel from '@/app/components/base/corner-label'
-import { DOC_FORM_ICON, DOC_FORM_TEXT } from '@/models/datasets'
+import { DOC_FORM_ICON_WITH_BG, DOC_FORM_TEXT } from '@/models/datasets'
 
 const EXTERNAL_PROVIDER = 'external'
 
@@ -50,7 +49,7 @@ const DatasetCard = ({
   const isExternalProvider = useMemo(() => {
     return dataset.provider === EXTERNAL_PROVIDER
   }, [dataset.provider])
-  const Icon = isExternalProvider ? DOC_FORM_ICON.external : (DOC_FORM_ICON[dataset.doc_form] || General)
+  const Icon = isExternalProvider ? DOC_FORM_ICON_WITH_BG.external : DOC_FORM_ICON_WITH_BG[dataset.doc_form]
   const iconInfo = dataset.icon_info || {
     icon: '📙',
     icon_type: 'emoji',

web/app/components/datasets/no-linked-apps-panel.tsx

@@ -0,0 +1,28 @@
+import { useGetDocLanguage } from '@/context/i18n'
+import { RiApps2AddLine, RiBookOpenLine } from '@remixicon/react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+
+const NoLinkedAppsPanel = () => {
+  const { t } = useTranslation()
+  const docLanguage = useGetDocLanguage()
+
+  return (
+    <div className='w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4'>
+      <div className='inline-flex rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle p-2'>
+        <RiApps2AddLine className='size-4 text-text-tertiary' />
+      </div>
+      <div className='my-2 text-xs text-text-tertiary'>{t('common.datasetMenus.emptyTip')}</div>
+      <a
+        className='mt-2 inline-flex cursor-pointer items-center text-xs text-text-accent'
+        href={`https://docs.dify.ai/${docLanguage}/guides/knowledge-base/integrate-knowledge-within-application`}
+        target='_blank' rel='noopener noreferrer'
+      >
+        <RiBookOpenLine className='mr-1 size-4 text-text-accent' />
+        {t('common.datasetMenus.viewDoc')}
+      </a>
+    </div>
+  )
+}
+
+export default React.memo(NoLinkedAppsPanel)