@lastbrain/ai-ui-react 1.0.75 → 1.0.76

package/src/components/AiImageButton.tsx

@@ -74,7 +74,7 @@ export function AiImageButton({
     requestId: string;
     tokens: number;
   } | null>(null);
-  const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
+  const { showUsageToast } = useUsageToast();
   const { showErrorToast, errorData, errorKey, clearError } = useErrorToast();
 
   // Rendre l'authentification optionnelle
@@ -126,7 +126,7 @@ export function AiImageButton({
         type: "success",
         message: t("ai.image.savedSuccess", "Image saved"),
       });
-    } catch (_error) {
+    } catch {
       onToast?.({
         type: "error",
         message: t("ai.image.saveError", "Error while saving"),

package/src/components/AiInput.tsx

@@ -34,7 +34,7 @@ export function AiInput({
   context,
   model,
   prompt,
-  editMode = false,
+  editMode: _editMode = false,
   enableModelManagement = true,
   storeOutputs,
   artifactTitle,
@@ -51,7 +51,12 @@ export function AiInput({
     inputProps.value?.toString() || inputProps.defaultValue?.toString() || ""
   );
   const inputRef = useRef<HTMLInputElement>(null);
-  const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
+  const {
+    showUsageToast: _showUsageToast,
+    toastData,
+    toastKey,
+    clearToast,
+  } = useUsageToast();
 
   // Rendre l'authentification optionnelle
   let lbStatus: string | undefined;
@@ -77,7 +82,7 @@ export function AiInput({
   const baseUrl = propBaseUrl ?? ctxBaseUrl;
   const apiKeyId = propApiKeyId ?? ctxApiKeyId;
 
-  const { models } = useAiModels({
+  const { models: _models } = useAiModels({
     baseUrl,
     apiKeyId,
     modelType: "text-or-language",
@@ -104,7 +109,7 @@ export function AiInput({
   const handleSubmit = async (
     selectedModel: string,
     selectedPrompt: string,
-    promptId?: string
+    _promptId?: string
   ) => {
     try {
       const resolvedContext = inputValue || context || undefined;

package/src/components/AiPromptPanel.tsx

@@ -102,7 +102,7 @@ function AiPromptPanelInternal({
   isOpen,
   onClose,
   onSubmit,
-  uiMode: _uiMode = "modal",
+  uiMode = "modal",
   models = [],
   sourceText,
   children,
@@ -405,9 +405,29 @@ function AiPromptPanelInternal({
     return null;
   }
 
+  const isDrawer = uiMode === "drawer";
+  const panelContainerStyle = isDrawer
+    ? {
+        ...aiStyles.modal,
+        alignItems: "stretch",
+        justifyContent: "flex-end",
+        padding: "0",
+      }
+    : aiStyles.modal;
+  const panelContentStyle = isDrawer
+    ? {
+        ...aiStyles.modalContent,
+        width: "min(92vw, 640px)",
+        maxWidth: "640px",
+        maxHeight: "100vh",
+        height: "100vh",
+        borderRadius: "16px 0 0 16px",
+      }
+    : aiStyles.modalContent;
+
   if (children) {
     return createPortal(
-      <div style={aiStyles.modal} onKeyDown={handleKeyDown}>
+      <div style={panelContainerStyle} onKeyDown={handleKeyDown}>
         {children(renderProps)}
       </div>,
       portalRoot
@@ -415,7 +435,7 @@ function AiPromptPanelInternal({
   }
 
   return createPortal(
-    <div style={aiStyles.modal} onKeyDown={handleKeyDown}>
+    <div style={panelContainerStyle} onKeyDown={handleKeyDown}>
       <div
         style={{
           ...aiStyles.modalOverlay,
@@ -426,13 +446,18 @@ function AiPromptPanelInternal({
       />
       <div
         style={{
-          ...aiStyles.modalContent,
+          ...panelContentStyle,
           opacity: isClosing ? 0 : 1,
-          transform: isClosing ? "translateY(12px)" : "translateY(0)",
+          transform: isClosing
+            ? isDrawer
+              ? "translateX(16px)"
+              : "translateY(12px)"
+            : isDrawer
+              ? "translateX(0)"
+              : "translateY(0)",
           transition: "opacity 200ms ease, transform 200ms ease",
           display: "flex",
           flexDirection: "column",
-          maxHeight: "85vh",
           overflow: "hidden",
         }}
       >

package/src/components/AiSelect.tsx

@@ -31,8 +31,8 @@ export function AiSelect({
   size = "md",
   radius = "full",
   context,
-  model,
-  prompt,
+  model: _model,
+  prompt: _prompt,
   storeOutputs,
   artifactTitle,
   onValue,

package/src/components/AiStatusButton.tsx

@@ -207,14 +207,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 ||

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,15 @@ export function AiTextarea({
 
   // Rendre l'authentification optionnelle
   let lbStatus: string | undefined;
+  let hasLBProvider = false;
   try {
     const lbContext = useLB();
     lbStatus = lbContext.status;
+    hasLBProvider = true;
   } catch {
     // LBProvider n'est pas disponible, ignorer
     lbStatus = undefined;
+    hasLBProvider = false;
   }
 
   let ctxBaseUrl: string | undefined;
@@ -82,8 +87,11 @@ export function AiTextarea({
 
   const baseUrl = propBaseUrl ?? ctxBaseUrl;
   const apiKeyId = propApiKeyId ?? ctxApiKeyId;
+  const supportsSessionAuth =
+    typeof baseUrl === "string" &&
+    (baseUrl.includes("/api/ai") || baseUrl.includes("/api/lastbrain"));
 
-  const { models } = useAiModels({
+  const { models: _models } = useAiModels({
     baseUrl,
     apiKeyId,
     modelType: "text-or-language",
@@ -92,7 +100,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 =
+    supportsSessionAuth ||
+    lbStatus === "ready" ||
+    Boolean(process.env.LB_API_KEY);
   const shouldShowSparkles = isAuthReady && !disabled;
 
   const handleOpenPanel = () => {
@@ -101,16 +112,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 +154,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 +294,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

@@ -416,7 +416,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 +483,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) {
@@ -624,7 +626,12 @@ export function LBProvider({
       setStorageStatus(null);
       setApiKeys([]);
     }
-  }, [state.status]); // Supprimer les fonctions des dépendances pour éviter la boucle
+  }, [
+    fetchApiKeysWithSession,
+    refreshBasicStatus,
+    refreshStorageStatus,
+    state.status,
+  ]);
 
   const value: LBContextValue = {
     ...state,

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,40 @@ 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 is available, it already handles fast status + storage split.
+    if (lbContext && lbContext.status === "ready") {
+      try {
+        await lbContext.refreshBasicStatus();
+      } catch {
+        // Ignore: provider already tracks errors/status
+      }
+      return;
+    }
+
     console.log("[useAiStatus] Starting status fetch");
 
     setLoading(true);
@@ -39,15 +69,27 @@ export function useAiStatus(options?: UseAiStatusOptions): UseAiStatusResult {
     } finally {
       setLoading(false);
     }
-  }, [client]);
+  }, [client, lbContext]);
 
   useEffect(() => {
+    if (statusFromLB) {
+      setStatus(statusFromLB);
+      setLoading(false);
+      setError(null);
+      return;
+    }
     fetchStatus();
-  }, [fetchStatus]);
+  }, [fetchStatus, 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 (