feat: add sliding container for playground panel #10759
Conversation
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the WalkthroughThis pull request introduces a new sliding container feature to replace the modal-based playground button interaction. It adds new reusable components for a resizable side panel, state management via Zustand, and integrates the sliding container into the flow toolbar and main page layout. The Chat-W keyboard shortcut behavior is updated to toggle the sliding container instead of the IOModal. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Suggested labels
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 error, 3 warnings)
✅ Passed checks (3 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Frontend Unit Test Coverage ReportCoverage Summary
Unit Test Results
|
Codecov Report❌ Patch coverage is ❌ Your project status has failed because the head coverage (40.04%) is below the target coverage (60.00%). You can increase the head coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## main #10759 +/- ##
==========================================
+ Coverage 32.40% 32.43% +0.03%
==========================================
Files 1368 1372 +4
Lines 63412 63488 +76
Branches 9373 9391 +18
==========================================
+ Hits 20551 20595 +44
- Misses 41829 41856 +27
- Partials 1032 1037 +5
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
Wallgau
changed the title
github-actions
bot
added
enhancement
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/frontend/src/components/core/flowToolbarComponent/components/flow-toolbar-options.tsx (1)
11-22: Unused props after switching to PlaygroundButtonSliding.The
openandsetOpenprops are no longer used sincePlaygroundButtonSlidingmanages its state via the sliding container store. When this implementation is finalized, these props should be removed from the component signature and from callers.
🧹 Nitpick comments (3)
src/frontend/src/customization/components/custom-sliding-container.tsx (2)
78-88: Consider improving resize handle discoverability.The resize handle has a 1px width which may be difficult for users to discover and grab. While it does have a hover effect (
hover:bg-primary/20), consider one of the following improvements:
- Increase the interactive area (e.g., 4-6px) while keeping the visual indicator at 1px using padding or a pseudo-element
- Add a visual indicator (e.g., vertical dots or grip icon) when hovering near the edge
31-60: Consider adding keyboard support for resizing.The resize functionality is currently mouse-only. For better accessibility, consider adding keyboard controls (e.g., arrow keys) to adjust the panel width when the resize handle has focus.
src/frontend/src/customization/stores/sliding-container-store.ts (1)
24-27: Verify width behavior during window resize.The
setWidthfunction calculatesmaxWidthusingwindow.innerWidthat the time of the call. If the user resizes the browser window to be smaller while the sliding container is open, the panel width might temporarily exceed 80% of the viewport untilsetWidthis called again (e.g., during a manual resize).Consider whether this behavior is acceptable, or if you should add a window resize listener to automatically re-validate and adjust the width to stay within bounds.
Example of a window resize listener approach:
// In the store or in a component that uses the store useEffect(() => { const handleResize = () => { const currentWidth = useSlidingContainerStore.getState().width; const maxWidth = window.innerWidth * MAX_WIDTH_RATIO; if (currentWidth > maxWidth) { useSlidingContainerStore.getState().setWidth(currentWidth); } }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []);
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/frontend/src/components/core/flowToolbarComponent/components/flow-toolbar-options.tsx(2 hunks)src/frontend/src/components/core/flowToolbarComponent/index.tsx(2 hunks)src/frontend/src/customization/components/custom-flow-page-sliding-container.tsx(1 hunks)src/frontend/src/customization/components/custom-playground-button-sliding.tsx(1 hunks)src/frontend/src/customization/components/custom-sliding-container.tsx(1 hunks)src/frontend/src/customization/stores/sliding-container-store.ts(1 hunks)src/frontend/src/pages/FlowPage/index.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
src/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{ts,tsx}: Use React 18 with TypeScript for frontend development
Use Zustand for state management
Files:
src/frontend/src/customization/components/custom-flow-page-sliding-container.tsxsrc/frontend/src/customization/components/custom-sliding-container.tsxsrc/frontend/src/customization/components/custom-playground-button-sliding.tsxsrc/frontend/src/customization/stores/sliding-container-store.tssrc/frontend/src/pages/FlowPage/index.tsxsrc/frontend/src/components/core/flowToolbarComponent/index.tsxsrc/frontend/src/components/core/flowToolbarComponent/components/flow-toolbar-options.tsx
src/frontend/src/**/*.{tsx,jsx,css,scss}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
Use Tailwind CSS for styling
Files:
src/frontend/src/customization/components/custom-flow-page-sliding-container.tsxsrc/frontend/src/customization/components/custom-sliding-container.tsxsrc/frontend/src/customization/components/custom-playground-button-sliding.tsxsrc/frontend/src/pages/FlowPage/index.tsxsrc/frontend/src/components/core/flowToolbarComponent/index.tsxsrc/frontend/src/components/core/flowToolbarComponent/components/flow-toolbar-options.tsx
src/frontend/src/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/**/*.{tsx,jsx}: Implement dark mode support using the useDarkMode hook and dark store
Use Lucide React for icon components in the application
Files:
src/frontend/src/customization/components/custom-flow-page-sliding-container.tsxsrc/frontend/src/customization/components/custom-sliding-container.tsxsrc/frontend/src/customization/components/custom-playground-button-sliding.tsxsrc/frontend/src/pages/FlowPage/index.tsxsrc/frontend/src/components/core/flowToolbarComponent/index.tsxsrc/frontend/src/components/core/flowToolbarComponent/components/flow-toolbar-options.tsx
src/frontend/src/components/**/*.{tsx,jsx}
📄 CodeRabbit inference engine (.cursor/rules/frontend_development.mdc)
src/frontend/src/components/**/*.{tsx,jsx}: Use React Flow for flow graph visualization with Node, Edge, Controls, and Background components
Use the cn() utility function for combining Tailwind CSS classes in components
Use TypeScript interfaces for defining component props in React components
Files:
src/frontend/src/components/core/flowToolbarComponent/index.tsxsrc/frontend/src/components/core/flowToolbarComponent/components/flow-toolbar-options.tsx
🧠 Learnings (8)
📚 Learning: 2025-11-24T19:46:45.790Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.790Z
Learning: Applies to src/frontend/src/components/**/*.{tsx,jsx} : Use React Flow for flow graph visualization with Node, Edge, Controls, and Background components
Applied to files:
src/frontend/src/customization/components/custom-flow-page-sliding-container.tsxsrc/frontend/src/pages/FlowPage/index.tsxsrc/frontend/src/components/core/flowToolbarComponent/index.tsxsrc/frontend/src/components/core/flowToolbarComponent/components/flow-toolbar-options.tsx
📚 Learning: 2025-11-24T19:46:45.790Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.790Z
Learning: Applies to src/frontend/src/stores/**/*.{ts,tsx} : Store state management code in stores/ directory using Zustand with typed state interfaces
Applied to files:
src/frontend/src/customization/stores/sliding-container-store.ts
📚 Learning: 2025-11-24T19:46:45.790Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.790Z
Learning: Applies to src/frontend/src/**/*.{ts,tsx} : Use Zustand for state management
Applied to files:
src/frontend/src/customization/stores/sliding-container-store.ts
📚 Learning: 2025-06-23T12:46:42.048Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Use Zustand for state management in React components within the frontend; stores should expose both state and setter functions, and be imported via hooks (e.g., useMyStore).
Applied to files:
src/frontend/src/customization/stores/sliding-container-store.tssrc/frontend/src/components/core/flowToolbarComponent/index.tsx
📚 Learning: 2025-06-23T12:46:42.048Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Dark mode support should be implemented using a dedicated Zustand store (e.g., useDarkStore), and toggled via a custom hook (e.g., useDarkMode) that exposes isDark and toggle.
Applied to files:
src/frontend/src/customization/stores/sliding-container-store.ts
📚 Learning: 2025-06-23T12:46:42.048Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: Custom React Flow node types should be implemented as memoized components, using Handle components for connection points and supporting optional icons and labels.
Applied to files:
src/frontend/src/pages/FlowPage/index.tsxsrc/frontend/src/components/core/flowToolbarComponent/index.tsxsrc/frontend/src/components/core/flowToolbarComponent/components/flow-toolbar-options.tsx
📚 Learning: 2025-11-24T19:46:45.790Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-11-24T19:46:45.790Z
Learning: Applies to src/frontend/src/components/nodes/**/*.{tsx,jsx} : Memoize custom React Flow node components using memo() to prevent unnecessary re-renders
Applied to files:
src/frontend/src/components/core/flowToolbarComponent/index.tsx
📚 Learning: 2025-06-23T12:46:42.048Z
Learnt from: CR
Repo: langflow-ai/langflow PR: 0
File: .cursor/rules/frontend_development.mdc:0-0
Timestamp: 2025-06-23T12:46:42.048Z
Learning: React Flow should be used for flow graph visualization, with nodes and edges passed as props, and changes handled via onNodesChange and onEdgesChange callbacks.
Applied to files:
src/frontend/src/components/core/flowToolbarComponent/index.tsx
🧬 Code graph analysis (6)
src/frontend/src/customization/components/custom-flow-page-sliding-container.tsx (2)
src/frontend/src/customization/stores/sliding-container-store.ts (1)
useSlidingContainerStore(18-33)src/frontend/src/components/common/genericIconComponent/index.tsx (1)
ForwardedIconComponent(15-146)
src/frontend/src/customization/components/custom-sliding-container.tsx (2)
src/frontend/src/utils/utils.ts (1)
cn(38-40)src/frontend/tailwind.config.mjs (1)
className(476-476)
src/frontend/src/customization/components/custom-playground-button-sliding.tsx (4)
src/frontend/src/customization/feature-flags.ts (1)
ENABLE_PUBLISH(12-12)src/frontend/src/constants/constants.ts (1)
PLAYGROUND_BUTTON_NAME(928-928)src/frontend/src/customization/stores/sliding-container-store.ts (1)
useSlidingContainerStore(18-33)src/frontend/src/components/common/genericIconComponent/index.tsx (1)
ForwardedIconComponent(15-146)
src/frontend/src/pages/FlowPage/index.tsx (3)
src/frontend/src/customization/stores/sliding-container-store.ts (1)
useSlidingContainerStore(18-33)src/frontend/src/customization/components/custom-sliding-container.tsx (1)
SlidingContainer(18-92)src/frontend/src/customization/components/custom-flow-page-sliding-container.tsx (1)
FlowPageSlidingContainerContent(4-30)
src/frontend/src/components/core/flowToolbarComponent/index.tsx (2)
src/frontend/src/customization/stores/sliding-container-store.ts (1)
useSlidingContainerStore(18-33)src/frontend/src/utils/utils.ts (1)
isThereModal(449-452)
src/frontend/src/components/core/flowToolbarComponent/components/flow-toolbar-options.tsx (1)
src/frontend/src/customization/components/custom-playground-button-sliding.tsx (1)
PlaygroundButtonSliding(18-57)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Run Frontend Tests / Determine Test Suites and Shard Distribution
- GitHub Check: Test Starter Templates
- GitHub Check: Run Frontend Unit Tests / Frontend Jest Unit Tests
🔇 Additional comments (8)
src/frontend/src/components/core/flowToolbarComponent/components/flow-toolbar-options.tsx (1)
28-38: LGTM!The replacement of
PlaygroundButtonwithPlaygroundButtonSlidingis correctly implemented, properly passing thehasIOprop to control the component's behavior.src/frontend/src/customization/components/custom-flow-page-sliding-container.tsx (1)
1-30: LGTM!The
FlowPageSlidingContainerContentcomponent is well-structured with proper accessibility attributes (title and aria-label) and clean integration with the sliding container store. The fullscreen toggle functionality is correctly implemented.src/frontend/src/components/core/flowToolbarComponent/index.tsx (1)
24-37: LGTM!The keyboard shortcut handler is correctly updated to toggle the sliding container instead of the IOModal. The early return when a modal is present prevents conflicting interactions, which is consistent with other shortcut handlers in this component.
src/frontend/src/customization/components/custom-playground-button-sliding.tsx (1)
1-57: LGTM!The
PlaygroundButtonSlidingcomponent is well-implemented with proper state management via the Zustand store, clear conditional rendering based onhasIO, appropriate accessibility (tooltip for disabled state), and good testing support with data-testid attributes. The icon toggle between "Play" and "PanelRightClose" provides clear visual feedback.src/frontend/src/customization/components/custom-sliding-container.tsx (1)
18-91: LGTM overall!The
SlidingContainercomponent is well-implemented with proper resize logic, smooth transitions, and correct width calculations. The mouse event handling and cleanup are properly managed, and the component correctly handles fullscreen and closed states.src/frontend/src/customization/stores/sliding-container-store.ts (1)
18-33: LGTM overall!The Zustand store is well-structured with a clear interface, proper state management for
isOpen,width, andisFullscreen, and includes appropriate toggle functions and width clamping logic.src/frontend/src/pages/FlowPage/index.tsx (2)
167-178: LGTM!The sliding container state is correctly extracted from the store with proper selector usage to minimize re-renders.
193-214: LGTM!The sliding container is properly integrated into the FlowPage layout with correct prop wiring, conditional rendering based on
hasIO, and a clean flex layout pattern. The resizable functionality is enabled, and all store state is correctly passed to theSlidingContainercomponent.
Replace modal-based playground with a sliding container panel that slides in from the right side of the screen. The new implementation includes: - Reusable SlidingContainer component with resizable and fullscreen support - PlaygroundButtonSliding component that toggles the sliding container - Zustand store for managing sliding container state (open/closed, width, fullscreen) - FlowPageSlidingContainerContent component for playground panel content - Integration with existing FlowPage layout and keyboard shortcuts Changes are commented out for review and will be reverted when approved before merging to avoid affecting the current implementation.
Add comprehensive test coverage for: - SlidingContainerStore: state management, width constraints, fullscreen toggle - SlidingContainer: rendering, width behavior, resizing, transitions - PlaygroundButtonSliding: button states, icon rendering, click handlers All tests follow existing patterns using Jest and React Testing Library.
Wallgau
force-pushed
the
add-slide-container
branch
from
36c8529 to
c2bfeaf
Compare
github-actions
bot
added
enhancement
github-actions
bot
added
enhancement
Adam-Aghili
left a comment
Adam-Aghili
left a comment
There was a problem hiding this comment.
LGTM! Thank you @Wallgau
Screen.Recording.2025-11-27.at.11.42.31.AM.mov
Remove NOTE comments that were added for review purposes. Clean up commented-out old implementation code.
github-actions
bot
added
enhancement
Revert to original PlaygroundButton and IOModal implementation. Remove sliding container code and restore original behavior.
github-actions
bot
added
enhancement
In the context of having a progessive refactor parallel to the existing one, This PR is adding a sliding container panel that slides in from the right side of the screen. The new implementation won't affect current implementation but will be used to continue implementing the new playground with small PR and progressive refactor, once everything is in then we can switch to new playground. IMPORTANT: Current implementation parts are commented out and slide container is put there for review and will be reverted to preserve current implementation when approved before merging to avoid affecting the current implementation.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.