[Condense] Show indicator message when context is condensing (#3765)

* [Condense] Show indicator message when context is condensing

* changeset

* translations

.changeset/four-emus-invite.md

@@ -0,0 +1,5 @@
+---
+"roo-cline": patch
+---
+
+Add a UI indicator while the context is condensing

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/ca/chat.json

@@ -201,6 +201,7 @@
 	},
 	"contextCondense": {
 		"title": "Context condensat",
+		"condensing": "Condensant context...",
 		"tokens": "tokens"
 	},
 	"followUpSuggest": {

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

@@ -201,6 +201,7 @@
 	},
 	"contextCondense": {
 		"title": "Kontext komprimiert",
+		"condensing": "Kontext wird komprimiert...",
 		"tokens": "Tokens"
 	},
 	"followUpSuggest": {

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

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

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

@@ -201,6 +201,7 @@
 	},
 	"contextCondense": {
 		"title": "Contexto condensado",
+		"condensing": "Condensando contexto...",
 		"tokens": "tokens"
 	},
 	"followUpSuggest": {

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

@@ -201,6 +201,7 @@
 	},
 	"contextCondense": {
 		"title": "Contexte condensé",
+		"condensing": "Condensation du contexte...",
 		"tokens": "tokens"
 	},
 	"followUpSuggest": {

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

@@ -201,6 +201,7 @@
 	},
 	"contextCondense": {
 		"title": "संदर्भ संक्षिप्त किया गया",
+		"condensing": "संदर्भ संघनित कर रहा है...",
 		"tokens": "टोकन"
 	},
 	"followUpSuggest": {

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

@@ -201,6 +201,7 @@
 	},
 	"contextCondense": {
 		"title": "Contesto condensato",
+		"condensing": "Condensazione del contesto...",
 		"tokens": "token"
 	},
 	"followUpSuggest": {

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

@@ -201,6 +201,7 @@
 	},
 	"contextCondense": {
 		"title": "コンテキスト要約",
+		"condensing": "コンテキストを圧縮中...",
 		"tokens": "トークン"
 	},
 	"followUpSuggest": {

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

@@ -201,6 +201,7 @@
 	},
 	"contextCondense": {
 		"title": "컨텍스트 요약됨",
+		"condensing": "컨텍스트 압축 중...",
 		"tokens": "토큰"
 	},
 	"followUpSuggest": {

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

@@ -211,6 +211,7 @@
 	},
 	"contextCondense": {
 		"title": "Context samengevat",
+		"condensing": "Context aan het samenvatten...",
 		"tokens": "tokens"
 	},
 	"followUpSuggest": {

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

@@ -201,6 +201,7 @@
 	},
 	"contextCondense": {
 		"title": "Kontekst skondensowany",
+		"condensing": "Kondensowanie kontekstu...",
 		"tokens": "tokeny"
 	},
 	"followUpSuggest": {

webview-ui/src/i18n/locales/pt-BR/chat.json

@@ -201,6 +201,7 @@
 	},
 	"contextCondense": {
 		"title": "Contexto condensado",
+		"condensing": "Condensando contexto...",
 		"tokens": "tokens"
 	},
 	"followUpSuggest": {

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

@@ -211,6 +211,7 @@
 	},
 	"contextCondense": {
 		"title": "Контекст сжат",
+		"condensing": "Сжатие контекста...",
 		"tokens": "токены"
 	},
 	"followUpSuggest": {

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

@@ -201,6 +201,7 @@
 	},
 	"contextCondense": {
 		"title": "Bağlam Özetlendi",
+		"condensing": "Bağlam yoğunlaştırılıyor...",
 		"tokens": "token"
 	},
 	"followUpSuggest": {

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

@@ -201,6 +201,7 @@
 	},
 	"contextCondense": {
 		"title": "Ngữ cảnh đã tóm tắt",
+		"condensing": "Đang cô đọng ngữ cảnh...",
 		"tokens": "token"
 	},
 	"followUpSuggest": {

webview-ui/src/i18n/locales/zh-CN/chat.json

@@ -201,6 +201,7 @@
 	},
 	"contextCondense": {
 		"title": "上下文已压缩",
+		"condensing": "正在压缩上下文...",
 		"tokens": "tokens"
 	},
 	"followUpSuggest": {

webview-ui/src/i18n/locales/zh-TW/chat.json

@@ -201,6 +201,7 @@
 	},
 	"contextCondense": {
 		"title": "上下文已壓縮",
+		"condensing": "正在壓縮上下文...",
 		"tokens": "tokens"
 	},
 	"followUpSuggest": {