@lastbrain/ai-ui-react 1.0.73 → 1.0.74

package/src/components/LBSigninModal.tsx

@@ -6,6 +6,7 @@ import { createPortal } from "react-dom";
 import { AlertCircle, Loader2, Lock, Mail, Sparkles, X } from "lucide-react";
 import { useLB } from "../context/LBAuthProvider";
 import { LBApiKeySelector } from "./LBApiKeySelector";
+import { useI18n } from "../context/I18nContext";
 
 export interface LBSigninModalProps {
   isOpen: boolean;
@@ -14,6 +15,7 @@ export interface LBSigninModalProps {
 
 export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
   const lbContext = useLB();
+  const { t } = useI18n();
   const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null);
 
   const [email, setEmail] = useState("");
@@ -27,7 +29,10 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
 
   const canRender = Boolean(isOpen && lbContext && login);
 
-  const panelTitle = useMemo(() => "Connexion LastBrain", []);
+  const panelTitle = useMemo(
+    () => t("auth.modal.title", "LastBrain Sign In"),
+    [t]
+  );
 
   useEffect(() => {
     setPortalRoot(document.body);
@@ -49,7 +54,7 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
     try {
       const result = await login(email, password);
       if (!result.success) {
-        setError(result.error || "Échec de la connexion");
+        setError(result.error || t("auth.modal.loginFailed", "Login failed"));
         return;
       }
 
@@ -59,7 +64,9 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
       }
 
       if (!fetchApiKeys || !result.accessToken) {
-        setError("Token d'accès non disponible");
+        setError(
+          t("auth.modal.tokenMissing", "Access token unavailable")
+        );
         return;
       }
 
@@ -69,11 +76,15 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
         setShowKeySelector(true);
       } catch (keyError) {
         console.error("Failed to fetch API keys:", keyError);
-        setError("Erreur lors de la récupération des clés API");
+        setError(
+          t("auth.modal.apiKeysFetchError", "Failed to fetch API keys")
+        );
       }
     } catch (err) {
       setError(
-        err instanceof Error ? err.message : "Une erreur s'est produite"
+        err instanceof Error
+          ? err.message
+          : t("auth.modal.genericError", "An error occurred")
       );
     } finally {
       setLoading(false);
@@ -91,7 +102,9 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
       onClose();
     } catch (err) {
       setError(
-        err instanceof Error ? err.message : "Erreur lors de la sélection"
+        err instanceof Error
+          ? err.message
+          : t("auth.modal.selectionError", "Selection error")
       );
       setShowKeySelector(false);
     }
@@ -132,7 +145,7 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
           type="button"
           className="ai-icon-btn ai-signin-close"
           onClick={onClose}
-          aria-label="Fermer"
+          aria-label={t("common.close", "Close")}
         >
           <X size={16} />
         </button>
@@ -145,7 +158,10 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
           </div>
           <h2 className="ai-signin-title">{panelTitle}</h2>
           <p className="ai-signin-subtitle">
-            Connectez-vous pour activer les composants IA dans votre app.
+            {t(
+              "auth.modal.subtitle",
+              "Sign in to enable AI components in your app."
+            )}
           </p>
         </div>
 
@@ -157,7 +173,7 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
                 className="ai-input-label ai-row"
               >
                 <Mail size={14} className="ai-inline-icon" />
-                Email
+                {t("auth.modal.email", "Email")}
               </label>
               <div className="ai-control-group ai-glow">
                 <div className="ai-shell ai-size-md ai-radius-full">
@@ -170,7 +186,7 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
                     required
                     autoFocus
                     autoComplete="email"
-                    placeholder="votre@email.com"
+                    placeholder={t("auth.modal.emailPlaceholder", "your@email.com")}
                   />
                 </div>
               </div>
@@ -182,7 +198,7 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
                 className="ai-input-label ai-row"
               >
                 <Lock size={14} className="ai-inline-icon" />
-                Mot de passe
+                {t("auth.modal.password", "Password")}
               </label>
               <div className="ai-control-group ai-glow">
                 <div className="ai-shell ai-size-md ai-radius-full">
@@ -194,7 +210,7 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
                     onChange={(e) => setPassword(e.target.value)}
                     required
                     autoComplete="current-password"
-                    placeholder="••••••••"
+                    placeholder={t("auth.modal.passwordPlaceholder", "••••••••")}
                   />
                 </div>
               </div>
@@ -216,12 +232,12 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
                 {loading ? (
                   <>
                     <Loader2 size={16} className="ai-spinner" />
-                    Connexion...
+                    {t("auth.modal.connecting", "Signing in...")}
                   </>
                 ) : (
                   <>
                     <Sparkles size={16} />
-                    Se connecter
+                    {t("auth.signIn", "Sign in")}
                   </>
                 )}
               </button>
@@ -232,7 +248,7 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
                 rel="noopener noreferrer"
                 className="ai-btn ai-btn--ghost"
               >
-                Créer un compte
+                {t("auth.modal.createAccount", "Create account")}
               </a>
             </div>
           </form>

package/src/components/UsageToast.tsx

@@ -3,6 +3,7 @@
 import "../styles/register";
 import { useEffect, useRef, useState } from "react";
 import { X } from "lucide-react";
+import { useI18n } from "../context/I18nContext";
 
 interface UsageToastProps {
   result: unknown;
@@ -15,6 +16,7 @@ export function UsageToast({
   position = "bottom-right",
   onComplete,
 }: UsageToastProps) {
+  const { t } = useI18n();
   const [isVisible, setIsVisible] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
   const fadeTimeoutRef = useRef<number | null>(null);
@@ -83,7 +85,7 @@ export function UsageToast({
     // Remove trailing zeros
     formatted = parseFloat(formatted).toString();
 
-    return `${formatted}$ used`;
+    return t("usage.toast.used", "{amount}$ used", { amount: formatted });
   };
 
   const message = extractUsageMessage(result);
@@ -154,7 +156,7 @@ export function UsageToast({
         onMouseLeave={(e) => {
           e.currentTarget.style.backgroundColor = "transparent";
         }}
-        title="Close"
+        title={t("common.closeLabel", "Close")}
       >
         <X size={12} />
       </button>

package/src/context/I18nContext.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { createContext, useContext, useMemo, type ReactNode } from "react";
+import fr from "../i18n/fr.json";
+import en from "../i18n/en.json";
+import es from "../i18n/es.json";
+import it from "../i18n/it.json";
+import de from "../i18n/de.json";
+import pt from "../i18n/pt.json";
+
+export type LBSupportedLang = "fr" | "en" | "es" | "it" | "de" | "pt";
+
+type Dictionary = Record<string, string>;
+
+const dictionaries: Record<LBSupportedLang, Dictionary> = {
+  fr,
+  en,
+  es,
+  it,
+  de,
+  pt,
+};
+
+type TranslateParams = Record<string, string | number>;
+
+interface I18nContextValue {
+  lang: LBSupportedLang;
+  t: (key: string, fallback?: string, params?: TranslateParams) => string;
+}
+
+const defaultLang: LBSupportedLang = "fr";
+
+const I18nContext = createContext<I18nContextValue>({
+  lang: defaultLang,
+  t: (key, fallback, params) => {
+    const template = dictionaries[defaultLang][key] || fallback || key;
+    if (!params) return template;
+    return template.replace(/\{(\w+)\}/g, (_, p: string) =>
+      params[p] !== undefined ? String(params[p]) : `{${p}}`
+    );
+  },
+});
+
+export interface I18nProviderProps {
+  children: ReactNode;
+  lang?: LBSupportedLang;
+}
+
+export function I18nProvider({ children, lang = defaultLang }: I18nProviderProps) {
+  const safeLang: LBSupportedLang = dictionaries[lang] ? lang : defaultLang;
+
+  const value = useMemo<I18nContextValue>(() => {
+    const dict = dictionaries[safeLang] || dictionaries[defaultLang];
+
+    const t = (key: string, fallback?: string, params?: TranslateParams) => {
+      const template = dict[key] || dictionaries[defaultLang][key] || fallback || key;
+      if (!params) return template;
+      return template.replace(/\{(\w+)\}/g, (_, p: string) =>
+        params[p] !== undefined ? String(params[p]) : `{${p}}`
+      );
+    };
+
+    return { lang: safeLang, t };
+  }, [safeLang]);
+
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
+}
+
+export function useI18n() {
+  return useContext(I18nContext);
+}

package/src/context/LBAuthProvider.tsx

@@ -22,6 +22,7 @@ import type {
   AiStatus,
 } from "@lastbrain/ai-ui-core";
 import { createLBClient } from "@lastbrain/ai-ui-core";
+import { I18nProvider, type LBSupportedLang } from "./I18nContext";
 
 export interface ApiKeyUser {
   id?: string;
@@ -66,6 +67,8 @@ interface LBProviderProps {
   onStatusChange?: (status: LBAuthState["status"]) => void;
   /** Fonction appelée après signin/logout pour refresh les providers */
   onAuthChange?: () => void;
+  /** Langue UI globale des composants ai-ui-react */
+  lang?: LBSupportedLang;
 }
 
 interface LBContextValue extends LBAuthState {
@@ -124,6 +127,7 @@ export function LBProvider({
   proxyUrl = "/api/lastbrain",
   onStatusChange,
   onAuthChange,
+  lang = "fr",
 }: LBProviderProps) {
   const [state, setState] = useState<LBAuthState>({
     status: "loading",
@@ -643,7 +647,11 @@ export function LBProvider({
     isLoadingStorage,
   };
 
-  return <LBContext.Provider value={value}>{children}</LBContext.Provider>;
+  return (
+    <I18nProvider lang={lang}>
+      <LBContext.Provider value={value}>{children}</LBContext.Provider>
+    </I18nProvider>
+  );
 }
 
 /**

package/src/hooks/useAiCallImage.ts

@@ -4,129 +4,6 @@ import { useState, useCallback } from "react";
 import type { AiImageRequest, AiImageResponse } from "@lastbrain/ai-ui-core";
 import { useAiClient } from "./useAiClient";
 
-/**
- * Génère une image Canvas pour l'environnement de développement
- */
-async function generateDevImage(
-  prompt: string,
-  width: number,
-  height: number
-): Promise<string> {
-  // Créer un canvas
-  const canvas = document.createElement("canvas");
-  const ctx = canvas.getContext("2d");
-
-  if (!ctx) {
-    throw new Error("Could not create canvas context");
-  }
-
-  canvas.width = width;
-  canvas.height = height;
-
-  // Générer des couleurs basées sur le prompt
-  const promptHash = prompt
-    .split("")
-    .reduce((hash, char) => (hash * 31 + char.charCodeAt(0)) % 255, 0);
-
-  // Couleurs de base dégradées
-  const colors = [
-    `hsl(${(promptHash * 7) % 360}, 70%, 60%)`,
-    `hsl(${(promptHash * 11) % 360}, 60%, 70%)`,
-    `hsl(${(promptHash * 13) % 360}, 50%, 80%)`,
-  ];
-
-  // Créer un dégradé radial
-  const gradient = ctx.createRadialGradient(
-    width / 2,
-    height / 2,
-    0,
-    width / 2,
-    height / 2,
-    Math.max(width, height) / 2
-  );
-
-  gradient.addColorStop(0, colors[0]);
-  gradient.addColorStop(0.5, colors[1]);
-  gradient.addColorStop(1, colors[2]);
-
-  // Remplir le fond
-  ctx.fillStyle = gradient;
-  ctx.fillRect(0, 0, width, height);
-
-  // Ajouter des formes géométriques basées sur le prompt
-  const shapes = prompt.split(" ").slice(0, 5);
-
-  shapes.forEach((word, index) => {
-    const wordHash = word
-      .split("")
-      .reduce((hash, char) => (hash * 31 + char.charCodeAt(0)) % 1000, 0);
-
-    ctx.save();
-    ctx.globalAlpha = 0.3 + index * 0.1;
-    ctx.fillStyle = `hsl(${(wordHash * 17) % 360}, 80%, 50%)`;
-
-    // Formes différentes selon l'index
-    const x = (wordHash % (width - 100)) + 50;
-    const y = ((wordHash * 3) % (height - 100)) + 50;
-    const size = 30 + (wordHash % 50);
-
-    switch (index % 4) {
-      case 0: // Cercle
-        ctx.beginPath();
-        ctx.arc(x, y, size, 0, Math.PI * 2);
-        ctx.fill();
-        break;
-      case 1: // Carré
-        ctx.fillRect(x - size / 2, y - size / 2, size, size);
-        break;
-      case 2: // Triangle
-        ctx.beginPath();
-        ctx.moveTo(x, y - size / 2);
-        ctx.lineTo(x - size / 2, y + size / 2);
-        ctx.lineTo(x + size / 2, y + size / 2);
-        ctx.closePath();
-        ctx.fill();
-        break;
-      case 3: // Losange
-        ctx.save();
-        ctx.translate(x, y);
-        ctx.rotate((wordHash / 100) % (Math.PI * 2));
-        ctx.fillRect(-size / 2, -size / 2, size, size);
-        ctx.restore();
-        break;
-    }
-    ctx.restore();
-  });
-
-  // Ajouter le texte du prompt en overlay
-  ctx.save();
-  ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
-  ctx.font = `bold ${Math.min(width, height) / 30}px system-ui, -apple-system, sans-serif`;
-  ctx.textAlign = "center";
-  ctx.textBaseline = "middle";
-
-  // Fond semi-transparent pour le texte
-  const textMetrics = ctx.measureText(prompt);
-  const textWidth = textMetrics.width;
-  const textHeight = parseInt(ctx.font);
-
-  ctx.fillStyle = "rgba(0, 0, 0, 0.6)";
-  ctx.fillRect(
-    width / 2 - textWidth / 2 - 20,
-    height / 2 - textHeight / 2 - 10,
-    textWidth + 40,
-    textHeight + 20
-  );
-
-  // Texte du prompt
-  ctx.fillStyle = "white";
-  ctx.fillText(prompt, width / 2, height / 2);
-  ctx.restore();
-
-  // Convertir en data URL
-  return canvas.toDataURL("image/png", 0.8);
-}
-
 export interface UseAiCallImageOptions {
   baseUrl?: string;
   apiKeyId?: string;
@@ -150,31 +27,6 @@ export function useAiCallImage(
       setLoading(true);
       setError(null);
       try {
-        // Vérifier si on est en mode dev (API key contient "dev")
-        if (options?.apiKeyId?.includes("dev")) {
-          // Simulation complète pour l'environnement dev
-          await new Promise((resolve) => setTimeout(resolve, 2000)); // Délai réaliste pour simuler l'API
-
-          // Parse size format "1024x1024" or default to "1024x1024"
-          const sizeMatch = request.size?.match(/(\d+)x(\d+)/);
-          const width = sizeMatch ? parseInt(sizeMatch[1]) : 1024;
-          const height = sizeMatch ? parseInt(sizeMatch[2]) : 1024;
-
-          // Créer une image générée avec Canvas
-          const imageUrl = await generateDevImage(
-            request.prompt,
-            width,
-            height
-          );
-
-          return {
-            requestId: `dev-img-${Date.now()}`,
-            url: imageUrl,
-            debitTokens: 30, // Coût simulé
-          };
-        }
-
-        // Mode production : appel API normal
         const result = await client.generateImage(request);
         return result;
       } catch (err) {
@@ -186,7 +38,7 @@ export function useAiCallImage(
         setLoading(false);
       }
     },
-    [client, options?.apiKeyId]
+    [client]
   );
 
   return {

package/src/hooks/useAiCallText.ts

@@ -27,35 +27,6 @@ export function useAiCallText(
       setLoading(true);
       setError(null);
       try {
-        // Vérifier si on est en mode dev (API key contient "dev")
-        if (options?.apiKeyId?.includes("dev")) {
-          // Simulation pour l'environnement dev
-          await new Promise((resolve) => setTimeout(resolve, 1000)); // Délai pour simuler l'API
-
-          let simulatedResult = "";
-
-          // Si le prompt contient des mots-clés pour les chips
-          if (
-            request.prompt.toLowerCase().includes("tags") ||
-            request.prompt.toLowerCase().includes("chip") ||
-            request.prompt.toLowerCase().includes("virgule")
-          ) {
-            simulatedResult =
-              "react, typescript, javascript, frontend, backend, api, development, web, mobile, database";
-          } else {
-            // Lorem ipsum pour les autres cas
-            simulatedResult =
-              "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.";
-          }
-
-          return {
-            requestId: `dev-${Date.now()}`,
-            text: simulatedResult,
-            debitTokens: 150,
-          };
-        }
-
-        // Mode production : appel API normal
         const result = await client.generateText(request);
         return result;
       } catch (err) {
@@ -67,7 +38,7 @@ export function useAiCallText(
         setLoading(false);
       }
     },
-    [client, options?.apiKeyId]
+    [client]
   );
 
   return {

package/src/hooks/useLoadingTimer.ts

@@ -0,0 +1,32 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+function formatElapsed(seconds: number): string {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  if (mins <= 0) return `${secs}s`;
+  return `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+}
+
+export function useLoadingTimer(active: boolean) {
+  const [seconds, setSeconds] = useState(0);
+
+  useEffect(() => {
+    if (!active) {
+      setSeconds(0);
+      return;
+    }
+    setSeconds(0);
+    const id = window.setInterval(() => {
+      setSeconds((prev) => prev + 1);
+    }, 1000);
+    return () => window.clearInterval(id);
+  }, [active]);
+
+  return {
+    seconds,
+    formatted: formatElapsed(seconds),
+  };
+}
+

package/src/i18n/de.json

@@ -0,0 +1,62 @@
+{
+  "common.close": "Schließen",
+  "common.cancel": "Abbrechen",
+  "common.loading": "Lädt...",
+  "common.search": "Suchen...",
+  "common.all": "Alle",
+  "common.unknown": "Unbekannt",
+  "common.error": "Ein Fehler ist aufgetreten",
+  "common.inactive": "Inaktiv",
+  "common.active": "Aktiv",
+  "common.save": "Speichern",
+  "common.download": "Herunterladen",
+  "common.continue": "Weiter",
+  "common.errorTitle": "Fehler",
+  "auth.signIn": "Anmelden",
+  "auth.signOut": "Abmelden",
+  "auth.required": "Authentifizierung erforderlich",
+  "auth.connectRequired": "Verbindung erforderlich",
+  "auth.modal.title": "LastBrain Anmeldung",
+  "auth.modal.subtitle": "Melde dich an, um KI-Komponenten in deiner App zu aktivieren.",
+  "auth.modal.email": "E-Mail",
+  "auth.modal.password": "Passwort",
+  "auth.modal.connecting": "Anmeldung...",
+  "auth.modal.createAccount": "Konto erstellen",
+  "status.title": "API-Status",
+  "status.view": "Status anzeigen",
+  "status.selectApiKey": "API-Schlüssel wählen",
+  "status.user": "Benutzer",
+  "status.apiKey": "API-Schlüssel",
+  "status.env": "Umgebung",
+  "status.rateLimit": "Rate Limit",
+  "status.auth": "Auth",
+  "status.wallet": "Wallet",
+  "status.storage": "Speicher",
+  "status.total": "Gesamt",
+  "status.changeApiKey": "API-Schlüssel wechseln",
+  "status.dashboard": "Dashboard",
+  "status.history": "Verlauf",
+  "status.settings": "Einstellungen",
+  "status.prompts": "Prompts",
+  "status.folders": "Ordner",
+  "status.logout": "Abmelden",
+  "prompt.modal.title": "KI Prompt Konfiguration",
+  "prompt.modal.aiModel": "KI-Modell",
+  "prompt.modal.manageModels": "Modelle verwalten",
+  "prompt.modal.loadingModels": "Modelle werden geladen...",
+  "prompt.modal.prompt": "Prompt",
+  "prompt.modal.browsePrompts": "Prompts durchsuchen",
+  "prompt.modal.cancel": "Abbrechen",
+  "prompt.modal.generate": "Mit KI generieren",
+  "prompt.modal.generating": "Generierung...",
+  "prompt.modal.transforming": "Transformation...",
+  "ai.setup": "KI einrichten",
+  "ai.generate": "Mit KI generieren",
+  "ai.loading.elapsed": "{seconds}",
+  "ai.generationSuccess": "KI-Generierung erfolgreich",
+  "ai.generationError": "Textgenerierung fehlgeschlagen",
+  "ai.image.generate": "Bild generieren",
+  "ai.image.generating": "Generierung...",
+  "ai.image.generatedSuccess": "Bild erfolgreich generiert",
+  "usage.toast.used": "{amount}$ verwendet"
+}