Add isLoading to code accordian

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

@@ -217,6 +217,7 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 							<span style={{ fontWeight: "bold" }}>Claude wants to edit this file:</span>
 						</div>
 						<CodeAccordian
+							isLoading={message.partial}
 							diff={tool.diff!}
 							path={tool.path!}
 							isExpanded={isExpanded}
@@ -232,6 +233,7 @@ const ChatRowContent = ({ message, isExpanded, onToggleExpand, lastModifiedMessa
 							<span style={{ fontWeight: "bold" }}>Claude wants to create a new file:</span>
 						</div>
 						<CodeAccordian
+							isLoading={message.partial}
 							code={tool.content!}
 							path={tool.path!}
 							isExpanded={isExpanded}

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

@@ -480,26 +480,19 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 
 	// only scroll to bottom smooth if not partial
 	useEffect(() => {
-		const lastMsgIndex = visibleMessages.length - 1
+		// We use a setTimeout to ensure new content is rendered before checking isbottom, virtuoso does not update it immediately after visiblemessages changes
+		const timer = setTimeout(() => {
+			const lastMsgIndex = visibleMessages.length - 1
 
-		const isNewMessagePartial = visibleMessages.at(lastMsgIndex)?.partial === true
+			if (isAtBottomRef.current && lastMsgIndexScrolledOn.current !== lastMsgIndex) {
-		if (isAtBottomRef.current && lastMsgIndexScrolledOn.current !== lastMsgIndex) {
+				scrollToBottomSmooth()
-			// NOTE: scroll to bottom may not work if you use margin, see virtuoso's troubleshooting
+				// interesting bug worth remembering: i would make a timeout here and return cleartimeout, but it kept getting cleared bc visiblemessages kept changing. even though the cleanup was in the conditional, it still gets called wheneve this effect is used
-			// scrollToBottomSmooth()
+				// return () => clearTimeout(timer) // don't NEED to clear this and in fact shouldnt in this case
-			if (isNewMessagePartial) {
+				lastMsgIndexScrolledOn.current = lastMsgIndex
-				// needs to be instant so the smooth animation doesnt coincide with the rest of the partial streaming scrolls
-				scrollToBottomAuto()
-			} else {
-				// We use a setTimeout to ensure new content is rendered before scrolling to the bottom. virtuoso's followOutput would scroll to the bottom before the new content could render.
-				setTimeout(() => {
-					scrollToBottomSmooth()
-				}, 100)
 			}
-			// interesting bug worth remembering: i would make a timeout here and return cleartimeout, but it kept getting cleared bc visiblemessages kept changing. even though the cleanup was in the conditional, it still gets called wheneve this effect is used
+		}, 50)
-			// return () => clearTimeout(timer) // don't NEED to clear this and in fact shouldnt in this case
+		return () => clearTimeout(timer)
-			lastMsgIndexScrolledOn.current = lastMsgIndex
+	}, [visibleMessages.length, scrollToBottomSmooth, scrollToBottomAuto])
-		}
-	}, [visibleMessages, scrollToBottomSmooth, scrollToBottomAuto])
 
 	// scroll to bottom if task changes
 	// (this gets called when messages changes, so we use ref to ts to detect new task)

webview-ui/src/components/common/CodeAccordian.tsx

@@ -11,6 +11,7 @@ interface CodeAccordianProps {
 	isConsoleLogs?: boolean
 	isExpanded: boolean
 	onToggleExpand: () => void
+	isLoading?: boolean
 }
 
 /*
@@ -30,6 +31,7 @@ const CodeAccordian = ({
 	isConsoleLogs,
 	isExpanded,
 	onToggleExpand,
+	isLoading,
 }: CodeAccordianProps) => {
 	const inferredLanguage = useMemo(
 		() => code && (language ?? (path ? getLanguageFromPath(path) : undefined)),
@@ -51,13 +53,15 @@ const CodeAccordian = ({
 						display: "flex",
 						alignItems: "center",
 						padding: "9px 10px",
-						cursor: "pointer",
+						cursor: isLoading ? "wait" : "pointer",
+						opacity: isLoading ? 0.7 : 1,
+						// pointerEvents: isLoading ? "none" : "auto",
 						userSelect: "none",
 						WebkitUserSelect: "none",
 						MozUserSelect: "none",
 						msUserSelect: "none",
 					}}
-					onClick={onToggleExpand}>
+					onClick={isLoading ? undefined : onToggleExpand}>
 					{isFeedback || isConsoleLogs ? (
 						<div style={{ display: "flex", alignItems: "center" }}>
 							<span