@lastbrain/ai-ui-react 1.0.29 → 1.0.31

package/dist/components/AiContextButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AiContextButton.d.ts","sourceRoot":"","sources":["../../src/components/AiContextButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAS5C,MAAM,WAAW,oBACf,SACE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,EACrC,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAEvE,WAAW,EAAE,GAAG,CAAC;IACjB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,CACT,MAAM,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAC7C,IAAI,CAAC;IACV,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAgB,EAChB,WAAW,EACX,kBAAyC,EACzC,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,gBAA0C,EAC1C,YAAY,EACZ,aAAa,EACb,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,OAAO,EACf,GAAG,WAAW,EACf,EAAE,oBAAoB,2CAqftB"}
+{"version":3,"file":"AiContextButton.d.ts","sourceRoot":"","sources":["../../src/components/AiContextButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAE5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAU5C,MAAM,WAAW,oBACf,SACE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,EACrC,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAEvE,WAAW,EAAE,GAAG,CAAC;IACjB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,EAAE,CACT,MAAM,EAAE,MAAM,EACd,QAAQ,CAAC,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAC7C,IAAI,CAAC;IACV,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAgB,EAChB,WAAW,EACX,kBAAyC,EACzC,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,gBAA0C,EAC1C,YAAY,EACZ,aAAa,EACb,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,OAAO,EACf,GAAG,WAAW,EACf,EAAE,oBAAoB,2CAyftB"}

package/dist/components/AiContextButton.js

@@ -6,6 +6,7 @@ import { useAiCallText } from "../hooks/useAiCallText";
 import { useAiModels } from "../hooks/useAiModels";
 import { AiPromptPanel } from "./AiPromptPanel";
 import { useUsageToast } from "./UsageToast";
+import { useErrorToast, ErrorToast } from "./ErrorToast";
 import { aiStyles } from "../styles/inline";
 import { useAiContext } from "../context/AiProvider";
 import { handleAIError } from "../utils/errorHandler";
@@ -14,6 +15,7 @@ export function AiContextButton({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId,
     const [isResultOpen, setIsResultOpen] = useState(false);
     const [analysisResult, setAnalysisResult] = useState(null);
     const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
+    const { showErrorToast, errorData, errorKey, clearError } = useErrorToast();
     // Récupérer le contexte AiProvider avec fallback sur les props
     const aiContext = useAiContext();
     const baseUrl = propBaseUrl ?? aiContext.baseUrl;
@@ -155,7 +157,7 @@ Analyse ces données et réponds de manière structurée et claire.`;
         }
         catch (error) {
             console.error("AiContextButton error:", error);
-            handleAIError(error, onToast);
+            handleAIError(error, onToast, showErrorToast);
         }
         finally {
             setIsOpen(false);
@@ -333,5 +335,5 @@ Analyse ces données et réponds de manière structurée et claire.`;
                                                 ...getThemeStyles().content,
                                             }, children: [_jsxs("span", { children: ["Co\u00FBt: $", (apiKeyId?.includes("dev")
                                                             ? 0
-                                                            : analysisResult.cost).toFixed(6)] }), _jsxs("span", { children: ["ID: ", analysisResult.requestId?.slice(-8) || "N/A"] })] }) })] })] }) }) }))] }));
+                                                            : analysisResult.cost).toFixed(6)] }), _jsxs("span", { children: ["ID: ", analysisResult.requestId?.slice(-8) || "N/A"] })] }) })] })] }) }) })), _jsx(ErrorToast, { error: errorData, onComplete: clearError }, errorKey)] }));
 }

package/dist/components/AiImageButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AiImageButton.d.ts","sourceRoot":"","sources":["../../src/components/AiImageButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAS5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAS5C,MAAM,WAAW,kBACf,SACE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,EACrC,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACvE,OAAO,CAAC,EAAE,CACR,QAAQ,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAC7C,IAAI,CAAC;IACV,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAgB,EAChB,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,OAAO,EACf,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,aAAoB,EACpB,WAAW,EACX,YAAY,EACZ,aAAa,EACb,GAAG,WAAW,EACf,EAAE,kBAAkB,2CAmYpB"}
+{"version":3,"file":"AiImageButton.d.ts","sourceRoot":"","sources":["../../src/components/AiImageButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAS5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAU5C,MAAM,WAAW,kBACf,SACE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,EACrC,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACvE,OAAO,CAAC,EAAE,CACR,QAAQ,EAAE,MAAM,EAChB,QAAQ,CAAC,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAC7C,IAAI,CAAC;IACV,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAgB,EAChB,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,OAAO,EACf,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,aAAoB,EACpB,WAAW,EACX,YAAY,EACZ,aAAa,EACb,GAAG,WAAW,EACf,EAAE,kBAAkB,2CAiZpB"}

package/dist/components/AiImageButton.js

@@ -6,6 +6,7 @@ import { useAiCallImage } from "../hooks/useAiCallImage";
 import { useAiModels } from "../hooks/useAiModels";
 import { AiPromptPanel } from "./AiPromptPanel";
 import { useUsageToast } from "./UsageToast";
+import { useErrorToast, ErrorToast } from "./ErrorToast";
 import { aiStyles } from "../styles/inline";
 import { useAiContext } from "../context/AiProvider";
 import { handleAIError } from "../utils/errorHandler";
@@ -13,6 +14,7 @@ export function AiImageButton({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, ui
     const [isOpen, setIsOpen] = useState(false);
     const [generatedImage, setGeneratedImage] = useState(null);
     const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
+    const { showErrorToast, errorData, errorKey, clearError } = useErrorToast();
     // Récupérer le contexte AiProvider avec fallback sur les props
     const aiContext = useAiContext();
     const baseUrl = propBaseUrl ?? aiContext.baseUrl;
@@ -104,6 +106,14 @@ export function AiImageButton({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, ui
                 model: selectedModel,
                 prompt: selectedPrompt,
                 size: "1024x1024", // Taille par défaut
+                storeOutputs,
+                artifactTitle,
+            });
+            console.log("[AiImageButton] Image generation result:", {
+                hasUrl: !!result.url,
+                urlLength: result.url?.length,
+                urlPreview: result.url?.substring(0, 100),
+                requestId: result.requestId,
             });
             if (result.url) {
                 // Stocker l'image générée
@@ -114,6 +124,7 @@ export function AiImageButton({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, ui
                     tokens: result.debitTokens,
                 };
                 setGeneratedImage(imageData);
+                console.log("[AiImageButton] Image data stored:", imageData);
                 onImage?.(result.url, {
                     requestId: result.requestId,
                     tokens: result.debitTokens,
@@ -133,7 +144,7 @@ export function AiImageButton({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, ui
             }
         }
         catch (error) {
-            handleAIError(error, onToast);
+            handleAIError(error, onToast, showErrorToast);
         }
         finally {
             setIsOpen(false);
@@ -242,5 +253,5 @@ export function AiImageButton({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, ui
                                         getThemeStyles().actionButton.color;
                                 }, title: "Copier l'URL", children: [_jsx(Copy, { size: 14 }), "Copier URL"] }), onImageSave && (_jsxs("button", { onClick: handleSave, className: "flex items-center gap-1 px-3 py-2 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors", title: "Sauvegarder en base", children: [_jsx(ExternalLink, { size: 14 }), "Sauvegarder"] }))] }), _jsx("div", { className: "mt-3 pt-3 text-xs", style: {
                             ...getThemeStyles().metadata,
-                        }, children: _jsx("div", { className: "flex justify-center", children: _jsxs("span", { children: ["ID: ", generatedImage.requestId.slice(-8)] }) }) })] }))] }));
+                        }, children: _jsx("div", { className: "flex justify-center", children: _jsxs("span", { children: ["ID: ", generatedImage.requestId.slice(-8)] }) }) })] })), _jsx(ErrorToast, { error: errorData, onComplete: clearError }, errorKey)] }));
 }

package/dist/components/AiPromptPanel.js

@@ -42,7 +42,9 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
         apiKey,
         baseUrl,
         category: "text", // Par défaut pour AiPromptPanel
-        autoFetch: enableModelManagement && models.length === 0 && availableModels.length === 0,
+        autoFetch: enableModelManagement &&
+            models.length === 0 &&
+            availableModels.length === 0,
     });
     // Utiliser soit les props externes soit la gestion automatique
     const effectiveAvailableModels = models.length > 0

package/dist/components/AiTextarea.d.ts

@@ -3,5 +3,5 @@ import type { BaseAiProps } from "../types";
 export interface AiTextareaProps extends Omit<BaseAiProps, "type">, Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onValue"> {
     uiMode?: "modal" | "drawer";
 }
-export declare function AiTextarea({ baseUrl, apiKeyId, uiMode, context, model, prompt, editMode, onValue, onToast, disabled, className, ...textareaProps }: AiTextareaProps): import("react/jsx-runtime").JSX.Element;
+export declare function AiTextarea({ baseUrl, apiKeyId, uiMode, context, model, prompt, editMode, enableModelManagement, onValue, onToast, disabled, className, ...textareaProps }: AiTextareaProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AiTextarea.d.ts.map

package/dist/components/AiTextarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AiTextarea.d.ts","sourceRoot":"","sources":["../../src/components/AiTextarea.tsx"],"names":[],"mappings":"AAEA,OAAc,EAIZ,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAQ5C,MAAM,WAAW,eACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAC9D,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,aAAa,EACjB,EAAE,eAAe,2CAyLjB"}
+{"version":3,"file":"AiTextarea.d.ts","sourceRoot":"","sources":["../../src/components/AiTextarea.tsx"],"names":[],"mappings":"AAEA,OAAc,EAIZ,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAQ5C,MAAM,WAAW,eACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAC9D,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,qBAAqB,EACrB,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,aAAa,EACjB,EAAE,eAAe,2CA4LjB"}

package/dist/components/AiTextarea.js

@@ -8,7 +8,7 @@ import { AiPromptPanel } from "./AiPromptPanel";
 import { UsageToast, useUsageToast } from "./UsageToast";
 import { aiStyles } from "../styles/inline";
 import { handleAIError } from "../utils/errorHandler";
-export function AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model, prompt, editMode = false, onValue, onToast, disabled, className, ...textareaProps }) {
+export function AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model, prompt, editMode = false, enableModelManagement, onValue, onToast, disabled, className, ...textareaProps }) {
     const [isOpen, setIsOpen] = useState(false);
     const [textareaValue, setTextareaValue] = useState(textareaProps.value?.toString() ||
         textareaProps.defaultValue?.toString() ||
@@ -117,5 +117,5 @@ export function AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model
                     ...(disabled || loading
                         ? { opacity: 0.5, cursor: "not-allowed" }
                         : {}),
-                }, onClick: hasConfiguration ? handleQuickGenerate : handleOpenPanel, onMouseEnter: () => setIsButtonHovered(true), onMouseLeave: () => setIsButtonHovered(false), disabled: disabled || loading, type: "button", title: hasConfiguration ? "Generate with AI" : "Setup AI", children: loading ? (_jsx("svg", { style: aiStyles.spinner, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" }) })) : (_jsx(Sparkles, { size: 16 })) }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [], sourceText: textareaValue || undefined })), Boolean(toastData) && (_jsx(UsageToast, { result: toastData, position: "bottom-right", onComplete: clearToast }, toastKey))] }));
+                }, onClick: hasConfiguration ? handleQuickGenerate : handleOpenPanel, onMouseEnter: () => setIsButtonHovered(true), onMouseLeave: () => setIsButtonHovered(false), disabled: disabled || loading, type: "button", title: hasConfiguration ? "Generate with AI" : "Setup AI", children: loading ? (_jsx("svg", { style: aiStyles.spinner, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("path", { d: "M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" }) })) : (_jsx(Sparkles, { size: 16 })) }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [], sourceText: textareaValue || undefined, baseUrl: baseUrl, apiKey: apiKeyId, enableModelManagement: enableModelManagement })), Boolean(toastData) && (_jsx(UsageToast, { result: toastData, position: "bottom-right", onComplete: clearToast }, toastKey))] }));
 }

package/dist/components/ErrorToast.d.ts

@@ -0,0 +1,18 @@
+interface ErrorToastData {
+    message: string;
+    code?: string;
+}
+interface ErrorToastProps {
+    error: ErrorToastData | null;
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    onComplete?: () => void;
+}
+export declare function ErrorToast({ error, position, onComplete, }: ErrorToastProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function useErrorToast(): {
+    showErrorToast: (error: ErrorToastData) => void;
+    errorData: ErrorToastData | null;
+    errorKey: number;
+    clearError: () => void;
+};
+export {};
+//# sourceMappingURL=ErrorToast.d.ts.map

package/dist/components/ErrorToast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorToast.d.ts","sourceRoot":"","sources":["../../src/components/ErrorToast.tsx"],"names":[],"mappings":"AAKA,UAAU,cAAc;IACtB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,eAAe;IACvB,KAAK,EAAE,cAAc,GAAG,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IACrE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAyB,EACzB,UAAU,GACX,EAAE,eAAe,kDA4IjB;AAED,wBAAgB,aAAa;4BAII,cAAc;;;;EAgB9C"}

package/dist/components/ErrorToast.js

@@ -0,0 +1,123 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { X, AlertCircle } from "lucide-react";
+export function ErrorToast({ error, position = "bottom-right", onComplete, }) {
+    const [isVisible, setIsVisible] = useState(false);
+    const [isClosing, setIsClosing] = useState(false);
+    const fadeTimeoutRef = useRef(null);
+    const autoCloseTimeoutRef = useRef(null);
+    useEffect(() => {
+        if (error) {
+            // Show toast immediately
+            queueMicrotask(() => {
+                setIsVisible(true);
+                setIsClosing(false);
+            });
+            // Auto-close after 8 seconds for errors (longer than success messages)
+            autoCloseTimeoutRef.current = window.setTimeout(() => {
+                handleClose();
+            }, 8000);
+        }
+        return () => {
+            if (fadeTimeoutRef.current) {
+                window.clearTimeout(fadeTimeoutRef.current);
+            }
+            if (autoCloseTimeoutRef.current) {
+                window.clearTimeout(autoCloseTimeoutRef.current);
+            }
+        };
+    }, [error]);
+    const handleClose = () => {
+        if (isClosing)
+            return;
+        // Clear auto-close timeout if user closes manually
+        if (autoCloseTimeoutRef.current) {
+            window.clearTimeout(autoCloseTimeoutRef.current);
+        }
+        setIsClosing(true);
+        fadeTimeoutRef.current = window.setTimeout(() => {
+            setIsVisible(false);
+            onComplete?.();
+        }, 200);
+    };
+    if (!error)
+        return null;
+    const getPositionStyles = () => {
+        const baseStyles = {
+            position: "fixed",
+            zIndex: 9999,
+            pointerEvents: "auto",
+        };
+        switch (position) {
+            case "bottom-left":
+                return { ...baseStyles, bottom: "8px", left: "8px" };
+            case "top-right":
+                return { ...baseStyles, top: "8px", right: "8px" };
+            case "top-left":
+                return { ...baseStyles, top: "8px", left: "8px" };
+            default:
+                return { ...baseStyles, bottom: "8px", right: "8px" };
+        }
+    };
+    return (_jsxs("div", { style: {
+            ...getPositionStyles(),
+            opacity: isVisible && !isClosing ? 1 : 0,
+            transform: `translateY(${isVisible && !isClosing ? "0" : "8px"})`,
+            transition: "opacity 200ms ease, transform 200ms ease",
+            padding: "12px 16px",
+            borderRadius: "8px",
+            background: "rgba(239, 68, 68, 0.12)",
+            border: "1px solid rgba(239, 68, 68, 0.3)",
+            color: "#dc2626",
+            fontSize: "13px",
+            fontWeight: 500,
+            display: "flex",
+            alignItems: "flex-start",
+            gap: "10px",
+            boxShadow: "0 4px 12px -2px rgba(239, 68, 68, 0.2)",
+            backdropFilter: "blur(8px)",
+            WebkitBackdropFilter: "blur(8px)",
+            maxWidth: "400px",
+            minWidth: "280px",
+        }, children: [_jsx(AlertCircle, { size: 16, style: { marginTop: "2px", flexShrink: 0 } }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsxs("div", { style: { fontWeight: 600, marginBottom: "2px" }, children: ["Erreur", error.code && (_jsxs("span", { style: {
+                                    marginLeft: "8px",
+                                    fontSize: "10px",
+                                    opacity: 0.7,
+                                    fontFamily: "monospace",
+                                }, children: ["[", error.code, "]"] }))] }), _jsx("div", { style: { fontSize: "12px", opacity: 0.9, wordBreak: "break-word" }, children: error.message })] }), _jsx("button", { onClick: handleClose, style: {
+                    background: "transparent",
+                    border: "none",
+                    cursor: "pointer",
+                    padding: "4px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "4px",
+                    transition: "background-color 150ms ease",
+                    color: "inherit",
+                    flexShrink: 0,
+                }, onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = "rgba(239, 68, 68, 0.2)";
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                }, title: "Fermer", children: _jsx(X, { size: 14 }) })] }));
+}
+export function useErrorToast() {
+    const [errorData, setErrorData] = useState(null);
+    const [errorKey, setErrorKey] = useState(0);
+    const showErrorToast = (error) => {
+        // Replace any existing error toast with new one
+        setErrorKey((prev) => prev + 1);
+        setErrorData(error);
+    };
+    const clearError = () => {
+        setErrorData(null);
+    };
+    return {
+        showErrorToast,
+        errorData,
+        errorKey,
+        clearError,
+    };
+}

package/dist/hooks/useModelManagement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useModelManagement.d.ts","sourceRoot":"","sources":["../../src/hooks/useModelManagement.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,kBAAkB,EACxB,MAAM,0BAA0B,CAAC;AAQlC,MAAM,WAAW,OAAO;IACtB,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;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;CACjD;AAED,MAAM,WAAW,wBAAwB;IAEvC,eAAe,EAAE,OAAO,EAAE,CAAC;IAC3B,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAGrB,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpE,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAGvC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IAC5C,eAAe,EAAE,MAAM,OAAO,EAAE,CAAC;IACjC,iBAAiB,EAAE,MAAM,OAAO,EAAE,CAAC;CACpC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,GAAE,yBAA8B,GACtC,wBAAwB,CAyN1B"}
+{"version":3,"file":"useModelManagement.d.ts","sourceRoot":"","sources":["../../src/hooks/useModelManagement.ts"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,kBAAkB,EACxB,MAAM,0BAA0B,CAAC;AAQlC,MAAM,WAAW,OAAO;IACtB,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;AAED,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;CACjD;AAED,MAAM,WAAW,wBAAwB;IAEvC,eAAe,EAAE,OAAO,EAAE,CAAC;IAC3B,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAGrB,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpE,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,iBAAiB,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAGvC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAC;IAC5C,eAAe,EAAE,MAAM,OAAO,EAAE,CAAC;IACjC,iBAAiB,EAAE,MAAM,OAAO,EAAE,CAAC;CACpC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,GAAE,yBAA8B,GACtC,wBAAwB,CAsO1B"}

package/dist/hooks/useModelManagement.js

@@ -152,7 +152,9 @@ export function useModelManagement(options = {}) {
             baseUrl: effectiveOptions.baseUrl || "none",
         });
         // Auto-fetch si autoFetch est activé ET qu'on a soit une apiKey soit un proxy externe ET API disponible
-        if (autoFetch && !apiUnavailable && (effectiveOptions.apiKey || isExternalProxy)) {
+        if (autoFetch &&
+            !apiUnavailable &&
+            (effectiveOptions.apiKey || isExternalProxy)) {
             console.log("[useModelManagement] Starting auto-fetch...");
             Promise.all([refreshModels(), refreshUserModels()]);
         }

package/dist/index.d.ts

@@ -17,6 +17,8 @@ export * from "./components/AiImageButton";
 export * from "./components/AiContextButton";
 export * from "./components/AiSettingsButton";
 export * from "./components/AiStatusButton";
+export * from "./components/ErrorToast";
+export * from "./components/UsageToast";
 export * from "./utils/modelManagement";
 export * from "./utils/cache";
 export * from "./examples/AiImageGenerator";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,SAAS,CAAC;AAGxB,cAAc,sBAAsB,CAAC;AAGrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAG3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAG5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAG9B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,SAAS,CAAC;AAGxB,cAAc,sBAAsB,CAAC;AAGrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,4BAA4B,CAAC;AAG3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,6BAA6B,CAAC;AAG5C,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAG9B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,+BAA+B,CAAC;AAC9C,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC"}

package/dist/index.js

@@ -21,6 +21,9 @@ export * from "./components/AiImageButton";
 export * from "./components/AiContextButton";
 export * from "./components/AiSettingsButton";
 export * from "./components/AiStatusButton";
+// Toast system
+export * from "./components/ErrorToast";
+export * from "./components/UsageToast";
 // Utils
 export * from "./utils/modelManagement";
 export * from "./utils/cache";

package/dist/types.d.ts

@@ -12,6 +12,7 @@ export interface BaseAiProps {
     model?: string | null;
     prompt?: string | null;
     editMode?: boolean;
+    enableModelManagement?: boolean;
     onValue?: (value: string) => void;
     onToast?: (toast: ToastType) => void;
     disabled?: boolean;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,SAAS,GAAG,OAAO,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AACF,MAAM,MAAM,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExC,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG;IACtB,IAAI,EAAE,SAAS,GAAG,OAAO,CAAC;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AACF,MAAM,MAAM,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;AAExC,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/dist/utils/errorHandler.d.ts

@@ -19,6 +19,12 @@ export interface ErrorToastCallback {
 }
 /**
  * Gestionnaire d'erreur uniforme pour tous les composants AI
+ * @param error L'erreur à gérer
+ * @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: any, onToast?: ErrorToastCallback): void;
+export declare function handleAIError(error: any, onToast?: ErrorToastCallback, showInternalToast?: (error: {
+    message: string;
+    code?: string;
+}) => void): void;
 //# sourceMappingURL=errorHandler.d.ts.map

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,GAAG,GAAG,WAAW,CA2CpD;AA+ED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,CAAC,KAAK,EAAE;QACN,IAAI,EAAE,OAAO,CAAC;QACd,OAAO,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,GAAG,IAAI,CAAC;CACV;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAa5E"}
+{"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/dist/utils/errorHandler.js

@@ -107,16 +107,29 @@ function getUserFriendlyMessage(code, originalMessage) {
 }
 /**
  * Gestionnaire d'erreur uniforme pour tous les composants AI
+ * @param error L'erreur à gérer
+ * @param onToast Callback externe optionnelle fournie par le parent
+ * @param showInternalToast Callback interne optionnelle pour afficher un toast dans le composant
  */
-export function handleAIError(error, onToast) {
+export function handleAIError(error, onToast, showInternalToast) {
     const parsedError = parseAIError(error);
     console.error("[AI Error]", {
         original: error,
         parsed: parsedError,
     });
-    onToast?.({
-        type: "error",
-        message: parsedError.message,
-        code: parsedError.code,
-    });
+    // Callback externe (prioritaire)
+    if (onToast) {
+        onToast({
+            type: "error",
+            message: parsedError.message,
+            code: parsedError.code,
+        });
+    }
+    // Callback interne (fallback si pas de callback externe)
+    else if (showInternalToast) {
+        showInternalToast({
+            message: parsedError.message,
+            code: parsedError.code,
+        });
+    }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/ai-ui-react",
-  "version": "1.0.29",
+  "version": "1.0.31",
   "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.19"
+    "@lastbrain/ai-ui-core": "1.0.20"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",

package/src/components/AiContextButton.tsx

@@ -7,6 +7,7 @@ import { useAiCallText } from "../hooks/useAiCallText";
 import { useAiModels } from "../hooks/useAiModels";
 import { AiPromptPanel } from "./AiPromptPanel";
 import { useUsageToast } from "./UsageToast";
+import { useErrorToast, ErrorToast } from "./ErrorToast";
 import { aiStyles } from "../styles/inline";
 import { useAiContext } from "../context/AiProvider";
 import { handleAIError } from "../utils/errorHandler";
@@ -60,6 +61,7 @@ export function AiContextButton({
     cost: number;
   } | null>(null);
   const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
+  const { showErrorToast, errorData, errorKey, clearError } = useErrorToast();
 
   // Récupérer le contexte AiProvider avec fallback sur les props
   const aiContext = useAiContext();
@@ -223,7 +225,7 @@ Analyse ces données et réponds de manière structurée et claire.`;
       }
     } catch (error) {
       console.error("AiContextButton error:", error);
-      handleAIError(error, onToast);
+      handleAIError(error, onToast, showErrorToast);
     } finally {
       setIsOpen(false);
     }
@@ -548,6 +550,9 @@ Analyse ces données et réponds de manière structurée et claire.`;
           </div>
         </div>
       )}
+
+      {/* Error Toast */}
+      <ErrorToast key={errorKey} error={errorData} onComplete={clearError} />
     </>
   );
 }

package/src/components/AiImageButton.tsx

@@ -14,6 +14,7 @@ import { useAiCallImage } from "../hooks/useAiCallImage";
 import { useAiModels } from "../hooks/useAiModels";
 import { AiPromptPanel } from "./AiPromptPanel";
 import { useUsageToast } from "./UsageToast";
+import { useErrorToast, ErrorToast } from "./ErrorToast";
 import { aiStyles } from "../styles/inline";
 import { useAiContext } from "../context/AiProvider";
 import { handleAIError } from "../utils/errorHandler";
@@ -62,6 +63,7 @@ export function AiImageButton({
     tokens: number;
   } | null>(null);
   const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
+  const { showErrorToast, errorData, errorKey, clearError } = useErrorToast();
 
   // Récupérer le contexte AiProvider avec fallback sur les props
   const aiContext = useAiContext();
@@ -163,6 +165,15 @@ export function AiImageButton({
         model: selectedModel,
         prompt: selectedPrompt,
         size: "1024x1024", // Taille par défaut
+        storeOutputs,
+        artifactTitle,
+      });
+
+      console.log("[AiImageButton] Image generation result:", {
+        hasUrl: !!result.url,
+        urlLength: result.url?.length,
+        urlPreview: result.url?.substring(0, 100),
+        requestId: result.requestId,
       });
 
       if (result.url) {
@@ -174,6 +185,7 @@ export function AiImageButton({
           tokens: result.debitTokens,
         };
         setGeneratedImage(imageData);
+        console.log("[AiImageButton] Image data stored:", imageData);
 
         onImage?.(result.url, {
           requestId: result.requestId,
@@ -194,7 +206,7 @@ export function AiImageButton({
         });
       }
     } catch (error) {
-      handleAIError(error, onToast);
+      handleAIError(error, onToast, showErrorToast);
     } finally {
       setIsOpen(false);
     }
@@ -438,6 +450,9 @@ export function AiImageButton({
           </div>
         </div>
       )}
+
+      {/* Error Toast */}
+      <ErrorToast key={errorKey} error={errorData} onComplete={clearError} />
     </div>
   );
 }

package/src/components/AiPromptPanel.tsx

@@ -57,7 +57,7 @@ export interface AiPromptPanelRenderProps {
 
 export function AiPromptPanel(props: AiPromptPanelProps) {
   const { apiKey, baseUrl } = props;
-  
+
   // Si apiKey et baseUrl sont fournis, wrapper avec AiProvider
   if (apiKey || baseUrl) {
     return (
@@ -66,7 +66,7 @@ export function AiPromptPanel(props: AiPromptPanelProps) {
       </AiProvider>
     );
   }
-  
+
   // Sinon, utiliser le contexte existant
   return <AiPromptPanelInternal {...props} />;
 }
@@ -119,24 +119,29 @@ function AiPromptPanelInternal({
     apiKey,
     baseUrl,
     category: "text", // Par défaut pour AiPromptPanel
-    autoFetch: enableModelManagement && models.length === 0 && availableModels.length === 0,
+    autoFetch:
+      enableModelManagement &&
+      models.length === 0 &&
+      availableModels.length === 0,
   });
 
   // Utiliser soit les props externes soit la gestion automatique
   const effectiveAvailableModels =
     models.length > 0
-      ? models.map((m): AIModel => ({
-          id: m.id,
-          name: m.name,
-          category: m.type === "image" ? "image" : "text",
-          provider: m.provider,
-          description: `${m.provider} model`,
-          isPro: false,
-          isActive: true,
-        }))
+      ? models.map(
+          (m): AIModel => ({
+            id: m.id,
+            name: m.name,
+            category: m.type === "image" ? "image" : "text",
+            provider: m.provider,
+            description: `${m.provider} model`,
+            isPro: false,
+            isActive: true,
+          })
+        )
       : availableModels.length > 0
-      ? availableModels
-      : autoModelManagement.availableModels;
+        ? availableModels
+        : autoModelManagement.availableModels;
   const effectiveUserModels =
     userModels.length > 0 ? userModels : autoModelManagement.userModels;
   const effectiveToggleModel = onModelToggle || autoModelManagement.toggleModel;

package/src/components/AiTextarea.tsx

@@ -30,6 +30,7 @@ export function AiTextarea({
   model,
   prompt,
   editMode = false,
+  enableModelManagement,
   onValue,
   onToast,
   disabled,
@@ -208,6 +209,9 @@ export function AiTextarea({
           uiMode={uiMode}
           models={models || []}
           sourceText={textareaValue || undefined}
+          baseUrl={baseUrl}
+          apiKey={apiKeyId}
+          enableModelManagement={enableModelManagement}
         />
       )}
       {Boolean(toastData) && (

package/src/components/ErrorToast.tsx

@@ -0,0 +1,183 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { X, AlertCircle } from "lucide-react";
+
+interface ErrorToastData {
+  message: string;
+  code?: string;
+}
+
+interface ErrorToastProps {
+  error: ErrorToastData | null;
+  position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+  onComplete?: () => void;
+}
+
+export function ErrorToast({
+  error,
+  position = "bottom-right",
+  onComplete,
+}: ErrorToastProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+  const fadeTimeoutRef = useRef<number | null>(null);
+  const autoCloseTimeoutRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (error) {
+      // Show toast immediately
+      queueMicrotask(() => {
+        setIsVisible(true);
+        setIsClosing(false);
+      });
+
+      // Auto-close after 8 seconds for errors (longer than success messages)
+      autoCloseTimeoutRef.current = window.setTimeout(() => {
+        handleClose();
+      }, 8000);
+    }
+
+    return () => {
+      if (fadeTimeoutRef.current) {
+        window.clearTimeout(fadeTimeoutRef.current);
+      }
+      if (autoCloseTimeoutRef.current) {
+        window.clearTimeout(autoCloseTimeoutRef.current);
+      }
+    };
+  }, [error]);
+
+  const handleClose = () => {
+    if (isClosing) return;
+
+    // Clear auto-close timeout if user closes manually
+    if (autoCloseTimeoutRef.current) {
+      window.clearTimeout(autoCloseTimeoutRef.current);
+    }
+
+    setIsClosing(true);
+    fadeTimeoutRef.current = window.setTimeout(() => {
+      setIsVisible(false);
+      onComplete?.();
+    }, 200);
+  };
+
+  if (!error) return null;
+
+  const getPositionStyles = () => {
+    const baseStyles = {
+      position: "fixed" as const,
+      zIndex: 9999,
+      pointerEvents: "auto" as const,
+    };
+
+    switch (position) {
+      case "bottom-left":
+        return { ...baseStyles, bottom: "8px", left: "8px" };
+      case "top-right":
+        return { ...baseStyles, top: "8px", right: "8px" };
+      case "top-left":
+        return { ...baseStyles, top: "8px", left: "8px" };
+      default:
+        return { ...baseStyles, bottom: "8px", right: "8px" };
+    }
+  };
+
+  return (
+    <div
+      style={{
+        ...getPositionStyles(),
+        opacity: isVisible && !isClosing ? 1 : 0,
+        transform: `translateY(${isVisible && !isClosing ? "0" : "8px"})`,
+        transition: "opacity 200ms ease, transform 200ms ease",
+        padding: "12px 16px",
+        borderRadius: "8px",
+        background: "rgba(239, 68, 68, 0.12)",
+        border: "1px solid rgba(239, 68, 68, 0.3)",
+        color: "#dc2626",
+        fontSize: "13px",
+        fontWeight: 500,
+        display: "flex",
+        alignItems: "flex-start",
+        gap: "10px",
+        boxShadow: "0 4px 12px -2px rgba(239, 68, 68, 0.2)",
+        backdropFilter: "blur(8px)",
+        WebkitBackdropFilter: "blur(8px)",
+        maxWidth: "400px",
+        minWidth: "280px",
+      }}
+    >
+      <AlertCircle size={16} style={{ marginTop: "2px", flexShrink: 0 }} />
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ fontWeight: 600, marginBottom: "2px" }}>
+          Erreur
+          {error.code && (
+            <span
+              style={{
+                marginLeft: "8px",
+                fontSize: "10px",
+                opacity: 0.7,
+                fontFamily: "monospace",
+              }}
+            >
+              [{error.code}]
+            </span>
+          )}
+        </div>
+        <div
+          style={{ fontSize: "12px", opacity: 0.9, wordBreak: "break-word" }}
+        >
+          {error.message}
+        </div>
+      </div>
+      <button
+        onClick={handleClose}
+        style={{
+          background: "transparent",
+          border: "none",
+          cursor: "pointer",
+          padding: "4px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: "4px",
+          transition: "background-color 150ms ease",
+          color: "inherit",
+          flexShrink: 0,
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.backgroundColor = "rgba(239, 68, 68, 0.2)";
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.backgroundColor = "transparent";
+        }}
+        title="Fermer"
+      >
+        <X size={14} />
+      </button>
+    </div>
+  );
+}
+
+export function useErrorToast() {
+  const [errorData, setErrorData] = useState<ErrorToastData | null>(null);
+  const [errorKey, setErrorKey] = useState(0);
+
+  const showErrorToast = (error: ErrorToastData) => {
+    // Replace any existing error toast with new one
+    setErrorKey((prev) => prev + 1);
+    setErrorData(error);
+  };
+
+  const clearError = () => {
+    setErrorData(null);
+  };
+
+  return {
+    showErrorToast,
+    errorData,
+    errorKey,
+    clearError,
+  };
+}

package/src/hooks/useModelManagement.ts

@@ -63,10 +63,13 @@ export function useModelManagement(
   const [apiUnavailable, setApiUnavailable] = useState(false);
 
   // Utiliser baseUrl et apiKey du contexte avec memoization
-  const effectiveOptions = useMemo(() => ({
-    baseUrl: options.baseUrl || baseUrl,
-    apiKey: options.apiKey || apiKeyId,
-  }), [options.baseUrl, options.apiKey, baseUrl, apiKeyId]);
+  const effectiveOptions = useMemo(
+    () => ({
+      baseUrl: options.baseUrl || baseUrl,
+      apiKey: options.apiKey || apiKeyId,
+    }),
+    [options.baseUrl, options.apiKey, baseUrl, apiKeyId]
+  );
 
   const refreshModels = useCallback(async () => {
     try {
@@ -136,7 +139,9 @@ export function useModelManagement(
   const refreshUserModels = useCallback(async () => {
     // Si l'API est marquée comme indisponible, ne pas faire l'appel
     if (apiUnavailable) {
-      console.log("[useModelManagement] Skipping user models fetch - API marked as unavailable");
+      console.log(
+        "[useModelManagement] Skipping user models fetch - API marked as unavailable"
+      );
       return;
     }
 
@@ -166,7 +171,9 @@ export function useModelManagement(
       if (errorMessage.includes("404") || errorMessage.includes("Not Found")) {
         setUserModels([]);
         setApiUnavailable(true);
-        console.warn("[useModelManagement] User models API not available (404), disabling further requests");
+        console.warn(
+          "[useModelManagement] User models API not available (404), disabling further requests"
+        );
       }
     } finally {
       setLoading(false);
@@ -238,7 +245,11 @@ export function useModelManagement(
     });
 
     // Auto-fetch si autoFetch est activé ET qu'on a soit une apiKey soit un proxy externe ET API disponible
-    if (autoFetch && !apiUnavailable && (effectiveOptions.apiKey || isExternalProxy)) {
+    if (
+      autoFetch &&
+      !apiUnavailable &&
+      (effectiveOptions.apiKey || isExternalProxy)
+    ) {
       console.log("[useModelManagement] Starting auto-fetch...");
       Promise.all([refreshModels(), refreshUserModels()]);
     } else if (autoFetch && !effectiveOptions.apiKey && !isExternalProxy) {
@@ -246,7 +257,9 @@ export function useModelManagement(
         "[useModelManagement] autoFetch is enabled but no apiKey or baseUrl provided. Skipping automatic fetch."
       );
     } else if (autoFetch && apiUnavailable) {
-      console.log("[useModelManagement] autoFetch skipped - API marked as unavailable");
+      console.log(
+        "[useModelManagement] autoFetch skipped - API marked as unavailable"
+      );
     }
   }, [
     autoFetch,

package/src/index.ts

@@ -25,6 +25,10 @@ export * from "./components/AiContextButton";
 export * from "./components/AiSettingsButton";
 export * from "./components/AiStatusButton";
 
+// Toast system
+export * from "./components/ErrorToast";
+export * from "./components/UsageToast";
+
 // Utils
 export * from "./utils/modelManagement";
 export * from "./utils/cache";

package/src/types.ts

@@ -13,6 +13,7 @@ export interface BaseAiProps {
   model?: string | null;
   prompt?: string | null;
   editMode?: boolean;
+  enableModelManagement?: boolean;
   onValue?: (value: string) => void;
   onToast?: (toast: ToastType) => void;
   disabled?: boolean;

package/src/utils/errorHandler.ts

@@ -27,7 +27,10 @@ export function parseAIError(error: any): ParsedError {
       const errorData = JSON.parse(error.message);
       if (errorData.error?.code) {
         return {
-          message: getUserFriendlyMessage(errorData.error.code, errorData.error.message),
+          message: getUserFriendlyMessage(
+            errorData.error.code,
+            errorData.error.message
+          ),
           code: errorData.error.code,
           isUserFriendly: true,
         };
@@ -62,30 +65,40 @@ export function parseAIError(error: any): ParsedError {
 function detectErrorCode(message: string): string | null {
   const lowercaseMessage = message.toLowerCase();
 
-  if (lowercaseMessage.includes("insufficient_tokens") || 
-      lowercaseMessage.includes("insufficient balance") || 
-      lowercaseMessage.includes("not enough tokens")) {
+  if (
+    lowercaseMessage.includes("insufficient_tokens") ||
+    lowercaseMessage.includes("insufficient balance") ||
+    lowercaseMessage.includes("not enough tokens")
+  ) {
     return ErrorCode.INSUFFICIENT_TOKENS;
   }
 
-  if (lowercaseMessage.includes("unauthorized") || 
-      lowercaseMessage.includes("invalid api key") || 
-      lowercaseMessage.includes("authentication failed")) {
+  if (
+    lowercaseMessage.includes("unauthorized") ||
+    lowercaseMessage.includes("invalid api key") ||
+    lowercaseMessage.includes("authentication failed")
+  ) {
     return ErrorCode.UNAUTHORIZED;
   }
 
-  if (lowercaseMessage.includes("model disabled") || 
-      lowercaseMessage.includes("model not available")) {
+  if (
+    lowercaseMessage.includes("model disabled") ||
+    lowercaseMessage.includes("model not available")
+  ) {
     return ErrorCode.MODEL_DISABLED;
   }
 
-  if (lowercaseMessage.includes("timeout") || 
-      lowercaseMessage.includes("timed out")) {
+  if (
+    lowercaseMessage.includes("timeout") ||
+    lowercaseMessage.includes("timed out")
+  ) {
     return ErrorCode.TIMEOUT;
   }
 
-  if (lowercaseMessage.includes("network error") || 
-      lowercaseMessage.includes("fetch failed")) {
+  if (
+    lowercaseMessage.includes("network error") ||
+    lowercaseMessage.includes("fetch failed")
+  ) {
     return ErrorCode.NETWORK_ERROR;
   }
 
@@ -99,31 +112,31 @@ function getUserFriendlyMessage(code: string, originalMessage: string): string {
   switch (code) {
     case ErrorCode.INSUFFICIENT_TOKENS:
       return "Solde insuffisant. Veuillez recharger votre compte pour continuer.";
-    
+
     case ErrorCode.UNAUTHORIZED:
       return "Clé API invalide ou expirée. Vérifiez votre configuration.";
-    
+
     case ErrorCode.MODEL_DISABLED:
       return "Ce modèle n'est pas disponible actuellement.";
-    
+
     case ErrorCode.TIMEOUT:
       return "La requête a pris trop de temps. Essayez à nouveau.";
-    
+
     case ErrorCode.NETWORK_ERROR:
       return "Erreur de connexion. Vérifiez votre connexion internet.";
-    
+
     case ErrorCode.PROVIDER_DOWN:
       return "Service temporairement indisponible. Essayez dans quelques instants.";
-    
+
     case ErrorCode.BAD_REQUEST:
       return "Paramètres de requête invalides. Vérifiez votre configuration.";
-    
+
     case ErrorCode.NO_API_KEY:
       return "Clé API manquante. Vérifiez votre configuration.";
-    
+
     case ErrorCode.PRICING_UNAVAILABLE:
       return "Tarification indisponible pour ce modèle.";
-    
+
     default:
       // Pour les erreurs inconnues, essayer d'extraire un message utile
       if (originalMessage && !originalMessage.startsWith("HTTP ")) {
@@ -137,27 +150,40 @@ function getUserFriendlyMessage(code: string, originalMessage: string): string {
  * Interface pour la callback de gestion d'erreur uniforme
  */
 export interface ErrorToastCallback {
-  (toast: {
-    type: "error";
-    message: string;
-    code?: string;
-  }): void;
+  (toast: { type: "error"; message: string; code?: string }): void;
 }
 
 /**
  * Gestionnaire d'erreur uniforme pour tous les composants AI
+ * @param error L'erreur à gérer
+ * @param onToast Callback externe optionnelle fournie par le parent
+ * @param showInternalToast Callback interne optionnelle pour afficher un toast dans le composant
  */
-export function handleAIError(error: any, onToast?: ErrorToastCallback): void {
+export function handleAIError(
+  error: any,
+  onToast?: ErrorToastCallback,
+  showInternalToast?: (error: { message: string; code?: string }) => void
+): void {
   const parsedError = parseAIError(error);
-  
+
   console.error("[AI Error]", {
     original: error,
     parsed: parsedError,
   });
 
-  onToast?.({
-    type: "error",
-    message: parsedError.message,
-    code: parsedError.code,
-  });
-}
+  // Callback externe (prioritaire)
+  if (onToast) {
+    onToast({
+      type: "error",
+      message: parsedError.message,
+      code: parsedError.code,
+    });
+  }
+  // Callback interne (fallback si pas de callback externe)
+  else if (showInternalToast) {
+    showInternalToast({
+      message: parsedError.message,
+      code: parsedError.code,
+    });
+  }
+}