add panel of result

web/app/(commonLayout)/apps/AppModeLabel.tsx

@@ -1,48 +0,0 @@
-'use client'
-
-import { useTranslation } from 'react-i18next'
-import { type AppMode } from '@/types/app'
-import { AiText, CuteRobote } from '@/app/components/base/icons/src/vender/solid/communication'
-import { BubbleText } from '@/app/components/base/icons/src/vender/solid/education'
-import { Route } from '@/app/components/base/icons/src/vender/line/mapsAndTravel'
-
-export type AppModeLabelProps = {
-  mode: AppMode
-}
-
-const AppModeLabel = ({
-  mode,
-}: AppModeLabelProps) => {
-  const { t } = useTranslation()
-
-  return (
-    <>
-      {mode === 'completion' && (
-        <div className='inline-flex items-center px-2 h-6 rounded-md bg-gray-50 border border-gray-100 text-xs text-gray-500'>
-          <AiText className='mr-1 w-3 h-3' />
-          {t('app.types.completion')}
-        </div>
-      )}
-      {(mode === 'chat' || mode === 'advanced-chat') && (
-        <div className='inline-flex items-center px-2 h-6 rounded-md bg-blue-25 border border-blue-100 text-xs text-blue-600'>
-          <BubbleText className='mr-1 w-3 h-3' />
-          {t('app.types.chatbot')}
-        </div>
-      )}
-      {mode === 'agent-chat' && (
-        <div className='inline-flex items-center px-2 h-6 rounded-md bg-indigo-25 border border-indigo-100 text-xs text-indigo-600'>
-          <CuteRobote className='mr-1 w-3 h-3' />
-          {t('app.types.agent')}
-        </div>
-      )}
-      {mode === 'workflow' && (
-        <div className='inline-flex items-center px-2 h-6 rounded-md bg-[#fffcf5] border border-[#fef0c7] text-xs text-[#f79009]'>
-          <Route className='mr-1 w-3 h-3' />
-          {t('app.types.workflow')}
-        </div>
-      )}
-    </>
-  )
-}
-
-export default AppModeLabel

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'>
+        {steps > 0 && (
-          <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='flex'>
-          <div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
+            <div className='shrink-0 w-[104px] px-2 py-[5px] text-gray-500 text-xs leading-[18px] truncate'>{t('runLog.meta.steps')}</div>
-            {status === 'running' && (
+            <div className='grow px-2 py-[5px] text-gray-900 text-xs leading-[18px]'>
-              <div className='my-[5px] w-[24px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
+              {status === 'running' && (
-            )}
+                <div className='my-[5px] w-[24px] h-2 rounded-sm bg-[rgba(0,0,0,0.05)]'/>
-            {status !== 'running' && (
+              )}
-              <span>{steps}</span>
+              {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 ResultPanel from './result-panel'
-import MetaData from './meta'
 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'>
+    <ResultPanel
-      <div className='px-4 py-2'>
+      inputs={runDetail.inputs}
-        <StatusPanel
+      outputs={runDetail.outputs}
-          status={runDetail.status}
+      status={runDetail.status}
-          time={runDetail.elapsed_time}
+      error={runDetail.error}
-          tokens={runDetail.total_tokens}
+      elapsed_time={runDetail.elapsed_time}
-          error={runDetail.error}
+      total_tokens={runDetail.total_tokens}
-        />
+      created_at={runDetail.created_at}
-      </div>
+      created_by={executor}
-      <div className='px-4 py-2 flex flex-col gap-2'>
+      steps={runDetail.total_steps}
-        {/* ###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>
   )
 }
 

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

web/models/log.ts

@@ -1,5 +1,9 @@
+import type { Viewport } from 'reactflow'
 import type { VisionFile } from '@/types/app'
-
+import type {
+  Edge,
+  Node,
+} from '@/app/components/workflow/types'
 // Log type contains key:string conversation_id:string created_at:string quesiton:string answer:string
 export type Conversation = {
   id: string
@@ -269,10 +273,14 @@ export type WorkflowRunDetailResponse = {
   id: string
   sequence_number: number
   version: string
-  graph: any // TODO
+  graph: {
-  inputs: any // json
+    nodes: Node[]
+    edges: Edge[]
+    viewport?: Viewport
+  }
+  inputs: string
   status: 'running' | 'succeeded' | 'failed' | 'stopped'
-  outputs?: any // json
+  outputs?: string
   error?: string
   elapsed_time?: number
   total_tokens?: number