feat: implement dataset conversion to pipeline with success and error notifications

web/app/components/rag-pipeline/conversion.tsx

@@ -3,15 +3,45 @@ import { useTranslation } from 'react-i18next'
 import Button from '../base/button'
 import PipelineScreenShot from './screenshot'
 import Confirm from '../base/confirm'
+import { useConvertDatasetToPipeline } from '@/service/use-pipeline'
+import { useParams } from 'next/navigation'
+import { useInvalid } from '@/service/use-base'
+import { datasetDetailQueryKeyPrefix } from '@/service/knowledge/use-dataset'
+import Toast from '../base/toast'
 
 const Conversion = () => {
   const { t } = useTranslation()
+  const { datasetId } = useParams()
   const [showConfirmModal, setShowConfirmModal] = useState(false)
 
+  const { mutateAsync: convert, isPending } = useConvertDatasetToPipeline()
+  const invalidDatasetDetail = useInvalid([datasetDetailQueryKeyPrefix, datasetId])
   const handleConvert = useCallback(() => {
-    setShowConfirmModal(false)
-    // todo: Add conversion logic here
-  }, [])
+    convert(datasetId as string, {
+      onSuccess: (res) => {
+        if (res.status === 'success') {
+          Toast.notify({
+            type: 'error',
+            message: t('datasetPipeline.conversion.successMessage'),
+          })
+          setShowConfirmModal(false)
+          invalidDatasetDetail()
+        }
+        else if (res.status === 'failed') {
+          Toast.notify({
+            type: 'error',
+            message: t('datasetPipeline.conversion.errorMessage'),
+          })
+        }
+      },
+      onError: () => {
+        Toast.notify({
+          type: 'error',
+          message: t('datasetPipeline.conversion.errorMessage'),
+        })
+      },
+    })
+  }, [convert, datasetId, invalidDatasetDetail, t])
 
   const handleShowConfirmModal = useCallback(() => {
     setShowConfirmModal(true)
@@ -62,6 +92,8 @@ const Conversion = () => {
           isShow={showConfirmModal}
           onConfirm={handleConvert}
           onCancel={handleCancelConversion}
+          isLoading={isPending}
+          isDisabled={isPending}
         />
       )}
     </div>

web/i18n/en-US/dataset-pipeline.ts

@@ -136,6 +136,8 @@ const translation = {
       title: 'Confirmation',
       content: 'This action is permanent. You won\'t be able to revert to the previous method.Please confirm to convert.',
     },
+    errorMessage: 'Failed to convert the dataset to a pipeline',
+    successMessage: 'Successfully converted the dataset to a pipeline',
   },
 }
 

web/i18n/zh-Hans/dataset-pipeline.ts

@@ -136,6 +136,8 @@ const translation = {
       title: '确认',
       content: '此操作是永久性的。您将无法恢复到之前的方式。请确认转换。',
     },
+    errorMessage: '转换数据集为 pipeline 失败',
+    successMessage: '成功将数据集转换为 pipeline',
   },
 }
 

web/models/pipeline.ts

@@ -268,6 +268,12 @@ export type OnlineDocumentPreviewResponse = {
   content: string
 }
 
+export type ConversionResponse = {
+  pipeline_id: string
+  dataset_id: string
+  status: 'success' | 'failed'
+}
+
 export enum OnlineDriveFileType {
   file = 'file',
   folder = 'folder',

web/service/use-pipeline.ts

@@ -3,6 +3,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { del, get, patch, post } from './base'
 import { DatasourceType } from '@/models/pipeline'
 import type {
+  ConversionResponse,
   DeleteTemplateResponse,
   ExportTemplateDSLResponse,
   ImportPipelineDSLConfirmResponse,
@@ -351,3 +352,12 @@ export const usePreviewOnlineDocument = () => {
     },
   })
 }
+
+export const useConvertDatasetToPipeline = () => {
+  return useMutation({
+    mutationKey: [NAME_SPACE, 'convert-dataset-to-pipeline'],
+    mutationFn: (datasetId: string) => {
+      return post<ConversionResponse>(`/rag/pipelines/transform/${datasetId}`)
+    },
+  })
+}