@lastbrain/ai-ui-react 1.0.24 → 1.0.26

package/dist/components/AiChipLabel.d.ts

@@ -6,4 +6,16 @@ export interface AiChipLabelProps {
     style?: React.CSSProperties;
 }
 export declare function AiChipLabel({ children, variant, className, style: customStyle, }: AiChipLabelProps): import("react/jsx-runtime").JSX.Element;
+export interface AiChipInputProps {
+    value?: string[];
+    onChange?: (chips: string[]) => void;
+    placeholder?: string;
+    context?: string;
+    maxChips?: number;
+    allowDuplicates?: boolean;
+    className?: string;
+    baseUrl?: string;
+    apiKeyId?: string;
+}
+export declare function AiChipInput({ value, onChange, placeholder, context, maxChips, allowDuplicates, className, baseUrl: propBaseUrl, apiKeyId: propApiKeyId, }: AiChipInputProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AiChipLabel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AiChipLabel.d.ts","sourceRoot":"","sources":["../../src/components/AiChipLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAmB,EACnB,SAAS,EACT,KAAK,EAAE,WAAW,GACnB,EAAE,gBAAgB,2CAgClB"}
+{"version":3,"file":"AiChipLabel.d.ts","sourceRoot":"","sources":["../../src/components/AiChipLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAQ/D,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAmB,EACnB,SAAS,EACT,KAAK,EAAE,WAAW,GACnB,EAAE,gBAAgB,2CAgClB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAU,EACV,QAAQ,EACR,WAAoE,EACpE,OAAO,EACP,QAAQ,EACR,eAAuB,EACvB,SAAS,EACT,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,GACvB,EAAE,gBAAgB,2CA2LlB"}

package/dist/components/AiChipLabel.js

@@ -1,6 +1,12 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { X, Sparkles } from "lucide-react";
 import { aiStyles } from "../styles/inline";
+import { AiPromptPanel } from "./AiPromptPanel";
+import { useAiCallText } from "../hooks/useAiCallText";
+import { useAiModels } from "../hooks/useAiModels";
+import { useAiContext } from "../context/AiProvider";
 export function AiChipLabel({ children, variant = "default", className, style: customStyle, }) {
     const variantStyles = {
         default: {},
@@ -26,3 +32,125 @@ export function AiChipLabel({ children, variant = "default", className, style: c
             ...customStyle,
         }, className: className, children: children }));
 }
+export function AiChipInput({ value = [], onChange, placeholder = "Tapez et appuyez sur Entrée pour ajouter des tags...", context, maxChips, allowDuplicates = false, className, baseUrl: propBaseUrl, apiKeyId: propApiKeyId, }) {
+    const [inputValue, setInputValue] = useState("");
+    const [showPromptPanel, setShowPromptPanel] = useState(false);
+    const inputRef = useRef(null);
+    // Récupérer le contexte AiProvider avec fallback sur les props
+    const aiContext = useAiContext();
+    const baseUrl = propBaseUrl ?? aiContext.baseUrl;
+    const apiKeyId = propApiKeyId ?? aiContext.apiKeyId;
+    // Hooks pour l'IA avec les valeurs du contexte
+    const { models } = useAiModels({ baseUrl, apiKeyId });
+    const { generateText } = useAiCallText({ baseUrl, apiKeyId });
+    const addChip = (text) => {
+        if (!text.trim())
+            return;
+        const newChips = text
+            .split(/[,;]/)
+            .map((chip) => chip.trim())
+            .filter(Boolean);
+        const updatedChips = [...value];
+        newChips.forEach((chip) => {
+            if (maxChips && updatedChips.length >= maxChips)
+                return;
+            if (!allowDuplicates && updatedChips.includes(chip))
+                return;
+            updatedChips.push(chip);
+        });
+        onChange?.(updatedChips);
+        setInputValue("");
+    };
+    const removeChip = (index) => {
+        const updatedChips = value.filter((_, i) => i !== index);
+        onChange?.(updatedChips);
+    };
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            addChip(inputValue);
+        }
+        else if (e.key === "Backspace" && !inputValue && value.length > 0) {
+            removeChip(value.length - 1);
+        }
+    };
+    const handleGenerateChips = () => {
+        setShowPromptPanel(true);
+    };
+    const handlePromptSubmit = async (model, prompt) => {
+        try {
+            // Construire le prompt avec l'instruction spécifique
+            const instruction = `${prompt}${context ? `\n\nContexte: ${context}` : ""}
+
+IMPORTANT: Réponds UNIQUEMENT avec une liste de tags séparés par des virgules, sans explication ni formatage.
+Exemple de réponse attendue: javascript, react, frontend, api, development`;
+            const response = await generateText({
+                model,
+                prompt: instruction,
+            });
+            const chips = parseChipsFromResponse(response.text);
+            // Fermer le modal immédiatement
+            setShowPromptPanel(false);
+            // Ajouter directement toutes les chips générées
+            addGeneratedChips(chips);
+        }
+        catch (error) {
+            console.error("Erreur lors de la génération des chips:", error);
+            setShowPromptPanel(false);
+        }
+    };
+    const parseChipsFromResponse = (response) => {
+        return response
+            .split(/[,;]/)
+            .map((chip) => chip.trim())
+            .filter(Boolean)
+            .slice(0, 10); // Limiter à 10 tags
+    };
+    const addGeneratedChips = (chips) => {
+        const updatedChips = [...value];
+        chips.forEach((chip) => {
+            if (maxChips && updatedChips.length >= maxChips)
+                return;
+            if (!allowDuplicates && updatedChips.includes(chip))
+                return;
+            updatedChips.push(chip);
+        });
+        onChange?.(updatedChips);
+    };
+    console.log("AiChipInput render - value:", value, "length:", value.length);
+    return (_jsxs("div", { className: className, children: [_jsxs("div", { style: { position: "relative", marginBottom: "8px" }, children: [_jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: (e) => setInputValue(e.target.value), onKeyDown: handleKeyDown, placeholder: placeholder, style: {
+                            ...aiStyles.input,
+                            paddingRight: "40px", // Space for button
+                        } }), _jsx("button", { onClick: handleGenerateChips, style: {
+                            position: "absolute",
+                            right: "8px",
+                            top: "50%",
+                            transform: "translateY(-50%)",
+                            background: "none",
+                            border: "none",
+                            cursor: "pointer",
+                            padding: "4px",
+                            borderRadius: "4px",
+                            display: "flex",
+                            alignItems: "center",
+                            color: "#6366f1",
+                        }, title: "G\u00E9n\u00E9rer des tags avec l'IA", children: _jsx(Sparkles, { size: 16 }) })] }), value.length > 0 && (_jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "6px" }, children: value.map((chip, index) => {
+                    console.log("Rendering chip:", chip, "at index:", index);
+                    return (_jsxs("div", { style: {
+                            ...aiStyles.chip,
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "6px",
+                            paddingRight: "6px",
+                        }, children: [_jsx("span", { children: chip }), _jsx("button", { onClick: () => removeChip(index), style: {
+                                    background: "none",
+                                    border: "none",
+                                    cursor: "pointer",
+                                    padding: "0",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    color: "currentColor",
+                                    opacity: 0.7,
+                                }, title: "Supprimer", children: _jsx(X, { size: 14 }) })] }, index));
+                }) })), _jsx(AiPromptPanel, { isOpen: showPromptPanel, onClose: () => setShowPromptPanel(false), onSubmit: handlePromptSubmit, models: models || undefined, baseUrl: baseUrl, sourceText: context ? `Contexte: ${context}` : undefined })] }));
+}

package/dist/components/AiContextButton.d.ts

@@ -0,0 +1,18 @@
+import { type ButtonHTMLAttributes } from "react";
+import type { BaseAiProps } from "../types";
+export interface AiContextButtonProps extends Omit<BaseAiProps, "onValue" | "type">, Omit<ButtonHTMLAttributes<HTMLButtonElement>, "baseUrl" | "apiKeyId"> {
+    contextData: any;
+    contextDescription?: string;
+    onResult?: (result: string, metadata?: {
+        requestId: string;
+        tokens: number;
+    }) => void;
+    uiMode?: "modal" | "drawer";
+    resultModalTitle?: string;
+    storeOutputs?: boolean;
+    artifactTitle?: string;
+    baseUrl?: string;
+    apiKeyId?: string;
+}
+export declare function AiContextButton({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMode, contextData, contextDescription, onResult, onToast, disabled, className, children, resultModalTitle, storeOutputs, artifactTitle, context: _context, model: _model, prompt: _prompt, ...buttonProps }: AiContextButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AiContextButton.d.ts.map

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

@@ -0,0 +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;AAQ5C,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,2CAsftB"}

package/dist/components/AiContextButton.js

@@ -0,0 +1,339 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Loader2, X, FileText, Sparkle, Download } from "lucide-react";
+import { useAiCallText } from "../hooks/useAiCallText";
+import { useAiModels } from "../hooks/useAiModels";
+import { AiPromptPanel } from "./AiPromptPanel";
+import { useUsageToast } from "./UsageToast";
+import { aiStyles } from "../styles/inline";
+import { useAiContext } from "../context/AiProvider";
+export function AiContextButton({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMode = "modal", contextData, contextDescription = "Données à analyser", onResult, onToast, disabled, className, children, resultModalTitle = "Résultat de l'analyse", storeOutputs, artifactTitle, context: _context, model: _model, prompt: _prompt, ...buttonProps }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isResultOpen, setIsResultOpen] = useState(false);
+    const [analysisResult, setAnalysisResult] = useState(null);
+    const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
+    // Récupérer le contexte AiProvider avec fallback sur les props
+    const aiContext = useAiContext();
+    const baseUrl = propBaseUrl ?? aiContext.baseUrl;
+    const apiKeyId = propApiKeyId ?? aiContext.apiKeyId;
+    const { models, loading: modelsLoading } = useAiModels({ baseUrl, apiKeyId });
+    const { generateText: callText, loading } = useAiCallText({
+        baseUrl,
+        apiKeyId,
+    });
+    const handleOpenPanel = () => {
+        console.log("Opening panel, models:", models, "loading:", modelsLoading);
+        setIsOpen(true);
+    };
+    const handleClosePanel = () => {
+        setIsOpen(false);
+    };
+    const handleCloseResult = () => {
+        setIsResultOpen(false);
+        setAnalysisResult(null);
+    };
+    const saveToFile = () => {
+        if (!analysisResult)
+            return;
+        const currentDate = new Date()
+            .toLocaleDateString("fr-FR")
+            .replace(/\//g, "-");
+        const defaultName = `analyse-${currentDate}.txt`;
+        const fileName = prompt("Nom du fichier :", defaultName) || defaultName;
+        const content = `ANALYSE DES DONNÉES - ${new Date().toLocaleString("fr-FR")}
+
+PROMPT UTILISÉ :
+${analysisResult.prompt}
+
+RÉSULTAT DE L'ANALYSE :
+${analysisResult.content}
+
+--- MÉTADONNÉES ---
+Tokens utilisés: ${analysisResult.tokens.toLocaleString()}
+Coût: $${(apiKeyId?.includes("dev") ? 0 : analysisResult.cost).toFixed(6)}
+ID de requête: ${analysisResult.requestId || "N/A"}
+Date: ${new Date().toLocaleString("fr-FR")}`;
+        const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = fileName.endsWith(".txt") ? fileName : `${fileName}.txt`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    };
+    // Styles selon le thème
+    const getThemeStyles = () => {
+        const isDark = typeof document !== "undefined" &&
+            (document.documentElement.classList.contains("dark") ||
+                (!document.documentElement.classList.contains("light") &&
+                    window.matchMedia("(prefers-color-scheme: dark)").matches));
+        return {
+            modal: {
+                backgroundColor: isDark ? "#1f2937" : "white",
+                border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
+                color: isDark ? "#f3f4f6" : "#374151",
+            },
+            header: {
+                color: isDark ? "#f9fafb" : "#1f2937",
+                borderBottom: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
+            },
+            content: {
+                backgroundColor: isDark ? "#111827" : "#f9fafb",
+                border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
+            },
+            closeButton: {
+                color: isDark ? "#9ca3af" : "#6b7280",
+                hoverColor: isDark ? "#d1d5db" : "#374151",
+            },
+        };
+    };
+    const formatContextData = (data) => {
+        if (typeof data === "string")
+            return data;
+        if (typeof data === "object" && data !== null) {
+            return JSON.stringify(data, null, 2);
+        }
+        return String(data);
+    };
+    const handleSubmit = async (selectedModel, selectedPrompt) => {
+        try {
+            // Construire le prompt avec le contexte
+            const contextString = formatContextData(contextData);
+            const fullPrompt = `${selectedPrompt}
+
+CONTEXTE (${contextDescription}):
+${contextString}
+
+Analyse ces données et réponds de manière structurée et claire.`;
+            const result = await callText({
+                prompt: fullPrompt,
+                model: selectedModel || "gpt-4o-mini",
+                context: _context || undefined,
+                maxTokens: 4000,
+                temperature: 0.7,
+            });
+            if (result.text) {
+                // Calculer le total des tokens depuis la réponse réelle
+                const resultAny = result;
+                const totalTokens = (resultAny.inputTokens || 0) + (resultAny.outputTokens || 0) ||
+                    result.debitTokens ||
+                    0;
+                const actualCost = resultAny.cost || 0;
+                const resultData = {
+                    content: result.text,
+                    prompt: selectedPrompt,
+                    requestId: result.requestId,
+                    tokens: totalTokens,
+                    cost: actualCost,
+                };
+                setAnalysisResult(resultData);
+                setIsResultOpen(true);
+                onResult?.(result.text, {
+                    requestId: result.requestId,
+                    tokens: result.debitTokens || 0,
+                });
+                onToast?.({
+                    type: "success",
+                    message: `Analyse terminée - Coût: $${(apiKeyId?.includes("dev") ? 0 : actualCost).toFixed(6)}`,
+                });
+                // Afficher le toast de coût
+                showUsageToast({
+                    requestId: result.requestId,
+                    debitTokens: totalTokens,
+                    usage: {
+                        total_tokens: totalTokens,
+                        prompt_tokens: resultAny.inputTokens || 0,
+                        completion_tokens: resultAny.outputTokens || 0,
+                    },
+                    cost: apiKeyId?.includes("dev") ? 0 : actualCost,
+                });
+            }
+        }
+        catch (error) {
+            onToast?.({
+                type: "error",
+                message: "Erreur lors de l'analyse",
+                code: error instanceof Error ? error.message : undefined,
+            });
+        }
+        finally {
+            setIsOpen(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { ...buttonProps, onClick: handleOpenPanel, disabled: disabled || loading, className: className, style: {
+                            ...aiStyles.button,
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px",
+                            cursor: disabled || loading ? "not-allowed" : "pointer",
+                            opacity: disabled || loading ? 0.6 : 1,
+                            backgroundColor: loading ? "#8b5cf6" : "#7c3aed",
+                            color: "white",
+                            border: "none",
+                            borderRadius: "12px",
+                            // padding: "12px 20px",
+                            margin: "0px 8px",
+                            fontSize: "14px",
+                            fontWeight: "600",
+                            minWidth: "20px",
+                            height: "44px",
+                            transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+                            boxShadow: loading
+                                ? "0 4px 12px rgba(139, 92, 246, 0.3)"
+                                : "0 2px 8px rgba(124, 58, 237, 0.2)",
+                            transform: "scale(1)",
+                            ...(loading && {
+                                background: "linear-gradient(135deg, #7c3aed, #8b5cf6)",
+                                animation: "pulse 2s ease-in-out infinite",
+                            }),
+                            ...buttonProps.style,
+                        }, onMouseEnter: (e) => {
+                            if (!disabled && !loading) {
+                                e.currentTarget.style.transform = "scale(1.02)";
+                                e.currentTarget.style.boxShadow =
+                                    "0 6px 16px rgba(124, 58, 237, 0.3)";
+                            }
+                        }, onMouseLeave: (e) => {
+                            if (!disabled && !loading) {
+                                e.currentTarget.style.transform = "scale(1)";
+                                e.currentTarget.style.boxShadow = loading
+                                    ? "0 4px 12px rgba(139, 92, 246, 0.3)"
+                                    : "0 2px 8px rgba(124, 58, 237, 0.2)";
+                            }
+                        }, onMouseDown: (e) => {
+                            if (!disabled && !loading) {
+                                e.currentTarget.style.transform = "scale(0.98)";
+                            }
+                        }, onMouseUp: (e) => {
+                            if (!disabled && !loading) {
+                                e.currentTarget.style.transform = "scale(1.02)";
+                            }
+                        }, "data-ai-context-button": true, children: loading ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { size: 18, className: "animate-spin", style: {
+                                        color: "white",
+                                        filter: "drop-shadow(0 0 2px rgba(255,255,255,0.3))",
+                                    } }), _jsx("span", { style: { letterSpacing: "0.025em" }, children: "Analyse..." })] })) : (_jsx(_Fragment, { children: _jsx(Sparkle, { size: 18, style: {
+                                    color: "white",
+                                    filter: "drop-shadow(0 0 2px rgba(255,255,255,0.2))",
+                                } }) })) }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models?.filter((m) => m.type === "language") || [], enableModelManagement: true }))] }), isResultOpen && analysisResult && (_jsx("div", { style: {
+                    position: "fixed",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    backgroundColor: "rgba(0, 0, 0, 0.5)",
+                    backdropFilter: "blur(8px)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    zIndex: 1000,
+                    padding: "20px",
+                }, onClick: (e) => {
+                    if (e.target === e.currentTarget) {
+                        handleCloseResult();
+                    }
+                }, children: _jsx("div", { style: {
+                        maxWidth: "800px",
+                        position: "relative",
+                        width: "100%",
+                        maxHeight: "90vh",
+                        borderRadius: "16px",
+                        boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1)",
+                        overflow: "hidden",
+                        ...getThemeStyles().modal,
+                    }, children: _jsxs("div", { style: {
+                            padding: "20px 24px 16px",
+                            marginBottom: "12px",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "12px",
+                            flexDirection: "column",
+                            justifyContent: "space-between",
+                            ...getThemeStyles().header,
+                        }, children: [_jsxs("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: "12px",
+                                }, children: [_jsx(FileText, { size: 20 }), _jsx("h2", { style: {
+                                            fontSize: "18px",
+                                            fontWeight: "600",
+                                            margin: 0,
+                                        }, children: resultModalTitle })] }), _jsxs("div", { style: { display: "flex", gap: "8px" }, children: [_jsxs("button", { onClick: saveToFile, style: {
+                                            padding: "8px 12px",
+                                            borderRadius: "6px",
+                                            backgroundColor: "transparent",
+                                            border: `1px solid ${getThemeStyles().closeButton.color}30`,
+                                            cursor: "pointer",
+                                            color: getThemeStyles().closeButton.color,
+                                            transition: "all 0.2s",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            gap: "6px",
+                                            fontSize: "12px",
+                                        }, onMouseEnter: (e) => {
+                                            e.currentTarget.style.backgroundColor =
+                                                getThemeStyles().closeButton.hoverColor + "10";
+                                            e.currentTarget.style.color =
+                                                getThemeStyles().closeButton.hoverColor;
+                                        }, onMouseLeave: (e) => {
+                                            e.currentTarget.style.backgroundColor = "transparent";
+                                            e.currentTarget.style.color =
+                                                getThemeStyles().closeButton.color;
+                                        }, title: "T\u00E9l\u00E9charger l'analyse", children: [_jsx(Download, { size: 14 }), "Sauvegarder"] }), _jsx("button", { onClick: handleCloseResult, style: {
+                                            position: "absolute",
+                                            top: "16px",
+                                            right: "16px",
+                                            padding: "4px",
+                                            borderRadius: "6px",
+                                            backgroundColor: "transparent",
+                                            border: "none",
+                                            cursor: "pointer",
+                                            color: getThemeStyles().closeButton.color,
+                                            transition: "color 0.2s",
+                                        }, onMouseEnter: (e) => {
+                                            e.currentTarget.style.color =
+                                                getThemeStyles().closeButton.hoverColor;
+                                        }, onMouseLeave: (e) => {
+                                            e.currentTarget.style.color =
+                                                getThemeStyles().closeButton.color;
+                                        }, children: _jsx(X, { size: 18 }) })] }), _jsxs("div", { style: {
+                                    padding: "0 24px 24px",
+                                    overflow: "auto",
+                                    maxHeight: "calc(90vh - 80px)",
+                                }, children: [_jsxs("div", { style: { marginBottom: "20px" }, children: [_jsx("h3", { style: {
+                                                    fontSize: "14px",
+                                                    fontWeight: "600",
+                                                    marginBottom: "8px",
+                                                    color: getThemeStyles().modal.color,
+                                                }, children: "Prompt utilis\u00E9 :" }), _jsx("div", { style: {
+                                                    padding: "12px",
+                                                    borderRadius: "8px",
+                                                    fontSize: "13px",
+                                                    fontFamily: "monospace",
+                                                    ...getThemeStyles().content,
+                                                }, children: analysisResult.prompt })] }), _jsxs("div", { children: [_jsx("h3", { style: {
+                                                    fontSize: "14px",
+                                                    fontWeight: "600",
+                                                    marginBottom: "12px",
+                                                    color: getThemeStyles().modal.color,
+                                                }, children: "R\u00E9sultat de l'analyse :" }), _jsx("div", { style: {
+                                                    padding: "16px",
+                                                    borderRadius: "8px",
+                                                    lineHeight: "1.6",
+                                                    fontSize: "14px",
+                                                    whiteSpace: "pre-wrap",
+                                                    ...getThemeStyles().content,
+                                                }, children: analysisResult.content })] }), _jsx("div", { style: { height: "120px" }, children: _jsxs("div", { style: {
+                                                marginTop: "20px",
+                                                padding: "12px",
+                                                fontSize: "12px",
+                                                borderRadius: "8px",
+                                                display: "flex",
+                                                justifyContent: "space-between",
+                                                ...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"] })] }) })] })] }) }) }))] }));
+}

package/dist/components/AiImageButton.d.ts

@@ -1,8 +1,17 @@
 import { type ButtonHTMLAttributes } from "react";
 import type { BaseAiProps } from "../types";
-export interface AiImageButtonProps extends Omit<BaseAiProps, "onValue" | "type">, ButtonHTMLAttributes<HTMLButtonElement> {
-    onImage?: (imageUrl: string) => void;
+export interface AiImageButtonProps extends Omit<BaseAiProps, "onValue" | "type">, Omit<ButtonHTMLAttributes<HTMLButtonElement>, "baseUrl" | "apiKeyId"> {
+    onImage?: (imageUrl: string, metadata?: {
+        requestId: string;
+        tokens: number;
+    }) => void;
     uiMode?: "modal" | "drawer";
+    showImageCard?: boolean;
+    onImageSave?: (url: string) => Promise<void>;
+    storeOutputs?: boolean;
+    artifactTitle?: string;
+    baseUrl?: string;
+    apiKeyId?: string;
 }
-export declare function AiImageButton({ baseUrl, apiKeyId, uiMode, context, model, prompt, onImage, onToast, disabled, className, children, ...buttonProps }: AiImageButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function AiImageButton({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMode, context: _context, model: _model, prompt: _prompt, onImage, onToast, disabled, className, children, showImageCard, onImageSave, storeOutputs, artifactTitle, ...buttonProps }: AiImageButtonProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AiImageButton.d.ts.map

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;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"}
+{"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;AAQ5C,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,2CAuYpB"}