feat: enhance dataset detail layout with new icon structure and additional document count display

web/app/(commonLayout)/app/(appDetailLayout)/[appId]/layout-main.tsx

@@ -58,8 +58,8 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
   }>>([])
   const systemFeatures = useContextSelector(AppContext, state => state.systemFeatures)
 
-  const getNavigations = useCallback((appId: string, isCurrentWorkspaceEditor: boolean, mode: string) => {
+  const getNavigationConfig = useCallback((appId: string, isCurrentWorkspaceEditor: boolean, mode: string) => {
-    const navs = [
+    const navConfig = [
       ...(isCurrentWorkspaceEditor
         ? [{
           name: t('common.appMenus.promptEng'),
@@ -93,8 +93,8 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
         selectedIcon: RiDashboard2Fill,
       },
     ]
-    return navs
+    return navConfig
-  }, [])
+  }, [t])
 
   useEffect(() => {
     if (appDetail) {
@@ -141,7 +141,7 @@ const AppDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
     }
     else {
       setAppDetail({ ...res, enable_sso: false })
-      setNavigation(getNavigations(appId, isCurrentWorkspaceEditor, res.mode))
+      setNavigation(getNavigationConfig(appId, isCurrentWorkspaceEditor, res.mode))
       if (systemFeatures.enable_web_sso_switch_component && canIEditApp) {
         fetchAppSSO({ appId }).then((ssoRes) => {
           setAppDetail({ ...res, enable_sso: ssoRes.enabled })

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx

@@ -4,9 +4,10 @@ import React, { useEffect, useMemo } from 'react'
 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 {
+  RiApps2AddLine,
+  RiBookOpenLine,
   RiEqualizer2Fill,
   RiEqualizer2Line,
   RiFileTextFill,
@@ -17,7 +18,7 @@ import {
 import {
   PaperClipIcon,
 } from '@heroicons/react/24/outline'
-import { RiApps2AddLine, RiBookOpenLine, RiInformation2Line } from '@remixicon/react'
+import { RiInformation2Line } from '@remixicon/react'
 import classNames from '@/utils/classnames'
 import { fetchDatasetDetail, fetchDatasetRelatedApps } from '@/service/datasets'
 import type { RelatedAppResponse } from '@/models/datasets'
@@ -26,13 +27,14 @@ import Loading from '@/app/components/base/loading'
 import DatasetDetailContext from '@/context/dataset-detail'
 import { DataSourceType } from '@/models/datasets'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
-import { LanguagesSupported } from '@/i18n/language'
 import { useStore } from '@/app/components/app/store'
 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'
+import { Divider } from '@/app/components/base/icons/src/public/knowledge'
+import { LanguagesSupported } from '@/i18n/language'
 
 export type IAppDetailLayoutProps = {
   children: React.ReactNode
@@ -42,83 +44,106 @@ export type IAppDetailLayoutProps = {
 type IExtraInfoProps = {
   isMobile: boolean
   relatedApps?: RelatedAppResponse
+  documentCount?: number
   expand: boolean
 }
 
-const ExtraInfo = ({ isMobile, relatedApps, expand }: IExtraInfoProps) => {
+const ExtraInfo = React.memo(({
+  isMobile,
+  relatedApps,
+  documentCount,
+  expand,
+}: IExtraInfoProps) => {
   const locale = getLocaleOnClient()
-  const [isShowTips, { toggle: toggleTips, set: setShowTips }] = useBoolean(!isMobile)
   const { t } = useTranslation()
 
   const hasRelatedApps = relatedApps?.data && relatedApps?.data?.length > 0
   const relatedAppsTotal = relatedApps?.data?.length || 0
 
-  useEffect(() => {
+  return (
-    setShowTips(!isMobile)
+    <div>
-  }, [isMobile, setShowTips])
+      {hasRelatedApps && (
-
+        <>
-  return <div>
+          {!isMobile && (
-    {hasRelatedApps && (
+            <div className='flex items-center gap-x-0.5'>
-      <>
+              <div className='flex grow flex-col px-2 pb-1.5 pt-1'>
-        {!isMobile && (
+                <div className='system-md-semibold-uppercase text-text-secondary'>
-          <Tooltip
+                  {documentCount || '--'}
-            position='right'
+                </div>
-            noDecoration
+                <div className='system-2xs-medium-uppercase text-text-tertiary'>
-            needsDelay
+                  {t('common.datasetMenus.documents')}
-            popupContent={
+                </div>
-              <LinkedAppsPanel
+              </div>
-                relatedApps={relatedApps.data}
+              <div className='py-2 pl-0.5 pr-1.5'>
-                isMobile={isMobile}
+                <Divider className='text-test-divider-regular h-full w-fit' />
-              />
+              </div>
-            }
+              <div className='flex grow flex-col px-2 pb-1.5 pt-1'>
-          >
+                <div className='system-md-semibold-uppercase text-text-secondary'>
-            <div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 text-text-secondary'>
+                  {relatedAppsTotal || '--'}
-              <span>{relatedAppsTotal || '--'} {t('common.datasetMenus.relatedApp')}</span>
+                </div>
-              <RiInformation2Line className='h-4 w-4' />
+                <Tooltip
+                  position='bottom-start'
+                  noDecoration
+                  needsDelay
+                  popupContent={
+                    <LinkedAppsPanel
+                      relatedApps={relatedApps.data}
+                      isMobile={isMobile}
+                    />
+                  }
+                >
+                  <div className='system-2xs-medium-uppercase flex cursor-pointer items-center gap-x-0.5 text-text-tertiary'>
+                    <span>{t('common.datasetMenus.relatedApp')}</span>
+                    <RiInformation2Line className='size-3' />
+                  </div>
+                </Tooltip>
+              </div>
             </div>
-          </Tooltip>
+          )}
-        )}
 
-        {isMobile && <div className={classNames('uppercase text-xs text-text-tertiary font-medium pb-2 pt-4', 'flex items-center justify-center !px-0 gap-1')}>
+          {isMobile && (
-          {relatedAppsTotal || '--'}
+            <div className={classNames('uppercase text-xs text-text-tertiary font-medium pb-2 pt-4', 'flex items-center justify-center !px-0 gap-1')}>
-          <PaperClipIcon className='h-4 w-4 text-text-secondary' />
+              {relatedAppsTotal || '--'}
-        </div>}
+              <PaperClipIcon className='h-4 w-4 text-text-secondary' />
-      </>
-    )}
-    {!hasRelatedApps && !expand && (
-      <Tooltip
-        position='right'
-        noDecoration
-        needsDelay
-        popupContent={
-          <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='h-4 w-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={
+      {!hasRelatedApps && !expand && (
-                locale === LanguagesSupported[1]
+        <Tooltip
-                  ? 'https://docs.dify.ai/v/zh-hans/guides/knowledge-base/integrate-knowledge-within-application'
+          position='right'
-                  : 'https://docs.dify.ai/guides/knowledge-base/integrate-knowledge-within-application'
+          noDecoration
-              }
+          needsDelay
-              target='_blank' rel='noopener noreferrer'
+          popupContent={
-            >
+            <div className='w-[240px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-4'>
-              <RiBookOpenLine className='mr-1 text-text-accent' />
+              <div className='inline-flex rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle p-2'>
-              {t('common.datasetMenus.viewDoc')}
+                <RiApps2AddLine className='h-4 w-4 text-text-tertiary' />
-            </a>
+              </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={
+                  locale === LanguagesSupported[1]
+                    ? 'https://docs.dify.ai/v/zh-hans/guides/knowledge-base/integrate-knowledge-within-application'
+                    : 'https://docs.dify.ai/guides/knowledge-base/integrate-knowledge-within-application'
+                }
+                target='_blank' rel='noopener noreferrer'
+              >
+                <RiBookOpenLine className='mr-1 text-text-accent' />
+                {t('common.datasetMenus.viewDoc')}
+              </a>
+            </div>
+          }
+        >
+          <div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 text-text-secondary'>
+            <span>{t('common.datasetMenus.noRelatedApp')}</span>
+            <RiInformation2Line className='h-4 w-4' />
           </div>
-        }
+        </Tooltip>
-      >
+      )}
-        <div className='system-xs-medium-uppercase inline-flex cursor-pointer items-center space-x-1 text-text-secondary'>
+    </div>
-          <span>{t('common.datasetMenus.noRelatedApp')}</span>
+  )
-          <RiInformation2Line className='h-4 w-4' />
+})
-        </div>
-      </Tooltip>
-    )}
-  </div>
-}
 
 const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
   const {
@@ -185,12 +210,16 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
     <div className='flex grow overflow-hidden'>
       {!hideSideBar && <AppSideBar
         title={datasetRes?.name || '--'}
-        icon={datasetRes?.icon || 'https://static.dify.ai/images/dataset-default-icon.png'}
+        icon={datasetRes?.icon_info?.icon || 'https://static.dify.ai/images/dataset-default-icon.png'}
-        icon_background={datasetRes?.icon_background || '#F5F5F5'}
+        icon_background={datasetRes?.icon_info?.icon_background || '#F5F5F5'}
         desc={datasetRes?.description || '--'}
         isExternal={datasetRes?.provider === 'external'}
         navigation={navigation}
-        extraInfo={!isCurrentWorkspaceDatasetOperator ? mode => <ExtraInfo isMobile={mode === 'collapse'} relatedApps={relatedApps} expand={mode === 'collapse'} /> : undefined}
+        extraInfo={
+          !isCurrentWorkspaceDatasetOperator
+            ? mode => <ExtraInfo isMobile={mode === 'collapse'} relatedApps={relatedApps} expand={mode === 'collapse'} documentCount={datasetRes?.document_count} />
+            : undefined
+        }
         iconType={datasetRes?.data_source_type === DataSourceType.NOTION ? 'notion' : 'dataset'}
       />}
       <DatasetDetailContext.Provider value={{

web/app/components/app-sidebar/index.tsx

@@ -26,7 +26,16 @@ export type IAppDetailNavProps = {
   extraInfo?: (modeState: string) => React.ReactNode
 }
 
-const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigation, extraInfo, iconType = 'app' }: IAppDetailNavProps) => {
+const AppDetailNav = ({
+  title,
+  desc,
+  isExternal,
+  icon,
+  icon_background,
+  navigation,
+  extraInfo,
+  iconType = 'app',
+}: IAppDetailNavProps) => {
   const { appSidebarExpand, setAppSidebarExpand } = useAppStore(useShallow(state => ({
     appSidebarExpand: state.appSidebarExpand,
     setAppSidebarExpand: state.setAppSidebarExpand,

web/app/components/base/icons/assets/public/knowledge/divider.svg

@@ -0,0 +1,3 @@
+<svg width="6" height="30" viewBox="0 0 6 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Line 3" d="M1.44595 28.7455L5.49125 1.00004" stroke="#101828" stroke-opacity="0.08" stroke-linecap="round"/>
+</svg>

web/app/components/base/icons/src/public/knowledge/Divider.json

@@ -0,0 +1,29 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "6",
+			"height": "30",
+			"viewBox": "0 0 6 30",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "path",
+				"attributes": {
+					"id": "Line 3",
+					"d": "M1.44595 28.7455L5.49125 1.00004",
+					"stroke": "currentColor",
+					"stroke-opacity": "0.08",
+					"stroke-linecap": "round"
+				},
+				"children": []
+			}
+		]
+	},
+	"name": "Divider"
+}

web/app/components/base/icons/src/public/knowledge/Divider.tsx

@@ -0,0 +1,20 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Divider.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 = 'Divider'
+
+export default Icon

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 Divider } from './Divider'
 export { default as ExternalKnowledgeBase } from './ExternalKnowledgeBase'
 export { default as File } from './File'
 export { default as GeneralType } from './GeneralType'

web/app/components/base/linked-apps-panel/index.tsx

@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React from 'react'
 import Link from 'next/link'
-import { useTranslation } from 'react-i18next'
 import { RiArrowRightUpLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
 import AppIcon from '@/app/components/base/app-icon'
@@ -49,10 +48,8 @@ const LinkedAppsPanel: FC<Props> = ({
   relatedApps,
   isMobile,
 }) => {
-  const { t } = useTranslation()
   return (
     <div className='w-[320px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg  backdrop-blur-[5px]'>
-      <div className='system-xs-medium-uppercase mb-0.5 mt-1 pl-2 text-text-tertiary'>{relatedApps.length || '--'} {t('common.datasetMenus.relatedApp')}</div>
       {relatedApps.map((item, index) => (
         <LikedItem key={index} detail={item} isMobile={isMobile} />
       ))}

web/models/datasets.ts

@@ -34,8 +34,13 @@ export type MetadataInDoc = {
 export type DataSet = {
   id: string
   name: string
-  icon: string
+  indexing_status: DocumentIndexingStatus
-  icon_background: string
+  icon_info: {
+    icon: string
+    icon_background: string
+    icon_type: AppIconType
+    icon_url: string
+  }
   description: string
   permission: DatasetPermission
   data_source_type: DataSourceType
@@ -46,6 +51,7 @@ export type DataSet = {
   app_count: number
   doc_form: ChunkingMode
   document_count: number
+  total_document_count: number
   available_document_count?: number
   word_count: number
   provider: string