feat: Refactor dataset components and update translations for new dataset creation options

web/app/(commonLayout)/datasets/Container.tsx

@@ -43,9 +43,9 @@ const Container = () => {
 
   const options = useMemo(() => {
     return [
-      { value: 'dataset', text: t('dataset.datasets'), Icon: RiBook2Line, count: 1 },
+      { value: 'dataset', text: t('dataset.datasets'), Icon: RiBook2Line },
       ...(currentWorkspace.role === 'dataset_operator' ? [] : [{
-        value: 'api', text: t('dataset.datasetsApi'), Icon: RiTerminalBoxLine, count: 5,
+        value: 'api', text: t('dataset.datasetsApi'), Icon: RiTerminalBoxLine,
       }]),
     ]
   }, [currentWorkspace.role, t])

web/app/(commonLayout)/datasets/Datasets.tsx

@@ -1,10 +1,10 @@
 'use client'
 
-import { useCallback, useEffect, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import useSWRInfinite from 'swr/infinite'
 import { debounce } from 'lodash-es'
 import { useTranslation } from 'react-i18next'
-import NewDatasetCard from './NewDatasetCard'
+import NewDatasetCard from './new-dataset-card'
 import DatasetCard from './DatasetCard'
 import type { DataSetListResponse, FetchDatasetsParams } from '@/models/datasets'
 import { fetchDatasets } from '@/service/datasets'
@@ -48,6 +48,7 @@ const Datasets = ({
   keywords,
   includeAll,
 }: Props) => {
+  const { t } = useTranslation()
   const { isCurrentWorkspaceEditor } = useAppContext()
   const { data, isLoading, setSize, mutate } = useSWRInfinite(
     (pageIndex: number, previousPageData: DataSetListResponse) => getKey(pageIndex, previousPageData, tags, keywords, includeAll),
@@ -57,24 +58,21 @@ const Datasets = ({
   const loadingStateRef = useRef(false)
   const anchorRef = useRef<HTMLAnchorElement>(null)
 
-  const { t } = useTranslation()
-
   useEffect(() => {
     loadingStateRef.current = isLoading
     document.title = `${t('dataset.knowledge')} - Dify`
   }, [isLoading, t])
 
-  const onScroll = useCallback(
-    debounce(() => {
+  const onScroll = useMemo(() => {
+    return debounce(() => {
       if (!loadingStateRef.current && containerRef.current && anchorRef.current) {
         const { scrollTop, clientHeight } = containerRef.current
         const anchorOffset = anchorRef.current.offsetTop
         if (anchorOffset - scrollTop - clientHeight < 100)
           setSize(size => size + 1)
       }
-    }, 50),
-    [setSize],
-  )
+    }, 50)
+  }, [containerRef, setSize])
 
   useEffect(() => {
     const currentContainer = containerRef.current
@@ -83,7 +81,7 @@ const Datasets = ({
       currentContainer?.removeEventListener('scroll', onScroll)
       onScroll.cancel()
     }
-  }, [onScroll])
+  }, [onScroll, containerRef])
 
   return (
     <nav className='grid shrink-0 grow grid-cols-1 content-start gap-4 px-12 pt-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>

web/app/(commonLayout)/datasets/NewDatasetCard.tsx

@@ -1,42 +0,0 @@
-'use client'
-import { useTranslation } from 'react-i18next'
-import { basePath } from '@/utils/var'
-import {
-  RiAddLine,
-  RiArrowRightLine,
-} from '@remixicon/react'
-
-const CreateAppCard = (
-  {
-    ref,
-    ..._
-  },
-) => {
-  const { t } = useTranslation()
-
-  return (
-    <div className='bg-background-default-dimm flex min-h-[160px] flex-col rounded-xl border-[0.5px]
-      border-components-panel-border transition-all duration-200 ease-in-out'
-    >
-      <a ref={ref} className='group flex grow cursor-pointer items-start p-4' href={`${basePath}/datasets/create`}>
-        <div className='flex items-center gap-3'>
-          <div className='flex h-10 w-10 items-center justify-center rounded-lg border border-dashed border-divider-regular bg-background-default-lighter
-            p-2 group-hover:border-solid group-hover:border-effects-highlight group-hover:bg-background-default-dodge'
-          >
-            <RiAddLine className='h-4 w-4 text-text-tertiary group-hover:text-text-accent'/>
-          </div>
-          <div className='system-md-semibold text-text-secondary group-hover:text-text-accent'>{t('dataset.createDataset')}</div>
-        </div>
-      </a>
-      <div className='system-xs-regular p-4 pt-0 text-text-tertiary'>{t('dataset.createDatasetIntro')}</div>
-      <a className='group flex cursor-pointer items-center gap-1 rounded-b-xl border-t-[0.5px] border-divider-subtle p-4' href={`${basePath}/datasets/connect`}>
-        <div className='system-xs-medium text-text-tertiary group-hover:text-text-accent'>{t('dataset.connectDataset')}</div>
-        <RiArrowRightLine className='h-3.5 w-3.5 text-text-tertiary group-hover:text-text-accent' />
-      </a>
-    </div>
-  )
-}
-
-CreateAppCard.displayName = 'CreateAppCard'
-
-export default CreateAppCard

web/app/(commonLayout)/datasets/new-dataset-card/index.tsx

@@ -0,0 +1,37 @@
+'use client'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { basePath } from '@/utils/var'
+import {
+  RiAddLine,
+  RiFunctionAddLine,
+} from '@remixicon/react'
+import Link from './link'
+import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
+
+type CreateAppCardProps = {
+  ref: React.RefObject<HTMLAnchorElement>
+}
+
+const CreateAppCard = ({
+  ref,
+  ..._
+}: CreateAppCardProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='flex min-h-[166px] flex-col gap-y-0.5 rounded-xl bg-background-default-dimmed'>
+      <div className='flex grow flex-col items-center justify-center p-2'>
+        <Link href={`${basePath}/datasets/create-pipeline`} Icon={RiFunctionAddLine} text={t('dataset.createFromPipeline')} />
+        <Link ref={ref} href={`${basePath}/datasets/create`} Icon={RiAddLine} text={t('dataset.createDataset')} />
+      </div>
+      <div className='border-t-[0.5px] border-divider-subtle p-2'>
+        <Link href={`${basePath}/datasets/connect`} Icon={ApiConnectionMod} text={t('dataset.connectDataset')} />
+      </div>
+    </div>
+  )
+}
+
+CreateAppCard.displayName = 'CreateAppCard'
+
+export default CreateAppCard

web/app/(commonLayout)/datasets/new-dataset-card/link.tsx

@@ -0,0 +1,26 @@
+type LinkProps = {
+  Icon: React.ComponentType<{ className?: string }>
+  text: string
+  href: string
+  ref?: React.RefObject<HTMLAnchorElement>
+}
+
+const Link = ({
+  Icon,
+  text,
+  href,
+  ref,
+}: LinkProps) => {
+  return (
+    <a
+      ref={ref}
+      className='flex w-full items-center gap-x-2 rounded-lg bg-transparent px-4 py-2 text-text-tertiary shadow-shadow-shadow-3 hover:bg-background-default-dodge hover:text-text-secondary hover:shadow-xs'
+      href={href}
+    >
+      <Icon className='h-4 w-4' />
+      <span className='system-sm-medium'>{text}</span>
+    </a>
+  )
+}
+
+export default Link

web/app/components/workflow/nodes/_base/components/next-step/add.tsx

@@ -80,7 +80,7 @@ const Add = ({
           ${nodesReadOnly && '!cursor-not-allowed'}
         `}
       >
-        <div className='bg-background-default-dimm mr-1.5 flex h-5 w-5 items-center justify-center rounded-[5px]'>
+        <div className='mr-1.5 flex h-5 w-5 items-center justify-center rounded-[5px] bg-background-default-dimmed'>
           <RiAddLine className='h-3 w-3' />
         </div>
         <div className='flex items-center uppercase'>

web/app/reset-password/check-code/page.tsx

@@ -87,7 +87,7 @@ export default function CheckCode() {
       <div className='h-px bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent'></div>
     </div>
     <div onClick={() => router.back()} className='flex h-9 cursor-pointer items-center justify-center text-text-tertiary'>
-      <div className='bg-background-default-dimm inline-block rounded-full p-1'>
+      <div className='inline-block rounded-full bg-background-default-dimmed p-1'>
         <RiArrowLeftLine size={12} />
       </div>
       <span className='system-xs-regular ml-2'>{t('login.back')}</span>

web/app/signin/check-code/page.tsx

@@ -87,7 +87,7 @@ export default function CheckCode() {
       <div className='h-px bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent'></div>
     </div>
     <div onClick={() => router.back()} className='flex h-9 cursor-pointer items-center justify-center text-text-tertiary'>
-      <div className='bg-background-default-dimm inline-block rounded-full p-1'>
+      <div className='inline-block rounded-full bg-background-default-dimmed p-1'>
         <RiArrowLeftLine size={12} />
       </div>
       <span className='system-xs-regular ml-2'>{t('login.back')}</span>

web/i18n/en-US/dataset.ts

@@ -25,6 +25,7 @@ const translation = {
   wordCount: ' k words',
   appCount: ' linked apps',
   createDataset: 'Create Knowledge',
+  createFromPipeline: 'Create from Knowledge Pipeline',
   createNewExternalAPI: 'Create a new External Knowledge API',
   noExternalKnowledge: 'There is no External Knowledge API yet, click here to create',
   createExternalAPI: 'Add an External Knowledge API',

web/i18n/zh-Hans/dataset.ts

@@ -25,6 +25,7 @@ const translation = {
   wordCount: ' 千字符',
   appCount: ' 关联应用',
   createDataset: '创建知识库',
+  createFromPipeline: '通过 RAG Pipeline 创建知识库',
   noExternalKnowledge: '还没有外部知识库 API，点击此处创建',
   createExternalAPI: '添加外部知识库 API',
   createNewExternalAPI: '创建新的外部知识库API',