langchain-ai · ckemmler · Apr 28, 2025
diff --git a/locales/de.json b/locales/de.json
@@ -0,0 +1,6 @@
+{
+   "send": "Senden",
+   "hide-tool-calls": "Werkzeugaufrufe ausblenden",
+   "thread-history": "Verlauf der Unterhaltung",
+   "type-message": "Nachricht eingeben"
+}
diff --git a/locales/en.json b/locales/en.json
@@ -0,0 +1,6 @@
+{
+   "send": "Send",
+   "hide-tool-calls": "Hide tool calls",
+   "thread-history": "Thread history",
+   "type-message": "Type your message"
+}
diff --git a/locales/es.json b/locales/es.json
@@ -0,0 +1,6 @@
+{
+   "send": "Enviar",
+   "hide-tool-calls": "Ocultar llamadas de herramientas",
+   "thread-history": "Historial de conversación",
+   "type-message": "Escribe tu mensaje"
+}
diff --git a/locales/fr.json b/locales/fr.json
@@ -0,0 +1,6 @@
+{
+   "send": "Envoyer",
+   "hide-tool-calls": "Masquer les appels d'outils",
+   "thread-history": "Historique",
+   "type-message": "Tapez votre message"
+}
diff --git a/locales/it.json b/locales/it.json
@@ -0,0 +1,6 @@
+{
+   "send": "Invia",
+   "hide-tool-calls": "Nascondi chiamate degli strumenti",
+   "thread-history": "Cronologia delle conversazioni",
+   "type-message": "Scrivi il tuo messaggio"
+}
diff --git a/locales/nl.json b/locales/nl.json
@@ -0,0 +1,6 @@
+{
+   "send": "Verzenden",
+   "hide-tool-calls": "Hulpoproepen verbergen",
+   "thread-history": "Gespreksgeschiedenis",
+   "type-message": "Typ uw bericht"
+}
diff --git a/locales/pt.json b/locales/pt.json
@@ -0,0 +1,6 @@
+{
+   "send": "Enviar",
+   "hide-tool-calls": "Ocultar chamadas de ferramentas",
+   "thread-history": "Histórico de conversa",
+   "type-message": "Digite sua mensagem"
+}
diff --git a/locales/ru.json b/locales/ru.json
@@ -0,0 +1,6 @@
+{
+   "send": "Отправить",
+   "hide-tool-calls": "Скрыть вызовы инструментов",
+   "thread-history": "История переписки",
+   "type-message": "Введите ваше сообщение"
+}
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "nuqs": "^2.4.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-intl": "^7.1.11",
     "react-markdown": "^10.0.1",
     "react-syntax-highlighter": "^15.5.0",
     "recharts": "^2.15.1",
@@ -84,5 +85,5 @@
     "react-is": "^19.0.0-rc-69d4b800-20241021",
     "@langchain/langgraph-checkpoint": "^0.0.16"
   },
-  "packageManager": "pnpm@10.5.1"
+  "packageManager": "pnpm@10.10.0"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import "./globals.css";
 import { Inter } from "next/font/google";
 import React from "react";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
+import I18nProvider from "@/components/I18nProvider";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -21,10 +22,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={inter.className}>
-        <NuqsAdapter>{children}</NuqsAdapter>
-      </body>
-    </html>
+    <I18nProvider>
+      <html lang="en">
+        <body className={inter.className}>
+          <NuqsAdapter>{children}</NuqsAdapter>
+        </body>
+      </html>
+    </I18nProvider>
   );
 }
diff --git a/src/components/I18nProvider.tsx b/src/components/I18nProvider.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { IntlProvider } from "react-intl";
+import en from "../../locales/en.json";
+import fr from "../../locales/fr.json";
+import nl from "../../locales/nl.json";
+import de from "../../locales/de.json";
+import es from "../../locales/es.json";
+import it from "../../locales/it.json";
+import pt from "../../locales/pt.json";
+import ru from "../../locales/ru.json";
+import { createContext, useContext, useState } from "react";
+
+const messages = {
+  en,
+  fr,
+  nl,
+  de,
+  es,
+  it,
+  pt,
+  ru,
+};
+
+type LocaleContextType = {
+  locale: keyof typeof messages;
+  setLocale: React.Dispatch<React.SetStateAction<keyof typeof messages>>;
+};
+
+const LocaleContext = createContext<LocaleContextType | undefined>(undefined);
+
+export function useLocale() {
+  const context = useContext(LocaleContext);
+  if (!context) {
+    throw new Error("useLocale must be used within a LocaleProvider");
+  }
+  return context;
+}
+
+export default function I18nProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [locale, setLocale] = useState<keyof typeof messages>("en");
+
+  return (
+    <LocaleContext.Provider value={{ locale, setLocale }}>
+      <IntlProvider
+        locale={locale}
+        messages={messages[locale]}
+      >
+        {children}
+      </IntlProvider>
+    </LocaleContext.Provider>
+  );
+}