feat: Add External Knowledge Base and Pipeline icons, update DatasetCard component

11 months ago · b4bccf5fef
parent 14ad34af71
commit b4bccf5fef
23 changed files with 537 additions and 39 deletions
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx
@ -43,10 +43,10 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
  const media = useBreakpoints()
  const isMobile = media === MediaType.mobile
  const { isCurrentWorkspaceEditor, isLoadingCurrentWorkspace } = useAppContext()
-  const { appDetail, setAppDetail, setAppSiderbarExpand } = useStore(useShallow(state => ({
+  const { appDetail, setAppDetail, setAppSidebarExpand } = useStore(useShallow(state => ({
    appDetail: state.appDetail,
    setAppDetail: state.setAppDetail,
-    setAppSiderbarExpand: state.setAppSiderbarExpand,
+    setAppSidebarExpand: state.setAppSidebarExpand,
  })))
  const [isLoadingAppDetail, setIsLoadingAppDetail] = useState(false)
  const [appDetailRes, setAppDetailRes] = useState<App | null>(null)
@ -101,10 +101,10 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
      document.title = `${(appDetail.name || 'App')} - Dify`
      const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand'
      const mode = isMobile ? 'collapse' : 'expand'
-      setAppSiderbarExpand(isMobile ? mode : localeMode)
+      setAppSidebarExpand(isMobile ? mode : localeMode)
      // TODO: consider screen size and mode
      // if ((appDetail.mode === 'advanced-chat' || appDetail.mode === 'workflow') && (pathname).endsWith('workflow'))
-      //   setAppSiderbarExpand('collapse')
+      //   setAppSidebarExpand('collapse')
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [appDetail, isMobile])
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
@ -5,6 +5,7 @@ import { usePathname } from 'next/navigation'
 import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
+import type { RemixiconComponentType } from '@remixicon/react'
 import {
  RiEqualizer2Fill,
  RiEqualizer2Line,
@ -31,6 +32,7 @@ import { getLocaleOnClient } from '@/i18n'
 import { useAppContext } from '@/context/app-context'
 import Tooltip from '@/app/components/base/tooltip'
 import LinkedAppsPanel from '@/app/components/base/linked-apps-panel'
+import { PipelineFill, PipelineLine } from '@/app/components/base/icons/src/public/pipeline'

 export type IAppDetailLayoutProps = {
  children: React.ReactNode
@ -148,12 +150,17 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
    ]

    if (datasetRes?.provider !== 'external') {
-      baseNavigation.unshift({
+      baseNavigation.unshift(...[{
        name: t('common.datasetMenus.documents'),
        href: `/datasets/${datasetId}/documents`,
        icon: RiFileTextLine,
        selectedIcon: RiFileTextFill,
-      })
+      }, {
+        name: t('common.datasetMenus.pipeline'),
+        href: `/datasets/${datasetId}/pipeline`,
+        icon: PipelineLine as RemixiconComponentType,
+        selectedIcon: PipelineFill as RemixiconComponentType,
+      }])
    }
    return baseNavigation
  }, [datasetRes?.provider, datasetId, t])
@ -163,13 +170,13 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
      document.title = `${datasetRes.name || 'Dataset'} - Dify`
  }, [datasetRes])

-  const setAppSiderbarExpand = useStore(state => state.setAppSiderbarExpand)
+  const setAppSidebarExpand = useStore(state => state.setAppSidebarExpand)

  useEffect(() => {
    const localeMode = localStorage.getItem('app-detail-collapse-or-expand') || 'expand'
    const mode = isMobile ? 'collapse' : 'expand'
-    setAppSiderbarExpand(isMobile ? mode : localeMode)
-  }, [isMobile, setAppSiderbarExpand])
+    setAppSidebarExpand(isMobile ? mode : localeMode)
+  }, [isMobile, setAppSidebarExpand])

  if (!datasetRes && !error)
    return <Loading type='app' />
--- a/web/app/components/app-sidebar/index.tsx
+++ b/web/app/components/app-sidebar/index.tsx
@ -27,24 +27,24 @@ export type IAppDetailNavProps = {
 }

 const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigation, extraInfo, iconType = 'app' }: IAppDetailNavProps) => {
-  const { appSidebarExpand, setAppSiderbarExpand } = useAppStore(useShallow(state => ({
+  const { appSidebarExpand, setAppSidebarExpand } = useAppStore(useShallow(state => ({
    appSidebarExpand: state.appSidebarExpand,
-    setAppSiderbarExpand: state.setAppSiderbarExpand,
+    setAppSidebarExpand: state.setAppSidebarExpand,
  })))
  const media = useBreakpoints()
  const isMobile = media === MediaType.mobile
  const expand = appSidebarExpand === 'expand'

  const handleToggle = (state: string) => {
-    setAppSiderbarExpand(state === 'expand' ? 'collapse' : 'expand')
+    setAppSidebarExpand(state === 'expand' ? 'collapse' : 'expand')
  }

  useEffect(() => {
    if (appSidebarExpand) {
      localStorage.setItem('app-detail-collapse-or-expand', appSidebarExpand)
-      setAppSiderbarExpand(appSidebarExpand)
+      setAppSidebarExpand(appSidebarExpand)
    }
-  }, [appSidebarExpand, setAppSiderbarExpand])
+  }, [appSidebarExpand, setAppSidebarExpand])

  return (
    <div
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@ -88,9 +88,9 @@ type PublishConfig = {
 const Configuration: FC = () => {
  const { t } = useTranslation()
  const { notify } = useContext(ToastContext)
-  const { appDetail, showAppConfigureFeaturesModal, setAppSiderbarExpand, setShowAppConfigureFeaturesModal } = useAppStore(useShallow(state => ({
+  const { appDetail, showAppConfigureFeaturesModal, setAppSidebarExpand, setShowAppConfigureFeaturesModal } = useAppStore(useShallow(state => ({
    appDetail: state.appDetail,
-    setAppSiderbarExpand: state.setAppSiderbarExpand,
+    setAppSidebarExpand: state.setAppSidebarExpand,
    showAppConfigureFeaturesModal: state.showAppConfigureFeaturesModal,
    setShowAppConfigureFeaturesModal: state.setShowAppConfigureFeaturesModal,
  })))
@ -822,7 +822,7 @@ const Configuration: FC = () => {
        { id: `${Date.now()}-no-repeat`, model: '', provider: '', parameters: {} },
      ],
    )
-    setAppSiderbarExpand('collapse')
+    setAppSidebarExpand('collapse')
  }

  if (isLoading) {
--- a/web/app/components/app/store.ts
+++ b/web/app/components/app/store.ts
@ -15,7 +15,7 @@ type State = {

 type Action = {
  setAppDetail: (appDetail?: App & Partial<AppSSO>) => void
-  setAppSiderbarExpand: (state: string) => void
+  setAppSidebarExpand: (state: string) => void
  setCurrentLogItem: (item?: IChatItem) => void
  setCurrentLogModalActiveTab: (tab: string) => void
  setShowPromptLogModal: (showPromptLogModal: boolean) => void
@ -28,7 +28,7 @@ export const useStore = create<State & Action>(set => ({
  appDetail: undefined,
  setAppDetail: appDetail => set(() => ({ appDetail })),
  appSidebarExpand: '',
-  setAppSiderbarExpand: appSidebarExpand => set(() => ({ appSidebarExpand })),
+  setAppSidebarExpand: appSidebarExpand => set(() => ({ appSidebarExpand })),
  currentLogItem: undefined,
  currentLogModalActiveTab: 'DETAIL',
  setCurrentLogItem: currentLogItem => set(() => ({ currentLogItem })),
--- a/web/app/components/base/corner-label/index.tsx
+++ b/web/app/components/base/corner-label/index.tsx
@ -10,8 +10,8 @@ type CornerLabelProps = {
 const CornerLabel: React.FC<CornerLabelProps> = ({ label, className, labelClassName }) => {
  return (
    <div className={cn('group/corner-label inline-flex items-start', className)}>
-      <Corner className='h-5 w-[13px] text-background-section group-hover/corner-label:text-background-section-burn' />
-      <div className={cn('flex items-center gap-0.5 bg-background-section py-1 pr-2 group-hover/corner-label:bg-background-section-burn', labelClassName)}>
+      <Corner className='h-5 w-[13px] text-background-section-burn' />
+      <div className={cn('flex items-center gap-0.5 bg-background-section-burn py-1 pr-2', labelClassName)}>
        <div className='system-2xs-medium-uppercase text-text-tertiary'>{label}</div>
      </div>
    </div>
--- a/web/app/components/base/icons/assets/public/knowledge/external-knowledge-base.svg
+++ b/web/app/components/base/icons/assets/public/knowledge/external-knowledge-base.svg
@ -0,0 +1,29 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5996 0.5C11.7113 0.5 12.5755 0.500118 13.2676 0.556641C13.9655 0.61366 14.5329 0.730378 15.043 0.990234L15.3525 1.16406C16.0576 1.59644 16.6322 2.21605 17.0098 2.95703L17.1006 3.15137C17.2979 3.61108 17.3935 4.12184 17.4434 4.73242C17.4999 5.42447 17.5 6.28869 17.5 7.40039V10.5996C17.5 11.7113 17.4999 12.5755 17.4434 13.2676C17.3935 13.8782 17.2979 14.3889 17.1006 14.8486L17.0098 15.043C16.6322 15.7839 16.0576 16.4036 15.3525 16.8359L15.043 17.0098C14.5329 17.2696 13.9655 17.3863 13.2676 17.4434C12.5755 17.4999 11.7113 17.5 10.5996 17.5H7.40039C6.28869 17.5 5.42447 17.4999 4.73242 17.4434C4.12184 17.3935 3.61108 17.2979 3.15137 17.1006L2.95703 17.0098C2.21605 16.6322 1.59644 16.0576 1.16406 15.3525L0.990234 15.043C0.730378 14.5329 0.61366 13.9655 0.556641 13.2676C0.500118 12.5755 0.5 11.7113 0.5 10.5996V7.40039C0.5 6.28869 0.500118 5.42447 0.556641 4.73242C0.61366 4.03453 0.730378 3.46707 0.990234 2.95703L1.16406 2.64746C1.59644 1.94243 2.21605 1.36778 2.95703 0.990234L3.15137 0.899414C3.61108 0.702129 4.12184 0.606527 4.73242 0.556641C5.42447 0.500118 6.28869 0.5 7.40039 0.5H10.5996Z" stroke="white"/>
+<path d="M1 7.4C1 5.15979 1 4.03969 1.43597 3.18404C1.81947 2.43139 2.43139 1.81947 3.18404 1.43597C4.03969 1 5.15979 1 7.4 1H10.6C12.8402 1 13.9603 1 14.816 1.43597C15.5686 1.81947 16.1805 2.43139 16.564 3.18404C17 4.03969 17 5.15979 17 7.4V10.6C17 12.8402 17 13.9603 16.564 14.816C16.1805 15.5686 15.5686 16.1805 14.816 16.564C13.9603 17 12.8402 17 10.6 17H7.4C5.15979 17 4.03969 17 3.18404 16.564C2.43139 16.1805 1.81947 15.5686 1.43597 14.816C1 13.9603 1 12.8402 1 10.6V7.4Z" fill="#828DAD"/>
+<path d="M1 7.4C1 5.15979 1 4.03969 1.43597 3.18404C1.81947 2.43139 2.43139 1.81947 3.18404 1.43597C4.03969 1 5.15979 1 7.4 1H10.6C12.8402 1 13.9603 1 14.816 1.43597C15.5686 1.81947 16.1805 2.43139 16.564 3.18404C17 4.03969 17 5.15979 17 7.4V10.6C17 12.8402 17 13.9603 16.564 14.816C16.1805 15.5686 15.5686 16.1805 14.816 16.564C13.9603 17 12.8402 17 10.6 17H7.4C5.15979 17 4.03969 17 3.18404 16.564C2.43139 16.1805 1.81947 15.5686 1.43597 14.816C1 13.9603 1 12.8402 1 10.6V7.4Z" fill="url(#paint0_linear_5617_78238)"/>
+<path d="M7.40039 1.5H10.5996C11.728 1.5 12.5446 1.50029 13.1865 1.55273C13.7434 1.59824 14.1352 1.68127 14.4561 1.81934L14.5889 1.88184C15.1651 2.17543 15.6471 2.62172 15.9834 3.16992L16.1182 3.41113C16.2942 3.75672 16.3953 4.17741 16.4473 4.81348C16.4997 5.4554 16.5 6.27204 16.5 7.40039V10.5996C16.5 11.728 16.4997 12.5446 16.4473 13.1865C16.4018 13.7434 16.3187 14.1352 16.1807 14.4561L16.1182 14.5889C15.8246 15.1651 15.3783 15.6471 14.8301 15.9834L14.5889 16.1182C14.2433 16.2942 13.8226 16.3953 13.1865 16.4473C12.5446 16.4997 11.728 16.5 10.5996 16.5H7.40039C6.27204 16.5 5.4554 16.4997 4.81348 16.4473C4.2566 16.4018 3.8648 16.3187 3.54395 16.1807L3.41113 16.1182C2.83494 15.8246 2.35287 15.3783 2.0166 14.8301L1.88184 14.5889C1.70575 14.2433 1.60471 13.8226 1.55273 13.1865C1.50029 12.5446 1.5 11.728 1.5 10.5996V7.40039C1.5 6.27204 1.50029 5.4554 1.55273 4.81348C1.59824 4.2566 1.68127 3.8648 1.81934 3.54395L1.88184 3.41113C2.17543 2.83494 2.62172 2.35287 3.16992 2.0166L3.41113 1.88184C3.75672 1.70575 4.17741 1.60471 4.81348 1.55273C5.4554 1.50029 6.27204 1.5 7.40039 1.5Z" stroke="#101828" stroke-opacity="0.08"/>
+<g filter="url(#filter0_d_5617_78238)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 5.5C7.067 5.5 5.5 7.067 5.5 9C5.5 10.933 7.067 12.5 9 12.5C10.2949 12.5 11.4261 11.7971 12.032 10.7496C12.1703 10.5106 12.4762 10.4289 12.7152 10.5672C12.9542 10.7055 13.0359 11.0113 12.8977 11.2504C12.1204 12.5941 10.6662 13.5 9 13.5C6.68372 13.5 4.77619 11.75 4.52746 9.5H4C3.72386 9.5 3.5 9.27614 3.5 9C3.5 8.72386 3.72386 8.5 4 8.5H4.52746C4.77619 6.25002 6.68372 4.5 9 4.5C10.6662 4.5 12.1204 5.40588 12.8977 6.74964C13.0359 6.98867 12.9542 7.29454 12.7152 7.43281C12.4762 7.57107 12.1703 7.48939 12.032 7.25036C11.4261 6.20291 10.2949 5.5 9 5.5ZM9 7.5C8.17157 7.5 7.5 8.17157 7.5 9C7.5 9.82841 8.17158 10.5 9 10.5C9.82841 10.5 10.5 9.82841 10.5 9C10.5 8.17158 9.82841 7.5 9 7.5ZM6.5 9C6.5 7.61929 7.61929 6.5 9 6.5C10.2095 6.5 11.2184 7.35888 11.45 8.5H14C14.2761 8.5 14.5 8.72386 14.5 9C14.5 9.27614 14.2761 9.5 14 9.5H11.45C11.2183 10.6411 10.2095 11.5 9 11.5C7.61928 11.5 6.5 10.3807 6.5 9Z" fill="url(#paint1_linear_5617_78238)" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_d_5617_78238" x="3" y="4.25" width="12" height="10" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="0.25"/>
+<feGaussianBlur stdDeviation="0.25"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_5617_78238"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_5617_78238" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_5617_78238" x1="1" y1="1" x2="17" y2="17" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.12"/>
+<stop offset="1" stop-color="white" stop-opacity="0.08"/>
+</linearGradient>
+<linearGradient id="paint1_linear_5617_78238" x1="9" y1="4.5" x2="9" y2="13.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.9"/>
+</linearGradient>
+</defs>
+</svg>
--- a/web/app/components/base/icons/assets/public/pipeline/pipeline-fill.svg
+++ b/web/app/components/base/icons/assets/public/pipeline/pipeline-fill.svg
@ -0,0 +1,11 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="pipeline-fill">
+<g id="Vector">
+<path d="M3.7501 2.56885C2.6835 2.56885 1.81885 3.4335 1.81885 4.5001C1.81885 5.5667 2.6835 6.43135 3.7501 6.43135H6.0001C7.0667 6.43135 7.93135 5.5667 7.93135 4.5001C7.93135 3.4335 7.0667 2.56885 6.0001 2.56885H3.7501Z" fill="#155AEF"/>
+<path d="M11.2501 7.06885C10.1835 7.06885 9.31885 7.9335 9.31885 9.0001C9.31885 10.0667 10.1835 10.9313 11.2501 10.9313H13.5001C14.5667 10.9313 15.4313 10.0667 15.4313 9.0001C15.4313 7.9335 14.5667 7.06885 13.5001 7.06885H11.2501Z" fill="#155AEF"/>
+<path d="M1.81885 13.5001C1.81885 12.4335 2.6835 11.5688 3.7501 11.5688H6.0001C7.0667 11.5688 7.93135 12.4335 7.93135 13.5001C7.93135 14.5667 7.0667 15.4313 6.0001 15.4313H3.7501C2.6835 15.4313 1.81885 14.5667 1.81885 13.5001Z" fill="#155AEF"/>
+<path d="M9.75011 5.25011H9.00011V3.75011H9.75011C10.9927 3.75011 12.0001 4.75747 12.0001 6.00011H10.5001C10.5001 5.58589 10.1643 5.25011 9.75011 5.25011Z" fill="#155AEF"/>
+<path d="M12.0001 12.0001C12.0001 13.2427 10.9927 14.2501 9.75011 14.2501H9.00011V12.7501H9.75011C10.1643 12.7501 10.5001 12.4143 10.5001 12.0001H12.0001Z" fill="#155AEF"/>
+</g>
+</g>
+</svg>
--- a/web/app/components/base/icons/assets/public/pipeline/pipeline-line.svg
+++ b/web/app/components/base/icons/assets/public/pipeline/pipeline-line.svg
@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="pipeline-line">
+<path id="Vector" d="M3.75 15.75C2.50733 15.75 1.5 14.7426 1.5 13.5C1.5 12.2574 2.50733 11.25 3.75 11.25H6C6.97943 11.25 7.81268 11.8758 8.12175 12.7493L9 12.75C9.825 12.75 10.5 12.075 10.5 11.25L10.4993 11.1217C9.6258 10.8127 9 9.97942 9 9C9 8.02058 9.6258 7.18732 10.4993 6.87825L10.5 6.75C10.5 5.925 9.825 5.25 9 5.25L8.12197 5.24993C7.81313 6.12383 6.97973 6.75 6 6.75L3.75 6.75C2.50733 6.75 1.5 5.74268 1.5 4.5C1.5 3.25733 2.50732 2.25 3.75 2.25L6 2.25C6.97942 2.25 7.81268 2.8758 8.12175 3.74932L9 3.75C10.6575 3.75 12 5.0925 12 6.75L13.5 6.75C14.7426 6.75 15.75 7.75732 15.75 9C15.75 10.2427 14.7426 11.25 13.5 11.25H12C12 12.9069 10.6569 14.25 9 14.25L8.12198 14.2499C7.81313 15.1239 6.97973 15.75 6 15.75H3.75ZM3.75 5.25L6 5.25C6.41423 5.25 6.75 4.91423 6.75 4.5C6.75 4.08578 6.41423 3.75 6 3.75L3.75 3.75C3.33578 3.75 3 4.08578 3 4.5C3 4.91423 3.33578 5.25 3.75 5.25ZM11.25 9.75H13.5C13.9142 9.75 14.25 9.41422 14.25 9C14.25 8.58577 13.9142 8.25 13.5 8.25L11.25 8.25C10.8358 8.25 10.5 8.58577 10.5 9C10.5 9.41422 10.8358 9.75 11.25 9.75ZM3.75 14.25H6C6.41423 14.25 6.75 13.9142 6.75 13.5C6.75 13.0858 6.41423 12.75 6 12.75H3.75C3.33578 12.75 3 13.0858 3 13.5C3 13.9142 3.33578 14.25 3.75 14.25Z" fill="#495464"/>
+</g>
+</svg>
--- a/web/app/components/base/icons/src/public/knowledge/ExternalKnowledgeBase.json
+++ b/web/app/components/base/icons/src/public/knowledge/ExternalKnowledgeBase.json
@ -0,0 +1,237 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "18",
+			"height": "18",
+			"viewBox": "0 0 18 18",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M10.5996 0.5C11.7113 0.5 12.5755 0.500118 13.2676 0.556641C13.9655 0.61366 14.5329 0.730378 15.043 0.990234L15.3525 1.16406C16.0576 1.59644 16.6322 2.21605 17.0098 2.95703L17.1006 3.15137C17.2979 3.61108 17.3935 4.12184 17.4434 4.73242C17.4999 5.42447 17.5 6.28869 17.5 7.40039V10.5996C17.5 11.7113 17.4999 12.5755 17.4434 13.2676C17.3935 13.8782 17.2979 14.3889 17.1006 14.8486L17.0098 15.043C16.6322 15.7839 16.0576 16.4036 15.3525 16.8359L15.043 17.0098C14.5329 17.2696 13.9655 17.3863 13.2676 17.4434C12.5755 17.4999 11.7113 17.5 10.5996 17.5H7.40039C6.28869 17.5 5.42447 17.4999 4.73242 17.4434C4.12184 17.3935 3.61108 17.2979 3.15137 17.1006L2.95703 17.0098C2.21605 16.6322 1.59644 16.0576 1.16406 15.3525L0.990234 15.043C0.730378 14.5329 0.61366 13.9655 0.556641 13.2676C0.500118 12.5755 0.5 11.7113 0.5 10.5996V7.40039C0.5 6.28869 0.500118 5.42447 0.556641 4.73242C0.61366 4.03453 0.730378 3.46707 0.990234 2.95703L1.16406 2.64746C1.59644 1.94243 2.21605 1.36778 2.95703 0.990234L3.15137 0.899414C3.61108 0.702129 4.12184 0.606527 4.73242 0.556641C5.42447 0.500118 6.28869 0.5 7.40039 0.5H10.5996Z",
+					"stroke": "white"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M1 7.4C1 5.15979 1 4.03969 1.43597 3.18404C1.81947 2.43139 2.43139 1.81947 3.18404 1.43597C4.03969 1 5.15979 1 7.4 1H10.6C12.8402 1 13.9603 1 14.816 1.43597C15.5686 1.81947 16.1805 2.43139 16.564 3.18404C17 4.03969 17 5.15979 17 7.4V10.6C17 12.8402 17 13.9603 16.564 14.816C16.1805 15.5686 15.5686 16.1805 14.816 16.564C13.9603 17 12.8402 17 10.6 17H7.4C5.15979 17 4.03969 17 3.18404 16.564C2.43139 16.1805 1.81947 15.5686 1.43597 14.816C1 13.9603 1 12.8402 1 10.6V7.4Z",
+					"fill": "#828DAD"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M1 7.4C1 5.15979 1 4.03969 1.43597 3.18404C1.81947 2.43139 2.43139 1.81947 3.18404 1.43597C4.03969 1 5.15979 1 7.4 1H10.6C12.8402 1 13.9603 1 14.816 1.43597C15.5686 1.81947 16.1805 2.43139 16.564 3.18404C17 4.03969 17 5.15979 17 7.4V10.6C17 12.8402 17 13.9603 16.564 14.816C16.1805 15.5686 15.5686 16.1805 14.816 16.564C13.9603 17 12.8402 17 10.6 17H7.4C5.15979 17 4.03969 17 3.18404 16.564C2.43139 16.1805 1.81947 15.5686 1.43597 14.816C1 13.9603 1 12.8402 1 10.6V7.4Z",
+					"fill": "url(#paint0_linear_5617_78238)"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"d": "M7.40039 1.5H10.5996C11.728 1.5 12.5446 1.50029 13.1865 1.55273C13.7434 1.59824 14.1352 1.68127 14.4561 1.81934L14.5889 1.88184C15.1651 2.17543 15.6471 2.62172 15.9834 3.16992L16.1182 3.41113C16.2942 3.75672 16.3953 4.17741 16.4473 4.81348C16.4997 5.4554 16.5 6.27204 16.5 7.40039V10.5996C16.5 11.728 16.4997 12.5446 16.4473 13.1865C16.4018 13.7434 16.3187 14.1352 16.1807 14.4561L16.1182 14.5889C15.8246 15.1651 15.3783 15.6471 14.8301 15.9834L14.5889 16.1182C14.2433 16.2942 13.8226 16.3953 13.1865 16.4473C12.5446 16.4997 11.728 16.5 10.5996 16.5H7.40039C6.27204 16.5 5.4554 16.4997 4.81348 16.4473C4.2566 16.4018 3.8648 16.3187 3.54395 16.1807L3.41113 16.1182C2.83494 15.8246 2.35287 15.3783 2.0166 14.8301L1.88184 14.5889C1.70575 14.2433 1.60471 13.8226 1.55273 13.1865C1.50029 12.5446 1.5 11.728 1.5 10.5996V7.40039C1.5 6.27204 1.50029 5.4554 1.55273 4.81348C1.59824 4.2566 1.68127 3.8648 1.81934 3.54395L1.88184 3.41113C2.17543 2.83494 2.62172 2.35287 3.16992 2.0166L3.41113 1.88184C3.75672 1.70575 4.17741 1.60471 4.81348 1.55273C5.4554 1.50029 6.27204 1.5 7.40039 1.5Z",
+					"stroke": "#101828",
+					"stroke-opacity": "0.08"
+				},
+				"children": []
+			},
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"filter": "url(#filter0_d_5617_78238)"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"fill-rule": "evenodd",
+							"clip-rule": "evenodd",
+							"d": "M9 5.5C7.067 5.5 5.5 7.067 5.5 9C5.5 10.933 7.067 12.5 9 12.5C10.2949 12.5 11.4261 11.7971 12.032 10.7496C12.1703 10.5106 12.4762 10.4289 12.7152 10.5672C12.9542 10.7055 13.0359 11.0113 12.8977 11.2504C12.1204 12.5941 10.6662 13.5 9 13.5C6.68372 13.5 4.77619 11.75 4.52746 9.5H4C3.72386 9.5 3.5 9.27614 3.5 9C3.5 8.72386 3.72386 8.5 4 8.5H4.52746C4.77619 6.25002 6.68372 4.5 9 4.5C10.6662 4.5 12.1204 5.40588 12.8977 6.74964C13.0359 6.98867 12.9542 7.29454 12.7152 7.43281C12.4762 7.57107 12.1703 7.48939 12.032 7.25036C11.4261 6.20291 10.2949 5.5 9 5.5ZM9 7.5C8.17157 7.5 7.5 8.17157 7.5 9C7.5 9.82841 8.17158 10.5 9 10.5C9.82841 10.5 10.5 9.82841 10.5 9C10.5 8.17158 9.82841 7.5 9 7.5ZM6.5 9C6.5 7.61929 7.61929 6.5 9 6.5C10.2095 6.5 11.2184 7.35888 11.45 8.5H14C14.2761 8.5 14.5 8.72386 14.5 9C14.5 9.27614 14.2761 9.5 14 9.5H11.45C11.2183 10.6411 10.2095 11.5 9 11.5C7.61928 11.5 6.5 10.3807 6.5 9Z",
+							"fill": "url(#paint1_linear_5617_78238)",
+							"shape-rendering": "crispEdges"
+						},
+						"children": []
+					}
+				]
+			},
+			{
+				"type": "element",
+				"name": "defs",
+				"attributes": {},
+				"children": [
+					{
+						"type": "element",
+						"name": "filter",
+						"attributes": {
+							"id": "filter0_d_5617_78238",
+							"x": "3",
+							"y": "4.25",
+							"width": "12",
+							"height": "10",
+							"filterUnits": "userSpaceOnUse",
+							"color-interpolation-filters": "sRGB"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "feFlood",
+								"attributes": {
+									"flood-opacity": "0",
+									"result": "BackgroundImageFix"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "feColorMatrix",
+								"attributes": {
+									"in": "SourceAlpha",
+									"type": "matrix",
+									"values": "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0",
+									"result": "hardAlpha"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "feOffset",
+								"attributes": {
+									"dy": "0.25"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "feGaussianBlur",
+								"attributes": {
+									"stdDeviation": "0.25"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "feComposite",
+								"attributes": {
+									"in2": "hardAlpha",
+									"operator": "out"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "feColorMatrix",
+								"attributes": {
+									"type": "matrix",
+									"values": "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "feBlend",
+								"attributes": {
+									"mode": "normal",
+									"in2": "BackgroundImageFix",
+									"result": "effect1_dropShadow_5617_78238"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "feBlend",
+								"attributes": {
+									"mode": "normal",
+									"in": "SourceGraphic",
+									"in2": "effect1_dropShadow_5617_78238",
+									"result": "shape"
+								},
+								"children": []
+							}
+						]
+					},
+					{
+						"type": "element",
+						"name": "linearGradient",
+						"attributes": {
+							"id": "paint0_linear_5617_78238",
+							"x1": "1",
+							"y1": "1",
+							"x2": "17",
+							"y2": "17",
+							"gradientUnits": "userSpaceOnUse"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "stop",
+								"attributes": {
+									"stop-color": "white",
+									"stop-opacity": "0.12"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "stop",
+								"attributes": {
+									"offset": "1",
+									"stop-color": "white",
+									"stop-opacity": "0.08"
+								},
+								"children": []
+							}
+						]
+					},
+					{
+						"type": "element",
+						"name": "linearGradient",
+						"attributes": {
+							"id": "paint1_linear_5617_78238",
+							"x1": "9",
+							"y1": "4.5",
+							"x2": "9",
+							"y2": "13.5",
+							"gradientUnits": "userSpaceOnUse"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "stop",
+								"attributes": {
+									"stop-color": "white"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "stop",
+								"attributes": {
+									"offset": "1",
+									"stop-color": "white",
+									"stop-opacity": "0.9"
+								},
+								"children": []
+							}
+						]
+					}
+				]
+			}
+		]
+	},
+	"name": "ExternalKnowledgeBase"
+}
--- a/web/app/components/base/icons/src/public/knowledge/ExternalKnowledgeBase.tsx
+++ b/web/app/components/base/icons/src/public/knowledge/ExternalKnowledgeBase.tsx
@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './ExternalKnowledgeBase.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'ExternalKnowledgeBase'
+
+export default Icon
--- a/web/app/components/base/icons/src/public/knowledge/index.ts
+++ b/web/app/components/base/icons/src/public/knowledge/index.ts
@ -1,5 +1,6 @@
 export { default as Chunk } from './Chunk'
 export { default as Collapse } from './Collapse'
+export { default as ExternalKnowledgeBase } from './ExternalKnowledgeBase'
 export { default as File } from './File'
 export { default as GeneralType } from './GeneralType'
 export { default as General } from './General'
--- a/web/app/components/base/icons/src/public/pipeline/PipelineFill.json
+++ b/web/app/components/base/icons/src/public/pipeline/PipelineFill.json
@ -0,0 +1,80 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "18",
+			"height": "18",
+			"viewBox": "0 0 18 18",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "pipeline-fill"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "g",
+						"attributes": {
+							"id": "Vector"
+						},
+						"children": [
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M3.7501 2.56885C2.6835 2.56885 1.81885 3.4335 1.81885 4.5001C1.81885 5.5667 2.6835 6.43135 3.7501 6.43135H6.0001C7.0667 6.43135 7.93135 5.5667 7.93135 4.5001C7.93135 3.4335 7.0667 2.56885 6.0001 2.56885H3.7501Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M11.2501 7.06885C10.1835 7.06885 9.31885 7.9335 9.31885 9.0001C9.31885 10.0667 10.1835 10.9313 11.2501 10.9313H13.5001C14.5667 10.9313 15.4313 10.0667 15.4313 9.0001C15.4313 7.9335 14.5667 7.06885 13.5001 7.06885H11.2501Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M1.81885 13.5001C1.81885 12.4335 2.6835 11.5688 3.7501 11.5688H6.0001C7.0667 11.5688 7.93135 12.4335 7.93135 13.5001C7.93135 14.5667 7.0667 15.4313 6.0001 15.4313H3.7501C2.6835 15.4313 1.81885 14.5667 1.81885 13.5001Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M9.75011 5.25011H9.00011V3.75011H9.75011C10.9927 3.75011 12.0001 4.75747 12.0001 6.00011H10.5001C10.5001 5.58589 10.1643 5.25011 9.75011 5.25011Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							},
+							{
+								"type": "element",
+								"name": "path",
+								"attributes": {
+									"d": "M12.0001 12.0001C12.0001 13.2427 10.9927 14.2501 9.75011 14.2501H9.00011V12.7501H9.75011C10.1643 12.7501 10.5001 12.4143 10.5001 12.0001H12.0001Z",
+									"fill": "currentColor"
+								},
+								"children": []
+							}
+						]
+					}
+				]
+			}
+		]
+	},
+	"name": "PipelineFill"
+}
--- a/web/app/components/base/icons/src/public/pipeline/PipelineFill.tsx
+++ b/web/app/components/base/icons/src/public/pipeline/PipelineFill.tsx
@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './PipelineFill.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'PipelineFill'
+
+export default Icon
--- a/web/app/components/base/icons/src/public/pipeline/PipelineLine.json
+++ b/web/app/components/base/icons/src/public/pipeline/PipelineLine.json
@ -0,0 +1,36 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "18",
+			"height": "18",
+			"viewBox": "0 0 18 18",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "pipeline-line"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Vector",
+							"d": "M3.75 15.75C2.50733 15.75 1.5 14.7426 1.5 13.5C1.5 12.2574 2.50733 11.25 3.75 11.25H6C6.97943 11.25 7.81268 11.8758 8.12175 12.7493L9 12.75C9.825 12.75 10.5 12.075 10.5 11.25L10.4993 11.1217C9.6258 10.8127 9 9.97942 9 9C9 8.02058 9.6258 7.18732 10.4993 6.87825L10.5 6.75C10.5 5.925 9.825 5.25 9 5.25L8.12197 5.24993C7.81313 6.12383 6.97973 6.75 6 6.75L3.75 6.75C2.50733 6.75 1.5 5.74268 1.5 4.5C1.5 3.25733 2.50732 2.25 3.75 2.25L6 2.25C6.97942 2.25 7.81268 2.8758 8.12175 3.74932L9 3.75C10.6575 3.75 12 5.0925 12 6.75L13.5 6.75C14.7426 6.75 15.75 7.75732 15.75 9C15.75 10.2427 14.7426 11.25 13.5 11.25H12C12 12.9069 10.6569 14.25 9 14.25L8.12198 14.2499C7.81313 15.1239 6.97973 15.75 6 15.75H3.75ZM3.75 5.25L6 5.25C6.41423 5.25 6.75 4.91423 6.75 4.5C6.75 4.08578 6.41423 3.75 6 3.75L3.75 3.75C3.33578 3.75 3 4.08578 3 4.5C3 4.91423 3.33578 5.25 3.75 5.25ZM11.25 9.75H13.5C13.9142 9.75 14.25 9.41422 14.25 9C14.25 8.58577 13.9142 8.25 13.5 8.25L11.25 8.25C10.8358 8.25 10.5 8.58577 10.5 9C10.5 9.41422 10.8358 9.75 11.25 9.75ZM3.75 14.25H6C6.41423 14.25 6.75 13.9142 6.75 13.5C6.75 13.0858 6.41423 12.75 6 12.75H3.75C3.33578 12.75 3 13.0858 3 13.5C3 13.9142 3.33578 14.25 3.75 14.25Z",
+							"fill": "currentColor"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "PipelineLine"
+}
--- a/web/app/components/base/icons/src/public/pipeline/PipelineLine.tsx
+++ b/web/app/components/base/icons/src/public/pipeline/PipelineLine.tsx
@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './PipelineLine.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = (
+  {
+    ref,
+    ...props
+  }: React.SVGProps<SVGSVGElement> & {
+    ref?: React.RefObject<React.MutableRefObject<HTMLOrSVGElement>>;
+  },
+) => <IconBase {...props} ref={ref} data={data as IconData} />
+
+Icon.displayName = 'PipelineLine'
+
+export default Icon
--- a/web/app/components/base/icons/src/public/pipeline/index.ts
+++ b/web/app/components/base/icons/src/public/pipeline/index.ts
@ -1 +1,3 @@
 export { default as InputField } from './InputField'
+export { default as PipelineFill } from './PipelineFill'
+export { default as PipelineLine } from './PipelineLine'
--- a/web/app/components/datasets/list/dataset-card/dataset-card-deprecated.tsx
+++ b/web/app/components/datasets/list/dataset-card/dataset-card-deprecated.tsx
--- a/web/app/components/datasets/list/dataset-card/index.tsx
+++ b/web/app/components/datasets/list/dataset-card/index.tsx
@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import type { DataSet } from '@/models/datasets'
 import { ChunkingMode } from '@/models/datasets'
 import { useAppContext } from '@/context/app-context'
-import { General, Graph, ParentChild, Qa } from '@/app/components/base/icons/src/public/knowledge'
+import { ExternalKnowledgeBase, General, Graph, ParentChild, Qa } from '@/app/components/base/icons/src/public/knowledge'
 import { useKnowledge } from '@/hooks/use-knowledge'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import type { Tag } from '@/app/components/base/tag-management/constant'
@ -21,14 +21,17 @@ import Confirm from '@/app/components/base/confirm'
 import Toast from '@/app/components/base/toast'
 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'

 const EXTERNAL_PROVIDER = 'external'

-export const DOC_FORM_ICON: Record<ChunkingMode, React.ComponentType<{ className: string }>> = {
+export const DOC_FORM_ICON: Record<ChunkingMode | 'external', React.ComponentType<{ className: string }>> = {
  [ChunkingMode.text]: General,
  [ChunkingMode.qa]: Qa,
  [ChunkingMode.parentChild]: ParentChild,
  [ChunkingMode.graph]: Graph,
+  external: ExternalKnowledgeBase,
 }

 export const DOC_FORM_TEXT: Record<ChunkingMode, string> = {
@ -62,7 +65,7 @@ const DatasetCard = ({
  const isExternalProvider = useMemo(() => {
    return dataset.provider === EXTERNAL_PROVIDER
  }, [dataset.provider])
-  const Icon = DOC_FORM_ICON[dataset.doc_form] || General
+  const Icon = isExternalProvider ? DOC_FORM_ICON.external : (DOC_FORM_ICON[dataset.doc_form] || General)
  const { formatIndexingTechniqueAndMethod } = useKnowledge()
  const documentCount = useMemo(() => {
    const availableDocCount = dataset.available_document_count || dataset.document_count
@ -116,10 +119,7 @@ const DatasetCard = ({
  return (
    <>
      <div
-        className={cn(
-          'group relative col-span-1 flex h-[166px] cursor-pointer flex-col rounded-xl border-[0.5px] border-solid border-components-card-border bg-components-card-bg shadow-xs shadow-shadow-shadow-3 transition-all duration-200 ease-in-out hover:bg-components-card-bg-alt hover:shadow-md hover:shadow-shadow-shadow-5',
-          !dataset.embedding_available && 'opacity-30',
-        )}
+        className='group relative col-span-1 flex h-[166px] cursor-pointer flex-col rounded-xl border-[0.5px] border-solid border-components-card-border bg-components-card-bg shadow-xs shadow-shadow-shadow-3 transition-all duration-200 ease-in-out hover:bg-components-card-bg-alt hover:shadow-md hover:shadow-shadow-shadow-5'
        data-disable-nprogress={true}
        onClick={(e) => {
          e.preventDefault()
@ -128,9 +128,19 @@ const DatasetCard = ({
            : push(`/datasets/${dataset.id}/documents`)
        }}
      >
-        <div className='flex items-center gap-x-3 px-4 pb-2 pt-4'>
-          <div className='relative flex size-10 shrink-0 items-center justify-center rounded-[10px] border-[0.5px] border-divider-regular bg-components-icon-bg-violet-soft'>
-            <span className='title-4xl-semi-bold'>📙</span>
+        {!dataset.embedding_available && (
+          <CornerLabel
+            label='Unavailable'
+            className='absolute right-0 top-0 z-10'
+            labelClassName='rounded-tr-xl' />
+        )}
+        <div className={cn('flex items-center gap-x-3 px-4 pb-2 pt-4', !dataset.embedding_available && 'opacity-30')}>
+          <div className='relative shrink-0'>
+            <AppIcon
+              iconType='emoji'
+              icon='📙'
+              size='large'
+            />
            <div className='absolute -bottom-1 -right-1 z-10'>
              <Icon className='size-4' />
            </div>
@ -138,16 +148,25 @@ const DatasetCard = ({
          <div className='flex grow flex-col gap-y-1 py-px'>
            <div className='system-md-semibold truncate text-text-secondary' title={dataset.name}>{dataset.name}</div>
            <div className='system-2xs-medium-uppercase flex items-center gap-x-3 text-text-tertiary'>
-              <span>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}`)}</span>
-              <span>{formatIndexingTechniqueAndMethod(dataset.indexing_technique, dataset.retrieval_model_dict?.search_method)}</span>
+              {!isExternalProvider ? (
+                <>
+                  <span>{t(`dataset.chunkingMode.${DOC_FORM_TEXT[dataset.doc_form]}`)}</span>
+                  <span>{formatIndexingTechniqueAndMethod(dataset.indexing_technique, dataset.retrieval_model_dict?.search_method)}</span>
+                </>
+              ) : (
+                <span>{t('dataset.externalKnowledgeBase')}</span>
+              )}
            </div>
          </div>
        </div>
-        <div className='system-xs-regular line-clamp-2 h-10 px-4 py-1 text-text-tertiary' title={dataset.description}>
+        <div
+          className={cn('system-xs-regular line-clamp-2 h-10 px-4 py-1 text-text-tertiary', !dataset.embedding_available && 'opacity-30')}
+          title={dataset.description}
+        >
          {dataset.description}
        </div>
        <div
-          className='relative w-full px-3'
+          className={cn('relative w-full px-3', !dataset.embedding_available && 'opacity-30')}
          onClick={(e) => {
            e.stopPropagation()
            e.preventDefault()
@ -178,7 +197,12 @@ const DatasetCard = ({
            )}
          />
        </div>
-        <div className='flex items-center gap-x-3 px-4 pb-3 pt-2 text-text-tertiary'>
+        <div
+          className={cn(
+            'flex items-center gap-x-3 px-4 pb-3 pt-2 text-text-tertiary',
+            !dataset.embedding_available && 'opacity-30',
+          )}
+        >
          <Tooltip popupContent={documentCountTooltip} >
            <div className='flex items-center gap-x-1'>
              <RiFileTextFill className='size-3 text-text-quaternary'/>
@ -196,7 +220,7 @@ const DatasetCard = ({
          <span className='system-xs-regular text-divider-deep'>/</span>
          <span className='system-xs-regular'>{`${t('dataset.updated')} ${formatTimeFromNow(dataset.updated_at)}`}</span>
        </div>
-        <div className='absolute right-2 top-2 hidden group-hover:block'>
+        <div className='absolute right-2 top-2 z-20 hidden group-hover:block'>
            <CustomPopover
              htmlContent={
                <Operations
@ -212,11 +236,13 @@ const DatasetCard = ({
              position='br'
              trigger='click'
              btnElement={
-                <RiMoreFill className='h-5 w-5 text-text-tertiary' />
+                <div className='flex size-8 items-center justify-center rounded-[10px] hover:bg-state-base-hover'>
+                  <RiMoreFill className='h-5 w-5 text-text-tertiary' />
+                </div>
              }
              btnClassName={open =>
                cn(
-                  'size-9 cursor-pointer justify-center rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0 shadow-lg shadow-shadow-shadow-5 ring-[2px] ring-inset ring-components-actionbar-bg hover:border-components-actionbar-border hover:bg-state-base-hover',
+                  'size-9 cursor-pointer justify-center rounded-[10px] border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0 shadow-lg shadow-shadow-shadow-5 ring-[2px] ring-inset ring-components-actionbar-bg hover:border-components-actionbar-border',
                  open ? 'border-components-actionbar-border bg-state-base-hover' : '',
                )
              }
--- a/web/i18n/en-US/common.ts
+++ b/web/i18n/en-US/common.ts
@ -533,6 +533,7 @@ const translation = {
    viewDoc: 'View documentation',
    relatedApp: 'linked apps',
    noRelatedApp: 'No linked apps',
+    pipeline: 'Pipeline',
  },
  voiceInput: {
    speaking: 'Speak now...',
--- a/web/i18n/en-US/dataset.ts
+++ b/web/i18n/en-US/dataset.ts
@ -22,6 +22,7 @@ const translation = {
  learnHowToWriteGoodKnowledgeDescription: 'Learn how to write a good knowledge description',
  externalAPIPanelDescription: 'The external knowledge API is used to connect to a knowledge base outside of Dify and retrieve knowledge from that knowledge base.',
  externalAPIPanelDocumentation: 'Learn how to create an External Knowledge API',
+  externalKnowledgeBase: 'External Knowledge Base',
  localDocs: 'Local Docs',
  documentCount: ' docs',
  docAllEnabled_one: 'All {{count}} document enabled',
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@ -533,6 +533,7 @@ const translation = {
    viewDoc: '查看文档',
    relatedApp: '个关联应用',
    noRelatedApp: '无关联应用',
+    pipeline: '流水线',
  },
  voiceInput: {
    speaking: '现在讲...',
--- a/web/i18n/zh-Hans/dataset.ts
+++ b/web/i18n/zh-Hans/dataset.ts
@ -22,6 +22,7 @@ const translation = {
  learnHowToWriteGoodKnowledgeDescription: '了解如何编写良好的知识库描述',
  externalAPIPanelDescription: '外部知识库 API 用于连接到 Dify 之外的知识库并从中检索知识。',
  externalAPIPanelDocumentation: '了解如何创建外部知识库 API',
+  externalKnowledgeBase: '外部知识库',
  localDocs: '本地文档',
  documentCount: ' 文档',
  docAllEnabled_one: '所有 {{count}} 个文档均可用',