From 8d4f40bc7c93f5f3cee75c458ded83f1e90e5cb8 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 18 Mar 2024 16:37:18 +0800
Subject: [PATCH] fix style of chat message log

---
 web/app/components/base/message-log-modal/index.tsx  |  5 +++--
 .../components/workflow/header/run-and-history.tsx   |  8 +++++++-
 web/app/components/workflow/panel/run-history.tsx    | 12 ++++++++++--
 3 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/web/app/components/base/message-log-modal/index.tsx b/web/app/components/base/message-log-modal/index.tsx
index dc082ab401..513769ad5d 100644
--- a/web/app/components/base/message-log-modal/index.tsx
+++ b/web/app/components/base/message-log-modal/index.tsx
@@ -37,10 +37,11 @@ const MessageLogModal: FC<MessageLogModalProps> = ({
 
   return (
     <div
-      className={cn('fixed top-16 bottom-2 flex flex-col py-3 bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl z-10')}
+      className={cn('fixed bottom-2 flex flex-col py-3 bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl z-10')}
       style={{
         width: fixedWidth ? 400 : width,
-        left: fixedWidth ? `${8 + width - 400}px` : '8px',
+        top: fixedWidth ? 56 + 56 : 56 + 8,
+        left: fixedWidth ? `${8 + width - 400 - 200}px` : '8px',
       }}
       ref={ref}
     >
diff --git a/web/app/components/workflow/header/run-and-history.tsx b/web/app/components/workflow/header/run-and-history.tsx
index 204080a7a6..10fb401252 100644
--- a/web/app/components/workflow/header/run-and-history.tsx
+++ b/web/app/components/workflow/header/run-and-history.tsx
@@ -17,6 +17,7 @@ import {
 import { ClockPlay } from '@/app/components/base/icons/src/vender/line/time'
 import TooltipPlus from '@/app/components/base/tooltip-plus'
 import { Loading02 } from '@/app/components/base/icons/src/vender/line/general'
+import { useStore as useAppStore } from '@/app/components/app/store'
 
 const RunMode = memo(() => {
   const { t } = useTranslation()
@@ -111,6 +112,7 @@ PreviewMode.displayName = 'PreviewMode'
 
 const RunAndHistory: FC = () => {
   const { t } = useTranslation()
+  const { setCurrentLogItem, setShowMessageLogModal } = useAppStore()
   const workflowStore = useWorkflowStore()
   const isChatMode = useIsChatMode()
   const showRunHistory = useStore(state => state.showRunHistory)
@@ -132,7 +134,11 @@ const RunAndHistory: FC = () => {
             flex items-center justify-center w-7 h-7 rounded-md hover:bg-black/5 cursor-pointer
             ${showRunHistory && 'bg-primary-50'}
           `}
-          onClick={() => workflowStore.setState({ showRunHistory: !showRunHistory })}
+          onClick={() => {
+            workflowStore.setState({ showRunHistory: !showRunHistory })
+            setCurrentLogItem()
+            setShowMessageLogModal(false)
+          }}
         >
           <ClockPlay className={`w-4 h-4 ${showRunHistory ? 'text-primary-600' : 'text-gray-500'}`} />
         </div>
diff --git a/web/app/components/workflow/panel/run-history.tsx b/web/app/components/workflow/panel/run-history.tsx
index e306d4a6e6..ed1195ef9f 100644
--- a/web/app/components/workflow/panel/run-history.tsx
+++ b/web/app/components/workflow/panel/run-history.tsx
@@ -18,7 +18,7 @@ import Loading from '@/app/components/base/loading'
 const RunHistory = () => {
   const { t } = useTranslation()
   const isChatMode = useIsChatMode()
-  const appDetail = useAppStore(state => state.appDetail)
+  const { appDetail, setCurrentLogItem, setShowMessageLogModal } = useAppStore()
   const workflowStore = useWorkflowStore()
   const workflowRunId = useRunHistoryStore(state => state.workflowRunId)
   const { data: runList, isLoading: runListLoading } = useSWR((appDetail && !isChatMode) ? `/apps/${appDetail.id}/workflow-runs` : null, fetchWorkflowRunHistory)
@@ -37,7 +37,15 @@ const RunHistory = () => {
         {t('workflow.common.runHistory')}
         <div
           className='flex items-center justify-center w-6 h-6 cursor-pointer'
-          onClick={() => workflowStore.setState({ showRunHistory: false, currentConversationID: '' })}
+          onClick={() => {
+            workflowStore.setState({
+              showRunHistory: false,
+              workflowRunId: '',
+              currentConversationID: '',
+            })
+            setCurrentLogItem()
+            setShowMessageLogModal(false)
+          }}
         >
           <XClose className='w-4 h-4 text-gray-500' />
         </div>