chore: simplify the workflow details logic (#24714)

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

@@ -137,24 +137,14 @@ const Answer: FC<AnswerProps> = ({
                 />
               )
             }
-            {/** Render the normal steps */}
+            {/** Render workflow process */}
             {
-              workflowProcess && !hideProcessDetail && (
+              workflowProcess && (
                 <WorkflowProcessItem
                   data={workflowProcess}
                   item={item}
                   hideProcessDetail={hideProcessDetail}
-                />
+                  readonly={hideProcessDetail && appData ? !appData.site.show_workflow_steps : undefined}
-              )
-            }
-            {/** Hide workflow steps by it's settings in siteInfo */}
-            {
-              workflowProcess && hideProcessDetail && appData && (
-                <WorkflowProcessItem
-                  data={workflowProcess}
-                  item={item}
-                  hideProcessDetail={hideProcessDetail}
-                  readonly={!appData.site.show_workflow_steps}
                 />
               )
             }

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

@@ -39,6 +39,8 @@ const WorkflowProcessItem = ({
     setCollapse(!expand)
   }, [expand])
 
+  if (readonly) return null
+
   return (
     <div
       className={cn(
@@ -51,8 +53,8 @@ const WorkflowProcessItem = ({
       )}
     >
       <div
-        className={cn('flex cursor-pointer items-center', !collapse && 'px-1.5', readonly && 'cursor-default')}
+        className={cn('flex cursor-pointer items-center', !collapse && 'px-1.5')}
-        onClick={() => !readonly && setCollapse(!collapse)}
+        onClick={() => setCollapse(!collapse)}
       >
         {
           running && (
@@ -72,10 +74,10 @@ const WorkflowProcessItem = ({
         <div className={cn('system-xs-medium text-text-secondary', !collapse && 'grow')}>
           {t('workflow.common.workflowProcess')}
         </div>
-        {!readonly && <RiArrowRightSLine className={cn('ml-1 h-4 w-4 text-text-tertiary', !collapse && 'rotate-90')} />}
+        <RiArrowRightSLine className={cn('ml-1 h-4 w-4 text-text-tertiary', !collapse && 'rotate-90')} />
       </div>
       {
-        !collapse && !readonly && (
+        !collapse && (
           <div className='mt-1.5'>
             {
               <TracingPanel