From 905ec5ea50782df4f1633b3d534bbeb4a13e3997 Mon Sep 17 00:00:00 2001
From: Saoud Rizwan <7799382+saoudrizwan@users.noreply.github.com>
Date: Tue, 1 Oct 2024 22:09:07 -0400
Subject: [PATCH] Add isLoading to code accordian

---
 webview-ui/src/components/chat/ChatRow.tsx    |  2 ++
 webview-ui/src/components/chat/ChatView.tsx   | 29 +++++++------------
 .../src/components/common/CodeAccordian.tsx   |  8 +++--
 3 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/webview-ui/src/components/chat/ChatRow.tsx b/webview-ui/src/components/chat/ChatRow.tsx
index ca218b8..6ca5456 100644
--- a/webview-ui/src/components/chat/ChatRow.tsx
+++ b/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}
diff --git a/webview-ui/src/components/chat/ChatView.tsx b/webview-ui/src/components/chat/ChatView.tsx
index c13733e..da44989 100644
--- a/webview-ui/src/components/chat/ChatView.tsx
+++ b/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) {
-			// NOTE: scroll to bottom may not work if you use margin, see virtuoso's troubleshooting
-			// scrollToBottomSmooth()
-			if (isNewMessagePartial) {
-				// 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)
+			if (isAtBottomRef.current && lastMsgIndexScrolledOn.current !== lastMsgIndex) {
+				scrollToBottomSmooth()
+				// 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
+				// return () => clearTimeout(timer) // don't NEED to clear this and in fact shouldnt in this case
+				lastMsgIndexScrolledOn.current = lastMsgIndex
 			}
-			// 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
-			// return () => clearTimeout(timer) // don't NEED to clear this and in fact shouldnt in this case
-			lastMsgIndexScrolledOn.current = lastMsgIndex
-		}
-	}, [visibleMessages, scrollToBottomSmooth, scrollToBottomAuto])
+		}, 50)
+		return () => clearTimeout(timer)
+	}, [visibleMessages.length, scrollToBottomSmooth, scrollToBottomAuto])
 
 	// scroll to bottom if task changes
 	// (this gets called when messages changes, so we use ref to ts to detect new task)
diff --git a/webview-ui/src/components/common/CodeAccordian.tsx b/webview-ui/src/components/common/CodeAccordian.tsx
index 2875782..eb2bd58 100644
--- a/webview-ui/src/components/common/CodeAccordian.tsx
+++ b/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