modify workflow web app output

web/app/components/app/text-generate/item/index.tsx

@@ -27,9 +27,14 @@ import WorkflowProcessItem from '@/app/components/base/chat/chat/answer/workflow
 import type { WorkflowProcess } from '@/app/components/base/chat/types'
 
 const MAX_DEPTH = 3
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export interface WorkflowProcessData extends WorkflowProcess {
+  expand: boolean
+}
+
 export type IGenerationItemProps = {
   isWorkflow?: boolean
-  workflowProcessData?: WorkflowProcess
+  workflowProcessData?: WorkflowProcessData
   className?: string
   isError: boolean
   onRetry: () => void
@@ -285,7 +290,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
             <div className={`flex ${contentClassName}`}>
               <div className='grow w-0'>
                 {workflowProcessData && (
-                  <WorkflowProcessItem data={workflowProcessData} />
+                  <WorkflowProcessItem grayBg data={workflowProcessData} expand={workflowProcessData.expand} />
                 )}
                 {isError
                   ? <div className='text-gray-400 text-sm'>{t('share.generation.batchFailed.outputPlaceholder')}</div>

web/app/components/base/chat/chat/answer/workflow-process.tsx

@@ -1,4 +1,5 @@
 import {
+  useEffect,
   useMemo,
   useState,
 } from 'react'
@@ -14,13 +15,15 @@ import NodePanel from '@/app/components/workflow/run/node'
 type WorkflowProcessProps = {
   data: WorkflowProcess
   grayBg?: boolean
+  expand?: boolean
 }
 const WorkflowProcessItem = ({
   data,
   grayBg,
+  expand = false,
 }: WorkflowProcessProps) => {
   const { t } = useTranslation()
-  const [collapse, setCollapse] = useState(true)
+  const [collapse, setCollapse] = useState(!expand)
   const running = data.status === WorkflowRunningStatus.Running
   const succeeded = data.status === WorkflowRunningStatus.Succeeded
   const failed = data.status === WorkflowRunningStatus.Failed || data.status === WorkflowRunningStatus.Stopped
@@ -36,12 +39,16 @@ const WorkflowProcessItem = ({
       return 'linear-gradient(180deg, #FEE4E2 0%, #FEF3F2 100%)'
   }, [running, succeeded, failed, collapse])
 
+  useEffect(() => {
+    setCollapse(!expand)
+  }, [expand])
+
   return (
     <div
       className={`
         mb-2 px-3 w-full rounded-xl border-[0.5px] border-black/[0.08]
         ${collapse ? 'py-[7px]' : 'py-2'}
-        ${collapse && (grayBg ? 'bg-white' : 'bg-gray-50')}
+        ${collapse && (!grayBg ? 'bg-white' : 'bg-gray-50')}
       `}
       style={{
         background,

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

@@ -5,7 +5,7 @@ import { useBoolean } from 'ahooks'
 import { t } from 'i18next'
 import produce from 'immer'
 import cn from 'classnames'
-import TextGenerationRes from '@/app/components/app/text-generate/item'
+import TextGenerationRes, { type WorkflowProcessData } from '@/app/components/app/text-generate/item'
 import NoData from '@/app/components/share/text-generation/no-data'
 import Toast from '@/app/components/base/toast'
 import { sendCompletionMessage, sendWorkflowMessage, updateFeedback } from '@/service/share'
@@ -16,7 +16,6 @@ import type { InstalledApp } from '@/models/explore'
 import type { ModerationService } from '@/models/common'
 import { TransferMethod, type VisionFile, type VisionSettings } from '@/types/app'
 import { BlockEnum, NodeRunningStatus, WorkflowRunningStatus } from '@/app/components/workflow/types'
-import type { WorkflowProcess } from '@/app/components/base/chat/types'
 
 export type IResultProps = {
   isWorkflow: boolean
@@ -78,9 +77,9 @@ const Result: FC<IResultProps> = ({
     doSetCompletionRes(res)
   }
   const getCompletionRes = () => completionResRef.current
-  const [workflowProcessData, doSetWorkflowProccessData] = useState<WorkflowProcess>()
-  const workflowProcessDataRef = useRef<WorkflowProcess>()
-  const setWorkflowProccessData = (data: WorkflowProcess) => {
+  const [workflowProcessData, doSetWorkflowProccessData] = useState<WorkflowProcessData>()
+  const workflowProcessDataRef = useRef<WorkflowProcessData>()
+  const setWorkflowProccessData = (data: WorkflowProcessData) => {
     workflowProcessDataRef.current = data
     doSetWorkflowProccessData(data)
   }
@@ -191,7 +190,6 @@ const Result: FC<IResultProps> = ({
     }, 1000)
 
     if (isWorkflow) {
-      // ###TODO###
       let outputsExisted = false
       sendWorkflowMessage(
         data,
@@ -201,33 +199,36 @@ const Result: FC<IResultProps> = ({
             setWorkflowProccessData({
               status: WorkflowRunningStatus.Running,
               tracing: [],
+              expand: false,
             })
             setRespondingFalse()
-            // console.log('onWorkflowStarted runID: ', workflow_run_id)
           },
           onNodeStarted: ({ data }) => {
             setWorkflowProccessData(produce(getWorkflowProccessData()!, (draft) => {
+              draft.expand = true
               draft.tracing!.push({
                 ...data,
                 status: NodeRunningStatus.Running,
+                expand: true,
               } as any)
             }))
-            // console.log('onNodeStarted: ', data.node_type)
           },
           onNodeFinished: ({ data }) => {
             setWorkflowProccessData(produce(getWorkflowProccessData()!, (draft) => {
               const currentIndex = draft.tracing!.findIndex(trace => trace.node_id === data.node_id)
-              if (currentIndex > -1 && draft.tracing)
-                draft.tracing[currentIndex] = data as any
+              if (currentIndex > -1 && draft.tracing) {
+                draft.tracing[currentIndex] = {
+                  ...data,
+                  expand: !!data.error,
+                } as any
+              }
             }))
-            // console.log('onNodeFinished: ', data.node_type, data)
             if (data.node_type === BlockEnum.LLM && data.outputs.text)
               setCompletionRes(data.outputs.text)
             if (data.node_type === BlockEnum.End && data.outputs)
               outputsExisted = true
           },
           onWorkflowFinished: ({ data }) => {
-            // console.log('onWorkflowFinished: ', data)
             if (isTimeout)
               return
             if (data.error) {
@@ -324,14 +325,14 @@ const Result: FC<IResultProps> = ({
   return (
     <div className={cn(isNoData && !isCallBatchAPI && 'h-full')}>
       {!isCallBatchAPI && (
-        (isResponding && !completionRes)
+        (isResponding && (!completionRes || !isWorkflow))
           ? (
             <div className='flex h-full w-full justify-center items-center'>
               <Loading type='area' />
             </div>)
           : (
             <>
-              {isNoData
+              {(isNoData && !workflowProcessData)
                 ? <NoData />
                 : renderTextGenerationRes()
               }

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

@@ -1,7 +1,7 @@
 'use client'
 import { useTranslation } from 'react-i18next'
 import type { FC } from 'react'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import cn from 'classnames'
 import BlockIcon from '../block-icon'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
@@ -13,12 +13,11 @@ import type { NodeTracing } from '@/types/workflow'
 
 type Props = {
   nodeInfo: NodeTracing
-  collapsed?: boolean
   className?: string
 }
 
-const NodePanel: FC<Props> = ({ nodeInfo, collapsed = true, className }) => {
-  const [collapseState, setCollapseState] = useState<boolean>(collapsed)
+const NodePanel: FC<Props> = ({ nodeInfo, className }) => {
+  const [collapseState, setCollapseState] = useState<boolean>(true)
   const { t } = useTranslation()
 
   const getTime = (time: number) => {
@@ -38,6 +37,10 @@ const NodePanel: FC<Props> = ({ nodeInfo, collapsed = true, className }) => {
       return `${parseFloat((tokens / 1000000).toFixed(3))}M`
   }
 
+  useEffect(() => {
+    setCollapseState(!nodeInfo.expand)
+  }, [nodeInfo.expand])
+
   return (
     <div className={`px-4 py-1 ${className}`}>
       <div className='group transition-all bg-white border border-gray-100 rounded-2xl shadow-xs hover:shadow-md'>