feat: workflow new nodes (#4683)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Patryk Garstecki <patryk20120@yahoo.pl>
Co-authored-by: Sebastian.W <thiner@gmail.com>
Co-authored-by: 呆萌闷油瓶 <253605712@qq.com>
Co-authored-by: takatost <takatost@users.noreply.github.com>
Co-authored-by: rechardwang <wh_goodjob@163.com>
Co-authored-by: Nite Knite <nkCoding@gmail.com>
Co-authored-by: Chenhe Gu <guchenhe@gmail.com>
Co-authored-by: Joshua <138381132+joshua20231026@users.noreply.github.com>
Co-authored-by: Weaxs <459312872@qq.com>
Co-authored-by: Ikko Eltociear Ashimine <eltociear@gmail.com>
Co-authored-by: leejoo0 <81673835+leejoo0@users.noreply.github.com>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: sino <sino2322@gmail.com>
Co-authored-by: Vikey Chen <vikeytk@gmail.com>
Co-authored-by: wanghl <Wang-HL@users.noreply.github.com>
Co-authored-by: Haolin Wang-汪皓临 <haolin.wang@atlaslovestravel.com>
Co-authored-by: Zixuan Cheng <61724187+Theysua@users.noreply.github.com>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: Bowen Liang <bowenliang@apache.org>
Co-authored-by: Bowen Liang <liangbowen@gf.com.cn>
Co-authored-by: fanghongtai <42790567+fanghongtai@users.noreply.github.com>
Co-authored-by: wxfanghongtai <wxfanghongtai@gf.com.cn>
Co-authored-by: Matri <qjp@bithuman.io>
Co-authored-by: Benjamin <benjaminx@gmail.com>

web/app/components/workflow/panel/workflow-preview.tsx

@@ -1,5 +1,6 @@
 import {
   memo,
+  useCallback,
   useEffect,
   // useRef,
   useState,
@@ -7,6 +8,7 @@ import {
 import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import copy from 'copy-to-clipboard'
+import { useBoolean } from 'ahooks'
 import ResultText from '../run/result-text'
 import ResultPanel from '../run/result-panel'
 import TracingPanel from '../run/tracing-panel'
@@ -19,12 +21,18 @@ import {
 } from '../types'
 import { SimpleBtn } from '../../app/text-generate/item'
 import Toast from '../../base/toast'
+import IterationResultPanel from '../run/iteration-result-panel'
 import InputsPanel from './inputs-panel'
 import Loading from '@/app/components/base/loading'
 import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 import { Clipboard } from '@/app/components/base/icons/src/vender/line/files'
+import type { NodeTracing } from '@/types/workflow'
 
-const WorkflowPreview = () => {
+const WorkflowPreview = ({
+  onShowIterationDetail,
+}: {
+  onShowIterationDetail: (detail: NodeTracing[][]) => void
+}) => {
   const { t } = useTranslation()
   const { handleCancelDebugAndPreviewPanel } = useWorkflowInteractions()
   const workflowRunningData = useStore(s => s.workflowRunningData)
@@ -46,6 +54,31 @@ const WorkflowPreview = () => {
       switchTab('DETAIL')
   }, [workflowRunningData])
 
+  const [iterationRunResult, setIterationRunResult] = useState<NodeTracing[][]>([])
+  const [isShowIterationDetail, {
+    setTrue: doShowIterationDetail,
+    setFalse: doHideIterationDetail,
+  }] = useBoolean(false)
+
+  const handleShowIterationDetail = useCallback((detail: NodeTracing[][]) => {
+    setIterationRunResult(detail)
+    doShowIterationDetail()
+  }, [doShowIterationDetail])
+
+  if (isShowIterationDetail) {
+    return (
+      <div className={`
+      flex flex-col w-[420px] h-full rounded-l-2xl border-[0.5px] border-gray-200 shadow-xl bg-white
+    `}>
+        <IterationResultPanel
+          list={iterationRunResult}
+          onHide={doHideIterationDetail}
+          onBack={doHideIterationDetail}
+        />
+      </div>
+    )
+  }
+
   return (
     <div className={`
       flex flex-col w-[420px] h-full rounded-l-2xl border-[0.5px] border-gray-200 shadow-xl bg-white
@@ -57,115 +90,129 @@ const WorkflowPreview = () => {
         </div>
       </div>
       <div className='grow relative flex flex-col'>
-        <div className='shrink-0 flex items-center px-4 border-b-[0.5px] border-[rgba(0,0,0,0.05)]'>
-          {showInputsPanel && (
-            <div
-              className={cn(
-                'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
-                currentTab === 'INPUT' && '!border-[rgb(21,94,239)] text-gray-700',
-              )}
-              onClick={() => switchTab('INPUT')}
-            >{t('runLog.input')}</div>
-          )}
-          <div
-            className={cn(
-              'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
-              currentTab === 'RESULT' && '!border-[rgb(21,94,239)] text-gray-700',
-              !workflowRunningData && 'opacity-30 !cursor-not-allowed',
-            )}
-            onClick={() => {
-              if (!workflowRunningData)
-                return
-              switchTab('RESULT')
-            }}
-          >{t('runLog.result')}</div>
-          <div
-            className={cn(
-              'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
-              currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-gray-700',
-              !workflowRunningData && 'opacity-30 !cursor-not-allowed',
-            )}
-            onClick={() => {
-              if (!workflowRunningData)
-                return
-              switchTab('DETAIL')
-            }}
-          >{t('runLog.detail')}</div>
-          <div
-            className={cn(
-              'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
-              currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-gray-700',
-              !workflowRunningData && 'opacity-30 !cursor-not-allowed',
-            )}
-            onClick={() => {
-              if (!workflowRunningData)
-                return
-              switchTab('TRACING')
-            }}
-          >{t('runLog.tracing')}</div>
-        </div>
-        <div className={cn(
-          'grow bg-white h-0 overflow-y-auto rounded-b-2xl',
-          (currentTab === 'RESULT' || currentTab === 'TRACING') && '!bg-gray-50',
-        )}>
-          {currentTab === 'INPUT' && showInputsPanel && (
-            <InputsPanel onRun={() => switchTab('RESULT')} />
-          )}
-          {currentTab === 'RESULT' && (
+        {isShowIterationDetail
+          ? (
+            <IterationResultPanel
+              list={iterationRunResult}
+              onHide={doHideIterationDetail}
+              onBack={doHideIterationDetail}
+            />
+          )
+          : (
             <>
-              <ResultText
-                isRunning={workflowRunningData?.result?.status === WorkflowRunningStatus.Running || !workflowRunningData?.result}
-                outputs={workflowRunningData?.resultText}
-                error={workflowRunningData?.result?.error}
-                onClick={() => switchTab('DETAIL')}
-              />
-              {(workflowRunningData?.result.status !== WorkflowRunningStatus.Succeeded || !workflowRunningData?.resultText) && (
-                <SimpleBtn
-                  className={cn('ml-4 mb-4 inline-flex space-x-1')}
+              <div className='shrink-0 flex items-center px-4 border-b-[0.5px] border-[rgba(0,0,0,0.05)]'>
+                {showInputsPanel && (
+                  <div
+                    className={cn(
+                      'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
+                      currentTab === 'INPUT' && '!border-[rgb(21,94,239)] text-gray-700',
+                    )}
+                    onClick={() => switchTab('INPUT')}
+                  >{t('runLog.input')}</div>
+                )}
+                <div
+                  className={cn(
+                    'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
+                    currentTab === 'RESULT' && '!border-[rgb(21,94,239)] text-gray-700',
+                    !workflowRunningData && 'opacity-30 !cursor-not-allowed',
+                  )}
                   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>
-              )}
+                    if (!workflowRunningData)
+                      return
+                    switchTab('RESULT')
+                  }}
+                >{t('runLog.result')}</div>
+                <div
+                  className={cn(
+                    'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
+                    currentTab === 'DETAIL' && '!border-[rgb(21,94,239)] text-gray-700',
+                    !workflowRunningData && 'opacity-30 !cursor-not-allowed',
+                  )}
+                  onClick={() => {
+                    if (!workflowRunningData)
+                      return
+                    switchTab('DETAIL')
+                  }}
+                >{t('runLog.detail')}</div>
+                <div
+                  className={cn(
+                    'mr-6 py-3 border-b-2 border-transparent text-[13px] font-semibold leading-[18px] text-gray-400 cursor-pointer',
+                    currentTab === 'TRACING' && '!border-[rgb(21,94,239)] text-gray-700',
+                    !workflowRunningData && 'opacity-30 !cursor-not-allowed',
+                  )}
+                  onClick={() => {
+                    if (!workflowRunningData)
+                      return
+                    switchTab('TRACING')
+                  }}
+                >{t('runLog.tracing')}</div>
+              </div>
+              <div className={cn(
+                'grow bg-white h-0 overflow-y-auto rounded-b-2xl',
+                (currentTab === 'RESULT' || currentTab === 'TRACING') && '!bg-gray-50',
+              )}>
+                {currentTab === 'INPUT' && showInputsPanel && (
+                  <InputsPanel onRun={() => switchTab('RESULT')} />
+                )}
+                {currentTab === 'RESULT' && (
+                  <>
+                    <ResultText
+                      isRunning={workflowRunningData?.result?.status === WorkflowRunningStatus.Running || !workflowRunningData?.result}
+                      outputs={workflowRunningData?.resultText}
+                      error={workflowRunningData?.result?.error}
+                      onClick={() => switchTab('DETAIL')}
+                    />
+                    {(workflowRunningData?.result.status === WorkflowRunningStatus.Succeeded && workflowRunningData?.resultText && typeof workflowRunningData?.resultText === 'string') && (
+                      <SimpleBtn
+                        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' && (
+                  <ResultPanel
+                    inputs={workflowRunningData?.result?.inputs}
+                    outputs={workflowRunningData?.result?.outputs}
+                    status={workflowRunningData?.result?.status || ''}
+                    error={workflowRunningData?.result?.error}
+                    elapsed_time={workflowRunningData?.result?.elapsed_time}
+                    total_tokens={workflowRunningData?.result?.total_tokens}
+                    created_at={workflowRunningData?.result?.created_at}
+                    created_by={(workflowRunningData?.result?.created_by as any)?.name}
+                    steps={workflowRunningData?.result?.total_steps}
+                  />
+                )}
+                {currentTab === 'DETAIL' && !workflowRunningData?.result && (
+                  <div className='flex h-full items-center justify-center bg-white'>
+                    <Loading />
+                  </div>
+                )}
+                {currentTab === 'TRACING' && (
+                  <TracingPanel
+                    list={workflowRunningData?.tracing || []}
+                    onShowIterationDetail={handleShowIterationDetail}
+                  />
+                )}
+                {currentTab === 'TRACING' && !workflowRunningData?.tracing?.length && (
+                  <div className='flex h-full items-center justify-center bg-gray-50'>
+                    <Loading />
+                  </div>
+                )}
+
+              </div>
             </>
           )}
-          {currentTab === 'DETAIL' && (
-            <ResultPanel
-              inputs={workflowRunningData?.result?.inputs}
-              outputs={workflowRunningData?.result?.outputs}
-              status={workflowRunningData?.result?.status || ''}
-              error={workflowRunningData?.result?.error}
-              elapsed_time={workflowRunningData?.result?.elapsed_time}
-              total_tokens={workflowRunningData?.result?.total_tokens}
-              created_at={workflowRunningData?.result?.created_at}
-              created_by={(workflowRunningData?.result?.created_by as any)?.name}
-              steps={workflowRunningData?.result?.total_steps}
-            />
-          )}
-          {currentTab === 'DETAIL' && !workflowRunningData?.result && (
-            <div className='flex h-full items-center justify-center bg-white'>
-              <Loading />
-            </div>
-          )}
-          {currentTab === 'TRACING' && (
-            <TracingPanel
-              list={workflowRunningData?.tracing || []}
-            />
-          )}
-          {currentTab === 'TRACING' && !workflowRunningData?.tracing?.length && (
-            <div className='flex h-full items-center justify-center bg-gray-50'>
-              <Loading />
-            </div>
-          )}
 
-        </div>
       </div>
     </div>
   )