checklist

web/app/components/workflow/panel/chat-record/index.tsx

@@ -70,18 +70,30 @@ const ChatRecord = () => {
   }
 
   return (
-    <Chat
-      config={{} as any}
-      chatList={chatMessageList}
-      chatContainerclassName='px-4'
-      chatContainerInnerClassName='pt-6'
-      chatFooterClassName='px-4 rounded-b-2xl'
-      chatFooterInnerClassName='pb-4'
-      chatNode={<UserInput />}
-      noChatInput
-      allToolIcons={{}}
-      showPromptLog
-    />
+    <div
+      className={`
+        flex flex-col w-[400px] rounded-l-2xl h-full border border-black/[0.02] shadow-xl
+      `}
+      style={{
+        background: 'linear-gradient(156deg, rgba(242, 244, 247, 0.80) 0%, rgba(242, 244, 247, 0.00) 99.43%), var(--white, #FFF)',
+      }}
+    >
+      <div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-gray-900'>
+        {`TEST CHAT#${historyWorkflowData?.sequence_number}`}
+      </div>
+      <Chat
+        config={{} as any}
+        chatList={chatMessageList}
+        chatContainerclassName='px-4'
+        chatContainerInnerClassName='pt-6'
+        chatFooterClassName='px-4 rounded-b-2xl'
+        chatFooterInnerClassName='pb-4'
+        chatNode={<UserInput />}
+        noChatInput
+        allToolIcons={{}}
+        showPromptLog
+      />
+    </div>
   )
 }
 

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

@@ -14,6 +14,7 @@ import RunHistory from './run-history'
 import Record from './record'
 import InputsPanel from './inputs-panel'
 import WorkflowPreview from './workflow-preview'
+import ChatRecord from './chat-record'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import MessageLogModal from '@/app/components/base/message-log-modal'
 
@@ -46,12 +47,7 @@ const Panel: FC = () => {
   ])
 
   return (
-    <div
-      className={`
-        absolute top-14 right-0 bottom-2 flex pr-2 z-10
-        ${(showRunHistory || showDebugAndPreviewPanel) && '!pr-0'}
-      `}
-    >
+    <div className='absolute top-14 right-0 bottom-2 flex z-10'>
       {
         showMessageLogModal && (
           <MessageLogModal
@@ -66,10 +62,15 @@ const Panel: FC = () => {
         )
       }
       {
-        historyWorkflowData && (
+        historyWorkflowData && !isChatMode && (
           <Record />
         )
       }
+      {
+        historyWorkflowData && isChatMode && (
+          <ChatRecord />
+        )
+      }
       {
         showDebugAndPreviewPanel && (
           <DebugAndPreview />

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

@@ -1,45 +1,21 @@
-import {
-  memo,
-  // useCallback,
-} from 'react'
-import {
-  useIsChatMode,
-  // useWorkflow,
-} from '../hooks'
+import { memo } from 'react'
+import { useIsChatMode } from '../hooks'
 import Run from '../run'
 import { useStore } from '../store'
-import ChatRecord from './chat-record'
-// import type { WorkflowRunDetailResponse } from '@/models/log'
 
 const Record = () => {
   const isChatMode = useIsChatMode()
-  // const { renderTreeFromRecord } = useWorkflow()
   const historyWorkflowData = useStore(s => s.historyWorkflowData)
 
-  // const getResultCallback = useCallback((res: WorkflowRunDetailResponse) => {
-  //   const { graph } = res
-
-  //   renderTreeFromRecord(graph.nodes, graph.edges, graph.viewport)
-  // }, [renderTreeFromRecord])
-
   return (
     <div className={`
       flex flex-col h-full rounded-2xl border-[0.5px] border-gray-200 shadow-xl bg-white
       ${isChatMode ? 'w-[320px]' : 'w-[400px]'}
     `}>
       <div className='flex items-center justify-between p-4 pb-1 text-base font-semibold text-gray-900'>
-        {`Test ${isChatMode ? 'Chat' : 'Run'}#${historyWorkflowData?.sequence_number}`}
+        {`Test Run#${historyWorkflowData?.sequence_number}`}
       </div>
-      {
-        isChatMode
-          ? <ChatRecord />
-          : (
-            <Run
-              runID={historyWorkflowData?.id || ''}
-              // getResultCallback={getResultCallback}
-            />
-          )
-      }
+      <Run runID={historyWorkflowData?.id || ''} />
     </div>
   )
 }

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

@@ -38,7 +38,7 @@ const RunHistory = () => {
     return null
 
   return (
-    <div className='flex flex-col ml-2 w-[200px] h-full bg-white border-[0.5px] border-gray-200 shadow-xl rounded-l-2xl'>
+    <div className='absolute -top-2 right-2 flex flex-col ml-2 w-[240px] min-h-[214px] bg-white border-[0.5px] border-gray-200 shadow-xl rounded-xl overflow-y-auto z-[11]'>
       <div className='shrink-0 flex items-center justify-between px-4 pt-3 text-base font-semibold text-gray-900'>
         {t('workflow.common.runHistory')}
         <div