Replace react-scroll with custom scroll animation

webview-ui/package-lock.json

@@ -19,7 +19,6 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-scripts": "5.0.1",
-        "react-scroll": "^1.9.0",
         "react-syntax-highlighter": "^15.5.0",
         "react-text-truncate": "^0.19.0",
         "react-textarea-autosize": "^8.5.3",
@@ -13515,12 +13514,6 @@
       "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
       "license": "MIT"
     },
-    "node_modules/lodash.throttle": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
-      "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==",
-      "license": "MIT"
-    },
     "node_modules/lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -16494,20 +16487,6 @@
         }
       }
     },
-    "node_modules/react-scroll": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.9.0.tgz",
-      "integrity": "sha512-mamNcaX9Ng+JeSbBu97nWwRhYvL2oba+xR2GxvyXsbDeGP+gkYIKZ+aDMMj/n20TbV9SCWm/H7nyuNTSiXA6yA==",
-      "license": "MIT",
-      "dependencies": {
-        "lodash.throttle": "^4.1.1",
-        "prop-types": "^15.7.2"
-      },
-      "peerDependencies": {
-        "react": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^15.5.4 || ^16.0.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/react-syntax-highlighter": {
       "version": "15.5.0",
       "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-15.5.0.tgz",

webview-ui/package.json

@@ -14,7 +14,6 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
-    "react-scroll": "^1.9.0",
     "react-syntax-highlighter": "^15.5.0",
     "react-text-truncate": "^0.19.0",
     "react-textarea-autosize": "^8.5.3",

webview-ui/src/components/ChatView.tsx

@@ -1,17 +1,16 @@
 import { ClaudeAsk, ClaudeMessage, ExtensionMessage } from "@shared/ExtensionMessage"
 import { VSCodeButton, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 import { KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { animateScroll as scroll } from "react-scroll"
+import vsDarkPlus from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus"
 import DynamicTextArea from "react-textarea-autosize"
+import { useEvent } from "react-use"
 import { combineApiRequests } from "../utilities/combineApiRequests"
 import { combineCommandSequences } from "../utilities/combineCommandSequences"
 import { getApiMetrics } from "../utilities/getApiMetrics"
+import { getSyntaxHighlighterStyleFromTheme } from "../utilities/getSyntaxHighlighterStyleFromTheme"
 import { vscode } from "../utilities/vscode"
 import ChatRow from "./ChatRow"
 import TaskHeader from "./TaskHeader"
-import { getSyntaxHighlighterStyleFromTheme } from "../utilities/getSyntaxHighlighterStyleFromTheme"
-import vsDarkPlus from "react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus"
-import { useEvent } from "react-use"
 
 interface ChatViewProps {
 	messages: ClaudeMessage[]
@@ -40,6 +39,8 @@ const ChatView = ({ messages, isHidden, vscodeThemeName }: ChatViewProps) => {
 
 	const [syntaxHighlighterStyle, setSyntaxHighlighterStyle] = useState(vsDarkPlus)
 
+	const chatContainerRef = useRef<HTMLDivElement>(null)
+
 	useEffect(() => {
 		if (!vscodeThemeName) return
 		const theme = getSyntaxHighlighterStyleFromTheme(vscodeThemeName)
@@ -49,12 +50,13 @@ const ChatView = ({ messages, isHidden, vscodeThemeName }: ChatViewProps) => {
 	}, [vscodeThemeName])
 
 	const scrollToBottom = (instant: boolean = false) => {
-		const options = {
+		if (chatContainerRef.current) {
-			containerId: "chat-view-container",
+			const scrollOptions: ScrollToOptions = {
-			duration: instant ? 0 : 500,
+				top: chatContainerRef.current.scrollHeight,
-			smooth: instant ? false : "easeOutQuint",
+				behavior: instant ? "auto" : "smooth",
+			}
+			chatContainerRef.current.scrollTo(scrollOptions)
 		}
-		scroll.scrollToBottom(options)
 	}
 
 	// scroll to bottom when new message is added
@@ -69,9 +71,7 @@ const ChatView = ({ messages, isHidden, vscodeThemeName }: ChatViewProps) => {
 		const timer = setTimeout(() => {
 			scrollToBottom()
 		}, 0)
-		return () => {
+		return () => clearTimeout(timer)
-			clearTimeout(timer)
-		}
 	}, [visibleMessages])
 
 	useEffect(() => {
@@ -328,7 +328,7 @@ const ChatView = ({ messages, isHidden, vscodeThemeName }: ChatViewProps) => {
 				</div>
 			)}
 			<div
-				id="chat-view-container"
+				ref={chatContainerRef}
 				className="scrollable"
 				style={{
 					flexGrow: 1,