@lastbrain/ai-ui-react 1.0.36 → 1.0.38

package/src/components/AiTextarea.tsx

@@ -215,7 +215,8 @@ export function AiTextarea({
           onClose={handleClosePanel}
           onSubmit={handleSubmit}
           uiMode={uiMode}
-          models={models || []}
+          models={[]}
+          modelCategory="text"
           sourceText={textareaValue || undefined}
           baseUrl={baseUrl}
           apiKey={apiKeyId}

package/src/components/ErrorToast.tsx

@@ -24,6 +24,21 @@ export function ErrorToast({
   const fadeTimeoutRef = useRef<number | null>(null);
   const autoCloseTimeoutRef = useRef<number | null>(null);
 
+  const handleClose = () => {
+    if (isClosing) return;
+
+    // Clear auto-close timeout if user closes manually
+    if (autoCloseTimeoutRef.current) {
+      window.clearTimeout(autoCloseTimeoutRef.current);
+    }
+
+    setIsClosing(true);
+    fadeTimeoutRef.current = window.setTimeout(() => {
+      setIsVisible(false);
+      onComplete?.();
+    }, 200);
+  };
+
   useEffect(() => {
     if (error) {
       // Show toast immediately
@@ -46,22 +61,7 @@ export function ErrorToast({
         window.clearTimeout(autoCloseTimeoutRef.current);
       }
     };
-  }, [error]);
-
-  const handleClose = () => {
-    if (isClosing) return;
-
-    // Clear auto-close timeout if user closes manually
-    if (autoCloseTimeoutRef.current) {
-      window.clearTimeout(autoCloseTimeoutRef.current);
-    }
-
-    setIsClosing(true);
-    fadeTimeoutRef.current = window.setTimeout(() => {
-      setIsVisible(false);
-      onComplete?.();
-    }, 200);
-  };
+  }, [error, handleClose]);
 
   if (!error) return null;
 

package/src/context/AiProvider.tsx

@@ -12,7 +12,7 @@ import {
 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";
+import { getUserModels } from "../utils/modelManagement";
 
 export interface AIModel {
   id: string;
@@ -108,46 +108,131 @@ export function AiProvider({
       // 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);
+      // Fetch ALL available models from Vercel AI Gateway + user enabled models
+      const [gatewayResponse, userEnabledModels] = await Promise.all([
+        client.getAllAvailableModels().catch((error) => {
+          console.error("[AiProvider] Error fetching gateway models:", error);
+          if (error.message?.includes("404")) {
+            providersAvailable.current = false;
+          }
+          return { providers: [] };
+        }),
+        client.getModels().catch((error) => {
+          console.warn(
+            "[AiProvider] Could not fetch user enabled models:",
+            error
+          );
           return [];
         }),
       ]);
-      console.log("[AiProvider] Providers data received:", providersData);
 
-      if (providersData.providers && Array.isArray(providersData.providers)) {
-        setProviders(providersData.providers);
+      console.log("[AiProvider] Gateway response:", gatewayResponse);
+      console.log("[AiProvider] User enabled models:", userEnabledModels);
 
-        // Extraire tous les modèles
-        const models: ModelRef[] = [];
-        for (const provider of providersData.providers) {
+      // Gateway providers contain ALL models from Vercel AI
+      if (
+        gatewayResponse.providers &&
+        Array.isArray(gatewayResponse.providers)
+      ) {
+        // Extract all models from all providers
+        const allGatewayModels: ModelRef[] = [];
+        for (const provider of gatewayResponse.providers) {
           if (provider.models && Array.isArray(provider.models)) {
-            models.push(...provider.models);
+            // Transform GatewayModel to ModelRef
+            for (const model of provider.models) {
+              allGatewayModels.push({
+                id: model.id,
+                name: model.name,
+                type: model.type === "language" ? "text" : (model.type as any), // Map types
+                provider: model.provider,
+                tags: model.tags,
+                pricing: model.pricing
+                  ? {
+                      inputTokens: model.pricing.input,
+                      outputTokens: model.pricing.output,
+                      imageTokens: model.pricing.image,
+                    }
+                  : undefined,
+              });
+            }
           }
         }
-        console.log("[AiProvider] Extracted models:", models.length, models);
-        setAllModels(models);
+
+        console.log(
+          "[AiProvider] All gateway models extracted:",
+          allGatewayModels.length,
+          allGatewayModels
+        );
+
+        // Helper pour déterminer les capacités d'un modèle
+        const getModelCategories = (model: ModelRef): ("text" | "image")[] => {
+          const categories: ("text" | "image")[] = [];
+          const tags = model.tags || [];
+          const tagsLower = tags.map((t) => t.toLowerCase());
+
+          // Détecter capacité text
+          if (
+            model.type === "text" ||
+            model.type === "language" ||
+            tagsLower.includes("text") ||
+            tagsLower.includes("language") ||
+            tagsLower.includes("chat")
+          ) {
+            categories.push("text");
+          }
+
+          // Détecter capacité image
+          if (
+            model.type === "image" ||
+            tagsLower.includes("image") ||
+            tagsLower.includes("vision") ||
+            tagsLower.includes("multimodal") ||
+            tagsLower.includes("image-generation") ||
+            model.pricing?.imageTokens !== undefined
+          ) {
+            categories.push("image");
+          }
+
+          // Par défaut, si pas de catégorie détectée, considérer comme text
+          if (categories.length === 0) {
+            categories.push("text");
+          }
+
+          return categories;
+        };
+
+        // Transformer ModelRef en AIModel pour availableModels
+        // Un modèle multi-modal apparaîtra avec toutes ses catégories
+        const aiModels: AIModel[] = [];
+        for (const model of allGatewayModels) {
+          const categories = getModelCategories(model);
+
+          // Pour chaque catégorie supportée, créer une entrée AIModel
+          // mais stocker toutes les catégories dans une propriété
+          const primaryCategory = categories[0];
+          aiModels.push({
+            id: model.id,
+            name: model.name,
+            category: primaryCategory,
+            provider: model.provider,
+            description: `${model.provider} - ${model.name}${categories.length > 1 ? ` (${categories.join(", ")})` : ""}`,
+            isPro: false,
+            isActive: false,
+            tags: model.tags, // Garder les tags originaux
+          } as any); // Cast temporaire car AIModel n'a pas tags dans le type
+        }
+
+        setAllModels(allGatewayModels);
+        setAvailableModels(aiModels);
+        setProviders(
+          gatewayResponse.providers.map((p) => ({
+            id: p.name,
+            name: p.display_name,
+            models: allGatewayModels.filter((m) => m.provider === p.name),
+          }))
+        );
       }
 
-      // Stocker available models
-      console.log("[AiProvider] Available models:", availableModelsData.length);
-      setAvailableModels(availableModelsData);
       hasFetchedProviders.current = true;
     } catch (error) {
       console.error("[AiProvider] Error fetching providers:", error);

package/src/hooks/useAiModels.ts

@@ -87,8 +87,7 @@ export function useAiModels(options?: UseAiModelsOptions): UseAiModelsResult {
       filtered.length
     );
     return filtered;
-    return filtered;
-  }, [useContextData, context, options?.modelType]);
+  }, [useContextData, context, options]);
 
   const refetch = useCallback(() => {
     if (useContextData) {

package/src/hooks/useModelManagement.ts

@@ -49,9 +49,39 @@ export function useModelManagement(
   // Filtrer par catégorie si nécessaire
   const filteredModels = useMemo(() => {
     if (!useContextData) return [];
-    return category
-      ? context.availableModels.filter((m) => m.category === category)
-      : context.availableModels;
+
+    if (!category) {
+      return context.availableModels;
+    }
+
+    // Filtrer les modèles qui supportent la catégorie demandée
+    return context.availableModels.filter((m) => {
+      // Vérifier la catégorie principale
+      if (m.category === category) return true;
+
+      // Vérifier les tags pour modèles multi-modaux
+      const tags = (m as any).tags || [];
+      const tagsLower = tags.map((t: string) => t.toLowerCase());
+
+      if (category === "text") {
+        return (
+          tagsLower.includes("text") ||
+          tagsLower.includes("language") ||
+          tagsLower.includes("chat")
+        );
+      }
+
+      if (category === "image") {
+        return (
+          tagsLower.includes("image") ||
+          tagsLower.includes("vision") ||
+          tagsLower.includes("multimodal") ||
+          tagsLower.includes("image-generation")
+        );
+      }
+
+      return false;
+    });
   }, [useContextData, category, context.availableModels]);
 
   const refreshModels = useCallback(async () => {

package/src/hooks/usePrompts.ts

@@ -65,13 +65,24 @@ export function usePrompts(): UsePromptsReturn {
         setLoading(true);
         setError(null);
 
+        console.log("[usePrompts] fetchPrompts called:", {
+          options,
+          baseUrl,
+          apiKeyId,
+          hasApiKey: !!apiKeyId,
+          hasBaseUrl: !!baseUrl,
+        });
+
         // Generate cache key based on options
         const cacheKey = `prompts_${JSON.stringify(options || {})}`;
 
         // Check cache first (60 seconds TTL)
         const cached = getCached<Prompt[] | PublicPrompt[]>(cacheKey, 60000);
         if (cached) {
-          console.log("[usePrompts] Using cached data");
+          console.log("[usePrompts] Using cached data:", {
+            count: cached.length,
+            prompts: cached,
+          });
           setPrompts(cached);
           setLoading(false);
           return;
@@ -133,6 +144,13 @@ export function usePrompts(): UsePromptsReturn {
 
         const data = await response.json();
 
+        console.log("[usePrompts] Server response:", {
+          ok: response.ok,
+          status: response.status,
+          promptsCount: data.prompts?.length || 0,
+          data,
+        });
+
         if (response.ok) {
           const promptsData = data.prompts || [];
           setPrompts(promptsData);
@@ -147,7 +165,7 @@ export function usePrompts(): UsePromptsReturn {
         setLoading(false);
       }
     },
-    [baseUrl]
+    [baseUrl, apiKeyId]
   );
 
   const createPrompt = useCallback(
@@ -306,7 +324,7 @@ export function usePrompts(): UsePromptsReturn {
           body: JSON.stringify({ prompt_id: promptId, stat_type: statType }),
           credentials: isExternalProxy ? "include" : "same-origin",
         });
-      } catch (err) {
+      } catch {
         // Silent fail for stats
       }
     },