dify

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

@@ -0,0 +1,39 @@
+.filePreview {
+    @apply flex flex-col border-l border-components-panel-border shrink-0 bg-background-default-lighter;
+    width: 100%;
+  }
+
+  .previewHeader {
+    @apply border-b border-divider-subtle shrink-0;
+    margin: 42px 32px 0;
+    padding-bottom: 16px;
+  }
+
+  .previewHeader .title {
+    @apply flex justify-between items-center text-text-primary;
+  }
+
+  .previewHeader .fileName {
+    @apply text-text-tertiary;
+  }
+
+  .previewHeader .filetype {
+    @apply text-text-tertiary;
+  }
+
+  .previewContent {
+    @apply overflow-y-auto grow text-text-secondary;
+    padding: 20px 32px;
+  }
+
+  .previewContent .loading {
+    width: 100%;
+    height: 180px;
+    background: transparent center no-repeat url(../assets/Loading.svg);
+    background-size: contain;
+  }
+
+  .fileContent {
+    white-space: pre-line;
+    word-break: break-all;
+  }

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

@@ -0,0 +1,70 @@
+'use client'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { XMarkIcon } from '@heroicons/react/20/solid'
+import Loading from '@/app/components/base/loading'
+import s from './index.module.css'
+import cn from '@/utils/classnames'
+import type { CustomFile as File } from '@/models/datasets'
+import { fetchFilePreview } from '@/service/common'
+
+type IProps = {
+  file?: File
+  hidePreview: () => void
+}
+
+const FilePreview = ({
+  file,
+  hidePreview,
+}: 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?.id) {
+      setLoading(true)
+      getPreviewContent(file.id)
+    }
+  }, [file])
+
+  return (
+    <div className={cn(s.filePreview, 'h-full')}>
+      <div className={cn(s.previewHeader)}>
+        <div className={cn(s.title, 'title-md-semi-bold')}>
+          <span>{t('datasetCreation.stepOne.filePreview')}</span>
+          <div className='flex h-6 w-6 cursor-pointer items-center justify-center' onClick={hidePreview}>
+            <XMarkIcon className='h-4 w-4'></XMarkIcon>
+          </div>
+        </div>
+        <div className={cn(s.fileName, 'system-xs-medium')}>
+          <span>{getFileName(file)}</span><span className={cn(s.filetype)}>.{file?.extension}</span>
+        </div>
+      </div>
+      <div className={cn(s.previewContent)}>
+        {loading && <Loading type='area' />}
+        {!loading && (
+          <div className={cn(s.fileContent, 'body-md-regular')}>{previewContent}</div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default FilePreview