Fix: Fixed the issue where the drop-down box could not be displayed after selecting a large model #9869 (#10205)

### What problem does this PR solve?

Fix: Fixed the issue where the drop-down box could not be displayed
after selecting a large model #9869

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/pages/data-flow/log-sheet/dataflow-timeline.tsx

@@ -8,7 +8,9 @@ import {
   TimelineSeparator,
   TimelineTitle,
 } from '@/components/originui/timeline';
+import { useFetchMessageTrace } from '@/hooks/use-agent-request';
 import { Aperture } from 'lucide-react';
+import { useEffect } from 'react';
 
 const items = [
   {
@@ -48,7 +50,24 @@ const items = [
   },
 ];
 
-export function DataflowTimeline() {
+export type DataflowTimelineProps = { messageId: string };
+
+interface DataflowTrace {
+  datetime: string;
+  elapsed_time: number;
+  message: string;
+  progress: number;
+  timestamp: number;
+}
+export function DataflowTimeline({ messageId }: DataflowTimelineProps) {
+  const { setMessageId, data } = useFetchMessageTrace(false);
+
+  useEffect(() => {
+    if (messageId) {
+      setMessageId(messageId);
+    }
+  }, [messageId, setMessageId]);
+
   return (
     <Timeline>
       {items.map((item) => (

web/src/pages/data-flow/log-sheet/index.tsx

@@ -8,18 +8,18 @@ import { IModalProps } from '@/interfaces/common';
 import { cn } from '@/lib/utils';
 import { NotebookText } from 'lucide-react';
 import 'react18-json-view/src/style.css';
-import { DataflowTimeline } from './dataflow-timeline';
+import { DataflowTimeline, DataflowTimelineProps } from './dataflow-timeline';
 
-type LogSheetProps = IModalProps<any>;
+type LogSheetProps = IModalProps<any> & DataflowTimelineProps;
 
-export function LogSheet({ hideModal }: LogSheetProps) {
+export function LogSheet({ hideModal, messageId }: LogSheetProps) {
   return (
     <Sheet open onOpenChange={hideModal} modal={false}>
       <SheetContent className={cn('top-20 right-[620px]')}>
         <SheetHeader>
           <SheetTitle className="flex items-center gap-1">
             <NotebookText className="size-4" />
-            <DataflowTimeline></DataflowTimeline>
+            <DataflowTimeline messageId={messageId}></DataflowTimeline>
           </SheetTitle>
         </SheetHeader>
         <section className="max-h-[82vh] overflow-auto mt-6"></section>