From 675d0fc5ef4f488ddaf9b58bbd5afa2f4185b785 Mon Sep 17 00:00:00 2001
From: zhaoying <zhaoyingyz@126.com>
Date: Tue, 7 Apr 2026 14:08:26 +0800
Subject: [PATCH] feat(web): workflow run time ui

---
 web/src/components/Markdown/CodeBlock.tsx     |  10 +-
 .../Workflow/components/Chat/Runtime.tsx      | 160 +++++++++++-------
 .../Workflow/components/Chat/chat.module.css  |   7 +-
 3 files changed, 112 insertions(+), 65 deletions(-)

diff --git a/web/src/components/Markdown/CodeBlock.tsx b/web/src/components/Markdown/CodeBlock.tsx
index a830827d..f863cc48 100644
--- a/web/src/components/Markdown/CodeBlock.tsx
+++ b/web/src/components/Markdown/CodeBlock.tsx
@@ -1,8 +1,8 @@
 /*
  * @Author: ZhaoYing 
  * @Date: 2026-02-02 15:15:11 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-02 15:15:11 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-04-07 14:04:33
  */
 /**
  * CodeBlock Component
@@ -27,6 +27,7 @@ type ICodeBlockProps = {
   needCopy?: boolean;
   size?: 'small' | 'default';
   showLineNumbers?: boolean;
+  background?: string;
 }
 
 /** Code block component for displaying formatted code with optional copy functionality */
@@ -34,7 +35,8 @@ const CodeBlock: FC<ICodeBlockProps> = ({
   value,
   needCopy = true,
   size = 'default',
-  showLineNumbers = false
+  showLineNumbers = false,
+  background = '#F0F3F8'
 }) => {
 
   return (
@@ -43,7 +45,7 @@ const CodeBlock: FC<ICodeBlockProps> = ({
         style={atelierHeathLight}
         customStyle={{
           padding: '8px 12px 8px 12px',
-          backgroundColor: '#F0F3F8',
+          backgroundColor: background,
           borderRadius: 8,
           fontSize: size === 'small' ? 12 : 14,
           wordBreak: 'break-all'
diff --git a/web/src/views/Workflow/components/Chat/Runtime.tsx b/web/src/views/Workflow/components/Chat/Runtime.tsx
index 7da550e0..68bdc452 100644
--- a/web/src/views/Workflow/components/Chat/Runtime.tsx
+++ b/web/src/views/Workflow/components/Chat/Runtime.tsx
@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-24 17:57:08 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-12 13:39:24
+ * @Last Modified time: 2026-04-07 14:05:50
  */
 /*
  * Runtime Component
@@ -18,13 +18,15 @@
 import { type FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import clsx from 'clsx'
-import { Space, Button, Collapse, Flex } from 'antd'
+import { App, Button, Collapse, Flex } from 'antd'
 import { CheckCircleFilled, CloseCircleFilled, LoadingOutlined, RightOutlined, ArrowLeftOutlined } from '@ant-design/icons'
+import copy from 'copy-to-clipboard'
 
 import styles from './chat.module.css'
 import type { ChatItem } from '@/components/Chat/types'
 import Markdown from '@/components/Markdown'
 import CodeBlock from '@/components/Markdown/CodeBlock'
+import RbAlert from '@/components/RbAlert'
 
 /**
  * Runtime component props
@@ -36,10 +38,12 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
   index
 }) => {
   const { t } = useTranslation()
+  const { message } = App.useApp()
   // Stores the currently selected detail view (for nested loop/iteration exploration)
   const [detail, setDetail] = useState<any>(null)
   // Tracks whether the current detail view is for a loop (true) or iteration (false)
   const [loop, setLoop] = useState<boolean | null>(null)
+  const [expanded, setExpanded] = useState(false)
 
   /**
    * Handles navigation into nested loop/iteration details
@@ -57,7 +61,7 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
    * @returns Tailwind CSS class for appropriate color
    */
   const getStatus = (status?: string) => {
-    return status === 'completed' ? 'rb:text-[#369F21]' : status === 'failed' ? 'rb:text-[#FF5D34]' : 'rb:text-[#5B6167]'
+    return status === 'completed' ? 'rb:text-[#369F21]!' : status === 'failed' ? 'rb:text-[#FF5D34]!' : 'rb:text-[#5B6167]!'
   }
 
   /**
@@ -76,7 +80,7 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
 
 
     return (
-      <Space size={8} direction="vertical" className="rb:w-full!">
+      <Flex gap={8} vertical>
         {Object.entries(groupedByCycle).map(([cycleIdx, items]: [string, any]) => {
           return (
             <Collapse
@@ -92,7 +96,7 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
             />
           )
         })}
-      </Space>
+      </Flex>
     )
   }
 
@@ -103,7 +107,7 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
    */
   const renderChild = (list: any) => {
     if (Array.isArray(list)) {
-      return <Space size={8} direction="vertical" className="rb:w-full!">
+      return <Flex gap={8} vertical>
         {list?.map(vo => {
           const isLoop = vo.node_type === 'loop';
           // Render cycle variables for loop nodes without node_name
@@ -114,6 +118,7 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
                 <Button
                   className="rb:py-0! rb:px-1! rb:text-[12px]!"
                   size="small"
+                  onClick={() => handleCopy(typeof vo.content === 'object' && vo.content?.input ? JSON.stringify(vo.content.input, null, 2) : '{}')}
                 >{t('common.copy')}</Button>
               </div>
               <div className="rb:max-h-40 rb:overflow-auto">
@@ -133,35 +138,44 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
           return (
             <Collapse
               key={vo.node_id}
+              bordered={false}
+              className="rb:bg-[#F6F6F6]"
               items={[{
                 key: vo.node_id,
-                label: <div className={clsx("rb:flex rb:justify-between rb:items-center", getStatus(vo.status))}>
-                  <div className="rb:flex rb:items-center rb:gap-1 rb:flex-1">
-                    {vo.icon && <div className={`rb:size-4 rb:bg-cover ${vo.icon}`} />}
-                    <div className="rb:wrap-break-word rb:line-clamp-1">{vo.node_name}</div>
-                  </div>
-                  <span>
+                label: <div className={clsx("rb:flex rb:justify-between rb:items-center")}>
+                  <Flex gap={6} align="center" className="rb:flex-1!">
+                    {vo.icon && <div className={`rb:size-6 rb:bg-cover ${vo.icon}`} />}
+                    <div className="rb:wrap-break-word rb:line-clamp-1 rb:font-medium">{vo.node_name}</div>
+                  </Flex>
+                  <Flex align="center" gap={8} className="rb:text-[12px]">
                     {typeof vo.elapsed_time == 'number' && <>{vo.elapsed_time?.toFixed(3)}ms</>}
-                    {vo.status === 'completed' ? <CheckCircleFilled className="rb:ml-1" /> : vo.status === 'failed' ? <CloseCircleFilled className="rb:ml-1" /> : <LoadingOutlined className="rb:ml-1" />}
-                  </span>
+                    {vo.status === 'completed'
+                      ? <CheckCircleFilled className={`rb:mr-1 ${getStatus(vo.status)}`} />
+                      : vo.status === 'failed'
+                      ? <CloseCircleFilled className={`rb:mr-1 ${getStatus(vo.status)}`} />
+                      : <LoadingOutlined className={`rb:mr-1 ${getStatus(vo.status)}`} />
+                    }
+                  </Flex>
                 </div>,
                 className: styles.collapseItem,
                 children: (
-                  <Space size={8} direction="vertical" className="rb:w-full!">
+                  <Flex gap={8} vertical>
                     {/* Display error message for failed nodes */}
-                    {vo.status === 'failed' &&
-                      <div className={clsx("rb:bg-[#F0F3F8] rb:rounded-md", getStatus(vo.status))}>
-                        <div className="rb:py-2 rb:px-3 rb:flex rb:justify-between rb:items-center rb:text-[12px]">
-                          {t(`workflow.error`)}
-                          <Button
-                            className="rb:py-0! rb:px-1! rb:text-[12px]!"
-                            size="small"
-                          >{t('common.copy')}</Button>
-                        </div>
-                        <div className="rb:pb-2 rb:px-3 rb:max-h-40 rb:overflow-auto">
+
+                    {item.error &&
+                      <RbAlert color="orange" className="rb:pb-0!">
+                        <Flex vertical className="rb:w-full!">
+                          <Flex align="center" justify="space-between">
+                            {t(`workflow.error`)}
+                            <Button
+                              className="rb:py-0! rb:px-1! rb:text-[12px]!"
+                              size="small"
+                              onClick={() => handleCopy(vo.content?.error || '')}
+                            >{t('common.copy')}</Button>
+                          </Flex>
                           <Markdown content={vo.content?.error || ''} />
-                        </div>
-                      </div>
+                        </Flex>
+                      </RbAlert>
                     }
                     {/* Display navigation to nested cycles if subContent exists */}
                     {vo.subContent?.length > 0 && (
@@ -172,12 +186,13 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
                     )}
                     {/* Display input and output data as JSON code blocks */}
                     {['input', 'output'].map(key => (
-                      <div key={key} className="rb:bg-[#F0F3F8] rb:rounded-md">
+                      <div key={key} className="rb:bg-[#EBEBEB] rb:rounded-lg">
                         <div className="rb:py-2 rb:px-3 rb:flex rb:justify-between rb:items-center rb:text-[12px]">
                           {isLoop ? t(`workflow.runtime.${key}_cycle_vars`) : t(`workflow.${key}`)}
                           <Button
                             className="rb:py-0! rb:px-1! rb:text-[12px]!"
                             size="small"
+                            onClick={() => handleCopy(typeof vo.content === 'object' && vo.content?.[key] ? JSON.stringify(vo.content[key], null, 2) : '{}')}
                           >{t('common.copy')}</Button>
                         </div>
                         <div className="rb:max-h-40 rb:overflow-auto">
@@ -186,55 +201,80 @@ const Runtime: FC<{ item: ChatItem; index: number;}> = ({
                             value={typeof vo.content === 'object' && vo.content?.[key] ? JSON.stringify(vo.content[key], null, 2) : '{}'}
                             needCopy={false}
                             showLineNumbers={true}
+                            background="#EBEBEB"
                           />
                         </div>
                       </div>
                     ))}
-                  </Space>
+                  </Flex>
                 )
               }]}
             />
           )
         })}
-      </Space>
+      </Flex>
     }
     return <div className={clsx("rb:bg-[#FBFDFF] rb:rounded-md rb:py-2 rb:px-3 ", getStatus('failed'))}>
       <Markdown content={list || ''} />
     </div>
   }
 
+    /** Copy value to clipboard and show success message */
+    const handleCopy = (value: string) => {
+      copy(value)
+      message.success(t('common.copySuccess'))
+    }
+
   return (
-    <div key={index} className="rb:min-w-100 rb:max-w-full rb:mb-2">
-      <Collapse
-        className={styles[item.status || 'default']}
-        items={[{
-          key: 0,
-          label: <div className={getStatus(item.status)}>
-            {item.status === 'completed' ? <CheckCircleFilled className="rb:mr-1" /> : item.status === 'failed' ? <CloseCircleFilled className="rb:mr-1" /> : <LoadingOutlined className="rb:mr-1" />}
-            {t('application.workflow')}
-          </div>,
-          className: styles.collapseItem,
-          children: (
-            detail
-              ? (
-                <div className="rb:bg-[#FBFDFF] rb:rounded-md">
-                  <Button type="link" icon={<ArrowLeftOutlined />} onClick={() => setDetail(null)} className="rb:px-0! rb:text-[12px]!">
-                    {t('common.return')}
-                  </Button>
-                  {renderDetailChild(detail.subContent)}
-                </div>
-              )
-              : <>
-                {item.error &&
-                 <div className={clsx("rb:bg-[#FBFDFF] rb:rounded-md rb:py-2 rb:px-3 rb:mb-2 rb:-mt-4", getStatus('failed'))}>
-                  <Markdown content={item.error} />
-                  </div>
-                }
-                {renderChild(item.subContent)}
-              </>
+    <div
+      key={index}
+      className={clsx("rb:mb-4 rb-border rb:rounded-xl rb:px-4 rb:pt-3 rb:bg-white rb:max-w-full", {
+        'rb:hover:bg-[#F6F6F6] rb:w-64': !expanded
+      })}
+    >
+      <Flex align="center" justify="space-between" className="rb:font-medium rb:pb-3!">
+        <span className="rb:font-medium rb:leading-5">
+          {item.status === 'completed'
+            ? <CheckCircleFilled className={`rb:mr-1 ${getStatus(item.status)}`} />
+            : item.status === 'failed'
+            ? <CloseCircleFilled className={`rb:mr-1 ${getStatus(item.status)}`} />
+            : <LoadingOutlined className={`rb:mr-1 ${getStatus(item.status)}`} />
+          }
+          {t('application.workflow')}
+        </span>
+        <Flex
+          align="center"
+          justify="center"
+          className={clsx("rb:size-6.5 rb:cursor-pointer rb-border rb:rounded-lg", {
+            'rb:hover:bg-[#F6F6F6]!': expanded
+          })}
+          onClick={() => { setExpanded(v => !v); setDetail(null) }}
+        >
+          <div
+            className={clsx("rb:size-4 rb:bg-cover", {
+              'rb:bg-[url("@/assets/images/conversation/compress.svg")]': expanded,
+              'rb:bg-[url("@/assets/images/conversation/expand.svg")]': !expanded
+            })}
+          />
+        </Flex>
+      </Flex>
+      {expanded && (
+        detail
+          ? (
+            <div className="rb:bg-[#FBFDFF] rb:rounded-md rb:mb-4">
+              <Button type="link" icon={<ArrowLeftOutlined />} onClick={() => setDetail(null)} className="rb:px-0! rb:text-[12px]!">
+                {t('common.return')}
+              </Button>
+              {renderDetailChild(detail.subContent)}
+            </div>
           )
-        }]}
-      />
+          : <div className="rb:mb-4">
+            {item.error &&
+              <RbAlert color="orange" className="rb:pb-0! rb:mb-2!"><Markdown content={item.error} /></RbAlert>
+            }
+            {renderChild(item.subContent)}
+          </div>
+      )}
     </div>
   )
 }
diff --git a/web/src/views/Workflow/components/Chat/chat.module.css b/web/src/views/Workflow/components/Chat/chat.module.css
index 46360d47..1754aa71 100644
--- a/web/src/views/Workflow/components/Chat/chat.module.css
+++ b/web/src/views/Workflow/components/Chat/chat.module.css
@@ -21,7 +21,9 @@
   line-height: 16px;
 }
 .collapse-item:global(.ant-collapse-item>.ant-collapse-header) {
-  padding: 8px 12px;
+  padding: 8px 16px 8px 10px;
+  display: flex;
+  align-items: center;
 }
 .collapse-item:global(.ant-collapse-item>.ant-collapse-header .ant-collapse-expand-icon) {
   height: 16px;
@@ -45,4 +47,7 @@
 }
 .collapse-item :global(.ant-collapse .ant-collapse-content>.ant-collapse-content-box) {
   padding: 0 4px 4px 4px;
+}
+:global(.ant-collapse-borderless)>.collapse-item:global(.ant-collapse-item>.ant-collapse-content>.ant-collapse-content-box) {
+  padding: 0 12px 12px 12px;
 }
\ No newline at end of file