@lastbrain/ai-ui-react 1.0.74 → 1.0.76

package/src/components/AiStatusButton.tsx

@@ -207,14 +207,17 @@ export function AiStatusButton({
 
   const canPortal = typeof document !== "undefined";
 
-  const effectiveStatus =
-    lbStatus === "ready"
-      ? {
-          ...(lbApiStatus || {}),
-          ...(lbBasicStatus || {}),
-          storage: lbStorageStatus?.storage || lbApiStatus?.storage,
-        }
-      : status || null;
+  const effectiveStatus = useMemo(
+    () =>
+      lbStatus === "ready"
+        ? {
+            ...(lbApiStatus || {}),
+            ...(lbBasicStatus || {}),
+            storage: lbStorageStatus?.storage || lbApiStatus?.storage,
+          }
+        : status || null,
+    [lbApiStatus, lbBasicStatus, lbStatus, lbStorageStatus, status]
+  );
 
   const hasApiKeySelected = Boolean(
     effectiveStatus?.apiKey?.id ||
@@ -229,8 +232,7 @@ export function AiStatusButton({
       : undefined;
   const requiresApiKeySelection =
     lbStatus === "ready" && !hasApiKeySelected && apiKeys.length > 0;
-  const isApiKeyAuthMode =
-    authTypeValue === "api_key";
+  const isApiKeyAuthMode = authTypeValue === "api_key";
 
   const [tooltipStyle, setTooltipStyle] = useState<Record<string, string>>({});
 
@@ -328,11 +330,11 @@ export function AiStatusButton({
 
   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
+    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);
@@ -422,10 +424,14 @@ export function AiStatusButton({
             {lbStatus === "ready" && user ? (
               <>
                 <div className="ai-popover-body">
-                  <div className="ai-popover-header">{t("status.title", "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">{t("status.user", "User")}</span>
+                      <span className="ai-popover-label">
+                        {t("status.user", "User")}
+                      </span>
                       <span
                         className="ai-popover-value ai-truncate"
                         style={{ maxWidth: 200 }}
@@ -437,7 +443,9 @@ export function AiStatusButton({
 
                   <div className="ai-popover-section">
                     <div className="ai-popover-row">
-                      <span className="ai-popover-label">{t("status.apiKey", "API Key")}</span>
+                      <span className="ai-popover-label">
+                        {t("status.apiKey", "API Key")}
+                      </span>
                       <div className="ai-row">
                         {lbIsLoadingStatus || isImplicitStatusLoading ? (
                           <div className="ai-kv-skeleton ai-kv-skeleton--110" />
@@ -468,7 +476,9 @@ export function AiStatusButton({
                     </div>
 
                     <div className="ai-popover-row">
-                      <span className="ai-popover-label">{t("status.env", "Env")}</span>
+                      <span className="ai-popover-label">
+                        {t("status.env", "Env")}
+                      </span>
                       {(lbIsLoadingStatus || isImplicitStatusLoading) &&
                       !effectiveStatus?.apiKey?.env ? (
                         <div className="ai-kv-skeleton ai-kv-skeleton--48" />
@@ -482,7 +492,9 @@ export function AiStatusButton({
                     </div>
 
                     <div className="ai-popover-row">
-                      <span className="ai-popover-label">{t("status.rateLimit", "Rate Limit")}</span>
+                      <span className="ai-popover-label">
+                        {t("status.rateLimit", "Rate Limit")}
+                      </span>
                       {(lbIsLoadingStatus || isImplicitStatusLoading) &&
                       !effectiveStatus?.apiKey?.rate_limit_rpm ? (
                         <div className="ai-kv-skeleton ai-kv-skeleton--92" />
@@ -490,14 +502,16 @@ export function AiStatusButton({
                         <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">{t("status.auth", "Auth")}</span>
+                      <span className="ai-popover-label">
+                        {t("status.auth", "Auth")}
+                      </span>
                       <span className="ai-popover-value">
                         {lbIsLoadingStatus || isImplicitStatusLoading
                           ? "..."
@@ -513,7 +527,9 @@ export function AiStatusButton({
                       {t("status.wallet", "Wallet")}
                     </div>
                     <div className="ai-popover-row">
-                      <span className="ai-popover-label">{t("status.total", "Total")}</span>
+                      <span className="ai-popover-label">
+                        {t("status.total", "Total")}
+                      </span>
                       {(lbIsLoadingStatus || isImplicitStatusLoading) &&
                       !effectiveStatus?.balance ? (
                         <div className="ai-row">
@@ -536,7 +552,9 @@ export function AiStatusButton({
                       {t("status.storage", "Storage")}
                     </div>
                     <div className="ai-popover-row">
-                      <span className="ai-popover-label">{t("status.total", "Total")}</span>
+                      <span className="ai-popover-label">
+                        {t("status.total", "Total")}
+                      </span>
                       {lbIsLoadingStorage || isImplicitStorageLoading ? (
                         <div className="ai-row">
                           <div className="ai-kv-skeleton ai-kv-skeleton--120" />
@@ -564,8 +582,8 @@ export function AiStatusButton({
                           type="button"
                           className="ai-status-action-btn"
                           onClick={() => window.open(item.href, "_blank")}
-                        title={label}
-                        data-ai-tip={label}
+                          title={label}
+                          data-ai-tip={label}
                         >
                           <Icon size={17} />
                         </button>
@@ -602,7 +620,10 @@ export function AiStatusButton({
                   {t("status.lastbrainAuth", "LastBrain Authentication")}
                 </div>
                 <p className="ai-signin-subtitle" style={{ marginTop: 0 }}>
-                  {t("status.connectToAccess", "Sign in to access AI features.")}
+                  {t(
+                    "status.connectToAccess",
+                    "Sign in to access AI features."
+                  )}
                 </p>
                 <button
                   type="button"

package/src/components/AiTextarea.tsx

@@ -27,6 +27,7 @@ export interface AiTextareaProps
   uiMode?: "modal" | "drawer";
   size?: AiSize;
   radius?: AiRadius;
+  onPanelOpenChange?: (isOpen: boolean) => void;
 }
 
 export function AiTextarea({
@@ -35,10 +36,11 @@ export function AiTextarea({
   uiMode = "modal",
   size = "md",
   radius = "lg",
+  onPanelOpenChange,
   context,
   model,
   prompt,
-  editMode = false,
+  editMode: _editMode = false,
   enableModelManagement,
   storeOutputs,
   artifactTitle,
@@ -61,12 +63,15 @@ export function AiTextarea({
 
   // Rendre l'authentification optionnelle
   let lbStatus: string | undefined;
+  let hasLBProvider = false;
   try {
     const lbContext = useLB();
     lbStatus = lbContext.status;
+    hasLBProvider = true;
   } catch {
     // LBProvider n'est pas disponible, ignorer
     lbStatus = undefined;
+    hasLBProvider = false;
   }
 
   let ctxBaseUrl: string | undefined;
@@ -82,8 +87,11 @@ export function AiTextarea({
 
   const baseUrl = propBaseUrl ?? ctxBaseUrl;
   const apiKeyId = propApiKeyId ?? ctxApiKeyId;
+  const supportsSessionAuth =
+    typeof baseUrl === "string" &&
+    (baseUrl.includes("/api/ai") || baseUrl.includes("/api/lastbrain"));
 
-  const { models } = useAiModels({
+  const { models: _models } = useAiModels({
     baseUrl,
     apiKeyId,
     modelType: "text-or-language",
@@ -92,7 +100,10 @@ export function AiTextarea({
   const { formatted: loadingElapsed } = useLoadingTimer(loading);
 
   const hasConfiguration = Boolean(model && prompt);
-  const isAuthReady = lbStatus === "ready" || Boolean(process.env.LB_API_KEY);
+  const isAuthReady =
+    supportsSessionAuth ||
+    lbStatus === "ready" ||
+    Boolean(process.env.LB_API_KEY);
   const shouldShowSparkles = isAuthReady && !disabled;
 
   const handleOpenPanel = () => {
@@ -101,16 +112,18 @@ export function AiTextarea({
       return;
     }
     setIsOpen(true);
+    onPanelOpenChange?.(true);
   };
 
   const handleClosePanel = () => {
     setIsOpen(false);
+    onPanelOpenChange?.(false);
   };
 
   const handleSubmit = async (
     selectedModel: string,
     selectedPrompt: string,
-    promptId?: string
+    _promptId?: string
   ) => {
     try {
       const resolvedContext = textareaValue || context || undefined;
@@ -141,13 +154,14 @@ export function AiTextarea({
         });
         showUsageToast(result);
       }
-    } catch (error) {
+    } catch {
       onToast?.({
         type: "error",
         message: t("ai.generationError", "Failed to generate text"),
       });
     } finally {
       setIsOpen(false);
+      onPanelOpenChange?.(false);
     }
   };
 
@@ -280,10 +294,12 @@ export function AiTextarea({
           onComplete={clearToast}
         />
       )}
-      <LBSigninModal
-        isOpen={showAuthModal}
-        onClose={() => setShowAuthModal(false)}
-      />
+      {hasLBProvider ? (
+        <LBSigninModal
+          isOpen={showAuthModal}
+          onClose={() => setShowAuthModal(false)}
+        />
+      ) : null}
     </div>
   );
 }

package/src/components/ErrorToast.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import "../styles/register";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { X, AlertCircle } from "lucide-react";
 import { useI18n } from "../context/I18nContext";
 
@@ -27,7 +27,7 @@ export function ErrorToast({
   const fadeTimeoutRef = useRef<number | null>(null);
   const autoCloseTimeoutRef = useRef<number | null>(null);
 
-  const handleClose = () => {
+  const handleClose = useCallback(() => {
     if (isClosing) return;
 
     // Clear auto-close timeout if user closes manually
@@ -40,7 +40,7 @@ export function ErrorToast({
       setIsVisible(false);
       onComplete?.();
     }, 200);
-  };
+  }, [isClosing, onComplete]);
 
   useEffect(() => {
     if (error) {

package/src/components/LBApiKeySelector.tsx

@@ -122,11 +122,11 @@ export function LBApiKeySelector({
                         {t("common.active", "Active")}
                       </span>
                     ) : (
-                    <span className="ai-pill ai-pill--cost">
-                      <XCircle size={12} />
-                      {t("common.inactive", "Inactive")}
-                    </span>
-                  )}
+                      <span className="ai-pill ai-pill--cost">
+                        <XCircle size={12} />
+                        {t("common.inactive", "Inactive")}
+                      </span>
+                    )}
                   </label>
                 );
               })}

package/src/components/LBConnectButton.tsx

@@ -43,9 +43,7 @@ export function LBConnectButton({
 
   const connectLabel = label || t("auth.signIn", "Sign in");
   const buttonLabel =
-    status === "ready" && user
-      ? t("auth.signOut", "Sign out")
-      : connectLabel;
+    status === "ready" && user ? t("auth.signOut", "Sign out") : connectLabel;
 
   return (
     <>

package/src/components/LBKeyPicker.tsx

@@ -6,7 +6,7 @@ import "../styles/register";
  * Permet de changer de clé API sans se reconnecter
  */
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useLB } from "../hooks/useLB";
 import type { LBApiKey } from "@lastbrain/ai-ui-core";
 import { useI18n } from "../context/I18nContext";
@@ -30,25 +30,25 @@ export function LBKeyPicker({
   const [error, setError] = useState("");
   const [showDropdown, setShowDropdown] = useState(false);
 
-  useEffect(() => {
-    if (status === "ready" && accessToken) {
-      loadKeys();
-    }
-  }, [status, accessToken]);
-
-  const loadKeys = async () => {
+  const loadKeys = useCallback(async () => {
     if (!accessToken) return;
 
     try {
       setLoading(true);
       const keys = await fetchApiKeys(accessToken);
       setApiKeys(keys);
-    } catch (err) {
+    } catch {
       setError(t("lb.keypicker.loadError", "Unable to load API keys"));
     } finally {
       setLoading(false);
     }
-  };
+  }, [accessToken, fetchApiKeys, t]);
+
+  useEffect(() => {
+    if (status === "ready" && accessToken) {
+      loadKeys();
+    }
+  }, [accessToken, loadKeys, status]);
 
   const handleSelectKey = async (keyId: string) => {
     if (!accessToken) return;

package/src/components/LBSigninModal.tsx

@@ -7,6 +7,7 @@ import { AlertCircle, Loader2, Lock, Mail, Sparkles, X } from "lucide-react";
 import { useLB } from "../context/LBAuthProvider";
 import { LBApiKeySelector } from "./LBApiKeySelector";
 import { useI18n } from "../context/I18nContext";
+import type { LBApiKey } from "@lastbrain/ai-ui-core";
 
 export interface LBSigninModalProps {
   isOpen: boolean;
@@ -23,7 +24,7 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const [showKeySelector, setShowKeySelector] = useState(false);
-  const [currentApiKeys, setCurrentApiKeys] = useState<any[]>([]);
+  const [currentApiKeys, setCurrentApiKeys] = useState<LBApiKey[]>([]);
 
   const { login, selectApiKeyWithToken, fetchApiKeys } = lbContext || {};
 
@@ -64,9 +65,7 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
       }
 
       if (!fetchApiKeys || !result.accessToken) {
-        setError(
-          t("auth.modal.tokenMissing", "Access token unavailable")
-        );
+        setError(t("auth.modal.tokenMissing", "Access token unavailable"));
         return;
       }
 
@@ -76,9 +75,7 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
         setShowKeySelector(true);
       } catch (keyError) {
         console.error("Failed to fetch API keys:", keyError);
-        setError(
-          t("auth.modal.apiKeysFetchError", "Failed to fetch API keys")
-        );
+        setError(t("auth.modal.apiKeysFetchError", "Failed to fetch API keys"));
       }
     } catch (err) {
       setError(
@@ -186,7 +183,10 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
                     required
                     autoFocus
                     autoComplete="email"
-                    placeholder={t("auth.modal.emailPlaceholder", "your@email.com")}
+                    placeholder={t(
+                      "auth.modal.emailPlaceholder",
+                      "your@email.com"
+                    )}
                   />
                 </div>
               </div>
@@ -210,7 +210,10 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
                     onChange={(e) => setPassword(e.target.value)}
                     required
                     autoComplete="current-password"
-                    placeholder={t("auth.modal.passwordPlaceholder", "••••••••")}
+                    placeholder={t(
+                      "auth.modal.passwordPlaceholder",
+                      "••••••••"
+                    )}
                   />
                 </div>
               </div>

package/src/components/UsageToast.tsx

@@ -6,7 +6,7 @@ import { X } from "lucide-react";
 import { useI18n } from "../context/I18nContext";
 
 interface UsageToastProps {
-  result: unknown;
+  result: any;
   position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
   onComplete?: () => void;
 }
@@ -46,7 +46,7 @@ export function UsageToast({
     }, 200);
   };
 
-  const extractUsageMessage = (data: unknown) => {
+  const extractUsageMessage = (data: any) => {
     const result = data as any;
 
     // Extract cost from various possible locations
@@ -165,10 +165,10 @@ export function UsageToast({
 }
 
 export function useUsageToast() {
-  const [toastData, setToastData] = useState<unknown>(null);
+  const [toastData, setToastData] = useState<any>(null);
   const [toastKey, setToastKey] = useState(0);
 
-  const showUsageToast = (result: unknown) => {
+  const showUsageToast = (result: any) => {
     // Replace any existing toast with new one
     setToastKey((prev) => prev + 1);
     setToastData(result);

package/src/context/I18nContext.tsx

@@ -46,14 +46,18 @@ export interface I18nProviderProps {
   lang?: LBSupportedLang;
 }
 
-export function I18nProvider({ children, lang = defaultLang }: I18nProviderProps) {
+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;
+      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}}`

package/src/context/LBAuthProvider.tsx

@@ -416,7 +416,7 @@ export function LBProvider({
     try {
       let data: BasicStatus;
       try {
-        data = await lbClient.getStatus();
+        data = (await lbClient.getStatus()) as BasicStatus;
       } catch {
         // Backward compatibility: older backends may not expose /auth/status
         const userData = await lbClient.getUser();
@@ -483,15 +483,17 @@ export function LBProvider({
 
       setIsLoadingStorage(true);
       try {
-        const data = await lbClient.getStorageStatus();
-        const storageData = data?.storage ? { storage: data.storage } : data;
+        const data = (await lbClient.getStorageStatus()) as StorageStatus;
+        const storageData: StorageStatus = data?.storage
+          ? { storage: data.storage }
+          : data;
         setStorageStatus(storageData);
         setStorageLastFetch(now);
 
         // Combiner avec le basic status
         const combinedStatus = {
           ...basicStatus,
-          storage: storageData?.storage,
+          storage: storageData.storage,
         };
         setApiStatus(combinedStatus as AiStatus);
       } catch (error) {
@@ -624,7 +626,12 @@ export function LBProvider({
       setStorageStatus(null);
       setApiKeys([]);
     }
-  }, [state.status]); // Supprimer les fonctions des dépendances pour éviter la boucle
+  }, [
+    fetchApiKeysWithSession,
+    refreshBasicStatus,
+    refreshStorageStatus,
+    state.status,
+  ]);
 
   const value: LBContextValue = {
     ...state,

package/src/examples/AiImageGenerator.tsx

@@ -125,7 +125,7 @@ export function ModelManagementList({
 }) {
   const {
     availableModels,
-    userModels,
+    userModels: _userModels,
     loading,
     error,
     toggleModel,

package/src/hooks/useAiStatus.ts

@@ -1,8 +1,9 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useContext, useMemo } from "react";
 import type { AiStatus } from "@lastbrain/ai-ui-core";
 import { useAiClient } from "./useAiClient";
+import { LBContext } from "../context/LBAuthProvider";
 
 export interface UseAiStatusOptions {
   baseUrl?: string;
@@ -18,11 +19,40 @@ export interface UseAiStatusResult {
 
 export function useAiStatus(options?: UseAiStatusOptions): UseAiStatusResult {
   const client = useAiClient(options);
+  const lbContext = useContext(LBContext);
   const [status, setStatus] = useState<AiStatus | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
+  const statusFromLB = useMemo<AiStatus | null>(() => {
+    if (!lbContext || lbContext.status !== "ready") {
+      return null;
+    }
+    if (lbContext.apiStatus) {
+      return lbContext.apiStatus;
+    }
+    if (lbContext.basicStatus) {
+      return {
+        ...(lbContext.basicStatus as AiStatus),
+        storage:
+          lbContext.storageStatus?.storage ||
+          (lbContext.basicStatus as AiStatus)?.storage,
+      } as AiStatus;
+    }
+    return null;
+  }, [lbContext]);
+
   const fetchStatus = useCallback(async () => {
+    // If LBProvider is available, it already handles fast status + storage split.
+    if (lbContext && lbContext.status === "ready") {
+      try {
+        await lbContext.refreshBasicStatus();
+      } catch {
+        // Ignore: provider already tracks errors/status
+      }
+      return;
+    }
+
     console.log("[useAiStatus] Starting status fetch");
 
     setLoading(true);
@@ -39,15 +69,27 @@ export function useAiStatus(options?: UseAiStatusOptions): UseAiStatusResult {
     } finally {
       setLoading(false);
     }
-  }, [client]);
+  }, [client, lbContext]);
 
   useEffect(() => {
+    if (statusFromLB) {
+      setStatus(statusFromLB);
+      setLoading(false);
+      setError(null);
+      return;
+    }
     fetchStatus();
-  }, [fetchStatus]);
+  }, [fetchStatus, statusFromLB]);
+
+  const isLoadingFromLB =
+    !!lbContext &&
+    lbContext.status === "ready" &&
+    !statusFromLB &&
+    (lbContext.isLoadingStatus || lbContext.isLoadingStorage);
 
   return {
-    status,
-    loading,
+    status: statusFromLB || status,
+    loading: isLoadingFromLB || loading,
     error,
     refetch: fetchStatus,
   };

package/src/hooks/useLoadingTimer.ts

@@ -14,19 +14,25 @@ export function useLoadingTimer(active: boolean) {
 
   useEffect(() => {
     if (!active) {
-      setSeconds(0);
-      return;
+      const timeoutId = window.setTimeout(() => setSeconds(0), 0);
+      return () => window.clearTimeout(timeoutId);
     }
-    setSeconds(0);
-    const id = window.setInterval(() => {
+
+    const resetId = window.setTimeout(() => setSeconds(0), 0);
+    const intervalId = window.setInterval(() => {
       setSeconds((prev) => prev + 1);
     }, 1000);
-    return () => window.clearInterval(id);
+
+    return () => {
+      window.clearTimeout(resetId);
+      window.clearInterval(intervalId);
+    };
   }, [active]);
 
+  const displaySeconds = active ? seconds : 0;
+
   return {
-    seconds,
-    formatted: formatElapsed(seconds),
+    seconds: displaySeconds,
+    formatted: formatElapsed(displaySeconds),
   };
 }
-