Skip to content

feat: Update AI Agent Page layout#16470

Merged
tatianainama merged 1 commit intomainfrom
08-18-feat_ai-agents_update_ai_agent_page_layout
Aug 20, 2025
Merged

feat: Update AI Agent Page layout#16470
tatianainama merged 1 commit intomainfrom
08-18-feat_ai-agents_update_ai_agent_page_layout

Conversation

@tatianainama
Copy link
Copy Markdown
Contributor

@tatianainama tatianainama commented Aug 18, 2025

Updated the AI Agent Page Layout with collapsible sidebar functionality.

  • Sidebar is collapsible now, can be done by the new toggle button or using the panel resize handle
  • Moved the agent selector to new header section
  • Moved settings and new agent creation into a menu in header section

Screen Recording 2025-08-19 at 09.38.38.mov (uploaded via Graphite)

Copy link
Copy Markdown
Contributor Author

tatianainama commented Aug 18, 2025

@github-actions
Copy link
Copy Markdown

github-actions bot commented Aug 18, 2025

Your preview environment pr-16470 has been deployed with errors.

Preview environment endpoints are available at:

@tatianainama tatianainama changed the title feat(ai-agents): Update AI Agent Page layout feat: Update AI Agent Page layout Aug 18, 2025
@tatianainama tatianainama force-pushed the 08-18-feat_ai-agents_update_ai_agent_page_layout branch from 771ed8f to e4b8a87 Compare August 19, 2025 07:16
@tatianainama tatianainama marked this pull request as ready for review August 19, 2025 09:23
Comment on lines +2 to +5
Button,
type ButtonFactory,
polymorphicFactory,
} from '@mantine-8/core';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Type imports must use the type keyword for proper separation. Move type ButtonFactory to group with other type imports:

import { Button, polymorphicFactory, type ButtonFactory } from '@mantine-8/core';
Suggested change
Button,
type ButtonFactory,
polymorphicFactory,
} from '@mantine-8/core';
Button,
polymorphicFactory,
type ButtonFactory,
} from '@mantine-8/core';

Spotted by Diamond (based on custom rule: packages/frontend rules)

Is this helpful? React 👍 or 👎 to let us know.

padding: var(--mantine-spacing-lg);
background: var(--mantine-color-gray-0);

/*Override sidebar with when collapsed, because
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a small typo in the CSS comment - "sidebar with" should be "sidebar width". This appears in the explanation about the workaround for react-resizable-panels not supporting pixel-based sizing.

Suggested change
/*Override sidebar with when collapsed, because
/*Override sidebar width when collapsed, because

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

background: var(--mantine-color-gray-0);

/*Override sidebar with when collapsed, because
react-resizable-planels doesn't support pixel sizes
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There's a typo in the comment: react-resizable-planels should be react-resizable-panels.

Suggested change
react-resizable-planels doesn't support pixel sizes
react-resizable-panels doesn't support pixel sizes

Spotted by Diamond

Is this helpful? React 👍 or 👎 to let us know.

@github-actions
Copy link
Copy Markdown

@github-actions
Copy link
Copy Markdown

You can ssh into the preview environment by running: ./scripts/okteto-ssh.sh 16470

Comment on lines +53 to +56
useEffect(() => {
const timer = setInterval(updateCollapsedState, 100);
return () => clearInterval(timer);
}, []);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The useEffect hook uses setInterval with a 100ms polling interval to check sidebar collapse state, which violates Frontend performance rules. This creates unnecessary frequent re-renders and function calls that could impact performance. Consider using event-driven approaches like onResize callbacks from the react-resizable-panels library, or use a more reasonable polling interval (e.g., 500ms or higher) if polling is absolutely necessary.

Spotted by Diamond (based on custom rule: packages/frontend rules)

Is this helpful? React 👍 or 👎 to let us know.

Copy link
Copy Markdown
Contributor

@notgiorgi notgiorgi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tested, LGTM

Copy link
Copy Markdown
Contributor Author

tatianainama commented Aug 20, 2025

Merge activity

  • Aug 20, 3:22 PM UTC: A user started a stack merge that includes this pull request via Graphite.
  • Aug 20, 3:22 PM UTC: @tatianainama merged this pull request with Graphite.

@tatianainama tatianainama merged commit 6dfe4a1 into main Aug 20, 2025
21 of 23 checks passed
@tatianainama tatianainama deleted the 08-18-feat_ai-agents_update_ai_agent_page_layout branch August 20, 2025 15:22
lightdash-bot pushed a commit that referenced this pull request Aug 20, 2025
# [0.1939.0](0.1938.1...0.1939.0) (2025-08-20)

### Features

* Update AI Agent Page layout ([#16470](#16470)) ([6dfe4a1](6dfe4a1))
@lightdash-bot
Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 0.1939.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

magnew pushed a commit that referenced this pull request Aug 25, 2025
Updated the AI Agent Page Layout with collapsible sidebar functionality. 

- Sidebar is collapsible now, can be done by the new toggle button or using the panel resize handle
- Moved the agent selector to new header section
- Moved settings and new agent creation into a menu in header section

[Screen Recording 2025-08-19 at 09.38.38.mov <span class="graphite__hidden">(uploaded via Graphite)</span> <img class="graphite__hidden" src="https://app.graphite.dev/user-attachments/thumbnails/4782e419-ea3f-4c69-8a78-fa76b5e4b4e6.mov" />](https://app.graphite.dev/user-attachments/video/4782e419-ea3f-4c69-8a78-fa76b5e4b4e6.mov)
magnew pushed a commit to Abhijay007/lightdash that referenced this pull request Aug 25, 2025
# [0.1939.0](lightdash/lightdash@0.1938.1...0.1939.0) (2025-08-20)

### Features

* Update AI Agent Page layout ([lightdash#16470](lightdash#16470)) ([6dfe4a1](lightdash@6dfe4a1))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants