From 77185d961786e5fb53bc8a679091ac2b8045a1be Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 10 Dec 2024 15:06:56 +0800
Subject: [PATCH] feat: dataset info to new ui

---
 .../components/app-sidebar/dataset-info.tsx   | 42 +++++++++++++++++++
 web/app/components/app-sidebar/index.tsx      | 18 ++++++--
 web/i18n/en-US/dataset.ts                     |  1 +
 web/i18n/zh-Hans/dataset.ts                   |  5 ++-
 4 files changed, 61 insertions(+), 5 deletions(-)
 create mode 100644 web/app/components/app-sidebar/dataset-info.tsx

diff --git a/web/app/components/app-sidebar/dataset-info.tsx b/web/app/components/app-sidebar/dataset-info.tsx
new file mode 100644
index 0000000000..b5c2f0c235
--- /dev/null
+++ b/web/app/components/app-sidebar/dataset-info.tsx
@@ -0,0 +1,42 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import AppIcon from '../base/app-icon'
+
+const DatasetSvg = <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fillRule="evenodd" clipRule="evenodd" d="M0.833497 5.13481C0.833483 4.69553 0.83347 4.31654 0.858973 4.0044C0.88589 3.67495 0.94532 3.34727 1.10598 3.03195C1.34567 2.56155 1.72812 2.17909 2.19852 1.93941C2.51384 1.77875 2.84152 1.71932 3.17097 1.6924C3.48312 1.6669 3.86209 1.66691 4.30137 1.66693L7.62238 1.66684C8.11701 1.66618 8.55199 1.66561 8.95195 1.80356C9.30227 1.92439 9.62134 2.12159 9.88607 2.38088C10.1883 2.67692 10.3823 3.06624 10.603 3.50894L11.3484 5.00008H14.3679C15.0387 5.00007 15.5924 5.00006 16.0434 5.03691C16.5118 5.07518 16.9424 5.15732 17.3468 5.36339C17.974 5.68297 18.4839 6.19291 18.8035 6.82011C19.0096 7.22456 19.0917 7.65515 19.13 8.12356C19.1668 8.57455 19.1668 9.12818 19.1668 9.79898V13.5345C19.1668 14.2053 19.1668 14.7589 19.13 15.2099C19.0917 15.6784 19.0096 16.1089 18.8035 16.5134C18.4839 17.1406 17.974 17.6505 17.3468 17.9701C16.9424 18.1762 16.5118 18.2583 16.0434 18.2966C15.5924 18.3334 15.0387 18.3334 14.3679 18.3334H5.63243C4.96163 18.3334 4.40797 18.3334 3.95698 18.2966C3.48856 18.2583 3.05798 18.1762 2.65353 17.9701C2.02632 17.6505 1.51639 17.1406 1.19681 16.5134C0.990734 16.1089 0.908597 15.6784 0.870326 15.2099C0.833478 14.7589 0.833487 14.2053 0.833497 13.5345V5.13481ZM7.51874 3.33359C8.17742 3.33359 8.30798 3.34447 8.4085 3.37914C8.52527 3.41942 8.63163 3.48515 8.71987 3.57158C8.79584 3.64598 8.86396 3.7579 9.15852 4.34704L9.48505 5.00008L2.50023 5.00008C2.50059 4.61259 2.50314 4.34771 2.5201 4.14012C2.5386 3.91374 2.57 3.82981 2.59099 3.7886C2.67089 3.6318 2.79837 3.50432 2.95517 3.42442C2.99638 3.40343 3.08031 3.37203 3.30669 3.35353C3.54281 3.33424 3.85304 3.33359 4.3335 3.33359H7.51874Z" fill="#444CE7" />
+</svg>
+
+type Props = {
+  isExternal?: boolean
+  name: string
+  description: string
+  expand: boolean
+}
+
+const DatasetInfo: FC<Props> = ({
+  name,
+  description,
+  isExternal,
+  expand,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <div className='pl-1 pt-1'>
+      <div className='flex-shrink-0 mr-3'>
+        <AppIcon innerIcon={DatasetSvg} className='!border-[0.5px] !border-indigo-100 !bg-indigo-25' />
+      </div>
+      {expand && (
+        <div className='mt-2'>
+          <div className='system-md-semibold text-text-secondary'>
+            {name}
+          </div>
+          <div className='mt-1 text-text-tertiary system-2xs-medium-uppercase'>{isExternal ? t('dataset.externalTag') : t('dataset.localDocs')}</div>
+          <div className='my-3  system-xs-regular text-text-tertiary'>{description}</div>
+        </div>
+      )}
+    </div>
+  )
+}
+export default React.memo(DatasetInfo)
diff --git a/web/app/components/app-sidebar/index.tsx b/web/app/components/app-sidebar/index.tsx
index 5ee063ad64..1ba8aeecc9 100644
--- a/web/app/components/app-sidebar/index.tsx
+++ b/web/app/components/app-sidebar/index.tsx
@@ -4,12 +4,14 @@ import NavLink from './navLink'
 import type { NavIcon } from './navLink'
 import AppBasic from './basic'
 import AppInfo from './app-info'
+import DatasetInfo from './dataset-info'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import {
   AlignLeft01,
   AlignRight01,
 } from '@/app/components/base/icons/src/vender/line/layout'
 import { useStore as useAppStore } from '@/app/components/app/store'
+import cn from '@/utils/classnames'
 
 export type IAppDetailNavProps = {
   iconType?: 'app' | 'dataset' | 'notion'
@@ -63,7 +65,15 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
         {iconType === 'app' && (
           <AppInfo expand={expand} />
         )}
-        {iconType !== 'app' && (
+        {iconType === 'dataset' && (
+          <DatasetInfo
+            name={title}
+            description={desc}
+            isExternal={isExternal}
+            expand={expand}
+          />
+        )}
+        {!['app', 'dataset'].includes(iconType) && (
           <AppBasic
             mode={appSidebarExpand}
             iconType={iconType}
@@ -75,9 +85,9 @@ const AppDetailNav = ({ title, desc, isExternal, icon, icon_background, navigati
           />
         )}
       </div>
-      {!expand && (
-        <div className='mt-1 mx-auto w-6 h-[1px] bg-divider-subtle' />
-      )}
+      <div className='px-4'>
+        <div className={cn('mt-1 mx-auto h-[1px] bg-divider-subtle', !expand && 'w-6')} />
+      </div>
       <nav
         className={`
           grow space-y-1
diff --git a/web/i18n/en-US/dataset.ts b/web/i18n/en-US/dataset.ts
index 503c44f312..9c6855929c 100644
--- a/web/i18n/en-US/dataset.ts
+++ b/web/i18n/en-US/dataset.ts
@@ -16,6 +16,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',
+  localDocs: 'Local Docs',
   documentCount: ' docs',
   wordCount: ' k words',
   appCount: ' linked apps',
diff --git a/web/i18n/zh-Hans/dataset.ts b/web/i18n/zh-Hans/dataset.ts
index 94db7713c7..475088d84f 100644
--- a/web/i18n/zh-Hans/dataset.ts
+++ b/web/i18n/zh-Hans/dataset.ts
@@ -16,6 +16,7 @@ const translation = {
   learnHowToWriteGoodKnowledgeDescription: '了解如何编写良好的知识库描述',
   externalAPIPanelDescription: '外部知识库 API 用于连接到 Dify 之外的知识库并从中检索知识。',
   externalAPIPanelDocumentation: '了解如何创建外部知识库 API',
+  localDocs: '本地文档',
   documentCount: ' 文档',
   wordCount: ' 千字符',
   appCount: ' 关联应用',
@@ -119,8 +120,10 @@ const translation = {
     change: '更改',
     changeRetrievalMethod: '更改检索方法',
   },
-  docsFailedNotice: '文档无法被索引',
+  docsFailedNotice: '文档索引失败',
   retry: '重试',
+  documentsDisabled: '{{num}} 个文档已禁用 - 未活动超过 30 天',
+  enable: '启用',
   indexingTechnique: {
     high_quality: '高质量',
     economy: '经济',