From 0564651f6f66b1d3ac4b053fd5b64b99ee68cfcb Mon Sep 17 00:00:00 2001
From: zxhlyh <jasonapring2015@outlook.com>
Date: Wed, 11 Jun 2025 10:40:32 +0800
Subject: [PATCH] publish as customized pipeline

---
 .../list/customized-list.tsx                  |   2 +-
 .../publish-as-knowledge-pipeline-modal.tsx   | 150 ++++++++++++++++++
 .../rag-pipeline-header/publisher/popup.tsx   |  53 ++++++-
 .../rag-pipeline/hooks/use-pipeline-init.ts   |   5 +-
 .../components/rag-pipeline/store/index.ts    |   2 +
 web/i18n/en-US/pipeline.ts                    |   6 +
 web/i18n/zh-Hans/pipeline.ts                  |   6 +
 web/models/pipeline.ts                        |   2 +-
 web/service/use-pipeline.ts                   |  22 ++-
 9 files changed, 238 insertions(+), 10 deletions(-)
 create mode 100644 web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx

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 6959b2e2cd..9ffdf45f1c 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
@@ -3,7 +3,7 @@ import { usePipelineTemplateList } from '@/service/use-pipeline'
 
 const CustomizedList = () => {
   const { data: pipelineList, isLoading } = usePipelineTemplateList({ type: 'customized' })
-  const list = pipelineList?.pipelines
+  const list = pipelineList?.pipeline_templates
 
   if (isLoading || !list)
     return null
diff --git a/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx b/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
new file mode 100644
index 0000000000..7471ead7dc
--- /dev/null
+++ b/web/app/components/rag-pipeline/components/publish-as-knowledge-pipeline-modal.tsx
@@ -0,0 +1,150 @@
+'use client'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiCloseLine } from '@remixicon/react'
+import AppIconPicker from '@/app/components/base/app-icon-picker'
+import type { AppIconSelection } from '@/app/components/base/app-icon-picker'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import Input from '@/app/components/base/input'
+import Textarea from '@/app/components/base/textarea'
+import AppIcon from '@/app/components/base/app-icon'
+import { noop } from 'lodash-es'
+import { useStore } from '@/app/components/workflow/store'
+import type { IconInfo } from '@/models/datasets'
+
+type PublishAsKnowledgePipelineModalProps = {
+  confirmDisabled?: boolean
+  onCancel: () => void
+  onConfirm: (
+    name: string,
+    icon: IconInfo,
+    description?: string,
+  ) => Promise<void>
+}
+const PublishAsKnowledgePipelineModal = ({
+  confirmDisabled,
+  onCancel,
+  onConfirm,
+}: PublishAsKnowledgePipelineModalProps) => {
+  const { t } = useTranslation()
+  const knowledgeName = useStore(s => s.knowledgeName)
+  const knowledgeIcon = useStore(s => s.knowledgeIcon)
+  const [pipelineName, setPipelineName] = useState(knowledgeName!)
+  const [pipelineIcon, setPipelineIcon] = useState(knowledgeIcon!)
+  const [description, setDescription] = useState('')
+  const [showAppIconPicker, setShowAppIconPicker] = useState(false)
+
+  const handleSelectIcon = useCallback((item: AppIconSelection) => {
+    if (item.type === 'image') {
+      setPipelineIcon({
+        icon_type: 'image',
+        icon_url: item.url,
+        icon_background: '',
+        icon: '',
+      })
+    }
+
+    if (item.type === 'emoji') {
+      setPipelineIcon({
+        icon_type: 'emoji',
+        icon: item.icon,
+        icon_background: item.background,
+        icon_url: '',
+      })
+    }
+    setShowAppIconPicker(false)
+  }, [])
+  const handleCloseIconPicker = useCallback(() => {
+    setPipelineIcon({
+      icon_type: pipelineIcon.icon_type,
+      icon: pipelineIcon.icon,
+      icon_background: pipelineIcon.icon_background,
+      icon_url: pipelineIcon.icon_url,
+    })
+    setShowAppIconPicker(false)
+  }, [pipelineIcon])
+
+  const handleConfirm = () => {
+    if (confirmDisabled)
+      return
+
+    onConfirm(
+      pipelineName?.trim() || '',
+      pipelineIcon,
+      description?.trim(),
+    )
+  }
+
+  return (
+    <>
+      <Modal
+        isShow
+        onClose={noop}
+        className='relative !w-[520px] !p-0'
+      >
+        <div className='title-2xl-semi-bold relative flex items-center p-6 pb-3 pr-14 text-text-primary'>
+          {t('pipeline.common.publishAs')}
+          <div className='absolute right-5 top-5 flex h-8 w-8 cursor-pointer items-center justify-center' onClick={onCancel}>
+            <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+          </div>
+        </div>
+        <div className='px-6 py-3'>
+          <div className='mb-5 flex'>
+            <div className='mr-3 grow'>
+              <div className='system-sm-medium mb-1 flex h-6 items-center text-text-secondary'>
+                {t('pipeline.common.publishAsPipeline.name')}
+              </div>
+              <Input
+                value={pipelineName}
+                onChange={e => setPipelineName(e.target.value)}
+                placeholder={t('pipeline.common.publishAsPipeline.namePlaceholder') || ''}
+              />
+            </div>
+            <AppIcon
+              size='xxl'
+              onClick={() => { setShowAppIconPicker(true) }}
+              className='mt-2 shrink-0 cursor-pointer'
+              iconType={pipelineIcon?.icon_type}
+              icon={pipelineIcon?.icon}
+              background={pipelineIcon?.icon_background}
+              imageUrl={pipelineIcon?.icon_url}
+            />
+          </div>
+          <div>
+            <div className='system-sm-medium mb-1 flex h-6 items-center text-text-secondary '>
+              {t('pipeline.common.publishAsPipeline.description')}
+            </div>
+            <Textarea
+              className='resize-none'
+              placeholder={t('pipeline.common.publishAsPipeline.descriptionPlaceholder') || ''}
+              value={description}
+              onChange={e => setDescription(e.target.value)}
+            />
+          </div>
+        </div>
+        <div className='flex items-center justify-end px-6 py-5'>
+          <Button
+            className='mr-2'
+            onClick={onCancel}
+          >
+            {t('common.operation.cancel')}
+          </Button>
+          <Button
+            disabled={!pipelineName?.trim() || confirmDisabled}
+            variant='primary'
+            onClick={() => handleConfirm()}
+          >
+            {t('workflow.common.publish')}
+          </Button>
+        </div>
+      </Modal>
+      {showAppIconPicker && <AppIconPicker
+        onSelect={handleSelectIcon}
+        onClose={handleCloseIconPicker}
+      />}
+    </>
+  )
+}
+
+export default PublishAsKnowledgePipelineModal
diff --git a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
index e7bda95140..2e009f6681 100644
--- a/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
+++ b/web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx
@@ -36,6 +36,8 @@ import {
   usePublishAsCustomizedPipeline,
 } from '@/service/use-pipeline'
 import Confirm from '@/app/components/base/confirm'
+import PublishAsKnowledgePipelineModal from '../../publish-as-knowledge-pipeline-modal'
+import type { IconInfo } from '@/models/datasets'
 
 const PUBLISH_SHORTCUT = ['⌘', '⇧', 'P']
 
@@ -62,9 +64,16 @@ const Popup = () => {
     setTrue: showPublishing,
   }] = useBoolean(false)
   const {
-    mutate: publishAsCustomizedPipeline,
-    isPending: isPublishingAsCustomizedPipeline,
+    mutateAsync: publishAsCustomizedPipeline,
   } = usePublishAsCustomizedPipeline()
+  const [showPublishAsKnowledgePipelineModal, {
+    setFalse: hidePublishAsKnowledgePipelineModal,
+    setTrue: setShowPublishAsKnowledgePipelineModal,
+  }] = useBoolean(false)
+  const [isPublishingAsCustomizedPipeline, {
+    setFalse: hidePublishingAsCustomizedPipeline,
+    setTrue: showPublishingAsCustomizedPipeline,
+  }] = useBoolean(false)
 
   const invalidPublishedPipelineInfo = useInvalid([...publishedPipelineInfoQueryKeyPrefix, pipelineId])
 
@@ -117,6 +126,35 @@ const Popup = () => {
     push(`/datasets/${datasetId}/documents/create-from-pipeline`)
   }, [datasetId, push])
 
+  const handlePublishAsKnowledgePipeline = useCallback(async (
+    name: string,
+    icon: IconInfo,
+    description?: string,
+  ) => {
+    try {
+      showPublishingAsCustomizedPipeline()
+      await publishAsCustomizedPipeline({
+        pipelineId: pipelineId || '',
+        name,
+        icon_info: icon,
+        description,
+      })
+      notify({ type: 'success', message: t('common.api.actionSuccess') })
+    }
+    finally {
+      hidePublishingAsCustomizedPipeline()
+      hidePublishAsKnowledgePipelineModal()
+    }
+  }, [
+    pipelineId,
+    publishAsCustomizedPipeline,
+    showPublishingAsCustomizedPipeline,
+    hidePublishingAsCustomizedPipeline,
+    hidePublishAsKnowledgePipelineModal,
+    notify,
+    t,
+  ])
+
   return (
     <div className='w-[320px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5'>
       <div className='p-4 pt-3'>
@@ -192,7 +230,7 @@ const Popup = () => {
         <Button
           className='w-full hover:bg-state-accent-hover hover:text-text-accent'
           variant='tertiary'
-          onClick={() => publishAsCustomizedPipeline({ pipelineId: pipelineId || '' })}
+          onClick={setShowPublishAsKnowledgePipelineModal}
           disabled={!publishedAt || isPublishingAsCustomizedPipeline}
         >
           <div className='flex grow items-center'>
@@ -213,6 +251,15 @@ const Popup = () => {
           />
         )
       }
+      {
+        showPublishAsKnowledgePipelineModal && (
+          <PublishAsKnowledgePipelineModal
+            confirmDisabled={isPublishingAsCustomizedPipeline}
+            onConfirm={handlePublishAsKnowledgePipeline}
+            onCancel={hidePublishAsKnowledgePipelineModal}
+          />
+        )
+      }
     </div>
   )
 }
diff --git a/web/app/components/rag-pipeline/hooks/use-pipeline-init.ts b/web/app/components/rag-pipeline/hooks/use-pipeline-init.ts
index d3e65c8ca6..6cae5b89b9 100644
--- a/web/app/components/rag-pipeline/hooks/use-pipeline-init.ts
+++ b/web/app/components/rag-pipeline/hooks/use-pipeline-init.ts
@@ -25,10 +25,11 @@ export const usePipelineInit = () => {
   const [isLoading, setIsLoading] = useState(true)
   const datasetId = useDatasetDetailContextWithSelector(s => s.dataset)?.pipeline_id
   const knowledgeName = useDatasetDetailContextWithSelector(s => s.dataset)?.name
+  const knowledgeIcon = useDatasetDetailContextWithSelector(s => s.dataset)?.icon_info
 
   useEffect(() => {
-    workflowStore.setState({ pipelineId: datasetId, knowledgeName })
-  }, [datasetId, workflowStore, knowledgeName])
+    workflowStore.setState({ pipelineId: datasetId, knowledgeName, knowledgeIcon })
+  }, [datasetId, workflowStore, knowledgeName, knowledgeIcon])
 
   usePipelineConfig()
 
diff --git a/web/app/components/rag-pipeline/store/index.ts b/web/app/components/rag-pipeline/store/index.ts
index 7799c29daa..306e33ee0b 100644
--- a/web/app/components/rag-pipeline/store/index.ts
+++ b/web/app/components/rag-pipeline/store/index.ts
@@ -5,10 +5,12 @@ import type {
 } from '@/app/components/workflow/types'
 import type { DataSourceItem } from '@/app/components/workflow/block-selector/types'
 import { transformDataSourceToTool } from '@/app/components/workflow/block-selector/utils'
+import type { IconInfo } from '@/models/datasets'
 
 export type RagPipelineSliceShape = {
   pipelineId: string
   knowledgeName: string
+  knowledgeIcon?: IconInfo
   showInputFieldDialog: boolean
   setShowInputFieldDialog: (showInputFieldPanel: boolean) => void
   nodesDefaultConfigs: Record<string, any>
diff --git a/web/i18n/en-US/pipeline.ts b/web/i18n/en-US/pipeline.ts
index c1f597280a..7a3d24b5ca 100644
--- a/web/i18n/en-US/pipeline.ts
+++ b/web/i18n/en-US/pipeline.ts
@@ -4,6 +4,12 @@ const translation = {
     publishAs: 'Publish as a Knowledge Pipeline',
     confirmPublish: 'Confirm Publish',
     confirmPublishContent: 'After successfully publishing the knowledge pipeline, the chunk structure of this knowledge base cannot be modified. Are you sure you want to publish it?',
+    publishAsPipeline: {
+      name: 'Pipeline name & icon',
+      namePlaceholder: 'Please enter the name of this Knowledge Pipeline. (Required) ',
+      description: 'Knowledge description',
+      descriptionPlaceholder: 'Please enter the description of this Knowledge Pipeline. (Optional) ',
+    },
   },
 }
 
diff --git a/web/i18n/zh-Hans/pipeline.ts b/web/i18n/zh-Hans/pipeline.ts
index deb570404b..b02fc001a1 100644
--- a/web/i18n/zh-Hans/pipeline.ts
+++ b/web/i18n/zh-Hans/pipeline.ts
@@ -4,6 +4,12 @@ const translation = {
     publishAs: '发布为知识管道',
     confirmPublish: '确认发布',
     confirmPublishContent: '成功发布知识管道后，此知识库的分段结构将无法修改。您确定要发布吗？',
+    publishAsPipeline: {
+      name: 'Pipeline 名称和图标',
+      namePlaceholder: '请输入此 Pipeline 的名称。 (必填)',
+      description: 'Pipeline 描述',
+      descriptionPlaceholder: '请输入此 Pipeline 的描述。 (可选)',
+    },
   },
 }
 
diff --git a/web/models/pipeline.ts b/web/models/pipeline.ts
index ed07b1eac6..9e9093ea04 100644
--- a/web/models/pipeline.ts
+++ b/web/models/pipeline.ts
@@ -26,7 +26,7 @@ export type PipelineTemplate = {
 }
 
 export type PipelineTemplateListResponse = {
-  pipelines: PipelineTemplate[]
+  pipeline_templates: PipelineTemplate[]
 }
 
 export type PipelineTemplateByIdResponse = {
diff --git a/web/service/use-pipeline.ts b/web/service/use-pipeline.ts
index 8a5de3cc21..7402fcc4b0 100644
--- a/web/service/use-pipeline.ts
+++ b/web/service/use-pipeline.ts
@@ -28,12 +28,14 @@ import type {
 } from '@/models/pipeline'
 import type { DataSourceItem } from '@/app/components/workflow/block-selector/types'
 import type { ToolCredential } from '@/app/components/tools/types'
+import type { IconInfo } from '@/models/datasets'
 
 const NAME_SPACE = 'pipeline'
 
 export const usePipelineTemplateList = (params: PipelineTemplateListParams) => {
+  console.log('params', params)
   return useQuery<PipelineTemplateListResponse>({
-    queryKey: [NAME_SPACE, 'template', 'list'],
+    queryKey: [NAME_SPACE, 'template', 'list', params.type],
     queryFn: () => {
       return get<PipelineTemplateListResponse>('/rag/pipeline/templates', { params })
     },
@@ -348,8 +350,22 @@ export const usePublishAsCustomizedPipeline = () => {
     mutationKey: [NAME_SPACE, 'publish-as-customized-pipeline'],
     mutationFn: ({
       pipelineId,
-    }: { pipelineId: string }) => {
-      return post(`/rag/pipelines/${pipelineId}/customized/publish`)
+      name,
+      icon_info,
+      description,
+    }: {
+      pipelineId: string,
+      name: string,
+      icon_info: IconInfo,
+      description?: string,
+    }) => {
+      return post(`/rag/pipelines/${pipelineId}/customized/publish`, {
+        body: {
+          name,
+          icon_info,
+          description,
+        },
+      })
     },
   })
 }