diff --git a/web/app/components/workflow/panel/chat-record.tsx b/web/app/components/workflow/panel/chat-record.tsx
new file mode 100644
index 0000000000..8776572a16
--- /dev/null
+++ b/web/app/components/workflow/panel/chat-record.tsx
@@ -0,0 +1,20 @@
+import { memo } from 'react'
+import UserInput from './debug-and-preview/user-input'
+import Chat from '@/app/components/base/chat/chat'
+
+const ChatRecord = () => {
+  return (
+    <Chat
+      config={{} as any}
+      chatList={[]}
+      chatContainerclassName='px-4'
+      chatContainerInnerClassName='pt-6'
+      chatFooterClassName='px-4 rounded-b-2xl'
+      chatFooterInnerClassName='pb-4'
+      chatNode={<UserInput />}
+      allToolIcons={{}}
+    />
+  )
+}
+
+export default memo(ChatRecord)
diff --git a/web/app/components/workflow/panel/debug-and-preview/index.tsx b/web/app/components/workflow/panel/debug-and-preview/index.tsx
index df6abcdb77..ff055a59e7 100644
--- a/web/app/components/workflow/panel/debug-and-preview/index.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/index.tsx
@@ -3,7 +3,6 @@ import {
   useRef,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useStore } from '../../store'
 import ChatWrapper from './chat-wrapper'
 import Button from '@/app/components/base/button'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
@@ -14,16 +13,14 @@ export type ChatWrapperRefType = {
 const DebugAndPreview = () => {
   const { t } = useTranslation()
   const chatRef = useRef({ handleRestart: () => {} })
-  const showRunHistory = useStore(s => s.showRunHistory)
 
   return (
     <div
       className={`
-        flex flex-col h-full border border-black/[0.02] shadow-xl
-        ${showRunHistory ? 'w-[320px] rounded-2xl' : 'w-[400px] rounded-l-2xl'}
+        flex flex-col w-[400px] rounded-l-2xl h-full border border-black/[0.02] shadow-xl
       `}
       style={{
-        background: showRunHistory ? 'white' : 'linear-gradient(156deg, rgba(242, 244, 247, 0.80) 0%, rgba(242, 244, 247, 0.00) 99.43%), var(--white, #FFF)',
+        background: 'linear-gradient(156deg, rgba(242, 244, 247, 0.80) 0%, rgba(242, 244, 247, 0.00) 99.43%), var(--white, #FFF)',
       }}
     >
       <div className='shrink-0 flex items-center justify-between px-4 pt-3 pb-2 font-semibold text-gray-900'>
diff --git a/web/app/components/workflow/panel/index.tsx b/web/app/components/workflow/panel/index.tsx
index f5d508e6d5..94d20ba577 100644
--- a/web/app/components/workflow/panel/index.tsx
+++ b/web/app/components/workflow/panel/index.tsx
@@ -30,9 +30,9 @@ const Panel: FC = () => {
     return {
       showWorkflowInfoPanel: !isChatMode && !selectedNode && !runningStatus,
       showNodePanel: !!selectedNode && !runningStatus,
-      showDebugAndPreviewPanel: isChatMode && runningStatus,
+      showDebugAndPreviewPanel: isChatMode && runningStatus && !showRunHistory,
     }
-  }, [selectedNode, isChatMode, runningStatus])
+  }, [selectedNode, isChatMode, runningStatus, showRunHistory])
 
   return (
     <div
@@ -51,6 +51,11 @@ const Panel: FC = () => {
           <Record />
         )
       }
+      {
+        runningStatus && isChatMode && showRunHistory && (
+          <Record />
+        )
+      }
       {
         showNodePanel && (
           <NodePanel {...selectedNode!} />
diff --git a/web/app/components/workflow/panel/record.tsx b/web/app/components/workflow/panel/record.tsx
index 0f5e3855f1..22f1482a4c 100644
--- a/web/app/components/workflow/panel/record.tsx
+++ b/web/app/components/workflow/panel/record.tsx
@@ -1,17 +1,27 @@
 import { memo } from 'react'
+import { useIsChatMode } from '../hooks'
 import Run from '../run'
 import { useStore } from '../store'
+import ChatRecord from './chat-record'
 
 const Record = () => {
+  const isChatMode = useIsChatMode()
   const currentSequenceNumber = useStore(s => s.currentSequenceNumber)
   const workflowRunId = useStore(s => s.workflowRunId)
 
   return (
-    <div className='flex flex-col w-[400px] h-full rounded-2xl border-[0.5px] border-gray-200 shadow-xl bg-white'>
+    <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 Run#${currentSequenceNumber}`}
       </div>
-      <Run runID={workflowRunId} />
+      {
+        isChatMode
+          ? <ChatRecord />
+          : <Run runID={workflowRunId} />
+      }
     </div>
   )
 }