dify

dify/web/app/components/share/text-generation/run-batch/csv-reader/index.tsx

@@ -0,0 +1,73 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import {
+  useCSVReader,
+} from 'react-papaparse'
+import { useTranslation } from 'react-i18next'
+import cn from '@/utils/classnames'
+import { Csv as CSVIcon } from '@/app/components/base/icons/src/public/files'
+
+export type Props = {
+  onParsed: (data: string[][]) => void
+}
+
+const CSVReader: FC<Props> = ({
+  onParsed,
+}) => {
+  const { t } = useTranslation()
+  const { CSVReader } = useCSVReader()
+  const [zoneHover, setZoneHover] = useState(false)
+  return (
+    <CSVReader
+      onUploadAccepted={(results: any) => {
+        onParsed(results.data)
+        setZoneHover(false)
+      }}
+      onDragOver={(event: DragEvent) => {
+        event.preventDefault()
+        setZoneHover(true)
+      }}
+      onDragLeave={(event: DragEvent) => {
+        event.preventDefault()
+        setZoneHover(false)
+      }}
+    >
+      {({
+        getRootProps,
+        acceptedFile,
+      }: any) => (
+        <>
+          <div
+            {...getRootProps()}
+            className={cn(
+              'system-sm-regular flex h-20 items-center rounded-xl border border-dashed border-components-dropzone-border bg-components-dropzone-bg',
+              acceptedFile && 'border-solid border-components-panel-border bg-components-panel-on-panel-item-bg px-6 hover:border-components-panel-bg-blur hover:bg-components-panel-on-panel-item-bg-hover',
+              zoneHover && 'border border-components-dropzone-border-accent bg-components-dropzone-bg-accent',
+            )}
+          >
+            {
+              acceptedFile
+                ? (
+                  <div className='flex w-full items-center space-x-2'>
+                    <CSVIcon className="shrink-0" />
+                    <div className='flex w-0 grow'>
+                      <span className='max-w-[calc(100%_-_30px)] truncate text-text-secondary'>{acceptedFile.name.replace(/.csv$/, '')}</span>
+                      <span className='shrink-0 text-text-tertiary'>.csv</span>
+                    </div>
+                  </div>
+                )
+                : (
+                  <div className='flex w-full items-center justify-center space-x-2'>
+                    <CSVIcon className="shrink-0" />
+                    <div className='text-text-tertiary'>{t('share.generation.csvUploadTitle')}<span className='cursor-pointer text-text-accent'>{t('share.generation.browse')}</span></div>
+                  </div>
+                )}
+          </div>
+        </>
+      )}
+    </CSVReader>
+  )
+}
+
+export default React.memo(CSVReader)