@lastbrain/ai-ui-react 1.0.69 → 1.0.71

package/src/components/LBApiKeySelector.tsx

@@ -45,7 +45,10 @@ export function LBApiKeySelector({
 
   return (
     <div className="ai-signin-overlay" onClick={onCancel}>
-      <div className="ai-signin-panel ai-key-modal-panel" onClick={(e) => e.stopPropagation()}>
+      <div
+        className="ai-signin-panel ai-key-modal-panel"
+        onClick={(e) => e.stopPropagation()}
+      >
         <div className="ai-signin-header">
           <div className="ai-center mb-3">
             <span className="ai-icon-badge">
@@ -87,7 +90,9 @@ export function LBApiKeySelector({
                       <div>
                         <div className="ai-model-item-title">{key.name}</div>
                         <div className="ai-model-item-meta">
-                          <span>{key.keyPrefix || key.id.substring(0, 12) + "..."}</span>
+                          <span>
+                            {key.keyPrefix || key.id.substring(0, 12) + "..."}
+                          </span>
                         </div>
                       </div>
                     </div>
@@ -115,7 +120,12 @@ export function LBApiKeySelector({
             ) : null}
 
             <div className="ai-signin-actions">
-              <button type="button" onClick={onCancel} disabled={loading} className="ai-btn ai-btn--ghost">
+              <button
+                type="button"
+                onClick={onCancel}
+                disabled={loading}
+                className="ai-btn ai-btn--ghost"
+              >
                 Annuler
               </button>
               <button

package/src/components/LBConnectButton.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import "../styles/register";
 import React from "react";
 import { Loader2, LogIn, LogOut } from "lucide-react";
 import { useLB } from "../context/LBAuthProvider";
@@ -38,8 +39,7 @@ export function LBConnectButton({
     onOpenModal?.();
   };
 
-  const buttonLabel =
-    status === "ready" && user ? "Déconnexion" : label;
+  const buttonLabel = status === "ready" && user ? "Déconnexion" : label;
 
   return (
     <>
@@ -67,10 +67,7 @@ export function LBConnectButton({
         )}
       </button>
 
-      <LBSigninModal
-        isOpen={showModal}
-        onClose={() => setShowModal(false)}
-      />
+      <LBSigninModal isOpen={showModal} onClose={() => setShowModal(false)} />
     </>
   );
 }
@@ -84,10 +81,5 @@ interface LBAuthModalProps {
 }
 
 export function LBAuthModal({ onClose }: LBAuthModalProps) {
-  return (
-    <LBSigninModal
-      isOpen
-      onClose={() => onClose(false)}
-    />
-  );
+  return <LBSigninModal isOpen onClose={() => onClose(false)} />;
 }

package/src/components/LBKeyPicker.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import "../styles/register";
 /**
  * Composant LBKeyPicker
  * Permet de changer de clé API sans se reconnecter

package/src/components/LBSigninModal.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import "../styles/register";
 import { useEffect, useMemo, useState } from "react";
 import { createPortal } from "react-dom";
 import { AlertCircle, Loader2, Lock, Mail, Sparkles, X } from "lucide-react";
@@ -22,11 +23,7 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
   const [showKeySelector, setShowKeySelector] = useState(false);
   const [currentApiKeys, setCurrentApiKeys] = useState<any[]>([]);
 
-  const {
-    login,
-    selectApiKeyWithToken,
-    fetchApiKeys,
-  } = lbContext || {};
+  const { login, selectApiKeyWithToken, fetchApiKeys } = lbContext || {};
 
   const canRender = Boolean(isOpen && lbContext && login);
 
@@ -75,7 +72,9 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
         setError("Erreur lors de la récupération des clés API");
       }
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Une erreur s'est produite");
+      setError(
+        err instanceof Error ? err.message : "Une erreur s'est produite"
+      );
     } finally {
       setLoading(false);
     }
@@ -91,7 +90,9 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
       setShowKeySelector(false);
       onClose();
     } catch (err) {
-      setError(err instanceof Error ? err.message : "Erreur lors de la sélection");
+      setError(
+        err instanceof Error ? err.message : "Erreur lors de la sélection"
+      );
       setShowKeySelector(false);
     }
   };
@@ -151,7 +152,10 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
         <div className="ai-signin-content">
           <form onSubmit={handleSubmit}>
             <div className="ai-input-row">
-              <label htmlFor="lb-signin-email" className="ai-input-label ai-row">
+              <label
+                htmlFor="lb-signin-email"
+                className="ai-input-label ai-row"
+              >
                 <Mail size={14} className="ai-inline-icon" />
                 Email
               </label>
@@ -173,7 +177,10 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
             </div>
 
             <div className="ai-input-row">
-              <label htmlFor="lb-signin-password" className="ai-input-label ai-row">
+              <label
+                htmlFor="lb-signin-password"
+                className="ai-input-label ai-row"
+              >
                 <Lock size={14} className="ai-inline-icon" />
                 Mot de passe
               </label>
@@ -201,7 +208,11 @@ export function LBSigninModal({ isOpen, onClose }: LBSigninModalProps) {
             ) : null}
 
             <div className="ai-signin-actions">
-              <button type="submit" className="ai-btn ai-btn--auth" disabled={loading}>
+              <button
+                type="submit"
+                className="ai-btn ai-btn--auth"
+                disabled={loading}
+              >
                 {loading ? (
                   <>
                     <Loader2 size={16} className="ai-spinner" />

package/src/components/UsageToast.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import "../styles/register";
 import { useEffect, useRef, useState } from "react";
 import { X } from "lucide-react";
 

package/src/context/LBAuthProvider.tsx

@@ -17,13 +17,45 @@ import {
 import type {
   LBAuthState,
   LBApiKey,
-  LBSession,
   LBLoginResult,
   LBSessionResult,
   AiStatus,
 } from "@lastbrain/ai-ui-core";
 import { createLBClient } from "@lastbrain/ai-ui-core";
 
+export interface ApiKeyUser {
+  id?: string;
+  name?: string;
+  prefix?: string;
+  env?: string;
+  rate_limit_rpm?: number;
+  scopes?: string[];
+}
+
+export interface BasicStatus {
+  authType?: string;
+  user?: {
+    id?: string;
+    email?: string;
+  } | null;
+  apiKey?: ApiKeyUser | null;
+  api_key?: ApiKeyUser | null;
+  balance?: {
+    used?: number;
+    total?: number;
+    percentage?: number;
+  };
+  storage?: StorageStatus["storage"];
+}
+
+export interface StorageStatus {
+  storage?: {
+    used_mb?: number;
+    allocated_mb?: number;
+    percentage?: number;
+  } | null;
+}
+
 interface LBProviderProps {
   children: ReactNode;
   /** URL de l'API LastBrain (ex: https://api.lastbrain.io) */
@@ -66,9 +98,9 @@ interface LBContextValue extends LBAuthState {
   /** Status API (balance, storage, API key info) */
   apiStatus: AiStatus | null;
   /** Status basique (rapide) - balance, API key info sans storage */
-  basicStatus: any;
+  basicStatus: BasicStatus | null;
   /** Status storage (lent) avec cache */
-  storageStatus: any;
+  storageStatus: StorageStatus | null;
   /** Fonction pour rafraîchir le status rapide */
   refreshBasicStatus: () => Promise<void>;
   /** Fonction pour rafraîchir le storage (avec cache optionnel) */
@@ -83,6 +115,9 @@ interface LBContextValue extends LBAuthState {
 
 const LBContext = createContext<LBContextValue | undefined>(undefined);
 
+// Export pour usage dans d'autres composants
+export { LBContext };
+
 export function LBProvider({
   children,
   baseUrl: _baseUrl = "/api/lastbrain",
@@ -96,8 +131,10 @@ export function LBProvider({
   const [apiKeys, setApiKeys] = useState<LBApiKey[]>([]);
   const [accessToken, setAccessToken] = useState<string>();
   const [apiStatus, setApiStatus] = useState<AiStatus | null>(null);
-  const [basicStatus, setBasicStatus] = useState<any>(null);
-  const [storageStatus, setStorageStatus] = useState<any>(null);
+  const [basicStatus, setBasicStatus] = useState<BasicStatus | null>(null);
+  const [storageStatus, setStorageStatus] = useState<StorageStatus | null>(
+    null
+  );
   const [isLoadingStatus, setIsLoadingStatus] = useState(false);
   const [isLoadingStorage, setIsLoadingStorage] = useState(false);
   const [storageLastFetch, setStorageLastFetch] = useState<number>(0);
@@ -373,7 +410,7 @@ export function LBProvider({
 
     setIsLoadingStatus(true);
     try {
-      let data: any;
+      let data: BasicStatus;
       try {
         data = await lbClient.getStatus();
       } catch {
@@ -452,7 +489,7 @@ export function LBProvider({
           ...basicStatus,
           storage: storageData?.storage,
         };
-        setApiStatus(combinedStatus);
+        setApiStatus(combinedStatus as AiStatus);
       } catch (error) {
         console.error("[LBProvider] Failed to fetch storage status:", error);
         // Arrêter les tentatives répétées si erreur persistante
@@ -619,3 +656,6 @@ export function useLB(): LBContextValue {
   }
   return context;
 }
+
+// Re-export des types pour usage externe
+export type { LBApiKey };

package/src/examples/AiUiPremiumShowcase.tsx

@@ -56,7 +56,10 @@ function ShowcasePanel({
               <Sparkles size={14} className="text-[var(--ai-primary)]" />
             </div>
             <div className="mt-3 space-y-2">
-              <input className="ai-control ai-control-input" placeholder="Default state" />
+              <input
+                className="ai-control ai-control-input"
+                placeholder="Default state"
+              />
               <input
                 className="ai-control ai-control-input ai-control--focused"
                 placeholder="Focused style"

package/src/hooks/useAiModels.ts

@@ -26,7 +26,8 @@ export function useAiModels(options?: UseAiModelsOptions): UseAiModelsResult {
 
   // Utiliser le contexte dès que la base URL correspond.
   // L'apiKeyId peut varier (session/api-key sélectionnée) sans invalider le contexte.
-  const useContextData = !options?.baseUrl || options.baseUrl === context.baseUrl;
+  const useContextData =
+    !options?.baseUrl || options.baseUrl === context.baseUrl;
 
   // Filtrer les modèles selon le type demandé
   const filteredModels = useMemo(() => {

package/src/hooks/useModelManagement.ts

@@ -44,7 +44,8 @@ export function useModelManagement(
   // Utiliser les données du contexte si la base URL correspond.
   // L'apiKey peut changer selon le mode d'auth (lb_session/supabase/api_key) sans
   // devoir casser le cache/provider de modèles déjà présent.
-  const useContextData = !options.baseUrl || options.baseUrl === context.baseUrl;
+  const useContextData =
+    !options.baseUrl || options.baseUrl === context.baseUrl;
 
   // Filtrer par catégorie si nécessaire
   const filteredModels = useMemo(() => {

package/src/styles/register.ts

@@ -0,0 +1,3 @@
+import "../styles.css";
+
+export {};

package/src/utils/errorHandler.ts

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

package/src/utils/modelManagement.ts

@@ -7,6 +7,51 @@ export interface ModelToggleOptions {
   baseUrl?: string; // URL de base de l'API
 }
 
+interface Provider {
+  models?: ModelInfo[];
+}
+
+interface ProvidersResponse {
+  providers?: Provider[];
+}
+
+interface ModelsResponse {
+  models?: ModelInfo[];
+}
+
+type ModelCategory = "text" | "image" | "audio" | "video";
+
+interface ModelInfo {
+  id: string;
+  name: string;
+  description?: string;
+  provider: string;
+  category: ModelCategory;
+  isActive?: boolean;
+  isPro?: boolean;
+  costPer1M?: number;
+}
+
+function isModelCategory(value: unknown): value is ModelCategory {
+  return (
+    value === "text" ||
+    value === "image" ||
+    value === "audio" ||
+    value === "video"
+  );
+}
+
+function isModelInfo(value: unknown): value is ModelInfo {
+  if (!value || typeof value !== "object") return false;
+  const v = value as Record<string, unknown>;
+  return (
+    typeof v.id === "string" &&
+    typeof v.name === "string" &&
+    typeof v.provider === "string" &&
+    isModelCategory(v.category)
+  );
+}
+
 function isAuthTokenCandidate(value?: string): boolean {
   if (!value) return false;
   const token = value.trim();
@@ -66,18 +111,7 @@ export async function toggleUserModel(
  */
 export async function getAvailableModels(
   options: ModelToggleOptions = {}
-): Promise<
-  Array<{
-    id: string;
-    name: string;
-    description?: string;
-    provider: string;
-    category: "text" | "image" | "audio" | "video";
-    isActive?: boolean;
-    isPro?: boolean;
-    costPer1M?: number;
-  }>
-> {
+): Promise<ModelInfo[]> {
   const { apiKey, baseUrl = "" } = options;
 
   // Déterminer le contexte
@@ -123,11 +157,15 @@ export async function getAvailableModels(
   const data = await response.json();
 
   if (Array.isArray(data?.models)) {
-    return data.models;
+    return data.models.filter(isModelInfo);
   }
   if (Array.isArray(data?.providers)) {
-    return data.providers.flatMap((provider: any) =>
-      Array.isArray(provider.models) ? provider.models : []
+    return (
+      (data as ProvidersResponse).providers?.flatMap((provider: Provider) =>
+        Array.isArray(provider.models)
+          ? provider.models.filter(isModelInfo)
+          : []
+      ) || []
     );
   }
   return [];