@lastbrain/ai-ui-react 1.0.34 → 1.0.36

package/src/hooks/useAiModels.ts

@@ -1,50 +1,119 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useMemo, useCallback } from "react";
 import type { ModelRef } from "@lastbrain/ai-ui-core";
-import { useAiClient } from "./useAiClient";
+import { useAiContext } from "../context/AiProvider";
 
 export interface UseAiModelsOptions {
   baseUrl?: string;
   apiKeyId?: string;
+  modelType?: "text" | "language" | "image" | "embed" | "text-or-language"; // Filtrer par type
 }
 
 export interface UseAiModelsResult {
-  models: ModelRef[] | null;
+  models: ModelRef[];
   loading: boolean;
   error: Error | null;
   refetch: () => void;
 }
 
+/**
+ * Hook pour récupérer les modèles disponibles
+ * Utilise les données du contexte pour éviter les appels API multiples
+ */
 export function useAiModels(options?: UseAiModelsOptions): UseAiModelsResult {
-  const client = useAiClient(options);
-  const [models, setModels] = useState<ModelRef[] | null>(null);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  const fetchModels = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const result = await client.getModels();
-      setModels(result);
-    } catch (err) {
-      setError(
-        err instanceof Error ? err : new Error("Failed to fetch models")
+  const context = useAiContext();
+
+  // Si les options ne correspondent pas au contexte, on peut faire un appel direct
+  // Mais dans la plupart des cas, on utilise le contexte
+  const useContextData =
+    (!options?.baseUrl || options.baseUrl === context.baseUrl) &&
+    (!options?.apiKeyId || options.apiKeyId === context.apiKeyId);
+
+  // Filtrer les modèles selon le type demandé
+  const filteredModels = useMemo(() => {
+    console.log("[useAiModels] Filtering models:", {
+      useContextData,
+      allModelsLength: context.allModels.length,
+      modelType: options?.modelType,
+      loading: context.loadingProviders,
+    });
+
+    if (!useContextData) {
+      console.log("[useAiModels] Not using context data");
+      return [];
+    }
+
+    // Pendant le chargement, retourner un tableau vide
+    if (context.loadingProviders) {
+      console.log("[useAiModels] Still loading...");
+      return [];
+    }
+
+    // Si pas de modèles après le chargement
+    if (!context.allModels.length) {
+      console.log("[useAiModels] No models in context");
+      return [];
+    }
+
+    if (!options?.modelType) {
+      console.log(
+        "[useAiModels] Returning all models:",
+        context.allModels.length
+      );
+      return context.allModels;
+    }
+
+    // Cas spécial: text ou language
+    if (options.modelType === "text-or-language") {
+      const textModels = context.getTextModels();
+      console.log("[useAiModels] Returning text models:", textModels.length);
+      return textModels;
+    }
+
+    // Cas spécial: image
+    if (options.modelType === "image") {
+      const imageModels = context.getImageModels();
+      console.log(
+        "[useAiModels] Returning image models:",
+        imageModels.length,
+        imageModels
       );
-    } finally {
-      setLoading(false);
+      return imageModels;
+    }
+    const filtered = context.getModelsByType(options.modelType);
+    console.log(
+      `[useAiModels] Returning ${options.modelType} models:`,
+      filtered.length
+    );
+    return filtered;
+    return filtered;
+  }, [useContextData, context, options?.modelType]);
+
+  const refetch = useCallback(() => {
+    if (useContextData) {
+      context.refetchProviders();
     }
-  }, [client]);
+  }, [useContextData, context]);
 
-  useEffect(() => {
-    fetchModels();
-  }, [fetchModels]);
+  if (useContextData) {
+    return {
+      models: filteredModels,
+      loading: context.loadingProviders,
+      error: null,
+      refetch,
+    };
+  }
 
+  // Fallback: si les options ne correspondent pas, retourner des valeurs vides
+  // (cas rare, la plupart du temps on utilise le contexte)
+  console.log("[useAiModels] Using fallback (no context match)");
   return {
-    models,
-    loading,
-    error,
-    refetch: fetchModels,
+    models: [],
+    loading: false,
+    error: new Error(
+      "useAiModels called with different baseUrl/apiKeyId than context"
+    ),
+    refetch: () => {},
   };
 }

package/src/hooks/useModelManagement.ts

@@ -1,28 +1,9 @@
-import { useState, useCallback, useEffect, useMemo } from "react";
-import { useAiContext } from "../context/AiProvider";
+import { useState, useCallback, useMemo } from "react";
+import { useAiContext, type AIModel } from "../context/AiProvider";
 import {
   toggleUserModel,
-  getAvailableModels,
-  getUserModels,
   type ModelToggleOptions,
 } from "../utils/modelManagement";
-import {
-  getCached,
-  setCache,
-  isRateLimited,
-  getRateLimitResetTime,
-} from "../utils/cache";
-
-export interface AIModel {
-  id: string;
-  name: string;
-  description?: string;
-  provider: string;
-  category: "text" | "image" | "audio" | "video";
-  isActive?: boolean;
-  isPro?: boolean;
-  costPer1M?: number;
-}
 
 export interface UseModelManagementOptions extends ModelToggleOptions {
   autoFetch?: boolean; // Charger automatiquement les données au mount
@@ -49,231 +30,99 @@ export interface UseModelManagementReturn {
 
 /**
  * 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: UseModelManagementOptions = {}
 ): UseModelManagementReturn {
-  const { autoFetch = false, category, ...apiOptions } = options;
-  const { baseUrl, apiKeyId } = useAiContext();
+  const { category } = options;
+  const context = useAiContext();
 
-  const [availableModels, setAvailableModels] = useState<AIModel[]>([]);
-  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 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);
-      setError(null);
-
-      // Check cache first (5 minutes TTL for models)
-      const cacheKey = `models_${category || "all"}`;
-      const cached = getCached<AIModel[]>(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);
+  // Utiliser les données du contexte si disponibles
+  const useContextData =
+    (!options.baseUrl || options.baseUrl === context.baseUrl) &&
+    (!options.apiKey || options.apiKey === context.apiKeyId);
 
-      const filteredModels = category
-        ? models.filter((m) => m.category === category)
-        : models;
+  // 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]);
 
-      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([]);
-      }
-    } finally {
-      setLoading(false);
+  const refreshModels = useCallback(async () => {
+    if (useContextData) {
+      await context.refetchProviders();
     }
-  }, [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;
+    if (useContextData) {
+      await context.refetchUserModels();
     }
-
-    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);
-    } 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: string, isActive?: boolean) => {
-      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]
+    [context, options.baseUrl, options.apiKey]
   );
 
-  // Helpers
   const isModelActive = useCallback(
     (modelId: string) => {
-      return userModels.includes(modelId);
+      return context.userModels.includes(modelId);
     },
-    [userModels]
+    [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/src/utils/modelManagement.ts

@@ -27,12 +27,16 @@ export async function toggleUserModel(
   }
 
   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",