add panel of result

web/app/components/workflow/run/meta.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next'
 import dayjs from 'dayjs'
 
 type Props = {
-  status: 'running' | 'succeeded' | 'failed' | 'stopped'
+  status: string
   executor?: string
   startTime?: number
   time?: number
@@ -88,17 +88,19 @@ const MetaData: FC<Props> = ({
             )}
           </div>
         </div>
-        <div className='flex'>
-          <div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.steps')}</div>
-          <div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
-            {status === 'running' && (
-              <div className='my-[5px] w-[24px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
-            )}
-            {status !== 'running' && (
-              <span>{steps}</span>
-            )}
+        {steps > 0 && (
+          <div className='flex'>
+            <div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.steps')}</div>
+            <div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
+              {status === 'running' && (
+                <div className='my-[5px] w-[24px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+              )}
+              {status !== 'running' && (
+                <span>{steps}</span>
+              )}
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </div>
   )

web/app/components/workflow/run/result-panel.tsx

@@ -0,0 +1,88 @@
+'use client'
+import type { FC } from 'react'
+import StatusPanel from './status'
+import MetaData from './meta'
+import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
+import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
+
+type ResultPanelProps = {
+  inputs?: string
+  process_data?: string
+  outputs?: string
+  status: string
+  error?: string
+  elapsed_time?: number
+  total_tokens?: number
+  created_at?: number
+  created_by: string
+  finished_at?: number
+  steps: number
+}
+
+const ResultPanel: FC<ResultPanelProps> = ({
+  inputs,
+  process_data,
+  outputs,
+  status,
+  error,
+  elapsed_time,
+  total_tokens,
+  created_at,
+  created_by,
+  steps,
+}) => {
+  return (
+    <div className='bg-white py-2'>
+      <div className='px-4 py-2'>
+        <StatusPanel
+          status={status}
+          time={elapsed_time}
+          tokens={total_tokens}
+          error={error}
+        />
+      </div>
+      <div className='px-4 py-2 flex flex-col gap-2'>
+        <CodeEditor
+          readOnly
+          title={<div>INPUT</div>}
+          language={CodeLanguage.json}
+          value={inputs || ''}
+          onChange={() => {}}
+        />
+        {process_data && (
+          <CodeEditor
+            readOnly
+            title={<div>PROCESS DATA</div>}
+            language={CodeLanguage.json}
+            value={process_data}
+            onChange={() => {}}
+          />
+        )}
+        {outputs && (
+          <CodeEditor
+            readOnly
+            title={<div>OUTPUT</div>}
+            language={CodeLanguage.json}
+            value={outputs}
+            onChange={() => {}}
+          />
+        )}
+      </div>
+      <div className='px-4 py-2'>
+        <div className='h-[0.5px] bg-black opacity-5'/>
+      </div>
+      <div className='px-4 py-2'>
+        <MetaData
+          status={status}
+          executor={created_by}
+          startTime={created_at}
+          time={elapsed_time}
+          tokens={total_tokens}
+          steps={steps}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default ResultPanel

web/app/components/workflow/run/result.tsx

@@ -1,11 +1,8 @@
 'use client'
 import type { FC } from 'react'
 import React, { useEffect, useMemo, useState } from 'react'
-import StatusPanel from './status'
-import MetaData from './meta'
+import ResultPanel from './result-panel'
 import Loading from '@/app/components/base/loading'
-import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
-import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { fetchRunDetail } from '@/service/log'
 import type { WorkflowRunDetailResponse } from '@/models/log'
 import { useStore as useAppStore } from '@/app/components/app/store'
@@ -21,9 +18,9 @@ const Result: FC<ResultProps> = ({ runID }) => {
 
   const executor = useMemo(() => {
     if (runDetail?.created_by_role === 'account')
-      return runDetail.created_by_account?.name
+      return runDetail.created_by_account?.name || ''
     if (runDetail?.created_by_role === 'end_user')
-      return runDetail.created_by_end_user?.session_id
+      return runDetail.created_by_end_user?.session_id || ''
     return 'N/A'
   }, [runDetail])
 
@@ -50,47 +47,17 @@ const Result: FC<ResultProps> = ({ runID }) => {
   }
 
   return (
-    <div className='bg-white py-2'>
-      <div className='px-4 py-2'>
-        <StatusPanel
-          status={runDetail.status}
-          time={runDetail.elapsed_time}
-          tokens={runDetail.total_tokens}
-          error={runDetail.error}
-        />
-      </div>
-      <div className='px-4 py-2 flex flex-col gap-2'>
-        {/* ###TODO### value */}
-        <CodeEditor
-          readOnly
-          title={<div>INPUT</div>}
-          language={CodeLanguage.json}
-          value={''}
-          onChange={() => {}}
-        />
-        {/* ###TODO### value */}
-        <CodeEditor
-          readOnly
-          title={<div>OUTPUT</div>}
-          language={CodeLanguage.json}
-          value={''}
-          onChange={() => {}}
-        />
-      </div>
-      <div className='px-4 py-2'>
-        <div className='h-[0.5px] bg-black opacity-5'/>
-      </div>
-      <div className='px-4 py-2'>
-        <MetaData
-          status={runDetail.status}
-          executor={executor}
-          startTime={runDetail.created_at}
-          time={runDetail.elapsed_time}
-          tokens={runDetail.total_tokens}
-          steps={runDetail.total_steps}
-        />
-      </div>
-    </div>
+    <ResultPanel
+      inputs={runDetail.inputs}
+      outputs={runDetail.outputs}
+      status={runDetail.status}
+      error={runDetail.error}
+      elapsed_time={runDetail.elapsed_time}
+      total_tokens={runDetail.total_tokens}
+      created_at={runDetail.created_at}
+      created_by={executor}
+      steps={runDetail.total_steps}
+    />
   )
 }
 

web/app/components/workflow/run/status.tsx

@@ -5,7 +5,7 @@ import cn from 'classnames'
 import Indicator from '@/app/components/header/indicator'
 
 type ResultProps = {
-  status: 'running' | 'succeeded' | 'failed' | 'stopped'
+  status: string
   time?: number
   tokens?: number
   error?: string