Integrate Internationalization

[globetrotdev]

Integrate Internationalization, add french translation.

Summary by CodeRabbit

Release Notes

• New Features

  • Added multi-language support (English and French) with automatic locale detection and locale-aware navigation.

• Updates

  • Rebranded "Wren AI" to "Kernel IQ" throughout the application.
  • Enhanced component UI to display localized strings based on user's selected language.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: d77b7d2e-ce7d-45a5-8dbe-93629e9e975b

📥 Commits

Reviewing files that changed from the base of the PR and between eea642f and b03980e.

⛔ Files ignored due to path filters (1)

• wren-ui/yarn.lock is excluded by !**/yarn.lock, !**/*.lock

📒 Files selected for processing (40)

• AGENTS.md
• Docs/kb_1.md
• wren-ui/i18n-extract-report.md
• wren-ui/messages/en.json
• wren-ui/messages/fr.json
• wren-ui/next.config.js
• wren-ui/package.json
• wren-ui/scripts/extract-i18n.ts
• wren-ui/src/apollo/server/adaptors/wrenAIAdaptor.ts
• wren-ui/src/apollo/server/config.ts
• wren-ui/src/components/HeaderBar.tsx
• wren-ui/src/components/LogoBar.tsx
• wren-ui/src/components/learning/guide/stories.tsx
• wren-ui/src/components/modals/AdjustSQLModal.tsx
• wren-ui/src/components/modals/CalculatedFieldModal.tsx
• wren-ui/src/components/modals/InstructionModal.tsx
• wren-ui/src/components/modals/QuestionSQLPairModal.tsx
• wren-ui/src/components/modals/SaveAsViewModal.tsx
• wren-ui/src/components/pages/home/promptThread/AnswerResult.tsx
• wren-ui/src/components/pages/home/promptThread/ChartAnswer.tsx
• wren-ui/src/components/settings/DataSourceSettings.tsx
• wren-ui/src/components/settings/ProjectSettings.tsx
• wren-ui/src/components/settings/index.tsx
• wren-ui/src/components/sidebar/Home.tsx
• wren-ui/src/components/sidebar/Knowledge.tsx
• wren-ui/src/components/sidebar/modeling/ModelTree.tsx
• wren-ui/src/i18n/config.ts
• wren-ui/src/i18n/loadMessages.ts
• wren-ui/src/i18n/navigation.ts
• wren-ui/src/pages/_app.tsx
• wren-ui/src/pages/_document.tsx
• wren-ui/src/pages/api/v1/knowledge/instructions/[id].ts
• wren-ui/src/pages/api/v1/knowledge/instructions/index.ts
• wren-ui/src/pages/home/[id].tsx
• wren-ui/src/pages/home/dashboard.tsx
• wren-ui/src/pages/home/index.tsx
• wren-ui/src/pages/knowledge/instructions.tsx
• wren-ui/src/pages/knowledge/question-sql-pairs.tsx
• wren-ui/src/pages/modeling.tsx
• wren-ui/src/types/next-intl.d.ts

---

Walkthrough

This PR implements comprehensive internationalization (i18n) support in wren-ui using next-intl, introducing English and French translation files, locale-based routing and message loading, an automated i18n extraction script, and updating ~30 components to use translated strings. It also renames branding references from "Wren AI" to "Kernel IQ" across the codebase and adds architectural documentation.

Changes

Cohort / File(s)	Summary
I18n Infrastructure & Configuration next.config.js, i18n/config.ts, i18n/loadMessages.ts, i18n/navigation.ts, types/next-intl.d.ts	Added i18n config with locales ['en', 'fr'], locale detection, and message loading utilities. Introduced pushWithLocale for locale-aware routing and AppLocale type for locale safety.
Message Files messages/en.json, messages/fr.json	Added 591 English translation entries and 134 French translations covering navigation, modals, toasts, and UI labels across all major components.
Extraction & Automation scripts/extract-i18n.ts, i18n-extract-report.md, package.json	Created automated extraction script scanning TypeScript files for JSX text and message() calls, generating translation keys and updating en.json. Produces extraction report and adds extract-i18n npm script.
App-Level I18n Integration _app.tsx, _document.tsx, package.json	Wrapped app with NextIntlClientProvider, added per-request message loading via getInitialProps, locale-aware HTML lang attribute, and alternate hreflang links. Added next-intl ^3.26.5 dependency.
Modal Components Localization components/modals/AdjustSQLModal.tsx, CalculatedFieldModal.tsx, InstructionModal.tsx, QuestionSQLPairModal.tsx, SaveAsViewModal.tsx	Replaced hardcoded strings with t('...') translation lookups for titles, button labels, form fields, placeholders, and help text.
Settings Components Localization components/settings/DataSourceSettings.tsx, ProjectSettings.tsx, components/settings/index.tsx	Updated confirmation dialogs, warning messages, and section labels with localized strings; updated version display to reference "Kernel IQ".
Navigation & Sidebar Localization components/HeaderBar.tsx, sidebar/Home.tsx, sidebar/Knowledge.tsx	Added useTranslations and replaced button labels, menu items, and navigation actions with localized strings and pushWithLocale routing.
Page Components Localization pages/home/index.tsx, home/[id].tsx, home/dashboard.tsx, knowledge/instructions.tsx, knowledge/question-sql-pairs.tsx, modeling.tsx	Updated toast messages, page headers, descriptions, and section titles to use t('...') lookups across recommendation questions, knowledge management, and modeling operations.
Chart & Learning Guide Localization components/pages/home/promptThread/ChartAnswer.tsx, AnswerResult.tsx, components/learning/guide/stories.tsx, components/sidebar/modeling/ModelTree.tsx	Added translation hooks for confirmation modals, regenerate/pin actions, toast messages, and schema change notifications. Updated guide references to "Kernel IQ".
Branding Updates apollo/server/adaptors/wrenAIAdaptor.ts, apollo/server/config.ts, components/LogoBar.tsx, pages/api/v1/knowledge/instructions/[id].ts, pages/api/v1/knowledge/instructions/index.ts	Renamed "Wren AI" to "Kernel IQ" in error messages, comments, logo display, and documentation across adaptor, config, and API endpoints.
Documentation AGENTS.md, Docs/kb_1.md	Added operational guidance for agentic coding agents covering repository conventions, build commands, and delivery checklist. Added comprehensive i18n rollout plan with migration strategy, architecture, and recipes.

Sequence Diagram(s)

sequenceDiagram
    participant Browser
    participant NextApp as Next.js App (_app.tsx)
    participant Router as Next Router
    participant MessageLoader as Message Loader
    participant Provider as NextIntlClientProvider
    participant Component as UI Component
    
    Browser->>NextApp: Request with locale
    NextApp->>Router: Extract router.locale
    NextApp->>MessageLoader: loadMessages(locale)
    MessageLoader-->>NextApp: AbstractIntlMessages
    NextApp->>Provider: Wrap with NextIntlClientProvider<br/>(messages, locale)
    Provider->>Component: Provide i18n context
    Component->>Component: useTranslations()
    Component->>Component: t('translation.key')
    Component-->>Browser: Render localized UI

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Possibly related PRs

• feat(wren-ui): Reasoning enhancement & SQL pair in asking flow #1471 — Modifies wren-ui/src/apollo/server/adaptors/wrenAIAdaptor.ts to add sqlpairId in transformAskResult; this PR also updates the same adaptor file for branding changes.
• feat(wren-ui): Add Question-SQL Pairs guide #1387 — Updates wren-ui/src/components/learning/guide/stories.tsx with new Question-SQL guide functions; this PR modifies the same file for "Kernel IQ" branding and i18n integration.
• feat(wren-ui): Integrate API to implement instructions UI #1433 — Modifies Knowledge sidebar component and learning guide stories; this PR includes similar changes to Knowledge.tsx and guide stories for i18n support.

Suggested labels

wren-ui, i18n, internationalization, feature

Suggested reviewers

• wwwy3y3
• fredalai
• onlyjackfrost

Poem

🌍 A rabbit hops through strings so fine,
Where English flows and French align,
From Wren to Kernel, rebranding bright,
Each component glows in locales' light! ✨
Messages extracted, auto with care,
Translation magic fills the air! 🐰

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can approve the review once all CodeRabbit's comments are resolved.

Enable the reviews.request_changes_workflow setting to automatically approve the review once all CodeRabbit's comments are resolved.