Extension-side internationalization (#1757)

* Extension-side internationalization

* Update script

* Cleaner esbuild

* Turn off debugging

* PR feedback

* Update src/i18n/locales/en/common.json

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

* Update src/i18n/locales/ca/common.json

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

---------

Co-authored-by: ellipsis-dev[bot] <65095814+ellipsis-dev[bot]@users.noreply.github.com>

Author: mrubens

.roomodes

@@ -22,7 +22,7 @@
       "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- Don't translate the word \"token\" as it means something specific in English that all languages will understand\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- Always use apply_diff instead of write_to_file when editing existing translation files as it's much faster and more reliable\n- When using apply_diff, make sure to carefully identify the exact JSON structure to edit to avoid syntax errors\n- Always use the Trans component for text with embedded components\n- Internationalize and add English strings first, and then ask the user to confirm the approach before translating into all other languages\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- Always validate your translation work by running the missing translations script:\n  ```\n  node scripts/find-missing-translations.js\n  ```\n- Before completing any translation task, ensure there are no missing translations by running the script with the target locale(s):\n  ```\n  node scripts/find-missing-translations.js --locale=<locale-code>\n  ```\n- Address any missing translations identified by the script to ensure complete coverage across all locales\n\n# Supported Languages\n- Localize all strings into the following locale files: ca, de, en, es, fr, hi, it, ja, ko, pl, pt-BR, tr, vi, zh-CN, zh-TW\n- The translation files are under webview-ui/src/i18n/locales/",
+      "customInstructions": "# 1. SUPPORTED LANGUAGES AND LOCATION\n- Localize all strings into the following locale files: ca, de, en, es, fr, hi, it, ja, ko, pl, pt-BR, tr, vi, zh-CN, zh-TW\n- The VSCode extension has two main areas that require localization:\n  * Core Extension: src/i18n/locales/ (extension backend)\n  * WebView UI: webview-ui/src/i18n/locales/ (user interface)\n\n# 2. VOICE, 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- Don't translate the word \"token\" as it means something specific in English that all languages will understand\n\n# 3. CORE EXTENSION LOCALIZATION (src/)\n- Located in src/i18n/locales/\n- NOT ALL strings in core source need internationalization - only user-facing messages\n- Internal error messages, debugging logs, and developer-facing messages should remain in English\n- The t() function is used with namespaces like 'core:errors.missingToolParameter'\n- Be careful when modifying interpolation variables; they must remain consistent across all translations\n- Some strings in formatResponse.ts are intentionally not internationalized since they're internal\n- When updating strings in core.json, maintain all existing interpolation variables\n- Check string usages in the codebase before making changes to ensure you're not breaking functionality\n\n# 4. WEBVIEW UI LOCALIZATION (webview-ui/src/)\n- Located in webview-ui/src/i18n/locales/\n- Uses standard React i18next patterns with the useTranslation hook\n- All user interface strings should be internationalized\n- Always use the Trans component for text with embedded components\n\n# 5. 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- Always use apply_diff instead of write_to_file when editing existing translation files (much faster and more reliable)\n- When using apply_diff, carefully identify the exact JSON structure to edit to avoid syntax errors\n\n# 6. WORKFLOW AND APPROACH\n- First add or modify English strings, then ask for confirmation before translating to all other languages\n- Use this process for each localization task:\n  1. Identify where the string appears in the UI/codebase\n  2. Understand the context and purpose of the string\n  3. Update English translation first\n  4. Create appropriate translations for all other supported languages\n  5. Validate your changes with the missing translations script\n\n# 7. 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- Always validate your translation work by running the missing translations script:\n  ```\n  node scripts/find-missing-translations.js\n  ```\n- Address any missing translations identified by the script to ensure complete coverage across all locales",
       "groups": [
         "read",
         "command",

.vscodeignore

@@ -28,6 +28,7 @@ demo.gif
 .roomodes
 cline_docs/**
 coverage/**
+locales/**
 
 # Ignore all webview-ui files except the build directory (https://github.com/microsoft/vscode-webview-ui-toolkit-samples/blob/main/frameworks/hello-world-react-cra/.vscodeignore)
 webview-ui/src/**

esbuild.js

@@ -63,13 +63,111 @@ const copyWasmFiles = {
 	},
 }
 
+// Simple function to copy locale files
+function copyLocaleFiles() {
+	const srcDir = path.join(__dirname, "src", "i18n", "locales")
+	const destDir = path.join(__dirname, "dist", "i18n", "locales")
+	const outDir = path.join(__dirname, "out", "i18n", "locales")
+
+	// Ensure source directory exists before proceeding
+	if (!fs.existsSync(srcDir)) {
+		console.warn(`Source locales directory does not exist: ${srcDir}`)
+		return // Exit early if source directory doesn't exist
+	}
+
+	// Create destination directories
+	fs.mkdirSync(destDir, { recursive: true })
+	try {
+		fs.mkdirSync(outDir, { recursive: true })
+	} catch (e) {}
+
+	// Function to copy directory recursively
+	function copyDir(src, dest) {
+		const entries = fs.readdirSync(src, { withFileTypes: true })
+
+		for (const entry of entries) {
+			const srcPath = path.join(src, entry.name)
+			const destPath = path.join(dest, entry.name)
+
+			if (entry.isDirectory()) {
+				// Create directory and copy contents
+				fs.mkdirSync(destPath, { recursive: true })
+				copyDir(srcPath, destPath)
+			} else {
+				// Copy the file
+				fs.copyFileSync(srcPath, destPath)
+			}
+		}
+	}
+
+	// Copy files to dist directory
+	copyDir(srcDir, destDir)
+	console.log("Copied locale files to dist/i18n/locales")
+
+	// Copy to out directory for debugging
+	try {
+		copyDir(srcDir, outDir)
+		console.log("Copied locale files to out/i18n/locales")
+	} catch (e) {
+		console.warn("Could not copy to out directory:", e.message)
+	}
+}
+
+// Set up file watcher if in watch mode
+function setupLocaleWatcher() {
+	if (!watch) return
+
+	const localesDir = path.join(__dirname, "src", "i18n", "locales")
+
+	// Ensure the locales directory exists before setting up watcher
+	if (!fs.existsSync(localesDir)) {
+		console.warn(`Cannot set up watcher: Source locales directory does not exist: ${localesDir}`)
+		return
+	}
+
+	console.log(`Setting up watcher for locale files in ${localesDir}`)
+
+	// Use a debounce mechanism
+	let debounceTimer = null
+	const debouncedCopy = () => {
+		if (debounceTimer) clearTimeout(debounceTimer)
+		debounceTimer = setTimeout(() => {
+			console.log("Locale files changed, copying...")
+			copyLocaleFiles()
+		}, 300) // Wait 300ms after last change before copying
+	}
+
+	// Watch the locales directory
+	try {
+		fs.watch(localesDir, { recursive: true }, (eventType, filename) => {
+			if (filename && filename.endsWith(".json")) {
+				console.log(`Locale file ${filename} changed, triggering copy...`)
+				debouncedCopy()
+			}
+		})
+		console.log("Watcher for locale files is set up")
+	} catch (error) {
+		console.error(`Error setting up watcher for ${localesDir}:`, error.message)
+	}
+}
+
+const copyLocalesFiles = {
+	name: "copy-locales-files",
+	setup(build) {
+		build.onEnd(() => {
+			copyLocaleFiles()
+		})
+	},
+}
+
 const extensionConfig = {
 	bundle: true,
 	minify: production,
 	sourcemap: !production,
 	logLevel: "silent",
 	plugins: [
 		copyWasmFiles,
+		copyLocalesFiles,
 		/* add to the end of plugins array */
 		esbuildProblemMatcherPlugin,
 		{
@@ -91,8 +189,17 @@ const extensionConfig = {
 
 async function main() {
 	const extensionCtx = await esbuild.context(extensionConfig)
+
 	if (watch) {
+		// Start the esbuild watcher
 		await extensionCtx.watch()
+
+		// Copy and watch locale files
+		console.log("Copying locale files initially...")
+		copyLocaleFiles()
+
+		// Set up the watcher for locale files
+		setupLocaleWatcher()
 	} else {
 		await extensionCtx.rebuild()
 		await extensionCtx.dispose()

package-lock.json

@@ -345,6 +345,7 @@
 		"fastest-levenshtein": "^1.0.16",
 		"get-folder-size": "^5.0.0",
 		"globby": "^14.0.2",
+		"i18next": "^24.2.2",
 		"isbinaryfile": "^5.0.2",
 		"js-tiktoken": "^1.0.19",
 		"mammoth": "^1.8.0",