@lastbrain/ai-ui-react 1.0.74 → 1.0.76

package/dist/hooks/useAiStatus.js

@@ -1,12 +1,40 @@
 "use client";
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useContext, useMemo } from "react";
 import { useAiClient } from "./useAiClient";
+import { LBContext } from "../context/LBAuthProvider";
 export function useAiStatus(options) {
     const client = useAiClient(options);
+    const lbContext = useContext(LBContext);
     const [status, setStatus] = useState(null);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
+    const statusFromLB = useMemo(() => {
+        if (!lbContext || lbContext.status !== "ready") {
+            return null;
+        }
+        if (lbContext.apiStatus) {
+            return lbContext.apiStatus;
+        }
+        if (lbContext.basicStatus) {
+            return {
+                ...lbContext.basicStatus,
+                storage: lbContext.storageStatus?.storage ||
+                    lbContext.basicStatus?.storage,
+            };
+        }
+        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);
         setError(null);
@@ -22,13 +50,23 @@ export function useAiStatus(options) {
         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/dist/hooks/useLoadingTimer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLoadingTimer.d.ts","sourceRoot":"","sources":["../../src/hooks/useLoadingTimer.ts"],"names":[],"mappings":"AAWA,wBAAgB,eAAe,CAAC,MAAM,EAAE,OAAO;;;EAmB9C"}
+{"version":3,"file":"useLoadingTimer.d.ts","sourceRoot":"","sources":["../../src/hooks/useLoadingTimer.ts"],"names":[],"mappings":"AAWA,wBAAgB,eAAe,CAAC,MAAM,EAAE,OAAO;;;EA0B9C"}

package/dist/hooks/useLoadingTimer.js

@@ -11,17 +11,21 @@ export function useLoadingTimer(active) {
     const [seconds, setSeconds] = useState(0);
     useEffect(() => {
         if (!active) {
-            setSeconds(0);
-            return;
+            const timeoutId = window.setTimeout(() => setSeconds(0), 0);
+            return () => window.clearTimeout(timeoutId);
         }
-        setSeconds(0);
-        const id = window.setInterval(() => {
+        const resetId = window.setTimeout(() => setSeconds(0), 0);
+        const intervalId = window.setInterval(() => {
             setSeconds((prev) => prev + 1);
         }, 1000);
-        return () => window.clearInterval(id);
+        return () => {
+            window.clearTimeout(resetId);
+            window.clearInterval(intervalId);
+        };
     }, [active]);
+    const displaySeconds = active ? seconds : 0;
     return {
-        seconds,
-        formatted: formatElapsed(seconds),
+        seconds: displaySeconds,
+        formatted: formatElapsed(displaySeconds),
     };
 }

package/dist/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/dist/utils/errorHandler.d.ts

@@ -6,7 +6,7 @@ export interface ParsedError {
 /**
  * Parse et uniformise la gestion des erreurs des composants AI
  */
-export declare function parseAIError(error: unknown): ParsedError;
+export declare function parseAIError(error: any): ParsedError;
 /**
  * Interface pour la callback de gestion d'erreur uniforme
  */
@@ -23,7 +23,7 @@ export interface ErrorToastCallback {
  * @param onToast Callback externe optionnelle fournie par le parent
  * @param showInternalToast Callback interne optionnelle pour afficher un toast dans le composant
  */
-export declare function handleAIError(error: unknown, onToast?: ErrorToastCallback, showInternalToast?: (error: {
+export declare function handleAIError(error: any, onToast?: ErrorToastCallback, showInternalToast?: (error: {
     message: string;
     code?: string;
 }) => void): void;

package/dist/utils/errorHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"errorHandler.d.ts","sourceRoot":"","sources":["../../src/utils/errorHandler.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,OAAO,CAAC;CACzB;AAeD;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,OAAO,GAAG,WAAW,CA8CxD;AAyFD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CAClE;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,OAAO,EACd,OAAO,CAAC,EAAE,kBAAkB,EAC5B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,IAAI,GACtE,IAAI,CAuBN"}
+{"version":3,"file":"errorHandler.d.ts","sourceRoot":"","sources":["../../src/utils/errorHandler.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,OAAO,CAAC;CACzB;AAeD;;GAEG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,GAAG,GAAG,WAAW,CA8CpD;AAyFD;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,CAAC,KAAK,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CAClE;AAED;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,KAAK,EAAE,GAAG,EACV,OAAO,CAAC,EAAE,kBAAkB,EAC5B,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,KAAK,IAAI,GACtE,IAAI,CAuBN"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/ai-ui-react",
-  "version": "1.0.74",
+  "version": "1.0.76",
   "description": "Headless React components for LastBrain AI UI Kit",
   "private": false,
   "type": "module",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "lucide-react": "^0.257.0",
-    "@lastbrain/ai-ui-core": "1.0.54"
+    "@lastbrain/ai-ui-core": "1.0.55"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",

package/src/components/AiChipLabel.tsx

@@ -212,10 +212,7 @@ Exemple de réponse attendue: javascript, react, frontend, api, development`;
             onKeyDown={handleKeyDown}
             placeholder={
               placeholder ||
-              t(
-                "ai.chips.placeholder",
-                "Type and press Enter to add tags..."
-              )
+              t("ai.chips.placeholder", "Type and press Enter to add tags...")
             }
             className={`ai-control ai-control-input ai-control-input--with-action ${sizeClass} ${radiusClass}`}
           />

package/src/components/AiContextButton.tsx

@@ -22,7 +22,7 @@ type ContextData =
   | boolean
   | object
   | unknown[]
-  | { [key: string]: unknown };
+  | { [key: string]: any };
 
 export interface AiContextButtonProps
   extends
@@ -208,7 +208,9 @@ export function AiContextButton({
     )
       ? 0
       : analysisResult.cost
-    ).toFixed(6)}\n${t("ai.context.requestId", "Request ID")}: ${analysisResult.requestId || "N/A"}`;
+    ).toFixed(
+      6
+    )}\n${t("ai.context.requestId", "Request ID")}: ${analysisResult.requestId || "N/A"}`;
 
     const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
     const url = URL.createObjectURL(blob);
@@ -254,7 +256,9 @@ export function AiContextButton({
           ) : (
             <>
               <Sparkles size={16} />
-              {children || <span>{t("ai.context.buttonAnalyze", "Analyze")}</span>}
+              {children || (
+                <span>{t("ai.context.buttonAnalyze", "Analyze")}</span>
+              )}
             </>
           )}
         </button>
@@ -292,7 +296,8 @@ export function AiContextButton({
               <div className="ai-row">
                 <FileText size={18} />
                 <h2 className="ai-result-title">
-                  {resultModalTitle || t("ai.context.resultTitle", "Analysis result")}
+                  {resultModalTitle ||
+                    t("ai.context.resultTitle", "Analysis result")}
                 </h2>
               </div>
               <div className="ai-row">
@@ -320,12 +325,16 @@ export function AiContextButton({
 
             <div className="ai-result-body">
               <div className="ai-result-block">
-                <h3 className="ai-result-subtitle">{t("common.promptUsed", "Prompt used")}</h3>
+                <h3 className="ai-result-subtitle">
+                  {t("common.promptUsed", "Prompt used")}
+                </h3>
                 <pre className="ai-result-code">{analysisResult.prompt}</pre>
               </div>
 
               <div className="ai-result-block">
-                <h3 className="ai-result-subtitle">{t("common.result", "Result")}</h3>
+                <h3 className="ai-result-subtitle">
+                  {t("common.result", "Result")}
+                </h3>
                 <div className="ai-result-content">
                   {analysisResult.content}
                 </div>

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
@@ -122,8 +122,11 @@ export function AiImageButton({
     if (!generatedImage || !onImageSave) return;
     try {
       await onImageSave(generatedImage.url);
-      onToast?.({ type: "success", message: t("ai.image.savedSuccess", "Image saved") });
-    } catch (_error) {
+      onToast?.({
+        type: "success",
+        message: t("ai.image.savedSuccess", "Image saved"),
+      });
+    } catch {
       onToast?.({
         type: "error",
         message: t("ai.image.saveError", "Error while saving"),
@@ -174,7 +177,10 @@ export function AiImageButton({
         });
         onToast?.({
           type: "success",
-          message: t("ai.image.generatedSuccess", "Image generated successfully"),
+          message: t(
+            "ai.image.generatedSuccess",
+            "Image generated successfully"
+          ),
         });
 
         // Afficher le toast de coût même en mode dev

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/AiModelSelect.tsx

@@ -29,7 +29,9 @@ export function AiModelSelect({
       disabled={disabled}
       data-ai-model-select
     >
-      <option value="">{t("ai.select.modelPlaceholder", "Select a model")}</option>
+      <option value="">
+        {t("ai.select.modelPlaceholder", "Select a model")}
+      </option>
       {models.map((model) => (
         <option key={model.id} value={model.id}>
           {model.name}

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",
         }}
       >
@@ -570,7 +595,10 @@ function AiPromptPanelInternal({
                         AI Model
                       </label>
                       {isModelsLoading ? (
-                        <span className="ai-inline-skeleton" aria-hidden="true" />
+                        <span
+                          className="ai-inline-skeleton"
+                          aria-hidden="true"
+                        />
                       ) : effectiveAvailableModels.length > 0 ? (
                         <button
                           onClick={() => setIsModelManagementOpen(true)}
@@ -747,17 +775,17 @@ function AiPromptPanelInternal({
                   onChange={(e) => setPrompt(e.target.value)}
                   onFocus={() => setPromptFocused(true)}
                   onBlur={() => setPromptFocused(false)}
-                    placeholder={
-                      sourceText
-                        ? t(
-                            "prompt.modal.promptPlaceholderWithSource",
-                            "Enter your AI prompt... e.g., 'Fix grammar', 'Make it more professional', 'Translate to English'"
-                          )
-                        : t(
-                            "prompt.modal.promptPlaceholderNoSource",
-                            "Enter your AI prompt... e.g., 'Write a blog post about AI', 'Generate product description'"
-                          )
-                    }
+                  placeholder={
+                    sourceText
+                      ? t(
+                          "prompt.modal.promptPlaceholderWithSource",
+                          "Enter your AI prompt... e.g., 'Fix grammar', 'Make it more professional', 'Translate to English'"
+                        )
+                      : t(
+                          "prompt.modal.promptPlaceholderNoSource",
+                          "Enter your AI prompt... e.g., 'Write a blog post about AI', 'Generate product description'"
+                        )
+                  }
                   rows={6}
                   style={{
                     ...aiStyles.textarea,
@@ -889,7 +917,10 @@ function AiPromptPanelInternal({
                   }}
                 >
                   {Array.from({ length: 4 }).map((_, idx) => (
-                    <div key={`prompt-skeleton-${idx}`} className="ai-list-skeleton">
+                    <div
+                      key={`prompt-skeleton-${idx}`}
+                      className="ai-list-skeleton"
+                    >
                       <div className="ai-list-skeleton__line ai-list-skeleton__line--lg" />
                       <div className="ai-list-skeleton__line ai-list-skeleton__line--md" />
                     </div>
@@ -1260,7 +1291,10 @@ function AiPromptPanelInternal({
                 {isModelsLoading ? (
                   <>
                     {Array.from({ length: 4 }).map((_, idx) => (
-                      <div key={`model-skeleton-${idx}`} className="ai-list-skeleton">
+                      <div
+                        key={`model-skeleton-${idx}`}
+                        className="ai-list-skeleton"
+                      >
                         <div className="ai-list-skeleton__line ai-list-skeleton__line--lg" />
                         <div className="ai-list-skeleton__line ai-list-skeleton__line--md" />
                       </div>
@@ -1365,35 +1399,35 @@ function AiPromptPanelInternal({
                     );
                   })}
                 {!isModelsLoading &&
-                effectiveAvailableModels.filter((model) => {
-                  if (model.category !== modelCategory) return false;
-                  if (!modelSearchQuery.trim()) return true;
-                  const query = modelSearchQuery.toLowerCase();
-                  return (
-                    model.name.toLowerCase().includes(query) ||
-                    model.provider.toLowerCase().includes(query) ||
-                    model.description?.toLowerCase().includes(query)
-                  );
-                }).length === 0 && (
-                  <div
-                    style={{
-                      textAlign: "center",
-                      padding: "32px 16px",
-                      color: "var(--ai-text-tertiary)",
-                      fontSize: "14px",
-                    }}
-                  >
-                    {modelSearchQuery.trim()
-                      ? t(
-                          "prompt.modal.noModelMatch",
-                          "No model matches your search"
-                        )
-                      : t(
-                          "prompt.modal.noModelAvailable",
-                          "No models available"
-                        )}
-                  </div>
-                )}
+                  effectiveAvailableModels.filter((model) => {
+                    if (model.category !== modelCategory) return false;
+                    if (!modelSearchQuery.trim()) return true;
+                    const query = modelSearchQuery.toLowerCase();
+                    return (
+                      model.name.toLowerCase().includes(query) ||
+                      model.provider.toLowerCase().includes(query) ||
+                      model.description?.toLowerCase().includes(query)
+                    );
+                  }).length === 0 && (
+                    <div
+                      style={{
+                        textAlign: "center",
+                        padding: "32px 16px",
+                        color: "var(--ai-text-tertiary)",
+                        fontSize: "14px",
+                      }}
+                    >
+                      {modelSearchQuery.trim()
+                        ? t(
+                            "prompt.modal.noModelMatch",
+                            "No model matches your search"
+                          )
+                        : t(
+                            "prompt.modal.noModelAvailable",
+                            "No models available"
+                          )}
+                    </div>
+                  )}
               </div>
             </div>
 

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,