@lastbrain/ai-ui-react 1.0.10 → 1.0.11

package/dist/components/AiStatusButton.js

@@ -1,20 +1,114 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
 import { aiStyles, calculateTooltipPosition } from "../styles/inline";
 export function AiStatusButton({ status, loading = false, className = "", }) {
+    const formatNumber = (value) => typeof value === "number" ? value.toLocaleString() : "0";
+    const formatFixed = (value, digits) => typeof value === "number" ? value.toFixed(digits) : "0.00";
+    const safeNumber = (value) => typeof value === "number" ? value : 0;
+    const clampPercentage = (value) => Math.min(100, Math.max(0, safeNumber(value)));
+    const getUsageColor = (percentage) => {
+        if (percentage > 90) {
+            return aiStyles.tooltipValueWarning.color;
+        }
+        if (percentage > 75) {
+            return aiStyles.tooltipValueWarning.color;
+        }
+        return aiStyles.tooltipValueSuccess.color;
+    };
+    const renderUsageCircle = (percentageValue) => {
+        const percentage = clampPercentage(percentageValue);
+        const size = 28;
+        const stroke = 3;
+        const radius = (size - stroke) / 2;
+        const circumference = 2 * Math.PI * radius;
+        const offset = circumference - (percentage / 100) * circumference;
+        const color = getUsageColor(percentage);
+        return (_jsxs("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, children: [_jsx("circle", { cx: size / 2, cy: size / 2, r: radius, stroke: aiStyles.tooltipLabel.color, strokeWidth: stroke, fill: "transparent", opacity: 0.3 }), _jsx("circle", { cx: size / 2, cy: size / 2, r: radius, stroke: color, strokeWidth: stroke, fill: "transparent", strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", transform: `rotate(-90 ${size / 2} ${size / 2})` })] }));
+    };
+    const balanceUsage = status?.balance;
+    const storageUsage = status?.storage;
+    const balanceTotal = balanceUsage?.total ??
+        safeNumber(balanceUsage?.purchased) + safeNumber(balanceUsage?.quota);
+    const balanceUsed = balanceUsage?.used ?? balanceUsage?.total ?? 0;
+    const balancePercentage = balanceUsage?.percentage ??
+        (balanceTotal > 0 ? Math.round((balanceUsed / balanceTotal) * 100) : 0);
+    const storageAllocated = storageUsage?.allocated_mb ?? storageUsage?.total_mb ?? 0;
+    const storageUsed = storageUsage?.used_mb ?? storageUsage?.total_mb ?? 0;
+    const storagePercentage = storageUsage?.percentage ??
+        (storageAllocated > 0
+            ? Math.round((storageUsed / storageAllocated) * 100)
+            : 0);
     const [showTooltip, setShowTooltip] = useState(false);
     const [isHovered, setIsHovered] = useState(false);
     const [tooltipPosition, setTooltipPosition] = useState({});
     const buttonRef = useRef(null);
     const tooltipRef = useRef(null);
-    useEffect(() => {
-        if (showTooltip && buttonRef.current) {
-            const buttonRect = buttonRef.current.getBoundingClientRect();
-            const position = calculateTooltipPosition(buttonRect);
-            setTooltipPosition(position);
+    const canPortal = typeof document !== "undefined";
+    useLayoutEffect(() => {
+        if (!showTooltip || !buttonRef.current) {
+            return;
         }
-    }, [showTooltip]);
+        const updatePosition = () => {
+            if (!buttonRef.current) {
+                return;
+            }
+            const buttonRect = buttonRef.current.getBoundingClientRect();
+            if (canPortal) {
+                const tooltipRect = tooltipRef.current?.getBoundingClientRect();
+                const tooltipWidth = tooltipRect?.width ?? 360;
+                const tooltipHeight = tooltipRect?.height ?? 520;
+                const viewportWidth = window.innerWidth;
+                const viewportHeight = window.innerHeight;
+                const margin = 8;
+                const spaceBelow = viewportHeight - buttonRect.bottom;
+                const spaceAbove = buttonRect.top;
+                const spaceRight = viewportWidth - buttonRect.right;
+                const spaceLeft = buttonRect.left;
+                const preferBelow = spaceBelow >= spaceAbove;
+                const preferRight = spaceRight >= spaceLeft;
+                let top = preferBelow
+                    ? buttonRect.bottom + margin
+                    : buttonRect.top - tooltipHeight - margin;
+                if (top < margin) {
+                    top = margin;
+                }
+                if (top + tooltipHeight > viewportHeight - margin) {
+                    top = Math.max(margin, viewportHeight - tooltipHeight - margin);
+                }
+                let left = preferRight
+                    ? buttonRect.left
+                    : buttonRect.right - tooltipWidth;
+                if (left < margin) {
+                    left = margin;
+                }
+                if (left + tooltipWidth > viewportWidth - margin) {
+                    left = Math.max(margin, viewportWidth - tooltipWidth - margin);
+                }
+                setTooltipPosition({
+                    top: `${top}px`,
+                    left: `${left}px`,
+                    position: "fixed",
+                });
+            }
+            else {
+                const position = calculateTooltipPosition(buttonRect);
+                setTooltipPosition(position);
+            }
+        };
+        const rafId = requestAnimationFrame(updatePosition);
+        const rafId2 = requestAnimationFrame(updatePosition);
+        const handleResize = () => updatePosition();
+        window.addEventListener("resize", handleResize);
+        window.addEventListener("scroll", handleResize, true);
+        return () => {
+            cancelAnimationFrame(rafId);
+            cancelAnimationFrame(rafId2);
+            window.removeEventListener("resize", handleResize);
+            window.removeEventListener("scroll", handleResize, true);
+        };
+    }, [showTooltip, canPortal]);
     const handleMouseEnter = () => {
         setShowTooltip(true);
         setIsHovered(true);
@@ -40,40 +134,38 @@ export function AiStatusButton({ status, loading = false, className = "", }) {
                         ...aiStyles.statusButton,
                         color: "#ef4444",
                         ...(isHovered && aiStyles.statusButtonHover),
-                    }, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" }) }) }), showTooltip && (_jsx("div", { ref: tooltipRef, style: { ...aiStyles.tooltip, ...tooltipPosition }, onMouseEnter: () => setShowTooltip(true), onMouseLeave: handleMouseLeave, children: "No status available" }))] }));
+                    }, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" }) }) }), showTooltip &&
+                    canPortal &&
+                    createPortal(_jsx("div", { ref: tooltipRef, style: {
+                            ...aiStyles.tooltip,
+                            ...tooltipPosition,
+                            zIndex: 50,
+                        }, onMouseEnter: () => setShowTooltip(true), onMouseLeave: handleMouseLeave, children: "No status available" }), document.body)] }));
     }
     return (_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { ref: buttonRef, style: {
                     ...aiStyles.statusButton,
                     color: "#10b981",
                     ...(isHovered && aiStyles.statusButtonHover),
-                }, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" }) }) }), showTooltip && (_jsxs("div", { ref: tooltipRef, style: { ...aiStyles.tooltip, ...tooltipPosition }, onMouseEnter: () => setShowTooltip(true), onMouseLeave: handleMouseLeave, children: [_jsx("div", { style: aiStyles.tooltipHeader, children: "API Status" }), _jsxs("div", { style: {
-                            ...aiStyles.tooltipSection,
-                            ...aiStyles.tooltipSectionFirst,
-                        }, children: [_jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "API Key:" }), _jsx("span", { style: aiStyles.tooltipValue, children: status.api_key.name })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Env:" }), _jsx("span", { style: aiStyles.tooltipValue, children: status.api_key.env })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Rate Limit:" }), _jsxs("span", { style: aiStyles.tooltipValue, children: [status.api_key.rate_limit_rpm, " req/min"] })] })] }), _jsxs("div", { style: aiStyles.tooltipSection, children: [_jsx("div", { style: aiStyles.tooltipSubtitle, children: "Balance" }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Total:" }), _jsx("span", { style: {
-                                            ...aiStyles.tooltipValue,
-                                            ...aiStyles.tooltipValueBold,
-                                        }, children: status.balance.total.toLocaleString() })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Purchased:" }), _jsx("span", { style: aiStyles.tooltipValue, children: status.balance.purchased.toLocaleString() })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Quota:" }), _jsx("span", { style: aiStyles.tooltipValue, children: status.balance.quota.toLocaleString() })] })] }), _jsxs("div", { style: aiStyles.tooltipSection, children: [_jsx("div", { style: aiStyles.tooltipSubtitle, children: "Plan" }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Type:" }), _jsx("span", { style: {
-                                            ...aiStyles.tooltipValue,
-                                            textTransform: "capitalize",
-                                        }, children: status.quota.plan })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Remaining:" }), _jsxs("span", { style: aiStyles.tooltipValue, children: [status.quota.remaining_quota.toLocaleString(), " /", " ", status.quota.effective_quota.toLocaleString()] })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Status:" }), _jsx("span", { style: {
-                                            ...aiStyles.tooltipValue,
-                                            ...(status.quota.is_active
-                                                ? aiStyles.tooltipValueSuccess
-                                                : aiStyles.tooltipValueWarning),
-                                        }, children: status.quota.is_active ? "Active" : "Inactive" })] })] }), _jsxs("div", { style: aiStyles.tooltipSection, children: [_jsx("div", { style: aiStyles.tooltipSubtitle, children: "Storage" }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Database:" }), _jsxs("span", { style: aiStyles.tooltipValue, children: [status.storage.db_mb.toFixed(2), " MB"] })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Files:" }), _jsxs("span", { style: aiStyles.tooltipValue, children: [status.storage.files_mb.toFixed(2), " MB"] })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Total:" }), _jsxs("span", { style: {
-                                            ...aiStyles.tooltipValue,
-                                            ...aiStyles.tooltipValueBold,
-                                        }, children: [(status.storage.db_mb + status.storage.files_mb).toFixed(2), " MB"] })] })] }), _jsxs("div", { style: aiStyles.tooltipActions, children: [_jsx("a", { href: "https://prompt.lastbrain.io/fr/auth/dashboard", target: "_blank", rel: "noopener noreferrer", style: aiStyles.tooltipLink, onMouseEnter: (e) => {
-                                    Object.assign(e.currentTarget.style, aiStyles.tooltipLinkHover);
-                                }, onMouseLeave: (e) => {
-                                    Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
-                                }, children: "Dashboard" }), _jsx("a", { href: "https://prompt.lastbrain.io/fr/auth/billing", target: "_blank", rel: "noopener noreferrer", style: aiStyles.tooltipLink, onMouseEnter: (e) => {
-                                    Object.assign(e.currentTarget.style, aiStyles.tooltipLinkHover);
-                                }, onMouseLeave: (e) => {
-                                    Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
-                                }, children: "History" }), _jsx("a", { href: "https://prompt.lastbrain.io/fr/auth/billing", target: "_blank", rel: "noopener noreferrer", style: aiStyles.tooltipLink, onMouseEnter: (e) => {
-                                    Object.assign(e.currentTarget.style, aiStyles.tooltipLinkHover);
-                                }, onMouseLeave: (e) => {
-                                    Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
-                                }, children: "Settings" })] })] }))] }));
+                }, className: className, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", children: _jsx("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" }) }) }), showTooltip &&
+                canPortal &&
+                createPortal(_jsxs("div", { ref: tooltipRef, style: {
+                        ...aiStyles.tooltip,
+                        ...tooltipPosition,
+                        zIndex: 50,
+                    }, onMouseEnter: () => setShowTooltip(true), onMouseLeave: handleMouseLeave, children: [_jsx("div", { style: aiStyles.tooltipHeader, children: "API Status" }), _jsxs("div", { style: {
+                                ...aiStyles.tooltipSection,
+                                ...aiStyles.tooltipSectionFirst,
+                            }, children: [_jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "API Key:" }), _jsx("span", { style: aiStyles.tooltipValue, children: status.api_key.name })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Env:" }), _jsx("span", { style: aiStyles.tooltipValue, children: status.api_key.env })] }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Rate Limit:" }), _jsxs("span", { style: aiStyles.tooltipValue, children: [status.api_key.rate_limit_rpm, " req/min"] })] })] }), _jsxs("div", { style: aiStyles.tooltipSection, children: [_jsx("div", { style: aiStyles.tooltipSubtitle, children: "Balance" }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Total:" }), _jsxs("span", { style: aiStyles.tooltipValue, children: ["$", formatFixed(balanceUsed, 6), " / $", formatNumber(balanceTotal)] }), renderUsageCircle(balancePercentage)] })] }), _jsxs("div", { style: aiStyles.tooltipSection, children: [_jsx("div", { style: aiStyles.tooltipSubtitle, children: "Storage" }), _jsxs("div", { style: aiStyles.tooltipRow, children: [_jsx("span", { style: aiStyles.tooltipLabel, children: "Total:" }), _jsxs("span", { style: aiStyles.tooltipValue, children: [formatFixed(storageUsed, 2), " MB /", " ", formatFixed(storageAllocated, 2), " MB"] }), renderUsageCircle(storagePercentage)] })] }), _jsxs("div", { style: aiStyles.tooltipActions, children: [_jsx("a", { href: "https://prompt.lastbrain.io/fr/auth/dashboard", target: "_blank", rel: "noopener noreferrer", style: aiStyles.tooltipLink, onMouseEnter: (e) => {
+                                        Object.assign(e.currentTarget.style, aiStyles.tooltipLinkHover);
+                                    }, onMouseLeave: (e) => {
+                                        Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
+                                    }, children: "Dashboard" }), _jsx("a", { href: "https://prompt.lastbrain.io/fr/auth/billing", target: "_blank", rel: "noopener noreferrer", style: aiStyles.tooltipLink, onMouseEnter: (e) => {
+                                        Object.assign(e.currentTarget.style, aiStyles.tooltipLinkHover);
+                                    }, onMouseLeave: (e) => {
+                                        Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
+                                    }, children: "History" }), _jsx("a", { href: "https://prompt.lastbrain.io/fr/auth/billing", target: "_blank", rel: "noopener noreferrer", style: aiStyles.tooltipLink, onMouseEnter: (e) => {
+                                        Object.assign(e.currentTarget.style, aiStyles.tooltipLinkHover);
+                                    }, onMouseLeave: (e) => {
+                                        Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
+                                    }, children: "Settings" })] })] }), document.body)] }));
 }

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,EAAoB,KAAK,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAC7E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAM5C,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,2CAqKjB"}
+{"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;AAO5C,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"}

package/dist/components/AiTextarea.js

@@ -1,9 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useRef } from "react";
+import { useState, useRef, useLayoutEffect, } 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 AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model, prompt, editMode = false, onValue, onToast, disabled, className, ...textareaProps }) {
     const [isOpen, setIsOpen] = useState(false);
@@ -13,6 +15,7 @@ export function AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model
     const [isFocused, setIsFocused] = useState(false);
     const [isButtonHovered, setIsButtonHovered] = useState(false);
     const textareaRef = useRef(null);
+    const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
     const { models } = useAiModels({ baseUrl, apiKeyId });
     const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
     const hasConfiguration = Boolean(model && prompt);
@@ -24,11 +27,16 @@ export function AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model
     };
     const handleSubmit = async (selectedModel, selectedPrompt, promptId) => {
         try {
+            const resolvedContext = textareaValue || 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: textareaValue || context || undefined,
-                actionType: "autocomplete",
+                prompt: promptWithContext,
+                context: resolvedContext,
+                actionType: hasContext ? "generate-text" : "autocomplete",
             });
             if (result.text) {
                 setTextareaValue(result.text);
@@ -37,6 +45,7 @@ export function AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model
                 }
                 onValue?.(result.text);
                 onToast?.({ type: "success", message: "AI generation successful" });
+                showUsageToast(result);
             }
         }
         catch (error) {
@@ -50,11 +59,16 @@ export function AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model
         if (!model || !prompt)
             return;
         try {
+            const resolvedContext = textareaValue || 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: textareaValue || context || undefined,
-                actionType: "autocomplete",
+                prompt: promptWithContext,
+                context: resolvedContext,
+                actionType: hasContext ? "generate-text" : "autocomplete",
             });
             if (result.text) {
                 setTextareaValue(result.text);
@@ -63,6 +77,7 @@ export function AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model
                 }
                 onValue?.(result.text);
                 onToast?.({ type: "success", message: "AI generation successful" });
+                showUsageToast(result);
             }
         }
         catch (error) {
@@ -74,12 +89,24 @@ export function AiTextarea({ baseUrl, apiKeyId, uiMode = "modal", context, model
         setTextareaValue(newValue);
         textareaProps.onChange?.(e);
     };
+    const adjustHeight = () => {
+        const element = textareaRef.current;
+        if (!element) {
+            return;
+        }
+        element.style.height = "auto";
+        element.style.height = `${element.scrollHeight}px`;
+    };
+    useLayoutEffect(() => {
+        adjustHeight();
+    }, [textareaValue]);
     return (_jsxs("div", { style: aiStyles.textareaWrapper, className: className, children: [_jsx("textarea", { ref: textareaRef, ...textareaProps, style: {
                     ...aiStyles.textarea,
                     ...(isFocused && aiStyles.textareaFocus),
                 }, value: textareaValue, onChange: handleTextareaChange, onFocus: (e) => {
                     setIsFocused(true);
                     textareaProps.onFocus?.(e);
+                    adjustHeight();
                 }, onBlur: (e) => {
                     setIsFocused(false);
                     textareaProps.onBlur?.(e);
@@ -89,5 +116,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" }) })) : 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: textareaValue || 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: textareaValue || undefined })), Boolean(toastData) && (_jsx(UsageToast, { result: toastData, position: "bottom-right", onComplete: clearToast }, toastKey))] }));
 }

package/dist/components/UsageToast.d.ts

@@ -0,0 +1,14 @@
+interface UsageToastProps {
+    result: unknown;
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    onComplete?: () => void;
+}
+export declare function UsageToast({ result, position, onComplete, }: UsageToastProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function useUsageToast(): {
+    showUsageToast: (result: unknown) => void;
+    toastData: unknown;
+    toastKey: number;
+    clearToast: () => void;
+};
+export {};
+//# sourceMappingURL=UsageToast.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UsageToast.d.ts","sourceRoot":"","sources":["../../src/components/UsageToast.tsx"],"names":[],"mappings":"AAKA,UAAU,eAAe;IACvB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,cAAc,GAAG,aAAa,GAAG,WAAW,GAAG,UAAU,CAAC;IACrE,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,UAAU,CAAC,EACzB,MAAM,EACN,QAAyB,EACzB,UAAU,GACX,EAAE,eAAe,kDAgJjB;AAED,wBAAgB,aAAa;6BAIK,OAAO;;;;EAgBxC"}

package/dist/components/UsageToast.js

@@ -0,0 +1,144 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { X } from "lucide-react";
+export function UsageToast({ result, position = "bottom-right", onComplete, }) {
+    const [isVisible, setIsVisible] = useState(false);
+    const [isClosing, setIsClosing] = useState(false);
+    const fadeTimeoutRef = useRef(null);
+    useEffect(() => {
+        if (result) {
+            // Show toast immediately
+            setIsVisible(true);
+            setIsClosing(false);
+        }
+        return () => {
+            if (fadeTimeoutRef.current) {
+                window.clearTimeout(fadeTimeoutRef.current);
+            }
+        };
+    }, [result]);
+    const handleClose = () => {
+        if (isClosing)
+            return;
+        setIsClosing(true);
+        fadeTimeoutRef.current = window.setTimeout(() => {
+            setIsVisible(false);
+            onComplete?.();
+        }, 200);
+    };
+    const extractUsageMessage = (data) => {
+        const result = data;
+        // Extract cost from various possible locations
+        const rawCost = result?.cost ??
+            result?.price ??
+            result?.usage?.cost ??
+            result?.usage?.total ??
+            result?.usage?.usd ??
+            result?.usage?.credits ??
+            result?.tokens?.cost ??
+            result?.tokens?.price ??
+            result?.balance?.cost ??
+            result?.balance?.used ??
+            result?.balance?.spent ??
+            result?.credits_used ??
+            result?.usd ??
+            0;
+        const cost = Number.isFinite(Number(rawCost)) ? Number(rawCost) : 0;
+        // Smart formatting: show meaningful decimals
+        let formatted;
+        if (cost >= 1) {
+            formatted = cost.toFixed(2);
+        }
+        else if (cost >= 0.01) {
+            formatted = cost.toFixed(4);
+        }
+        else if (cost >= 0.0001) {
+            formatted = cost.toFixed(6);
+        }
+        else if (cost > 0) {
+            formatted = cost.toFixed(8);
+        }
+        else {
+            formatted = "0.0000";
+        }
+        // Remove trailing zeros
+        formatted = parseFloat(formatted).toString();
+        return `${formatted}$ used`;
+    };
+    const message = extractUsageMessage(result);
+    if (!result)
+        return null;
+    const getPositionStyles = () => {
+        const baseStyles = {
+            position: "absolute",
+            zIndex: 1000,
+        };
+        switch (position) {
+            case "bottom-right":
+                return { ...baseStyles, bottom: "8px", right: "8px" };
+            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: "4px 6px",
+            borderRadius: "6px",
+            marginBottom: "4px",
+            right: "6px",
+            background: "rgba(22, 163, 74, 0.12)",
+            border: "1px solid rgba(22, 163, 74, 0.3)",
+            color: "#16a34a",
+            fontSize: "9px",
+            fontWeight: 600,
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
+            backdropFilter: "blur(4px)",
+            WebkitBackdropFilter: "blur(4px)",
+        }, children: [_jsx("span", { children: message }), _jsx("button", { onClick: handleClose, style: {
+                    background: "transparent",
+                    border: "none",
+                    color: "#16a34a",
+                    cursor: "pointer",
+                    padding: "2px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "4px",
+                    transition: "background-color 150ms ease",
+                }, onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = "rgba(22, 163, 74, 0.2)";
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                }, title: "Close", children: _jsx(X, { size: 12 }) })] }));
+}
+export function useUsageToast() {
+    const [toastData, setToastData] = useState(null);
+    const [toastKey, setToastKey] = useState(0);
+    const showUsageToast = (result) => {
+        // Replace any existing toast with new one
+        setToastKey((prev) => prev + 1);
+        setToastData(result);
+    };
+    const clearToast = () => {
+        setToastData(null);
+    };
+    return {
+        showUsageToast,
+        toastData,
+        toastKey,
+        clearToast,
+    };
+}

package/dist/hooks/usePrompts.d.ts

@@ -7,6 +7,7 @@ export interface Prompt {
     is_public: boolean;
     favorite: boolean;
     tags: string[];
+    model?: string | null;
     created_at: string;
     updated_at?: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"usePrompts.d.ts","sourceRoot":"","sources":["../../src/hooks/usePrompts.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,YAAa,SAAQ,MAAM;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,YAAY,EAAE,CAAC,OAAO,CAAC,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D,YAAY,EAAE,CACZ,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,YAAY,GAAG,YAAY,CAAC,KACnD,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC5B,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC5E,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/C,aAAa,EAAE,CACb,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,KAClC,OAAO,CAAC,IAAI,CAAC,CAAC;CACpB;AAED,wBAAgB,UAAU,IAAI,gBAAgB,CA2I7C"}
+{"version":3,"file":"usePrompts.d.ts","sourceRoot":"","sources":["../../src/hooks/usePrompts.ts"],"names":[],"mappings":"AAKA,MAAM,WAAW,MAAM;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,YAAa,SAAQ,MAAM;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,MAAM,EAAE,GAAG,YAAY,EAAE,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,YAAY,EAAE,CAAC,OAAO,CAAC,EAAE,iBAAiB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7D,YAAY,EAAE,CACZ,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,IAAI,GAAG,YAAY,GAAG,YAAY,CAAC,KACnD,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC5B,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC5E,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/C,aAAa,EAAE,CACb,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,KAClC,OAAO,CAAC,IAAI,CAAC,CAAC;CACpB;AAED,wBAAgB,UAAU,IAAI,gBAAgB,CA0I7C"}

package/dist/hooks/usePrompts.js

@@ -109,7 +109,6 @@ export function usePrompts() {
         }
         catch (err) {
             // Silent fail for stats
-            console.error("Failed to increment stat:", err);
         }
     }, []);
     return {

package/dist/styles/inline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../../src/styles/inline.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA+DH,eAAO,MAAM,QAAQ;WAcd,KAAK,CAAC,aAAa;gBAKnB,KAAK,CAAC,aAAa;gBAInB,KAAK,CAAC,aAAa;;;;;mBAyBnB,KAAK,CAAC,aAAa;wBAMnB,KAAK,CAAC,aAAa;cAiBnB,KAAK,CAAC,aAAa;mBAKnB,KAAK,CAAC,aAAa;;;;;sBAwBnB,KAAK,CAAC,aAAa;2BAMnB,KAAK,CAAC,aAAa;YAoBnB,KAAK,CAAC,aAAa;iBAMnB,KAAK,CAAC,aAAa;oBAMnB,KAAK,CAAC,aAAa;YAgBnB,KAAK,CAAC,aAAa;iBAKnB,KAAK,CAAC,aAAa;kBAgBnB,KAAK,CAAC,aAAa;uBAMnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAgBnB,KAAK,CAAC,aAAa;mBASnB,KAAK,CAAC,aAAa;oBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;qBASnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;kBAKnB,KAAK,CAAC,aAAa;kBAQnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;oBASnB,KAAK,CAAC,aAAa;iBAcnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;UAcnB,KAAK,CAAC,aAAa;WAenB,KAAK,CAAC,aAAa;kBAWnB,KAAK,CAAC,aAAa;kBAanB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAOnB,KAAK,CAAC,aAAa;sBAiBnB,KAAK,CAAC,aAAa;2BAKnB,KAAK,CAAC,aAAa;eAMnB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;qBAInB,KAAK,CAAC,aAAa;qBAOnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAUnB,KAAK,CAAC,aAAa;CACzB,CAAC;AA+BF,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,OAAO,EACnB,YAAY,GAAE,MAAY,EAC1B,aAAa,GAAE,MAAY,GAC1B;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAoDlE"}
+{"version":3,"file":"inline.d.ts","sourceRoot":"","sources":["../../src/styles/inline.ts"],"names":[],"mappings":"AAAA;;;GAGG;AA6HH,eAAO,MAAM,QAAQ;WAgBd,KAAK,CAAC,aAAa;gBAKnB,KAAK,CAAC,aAAa;gBAInB,KAAK,CAAC,aAAa;;;;;mBAyBnB,KAAK,CAAC,aAAa;wBAMnB,KAAK,CAAC,aAAa;cAmBnB,KAAK,CAAC,aAAa;mBAKnB,KAAK,CAAC,aAAa;;;;;sBAwBnB,KAAK,CAAC,aAAa;2BAMnB,KAAK,CAAC,aAAa;YAoBnB,KAAK,CAAC,aAAa;iBAMnB,KAAK,CAAC,aAAa;oBAMnB,KAAK,CAAC,aAAa;YAgBnB,KAAK,CAAC,aAAa;iBAKnB,KAAK,CAAC,aAAa;kBAgBnB,KAAK,CAAC,aAAa;uBAMnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAgBnB,KAAK,CAAC,aAAa;mBASnB,KAAK,CAAC,aAAa;oBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;qBASnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;kBAKnB,KAAK,CAAC,aAAa;kBAQnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;yBAKnB,KAAK,CAAC,aAAa;oBASnB,KAAK,CAAC,aAAa;iBAcnB,KAAK,CAAC,aAAa;sBAKnB,KAAK,CAAC,aAAa;UAcnB,KAAK,CAAC,aAAa;WAenB,KAAK,CAAC,aAAa;kBAWnB,KAAK,CAAC,aAAa;kBAanB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAOnB,KAAK,CAAC,aAAa;sBAiBnB,KAAK,CAAC,aAAa;2BAKnB,KAAK,CAAC,aAAa;eAMnB,KAAK,CAAC,aAAa;iBAQnB,KAAK,CAAC,aAAa;gBAQnB,KAAK,CAAC,aAAa;qBAInB,KAAK,CAAC,aAAa;qBAOnB,KAAK,CAAC,aAAa;0BAKnB,KAAK,CAAC,aAAa;aAUnB,KAAK,CAAC,aAAa;CACzB,CAAC;AA+BF,wBAAgB,wBAAwB,CACtC,UAAU,EAAE,OAAO,EACnB,YAAY,GAAE,MAAY,EAC1B,aAAa,GAAE,MAAY,GAC1B;IAAE,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,CAoDlE"}