Skip to content

fix: scroll to edit area when editing long historical messages #8725

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 8 commits into from
Closed

fix: scroll to edit area when editing long historical messages #8725

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b28edab
fix: scroll to edit area when editing long historical messages
roomote Oct 18, 2025
e0c5248
fix(chat): ensure edit area scrolls into view and clear timeout to av…
roomote Oct 18, 2025
9759978
fix(chat): allow editing historical messages while streaming and prev…
roomote Oct 18, 2025
a7f2c0a
fix(chat): focus edit textarea before scrolling to ensure edit mode i…
roomote Oct 18, 2025
823ab00
fix(webview-ui): ensure textarea focus then frame-loop scrollIntoView…
roomote Oct 18, 2025
03ac80f
fix(webview-ui): preserve edit mode across virtualization; focus text…
roomote Oct 18, 2025
15932f9
fix(webview-ui): preserve edit content after virtualization and pre-s…
roomote Oct 18, 2025
9059766
fix(webview-ui): robustly center edit area when editing long historic…
roomote Oct 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 15 additions & 0 deletions webview-ui/src/components/chat/ChatRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,7 @@ export const ChatRowContent = ({
const [editedContent, setEditedContent] = useState("")
const [editMode, setEditMode] = useState<Mode>(mode || "code")
const [editImages, setEditImages] = useState<string[]>([])
const editAreaRef = useRef<HTMLDivElement>(null)

// Handle message events for image selection during edit mode
useEffect(() => {
Expand Down Expand Up @@ -165,6 +166,19 @@ export const ChatRowContent = ({
// No need to notify the backend
}, [message.text, message.images, mode])

// Scroll to edit area when entering edit mode
useEffect(() => {
if (isEditing && editAreaRef.current) {
// Use a small delay to ensure the DOM has updated
setTimeout(() => {
editAreaRef.current?.scrollIntoView({
behavior: "smooth",
block: "center",
})
}, 100)
}
}, [isEditing])
Copy link
Author

@roomote roomote bot Oct 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The setTimeout should be cleaned up to prevent potential memory leaks and avoid attempting to scroll on an unmounted component. If isEditing changes back to false or the component unmounts before the 100ms timeout completes, the callback will still execute. Add a cleanup function that clears the timeout:

Suggested change
// Scroll to edit area when entering edit mode
useEffect(() => {
if (isEditing && editAreaRef.current) {
// Use a small delay to ensure the DOM has updated
setTimeout(() => {
editAreaRef.current?.scrollIntoView({
behavior: "smooth",
block: "center",
})
}, 100)
}
}, [isEditing])
// Scroll to edit area when entering edit mode
useEffect(() => {
if (isEditing && editAreaRef.current) {
// Use a small delay to ensure the DOM has updated
const timeoutId = setTimeout(() => {
editAreaRef.current?.scrollIntoView({
behavior: "smooth",
block: "center",
})
}, 100)
return () => clearTimeout(timeoutId)
}
}, [isEditing])


// Handle cancel edit
const handleCancelEdit = useCallback(() => {
setIsEditing(false)
Expand Down Expand Up @@ -1110,6 +1124,7 @@ export const ChatRowContent = ({
<span style={{ fontWeight: "bold" }}>{t("chat:feedback.youSaid")}</span>
</div>
<div
ref={editAreaRef}
className={cn(
"ml-6 border rounded-sm overflow-hidden whitespace-pre-wrap",
isEditing
Expand Down
Loading