michael/merlyn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: long-prompt bubble flicker & See More collapse on streaming/scroll (#5473)

Browse Source 
fix ui flickering and truncatable prompt expansion bug

Co-authored-by: shatfield4 <seanhatfield5@gmail.com>
Co-authored-by: Timothy Carambat <rambat1010@gmail.com>
This commit is contained in:
Marcello Fitton 2026-04-21 14:48:44 -07:00 committed by GitHub
parent 38206a14b3
commit f4cb1ead4e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/HistoricalMessage/index.jsx
View File

@ -1,4 +1,4 @@
import React, { memo, useEffect, useRef, useState } from "react"; import React, { memo, useLayoutEffect, useRef, useState } from "react";
import { Info, Warning } from "@phosphor-icons/react"; import { Info, Warning } from "@phosphor-icons/react";
import Actions from "./Actions"; import Actions from "./Actions";
import renderMarkdown from "@/utils/chat/markdown"; import renderMarkdown from "@/utils/chat/markdown";
@ -22,7 +22,7 @@ import HistoricalOutputs from "./HistoricalOutputs";
import { openImageLightbox } from "@/components/ImageLightbox"; import { openImageLightbox } from "@/components/ImageLightbox";
const HistoricalMessage = ({ const HistoricalMessage = ({
uuid = v4(), uuid: uuidProp,
message, message,
role, role,
workspace, workspace,
@ -38,6 +38,10 @@ const HistoricalMessage = ({
metrics = {}, metrics = {},
outputs = [], outputs = [],
}) => { }) => {
// Freeze uuid on first render. User messages arrive without a uuid and this value
// is used as the wrapper div's `key` — a default param fallback would regenerate
// on every render and remount the subtree, wiping TruncatableContent state.
const [uuid] = useState(() => uuidProp ?? v4());
const { t } = useTranslation(); const { t } = useTranslation();
const { isEditing } = useEditMessage({ chatId, role }); const { isEditing } = useEditMessage({ chatId, role });
const { isDeleted, completeDelete, onEndAnimation } = useWatchDeleteMessage({ const { isDeleted, completeDelete, onEndAnimation } = useWatchDeleteMessage({
@ -238,7 +242,9 @@ function TruncatableContent({ children }) {
const [isOverflowing, setIsOverflowing] = useState(false); const [isOverflowing, setIsOverflowing] = useState(false);
const { t } = useTranslation(); const { t } = useTranslation();
useEffect(() => { // useLayoutEffect (not useEffect) so collapse applies before paint — avoids a
// one-frame flash of uncollapsed content on mount.
useLayoutEffect(() => {
if (contentRef.current) { if (contentRef.current) {
setIsOverflowing(contentRef.current.scrollHeight > 250); setIsOverflowing(contentRef.current.scrollHeight > 250);
} }