new style of workflow process

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

@@ -307,7 +307,7 @@ const GenerationItem: FC<IGenerationItemProps> = ({
             <div className={`flex ${contentClassName}`}>
               <div className='grow w-0'>
                 {siteInfo && siteInfo.show_workflow_steps && workflowProcessData && (
-                  <WorkflowProcessItem grayBg hideInfo data={workflowProcessData} expand={workflowProcessData.expand} hideProcessDetail={hideProcessDetail} />
+                  <WorkflowProcessItem grayBg data={workflowProcessData} expand={workflowProcessData.expand} hideProcessDetail={hideProcessDetail} />
                 )}
                 {workflowProcessData && !isError && (
                   <ResultTab data={workflowProcessData} content={content} currentTab={currentTab} onCurrentTabChange={setCurrentTab} />

web/app/components/app/workflow-log/detail.tsx

@@ -13,7 +13,7 @@ const DetailPanel: FC<ILogDetail> = ({ runID, onClose }) => {
   const { t } = useTranslation()
 
   return (
-    <div className='grow relative flex flex-col py-3'>
+    <div className='grow relative flex flex-col pt-3'>
       <span className='absolute right-3 top-4 p-1 cursor-pointer z-20' onClick={onClose}>
         <RiCloseLine className='w-4 h-4 text-text-tertiary' />
       </span>

web/app/components/base/chat/chat/answer/index.tsx

@@ -140,7 +140,6 @@ const Answer: FC<AnswerProps> = ({
                 <WorkflowProcess
                   data={workflowProcess}
                   item={item}
-                  hideInfo
                   hideProcessDetail={hideProcessDetail}
                 />
               )
@@ -151,7 +150,6 @@ const Answer: FC<AnswerProps> = ({
                 <WorkflowProcess
                   data={workflowProcess}
                   item={item}
-                  hideInfo
                   hideProcessDetail={hideProcessDetail}
                 />
               )

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

@@ -20,17 +20,13 @@ import { useStore as useAppStore } from '@/app/components/app/store'
 type WorkflowProcessProps = {
   data: WorkflowProcess
   item?: ChatItem
-  grayBg?: boolean
   expand?: boolean
-  hideInfo?: boolean
   hideProcessDetail?: boolean
 }
 const WorkflowProcessItem = ({
   data,
   item,
-  grayBg,
   expand = false,
-  hideInfo = false,
   hideProcessDetail = false,
 }: WorkflowProcessProps) => {
   const { t } = useTranslation()
@@ -40,6 +36,8 @@ const WorkflowProcessItem = ({
   const failed = data.status === WorkflowRunningStatus.Failed || data.status === WorkflowRunningStatus.Stopped
 
   const background = useMemo(() => {
+    if (collapse)
+      return 'linear-gradient(90deg, rgba(200, 206, 218, 0.20) 0%, rgba(200, 206, 218, 0.04) 100%)'
     if (running && !collapse)
       return 'linear-gradient(180deg, #E1E4EA 0%, #EAECF0 100%)'
 
@@ -67,41 +65,36 @@ const WorkflowProcessItem = ({
   return (
     <div
       className={cn(
-        'mb-2 rounded-xl border-[0.5px] border-components-panel-border',
+        '-mx-1 px-2.5 rounded-xl border-[0.5px]',
-        collapse ? 'py-[7px]' : hideInfo ? 'pt-2 pb-1' : 'py-2',
+        collapse ? 'py-[7px] border-components-panel-border' : 'pt-[7px] px-1 pb-1 border-components-panel-border-subtle',
-        collapse && (!grayBg ? 'bg-components-panel-bg' : 'bg-background-section-burn'),
-        hideInfo ? 'mx-[-8px] px-1' : 'w-full px-3',
       )}
       style={{
         background,
       }}
     >
       <div
-        className={cn(
+        className={cn('flex items-center cursor-pointer', !collapse && 'px-1.5')}
-          'flex items-center h-[18px] cursor-pointer',
-          hideInfo && 'px-[6px]',
-        )}
         onClick={() => setCollapse(!collapse)}
       >
         {
           running && (
-            <RiLoader2Line className='shrink-0 mr-1 w-3 h-3 text-text-accent animate-spin' />
+            <RiLoader2Line className='shrink-0 mr-1 w-3.5 h-3.5 text-text-tertiary' />
           )
         }
         {
           succeeded && (
-            <CheckCircle className='shrink-0 mr-1 w-3 h-3 text-text-success' />
+            <CheckCircle className='shrink-0 mr-1 w-3.5 h-3.5 text-text-success' />
           )
         }
         {
           failed && (
-            <RiErrorWarningFill className='shrink-0 mr-1 w-3 h-3 text-text-destructive' />
+            <RiErrorWarningFill className='shrink-0 mr-1 w-3.5 h-3.5 text-text-destructive' />
           )
         }
-        <div className='grow text-xs font-medium text-text-secondary'>
+        <div className={cn('system-xs-medium text-text-secondary', !collapse && 'grow')}>
           {t('workflow.common.workflowProcess')}
         </div>
-        <RiArrowRightSLine className={`'ml-1 w-3 h-3 text-text-tertiary' ${collapse ? '' : 'rotate-90'}`} />
+        <RiArrowRightSLine className={`'ml-1 w-4 h-4 text-text-tertiary' ${collapse ? '' : 'rotate-90'}`} />
       </div>
       {
         !collapse && (
@@ -111,7 +104,7 @@ const WorkflowProcessItem = ({
                 <div key={node.id} className='mb-1 last-of-type:mb-0'>
                   <NodePanel
                     nodeInfo={node}
-                    hideInfo={hideInfo}
+                    inMessage
                     hideProcessDetail={hideProcessDetail}
                     onShowIterationDetail={showIterationDetail}
                   />

web/app/components/base/message-log-modal/index.tsx

@@ -39,7 +39,7 @@ const MessageLogModal: FC<MessageLogModalProps> = ({
 
   return (
     <div
-      className={cn('relative flex flex-col py-3 bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xl z-10')}
+      className={cn('relative flex flex-col pt-3 bg-components-panel-bg border-[0.5px] border-components-panel-border rounded-xl shadow-xl z-10')}
       style={{
         width: fixedWidth ? width : 480,
         ...(!fixedWidth

web/app/components/workflow/nodes/_base/components/before-run-form/form-item.tsx

@@ -12,6 +12,7 @@ import CodeEditor from '../editor/code-editor'
 import { CodeLanguage } from '../../../code/types'
 import TextEditor from '../editor/text-editor'
 import Select from '@/app/components/base/select'
+import Input from '@/app/components/base/input'
 import Textarea from '@/app/components/base/textarea'
 import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
 import { Resolution } from '@/types/app'
@@ -100,9 +101,7 @@ const FormItem: FC<Props> = ({
       <div className='grow'>
         {
           type === InputVarType.textInput && (
-            <input
+            <Input
-              className="w-full px-3 text-sm leading-8 text-gray-900 border-0 rounded-lg grow h-8 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
-              type="text"
               value={value || ''}
               onChange={e => onChange(e.target.value)}
               placeholder={t('appDebug.variableConig.inputPlaceholder')!}

web/app/components/workflow/panel/debug-and-preview/user-input.tsx

@@ -29,7 +29,7 @@ const UserInput = () => {
     return null
 
   return (
-    <div className={cn('relative bg-components-panel-on-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs z-[1]')}>
+    <div className={cn('sticky top-0 bg-components-panel-on-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs z-[1]')}>
       <div className='px-4 pt-3 pb-4'>
         {variables.map((variable, index) => (
           <div

web/app/components/workflow/panel/record.tsx

@@ -19,7 +19,7 @@ const Record = () => {
 
   return (
     <div className='flex flex-col w-[400px] h-full rounded-l-2xl border-[0.5px] border-components-panel-border shadow-xl bg-components-panel-bg'>
-      <div className='flex items-center justify-between p-4 pb-1 text-text-primary system-xl-semibold'>
+      <div className='flex items-center justify-between p-4 pb-0 text-text-primary system-xl-semibold'>
         {`Test Run#${historyWorkflowData?.sequence_number}`}
       </div>
       <Run

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

@@ -197,7 +197,7 @@ const RunPanel: FC<RunProps> = ({ hideResult, activeTab = 'RESULT', runID, getRe
         >{t('runLog.tracing')}</div>
       </div>
       {/* panel detal */}
-      <div ref={ref} className={cn('grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-2xl', currentTab !== 'DETAIL' && '!bg-background-section-burn')}>
+      <div ref={ref} className={cn('grow bg-components-panel-bg h-0 overflow-y-auto rounded-b-xl', currentTab !== 'DETAIL' && '!bg-background-section-burn')}>
         {loading && (
           <div className='flex h-full items-center justify-center bg-components-panel-bg'>
             <Loading />

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

@@ -3,24 +3,25 @@ import { useTranslation } from 'react-i18next'
 import type { FC } from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import {
+  RiAlertFill,
   RiArrowRightSLine,
-  RiCheckboxCircleLine,
+  RiCheckboxCircleFill,
-  RiErrorWarningLine,
+  RiErrorWarningFill,
   RiLoader2Line,
 } from '@remixicon/react'
 import BlockIcon from '../block-icon'
 import { BlockEnum } from '../types'
 import Split from '../nodes/_base/components/split'
 import cn from '@/utils/classnames'
+import StatusContainer from '@/app/components/workflow/run/status-container'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
-import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
 import type { NodeTracing } from '@/types/workflow'
 
 type Props = {
   className?: string
   nodeInfo: NodeTracing
-  hideInfo?: boolean
+  inMessage?: boolean
   hideProcessDetail?: boolean
   onShowIterationDetail?: (detail: NodeTracing[][]) => void
   notShowIterationNav?: boolean
@@ -30,7 +31,7 @@ type Props = {
 const NodePanel: FC<Props> = ({
   className,
   nodeInfo,
-  hideInfo = false,
+  inMessage = false,
   hideProcessDetail,
   onShowIterationDetail,
   notShowIterationNav,
@@ -72,65 +73,64 @@ const NodePanel: FC<Props> = ({
     onShowIterationDetail?.(nodeInfo.details || [])
   }
   return (
-    <div className={cn('px-4 py-1', className, hideInfo && '!p-0')}>
+    <div className={cn('px-2', inMessage && '!p-0', className)}>
-      <div className={cn('group transition-all bg-white border border-gray-100 rounded-2xl shadow-xs hover:shadow-md', hideInfo && '!rounded-lg')}>
+      <div className={cn(
+        'group transition-all bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border radius-lg shadow-xs hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
+        !collapseState && 'hover:bg-components-panel-on-panel-item-bg',
+      )}>
         <div
           className={cn(
-            'flex items-center pl-[6px] pr-3 cursor-pointer',
+            'flex items-center py-2 pl-[6px] pr-3 cursor-pointer',
-            hideInfo ? 'py-2' : 'py-3',
+            inMessage && 'py-1.5 pl-[4px] pr-2',
-            !collapseState && (hideInfo ? '!pb-1' : '!pb-2'),
+            !collapseState && 'pb-1',
           )}
           onClick={() => setCollapseState(!collapseState)}
         >
           {!hideProcessDetail && (
             <RiArrowRightSLine
               className={cn(
-                'shrink-0 w-3 h-3 mr-1 text-gray-400 transition-all group-hover:text-gray-500',
+                'shrink-0 w-4 h-4 text-text-quaternary transition-all group-hover:text-text-tertiary',
                 !collapseState && 'rotate-90',
               )}
             />
           )}
-
+          <BlockIcon size={inMessage ? 'xs' : 'sm'} className={cn('shrink-0 mr-2', inMessage && '!mr-1')} type={nodeInfo.node_type} toolIcon={nodeInfo.extras?.icon || nodeInfo.extras} />
-          <BlockIcon size={hideInfo ? 'xs' : 'sm'} className={cn('shrink-0 mr-2', hideInfo && '!mr-1')} type={nodeInfo.node_type} toolIcon={nodeInfo.extras?.icon || nodeInfo.extras} />
           <div className={cn(
-            'grow text-gray-700 text-[13px] leading-[16px] font-semibold truncate',
+            'grow text-text-secondary system-sm-semibold-uppercase truncate',
-            hideInfo && '!text-xs',
+            inMessage && '!system-xs-semibold-uppercase',
           )} title={nodeInfo.title}>{nodeInfo.title}</div>
-          {nodeInfo.status !== 'running' && !hideInfo && (
+          {nodeInfo.status !== 'running' && !inMessage && (
-            <div className='shrink-0 text-gray-500 text-xs leading-[18px]'>{`${getTime(nodeInfo.elapsed_time || 0)} · ${getTokenCount(nodeInfo.execution_metadata?.total_tokens || 0)} tokens`}</div>
+            <div className='shrink-0 text-text-tertiary system-xs-regular'>{`${getTime(nodeInfo.elapsed_time || 0)} · ${getTokenCount(nodeInfo.execution_metadata?.total_tokens || 0)} tokens`}</div>
           )}
           {nodeInfo.status === 'succeeded' && (
-            <RiCheckboxCircleLine className='shrink-0 ml-2 w-3.5 h-3.5 text-[#12B76A]' />
+            <RiCheckboxCircleFill className={cn('shrink-0 ml-2 w-4 h-4 text-text-success', inMessage && 'w-3.5 h-3.5')} />
           )}
           {nodeInfo.status === 'failed' && (
-            <RiErrorWarningLine className='shrink-0 ml-2 w-3.5 h-3.5 text-[#F04438]' />
+            <RiErrorWarningFill className={cn('shrink-0 ml-2 w-4 h-4 text-text-destructive', inMessage && 'w-3.5 h-3.5')} />
           )}
           {nodeInfo.status === 'stopped' && (
-            <AlertTriangle className='shrink-0 ml-2 w-3.5 h-3.5 text-[#F79009]' />
+            <RiAlertFill className={cn('shrink-0 ml-2 w-4 h-4 text-text-warning-secondary', inMessage && 'w-3.5 h-3.5')} />
           )}
           {nodeInfo.status === 'running' && (
-            <div className='shrink-0 flex items-center text-primary-600 text-[13px] leading-[16px] font-medium'>
+            <RiLoader2Line className={cn('shrink-0 ml-2 w-4 h-4 text-text-accent', inMessage && 'w-3.5 h-3.5')} />
-              <span className='mr-2 text-xs font-normal'>Running</span>
-              <RiLoader2Line className='w-3.5 h-3.5 animate-spin' />
-            </div>
           )}
         </div>
         {!collapseState && !hideProcessDetail && (
-          <div className='pb-2'>
+          <div className='px-1 pb-1'>
             {/* The nav to the iteration detail */}
             {isIterationNode && !notShowIterationNav && (
               <div className='mt-2 mb-1 !px-2'>
                 <div
-                  className='flex items-center h-[34px] justify-between px-3 bg-gray-100 border-[0.5px] border-gray-200 rounded-lg cursor-pointer'
+                  className='flex items-center h-[34px] justify-between px-3 bg-background-section-burn border-[0.5px] border-components-panel-border rounded-lg cursor-pointer'
                   onClick={handleOnShowIterationDetail}>
-                  <div className='leading-[18px] text-[13px] font-medium text-gray-700'>{t('workflow.nodes.iteration.iteration', { count: nodeInfo.metadata?.iterator_length })}</div>
+                  <div className='system-sm-medium text-text-secondary'>{t('workflow.nodes.iteration.iteration', { count: nodeInfo.metadata?.iterator_length })}</div>
                   {justShowIterationNavArrow
                     ? (
-                      <RiArrowRightSLine className='w-3.5 h-3.5 text-gray-500' />
+                      <RiArrowRightSLine className='w-3.5 h-3.5 text-text-tertiary' />
                     )
                     : (
-                      <div className='flex items-center space-x-1 text-[#155EEF]'>
+                      <div className='flex items-center space-x-1 text-text-accent'>
-                        <div className='text-[13px] font-normal '>{t('workflow.common.viewDetailInTracingPanel')}</div>
+                        <div className='system-sm-regular '>{t('workflow.common.viewDetailInTracingPanel')}</div>
                         <RiArrowRightSLine className='w-3.5 h-3.5' />
                       </div>
                     )}
@@ -138,16 +138,20 @@ const NodePanel: FC<Props> = ({
                 <Split className='mt-2' />
               </div>
             )}
-            <div className={cn('px-[10px] py-1', hideInfo && '!px-2 !py-0.5')}>
+            <div className={cn('mb-1')}>
               {nodeInfo.status === 'stopped' && (
-                <div className='px-3 py-[10px] bg-[#fffaeb] rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] text-xs leading-[18px] text-[#dc6803] shadow-xs'>{t('workflow.tracing.stopBy', { user: nodeInfo.created_by ? nodeInfo.created_by.name : 'N/A' })}</div>
+                <StatusContainer status='stopped'>
+                  {t('workflow.tracing.stopBy', { user: nodeInfo.created_by ? nodeInfo.created_by.name : 'N/A' })}
+                </StatusContainer>
               )}
               {nodeInfo.status === 'failed' && (
-                <div className='px-3 py-[10px] bg-[#fef3f2] rounded-lg border-[0.5px] border-[rbga(0,0,0,0.05)] text-xs leading-[18px] text-[#d92d20] shadow-xs'>{nodeInfo.error}</div>
+                <StatusContainer status='failed'>
+                  {nodeInfo.error}
+                </StatusContainer>
               )}
             </div>
             {nodeInfo.inputs && (
-              <div className={cn('px-[10px] py-1', hideInfo && '!px-2 !py-0.5')}>
+              <div className={cn('mb-1')}>
                 <CodeEditor
                   readOnly
                   title={<div>{t('workflow.common.input').toLocaleUpperCase()}</div>}
@@ -158,7 +162,7 @@ const NodePanel: FC<Props> = ({
               </div>
             )}
             {nodeInfo.process_data && (
-              <div className={cn('px-[10px] py-1', hideInfo && '!px-2 !py-0.5')}>
+              <div className={cn('mb-1')}>
                 <CodeEditor
                   readOnly
                   title={<div>{t('workflow.common.processData').toLocaleUpperCase()}</div>}
@@ -169,7 +173,7 @@ const NodePanel: FC<Props> = ({
               </div>
             )}
             {nodeInfo.outputs && (
-              <div className={cn('px-[10px] py-1', hideInfo && '!px-2 !py-0.5')}>
+              <div>
                 <CodeEditor
                   readOnly
                   title={<div>{t('workflow.common.output').toLocaleUpperCase()}</div>}

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

@@ -62,7 +62,7 @@ const StatusPanel: FC<ResultProps> = ({
         </div>
         <div className='flex-[33%] max-w-[152px]'>
           <div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('runLog.resultPanel.time')}</div>
-          <div className='flex items-center gap-1 system-sm-medium'>
+          <div className='flex items-center gap-1 system-sm-medium text-text-secondary'>
             {status === 'running' && (
               <div className='w-16 h-2 rounded-sm bg-text-quaternary' />
             )}
@@ -73,7 +73,7 @@ const StatusPanel: FC<ResultProps> = ({
         </div>
         <div className='flex-[33%]'>
           <div className='mb-1 text-text-tertiary system-2xs-medium-uppercase'>{t('runLog.resultPanel.tokens')}</div>
-          <div className='flex items-center gap-1 system-sm-medium'>
+          <div className='flex items-center gap-1 system-sm-medium text-text-secondary'>
             {status === 'running' && (
               <div className='w-20 h-2 rounded-sm bg-text-quaternary' />
             )}

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

@@ -10,7 +10,7 @@ type TracingPanelProps = {
 
 const TracingPanel: FC<TracingPanelProps> = ({ list, onShowIterationDetail }) => {
   return (
-    <div className='bg-background-section-burn py-2'>
+    <div className='bg-background-section-burn py-2 space-y-1'>
       {list.map(node => (
         <NodePanel
           key={node.id}