@lastbrain/ai-ui-react 1.0.72 → 1.0.74

package/dist/i18n/it.json

@@ -0,0 +1,62 @@
+{
+  "common.close": "Chiudi",
+  "common.cancel": "Annulla",
+  "common.loading": "Caricamento...",
+  "common.search": "Cerca...",
+  "common.all": "Tutti",
+  "common.unknown": "Sconosciuto",
+  "common.error": "Si è verificato un errore",
+  "common.inactive": "Inattivo",
+  "common.active": "Attivo",
+  "common.save": "Salva",
+  "common.download": "Scarica",
+  "common.continue": "Continua",
+  "common.errorTitle": "Errore",
+  "auth.signIn": "Accedi",
+  "auth.signOut": "Disconnetti",
+  "auth.required": "Autenticazione richiesta",
+  "auth.connectRequired": "Connessione richiesta",
+  "auth.modal.title": "Accesso LastBrain",
+  "auth.modal.subtitle": "Accedi per attivare i componenti IA nella tua app.",
+  "auth.modal.email": "Email",
+  "auth.modal.password": "Password",
+  "auth.modal.connecting": "Accesso in corso...",
+  "auth.modal.createAccount": "Crea account",
+  "status.title": "Stato API",
+  "status.view": "Vedi stato",
+  "status.selectApiKey": "Seleziona una chiave API",
+  "status.user": "Utente",
+  "status.apiKey": "Chiave API",
+  "status.env": "Ambiente",
+  "status.rateLimit": "Rate Limit",
+  "status.auth": "Auth",
+  "status.wallet": "Portafoglio",
+  "status.storage": "Storage",
+  "status.total": "Totale",
+  "status.changeApiKey": "Cambia chiave API",
+  "status.dashboard": "Dashboard",
+  "status.history": "Cronologia",
+  "status.settings": "Impostazioni",
+  "status.prompts": "Prompt",
+  "status.folders": "Cartelle",
+  "status.logout": "Disconnetti",
+  "prompt.modal.title": "Configurazione Prompt IA",
+  "prompt.modal.aiModel": "Modello IA",
+  "prompt.modal.manageModels": "Gestisci modelli",
+  "prompt.modal.loadingModels": "Caricamento modelli...",
+  "prompt.modal.prompt": "Prompt",
+  "prompt.modal.browsePrompts": "Sfoglia prompt",
+  "prompt.modal.cancel": "Annulla",
+  "prompt.modal.generate": "Genera con IA",
+  "prompt.modal.generating": "Generazione...",
+  "prompt.modal.transforming": "Trasformazione...",
+  "ai.setup": "Configura IA",
+  "ai.generate": "Genera con IA",
+  "ai.loading.elapsed": "{seconds}",
+  "ai.generationSuccess": "Generazione IA completata",
+  "ai.generationError": "Errore durante la generazione del testo",
+  "ai.image.generate": "Genera immagine",
+  "ai.image.generating": "Generazione...",
+  "ai.image.generatedSuccess": "Immagine generata con successo",
+  "usage.toast.used": "{amount}$ usati"
+}

package/dist/i18n/pt.json

@@ -0,0 +1,62 @@
+{
+  "common.close": "Fechar",
+  "common.cancel": "Cancelar",
+  "common.loading": "Carregando...",
+  "common.search": "Pesquisar...",
+  "common.all": "Todos",
+  "common.unknown": "Desconhecido",
+  "common.error": "Ocorreu um erro",
+  "common.inactive": "Inativo",
+  "common.active": "Ativo",
+  "common.save": "Salvar",
+  "common.download": "Baixar",
+  "common.continue": "Continuar",
+  "common.errorTitle": "Erro",
+  "auth.signIn": "Entrar",
+  "auth.signOut": "Sair",
+  "auth.required": "Autenticação obrigatória",
+  "auth.connectRequired": "Conexão obrigatória",
+  "auth.modal.title": "Login LastBrain",
+  "auth.modal.subtitle": "Entre para ativar os componentes de IA no seu app.",
+  "auth.modal.email": "Email",
+  "auth.modal.password": "Senha",
+  "auth.modal.connecting": "Entrando...",
+  "auth.modal.createAccount": "Criar conta",
+  "status.title": "Status da API",
+  "status.view": "Ver status",
+  "status.selectApiKey": "Selecionar chave API",
+  "status.user": "Usuário",
+  "status.apiKey": "Chave API",
+  "status.env": "Ambiente",
+  "status.rateLimit": "Limite",
+  "status.auth": "Auth",
+  "status.wallet": "Carteira",
+  "status.storage": "Armazenamento",
+  "status.total": "Total",
+  "status.changeApiKey": "Trocar chave API",
+  "status.dashboard": "Painel",
+  "status.history": "Histórico",
+  "status.settings": "Configurações",
+  "status.prompts": "Prompts",
+  "status.folders": "Pastas",
+  "status.logout": "Sair",
+  "prompt.modal.title": "Configuração de Prompt IA",
+  "prompt.modal.aiModel": "Modelo IA",
+  "prompt.modal.manageModels": "Gerenciar modelos",
+  "prompt.modal.loadingModels": "Carregando modelos...",
+  "prompt.modal.prompt": "Prompt",
+  "prompt.modal.browsePrompts": "Ver prompts",
+  "prompt.modal.cancel": "Cancelar",
+  "prompt.modal.generate": "Gerar com IA",
+  "prompt.modal.generating": "Gerando...",
+  "prompt.modal.transforming": "Transformando...",
+  "ai.setup": "Configurar IA",
+  "ai.generate": "Gerar com IA",
+  "ai.loading.elapsed": "{seconds}",
+  "ai.generationSuccess": "Geração de IA concluída",
+  "ai.generationError": "Falha ao gerar texto",
+  "ai.image.generate": "Gerar imagem",
+  "ai.image.generating": "Gerando...",
+  "ai.image.generatedSuccess": "Imagem gerada com sucesso",
+  "usage.toast.used": "{amount}$ usado"
+}

package/dist/index.d.ts

@@ -2,6 +2,7 @@ import "./styles.css";
 export * from "./types";
 export * from "./context/AiProvider";
 export * from "./context/LBAuthProvider";
+export * from "./context/I18nContext";
 export * from "./hooks/useAiClient";
 export * from "./hooks/useAiModels";
 export * from "./hooks/useAiStatus";
@@ -10,6 +11,7 @@ export * from "./hooks/useAiCallImage";
 export * from "./hooks/usePrompts";
 export * from "./hooks/useModelManagement";
 export * from "./hooks/useLB";
+export * from "./hooks/useLoadingTimer";
 export * from "./components/AiPromptPanel";
 export * from "./components/AiModelSelect";
 export * from "./components/AiInput";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,cAAc,SAAS,CAAC;AAGxB,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AAGzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAG9B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC;AAGzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAG9B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,gCAAgC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAGtB,cAAc,SAAS,CAAC;AAGxB,cAAc,sBAAsB,CAAC;AACrC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AAGxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,0BAA0B,CAAC;AAGzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAG9B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,gCAAgC,CAAC"}

package/dist/index.js

@@ -4,6 +4,7 @@ export * from "./types";
 // Context
 export * from "./context/AiProvider";
 export * from "./context/LBAuthProvider";
+export * from "./context/I18nContext";
 // Hooks
 export * from "./hooks/useAiClient";
 export * from "./hooks/useAiModels";
@@ -13,6 +14,7 @@ export * from "./hooks/useAiCallImage";
 export * from "./hooks/usePrompts";
 export * from "./hooks/useModelManagement";
 export * from "./hooks/useLB";
+export * from "./hooks/useLoadingTimer";
 // Components
 export * from "./components/AiPromptPanel";
 export * from "./components/AiModelSelect";

package/dist/styles.css

@@ -122,7 +122,7 @@
 /* Base surface */
 .ai-surface {
   border: 1px solid var(--ai-border);
-  border-radius: var(--ai-radius-current, var(--ai-radius-md));
+  border-radius: 6px;
   color: var(--ai-foreground);
   background:
     linear-gradient(180deg, var(--ai-bg2), var(--ai-bg2)),
@@ -518,6 +518,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
+  margin-top: 6px;
 }
 
 .ai-chip {
@@ -600,6 +601,14 @@
   margin-bottom: 10px;
 }
 
+.ai-popover-header--sub {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  margin-bottom: 8px;
+  color: var(--ai-foreground);
+}
+
 .ai-popover-section {
   padding: 12px 0;
   border-top: 1px solid color-mix(in srgb, var(--ai-border) 72%, transparent);
@@ -647,6 +656,7 @@
 }
 
 .ai-status-action-btn {
+  position: relative;
   border: 1px solid color-mix(in srgb, var(--ai-primary) 34%, var(--ai-border));
   border-radius: 12px;
   width: 34px;
@@ -666,6 +676,34 @@
   transform: translateY(-1px);
 }
 
+.ai-status-action-btn[data-ai-tip]::after {
+  content: attr(data-ai-tip);
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 8px);
+  transform: translate(-50%, 4px);
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 2147483647;
+  padding: 4px 8px;
+  border-radius: 8px;
+  border: 1px solid var(--ai-border);
+  background: var(--ai-bg2);
+  color: var(--ai-foreground);
+  font-size: 11px;
+  font-weight: 600;
+  box-shadow: var(--ai-shadow-sm);
+  transition:
+    opacity var(--ai-transition),
+    transform var(--ai-transition);
+}
+
+.ai-status-action-btn[data-ai-tip]:hover::after {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
 .ai-status-trigger {
   position: relative;
   border: 1px solid var(--ai-border);
@@ -725,6 +763,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  color: var(--ai-primary);
   pointer-events: none;
 }
 
@@ -1144,6 +1183,12 @@
   background: color-mix(in srgb, var(--ai-bg2) 82%, transparent);
 }
 
+.ai-pill--warning {
+  color: #f59e0b;
+  border-color: color-mix(in srgb, #f59e0b 40%, var(--ai-border));
+  background: color-mix(in srgb, #f59e0b 14%, var(--ai-bg2));
+}
+
 .ai-toggle {
   position: relative;
   display: inline-flex;
@@ -1368,6 +1413,41 @@
   letter-spacing: 0.01em;
 }
 
+.ai-control-timer {
+  position: absolute;
+  right: 10px;
+  top: calc(100% + 5px);
+  font-size: 11px;
+  line-height: 1;
+  color: var(--ai-tertiary);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.ai-loading-stack {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+}
+
+.ai-loading-row {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.ai-loading-meta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  line-height: 1;
+  color: color-mix(in srgb, var(--ai-foreground) 68%, transparent);
+}
+
 .ai-inline-icon {
   color: var(--ai-muted);
 }
@@ -1379,6 +1459,67 @@
   animation: ai-pulse 1.4s ease-in-out infinite;
 }
 
+.ai-kv-skeleton--48 {
+  width: 48px;
+}
+
+.ai-kv-skeleton--92 {
+  width: 92px;
+}
+
+.ai-kv-skeleton--110 {
+  width: 110px;
+}
+
+.ai-kv-skeleton--120 {
+  width: 120px;
+}
+
+.ai-kv-skeleton--circle {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+}
+
+.ai-inline-skeleton {
+  display: inline-flex;
+  align-items: center;
+  min-width: 124px;
+  height: 30px;
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--ai-primary) 12%, var(--ai-bg2));
+  animation: ai-pulse 1.4s ease-in-out infinite;
+}
+
+.ai-list-skeleton {
+  border: 1px solid var(--ai-border);
+  border-radius: 12px;
+  background:
+    linear-gradient(180deg, var(--ai-bg2), var(--ai-bg2)),
+    radial-gradient(
+      120% 120% at 100% 0%,
+      rgba(var(--ai-glow-rgb), 0.05),
+      transparent 76%
+    );
+  padding: 14px 16px;
+}
+
+.ai-list-skeleton__line {
+  height: 12px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--ai-primary) 14%, var(--ai-bg2));
+  animation: ai-pulse 1.4s ease-in-out infinite;
+}
+
+.ai-list-skeleton__line--lg {
+  width: 56%;
+  margin-bottom: 10px;
+}
+
+.ai-list-skeleton__line--md {
+  width: 34%;
+}
+
 .ai-spinner,
 .ai-spin {
   animation: ai-spin 1s linear infinite;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/ai-ui-react",
-  "version": "1.0.72",
+  "version": "1.0.74",
   "description": "Headless React components for LastBrain AI UI Kit",
   "private": false,
   "type": "module",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "lucide-react": "^0.257.0",
-    "@lastbrain/ai-ui-core": "1.0.53"
+    "@lastbrain/ai-ui-core": "1.0.54"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
@@ -62,7 +62,7 @@
   },
   "scripts": {
     "dev": "tsc -p tsconfig.json --watch",
-    "build": "tsc -p tsconfig.json && cp src/styles.css dist/styles.css && cp styles.d.ts dist/styles.d.ts",
+    "build": "tsc -p tsconfig.json && mkdir -p dist/i18n && cp src/i18n/*.json dist/i18n/ && cp src/styles.css dist/styles.css && cp styles.d.ts dist/styles.d.ts",
     "lint": "eslint ."
   }
 }

package/src/components/AiChipLabel.tsx

@@ -11,6 +11,7 @@ import { useAiContext } from "../context/AiProvider";
 import { useLB } from "../context/LBAuthProvider";
 import { handleAIError } from "../utils/errorHandler";
 import type { AiRadius, AiSize } from "../types";
+import { useI18n } from "../context/I18nContext";
 
 export interface AiChipLabelProps {
   children: React.ReactNode;
@@ -67,7 +68,7 @@ export interface AiChipInputProps {
 export function AiChipInput({
   value = [],
   onChange,
-  placeholder = "Tapez et appuyez sur Entrée pour ajouter des tags...",
+  placeholder,
   context,
   maxChips,
   allowDuplicates = false,
@@ -79,6 +80,7 @@ export function AiChipInput({
   size = "md",
   radius = "full",
 }: AiChipInputProps) {
+  const { t } = useI18n();
   const [inputValue, setInputValue] = useState("");
   const [showPromptPanel, setShowPromptPanel] = useState(false);
   const [showSigninModal, setShowSigninModal] = useState(false);
@@ -156,7 +158,8 @@ Exemple de réponse attendue: javascript, react, frontend, api, development`;
         model,
         prompt: instruction,
         storeOutputs,
-        artifactTitle: artifactTitle || "Tags générés par IA",
+        artifactTitle:
+          artifactTitle || t("ai.chips.artifactTitle", "AI generated tags"),
       });
 
       const chips = parseChipsFromResponse(response.text);
@@ -207,7 +210,13 @@ Exemple de réponse attendue: javascript, react, frontend, api, development`;
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
             onKeyDown={handleKeyDown}
-            placeholder={placeholder}
+            placeholder={
+              placeholder ||
+              t(
+                "ai.chips.placeholder",
+                "Type and press Enter to add tags..."
+              )
+            }
             className={`ai-control ai-control-input ai-control-input--with-action ${sizeClass} ${radiusClass}`}
           />
           <button
@@ -221,13 +230,13 @@ Exemple de réponse attendue: javascript, react, frontend, api, development`;
             className={`ai-control-action ai-spark ${sizeClass} ${radiusClass}`}
             aria-label={
               isAuthenticated
-                ? "Générer des tags avec l'IA"
-                : "Connexion requise"
+                ? t("ai.chips.generate", "Generate tags with AI")
+                : t("auth.connectRequired", "Connection required")
             }
             title={
               isAuthenticated
-                ? "Générer des tags avec l'IA"
-                : "Se connecter pour utiliser l'IA"
+                ? t("ai.chips.generate", "Generate tags with AI")
+                : t("auth.connectToUseAi", "Sign in to use AI")
             }
           >
             {isAuthenticated ? <Sparkles size={16} /> : <Lock size={16} />}
@@ -247,7 +256,7 @@ Exemple de réponse attendue: javascript, react, frontend, api, development`;
               <button
                 onClick={() => removeChip(index)}
                 className="ai-chip-remover"
-                title="Supprimer"
+                title={t("ai.chips.remove", "Remove")}
               >
                 <X size={14} />
               </button>

package/src/components/AiContextButton.tsx

@@ -13,6 +13,7 @@ import { useAiContext } from "../context/AiProvider";
 import { handleAIError } from "../utils/errorHandler";
 import { useLB } from "../context/LBAuthProvider";
 import { LBSigninModal } from "./LBSigninModal";
+import { useI18n } from "../context/I18nContext";
 
 // Types pour les données de contexte
 type ContextData =
@@ -49,19 +50,22 @@ export function AiContextButton({
   apiKeyId: propApiKeyId,
   uiMode = "modal",
   contextData,
-  contextDescription = "Données à analyser",
+  contextDescription,
   onResult,
   onToast,
   disabled,
   className,
   children,
-  resultModalTitle = "Résultat de l'analyse",
+  resultModalTitle,
+  storeOutputs,
+  artifactTitle,
   size = "md",
   radius = "full",
   variant = "default",
   context: _context,
   ...buttonProps
 }: AiContextButtonProps) {
+  const { t, lang } = useI18n();
   const [isOpen, setIsOpen] = useState(false);
   const [showAuthModal, setShowAuthModal] = useState(false);
   const [isResultOpen, setIsResultOpen] = useState(false);
@@ -75,6 +79,8 @@ export function AiContextButton({
 
   const { showUsageToast } = useUsageToast();
   const { showErrorToast, errorData, errorKey, clearError } = useErrorToast();
+  const resolvedContextDescription =
+    contextDescription || t("ai.context.description", "Data to analyze");
 
   let lbStatus: string | undefined;
   try {
@@ -119,7 +125,7 @@ export function AiContextButton({
   ) => {
     try {
       const contextString = formatContextData(contextData);
-      const fullPrompt = `${selectedPrompt}\n\nCONTEXTE (${contextDescription}):\n${contextString}\n\nAnalyse ces données et réponds de manière structurée et claire.`;
+      const fullPrompt = `${selectedPrompt}\n\nCONTEXTE (${resolvedContextDescription}):\n${contextString}\n\n${t("ai.context.analyzeStructured", "Analyze this data and respond in a clear, structured way.")}`;
 
       const result = await callText({
         prompt: fullPrompt,
@@ -127,6 +133,8 @@ export function AiContextButton({
         context: _context || undefined,
         maxTokens: 4000,
         temperature: 0.7,
+        storeOutputs,
+        artifactTitle,
       });
 
       if (!result.text) {
@@ -156,7 +164,9 @@ export function AiContextButton({
 
       onToast?.({
         type: "success",
-        message: `Analyse terminée - Coût: $${(apiKeyId?.includes("dev") ? 0 : actualCost).toFixed(6)}`,
+        message: t("ai.analysisDoneCost", "Analysis completed - Cost: {cost}", {
+          cost: `$${(apiKeyId?.includes("dev") ? 0 : actualCost).toFixed(6)}`,
+        }),
       });
 
       showUsageToast({
@@ -182,18 +192,23 @@ export function AiContextButton({
       return;
     }
 
+    const locale = lang === "fr" ? "fr-FR" : "en-US";
     const currentDate = new Date()
-      .toLocaleDateString("fr-FR")
+      .toLocaleDateString(locale)
       .replace(/\//g, "-");
-    const defaultName = `analyse-${currentDate}.txt`;
-    const fileName = prompt("Nom du fichier :", defaultName) || defaultName;
+    const defaultName = t("ai.context.fileNameBase", "analysis-{date}.txt", {
+      date: currentDate,
+    });
+    const fileName =
+      prompt(t("ai.context.saveFileNamePrompt", "File name:"), defaultName) ||
+      defaultName;
 
-    const content = `ANALYSE DES DONNÉES - ${new Date().toLocaleString("fr-FR")}\n\nPROMPT UTILISÉ :\n${analysisResult.prompt}\n\nRÉSULTAT DE L'ANALYSE :\n${analysisResult.content}\n\n--- MÉTADONNÉES ---\nTokens utilisés: ${analysisResult.tokens.toLocaleString()}\nCoût: $${(apiKeyId?.includes(
+    const content = `${t("ai.context.fileHeader", "DATA ANALYSIS")} - ${new Date().toLocaleString(locale)}\n\n${t("common.promptUsed", "Prompt used").toUpperCase()} :\n${analysisResult.prompt}\n\n${t("common.result", "Result").toUpperCase()} :\n${analysisResult.content}\n\n--- ${t("ai.context.metadata", "METADATA")} ---\n${t("ai.context.tokensUsed", "Tokens used")}: ${analysisResult.tokens.toLocaleString()}\n${t("ai.context.cost", "Cost")}: $${(apiKeyId?.includes(
       "dev"
     )
       ? 0
       : analysisResult.cost
-    ).toFixed(6)}\nID de requête: ${analysisResult.requestId || "N/A"}`;
+    ).toFixed(6)}\n${t("ai.context.requestId", "Request ID")}: ${analysisResult.requestId || "N/A"}`;
 
     const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
     const url = URL.createObjectURL(blob);
@@ -219,23 +234,27 @@ export function AiContextButton({
           disabled={disabled || loading || !isAuthReady}
           className={`ai-btn ai-context-btn ${variantClass} ${sizeClass} ${radiusClass} ${className || ""}`}
           title={
-            !isAuthReady ? "Authentication required" : "Analyser avec l'IA"
+            !isAuthReady
+              ? t("auth.required", "Authentication required")
+              : t("ai.analyze", "Analyze with AI")
           }
         >
           {loading ? (
             <>
               <Loader2 size={16} className="ai-spinner" />
-              <span>Analyse...</span>
+              <span>{t("ai.analyzing", "Analyzing...")}</span>
             </>
           ) : !isAuthReady ? (
             <>
               <Lock size={16} />
-              {children || <span>Connexion requise</span>}
+              {children || (
+                <span>{t("auth.connectRequired", "Connection required")}</span>
+              )}
             </>
           ) : (
             <>
               <Sparkles size={16} />
-              {children || <span>Analyser</span>}
+              {children || <span>{t("ai.context.buttonAnalyze", "Analyze")}</span>}
             </>
           )}
         </button>
@@ -272,7 +291,9 @@ export function AiContextButton({
             <div className="ai-result-header">
               <div className="ai-row">
                 <FileText size={18} />
-                <h2 className="ai-result-title">{resultModalTitle}</h2>
+                <h2 className="ai-result-title">
+                  {resultModalTitle || t("ai.context.resultTitle", "Analysis result")}
+                </h2>
               </div>
               <div className="ai-row">
                 <button
@@ -281,7 +302,7 @@ export function AiContextButton({
                   onClick={saveToFile}
                 >
                   <Download size={14} />
-                  Sauvegarder
+                  {t("common.save", "Save")}
                 </button>
                 <button
                   type="button"
@@ -290,7 +311,7 @@ export function AiContextButton({
                     setIsResultOpen(false);
                     setAnalysisResult(null);
                   }}
-                  aria-label="Fermer"
+                  aria-label={t("common.closeLabel", "Close")}
                 >
                   <X size={16} />
                 </button>
@@ -299,12 +320,12 @@ export function AiContextButton({
 
             <div className="ai-result-body">
               <div className="ai-result-block">
-                <h3 className="ai-result-subtitle">Prompt utilisé</h3>
+                <h3 className="ai-result-subtitle">{t("common.promptUsed", "Prompt used")}</h3>
                 <pre className="ai-result-code">{analysisResult.prompt}</pre>
               </div>
 
               <div className="ai-result-block">
-                <h3 className="ai-result-subtitle">Résultat</h3>
+                <h3 className="ai-result-subtitle">{t("common.result", "Result")}</h3>
                 <div className="ai-result-content">
                   {analysisResult.content}
                 </div>
@@ -312,13 +333,16 @@ export function AiContextButton({
 
               <div className="ai-result-meta ai-between">
                 <span>
-                  Coût: $
+                  {t("ai.context.cost", "Cost")}: $
                   {(apiKeyId?.includes("dev")
                     ? 0
                     : analysisResult.cost
                   ).toFixed(6)}
                 </span>
-                <span>ID: {analysisResult.requestId?.slice(-8) || "N/A"}</span>
+                <span>
+                  {t("ai.context.requestId", "Request ID")}:{" "}
+                  {analysisResult.requestId?.slice(-8) || "N/A"}
+                </span>
               </div>
             </div>
           </div>