@lastbrain/ai-ui-react 1.0.72 → 1.0.74

package/src/components/AiStatusButton.tsx

@@ -25,6 +25,7 @@ import { AiContext } from "../context/AiProvider";
 import { LBApiKeySelector } from "./LBApiKeySelector";
 import { LBSigninModal } from "./LBSigninModal";
 import type { AiRadius, AiSize } from "../types";
+import { useI18n } from "../context/I18nContext";
 
 export interface AiStatusButtonProps {
   status: AiStatus | null;
@@ -53,27 +54,27 @@ type StorageUsage = {
 const QUICK_LINKS = [
   {
     href: "https://prompt.lastbrain.io/auth/ai/tokens",
-    title: "Dashboard",
+    titleKey: "status.dashboard",
     icon: BarChart3,
   },
   {
     href: "https://prompt.lastbrain.io/auth/ai/history",
-    title: "Historique",
+    titleKey: "status.history",
     icon: History,
   },
   {
     href: "https://prompt.lastbrain.io/auth/ai/settings",
-    title: "Settings",
+    titleKey: "status.settings",
     icon: Settings,
   },
   {
     href: "https://prompt.lastbrain.io/auth/ai/prompts",
-    title: "Prompts",
+    titleKey: "status.prompts",
     icon: FileText,
   },
   {
     href: "https://prompt.lastbrain.io/auth/folder",
-    title: "Dossiers",
+    titleKey: "status.folders",
     icon: Folder,
   },
 ];
@@ -154,6 +155,7 @@ export function AiStatusButton({
   size = "md",
   radius = "full",
 }: AiStatusButtonProps) {
+  const { t } = useI18n();
   let lbStatus: string | undefined;
   let user: LBUser | null = null;
   let logout: (() => Promise<void>) | undefined;
@@ -219,12 +221,16 @@ export function AiStatusButton({
     effectiveStatus?.api_key?.id ||
     lbSelectedKey?.id
   );
+  const authTypeValue =
+    effectiveStatus &&
+    "authType" in effectiveStatus &&
+    typeof effectiveStatus.authType === "string"
+      ? effectiveStatus.authType
+      : undefined;
   const requiresApiKeySelection =
     lbStatus === "ready" && !hasApiKeySelected && apiKeys.length > 0;
   const isApiKeyAuthMode =
-    effectiveStatus &&
-    "authType" in effectiveStatus &&
-    effectiveStatus.authType === "api_key";
+    authTypeValue === "api_key";
 
   const [tooltipStyle, setTooltipStyle] = useState<Record<string, string>>({});
 
@@ -320,15 +326,41 @@ export function AiStatusButton({
     storage.percentage ??
     (storageTotal > 0 ? Math.round((storageUsed / storageTotal) * 100) : 0);
 
+  const hasApiKeyMeta = Boolean(
+    effectiveStatus?.apiKey?.name ||
+      effectiveStatus?.api_key?.name ||
+      effectiveStatus?.apiKey?.env ||
+      effectiveStatus?.api_key?.env ||
+      effectiveStatus?.apiKey?.rate_limit_rpm ||
+      effectiveStatus?.api_key?.rate_limit_rpm
+  );
+  const hasBalanceMeta = Boolean(effectiveStatus?.balance);
+  const hasStorageMeta = Boolean(effectiveStatus?.storage);
+
+  const isImplicitStatusLoading =
+    lbStatus === "ready" &&
+    !!user &&
+    !requiresApiKeySelection &&
+    (!authTypeValue || !hasApiKeyMeta || !hasBalanceMeta);
+
+  const isImplicitStorageLoading =
+    lbStatus === "ready" &&
+    !!user &&
+    !requiresApiKeySelection &&
+    !hasStorageMeta;
+
   const showFastSkeleton =
     lbStatus === "ready" &&
-    lbIsLoadingStatus &&
-    !lbBasicStatus &&
-    !effectiveStatus;
+    (lbIsLoadingStatus ||
+      isImplicitStatusLoading ||
+      (!lbBasicStatus && !effectiveStatus));
 
   const showCornerLoading =
     lbStatus === "ready" &&
-    (showFastSkeleton || lbIsLoadingStatus || lbIsLoadingStorage);
+    (showFastSkeleton ||
+      lbIsLoadingStatus ||
+      lbIsLoadingStorage ||
+      isImplicitStorageLoading);
 
   const triggerTone = useMemo(() => {
     if (requiresApiKeySelection) return "warning";
@@ -390,11 +422,14 @@ export function AiStatusButton({
             {lbStatus === "ready" && user ? (
               <>
                 <div className="ai-popover-body">
-                  <div className="ai-popover-header">API Status</div>
+                  <div className="ai-popover-header">{t("status.title", "API Status")}</div>
                   <div className="ai-popover-section ai-popover-section--first">
                     <div className="ai-popover-row">
-                      <span className="ai-popover-label">User</span>
-                      <span className="ai-popover-value ai-truncate max-w-[200px]">
+                      <span className="ai-popover-label">{t("status.user", "User")}</span>
+                      <span
+                        className="ai-popover-value ai-truncate"
+                        style={{ maxWidth: 200 }}
+                      >
                         {user.email}
                       </span>
                     </div>
@@ -402,18 +437,20 @@ export function AiStatusButton({
 
                   <div className="ai-popover-section">
                     <div className="ai-popover-row">
-                      <span className="ai-popover-label">API Key</span>
+                      <span className="ai-popover-label">{t("status.apiKey", "API Key")}</span>
                       <div className="ai-row">
-                        {lbIsLoadingStatus ? (
-                          <div className="ai-kv-skeleton w-[110px]" />
+                        {lbIsLoadingStatus || isImplicitStatusLoading ? (
+                          <div className="ai-kv-skeleton ai-kv-skeleton--110" />
                         ) : (
                           <span className="ai-popover-value">
                             {effectiveStatus?.apiKey?.name ||
                               effectiveStatus?.api_key?.name ||
-                              "Unknown"}
+                              t("common.unknown", "Unknown")}
                           </span>
                         )}
-                        {switchApiKey && !isApiKeyAuthMode ? (
+                        {switchApiKey &&
+                        !isApiKeyAuthMode &&
+                        !isImplicitStatusLoading ? (
                           <button
                             type="button"
                             className="ai-icon-btn"
@@ -422,7 +459,7 @@ export function AiStatusButton({
                               setShowTooltip(false);
                               setShowApiKeySelector(true);
                             }}
-                            title="Changer de clé API"
+                            title={t("status.changeApiKey", "Switch API key")}
                           >
                             <ArrowRightLeft size={12} />
                           </button>
@@ -431,9 +468,10 @@ export function AiStatusButton({
                     </div>
 
                     <div className="ai-popover-row">
-                      <span className="ai-popover-label">Env</span>
-                      {lbIsLoadingStatus && !effectiveStatus?.apiKey?.env ? (
-                        <div className="ai-kv-skeleton w-12" />
+                      <span className="ai-popover-label">{t("status.env", "Env")}</span>
+                      {(lbIsLoadingStatus || isImplicitStatusLoading) &&
+                      !effectiveStatus?.apiKey?.env ? (
+                        <div className="ai-kv-skeleton ai-kv-skeleton--48" />
                       ) : (
                         <span className="ai-popover-value">
                           {effectiveStatus?.apiKey?.env ||
@@ -444,42 +482,43 @@ export function AiStatusButton({
                     </div>
 
                     <div className="ai-popover-row">
-                      <span className="ai-popover-label">Rate Limit</span>
-                      {lbIsLoadingStatus &&
+                      <span className="ai-popover-label">{t("status.rateLimit", "Rate Limit")}</span>
+                      {(lbIsLoadingStatus || isImplicitStatusLoading) &&
                       !effectiveStatus?.apiKey?.rate_limit_rpm ? (
-                        <div className="ai-kv-skeleton w-[92px]" />
+                        <div className="ai-kv-skeleton ai-kv-skeleton--92" />
                       ) : (
                         <span className="ai-popover-value">
                           {effectiveStatus?.apiKey?.rate_limit_rpm ||
                             effectiveStatus?.api_key?.rate_limit_rpm ||
-                            0}{" "}
+                          0}{" "}
                           req/min
                         </span>
                       )}
                     </div>
 
                     <div className="ai-popover-row">
-                      <span className="ai-popover-label">Auth</span>
+                      <span className="ai-popover-label">{t("status.auth", "Auth")}</span>
                       <span className="ai-popover-value">
-                        {lbIsLoadingStatus
+                        {lbIsLoadingStatus || isImplicitStatusLoading
                           ? "..."
-                          : (effectiveStatus &&
-                              "authType" in effectiveStatus &&
-                              effectiveStatus.authType) ||
+                          : authTypeValue ||
                             lbStatus ||
-                            "unknown"}
+                            t("status.unknown", "unknown")}
                       </span>
                     </div>
                   </div>
 
                   <div className="ai-popover-section">
-                    <div className="ai-popover-header text-xs mb-2">Wallet</div>
+                    <div className="ai-popover-header ai-popover-header--sub">
+                      {t("status.wallet", "Wallet")}
+                    </div>
                     <div className="ai-popover-row">
-                      <span className="ai-popover-label">Total</span>
-                      {lbIsLoadingStatus && !effectiveStatus?.balance ? (
+                      <span className="ai-popover-label">{t("status.total", "Total")}</span>
+                      {(lbIsLoadingStatus || isImplicitStatusLoading) &&
+                      !effectiveStatus?.balance ? (
                         <div className="ai-row">
-                          <div className="ai-kv-skeleton w-[120px]" />
-                          <div className="ai-kv-skeleton w-7 h-7 rounded-full" />
+                          <div className="ai-kv-skeleton ai-kv-skeleton--120" />
+                          <div className="ai-kv-skeleton ai-kv-skeleton--circle" />
                         </div>
                       ) : (
                         <div className="ai-row">
@@ -493,15 +532,15 @@ export function AiStatusButton({
                   </div>
 
                   <div className="ai-popover-section">
-                    <div className="ai-popover-header text-xs mb-2">
-                      Storage
+                    <div className="ai-popover-header ai-popover-header--sub">
+                      {t("status.storage", "Storage")}
                     </div>
                     <div className="ai-popover-row">
-                      <span className="ai-popover-label">Total</span>
-                      {lbIsLoadingStorage ? (
+                      <span className="ai-popover-label">{t("status.total", "Total")}</span>
+                      {lbIsLoadingStorage || isImplicitStorageLoading ? (
                         <div className="ai-row">
-                          <div className="ai-kv-skeleton w-[120px]" />
-                          <div className="ai-kv-skeleton w-7 h-7 rounded-full" />
+                          <div className="ai-kv-skeleton ai-kv-skeleton--120" />
+                          <div className="ai-kv-skeleton ai-kv-skeleton--circle" />
                         </div>
                       ) : (
                         <div className="ai-row">
@@ -518,13 +557,15 @@ export function AiStatusButton({
                   <div className="ai-status-actions">
                     {QUICK_LINKS.map((item) => {
                       const Icon = item.icon;
+                      const label = t(item.titleKey, item.titleKey);
                       return (
                         <button
                           key={item.href}
                           type="button"
                           className="ai-status-action-btn"
                           onClick={() => window.open(item.href, "_blank")}
-                          title={item.title}
+                        title={label}
+                        data-ai-tip={label}
                         >
                           <Icon size={17} />
                         </button>
@@ -546,7 +587,8 @@ export function AiStatusButton({
                             console.error("Logout failed:", error);
                           }
                         }}
-                        title="Logout"
+                        title={t("status.logout", "Logout")}
+                        data-ai-tip={t("status.logout", "Logout")}
                       >
                         <LogOut size={17} />
                       </button>
@@ -557,20 +599,21 @@ export function AiStatusButton({
             ) : (
               <div className="ai-popover-body">
                 <div className="ai-popover-header">
-                  LastBrain Authentication
+                  {t("status.lastbrainAuth", "LastBrain Authentication")}
                 </div>
-                <p className="ai-signin-subtitle mt-0">
-                  Connectez-vous pour accéder aux fonctionnalités IA.
+                <p className="ai-signin-subtitle" style={{ marginTop: 0 }}>
+                  {t("status.connectToAccess", "Sign in to access AI features.")}
                 </p>
                 <button
                   type="button"
-                  className="ai-btn ai-btn--auth w-full mt-2"
+                  className="ai-btn ai-btn--auth"
+                  style={{ width: "100%", marginTop: 8 }}
                   onClick={() => {
                     setShowSigninModal(true);
                     setShowTooltip(false);
                   }}
                 >
-                  Se connecter
+                  {t("auth.signIn", "Sign in")}
                 </button>
               </div>
             )}
@@ -581,7 +624,7 @@ export function AiStatusButton({
 
   return (
     <>
-      <div className="relative inline-block">
+      <div style={{ position: "relative", display: "inline-block" }}>
         <button
           ref={buttonRef}
           className={triggerClass}
@@ -599,17 +642,17 @@ export function AiStatusButton({
           disabled={loading || isSelectingApiKey}
           title={
             requiresApiKeySelection
-              ? "Sélectionnez une clé API"
-              : "Voir le status"
+              ? t("status.selectApiKey", "Select an API key")
+              : t("status.view", "View status")
           }
-          aria-label="AI status"
+          aria-label={t("status.aiStatusAria", "AI status")}
         >
           {renderTriggerIcon()}
         </button>
 
         {showCornerLoading ? (
           <span className="ai-status-loading-dot" aria-hidden="true">
-            <Loader2 size={7} className="ai-spinner text-[var(--ai-primary)]" />
+            <Loader2 size={7} className="ai-spinner" />
           </span>
         ) : null}
       </div>

package/src/components/AiTextarea.tsx

@@ -17,6 +17,8 @@ import { handleAIError } from "../utils/errorHandler";
 import { useLB } from "../context/LBAuthProvider";
 import { LBSigninModal } from "./LBSigninModal";
 import { useAiContext } from "../context/AiProvider";
+import { useI18n } from "../context/I18nContext";
+import { useLoadingTimer } from "../hooks/useLoadingTimer";
 
 export interface AiTextareaProps
   extends
@@ -46,6 +48,7 @@ export function AiTextarea({
   className,
   ...textareaProps
 }: AiTextareaProps) {
+  const { t } = useI18n();
   const [isOpen, setIsOpen] = useState(false);
   const [showAuthModal, setShowAuthModal] = useState(false);
   const [textareaValue, setTextareaValue] = useState(
@@ -86,6 +89,7 @@ export function AiTextarea({
     modelType: "text-or-language",
   });
   const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
+  const { formatted: loadingElapsed } = useLoadingTimer(loading);
 
   const hasConfiguration = Boolean(model && prompt);
   const isAuthReady = lbStatus === "ready" || Boolean(process.env.LB_API_KEY);
@@ -131,11 +135,17 @@ export function AiTextarea({
           textareaRef.current.value = result.text;
         }
         onValue?.(result.text);
-        onToast?.({ type: "success", message: "AI generation successful" });
+        onToast?.({
+          type: "success",
+          message: t("ai.generationSuccess", "AI generation successful"),
+        });
         showUsageToast(result);
       }
     } catch (error) {
-      onToast?.({ type: "error", message: "Failed to generate text" });
+      onToast?.({
+        type: "error",
+        message: t("ai.generationError", "Failed to generate text"),
+      });
     } finally {
       setIsOpen(false);
     }
@@ -165,7 +175,10 @@ export function AiTextarea({
           textareaRef.current.value = result.text;
         }
         onValue?.(result.text);
-        onToast?.({ type: "success", message: "AI generation successful" });
+        onToast?.({
+          type: "success",
+          message: t("ai.generationSuccess", "AI generation successful"),
+        });
         showUsageToast(result);
       }
     } catch (error) {
@@ -224,10 +237,10 @@ export function AiTextarea({
           type="button"
           title={
             !isAuthReady
-              ? "Authentication required"
+              ? t("auth.required", "Authentication required")
               : hasConfiguration
-                ? "Generate with AI"
-                : "Setup AI"
+                ? t("ai.generate", "Generate with AI")
+                : t("ai.setup", "Setup AI")
           }
         >
           {loading ? (
@@ -239,6 +252,11 @@ export function AiTextarea({
           )}
         </button>
       </div>
+      {loading ? (
+        <span className="ai-control-timer">
+          {t("ai.loading.elapsed", "{seconds}", { seconds: loadingElapsed })}
+        </span>
+      ) : null}
       {isOpen && (
         <AiPromptPanel
           isOpen={isOpen}

package/src/components/ErrorToast.tsx

@@ -3,6 +3,7 @@
 import "../styles/register";
 import { useEffect, useRef, useState } from "react";
 import { X, AlertCircle } from "lucide-react";
+import { useI18n } from "../context/I18nContext";
 
 interface ErrorToastData {
   message: string;
@@ -20,6 +21,7 @@ export function ErrorToast({
   position = "bottom-right",
   onComplete,
 }: ErrorToastProps) {
+  const { t } = useI18n();
   const [isVisible, setIsVisible] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
   const fadeTimeoutRef = useRef<number | null>(null);
@@ -112,7 +114,7 @@ export function ErrorToast({
       <AlertCircle size={16} style={{ marginTop: "2px", flexShrink: 0 }} />
       <div style={{ flex: 1, minWidth: 0 }}>
         <div style={{ fontWeight: 600, marginBottom: "2px" }}>
-          Erreur
+          {t("common.errorTitle", "Error")}
           {error.code && (
             <span
               style={{
@@ -153,7 +155,7 @@ export function ErrorToast({
         onMouseLeave={(e) => {
           e.currentTarget.style.backgroundColor = "transparent";
         }}
-        title="Fermer"
+        title={t("common.closeLabel", "Close")}
       >
         <X size={14} />
       </button>

package/src/components/LBApiKeySelector.tsx

@@ -1,6 +1,9 @@
+"use client";
+
 import React, { useState } from "react";
 import { CheckCircle2, KeyRound, Loader2, XCircle } from "lucide-react";
 import type { LBApiKey } from "@lastbrain/ai-ui-core";
+import { useI18n } from "../context/I18nContext";
 
 interface LBApiKeySelectorProps {
   apiKeys: LBApiKey[];
@@ -15,6 +18,7 @@ export function LBApiKeySelector({
   onCancel,
   isOpen,
 }: LBApiKeySelectorProps) {
+  const { t } = useI18n();
   const [selectedKeyId, setSelectedKeyId] = useState<string>(
     apiKeys.find((k) => k.isActive)?.id || apiKeys[0]?.id || ""
   );
@@ -26,7 +30,7 @@ export function LBApiKeySelector({
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     if (!selectedKeyId) {
-      setError("Veuillez sélectionner une clé API");
+      setError(t("status.selectApiKey", "Select an API key"));
       return;
     }
 
@@ -37,7 +41,9 @@ export function LBApiKeySelector({
       await onSelect(selectedKeyId);
     } 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")
       );
       setLoading(false);
     }
@@ -55,9 +61,14 @@ export function LBApiKeySelector({
               <KeyRound size={20} />
             </span>
           </div>
-          <h2 className="ai-signin-title">Sélectionnez une clé API</h2>
+          <h2 className="ai-signin-title">
+            {t("status.selectApiKey", "Select an API key")}
+          </h2>
           <p className="ai-signin-subtitle">
-            Choisissez la clé API à utiliser pour vos requêtes IA.
+            {t(
+              "status.selectApiKeySubtitle",
+              "Choose the API key to use for your AI requests."
+            )}
           </p>
         </div>
 
@@ -70,6 +81,9 @@ export function LBApiKeySelector({
               {apiKeys.map((key) => {
                 const isSelected = key.id === selectedKeyId;
                 const isActive = key.isActive;
+                const rawEnv = (key as LBApiKey & { env?: string }).env;
+                const keyEnv = rawEnv === "dev" ? "DEV" : "PROD";
+                const isDev = rawEnv === "dev";
                 return (
                   <label
                     key={key.id}
@@ -93,20 +107,26 @@ export function LBApiKeySelector({
                           <span>
                             {key.keyPrefix || key.id.substring(0, 12) + "..."}
                           </span>
+                          <span
+                            className={`ai-pill ai-pill--cost ${isDev ? "ai-pill--warning" : ""}`}
+                            style={{ marginLeft: 8 }}
+                          >
+                            {keyEnv}
+                          </span>
                         </div>
                       </div>
                     </div>
                     {isActive ? (
                       <span className="ai-pill ai-pill--cost">
                         <CheckCircle2 size={12} />
-                        Active
+                        {t("common.active", "Active")}
                       </span>
                     ) : (
-                      <span className="ai-pill ai-pill--cost">
-                        <XCircle size={12} />
-                        Inactive
-                      </span>
-                    )}
+                    <span className="ai-pill ai-pill--cost">
+                      <XCircle size={12} />
+                      {t("common.inactive", "Inactive")}
+                    </span>
+                  )}
                   </label>
                 );
               })}
@@ -126,7 +146,7 @@ export function LBApiKeySelector({
                 disabled={loading}
                 className="ai-btn ai-btn--ghost"
               >
-                Annuler
+                {t("common.cancel", "Cancel")}
               </button>
               <button
                 type="submit"
@@ -136,10 +156,10 @@ export function LBApiKeySelector({
                 {loading ? (
                   <>
                     <Loader2 size={16} className="ai-spinner" />
-                    Connexion...
+                    {t("auth.modal.connecting", "Signing in...")}
                   </>
                 ) : (
-                  "Continuer"
+                  t("common.continue", "Continue")
                 )}
               </button>
             </div>

package/src/components/LBConnectButton.tsx

@@ -5,6 +5,7 @@ import React from "react";
 import { Loader2, LogIn, LogOut } from "lucide-react";
 import { useLB } from "../context/LBAuthProvider";
 import { LBSigninModal } from "./LBSigninModal";
+import { useI18n } from "../context/I18nContext";
 
 interface LBConnectButtonProps {
   label?: string;
@@ -14,11 +15,12 @@ interface LBConnectButtonProps {
 }
 
 export function LBConnectButton({
-  label = "Se connecter",
+  label,
   className = "",
   onConnected,
   onOpenModal,
 }: LBConnectButtonProps) {
+  const { t } = useI18n();
   const { status, user, logout } = useLB();
   const [showModal, setShowModal] = React.useState(false);
 
@@ -39,7 +41,11 @@ export function LBConnectButton({
     onOpenModal?.();
   };
 
-  const buttonLabel = status === "ready" && user ? "Déconnexion" : label;
+  const connectLabel = label || t("auth.signIn", "Sign in");
+  const buttonLabel =
+    status === "ready" && user
+      ? t("auth.signOut", "Sign out")
+      : connectLabel;
 
   return (
     <>
@@ -52,7 +58,7 @@ export function LBConnectButton({
         {status === "loading" ? (
           <>
             <Loader2 size={16} className="animate-spin" />
-            Chargement...
+            {t("common.loading", "Loading...")}
           </>
         ) : status === "ready" && user ? (
           <>