refactor: update file upload and download handling for pipeline format

web/app/components/app-sidebar/dataset-info/dropdown.tsx

@@ -66,7 +66,7 @@ const DropDown = ({
       const a = document.createElement('a')
       const file = new Blob([data], { type: 'application/yaml' })
       a.href = URL.createObjectURL(file)
-      a.download = `${name}.yml`
+      a.download = `${name}.pipeline`
       a.click()
     }
     catch {

web/app/components/app/create-from-dsl-modal/uploader.tsx

@@ -17,12 +17,16 @@ export type Props = {
   file: File | undefined
   updateFile: (file?: File) => void
   className?: string
+  accept?: string
+  displayName?: string
 }
 
 const Uploader: FC<Props> = ({
   file,
   updateFile,
   className,
+  accept = '.yaml,.yml',
+  displayName = 'YAML',
 }) => {
   const { t } = useTranslation()
   const { notify } = useContext(ToastContext)
@@ -95,9 +99,9 @@ const Uploader: FC<Props> = ({
       <input
         ref={fileUploader}
         style={{ display: 'none' }}
-        type="file"
+        type='file'
-        id="fileUploader"
+        id='fileUploader'
-        accept='.yaml,.yml'
+        accept={accept}
         onChange={fileChangeHandle}
       />
       <div ref={dropRef}>
@@ -116,12 +120,12 @@ const Uploader: FC<Props> = ({
         {file && (
           <div className={cn('group flex items-center rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg shadow-xs', ' hover:bg-components-panel-on-panel-item-bg-hover')}>
             <div className='flex items-center justify-center p-3'>
-              <YamlIcon className="h-6 w-6 shrink-0" />
+              <YamlIcon className='h-6 w-6 shrink-0' />
             </div>
             <div className='flex grow flex-col items-start gap-0.5 py-1 pr-2'>
               <span className='font-inter max-w-[calc(100%_-_30px)] overflow-hidden text-ellipsis whitespace-nowrap text-[12px] font-medium leading-4 text-text-secondary'>{file.name}</span>
               <div className='font-inter flex h-3 items-center gap-1 self-stretch text-[10px] font-medium uppercase leading-3 text-text-tertiary'>
-                <span>YAML</span>
+                <span>{displayName}</span>
                 <span className='text-text-quaternary'>·</span>
                 <span>{formatFileSize(file.size)}</span>
               </div>

web/app/components/datasets/create-from-pipeline/create-options/create-from-dsl-modal/uploader.tsx

@@ -98,7 +98,7 @@ const Uploader: FC<Props> = ({
         style={{ display: 'none' }}
         type='file'
         id='fileUploader'
-        accept='.yaml,.yml'
+        accept='.pipeline'
         onChange={fileChangeHandle}
       />
       <div ref={dropRef}>

web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx

@@ -103,7 +103,7 @@ const TemplateCard = ({
         const blob = new Blob([res.data], { type: 'application/yaml' })
         downloadFile({
           data: blob,
-          fileName: `${pipeline.name}.yml`,
+          fileName: `${pipeline.name}.pipeline`,
         })
         Toast.notify({
           type: 'success',

web/app/components/datasets/list/dataset-card/index.tsx

@@ -115,7 +115,7 @@ const DatasetCard = ({
       const a = document.createElement('a')
       const file = new Blob([data], { type: 'application/yaml' })
       a.href = URL.createObjectURL(file)
-      a.download = `${name}.yml`
+      a.download = `${name}.pipeline`
       a.click()
     }
     catch {

web/app/components/rag-pipeline/components/update-dsl-modal.tsx

@@ -233,6 +233,8 @@ const UpdateDSLModal = ({
               file={currentFile}
               updateFile={handleFile}
               className='!mt-0 w-full'
+              accept='.pipeline'
+              displayName='PIPELINE'
             />
           </div>
         </div>

web/app/components/rag-pipeline/hooks/use-DSL.ts

@@ -40,7 +40,7 @@ export const useDSL = () => {
       const a = document.createElement('a')
       const file = new Blob([data], { type: 'application/yaml' })
       a.href = URL.createObjectURL(file)
-      a.download = `${knowledgeName}.yml`
+      a.download = `${knowledgeName}.pipeline`
       a.click()
     }
     catch {