-
What can Roo do for you?
+
{t("chat:greeting")}
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
diff --git a/webview-ui/src/components/ui/combobox-primitive.tsx b/webview-ui/src/components/ui/combobox-primitive.tsx
index 13bad87aba..b2c3104a35 100644
--- a/webview-ui/src/components/ui/combobox-primitive.tsx
+++ b/webview-ui/src/components/ui/combobox-primitive.tsx
@@ -50,7 +50,7 @@ export type ComboboxType = "single" | "multiple"
export interface ComboboxBaseProps
extends React.ComponentProps,
- Omit, "value" | "defaultValue" | "onValueChange"> {
+ Omit, "value" | "defaultValue" | "onValueChange" | "children"> {
type?: ComboboxType | undefined
inputValue?: string
defaultInputValue?: string
diff --git a/webview-ui/src/context/ExtensionStateContext.tsx b/webview-ui/src/context/ExtensionStateContext.tsx
index f7292e2721..d79f263e83 100644
--- a/webview-ui/src/context/ExtensionStateContext.tsx
+++ b/webview-ui/src/context/ExtensionStateContext.tsx
@@ -116,7 +116,7 @@ export const ExtensionStateContextProvider: React.FC<{ children: React.ReactNode
enableCheckpoints: true,
checkpointStorage: "task",
fuzzyMatchThreshold: 1.0,
- vscodeLanguage: "en", // Default language code
+ language: "en", // Default language code
enableCustomModeCreation: true,
writeDelayMs: 1000,
browserViewportSize: "900x600",
diff --git a/webview-ui/src/i18n/TranslationContext.tsx b/webview-ui/src/i18n/TranslationContext.tsx
new file mode 100644
index 0000000000..e6115dae6a
--- /dev/null
+++ b/webview-ui/src/i18n/TranslationContext.tsx
@@ -0,0 +1,51 @@
+import React, { createContext, useContext, ReactNode, useEffect } from "react"
+import { useTranslation } from "react-i18next"
+import i18next, { loadTranslations } from "./setup"
+import { useExtensionState } from "@/context/ExtensionStateContext"
+
+// Create context for translations
+export const TranslationContext = createContext<{
+ t: (key: string, options?: Record) => string
+ i18n: typeof i18next
+}>({
+ t: (key: string) => key,
+ i18n: i18next,
+})
+
+// Translation provider component
+export const TranslationProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+ // Initialize with default configuration
+ const { i18n } = useTranslation()
+ // Get the extension state directly - it already contains all state properties
+ const extensionState = useExtensionState()
+
+ // Load translations once when the component mounts
+ useEffect(() => {
+ try {
+ loadTranslations()
+ } catch (error) {
+ console.error("Failed to load translations:", error)
+ }
+ }, [])
+
+ useEffect(() => {
+ i18n.changeLanguage(extensionState.language)
+ }, [i18n, extensionState.language])
+
+ return (
+ ) => {
+ return i18n.t(key, options)
+ },
+ i18n,
+ }}>
+ {children}
+
+ )
+}
+
+// Custom hook for easy translations
+export const useAppTranslation = () => useContext(TranslationContext)
+
+export default TranslationProvider
diff --git a/webview-ui/src/i18n/__tests__/TranslationContext.test.tsx b/webview-ui/src/i18n/__tests__/TranslationContext.test.tsx
new file mode 100644
index 0000000000..0b4dbf8238
--- /dev/null
+++ b/webview-ui/src/i18n/__tests__/TranslationContext.test.tsx
@@ -0,0 +1,52 @@
+import React from "react"
+import { render } from "@testing-library/react"
+import "@testing-library/jest-dom"
+import TranslationProvider, { useAppTranslation } from "../TranslationContext"
+import { setupI18nForTests } from "../test-utils"
+
+// Mock the useExtensionState hook
+jest.mock("@/context/ExtensionStateContext", () => ({
+ useExtensionState: () => ({
+ language: "en",
+ }),
+}))
+
+// Mock component that uses the translation context
+const TestComponent = () => {
+ const { t } = useAppTranslation()
+ return (
+
+
{t("settings.autoApprove.title")}
+
{t("notifications.error", { message: "Test error" })}
+