feat: batch run support export as csv file (langgenius#556)

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

@@ -10,6 +10,7 @@ import Button from '../../base/button'
 import { checkOrSetAccessToken } from '../utils'
 import s from './style.module.css'
 import RunBatch from './run-batch'
+import ResDownload from './run-batch/res-download'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
 import RunOnce from '@/app/components/share/text-generation/run-once'
 import { fetchSavedMessage as doFetchSavedMessage, fetchAppInfo, fetchAppParams, removeMessage, saveMessage } from '@/service/share'
@@ -24,7 +25,6 @@ import SavedItems from '@/app/components/app/text-generate/saved-items'
 import type { InstalledApp } from '@/models/explore'
 import { appDefaultIconBackground } from '@/config'
 import Toast from '@/app/components/base/toast'
-
 const PARALLEL_LIMIT = 5
 enum TaskStatus {
   pending = 'pending',
@@ -105,6 +105,20 @@ const TextGeneration: FC<IMainProps> = ({
   const noPendingTask = pendingTaskList.length === 0
   const showTaskList = allTaskList.filter(task => task.status !== TaskStatus.pending)
   const allTaskFinished = allTaskList.every(task => task.status === TaskStatus.completed)
+  const [batchCompletionRes, setBatchCompletionRes, getBatchCompletionRes] = useGetState<Record<string, string>>({})
+  const exportRes = allTaskList.map((task) => {
+    if (allTaskList.length > 0 && !allTaskFinished)
+      return {}
+    const batchCompletionResLatest = getBatchCompletionRes()
+    const res: Record<string, string> = {}
+    const { inputs, query } = task.params
+    promptConfig?.prompt_variables.forEach((v) => {
+      res[v.name] = inputs[v.key]
+    })
+    res[t('share.generation.queryTitle')] = query
+    res[t('share.generation.completionResult')] = batchCompletionResLatest[task.id]
+    return res
+  })
   const checkBatchInputs = (data: string[][]) => {
     if (!data || data.length === 0) {
       notify({ type: 'error', message: t('share.generation.errorMsg.empty') })
@@ -232,10 +246,9 @@ const TextGeneration: FC<IMainProps> = ({
     // eslint-disable-next-line @typescript-eslint/no-use-before-define
     showResSidebar()
   }
-
-  const handleCompleted = (taskId?: number, isSuccess?: boolean) => {
-    // console.log(taskId, isSuccess)
+  const handleCompleted = (completionRes: string, taskId?: number) => {
     const allTasklistLatest = getLatestTaskList()
+    const batchCompletionResLatest = getBatchCompletionRes()
     const pendingTaskList = allTasklistLatest.filter(task => task.status === TaskStatus.pending)
     const nextPendingTaskId = pendingTaskList[0]?.id
     // console.log(`start: ${allTasklistLatest.map(item => item.status).join(',')}`)
@@ -256,6 +269,12 @@ const TextGeneration: FC<IMainProps> = ({
     })
     // console.log(`end: ${newAllTaskList.map(item => item.status).join(',')}`)
     setAllTaskList(newAllTaskList)
+    if (taskId) {
+      setBatchCompletionRes({
+        ...batchCompletionResLatest,
+        [`${taskId}`]: completionRes,
+      })
+    }
   }
 
   const fetchInitData = async () => {
@@ -344,14 +363,23 @@ const TextGeneration: FC<IMainProps> = ({
             <div className={s.starIcon}></div>
             <div className='text-lg text-gray-800 font-semibold'>{t('share.generation.title')}</div>
           </div>
-          {!isPC && (
-            <div
-              className='flex items-center justify-center cursor-pointer'
-              onClick={hideResSidebar}
-            >
-              <XMarkIcon className='w-4 h-4 text-gray-800' />
-            </div>
-          )}
+          <div className='flex items-center space-x-2'>
+            {allTaskList.length > 0 && allTaskFinished && (
+              <ResDownload
+                isMobile={isMobile}
+                values={exportRes}
+              />
+            )}
+            {!isPC && (
+              <div
+                className='flex items-center justify-center cursor-pointer'
+                onClick={hideResSidebar}
+              >
+                <XMarkIcon className='w-4 h-4 text-gray-800' />
+              </div>
+            )}
+          </div>
+
         </div>
 
         <div className='grow overflow-y-auto'>

web/app/components/share/text-generation/result/index.tsx

@@ -1,7 +1,7 @@
 'use client'
 import type { FC } from 'react'
 import React, { useEffect, useState } from 'react'
-import { useBoolean } from 'ahooks'
+import { useBoolean, useGetState } from 'ahooks'
 import { t } from 'i18next'
 import cn from 'classnames'
 import TextGenerationRes from '@/app/components/app/text-generate/item'
@@ -27,7 +27,7 @@ export type IResultProps = {
   onShowRes: () => void
   handleSaveMessage: (messageId: string) => void
   taskId?: number
-  onCompleted: (taskId?: number, success?: boolean) => void
+  onCompleted: (completionRes: string, taskId?: number, success?: boolean) => void
 }
 
 const Result: FC<IResultProps> = ({
@@ -53,7 +53,7 @@ const Result: FC<IResultProps> = ({
       setResponsingFalse()
   }, [controlStopResponding])
 
-  const [completionRes, setCompletionRes] = useState('')
+  const [completionRes, setCompletionRes, getCompletionRes] = useGetState('')
   const { notify } = Toast
   const isNoData = !completionRes
 
@@ -141,11 +141,11 @@ const Result: FC<IResultProps> = ({
       onCompleted: () => {
         setResponsingFalse()
         setMessageId(tempMessageId)
-        onCompleted(taskId, true)
+        onCompleted(getCompletionRes(), taskId, true)
       },
       onError() {
         setResponsingFalse()
-        onCompleted(taskId, false)
+        onCompleted(getCompletionRes(), taskId, false)
       },
     }, isInstalledApp, installedAppInfo?.id)
   }

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

@@ -0,0 +1,41 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import {
+  useCSVDownloader,
+} from 'react-papaparse'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import { Download02 as DownloadIcon } from '@/app/components/base/icons/src/vender/solid/general'
+import Button from '@/app/components/base/button'
+export type IResDownloadProps = {
+  isMobile: boolean
+  values: Record<string, string>[]
+}
+
+const ResDownload: FC<IResDownloadProps> = ({
+  isMobile,
+  values,
+}) => {
+  const { t } = useTranslation()
+  const { CSVDownloader, Type } = useCSVDownloader()
+
+  return (
+    <CSVDownloader
+      className="block cursor-pointer"
+      type={Type.Link}
+      filename={'result'}
+      bom={true}
+      config={{
+        // delimiter: ';',
+      }}
+      data={values}
+    >
+      <Button className={cn('flex items-center !h-8 space-x-2 bg-white !text-[13px] font-medium', isMobile ? '!p-0 !w-8 justify-center' : '!px-3')}>
+        <DownloadIcon className='w-4 h-4 text-[#155EEF]' />
+        {!isMobile && <span className='text-[#155EEF]'>{t('common.operation.download')}</span>}
+      </Button>
+    </CSVDownloader>
+  )
+}
+export default React.memo(ResDownload)

web/i18n/lang/common.en.ts

@@ -21,6 +21,7 @@ const translation = {
     copy: 'Copy',
     lineBreak: 'Line break',
     sure: 'I\'m sure',
+    download: 'Download',
   },
   placeholder: {
     input: 'Please enter',

web/i18n/lang/common.zh.ts

@@ -21,6 +21,7 @@ const translation = {
     copy: '复制',
     lineBreak: '换行',
     sure: '我确定',
+    download: '下载',
   },
   placeholder: {
     input: '请输入',

web/i18n/lang/share-app.en.ts

@@ -41,6 +41,7 @@ const translation = {
     },
     title: 'AI Completion',
     queryTitle: 'Query content',
+    completionResult: 'Completion result',
     queryPlaceholder: 'Write your query content...',
     run: 'Execute',
     copy: 'Copy',

web/i18n/lang/share-app.zh.ts

@@ -37,6 +37,7 @@ const translation = {
     },
     title: 'AI 智能书写',
     queryTitle: '查询内容',
+    completionResult: '生成结果',
     queryPlaceholder: '请输入文本内容',
     run: '运行',
     copy: '拷贝',