Internationalize the BrowserSessionRow (#1797)

Author: mrubens

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

@@ -12,6 +12,7 @@ import { vscode } from "../../utils/vscode"
 import CodeBlock, { CODE_BLOCK_BG_COLOR } from "../common/CodeBlock"
 import { ChatRowContent, ProgressIndicator } from "./ChatRow"
 import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
+import { useTranslation } from "react-i18next"
 
 interface BrowserSessionRowProps {
 	messages: ClineMessage[]
@@ -25,6 +26,7 @@ interface BrowserSessionRowProps {
 
 const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 	const { messages, isLast, onHeightChange, lastModifiedMessage } = props
+	const { t } = useTranslation()
 	const prevHeightRef = useRef(0)
 	const [maxActionHeight, setMaxActionHeight] = useState(0)
 	const [consoleLogsExpanded, setConsoleLogsExpanded] = useState(false)
@@ -242,7 +244,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 						style={{ color: "var(--vscode-foreground)", marginBottom: "-1.5px" }}></span>
 				)}
 				<span style={{ fontWeight: "bold" }}>
-					<>Roo wants to use the browser:</>
+					<>{t("chat:browser.rooWantsToUse")}</>
 				</span>
 			</div>
 			<div
@@ -295,7 +297,7 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 					{displayState.screenshot ? (
 						<img
 							src={displayState.screenshot}
-							alt="Browser screenshot"
+							alt={t("chat:browser.screenshot")}
 							style={{
 								position: "absolute",
 								top: 0,
@@ -353,10 +355,12 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 							padding: `9px 8px ${consoleLogsExpanded ? 0 : 8}px 8px`,
 						}}>
 						<span className={`codicon codicon-chevron-${consoleLogsExpanded ? "down" : "right"}`}></span>
-						<span style={{ fontSize: "0.8em" }}>Console Logs</span>
+						<span style={{ fontSize: "0.8em" }}>{t("chat:browser.consoleLogs")}</span>
 					</div>
 					{consoleLogsExpanded && (
-						<CodeBlock source={`${"```"}shell\n${displayState.consoleLogs || "(No new logs)"}\n${"```"}`} />
+						<CodeBlock
+							source={`${"```"}shell\n${displayState.consoleLogs || t("chat:browser.noNewLogs")}\n${"```"}`}
+						/>
 					)}
 				</div>
 			</div>
@@ -376,18 +380,18 @@ const BrowserSessionRow = memo((props: BrowserSessionRowProps) => {
 						borderTop: "1px solid var(--vscode-editorGroup-border)",
 					}}>
 					<div>
-						Step {currentPageIndex + 1} of {pages.length}
+						{t("chat:browser.navigation.step", { current: currentPageIndex + 1, total: pages.length })}
 					</div>
 					<div style={{ display: "flex", gap: "4px" }}>
 						<VSCodeButton
 							disabled={currentPageIndex === 0 || isBrowsing}
 							onClick={() => setCurrentPageIndex((i) => i - 1)}>
-							Previous
+							{t("chat:browser.navigation.previous")}
 						</VSCodeButton>
 						<VSCodeButton
 							disabled={currentPageIndex === pages.length - 1 || isBrowsing}
 							onClick={() => setCurrentPageIndex((i) => i + 1)}>
-							Next
+							{t("chat:browser.navigation.next")}
 						</VSCodeButton>
 					</div>
 				</div>
@@ -424,6 +428,7 @@ const BrowserSessionRowContent = ({
 	setMaxActionHeight,
 	isStreaming,
 }: BrowserSessionRowContentProps) => {
+	const { t } = useTranslation()
 	const headerStyle: React.CSSProperties = {
 		display: "flex",
 		alignItems: "center",
@@ -474,7 +479,7 @@ const BrowserSessionRowContent = ({
 					return (
 						<>
 							<div style={headerStyle}>
-								<span style={{ fontWeight: "bold" }}>Browser Session Started</span>
+								<span style={{ fontWeight: "bold" }}>{t("chat:browser.sessionStarted")}</span>
 							</div>
 							<div
 								style={{
@@ -503,20 +508,21 @@ const BrowserActionBox = ({
 	coordinate?: string
 	text?: string
 }) => {
+	const { t } = useTranslation()
 	const getBrowserActionText = (action: BrowserAction, coordinate?: string, text?: string) => {
 		switch (action) {
 			case "launch":
-				return `Launch browser at ${text}`
+				return t("chat:browser.actions.launch", { url: text })
 			case "click":
-				return `Click (${coordinate?.replace(",", ", ")})`
+				return t("chat:browser.actions.click", { coordinate: coordinate?.replace(",", ", ") })
 			case "type":
-				return `Type "${text}"`
+				return t("chat:browser.actions.type", { text })
 			case "scroll_down":
-				return "Scroll down"
+				return t("chat:browser.actions.scrollDown")
 			case "scroll_up":
-				return "Scroll up"
+				return t("chat:browser.actions.scrollUp")
 			case "close":
-				return "Close browser"
+				return t("chat:browser.actions.close")
 			default:
 				return action
 		}
@@ -541,7 +547,7 @@ const BrowserActionBox = ({
 							whiteSpace: "normal",
 							wordBreak: "break-word",
 						}}>
-						<span style={{ fontWeight: 500 }}>Browse Action: </span>
+						<span style={{ fontWeight: 500 }}>{t("chat:browser.actions.title")}</span>
 						{getBrowserActionText(action, coordinate, text)}
 					</span>
 				</div>
@@ -551,6 +557,7 @@ const BrowserActionBox = ({
 }
 
 const BrowserCursor: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
+	const { t } = useTranslation()
 	// (can't use svgs in vsc extensions)
 	const cursorBase64 =
 		"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAYCAYAAAAVibZIAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAFaADAAQAAAABAAAAGAAAAADwi9a/AAADGElEQVQ4EZ2VbUiTURTH772be/PxZdsz3cZwC4RVaB8SAjMpxQwSWZbQG/TFkN7oW1Df+h6IRV9C+hCpKUSIZUXOfGM5tAKViijFFEyfZ7Ol29S1Pbdzl8Uw9+aBu91zzv3/nt17zt2DEZjBYOAkKrtFMXIghAWM8U2vMN/FctsxGRMpM7NbEEYNMM2CYUSInlJx3OpawO9i+XSNQYkmk2uFb9njzkcfVSr1p/GJiQKMULVaw2WuBv296UKRxWJR6wxGCmM1EAhSNppv33GBH9qI32cPTAtss9lUm6EM3N7R+RbigT+5/CeosFCZKpjEW+iorS1pb30wDUXzQfHqtD/9L3ieZ2ee1OJCmbL8QHnRs+4uj0wmW4QzrpCwvJ8zGg3JqAmhTLynuLiwv8/5KyND8Q3cEkUEDWu15oJE4KRQJt5hs1rcriGNRqP+DK4dyyWXXm/aFQ+cEpSJ8/LyDGPuEZNOmzsOroUSOqzXG/dtBU4ZysTZYKNut91sNo2Cq6cE9enz86s2g9OCMrFSqVC5hgb32u072W3jKMU90Hb1seC0oUwsB+t92bO/rKx0EFGkgFCnjjc1/gVvC8rE0L+4o63t4InjxwbAJQjTe3qD8QrLkXA4DC24fWtuajp06cLFYSBIFKGmXKPRRmAnME9sPt+yLwIWb9WN69fKoTneQz4Dh2mpPNkvfeV0jjecb9wNAkwIEVQq5VJOds4Kb+DXoAsiVquVwI1Dougpij6UyGYx+5cKroeDEFibm5lWRRMbH1+npmYrq6qhwlQHIbajZEf1fElcqGGFpGg9HMuKzpfBjhytCTMgkJ56RX09zy/ysENTBElmjIgJnmNChJqohDVQqpEfwkILE8v/o0GAnV9F1eEvofVQCbiTBEXOIPQh5PGgefDZeAcjrpGZjULBr/m3tZOnz7oEQWRAQZLjWlEU/XEJWySiILgRc5Cz1DkcAyuBFcnpfF0JiXWKpcolQXizhS5hKAqFpr0MVbgbuxJ6+5xX+P4wNpbqPPrugZfbmIbLmgQR3Aw8QSi66hUXulOFbF73GxqjE5BNXWNeAAAAAElFTkSuQmCC"
@@ -563,8 +570,8 @@ const BrowserCursor: React.FC<{ style?: React.CSSProperties }> = ({ style }) =>
 				height: "22px",
 				...style,
 			}}
-			alt="cursor"
-			aria-label="cursor"
+			alt={t("chat:browser.cursor")}
+			aria-label={t("chat:browser.cursor")}
 		/>
 	)
 }

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

@@ -211,5 +211,27 @@
 		"feature5": "Selecció de proveïdor OpenRouter",
 		"hideButton": "Amagar anunci",
 		"detailsDiscussLinks": "Obté més detalls i participa a <discordLink>Discord</discordLink> i <redditLink>Reddit</redditLink> 🚀"
+	},
+	"browser": {
+		"rooWantsToUse": "Roo vol utilitzar el navegador:",
+		"consoleLogs": "Registres de consola",
+		"noNewLogs": "(Cap registre nou)",
+		"screenshot": "Captura de pantalla del navegador",
+		"cursor": "cursor",
+		"navigation": {
+			"step": "Pas {{current}} de {{total}}",
+			"previous": "Anterior",
+			"next": "Següent"
+		},
+		"sessionStarted": "Sessió de navegador iniciada",
+		"actions": {
+			"title": "Acció de navegació: ",
+			"launch": "Iniciar navegador a {{url}}",
+			"click": "Clic ({{coordinate}})",
+			"type": "Escriure \"{{text}}\"",
+			"scrollDown": "Desplaçar avall",
+			"scrollUp": "Desplaçar amunt",
+			"close": "Tancar navegador"
+		}
 	}
 }

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

@@ -211,5 +211,27 @@
 		"feature5": "OpenRouter-Anbieterauswahl",
 		"hideButton": "Ankündigung ausblenden",
 		"detailsDiscussLinks": "Erhalte mehr Details und diskutiere auf <discordLink>Discord</discordLink> und <redditLink>Reddit</redditLink> 🚀"
+	},
+	"browser": {
+		"rooWantsToUse": "Roo möchte den Browser verwenden:",
+		"consoleLogs": "Konsolenprotokolle",
+		"noNewLogs": "(Keine neuen Protokolle)",
+		"screenshot": "Browser-Screenshot",
+		"cursor": "Cursor",
+		"navigation": {
+			"step": "Schritt {{current}} von {{total}}",
+			"previous": "Zurück",
+			"next": "Weiter"
+		},
+		"sessionStarted": "Browser-Sitzung gestartet",
+		"actions": {
+			"title": "Browser-Aktion: ",
+			"launch": "Browser starten auf {{url}}",
+			"click": "Klicken ({{coordinate}})",
+			"type": "Eingeben \"{{text}}\"",
+			"scrollDown": "Nach unten scrollen",
+			"scrollUp": "Nach oben scrollen",
+			"close": "Browser schließen"
+		}
 	}
 }

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

@@ -211,5 +211,27 @@
 	"reasoning": {
 		"thinking": "Thinking",
 		"seconds": "{{count}}s"
+	},
+	"browser": {
+		"rooWantsToUse": "Roo wants to use the browser:",
+		"consoleLogs": "Console Logs",
+		"noNewLogs": "(No new logs)",
+		"screenshot": "Browser screenshot",
+		"cursor": "cursor",
+		"navigation": {
+			"step": "Step {{current}} of {{total}}",
+			"previous": "Previous",
+			"next": "Next"
+		},
+		"sessionStarted": "Browser Session Started",
+		"actions": {
+			"title": "Browse Action: ",
+			"launch": "Launch browser at {{url}}",
+			"click": "Click ({{coordinate}})",
+			"type": "Type \"{{text}}\"",
+			"scrollDown": "Scroll down",
+			"scrollUp": "Scroll up",
+			"close": "Close browser"
+		}
 	}
 }

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

@@ -211,5 +211,27 @@
 		"feature5": "Selección de proveedor OpenRouter",
 		"hideButton": "Ocultar anuncio",
 		"detailsDiscussLinks": "Obtén más detalles y participa en <discordLink>Discord</discordLink> y <redditLink>Reddit</redditLink> 🚀"
+	},
+	"browser": {
+		"rooWantsToUse": "Roo quiere usar el navegador:",
+		"consoleLogs": "Registros de la consola",
+		"noNewLogs": "(No hay nuevos registros)",
+		"screenshot": "Captura de pantalla del navegador",
+		"cursor": "cursor",
+		"navigation": {
+			"step": "Paso {{current}} de {{total}}",
+			"previous": "Anterior",
+			"next": "Siguiente"
+		},
+		"sessionStarted": "Sesión de navegador iniciada",
+		"actions": {
+			"title": "Acción de navegación: ",
+			"launch": "Iniciar navegador en {{url}}",
+			"click": "Clic ({{coordinate}})",
+			"type": "Escribir \"{{text}}\"",
+			"scrollDown": "Desplazar hacia abajo",
+			"scrollUp": "Desplazar hacia arriba",
+			"close": "Cerrar navegador"
+		}
 	}
 }

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

@@ -211,5 +211,27 @@
 		"feature5": "Sélection du fournisseur OpenRouter",
 		"hideButton": "Masquer l'annonce",
 		"detailsDiscussLinks": "Obtenez plus de détails et participez aux discussions sur <discordLink>Discord</discordLink> et <redditLink>Reddit</redditLink> 🚀"
+	},
+	"browser": {
+		"rooWantsToUse": "Roo veut utiliser le navigateur :",
+		"consoleLogs": "Journaux de console",
+		"noNewLogs": "(Pas de nouveaux journaux)",
+		"screenshot": "Capture d'écran du navigateur",
+		"cursor": "curseur",
+		"navigation": {
+			"step": "Étape {{current}} sur {{total}}",
+			"previous": "Précédent",
+			"next": "Suivant"
+		},
+		"sessionStarted": "Session de navigateur démarrée",
+		"actions": {
+			"title": "Action de navigation : ",
+			"launch": "Lancer le navigateur sur {{url}}",
+			"click": "Cliquer ({{coordinate}})",
+			"type": "Saisir \"{{text}}\"",
+			"scrollDown": "Défiler vers le bas",
+			"scrollUp": "Défiler vers le haut",
+			"close": "Fermer le navigateur"
+		}
 	}
 }

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

@@ -211,5 +211,27 @@
 		"feature5": "OpenRouter प्रदाता चयन",
 		"hideButton": "घोषणा छिपाएँ",
 		"detailsDiscussLinks": "<discordLink>Discord</discordLink> और <redditLink>Reddit</redditLink> पर अधिक जानकारी प्राप्त करें और चर्चा में भाग लें 🚀"
+	},
+	"browser": {
+		"rooWantsToUse": "Roo ब्राउज़र का उपयोग करना चाहता है:",
+		"consoleLogs": "कंसोल लॉग",
+		"noNewLogs": "(कोई नया लॉग नहीं)",
+		"screenshot": "ब्राउज़र स्क्रीनशॉट",
+		"cursor": "कर्सर",
+		"navigation": {
+			"step": "चरण {{current}} / {{total}}",
+			"previous": "पिछला",
+			"next": "अगला"
+		},
+		"sessionStarted": "ब्राउज़र सत्र शुरू हुआ",
+		"actions": {
+			"title": "ब्राउज़र क्रिया: ",
+			"launch": "{{url}} पर ब्राउज़र लॉन्च करें",
+			"click": "क्लिक करें ({{coordinate}})",
+			"type": "टाइप करें \"{{text}}\"",
+			"scrollDown": "नीचे स्क्रॉल करें",
+			"scrollUp": "ऊपर स्क्रॉल करें",
+			"close": "ब्राउज़र बंद करें"
+		}
 	}
 }

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

@@ -211,5 +211,27 @@
 		"feature5": "Selezione provider OpenRouter",
 		"hideButton": "Nascondi annuncio",
 		"detailsDiscussLinks": "Ottieni maggiori dettagli e partecipa alle discussioni su <discordLink>Discord</discordLink> e <redditLink>Reddit</redditLink> 🚀"
+	},
+	"browser": {
+		"rooWantsToUse": "Roo vuole utilizzare il browser:",
+		"consoleLogs": "Log della console",
+		"noNewLogs": "(Nessun nuovo log)",
+		"screenshot": "Screenshot del browser",
+		"cursor": "cursore",
+		"navigation": {
+			"step": "Passo {{current}} di {{total}}",
+			"previous": "Precedente",
+			"next": "Successivo"
+		},
+		"sessionStarted": "Sessione browser avviata",
+		"actions": {
+			"title": "Azione browser: ",
+			"launch": "Avvia browser su {{url}}",
+			"click": "Clic ({{coordinate}})",
+			"type": "Digita \"{{text}}\"",
+			"scrollDown": "Scorri verso il basso",
+			"scrollUp": "Scorri verso l'alto",
+			"close": "Chiudi browser"
+		}
 	}
 }

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

@@ -211,5 +211,27 @@
 		"feature5": "OpenRouterプロバイダーの選択",
 		"hideButton": "通知を非表示",
 		"detailsDiscussLinks": "詳細は<discordLink>Discord</discordLink>と<redditLink>Reddit</redditLink>でご確認・ディスカッションください 🚀"
+	},
+	"browser": {
+		"rooWantsToUse": "Rooはブラウザを使用したい:",
+		"consoleLogs": "コンソールログ",
+		"noNewLogs": "(新しいログはありません)",
+		"screenshot": "ブラウザのスクリーンショット",
+		"cursor": "カーソル",
+		"navigation": {
+			"step": "ステップ {{current}} / {{total}}",
+			"previous": "前へ",
+			"next": "次へ"
+		},
+		"sessionStarted": "ブラウザセッション開始",
+		"actions": {
+			"title": "ブラウザアクション: ",
+			"launch": "{{url}} でブラウザを起動",
+			"click": "クリック ({{coordinate}})",
+			"type": "入力 \"{{text}}\"",
+			"scrollDown": "下にスクロール",
+			"scrollUp": "上にスクロール",
+			"close": "ブラウザを閉じる"
+		}
 	}
 }

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

@@ -211,5 +211,27 @@
 		"feature5": "OpenRouter 제공자 선택",
 		"hideButton": "공지 숨기기",
 		"detailsDiscussLinks": "<discordLink>Discord</discordLink>와 <redditLink>Reddit</redditLink>에서 더 자세한 정보를 확인하고 논의하세요 🚀"
+	},
+	"browser": {
+		"rooWantsToUse": "Roo가 브라우저를 사용하고 싶어합니다:",
+		"consoleLogs": "콘솔 로그",
+		"noNewLogs": "(새 로그 없음)",
+		"screenshot": "브라우저 스크린샷",
+		"cursor": "커서",
+		"navigation": {
+			"step": "단계 {{current}} / {{total}}",
+			"previous": "이전",
+			"next": "다음"
+		},
+		"sessionStarted": "브라우저 세션 시작됨",
+		"actions": {
+			"title": "브라우저 작업: ",
+			"launch": "{{url}}에서 브라우저 실행",
+			"click": "클릭 ({{coordinate}})",
+			"type": "입력 \"{{text}}\"",
+			"scrollDown": "아래로 스크롤",
+			"scrollUp": "위로 스크롤",
+			"close": "브라우저 닫기"
+		}
 	}
 }