Internationalization (i18n)
Relevant source files
The following files were used as context for generating this wiki page:
The Internationalization (i18n) system in Vinesight is a critical feature designed to make the application accessible to its target audience of Indian grape farmers. It provides a multi-language user experience, supporting English, Hindi, and Marathi. The system is built using the i18next and react-i18next libraries, ensuring a standard and robust implementation for translating UI components, static content, and even dynamic AI-generated responses.
This system is a core requirement outlined in the product documentation, aiming to replace manual notebooks with an easy-to-use digital tool that communicates with users in their native language. The i18n implementation extends beyond simple UI text to integral features like the AI Assistant, which leverages the selected language for natural language processing and speech recognition.
Sources: context/PRD.md:14-14, AGENTS.md:12-12, package.json:36-36
Architecture and Core Technologies
The i18n architecture is centered around the i18next framework and its React integration, react-i18next. The entire application is wrapped in an I18nProvider at the root level, which provides the i18n instance and translation functions to all child components via React's context API.
The core components of the system are:
i18next&react-i18next: The libraries providing the core translation functionality and React hooks.i18n.ts: The central configuration file where languages, translation resources, and initialization options are defined.I18nProvider: A React component that initializes and provides the i18n context to the application.language-switcher.tsx: A UI component (inferred) that allows users to change the application's language.useTranslationhook: The primary mechanism used within components to access the translation function (t) and the i18n instance.
Sources: package.json:36-36, src/lib/i18n.ts, src/app/layout.tsx:130-132
System Flow
The following diagram illustrates the basic flow of the i18n system from initialization to rendering translated content.
This diagram shows how I18nProvider wraps the application, enabling components to use the useTranslation hook and re-render when the language is changed.
Sources: src/app/layout.tsx:130-132, src/components/ai/AIAssistant.tsx:32-32
Configuration
The entire i18n system is configured and initialized in src/lib/i18n.ts. This file defines the available languages, loads the translation strings, and sets up the i18next instance.
Sources: src/lib/i18n.ts
Initialization Options
The i18next instance is initialized with a specific set of options that control its behavior.
// src/lib/i18n.ts:1010-1017
i18n.use(initReactI18next).init({
resources,
lng: 'en', // Default language
fallbackLng: 'en',
debug: false,
interpolation: {
escapeValue: false,
},
})
Sources: src/lib/i18n.ts:1010-1017
The configuration options are detailed in the table below:
| Option | Value | Description |
|---|---|---|
resources | resources object | An object containing all translation strings for all supported languages. |
lng | 'en' | Sets the default language of the application to English. |
fallbackLng | 'en' | If a translation key is not found in the current language, it will fall back to English. |
debug | false | Disables debug logging for the i18next instance in production. |
interpolation.escapeValue | false | Prevents i18next from escaping values, as React already protects against XSS. |
Sources: src/lib/i18n.ts:1010-1017
Supported Languages
The application is designed to support English, Hindi, and Marathi, catering to the primary languages of its target users in India.
| Language | Code |
|---|---|
| English | en |
| Hindi | hi |
| Marathi | mr |
Sources: src/lib/i18n.ts:5-5, src/lib/i18n.ts:341-341, src/lib/i18n.ts:675-675
Translation Resources
All translation strings are stored directly within the src/lib/i18n.ts file in a resources object. This object is structured by language code, with each language containing a translation object.
Resource Structure
The keys are organized hierarchically by feature or component, which promotes maintainability and logical grouping of related strings.
// src/lib/i18n.ts:4-339
const resources = {
en: {
translation: {
// Navigation
navigation: {
dashboard: 'Dashboard',
farmManagement: 'Farm Management',
// ...
},
// Common UI elements
common: {
save: 'Save',
cancel: 'Cancel',
// ...
},
// ... other categories
},
},
hi: {
translation: {
// ... Hindi translations
}
},
mr: {
translation: {
// ... Marathi translations
}
}
}
Sources: src/lib/i18n.ts:4-1008
Key Categories
The translation keys are grouped into several high-level categories:
| Category | Description | Example Key |
|---|---|---|
navigation | Text for main navigation links. | navigation.dashboard |
common | Commonly used UI text like button labels. | common.save |
home | Content for the homepage. | home.title |
farm | Strings related to farm management. | farm.addFarm |
calculators | Text for the various agricultural calculators. | calculators.etc.title |
journal | Labels and titles for the operations journal. | journal.irrigation.title |
export | Text for the data export feature. | export.generateExport |
growthStages | Names of grape growth stages. | growthStages.dormant |
irrigationMethods | Names of irrigation methods. | irrigationMethods.drip |
soilTypes | Names of different soil types. | soilTypes.sandy |
units | Display names for various units of measurement. | units.acres |
Sources: src/lib/i18n.ts:7-336
Integration and Usage
The i18n system is integrated into the application at the root level and consumed by components via a React hook.
Application Provider
The I18nProvider component wraps the entire application within the RootLayout, ensuring that the i18n instance is available everywhere.
// src/app/layout.tsx:126-134
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
// ...
<I18nProvider>
<LayoutContent>{children}</LayoutContent>
</I18nProvider>
// ...
)
}
Sources: src/app/layout.tsx:130-132
useTranslation Hook
Components access translation functionality using the useTranslation hook from react-i18next. This hook provides the t function for translating strings and the i18n instance for accessing language properties.
The following example from the AIAssistant component demonstrates its usage:
// src/components/ai/AIAssistant.tsx:32, 40-42
import { useTranslation } from 'react-i18next'
// ...
export function AIAssistant(...) {
const { t, i18n } = useTranslation()
// ...
<span className="text-base sm:text-lg">{t('ai_assistant', 'AI Assistant')}</span>
// ...
}
The t() function takes the translation key (e.g., 'ai_assistant') and an optional default value ('AI Assistant').
Sources: src/components/ai/AIAssistant.tsx:32-32, src/components/ai/AIAssistant.tsx:40-42
AI Assistant and Language Integration
The i18n system is deeply integrated into the AI Assistant to provide a localized experience. The current language, accessed via i18n.language, is used to:
- Display a welcome message in the user's selected language.
- Set the language for the browser's Speech Recognition API.
- Provide context to the backend AI service, ensuring responses are generated in the correct language.
The sequence diagram below shows how the user's language setting influences the AI Assistant's behavior.
This diagram illustrates how the i18n.language property is used to configure the speech recognition and to request a localized response from the AI.
Sources: src/components/ai/AIAssistant.tsx:109-111, src/components/ai/AIAssistant.tsx:162-167, src/components/ai/AIAssistant.tsx:244-247
Conclusion
The internationalization system in Vinesight is a well-structured and essential feature that enables the application to serve its diverse, multilingual user base in India. By leveraging i18next and react-i18next, the system provides a centralized and scalable way to manage translations for English, Hindi, and Marathi. Its integration extends beyond simple UI text into complex components like the AI Assistant, demonstrating a commitment to providing a fully localized and accessible user experience, which is a primary goal of the project.
Sources: context/PRD.md:14-14, src/lib/i18n.ts