@lastbrain/module-ai 2.0.18 → 2.0.30

package/dist/web/components/ImageGenerative.js

@@ -1,22 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useCallback } from "react";
-import { useModuleTranslation } from "@lastbrain/core";
-import { Button, Chip, Progress, Card, CardBody, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Textarea, Select, SelectItem, addToast, } from "@lastbrain/ui";
+import { useState, useCallback, useEffect } from "react";
+import { logger, useModuleTranslation } from "@lastbrain/core";
+import { Button, Chip, Progress, Card, CardBody, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Textarea, Select, SelectItem, addToast, AppLink, } from "@lastbrain/ui";
 import { Image as ImageIcon, Loader2, AlertCircle, Download, Wand2, } from "lucide-react";
 import Image from "next/image";
-// Coût en tokens par combinaison modèle/taille(/qualité)
-const TOKENS_PER_IMAGE_KEY = {
-    "dall-e-2-256x256": 3000,
-    "dall-e-2-512x512": 4000,
-    "dall-e-2-1024x1024": 5000,
-    "dall-e-3-1024x1024-standard": 6000,
-    "dall-e-3-1024x1024-hd": 8000,
-    "dall-e-3-1024x1792-standard": 8000,
-    "dall-e-3-1024x1792-hd": 10000,
-    "dall-e-3-1792x1024-standard": 8000,
-    "dall-e-3-1792x1024-hd": 10000,
-};
 const imageStyles = [
     {
         key: "realistic",
@@ -46,31 +34,151 @@ const imageStyles = [
         description: "Peinture à l'aquarelle",
     },
     { key: "pop-art", label: "Pop Art", description: "Style pop art vibrant" },
+    // 🔥 Styles ajoutés
+    {
+        key: "oil-painting",
+        label: "Peinture à l'huile",
+        description: "Textures riches, style classique",
+    },
+    {
+        key: "pixel-art",
+        label: "Pixel Art",
+        description: "Graphismes rétro pixelisés",
+    },
+    {
+        key: "low-poly",
+        label: "Low Poly",
+        description: "Modélisation simple en polygones",
+    },
+    {
+        key: "cyberpunk",
+        label: "Cyberpunk",
+        description: "Esthétique futuriste néon sombre",
+    },
+    {
+        key: "noir",
+        label: "Film Noir",
+        description: "Ambiance dramatique noir et blanc",
+    },
+    {
+        key: "vaporwave",
+        label: "Vaporwave",
+        description: "Style rétro futur rose/bleu pastel",
+    },
+    {
+        key: "fantasy",
+        label: "Fantasy",
+        description: "Univers magique et héros épiques",
+    },
+    {
+        key: "comic-book",
+        label: "Comic Book",
+        description: "Style bande dessinée américaine",
+    },
+    {
+        key: "flat-design",
+        label: "Flat Design",
+        description: "Illustration minimaliste sans ombres",
+    },
+    {
+        key: "isometric",
+        label: "Isométrique",
+        description: "Perspective 3D isométrique",
+    },
+    {
+        key: "steampunk",
+        label: "Steampunk",
+        description: "Univers mécanique rétro industriel",
+    },
+    {
+        key: "cinematic",
+        label: "Cinematic",
+        description: "Style film avec mise en scène dramatique",
+    },
+    {
+        key: "retro",
+        label: "Rétro",
+        description: "Style années 80/90",
+    },
+    {
+        key: "minimalist",
+        label: "Minimaliste",
+        description: "Formes simples, ambiance épurée",
+    },
+    {
+        key: "neon",
+        label: "Néon",
+        description: "Glow électrique et couleurs vibrantes",
+    },
+    {
+        key: "line-art",
+        label: "Line Art",
+        description: "Illustration en lignes fines",
+    },
+    {
+        key: "pastel",
+        label: "Pastel",
+        description: "Couleurs douces et lumineuses",
+    },
+    {
+        key: "dark-fantasy",
+        label: "Dark Fantasy",
+        description: "Fantasy sombre, atmosphère dramatique",
+    },
+    {
+        key: "surreal",
+        label: "Surréaliste",
+        description: "Style rêve éveillé, étrange",
+    },
+    {
+        key: "photographic-food",
+        label: "Gastronomique",
+        description: "Photo culinaire professionnelle",
+    },
 ];
-export function ImageGenerative({ defaultPrompt = "", model = "dall-e-3", size = "1024x1024", quality = "standard", onChange, onError, className, disabled = false, apiEndpoint = "/api/ai/generate-image", showTokenBalance = true, label, description, defaultStyle = "realistic", hideStyleEditor = false, uploadPath, preview = true, inline = false, }) {
+export function ImageGenerative({ defaultPrompt = "", model, size = "1024x1024", quality = "standard", onChange, onError, className, disabled = false, apiEndpoint = "/api/ai/generate-image", showTokenBalance = true, label, description, defaultStyle = "realistic", hideStyleEditor = false, hideModelSelector = false, uploadPath, preview = true, inline = false, autoGenerate = false, }) {
     const t = useModuleTranslation("ai");
     const [isGenerating, setIsGenerating] = useState(false);
     const [generatedImage, setGeneratedImage] = useState(null);
     const [error, setError] = useState(null);
     const [tokenBalance, setTokenBalance] = useState(null);
+    const [defaultModel, setDefaultModel] = useState(null);
     // Modal state
     const [isModalOpen, setIsModalOpen] = useState(false);
     const [userPrompt, setUserPrompt] = useState(defaultPrompt);
     const [selectedStyle, setSelectedStyle] = useState(defaultStyle);
-    const [selectedModel, setSelectedModel] = useState(model);
+    const [selectedModel, setSelectedModel] = useState(model || null);
     const [selectedSize, setSelectedSize] = useState(size);
     const [selectedQuality, setSelectedQuality] = useState(quality);
-    // Calculer le coût estimé
-    const estimatedCost = () => {
-        let key = "";
-        if (selectedModel === "dall-e-2") {
-            key = `${selectedModel}-${selectedSize}`;
-        }
-        else {
-            key = `${selectedModel}-${selectedSize}-${selectedQuality}`;
+    // Fetch global AI settings on mount to get default image model
+    useEffect(() => {
+        async function fetchDefaultModel() {
+            try {
+                const res = await fetch("/api/ai/admin/global-ai-settings");
+                if (res.ok) {
+                    const data = await res.json();
+                    const globalModel = `${data.default_image_provider}/${data.default_image_model}`;
+                    setDefaultModel(globalModel);
+                    // Set selected model to global default if no model prop provided
+                    if (!model) {
+                        setSelectedModel(globalModel);
+                    }
+                }
+            }
+            catch (err) {
+                logger.error("[ImageGenerative] Failed to fetch default model", err);
+                // Fallback to a hardcoded model if fetch fails
+                const fallback = "google/gemini-2.5-flash-image";
+                setDefaultModel(fallback);
+                if (!model) {
+                    setSelectedModel(fallback);
+                }
+            }
         }
-        return TOKENS_PER_IMAGE_KEY[key] || 0;
-    };
+        fetchDefaultModel();
+    }, [model]);
+    // Le coût réel est calculé par l'API
+    const estimatedCostText = () => "Variable (selon le modèle)";
     const handleGenerate = useCallback(async () => {
         if (!userPrompt || isGenerating)
             return;
@@ -98,9 +206,11 @@ export function ImageGenerative({ defaultPrompt = "", model = "dall-e-3", size =
                     "Erreur lors de la génération");
             }
             const data = await response.json();
+            // Prefer supabaseImageUrl as the primary imageUrl for usage in the app
+            const primaryImageUrl = data.supabaseImageUrl || data.imageUrl || null;
             const imageResponse = {
                 supabaseImageUrl: data.supabaseImageUrl,
-                imageUrl: data.imageUrl,
+                imageUrl: primaryImageUrl,
                 tokensUsed: data.tokensUsed || 0,
                 tokensRemaining: data.tokensRemaining || 0,
                 model: data.model || selectedModel,
@@ -115,7 +225,9 @@ export function ImageGenerative({ defaultPrompt = "", model = "dall-e-3", size =
                 description: `${imageResponse.tokensUsed} ${t("toast.tokens_used") || "tokens utilisés"}, ${imageResponse.tokensRemaining} ${t("toast.remaining") || "restants"}`,
             });
             if (onChange) {
-                onChange(data.imageUrl, imageResponse);
+                // Pass supabaseImageUrl first when available, otherwise fallback to imageUrl
+                const changeSrc = data.supabaseImageUrl || data.imageUrl || null;
+                onChange(changeSrc, imageResponse);
             }
         }
         catch (err) {
@@ -146,30 +258,80 @@ export function ImageGenerative({ defaultPrompt = "", model = "dall-e-3", size =
         onError,
         isGenerating,
     ]);
+    // Reset local prompt when defaultPrompt changes (e.g. recipe loaded)
+    useEffect(() => {
+        setUserPrompt(defaultPrompt || "");
+    }, [defaultPrompt]);
     const handleDownload = useCallback(async () => {
-        if (!generatedImage?.imageUrl)
+        const imageSrc = generatedImage?.imageUrl || generatedImage?.supabaseImageUrl || null;
+        if (!imageSrc)
             return;
         try {
-            const response = await fetch(generatedImage.imageUrl);
-            const blob = await response.blob();
-            const url = window.URL.createObjectURL(blob);
-            const link = document.createElement("a");
-            link.href = url;
-            link.download = `generated-image-${Date.now()}.png`;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            window.URL.revokeObjectURL(url);
+            if (typeof imageSrc === "string" && imageSrc.startsWith("data:")) {
+                // data URL -> convert base64 to blob
+                const parts = imageSrc.split(",");
+                const meta = parts[0];
+                const b64 = parts[1] || "";
+                const contentTypeMatch = meta.match(/data:(.*);base64/);
+                const contentType = contentTypeMatch
+                    ? contentTypeMatch[1]
+                    : "image/png";
+                const byteCharacters = atob(b64);
+                const byteNumbers = new Array(byteCharacters.length);
+                for (let i = 0; i < byteCharacters.length; i++) {
+                    byteNumbers[i] = byteCharacters.charCodeAt(i);
+                }
+                const byteArray = new Uint8Array(byteNumbers);
+                const blob = new Blob([byteArray], { type: contentType });
+                const url = window.URL.createObjectURL(blob);
+                const link = document.createElement("a");
+                link.href = url;
+                link.download = `generated-image-${Date.now()}.png`;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                window.URL.revokeObjectURL(url);
+            }
+            else {
+                // If imageSrc is a storage path (e.g. "app/.../file.png"), fetch via proxy
+                const fetchUrl = typeof imageSrc === "string" &&
+                    !imageSrc.startsWith("http") &&
+                    !imageSrc.startsWith("/")
+                    ? `/api/storage/${imageSrc}`
+                    : imageSrc;
+                const response = await fetch(fetchUrl);
+                const blob = await response.blob();
+                const url = window.URL.createObjectURL(blob);
+                const link = document.createElement("a");
+                link.href = url;
+                link.download = `generated-image-${Date.now()}.png`;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                window.URL.revokeObjectURL(url);
+            }
         }
         catch (error) {
-            console.error(t("error.download_failed") || "Erreur lors du téléchargement:", error);
+            logger.error(t("error.download_failed") || "Erreur lors du téléchargement:", error);
         }
     }, [generatedImage]);
-    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: "flex flex-col gap-4", children: [label && _jsx("label", { className: "text-sm font-medium", children: label }), description && _jsx("p", { className: "text-sm text-gray-500", children: description }), generatedImage && !isGenerating && preview && (_jsx(Card, { children: _jsxs(CardBody, { children: [_jsx("div", { className: "relative w-full aspect-square", children: _jsx(Image, { src: generatedImage.imageUrl, alt: generatedImage.prompt, fill: true, className: "object-contain rounded-lg", priority: true }) }), _jsxs("div", { className: "mt-4", children: [_jsxs("p", { className: "text-sm text-default-600", children: [_jsx("strong", { children: t("image.prompt_label") || "Prompt:" }), " ", generatedImage.prompt] }), _jsxs("p", { className: "text-xs text-default-400 mt-1", children: [selectedSize, " \u2022 ", selectedQuality] })] })] }) })), inline ? (_jsxs("div", { className: "space-y-4", children: [_jsx(Textarea, { label: t("image.description_label") || "Description de l'image", placeholder: t("image.description_placeholder") ||
+    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: "flex flex-col gap-4", children: [label && _jsx("label", { className: "text-sm font-medium", children: label }), description && _jsx("p", { className: "text-sm text-gray-500", children: description }), generatedImage && !isGenerating && preview && (_jsx(Card, { children: _jsxs(CardBody, { children: [_jsx("div", { className: "relative w-full aspect-square", children: (() => {
+                                        const imageSrc = generatedImage.imageUrl ||
+                                            generatedImage.supabaseImageUrl ||
+                                            "";
+                                        if (typeof imageSrc === "string" &&
+                                            imageSrc.startsWith("data:")) {
+                                            return (_jsx("img", { src: imageSrc, alt: generatedImage.prompt, className: "object-contain rounded-lg w-full h-full", style: { objectFit: "contain" } }));
+                                        }
+                                        if (imageSrc) {
+                                            return (_jsx(Image, { src: imageSrc, alt: generatedImage.prompt, fill: true, className: "object-contain rounded-lg", priority: true }));
+                                        }
+                                        return null;
+                                    })() }), _jsxs("div", { className: "mt-4", children: [_jsxs("p", { className: "text-sm text-default-600", children: [_jsx("strong", { children: t("image.prompt_label") || "Prompt:" }), " ", generatedImage.prompt] }), _jsxs("p", { className: "text-xs text-default-400 mt-1", children: [selectedSize, " \u2022 ", selectedQuality] })] })] }) })), inline ? (_jsxs("div", { className: "space-y-4", children: [_jsx(Textarea, { label: t("image.description_label") || "Description de l'image", placeholder: t("image.description_placeholder") ||
                                     "Décrivez l'image que vous souhaitez générer...", value: userPrompt, onChange: (e) => setUserPrompt(e.target.value), minRows: 3, description: t("image.description_help") ||
                                     "Soyez précis et détaillé pour de meilleurs résultats" }), !hideStyleEditor && (_jsxs(_Fragment, { children: [_jsx(Select, { label: t("image.style_label") || "Style artistique", selectedKeys: [selectedStyle], onSelectionChange: (keys) => setSelectedStyle(Array.from(keys)[0]), description: t("image.style_description") ||
                                             "Le style influence l'apparence finale de l'image", children: imageStyles.map((style) => (_jsx(SelectItem, { textValue: style.label, children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium", children: t(`image.style_${style.key}`) || style.label }), _jsx("span", { className: "text-xs text-gray-500", children: t(`image.style_${style.key}_desc`) ||
-                                                            style.description })] }) }, style.key))) }), _jsxs(Select, { label: t("image.model_label") || "Modèle IA", selectedKeys: [selectedModel], onSelectionChange: (keys) => {
+                                                            style.description })] }) }, style.key))) }), !hideModelSelector && (_jsxs(Select, { label: t("image.model_label") || "Modèle IA", selectedKeys: selectedModel ? [selectedModel] : [], onSelectionChange: (keys) => {
                                             const newModel = Array.from(keys)[0];
                                             setSelectedModel(newModel);
                                             if (newModel === "dall-e-2") {
@@ -179,16 +341,29 @@ export function ImageGenerative({ defaultPrompt = "", model = "dall-e-3", size =
                                                 }
                                             }
                                         }, description: t("image.model_description") ||
-                                            "DALL-E 3 offre la meilleure qualité", children: [_jsx(SelectItem, { children: t("image.model_dalle3") || "DALL-E 3 (Haute qualité)" }, "dall-e-3"), _jsx(SelectItem, { children: t("image.model_dalle2") || "DALL-E 2 (Standard)" }, "dall-e-2")] }), _jsx(Select, { label: t("image.size_label") || "Taille de l'image", selectedKeys: [selectedSize], onSelectionChange: (keys) => setSelectedSize(Array.from(keys)[0]), description: t("image.size_description") ||
-                                            "Tailles disponibles selon le modèle", children: selectedModel === "dall-e-2" ? (_jsxs(_Fragment, { children: [_jsx(SelectItem, { children: "256\u00D7256 (3000 tokens)" }, "256x256"), _jsx(SelectItem, { children: "512\u00D7512 (4000 tokens)" }, "512x512"), _jsx(SelectItem, { children: "1024\u00D71024 (5000 tokens)" }, "1024x1024")] })) : (_jsxs(_Fragment, { children: [_jsx(SelectItem, { children: "1024\u00D71024 (6000-8000 tokens)" }, "1024x1024"), _jsx(SelectItem, { children: "1024\u00D71792 Portrait (8000-10000 tokens)" }, "1024x1792"), _jsx(SelectItem, { children: "1792\u00D71024 Paysage (8000-10000 tokens)" }, "1792x1024")] })) }), selectedModel === "dall-e-3" && (_jsxs(Select, { label: t("image.quality_label") || "Qualité", selectedKeys: [selectedQuality], onSelectionChange: (keys) => setSelectedQuality(Array.from(keys)[0]), description: t("image.quality_description") ||
-                                            "HD offre plus de détails mais coûte plus de tokens", children: [_jsx(SelectItem, { children: t("image.quality_standard") || "Standard" }, "standard"), _jsx(SelectItem, { children: t("image.quality_hd") || "HD (Haute Définition)" }, "hd")] })), _jsx("div", { className: "p-3 bg-primary-50 dark:bg-primary-900/20 rounded-lg", children: _jsxs("p", { className: "text-sm font-medium text-primary-700 dark:text-primary-300", children: [t("image.estimated_cost") || "Coût estimé:", " ", estimatedCost().toLocaleString(), " ", t("chip.tokens") || "tokens"] }) })] })), _jsx(Button, { color: "primary", onClick: handleGenerate, disabled: !userPrompt.trim() || disabled || isGenerating, startContent: isGenerating ? (_jsx(Loader2, { className: "animate-spin", size: 16 })) : (_jsx(Wand2, { size: 18 })), className: "w-full", children: isGenerating
+                                            "DALL-E 3 offre la meilleure qualité", children: [_jsx(SelectItem, { children: t("image.model_imagen") ||
+                                                    "Google Imagen 4.0 (Rapide & économique)" }, "google/imagen-4.0-fast-generate-001"), _jsx(SelectItem, { children: t("image.model_gptimage1") || "GPT Image 1 (Nouveau)" }, "gpt-image-1"), _jsx(SelectItem, { children: t("image.model_dalle3") || "DALL-E 3 (Haute qualité)" }, "dall-e-3"), _jsx(SelectItem, { children: t("image.model_dalle2") || "DALL-E 2 (Standard)" }, "dall-e-2")] })), _jsx(Select, { label: t("image.size_label") || "Taille de l'image", selectedKeys: [selectedSize], onSelectionChange: (keys) => setSelectedSize(Array.from(keys)[0]), description: t("image.size_description") ||
+                                            "Tailles disponibles selon le modèle", children: selectedModel === "dall-e-2" ? (_jsxs(_Fragment, { children: [_jsx(SelectItem, { children: "256\u00D7256 (3k tokens)" }, "256x256"), _jsx(SelectItem, { children: "512\u00D7512 (4k tokens)" }, "512x512"), _jsx(SelectItem, { children: "1024\u00D71024 (5k tokens)" }, "1024x1024")] })) : (_jsxs(_Fragment, { children: [_jsx(SelectItem, { children: "1024\u00D71024 (6k-8k tokens)" }, "1024x1024"), _jsx(SelectItem, { children: "1024\u00D71792 Portrait (8k-10k tokens)" }, "1024x1792"), _jsx(SelectItem, { children: "1792\u00D71024 Paysage (8k-10k tokens)" }, "1792x1024")] })) }), (selectedModel === "dall-e-3" ||
+                                        selectedModel === "gpt-image-1") && (_jsxs(Select, { label: t("image.quality_label") || "Qualité", selectedKeys: [selectedQuality], onSelectionChange: (keys) => setSelectedQuality(Array.from(keys)[0]), description: t("image.quality_description") ||
+                                            "HD offre plus de détails mais coûte plus de tokens", children: [_jsx(SelectItem, { children: t("image.quality_standard") || "Standard" }, "standard"), _jsx(SelectItem, { children: t("image.quality_hd") || "HD (Haute Définition)" }, "hd")] })), _jsx("div", { className: "p-3 bg-primary-50 dark:bg-primary-900/20 rounded-lg", children: _jsxs("p", { className: "text-sm font-medium text-primary-700 dark:text-primary-300", children: [t("image.estimated_cost") || "Coût:", " ", estimatedCostText()] }) })] })), _jsx(Button, { color: "primary", onClick: handleGenerate, disabled: !userPrompt.trim() || disabled || isGenerating, startContent: isGenerating ? (_jsx(Loader2, { className: "animate-spin", size: 16 })) : (_jsx(Wand2, { size: 18 })), className: "w-full", children: isGenerating
                                     ? t("button.generating") || "Génération..."
-                                    : t("button.generate") || "Générer" })] })) : (_jsx(Button, { color: "primary", onClick: () => setIsModalOpen(true), disabled: disabled || isGenerating, startContent: _jsx(Wand2, { size: 18 }), className: "w-full", children: isGenerating
+                                    : t("button.generate") || "Générer" })] })) : (_jsx(Button, { color: "primary", onPress: () => {
+                            if (autoGenerate) {
+                                void handleGenerate();
+                            }
+                            else {
+                                setIsModalOpen(true);
+                            }
+                        }, isDisabled: disabled || isGenerating, startContent: isGenerating ? (_jsx(Loader2, { className: "animate-spin", size: 16 })) : (_jsx(Wand2, { size: 18 })), className: "w-full", children: isGenerating
                             ? t("button.generating") || "Génération..."
-                            : t("button.generate_image") || "Générer une image" })), _jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [_jsx("div", { className: "flex items-center gap-2", children: showTokenBalance && tokenBalance !== null && (_jsxs(Chip, { size: "sm", variant: "flat", color: "success", children: [tokenBalance.toLocaleString(), " ", t("chip.tokens_remaining") || "tokens restants"] })) }), generatedImage && (_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsxs(Chip, { size: "sm", variant: "flat", children: [generatedImage.tokensUsed, " ", t("chip.tokens_used") || "tokens utilisés"] }), _jsx(Chip, { size: "sm", variant: "flat", color: "primary", children: generatedImage.model }), preview && (_jsx(Button, { size: "sm", variant: "flat", onClick: handleDownload, startContent: _jsx(Download, { size: 16 }), children: t("button.download") || "Télécharger" }))] }))] }), isGenerating && (_jsxs("div", { className: "space-y-2", children: [_jsx(Progress, { size: "sm", isIndeterminate: true, "aria-label": t("progress.generating_image") || "Génération en cours...", className: "max-w-md" }), _jsx("p", { className: "text-sm text-default-500", children: t("progress.image_generation_message") ||
-                                    "Génération de l'image en cours... Cela peut prendre quelques instants." })] })), error && (_jsxs("div", { className: "flex items-center gap-2 text-danger text-sm p-3 bg-danger-50 rounded-md", children: [_jsx(AlertCircle, { size: 16 }), _jsx("span", { children: error })] }))] }), _jsx(Modal, { backdrop: "blur", isOpen: isModalOpen, onClose: () => setIsModalOpen(false), size: "2xl", children: _jsxs(ModalContent, { children: [_jsx(ModalHeader, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ImageIcon, { size: 20 }), _jsx("span", { children: t("modal.image_title") || "Générer une image avec l'IA" })] }) }), _jsx(ModalBody, { children: _jsxs("div", { className: "space-y-4", children: [_jsx(Textarea, { label: t("image.description_label") || "Description de l'image", placeholder: t("image.description_placeholder") ||
+                            : autoGenerate
+                                ? t("button.generate") || "Générer"
+                                : t("button.generate_image") || "Générer une image" })), _jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [_jsx("div", { className: "flex items-center gap-2", children: showTokenBalance &&
+                                    tokenBalance !== null &&
+                                    tokenBalance !== undefined && (_jsxs(Chip, { size: "sm", variant: "flat", color: "success", children: [tokenBalance.toLocaleString(), " ", t("chip.tokens_remaining") || "tokens restants"] })) }), generatedImage && (_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsxs(Chip, { size: "sm", variant: "flat", children: [generatedImage.tokensUsed, " ", t("chip.tokens_used") || "tokens utilisés"] }), _jsx(Chip, { size: "sm", variant: "flat", color: "primary", children: generatedImage.model }), preview && (_jsx(Button, { size: "sm", variant: "flat", onClick: handleDownload, startContent: _jsx(Download, { size: 16 }), children: t("button.download") || "Télécharger" }))] }))] }), isGenerating && (_jsxs("div", { className: "space-y-2", children: [_jsx(Progress, { size: "sm", isIndeterminate: true, "aria-label": t("progress.generating_image") || "Génération en cours...", className: "max-w-md" }), _jsx("p", { className: "text-sm text-default-500", children: t("progress.image_generation_message") ||
+                                    "Génération de l'image en cours... Cela peut prendre quelques instants." })] })), error && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 text-danger text-sm p-3 bg-danger-50 rounded-md", children: [_jsx(AlertCircle, { size: 16 }), _jsx("span", { children: error })] }), _jsx(Button, { as: AppLink, href: `/auth/ai/token`, size: "sm", color: "warning", children: t("button.manage_tokens") || "Gérer les tokens" })] }))] }), _jsx(Modal, { backdrop: "blur", isOpen: isModalOpen, onClose: () => setIsModalOpen(false), size: "2xl", children: _jsxs(ModalContent, { children: [_jsx(ModalHeader, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(ImageIcon, { size: 20 }), _jsx("span", { children: t("modal.image_title") || "Générer une image avec l'IA" })] }) }), _jsx(ModalBody, { children: _jsxs("div", { className: "space-y-4", children: [_jsx(Textarea, { label: t("image.description_label") || "Description de l'image", placeholder: t("image.description_placeholder") ||
                                             "Décrivez l'image que vous souhaitez générer...", value: userPrompt, onChange: (e) => setUserPrompt(e.target.value), minRows: 3, description: t("image.description_help") ||
-                                            "Soyez précis et détaillé pour de meilleurs résultats" }), !hideStyleEditor && (_jsxs(_Fragment, { children: [_jsx(Select, { label: "Style artistique", selectedKeys: [selectedStyle], onSelectionChange: (keys) => setSelectedStyle(Array.from(keys)[0]), description: "Le style influence l'apparence finale de l'image", children: imageStyles.map((style) => (_jsx(SelectItem, { textValue: style.label, children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium", children: style.label }), _jsx("span", { className: "text-xs text-gray-500", children: style.description })] }) }, style.key))) }), _jsxs(Select, { label: "Mod\u00E8le IA", selectedKeys: [selectedModel], onSelectionChange: (keys) => {
+                                            "Soyez précis et détaillé pour de meilleurs résultats" }), !hideStyleEditor && (_jsxs(_Fragment, { children: [_jsx(Select, { label: "Style artistique", selectedKeys: [selectedStyle], onSelectionChange: (keys) => setSelectedStyle(Array.from(keys)[0]), description: "Le style influence l'apparence finale de l'image", children: imageStyles.map((style) => (_jsx(SelectItem, { textValue: style.label, children: _jsxs("div", { className: "flex flex-col", children: [_jsx("span", { className: "font-medium", children: style.label }), _jsx("span", { className: "text-xs text-gray-500", children: style.description })] }) }, style.key))) }), !hideModelSelector && (_jsxs(Select, { label: "Mod\u00E8le IA", selectedKeys: selectedModel ? [selectedModel] : [], onSelectionChange: (keys) => {
                                                     const newModel = Array.from(keys)[0];
                                                     setSelectedModel(newModel);
                                                     if (newModel === "dall-e-2") {
@@ -197,8 +372,21 @@ export function ImageGenerative({ defaultPrompt = "", model = "dall-e-3", size =
                                                             setSelectedSize("1024x1024");
                                                         }
                                                     }
-                                                }, description: "DALL-E 3 offre la meilleure qualit\u00E9", children: [_jsx(SelectItem, { children: "DALL-E 3 (Haute qualit\u00E9)" }, "dall-e-3"), _jsx(SelectItem, { children: "DALL-E 2 (Standard)" }, "dall-e-2")] }), _jsx(Select, { label: "Taille de l'image", selectedKeys: [selectedSize], onSelectionChange: (keys) => setSelectedSize(Array.from(keys)[0]), description: "Tailles disponibles selon le mod\u00E8le", children: selectedModel === "dall-e-2" ? (_jsxs(_Fragment, { children: [_jsx(SelectItem, { children: "256\u00D7256 (3000 tokens)" }, "256x256"), _jsx(SelectItem, { children: "512\u00D7512 (4000 tokens)" }, "512x512"), _jsx(SelectItem, { children: "1024\u00D71024 (5000 tokens)" }, "1024x1024")] })) : (_jsxs(_Fragment, { children: [_jsx(SelectItem, { children: "1024\u00D71024 (6000-8000 tokens)" }, "1024x1024"), _jsx(SelectItem, { children: "1024\u00D71792 Portrait (8000-10000 tokens)" }, "1024x1792"), _jsx(SelectItem, { children: "1792\u00D71024 Paysage (8000-10000 tokens)" }, "1792x1024")] })) }), selectedModel === "dall-e-3" && (_jsxs(Select, { label: "Qualit\u00E9", selectedKeys: [selectedQuality], onSelectionChange: (keys) => setSelectedQuality(Array.from(keys)[0]), description: "HD offre plus de d\u00E9tails mais co\u00FBte plus de tokens", children: [_jsx(SelectItem, { children: "Standard" }, "standard"), _jsx(SelectItem, { children: "HD (Haute D\u00E9finition)" }, "hd")] })), _jsx("div", { className: "p-3 bg-primary-50 dark:bg-primary-900/20 rounded-lg", children: _jsxs("p", { className: "text-sm font-medium text-primary-700 dark:text-primary-300", children: ["Co\u00FBt estim\u00E9: ", estimatedCost().toLocaleString(), " tokens"] }) })] })), generatedImage && (_jsxs("div", { className: "p-3 bg-gray-50 dark:bg-gray-800 rounded-lg", children: [_jsx("p", { className: "text-sm font-medium mb-2", children: t("image.current_preview") ||
-                                                    "Aperçu de l'image actuelle:" }), _jsx("div", { className: "relative w-full", children: _jsx(Image, { src: generatedImage.imageUrl, alt: "Current", fill: true, className: "object-cover rounded" }) })] }))] }) }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "light", onClick: () => setIsModalOpen(false), children: t("button.cancel") || "Annuler" }), _jsx(Button, { color: "primary", onClick: handleGenerate, disabled: !userPrompt.trim() || isGenerating, startContent: isGenerating ? (_jsx(Loader2, { className: "animate-spin", size: 16 })) : (_jsx(ImageIcon, { size: 16 })), children: isGenerating
+                                                }, description: "DALL-E 3 offre la meilleure qualit\u00E9", children: [_jsx(SelectItem, { children: "Google Imagen 4.0 (Rapide & \u00E9conomique)" }, "google/imagen-4.0-fast-generate-001"), _jsx(SelectItem, { children: "GPT Image 1 (Nouveau)" }, "gpt-image-1"), _jsx(SelectItem, { children: "DALL-E 3 (Haute qualit\u00E9)" }, "dall-e-3"), _jsx(SelectItem, { children: "DALL-E 2 (Standard)" }, "dall-e-2")] })), _jsx(Select, { label: "Taille de l'image", selectedKeys: [selectedSize], onSelectionChange: (keys) => setSelectedSize(Array.from(keys)[0]), description: "Tailles disponibles selon le mod\u00E8le", children: selectedModel === "dall-e-2" ? (_jsxs(_Fragment, { children: [_jsx(SelectItem, { children: "256\u00D7256 (3k tokens)" }, "256x256"), _jsx(SelectItem, { children: "512\u00D7512 (4k tokens)" }, "512x512"), _jsx(SelectItem, { children: "1024\u00D71024 (5k tokens)" }, "1024x1024")] })) : (_jsxs(_Fragment, { children: [_jsx(SelectItem, { children: "1024\u00D71024 (6k-8k tokens)" }, "1024x1024"), _jsx(SelectItem, { children: "1024\u00D71792 Portrait (8k-10k tokens)" }, "1024x1792"), _jsx(SelectItem, { children: "1792\u00D71024 Paysage (8k-10k tokens)" }, "1792x1024")] })) }), (selectedModel === "dall-e-3" ||
+                                                selectedModel === "gpt-image-1") && (_jsxs(Select, { label: "Qualit\u00E9", selectedKeys: [selectedQuality], onSelectionChange: (keys) => setSelectedQuality(Array.from(keys)[0]), description: "HD offre plus de d\u00E9tails mais co\u00FBte plus de tokens", children: [_jsx(SelectItem, { children: "Standard" }, "standard"), _jsx(SelectItem, { children: "HD (Haute D\u00E9finition)" }, "hd")] })), _jsx("div", { className: "p-3 bg-primary-50 dark:bg-primary-900/20 rounded-lg", children: _jsxs("p", { className: "text-sm font-medium text-primary-700 dark:text-primary-300", children: ["Co\u00FBt: ", estimatedCostText()] }) })] })), generatedImage && (_jsxs("div", { className: "p-3 bg-gray-50 dark:bg-gray-800 rounded-lg", children: [_jsx("p", { className: "text-sm font-medium mb-2", children: t("image.current_preview") ||
+                                                    "Aperçu de l'image actuelle:" }), _jsx("div", { className: "relative w-full", children: (() => {
+                                                    const imageSrc = generatedImage.imageUrl ||
+                                                        generatedImage.supabaseImageUrl ||
+                                                        "";
+                                                    if (typeof imageSrc === "string" &&
+                                                        imageSrc.startsWith("data:")) {
+                                                        return (_jsx("img", { src: imageSrc, alt: "Current", className: "object-cover rounded w-full h-auto", style: { maxHeight: 480 } }));
+                                                    }
+                                                    if (imageSrc) {
+                                                        return (_jsx(Image, { src: imageSrc, alt: "Current", fill: true, className: "object-cover rounded" }));
+                                                    }
+                                                    return null;
+                                                })() })] }))] }) }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "light", onClick: () => setIsModalOpen(false), children: t("button.cancel") || "Annuler" }), _jsx(Button, { color: "primary", onClick: handleGenerate, disabled: !userPrompt.trim() || isGenerating, startContent: isGenerating ? (_jsx(Loader2, { className: "animate-spin", size: 16 })) : (_jsx(ImageIcon, { size: 16 })), children: isGenerating
                                         ? t("button.generating") || "Génération..."
                                         : t("button.generate") || "Générer" })] })] }) })] }));
 }

package/dist/web/components/TextareaGenerative.d.ts

@@ -22,6 +22,8 @@ export interface TextareaGenerativeProps {
     description?: string;
     hidePromptEditor?: boolean;
     showStructuredResponse?: boolean;
+    maxLength?: number;
+    actionType?: "generate-text" | "generate-recipe-text" | "autocomplete";
 }
-export declare function TextareaGenerative({ defaultPrompt, model, placeholder, defaultValue, onChange, onError, className, disabled, minRows, maxRows, apiEndpoint, showTokenBalance, label, description, hidePromptEditor, showStructuredResponse, }: TextareaGenerativeProps): import("react/jsx-runtime").JSX.Element;
+export declare function TextareaGenerative({ defaultPrompt, model, placeholder, defaultValue, onChange, onError, className, disabled, minRows, maxRows, apiEndpoint, showTokenBalance, label, description, hidePromptEditor, maxLength, showStructuredResponse, actionType, }: TextareaGenerativeProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TextareaGenerative.d.ts.map

package/dist/web/components/TextareaGenerative.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextareaGenerative.d.ts","sourceRoot":"","sources":["../../../src/web/components/TextareaGenerative.tsx"],"names":[],"mappings":"AAqBA,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,uBAAuB;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,aAAkB,EAClB,KAAqB,EACrB,WAA6D,EAC7D,YAAiB,EACjB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,QAAgB,EAChB,OAAW,EACX,OAAY,EACZ,WAAqC,EACrC,gBAAuB,EACvB,KAAK,EACL,WAAW,EACX,gBAAwB,EACxB,sBAA8B,GAC/B,EAAE,uBAAuB,2CAuTzB"}
+{"version":3,"file":"TextareaGenerative.d.ts","sourceRoot":"","sources":["../../../src/web/components/TextareaGenerative.tsx"],"names":[],"mappings":"AAsBA,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,uBAAuB;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,eAAe,GAAG,sBAAsB,GAAG,cAAc,CAAC;CACxE;AAED,wBAAgB,kBAAkB,CAAC,EACjC,aAAkB,EAClB,KAAqB,EACrB,WAA6D,EAC7D,YAAiB,EACjB,QAAQ,EACR,OAAO,EACP,SAAS,EACT,QAAgB,EAChB,OAAW,EACX,OAAY,EACZ,WAAqC,EACrC,gBAAuB,EACvB,KAAK,EACL,WAAW,EACX,gBAAwB,EACxB,SAAgB,EAChB,sBAA8B,EAC9B,UAAU,GACX,EAAE,uBAAuB,2CA0UzB"}

package/dist/web/components/TextareaGenerative.js

@@ -1,10 +1,11 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useCallback } from "react";
 import { useModuleTranslation } from "@lastbrain/core";
-import { Textarea, Button, Chip, Progress, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Select, SelectItem, Skeleton, addToast, } from "@lastbrain/ui";
+import { Textarea, Button, Chip, Progress, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, Select, SelectItem, Skeleton, addToast, AppLink, } from "@lastbrain/ui";
 import { Sparkles, Loader2, AlertCircle, Wand2 } from "lucide-react";
-export function TextareaGenerative({ defaultPrompt = "", model = "gpt-4o-mini", placeholder = "Saisissez votre texte ou générez avec l'IA...", defaultValue = "", onChange, onError, className, disabled = false, minRows = 4, maxRows = 20, apiEndpoint = "/api/ai/generate-text", showTokenBalance = true, label, description, hidePromptEditor = false, showStructuredResponse = false, }) {
+export function TextareaGenerative({ defaultPrompt = "", model = "gpt-4o-mini", placeholder = "Saisissez votre texte ou générez avec l'IA...", defaultValue = "", onChange, onError, className, disabled = false, minRows = 4, maxRows = 20, apiEndpoint = "/api/ai/generate-text", showTokenBalance = true, label, description, hidePromptEditor = false, maxLength = 3000, showStructuredResponse = false, actionType, // Type d'action pour le billing
+ }) {
     const t = useModuleTranslation("ai");
     const [userInput, setUserInput] = useState(defaultValue);
     const [isGenerating, setIsGenerating] = useState(false);
@@ -36,7 +37,9 @@ export function TextareaGenerative({ defaultPrompt = "", model = "gpt-4o-mini",
                 headers: { "Content-Type": "application/json" },
                 body: JSON.stringify({
                     prompt: fullPrompt,
+                    promptUser: defaultValue,
                     model: hidePromptEditor ? model : selectedModel,
+                    actionType, // Pass actionType for billing
                 }),
             });
             if (!response.ok) {
@@ -100,7 +103,7 @@ export function TextareaGenerative({ defaultPrompt = "", model = "gpt-4o-mini",
             onChange(newValue);
         }
     };
-    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: "flex flex-col gap-2", children: [label && _jsx("label", { className: "text-sm font-medium", children: label }), description && (_jsx("p", { className: "text-sm text-gray-500 mb-2", children: description })), isGenerating && (_jsxs("div", { className: "w-full border border-default-200 p-5 rounded-xl", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Skeleton, { className: "w-lg bg-content-2 h-8 rounded-lg" }), _jsx(Skeleton, { className: "w-md bg-content-2 h-4 rounded-lg" }), _jsx(Skeleton, { className: "w-sm bg-content-2 h-4 rounded-lg" })] }), _jsx("div", { className: "mt-2", children: _jsx(Progress, { size: "sm", isIndeterminate: true, "aria-label": t("progress.generating") || "Génération en cours...", label: t("progress.generating") || "Génération en cours..." }) })] })), !isGenerating && (_jsx(Textarea, { value: userInput, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder ||
+    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: "flex flex-col gap-2", children: [label && _jsx("label", { className: "text-sm font-medium", children: label }), description && (_jsx("p", { className: "text-sm text-gray-500 mb-2", children: description })), isGenerating && (_jsxs("div", { className: "w-full border border-default-200 p-5 rounded-xl", children: [_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(Skeleton, { className: "w-[30%] bg-content-2 h-8 rounded-lg" }), _jsx(Skeleton, { className: "w-[50%] bg-content-2 h-4 rounded-lg" }), _jsx(Skeleton, { className: "w-[40%] bg-content-2 h-4 rounded-lg" })] }), _jsx("div", { className: "mt-2", children: _jsx(Progress, { size: "sm", isIndeterminate: true, "aria-label": t("progress.generating") || "Génération en cours...", label: t("progress.generating") || "Génération en cours..." }) })] })), !isGenerating && (_jsx(Textarea, { maxLength: maxLength, value: userInput, onChange: (e) => handleInputChange(e.target.value), placeholder: placeholder ||
                             t("textarea.placeholder") ||
                             "Saisissez votre texte ou générez avec l'IA...", disabled: disabled || isGenerating, minRows: minRows, maxRows: maxRows, endContent: _jsx(Button, { isIconOnly: true, size: "sm", color: "primary", variant: "light", onPress: () => {
                                 if (hidePromptEditor) {
@@ -109,7 +112,11 @@ export function TextareaGenerative({ defaultPrompt = "", model = "gpt-4o-mini",
                                 else {
                                     setIsModalOpen(true);
                                 }
-                            }, disabled: disabled || isGenerating || !userInput.trim(), title: t("button.generate_with_ai") || "Générer avec l'IA", children: _jsx(Wand2, { size: 18 }) }) })), _jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [_jsx("div", { className: "flex items-center gap-2", children: showTokenBalance && tokenBalance !== null && (_jsxs(Chip, { size: "sm", variant: "flat", color: "success", children: [tokenBalance.toLocaleString(), " ", t("chip.tokens_remaining") || "tokens restants"] })) }), lastResponse && (_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsxs(Chip, { size: "sm", variant: "flat", children: [lastResponse.tokensUsed, " ", t("chip.tokens_used") || "tokens utilisés"] }), _jsx(Chip, { size: "sm", variant: "flat", color: "primary", children: lastResponse.model }), lastResponse.cost && (_jsxs(Chip, { size: "sm", variant: "flat", color: "warning", children: ["$", lastResponse.cost.toFixed(4)] }))] }))] }), error && (_jsxs("div", { className: "flex items-center gap-2 text-danger text-sm p-2 bg-danger-50 rounded-md", children: [_jsx(AlertCircle, { size: 16 }), _jsx("span", { children: error })] }))] }), !hidePromptEditor && (_jsx(Modal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), size: "2xl", backdrop: "blur", children: _jsxs(ModalContent, { children: [_jsx(ModalHeader, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Sparkles, { size: 20 }), _jsx("span", { children: t("modal.title") || "Générer du texte avec l'IA" })] }) }), _jsx(ModalBody, { children: _jsxs("div", { className: "space-y-4", children: [_jsx(Textarea, { label: t("modal.prompt_label") || "Prompt de génération", placeholder: t("modal.prompt_placeholder") ||
+                            }, disabled: disabled ||
+                                isGenerating ||
+                                (hidePromptEditor && !userInput.trim()), title: t("button.generate_with_ai") || "Générer avec l'IA", children: _jsx(Wand2, { size: 18 }) }) })), _jsxs("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [_jsx("div", { className: "flex items-center gap-2", children: showTokenBalance &&
+                                    tokenBalance !== null &&
+                                    tokenBalance !== undefined && (_jsxs(Chip, { size: "sm", variant: "flat", color: "success", children: [tokenBalance.toLocaleString(), " ", t("chip.tokens_remaining") || "tokens restants"] })) }), lastResponse && (_jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [_jsxs(Chip, { size: "sm", variant: "flat", children: [lastResponse.tokensUsed, " ", t("chip.tokens_used") || "tokens utilisés"] }), _jsx(Chip, { size: "sm", variant: "flat", color: "primary", children: lastResponse.model }), lastResponse.cost && (_jsxs(Chip, { size: "sm", variant: "flat", color: "warning", children: ["$", lastResponse.cost.toFixed(4)] }))] }))] }), error && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex items-center gap-2 text-danger text-sm p-2 bg-danger-50 rounded-md", children: [_jsx(AlertCircle, { size: 16 }), _jsx("span", { children: error })] }), _jsx(Button, { as: AppLink, href: `/purchase-tokens`, size: "sm", color: "warning", children: t("button.manage_tokens") || "Gérer les tokens" })] }))] }), !hidePromptEditor && (_jsx(Modal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), size: "2xl", backdrop: "blur", children: _jsxs(ModalContent, { children: [_jsx(ModalHeader, { children: _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Sparkles, { size: 20 }), _jsx("span", { children: t("modal.title") || "Générer du texte avec l'IA" })] }) }), _jsx(ModalBody, { children: _jsxs("div", { className: "space-y-4", children: [_jsx(Textarea, { label: t("modal.prompt_label") || "Prompt de génération", placeholder: t("modal.prompt_placeholder") ||
                                             "Décrivez ce que vous souhaitez générer...", value: userPrompt, onChange: (e) => setUserPrompt(e.target.value), minRows: 3, description: t("modal.prompt_description") ||
                                             "Soyez précis pour obtenir de meilleurs résultats" }), _jsxs(Select, { label: t("modal.model_label") || "Modèle IA", selectedKeys: [selectedModel], onSelectionChange: (keys) => setSelectedModel(Array.from(keys)[0]), description: t("modal.model_description") ||
                                             "GPT-4o-mini est plus rapide et économique", children: [_jsx(SelectItem, { children: t("modal.model_gpt4o_mini") || "GPT-4o Mini (Rapide)" }, "gpt-4o-mini"), _jsx(SelectItem, { children: t("modal.model_gpt4o") || "GPT-4o (Avancé)" }, "gpt-4o"), _jsx(SelectItem, { children: t("modal.model_gpt35") || "GPT-3.5 Turbo (Économique)" }, "gpt-3.5-turbo")] }), userInput && (_jsxs("div", { className: "p-3 bg-gray-50 dark:bg-gray-800 rounded-lg", children: [_jsx("p", { className: "text-sm font-medium mb-1", children: t("modal.current_context") || "Contexte actuel:" }), _jsx("p", { className: "text-xs text-gray-600 dark:text-gray-400 line-clamp-3", children: userInput })] }))] }) }), _jsxs(ModalFooter, { children: [_jsx(Button, { variant: "light", onClick: () => setIsModalOpen(false), children: t("button.cancel") || "Annuler" }), _jsx(Button, { color: "primary", onClick: () => handleGenerate(userPrompt), disabled: !userPrompt.trim() || isGenerating, startContent: isGenerating ? (_jsx(Loader2, { className: "animate-spin", size: 16 })) : (_jsx(Sparkles, { size: 16 })), children: isGenerating

package/dist/web/public/PromptDetailPage.d.ts

@@ -0,0 +1,25 @@
+/**
+ * PromptDetailPage - View detailed public AI prompt with view tracking
+ */
+interface PromptDetail {
+    id: string;
+    slug: string;
+    title: string;
+    content: string;
+    type: "text" | "image";
+    tags: string[];
+    username?: string;
+    avatar_url?: string;
+    lang: string;
+    views: number;
+    used_count: number;
+    picked_count: number;
+    created_at: string;
+}
+interface PromptDetailPageProps {
+    initialPrompt?: PromptDetail;
+    slug?: string;
+}
+export declare function PromptDetailPage({ initialPrompt, slug: directSlug, }: PromptDetailPageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PromptDetailPage.d.ts.map

package/dist/web/public/PromptDetailPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PromptDetailPage.d.ts","sourceRoot":"","sources":["../../../src/web/public/PromptDetailPage.tsx"],"names":[],"mappings":"AAAA;;GAEG;AA2BH,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,qBAAqB;IAC7B,aAAa,CAAC,EAAE,YAAY,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,aAAa,EACb,IAAI,EAAE,UAAU,GACjB,EAAE,qBAAqB,2CAiLvB"}

package/dist/web/public/PromptDetailPage.js

@@ -0,0 +1,71 @@
+/**
+ * PromptDetailPage - View detailed public AI prompt with view tracking
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Card, CardHeader, CardBody, Button, Chip, Spinner, } from "@lastbrain/ui";
+import { Sparkles, MessageSquare, Image as ImageIcon, Copy, Eye, Target, ArrowLeft, } from "lucide-react";
+import { useRouter } from "next/navigation";
+import confetti from "canvas-confetti";
+import { UserAvatar } from "./UserAvatar";
+export function PromptDetailPage({ initialPrompt, slug: directSlug, }) {
+    const router = useRouter();
+    const [prompt, setPrompt] = useState(initialPrompt || null);
+    const [loading, setLoading] = useState(!initialPrompt);
+    const [copied, setCopied] = useState(false);
+    // Extract slug from direct prop
+    useEffect(() => {
+        if (!directSlug || initialPrompt)
+            return;
+        // Only fetch if we don't have initial data
+        const fetchPromptDetail = async () => {
+            try {
+                setLoading(true);
+                const response = await fetch(`/api/ai/public/prompts/slug/${directSlug}`);
+                const data = await response.json();
+                if (response.ok) {
+                    setPrompt(data.prompt);
+                }
+            }
+            catch (error) {
+                console.error("Error fetching prompt:", error);
+            }
+            finally {
+                setLoading(false);
+            }
+        };
+        fetchPromptDetail();
+    }, [directSlug, initialPrompt]);
+    const handleCopy = async () => {
+        if (!prompt)
+            return;
+        await navigator.clipboard.writeText(prompt.content);
+        setCopied(true);
+        // Confetti effect
+        confetti({
+            particleCount: 100,
+            spread: 70,
+            origin: { y: 0.6 },
+        });
+        // Increment picked stat
+        try {
+            await fetch(`/api/ai/public/prompts/${prompt.id}/stats`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ stat_type: "picked" }),
+            });
+        }
+        catch (error) {
+            console.error("Error incrementing stat:", error);
+        }
+        setTimeout(() => setCopied(false), 2000);
+    };
+    if (loading) {
+        return (_jsx("div", { className: "flex items-center justify-center min-h-screen", children: _jsx(Spinner, { size: "lg" }) }));
+    }
+    if (!prompt) {
+        return (_jsx("div", { className: "container mx-auto px-4 py-8 mt-16", children: _jsx(Card, { children: _jsx(CardBody, { children: _jsx("p", { className: "text-center text-default-500", children: "Prompt not found" }) }) }) }));
+    }
+    return (_jsxs("div", { className: "container mx-auto px-4 py-8 max-w-4xl mt-16", children: [_jsx(Button, { variant: "light", startContent: _jsx(ArrowLeft, { className: "w-4 h-4" }), onPress: () => router.back(), className: "mb-4", children: "Back to Prompts" }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex-col items-start gap-3", children: [_jsxs("div", { className: "flex items-center justify-between w-full", children: [_jsx("h1", { className: "text-2xl font-bold", children: prompt.title }), _jsx(Chip, { startContent: prompt.type === "image" ? (_jsx(ImageIcon, { className: "ps-1 w-4 h-4" })) : (_jsx(MessageSquare, { className: "ps-1 w-4 h-4" })), color: prompt.type === "image" ? "secondary" : "primary", variant: "flat", children: prompt.type })] }), prompt.username && (_jsx(UserAvatar, { username: prompt.username, avatarUrl: prompt.avatar_url, size: "md" })), prompt.tags && prompt.tags.length > 0 && (_jsx("div", { className: "flex gap-2 flex-wrap", children: prompt.tags.map((tag) => (_jsx(Chip, { size: "sm", variant: "flat", children: tag }, tag))) })), _jsxs("div", { className: "flex gap-4 text-sm text-default-500", children: [_jsxs("span", { className: `flex items-center gap-1 ${prompt.views > 0 ? "text-primary" : ""}`, children: [_jsx(Eye, { className: "w-4 h-4" }), prompt.views] }), _jsxs("span", { className: `flex items-center gap-1 ${prompt.used_count > 0 ? "text-secondary" : ""}`, children: [_jsx(Sparkles, { className: "w-4 h-4" }), prompt.used_count] }), _jsxs("span", { className: `flex items-center gap-1 ${prompt.picked_count > 0 ? "text-warning" : ""}`, children: [_jsx(Target, { className: "w-4 h-4" }), prompt.picked_count] })] })] }), _jsxs(CardBody, { className: "gap-4", children: [_jsx("div", { className: "rounded-lg border-2 border-default-200 p-4 bg-default-50", children: _jsx("p", { className: "text-sm whitespace-pre-wrap leading-relaxed", children: prompt.content }) }), _jsx(Button, { color: copied ? "success" : "primary", startContent: _jsx(Copy, { className: "w-4 h-4" }), onPress: handleCopy, className: "mx-auto my-4", size: "lg", children: copied ? "Copied!" : "Copy Prompt" })] })] })] }));
+}

package/dist/web/public/PromptDetailPageServer.d.ts

@@ -0,0 +1,15 @@
+/**
+ * PromptDetailPageServer - Server component for SEO
+ */
+import { Metadata } from "next";
+interface PromptDetailPageServerProps {
+    params: Promise<{
+        lang: string;
+        slug: string;
+    }>;
+    localeConfig?: any;
+}
+export declare function generateMetadata({ params, localeConfig, }: PromptDetailPageServerProps): Promise<Metadata>;
+export default function PromptDetailPageServer({ params, }: PromptDetailPageServerProps): Promise<import("react/jsx-runtime").JSX.Element>;
+export { PromptDetailPageServer };
+//# sourceMappingURL=PromptDetailPageServer.d.ts.map