Add a language picker

src/core/webview/ClineProvider.ts

@@ -1527,6 +1527,10 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 						await this.updateGlobalState("browserToolEnabled", message.bool ?? true)
 						await this.postStateToWebview()
 						break
+					case "language":
+						await this.updateGlobalState("language", message.text)
+						await this.postStateToWebview()
+						break
 					case "showRooIgnoredFiles":
 						await this.updateGlobalState("showRooIgnoredFiles", message.bool ?? true)
 						await this.postStateToWebview()
@@ -2506,8 +2510,7 @@ export class ClineProvider implements vscode.WebviewViewProvider {
 			writeDelayMs: stateValues.writeDelayMs ?? 1000,
 			terminalOutputLineLimit: stateValues.terminalOutputLineLimit ?? 500,
 			mode: stateValues.mode ?? defaultModeSlug,
-			// Pass the VSCode language code directly
-			language: formatLanguage(vscode.env.language),
+			language: stateValues.language || formatLanguage(vscode.env.language),
 			mcpEnabled: stateValues.mcpEnabled ?? true,
 			enableMcpServerCreation: stateValues.enableMcpServerCreation ?? true,
 			alwaysApproveResubmit: stateValues.alwaysApproveResubmit ?? false,

src/exports/roo-code.d.ts

@@ -218,6 +218,7 @@ export type GlobalStateKey =
 	| "telemetrySetting"
 	| "showRooIgnoredFiles"
 	| "remoteBrowserEnabled"
+	| "language"
 
 export type ConfigurationKey = GlobalStateKey | SecretKey
 

src/shared/WebviewMessage.ts

@@ -107,6 +107,7 @@ export interface WebviewMessage {
 		| "discoverBrowser"
 		| "browserConnectionResult"
 		| "remoteBrowserEnabled"
+		| "language"
 	text?: string
 	disabled?: boolean
 	askResponse?: ClineAskResponse

src/shared/globalState.ts

@@ -116,6 +116,7 @@ export const GLOBAL_STATE_KEYS = [
 	"telemetrySetting",
 	"showRooIgnoredFiles",
 	"remoteBrowserEnabled",
+	"language",
 	"maxWorkspaceFiles",
 ] as const
 

webview-ui/src/components/settings/SettingsFooter.tsx

@@ -1,23 +1,52 @@
 import { HTMLAttributes } from "react"
 import { useAppTranslation } from "@/i18n/TranslationContext"
 import { Trans } from "react-i18next"
+import { Globe } from "lucide-react"
 
 import { VSCodeButton, VSCodeCheckbox, VSCodeLink } from "@vscode/webview-ui-toolkit/react"
 
 import { vscode } from "@/utils/vscode"
 import { cn } from "@/lib/utils"
 import { TelemetrySetting } from "../../../../src/shared/TelemetrySetting"
+import { SetCachedStateField } from "./types"
+
+// Map of language codes to their display names
+const LANGUAGES: Record<string, string> = {
+	ar: "العربية",
+	ca: "Català",
+	cs: "Čeština",
+	de: "Deutsch",
+	en: "English",
+	es: "Español",
+	fr: "Français",
+	hi: "हिन्दी",
+	hu: "Magyar",
+	it: "Italiano",
+	ja: "日本語",
+	ko: "한국어",
+	pl: "Polski",
+	pt: "Português",
+	"pt-BR": "Português do Brasil",
+	ru: "Русский",
+	tr: "Türkçe",
+	"zh-CN": "简体中文",
+	"zh-TW": "繁體中文",
+}
 
 type SettingsFooterProps = HTMLAttributes<HTMLDivElement> & {
 	version: string
 	telemetrySetting: TelemetrySetting
 	setTelemetrySetting: (setting: TelemetrySetting) => void
+	language: string
+	setCachedStateField: SetCachedStateField<"language">
 }
 
 export const SettingsFooter = ({
 	version,
 	telemetrySetting,
 	setTelemetrySetting,
+	language,
+	setCachedStateField,
 	className,
 	...props
 }: SettingsFooterProps) => {
@@ -35,7 +64,26 @@ export const SettingsFooter = ({
 					}}
 				/>
 			</p>
-			<p className="italic">{t("settings:footer.version", { version })}</p>
+			<div className="flex items-center gap-4">
+				<div className="flex items-center text-nowrap">
+					<p>Roo Code</p>
+					<p className="italic ml-1">v{version}</p>
+				</div>
+				<div className="relative flex items-center">
+					<Globe className="w-4 h-4 text-vscode-descriptionForeground absolute left-2 pointer-events-none" />
+					<select
+						value={language}
+						onChange={(e) => setCachedStateField("language", e.target.value)}
+						className="appearance-none bg-transparent text-vscode-foreground border border-transparent hover:border-vscode-input-border focus:border-vscode-focusBorder rounded px-2 py-1 pl-7 text-xs min-w-[70px]"
+						title={LANGUAGES[language]}>
+						{Object.entries(LANGUAGES).map(([code, name]) => (
+							<option key={code} value={code}>
+								{name}
+							</option>
+						))}
+					</select>
+				</div>
+			</div>
 			<div className="mt-4 mb-4">
 				<div>
 					<VSCodeCheckbox

webview-ui/src/components/settings/SettingsView.tsx

@@ -72,6 +72,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 	const {
 		alwaysAllowReadOnly,
 		allowedCommands,
+		language,
 		alwaysAllowBrowser,
 		alwaysAllowExecute,
 		alwaysAllowMcp,
@@ -175,6 +176,7 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 
 	const handleSubmit = () => {
 		if (isSettingValid) {
+			vscode.postMessage({ type: "language", text: language })
 			vscode.postMessage({ type: "alwaysAllowReadOnly", bool: alwaysAllowReadOnly })
 			vscode.postMessage({ type: "alwaysAllowWrite", bool: alwaysAllowWrite })
 			vscode.postMessage({ type: "alwaysAllowExecute", bool: alwaysAllowExecute })
@@ -253,7 +255,16 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 			{ id: "advanced", icon: Cog, ref: advancedRef },
 			{ id: "experimental", icon: FlaskConical, ref: experimentalRef },
 		],
-		[providersRef, autoApproveRef, browserRef, checkpointRef, notificationsRef, advancedRef, experimentalRef],
+		[
+			providersRef,
+			autoApproveRef,
+			browserRef,
+			checkpointRef,
+			notificationsRef,
+			contextRef,
+			advancedRef,
+			experimentalRef,
+		],
 	)
 
 	const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
@@ -450,6 +461,8 @@ const SettingsView = forwardRef<SettingsViewRef, SettingsViewProps>(({ onDone },
 					version={version}
 					telemetrySetting={telemetrySetting}
 					setTelemetrySetting={setTelemetrySetting}
+					language={language || "en"}
+					setCachedStateField={setCachedStateField}
 				/>
 			</TabContent>