Fix: position of log modal (#5538)

web/app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx

@@ -128,6 +128,7 @@ const ChatItem: FC<ChatItemProps> = ({
       showPromptLog
       questionIcon={<Avatar name={userProfile.name} size={40} />}
       allToolIcons={allToolIcons}
+      hideLogModal
     />
   )
 }

web/app/components/app/configuration/debug/index.tsx

@@ -39,6 +39,7 @@ import { ModelFeatureEnum, ModelTypeEnum } from '@/app/components/header/account
 import type { ModelParameterModalProps } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useProviderContext } from '@/context/provider-context'
+import AgentLogModal from '@/app/components/base/agent-log-modal'
 import PromptLogModal from '@/app/components/base/prompt-log-modal'
 import { useStore as useAppStore } from '@/app/components/app/store'
 
@@ -370,11 +371,13 @@ const Debug: FC<IDebug> = ({
     handleVisionConfigInMultipleModel()
   }, [multipleModelConfigs, mode])
 
-  const { currentLogItem, setCurrentLogItem, showPromptLogModal, setShowPromptLogModal } = useAppStore(useShallow(state => ({
+  const { currentLogItem, setCurrentLogItem, showPromptLogModal, setShowPromptLogModal, showAgentLogModal, setShowAgentLogModal } = useAppStore(useShallow(state => ({
     currentLogItem: state.currentLogItem,
     setCurrentLogItem: state.setCurrentLogItem,
     showPromptLogModal: state.showPromptLogModal,
     setShowPromptLogModal: state.setShowPromptLogModal,
+    showAgentLogModal: state.showAgentLogModal,
+    setShowAgentLogModal: state.setShowAgentLogModal,
   })))
   const [width, setWidth] = useState(0)
   const ref = useRef<HTMLDivElement>(null)
@@ -434,13 +437,33 @@ const Debug: FC<IDebug> = ({
       </div>
       {
         debugWithMultipleModel && (
-          <div className='grow mt-3 overflow-hidden'>
+          <div className='grow mt-3 overflow-hidden' ref={ref}>
             <DebugWithMultipleModel
               multipleModelConfigs={multipleModelConfigs}
               onMultipleModelConfigsChange={onMultipleModelConfigsChange}
               onDebugWithMultipleModelChange={handleChangeToSingleModel}
               checkCanSend={checkCanSend}
             />
+            {showPromptLogModal && (
+              <PromptLogModal
+                width={width}
+                currentLogItem={currentLogItem}
+                onCancel={() => {
+                  setCurrentLogItem()
+                  setShowPromptLogModal(false)
+                }}
+              />
+            )}
+            {showAgentLogModal && (
+              <AgentLogModal
+                width={width}
+                currentLogItem={currentLogItem}
+                onCancel={() => {
+                  setCurrentLogItem()
+                  setShowAgentLogModal(false)
+                }}
+              />
+            )}
           </div>
         )
       }
@@ -474,6 +497,7 @@ const Debug: FC<IDebug> = ({
                     supportAnnotation
                     appId={appId}
                     varList={varList}
+                    siteInfo={null}
                   />
                 )}
               </div>

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

@@ -57,6 +57,7 @@ export type ChatProps = {
   onFeedback?: (messageId: string, feedback: Feedback) => void
   chatAnswerContainerInner?: string
   hideProcessDetail?: boolean
+  hideLogModal?: boolean
 }
 const Chat: FC<ChatProps> = ({
   appData,
@@ -83,6 +84,7 @@ const Chat: FC<ChatProps> = ({
   onFeedback,
   chatAnswerContainerInner,
   hideProcessDetail,
+  hideLogModal,
 }) => {
   const { t } = useTranslation()
   const { currentLogItem, setCurrentLogItem, showPromptLogModal, setShowPromptLogModal, showAgentLogModal, setShowAgentLogModal } = useAppStore(useShallow(state => ({
@@ -265,7 +267,7 @@ const Chat: FC<ChatProps> = ({
             }
           </div>
         </div>
-        {showPromptLogModal && (
+        {showPromptLogModal && !hideLogModal && (
           <PromptLogModal
             width={width}
             currentLogItem={currentLogItem}
@@ -275,7 +277,7 @@ const Chat: FC<ChatProps> = ({
             }}
           />
         )}
-        {showAgentLogModal && (
+        {showAgentLogModal && !hideLogModal && (
           <AgentLogModal
             width={width}
             currentLogItem={currentLogItem}

web/app/components/base/prompt-log-modal/index.tsx

@@ -33,7 +33,7 @@ const PromptLogModal: FC<PromptLogModalProps> = ({
 
   return (
     <div
-      className='fixed top-16 left-2 bottom-2 flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl z-10'
+      className='relative flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl z-10'
       style={{
         width: 480,
         position: 'fixed',