| </> | </> | ||||
| ) | ) | ||||
| const [currentTab, setCurrentTab] = useState<string>('DETAIL') | |||||
| return ( | return ( | ||||
| <div ref={ref} className={cn(className, isTop ? `rounded-xl border ${!isError ? 'border-gray-200 bg-white' : 'border-[#FECDCA] bg-[#FEF3F2]'} ` : 'rounded-br-xl !mt-0')} | <div ref={ref} className={cn(className, isTop ? `rounded-xl border ${!isError ? 'border-gray-200 bg-white' : 'border-[#FECDCA] bg-[#FEF3F2]'} ` : 'rounded-br-xl !mt-0')} | ||||
| style={isTop | style={isTop | ||||
| <WorkflowProcessItem grayBg hideInfo data={workflowProcessData} expand={workflowProcessData.expand} hideProcessDetail={hideProcessDetail} /> | <WorkflowProcessItem grayBg hideInfo data={workflowProcessData} expand={workflowProcessData.expand} hideProcessDetail={hideProcessDetail} /> | ||||
| )} | )} | ||||
| {workflowProcessData && !isError && ( | {workflowProcessData && !isError && ( | ||||
| <ResultTab data={workflowProcessData} content={content} /> | |||||
| <ResultTab data={workflowProcessData} content={content} currentTab={currentTab} onCurrentTabChange={setCurrentTab} /> | |||||
| )} | )} | ||||
| {isError && ( | {isError && ( | ||||
| <div className='text-gray-400 text-sm'>{t('share.generation.batchFailed.outputPlaceholder')}</div> | <div className='text-gray-400 text-sm'>{t('share.generation.batchFailed.outputPlaceholder')}</div> | ||||
| </SimpleBtn> | </SimpleBtn> | ||||
| ) | ) | ||||
| } | } | ||||
| <SimpleBtn | |||||
| isDisabled={isError || !messageId} | |||||
| className={cn(isMobile && '!px-1.5', 'space-x-1')} | |||||
| onClick={() => { | |||||
| if (typeof content === 'string') | |||||
| copy(content) | |||||
| else | |||||
| copy(JSON.stringify(content)) | |||||
| Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') }) | |||||
| }}> | |||||
| <Clipboard className='w-3.5 h-3.5' /> | |||||
| {!isMobile && <div>{t('common.operation.copy')}</div>} | |||||
| </SimpleBtn> | |||||
| {currentTab === 'RESULT' && ( | |||||
| <SimpleBtn | |||||
| isDisabled={isError || !messageId} | |||||
| className={cn(isMobile && '!px-1.5', 'space-x-1')} | |||||
| onClick={() => { | |||||
| const content = workflowProcessData?.resultText | |||||
| if (typeof content === 'string') | |||||
| copy(content) | |||||
| else | |||||
| copy(JSON.stringify(content)) | |||||
| Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') }) | |||||
| }}> | |||||
| <Clipboard className='w-3.5 h-3.5' /> | |||||
| {!isMobile && <div>{t('common.operation.copy')}</div>} | |||||
| </SimpleBtn> | |||||
| )} | |||||
| {isInWebApp && ( | {isInWebApp && ( | ||||
| <> | <> | ||||
| {!isWorkflow && ( | {!isWorkflow && ( |
| import { | import { | ||||
| memo, | memo, | ||||
| useEffect, | useEffect, | ||||
| // useRef, | |||||
| useState, | |||||
| } from 'react' | } from 'react' | ||||
| import cn from 'classnames' | import cn from 'classnames' | ||||
| import { useTranslation } from 'react-i18next' | import { useTranslation } from 'react-i18next' | ||||
| const ResultTab = ({ | const ResultTab = ({ | ||||
| data, | data, | ||||
| content, | content, | ||||
| currentTab, | |||||
| onCurrentTabChange, | |||||
| }: { | }: { | ||||
| data?: WorkflowProcess | data?: WorkflowProcess | ||||
| content: any | content: any | ||||
| currentTab: string | |||||
| onCurrentTabChange: (tab: string) => void | |||||
| }) => { | }) => { | ||||
| const { t } = useTranslation() | const { t } = useTranslation() | ||||
| const [currentTab, setCurrentTab] = useState<string>('DETAIL') | |||||
| const switchTab = async (tab: string) => { | const switchTab = async (tab: string) => { | ||||
| setCurrentTab(tab) | |||||
| onCurrentTabChange(tab) | |||||
| } | } | ||||
| useEffect(() => { | useEffect(() => { | ||||
| if (data?.resultText) | if (data?.resultText) |
| } from 'react' | } from 'react' | ||||
| import cn from 'classnames' | import cn from 'classnames' | ||||
| import { useTranslation } from 'react-i18next' | import { useTranslation } from 'react-i18next' | ||||
| import copy from 'copy-to-clipboard' | |||||
| import ResultText from '../run/result-text' | import ResultText from '../run/result-text' | ||||
| import ResultPanel from '../run/result-panel' | import ResultPanel from '../run/result-panel' | ||||
| import TracingPanel from '../run/tracing-panel' | import TracingPanel from '../run/tracing-panel' | ||||
| import { | import { | ||||
| WorkflowRunningStatus, | WorkflowRunningStatus, | ||||
| } from '../types' | } from '../types' | ||||
| import { SimpleBtn } from '../../app/text-generate/item' | |||||
| import Toast from '../../base/toast' | |||||
| import InputsPanel from './inputs-panel' | import InputsPanel from './inputs-panel' | ||||
| import Loading from '@/app/components/base/loading' | import Loading from '@/app/components/base/loading' | ||||
| import { XClose } from '@/app/components/base/icons/src/vender/line/general' | import { XClose } from '@/app/components/base/icons/src/vender/line/general' | ||||
| import { Clipboard } from '@/app/components/base/icons/src/vender/line/files' | |||||
| const WorkflowPreview = () => { | const WorkflowPreview = () => { | ||||
| const { t } = useTranslation() | const { t } = useTranslation() | ||||
| <InputsPanel onRun={() => switchTab('RESULT')} /> | <InputsPanel onRun={() => switchTab('RESULT')} /> | ||||
| )} | )} | ||||
| {currentTab === 'RESULT' && ( | {currentTab === 'RESULT' && ( | ||||
| <ResultText | |||||
| isRunning={workflowRunningData?.result?.status === WorkflowRunningStatus.Running || !workflowRunningData?.result} | |||||
| outputs={workflowRunningData?.resultText} | |||||
| error={workflowRunningData?.result?.error} | |||||
| onClick={() => switchTab('DETAIL')} | |||||
| /> | |||||
| <> | |||||
| <ResultText | |||||
| isRunning={workflowRunningData?.result?.status === WorkflowRunningStatus.Running || !workflowRunningData?.result} | |||||
| outputs={workflowRunningData?.resultText} | |||||
| error={workflowRunningData?.result?.error} | |||||
| onClick={() => switchTab('DETAIL')} | |||||
| /> | |||||
| <SimpleBtn | |||||
| isDisabled={workflowRunningData?.result.status !== WorkflowRunningStatus.Succeeded} | |||||
| className={cn('ml-4 mb-4 inline-flex space-x-1')} | |||||
| onClick={() => { | |||||
| const content = workflowRunningData?.resultText | |||||
| if (typeof content === 'string') | |||||
| copy(content) | |||||
| else | |||||
| copy(JSON.stringify(content)) | |||||
| Toast.notify({ type: 'success', message: t('common.actionMsg.copySuccessfully') }) | |||||
| }}> | |||||
| <Clipboard className='w-3.5 h-3.5' /> | |||||
| <div>{t('common.operation.copy')}</div> | |||||
| </SimpleBtn> | |||||
| </> | |||||
| )} | )} | ||||
| {currentTab === 'DETAIL' && ( | {currentTab === 'DETAIL' && ( | ||||
| <ResultPanel | <ResultPanel | ||||
| <Loading /> | <Loading /> | ||||
| </div> | </div> | ||||
| )} | )} | ||||
| </div> | </div> | ||||
| </div> | </div> | ||||
| </div> | </div> |