diff --git a/autogpt_platform/frontend/package.json b/autogpt_platform/frontend/package.json index f22a182d20..e8c9871a72 100644 --- a/autogpt_platform/frontend/package.json +++ b/autogpt_platform/frontend/package.json @@ -102,7 +102,7 @@ "react-markdown": "9.0.3", "react-modal": "3.16.3", "react-shepherd": "6.1.9", - "react-window": "1.8.11", + "react-window": "2.2.0", "recharts": "3.3.0", "rehype-autolink-headings": "7.1.0", "rehype-highlight": "7.0.2", @@ -140,7 +140,7 @@ "@types/react": "18.3.17", "@types/react-dom": "18.3.5", "@types/react-modal": "3.16.3", - "@types/react-window": "1.8.8", + "@types/react-window": "2.0.0", "@vitejs/plugin-react": "5.1.2", "axe-playwright": "2.2.2", "chromatic": "13.3.3", diff --git a/autogpt_platform/frontend/pnpm-lock.yaml b/autogpt_platform/frontend/pnpm-lock.yaml index db891ccf3f..377a298564 100644 --- a/autogpt_platform/frontend/pnpm-lock.yaml +++ b/autogpt_platform/frontend/pnpm-lock.yaml @@ -228,8 +228,8 @@ importers: specifier: 6.1.9 version: 6.1.9(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) react-window: - specifier: 1.8.11 - version: 1.8.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: 2.2.0 + version: 2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) recharts: specifier: 3.3.0 version: 3.3.0(@types/react@18.3.17)(react-dom@18.3.1(react@18.3.1))(react-is@18.3.1)(react@18.3.1)(redux@5.0.1) @@ -337,8 +337,8 @@ importers: specifier: 3.16.3 version: 3.16.3 '@types/react-window': - specifier: 1.8.8 - version: 1.8.8 + specifier: 2.0.0 + version: 2.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@vitejs/plugin-react': specifier: 5.1.2 version: 5.1.2(vite@7.3.1(@types/node@24.10.0)(jiti@2.6.1)(terser@5.44.1)(yaml@2.8.2)) @@ -3469,8 +3469,9 @@ packages: '@types/react-modal@3.16.3': resolution: {integrity: sha512-xXuGavyEGaFQDgBv4UVm8/ZsG+qxeQ7f77yNrW3n+1J6XAstUy5rYHeIHPh1KzsGc6IkCIdu6lQ2xWzu1jBTLg==} - '@types/react-window@1.8.8': - resolution: {integrity: sha512-8Ls660bHR1AUA2kuRvVG9D/4XpRC6wjAaPT9dil7Ckc76eP9TKWZwwmgfq8Q1LANX3QNDnoU4Zp48A3w+zK69Q==} + '@types/react-window@2.0.0': + resolution: {integrity: sha512-E8hMDtImEpMk1SjswSvqoSmYvk7GEtyVaTa/GJV++FdDNuMVVEzpAClyJ0nqeKYBrMkGiyH6M1+rPLM0Nu1exQ==} + deprecated: This is a stub types definition. react-window provides its own type definitions, so you do not need this installed. '@types/react@18.3.17': resolution: {integrity: sha512-opAQ5no6LqJNo9TqnxBKsgnkIYHozW9KSTlFVoSUJYh1Fl/sswkEoqIugRSm7tbh6pABtYjGAjW+GOS23j8qbw==} @@ -5976,9 +5977,6 @@ packages: resolution: {integrity: sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==} engines: {node: '>= 4.0.0'} - memoize-one@5.2.1: - resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==} - merge-stream@2.0.0: resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==} @@ -6891,12 +6889,11 @@ packages: '@types/react': optional: true - react-window@1.8.11: - resolution: {integrity: sha512-+SRbUVT2scadgFSWx+R1P754xHPEqvcfSfVX10QYg6POOz+WNgkN48pS+BtZNIMGiL1HYrSEiCkwsMS15QogEQ==} - engines: {node: '>8.0.0'} + react-window@2.2.0: + resolution: {integrity: sha512-Y2L7yonHq6K1pQA2P98wT5QdIsEcjBTB7T8o6Mub12hH9eYppXoYu6vgClmcjlh3zfNcW2UrXiJJJqDxUY7GVw==} peerDependencies: - react: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 - react-dom: ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^18.0.0 || ^19.0.0 + react-dom: ^18.0.0 || ^19.0.0 react@18.3.1: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} @@ -11603,9 +11600,12 @@ snapshots: dependencies: '@types/react': 18.3.17 - '@types/react-window@1.8.8': + '@types/react-window@2.0.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@types/react': 18.3.17 + react-window: 2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + transitivePeerDependencies: + - react + - react-dom '@types/react@18.3.17': dependencies: @@ -14545,8 +14545,6 @@ snapshots: dependencies: fs-monkey: 1.1.0 - memoize-one@5.2.1: {} - merge-stream@2.0.0: {} merge2@1.4.1: {} @@ -15592,10 +15590,8 @@ snapshots: optionalDependencies: '@types/react': 18.3.17 - react-window@1.8.11(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + react-window@2.2.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1): dependencies: - '@babel/runtime': 7.28.4 - memoize-one: 5.2.1 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) diff --git a/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityDropdown/ActivityDropdown.tsx b/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityDropdown/ActivityDropdown.tsx index 263453b327..885877786f 100644 --- a/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityDropdown/ActivityDropdown.tsx +++ b/autogpt_platform/frontend/src/components/layout/Navbar/components/AgentActivityDropdown/components/ActivityDropdown/ActivityDropdown.tsx @@ -4,7 +4,7 @@ import { Button } from "@/components/atoms/Button/Button"; import { Input } from "@/components/atoms/Input/Input"; import { Text } from "@/components/atoms/Text/Text"; import { Bell, MagnifyingGlass, X } from "@phosphor-icons/react"; -import { FixedSizeList as List } from "react-window"; +import { List, type RowComponentProps } from "react-window"; import { AgentExecutionWithInfo } from "../../helpers"; import { ActivityItem } from "../ActivityItem"; import styles from "./styles.module.css"; @@ -19,14 +19,16 @@ interface Props { recentFailures: AgentExecutionWithInfo[]; } -interface VirtualizedItemProps { - index: number; - style: React.CSSProperties; - data: AgentExecutionWithInfo[]; +interface ActivityRowProps { + executions: AgentExecutionWithInfo[]; } -function VirtualizedActivityItem({ index, style, data }: VirtualizedItemProps) { - const execution = data[index]; +function VirtualizedActivityItem({ + index, + style, + executions, +}: RowComponentProps) { + const execution = executions[index]; return (
@@ -129,14 +131,13 @@ export function ActivityDropdown({ > {filteredExecutions.length > 0 ? ( - {VirtualizedActivityItem} - + defaultHeight={listHeight} + rowCount={filteredExecutions.length} + rowHeight={itemHeight} + rowProps={{ executions: filteredExecutions }} + rowComponent={VirtualizedActivityItem} + style={{ width: 320, height: listHeight }} + /> ) : (