feat: Main Layout NEO sider

[yomybaby]

Resolves #2840

This pull request introduces a series of new icon components and updates the layout and styling of the sidebar and menu based on WebUI NEO design. The most important changes include the creation of new icon components, updates to the BAIMenu and BAISider components, and modifications to the WebUISider component to incorporate the new icons and styling.

New Icon Components:

• Added new icon components for various features such as BatchSessionIcon, EndpointsIcon, ExampleStartIcon, ExamplesIcon, InteractiveSessionIcon, ModelServiceIcon, ModelsIcon, MyEnvironmentsIcon, PipelinesIcon, RecalculateResourcesIcon, SessionsIcon, TrailsIcon, URLStartIcon, UpdateEnvironmentImageIcon, and UserOutlinedIcon. These components import SVG files and use the Icon component from @ant-design/icons to render the icons. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15]

Updates to BAIMenu Component:

• Introduced new styles using createStyles from antd-style and applied these styles conditionally based on the collapsed prop. Updated the ConfigProvider theme settings and adjusted the class names to include the new styles. [1] [2]

Updates to BAISider Component:

• Increased the width of the sidebar from 221px to 240px and made several styling updates, including changes to the padding, background color, and alignment of elements. Removed some redundant styles and added new ones to enhance the appearance and behavior of the sidebar. [1] [2] [3] [4] [5]

Updates to WebUISider Component:

• Incorporated the new icon components into the WebUISider component, replacing the existing icons for various menu items. Updated the styling of these icons to match the application's design theme. [1] [2] [3] [4] [5] [6]

[graphite-app]

Your org requires the Graphite merge queue for merging into main

Add the label “flow:merge-queue” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge. Or use the label “flow:hotfix” to add to the merge queue as a hot fix.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

[yomybaby]

• feat: WebUI NEO start page basic layout #2786
• chore: use pnpm patch in /react instead of patch-package #2661
• e2e: fix broken tests due to NEO mainlayout, Agent select and Image parsing #2851
• feat: NEO sider's toggle button and refactoring #2853
• feat: Main Layout NEO sider #2850 👈 (View in Graphite)
• feat: Global breadcrumb #2847
• feat: WebUILink and WebUINavigate component #2846 : 1 other dependent PR (#2858 )
• feat: Main layout NEO header #2844
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[yomybaby]

Temporarily changed to draft PR. I'll switch it to ready after updating the shadow and logo SVG color.

[lizable]

I see scrollbars in both sidebar menu and main layout. It's inevitable for now, but we could find way to remove it from sidebar for better user experience. Anyway It works fine.

[graphite-app]

Merge activity

• Nov 20, 1:54 AM EST: A user added this pull request to the Graphite merge queue.
• Nov 20, 2:04 AM EST: A user merged this pull request with the Graphite merge queue.