@lastbrain/ai-ui-react 1.0.27 → 1.0.28

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

@@ -1 +1 @@
-{"version":3,"file":"AiImageButton.d.ts","sourceRoot":"","sources":["../../src/components/AiImageButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAS5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAQ5C,MAAM,WAAW,kBACf,SACE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,EACrC,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACvE,OAAO,CAAC,EAAE,CACR,QAAQ,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAC7C,IAAI,CAAC;IACV,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAgB,EAChB,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,OAAO,EACf,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,aAAoB,EACpB,WAAW,EACX,YAAY,EACZ,aAAa,EACb,GAAG,WAAW,EACf,EAAE,kBAAkB,2CAuYpB"}
+{"version":3,"file":"AiImageButton.d.ts","sourceRoot":"","sources":["../../src/components/AiImageButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAS5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAQ5C,MAAM,WAAW,kBACf,SACE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,EACrC,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACvE,OAAO,CAAC,EAAE,CACR,QAAQ,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAC7C,IAAI,CAAC;IACV,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAgB,EAChB,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,OAAO,EACf,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,aAAoB,EACpB,WAAW,EACX,YAAY,EACZ,aAAa,EACb,GAAG,WAAW,EACf,EAAE,kBAAkB,2CA2ZpB"}

package/dist/components/AiImageButton.js

@@ -132,10 +132,29 @@ export function AiImageButton({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, ui
             }
         }
         catch (error) {
+            let errorMessage = "Erreur lors de la génération de l'image";
+            let errorCode;
+            // Parse JSON error response for INSUFFICIENT_TOKENS
+            if (error instanceof Error) {
+                try {
+                    const errorData = JSON.parse(error.message);
+                    if (errorData.error?.code === "INSUFFICIENT_TOKENS") {
+                        errorMessage = `Solde insuffisant. ${errorData.error.message || "Veuillez recharger votre compte."}`;
+                        errorCode = "INSUFFICIENT_TOKENS";
+                    }
+                }
+                catch {
+                    // If parsing fails, check if error message contains the code
+                    if (error.message.includes("INSUFFICIENT_TOKENS")) {
+                        errorMessage = "Solde insuffisant. Veuillez recharger votre compte pour continuer.";
+                        errorCode = "INSUFFICIENT_TOKENS";
+                    }
+                }
+            }
             onToast?.({
                 type: "error",
-                message: "Erreur lors de la génération de l'image",
-                code: error instanceof Error ? error.message : undefined,
+                message: errorMessage,
+                code: errorCode || (error instanceof Error ? error.message : undefined),
             });
         }
         finally {

package/dist/components/AiPromptPanel.js

@@ -41,9 +41,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
         apiKey,
         baseUrl,
         category: "text", // Par défaut pour AiPromptPanel
-        autoFetch: enableModelManagement &&
-            availableModels.length === 0 &&
-            (!!apiKey || !!baseUrl),
+        autoFetch: enableModelManagement && availableModels.length === 0,
     });
     // Utiliser soit les props externes soit la gestion automatique
     const effectiveAvailableModels = availableModels.length > 0

package/dist/hooks/useModelManagement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModelManagement.d.ts","sourceRoot":"","sources":["../../src/hooks/useModelManagement.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,kBAAkB,EACxB,MAAM,0BAA0B,CAAC;AAQlC,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;CACjD;AAED,MAAM,WAAW,wBAAwB;IAEvC,eAAe,EAAE,OAAO,EAAE,CAAC;IAC3B,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAGrB,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpE,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAGvC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IAC5C,eAAe,EAAE,MAAM,OAAO,EAAE,CAAC;IACjC,iBAAiB,EAAE,MAAM,OAAO,EAAE,CAAC;CACpC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,GAAE,yBAA8B,GACtC,wBAAwB,CA6M1B"}
+{"version":3,"file":"useModelManagement.d.ts","sourceRoot":"","sources":["../../src/hooks/useModelManagement.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,kBAAkB,EACxB,MAAM,0BAA0B,CAAC;AAQlC,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IAC/C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;CACjD;AAED,MAAM,WAAW,wBAAwB;IAEvC,eAAe,EAAE,OAAO,EAAE,CAAC;IAC3B,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAGrB,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpE,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAGvC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IAC5C,eAAe,EAAE,MAAM,OAAO,EAAE,CAAC;IACjC,iBAAiB,EAAE,MAAM,OAAO,EAAE,CAAC;CACpC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,GAAE,yBAA8B,GACtC,wBAAwB,CAyN1B"}

package/dist/hooks/useModelManagement.js

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useMemo } from "react";
 import { useAiContext } from "../context/AiProvider";
 import { toggleUserModel, getAvailableModels, getUserModels, } from "../utils/modelManagement";
 import { getCached, setCache, isRateLimited, getRateLimitResetTime, } from "../utils/cache";
@@ -12,12 +12,12 @@ export function useModelManagement(options = {}) {
     const [userModels, setUserModels] = useState([]);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
-    // Utiliser baseUrl et apiKey du contexte
-    const effectiveOptions = {
-        ...apiOptions,
-        baseUrl: apiOptions.baseUrl || baseUrl,
-        apiKey: apiOptions.apiKey || apiKeyId,
-    };
+    const [apiUnavailable, setApiUnavailable] = useState(false);
+    // Utiliser baseUrl et apiKey du contexte avec memoization
+    const effectiveOptions = useMemo(() => ({
+        baseUrl: options.baseUrl || baseUrl,
+        apiKey: options.apiKey || apiKeyId,
+    }), [options.baseUrl, options.apiKey, baseUrl, apiKeyId]);
     const refreshModels = useCallback(async () => {
         try {
             setLoading(true);
@@ -67,6 +67,11 @@ export function useModelManagement(options = {}) {
         }
     }, [category, effectiveOptions]);
     const refreshUserModels = useCallback(async () => {
+        // Si l'API est marquée comme indisponible, ne pas faire l'appel
+        if (apiUnavailable) {
+            console.log("[useModelManagement] Skipping user models fetch - API marked as unavailable");
+            return;
+        }
         try {
             setLoading(true);
             setError(null);
@@ -84,15 +89,17 @@ export function useModelManagement(options = {}) {
             const errorMessage = err instanceof Error ? err.message : "Erreur inconnue";
             console.error("[useModelManagement] Error fetching user models:", errorMessage);
             setError(errorMessage);
-            // En cas d'erreur 404 (API non disponible), utiliser un array vide
+            // En cas d'erreur 404 (API non disponible), utiliser un array vide et ne pas retry
             if (errorMessage.includes("404") || errorMessage.includes("Not Found")) {
                 setUserModels([]);
+                setApiUnavailable(true);
+                console.warn("[useModelManagement] User models API not available (404), disabling further requests");
             }
         }
         finally {
             setLoading(false);
         }
-    }, [effectiveOptions]);
+    }, [effectiveOptions, apiUnavailable]);
     const toggleModel = useCallback(async (modelId, isActive) => {
         const currentlyActive = userModels.includes(modelId);
         const targetState = isActive !== undefined ? isActive : !currentlyActive;
@@ -129,7 +136,7 @@ export function useModelManagement(options = {}) {
     const getInactiveModels = useCallback(() => {
         return availableModels.filter((model) => !userModels.includes(model.id));
     }, [availableModels, userModels]);
-    // Auto-fetch au mount - si autoFetch ET (apiKey OU baseUrl avec proxy externe)
+    // Auto-fetch au mount - si autoFetch ET (apiKey OU baseUrl avec proxy externe) ET API disponible
     useEffect(() => {
         const isExternalProxy = effectiveOptions.baseUrl &&
             effectiveOptions.baseUrl.includes("/api/lastbrain");
@@ -138,25 +145,30 @@ export function useModelManagement(options = {}) {
             hasApiKey: !!effectiveOptions.apiKey,
             hasBaseUrl: !!effectiveOptions.baseUrl,
             isExternalProxy,
+            apiUnavailable,
             apiKeyPreview: effectiveOptions.apiKey
                 ? effectiveOptions.apiKey.substring(0, 10) + "..."
                 : "none",
             baseUrl: effectiveOptions.baseUrl || "none",
         });
-        // Auto-fetch si autoFetch est activé ET qu'on a soit une apiKey soit un proxy externe
-        if (autoFetch && (effectiveOptions.apiKey || isExternalProxy)) {
+        // Auto-fetch si autoFetch est activé ET qu'on a soit une apiKey soit un proxy externe ET API disponible
+        if (autoFetch && !apiUnavailable && (effectiveOptions.apiKey || isExternalProxy)) {
             console.log("[useModelManagement] Starting auto-fetch...");
             Promise.all([refreshModels(), refreshUserModels()]);
         }
         else if (autoFetch && !effectiveOptions.apiKey && !isExternalProxy) {
             console.warn("[useModelManagement] autoFetch is enabled but no apiKey or baseUrl provided. Skipping automatic fetch.");
         }
+        else if (autoFetch && apiUnavailable) {
+            console.log("[useModelManagement] autoFetch skipped - API marked as unavailable");
+        }
     }, [
         autoFetch,
         refreshModels,
         refreshUserModels,
         effectiveOptions.apiKey,
         effectiveOptions.baseUrl,
+        apiUnavailable,
     ]);
     return {
         availableModels,

package/package.json

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

package/src/components/AiImageButton.tsx

@@ -193,10 +193,30 @@ export function AiImageButton({
         });
       }
     } catch (error) {
+      let errorMessage = "Erreur lors de la génération de l'image";
+      let errorCode: string | undefined;
+      
+      // Parse JSON error response for INSUFFICIENT_TOKENS
+      if (error instanceof Error) {
+        try {
+          const errorData = JSON.parse(error.message);
+          if (errorData.error?.code === "INSUFFICIENT_TOKENS") {
+            errorMessage = `Solde insuffisant. ${errorData.error.message || "Veuillez recharger votre compte."}`;
+            errorCode = "INSUFFICIENT_TOKENS";
+          }
+        } catch {
+          // If parsing fails, check if error message contains the code
+          if (error.message.includes("INSUFFICIENT_TOKENS")) {
+            errorMessage = "Solde insuffisant. Veuillez recharger votre compte pour continuer.";
+            errorCode = "INSUFFICIENT_TOKENS";
+          }
+        }
+      }
+      
       onToast?.({
         type: "error",
-        message: "Erreur lors de la génération de l'image",
-        code: error instanceof Error ? error.message : undefined,
+        message: errorMessage,
+        code: errorCode || (error instanceof Error ? error.message : undefined),
       });
     } finally {
       setIsOpen(false);

package/src/components/AiPromptPanel.tsx

@@ -118,10 +118,7 @@ function AiPromptPanelInternal({
     apiKey,
     baseUrl,
     category: "text", // Par défaut pour AiPromptPanel
-    autoFetch:
-      enableModelManagement &&
-      availableModels.length === 0 &&
-      (!!apiKey || !!baseUrl),
+    autoFetch: enableModelManagement && availableModels.length === 0,
   });
 
   // Utiliser soit les props externes soit la gestion automatique

package/src/hooks/useModelManagement.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useMemo } from "react";
 import { useAiContext } from "../context/AiProvider";
 import {
   toggleUserModel,
@@ -60,13 +60,13 @@ export function useModelManagement(
   const [userModels, setUserModels] = useState<string[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [apiUnavailable, setApiUnavailable] = useState(false);
 
-  // Utiliser baseUrl et apiKey du contexte
-  const effectiveOptions = {
-    ...apiOptions,
-    baseUrl: apiOptions.baseUrl || baseUrl,
-    apiKey: apiOptions.apiKey || apiKeyId,
-  };
+  // Utiliser baseUrl et apiKey du contexte avec memoization
+  const effectiveOptions = useMemo(() => ({
+    baseUrl: options.baseUrl || baseUrl,
+    apiKey: options.apiKey || apiKeyId,
+  }), [options.baseUrl, options.apiKey, baseUrl, apiKeyId]);
 
   const refreshModels = useCallback(async () => {
     try {
@@ -134,6 +134,12 @@ export function useModelManagement(
   }, [category, effectiveOptions]);
 
   const refreshUserModels = useCallback(async () => {
+    // Si l'API est marquée comme indisponible, ne pas faire l'appel
+    if (apiUnavailable) {
+      console.log("[useModelManagement] Skipping user models fetch - API marked as unavailable");
+      return;
+    }
+
     try {
       setLoading(true);
       setError(null);
@@ -156,14 +162,16 @@ export function useModelManagement(
         errorMessage
       );
       setError(errorMessage);
-      // En cas d'erreur 404 (API non disponible), utiliser un array vide
+      // En cas d'erreur 404 (API non disponible), utiliser un array vide et ne pas retry
       if (errorMessage.includes("404") || errorMessage.includes("Not Found")) {
         setUserModels([]);
+        setApiUnavailable(true);
+        console.warn("[useModelManagement] User models API not available (404), disabling further requests");
       }
     } finally {
       setLoading(false);
     }
-  }, [effectiveOptions]);
+  }, [effectiveOptions, apiUnavailable]);
 
   const toggleModel = useCallback(
     async (modelId: string, isActive?: boolean) => {
@@ -211,7 +219,7 @@ export function useModelManagement(
     return availableModels.filter((model) => !userModels.includes(model.id));
   }, [availableModels, userModels]);
 
-  // Auto-fetch au mount - si autoFetch ET (apiKey OU baseUrl avec proxy externe)
+  // Auto-fetch au mount - si autoFetch ET (apiKey OU baseUrl avec proxy externe) ET API disponible
   useEffect(() => {
     const isExternalProxy =
       effectiveOptions.baseUrl &&
@@ -222,20 +230,23 @@ export function useModelManagement(
       hasApiKey: !!effectiveOptions.apiKey,
       hasBaseUrl: !!effectiveOptions.baseUrl,
       isExternalProxy,
+      apiUnavailable,
       apiKeyPreview: effectiveOptions.apiKey
         ? effectiveOptions.apiKey.substring(0, 10) + "..."
         : "none",
       baseUrl: effectiveOptions.baseUrl || "none",
     });
 
-    // Auto-fetch si autoFetch est activé ET qu'on a soit une apiKey soit un proxy externe
-    if (autoFetch && (effectiveOptions.apiKey || isExternalProxy)) {
+    // Auto-fetch si autoFetch est activé ET qu'on a soit une apiKey soit un proxy externe ET API disponible
+    if (autoFetch && !apiUnavailable && (effectiveOptions.apiKey || isExternalProxy)) {
       console.log("[useModelManagement] Starting auto-fetch...");
       Promise.all([refreshModels(), refreshUserModels()]);
     } else if (autoFetch && !effectiveOptions.apiKey && !isExternalProxy) {
       console.warn(
         "[useModelManagement] autoFetch is enabled but no apiKey or baseUrl provided. Skipping automatic fetch."
       );
+    } else if (autoFetch && apiUnavailable) {
+      console.log("[useModelManagement] autoFetch skipped - API marked as unavailable");
     }
   }, [
     autoFetch,
@@ -243,6 +254,7 @@ export function useModelManagement(
     refreshUserModels,
     effectiveOptions.apiKey,
     effectiveOptions.baseUrl,
+    apiUnavailable,
   ]);
 
   return {