Initial commit

web/app/components/datasets/create/file-preview/index.module.css

@@ -0,0 +1,46 @@
+.filePreview {
+    @apply flex flex-col border-l border-gray-200 shrink-0;
+    width: 528px;
+    background-color: #fcfcfd;
+  }
+  
+  .previewHeader {
+    @apply border-b border-gray-200 shrink-0;
+    margin: 42px 32px 0;
+    padding-bottom: 16px;
+  }
+  
+  .previewHeader .title {
+    color: #101828;
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 28px;
+  }
+  
+  .previewHeader .fileName {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 18px;
+    color: #1D2939;
+  }
+  
+  .previewHeader .filetype {
+    color: #667085;
+  }
+  
+  .previewContent {
+    @apply overflow-y-auto grow;
+    padding: 20px 32px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+    color: #344054;
+  }
+  
+  .previewContent .loading {
+    width: 100%;
+    height: 180px;
+    background: #f9fafb center no-repeat url(../assets/Loading.svg);
+    background-size: contain;
+  }
+  

web/app/components/datasets/create/file-preview/index.tsx

@@ -0,0 +1,62 @@
+'use client'
+import React, { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { File } from '@/models/datasets'
+import { fetchFilePreview } from '@/service/common'
+
+import cn from 'classnames'
+import s from './index.module.css'
+
+type IProps = {
+  file?: File,
+}
+
+const FilePreview = ({
+  file,
+}: IProps) => {
+  const { t } = useTranslation()
+  const [previewContent, setPreviewContent] = useState('')
+  const [loading, setLoading] = useState(true)
+
+  const getPreviewContent = async (fileID: string) => {
+    try {
+      const res = await fetchFilePreview({ fileID })
+      setPreviewContent(res.content)
+      setLoading(false)
+    }
+    catch {}
+  }
+
+  const getFileName = (currentFile?: File) => {
+    if (!currentFile) {
+      return ''
+    }
+    const arr = currentFile.name.split('.')
+    return arr.slice(0, -1).join()
+  }
+
+  useEffect(() => {
+    if (file) {
+      getPreviewContent(file.id)
+    }
+  }, [file])
+
+  return (
+    <div className={cn(s.filePreview)}>
+      <div className={cn(s.previewHeader)}>
+        <div className={cn(s.title)}>{t('datasetCreation.stepOne.filePreview')}</div>
+        <div className={cn(s.fileName)}>
+          <span>{getFileName(file)}</span><span className={cn(s.filetype)}>.{file?.extension}</span>
+        </div>
+      </div>
+      <div className={cn(s.previewContent)}>
+        {loading && <div className={cn(s.loading)}/>}
+        {!loading && (
+          <div className={cn(s.fileContent)}>{previewContent}</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default FilePreview