From 612dca8b7d696a078982ab263a434efec0f60fad Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Wed, 14 May 2025 18:20:29 +0800
Subject: [PATCH] feat: add WorkflowPreview component to Details and define
 graph structure in PipelineTemplateByIdResponse

---
 .../list/template-card/details.tsx            |   5 +-
 web/app/components/datasets/list/index.tsx    | 146 ++++++++++++++++++
 web/models/pipeline.ts                        |   8 +-
 3 files changed, 157 insertions(+), 2 deletions(-)
 create mode 100644 web/app/components/datasets/list/index.tsx

diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/details.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/details.tsx
index 43d16fd336..cbe9e785e4 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/details.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/details.tsx
@@ -7,6 +7,7 @@ import Button from '@/app/components/base/button'
 import { useTranslation } from 'react-i18next'
 import Tooltip from '@/app/components/base/tooltip'
 import Loading from '@/app/components/base/loading'
+import WorkflowPreview from '@/app/components/workflow/workflow-preview'
 
 type DetailsProps = {
   id: string
@@ -39,7 +40,9 @@ const Details = ({
   return (
     <div className='flex h-full'>
       <div className='flex grow items-center justify-center p-3 pr-0'>
-        Pipeline Preview
+        <WorkflowPreview
+          {...pipelineTemplateInfo.graph}
+        />
       </div>
       <div className='relative flex w-[360px] shrink-0 flex-col'>
         <button
diff --git a/web/app/components/datasets/list/index.tsx b/web/app/components/datasets/list/index.tsx
new file mode 100644
index 0000000000..61f3d523e9
--- /dev/null
+++ b/web/app/components/datasets/list/index.tsx
@@ -0,0 +1,146 @@
+'use client'
+
+// Libraries
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { useTranslation } from 'react-i18next'
+import { useBoolean, useDebounceFn } from 'ahooks'
+import { useQuery } from '@tanstack/react-query'
+
+// Components
+import ExternalAPIPanel from '../external-api/external-api-panel'
+import Datasets from './datasets'
+import DatasetFooter from './dataset-footer'
+import ApiServer from '../../develop/ApiServer'
+import Doc from './doc'
+import SegmentedControl from '@/app/components/base/segmented-control'
+import { RiBook2Line, RiTerminalBoxLine } from '@remixicon/react'
+import TagManagementModal from '@/app/components/base/tag-management'
+import TagFilter from '@/app/components/base/tag-management/filter'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
+import CheckboxWithLabel from '@/app/components/datasets/create/website/base/checkbox-with-label'
+
+// Services
+import { fetchDatasetApiBaseUrl } from '@/service/datasets'
+
+// Hooks
+import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
+import { useStore as useTagStore } from '@/app/components/base/tag-management/store'
+import { useAppContext } from '@/context/app-context'
+import { useExternalApiPanel } from '@/context/external-api-panel-context'
+
+const List = () => {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const { currentWorkspace, isCurrentWorkspaceOwner } = useAppContext()
+  const showTagManagementModal = useTagStore(s => s.showTagManagementModal)
+  const { showExternalApiPanel, setShowExternalApiPanel } = useExternalApiPanel()
+  const [includeAll, { toggle: toggleIncludeAll }] = useBoolean(false)
+
+  document.title = `${t('dataset.knowledge')} - Dify`
+
+  const options = useMemo(() => {
+    return [
+      { value: 'dataset', text: t('dataset.datasets'), Icon: RiBook2Line },
+      ...(currentWorkspace.role === 'dataset_operator' ? [] : [{
+        value: 'api', text: t('dataset.datasetsApi'), Icon: RiTerminalBoxLine,
+      }]),
+    ]
+  }, [currentWorkspace.role, t])
+
+  const [activeTab, setActiveTab] = useTabSearchParams({
+    defaultTab: 'dataset',
+  })
+  const containerRef = useRef<HTMLDivElement>(null)
+  const { data } = useQuery(
+    {
+      queryKey: ['datasetApiBaseInfo'],
+      queryFn: () => fetchDatasetApiBaseUrl('/datasets/api-base-info'),
+      enabled: activeTab !== 'dataset',
+    },
+  )
+
+  const [keywords, setKeywords] = useState('')
+  const [searchKeywords, setSearchKeywords] = useState('')
+  const { run: handleSearch } = useDebounceFn(() => {
+    setSearchKeywords(keywords)
+  }, { wait: 500 })
+  const handleKeywordsChange = (value: string) => {
+    setKeywords(value)
+    handleSearch()
+  }
+  const [tagFilterValue, setTagFilterValue] = useState<string[]>([])
+  const [tagIDs, setTagIDs] = useState<string[]>([])
+  const { run: handleTagsUpdate } = useDebounceFn(() => {
+    setTagIDs(tagFilterValue)
+  }, { wait: 500 })
+  const handleTagsChange = (value: string[]) => {
+    setTagFilterValue(value)
+    handleTagsUpdate()
+  }
+
+  useEffect(() => {
+    if (currentWorkspace.role === 'normal')
+      return router.replace('/apps')
+  }, [currentWorkspace, router])
+
+  return (
+    <div ref={containerRef} className='scroll-container relative flex grow flex-col overflow-y-auto bg-background-body'>
+      <div className='sticky top-0 z-30 flex items-center justify-between gap-x-1 bg-background-body px-12 pb-2 pt-4'>
+        <SegmentedControl
+          value={activeTab}
+          onChange={newActiveTab => setActiveTab(newActiveTab as string)}
+          options={options}
+          size='large'
+          activeClassName='text-text-primary'
+        />
+        {activeTab === 'dataset' && (
+          <div className='flex items-center justify-center gap-2'>
+            {isCurrentWorkspaceOwner && <CheckboxWithLabel
+              isChecked={includeAll}
+              onChange={toggleIncludeAll}
+              label={t('dataset.allKnowledge')}
+              labelClassName='system-md-regular text-text-secondary'
+              className='mr-2'
+              tooltip={t('dataset.allKnowledgeDescription') as string}
+            />}
+            <TagFilter type='knowledge' value={tagFilterValue} onChange={handleTagsChange} />
+            <Input
+              showLeftIcon
+              showClearIcon
+              wrapperClassName='w-[200px]'
+              value={keywords}
+              onChange={e => handleKeywordsChange(e.target.value)}
+              onClear={() => handleKeywordsChange('')}
+            />
+            <div className='h-4 w-[1px] bg-divider-regular' />
+            <Button
+              className='shadows-shadow-xs gap-0.5'
+              onClick={() => setShowExternalApiPanel(true)}
+            >
+              <ApiConnectionMod className='h-4 w-4 text-components-button-secondary-text' />
+              <div className='system-sm-medium flex items-center justify-center gap-1 px-0.5 text-components-button-secondary-text'>{t('dataset.externalAPIPanelTitle')}</div>
+            </Button>
+          </div>
+        )}
+        {activeTab === 'api' && data && <ApiServer apiBaseUrl={data.api_base_url || ''} />}
+      </div>
+      {activeTab === 'dataset' && (
+        <>
+          <Datasets containerRef={containerRef} tags={tagIDs} keywords={searchKeywords} includeAll={includeAll} />
+          <DatasetFooter />
+          {showTagManagementModal && (
+            <TagManagementModal type='knowledge' show={showTagManagementModal} />
+          )}
+        </>
+      )}
+      {activeTab === 'api' && data && <Doc apiBaseUrl={data.api_base_url || ''} />}
+
+      {showExternalApiPanel && <ExternalAPIPanel onClose={() => setShowExternalApiPanel(false)} />}
+    </div>
+  )
+}
+
+export default List
diff --git a/web/models/pipeline.ts b/web/models/pipeline.ts
index 83d073648b..3d3110cefd 100644
--- a/web/models/pipeline.ts
+++ b/web/models/pipeline.ts
@@ -1,8 +1,9 @@
-import type { InputVar, InputVarType } from '@/app/components/workflow/types'
+import type { Edge, InputVar, InputVarType, Node } from '@/app/components/workflow/types'
 import type { DSLImportMode, DSLImportStatus } from './app'
 import type { ChunkingMode, DatasetPermission, IconInfo } from './datasets'
 import type { Dependency } from '@/app/components/plugins/types'
 import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
+import type { Viewport } from 'reactflow'
 
 export type PipelineTemplateListParams = {
   type: 'built-in' | 'customized'
@@ -27,6 +28,11 @@ export type PipelineTemplateByIdResponse = {
   description: string
   author: string // todo: TBD
   structure: string // todo: TBD
+  graph: {
+    nodes: Node[]
+    edges: Edge[]
+    viewport: Viewport
+  }
   export_data: string
 }