fix: scroll to edit area when editing long historical messages

- Added ref to track edit area element
- Added useEffect to scroll into view when entering edit mode
- Uses smooth scrolling with center block positioning for better UX

Fixes #8724

webview-ui/src/components/chat/ChatRow.tsx

@@ -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(() => {
@@ -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])
+
 	// Handle cancel edit
 	const handleCancelEdit = useCallback(() => {
 		setIsEditing(false)
@@ -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