@lastbrain/ai-ui-react 1.0.34 → 1.0.36

package/dist/hooks/useModelManagement.js

@@ -1,181 +1,73 @@
-import { useState, useCallback, useEffect, useMemo } from "react";
+import { useState, useCallback, useMemo } from "react";
 import { useAiContext } from "../context/AiProvider";
-import { toggleUserModel, getAvailableModels, getUserModels, } from "../utils/modelManagement";
-import { getCached, setCache, isRateLimited, getRateLimitResetTime, } from "../utils/cache";
+import { toggleUserModel, } from "../utils/modelManagement";
 /**
  * Hook pour gérer les modèles IA d'un utilisateur
+ * Utilise les données du contexte pour éviter les appels API multiples
  */
 export function useModelManagement(options = {}) {
-    const { autoFetch = false, category, ...apiOptions } = options;
-    const { baseUrl, apiKeyId } = useAiContext();
-    const [availableModels, setAvailableModels] = useState([]);
-    const [userModels, setUserModels] = useState([]);
+    const { category } = options;
+    const context = useAiContext();
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
-    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]);
+    // Utiliser les données du contexte si disponibles
+    const useContextData = (!options.baseUrl || options.baseUrl === context.baseUrl) &&
+        (!options.apiKey || options.apiKey === context.apiKeyId);
+    // Filtrer par catégorie si nécessaire
+    const filteredModels = useMemo(() => {
+        if (!useContextData)
+            return [];
+        return category
+            ? context.availableModels.filter((m) => m.category === category)
+            : context.availableModels;
+    }, [useContextData, category, context.availableModels]);
     const refreshModels = useCallback(async () => {
-        try {
-            setLoading(true);
-            setError(null);
-            // Check cache first (5 minutes TTL for models)
-            const cacheKey = `models_${category || "all"}`;
-            const cached = getCached(cacheKey, 300000);
-            if (cached) {
-                console.log("[useModelManagement] Using cached models");
-                setAvailableModels(cached);
-                setLoading(false);
-                return;
-            }
-            // Check rate limit (max 5 calls per minute)
-            if (isRateLimited("models_fetch", 5, 60000)) {
-                const resetTime = getRateLimitResetTime("models_fetch");
-                const resetSeconds = Math.ceil(resetTime / 1000);
-                throw new Error(`Rate limit exceeded. Please wait ${resetSeconds}s before trying again.`);
-            }
-            console.log("[useModelManagement] Fetching available models with options:", {
-                apiKey: effectiveOptions.apiKey
-                    ? effectiveOptions.apiKey.substring(0, 10) + "..."
-                    : "none",
-                baseUrl: effectiveOptions.baseUrl || "default",
-            });
-            const models = await getAvailableModels(effectiveOptions);
-            console.log("[useModelManagement] Got available models:", models.length);
-            const filteredModels = category
-                ? models.filter((m) => m.category === category)
-                : models;
-            setAvailableModels(filteredModels);
-            // Cache the results
-            setCache(cacheKey, filteredModels);
-            console.log("[useModelManagement] Set filtered models:", filteredModels.length);
-        }
-        catch (err) {
-            const errorMessage = err instanceof Error ? err.message : "Erreur inconnue";
-            console.error("[useModelManagement] Error fetching available models:", errorMessage);
-            setError(errorMessage);
-            // En cas d'erreur 404 (API non disponible), utiliser un array vide
-            if (errorMessage.includes("404") || errorMessage.includes("Not Found")) {
-                setAvailableModels([]);
-            }
+        if (useContextData) {
+            await context.refetchProviders();
         }
-        finally {
-            setLoading(false);
-        }
-    }, [category, effectiveOptions]);
+    }, [useContextData, context]);
     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);
-            console.log("[useModelManagement] Fetching user models with options:", {
-                apiKey: effectiveOptions.apiKey
-                    ? effectiveOptions.apiKey.substring(0, 10) + "..."
-                    : "none",
-                baseUrl: effectiveOptions.baseUrl || "default",
-            });
-            const models = await getUserModels(effectiveOptions);
-            console.log("[useModelManagement] Got user models:", models);
-            setUserModels(models);
+        if (useContextData) {
+            await context.refetchUserModels();
         }
-        catch (err) {
-            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 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, apiUnavailable]);
+    }, [useContextData, context]);
     const toggleModel = useCallback(async (modelId, isActive) => {
-        const currentlyActive = userModels.includes(modelId);
+        const currentlyActive = context.userModels.includes(modelId);
         const targetState = isActive !== undefined ? isActive : !currentlyActive;
         try {
             setLoading(true);
             setError(null);
+            const effectiveOptions = {
+                baseUrl: options.baseUrl || context.baseUrl,
+                apiKey: options.apiKey || context.apiKeyId,
+            };
             await toggleUserModel(modelId, targetState, effectiveOptions);
-            // Mise à jour optimiste
-            if (targetState) {
-                setUserModels((prev) => [
-                    ...prev.filter((id) => id !== modelId),
-                    modelId,
-                ]);
-            }
-            else {
-                setUserModels((prev) => prev.filter((id) => id !== modelId));
-            }
+            // Rafraîchir les modèles utilisateur depuis le contexte
+            await context.refetchUserModels();
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : "Erreur inconnue");
+            const errorMessage = err instanceof Error ? err.message : "Erreur inconnue";
+            console.error("[useModelManagement] Error toggling model:", errorMessage);
+            setError(errorMessage);
             throw err;
         }
         finally {
             setLoading(false);
         }
-    }, [userModels, effectiveOptions]);
-    // Helpers
+    }, [context, options.baseUrl, options.apiKey]);
     const isModelActive = useCallback((modelId) => {
-        return userModels.includes(modelId);
-    }, [userModels]);
+        return context.userModels.includes(modelId);
+    }, [context.userModels]);
     const getActiveModels = useCallback(() => {
-        return availableModels.filter((model) => userModels.includes(model.id));
-    }, [availableModels, userModels]);
+        return filteredModels.filter((model) => context.userModels.includes(model.id));
+    }, [filteredModels, context.userModels]);
     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) ET API disponible
-    useEffect(() => {
-        const isExternalProxy = effectiveOptions.baseUrl &&
-            effectiveOptions.baseUrl.includes("/api/lastbrain");
-        console.log("[useModelManagement] useEffect triggered:", {
-            autoFetch,
-            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 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 filteredModels.filter((model) => !context.userModels.includes(model.id));
+    }, [filteredModels, context.userModels]);
     return {
-        availableModels,
-        userModels,
-        loading,
+        availableModels: filteredModels,
+        userModels: context.userModels,
+        loading: context.loadingProviders || context.loadingUserModels || loading,
         error,
         toggleModel,
         refreshModels,

package/dist/utils/modelManagement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modelManagement.d.ts","sourceRoot":"","sources":["../../src/utils/modelManagement.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,wBAAsB,eAAe,CACnC,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,OAAO,EACjB,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,IAAI,CAAC,CAiCf;AAED;;GAEG;AACH,wBAAsB,kBAAkB,CACtC,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CACR,KAAK,CAAC;IACJ,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,CAAC,CACH,CA6CA;AAED;;GAEG;AACH,wBAAsB,aAAa,CACjC,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,MAAM,EAAE,CAAC,CA6CnB"}
+{"version":3,"file":"modelManagement.d.ts","sourceRoot":"","sources":["../../src/utils/modelManagement.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,wBAAsB,eAAe,CACnC,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,OAAO,EACjB,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,IAAI,CAAC,CAqCf;AAED;;GAEG;AACH,wBAAsB,kBAAkB,CACtC,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CACR,KAAK,CAAC;IACJ,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,CAAC,CACH,CA6CA;AAED;;GAEG;AACH,wBAAsB,aAAa,CACjC,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,MAAM,EAAE,CAAC,CA6CnB"}

package/dist/utils/modelManagement.js

@@ -14,11 +14,15 @@ export async function toggleUserModel(modelId, isActive, options = {}) {
         headers["Authorization"] = `Bearer ${apiKey}`;
     }
     const isPublicApi = baseUrl && baseUrl.includes("/api/public/v1");
+    const isExternalProxy = baseUrl && baseUrl.includes("/api/lastbrain");
+    // Route mapping pour toggle
     const endpoint = isPublicApi
         ? `${baseUrl}/ai/user/models/toggle`
-        : baseUrl
-            ? `${baseUrl}/auth/ai-models-toggle`
-            : `/api/ai/auth/ai-models-toggle`;
+        : isExternalProxy
+            ? `${baseUrl}/ai/user/models/toggle` // Gateway mappe automatiquement
+            : baseUrl
+                ? `${baseUrl}/auth/ai-models-toggle`
+                : `/api/ai/auth/ai-models-toggle`;
     const response = await fetch(endpoint, {
         method: "PUT",
         headers,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/ai-ui-react",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "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.23"
+    "@lastbrain/ai-ui-core": "1.0.25"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",

package/src/components/AiChipLabel.tsx

@@ -93,7 +93,11 @@ export function AiChipInput({
   const apiKeyId = propApiKeyId ?? aiContext.apiKeyId;
 
   // Hooks pour l'IA avec les valeurs du contexte
-  const { models } = useAiModels({ baseUrl, apiKeyId });
+  const { models } = useAiModels({
+    baseUrl,
+    apiKeyId,
+    modelType: "text-or-language",
+  });
   const { generateText } = useAiCallText({ baseUrl, apiKeyId });
 
   const addChip = (text: string) => {

package/src/components/AiContextButton.tsx

@@ -72,6 +72,7 @@ export function AiContextButton({
   const { models, loading: modelsLoading } = useAiModels({
     baseUrl,
     apiKeyId,
+    modelType: "text-or-language",
   });
   const { generateText: callText, loading } = useAiCallText({
     baseUrl,

package/src/components/AiImageButton.tsx

@@ -63,9 +63,15 @@ export function AiImageButton({
   const baseUrl = propBaseUrl ?? aiContext.baseUrl;
   const apiKeyId = propApiKeyId ?? aiContext.apiKeyId;
 
-  const { models } = useAiModels({ baseUrl, apiKeyId });
+  // Récupérer uniquement les modèles image
+  const { models } = useAiModels({ baseUrl, apiKeyId, modelType: "image" });
   const { generateImage, loading } = useAiCallImage({ baseUrl, apiKeyId });
 
+  console.log("[AiImageButton] Models received:", {
+    count: models.length,
+    models: models.map((m) => ({ id: m.id, name: m.name, type: m.type })),
+  });
+
   const handleOpenPanel = () => {
     setIsOpen(true);
   };
@@ -287,7 +293,15 @@ export function AiImageButton({
             onClose={handleClosePanel}
             onSubmit={handleSubmit}
             uiMode={uiMode}
-            models={models?.filter((m) => m.type === "image") || []}
+            models={(() => {
+              const filteredModels = models.filter((m) => m.type === "image");
+              console.log("[AiImageButton] Passing to AiPromptPanel:", {
+                originalCount: models.length,
+                filteredCount: filteredModels.length,
+                models: filteredModels,
+              });
+              return filteredModels;
+            })()}
           />
         )}
       </div>

package/src/components/AiInput.tsx

@@ -44,7 +44,11 @@ export function AiInput({
   const inputRef = useRef<HTMLInputElement>(null);
   const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
 
-  const { models } = useAiModels({ baseUrl, apiKeyId });
+  const { models } = useAiModels({
+    baseUrl,
+    apiKeyId,
+    modelType: "text-or-language",
+  });
   const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
 
   const hasConfiguration = Boolean(model && prompt);

package/src/components/AiPromptPanel.tsx

@@ -17,7 +17,8 @@ import {
   type Prompt,
   type PublicPrompt,
 } from "../hooks/usePrompts";
-import { useModelManagement, type AIModel } from "../hooks/useModelManagement";
+import { useModelManagement } from "../hooks/useModelManagement";
+import { type AIModel } from "../context/AiProvider";
 import { AiProvider } from "../context/AiProvider";
 
 export interface AiPromptPanelProps {
@@ -1070,6 +1071,28 @@ function AiPromptPanelInternal({
                 >
                   Activez ou désactivez les modèles selon vos besoins
                 </p>
+                <p
+                  style={{
+                    fontSize: "12px",
+                    color: "#9ca3af",
+                    margin: "0",
+                  }}
+                >
+                  {
+                    effectiveAvailableModels.filter(
+                      (m) => m.category === "text"
+                    ).length
+                  }{" "}
+                  modèles disponibles •{" "}
+                  {
+                    effectiveUserModels.filter((id) =>
+                      effectiveAvailableModels.some(
+                        (m) => m.id === id && m.category === "text"
+                      )
+                    ).length
+                  }{" "}
+                  activés
+                </p>
               </div>
 
               <div

package/src/components/AiSelect.tsx

@@ -37,7 +37,11 @@ export function AiSelect({
   const [isFocused, setIsFocused] = useState(false);
   const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
 
-  const { models } = useAiModels({ baseUrl, apiKeyId });
+  const { models } = useAiModels({
+    baseUrl,
+    apiKeyId,
+    modelType: "text-or-language",
+  });
   const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
 
   const handleOpenPanel = () => {

package/src/components/AiTextarea.tsx

@@ -50,7 +50,11 @@ export function AiTextarea({
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
 
-  const { models } = useAiModels({ baseUrl, apiKeyId });
+  const { models } = useAiModels({
+    baseUrl,
+    apiKeyId,
+    modelType: "text-or-language",
+  });
   const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
 
   const hasConfiguration = Boolean(model && prompt);

package/src/context/AiProvider.tsx

@@ -1,12 +1,58 @@
 "use client";
 
-import { createContext, useContext, type ReactNode } from "react";
+import {
+  createContext,
+  useContext,
+  useState,
+  useEffect,
+  useCallback,
+  useRef,
+  type ReactNode,
+} from "react";
 import type { UiMode } from "../types";
+import type { ModelRef } from "@lastbrain/ai-ui-core";
+import { createClient } from "@lastbrain/ai-ui-core";
+import { getAvailableModels, getUserModels } from "../utils/modelManagement";
+
+export interface AIModel {
+  id: string;
+  name: string;
+  description?: string;
+  provider: string;
+  category: "text" | "image" | "audio" | "video";
+  isActive?: boolean;
+  isPro?: boolean;
+  costPer1M?: number;
+}
+
+export interface ProviderData {
+  id: string;
+  name: string;
+  description?: string;
+  models: ModelRef[];
+}
 
 export interface AiContextValue {
   baseUrl: string;
   apiKeyId: string;
   uiMode: UiMode;
+  // Providers et modèles (récupérés une seule fois)
+  providers: ProviderData[];
+  allModels: ModelRef[]; // Tous les modèles de tous les providers
+  availableModels: AIModel[]; // Modèles disponibles avec métadonnées
+  userModels: string[]; // IDs des modèles activés par l'utilisateur
+  // États de chargement
+  loadingProviders: boolean;
+  loadingUserModels: boolean;
+  // Actions
+  refetchProviders: () => Promise<void>;
+  refetchUserModels: () => Promise<void>;
+  // Helpers pour filtrer les modèles
+  getModelsByType: (
+    type: "text" | "language" | "image" | "embed"
+  ) => ModelRef[];
+  getTextModels: () => ModelRef[];
+  getImageModels: () => ModelRef[];
 }
 
 const AiContext = createContext<AiContextValue | undefined>(undefined);
@@ -24,10 +70,186 @@ export function AiProvider({
   uiMode = "modal",
   children,
 }: AiProviderProps) {
+  const [providers, setProviders] = useState<ProviderData[]>([]);
+  const [allModels, setAllModels] = useState<ModelRef[]>([]);
+  const [availableModels, setAvailableModels] = useState<AIModel[]>([]);
+  const [userModels, setUserModels] = useState<string[]>([]);
+  const [loadingProviders, setLoadingProviders] = useState(false);
+  const [loadingUserModels, setLoadingUserModels] = useState(false);
+
+  // Flags pour éviter les appels multiples et les boucles infinies
+  const isFetchingProviders = useRef(false);
+  const isFetchingUserModels = useRef(false);
+  const hasFetchedProviders = useRef(false);
+  const hasFetchedUserModels = useRef(false);
+  const providersAvailable = useRef(true); // false si 404
+  const userModelsAvailable = useRef(true); // false si 404
+
+  // Récupérer les providers et leurs modèles + available models en parallèle
+  const fetchProviders = useCallback(async () => {
+    // Éviter les appels multiples
+    if (isFetchingProviders.current) {
+      console.log("[AiProvider] Already fetching providers, skipping");
+      return;
+    }
+
+    // Si déjà fetch et non disponible, ne pas réessayer
+    if (hasFetchedProviders.current && !providersAvailable.current) {
+      console.log("[AiProvider] Providers API not available (404), skipping");
+      return;
+    }
+
+    isFetchingProviders.current = true;
+    setLoadingProviders(true);
+
+    try {
+      console.log("[AiProvider] Fetching providers from:", baseUrl);
+
+      // Utiliser createClient pour avoir buildUrl qui gère les routes correctement
+      const client = createClient({ baseUrl, apiKeyId });
+
+      // Fetch providers et available models en parallèle
+      const [providersData, availableModelsData] = await Promise.all([
+        client
+          .getModels()
+          .then((models) => {
+            // getModels retourne directement les modèles, pas les providers
+            // On doit reconstruire la structure providers
+            return { providers: [{ id: "default", name: "Default", models }] };
+          })
+          .catch((error) => {
+            console.error("[AiProvider] Error fetching models:", error);
+            if (error.message?.includes("404")) {
+              providersAvailable.current = false;
+            }
+            return { providers: [] };
+          }),
+        getAvailableModels({ baseUrl, apiKey: apiKeyId }).catch((error) => {
+          console.warn("[AiProvider] Could not fetch available models:", error);
+          return [];
+        }),
+      ]);
+      console.log("[AiProvider] Providers data received:", providersData);
+
+      if (providersData.providers && Array.isArray(providersData.providers)) {
+        setProviders(providersData.providers);
+
+        // Extraire tous les modèles
+        const models: ModelRef[] = [];
+        for (const provider of providersData.providers) {
+          if (provider.models && Array.isArray(provider.models)) {
+            models.push(...provider.models);
+          }
+        }
+        console.log("[AiProvider] Extracted models:", models.length, models);
+        setAllModels(models);
+      }
+
+      // Stocker available models
+      console.log("[AiProvider] Available models:", availableModelsData.length);
+      setAvailableModels(availableModelsData);
+      hasFetchedProviders.current = true;
+    } catch (error) {
+      console.error("[AiProvider] Error fetching providers:", error);
+      // En cas d'erreur, utiliser des valeurs vides
+      setProviders([]);
+      setAllModels([]);
+      setAvailableModels([]);
+      hasFetchedProviders.current = true;
+    } finally {
+      setLoadingProviders(false);
+      isFetchingProviders.current = false;
+    }
+  }, [baseUrl, apiKeyId]); // Retirer loadingProviders des dépendances
+
+  // Récupérer les modèles activés par l'utilisateur
+  const fetchUserModels = useCallback(async () => {
+    // Éviter les appels multiples
+    if (isFetchingUserModels.current) {
+      console.log("[AiProvider] Already fetching user models, skipping");
+      return;
+    }
+
+    // Si déjà fetch et non disponible, ne pas réessayer
+    if (hasFetchedUserModels.current && !userModelsAvailable.current) {
+      console.log("[AiProvider] User models API not available (404), skipping");
+      return;
+    }
+
+    isFetchingUserModels.current = true;
+    setLoadingUserModels(true);
+
+    try {
+      const models = await getUserModels({ baseUrl, apiKey: apiKeyId });
+      setUserModels(models);
+      hasFetchedUserModels.current = true;
+    } catch (error) {
+      console.error("[AiProvider] Error fetching user models:", error);
+      // En cas d'erreur 404, ne pas logger comme erreur critique
+      if (error instanceof Error && error.message.includes("404")) {
+        console.warn("[AiProvider] User models API not available (404)");
+        userModelsAvailable.current = false;
+        setUserModels([]);
+      }
+      hasFetchedUserModels.current = true;
+    } finally {
+      setLoadingUserModels(false);
+      isFetchingUserModels.current = false;
+    }
+  }, [baseUrl, apiKeyId]); // Retirer loadingUserModels des dépendances
+
+  // Récupérer les données au montage du provider
+  useEffect(() => {
+    fetchProviders(); // Fetch providers + available models en même temps
+    fetchUserModels();
+  }, [fetchProviders, fetchUserModels]);
+
+  // Helpers pour filtrer les modèles par type
+  const getModelsByType = useCallback(
+    (type: "text" | "language" | "image" | "embed") => {
+      const filtered = allModels.filter((model) => model.type === type);
+      console.log(`[AiProvider] getModelsByType(${type}):`, {
+        total: allModels.length,
+        filtered: filtered.length,
+        models: filtered.map((m) => ({ id: m.id, name: m.name, type: m.type })),
+      });
+      return filtered;
+    },
+    [allModels]
+  );
+
+  const getTextModels = useCallback(() => {
+    return allModels.filter(
+      (model) => model.type === "text" || model.type === "language"
+    );
+  }, [allModels]);
+
+  const getImageModels = useCallback(() => {
+    const imageModels = allModels.filter((model) => model.type === "image");
+    console.log("[AiProvider] getImageModels:", {
+      totalModels: allModels.length,
+      imageModels: imageModels.length,
+      allTypes: allModels.map((m) => ({ id: m.id, type: m.type })),
+      imageModelsList: imageModels.map((m) => ({ id: m.id, name: m.name })),
+    });
+    return imageModels;
+  }, [allModels]);
+
   const value: AiContextValue = {
     baseUrl,
     apiKeyId,
     uiMode,
+    providers,
+    allModels,
+    availableModels,
+    userModels,
+    loadingProviders,
+    loadingUserModels,
+    refetchProviders: fetchProviders,
+    refetchUserModels: fetchUserModels,
+    getModelsByType,
+    getTextModels,
+    getImageModels,
   };
 
   return <AiContext.Provider value={value}>{children}</AiContext.Provider>;