i18n for chattextarea

Author: mrubens

.roomodes

@@ -1,15 +1,5 @@
 {
   "customModes": [
-    {
-      "slug": "translate",
-      "name": "Translate",
-      "roleDefinition": "You are Roo, a linguistic specialist focused on translating and managing localization files. Your responsibility is to help maintain and update translation files for the application, ensuring consistency and accuracy across all language resources.",
-      "groups": [
-        "read",
-        ["edit", { "fileRegex": "src/i18n/locales/", "description": "Translation files only" }]
-      ],
-      "customInstructions": "When translating content:\n- Maintain consistent terminology across all translations\n- Respect the JSON structure of translation files\n- Consider context when translating UI strings\n- Watch for placeholders (like {{variable}}) and preserve them in translations\n- Be mindful of text length in UI elements when translating to languages that might require more characters\n- If you need context for a translation, use read_file to examine the components using these strings"
-    },
     {
       "slug": "test",
       "name": "Test",
@@ -18,12 +8,32 @@
         "read",
         "browser",
         "command",
-        ["edit", {
-          "fileRegex": "(__tests__/.*|__mocks__/.*|\\.test\\.(ts|tsx|js|jsx)$|/test/.*|jest\\.config\\.(js|ts)$)",
-          "description": "Test files, mocks, and Jest configuration"
-        }]
+        [
+          "edit",
+          {
+            "fileRegex": "(__tests__/.*|__mocks__/.*|\\.test\\.(ts|tsx|js|jsx)$|/test/.*|jest\\.config\\.(js|ts)$)",
+            "description": "Test files, mocks, and Jest configuration"
+          }
+        ]
       ],
       "customInstructions": "When writing tests:\n- Always use describe/it blocks for clear test organization\n- Include meaningful test descriptions\n- Use beforeEach/afterEach for proper test isolation\n- Implement proper error cases\n- Add JSDoc comments for complex test scenarios\n- Ensure mocks are properly typed\n- Verify both positive and negative test cases"
+    },
+    {
+      "slug": "translate",
+      "name": "Translate",
+      "roleDefinition": "You are Roo, a linguistic specialist focused on translating and managing localization files. Your responsibility is to help maintain and update translation files for the application, ensuring consistency and accuracy across all language resources.",
+      "customInstructions": "When internationalizing and translating content:\n\n# Translation Style and Tone\n- Maintain a direct and concise style that mirrors the tone of the original text\n- Carefully account for colloquialisms and idiomatic expressions in both source and target languages\n- Aim for culturally relevant and meaningful translations rather than literal translations\n- Adapt the formality level to match the original content (whether formal or informal)\n- Preserve the personality and voice of the original content\n- Use natural-sounding language that feels native to speakers of the target language\n\n# Technical Implementation\n- Use namespaces to organize translations logically\n- Handle pluralization using i18next's built-in capabilities\n- Implement proper interpolation for variables using {{variable}} syntax\n- Don't include defaultValue. The `en` translations are the fallback.\n\n# Quality Assurance\n- Maintain consistent terminology across all translations\n- Respect the JSON structure of translation files\n- Watch for placeholders and preserve them in translations\n- Be mindful of text length in UI elements when translating to languages that might require more characters\n- Use context-aware translations when the same string has different meanings\n\n# Supported Languages\n- Localize all strings into the following locale files: ar, ca, cs, de, en, es, fr, hi, hu, it, ja, ko, pl, pt, pt-BR, ru, tr, zh-CN, zh-TW",
+      "groups": [
+        "read",
+        [
+          "edit",
+          {
+            "fileRegex": "(.*\\.(md|ts|tsx|js|jsx)$|.*\\.json$)",
+            "description": "Source code, translation files, and documentation"
+          }
+        ]
+      ],
+      "source": "project"
     }
   ]
 }

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

@@ -20,6 +20,7 @@ import Thumbnails from "../common/Thumbnails"
 import { convertToMentionPath } from "../../utils/path-mentions"
 import { MAX_IMAGES_PER_MESSAGE } from "./ChatView"
 import ContextMenu from "./ContextMenu"
+import { useAppTranslation } from "../../i18n/TranslationContext"
 
 interface ChatTextAreaProps {
 	inputValue: string
@@ -56,6 +57,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 		},
 		ref,
 	) => {
+		const { t } = useAppTranslation()
 		const { filePaths, openedTabs, currentApiConfigName, listApiConfigMeta, customModes, cwd } = useExtensionState()
 		const [gitCommits, setGitCommits] = useState<any[]>([])
 		const [showDropdown, setShowDropdown] = useState(false)
@@ -133,12 +135,11 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					}
 					vscode.postMessage(message)
 				} else {
-					const promptDescription =
-						"The 'Enhance Prompt' button helps improve your prompt by providing additional context, clarification, or rephrasing. Try typing a prompt in here and clicking the button again to see how it works."
+					const promptDescription = t("chat:enhancePromptDescription")
 					setInputValue(promptDescription)
 				}
 			}
-		}, [inputValue, textAreaDisabled, setInputValue])
+		}, [inputValue, textAreaDisabled, setInputValue, t])
 
 		const queryItems = useMemo(() => {
 			return [
@@ -475,7 +476,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							const reader = new FileReader()
 							reader.onloadend = () => {
 								if (reader.error) {
-									console.error("Error reading file:", reader.error)
+									console.error(t("chat:errorReadingFile"), reader.error)
 									resolve(null)
 								} else {
 									const result = reader.result
@@ -490,11 +491,11 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 					if (dataUrls.length > 0) {
 						setSelectedImages((prevImages) => [...prevImages, ...dataUrls].slice(0, MAX_IMAGES_PER_MESSAGE))
 					} else {
-						console.warn("No valid images were processed")
+						console.warn(t("chat:noValidImages"))
 					}
 				}
 			},
-			[shouldDisableImages, setSelectedImages, cursorPosition, setInputValue, inputValue],
+			[shouldDisableImages, setSelectedImages, cursorPosition, setInputValue, inputValue, t],
 		)
 
 		const handleThumbnailsHeightChange = useCallback((height: number) => {
@@ -611,7 +612,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								const reader = new FileReader()
 								reader.onloadend = () => {
 									if (reader.error) {
-										console.error("Error reading file:", reader.error)
+										console.error(t("chat:errorReadingFile"), reader.error)
 										resolve(null)
 									} else {
 										const result = reader.result
@@ -634,7 +635,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 								})
 							}
 						} else {
-							console.warn("No valid images were processed")
+							console.warn(t("chat:noValidImages"))
 						}
 					}
 				}}
@@ -779,7 +780,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							<SelectDropdown
 								value={mode}
 								disabled={textAreaDisabled}
-								title="Select mode for interaction"
+								title={t("chat:selectMode")}
 								options={[
 									// Add the shortcut text as a disabled option at the top
 									{
@@ -797,13 +798,13 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 									// Add separator
 									{
 										value: "sep-1",
-										label: "Separator",
+										label: t("chat:separator"),
 										type: DropdownOptionType.SEPARATOR,
 									},
 									// Add Edit option
 									{
 										value: "promptsButtonClicked",
-										label: "Edit...",
+										label: t("chat:edit"),
 										type: DropdownOptionType.ACTION,
 									},
 								]}
@@ -829,7 +830,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							<SelectDropdown
 								value={currentApiConfigName || ""}
 								disabled={textAreaDisabled}
-								title="Select API configuration"
+								title={t("chat:selectApiConfig")}
 								options={[
 									// Add all API configurations
 									...(listApiConfigMeta || []).map((config) => ({
@@ -840,13 +841,13 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 									// Add separator
 									{
 										value: "sep-2",
-										label: "Separator",
+										label: t("chat:separator"),
 										type: DropdownOptionType.SEPARATOR,
 									},
 									// Add Edit option
 									{
 										value: "settingsButtonClicked",
-										label: "Edit...",
+										label: t("chat:edit"),
 										type: DropdownOptionType.ACTION,
 									},
 								]}
@@ -886,7 +887,7 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 									role="button"
 									aria-label="enhance prompt"
 									data-testid="enhance-prompt-button"
-									title="Enhance prompt with additional context"
+									title={t("chat:enhancePrompt")}
 									className={`input-icon-button ${
 										textAreaDisabled ? "disabled" : ""
 									} codicon codicon-sparkle`}
@@ -899,13 +900,13 @@ const ChatTextArea = forwardRef<HTMLTextAreaElement, ChatTextAreaProps>(
 							className={`input-icon-button ${
 								shouldDisableImages ? "disabled" : ""
 							} codicon codicon-device-camera`}
-							title="Add images to message"
+							title={t("chat:addImages")}
 							onClick={() => !shouldDisableImages && onSelectImages()}
 							style={{ fontSize: 16.5 }}
 						/>
 						<span
 							className={`input-icon-button ${textAreaDisabled ? "disabled" : ""} codicon codicon-send`}
-							title="Send message"
+							title={t("chat:sendMessage")}
 							onClick={() => !textAreaDisabled && onSend()}
 							style={{ fontSize: 15 }}
 						/>

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

@@ -42,9 +42,10 @@ interface ChatViewProps {
 export const MAX_IMAGES_PER_MESSAGE = 20 // Anthropic limits to 20 images
 
 const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0
-const modeShortcutText = `${isMac ? "⌘" : "Ctrl"} + . for next mode`
 
 const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryView }: ChatViewProps) => {
+	const { t } = useAppTranslation()
+	const modeShortcutText = `${isMac ? "⌘" : "Ctrl"} + . ${t("chat:forNextMode")}`
 	const {
 		version,
 		clineMessages: messages,
@@ -67,8 +68,6 @@ const ChatView = ({ isHidden, showAnnouncement, hideAnnouncement, showHistoryVie
 		telemetrySetting,
 	} = useExtensionState()
 
-	const { t } = useAppTranslation()
-
 	//const task = messages.length > 0 ? (messages[0].say === "task" ? messages[0] : undefined) : undefined) : undefined
 	const task = useMemo(() => messages.at(0), [messages]) // leaving this less safe version here since if the first message is not a task, then the extension is in a bad state and needs to be debugged (see Cline.abort)
 	const modifiedMessages = useMemo(() => combineApiRequests(combineCommandSequences(messages.slice(1))), [messages])

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

@@ -56,5 +56,11 @@
 	"typeTask": "اكتب مهمتك هنا...",
 	"addContext": "@ لإضافة سياق، / لتبديل الأوضاع",
 	"dragFiles": "اضغط على shift لسحب الملفات",
-	"dragFilesImages": "اضغط على shift لسحب الملفات/الصور"
+	"dragFilesImages": "اضغط على shift لسحب الملفات/الصور",
+	"enhancePromptDescription": "يساعد زر 'تحسين المطالبة' على تحسين طلبك من خلال توفير سياق إضافي أو توضيحات أو إعادة صياغة. جرب كتابة طلب هنا وانقر على الزر مرة أخرى لمعرفة كيفية عمله.",
+	"errorReadingFile": "خطأ في قراءة الملف:",
+	"noValidImages": "لم تتم معالجة أي صور صالحة",
+	"separator": "فاصل",
+	"edit": "تعديل...",
+	"forNextMode": "للوضع التالي"
 }

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

@@ -56,5 +56,11 @@
 	"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"
+	"dragFilesImages": "manté premut shift per arrossegar fitxers/imatges",
+	"enhancePromptDescription": "El botó 'Millora la sol·licitud' ajuda a millorar la teva sol·licitud proporcionant context addicional, aclariments o reformulacions. Prova d'escriure una sol·licitud aquí i fes clic al botó de nou per veure com funciona.",
+	"errorReadingFile": "Error en llegir el fitxer:",
+	"noValidImages": "No s'ha processat cap imatge vàlida",
+	"separator": "Separador",
+	"edit": "Edita...",
+	"forNextMode": "per al següent mode"
 }

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

@@ -56,5 +56,11 @@
 	"typeTask": "Napište svůj úkol zde...",
 	"addContext": "@ pro přidání kontextu, / pro přepnutí režimů",
 	"dragFiles": "podržte shift pro přetažení souborů",
-	"dragFilesImages": "podržte shift pro přetažení souborů/obrázků"
+	"dragFilesImages": "podržte shift pro přetažení souborů/obrázků",
+	"enhancePromptDescription": "Tlačítko 'Vylepšit výzvu' pomáhá zlepšit vaši výzvu poskytnutím dalšího kontextu, objasnění nebo přeformulování. Zkuste zde napsat výzvu a znovu klikněte na tlačítko pro zobrazení, jak to funguje.",
+	"errorReadingFile": "Chyba při čtení souboru:",
+	"noValidImages": "Nebyly zpracovány žádné platné obrázky",
+	"separator": "Oddělovač",
+	"edit": "Upravit...",
+	"forNextMode": "pro další režim"
 }

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

@@ -56,5 +56,11 @@
 	"typeTask": "Geben Sie hier Ihre Aufgabe ein...",
 	"addContext": "@ um Kontext hinzuzufügen, / um Modi zu wechseln",
 	"dragFiles": "Halten Sie die Umschalttaste gedrückt, um Dateien zu ziehen",
-	"dragFilesImages": "Halten Sie die Umschalttaste gedrückt, um Dateien/Bilder zu ziehen"
+	"dragFilesImages": "Halten Sie die Umschalttaste gedrückt, um Dateien/Bilder zu ziehen",
+	"enhancePromptDescription": "Die Schaltfläche 'Eingabeaufforderung verbessern' hilft, Ihre Anfrage durch zusätzlichen Kontext, Klarstellungen oder Umformulierungen zu verbessern. Geben Sie eine Anfrage ein und klicken Sie erneut auf die Schaltfläche, um zu sehen, wie es funktioniert.",
+	"errorReadingFile": "Fehler beim Lesen der Datei:",
+	"noValidImages": "Es wurden keine gültigen Bilder verarbeitet",
+	"separator": "Trennlinie",
+	"edit": "Bearbeiten...",
+	"forNextMode": "für nächsten Modus"
 }

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

@@ -50,11 +50,17 @@
 	"selectMode": "Select mode for interaction",
 	"selectApiConfig": "Select API configuration",
 	"enhancePrompt": "Enhance prompt with additional context",
+	"enhancePromptDescription": "The 'Enhance Prompt' button helps improve your prompt by providing additional context, clarification, or rephrasing. Try typing a prompt in here and clicking the button again to see how it works.",
 	"addImages": "Add images to message",
 	"sendMessage": "Send message",
 	"typeMessage": "Type a message...",
 	"typeTask": "Type your task here...",
 	"addContext": "@ to add context, / to switch modes",
 	"dragFiles": "hold shift to drag in files",
-	"dragFilesImages": "hold shift to drag in files/images"
+	"dragFilesImages": "hold shift to drag in files/images",
+	"errorReadingFile": "Error reading file:",
+	"noValidImages": "No valid images were processed",
+	"separator": "Separator",
+	"edit": "Edit...",
+	"forNextMode": "for next mode"
 }

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

@@ -56,5 +56,11 @@
 	"typeTask": "Escribe tu tarea aquí...",
 	"addContext": "@ para agregar contexto, / para cambiar modos",
 	"dragFiles": "mantén shift para arrastrar archivos",
-	"dragFilesImages": "mantén shift para arrastrar archivos/imágenes"
+	"dragFilesImages": "mantén shift para arrastrar archivos/imágenes",
+	"enhancePromptDescription": "El botón 'Mejorar el mensaje' ayuda a mejorar tu petición proporcionando contexto adicional, aclaraciones o reformulaciones. Intenta escribir una petición aquí y haz clic en el botón nuevamente para ver cómo funciona.",
+	"errorReadingFile": "Error al leer el archivo:",
+	"noValidImages": "No se procesaron imágenes válidas",
+	"separator": "Separador",
+	"edit": "Editar...",
+	"forNextMode": "para el siguiente modo"
 }

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

@@ -56,5 +56,11 @@
 	"typeTask": "Tapez votre tâche ici...",
 	"addContext": "@ pour ajouter du contexte, / pour changer de mode",
 	"dragFiles": "maintenez shift pour glisser des fichiers",
-	"dragFilesImages": "maintenez shift pour glisser des fichiers/images"
+	"dragFilesImages": "maintenez shift pour glisser des fichiers/images",
+	"enhancePromptDescription": "Le bouton 'Améliorer l'invite' aide à améliorer votre demande en fournissant un contexte supplémentaire, des clarifications ou des reformulations. Essayez de taper une demande ici et cliquez à nouveau sur le bouton pour voir comment cela fonctionne.",
+	"errorReadingFile": "Erreur lors de la lecture du fichier :",
+	"noValidImages": "Aucune image valide n'a été traitée",
+	"separator": "Séparateur",
+	"edit": "Modifier...",
+	"forNextMode": "pour le mode suivant"
 }