@lastbrain/ai-ui-react 1.0.75 → 1.0.77

package/src/components/AiStatusButton.tsx

@@ -2,7 +2,14 @@
 
 import "../styles/register";
 import type { AiStatus, LBUser } from "@lastbrain/ai-ui-core";
-import { useLayoutEffect, useMemo, useRef, useState, useContext } from "react";
+import {
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+  useContext,
+  useEffect,
+} from "react";
 import { createPortal } from "react-dom";
 import {
   ArrowRightLeft,
@@ -169,6 +176,8 @@ export function AiStatusButton({
   let lbSelectedKey: LBApiKey | null = null;
   let lbRefreshBasicStatus: (() => Promise<void>) | undefined;
   let lbRefreshStorageStatus: ((force?: boolean) => Promise<void>) | undefined;
+  let lbSessionToken: string | undefined;
+  let lbHasSelectedApiKeyCookie = false;
 
   const lbContext = useContext(LBContext);
   if (lbContext) {
@@ -185,6 +194,8 @@ export function AiStatusButton({
     lbSelectedKey = lbContext.selectedKey || null;
     lbRefreshBasicStatus = lbContext.refreshBasicStatus;
     lbRefreshStorageStatus = lbContext.refreshStorageStatus;
+    lbSessionToken = lbContext.session?.sessionToken;
+    lbHasSelectedApiKeyCookie = lbContext.hasSelectedApiKeyCookie;
   } else {
     lbStatus = undefined;
   }
@@ -207,14 +218,17 @@ export function AiStatusButton({
 
   const canPortal = typeof document !== "undefined";
 
-  const effectiveStatus =
-    lbStatus === "ready"
-      ? {
-          ...(lbApiStatus || {}),
-          ...(lbBasicStatus || {}),
-          storage: lbStorageStatus?.storage || lbApiStatus?.storage,
-        }
-      : status || null;
+  const effectiveStatus = useMemo(
+    () =>
+      lbStatus === "ready"
+        ? {
+            ...(lbApiStatus || {}),
+            ...(lbBasicStatus || {}),
+            storage: lbStorageStatus?.storage || lbApiStatus?.storage,
+          }
+        : status || null,
+    [lbApiStatus, lbBasicStatus, lbStatus, lbStorageStatus, status]
+  );
 
   const hasApiKeySelected = Boolean(
     effectiveStatus?.apiKey?.id ||
@@ -227,12 +241,23 @@ export function AiStatusButton({
     typeof effectiveStatus.authType === "string"
       ? effectiveStatus.authType
       : undefined;
+  const hasLbSession = Boolean(lbSessionToken);
   const requiresApiKeySelection =
-    lbStatus === "ready" && !hasApiKeySelected && apiKeys.length > 0;
+    lbStatus === "ready" &&
+    hasLbSession &&
+    (!lbHasSelectedApiKeyCookie || !hasApiKeySelected) &&
+    apiKeys.length > 0;
   const isApiKeyAuthMode = authTypeValue === "api_key";
 
   const [tooltipStyle, setTooltipStyle] = useState<Record<string, string>>({});
 
+  useEffect(() => {
+    if (requiresApiKeySelection) {
+      setShowApiKeySelector(true);
+      setShowTooltip(false);
+    }
+  }, [requiresApiKeySelection]);
+
   useLayoutEffect(() => {
     if (!showTooltip || !buttonRef.current || !canPortal) {
       return;

package/src/components/AiTextarea.tsx

@@ -27,6 +27,7 @@ export interface AiTextareaProps
   uiMode?: "modal" | "drawer";
   size?: AiSize;
   radius?: AiRadius;
+  onPanelOpenChange?: (isOpen: boolean) => void;
 }
 
 export function AiTextarea({
@@ -35,10 +36,11 @@ export function AiTextarea({
   uiMode = "modal",
   size = "md",
   radius = "lg",
+  onPanelOpenChange,
   context,
   model,
   prompt,
-  editMode = false,
+  editMode: _editMode = false,
   enableModelManagement,
   storeOutputs,
   artifactTitle,
@@ -61,12 +63,21 @@ export function AiTextarea({
 
   // Rendre l'authentification optionnelle
   let lbStatus: string | undefined;
+  let lbHasSession = false;
+  let lbHasSelectedKey = false;
+  let lbHasSelectedApiKeyCookie = false;
+  let hasLBProvider = false;
   try {
     const lbContext = useLB();
     lbStatus = lbContext.status;
+    lbHasSession = Boolean(lbContext.session?.sessionToken);
+    lbHasSelectedKey = Boolean(lbContext.selectedKey?.id);
+    lbHasSelectedApiKeyCookie = lbContext.hasSelectedApiKeyCookie;
+    hasLBProvider = true;
   } catch {
     // LBProvider n'est pas disponible, ignorer
     lbStatus = undefined;
+    hasLBProvider = false;
   }
 
   let ctxBaseUrl: string | undefined;
@@ -82,8 +93,13 @@ export function AiTextarea({
 
   const baseUrl = propBaseUrl ?? ctxBaseUrl;
   const apiKeyId = propApiKeyId ?? ctxApiKeyId;
+  const needsApiKeySelection =
+    hasLBProvider &&
+    lbStatus === "ready" &&
+    lbHasSession &&
+    (!lbHasSelectedKey || !lbHasSelectedApiKeyCookie);
 
-  const { models } = useAiModels({
+  const { models: _models } = useAiModels({
     baseUrl,
     apiKeyId,
     modelType: "text-or-language",
@@ -92,7 +108,10 @@ export function AiTextarea({
   const { formatted: loadingElapsed } = useLoadingTimer(loading);
 
   const hasConfiguration = Boolean(model && prompt);
-  const isAuthReady = lbStatus === "ready" || Boolean(process.env.LB_API_KEY);
+  const isAuthReady = hasLBProvider
+    ? !needsApiKeySelection &&
+      (lbStatus === "ready" || Boolean(process.env.LB_API_KEY))
+    : Boolean(process.env.LB_API_KEY);
   const shouldShowSparkles = isAuthReady && !disabled;
 
   const handleOpenPanel = () => {
@@ -101,16 +120,18 @@ export function AiTextarea({
       return;
     }
     setIsOpen(true);
+    onPanelOpenChange?.(true);
   };
 
   const handleClosePanel = () => {
     setIsOpen(false);
+    onPanelOpenChange?.(false);
   };
 
   const handleSubmit = async (
     selectedModel: string,
     selectedPrompt: string,
-    promptId?: string
+    _promptId?: string
   ) => {
     try {
       const resolvedContext = textareaValue || context || undefined;
@@ -141,13 +162,14 @@ export function AiTextarea({
         });
         showUsageToast(result);
       }
-    } catch (error) {
+    } catch {
       onToast?.({
         type: "error",
         message: t("ai.generationError", "Failed to generate text"),
       });
     } finally {
       setIsOpen(false);
+      onPanelOpenChange?.(false);
     }
   };
 
@@ -280,10 +302,12 @@ export function AiTextarea({
           onComplete={clearToast}
         />
       )}
-      <LBSigninModal
-        isOpen={showAuthModal}
-        onClose={() => setShowAuthModal(false)}
-      />
+      {hasLBProvider ? (
+        <LBSigninModal
+          isOpen={showAuthModal}
+          onClose={() => setShowAuthModal(false)}
+        />
+      ) : null}
     </div>
   );
 }

package/src/components/ErrorToast.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import "../styles/register";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { X, AlertCircle } from "lucide-react";
 import { useI18n } from "../context/I18nContext";
 
@@ -27,7 +27,7 @@ export function ErrorToast({
   const fadeTimeoutRef = useRef<number | null>(null);
   const autoCloseTimeoutRef = useRef<number | null>(null);
 
-  const handleClose = () => {
+  const handleClose = useCallback(() => {
     if (isClosing) return;
 
     // Clear auto-close timeout if user closes manually
@@ -40,7 +40,7 @@ export function ErrorToast({
       setIsVisible(false);
       onComplete?.();
     }, 200);
-  };
+  }, [isClosing, onComplete]);
 
   useEffect(() => {
     if (error) {

package/src/components/LBKeyPicker.tsx

@@ -6,7 +6,7 @@ import "../styles/register";
  * Permet de changer de clé API sans se reconnecter
  */
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useLB } from "../hooks/useLB";
 import type { LBApiKey } from "@lastbrain/ai-ui-core";
 import { useI18n } from "../context/I18nContext";
@@ -30,25 +30,25 @@ export function LBKeyPicker({
   const [error, setError] = useState("");
   const [showDropdown, setShowDropdown] = useState(false);
 
-  useEffect(() => {
-    if (status === "ready" && accessToken) {
-      loadKeys();
-    }
-  }, [status, accessToken]);
-
-  const loadKeys = async () => {
+  const loadKeys = useCallback(async () => {
     if (!accessToken) return;
 
     try {
       setLoading(true);
       const keys = await fetchApiKeys(accessToken);
       setApiKeys(keys);
-    } catch (err) {
+    } catch {
       setError(t("lb.keypicker.loadError", "Unable to load API keys"));
     } finally {
       setLoading(false);
     }
-  };
+  }, [accessToken, fetchApiKeys, t]);
+
+  useEffect(() => {
+    if (status === "ready" && accessToken) {
+      loadKeys();
+    }
+  }, [accessToken, loadKeys, status]);
 
   const handleSelectKey = async (keyId: string) => {
     if (!accessToken) return;

package/src/components/LBSigninModal.tsx

@@ -7,6 +7,7 @@ import { AlertCircle, Loader2, Lock, Mail, Sparkles, X } from "lucide-react";
 import { useLB } from "../context/LBAuthProvider";
 import { LBApiKeySelector } from "./LBApiKeySelector";
 import { useI18n } from "../context/I18nContext";
+import type { LBApiKey } from "@lastbrain/ai-ui-core";
 
 export interface LBSigninModalProps {
   isOpen: boolean;
@@ -23,7 +24,7 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
   const [showKeySelector, setShowKeySelector] = useState(false);
-  const [currentApiKeys, setCurrentApiKeys] = useState<any[]>([]);
+  const [currentApiKeys, setCurrentApiKeys] = useState<LBApiKey[]>([]);
 
   const { login, selectApiKeyWithToken, fetchApiKeys } = lbContext || {};
 

package/src/components/UsageToast.tsx

@@ -6,7 +6,7 @@ import { X } from "lucide-react";
 import { useI18n } from "../context/I18nContext";
 
 interface UsageToastProps {
-  result: unknown;
+  result: any;
   position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
   onComplete?: () => void;
 }
@@ -46,7 +46,7 @@ export function UsageToast({
     }, 200);
   };
 
-  const extractUsageMessage = (data: unknown) => {
+  const extractUsageMessage = (data: any) => {
     const result = data as any;
 
     // Extract cost from various possible locations
@@ -165,10 +165,10 @@ export function UsageToast({
 }
 
 export function useUsageToast() {
-  const [toastData, setToastData] = useState<unknown>(null);
+  const [toastData, setToastData] = useState<any>(null);
   const [toastKey, setToastKey] = useState(0);
 
-  const showUsageToast = (result: unknown) => {
+  const showUsageToast = (result: any) => {
     // Replace any existing toast with new one
     setToastKey((prev) => prev + 1);
     setToastData(result);

package/src/context/LBAuthProvider.tsx

@@ -11,6 +11,7 @@ import {
   useEffect,
   useCallback,
   useMemo,
+  useRef,
   useState,
   type ReactNode,
 } from "react";
@@ -114,6 +115,8 @@ interface LBContextValue extends LBAuthState {
   isLoadingStatus: boolean;
   /** Indique si le storage est en cours de chargement */
   isLoadingStorage: boolean;
+  /** True si le cookie api_key_selected est présent */
+  hasSelectedApiKeyCookie: boolean;
 }
 
 const LBContext = createContext<LBContextValue | undefined>(undefined);
@@ -142,6 +145,17 @@ export function LBProvider({
   const [isLoadingStatus, setIsLoadingStatus] = useState(false);
   const [isLoadingStorage, setIsLoadingStorage] = useState(false);
   const [storageLastFetch, setStorageLastFetch] = useState<number>(0);
+  const [hasSelectedApiKeyCookie, setHasSelectedApiKeyCookie] = useState(false);
+  const previousStatusRef = useRef<LBAuthState["status"]>("loading");
+
+  const syncSelectedApiKeyCookie = useCallback(() => {
+    if (typeof document === "undefined") return;
+    const hasCookie = document.cookie
+      .split(";")
+      .map((part) => part.trim())
+      .some((part) => part.startsWith("api_key_selected=") && part.length > 17);
+    setHasSelectedApiKeyCookie(hasCookie);
+  }, []);
 
   const lbClient = useMemo(
     () =>
@@ -223,6 +237,13 @@ export function LBProvider({
     checkSession();
   }, [checkSession]);
 
+  useEffect(() => {
+    syncSelectedApiKeyCookie();
+    if (typeof window === "undefined") return;
+    const interval = window.setInterval(syncSelectedApiKeyCookie, 1000);
+    return () => window.clearInterval(interval);
+  }, [syncSelectedApiKeyCookie]);
+
   /**
    * Récupère les clés API de l'utilisateur
    */
@@ -272,6 +293,7 @@ export function LBProvider({
 
         setAccessToken(undefined); // Nettoyer l'access token temporaire
         setApiKeys([]); // Nettoyer les clés API temporaires
+        setTimeout(() => syncSelectedApiKeyCookie(), 100);
         onStatusChange?.("ready");
         onAuthChange?.(); // Refresh provider after signin
       } catch (error) {
@@ -284,7 +306,7 @@ export function LBProvider({
         throw error;
       }
     },
-    [lbClient, state.user, onStatusChange, onAuthChange]
+    [lbClient, onAuthChange, onStatusChange, state.user, syncSelectedApiKeyCookie]
   );
 
   /**
@@ -416,7 +438,7 @@ export function LBProvider({
     try {
       let data: BasicStatus;
       try {
-        data = await lbClient.getStatus();
+        data = (await lbClient.getStatus()) as BasicStatus;
       } catch {
         // Backward compatibility: older backends may not expose /auth/status
         const userData = await lbClient.getUser();
@@ -483,15 +505,17 @@ export function LBProvider({
 
       setIsLoadingStorage(true);
       try {
-        const data = await lbClient.getStorageStatus();
-        const storageData = data?.storage ? { storage: data.storage } : data;
+        const data = (await lbClient.getStorageStatus()) as StorageStatus;
+        const storageData: StorageStatus = data?.storage
+          ? { storage: data.storage }
+          : data;
         setStorageStatus(storageData);
         setStorageLastFetch(now);
 
         // Combiner avec le basic status
         const combinedStatus = {
           ...basicStatus,
-          storage: storageData?.storage,
+          storage: storageData.storage,
         };
         setApiStatus(combinedStatus as AiStatus);
       } catch (error) {
@@ -548,6 +572,7 @@ export function LBProvider({
         }
         await refreshBasicStatus();
         setTimeout(() => refreshStorageStatus(), 100);
+        setTimeout(() => syncSelectedApiKeyCookie(), 100);
       } else {
         throw new Error("No valid authentication method available");
       }
@@ -560,6 +585,7 @@ export function LBProvider({
       lbClient,
       refreshBasicStatus,
       refreshStorageStatus,
+      syncSelectedApiKeyCookie,
     ]
   );
 
@@ -580,6 +606,7 @@ export function LBProvider({
       setBasicStatus(null);
       setStorageStatus(null);
       setStorageLastFetch(0);
+      setHasSelectedApiKeyCookie(false);
       onStatusChange?.("needs_auth");
       onAuthChange?.(); // Refresh provider after logout
     }
@@ -610,21 +637,30 @@ export function LBProvider({
     }
   }, [lbClient, state.status]);
 
-  // Refresh status quand la session devient ready
+  // Refresh status uniquement lors de la transition vers "ready"
+  // (évite les boucles status/user causées par des callbacks recréés)
   useEffect(() => {
-    if (state.status === "ready") {
+    const wasReady = previousStatusRef.current === "ready";
+    previousStatusRef.current = state.status;
+
+    if (state.status === "ready" && !wasReady) {
       // Appel rapide d'abord
       refreshBasicStatus();
       // Storage en arrière-plan après 100ms
       setTimeout(() => refreshStorageStatus(), 100);
       fetchApiKeysWithSession(); // Also fetch API keys list
-    } else {
+    } else if (state.status !== "ready") {
       setApiStatus(null);
       setBasicStatus(null);
       setStorageStatus(null);
       setApiKeys([]);
     }
-  }, [state.status]); // Supprimer les fonctions des dépendances pour éviter la boucle
+  }, [
+    fetchApiKeysWithSession,
+    refreshBasicStatus,
+    refreshStorageStatus,
+    state.status,
+  ]);
 
   const value: LBContextValue = {
     ...state,
@@ -645,6 +681,7 @@ export function LBProvider({
     refreshStorageStatus,
     isLoadingStatus,
     isLoadingStorage,
+    hasSelectedApiKeyCookie,
   };
 
   return (

package/src/examples/AiImageGenerator.tsx

@@ -125,7 +125,7 @@ export function ModelManagementList({
 }) {
   const {
     availableModels,
-    userModels,
+    userModels: _userModels,
     loading,
     error,
     toggleModel,

package/src/hooks/useAiStatus.ts

@@ -1,8 +1,9 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useContext, useMemo } from "react";
 import type { AiStatus } from "@lastbrain/ai-ui-core";
 import { useAiClient } from "./useAiClient";
+import { LBContext } from "../context/LBAuthProvider";
 
 export interface UseAiStatusOptions {
   baseUrl?: string;
@@ -18,11 +19,48 @@ export interface UseAiStatusResult {
 
 export function useAiStatus(options?: UseAiStatusOptions): UseAiStatusResult {
   const client = useAiClient(options);
+  const lbContext = useContext(LBContext);
   const [status, setStatus] = useState<AiStatus | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<Error | null>(null);
 
+  const statusFromLB = useMemo<AiStatus | null>(() => {
+    if (!lbContext || lbContext.status !== "ready") {
+      return null;
+    }
+    if (lbContext.apiStatus) {
+      return lbContext.apiStatus;
+    }
+    if (lbContext.basicStatus) {
+      return {
+        ...(lbContext.basicStatus as AiStatus),
+        storage:
+          lbContext.storageStatus?.storage ||
+          (lbContext.basicStatus as AiStatus)?.storage,
+      } as AiStatus;
+    }
+    return null;
+  }, [lbContext]);
+
   const fetchStatus = useCallback(async () => {
+    // If LBProvider exists, never call getStatus directly here:
+    // - ready: delegate refresh to provider
+    // - non-ready: avoid unauthorized polling loops
+    if (lbContext) {
+      if (lbContext.status === "ready") {
+        try {
+          await lbContext.refreshBasicStatus();
+        } catch {
+          // Ignore: provider already tracks errors/status
+        }
+      } else {
+        setStatus(null);
+        setLoading(false);
+        setError(null);
+      }
+      return;
+    }
+
     console.log("[useAiStatus] Starting status fetch");
 
     setLoading(true);
@@ -39,15 +77,34 @@ export function useAiStatus(options?: UseAiStatusOptions): UseAiStatusResult {
     } finally {
       setLoading(false);
     }
-  }, [client]);
+  }, [client, lbContext]);
 
   useEffect(() => {
+    if (lbContext && lbContext.status !== "ready") {
+      setStatus(null);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+
+    if (statusFromLB) {
+      setStatus(statusFromLB);
+      setLoading(false);
+      setError(null);
+      return;
+    }
     fetchStatus();
-  }, [fetchStatus]);
+  }, [fetchStatus, lbContext, statusFromLB]);
+
+  const isLoadingFromLB =
+    !!lbContext &&
+    lbContext.status === "ready" &&
+    !statusFromLB &&
+    (lbContext.isLoadingStatus || lbContext.isLoadingStorage);
 
   return {
-    status,
-    loading,
+    status: statusFromLB || status,
+    loading: isLoadingFromLB || loading,
     error,
     refetch: fetchStatus,
   };

package/src/styles.css

@@ -195,7 +195,7 @@
   align-items: center;
   gap: 10px;
   min-height: var(--ai-control-h, var(--ai-size-md-h));
-  padding: 0 12px;
+  padding: 0 8px;
   border-radius: var(--ai-radius-current, var(--ai-radius-full));
   border: 1px solid var(--ai-border);
   background:
@@ -362,8 +362,8 @@
 .ai-shell--textarea .ai-control-action,
 .ai-shell--textarea .ai-spark {
   position: absolute;
-  right: 12px;
-  bottom: 12px;
+  right: 8px;
+  bottom: 8px;
 }
 
 /* Generic buttons */

package/src/utils/errorHandler.ts

@@ -13,7 +13,7 @@ type NormalizedErrorLike = {
   message: string;
 };
 
-function isNormalizedErrorLike(value: unknown): value is NormalizedErrorLike {
+function isNormalizedErrorLike(value: any): value is NormalizedErrorLike {
   if (!value || typeof value !== "object") {
     return false;
   }
@@ -24,7 +24,7 @@ function isNormalizedErrorLike(value: unknown): value is NormalizedErrorLike {
 /**
  * Parse et uniformise la gestion des erreurs des composants AI
  */
-export function parseAIError(error: unknown): ParsedError {
+export function parseAIError(error: any): ParsedError {
   // Si l'erreur est déjà un objet normalisé
   if (isNormalizedErrorLike(error)) {
     return {
@@ -173,7 +173,7 @@ export interface ErrorToastCallback {
  * @param showInternalToast Callback interne optionnelle pour afficher un toast dans le composant
  */
 export function handleAIError(
-  error: unknown,
+  error: any,
   onToast?: ErrorToastCallback,
   showInternalToast?: (error: { message: string; code?: string }) => void
 ): void {

package/src/utils/modelManagement.ts

@@ -15,7 +15,7 @@ interface ProvidersResponse {
   providers?: Provider[];
 }
 
-interface ModelsResponse {
+interface _ModelsResponse {
   models?: ModelInfo[];
 }
 
@@ -32,7 +32,7 @@ interface ModelInfo {
   costPer1M?: number;
 }
 
-function isModelCategory(value: unknown): value is ModelCategory {
+function isModelCategory(value: any): value is ModelCategory {
   return (
     value === "text" ||
     value === "image" ||
@@ -41,7 +41,7 @@ function isModelCategory(value: unknown): value is ModelCategory {
   );
 }
 
-function isModelInfo(value: unknown): value is ModelInfo {
+function isModelInfo(value: any): value is ModelInfo {
   if (!value || typeof value !== "object") return false;
   const v = value as Record<string, unknown>;
   return (