@lastbrain/ai-ui-react 1.0.63 → 1.0.64

package/dist/context/LBAuthProvider.js

@@ -4,7 +4,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Provider d'authentification LastBrain
  * Gère l'état de connexion, la session et les appels IA
  */
-import { createContext, useContext, useEffect, useCallback, useState, } from "react";
+import { createContext, useContext, useEffect, useCallback, useMemo, useState, } from "react";
+import { createLBClient } from "@lastbrain/ai-ui-core";
 const LBContext = createContext(undefined);
 export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", proxyUrl = "/api/lastbrain", onStatusChange, onAuthChange, }) {
     const [state, setState] = useState({
@@ -18,61 +19,70 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
     const [isLoadingStatus, setIsLoadingStatus] = useState(false);
     const [isLoadingStorage, setIsLoadingStorage] = useState(false);
     const [storageLastFetch, setStorageLastFetch] = useState(0);
+    const lbClient = useMemo(() => createLBClient({
+        baseUrl: proxyUrl,
+        mode: process.env.LB_API_KEY ? "env-key" : "auto",
+        selectedApiKeyId: state.selectedKey?.id,
+    }), [proxyUrl, state.selectedKey?.id]);
     /**
      * Vérifie si une session existe au chargement
      */
     const checkSession = useCallback(async () => {
         try {
-            const response = await fetch(`${proxyUrl}/auth/session/verify`, {
-                credentials: "include",
-            });
-            if (response.ok) {
-                const session = await response.json();
-                // Récupérer les infos utilisateur depuis /auth/status
-                try {
-                    const statusResponse = await fetch(`${proxyUrl}/auth/status`, {
-                        credentials: "include",
-                    });
-                    if (statusResponse.ok) {
-                        const statusData = await statusResponse.json();
-                        setState({
-                            status: "ready",
-                            session,
-                            user: {
-                                id: session.userId,
-                                email: statusData.user?.email || "",
-                            },
-                        });
+            const session = await lbClient.verifySession();
+            if (session) {
+                const userData = await lbClient.getUser().catch(() => null);
+                const activeKey = userData?.apiKeyActive
+                    ? {
+                        id: userData.apiKeyActive.id,
+                        name: userData.apiKeyActive.name,
+                        keyPrefix: userData.apiKeyActive.prefix,
+                        scopes: userData.apiKeyActive.scopes || [],
+                        isActive: true,
+                        createdAt: "",
                     }
-                    else {
-                        // Fallback sans email
-                        setState({
-                            status: "ready",
-                            session,
-                            user: {
-                                id: session.userId,
-                                email: "",
-                            },
-                        });
-                    }
-                }
-                catch (statusError) {
-                    console.error("[LBProvider] Failed to fetch status:", statusError);
-                    // Fallback sans email
+                    : undefined;
+                setApiKeys(userData?.apiKeys || []);
+                setState({
+                    status: "ready",
+                    session,
+                    user: {
+                        id: session.userId,
+                        email: userData?.user?.email || "",
+                    },
+                    selectedKey: activeKey,
+                });
+                onStatusChange?.("ready");
+            }
+            else {
+                // Supabase session mode (no lb_session cookie): try user endpoint directly
+                const userData = await lbClient.getUser().catch(() => null);
+                if (userData?.user?.id) {
+                    const activeKey = userData?.apiKeyActive
+                        ? {
+                            id: userData.apiKeyActive.id,
+                            name: userData.apiKeyActive.name,
+                            keyPrefix: userData.apiKeyActive.prefix,
+                            scopes: userData.apiKeyActive.scopes || [],
+                            isActive: true,
+                            createdAt: "",
+                        }
+                        : undefined;
+                    setApiKeys(userData.apiKeys || []);
                     setState({
                         status: "ready",
-                        session,
                         user: {
-                            id: session.userId,
-                            email: "",
+                            id: userData.user.id,
+                            email: userData.user.email || "",
                         },
+                        selectedKey: activeKey,
                     });
+                    onStatusChange?.("ready");
+                }
+                else {
+                    setState({ status: "needs_auth" });
+                    onStatusChange?.("needs_auth");
                 }
-                onStatusChange?.("ready");
-            }
-            else {
-                setState({ status: "needs_auth" });
-                onStatusChange?.("needs_auth");
             }
         }
         catch (error) {
@@ -80,7 +90,7 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
             setState({ status: "needs_auth" });
             onStatusChange?.("needs_auth");
         }
-    }, [proxyUrl, onStatusChange]);
+    }, [lbClient, onStatusChange]);
     useEffect(() => {
         checkSession();
     }, [checkSession]);
@@ -89,23 +99,8 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
      */
     const fetchApiKeys = useCallback(async (token) => {
         try {
-            console.log("[LBProvider] Fetching API keys with token:", token.substring(0, 20) + "...");
-            const response = await fetch(`${proxyUrl}/public/user/api-keys`, {
-                headers: {
-                    Authorization: `Bearer ${token}`,
-                    "Content-Type": "application/json",
-                },
-                credentials: "include",
-            });
-            console.log("[LBProvider] API keys response status:", response.status);
-            if (!response.ok) {
-                const errorData = await response.json().catch(() => ({}));
-                console.error("[LBProvider] Failed to fetch API keys:", errorData);
-                throw new Error(errorData.message || "Failed to fetch API keys");
-            }
-            const data = await response.json();
-            console.log("[LBProvider] API keys received:", data);
-            const keys = data.apiKeys || data;
+            const data = await lbClient.getUser(token);
+            const keys = data.apiKeys || [];
             setApiKeys(keys);
             return keys;
         }
@@ -113,7 +108,7 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
             console.error("[LBProvider] Failed to fetch API keys:", error);
             throw error;
         }
-    }, [proxyUrl]);
+    }, [lbClient]);
     /**
      * Sélectionne une clé API et crée une session
      */
@@ -121,22 +116,7 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
         try {
             console.log("[LBProvider] Selecting API key:", apiKeyId);
             setState((prev) => ({ ...prev, status: "loading" }));
-            const response = await fetch(`${proxyUrl}/auth/session`, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                    Authorization: `Bearer ${token}`,
-                },
-                body: JSON.stringify({ api_key_id: apiKeyId }),
-                credentials: "include",
-            });
-            console.log("[LBProvider] Session response status:", response.status);
-            if (!response.ok) {
-                const errorData = await response.json().catch(() => ({}));
-                console.error("[LBProvider] Failed to create session:", errorData);
-                throw new Error(errorData.message || "Failed to create session");
-            }
-            const sessionResult = await response.json();
+            const sessionResult = await lbClient.selectApiKey(apiKeyId, token);
             console.log("[LBProvider] Session created successfully:", sessionResult);
             setState({
                 status: "ready",
@@ -162,7 +142,7 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
             });
             throw error;
         }
-    }, [proxyUrl, state.user, onStatusChange, onAuthChange]);
+    }, [lbClient, state.user, onStatusChange, onAuthChange]);
     /**
      * Connexion utilisateur (étape 1 : login)
      * Retourne le token et les clés API sans créer de session
@@ -171,24 +151,7 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
         try {
             console.log("[LBProvider] Login attempt:", email);
             setState((prev) => ({ ...prev, status: "loading" }));
-            const response = await fetch(`${proxyUrl}/auth/login`, {
-                method: "POST",
-                headers: { "Content-Type": "application/json" },
-                body: JSON.stringify({ email, password }),
-                credentials: "include",
-            });
-            console.log("[LBProvider] Login response status:", response.status);
-            if (!response.ok) {
-                const error = await response.json();
-                const errorMessage = error.message || "Login failed";
-                console.error("[LBProvider] Login failed:", errorMessage);
-                setState({
-                    status: "needs_auth",
-                    error: errorMessage,
-                });
-                return { success: false, error: errorMessage };
-            }
-            const result = await response.json();
+            const result = await lbClient.login(email, password);
             console.log("[LBProvider] Login successful:", result.user?.email);
             console.log("[LBProvider] Access token received:", result.accessToken ? "YES" : "NO");
             console.log("[LBProvider] Token length:", result.accessToken?.length || 0);
@@ -259,7 +222,7 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
             });
             return { success: false, error: message };
         }
-    }, [proxyUrl, fetchApiKeys, selectApiKey]);
+    }, [lbClient, fetchApiKeys, selectApiKey]);
     /**
      * Récupère le status API basique (balance, API key info) - RAPIDE
      */
@@ -271,22 +234,43 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
         }
         setIsLoadingStatus(true);
         try {
-            const response = await fetch(`${proxyUrl}/auth/status?fast=true`, {
-                credentials: "include",
-            });
-            if (response.ok) {
-                const data = await response.json();
-                setBasicStatus(data);
-                // Combiner avec le storage existant si disponible
-                const combinedStatus = {
-                    ...data,
-                    storage: storageStatus?.storage || data.storage,
-                };
-                setApiStatus(combinedStatus);
+            let data;
+            try {
+                data = await lbClient.getStatus();
             }
-            else {
-                setBasicStatus(null);
+            catch {
+                // Backward compatibility: older backends may not expose /auth/status
+                const userData = await lbClient.getUser();
+                data = {
+                    authType: userData.authType,
+                    user: userData.user,
+                    apiKey: userData.apiKeyActive,
+                    api_key: userData.apiKeyActive,
+                    balance: {
+                        used: 0,
+                        total: userData.balance?.sellValueUsd || 0,
+                        percentage: 0,
+                    },
+                };
             }
+            const normalizedStatus = {
+                ...data,
+                authType: data?.authType,
+                user: data?.user,
+                apiKey: data?.apiKey || data?.api_key,
+                api_key: data?.api_key || data?.apiKey,
+                balance: data?.balance || {
+                    used: 0,
+                    total: 0,
+                    percentage: 0,
+                },
+            };
+            setBasicStatus(normalizedStatus);
+            const combinedStatus = {
+                ...normalizedStatus,
+                storage: storageStatus?.storage,
+            };
+            setApiStatus(combinedStatus);
         }
         catch (error) {
             console.error("[LBProvider] Failed to fetch basic status:", error);
@@ -295,7 +279,7 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
         finally {
             setIsLoadingStatus(false);
         }
-    }, [proxyUrl, state.status, storageStatus]);
+    }, [lbClient, state.status, storageStatus]);
     /**
      * Récupère le storage - LENT avec cache (5 minutes)
      */
@@ -315,35 +299,16 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
         }
         setIsLoadingStorage(true);
         try {
-            // Essayer l'endpoint spécialisé storage d'abord
-            let response = await fetch(`${proxyUrl}/auth/status/storage`, {
-                credentials: "include",
-            });
-            // Si 404, faire un fallback vers l'endpoint normal (backward compatibility)
-            if (!response.ok && response.status === 404) {
-                console.log("[LBProvider] Storage endpoint not available, using fallback");
-                response = await fetch(`${proxyUrl}/auth/status`, {
-                    credentials: "include",
-                });
-            }
-            if (response.ok) {
-                const data = await response.json();
-                // Si c'est la réponse complète (fallback), extraire juste le storage
-                const storageData = data.storage ? { storage: data.storage } : data;
-                setStorageStatus(storageData);
-                setStorageLastFetch(now);
-                // Combiner avec le basic status
-                const combinedStatus = {
-                    ...basicStatus,
-                    storage: storageData.storage,
-                };
-                setApiStatus(combinedStatus);
-            }
-            else {
-                console.warn("[LBProvider] Failed to fetch storage status:", response.status);
-                // Arrêter les tentatives répétées si échec persistant
-                setStorageLastFetch(now); // Marquer comme essayé pour éviter la boucle
-            }
+            const data = await lbClient.getStorageStatus();
+            const storageData = data?.storage ? { storage: data.storage } : data;
+            setStorageStatus(storageData);
+            setStorageLastFetch(now);
+            // Combiner avec le basic status
+            const combinedStatus = {
+                ...basicStatus,
+                storage: storageData?.storage,
+            };
+            setApiStatus(combinedStatus);
         }
         catch (error) {
             console.error("[LBProvider] Failed to fetch storage status:", error);
@@ -353,7 +318,7 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
         finally {
             setIsLoadingStorage(false);
         }
-    }, [proxyUrl, state.status, basicStatus, storageLastFetch]);
+    }, [lbClient, state.status, basicStatus, storageLastFetch]);
     /**
      * Sélectionne une clé API avec le token déjà stocké (après login)
      */
@@ -367,35 +332,26 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
      * 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");
+        if (state.status === "ready" || accessToken) {
+            await lbClient.selectApiKey(apiKeyId, accessToken);
+            const selectedKey = apiKeys.find((key) => key.id === apiKeyId);
+            if (selectedKey) {
+                setState((prev) => ({
+                    ...prev,
+                    selectedKey,
+                }));
             }
-            // Refresh le status après le changement
             await refreshBasicStatus();
-            // Refresh storage en arrière-plan
             setTimeout(() => refreshStorageStatus(), 100);
         }
-        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,
+        apiKeys,
+        lbClient,
         refreshBasicStatus,
         refreshStorageStatus,
     ]);
@@ -404,10 +360,7 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
      */
     const logout = useCallback(async () => {
         try {
-            await fetch(`${proxyUrl}/auth/session/logout`, {
-                method: "POST",
-                credentials: "include",
-            });
+            await lbClient.logout();
         }
         catch (error) {
             console.error("[LBProvider] Logout failed:", error);
@@ -416,10 +369,15 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
             setState({ status: "needs_auth" });
             setApiKeys([]);
             setAccessToken(undefined);
+            // Reset tous les statuts après logout
+            setApiStatus(null);
+            setBasicStatus(null);
+            setStorageStatus(null);
+            setStorageLastFetch(0);
             onStatusChange?.("needs_auth");
             onAuthChange?.(); // Refresh provider after logout
         }
-    }, [proxyUrl, onStatusChange, onAuthChange]);
+    }, [lbClient, onStatusChange, onAuthChange]);
     /**
      * Recharge la session
      */
@@ -435,25 +393,14 @@ export function LBProvider({ children, baseUrl: _baseUrl = "/api/lastbrain", pro
             return;
         }
         try {
-            console.log("[LBProvider] Fetching API keys with session...");
-            const response = await fetch(`${proxyUrl}/auth/api-keys`, {
-                credentials: "include",
-            });
-            if (response.ok) {
-                const data = await response.json();
-                console.log("[LBProvider] API keys received:", data);
-                setApiKeys(data.apiKeys || []);
-            }
-            else {
-                console.warn("[LBProvider] Failed to fetch API keys:", response.status);
-                setApiKeys([]);
-            }
+            const data = await lbClient.getUser();
+            setApiKeys(data.apiKeys || []);
         }
         catch (error) {
             console.error("[LBProvider] Failed to fetch API keys:", error);
             setApiKeys([]);
         }
-    }, [proxyUrl, state.status]);
+    }, [lbClient, state.status]);
     // Refresh status quand la session devient ready
     useEffect(() => {
         if (state.status === "ready") {

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,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,CAkDnB"}
+{"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,CAsDA;AAED;;GAEG;AACH,wBAAsB,aAAa,CACjC,OAAO,GAAE,kBAAuB,GAC/B,OAAO,CAAC,MAAM,EAAE,CAAC,CAkDnB"}

package/dist/utils/modelManagement.js

@@ -45,12 +45,12 @@ export async function getAvailableModels(options = {}) {
     const isExternalProxy = baseUrl && baseUrl.includes("/api/lastbrain");
     const isPublicApi = baseUrl && baseUrl.includes("/api/public/v1");
     const endpoint = isExternalProxy
-        ? `${baseUrl}/ai/models/available` // Proxy routes to public API
+        ? `${baseUrl}/auth/models` // Proxy routes to /api/ai/auth/models
         : isPublicApi
-            ? `${baseUrl}/ai/models/available` // → /api/public/v1/ai/models/available
+            ? `${baseUrl}/gateway-models` // → /api/public/v1/gateway-models
             : baseUrl
-                ? `${baseUrl}/auth/ai-models-available` // → /api/ai/auth/ai-models-available
-                : `/api/ai/auth/ai-models-available`; // fallback
+                ? `${baseUrl}/auth/models` // → /api/ai/auth/models
+                : `/api/ai/auth/models`; // fallback
     console.log("[getAvailableModels] isExternalProxy:", isExternalProxy, "isPublicApi:", isPublicApi, "endpoint:", endpoint);
     const headers = {};
     // Ajouter la clé API pour les appels publics directs
@@ -66,7 +66,13 @@ export async function getAvailableModels(options = {}) {
         throw new Error(`Erreur lors de la récupération des modèles: ${response.status}`);
     }
     const data = await response.json();
-    return data.models || [];
+    if (Array.isArray(data?.models)) {
+        return data.models;
+    }
+    if (Array.isArray(data?.providers)) {
+        return data.providers.flatMap((provider) => Array.isArray(provider.models) ? provider.models : []);
+    }
+    return [];
 }
 /**
  * Récupère les modèles activés par l'utilisateur avec API key

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/ai-ui-react",
-  "version": "1.0.63",
+  "version": "1.0.64",
   "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.46"
+    "@lastbrain/ai-ui-core": "1.0.48"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",

package/src/components/AiPromptPanel.tsx

@@ -182,11 +182,16 @@ function AiPromptPanelInternal({
 
     if (showAllModels) {
       return categoryModels;
-    } else {
-      return categoryModels.filter((m) => effectiveUserModels.includes(m.id));
     }
+
+    const enabledModels = categoryModels.filter((m) =>
+      effectiveUserModels.includes(m.id)
+    );
+    return enabledModels.length > 0 ? enabledModels : categoryModels;
   };
 
+  const modelOptions = getFilteredModels();
+
   // Fetch prompts when modal opens
   useEffect(() => {
     if (isOpen && (models.length > 0 || enableModelManagement)) {
@@ -209,7 +214,7 @@ function AiPromptPanelInternal({
   ]);
 
   const handleSubmit = async () => {
-    const activeModelId = selectedModel || models[0]?.id;
+    const activeModelId = selectedModel || modelOptions[0]?.id;
     if (!activeModelId || !prompt.trim()) return;
     setIsGenerating(true);
     try {
@@ -249,6 +254,20 @@ function AiPromptPanelInternal({
     };
   }, []);
 
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    if (modelOptions.length === 0) {
+      setSelectedModel("");
+      return;
+    }
+    const hasSelected = modelOptions.some((model) => model.id === selectedModel);
+    if (!hasSelected) {
+      setSelectedModel(modelOptions[0].id);
+    }
+  }, [isOpen, modelOptions, selectedModel]);
+
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === "Escape") {
       handleClose();
@@ -284,7 +303,7 @@ function AiPromptPanelInternal({
 
   if (!isOpen) return null;
 
-  const activeModelId = selectedModel || models[0]?.id || "";
+  const activeModelId = selectedModel || modelOptions[0]?.id || "";
   const currentModelType = models.find((m) => m.id === activeModelId)?.type;
   const filteredPrompts = prompts.filter((p: Prompt | PublicPrompt) => {
     const matchesType =
@@ -562,10 +581,10 @@ function AiPromptPanelInternal({
                         ...(modelFocused && aiStyles.selectFocus),
                       }}
                     >
-                      {getFilteredModels().length === 0 && (
+                      {modelOptions.length === 0 && (
                         <option value="">Loading models...</option>
                       )}
-                      {getFilteredModels().map((model) => {
+                      {modelOptions.map((model) => {
                         const isActive = effectiveUserModels.includes(model.id);
                         return (
                           <option