@lastbrain/ai-ui-react 1.0.78 → 1.0.80

package/dist/context/LBAuthProvider.js

@@ -7,6 +7,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useEffect, useCallback, useMemo, useRef, useState, } from "react";
 import { createLBClient } from "@lastbrain/ai-ui-core";
 import { I18nProvider } from "./I18nContext";
+function hasServerSelectedApiKeyCookie(userData) {
+    if (!userData || typeof userData !== "object")
+        return false;
+    const value = userData.hasApiKeySelectedCookie;
+    return value === true;
+}
 const LBContext = createContext(undefined);
 // Export pour usage dans d'autres composants
 export { LBContext };
@@ -24,15 +30,6 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
     const [storageLastFetch, setStorageLastFetch] = useState(0);
     const [hasSelectedApiKeyCookie, setHasSelectedApiKeyCookie] = useState(false);
     const previousStatusRef = useRef("loading");
-    const syncSelectedApiKeyCookie = useCallback(() => {
-        if (typeof document === "undefined")
-            return;
-        const hasCookie = document.cookie
-            .split(";")
-            .map((part) => part.trim())
-            .some((part) => part.startsWith("api_key_selected=") && part.length > 17);
-        setHasSelectedApiKeyCookie(hasCookie);
-    }, []);
     const lbClient = useMemo(() => createLBClient({
         baseUrl: proxyUrl,
         mode: process.env.LB_API_KEY ? "env-key" : "auto",
@@ -46,6 +43,7 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
             const session = await lbClient.verifySession();
             if (session) {
                 const userData = await lbClient.getUser().catch(() => null);
+                const hasCookie = hasServerSelectedApiKeyCookie(userData);
                 const activeKey = userData?.apiKeyActive
                     ? {
                         id: userData.apiKeyActive.id,
@@ -64,14 +62,16 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
                         id: session.userId,
                         email: userData?.user?.email || "",
                     },
-                    selectedKey: activeKey,
+                    selectedKey: hasCookie ? activeKey : undefined,
                 });
+                setHasSelectedApiKeyCookie(hasCookie);
                 onStatusChange?.("ready");
             }
             else {
                 // Supabase session mode (no lb_session cookie): try user endpoint directly
                 const userData = await lbClient.getUser().catch(() => null);
                 if (userData?.user?.id) {
+                    const hasCookie = hasServerSelectedApiKeyCookie(userData);
                     const activeKey = userData?.apiKeyActive
                         ? {
                             id: userData.apiKeyActive.id,
@@ -89,12 +89,14 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
                             id: userData.user.id,
                             email: userData.user.email || "",
                         },
-                        selectedKey: activeKey,
+                        selectedKey: hasCookie ? activeKey : undefined,
                     });
+                    setHasSelectedApiKeyCookie(hasCookie);
                     onStatusChange?.("ready");
                 }
                 else {
                     setState({ status: "needs_auth" });
+                    setHasSelectedApiKeyCookie(false);
                     onStatusChange?.("needs_auth");
                 }
             }
@@ -102,19 +104,42 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
         catch (error) {
             console.error("[LBProvider] Session check failed:", error);
             setState({ status: "needs_auth" });
+            setHasSelectedApiKeyCookie(false);
             onStatusChange?.("needs_auth");
         }
     }, [lbClient, onStatusChange]);
     useEffect(() => {
         checkSession();
     }, [checkSession]);
-    useEffect(() => {
-        syncSelectedApiKeyCookie();
-        if (typeof window === "undefined")
-            return;
-        const interval = window.setInterval(syncSelectedApiKeyCookie, 1000);
-        return () => window.clearInterval(interval);
-    }, [syncSelectedApiKeyCookie]);
+    const fetchWalletSummary = useCallback(async () => {
+        const headers = lbClient.getAuthHeaders(state.session?.sessionToken);
+        const walletUrls = Array.from(new Set([
+            `${proxyUrl}/auth/wallet`,
+            `${proxyUrl.replace("/api/lastbrain", "/api/ai")}/auth/wallet`,
+        ]));
+        for (const url of walletUrls) {
+            try {
+                const response = await fetch(url, {
+                    method: "GET",
+                    credentials: "include",
+                    headers,
+                });
+                if (!response.ok)
+                    continue;
+                const data = (await response.json());
+                return {
+                    used: Number(data.totalUsed || 0),
+                    total: Number(data.totalAdded || 0),
+                    percentage: Number(data.percentUsed ?? data.percentage ?? 0),
+                    remaining: Number(data.walletSellValueUsd || 0),
+                };
+            }
+            catch {
+                // try next endpoint
+            }
+        }
+        return null;
+    }, [lbClient, proxyUrl, state.session?.sessionToken]);
     /**
      * Récupère les clés API de l'utilisateur
      */
@@ -153,7 +178,6 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
             setAccessToken(undefined); // Nettoyer l'access token temporaire
             setApiKeys([]); // Nettoyer les clés API temporaires
             setHasSelectedApiKeyCookie(true);
-            setTimeout(() => syncSelectedApiKeyCookie(), 100);
             onStatusChange?.("ready");
             onAuthChange?.(); // Refresh provider after signin
         }
@@ -165,7 +189,7 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
             });
             throw error;
         }
-    }, [lbClient, onAuthChange, onStatusChange, state.user, syncSelectedApiKeyCookie]);
+    }, [lbClient, onAuthChange, onStatusChange, state.user]);
     /**
      * Connexion utilisateur (étape 1 : login)
      * Retourne le token et les clés API sans créer de session
@@ -273,16 +297,20 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
                         used: 0,
                         total: userData.balance?.sellValueUsd || 0,
                         percentage: 0,
+                        remaining: userData.balance?.sellValueUsd || 0,
                     },
                 };
             }
+            const userData = await lbClient.getUser().catch(() => null);
+            setHasSelectedApiKeyCookie(hasServerSelectedApiKeyCookie(userData));
+            const walletSummary = await fetchWalletSummary().catch(() => null);
             const normalizedStatus = {
                 ...data,
                 authType: data?.authType,
-                user: data?.user,
-                apiKey: data?.apiKey || data?.api_key,
-                api_key: data?.api_key || data?.apiKey,
-                balance: data?.balance || {
+                user: data?.user || userData?.user,
+                apiKey: data?.apiKey || data?.api_key || userData?.apiKeyActive,
+                api_key: data?.api_key || data?.apiKey || userData?.apiKeyActive,
+                balance: walletSummary || data?.balance || {
                     used: 0,
                     total: 0,
                     percentage: 0,
@@ -302,7 +330,7 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
         finally {
             setIsLoadingStatus(false);
         }
-    }, [lbClient, state.status, storageStatus]);
+    }, [fetchWalletSummary, lbClient, state.status, storageStatus]);
     /**
      * Récupère le storage - LENT avec cache (5 minutes)
      */
@@ -380,9 +408,11 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
                 }));
             }
             setHasSelectedApiKeyCookie(true);
-            await refreshBasicStatus();
-            setTimeout(() => refreshStorageStatus(), 100);
-            setTimeout(() => syncSelectedApiKeyCookie(), 100);
+            // Ne pas bloquer la validation UI de sélection sur des requêtes status/wallet/storage.
+            void refreshBasicStatus();
+            setTimeout(() => {
+                void refreshStorageStatus();
+            }, 100);
         }
         else {
             throw new Error("No valid authentication method available");
@@ -395,7 +425,6 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
         lbClient,
         refreshBasicStatus,
         refreshStorageStatus,
-        syncSelectedApiKeyCookie,
     ]);
     /**
      * Déconnexion
@@ -444,6 +473,13 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
             setApiKeys([]);
         }
     }, [lbClient, state.status]);
+    useEffect(() => {
+        if (state.status !== "ready" || !state.session)
+            return;
+        if (hasSelectedApiKeyCookie)
+            return;
+        setState((prev) => ({ ...prev, selectedKey: undefined }));
+    }, [hasSelectedApiKeyCookie, state.session, state.status]);
     // Refresh status uniquement lors de la transition vers "ready"
     // (évite les boucles status/user causées par des callbacks recréés)
     useEffect(() => {

package/dist/styles.css

@@ -310,7 +310,7 @@
   min-height: 96px;
   resize: none;
   overflow: hidden;
-  padding: 6px 2px 8px;
+  padding: 6px 2px 32px;
 }
 
 .ai-control[aria-invalid="true"],
@@ -641,7 +641,7 @@
 
 .ai-status-tooltip {
   width: min(370px, calc(100vw - 16px));
-  z-index: 2147483647;
+  z-index: 2147483646;
 }
 
 .ai-status-actions {
@@ -685,7 +685,7 @@
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
-  z-index: 2147483647;
+  z-index: 2147483646;
   padding: 4px 8px;
   border-radius: 8px;
   border: 1px solid var(--ai-border);
@@ -772,7 +772,7 @@
 [data-ai-settings-panel] {
   position: fixed;
   inset: 0;
-  z-index: 2147483645;
+  z-index: 2147483647;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1109,6 +1109,8 @@
 
 .ai-key-modal-panel {
   max-width: 520px;
+  position: relative;
+  z-index: 2147483647;
 }
 
 .ai-key-radio {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/ai-ui-react",
-  "version": "1.0.78",
+  "version": "1.0.80",
   "description": "Headless React components for LastBrain AI UI Kit",
   "private": false,
   "type": "module",

package/src/components/AiContextButton.tsx

@@ -84,20 +84,19 @@ export function AiContextButton({
 
   let lbStatus: string | undefined;
   let lbHasSession = false;
-  let lbHasSelectedKey = false;
   let lbHasSelectedApiKeyCookie = false;
+  let lbHasSelectedKey = false;
   let hasLBProvider = false;
   try {
     const lbContext = useLB();
     lbStatus = lbContext.status;
     lbHasSession = Boolean(lbContext.session?.sessionToken);
-    lbHasSelectedKey = Boolean(lbContext.selectedKey?.id);
     lbHasSelectedApiKeyCookie = lbContext.hasSelectedApiKeyCookie;
+    lbHasSelectedKey = Boolean(lbContext.selectedKey?.id);
     hasLBProvider = true;
   } catch {
     lbStatus = undefined;
     lbHasSession = false;
-    lbHasSelectedKey = false;
     hasLBProvider = false;
   }
 
@@ -114,7 +113,8 @@ export function AiContextButton({
     hasLBProvider &&
     lbStatus === "ready" &&
     lbHasSession &&
-    (!lbHasSelectedKey || !lbHasSelectedApiKeyCookie);
+    !lbHasSelectedApiKeyCookie &&
+    !lbHasSelectedKey;
   const isAuthReady =
     !needsApiKeySelection &&
     (lbStatus === "ready" || Boolean(process.env.LB_API_KEY));
@@ -250,8 +250,14 @@ export function AiContextButton({
       <div className="relative inline-block ai-glow">
         <button
           {...buttonProps}
-          onClick={handleOpenPanel}
-          disabled={disabled || loading || !isAuthReady}
+          onClick={() => {
+            if (!isAuthReady) {
+              setShowAuthModal(true);
+              return;
+            }
+            handleOpenPanel();
+          }}
+          disabled={disabled || loading}
           className={`ai-btn ai-context-btn ${variantClass} ${sizeClass} ${radiusClass} ${className || ""}`}
           title={
             !isAuthReady
@@ -292,6 +298,8 @@ export function AiContextButton({
             modelCategory="text"
             baseUrl={baseUrl}
             apiKey={apiKeyId}
+            contextPreview={formatContextData(contextData)}
+            contextPreviewTitle={resolvedContextDescription}
           />
         ) : null}
       </div>

package/src/components/AiImageButton.tsx

@@ -80,21 +80,20 @@ export function AiImageButton({
   // Rendre l'authentification optionnelle
   let lbStatus: string | undefined;
   let lbHasSession = false;
-  let lbHasSelectedKey = false;
   let lbHasSelectedApiKeyCookie = false;
+  let lbHasSelectedKey = false;
   let hasLBProvider = false;
   try {
     const lbContext = useLB();
     lbStatus = lbContext.status;
     lbHasSession = Boolean(lbContext.session?.sessionToken);
-    lbHasSelectedKey = Boolean(lbContext.selectedKey?.id);
     lbHasSelectedApiKeyCookie = lbContext.hasSelectedApiKeyCookie;
+    lbHasSelectedKey = Boolean(lbContext.selectedKey?.id);
     hasLBProvider = true;
   } catch {
     // LBProvider n'est pas disponible, ignorer
     lbStatus = undefined;
     lbHasSession = false;
-    lbHasSelectedKey = false;
     hasLBProvider = false;
   }
 
@@ -110,7 +109,8 @@ export function AiImageButton({
     hasLBProvider &&
     lbStatus === "ready" &&
     lbHasSession &&
-    (!lbHasSelectedKey || !lbHasSelectedApiKeyCookie);
+    !lbHasSelectedApiKeyCookie &&
+    !lbHasSelectedKey;
   const isAuthReady =
     !needsApiKeySelection &&
     (lbStatus === "ready" || Boolean(process.env.LB_API_KEY));
@@ -229,8 +229,14 @@ export function AiImageButton({
       <div className="relative inline-block ai-glow">
         <button
           {...buttonProps}
-          onClick={handleOpenPanel}
-          disabled={disabled || loading || !isAuthReady}
+          onClick={() => {
+            if (!isAuthReady) {
+              setShowAuthModal(true);
+              return;
+            }
+            handleOpenPanel();
+          }}
+          disabled={disabled || loading}
           className={`ai-btn ai-image-btn ${variantClass} ${sizeClass} ${radiusClass} ${className || ""}`}
           style={buttonProps.style}
           data-ai-image-button

package/src/components/AiInput.tsx

@@ -61,21 +61,20 @@ export function AiInput({
   // Rendre l'authentification optionnelle
   let lbStatus: string | undefined;
   let lbHasSession = false;
-  let lbHasSelectedKey = false;
   let lbHasSelectedApiKeyCookie = false;
+  let lbHasSelectedKey = false;
   let hasLBProvider = false;
   try {
     const lbContext = useLB();
     lbStatus = lbContext.status;
     lbHasSession = Boolean(lbContext.session?.sessionToken);
-    lbHasSelectedKey = Boolean(lbContext.selectedKey?.id);
     lbHasSelectedApiKeyCookie = lbContext.hasSelectedApiKeyCookie;
+    lbHasSelectedKey = Boolean(lbContext.selectedKey?.id);
     hasLBProvider = true;
   } catch {
     // LBProvider n'est pas disponible, ignorer
     lbStatus = undefined;
     lbHasSession = false;
-    lbHasSelectedKey = false;
     hasLBProvider = false;
   }
 
@@ -106,7 +105,8 @@ export function AiInput({
     hasLBProvider &&
     lbStatus === "ready" &&
     lbHasSession &&
-    (!lbHasSelectedKey || !lbHasSelectedApiKeyCookie);
+    !lbHasSelectedApiKeyCookie &&
+    !lbHasSelectedKey;
   const isAuthReady =
     !needsApiKeySelection &&
     (lbStatus === "ready" || Boolean(process.env.LB_API_KEY));