Merge pull request #1676 from feifei325/i18n/chatview_buttron

refactor(i18n): Internationalization of Button and tooltip in ChatView

Author: mrubens

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

@@ -119,16 +119,16 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 							setTextAreaDisabled(true)
 							setClineAsk("api_req_failed")
 							setEnableButtons(true)
-							setPrimaryButtonText("Retry")
-							setSecondaryButtonText("Start New Task")
+							setPrimaryButtonText(t("chat:retry.title"))
+							setSecondaryButtonText(t("chat:startNewTask.title"))
 							break
 						case "mistake_limit_reached":
 							playSound("progress_loop")
 							setTextAreaDisabled(false)
 							setClineAsk("mistake_limit_reached")
 							setEnableButtons(true)
-							setPrimaryButtonText("Proceed Anyways")
-							setSecondaryButtonText("Start New Task")
+							setPrimaryButtonText(t("chat:proceedAnyways.title"))
+							setSecondaryButtonText(t("chat:startNewTask.title"))
 							break
 						case "followup":
 							setTextAreaDisabled(isPartial)
@@ -149,16 +149,16 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 								case "editedExistingFile":
 								case "appliedDiff":
 								case "newFileCreated":
-									setPrimaryButtonText("Save")
-									setSecondaryButtonText("Reject")
+									setPrimaryButtonText(t("chat:save.title"))
+									setSecondaryButtonText(t("chat:reject.title"))
 									break
 								case "finishTask":
-									setPrimaryButtonText("Complete Subtask and Return")
+									setPrimaryButtonText(t("chat:completeSubtaskAndReturn.title"))
 									setSecondaryButtonText(undefined)
 									break
 								default:
-									setPrimaryButtonText("Approve")
-									setSecondaryButtonText("Reject")
+									setPrimaryButtonText(t("chat:approve.title"))
+									setSecondaryButtonText(t("chat:reject.title"))
 									break
 							}
 							break
@@ -169,8 +169,8 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 							setTextAreaDisabled(isPartial)
 							setClineAsk("browser_action_launch")
 							setEnableButtons(!isPartial)
-							setPrimaryButtonText("Approve")
-							setSecondaryButtonText("Reject")
+							setPrimaryButtonText(t("chat:approve.title"))
+							setSecondaryButtonText(t("chat:reject.title"))
 							break
 						case "command":
 							if (!isAutoApproved(lastMessage)) {
@@ -179,45 +179,45 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 							setTextAreaDisabled(isPartial)
 							setClineAsk("command")
 							setEnableButtons(!isPartial)
-							setPrimaryButtonText("Run Command")
-							setSecondaryButtonText("Reject")
+							setPrimaryButtonText(t("chat:runCommand.title"))
+							setSecondaryButtonText(t("chat:reject.title"))
 							break
 						case "command_output":
 							setTextAreaDisabled(false)
 							setClineAsk("command_output")
 							setEnableButtons(true)
-							setPrimaryButtonText("Proceed While Running")
+							setPrimaryButtonText(t("chat:proceedWhileRunning.title"))
 							setSecondaryButtonText(undefined)
 							break
 						case "use_mcp_server":
 							setTextAreaDisabled(isPartial)
 							setClineAsk("use_mcp_server")
 							setEnableButtons(!isPartial)
-							setPrimaryButtonText("Approve")
-							setSecondaryButtonText("Reject")
+							setPrimaryButtonText(t("chat:approve.title"))
+							setSecondaryButtonText(t("chat:reject.title"))
 							break
 						case "completion_result":
 							// extension waiting for feedback. but we can just present a new task button
 							playSound("celebration")
 							setTextAreaDisabled(isPartial)
 							setClineAsk("completion_result")
 							setEnableButtons(!isPartial)
-							setPrimaryButtonText("Start New Task")
+							setPrimaryButtonText(t("chat:startNewTask.title"))
 							setSecondaryButtonText(undefined)
 							break
 						case "resume_task":
 							setTextAreaDisabled(false)
 							setClineAsk("resume_task")
 							setEnableButtons(true)
-							setPrimaryButtonText("Resume Task")
-							setSecondaryButtonText("Terminate")
+							setPrimaryButtonText(t("chat:resumeTask.title"))
+							setSecondaryButtonText(t("chat:terminate.title"))
 							setDidClickCancel(false) // special case where we reset the cancel button state
 							break
 						case "resume_completed_task":
 							setTextAreaDisabled(false)
 							setClineAsk("resume_completed_task")
 							setEnableButtons(true)
-							setPrimaryButtonText("Start New Task")
+							setPrimaryButtonText(t("chat:startNewTask.title"))
 							setSecondaryButtonText(undefined)
 							setDidClickCancel(false)
 							break
@@ -942,11 +942,11 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 	)
 
 	const placeholderText = useMemo(() => {
-		const baseText = task ? "Type a message..." : "Type your task here..."
-		const contextText = "(@ to add context, / to switch modes"
-		const imageText = shouldDisableImages ? ", hold shift to drag in files" : ", hold shift to drag in files/images"
+		const baseText = task ? t("chat:typeMessage") : t("chat:typeTask")
+		const contextText = t("chat:addContext")
+		const imageText = shouldDisableImages ? `, ${t("chat:dragFiles")}` : `, ${t("chat:dragFilesImages")}`
 		return baseText + `\n${contextText}${imageText})`
-	}, [task, shouldDisableImages])
+	}, [task, shouldDisableImages, t])
 
 	const itemContent = useCallback(
 		(index: number, messageOrGroup: ClineMessage | ClineMessage[]) => {
@@ -1107,13 +1107,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 					{showAnnouncement && <Announcement version={version} hideAnnouncement={hideAnnouncement} />}
 					<div style={{ padding: "0 20px", flexShrink: 0 }}>
 						<h2>{t("chat:greeting")}</h2>
-						<p>
-							Thanks to the latest breakthroughs in agentic coding capabilities, I can handle complex
-							software development tasks step-by-step. With tools that let me create & edit files, explore
-							complex projects, use the browser, and execute terminal commands (after you grant
-							permission), I can assist you in ways that go beyond code completion or tech support. I can
-							even use MCP to create new tools and extend my own capabilities.
-						</p>
+						<p>{t("chat:aboutMe")}</p>
 					</div>
 					{taskHistory.length > 0 && <HistoryPreview showHistoryView={showHistoryView} />}
 				</div>
@@ -1185,7 +1179,7 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 									scrollToBottomSmooth()
 									disableAutoScrollRef.current = false
 								}}
-								title="Scroll to bottom of chat">
+								title={t("chat:scrollToBottom")}>
 								<span className="codicon codicon-chevron-down" style={{ fontSize: "18px" }}></span>
 							</ScrollToBottomButton>
 						</div>
@@ -1210,22 +1204,23 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 										marginRight: secondaryButtonText ? "6px" : "0",
 									}}
 									title={
-										primaryButtonText === "Retry"
-											? "Try the operation again"
-											: primaryButtonText === "Save"
-												? "Save the file changes"
-												: primaryButtonText === "Approve"
-													? "Approve this action"
-													: primaryButtonText === "Run Command"
-														? "Execute this command"
-														: primaryButtonText === "Start New Task"
-															? "Begin a new task"
-															: primaryButtonText === "Resume Task"
-																? "Continue the current task"
-																: primaryButtonText === "Proceed Anyways"
-																	? "Continue despite warnings"
-																	: primaryButtonText === "Proceed While Running"
-																		? "Continue while command executes"
+										primaryButtonText === t("chat:retry.title")
+											? t("chat:retry.tooltip")
+											: primaryButtonText === t("chat:save.title")
+												? t("chat:save.tooltip")
+												: primaryButtonText === t("chat:approve.title")
+													? t("chat:approve.tooltip")
+													: primaryButtonText === t("chat:runCommand.title")
+														? t("chat:runCommand.tooltip")
+														: primaryButtonText === t("chat:startNewTask.title")
+															? t("chat:startNewTask.tooltip")
+															: primaryButtonText === t("chat:resumeTask.title")
+																? t("chat:resumeTask.tooltip")
+																: primaryButtonText === t("chat:proceedAnyways.title")
+																	? t("chat:proceedAnyways.tooltip")
+																	: primaryButtonText ===
+																		  t("chat:proceedWhileRunning.title")
+																		? t("chat:proceedWhileRunning.tooltip")
 																		: undefined
 									}
 									onClick={(e) => handlePrimaryButtonClick(inputValue, selectedImages)}>
@@ -1242,17 +1237,17 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 									}}
 									title={
 										isStreaming
-											? "Cancel the current operation"
-											: secondaryButtonText === "Start New Task"
-												? "Begin a new task"
-												: secondaryButtonText === "Reject"
-													? "Reject this action"
-													: secondaryButtonText === "Terminate"
-														? "End the current task"
+											? t("chat:cancel.tooltip")
+											: secondaryButtonText === t("chat:startNewTask.title")
+												? t("chat:startNewTask.tooltip")
+												: secondaryButtonText === t("chat:reject.title")
+													? t("chat:reject.tooltip")
+													: secondaryButtonText === t("chat:terminate.title")
+														? t("chat:terminate.tooltip")
 														: undefined
 									}
 									onClick={(e) => handleSecondaryButtonClick(inputValue, selectedImages)}>
-									{isStreaming ? "Cancel" : secondaryButtonText}
+									{isStreaming ? t("chat:cancel.title") : secondaryButtonText}
 								</VSCodeButton>
 							)}
 						</div>

webview-ui/src/components/common/TelemetryBanner.tsx

@@ -3,6 +3,7 @@ import { memo, useState } from "react"
 import styled from "styled-components"
 import { vscode } from "../../utils/vscode"
 import { TelemetrySetting } from "../../../../src/shared/TelemetrySetting"
+import { useAppTranslation } from "../../i18n/TranslationContext"
 
 const BannerContainer = styled.div`
 	background-color: var(--vscode-banner-background);
@@ -24,6 +25,7 @@ const ButtonContainer = styled.div`
 `
 
 const TelemetryBanner = () => {
+	const { t } = useAppTranslation()
 	const [hasChosen, setHasChosen] = useState(false)
 
 	const handleAllow = () => {
@@ -43,25 +45,24 @@ const TelemetryBanner = () => {
 	return (
 		<BannerContainer>
 			<div>
-				<strong>Help Improve Roo Code</strong>
+				<strong>{t("common:telemetryTitle")}</strong>
 				<div className="mt-1">
-					Send anonymous error and usage data to help us fix bugs and improve the extension. No code, prompts,
-					or personal information is ever sent.
+					{t("common:anonymousTelemetry")}
 					<div className="mt-1">
-						You can always change this at the bottom of the{" "}
+						{t("common:changeSettings")}{" "}
 						<VSCodeLink href="#" onClick={handleOpenSettings}>
-							settings
+							{t("common:settings")}
 						</VSCodeLink>
 						.
 					</div>
 				</div>
 			</div>
 			<ButtonContainer>
 				<VSCodeButton appearance="primary" onClick={handleAllow} disabled={hasChosen}>
-					Allow
+					{t("common:allow")}
 				</VSCodeButton>
 				<VSCodeButton appearance="secondary" onClick={handleDeny} disabled={hasChosen}>
-					Deny
+					{t("common:deny")}
 				</VSCodeButton>
 			</ButtonContainer>
 		</BannerContainer>

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

@@ -0,0 +1,60 @@
+{
+	"greeting": "ماذا يمكن أن يفعل Roo من أجلك؟",
+	"retry": {
+		"title": "إعادة المحاولة",
+		"tooltip": "حاول العملية مرة أخرى"
+	},
+	"startNewTask": {
+		"title": "بدء مهمة جديدة",
+		"tooltip": "ابدأ مهمة جديدة"
+	},
+	"proceedAnyways": {
+		"title": "المتابعة على أي حال",
+		"tooltip": "استمر أثناء تنفيذ الأمر"
+	},
+	"save": {
+		"title": "حفظ",
+		"tooltip": "حفظ تغييرات الملف"
+	},
+	"reject": {
+		"title": "رفض",
+		"tooltip": "رفض هذا الإجراء"
+	},
+	"completeSubtaskAndReturn": "إكمال المهمة الفرعية والعودة",
+	"approve": {
+		"title": "موافقة",
+		"tooltip": "الموافقة على هذا الإجراء"
+	},
+	"runCommand": {
+		"title": "تنفيذ الأمر",
+		"tooltip": "تنفيذ هذا الأمر"
+	},
+	"proceedWhileRunning": {
+		"title": "المتابعة أثناء التشغيل",
+		"tooltip": "استمر على الرغم من التحذيرات"
+	},
+	"resumeTask": {
+		"title": "استئناف المهمة",
+		"tooltip": "استئناف المهمة الحالية"
+	},
+	"terminate": {
+		"title": "إنهاء",
+		"tooltip": "إنهاء المهمة الحالية"
+	},
+	"cancel": {
+		"title": "إلغاء",
+		"tooltip": "إلغاء العملية الحالية"
+	},
+	"scrollToBottom": "التمرير إلى أسفل الدردشة",
+	"aboutMe": "بفضل أحدث التطورات في قدرات الترميز الذكية، يمكنني التعامل مع مهام تطوير البرمجيات المعقدة خطوة بخطوة. باستخدام الأدوات التي تتيح لي إنشاء وتحرير الملفات، واستكشاف المشاريع المعقدة، واستخدام المتصفح، وتنفيذ أوامر الطرفية (بعد منحك الإذن)، يمكنني مساعدتك بطرق تتجاوز إكمال التعليمات البرمجية أو الدعم الفني. يمكنني حتى استخدام MCP لإنشاء أدوات جديدة وتوسيع قدراتي الخاصة.",
+	"selectMode": "اختر وضع التفاعل",
+	"selectApiConfig": "اختر تكوين API",
+	"enhancePrompt": "تحسين المطالبة بسياق إضافي",
+	"addImages": "إضافة صور إلى الرسالة",
+	"sendMessage": "إرسال الرسالة",
+	"typeMessage": "اكتب رسالة...",
+	"typeTask": "اكتب مهمتك هنا...",
+	"addContext": "(@ لإضافة سياق، / لتبديل الأوضاع",
+	"dragFiles": "اضغط على shift لسحب الملفات",
+	"dragFilesImages": "اضغط على shift لسحب الملفات/الصور"
+}

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

@@ -0,0 +1,8 @@
+{
+	"title": "ساعد في تحسين Roo Code",
+	"anonymousTelemetry": "إرسال بيانات الاستخدام والأخطاء المجهولة للمساعدة في إصلاح الأخطاء وتحسين الامتداد. لا يتم إرسال أي كود أو نصوص أو معلومات شخصية.",
+	"changeSettings": "يمكنك دائمًا تغيير هذا في أسفل الإعدادات",
+	"settings": "الإعدادات",
+	"allow": "السماح",
+	"deny": "رفض"
+}

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

@@ -0,0 +1,60 @@
+{
+	"greeting": "Què pot fer Roo per tu?",
+	"retry": {
+		"title": "Tornar a intentar",
+		"tooltip": "Torna a provar l'operació"
+	},
+	"startNewTask": {
+		"title": "Començar una nova tasca",
+		"tooltip": "Comença una nova tasca"
+	},
+	"proceedAnyways": {
+		"title": "Continuar de totes maneres",
+		"tooltip": "Continua mentre s'executa l'ordre"
+	},
+	"save": {
+		"title": "Desar",
+		"tooltip": "Desa els canvis del fitxer"
+	},
+	"reject": {
+		"title": "Rebutjar",
+		"tooltip": "Rebutja aquesta acció"
+	},
+	"completeSubtaskAndReturn": "Completar la subtasca i tornar",
+	"approve": {
+		"title": "Aprovar",
+		"tooltip": "Aprova aquesta acció"
+	},
+	"runCommand": {
+		"title": "Executar ordre",
+		"tooltip": "Executa aquesta ordre"
+	},
+	"proceedWhileRunning": {
+		"title": "Continuar mentre s'executa",
+		"tooltip": "Continua malgrat els advertiments"
+	},
+	"resumeTask": {
+		"title": "Reprendre la tasca",
+		"tooltip": "Repren la tasca actual"
+	},
+	"terminate": {
+		"title": "Finalitzar",
+		"tooltip": "Finalitza la tasca actual"
+	},
+	"cancel": {
+		"title": "Cancel·lar",
+		"tooltip": "Cancel·la l'operació actual"
+	},
+	"scrollToBottom": "Desplaça't al final del xat",
+	"aboutMe": "Gràcies als últims avenços en capacitats de codificació intel·ligent, puc gestionar tasques complexes de desenvolupament de programari pas a pas. Amb eines que em permeten crear i editar fitxers, explorar projectes complexos, utilitzar el navegador i executar ordres de terminal (després que em donis permís), puc ajudar-te de maneres que van més enllà de la finalització de codi o el suport tècnic. Fins i tot puc utilitzar MCP per crear noves eines i ampliar les meves capacitats.",
+	"selectMode": "Selecciona el mode d'interacció",
+	"selectApiConfig": "Selecciona la configuració de l'API",
+	"enhancePrompt": "Millora la sol·licitud amb context addicional",
+	"addImages": "Afegeix imatges al missatge",
+	"sendMessage": "Envia el missatge",
+	"typeMessage": "Escriu un missatge...",
+	"typeTask": "Escriu la teva tasca aquí...",
+	"addContext": "(@ per afegir context, / per canviar de mode",
+	"dragFiles": "manté premut shift per arrossegar fitxers",
+	"dragFilesImages": "manté premut shift per arrossegar fitxers/imatges"
+}