@lastbrain/ai-ui-react 1.0.10 → 1.0.11

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;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAK5C,MAAM,WAAW,kBACf,SACE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,EACrC,oBAAoB,CAAC,iBAAiB,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,kBAAkB,2CAyDpB"}
+{"version":3,"file":"AiImageButton.d.ts","sourceRoot":"","sources":["../../src/components/AiImageButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM5C,MAAM,WAAW,kBACf,SACE,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,MAAM,CAAC,EACrC,oBAAoB,CAAC,iBAAiB,CAAC;IACzC,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,kBAAkB,2CAmEpB"}

package/dist/components/AiImageButton.js

@@ -1,11 +1,13 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { useAiCallImage } from "../hooks/useAiCallImage";
 import { useAiModels } from "../hooks/useAiModels";
 import { AiPromptPanel } from "./AiPromptPanel";
+import { UsageToast, useUsageToast } from "./UsageToast";
 export function AiImageButton({ baseUrl, apiKeyId, uiMode = "modal", context, model, prompt, onImage, onToast, disabled, className, children, ...buttonProps }) {
     const [isOpen, setIsOpen] = useState(false);
+    const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
     const { models } = useAiModels({ baseUrl, apiKeyId });
     const { generateImage, loading } = useAiCallImage({ baseUrl, apiKeyId });
     const handleOpenPanel = () => {
@@ -23,6 +25,7 @@ export function AiImageButton({ baseUrl, apiKeyId, uiMode = "modal", context, mo
             if (result.url) {
                 onImage?.(result.url);
                 onToast?.({ type: "success", message: "Image generated successfully" });
+                showUsageToast(result);
             }
         }
         catch (error) {
@@ -32,5 +35,5 @@ export function AiImageButton({ baseUrl, apiKeyId, uiMode = "modal", context, mo
             setIsOpen(false);
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx("button", { ...buttonProps, onClick: handleOpenPanel, disabled: disabled || loading, className: className, "data-ai-image-button": true, children: loading ? "Generating..." : children || "Generate Image" }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models?.filter((m) => m.type === "image") || [] }))] }));
+    return (_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { ...buttonProps, onClick: handleOpenPanel, disabled: disabled || loading, className: className, "data-ai-image-button": true, children: loading ? "Generating..." : children || "Generate Image" }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models?.filter((m) => m.type === "image") || [] })), Boolean(toastData) && (_jsx(UsageToast, { result: toastData, position: "bottom-right", onComplete: clearToast }, toastKey))] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"AiInput.d.ts","sourceRoot":"","sources":["../../src/components/AiInput.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAoB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM5C,MAAM,WAAW,YACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IACxD,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,UAAU,EACd,EAAE,YAAY,2CAmKd"}
+{"version":3,"file":"AiInput.d.ts","sourceRoot":"","sources":["../../src/components/AiInput.tsx"],"names":[],"mappings":"AAEA,OAAc,EAAoB,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAO5C,MAAM,WAAW,YACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,SAAS,CAAC;IACxD,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,UAAU,EACd,EAAE,YAAY,2CAsKd"}

package/dist/components/AiInput.js

@@ -1,9 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef } from "react";
+import { Sparkles } from "lucide-react";
 import { useAiCallText } from "../hooks/useAiCallText";
 import { useAiModels } from "../hooks/useAiModels";
 import { AiPromptPanel } from "./AiPromptPanel";
+import { UsageToast, useUsageToast } from "./UsageToast";
 import { aiStyles } from "../styles/inline";
 export function AiInput({ baseUrl, apiKeyId, uiMode = "modal", context, model, prompt, editMode = false, onValue, onToast, disabled, className, ...inputProps }) {
     const [isOpen, setIsOpen] = useState(false);
@@ -11,6 +13,7 @@ export function AiInput({ baseUrl, apiKeyId, uiMode = "modal", context, model, p
     const [isFocused, setIsFocused] = useState(false);
     const [isButtonHovered, setIsButtonHovered] = useState(false);
     const inputRef = useRef(null);
+    const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
     const { models } = useAiModels({ baseUrl, apiKeyId });
     const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
     const hasConfiguration = Boolean(model && prompt);
@@ -22,11 +25,16 @@ export function AiInput({ baseUrl, apiKeyId, uiMode = "modal", context, model, p
     };
     const handleSubmit = async (selectedModel, selectedPrompt, promptId) => {
         try {
+            const resolvedContext = inputValue || context || undefined;
+            const hasContext = Boolean(resolvedContext && String(resolvedContext).trim());
+            const promptWithContext = hasContext
+                ? `${selectedPrompt}\n\nTexte:\n${String(resolvedContext)}`
+                : selectedPrompt;
             const result = await generateText({
                 model: selectedModel,
-                prompt: selectedPrompt,
-                context: inputValue || context || undefined,
-                actionType: "autocomplete",
+                prompt: promptWithContext,
+                context: resolvedContext,
+                actionType: hasContext ? "generate-text" : "autocomplete",
             });
             if (result.text) {
                 setInputValue(result.text);
@@ -48,11 +56,16 @@ export function AiInput({ baseUrl, apiKeyId, uiMode = "modal", context, model, p
         if (!model || !prompt)
             return;
         try {
+            const resolvedContext = inputValue || context || undefined;
+            const hasContext = Boolean(resolvedContext && String(resolvedContext).trim());
+            const promptWithContext = hasContext
+                ? `${prompt}\n\nTexte:\n${String(resolvedContext)}`
+                : prompt;
             const result = await generateText({
                 model,
-                prompt,
-                context: inputValue || context || undefined,
-                actionType: "autocomplete",
+                prompt: promptWithContext,
+                context: resolvedContext,
+                actionType: hasContext ? "generate-text" : "autocomplete",
             });
             if (result.text) {
                 setInputValue(result.text);
@@ -87,5 +100,5 @@ export function AiInput({ baseUrl, apiKeyId, uiMode = "modal", context, model, p
                     ...(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" }) })) : hasConfiguration ? (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 5v14M5 12h14" }) })) : (_jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: _jsx("path", { d: "M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" }) })) }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [], sourceText: inputValue || undefined }))] }));
+                }, 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: inputValue || undefined })), Boolean(toastData) && (_jsx(UsageToast, { result: toastData, position: "bottom-right", onComplete: clearToast }, toastKey))] }));
 }

package/dist/components/AiPromptPanel.d.ts

@@ -20,5 +20,5 @@ export interface AiPromptPanelRenderProps {
     handleSubmit: () => void;
     handleClose: () => void;
 }
-export declare function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode, models, sourceText, children, }: AiPromptPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode: _uiMode, models, sourceText, children, }: AiPromptPanelProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=AiPromptPanel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AiPromptPanel.d.ts","sourceRoot":"","sources":["../../src/components/AiPromptPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAIvC,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;CAC3D;AAED,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,MAAW,EACX,UAAU,EACV,QAAQ,GACT,EAAE,kBAAkB,kDA0VpB"}
+{"version":3,"file":"AiPromptPanel.d.ts","sourceRoot":"","sources":["../../src/components/AiPromptPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQvC,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACrE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;CAC3D;AAED,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE,QAAQ,EAAE,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,OAAO,EACP,QAAQ,EACR,MAAM,EAAE,OAAiB,EACzB,MAAW,EACX,UAAU,EACV,QAAQ,GACT,EAAE,kBAAkB,kDA0sBpB"}

package/dist/components/AiPromptPanel.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef, useLayoutEffect, } from "react";
+import { BookOpen, Search, Sparkles, Star, Tag } from "lucide-react";
 import { aiStyles } from "../styles/inline";
-import { usePrompts } from "../hooks/usePrompts";
-export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", models = [], sourceText, children, }) {
+import { usePrompts, } from "../hooks/usePrompts";
+export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode: _uiMode = "modal", models = [], sourceText, children, }) {
     const [selectedModel, setSelectedModel] = useState("");
     const [prompt, setPrompt] = useState("");
     const [promptId, setPromptId] = useState(undefined);
@@ -13,37 +14,63 @@ export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", mod
     const [promptFocused, setPromptFocused] = useState(false);
     const [modelFocused, setModelFocused] = useState(false);
     const [showPromptLibrary, setShowPromptLibrary] = useState(false);
-    const { prompts, loading: promptsLoading, fetchPrompts, incrementStat } = usePrompts();
-    // Set initial model when models change
-    useEffect(() => {
-        if (models.length > 0 && !selectedModel) {
-            setSelectedModel(models[0].id);
-        }
-    }, [models, selectedModel]);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [selectedTag, setSelectedTag] = useState("all");
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [isClosing, setIsClosing] = useState(false);
+    const promptRef = useRef(null);
+    const closeTimeoutRef = useRef(null);
+    const { prompts, loading: promptsLoading, fetchPrompts, incrementStat, } = usePrompts();
     // Fetch prompts when modal opens
     useEffect(() => {
         if (isOpen && models.length > 0) {
-            const modelType = models.find((m) => m.id === selectedModel)?.type;
+            const activeModelId = selectedModel || models[0]?.id;
+            const modelType = models.find((m) => m.id === activeModelId)?.type;
             fetchPrompts({
                 type: modelType === "image" ? "image" : "text",
             });
         }
     }, [isOpen, selectedModel, models, fetchPrompts]);
-    if (!isOpen)
-        return null;
-    const handleSubmit = () => {
-        if (!selectedModel || !prompt.trim())
+    const handleSubmit = async () => {
+        const activeModelId = selectedModel || models[0]?.id;
+        if (!activeModelId || !prompt.trim())
             return;
-        onSubmit(selectedModel, prompt, promptId);
-        setPrompt("");
-        setPromptId(undefined);
+        setIsGenerating(true);
+        try {
+            await Promise.resolve(onSubmit(activeModelId, prompt, promptId));
+            setPrompt("");
+            setPromptId(undefined);
+        }
+        finally {
+            setIsGenerating(false);
+            handleClose();
+        }
     };
-    const handleClose = () => {
+    const finalizeClose = () => {
         onClose();
         setPrompt("");
         setPromptId(undefined);
         setShowPromptLibrary(false);
+        setSearchQuery("");
+        setSelectedTag("all");
+        setIsClosing(false);
     };
+    const handleClose = () => {
+        if (isClosing)
+            return;
+        setIsClosing(true);
+        if (closeTimeoutRef.current) {
+            window.clearTimeout(closeTimeoutRef.current);
+        }
+        closeTimeoutRef.current = window.setTimeout(finalizeClose, 220);
+    };
+    useEffect(() => {
+        return () => {
+            if (closeTimeoutRef.current) {
+                window.clearTimeout(closeTimeoutRef.current);
+            }
+        };
+    }, []);
     const handleKeyDown = (e) => {
         if (e.key === "Escape") {
             handleClose();
@@ -56,16 +83,53 @@ export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", mod
         setPrompt(promptData.content);
         setPromptId(promptData.id);
         incrementStat(promptData.id, "picked");
+        if (promptData.model) {
+            setSelectedModel(promptData.model);
+        }
         setShowPromptLibrary(false);
     };
-    const currentModelType = models.find((m) => m.id === selectedModel)?.type;
+    const adjustPromptHeight = () => {
+        const element = promptRef.current;
+        if (!element) {
+            return;
+        }
+        element.style.height = "auto";
+        element.style.height = `${element.scrollHeight}px`;
+    };
+    useLayoutEffect(() => {
+        adjustPromptHeight();
+    }, [prompt]);
+    if (!isOpen)
+        return null;
+    const activeModelId = selectedModel || models[0]?.id || "";
+    const currentModelType = models.find((m) => m.id === activeModelId)?.type;
     const filteredPrompts = prompts.filter((p) => {
         const matchesType = currentModelType === "image" ? p.type === "image" : p.type !== "image";
         return matchesType;
     });
+    const availableTags = Array.from(new Set(filteredPrompts.flatMap((p) => (Array.isArray(p.tags) ? p.tags : [])))).sort((a, b) => a.localeCompare(b));
+    const normalizedSearch = searchQuery.trim().toLowerCase();
+    const visiblePrompts = filteredPrompts
+        .filter((promptData) => {
+        if (!normalizedSearch) {
+            return true;
+        }
+        return (promptData.title.toLowerCase().includes(normalizedSearch) ||
+            promptData.content.toLowerCase().includes(normalizedSearch));
+    })
+        .filter((promptData) => {
+        if (selectedTag === "all") {
+            return true;
+        }
+        return promptData.tags?.includes(selectedTag);
+    })
+        .slice()
+        .sort((a, b) => Number(b.favorite) - Number(a.favorite));
+    const favoritePrompts = visiblePrompts.filter((promptData) => Boolean(promptData.favorite));
+    const nonFavoritePrompts = visiblePrompts.filter((promptData) => !promptData.favorite);
     const renderProps = {
         models,
-        selectedModel,
+        selectedModel: activeModelId,
         setSelectedModel,
         prompt,
         setPrompt,
@@ -76,7 +140,45 @@ export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", mod
     if (children) {
         return (_jsx("div", { style: aiStyles.modal, onKeyDown: handleKeyDown, children: children(renderProps) }));
     }
-    return (_jsxs("div", { style: aiStyles.modal, onKeyDown: handleKeyDown, children: [_jsx("div", { style: aiStyles.modalOverlay, onClick: handleClose }), _jsxs("div", { style: aiStyles.modalContent, children: [_jsxs("div", { style: aiStyles.modalHeader, children: [_jsx("h2", { style: aiStyles.modalTitle, children: showPromptLibrary ? "Select a Prompt" : "AI Prompt Configuration" }), _jsx("button", { style: {
+    return (_jsxs("div", { style: aiStyles.modal, onKeyDown: handleKeyDown, children: [_jsx("div", { style: {
+                    ...aiStyles.modalOverlay,
+                    opacity: isClosing ? 0 : 1,
+                    transition: "opacity 200ms ease",
+                }, onClick: handleClose }), _jsxs("div", { style: {
+                    ...aiStyles.modalContent,
+                    opacity: isClosing ? 0 : 1,
+                    transform: isClosing ? "translateY(12px)" : "translateY(0)",
+                    transition: "opacity 200ms ease, transform 200ms ease",
+                }, children: [isGenerating && (_jsxs("div", { style: {
+                            position: "absolute",
+                            inset: 0,
+                            background: "var(--ai-bg-tertiary)",
+                            backdropFilter: "blur(6px)",
+                            WebkitBackdropFilter: "blur(6px)",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            flexDirection: "column",
+                            gap: "12px",
+                            zIndex: 10,
+                            borderRadius: "12px",
+                        }, children: [_jsx("div", { style: {
+                                    width: "64px",
+                                    height: "64px",
+                                    borderRadius: "999px",
+                                    border: "2px solid #8b5cf620",
+                                    borderTopColor: "#8b5cf6",
+                                    animation: "ai-spin 1.1s linear infinite",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    boxShadow: "0 12px 24px rgba(139, 92, 246, 0.15)",
+                                }, children: _jsx(Sparkles, { size: 20, color: "#8b5cf6" }) }), _jsx("div", { style: {
+                                    fontSize: "13px",
+                                    fontWeight: 600,
+                                    color: "#6b7280",
+                                    letterSpacing: "0.02em",
+                                }, children: "G\u00E9n\u00E9ration en cours\u2026" })] })), _jsxs("div", { style: aiStyles.modalHeader, children: [_jsx("h2", { style: aiStyles.modalTitle, children: showPromptLibrary ? "Select a Prompt" : "AI Prompt Configuration" }), _jsx("button", { style: {
                                     ...aiStyles.modalCloseButton,
                                     ...(isCloseHovered && aiStyles.modalCloseButtonHover),
                                 }, onClick: handleClose, onMouseEnter: () => setIsCloseHovered(true), onMouseLeave: () => setIsCloseHovered(false), "aria-label": "Close", children: "\u00D7" })] }), _jsx("div", { style: aiStyles.modalBody, children: !showPromptLibrary ? (_jsxs(_Fragment, { children: [sourceText && (_jsxs("div", { style: {
@@ -93,7 +195,7 @@ export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", mod
                                                 overflow: "auto",
                                                 whiteSpace: "pre-wrap",
                                                 wordBreak: "break-word",
-                                            }, children: sourceText })] })), _jsxs("div", { style: aiStyles.modalInputGroup, children: [_jsx("label", { htmlFor: "model-select", style: aiStyles.modalLabel, children: "AI Model" }), _jsxs("select", { id: "model-select", value: selectedModel, onChange: (e) => setSelectedModel(e.target.value), onFocus: () => setModelFocused(true), onBlur: () => setModelFocused(false), style: {
+                                            }, children: sourceText })] })), _jsxs("div", { style: aiStyles.modalInputGroup, children: [_jsx("label", { htmlFor: "model-select", style: aiStyles.modalLabel, children: "AI Model" }), _jsxs("select", { id: "model-select", value: activeModelId, onChange: (e) => setSelectedModel(e.target.value), onFocus: () => setModelFocused(true), onBlur: () => setModelFocused(false), style: {
                                                 ...aiStyles.select,
                                                 ...(modelFocused && aiStyles.selectFocus),
                                             }, children: [models.length === 0 && (_jsx("option", { value: "", children: "Loading models..." })), models.map((model) => (_jsx("option", { value: model.id, children: model.name }, model.id)))] })] }), _jsxs("div", { style: aiStyles.modalInputGroup, children: [_jsxs("div", { style: {
@@ -109,17 +211,20 @@ export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", mod
                                                             }, children: "(Cmd/Ctrl + Enter to submit)" })] }), filteredPrompts.length > 0 && (_jsxs("button", { onClick: () => setShowPromptLibrary(true), style: {
                                                         padding: "4px 12px",
                                                         fontSize: "12px",
-                                                        color: "#ffffff",
-                                                        background: "#8b5cf620",
-                                                        border: "none",
+                                                        color: "#8b5cf6",
+                                                        background: "#8b5cf610",
+                                                        border: "1px solid #8b5cf630",
                                                         borderRadius: "6px",
                                                         cursor: "pointer",
                                                         transition: "all 0.2s",
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        gap: "6px",
                                                     }, onMouseEnter: (e) => {
-                                                        e.currentTarget.style.background = "#8b5cf630";
-                                                    }, onMouseLeave: (e) => {
                                                         e.currentTarget.style.background = "#8b5cf620";
-                                                    }, children: ["\uD83D\uDCDA Browse Prompts (", filteredPrompts.length, ")"] }))] }), _jsx("textarea", { id: "prompt-input", value: prompt, onChange: (e) => setPrompt(e.target.value), onFocus: () => setPromptFocused(true), onBlur: () => setPromptFocused(false), placeholder: sourceText
+                                                    }, onMouseLeave: (e) => {
+                                                        e.currentTarget.style.background = "#8b5cf610";
+                                                    }, children: [_jsx(BookOpen, { size: 14 }), "Browse Prompts (", filteredPrompts.length, ")"] }))] }), _jsx("textarea", { id: "prompt-input", ref: promptRef, value: prompt, onChange: (e) => setPrompt(e.target.value), onFocus: () => setPromptFocused(true), onBlur: () => setPromptFocused(false), placeholder: sourceText
                                                 ? "Enter your AI prompt... e.g., 'Correct spelling and grammar', 'Make it more professional', 'Translate to English'"
                                                 : "Enter your AI prompt... e.g., 'Write a blog post about AI', 'Generate product description'", rows: 6, style: {
                                                 ...aiStyles.textarea,
@@ -136,47 +241,146 @@ export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", mod
                                         display: "flex",
                                         alignItems: "center",
                                         gap: "4px",
-                                    }, children: "\u2190 Back to form" }), promptsLoading ? (_jsx("div", { style: { textAlign: "center", padding: "40px 0" }, children: "Loading prompts..." })) : filteredPrompts.length === 0 ? (_jsx("div", { style: { textAlign: "center", padding: "40px 0", color: "#6b7280" }, children: "No prompts available for this model type" })) : (_jsx("div", { style: {
+                                    }, children: "\u2190 Back to form" }), _jsxs("div", { style: { marginBottom: "12px" }, children: [_jsxs("div", { style: {
+                                                ...aiStyles.inputWrapper,
+                                                marginBottom: "10px",
+                                            }, children: [_jsx(Search, { size: 16, style: {
+                                                        position: "absolute",
+                                                        left: "12px",
+                                                        top: "50%",
+                                                        transform: "translateY(-50%)",
+                                                        color: aiStyles.tooltipLabel.color,
+                                                    } }), _jsx("input", { value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search prompts...", style: {
+                                                        ...aiStyles.input,
+                                                        padding: "10px 12px 10px 36px",
+                                                    } })] }), availableTags.length > 0 && (_jsxs("div", { style: {
+                                                display: "flex",
+                                                flexWrap: "wrap",
+                                                gap: "8px",
+                                                alignItems: "center",
+                                            }, children: [_jsxs("span", { style: {
+                                                        display: "inline-flex",
+                                                        alignItems: "center",
+                                                        gap: "6px",
+                                                        fontSize: "12px",
+                                                        color: aiStyles.tooltipLabel.color,
+                                                    }, children: [_jsx(Tag, { size: 14 }), "Tags"] }), _jsx("button", { onClick: () => setSelectedTag("all"), style: {
+                                                        ...aiStyles.chip,
+                                                        borderColor: selectedTag === "all"
+                                                            ? "#8b5cf6"
+                                                            : aiStyles.chip.border,
+                                                        background: selectedTag === "all"
+                                                            ? "#8b5cf620"
+                                                            : aiStyles.chip.background,
+                                                    }, children: "All" }), availableTags.map((tag) => (_jsx("button", { onClick: () => setSelectedTag(tag), style: {
+                                                        ...aiStyles.chip,
+                                                        borderColor: selectedTag === tag
+                                                            ? "#8b5cf6"
+                                                            : aiStyles.chip.border,
+                                                        background: selectedTag === tag
+                                                            ? "#8b5cf620"
+                                                            : aiStyles.chip.background,
+                                                    }, children: tag }, tag)))] }))] }), promptsLoading ? (_jsx("div", { style: { textAlign: "center", padding: "40px 0" }, children: "Loading prompts..." })) : visiblePrompts.length === 0 ? (_jsx("div", { style: {
+                                        textAlign: "center",
+                                        padding: "40px 0",
+                                        color: "#6b7280",
+                                    }, children: "No prompts available for this model type" })) : (_jsxs("div", { style: {
                                         display: "flex",
                                         flexDirection: "column",
                                         gap: "12px",
                                         maxHeight: "400px",
                                         overflow: "auto",
-                                    }, children: filteredPrompts.map((promptData) => (_jsxs("div", { onClick: () => handleSelectPrompt(promptData), style: {
-                                            padding: "16px",
-                                            border: `1px solid #e5e7eb`,
-                                            borderRadius: "8px",
-                                            cursor: "pointer",
-                                            transition: "all 0.2s",
-                                        }, onMouseEnter: (e) => {
-                                            e.currentTarget.style.background = "#8b5cf610";
-                                            e.currentTarget.style.borderColor = "#8b5cf6";
-                                        }, onMouseLeave: (e) => {
-                                            e.currentTarget.style.background = "transparent";
-                                            e.currentTarget.style.borderColor = "#e5e7eb";
-                                        }, children: [_jsx("div", { style: {
-                                                    fontWeight: 600,
-                                                    marginBottom: "4px",
-                                                    color: "#111827",
-                                                }, children: promptData.title }), _jsx("div", { style: {
-                                                    fontSize: "13px",
-                                                    color: "#6b7280",
-                                                    overflow: "hidden",
-                                                    textOverflow: "ellipsis",
-                                                    display: "-webkit-box",
-                                                    WebkitLineClamp: 2,
-                                                    WebkitBoxOrient: "vertical",
-                                                }, children: promptData.content }), ("category" in promptData && promptData.category) ? (_jsx("div", { style: {
-                                                    marginTop: "8px",
-                                                    fontSize: "11px",
-                                                    color: "#8b5cf6",
-                                                }, children: String(promptData.category) })) : null] }, promptData.id))) }))] })) }), _jsxs("div", { style: aiStyles.modalFooter, children: [_jsx("button", { onClick: handleClose, onMouseEnter: () => setIsCancelHovered(true), onMouseLeave: () => setIsCancelHovered(false), style: {
+                                    }, children: [favoritePrompts.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: {
+                                                        fontSize: "12px",
+                                                        color: "#6b7280",
+                                                        fontWeight: 600,
+                                                        textTransform: "uppercase",
+                                                        marginBottom: "8px",
+                                                    }, children: "Favorites" }), _jsx("div", { style: {
+                                                        display: "flex",
+                                                        flexDirection: "column",
+                                                        gap: "12px",
+                                                    }, children: favoritePrompts.map((promptData) => (_jsxs("div", { onClick: () => handleSelectPrompt(promptData), style: {
+                                                            padding: "16px",
+                                                            border: `1px solid #e5e7eb`,
+                                                            borderRadius: "8px",
+                                                            cursor: "pointer",
+                                                            transition: "all 0.2s",
+                                                        }, onMouseEnter: (e) => {
+                                                            e.currentTarget.style.background = "#8b5cf610";
+                                                            e.currentTarget.style.borderColor = "#8b5cf6";
+                                                        }, onMouseLeave: (e) => {
+                                                            e.currentTarget.style.background = "transparent";
+                                                            e.currentTarget.style.borderColor = "#e5e7eb";
+                                                        }, children: [_jsxs("div", { style: {
+                                                                    display: "flex",
+                                                                    alignItems: "center",
+                                                                    gap: "8px",
+                                                                    fontWeight: 600,
+                                                                    marginBottom: "4px",
+                                                                    color: "#9780a5",
+                                                                }, children: [_jsx(Star, { size: 14, color: "#8b5cf6" }), promptData.title] }), _jsx("div", { style: {
+                                                                    fontSize: "13px",
+                                                                    color: "#6b7280",
+                                                                    overflow: "hidden",
+                                                                    textOverflow: "ellipsis",
+                                                                    display: "-webkit-box",
+                                                                    WebkitLineClamp: 2,
+                                                                    WebkitBoxOrient: "vertical",
+                                                                }, children: promptData.content }), "category" in promptData && promptData.category ? (_jsx("div", { style: {
+                                                                    marginTop: "8px",
+                                                                    fontSize: "11px",
+                                                                    color: "#8b5cf6",
+                                                                }, children: String(promptData.category) })) : null] }, promptData.id))) })] })), nonFavoritePrompts.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: {
+                                                        fontSize: "12px",
+                                                        color: "#6b7280",
+                                                        fontWeight: 600,
+                                                        textTransform: "uppercase",
+                                                        marginTop: favoritePrompts.length > 0 ? "12px" : undefined,
+                                                        marginBottom: "8px",
+                                                    }, children: "All prompts" }), _jsx("div", { style: {
+                                                        display: "flex",
+                                                        flexDirection: "column",
+                                                        gap: "12px",
+                                                    }, children: nonFavoritePrompts.map((promptData) => (_jsxs("div", { onClick: () => handleSelectPrompt(promptData), style: {
+                                                            padding: "16px",
+                                                            border: `1px solid #e5e7eb`,
+                                                            borderRadius: "8px",
+                                                            cursor: "pointer",
+                                                            transition: "all 0.2s",
+                                                        }, onMouseEnter: (e) => {
+                                                            e.currentTarget.style.background = "#8b5cf610";
+                                                            e.currentTarget.style.borderColor = "#8b5cf6";
+                                                        }, onMouseLeave: (e) => {
+                                                            e.currentTarget.style.background = "transparent";
+                                                            e.currentTarget.style.borderColor = "#e5e7eb";
+                                                        }, children: [_jsx("div", { style: {
+                                                                    fontWeight: 600,
+                                                                    marginBottom: "4px",
+                                                                    color: "#9780a5",
+                                                                }, children: promptData.title }), _jsx("div", { style: {
+                                                                    fontSize: "13px",
+                                                                    color: "#6b7280",
+                                                                    overflow: "hidden",
+                                                                    textOverflow: "ellipsis",
+                                                                    display: "-webkit-box",
+                                                                    WebkitLineClamp: 2,
+                                                                    WebkitBoxOrient: "vertical",
+                                                                }, children: promptData.content }), "category" in promptData && promptData.category ? (_jsx("div", { style: {
+                                                                    marginTop: "8px",
+                                                                    fontSize: "11px",
+                                                                    color: "#8b5cf6",
+                                                                }, children: String(promptData.category) })) : null] }, promptData.id))) })] }))] }))] })) }), _jsxs("div", { style: aiStyles.modalFooter, children: [_jsx("button", { onClick: handleClose, onMouseEnter: () => setIsCancelHovered(true), onMouseLeave: () => setIsCancelHovered(false), style: {
                                     ...aiStyles.button,
                                     ...aiStyles.buttonSecondary,
                                     ...(isCancelHovered && aiStyles.buttonSecondaryHover),
                                 }, children: "Cancel" }), _jsx("button", { onClick: handleSubmit, disabled: !selectedModel || !prompt.trim(), onMouseEnter: () => setIsSubmitHovered(true), onMouseLeave: () => setIsSubmitHovered(false), style: {
                                     ...aiStyles.button,
-                                    ...(isSubmitHovered && !(!selectedModel || !prompt.trim()) && aiStyles.buttonHover),
-                                    ...(!selectedModel || !prompt.trim() ? aiStyles.buttonDisabled : {}),
+                                    ...(isSubmitHovered &&
+                                        !(!selectedModel || !prompt.trim()) &&
+                                        aiStyles.buttonHover),
+                                    ...(!selectedModel || !prompt.trim()
+                                        ? aiStyles.buttonDisabled
+                                        : {}),
                                 }, children: sourceText ? "Transform with AI" : "Generate with AI" })] })] })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"AiSelect.d.ts","sourceRoot":"","sources":["../../src/components/AiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM5C,MAAM,WAAW,aACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,aAAa,2CAqEf"}
+{"version":3,"file":"AiSelect.d.ts","sourceRoot":"","sources":["../../src/components/AiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAY,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AACnE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAO5C,MAAM,WAAW,aACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC1D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B;AAED,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,QAAQ,EACR,MAAgB,EAChB,OAAO,EACP,KAAK,EACL,MAAM,EACN,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,aAAa,2CA+Ef"}

package/dist/components/AiSelect.js

@@ -4,10 +4,12 @@ import { useState } from "react";
 import { useAiCallText } from "../hooks/useAiCallText";
 import { useAiModels } from "../hooks/useAiModels";
 import { AiPromptPanel } from "./AiPromptPanel";
+import { UsageToast, useUsageToast } from "./UsageToast";
 import { aiStyles } from "../styles/inline";
 export function AiSelect({ baseUrl, apiKeyId, uiMode = "modal", context, model, prompt, onValue, onToast, disabled, className, children, ...selectProps }) {
     const [isOpen, setIsOpen] = useState(false);
     const [isFocused, setIsFocused] = useState(false);
+    const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
     const { models } = useAiModels({ baseUrl, apiKeyId });
     const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
     const handleOpenPanel = () => {
@@ -27,6 +29,7 @@ export function AiSelect({ baseUrl, apiKeyId, uiMode = "modal", context, model,
             if (result.text) {
                 onValue?.(result.text);
                 onToast?.({ type: "success", message: "AI suggestion ready" });
+                showUsageToast(result);
             }
         }
         catch (error) {
@@ -45,5 +48,5 @@ export function AiSelect({ baseUrl, apiKeyId, uiMode = "modal", context, model,
                 }, onBlur: (e) => {
                     setIsFocused(false);
                     selectProps.onBlur?.(e);
-                }, disabled: disabled || loading, children: children }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [] }))] }));
+                }, disabled: disabled || loading, children: children }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [] })), Boolean(toastData) && (_jsx(UsageToast, { result: toastData, position: "bottom-right", onComplete: clearToast }, toastKey))] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"AiStatusButton.d.ts","sourceRoot":"","sources":["../../src/components/AiStatusButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAItD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAe,EACf,SAAc,GACf,EAAE,mBAAmB,2CAgSrB"}
+{"version":3,"file":"AiStatusButton.d.ts","sourceRoot":"","sources":["../../src/components/AiStatusButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAKtD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAe,EACf,SAAc,GACf,EAAE,mBAAmB,2CAkZrB"}