aarushikansal/flow stats scroll legend (#7370)

* feat(agent_builder): Add shad/cn + Radix Icons + Tailwind

* move favicon.ico to static folder

* delete empty custominput.css

* feat(agent_builder): Add basic app layout with nav

* add timeline chart to Monitor page and improve overall mock-up functionality

* add some (mock) stats to the overview

* monitor/page.tsx: Switch from mock data to API & reorder file

* undo out-of-scope changes to Flow.tsx and .css files

* fix linting issue in `FlowRunsTimeline`

* wip scrollable

---------

Co-authored-by: Reinier van der Leer <pwuts@agpt.co>
Co-authored-by: Swifty <craigswift13@gmail.com>

rnd/autogpt_builder/src/app/monitor/page.tsx

@@ -268,6 +268,33 @@ const FlowRunStatusBadge = ({ status }: { status: FlowRun['status'] }) => (
   </Badge>
 );
 
+const ScrollableLegend = ({ payload }) => {
+  return (
+    <div style={{
+      overflowX: 'auto',
+      overflowY: 'hidden',
+      whiteSpace: 'nowrap',
+      padding: '10px 0',
+      fontSize: '0.75em'
+    }}>
+      {payload.map((entry, index) => (
+        <span key={`item-${index}`} style={{ display: 'inline-block', marginRight: '10px' }}>
+          <span
+            style={{
+              display: 'inline-block',
+              marginRight: '5px',
+              width: '8px',
+              height: '8px',
+              backgroundColor: entry.color,
+            }}
+          />
+          <span>{entry.value}</span>
+        </span>
+      ))}
+    </div>
+  );
+};
+
 
 const FlowRunsStats = (
   { flows, flowRuns }: {
@@ -414,7 +441,10 @@ const FlowRunsTimeline = (
           legendType="none"
         />
       ))}
-      <Legend wrapperStyle={{ fontSize: '0.75em' }} iconSize={8} />
+     <Legend
+        content={<ScrollableLegend />}
+        wrapperStyle={{ bottom: 0, left: 0, right: 0 }}
+      />
     </ComposedChart>
   </ResponsiveContainer>
 );