From 4025cd0b466c0b59efa720c1a95b24b4b2579902 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Wed, 7 May 2025 11:30:13 +0800
Subject: [PATCH] feat: Refactor dataset pipeline creation components and add
 internationalization support

---
 .../[datasetId]/layout-main.tsx               | 11 +--
 .../create-from-dsl-modal/index.tsx           |  1 -
 .../create-options/create-from-scratch.tsx    | 79 ++++++++++++++-----
 .../create-options/index.tsx                  | 11 ++-
 .../datasets/create-from-pipeline/header.tsx  |  5 +-
 .../list/built-in-pipeline-list.tsx           | 62 ++++++++-------
 .../list/customized-list.tsx                  | 49 ++++++++----
 .../create-from-pipeline/list/index.tsx       | 18 +++--
 .../list/template-card/edit-pipeline-info.tsx | 17 ++--
 .../list/template-card/index.tsx              | 15 ++--
 .../datasets/list/dataset-card/index.tsx      | 25 ++----
 web/i18n/de-DE/dataset-pipeline.ts            |  3 +
 web/i18n/en-US/dataset-pipeline.ts            | 25 ++++++
 web/i18n/es-ES/dataset-pipeline.ts            |  3 +
 web/i18n/fa-IR/dataset-pipeline.ts            |  3 +
 web/i18n/fr-FR/dataset-pipeline.ts            |  3 +
 web/i18n/hi-IN/dataset-pipeline.ts            |  3 +
 web/i18n/i18next-config.ts                    |  1 +
 web/i18n/it-IT/dataset-pipeline.ts            |  3 +
 web/i18n/ja-JP/dataset-pipeline.ts            |  3 +
 web/i18n/ko-KR/dataset-pipeline.ts            |  3 +
 web/i18n/pl-PL/dataset-pipeline.ts            |  3 +
 web/i18n/pt-BR/dataset-pipeline.ts            |  3 +
 web/i18n/ro-RO/dataset-pipeline.ts            |  3 +
 web/i18n/ru-RU/dataset-pipeline.ts            |  3 +
 web/i18n/sl-SI/dataset-pipeline.ts            |  3 +
 web/i18n/th-TH/dataset-pipeline.ts            |  3 +
 web/i18n/tr-TR/dataset-pipeline.ts            |  3 +
 web/i18n/uk-UA/dataset-pipeline.ts            |  3 +
 web/i18n/vi-VN/dataset-pipeline.ts            |  3 +
 web/i18n/zh-Hans/dataset-pipeline.ts          | 25 ++++++
 web/i18n/zh-Hant/dataset-pipeline.ts          |  3 +
 web/models/datasets.ts                        | 61 ++++++++++++--
 web/models/pipeline.ts                        | 36 +++++++++
 web/service/knowledge/use-create-dataset.ts   | 29 ++++++-
 web/service/use-pipeline.ts                   | 75 ++++++++++++++++++
 36 files changed, 473 insertions(+), 126 deletions(-)
 create mode 100644 web/i18n/de-DE/dataset-pipeline.ts
 create mode 100644 web/i18n/en-US/dataset-pipeline.ts
 create mode 100644 web/i18n/es-ES/dataset-pipeline.ts
 create mode 100644 web/i18n/fa-IR/dataset-pipeline.ts
 create mode 100644 web/i18n/fr-FR/dataset-pipeline.ts
 create mode 100644 web/i18n/hi-IN/dataset-pipeline.ts
 create mode 100644 web/i18n/it-IT/dataset-pipeline.ts
 create mode 100644 web/i18n/ja-JP/dataset-pipeline.ts
 create mode 100644 web/i18n/ko-KR/dataset-pipeline.ts
 create mode 100644 web/i18n/pl-PL/dataset-pipeline.ts
 create mode 100644 web/i18n/pt-BR/dataset-pipeline.ts
 create mode 100644 web/i18n/ro-RO/dataset-pipeline.ts
 create mode 100644 web/i18n/ru-RU/dataset-pipeline.ts
 create mode 100644 web/i18n/sl-SI/dataset-pipeline.ts
 create mode 100644 web/i18n/th-TH/dataset-pipeline.ts
 create mode 100644 web/i18n/tr-TR/dataset-pipeline.ts
 create mode 100644 web/i18n/uk-UA/dataset-pipeline.ts
 create mode 100644 web/i18n/vi-VN/dataset-pipeline.ts
 create mode 100644 web/i18n/zh-Hans/dataset-pipeline.ts
 create mode 100644 web/i18n/zh-Hant/dataset-pipeline.ts
 create mode 100644 web/models/pipeline.ts
 create mode 100644 web/service/use-pipeline.ts

diff --git a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
index a88afc3adc..aeb96eab57 100644
--- a/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
+++ b/web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx
@@ -28,13 +28,12 @@ import DatasetDetailContext from '@/context/dataset-detail'
 import { DataSourceType } from '@/models/datasets'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 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'
+import { useGetDocLanguage } from '@/context/i18n'
 
 export type IAppDetailLayoutProps = {
   children: React.ReactNode
@@ -54,8 +53,8 @@ const ExtraInfo = React.memo(({
   documentCount,
   expand,
 }: IExtraInfoProps) => {
-  const locale = getLocaleOnClient()
   const { t } = useTranslation()
+  const docLanguage = useGetDocLanguage()
 
   const hasRelatedApps = relatedApps?.data && relatedApps?.data?.length > 0
   const relatedAppsTotal = relatedApps?.data?.length || 0
@@ -122,11 +121,7 @@ const ExtraInfo = React.memo(({
               <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'
-                }
+                href={`https://docs.dify.ai/${docLanguage}/guides/knowledge-base/integrate-knowledge-within-application`}
                 target='_blank' rel='noopener noreferrer'
               >
                 <RiBookOpenLine className='mr-1 text-text-accent' />
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
index f3f417039d..214836b39f 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/index.tsx
@@ -121,7 +121,6 @@ const CreateFromDSLModal = ({
           message: t(status === DSLImportStatus.COMPLETED ? 'app.newApp.appCreated' : 'app.newApp.caution'),
           children: status === DSLImportStatus.COMPLETED_WITH_WARNINGS && t('app.newApp.appCreateDSLWarning'),
         })
-        localStorage.setItem(NEED_REFRESH_APP_LIST_KEY, '1')
         if (app_id)
           await handleCheckPluginDependencies(app_id)
         getRedirection(isCurrentWorkspaceEditor, { id: app_id!, mode: app_mode }, push)
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/create-from-scratch.tsx b/web/app/components/datasets/create-from-pipeline/create-options/create-from-scratch.tsx
index 15f1c3d2fd..f82b5c6370 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/create-from-scratch.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/create-from-scratch.tsx
@@ -1,3 +1,4 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import AppIcon from '@/app/components/base/app-icon'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
 import AppIconPicker from '@/app/components/base/app-icon-picker'
@@ -5,17 +6,19 @@ import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import type { AppIconType } from '@/types/app'
 import { RiCloseLine } from '@remixicon/react'
-import React, { useCallback, useRef, useState } from 'react'
 import PermissionSelector from '../../settings/permission-selector'
+import type { CreateDatasetReq } from '@/models/datasets'
 import { DatasetPermission } from '@/models/datasets'
 import { useMembers } from '@/service/use-common'
 import Button from '@/app/components/base/button'
 import { useTranslation } from 'react-i18next'
 import Toast from '@/app/components/base/toast'
+import { useCreateDataset } from '@/service/knowledge/use-create-dataset'
+import type { Member } from '@/models/common'
 
 type CreateFromScratchProps = {
-  onClose: () => void
-  onCreate: () => void
+  onClose?: () => void
+  onCreate?: () => void
 }
 
 const DEFAULT_APP_ICON: AppIconSelection = {
@@ -36,8 +39,14 @@ const CreateFromScratch = ({
   const [showAppIconPicker, setShowAppIconPicker] = useState(false)
   const [selectedMemberIDs, setSelectedMemberIDs] = useState<string[]>([])
   const previousAppIcon = useRef<AppIconSelection>(DEFAULT_APP_ICON)
+  const [memberList, setMemberList] = useState<Member[]>([])
 
-  const { data: memberList } = useMembers()
+  const { data: members } = useMembers()
+
+  useEffect(() => {
+    if (members?.accounts)
+      setMemberList(members.accounts)
+  }, [members])
 
   const handleAppNameChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value
@@ -68,6 +77,8 @@ const CreateFromScratch = ({
     setPermission(value!)
   }, [])
 
+  const { mutateAsync: createEmptyDataset } = useCreateDataset()
+
   const handleCreate = useCallback(() => {
     if (!name) {
       Toast.notify({
@@ -76,16 +87,38 @@ const CreateFromScratch = ({
       })
       return
     }
-    onCreate()
-    onClose()
-  }, [name, onCreate, onClose])
+    const request: CreateDatasetReq = {
+      name,
+      description,
+      icon_info: {
+        icon_type: appIcon.type,
+        icon: appIcon.type === 'image' ? appIcon.fileId : appIcon.icon,
+        icon_background: appIcon.type === 'image' ? undefined : appIcon.background,
+        icon_url: appIcon.type === 'image' ? appIcon.url : undefined,
+      },
+      permission,
+    }
+    // Handle permission
+    if (request.permission === DatasetPermission.partialMembers) {
+      const selectedMemberList = selectedMemberIDs.map((id) => {
+        return {
+          user_id: id,
+          role: memberList.find(member => member.id === id)?.role,
+        }
+      })
+      request.partial_member_list = selectedMemberList
+    }
+    createEmptyDataset(request)
+    onCreate?.()
+    onClose?.()
+  }, [name, permission, appIcon, description, createEmptyDataset, memberList, selectedMemberIDs, onCreate, onClose])
 
   return (
     <div className='relative flex flex-col'>
       {/* Header */}
       <div className='pb-3 pl-6 pr-14 pt-6'>
         <span className='title-2xl-semi-bold text-text-primary'>
-          Create Knowledge
+          {t('datasetPipeline.creation.createKnowledge')}
         </span>
       </div>
       <button
@@ -98,11 +131,13 @@ const CreateFromScratch = ({
       <div className='flex flex-col gap-y-5 px-6 py-3'>
         <div className='flex items-end gap-x-3 self-stretch'>
           <div className='flex grow flex-col gap-y-1 pb-1'>
-            <label className='system-sm-medium flex h-6 items-center text-text-secondary'>Knowledge name & icon</label>
+            <label className='system-sm-medium flex h-6 items-center text-text-secondary'>
+              {t('datasetPipeline.creation.knowledgeNameAndIcon')}
+            </label>
             <Input
               onChange={handleAppNameChange}
               value={name}
-              placeholder='Please enter the name of the Knowledge Base'
+              placeholder={t('datasetPipeline.creation.knowledgeNameAndIconPlaceholder')}
             />
           </div>
           <AppIcon
@@ -117,22 +152,26 @@ const CreateFromScratch = ({
           />
         </div>
         <div className='flex flex-col gap-y-1'>
-          <label className='system-sm-medium flex h-6 items-center text-text-secondary'>Knowledge description</label>
+          <label className='system-sm-medium flex h-6 items-center text-text-secondary'>
+            {t('datasetPipeline.creation.knowledgeDescription')}
+          </label>
           <Textarea
             onChange={handleDescriptionChange}
             value={description}
-            placeholder='Describe what is in this Knowledge Base. A detailed description allows AI to access the content of the dataset more accurately. If empty, Dify will use the default hit strategy. (Optional)'
+            placeholder={t('datasetPipeline.creation.knowledgeDescriptionPlaceholder')}
           />
         </div>
         <div className='flex flex-col gap-y-1'>
-          <label className='system-sm-medium flex h-6 items-center text-text-secondary'>Permissions</label>
-            <PermissionSelector
-              permission={permission}
-              value={selectedMemberIDs}
-              onChange={handlePermissionChange}
-              onMemberSelect={setSelectedMemberIDs}
-              memberList={memberList?.accounts || []}
-            />
+          <label className='system-sm-medium flex h-6 items-center text-text-secondary'>
+            {t('datasetPipeline.creation.knowledgePermissions')}
+          </label>
+          <PermissionSelector
+            permission={permission}
+            value={selectedMemberIDs}
+            onChange={handlePermissionChange}
+            onMemberSelect={setSelectedMemberIDs}
+            memberList={memberList}
+          />
         </div>
       </div>
       {/* Actions */}
diff --git a/web/app/components/datasets/create-from-pipeline/create-options/index.tsx b/web/app/components/datasets/create-from-pipeline/create-options/index.tsx
index 8e56f28738..efb1ce2ce3 100644
--- a/web/app/components/datasets/create-from-pipeline/create-options/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/create-options/index.tsx
@@ -6,8 +6,11 @@ import CreateFromScratch from './create-from-scratch'
 import { useRouter, useSearchParams } from 'next/navigation'
 import CreateFromDSLModal, { CreateFromDSLModalTab } from './create-from-dsl-modal'
 import { useProviderContextSelector } from '@/context/provider-context'
+import { useTranslation } from 'react-i18next'
 
 const CreateOptions = () => {
+  const { t } = useTranslation()
+
   const [showCreateModal, setShowCreateModal] = useState(false)
   const [showImportModal, setShowImportModal] = useState(false)
 
@@ -53,14 +56,14 @@ const CreateOptions = () => {
     <div className='flex items-center gap-x-3 px-16 py-2'>
       <Item
         Icon={RiAddCircleFill}
-        title='Create from scratch'
-        description='Blank knowledge pipeline'
+        title={t('datasetPipeline.creation.createFromScratch.title')}
+        description={t('datasetPipeline.creation.createFromScratch.description')}
         onClick={openCreateFromScratch}
       />
       <Item
         Icon={RiFileUploadLine}
-        title='Import'
-        description='Import from a DSL file'
+        title={t('datasetPipeline.creation.ImportDSL.title')}
+        description={t('datasetPipeline.creation.ImportDSL.description')}
         onClick={openImportFromDSL}
       />
       <Modal
diff --git a/web/app/components/datasets/create-from-pipeline/header.tsx b/web/app/components/datasets/create-from-pipeline/header.tsx
index 4838b924ed..48c7612b7a 100644
--- a/web/app/components/datasets/create-from-pipeline/header.tsx
+++ b/web/app/components/datasets/create-from-pipeline/header.tsx
@@ -1,11 +1,14 @@
 import React from 'react'
 import { RiArrowLeftLine } from '@remixicon/react'
 import Button from '../../base/button'
+import { useTranslation } from 'react-i18next'
 
 const Header = () => {
+  const { t } = useTranslation()
+
   return (
       <div className='system-md-semibold relative flex px-16 pb-2 pt-5 text-text-primary'>
-        <span>Create knowledge pipeline</span>
+        <span>{t('datasetPipeline.creation.title')}</span>
         <a
           className='absolute bottom-0 left-5'
           href='/datasets'
diff --git a/web/app/components/datasets/create-from-pipeline/list/built-in-pipeline-list.tsx b/web/app/components/datasets/create-from-pipeline/list/built-in-pipeline-list.tsx
index c1c23075d8..a8733fb34f 100644
--- a/web/app/components/datasets/create-from-pipeline/list/built-in-pipeline-list.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/built-in-pipeline-list.tsx
@@ -1,56 +1,64 @@
-import { ChunkingMode } from '@/models/datasets'
+import { usePipelineTemplateList } from '@/service/use-pipeline'
 import TemplateCard from './template-card'
-
-export type Pipeline = {
-  id: string
-  name: string
-  icon_type: 'emoji' | 'image'
-  icon?: string
-  icon_background?: string
-  file_id?: string
-  url?: string
-  description: string
-  doc_form: ChunkingMode
-}
+import { ChunkingMode } from '@/models/datasets'
+import type { PipelineTemple } from '@/models/pipeline'
 
 const BuiltInPipelineList = () => {
-  const mockData: Pipeline[] = [{
+  // TODO: remove mock data
+  const mockData: PipelineTemple[] = [{
     id: '1',
     name: 'Pipeline 1',
     description: 'This is a description of Pipeline 1. When use the general chunking mode, the chunks retrieved and recalled are the same. When use the general chunking mode, the chunks retrieved and recalled are the same.',
-    icon_type: 'emoji',
-    icon: '🤖',
-    icon_background: '#F0FDF9',
+    icon_info: {
+      icon: '🤖',
+      icon_background: '#F0FDF9',
+      icon_type: 'emoji',
+    },
     doc_form: ChunkingMode.text,
+    position: 0,
   }, {
     id: '2',
     name: 'Pipeline 2',
     description: 'This is a description of Pipeline 2. When use the general chunking mode, the chunks retrieved and recalled are the same.',
-    icon_type: 'emoji',
-    icon: '🏖️',
-    icon_background: '#FFF4ED',
+    icon_info: {
+      icon: '🏖️',
+      icon_background: '#FFF4ED',
+      icon_type: 'emoji',
+    },
     doc_form: ChunkingMode.parentChild,
+    position: 1,
   }, {
     id: '3',
     name: 'Pipeline 3',
     description: 'This is a description of Pipeline 3',
-    icon_type: 'emoji',
-    icon: '🚀',
-    icon_background: '#FEFBE8',
+    icon_info: {
+      icon: '🚀',
+      icon_background: '#FEFBE8',
+      icon_type: 'emoji',
+    },
     doc_form: ChunkingMode.qa,
+    position: 2,
   }, {
     id: '4',
     name: 'Pipeline 4',
     description: 'This is a description of Pipeline 4',
-    icon_type: 'emoji',
-    icon: '🍯',
-    icon_background: '#F5F3FF',
+    icon_info: {
+      icon: '🍯',
+      icon_background: '#F5F3FF',
+      icon_type: 'emoji',
+    },
     doc_form: ChunkingMode.graph,
+    position: 3,
   }]
+  const { data: pipelineList, isLoading } = usePipelineTemplateList({ type: 'built-in' })
+  const list = pipelineList?.pipelines || mockData
+
+  if (isLoading || !list)
+    return null
 
   return (
     <div className='grid grow grid-cols-1 gap-3 overflow-y-auto px-16 pt-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
-      {mockData.map((pipeline, index) => (
+      {list.map((pipeline, index) => (
         <TemplateCard
           key={index}
           pipeline={pipeline}
diff --git a/web/app/components/datasets/create-from-pipeline/list/customized-list.tsx b/web/app/components/datasets/create-from-pipeline/list/customized-list.tsx
index 2d8fe1bd60..df38d0a678 100644
--- a/web/app/components/datasets/create-from-pipeline/list/customized-list.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/customized-list.tsx
@@ -1,45 +1,64 @@
 import { ChunkingMode } from '@/models/datasets'
-import type { Pipeline } from './built-in-pipeline-list'
 import TemplateCard from './template-card'
+import { usePipelineTemplateList } from '@/service/use-pipeline'
+import type { PipelineTemple } from '@/models/pipeline'
 
 const CustomizedList = () => {
-  const mockData: Pipeline[] = [{
+  const mockData: PipelineTemple[] = [{
     id: '1',
     name: 'Pipeline 1',
     description: 'This is a description of Pipeline 1. When use the general chunking mode, the chunks retrieved and recalled are the same. When use the general chunking mode, the chunks retrieved and recalled are the same.',
-    icon_type: 'emoji',
-    icon: '🤖',
-    icon_background: '#F0FDF9',
+    icon_info: {
+      icon: '🤖',
+      icon_background: '#F0FDF9',
+      icon_type: 'emoji',
+    },
     doc_form: ChunkingMode.text,
+    position: 0,
   }, {
     id: '2',
     name: 'Pipeline 2',
     description: 'This is a description of Pipeline 2. When use the general chunking mode, the chunks retrieved and recalled are the same.',
-    icon_type: 'emoji',
-    icon: '🏖️',
-    icon_background: '#FFF4ED',
+    icon_info: {
+      icon: '🏖️',
+      icon_background: '#FFF4ED',
+      icon_type: 'emoji',
+    },
     doc_form: ChunkingMode.parentChild,
+    position: 1,
   }, {
     id: '3',
     name: 'Pipeline 3',
     description: 'This is a description of Pipeline 3',
-    icon_type: 'emoji',
-    icon: '🚀',
-    icon_background: '#FEFBE8',
+    icon_info: {
+      icon: '🚀',
+      icon_background: '#FEFBE8',
+      icon_type: 'emoji',
+    },
     doc_form: ChunkingMode.qa,
+    position: 2,
   }, {
     id: '4',
     name: 'Pipeline 4',
     description: 'This is a description of Pipeline 4',
-    icon_type: 'emoji',
-    icon: '🍯',
-    icon_background: '#F5F3FF',
+    icon_info: {
+      icon: '🍯',
+      icon_background: '#F5F3FF',
+      icon_type: 'emoji',
+    },
     doc_form: ChunkingMode.graph,
+    position: 3,
   }]
 
+  const { data: pipelineList, isLoading } = usePipelineTemplateList({ type: 'customized' })
+  const list = pipelineList?.pipelines || mockData
+
+  if (isLoading || !list)
+    return null
+
   return (
     <div className='grid grow grid-cols-1 gap-3 overflow-y-auto px-16 pt-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'>
-      {mockData.map((pipeline, index) => (
+      {list.map((pipeline, index) => (
         <TemplateCard
           key={index}
           pipeline={pipeline}
diff --git a/web/app/components/datasets/create-from-pipeline/list/index.tsx b/web/app/components/datasets/create-from-pipeline/list/index.tsx
index a0f2ef0286..57f566c87a 100644
--- a/web/app/components/datasets/create-from-pipeline/list/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/index.tsx
@@ -1,16 +1,20 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import Tab from './tab'
 import BuiltInPipelineList from './built-in-pipeline-list'
 import CustomizedList from './customized-list'
-
-const OPTIONS = [
-  { value: 'built-in', label: 'Built-in Pipeline' },
-  { value: 'customized', label: 'Customized' },
-]
+import { useTranslation } from 'react-i18next'
 
 const List = () => {
+  const { t } = useTranslation()
   const [activeTab, setActiveTab] = useState('built-in')
 
+  const options = useMemo(() => {
+    return [
+      { value: 'built-in', label: t('datasetPipeline.tabs.builtInPipeline') },
+      { value: 'customized', label: t('datasetPipeline.tabs.customized') },
+    ]
+  }, [t])
+
   const handleTabChange = useCallback((tab: string) => {
     setActiveTab(tab)
   }, [])
@@ -20,7 +24,7 @@ const List = () => {
       <Tab
         activeTab={activeTab}
         handleTabChange={handleTabChange}
-        options={OPTIONS}
+        options={options}
       />
       {
         activeTab === 'built-in' && <BuiltInPipelineList />
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx
index 0bc1fbf975..2a469ffc02 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/edit-pipeline-info.tsx
@@ -8,12 +8,12 @@ import React, { useCallback, useRef, useState } from 'react'
 import Button from '@/app/components/base/button'
 import { useTranslation } from 'react-i18next'
 import Toast from '@/app/components/base/toast'
-import type { Pipeline } from '../built-in-pipeline-list'
+import type { PipelineTemple } from '@/models/pipeline'
 
 type EditPipelineInfoProps = {
   onClose: () => void
   onSave: () => void
-  pipeline: Pipeline
+  pipeline: PipelineTemple
 }
 
 const EditPipelineInfo = ({
@@ -23,17 +23,18 @@ const EditPipelineInfo = ({
 }: EditPipelineInfoProps) => {
   const { t } = useTranslation()
   const [name, setName] = useState(pipeline.name)
+  const iconInfo = pipeline.icon_info
   const [appIcon, setAppIcon] = useState<AppIconSelection>(
-    pipeline.icon_type === 'image'
-      ? { type: 'image' as const, url: pipeline.url || '', fileId: pipeline.file_id || '' }
-      : { type: 'emoji' as const, icon: pipeline.icon || '', background: pipeline.icon_background || '' },
+    iconInfo.icon_type === 'image'
+      ? { type: 'image' as const, url: iconInfo.icon_url || '', fileId: iconInfo.icon || '' }
+      : { type: 'emoji' as const, icon: iconInfo.icon || '', background: iconInfo.icon_background || '' },
   )
   const [description, setDescription] = useState(pipeline.description)
   const [showAppIconPicker, setShowAppIconPicker] = useState(false)
   const previousAppIcon = useRef<AppIconSelection>(
-    pipeline.icon_type === 'image'
-      ? { type: 'image' as const, url: pipeline.url || '', fileId: pipeline.file_id || '' }
-      : { type: 'emoji' as const, icon: pipeline.icon || '', background: pipeline.icon_background || '' },
+    iconInfo.icon_type === 'image'
+      ? { type: 'image' as const, url: iconInfo.icon_url || '', fileId: iconInfo.icon || '' }
+      : { type: 'emoji' as const, icon: iconInfo.icon || '', background: iconInfo.icon_background || '' },
   )
 
   const handleAppNameChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
index bf69c99819..8428ddf2c8 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
@@ -1,7 +1,5 @@
 import React, { useCallback, useState } from 'react'
-import type { Pipeline } from '../built-in-pipeline-list'
 import AppIcon from '@/app/components/base/app-icon'
-import { DOC_FORM_ICON, DOC_FORM_TEXT } from '../../../list/dataset-card'
 import { General } from '@/app/components/base/icons/src/public/knowledge'
 import { useTranslation } from 'react-i18next'
 import Button from '@/app/components/base/button'
@@ -10,9 +8,11 @@ import CustomPopover from '@/app/components/base/popover'
 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'
 
 type TemplateCardProps = {
-  pipeline: Pipeline
+  pipeline: PipelineTemple
   showMoreOperations?: boolean
 }
 
@@ -32,6 +32,7 @@ const TemplateCard = ({
   }, [])
 
   const Icon = DOC_FORM_ICON[pipeline.doc_form] || General
+  const iconInfo = pipeline.icon_info
 
   return (
     <div className='group relative flex h-[132px] cursor-pointer flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg pb-3 shadow-xs shadow-shadow-shadow-3'>
@@ -39,10 +40,10 @@ const TemplateCard = ({
         <div className='relative shrink-0'>
           <AppIcon
             size='large'
-            iconType={pipeline.icon_type}
-            icon={pipeline.icon_type === 'image' ? pipeline.file_id : pipeline.icon}
-            background={pipeline.icon_type === 'image' ? undefined : pipeline.icon_background}
-            imageUrl={pipeline.icon_type === 'image' ? pipeline.url : undefined}
+            iconType={iconInfo.icon_type}
+            icon={iconInfo.icon}
+            background={iconInfo.icon_type === 'image' ? undefined : iconInfo.icon_background}
+            imageUrl={iconInfo.icon_type === 'image' ? iconInfo.icon_url : undefined}
           />
           <div className='absolute -bottom-1 -right-1 z-10'>
             <Icon className='size-4' />
diff --git a/web/app/components/datasets/list/dataset-card/index.tsx b/web/app/components/datasets/list/dataset-card/index.tsx
index eea0618b94..60b00740b9 100644
--- a/web/app/components/datasets/list/dataset-card/index.tsx
+++ b/web/app/components/datasets/list/dataset-card/index.tsx
@@ -2,9 +2,8 @@
 import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import type { DataSet } from '@/models/datasets'
-import { ChunkingMode } from '@/models/datasets'
-import { useAppContext } from '@/context/app-context'
-import { ExternalKnowledgeBase, General, Graph, ParentChild, Qa } from '@/app/components/base/icons/src/public/knowledge'
+import { useSelector as useAppContextWithSelector } from '@/context/app-context'
+import { General } 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'
@@ -23,25 +22,11 @@ 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'
 
 const EXTERNAL_PROVIDER = 'external'
 
-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> = {
-  [ChunkingMode.text]: 'general',
-  [ChunkingMode.qa]: 'qa',
-  [ChunkingMode.parentChild]: 'parentChild',
-  [ChunkingMode.graph]: 'graph',
-}
-
-export type DatasetCardProps = {
+type DatasetCardProps = {
   dataset: DataSet
   onSuccess?: () => void
 }
@@ -53,7 +38,7 @@ const DatasetCard = ({
   const { t } = useTranslation()
   const { push } = useRouter()
 
-  const { isCurrentWorkspaceDatasetOperator } = useAppContext()
+  const isCurrentWorkspaceDatasetOperator = useAppContextWithSelector(state => state.isCurrentWorkspaceDatasetOperator)
   const [tags, setTags] = useState<Tag[]>(dataset.tags)
   const tagSelectorRef = useRef<HTMLDivElement>(null)
   const isHoveringTagSelector = useHover(tagSelectorRef)
diff --git a/web/i18n/de-DE/dataset-pipeline.ts b/web/i18n/de-DE/dataset-pipeline.ts
new file mode 100644
index 0000000000..e2410dd34b
--- /dev/null
+++ b/web/i18n/de-DE/dataset-pipeline.ts
@@ -0,0 +1,3 @@
+const translation = {}
+
+export default translation
diff --git a/web/i18n/en-US/dataset-pipeline.ts b/web/i18n/en-US/dataset-pipeline.ts
new file mode 100644
index 0000000000..4a54196ea8
--- /dev/null
+++ b/web/i18n/en-US/dataset-pipeline.ts
@@ -0,0 +1,25 @@
+const translation = {
+  creation: {
+    title: 'Create knowledge pipeline',
+    createFromScratch: {
+      title: 'Create from scratch',
+      description: 'Blank knowledge pipeline',
+    },
+    ImportDSL: {
+      title: 'Import',
+      description: 'Import from a DSL file',
+    },
+    createKnowledge: 'Create Knowledge',
+    knowledgeNameAndIcon: 'Knowledge name & icon',
+    knowledgeNameAndIconPlaceholder: 'Please enter the name of the Knowledge Base',
+    knowledgeDescription: 'Knowledge description',
+    knowledgeDescriptionPlaceholder: 'Describe what is in this Knowledge Base. A detailed description allows AI to access the content of the dataset more accurately. If empty, Dify will use the default hit strategy. (Optional)',
+    knowledgePermissions: 'Permissions',
+  },
+  tabs: {
+    builtInPipeline: 'Built-in pipeline',
+    customized: 'Customized',
+  },
+}
+
+export default translation
diff --git a/web/i18n/es-ES/dataset-pipeline.ts b/web/i18n/es-ES/dataset-pipeline.ts
new file mode 100644
index 0000000000..e2410dd34b
--- /dev/null
+++ b/web/i18n/es-ES/dataset-pipeline.ts
@@ -0,0 +1,3 @@
+const translation = {}
+
+export default translation
diff --git a/web/i18n/fa-IR/dataset-pipeline.ts b/web/i18n/fa-IR/dataset-pipeline.ts
new file mode 100644
index 0000000000..e2410dd34b
--- /dev/null
+++ b/web/i18n/fa-IR/dataset-pipeline.ts
@@ -0,0 +1,3 @@
+const translation = {}
+
+export default translation
diff --git a/web/i18n/fr-FR/dataset-pipeline.ts b/web/i18n/fr-FR/dataset-pipeline.ts
new file mode 100644
index 0000000000..e2410dd34b
--- /dev/null
+++ b/web/i18n/fr-FR/dataset-pipeline.ts
@@ -0,0 +1,3 @@
+const translation = {}
+
+export default translation
diff --git a/web/i18n/hi-IN/dataset-pipeline.ts b/web/i18n/hi-IN/dataset-pipeline.ts
new file mode 100644
index 0000000000..e2410dd34b
--- /dev/null
+++ b/web/i18n/hi-IN/dataset-pipeline.ts
@@ -0,0 +1,3 @@
+const translation = {}
+
+export default translation
diff --git a/web/i18n/i18next-config.ts b/web/i18n/i18next-config.ts
index 8c5583bf9a..b9ded9afa7 100644
--- a/web/i18n/i18next-config.ts
+++ b/web/i18n/i18next-config.ts
@@ -34,6 +34,7 @@ const loadLangResources = (lang: string) => ({
     datasetHitTesting: require(`./${lang}/dataset-hit-testing`).default,
     datasetSettings: require(`./${lang}/dataset-settings`).default,
     datasetCreation: require(`./${lang}/dataset-creation`).default,
+    datasetPipeline: require(`./${lang}/dataset-pipeline`).default,
     explore: require(`./${lang}/explore`).default,
     billing: require(`./${lang}/billing`).default,
     custom: require(`./${lang}/custom`).default,
diff --git a/web/i18n/it-IT/dataset-pipeline.ts b/web/i18n/it-IT/dataset-pipeline.ts
new file mode 100644
index 0000000000..e2410dd34b
--- /dev/null
+++ b/web/i18n/it-IT/dataset-pipeline.ts
@@ -0,0 +1,3 @@
+const translation = {}
+
+export default translation
diff --git a/web/i18n/ja-JP/dataset-pipeline.ts b/web/i18n/ja-JP/dataset-pipeline.ts
new file mode 100644
index 0000000000..e2410dd34b
--- /dev/null
+++ b/web/i18n/ja-JP/dataset-pipeline.ts
@@ -0,0 +1,3 @@
+const translation = {}
+
+export default translation
diff --git a/web/i18n/ko-KR/dataset-pipeline.ts b/web/i18n/ko-KR/dataset-pipeline.ts
new file mode 100644
index 0000000000..e2410dd34b
--- /dev/null
+++ b/web/i18n/ko-KR/dataset-pipeline.ts
@@ -0,0 +1,3 @@
+const translation = {}
+
+export default translation
diff --git a/web/i18n/pl-PL/dataset-pipeline.ts b/web/i18n/pl-PL/dataset-pipeline.ts
new file mode 100644
index 0000000000..e2410dd34b
--- /dev/null
+++ b/web/i18n/pl-PL/dataset-pipeline.ts
@@ -0,0 +1,3 @@
+const translation = {}
+
+export default translation
diff --git a/web/i18n/pt-BR/dataset-pipeline.ts b/web/i18n/pt-BR/dataset-pipeline.ts
new file mode 100644
index 0000000000..e2410dd34b
--- /dev/null
+++ b/web/i18n/pt-BR/dataset-pipeline.ts
@@ -0,0 +1,3 @@
+const translation = {}
+
+export default translation
diff --git a/web/i18n/ro-RO/dataset-pipeline.ts b/web/i18n/ro-RO/dataset-pipeline.ts
new file mode 100644
index 0000000000..e2410dd34b
--- /dev/null
+++ b/web/i18n/ro-RO/dataset-pipeline.ts
@@ -0,0 +1,3 @@
+const translation = {}
+
+export default translation
diff --git a/web/i18n/ru-RU/dataset-pipeline.ts b/web/i18n/ru-RU/dataset-pipeline.ts
new file mode 100644
index 0000000000..e2410dd34b
--- /dev/null
+++ b/web/i18n/ru-RU/dataset-pipeline.ts
@@ -0,0 +1,3 @@
+const translation = {}
+
+export default translation
diff --git a/web/i18n/sl-SI/dataset-pipeline.ts b/web/i18n/sl-SI/dataset-pipeline.ts
new file mode 100644
index 0000000000..e2410dd34b
--- /dev/null
+++ b/web/i18n/sl-SI/dataset-pipeline.ts
@@ -0,0 +1,3 @@
+const translation = {}
+
+export default translation
diff --git a/web/i18n/th-TH/dataset-pipeline.ts b/web/i18n/th-TH/dataset-pipeline.ts
new file mode 100644
index 0000000000..e2410dd34b
--- /dev/null
+++ b/web/i18n/th-TH/dataset-pipeline.ts
@@ -0,0 +1,3 @@
+const translation = {}
+
+export default translation
diff --git a/web/i18n/tr-TR/dataset-pipeline.ts b/web/i18n/tr-TR/dataset-pipeline.ts
new file mode 100644
index 0000000000..e2410dd34b
--- /dev/null
+++ b/web/i18n/tr-TR/dataset-pipeline.ts
@@ -0,0 +1,3 @@
+const translation = {}
+
+export default translation
diff --git a/web/i18n/uk-UA/dataset-pipeline.ts b/web/i18n/uk-UA/dataset-pipeline.ts
new file mode 100644
index 0000000000..e2410dd34b
--- /dev/null
+++ b/web/i18n/uk-UA/dataset-pipeline.ts
@@ -0,0 +1,3 @@
+const translation = {}
+
+export default translation
diff --git a/web/i18n/vi-VN/dataset-pipeline.ts b/web/i18n/vi-VN/dataset-pipeline.ts
new file mode 100644
index 0000000000..e2410dd34b
--- /dev/null
+++ b/web/i18n/vi-VN/dataset-pipeline.ts
@@ -0,0 +1,3 @@
+const translation = {}
+
+export default translation
diff --git a/web/i18n/zh-Hans/dataset-pipeline.ts b/web/i18n/zh-Hans/dataset-pipeline.ts
new file mode 100644
index 0000000000..e193ddb479
--- /dev/null
+++ b/web/i18n/zh-Hans/dataset-pipeline.ts
@@ -0,0 +1,25 @@
+const translation = {
+  creation: {
+    title: '创建知识库流水线',
+    createFromScratch: {
+      title: '从零开始创建',
+      description: '空白知识库流水线',
+    },
+    ImportDSL: {
+      title: '导入',
+      description: '从 DSL 文件导入',
+    },
+    createKnowledge: '创建知识库',
+    knowledgeNameAndIcon: '知识库名称和图标',
+    knowledgeNameAndIconPlaceholder: '请输入知识库名称',
+    knowledgeDescription: '知识库描述',
+    knowledgeDescriptionPlaceholder: '描述知识库中的内容。详细的描述可以让 AI 更准确地访问数据集的内容。如果为空，Dify 将使用默认的命中策略。（可选）',
+    knowledgePermissions: '权限',
+  },
+  tabs: {
+    builtInPipeline: '内置流水线',
+    customized: '自定义',
+  },
+}
+
+export default translation
diff --git a/web/i18n/zh-Hant/dataset-pipeline.ts b/web/i18n/zh-Hant/dataset-pipeline.ts
new file mode 100644
index 0000000000..e2410dd34b
--- /dev/null
+++ b/web/i18n/zh-Hant/dataset-pipeline.ts
@@ -0,0 +1,3 @@
+const translation = {}
+
+export default translation
diff --git a/web/models/datasets.ts b/web/models/datasets.ts
index cc06d6e564..e0a09d7af6 100644
--- a/web/models/datasets.ts
+++ b/web/models/datasets.ts
@@ -4,6 +4,7 @@ import type { Tag } from '@/app/components/base/tag-management/constant'
 import type { IndexingType } from '@/app/components/datasets/create/step-two'
 import type { MetadataFilteringVariableType } from '@/app/components/workflow/nodes/knowledge-retrieval/types'
 import type { MetadataItemWithValue } from '@/app/components/datasets/metadata/types'
+import { ExternalKnowledgeBase, General, Graph, ParentChild, Qa } from '@/app/components/base/icons/src/public/knowledge'
 
 export enum DataSourceType {
   FILE = 'upload_file',
@@ -31,16 +32,18 @@ export type MetadataInDoc = {
   name: string
 }
 
+export type IconInfo = {
+  icon: string
+  icon_background?: string
+  icon_type: AppIconType
+  icon_url?: string
+}
+
 export type DataSet = {
   id: string
   name: string
   indexing_status: DocumentIndexingStatus
-  icon_info: {
-    icon: string
-    icon_background?: string
-    icon_type: AppIconType
-    icon_url?: string
-  }
+  icon_info: IconInfo
   description: string
   permission: DatasetPermission
   data_source_type: DataSourceType
@@ -346,7 +349,7 @@ export type DocumentListResponse = {
 
 export type DocumentReq = {
   original_document_id?: string
-  indexing_technique?: string
+  indexing_technique?: IndexingType
   doc_form: ChunkingMode
   doc_language: string
   process_rule: ProcessRule
@@ -700,3 +703,47 @@ export type BatchImportResponse = {
   job_id: string
   job_status: 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> = {
+  [ChunkingMode.text]: 'general',
+  [ChunkingMode.qa]: 'qa',
+  [ChunkingMode.parentChild]: 'parentChild',
+  [ChunkingMode.graph]: 'graph',
+}
+
+export type CreateDatasetReq = {
+  name: string
+  description: string
+  icon_info: IconInfo
+  doc_form?: ChunkingMode
+  permission: DatasetPermission
+  partial_member_list?: {
+    user_id: string
+    role?: 'owner' | 'admin' | 'editor' | 'normal' | 'dataset_operator'
+  }[]
+  indexing_technique?: IndexingType
+  retrieval_mode?: RetrievalConfig
+  embedding_model?: string
+  embedding_model_provider?: string
+}
+
+export type CreateDatasetResponse = {
+  id: string
+  name: string
+  description: string
+  permission: DatasetPermission
+  data_source_type: DataSourceType
+  indexing_technique: IndexingType
+  created_by: string
+  created_at: number
+  updated_by: string
+  updated_at: number
+}
diff --git a/web/models/pipeline.ts b/web/models/pipeline.ts
new file mode 100644
index 0000000000..987c3f1d51
--- /dev/null
+++ b/web/models/pipeline.ts
@@ -0,0 +1,36 @@
+import type { ChunkingMode, IconInfo } from './datasets'
+
+export type PipelineTemplateListParams = {
+  type: 'built-in' | 'customized'
+}
+
+export type PipelineTemple = {
+  id: string
+  name: string
+  icon_info: IconInfo
+  description: string
+  position: number
+  doc_form: ChunkingMode
+}
+
+export type PipelineTemplateListResponse = {
+  pipelines: PipelineTemple[]
+}
+
+export type PipelineTemplateByIdResponse = {
+  name: string
+  icon_info: IconInfo
+  description: string
+  export_data: string
+}
+
+export type UpdatePipelineInfoPayload = {
+  pipelineId: string
+  name: string
+  icon_info: IconInfo
+  description: string
+}
+
+export type ExportPipelineDSLResponse = {
+  data: string
+}
diff --git a/web/service/knowledge/use-create-dataset.ts b/web/service/knowledge/use-create-dataset.ts
index 88ef1d9ffa..791107f2a3 100644
--- a/web/service/knowledge/use-create-dataset.ts
+++ b/web/service/knowledge/use-create-dataset.ts
@@ -3,8 +3,24 @@ import type { MutationOptions } from '@tanstack/react-query'
 import { useMutation } from '@tanstack/react-query'
 import { createDocument, createFirstDocument, fetchDefaultProcessRule, fetchFileIndexingEstimate } from '../datasets'
 import type { IndexingType } from '@/app/components/datasets/create/step-two'
-import type { ChunkingMode, CrawlOptions, CrawlResultItem, CreateDocumentReq, CustomFile, DataSourceType, FileIndexingEstimateResponse, IndexingEstimateParams, NotionInfo, ProcessRule, ProcessRuleResponse, createDocumentResponse } from '@/models/datasets'
+import type {
+  ChunkingMode,
+  CrawlOptions,
+  CrawlResultItem,
+  CreateDatasetReq,
+  CreateDatasetResponse,
+  CreateDocumentReq,
+  CustomFile,
+  DataSourceType,
+  FileIndexingEstimateResponse,
+  IndexingEstimateParams,
+  NotionInfo,
+  ProcessRule,
+  ProcessRuleResponse,
+  createDocumentResponse,
+} from '@/models/datasets'
 import type { DataSourceProvider, NotionPage } from '@/models/common'
+import { post } from '../base'
 
 export const getNotionInfo = (
   notionPages: NotionPage[],
@@ -221,3 +237,14 @@ export const useFetchDefaultProcessRule = (
     ...mutationOptions,
   })
 }
+
+export const useCreateDataset = (
+  mutationOptions: MutationOptions<CreateDatasetResponse, Error, CreateDatasetReq> = {},
+) => {
+  return useMutation({
+    mutationFn: (req: CreateDatasetReq) => {
+      return post<CreateDatasetResponse>('/datasets', { body: req })
+    },
+    ...mutationOptions,
+  })
+}
diff --git a/web/service/use-pipeline.ts b/web/service/use-pipeline.ts
new file mode 100644
index 0000000000..3fbfc2eda8
--- /dev/null
+++ b/web/service/use-pipeline.ts
@@ -0,0 +1,75 @@
+import { useMutation, useQuery } from '@tanstack/react-query'
+import { del, get, patch } from './base'
+import type {
+  ExportPipelineDSLResponse,
+  PipelineTemplateByIdResponse,
+  PipelineTemplateListParams,
+  PipelineTemplateListResponse,
+  UpdatePipelineInfoPayload,
+} from '@/models/pipeline'
+
+const NAME_SPACE = 'pipeline'
+
+export const usePipelineTemplateList = (params: PipelineTemplateListParams) => {
+  return useQuery<PipelineTemplateListResponse>({
+    queryKey: [NAME_SPACE, 'template', 'list'],
+    queryFn: () => {
+      return get<PipelineTemplateListResponse>('/rag/pipeline/template', { params })
+    },
+  })
+}
+
+export const usePipelineTemplateById = (templateId: string) => {
+  return useQuery<PipelineTemplateByIdResponse>({
+    queryKey: [NAME_SPACE, 'template', templateId],
+    queryFn: () => {
+      return get<PipelineTemplateByIdResponse>(`/rag/pipeline/template/${templateId}`)
+    },
+  })
+}
+
+export const useUpdatePipelineInfo = ({
+  onSuccess,
+  onError,
+}: {
+  onSuccess?: () => void
+  onError?: (error: any) => void
+}) => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'template', 'update'],
+    mutationFn: (payload: UpdatePipelineInfoPayload) => {
+      const { pipelineId, ...rest } = payload
+      return patch(`/rag/pipeline/${pipelineId}`, {
+        body: rest,
+      })
+    },
+    onSuccess,
+    onError,
+  })
+}
+
+export const useDeletePipeline = ({
+  onSuccess,
+  onError,
+}: {
+  onSuccess?: () => void
+  onError?: (error: any) => void
+}) => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'template', 'delete'],
+    mutationFn: (pipelineId: string) => {
+      return del(`/rag/pipeline/${pipelineId}`)
+    },
+    onSuccess,
+    onError,
+  })
+}
+
+export const useExportPipelineDSL = (pipelineId: string) => {
+  return useQuery<ExportPipelineDSLResponse>({
+    queryKey: [NAME_SPACE, 'template', 'export', pipelineId],
+    queryFn: () => {
+      return get<ExportPipelineDSLResponse>(`/rag/pipeline/${pipelineId}`)
+    },
+  })
+}