diff --git a/web/app/components/workflow/panel/chat-record.tsx b/web/app/components/workflow/panel/chat-record.tsx
deleted file mode 100644
index 8776572a16..0000000000
--- a/web/app/components/workflow/panel/chat-record.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-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/chat-record/index.tsx b/web/app/components/workflow/panel/chat-record/index.tsx
new file mode 100644
index 0000000000..decdebdfd9
--- /dev/null
+++ b/web/app/components/workflow/panel/chat-record/index.tsx
@@ -0,0 +1,85 @@
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react'
+import { useStore } from '../../store'
+import UserInput from './user-input'
+import Chat from '@/app/components/base/chat/chat'
+import { fetchConvesationMessages } from '@/service/debug'
+import { useStore as useAppStore } from '@/app/components/app/store'
+import Loading from '@/app/components/base/loading'
+
+const ChatRecord = () => {
+  const [fetched, setFetched] = useState(false)
+  const [chatList, setChatList] = useState([])
+  const appDetail = useAppStore(s => s.appDetail)
+  const currentConversationID = useStore(s => s.currentConversationID)
+
+  const chatMessageList = useMemo(() => {
+    const res: any = []
+    if (chatList.length) {
+      chatList.forEach((item: any) => {
+        res.push({
+          id: `question-${item.id}`,
+          content: item.query,
+          isAnswer: false,
+          message_files: item.message_files?.filter((file: any) => file.belongs_to === 'user') || [],
+        })
+        res.push({
+          id: item.id,
+          content: item.answer,
+          feedback: item.feedback,
+          isAnswer: true,
+          citation: item.retriever_resources,
+          message_files: item.message_files?.filter((file: any) => file.belongs_to === 'assistant') || [],
+        })
+      })
+    }
+    return res as any
+  }, [chatList])
+
+  const handleFetchConvesationMessages = useCallback(async () => {
+    if (appDetail && currentConversationID) {
+      try {
+        setFetched(false)
+        const res = await fetchConvesationMessages(appDetail.id, currentConversationID)
+        setFetched(true)
+        setChatList((res as any).data)
+      }
+      catch (e) {
+
+      }
+    }
+  }, [appDetail, currentConversationID])
+  useEffect(() => {
+    handleFetchConvesationMessages()
+  }, [currentConversationID, appDetail, handleFetchConvesationMessages])
+
+  if (!fetched) {
+    return (
+      <div className='flex items-center justify-center h-full'>
+        <Loading />
+      </div>
+    )
+  }
+
+  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
+    />
+  )
+}
+
+export default memo(ChatRecord)
diff --git a/web/app/components/workflow/panel/chat-record/user-input.tsx b/web/app/components/workflow/panel/chat-record/user-input.tsx
new file mode 100644
index 0000000000..2fbff73264
--- /dev/null
+++ b/web/app/components/workflow/panel/chat-record/user-input.tsx
@@ -0,0 +1,56 @@
+import {
+  memo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { ChevronDown } from '@/app/components/base/icons/src/vender/line/arrows'
+
+const UserInput = () => {
+  const { t } = useTranslation()
+  const [expanded, setExpanded] = useState(true)
+  const variables: any = []
+
+  if (!variables.length)
+    return null
+
+  return (
+    <div
+      className={`
+        rounded-xl border
+        ${!expanded ? 'bg-indigo-25 border-indigo-100 shadow-none' : 'bg-white shadow-xs border-transparent'}
+      `}
+    >
+      <div
+        className={`
+          flex items-center px-2 pt-4 h-[18px] text-[13px] font-semibold cursor-pointer
+          ${!expanded ? 'text-indigo-800' : 'text-gray-800'}
+        `}
+        onClick={() => setExpanded(!expanded)}
+      >
+        <ChevronDown
+          className={`mr-1 w-3 h-3 ${!expanded ? '-rotate-90 text-indigo-600' : 'text-gray-300'}`}
+        />
+        {t('workflow.panel.userInputField').toLocaleUpperCase()}
+      </div>
+      <div className='px-2 pt-1 pb-3'>
+        {
+          expanded && (
+            <div className='py-2 text-[13px] text-gray-900'>
+              {
+                variables.map((variable: any) => (
+                  <div
+                    key={variable.variable}
+                    className='mb-2 last-of-type:mb-0'
+                  >
+                  </div>
+                ))
+              }
+            </div>
+          )
+        }
+      </div>
+    </div>
+  )
+}
+
+export default memo(UserInput)
diff --git a/web/app/components/workflow/panel/run-history.tsx b/web/app/components/workflow/panel/run-history.tsx
index ef1d46d434..e306d4a6e6 100644
--- a/web/app/components/workflow/panel/run-history.tsx
+++ b/web/app/components/workflow/panel/run-history.tsx
@@ -37,7 +37,7 @@ const RunHistory = () => {
         {t('workflow.common.runHistory')}
         <div
           className='flex items-center justify-center w-6 h-6 cursor-pointer'
-          onClick={() => workflowStore.setState({ showRunHistory: false })}
+          onClick={() => workflowStore.setState({ showRunHistory: false, currentConversationID: '' })}
         >
           <XClose className='w-4 h-4 text-gray-500' />
         </div>