From 0f0ac4ad59cd72d8968b13e79d4e7ecf62479306 Mon Sep 17 00:00:00 2001 From: "devin-ai-integration[bot]" <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 24 Sep 2026 14:22:36 -0700 Subject: [PATCH] fix(playground): stop following streamed tokens, add jump to bottom button (#42968) * fix(playground): only auto-scroll the chat while pinned to the bottom Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> * fix(playground): keep scroll pin through programmatic scrolls Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> * fix(playground): stop forcing the chat to scroll to the bottom on every update Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> * test(playground): drop scroll pinning integration tests Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> * fix(playground): scroll only the chat pane, not the page, while streaming Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> * style(playground): format ChatUI with prettier Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> * feat(playground): stop following streamed tokens, add jump to bottom button Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> * fix(playground): jump to bottom lands on the last message, not the spacer Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> --------- Co-authored-by: ryan Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> --- .../chat_ui/ChatUI.integration.test.tsx | 54 ++++++++ .../playground/components/chat_ui/ChatUI.tsx | 124 ++++++++++-------- 2 files changed, 126 insertions(+), 52 deletions(-) diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.integration.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.integration.test.tsx index e79d382ae39..a713c581e47 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.integration.test.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.integration.test.tsx @@ -791,4 +791,58 @@ describe("ChatUI", () => { expect(screen.getByPlaceholderText("Select a Model")).toBeEnabled(); }); }); + + it("sends scroll the chat pane to the new message, tokens do not, jump button scrolls to bottom", async () => { + const scrollTopSetter = vi.spyOn(HTMLElement.prototype, "scrollTop", "set"); + let streamChunk: ((chunk: string, model?: string) => void) | undefined; + vi.mocked(makeOpenAIChatCompletionRequest).mockImplementation(async (...args) => { + streamChunk = args[1] as (chunk: string, model?: string) => void; + }); + + render( + , + ); + + await waitFor(() => { + expect(screen.getByText("Test Key")).toBeInTheDocument(); + }); + + await selectComboboxOption("Select an endpoint", "/v1/chat/completions"); + await selectComboboxOption("Select a Model", "Model 1"); + const messageInput = screen.getByPlaceholderText("Type your message... (Shift+Enter for new line)"); + await act(async () => { + fireEvent.change(messageInput, { target: { value: "hello" } }); + }); + await act(async () => { + fireEvent.keyDown(messageInput, { key: "Enter", code: "Enter" }); + }); + + await waitFor(() => { + expect(makeOpenAIChatCompletionRequest).toHaveBeenCalledTimes(1); + }); + + expect(scrollTopSetter).toHaveBeenCalled(); + scrollTopSetter.mockClear(); + + const scrollIntoViewMock = vi.mocked(Element.prototype.scrollIntoView); + const scrollIntoViewCallsBeforeTokens = scrollIntoViewMock.mock.calls.length; + + await act(async () => { + streamChunk?.("Hello world", "Model 1"); + }); + + expect(scrollTopSetter).not.toHaveBeenCalled(); + expect(scrollIntoViewMock.mock.calls.length).toBe(scrollIntoViewCallsBeforeTokens); + + const user = userEvent.setup(); + await user.click(screen.getByRole("button", { name: "Jump to bottom" })); + + expect(scrollTopSetter).toHaveBeenCalled(); + }); }); diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx index ae0fabe5ef2..a87214720ef 100644 --- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx +++ b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/chat_ui/ChatUI.tsx @@ -1,6 +1,7 @@ "use client"; import { + ArrowDown, Bot, Code2, Database, @@ -287,7 +288,7 @@ const ChatUI: React.FC = ({ // Code Interpreter state (using custom hook) const codeInterpreter = useCodeInterpreter(); - const chatEndRef = useRef(null); + const chatScrollRef = useRef(null); // Fetch MCP servers and toolsets const loadMCPServers = async () => { @@ -516,18 +517,20 @@ const ChatUI: React.FC = ({ }, [accessToken, apiKeySource, apiKey, endpointType, customProxyBaseUrl, selectedAgent]); useEffect(() => { - // Scroll to the bottom of the chat whenever chatHistory updates - if (chatEndRef.current) { - // Add a small delay to ensure content is rendered - setTimeout(() => { - chatEndRef.current?.scrollIntoView({ - behavior: "smooth", - block: "end", // Keep the scroll position at the end - }); - }, 100); - } + const el = chatScrollRef.current; + if (!el || chatHistory.at(-1)?.role !== "user") return; + const userMessages = el.querySelectorAll('[data-role="user"]'); + const last = userMessages[userMessages.length - 1]; + if (last) el.scrollTop = last.offsetTop; }, [chatHistory]); + const scrollToLastMessage = () => { + const el = chatScrollRef.current; + const messages = el?.querySelectorAll("[data-role]"); + const last = messages?.[messages.length - 1]; + if (el && last) el.scrollTop = last.offsetTop + last.offsetHeight - el.clientHeight; + }; + const handleCancelRequest = () => { if (abortControllerRef.current) { abortControllerRef.current.abort(); @@ -1801,51 +1804,68 @@ const ChatUI: React.FC = ({ )} -
- {chatHistory.length === 0 && ( -
-
- )} - - {chatHistory.map((message, index) => ( -
- -
- ))} - - {isLoading && - mcpEvents.length > 0 && - (endpointType === EndpointType.RESPONSES || endpointType === EndpointType.CHAT) && - chatHistory.length > 0 && - chatHistory[chatHistory.length - 1].role === "user" && ( -
-
-
-
-
- Assistant -
- -
+
+
+ {chatHistory.length === 0 && ( +
+
)} - {isLoading && ( -
- -
+ {chatHistory.map((message, index) => ( +
+ +
+ ))} + + {isLoading && + mcpEvents.length > 0 && + (endpointType === EndpointType.RESPONSES || endpointType === EndpointType.CHAT) && + chatHistory.length > 0 && + chatHistory[chatHistory.length - 1].role === "user" && ( +
+
+
+
+
+ Assistant +
+ +
+
+ )} + + {isLoading && ( +
+ +
+ )} + {chatHistory.length > 0 &&
} +
+ {chatHistory.length > 0 && ( + )} -