feat: text generation application support run batch (#529)

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

@@ -0,0 +1,70 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import {
+  useCSVDownloader,
+} from 'react-papaparse'
+import { useTranslation } from 'react-i18next'
+import { Download02 as DownloadIcon } from '@/app/components/base/icons/src/vender/solid/general'
+
+export type ICSVDownloadProps = {
+  vars: { name: string }[]
+}
+
+const CSVDownload: FC<ICSVDownloadProps> = ({
+  vars,
+}) => {
+  const { t } = useTranslation()
+  const { CSVDownloader, Type } = useCSVDownloader()
+  const addQueryContentVars = [...vars, { name: t('share.generation.queryTitle') }]
+  const template = (() => {
+    const res: Record<string, string> = {}
+    addQueryContentVars.forEach((item) => {
+      res[item.name] = ''
+    })
+    return res
+  })()
+
+  return (
+    <div className='mt-6'>
+      <div className='text-sm text-gray-900 font-medium'>{t('share.generation.csvStructureTitle')}</div>
+      <div className='mt-2 max-h-[500px] overflow-auto'>
+        <table className='w-full border-separate border-spacing-0 border border-gray-200 rounded-lg text-xs'>
+          <thead className='text-gray-500'>
+            <tr>
+              {addQueryContentVars.map((item, i) => (
+                <td key={i} className='h-9 pl-4 border-b border-gray-200'>{item.name}</td>
+              ))}
+            </tr>
+          </thead>
+          <tbody className='text-gray-300'>
+            <tr>
+              {addQueryContentVars.map((item, i) => (
+                <td key={i} className='h-9 pl-4'>{item.name} {t('share.generation.field')}</td>
+              ))}
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <CSVDownloader
+        className="block mt-2 cursor-pointer"
+        type={Type.Link}
+        filename={'template'}
+        bom={true}
+        config={{
+          // delimiter: ';',
+        }}
+        data={[
+          template,
+        ]}
+      >
+        <div className='flex items-center h-[18px] space-x-1 text-[#155EEF] text-xs font-medium'>
+          <DownloadIcon className='w-3 h-3' />
+          <span>{t('share.generation.downloadTemplate')}</span>
+        </div>
+      </CSVDownloader>
+    </div>
+
+  )
+}
+export default React.memo(CSVDownload)

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

@@ -0,0 +1,70 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import {
+  useCSVReader,
+} from 'react-papaparse'
+import cn from 'classnames'
+import { useTranslation } from 'react-i18next'
+import s from './style.module.css'
+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(s.zone, zoneHover && s.zoneHover, acceptedFile ? 'px-6' : 'justify-center border-dashed text-gray-500')}
+          >
+            {
+              acceptedFile
+                ? (
+                  <div className='w-full flex items-center space-x-2'>
+                    <CSVIcon className="shrink-0" />
+                    <div className='flex w-0 grow'>
+                      <span className='max-w-[calc(100%_-_30px)] text-ellipsis whitespace-nowrap overflow-hidden text-gray-800'>{acceptedFile.name.replace(/.csv$/, '')}</span>
+                      <span className='shrink-0 text-gray-500'>.csv</span>
+                    </div>
+                  </div>
+                )
+                : (
+                  <div className='flex items-center justify-center space-x-2'>
+                    <CSVIcon className="shrink-0" />
+                    <div className='text-gray-500'>{t('share.generation.csvUploadTitle')}<span className='text-primary-400'>{t('share.generation.browse')}</span></div>
+                  </div>
+                )}
+          </div>
+        </>
+      )}
+    </CSVReader>
+  )
+}
+
+export default React.memo(CSVReader)

web/app/components/share/text-generation/run-batch/csv-reader/style.module.css

@@ -0,0 +1,11 @@
+.zone {
+    @apply flex items-center h-20 rounded-xl bg-gray-50 border border-gray-200 cursor-pointer text-sm font-normal;
+}
+
+.zoneHover {
+    @apply border-solid bg-gray-100;
+}
+
+.info {
+    @apply text-gray-800 text-sm;
+}

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

@@ -0,0 +1,53 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import {
+  PlayIcon,
+} from '@heroicons/react/24/solid'
+import { useTranslation } from 'react-i18next'
+import CSVReader from './csv-reader'
+import CSVDownload from './csv-download'
+import Button from '@/app/components/base/button'
+
+export type IRunBatchProps = {
+  vars: { name: string }[]
+  onSend: (data: string[][]) => void
+}
+
+const RunBatch: FC<IRunBatchProps> = ({
+  vars,
+  onSend,
+}) => {
+  const { t } = useTranslation()
+
+  const [csvData, setCsvData] = React.useState<string[][]>([])
+  const [isParsed, setIsParsed] = React.useState(false)
+  const handleParsed = (data: string[][]) => {
+    setCsvData(data)
+    // console.log(data)
+    setIsParsed(true)
+  }
+
+  const handleSend = () => {
+    onSend(csvData)
+  }
+  return (
+    <div className='pt-4'>
+      <CSVReader onParsed={handleParsed} />
+      <CSVDownload vars={vars} />
+      <div className='mt-4 h-[1px] bg-gray-100'></div>
+      <div className='flex justify-end'>
+        <Button
+          type="primary"
+          className='mt-4 !h-8 !pl-3 !pr-4'
+          onClick={handleSend}
+          disabled={!isParsed}
+        >
+          <PlayIcon className="shrink-0 w-4 h-4 mr-1" aria-hidden="true" />
+          <span className='uppercase text-[13px]'>{t('share.generation.run')}</span>
+        </Button>
+      </div>
+    </div>
+  )
+}
+export default React.memo(RunBatch)