[Condense] Show indicator message when context is condensing

Author: canrobins13

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

@@ -32,7 +32,7 @@ import { Markdown } from "./Markdown"
 import { CommandExecution } from "./CommandExecution"
 import { CommandExecutionError } from "./CommandExecutionError"
 import { AutoApprovedRequestLimitWarning } from "./AutoApprovedRequestLimitWarning"
-import { ContextCondenseRow } from "./ContextCondenseRow"
+import { CondensingContextRow, ContextCondenseRow } from "./ContextCondenseRow"
 
 interface ChatRowProps {
 	message: ClineMessage
@@ -929,6 +929,9 @@ export const ChatRowContent = ({
 						/>
 					)
 				case "condense_context":
+					if (message.partial) {
+						return <CondensingContextRow />
+					}
 					return message.contextCondense ? <ContextCondenseRow {...message.contextCondense} /> : null
 				default:
 					return (

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

@@ -979,8 +979,18 @@ const ChatViewComponent: React.ForwardRefRenderFunction<ChatViewRef, ChatViewPro
 			result.push([...currentGroup])
 		}
 
+		if (isCondensing) {
+			// Show indicator after clicking condense button
+			result.push({
+				type: "say",
+				say: "condense_context",
+				ts: Date.now(),
+				partial: true,
+			})
+		}
+
 		return result
-	}, [visibleMessages])
+	}, [isCondensing, visibleMessages])
 
 	// scrolling
 

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

@@ -4,6 +4,7 @@ import { VSCodeBadge } from "@vscode/webview-ui-toolkit/react"
 
 import { ContextCondense } from "@roo/schemas"
 import { Markdown } from "./Markdown"
+import { ProgressIndicator } from "./ProgressIndicator"
 
 export const ContextCondenseRow = ({ cost, prevContextTokens, newContextTokens, summary }: ContextCondense) => {
 	const { t } = useTranslation()
@@ -14,6 +15,19 @@ export const ContextCondenseRow = ({ cost, prevContextTokens, newContextTokens,
 			<div
 				className="flex items-center justify-between cursor-pointer select-none"
 				onClick={() => setIsExpanded(!isExpanded)}>
+				<div
+					style={{
+						width: 16,
+						height: 16,
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+					}}>
+					<span
+						className={`codicon codicon-check`}
+						style={{ color: "var(--vscode-charts-green)", fontSize: 16, marginBottom: "-1.5px" }}
+					/>
+				</div>
 				<div className="flex items-center gap-2 flex-grow">
 					<span className="codicon codicon-compress text-blue-400" />
 					<span className="font-bold text-vscode-foreground">{t("chat:contextCondense.title")}</span>
@@ -33,3 +47,14 @@ export const ContextCondenseRow = ({ cost, prevContextTokens, newContextTokens,
 		</div>
 	)
 }
+
+export const CondensingContextRow = () => {
+	const { t } = useTranslation()
+	return (
+		<div className="flex items-center gap-2">
+			<ProgressIndicator />
+			<span className="codicon codicon-compress text-blue-400" />
+			<span className="font-bold text-vscode-foreground">{t("chat:contextCondense.condensing")}</span>
+		</div>
+	)
+}

webview-ui/src/i18n/locales/en/chat.json

@@ -132,6 +132,7 @@
 	},
 	"contextCondense": {
 		"title": "Context Condensed",
+		"condensing": "Condensing context...",
 		"tokens": "tokens"
 	},
 	"instructions": {