@lastbrain/ai-ui-react 1.0.52 → 1.0.55

package/dist/components/AiStatusButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AiStatusButton.d.ts","sourceRoot":"","sources":["../../src/components/AiStatusButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAoBtD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAe,EACf,SAAc,GACf,EAAE,mBAAmB,2CA8iCrB"}
+{"version":3,"file":"AiStatusButton.d.ts","sourceRoot":"","sources":["../../src/components/AiStatusButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAmBtD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAe,EACf,SAAc,GACf,EAAE,mBAAmB,2CA0iCrB"}

package/dist/components/AiStatusButton.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useRef, useLayoutEffect } from "react";
 import { createPortal } from "react-dom";
-import { BarChart3, Settings, FileText, History as HistoryIcon, FolderPlus, Power, LogOut, Key, ArrowRightLeft, } from "lucide-react";
+import { BarChart3, Settings, FileText, History as HistoryIcon, FolderPlus, Power, LogOut, ArrowRightLeft, } from "lucide-react";
 import { aiStyles, calculateTooltipPosition } from "../styles/inline";
 import { useLB } from "../context/LBAuthProvider";
 import { useAiContext } from "../context/AiProvider";
@@ -16,7 +16,9 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
     let apiKeys = [];
     let accessToken;
     let selectApiKeyWithToken;
+    let switchApiKey;
     let lbApiStatus = null;
+    let lbIsLoadingStatus = false;
     try {
         const lbContext = useLB();
         lbStatus = lbContext.status;
@@ -25,7 +27,9 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
         apiKeys = lbContext.apiKeys || [];
         accessToken = lbContext.accessToken;
         selectApiKeyWithToken = lbContext.selectApiKeyWithToken;
+        switchApiKey = lbContext.switchApiKey;
         lbApiStatus = lbContext.apiStatus;
+        lbIsLoadingStatus = lbContext.isLoadingStatus || false;
     }
     catch {
         // LBProvider n'est pas disponible, ignorer
@@ -47,6 +51,8 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
     }
     const [showSigninModal, setShowSigninModal] = useState(false);
     const [showApiKeySelector, setShowApiKeySelector] = useState(false);
+    const [isSelectingApiKey, setIsSelectingApiKey] = useState(false);
+    const [isLoadingStatus, setIsLoadingStatus] = useState(false);
     const formatNumber = (value) => typeof value === "number" ? value.toLocaleString() : "0";
     const formatFixed = (value, digits) => typeof value === "number" ? value.toFixed(digits) : "0.00";
     const formatStorage = (valueMb) => {
@@ -174,7 +180,7 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
             }
         }, 100);
     };
-    if (loading) {
+    if (loading || isSelectingApiKey || isLoadingStatus || lbIsLoadingStatus) {
         return (_jsx("button", { ref: buttonRef, style: {
                 ...aiStyles.statusButton,
                 ...aiStyles.statusButtonDisabled,
@@ -379,9 +385,15 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
                                                 display: "flex",
                                                 alignItems: "center",
                                                 gap: "8px",
-                                            }, children: [_jsx("span", { style: aiStyles.tooltipValue, children: effectiveStatus.apiKey?.name ||
-                                                        effectiveStatus.api_key?.name ||
-                                                        "Unknown" }), selectApiKeyWithToken && (_jsx("button", { onClick: (e) => {
+                                            }, children: [_jsx("span", { style: aiStyles.tooltipValue, children: lbIsLoadingStatus ? (_jsx("div", { style: {
+                                                            height: "16px",
+                                                            width: "100px",
+                                                            background: "rgba(139, 92, 246, 0.1)",
+                                                            borderRadius: "4px",
+                                                            animation: "pulse 2s ease-in-out infinite",
+                                                        } })) : (effectiveStatus?.apiKey?.name ||
+                                                        effectiveStatus?.api_key?.name ||
+                                                        "Unknown") }), switchApiKey && (_jsx("button", { onClick: (e) => {
                                                         e.stopPropagation();
                                                         setShowTooltip(false);
                                                         setShowApiKeySelector(true);
@@ -509,26 +521,7 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
                                         Object.assign(e.currentTarget.style, {
                                             background: "transparent",
                                         });
-                                    }, title: "New Folder", children: _jsx(FolderPlus, { size: 18 }) }), selectApiKeyWithToken && apiKeys.length > 1 && (_jsx("button", { onClick: () => setShowApiKeySelector(true), style: {
-                                        background: "transparent",
-                                        border: "none",
-                                        padding: "14px",
-                                        cursor: "pointer",
-                                        display: "flex",
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                        color: "#8b5cf6",
-                                        transition: "all 0.2s ease",
-                                        borderRadius: "4px",
-                                    }, onMouseEnter: (e) => {
-                                        Object.assign(e.currentTarget.style, {
-                                            background: "rgba(139, 92, 246, 0.1)",
-                                        });
-                                    }, onMouseLeave: (e) => {
-                                        Object.assign(e.currentTarget.style, {
-                                            background: "transparent",
-                                        });
-                                    }, title: "Change API Key", children: _jsx(Key, { size: 18 }) })), logout && (_jsx("button", { onClick: async () => {
+                                    }, title: "New Folder", children: _jsx(FolderPlus, { size: 18 }) }), logout && (_jsx("button", { onClick: async () => {
                                         try {
                                             await logout();
                                             setShowTooltip(false);
@@ -559,11 +552,19 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
                                         Object.assign(e.currentTarget.style, {
                                             background: "transparent",
                                         });
-                                    }, title: "Logout", children: _jsx(LogOut, { size: 18 }) }))] })] }), document.body), showApiKeySelector && selectApiKeyWithToken && (_jsx(LBApiKeySelector, { isOpen: showApiKeySelector, apiKeys: apiKeys, onSelect: async (keyId) => {
+                                    }, title: "Logout", children: _jsx(LogOut, { size: 18 }) }))] })] }), document.body), showApiKeySelector && apiKeys.length > 0 && (_jsx(LBApiKeySelector, { isOpen: showApiKeySelector, apiKeys: apiKeys, onSelect: async (keyId) => {
+                    setIsSelectingApiKey(true);
                     try {
-                        await selectApiKeyWithToken(keyId);
+                        // Utiliser la nouvelle fonction switchApiKey qui gère automatiquement le contexte
+                        if (switchApiKey) {
+                            await switchApiKey(keyId);
+                        }
+                        else {
+                            throw new Error("Switch API key function not available");
+                        }
                         setShowApiKeySelector(false);
                         setShowTooltip(false);
+                        setIsLoadingStatus(true);
                         // Refresh provider data after API key selection
                         if (refetchProviders) {
                             await refetchProviders();
@@ -572,5 +573,9 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
                     catch (error) {
                         console.error("Failed to select API key:", error);
                     }
+                    finally {
+                        setIsSelectingApiKey(false);
+                        setIsLoadingStatus(false);
+                    }
                 }, onCancel: () => setShowApiKeySelector(false) }))] }));
 }

package/dist/components/LBSigninModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LBSigninModal.d.ts","sourceRoot":"","sources":["../../src/components/LBSigninModal.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,kBAAkB,kDAojBpE"}
+{"version":3,"file":"LBSigninModal.d.ts","sourceRoot":"","sources":["../../src/components/LBSigninModal.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,kBAAkB,kDA6jBpE"}

package/dist/components/LBSigninModal.js

@@ -1,19 +1,29 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useLB } from "../context/LBAuthProvider";
 import { LBApiKeySelector } from "./LBApiKeySelector";
 import { Mail, Lock, Sparkles, X, Loader2, AlertCircle } from "lucide-react";
 export function LBSigninModal({ isOpen, onClose }) {
+    // React Hooks doivent être appelés avant toute condition ou return
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState("");
+    const [showKeySelector, setShowKeySelector] = useState(false);
+    const [currentApiKeys, setCurrentApiKeys] = useState([]); // Stocker les clés API localement
     // Vérifier si LBProvider est disponible
     let login;
     let selectApiKeyWithToken;
+    let fetchApiKeys;
     let apiKeys = [];
     let lbStatus;
+    let lbContext;
     try {
-        const lbContext = useLB();
+        lbContext = useLB();
         login = lbContext.login;
         selectApiKeyWithToken = lbContext.selectApiKeyWithToken;
+        fetchApiKeys = lbContext.fetchApiKeys;
         apiKeys = lbContext.apiKeys || [];
         lbStatus = lbContext.status;
     }
@@ -21,17 +31,6 @@ export function LBSigninModal({ isOpen, onClose }) {
         // LBProvider n'est pas disponible, ne pas rendre le modal
         return null;
     }
-    const [email, setEmail] = useState("");
-    const [password, setPassword] = useState("");
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState("");
-    const [showKeySelector, setShowKeySelector] = useState(false);
-    // Si le status est "needs_key_selection", afficher le sélecteur
-    useEffect(() => {
-        if (lbStatus === "needs_key_selection" && apiKeys.length > 0) {
-            setShowKeySelector(true);
-        }
-    }, [lbStatus, apiKeys.length]);
     if (!isOpen || !login)
         return null;
     const handleSubmit = async (e) => {
@@ -43,7 +42,21 @@ export function LBSigninModal({ isOpen, onClose }) {
             if (result.success) {
                 if (result.needsKeySelection) {
                     // L'utilisateur doit choisir une clé API
-                    setShowKeySelector(true);
+                    // Récupérer les clés API avec l'access token temporaire
+                    if (fetchApiKeys && lbContext.accessToken) {
+                        try {
+                            const keys = await fetchApiKeys(lbContext.accessToken);
+                            setCurrentApiKeys(keys);
+                            setShowKeySelector(true);
+                        }
+                        catch (keyError) {
+                            setError("Impossible de récupérer les clés API");
+                            console.error("Failed to fetch API keys:", keyError);
+                        }
+                    }
+                    else {
+                        setError("Accès aux clés API indisponible");
+                    }
                 }
                 else {
                     // Connexion réussie, fermer le modal
@@ -76,13 +89,12 @@ export function LBSigninModal({ isOpen, onClose }) {
     };
     const handleCancelKeySelection = () => {
         setShowKeySelector(false);
-        setEmail("");
-        setPassword("");
-        setError("");
+        // Fermer complètement le modal au lieu de rester dans l'état de sélection
+        onClose();
     };
     // Si on doit afficher le sélecteur de clés
-    if (showKeySelector && apiKeys.length > 0) {
-        return (_jsx(LBApiKeySelector, { apiKeys: apiKeys, onSelect: handleKeySelect, onCancel: handleCancelKeySelection, isOpen: true }));
+    if (showKeySelector && currentApiKeys.length > 0) {
+        return (_jsx(LBApiKeySelector, { apiKeys: currentApiKeys, onSelect: handleKeySelect, onCancel: handleCancelKeySelection, isOpen: true }));
     }
     const handleKeyDown = (e) => {
         if (e.key === "Escape") {
@@ -307,7 +319,7 @@ export function LBSigninModal({ isOpen, onClose }) {
                                                 fontSize: "14px",
                                                 color: "light-dark(#64748b, #94a3b8)",
                                                 fontWeight: 500,
-                                            }, children: "Pas encore de compte ?" }), _jsxs("a", { href: "https://lastbrain.io/signup", target: "_blank", rel: "noopener noreferrer", style: {
+                                            }, children: "Pas encore de compte ?" }), _jsxs("a", { href: "https://prompt.lastbrain.io/signup", target: "_blank", rel: "noopener noreferrer", style: {
                                                 display: "inline-flex",
                                                 alignItems: "center",
                                                 gap: "8px",

package/dist/context/LBAuthProvider.d.ts

@@ -30,6 +30,8 @@ interface LBContextValue extends LBAuthState {
     selectApiKey: (accessToken: string, apiKeyId: string) => Promise<void>;
     /** Sélectionne une clé API avec le token stocké */
     selectApiKeyWithToken: (apiKeyId: string) => Promise<void>;
+    /** Change l'API key active (fonctionne avec session ou token) */
+    switchApiKey: (apiKeyId: string) => Promise<void>;
     /** Recharge l'état de la session */
     refreshSession: () => Promise<void>;
     /** Clés API disponibles */
@@ -40,6 +42,8 @@ interface LBContextValue extends LBAuthState {
     apiStatus: AiStatus | null;
     /** Fonction pour rafraîchir le status */
     refreshStatus: () => Promise<void>;
+    /** Indique si le status est en cours de chargement */
+    isLoadingStatus: boolean;
 }
 export declare function LBProvider({ children, baseUrl: _baseUrl, proxyUrl, onStatusChange, onAuthChange, }: LBProviderProps): import("react/jsx-runtime").JSX.Element;
 /**

package/dist/context/LBAuthProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LBAuthProvider.d.ts","sourceRoot":"","sources":["../../src/context/LBAuthProvider.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,WAAW,EACX,QAAQ,EAIR,QAAQ,EACT,MAAM,uBAAuB,CAAC;AAE/B,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACzD,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,UAAU,cAAe,SAAQ,WAAW;IAC1C,4BAA4B;IAC5B,KAAK,EAAE,CACL,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC;QACX,OAAO,EAAE,OAAO,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC7B,CAAC,CAAC;IACH,8BAA8B;IAC9B,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,6CAA6C;IAC7C,YAAY,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC3D,gEAAgE;IAChE,YAAY,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACvE,mDAAmD;IACnD,qBAAqB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3D,oCAAoC;IACpC,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,2BAA2B;IAC3B,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,SAAS,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC3B,yCAAyC;IACzC,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CACpC;AAID,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EAAE,QAA2B,EACpC,QAA2B,EAC3B,cAAc,EACd,YAAY,GACb,EAAE,eAAe,2CAkbjB;AAED;;GAEG;AACH,wBAAgB,KAAK,IAAI,cAAc,CAMtC"}
+{"version":3,"file":"LBAuthProvider.d.ts","sourceRoot":"","sources":["../../src/context/LBAuthProvider.tsx"],"names":[],"mappings":"AAEA;;;GAGG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EACV,WAAW,EACX,QAAQ,EAIR,QAAQ,EACT,MAAM,uBAAuB,CAAC;AAE/B,UAAU,eAAe;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,uCAAuC;IACvC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mDAAmD;IACnD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC;IACzD,sEAAsE;IACtE,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,UAAU,cAAe,SAAQ,WAAW;IAC1C,4BAA4B;IAC5B,KAAK,EAAE,CACL,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,MAAM,KACb,OAAO,CAAC;QACX,OAAO,EAAE,OAAO,CAAC;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,iBAAiB,CAAC,EAAE,OAAO,CAAC;KAC7B,CAAC,CAAC;IACH,8BAA8B;IAC9B,MAAM,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC5B,6CAA6C;IAC7C,YAAY,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;IAC3D,gEAAgE;IAChE,YAAY,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACvE,mDAAmD;IACnD,qBAAqB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3D,iEAAiE;IACjE,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAClD,oCAAoC;IACpC,cAAc,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACpC,2BAA2B;IAC3B,OAAO,EAAE,QAAQ,EAAE,CAAC;IACpB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kDAAkD;IAClD,SAAS,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC3B,yCAAyC;IACzC,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,sDAAsD;IACtD,eAAe,EAAE,OAAO,CAAC;CAC1B;AAID,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EAAE,QAA2B,EACpC,QAA2B,EAC3B,cAAc,EACd,YAAY,GACb,EAAE,eAAe,2CA2djB;AAED;;GAEG;AACH,wBAAgB,KAAK,IAAI,cAAc,CAMtC"}

package/dist/context/LBAuthProvider.js

@@ -13,6 +13,7 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
     const [apiKeys, setApiKeys] = useState([]);
     const [accessToken, setAccessToken] = useState();
     const [apiStatus, setApiStatus] = useState(null);
+    const [isLoadingStatus, setIsLoadingStatus] = useState(false);
     /**
      * Vérifie si une session existe au chargement
      */
@@ -255,6 +256,36 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
             return { success: false, error: message };
         }
     }, [proxyUrl, fetchApiKeys, selectApiKey]);
+    /**
+     * Récupère le status API (balance, storage, API key info)
+     */
+    const refreshStatus = useCallback(async () => {
+        if (state.status !== "ready") {
+            setApiStatus(null);
+            setIsLoadingStatus(false);
+            return;
+        }
+        setIsLoadingStatus(true);
+        try {
+            const response = await fetch(`${proxyUrl}/auth/status`, {
+                credentials: "include",
+            });
+            if (response.ok) {
+                const data = await response.json();
+                setApiStatus(data);
+            }
+            else {
+                setApiStatus(null);
+            }
+        }
+        catch (error) {
+            console.error("[LBProvider] Failed to fetch status:", error);
+            setApiStatus(null);
+        }
+        finally {
+            setIsLoadingStatus(false);
+        }
+    }, [proxyUrl, state.status]);
     /**
      * Sélectionne une clé API avec le token déjà stocké (après login)
      */
@@ -264,6 +295,33 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
         }
         await selectApiKey(accessToken, apiKeyId);
     }, [accessToken, selectApiKey]);
+    /**
+     * Change l'API key active - utilise la bonne méthode selon le contexte
+     */
+    const switchApiKey = useCallback(async (apiKeyId) => {
+        if (state.status === "ready") {
+            // Utiliser la route de switch avec session
+            const response = await fetch(`${proxyUrl}/auth/session/switch-api-key`, {
+                method: "POST",
+                credentials: "include",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ api_key_id: apiKeyId }),
+            });
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                throw new Error(errorData.error || "Failed to switch API key");
+            }
+            // Refresh le status après le changement
+            await refreshStatus();
+        }
+        else if (accessToken) {
+            // Utiliser la méthode avec access token
+            await selectApiKey(accessToken, apiKeyId);
+        }
+        else {
+            throw new Error("No valid authentication method available");
+        }
+    }, [state.status, proxyUrl, accessToken, selectApiKey, refreshStatus]);
     /**
      * Déconnexion
      */
@@ -291,31 +349,6 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
     const refreshSession = useCallback(async () => {
         await checkSession();
     }, [checkSession]);
-    /**
-     * Récupère le status API (balance, storage, API key info)
-     */
-    const refreshStatus = useCallback(async () => {
-        if (state.status !== "ready") {
-            setApiStatus(null);
-            return;
-        }
-        try {
-            const response = await fetch(`${proxyUrl}/auth/status`, {
-                credentials: "include",
-            });
-            if (response.ok) {
-                const data = await response.json();
-                setApiStatus(data);
-            }
-            else {
-                setApiStatus(null);
-            }
-        }
-        catch (error) {
-            console.error("[LBProvider] Failed to fetch status:", error);
-            setApiStatus(null);
-        }
-    }, [proxyUrl, state.status]);
     /**
      * Récupère les clés API avec la session active
      */
@@ -362,11 +395,13 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
         fetchApiKeys,
         selectApiKey,
         selectApiKeyWithToken,
+        switchApiKey,
         refreshSession,
         apiKeys,
         accessToken,
         apiStatus,
         refreshStatus,
+        isLoadingStatus,
     };
     return _jsx(LBContext.Provider, { value: value, children: children });
 }

package/dist/styles/inline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../../src/styles/inline.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA6HH,eAAO,MAAM,QAAQ;WAgBd,KAAK,CAAC,aAAa;gBAKnB,KAAK,CAAC,aAAa;gBAInB,KAAK,CAAC,aAAa;;;;;mBAyBnB,KAAK,CAAC,aAAa;wBAMnB,KAAK,CAAC,aAAa;cAmBnB,KAAK,CAAC,aAAa;mBAKnB,KAAK,CAAC,aAAa;;;;;sBAwBnB,KAAK,CAAC,aAAa;2BAMnB,KAAK,CAAC,aAAa;YAoBnB,KAAK,CAAC,aAAa;iBAMnB,KAAK,CAAC,aAAa;oBAMnB,KAAK,CAAC,aAAa;YA2BnB,KAAK,CAAC,aAAa;iBAKnB,KAAK,CAAC,aAAa;kBAgBnB,KAAK,CAAC,aAAa;uBAMnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAgBnB,KAAK,CAAC,aAAa;mBASnB,KAAK,CAAC,aAAa;oBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;qBASnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;kBAKnB,KAAK,CAAC,aAAa;kBAQnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;oBASnB,KAAK,CAAC,aAAa;iBAcnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;UAcnB,KAAK,CAAC,aAAa;WAenB,KAAK,CAAC,aAAa;kBAWnB,KAAK,CAAC,aAAa;kBAanB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAOnB,KAAK,CAAC,aAAa;sBAiBnB,KAAK,CAAC,aAAa;2BAKnB,KAAK,CAAC,aAAa;eAMnB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;qBAInB,KAAK,CAAC,aAAa;qBAOnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAUnB,KAAK,CAAC,aAAa;CACzB,CAAC;AA+BF,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,OAAO,EACnB,YAAY,GAAE,MAAY,EAC1B,aAAa,GAAE,MAAY,GAC1B;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAoDlE"}
+{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../../src/styles/inline.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA6HH,eAAO,MAAM,QAAQ;WAgBd,KAAK,CAAC,aAAa;gBAKnB,KAAK,CAAC,aAAa;gBAInB,KAAK,CAAC,aAAa;;;;;mBAyBnB,KAAK,CAAC,aAAa;wBAMnB,KAAK,CAAC,aAAa;cAmBnB,KAAK,CAAC,aAAa;mBAKnB,KAAK,CAAC,aAAa;;;;;sBAwBnB,KAAK,CAAC,aAAa;2BAMnB,KAAK,CAAC,aAAa;YAoBnB,KAAK,CAAC,aAAa;iBAMnB,KAAK,CAAC,aAAa;oBAMnB,KAAK,CAAC,aAAa;YA2BnB,KAAK,CAAC,aAAa;iBAKnB,KAAK,CAAC,aAAa;kBAgBnB,KAAK,CAAC,aAAa;uBAMnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAgBnB,KAAK,CAAC,aAAa;mBASnB,KAAK,CAAC,aAAa;oBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;qBASnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;kBAKnB,KAAK,CAAC,aAAa;kBAQnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;oBASnB,KAAK,CAAC,aAAa;iBAcnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;UAcnB,KAAK,CAAC,aAAa;WAenB,KAAK,CAAC,aAAa;kBAWnB,KAAK,CAAC,aAAa;kBAanB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAOnB,KAAK,CAAC,aAAa;sBAiBnB,KAAK,CAAC,aAAa;2BAKnB,KAAK,CAAC,aAAa;eAMnB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;qBAInB,KAAK,CAAC,aAAa;qBAOnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAUnB,KAAK,CAAC,aAAa;CACzB,CAAC;AAoCF,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,OAAO,EACnB,YAAY,GAAE,MAAY,EAC1B,aAAa,GAAE,MAAY,GAC1B;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAoDlE"}

package/dist/styles/inline.js

@@ -529,6 +529,11 @@ if (typeof document !== "undefined") {
         transform: translateY(0);
       }
     }
+    
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.6; }
+    }
   `;
     document.head.appendChild(styleSheet);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/ai-ui-react",
-  "version": "1.0.52",
+  "version": "1.0.55",
   "description": "Headless React components for LastBrain AI UI Kit",
   "private": false,
   "type": "module",
@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "lucide-react": "^0.257.0",
-    "@lastbrain/ai-ui-core": "1.0.41"
+    "@lastbrain/ai-ui-core": "1.0.42"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",

package/src/components/AiStatusButton.tsx

@@ -11,7 +11,6 @@ import {
   FolderPlus,
   Power,
   LogOut,
-  Key,
   ArrowRightLeft,
 } from "lucide-react";
 import { aiStyles, calculateTooltipPosition } from "../styles/inline";
@@ -38,7 +37,9 @@ export function AiStatusButton({
   let apiKeys: any[] = [];
   let accessToken: string | undefined;
   let selectApiKeyWithToken: ((apiKeyId: string) => Promise<void>) | undefined;
+  let switchApiKey: ((apiKeyId: string) => Promise<void>) | undefined;
   let lbApiStatus: any = null;
+  let lbIsLoadingStatus: boolean = false;
 
   try {
     const lbContext = useLB();
@@ -48,7 +49,9 @@ export function AiStatusButton({
     apiKeys = lbContext.apiKeys || [];
     accessToken = lbContext.accessToken;
     selectApiKeyWithToken = lbContext.selectApiKeyWithToken;
+    switchApiKey = lbContext.switchApiKey;
     lbApiStatus = lbContext.apiStatus;
+    lbIsLoadingStatus = lbContext.isLoadingStatus || false;
   } catch {
     // LBProvider n'est pas disponible, ignorer
     lbStatus = undefined;
@@ -71,6 +74,8 @@ export function AiStatusButton({
 
   const [showSigninModal, setShowSigninModal] = useState(false);
   const [showApiKeySelector, setShowApiKeySelector] = useState(false);
+  const [isSelectingApiKey, setIsSelectingApiKey] = useState(false);
+  const [isLoadingStatus, setIsLoadingStatus] = useState(false);
 
   type BalanceUsage = {
     used?: number;
@@ -280,7 +285,7 @@ export function AiStatusButton({
     }, 100);
   };
 
-  if (loading) {
+  if (loading || isSelectingApiKey || isLoadingStatus || lbIsLoadingStatus) {
     return (
       <button
         ref={buttonRef}
@@ -737,11 +742,23 @@ export function AiStatusButton({
                   }}
                 >
                   <span style={aiStyles.tooltipValue}>
-                    {effectiveStatus.apiKey?.name ||
-                      effectiveStatus.api_key?.name ||
-                      "Unknown"}
+                    {lbIsLoadingStatus ? (
+                      <div
+                        style={{
+                          height: "16px",
+                          width: "100px",
+                          background: "rgba(139, 92, 246, 0.1)",
+                          borderRadius: "4px",
+                          animation: "pulse 2s ease-in-out infinite",
+                        }}
+                      />
+                    ) : (
+                      effectiveStatus?.apiKey?.name ||
+                      effectiveStatus?.api_key?.name ||
+                      "Unknown"
+                    )}
                   </span>
-                  {selectApiKeyWithToken && (
+                  {switchApiKey && (
                     <button
                       onClick={(e) => {
                         e.stopPropagation();
@@ -998,38 +1015,6 @@ export function AiStatusButton({
                 <FolderPlus size={18} />
               </button>
 
-              {/* Change API Key Button */}
-              {selectApiKeyWithToken && apiKeys.length > 1 && (
-                <button
-                  onClick={() => setShowApiKeySelector(true)}
-                  style={{
-                    background: "transparent",
-                    border: "none",
-                    padding: "14px",
-                    cursor: "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    color: "#8b5cf6",
-                    transition: "all 0.2s ease",
-                    borderRadius: "4px",
-                  }}
-                  onMouseEnter={(e) => {
-                    Object.assign(e.currentTarget.style, {
-                      background: "rgba(139, 92, 246, 0.1)",
-                    });
-                  }}
-                  onMouseLeave={(e) => {
-                    Object.assign(e.currentTarget.style, {
-                      background: "transparent",
-                    });
-                  }}
-                  title="Change API Key"
-                >
-                  <Key size={18} />
-                </button>
-              )}
-
               {/* Logout Button */}
               {logout && (
                 <button
@@ -1078,21 +1063,31 @@ export function AiStatusButton({
         )}
 
       {/* API Key Selector Modal */}
-      {showApiKeySelector && selectApiKeyWithToken && (
+      {showApiKeySelector && apiKeys.length > 0 && (
         <LBApiKeySelector
           isOpen={showApiKeySelector}
           apiKeys={apiKeys}
           onSelect={async (keyId) => {
+            setIsSelectingApiKey(true);
             try {
-              await selectApiKeyWithToken(keyId);
+              // Utiliser la nouvelle fonction switchApiKey qui gère automatiquement le contexte
+              if (switchApiKey) {
+                await switchApiKey(keyId);
+              } else {
+                throw new Error("Switch API key function not available");
+              }
               setShowApiKeySelector(false);
               setShowTooltip(false);
+              setIsLoadingStatus(true);
               // Refresh provider data after API key selection
               if (refetchProviders) {
                 await refetchProviders();
               }
             } catch (error) {
               console.error("Failed to select API key:", error);
+            } finally {
+              setIsSelectingApiKey(false);
+              setIsLoadingStatus(false);
             }
           }}
           onCancel={() => setShowApiKeySelector(false)}

package/src/components/LBSigninModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useLB } from "../context/LBAuthProvider";
 import { LBApiKeySelector } from "./LBApiKeySelector";
 import { Mail, Lock, Sparkles, X, Loader2, AlertCircle } from "lucide-react";
@@ -11,6 +11,14 @@ export interface LBSigninModalProps {
 }
 
 export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
+  // React Hooks doivent être appelés avant toute condition ou return
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [showKeySelector, setShowKeySelector] = useState(false);
+  const [currentApiKeys, setCurrentApiKeys] = useState<any[]>([]); // Stocker les clés API localement
+
   // Vérifier si LBProvider est disponible
   let login:
     | ((
@@ -23,13 +31,16 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
       }>)
     | undefined;
   let selectApiKeyWithToken: ((apiKeyId: string) => Promise<void>) | undefined;
+  let fetchApiKeys: ((accessToken: string) => Promise<any[]>) | undefined;
   let apiKeys: any[] = [];
   let lbStatus: string | undefined;
 
+  let lbContext: any;
   try {
-    const lbContext = useLB();
+    lbContext = useLB();
     login = lbContext.login;
     selectApiKeyWithToken = lbContext.selectApiKeyWithToken;
+    fetchApiKeys = lbContext.fetchApiKeys;
     apiKeys = lbContext.apiKeys || [];
     lbStatus = lbContext.status;
   } catch {
@@ -37,19 +48,6 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
     return null;
   }
 
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [showKeySelector, setShowKeySelector] = useState(false);
-
-  // Si le status est "needs_key_selection", afficher le sélecteur
-  useEffect(() => {
-    if (lbStatus === "needs_key_selection" && apiKeys.length > 0) {
-      setShowKeySelector(true);
-    }
-  }, [lbStatus, apiKeys.length]);
-
   if (!isOpen || !login) return null;
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -62,7 +60,19 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
       if (result.success) {
         if (result.needsKeySelection) {
           // L'utilisateur doit choisir une clé API
-          setShowKeySelector(true);
+          // Récupérer les clés API avec l'access token temporaire
+          if (fetchApiKeys && lbContext.accessToken) {
+            try {
+              const keys = await fetchApiKeys(lbContext.accessToken);
+              setCurrentApiKeys(keys);
+              setShowKeySelector(true);
+            } catch (keyError) {
+              setError("Impossible de récupérer les clés API");
+              console.error("Failed to fetch API keys:", keyError);
+            }
+          } else {
+            setError("Accès aux clés API indisponible");
+          }
         } else {
           // Connexion réussie, fermer le modal
           onClose();
@@ -96,16 +106,15 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
 
   const handleCancelKeySelection = () => {
     setShowKeySelector(false);
-    setEmail("");
-    setPassword("");
-    setError("");
+    // Fermer complètement le modal au lieu de rester dans l'état de sélection
+    onClose();
   };
 
   // Si on doit afficher le sélecteur de clés
-  if (showKeySelector && apiKeys.length > 0) {
+  if (showKeySelector && currentApiKeys.length > 0) {
     return (
       <LBApiKeySelector
-        apiKeys={apiKeys}
+        apiKeys={currentApiKeys}
         onSelect={handleKeySelect}
         onCancel={handleCancelKeySelection}
         isOpen={true}
@@ -498,7 +507,7 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
                 Pas encore de compte ?
               </p>
               <a
-                href="https://lastbrain.io/signup"
+                href="https://prompt.lastbrain.io/signup"
                 target="_blank"
                 rel="noopener noreferrer"
                 style={{

package/src/context/LBAuthProvider.tsx

@@ -52,6 +52,8 @@ interface LBContextValue extends LBAuthState {
   selectApiKey: (accessToken: string, apiKeyId: string) => Promise<void>;
   /** Sélectionne une clé API avec le token stocké */
   selectApiKeyWithToken: (apiKeyId: string) => Promise<void>;
+  /** Change l'API key active (fonctionne avec session ou token) */
+  switchApiKey: (apiKeyId: string) => Promise<void>;
   /** Recharge l'état de la session */
   refreshSession: () => Promise<void>;
   /** Clés API disponibles */
@@ -62,6 +64,8 @@ interface LBContextValue extends LBAuthState {
   apiStatus: AiStatus | null;
   /** Fonction pour rafraîchir le status */
   refreshStatus: () => Promise<void>;
+  /** Indique si le status est en cours de chargement */
+  isLoadingStatus: boolean;
 }
 
 const LBContext = createContext<LBContextValue | undefined>(undefined);
@@ -79,6 +83,7 @@ export function LBProvider({
   const [apiKeys, setApiKeys] = useState<LBApiKey[]>([]);
   const [accessToken, setAccessToken] = useState<string>();
   const [apiStatus, setApiStatus] = useState<AiStatus | null>(null);
+  const [isLoadingStatus, setIsLoadingStatus] = useState(false);
 
   /**
    * Vérifie si une session existe au chargement
@@ -385,6 +390,36 @@ export function LBProvider({
     [proxyUrl, fetchApiKeys, selectApiKey]
   );
 
+  /**
+   * Récupère le status API (balance, storage, API key info)
+   */
+  const refreshStatus = useCallback(async (): Promise<void> => {
+    if (state.status !== "ready") {
+      setApiStatus(null);
+      setIsLoadingStatus(false);
+      return;
+    }
+
+    setIsLoadingStatus(true);
+    try {
+      const response = await fetch(`${proxyUrl}/auth/status`, {
+        credentials: "include",
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setApiStatus(data);
+      } else {
+        setApiStatus(null);
+      }
+    } catch (error) {
+      console.error("[LBProvider] Failed to fetch status:", error);
+      setApiStatus(null);
+    } finally {
+      setIsLoadingStatus(false);
+    }
+  }, [proxyUrl, state.status]);
+
   /**
    * Sélectionne une clé API avec le token déjà stocké (après login)
    */
@@ -398,6 +433,40 @@ export function LBProvider({
     [accessToken, selectApiKey]
   );
 
+  /**
+   * Change l'API key active - utilise la bonne méthode selon le contexte
+   */
+  const switchApiKey = useCallback(
+    async (apiKeyId: string): Promise<void> => {
+      if (state.status === "ready") {
+        // Utiliser la route de switch avec session
+        const response = await fetch(
+          `${proxyUrl}/auth/session/switch-api-key`,
+          {
+            method: "POST",
+            credentials: "include",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ api_key_id: apiKeyId }),
+          }
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.error || "Failed to switch API key");
+        }
+
+        // Refresh le status après le changement
+        await refreshStatus();
+      } else if (accessToken) {
+        // Utiliser la méthode avec access token
+        await selectApiKey(accessToken, apiKeyId);
+      } else {
+        throw new Error("No valid authentication method available");
+      }
+    },
+    [state.status, proxyUrl, accessToken, selectApiKey, refreshStatus]
+  );
+
   /**
    * Déconnexion
    */
@@ -425,32 +494,6 @@ export function LBProvider({
     await checkSession();
   }, [checkSession]);
 
-  /**
-   * Récupère le status API (balance, storage, API key info)
-   */
-  const refreshStatus = useCallback(async (): Promise<void> => {
-    if (state.status !== "ready") {
-      setApiStatus(null);
-      return;
-    }
-
-    try {
-      const response = await fetch(`${proxyUrl}/auth/status`, {
-        credentials: "include",
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        setApiStatus(data);
-      } else {
-        setApiStatus(null);
-      }
-    } catch (error) {
-      console.error("[LBProvider] Failed to fetch status:", error);
-      setApiStatus(null);
-    }
-  }, [proxyUrl, state.status]);
-
   /**
    * Récupère les clés API avec la session active
    */
@@ -498,11 +541,13 @@ export function LBProvider({
     fetchApiKeys,
     selectApiKey,
     selectApiKeyWithToken,
+    switchApiKey,
     refreshSession,
     apiKeys,
     accessToken,
     apiStatus,
     refreshStatus,
+    isLoadingStatus,
   };
 
   return <LBContext.Provider value={value}>{children}</LBContext.Provider>;

package/src/styles/inline.ts

@@ -600,6 +600,11 @@ if (typeof document !== "undefined") {
         transform: translateY(0);
       }
     }
+    
+    @keyframes pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: 0.6; }
+    }
   `;
   document.head.appendChild(styleSheet);
 }