feat: add chat-header feature and sliding container by Wallgau · Pull Request #11045 · langflow-ai/langflow

Wallgau · 2025-12-16T19:43:55Z

-Add sliding playground layout (SimpleSidebar + sliding container + store) and toolbar button integration to open it directly.

Add chat header/session components and hooks (SessionSelector, SessionRename, ChatHeaderTitle, use-get-flow-id, playgroundStore).
Legacy playground modal code kept commented with TODO; Messages remain commented out.

coderabbitai · 2025-12-16T19:44:01Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/playground-header

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

lucaseduoli

Just some code nit picks so that we can maintain a pattern with the existing codebase.

Functionally, the only animations missing are the sessions sidebar when enabling fullscreen, and the Playground button shrinking.

lucaseduoli · 2025-12-16T20:08:04Z

...c/components/core/playgroundComponent/chat-view/chat-header/components/session-more-menu.tsx

+    }
+    // Reset after a short delay to allow the select to close
+    setTimeout(() => {
+      setSelectValue("");


Is this going to be necessary?

lucaseduoli · 2025-12-16T20:08:41Z

...onents/core/playgroundComponent/sliding-container/components/flow-page-sliding-container.tsx

+import { useGetAddSessions } from "../../chat-view/chat-header/hooks/use-get-add-sessions";
+import { useSlidingContainerStore } from "../stores/sliding-container-store";
+
+const TRANSITION_MS = 300;


We should move this to the constants file

lucaseduoli · 2025-12-16T20:09:56Z

...onents/core/playgroundComponent/sliding-container/components/flow-page-sliding-container.tsx

+    if (transitionTimer.current) {
+      window.clearTimeout(transitionTimer.current);
+    }
+    transitionTimer.current = window.setTimeout(() => {


You should use framer motion transitions instead, so that this doesn't become a problem

lucaseduoli · 2025-12-16T20:10:46Z

...c/components/core/playgroundComponent/chat-view/chat-header/components/session-more-menu.tsx

+} from "@/components/ui/select-custom";
+import { cn } from "@/utils/utils";
+
+const MENU_ITEM_CLASS = "cursor-pointer px-3 py-2 focus:bg-muted";


You should use a custom class in applies.css instead

lucaseduoli · 2025-12-16T20:11:32Z

...mponents/core/playgroundComponent/sliding-container/components/playground-button-sliding.tsx

+}
+
+const STROKE_WIDTH = ENABLE_PUBLISH ? 2 : 1.5;
+const ICON_CLASS = "h-4 w-4 transition-all flex-shrink-0";


this should use a custom class as well

lucaseduoli · 2025-12-16T20:11:52Z

...mponents/core/playgroundComponent/sliding-container/components/playground-button-sliding.tsx

+  hasIO: boolean;
+}
+
+const STROKE_WIDTH = ENABLE_PUBLISH ? 2 : 1.5;


We can define just one stroke width for both

src/frontend/src/pages/FlowPage/index.tsx

…ound button to use global playground store and removed stale props; fixed simple-sidebar uncontrolled setOpen to handle function updaters; hardened session rename edit timing; added chat header utilities (session title, session management hooks/components, logs modal, sessions dropdown/sidebar); introduced sliding playground container and supporting hooks/stores/constants/styles; refreshed publish dropdown styling. FlowToolbar now drives playground visibility via usePlaygroundStore (isPlaygroundOpen / setPlaygroundOpen) and tracks analytics off the store state.

lucaseduoli

LGTM!

Wallgau requested a review from lucaseduoli December 16, 2025 19:44

github-actions bot added enhancement New feature or request and removed enhancement New feature or request labels Dec 16, 2025

lucaseduoli requested changes Dec 16, 2025

View reviewed changes

github-actions bot added enhancement New feature or request and removed enhancement New feature or request labels Dec 17, 2025

Wallgau requested a review from lucaseduoli December 17, 2025 20:50

github-actions bot added enhancement New feature or request and removed enhancement New feature or request labels Dec 18, 2025

Olfa Maslah and others added 9 commits December 18, 2025 12:15

remove redundant hook and use use-add-session etc intead

6e8ba44

add logic for the slide and header

91c10ea

logic for the slider and chat-header

2dde92d

some ui adjustments

6841a0c

remove inline style in session-logs

1d61e59

fix PR comment and remove slide-container and use SimpleSideBar instead

1039672

use AnimatedConditional for the header and flow-page-sliding-container

4a6cb8c

logic for the slider and chat-header

4be141e

Wallgau force-pushed the feat/playground-header branch from 07b77b8 to 4be141e Compare December 18, 2025 17:17

github-actions bot added enhancement New feature or request and removed enhancement New feature or request labels Dec 18, 2025

chore: run npm ci in autofix workflow

b8aebfe

github-actions bot added enhancement New feature or request and removed enhancement New feature or request labels Dec 18, 2025

github-actions bot added the enhancement New feature or request label Dec 21, 2025

Merge branch 'main' into feat/playground-header

aaa5c30

github-actions bot added enhancement New feature or request and removed enhancement New feature or request labels Dec 22, 2025

use token instead of inline style

e77549a