feat(MessageLogModal): refactor modal structure and improve tab handling (#36169)

Co-authored-by: CodingOnStar <hanxujiang@dify.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

eslint-suppressions.json

@@ -1422,14 +1422,6 @@
       "count": 1
     }
   },
-  "web/app/components/base/message-log-modal/index.tsx": {
-    "react/set-state-in-effect": {
-      "count": 1
-    },
-    "ts/no-explicit-any": {
-      "count": 1
-    }
-  },
   "web/app/components/base/new-audio-button/index.tsx": {
     "ts/no-explicit-any": {
       "count": 1

web/app/components/base/message-log-modal/__tests__/index.spec.tsx

@@ -4,11 +4,9 @@ import { useStore } from '@/app/components/app/store'
 import MessageLogModal from '../index'
 
 let clickAwayHandler: (() => void) | null = null
-let clickAwayHandlers: (() => void)[] = []
 vi.mock('ahooks', () => ({
   useClickAway: (fn: () => void) => {
     clickAwayHandler = fn
-    clickAwayHandlers.push(fn)
   },
 }))
 
@@ -40,7 +38,6 @@ describe('MessageLogModal', () => {
   beforeEach(() => {
     vi.clearAllMocks()
     clickAwayHandler = null
-    clickAwayHandlers = []
     // eslint-disable-next-line ts/no-explicit-any
     vi.mocked(useStore).mockImplementation((selector: any) => selector({
       appDetail: { id: 'app-1' },
@@ -76,15 +73,17 @@ describe('MessageLogModal', () => {
 
     it('sets fixed style when fixedWidth is false (floating)', () => {
       const { container } = render(<MessageLogModal width={1000} onCancel={onCancel} currentLogItem={mockLog} fixedWidth={false} />)
-      const modal = container.firstChild as HTMLElement
-      expect(modal.style.position).toBe('fixed')
-      expect(modal.style.width).toBe('480px')
+      const modal = screen.getByRole('dialog')
+      expect(container).not.toContainElement(modal)
+      expect(document.body).toContainElement(modal)
+      expect(modal).toHaveClass('fixed', 'z-50', 'w-[480px]!', 'left-[max(8px,calc(100vw-1136px))]!')
     })
 
     it('sets fixed width when fixedWidth is true', () => {
       const { container } = render(<MessageLogModal width={1000} onCancel={onCancel} currentLogItem={mockLog} fixedWidth={true} />)
-      const modal = container.firstChild as HTMLElement
-      expect(modal.style.width).toBe('1000px')
+      const panel = container.firstElementChild as HTMLElement
+      expect(panel).toHaveClass('relative', 'z-10')
+      expect(panel.style.width).toBe('1000px')
     })
   })
 
@@ -98,16 +97,16 @@ describe('MessageLogModal', () => {
     })
 
     it('calls onCancel when clicked away', () => {
-      render(<MessageLogModal width={800} onCancel={onCancel} currentLogItem={mockLog} />)
+      render(<MessageLogModal width={800} onCancel={onCancel} currentLogItem={mockLog} fixedWidth />)
       expect(clickAwayHandler).toBeTruthy()
       clickAwayHandler!()
       expect(onCancel).toHaveBeenCalledTimes(1)
     })
 
-    it('does not call onCancel when clicked away if not mounted', () => {
+    it('does not use click away to close the floating dialog', () => {
       render(<MessageLogModal width={800} onCancel={onCancel} currentLogItem={mockLog} />)
-      expect(clickAwayHandlers.length).toBeGreaterThan(0)
-      clickAwayHandlers[0]!() // This is the closure from the initial render, where mounted is false
+      expect(clickAwayHandler).toBeTruthy()
+      clickAwayHandler!()
       expect(onCancel).not.toHaveBeenCalled()
     })
   })

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

@@ -1,13 +1,18 @@
 import type { FC } from 'react'
 import type { IChatItem } from '@/app/components/base/chat/chat/type'
 import { cn } from '@langgenius/dify-ui/cn'
-import { RiCloseLine } from '@remixicon/react'
+import { Dialog, DialogContent, DialogTitle } from '@langgenius/dify-ui/dialog'
 import { useClickAway } from 'ahooks'
-import { useEffect, useRef, useState } from 'react'
+import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useStore } from '@/app/components/app/store'
 import Run from '@/app/components/workflow/run'
 
+type RunActiveTab = 'RESULT' | 'DETAIL' | 'TRACING'
+
+const isRunActiveTab = (tab: string): tab is RunActiveTab =>
+  tab === 'RESULT' || tab === 'DETAIL' || tab === 'TRACING'
+
 type MessageLogModalProps = {
   currentLogItem?: IChatItem
   defaultTab?: string
@@ -24,36 +29,65 @@ const MessageLogModal: FC<MessageLogModalProps> = ({
 }) => {
   const { t } = useTranslation()
   const ref = useRef(null)
-  const [mounted, setMounted] = useState(false)
   const appDetail = useStore(state => state.appDetail)
 
   useClickAway(() => {
-    if (mounted)
+    if (fixedWidth)
       onCancel()
   }, ref)
 
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
   if (!currentLogItem || !currentLogItem.workflow_run_id)
     return null
 
+  const activeTab = isRunActiveTab(defaultTab) ? defaultTab : 'DETAIL'
+  const modalContent = (
+    <>
+      <DialogTitle className="shrink-0 px-4 py-1 system-xl-semibold text-text-primary">{t('runDetail.title', { ns: 'appLog' })}</DialogTitle>
+      <button
+        type="button"
+        aria-label={t('operation.close', { ns: 'common' })}
+        className="absolute top-4 right-3 z-20 cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
+        onClick={onCancel}
+      >
+        <span className="i-ri-close-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
+      </button>
+      <Run
+        hideResult
+        activeTab={activeTab}
+        runDetailUrl={`/apps/${appDetail?.id}/workflow-runs/${currentLogItem.workflow_run_id}`}
+        tracingListUrl={`/apps/${appDetail?.id}/workflow-runs/${currentLogItem.workflow_run_id}/node-executions`}
+      />
+    </>
+  )
+
+  if (!fixedWidth) {
+    return (
+      <Dialog
+        open
+        onOpenChange={(open) => {
+          if (!open)
+            onCancel()
+        }}
+      >
+        <DialogContent
+          backdropClassName="bg-transparent!"
+          className="top-16! bottom-4! left-[max(8px,calc(100vw-1136px))]! flex max-h-none! w-[480px]! max-w-[calc(100vw-16px)]! translate-x-0! translate-y-0! flex-col overflow-hidden! rounded-xl! border-[0.5px]! border-components-panel-border! bg-components-panel-bg! p-0! pt-3! shadow-xl!"
+        >
+          {modalContent}
+        </DialogContent>
+      </Dialog>
+    )
+  }
+
   return (
     <div
-      className={cn('relative z-10 flex flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg pt-3 shadow-xl')}
+      className={cn(
+        'relative z-10',
+        'flex flex-col rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg pt-3 shadow-xl',
+      )}
       style={{
-        width: fixedWidth ? width : 480,
-        ...(!fixedWidth
-          ? {
-              position: 'fixed',
-              top: 56 + 8,
-              left: 8 + (width - 480),
-              bottom: 16,
-            }
-          : {
-              marginRight: 8,
-            }),
+        width,
+        marginRight: 8,
       }}
       ref={ref}
     >
@@ -64,11 +98,11 @@ const MessageLogModal: FC<MessageLogModalProps> = ({
         className="absolute top-4 right-3 z-20 cursor-pointer border-none bg-transparent p-1 focus-visible:ring-1 focus-visible:ring-components-input-border-active focus-visible:outline-hidden"
         onClick={onCancel}
       >
-        <RiCloseLine className="h-4 w-4 text-text-tertiary" aria-hidden="true" />
+        <span className="i-ri-close-line h-4 w-4 text-text-tertiary" aria-hidden="true" />
       </button>
       <Run
         hideResult
-        activeTab={defaultTab as any}
+        activeTab={activeTab}
         runDetailUrl={`/apps/${appDetail?.id}/workflow-runs/${currentLogItem.workflow_run_id}`}
         tracingListUrl={`/apps/${appDetail?.id}/workflow-runs/${currentLogItem.workflow_run_id}/node-executions`}
       />