feat(i8n): Add multilingual support for manual relay dialog text

Author: NyxJae

webview-ui/src/components/human-relay/HumanRelayDialog.tsx

@@ -7,6 +7,7 @@ import { useClipboard } from "../ui/hooks"
 import { AlertTriangle, Check, Copy, Power, X } from "lucide-react"
 import { useState as useReactState } from "react"
 import { vscode } from "../../utils/vscode"
+import { useAppTranslation } from "@/i18n/TranslationContext"
 
 interface HumanRelayDialogProps {
 	isOpen: boolean
@@ -35,6 +36,7 @@ export const HumanRelayDialog: React.FC<HumanRelayDialogProps> = ({
 	monitorInterval = 500,
 	onToggleMonitor,
 }) => {
+	const { t } = useAppTranslation()
 	const [response, setResponse] = React.useState("")
 	const { copy } = useClipboard()
 	const [isCopyClicked, setIsCopyClicked] = React.useState(false)
@@ -78,14 +80,9 @@ export const HumanRelayDialog: React.FC<HumanRelayDialogProps> = ({
 			}
 			// Handle duplicate response warning
 			else if (message.type === "showHumanRelayResponseAlert") {
-				if (message.requestId === "lastInteraction")
-					setWarningMessage(
-						"It seems you copied the AI's response from the last interaction instead of the current task. Please check your interaction with the web AI.",
-					)
+				if (message.requestId === "lastInteraction") setWarningMessage(t("humanRelay:warning.lastInteraction"))
 				else if (message.requestId === "invalidResponse")
-					setWarningMessage(
-						"The AI's response does not seem to meet the RooCode format requirements. Please check your interaction with the web AI.",
-					)
+					setWarningMessage(t("humanRelay:warning.invalidResponse"))
 				setShowDuplicateWarning(true)
 			}
 		}
@@ -95,7 +92,7 @@ export const HumanRelayDialog: React.FC<HumanRelayDialogProps> = ({
 		return () => {
 			window.removeEventListener("message", messageHandler)
 		}
-	}, [onClose])
+	}, [onClose, t])
 
 	// Copy to clipboard and show success message
 	const handleCopy = () => {
@@ -125,10 +122,8 @@ export const HumanRelayDialog: React.FC<HumanRelayDialogProps> = ({
 		<Dialog open={isOpen} onOpenChange={(open) => !open && handleCancel()}>
 			<DialogContent className="sm:max-w-[600px]">
 				<DialogHeader>
-					<DialogTitle>Human Relay - Please Help Copy and Paste Information</DialogTitle>
-					<DialogDescription>
-						Please copy the text below to the web AI, then paste the AI's response into the input box below.
-					</DialogDescription>
+					<DialogTitle>{t("humanRelay:dialogTitle")}</DialogTitle>
+					<DialogDescription>{t("humanRelay:dialogDescription")}</DialogDescription>
 				</DialogHeader>
 
 				<div className="grid gap-4 py-4">
@@ -143,7 +138,9 @@ export const HumanRelayDialog: React.FC<HumanRelayDialogProps> = ({
 						</Button>
 					</div>
 
-					{isCopyClicked && <div className="text-sm text-emerald-500 font-medium">Copied to clipboard</div>}
+					{isCopyClicked && (
+						<div className="text-sm text-emerald-500 font-medium">{t("humanRelay:copiedToClipboard")}</div>
+					)}
 					{showDuplicateWarning && (
 						<div className="flex items-center gap-2 text-sm p-2 rounded-md bg-amber-100 dark:bg-amber-900 border border-amber-300 dark:border-amber-700 text-amber-800 dark:text-amber-300">
 							<AlertTriangle className="h-4 w-4 text-amber-500" />
@@ -154,27 +151,33 @@ export const HumanRelayDialog: React.FC<HumanRelayDialogProps> = ({
 					<div className="flex items-center justify-between text-sm text-vscode-descriptionForeground">
 						<div className="flex items-center gap-2">
 							{isMonitoring && <ProgressIndicator />}
-							<span>Clipboard Monitoring: {isMonitoring ? "Enabled" : "Disabled"}</span>
+							<span>
+								{t("humanRelay:clipboardMonitoring.label")}{" "}
+								{isMonitoring
+									? t("humanRelay:clipboardMonitoring.enabled")
+									: t("humanRelay:clipboardMonitoring.disabled")}
+							</span>
 						</div>
 						<Button
 							size="sm"
 							variant={isMonitoring ? "outline" : "default"}
 							onClick={handleToggleMonitor}
 							className="gap-1 ml-2">
 							<Power className="h-4 w-4" />
-							{isMonitoring ? "Disable" : "Enable"}
+							{isMonitoring
+								? t("humanRelay:clipboardMonitoring.disable")
+								: t("humanRelay:clipboardMonitoring.enable")}
 						</Button>
 					</div>
 
 					<div className="text-sm text-vscode-descriptionForeground mt-2">
-						You can use the shortcut Ctrl/Cmd+Alt+V (default) to send the clipboard content. You can also
-						search for `Send Clipboard` in the shortcut settings to modify the hotkey.
+						{t("humanRelay:shortcutDescription")}
 					</div>
 
 					<div>
-						<div className="mb-2 font-medium">Please enter the AI's response:</div>
+						<div className="mb-2 font-medium">{t("humanRelay:aiResponse.label")}</div>
 						<Textarea
-							placeholder="Paste the AI's response here..."
+							placeholder={t("humanRelay:aiResponse.placeholder")}
 							value={response}
 							onChange={(e) => setResponse(e.target.value)}
 							className="min-h-[150px]"
@@ -185,11 +188,11 @@ export const HumanRelayDialog: React.FC<HumanRelayDialogProps> = ({
 				<DialogFooter>
 					<Button variant="outline" onClick={handleCancel} className="gap-1">
 						<X className="h-4 w-4" />
-						Cancel
+						{t("humanRelay:actions.cancel")}
 					</Button>
 					<Button onClick={handleSubmit} disabled={!response.trim()} className="gap-1">
 						<Check className="h-4 w-4" />
-						Submit
+						{t("humanRelay:actions.submit")}
 					</Button>
 				</DialogFooter>
 			</DialogContent>

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

@@ -1333,16 +1333,11 @@ const ApiOptions = ({
 			{selectedProvider === "human-relay" && (
 				<>
 					<div className="text-sm text-vscode-descriptionForeground">
-						No API key is required, but the user needs to help copy and paste the information to the web
-						chat AI.
-					</div>
-					<div className="text-sm text-vscode-descriptionForeground">
-						During use, a dialog box will pop up and the current message will be copied to the clipboard
-						automatically. You need to paste these to web versions of AI (such as ChatGPT or Claude), then
-						copy the AI's reply back to the dialog box and click the confirm button.
+						{t("humanRelay:settings.description")}
 					</div>
+					<div className="text-sm text-vscode-descriptionForeground">{t("humanRelay:settings.usage")}</div>
 					<div className="mt-4">
-						<div className="font-medium">Clipboard monitoring interval (ms)</div>
+						<div className="font-medium">{t("humanRelay:settings.monitorInterval")}</div>
 						<div className="mt-2">
 							<input
 								type="range"
@@ -1357,7 +1352,9 @@ const ApiOptions = ({
 								className="h-2 focus:outline-0 w-4/5 accent-vscode-button-background"
 							/>
 							<span style={{ minWidth: "45px", textAlign: "left" }}>
-								{apiConfiguration?.humanRelayMonitorInterval || 500} ms
+								{t("humanRelay:settings.intervalValue", {
+									value: apiConfiguration?.humanRelayMonitorInterval || 500,
+								})}
 							</span>
 						</div>
 					</div>

webview-ui/src/i18n/locales/ar/humanRelay.json

@@ -0,0 +1,31 @@
+{
+	"dialogTitle": "الوسيط البشري - يرجى المساعدة في نسخ ولصق المعلومات",
+	"dialogDescription": "يرجى نسخ النص التالي إلى الذكاء الاصطناعي على الويب، ثم لصق رد الذكاء الاصطناعي في مربع النص أدناه.",
+	"copiedToClipboard": "تم النسخ إلى الحافظة",
+	"warning": {
+		"lastInteraction": "يبدو أنك نسخت رد الذكاء الاصطناعي من التفاعل الأخير، وليس الرد للمهمة الحالية. يرجى التحقق من تفاعلك مع الذكاء الاصطناعي على الويب.",
+		"invalidResponse": "يبدو أن رد الذكاء الاصطناعي لا يلبي متطلبات تنسيق RooCode. يرجى التحقق من تفاعلك مع الذكاء الاصطناعي على الويب."
+	},
+	"clipboardMonitoring": {
+		"label": "مراقبة الحافظة:",
+		"enabled": "مفعّل",
+		"disabled": "معطّل",
+		"disable": "تعطيل",
+		"enable": "تفعيل"
+	},
+	"shortcutDescription": "يمكنك استخدام الاختصار Ctrl/Cmd+Alt+V (الافتراضي) لإرسال محتوى الحافظة بسرعة. يمكنك أيضًا تغيير الاختصار عن طريق البحث عن 'إرسال الحافظة' في إعدادات اختصارات لوحة المفاتيح.",
+	"aiResponse": {
+		"label": "أدخل رد الذكاء الاصطناعي:",
+		"placeholder": "الصق رد الذكاء الاصطناعي هنا..."
+	},
+	"actions": {
+		"cancel": "إلغاء",
+		"submit": "إرسال"
+	},
+	"settings": {
+		"description": "لا يلزم مفتاح API، ولكن يحتاج المستخدمون إلى المساعدة في نسخ ولصق المعلومات إلى دردشة الذكاء الاصطناعي على الويب.",
+		"usage": "عند الاستخدام، سيظهر مربع حوار وسيتم نسخ الرسالة الحالية تلقائيًا إلى الحافظة. تحتاج إلى لصق هذا المحتوى في الذكاء الاصطناعي على الويب (مثل ChatGPT أو Claude)، ثم نسخ رد الذكاء الاصطناعي مرة أخرى إلى مربع الحوار والنقر على زر التأكيد.",
+		"monitorInterval": "فترة مراقبة الحافظة (بالمللي ثانية)",
+		"intervalValue": "{{value}} مللي ثانية"
+	}
+}

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

@@ -0,0 +1,31 @@
+{
+	"dialogTitle": "Relé Humà - Si us plau, ajudeu a copiar i enganxar informació",
+	"dialogDescription": "Si us plau, copieu el següent prompt a la IA web i després enganxeu la resposta de la IA al quadre de text de sota.",
+	"copiedToClipboard": "Copiat al porta-retalls",
+	"warning": {
+		"lastInteraction": "Sembla que heu copiat la resposta de la IA de l'última interacció, no la resposta per a la tasca actual. Si us plau, comproveu la vostra interacció amb la IA web.",
+		"invalidResponse": "La resposta de la IA no sembla complir els requisits de format de RooCode. Si us plau, comproveu la vostra interacció amb la IA web."
+	},
+	"clipboardMonitoring": {
+		"label": "Monitoratge del porta-retalls:",
+		"enabled": "Activat",
+		"disabled": "Desactivat",
+		"disable": "Desactivar",
+		"enable": "Activar"
+	},
+	"shortcutDescription": "Podeu utilitzar la drecera Ctrl/Cmd+Alt+V (per defecte) per enviar ràpidament el contingut del porta-retalls. També podeu canviar la drecera cercant 'enviar porta-retalls' a la configuració de dreceres de teclat.",
+	"aiResponse": {
+		"label": "Introduïu la resposta de la IA:",
+		"placeholder": "Enganxeu aquí la resposta de la IA..."
+	},
+	"actions": {
+		"cancel": "Cancel·lar",
+		"submit": "Enviar"
+	},
+	"settings": {
+		"description": "No es requereix clau API, però els usuaris han d'ajudar a copiar i enganxar informació al xat d'IA basat en web.",
+		"usage": "En utilitzar-lo, apareixerà un diàleg i el missatge actual es copiarà automàticament al porta-retalls. Heu d'enganxar aquest contingut a la IA basada en web (com ChatGPT o Claude), després copiar la resposta de la IA de tornada al diàleg i fer clic al botó de confirmació.",
+		"monitorInterval": "Interval de monitoratge del porta-retalls (mil·lisegons)",
+		"intervalValue": "{{value}} mil·lisegons"
+	}
+}

webview-ui/src/i18n/locales/cs/humanRelay.json

@@ -0,0 +1,31 @@
+{
+	"dialogTitle": "Lidský přenos - Prosím, pomozte zkopírovat a vložit informace",
+	"dialogDescription": "Prosím, zkopírujte následující výzvu do webové AI a poté vložte odpověď AI do textového pole níže.",
+	"copiedToClipboard": "Zkopírováno do schránky",
+	"warning": {
+		"lastInteraction": "Zdá se, že jste zkopírovali odpověď AI z poslední interakce, ne odpověď pro aktuální úkol. Prosím, zkontrolujte vaši interakci s webovou AI.",
+		"invalidResponse": "Odpověď AI zřejmě nesplňuje požadavky formátu RooCode. Prosím, zkontrolujte vaši interakci s webovou AI."
+	},
+	"clipboardMonitoring": {
+		"label": "Monitorování schránky:",
+		"enabled": "Povoleno",
+		"disabled": "Zakázáno",
+		"disable": "Zakázat",
+		"enable": "Povolit"
+	},
+	"shortcutDescription": "Můžete použít klávesovou zkratku Ctrl/Cmd+Alt+V (výchozí) pro rychlé odeslání obsahu schránky. Zkratku můžete také změnit vyhledáním 'odeslat schránku' v nastavení klávesových zkratek.",
+	"aiResponse": {
+		"label": "Zadejte odpověď AI:",
+		"placeholder": "Sem vložte odpověď AI..."
+	},
+	"actions": {
+		"cancel": "Zrušit",
+		"submit": "Odeslat"
+	},
+	"settings": {
+		"description": "API klíč není vyžadován, ale uživatelé musí pomoci zkopírovat a vložit informace do webového AI chatu.",
+		"usage": "Při použití se objeví dialogové okno a aktuální zpráva bude automaticky zkopírována do schránky. Musíte vložit tento obsah do webové AI (jako je ChatGPT nebo Claude), poté zkopírovat odpověď AI zpět do dialogového okna a kliknout na tlačítko potvrzení.",
+		"monitorInterval": "Interval monitorování schránky (milisekundy)",
+		"intervalValue": "{{value}} milisekund"
+	}
+}

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

@@ -0,0 +1,31 @@
+{
+	"dialogTitle": "Menschliche Weiterleitung - Bitte helfen Sie beim Kopieren und Einfügen von Informationen",
+	"dialogDescription": "Bitte kopieren Sie den folgenden Prompt in die Web-KI und fügen Sie dann die Antwort der KI in das untenstehende Textfeld ein.",
+	"copiedToClipboard": "In die Zwischenablage kopiert",
+	"warning": {
+		"lastInteraction": "Es sieht so aus, als hätten Sie die KI-Antwort aus der letzten Interaktion kopiert, nicht die Antwort für die aktuelle Aufgabe. Bitte überprüfen Sie Ihre Interaktion mit der Web-KI.",
+		"invalidResponse": "Die Antwort der KI scheint nicht den Formatanforderungen von RooCode zu entsprechen. Bitte überprüfen Sie Ihre Interaktion mit der Web-KI."
+	},
+	"clipboardMonitoring": {
+		"label": "Zwischenablage-Überwachung:",
+		"enabled": "Aktiviert",
+		"disabled": "Deaktiviert",
+		"disable": "Deaktivieren",
+		"enable": "Aktivieren"
+	},
+	"shortcutDescription": "Sie können den Tastaturkurzbefehl Strg/Cmd+Alt+V (Standard) verwenden, um den Inhalt der Zwischenablage schnell zu senden. Sie können den Kurzbefehl auch ändern, indem Sie in den Tastaturkurzbefehl-Einstellungen nach 'Zwischenablage senden' suchen.",
+	"aiResponse": {
+		"label": "KI-Antwort eingeben:",
+		"placeholder": "Fügen Sie hier die Antwort der KI ein..."
+	},
+	"actions": {
+		"cancel": "Abbrechen",
+		"submit": "Absenden"
+	},
+	"settings": {
+		"description": "Es wird kein API-Schlüssel benötigt, aber Benutzer müssen beim Kopieren und Einfügen von Informationen in den webbasierten KI-Chat helfen.",
+		"usage": "Bei der Verwendung erscheint ein Dialog und die aktuelle Nachricht wird automatisch in die Zwischenablage kopiert. Sie müssen diesen Inhalt in die webbasierte KI (wie ChatGPT oder Claude) einfügen, dann die Antwort der KI zurück in den Dialog kopieren und auf die Bestätigungsschaltfläche klicken.",
+		"monitorInterval": "Zwischenablage-Überwachungsintervall (Millisekunden)",
+		"intervalValue": "{{value}} Millisekunden"
+	}
+}

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

@@ -0,0 +1,31 @@
+{
+	"dialogTitle": "Human Relay - Please help copy and paste information",
+	"dialogDescription": "Please copy the following prompt to the web AI, and then paste the AI's response into the text box below.",
+	"copiedToClipboard": "Copied to clipboard",
+	"warning": {
+		"lastInteraction": "It looks like you copied the AI response from the last interaction, not the response for the current task. Please check your interaction with the web AI.",
+		"invalidResponse": "The AI's response doesn't seem to meet the RooCode format requirements. Please check your interaction with the web AI."
+	},
+	"clipboardMonitoring": {
+		"label": "Clipboard monitoring:",
+		"enabled": "Enabled",
+		"disabled": "Disabled",
+		"disable": "Disable",
+		"enable": "Enable"
+	},
+	"shortcutDescription": "You can use the shortcut Ctrl/Cmd+Alt+V (default) to quickly send clipboard content. You can also change the shortcut by searching for 'send clipboard' in the keyboard shortcuts settings.",
+	"aiResponse": {
+		"label": "Enter AI response:",
+		"placeholder": "Paste the AI's response here..."
+	},
+	"actions": {
+		"cancel": "Cancel",
+		"submit": "Submit"
+	},
+	"settings": {
+		"description": "No API key is required, but users need to help copy and paste information to the web-based AI chat.",
+		"usage": "When using, a dialog will appear and the current message will be automatically copied to the clipboard. You need to paste this content into the web-based AI (such as ChatGPT or Claude), then copy the AI's response back to the dialog and click the confirm button.",
+		"monitorInterval": "Clipboard monitoring interval (milliseconds)",
+		"intervalValue": "{{value}} milliseconds"
+	}
+}

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

@@ -0,0 +1,31 @@
+{
+	"dialogTitle": "Relevo Humano - Por favor, ayude a copiar y pegar información",
+	"dialogDescription": "Por favor, copie el siguiente prompt en la IA web y luego pegue la respuesta de la IA en el cuadro de texto de abajo.",
+	"copiedToClipboard": "Copiado al portapapeles",
+	"warning": {
+		"lastInteraction": "Parece que ha copiado la respuesta de la IA de la última interacción, no la respuesta para la tarea actual. Por favor, verifique su interacción con la IA web.",
+		"invalidResponse": "La respuesta de la IA parece no cumplir con los requisitos de formato de RooCode. Por favor, verifique su interacción con la IA web."
+	},
+	"clipboardMonitoring": {
+		"label": "Monitoreo del portapapeles:",
+		"enabled": "Activado",
+		"disabled": "Desactivado",
+		"disable": "Desactivar",
+		"enable": "Activar"
+	},
+	"shortcutDescription": "Puede usar el atajo Ctrl/Cmd+Alt+V (predeterminado) para enviar rápidamente el contenido del portapapeles. También puede cambiar el atajo buscando 'enviar portapapeles' en la configuración de atajos de teclado.",
+	"aiResponse": {
+		"label": "Ingrese la respuesta de la IA:",
+		"placeholder": "Pegue aquí la respuesta de la IA..."
+	},
+	"actions": {
+		"cancel": "Cancelar",
+		"submit": "Enviar"
+	},
+	"settings": {
+		"description": "No se requiere clave de API, pero los usuarios necesitan ayudar a copiar y pegar información en el chat de IA basado en web.",
+		"usage": "Al usar, aparecerá un diálogo y el mensaje actual se copiará automáticamente al portapapeles. Debe pegar este contenido en la IA basada en web (como ChatGPT o Claude), luego copiar la respuesta de la IA de vuelta al diálogo y hacer clic en el botón de confirmación.",
+		"monitorInterval": "Intervalo de monitoreo del portapapeles (milisegundos)",
+		"intervalValue": "{{value}} milisegundos"
+	}
+}