@lastbrain/ai-ui-react 1.0.78 → 1.0.80

package/src/context/LBAuthProvider.tsx

@@ -46,6 +46,8 @@ export interface BasicStatus {
     used?: number;
     total?: number;
     percentage?: number;
+    remaining?: number;
+    providerBudget?: number;
   };
   storage?: StorageStatus["storage"];
 }
@@ -58,6 +60,20 @@ export interface StorageStatus {
   } | null;
 }
 
+interface WalletStatusResponse {
+  walletSellValueUsd?: number;
+  totalAdded?: number;
+  totalUsed?: number;
+  percentUsed?: number;
+  percentage?: number;
+}
+
+function hasServerSelectedApiKeyCookie(userData: unknown): boolean {
+  if (!userData || typeof userData !== "object") return false;
+  const value = (userData as Record<string, unknown>).hasApiKeySelectedCookie;
+  return value === true;
+}
+
 interface LBProviderProps {
   children: ReactNode;
   /** URL de l'API LastBrain (ex: https://api.lastbrain.io) */
@@ -115,7 +131,7 @@ interface LBContextValue extends LBAuthState {
   isLoadingStatus: boolean;
   /** Indique si le storage est en cours de chargement */
   isLoadingStorage: boolean;
-  /** True si le cookie api_key_selected est présent */
+  /** True si le cookie api_key_selected est présent (info backend) */
   hasSelectedApiKeyCookie: boolean;
 }
 
@@ -145,18 +161,10 @@ export function LBProvider({
   const [isLoadingStatus, setIsLoadingStatus] = useState(false);
   const [isLoadingStorage, setIsLoadingStorage] = useState(false);
   const [storageLastFetch, setStorageLastFetch] = useState<number>(0);
-  const [hasSelectedApiKeyCookie, setHasSelectedApiKeyCookie] = useState(false);
+  const [hasSelectedApiKeyCookie, setHasSelectedApiKeyCookie] =
+    useState(false);
   const previousStatusRef = useRef<LBAuthState["status"]>("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({
@@ -175,6 +183,7 @@ export function LBProvider({
       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,
@@ -193,13 +202,15 @@ export function LBProvider({
             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,
@@ -218,17 +229,20 @@ export function LBProvider({
               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");
         }
       }
     } catch (error) {
       console.error("[LBProvider] Session check failed:", error);
       setState({ status: "needs_auth" });
+      setHasSelectedApiKeyCookie(false);
       onStatusChange?.("needs_auth");
     }
   }, [lbClient, onStatusChange]);
@@ -237,12 +251,42 @@ export function LBProvider({
     checkSession();
   }, [checkSession]);
 
-  useEffect(() => {
-    syncSelectedApiKeyCookie();
-    if (typeof window === "undefined") return;
-    const interval = window.setInterval(syncSelectedApiKeyCookie, 1000);
-    return () => window.clearInterval(interval);
-  }, [syncSelectedApiKeyCookie]);
+  const fetchWalletSummary = useCallback(async (): Promise<{
+    used?: number;
+    total?: number;
+    percentage?: number;
+    remaining?: number;
+  } | null> => {
+    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()) as WalletStatusResponse;
+        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
@@ -294,7 +338,6 @@ export function LBProvider({
         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
       } catch (error) {
@@ -307,7 +350,7 @@ export function LBProvider({
         throw error;
       }
     },
-    [lbClient, onAuthChange, onStatusChange, state.user, syncSelectedApiKeyCookie]
+    [lbClient, onAuthChange, onStatusChange, state.user]
   );
 
   /**
@@ -452,16 +495,20 @@ export function LBProvider({
             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,
@@ -480,7 +527,7 @@ export function LBProvider({
     } finally {
       setIsLoadingStatus(false);
     }
-  }, [lbClient, state.status, storageStatus]);
+  }, [fetchWalletSummary, lbClient, state.status, storageStatus]);
 
   /**
    * Récupère le storage - LENT avec cache (5 minutes)
@@ -572,9 +619,11 @@ export function LBProvider({
           }));
         }
         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");
       }
@@ -587,7 +636,6 @@ export function LBProvider({
       lbClient,
       refreshBasicStatus,
       refreshStorageStatus,
-      syncSelectedApiKeyCookie,
     ]
   );
 
@@ -639,6 +687,12 @@ export function LBProvider({
     }
   }, [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/src/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 {