pengjunjie/langflow
1
0
Fork 1
mirror of https://github.com/langflow-ai/langflow.git synced 2026-07-24 17:37:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: playground does not scroll down to the latest user message upon sending (Regression) (#12006)

Browse Source 
* fixes scroll is on input message

* feat: re-engage Safari sticky scroll mode when user sends message

Add custom event 'langflow-scroll-to-bottom' to force SafariScrollFix back into sticky mode when user sends a new message. This ensures the chat scrolls to bottom even if user had scrolled up, fixing behavior where Safari's scroll fix would remain disengaged after manual scrolling.
This commit is contained in:
Deon Sanchez
2026-03-04 10:44:22 -07:00
committed by GitHub
parent 7e9b73a066
commit f37b250479
2 changed files with 27 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/frontend/src/components/common/safari-scroll-fix.tsx
View File

@ -86,10 +86,16 @@ function SafariScrollFixInner() {
}
};
const onForceSticky = () => {
stickyRef.current = true;
lastKnownScrollTop.current = scrollEl.scrollTop;
};
scrollEl.addEventListener("wheel", onWheel, { passive: true });
scrollEl.addEventListener("touchstart", onTouchStart, { passive: true });
scrollEl.addEventListener("touchmove", onTouchMove, { passive: true });
scrollEl.addEventListener("scroll", onScroll, { passive: true });
window.addEventListener("langflow-scroll-to-bottom", onForceSticky);
let rafId: ReturnType<typeof requestAnimationFrame>;
const tick = () => {
@ -120,6 +126,7 @@ function SafariScrollFixInner() {
scrollEl.removeEventListener("touchstart", onTouchStart);
scrollEl.removeEventListener("touchmove", onTouchMove);
scrollEl.removeEventListener("scroll", onScroll);
window.removeEventListener("langflow-scroll-to-bottom", onForceSticky);
cancelAnimationFrame(rafId);
};
}, [scrollRef, stopScroll]);

24
src/frontend/src/components/core/playgroundComponent/sliding-container/components/flow-page-sliding-container.tsx
View File

@ -1,5 +1,5 @@
import { useEffect, useMemo, useState } from "react";
import { StickToBottom } from "use-stick-to-bottom";
import { useEffect, useMemo, useRef, useState } from "react";
import { StickToBottom, useStickToBottom } from "use-stick-to-bottom";
import { SafariScrollFix } from "@/components/common/safari-scroll-fix";
import { ChatHeader } from "@/components/core/playgroundComponent/chat-view/chat-header/components/chat-header";
import { ChatSidebar } from "@/components/core/playgroundComponent/chat-view/chat-header/components/chat-sidebar";
@ -97,6 +97,23 @@ export function FlowPageSlidingContainerContent({
}
}, [chatHistory.length, isBuilding, inputs, nodes, setChatValueStore]);
const stickyInstance = useStickToBottom({
resize: "instant",
initial: "instant",
});
const prevChatLenRef = useRef(chatHistory.length);
useEffect(() => {
if (chatHistory.length > prevChatLenRef.current) {
const lastMsg = chatHistory[chatHistory.length - 1];
if (lastMsg?.isSend) {
window.dispatchEvent(new Event("langflow-scroll-to-bottom"));
stickyInstance.scrollToBottom("smooth");
}
}
prevChatLenRef.current = chatHistory.length;
}, [chatHistory, stickyInstance]);
const { dragOver, dragEnter, dragLeave } = useDragAndDrop(
setIsDragging,
true,
@ -198,9 +215,8 @@ export function FlowPageSlidingContainerContent({
/>
<div className="flex-1 flex flex-col min-h-0 overflow-hidden playground-messages-wrapper">
<StickToBottom
instance={stickyInstance}
className="flex-1 min-h-0 overflow-hidden"
resize="instant"
initial="instant"
>
<StickToBottom.Content className="flex flex-col min-h-full overflow-x-hidden ">
<div