@lastbrain/ai-ui-react 1.0.10 → 1.0.12

package/dist/components/AiPromptPanel.js

@@ -1,9 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef, useLayoutEffect, } from "react";
+import { BookOpen, Search, Sparkles, Star, Tag, Settings } from "lucide-react";
 import { aiStyles } from "../styles/inline";
-import { usePrompts } from "../hooks/usePrompts";
-export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", models = [], sourceText, children, }) {
+import { usePrompts, } from "../hooks/usePrompts";
+import { useModelManagement } from "../hooks/useModelManagement";
+export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode: _uiMode = "modal", models = [], sourceText, children, enableModelManagement = false, availableModels = [], userModels = [], onModelToggle, apiKey, baseUrl, }) {
     const [selectedModel, setSelectedModel] = useState("");
     const [prompt, setPrompt] = useState("");
     const [promptId, setPromptId] = useState(undefined);
@@ -13,37 +15,113 @@ export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", mod
     const [promptFocused, setPromptFocused] = useState(false);
     const [modelFocused, setModelFocused] = useState(false);
     const [showPromptLibrary, setShowPromptLibrary] = useState(false);
-    const { prompts, loading: promptsLoading, fetchPrompts, incrementStat } = usePrompts();
-    // Set initial model when models change
-    useEffect(() => {
-        if (models.length > 0 && !selectedModel) {
-            setSelectedModel(models[0].id);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [selectedTag, setSelectedTag] = useState("all");
+    const [isGenerating, setIsGenerating] = useState(false);
+    const [isClosing, setIsClosing] = useState(false);
+    const promptRef = useRef(null);
+    const closeTimeoutRef = useRef(null);
+    // États pour la gestion des modèles
+    const [showAllModels, setShowAllModels] = useState(false);
+    const [isModelManagementOpen, setIsModelManagementOpen] = useState(false);
+    const [loadingModels, setLoadingModels] = useState([]);
+    const { prompts, loading: promptsLoading, fetchPrompts, incrementStat, } = usePrompts();
+    // Hook de gestion des modèles (automatique si enableModelManagement et pas de props externes)
+    const autoModelManagement = useModelManagement({
+        apiKey,
+        baseUrl,
+        category: "text", // Par défaut pour AiPromptPanel
+        autoFetch: enableModelManagement && availableModels.length === 0 && !!apiKey,
+    });
+    // Utiliser soit les props externes soit la gestion automatique
+    const effectiveAvailableModels = availableModels.length > 0
+        ? availableModels
+        : autoModelManagement.availableModels;
+    const effectiveUserModels = userModels.length > 0 ? userModels : autoModelManagement.userModels;
+    const effectiveToggleModel = onModelToggle || autoModelManagement.toggleModel;
+    // Gestion des modèles
+    const handleModelToggle = async (modelId, isActive) => {
+        if (!effectiveToggleModel)
+            return;
+        setLoadingModels((prev) => [...prev, modelId]);
+        try {
+            await effectiveToggleModel(modelId, isActive);
         }
-    }, [models, selectedModel]);
+        catch (error) {
+            console.error("Erreur lors du changement de modèle:", error);
+        }
+        finally {
+            setLoadingModels((prev) => prev.filter((id) => id !== modelId));
+        }
+    };
+    const getFilteredModels = () => {
+        if (!enableModelManagement || effectiveAvailableModels.length === 0) {
+            // Mode classique : transformer les ModelRef en AIModel
+            return models.map((m) => ({
+                id: m.id,
+                name: m.name,
+                category: m.type === "image" ? "image" : "text",
+                provider: "Unknown",
+            }));
+        }
+        const textModels = effectiveAvailableModels.filter((m) => m.category === "text");
+        if (showAllModels) {
+            return textModels;
+        }
+        else {
+            return textModels.filter((m) => effectiveUserModels.includes(m.id));
+        }
+    };
     // Fetch prompts when modal opens
     useEffect(() => {
         if (isOpen && models.length > 0) {
-            const modelType = models.find((m) => m.id === selectedModel)?.type;
+            const activeModelId = selectedModel || models[0]?.id;
+            const modelType = models.find((m) => m.id === activeModelId)?.type;
             fetchPrompts({
                 type: modelType === "image" ? "image" : "text",
             });
         }
     }, [isOpen, selectedModel, models, fetchPrompts]);
-    if (!isOpen)
-        return null;
-    const handleSubmit = () => {
-        if (!selectedModel || !prompt.trim())
+    const handleSubmit = async () => {
+        const activeModelId = selectedModel || models[0]?.id;
+        if (!activeModelId || !prompt.trim())
             return;
-        onSubmit(selectedModel, prompt, promptId);
-        setPrompt("");
-        setPromptId(undefined);
+        setIsGenerating(true);
+        try {
+            await Promise.resolve(onSubmit(activeModelId, prompt, promptId));
+            setPrompt("");
+            setPromptId(undefined);
+        }
+        finally {
+            setIsGenerating(false);
+            handleClose();
+        }
     };
-    const handleClose = () => {
+    const finalizeClose = () => {
         onClose();
         setPrompt("");
         setPromptId(undefined);
         setShowPromptLibrary(false);
+        setSearchQuery("");
+        setSelectedTag("all");
+        setIsClosing(false);
+    };
+    const handleClose = () => {
+        if (isClosing)
+            return;
+        setIsClosing(true);
+        if (closeTimeoutRef.current) {
+            window.clearTimeout(closeTimeoutRef.current);
+        }
+        closeTimeoutRef.current = window.setTimeout(finalizeClose, 220);
     };
+    useEffect(() => {
+        return () => {
+            if (closeTimeoutRef.current) {
+                window.clearTimeout(closeTimeoutRef.current);
+            }
+        };
+    }, []);
     const handleKeyDown = (e) => {
         if (e.key === "Escape") {
             handleClose();
@@ -56,27 +134,109 @@ export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", mod
         setPrompt(promptData.content);
         setPromptId(promptData.id);
         incrementStat(promptData.id, "picked");
+        if (promptData.model) {
+            setSelectedModel(promptData.model);
+        }
         setShowPromptLibrary(false);
     };
-    const currentModelType = models.find((m) => m.id === selectedModel)?.type;
+    const adjustPromptHeight = () => {
+        const element = promptRef.current;
+        if (!element) {
+            return;
+        }
+        element.style.height = "auto";
+        element.style.height = `${element.scrollHeight}px`;
+    };
+    useLayoutEffect(() => {
+        adjustPromptHeight();
+    }, [prompt]);
+    if (!isOpen)
+        return null;
+    const activeModelId = selectedModel || models[0]?.id || "";
+    const currentModelType = models.find((m) => m.id === activeModelId)?.type;
     const filteredPrompts = prompts.filter((p) => {
         const matchesType = currentModelType === "image" ? p.type === "image" : p.type !== "image";
         return matchesType;
     });
+    const availableTags = Array.from(new Set(filteredPrompts.flatMap((p) => (Array.isArray(p.tags) ? p.tags : [])))).sort((a, b) => a.localeCompare(b));
+    const normalizedSearch = searchQuery.trim().toLowerCase();
+    const visiblePrompts = filteredPrompts
+        .filter((promptData) => {
+        if (!normalizedSearch) {
+            return true;
+        }
+        return (promptData.title.toLowerCase().includes(normalizedSearch) ||
+            promptData.content.toLowerCase().includes(normalizedSearch));
+    })
+        .filter((promptData) => {
+        if (selectedTag === "all") {
+            return true;
+        }
+        return promptData.tags?.includes(selectedTag);
+    })
+        .slice()
+        .sort((a, b) => Number(b.favorite) - Number(a.favorite));
+    const favoritePrompts = visiblePrompts.filter((promptData) => Boolean(promptData.favorite));
+    const nonFavoritePrompts = visiblePrompts.filter((promptData) => !promptData.favorite);
     const renderProps = {
         models,
-        selectedModel,
+        selectedModel: activeModelId,
         setSelectedModel,
         prompt,
         setPrompt,
         sourceText,
         handleSubmit,
         handleClose,
+        // Nouvelles props pour la gestion des modèles
+        enableModelManagement,
+        availableModels: effectiveAvailableModels,
+        userModels: effectiveUserModels,
+        showAllModels,
+        setShowAllModels,
+        onModelToggle: handleModelToggle,
     };
     if (children) {
         return (_jsx("div", { style: aiStyles.modal, onKeyDown: handleKeyDown, children: children(renderProps) }));
     }
-    return (_jsxs("div", { style: aiStyles.modal, onKeyDown: handleKeyDown, children: [_jsx("div", { style: aiStyles.modalOverlay, onClick: handleClose }), _jsxs("div", { style: aiStyles.modalContent, children: [_jsxs("div", { style: aiStyles.modalHeader, children: [_jsx("h2", { style: aiStyles.modalTitle, children: showPromptLibrary ? "Select a Prompt" : "AI Prompt Configuration" }), _jsx("button", { style: {
+    return (_jsxs("div", { style: aiStyles.modal, onKeyDown: handleKeyDown, children: [_jsx("div", { style: {
+                    ...aiStyles.modalOverlay,
+                    opacity: isClosing ? 0 : 1,
+                    transition: "opacity 200ms ease",
+                }, onClick: handleClose }), _jsxs("div", { style: {
+                    ...aiStyles.modalContent,
+                    opacity: isClosing ? 0 : 1,
+                    transform: isClosing ? "translateY(12px)" : "translateY(0)",
+                    transition: "opacity 200ms ease, transform 200ms ease",
+                }, children: [isGenerating && (_jsxs("div", { style: {
+                            position: "absolute",
+                            inset: 0,
+                            background: "var(--ai-bg-tertiary)",
+                            backdropFilter: "blur(6px)",
+                            WebkitBackdropFilter: "blur(6px)",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            flexDirection: "column",
+                            gap: "12px",
+                            zIndex: 10,
+                            borderRadius: "12px",
+                        }, children: [_jsx("div", { style: {
+                                    width: "64px",
+                                    height: "64px",
+                                    borderRadius: "999px",
+                                    border: "2px solid #8b5cf620",
+                                    borderTopColor: "#8b5cf6",
+                                    animation: "ai-spin 1.1s linear infinite",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    boxShadow: "0 12px 24px rgba(139, 92, 246, 0.15)",
+                                }, children: _jsx(Sparkles, { size: 20, color: "#8b5cf6" }) }), _jsx("div", { style: {
+                                    fontSize: "13px",
+                                    fontWeight: 600,
+                                    color: "#6b7280",
+                                    letterSpacing: "0.02em",
+                                }, children: "G\u00E9n\u00E9ration en cours\u2026" })] })), _jsxs("div", { style: aiStyles.modalHeader, children: [_jsx("h2", { style: aiStyles.modalTitle, children: showPromptLibrary ? "Select a Prompt" : "AI Prompt Configuration" }), _jsx("button", { style: {
                                     ...aiStyles.modalCloseButton,
                                     ...(isCloseHovered && aiStyles.modalCloseButtonHover),
                                 }, onClick: handleClose, onMouseEnter: () => setIsCloseHovered(true), onMouseLeave: () => setIsCloseHovered(false), "aria-label": "Close", children: "\u00D7" })] }), _jsx("div", { style: aiStyles.modalBody, children: !showPromptLibrary ? (_jsxs(_Fragment, { children: [sourceText && (_jsxs("div", { style: {
@@ -93,10 +253,74 @@ export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", mod
                                                 overflow: "auto",
                                                 whiteSpace: "pre-wrap",
                                                 wordBreak: "break-word",
-                                            }, children: sourceText })] })), _jsxs("div", { style: aiStyles.modalInputGroup, children: [_jsx("label", { htmlFor: "model-select", style: aiStyles.modalLabel, children: "AI Model" }), _jsxs("select", { id: "model-select", value: selectedModel, onChange: (e) => setSelectedModel(e.target.value), onFocus: () => setModelFocused(true), onBlur: () => setModelFocused(false), style: {
-                                                ...aiStyles.select,
-                                                ...(modelFocused && aiStyles.selectFocus),
-                                            }, children: [models.length === 0 && (_jsx("option", { value: "", children: "Loading models..." })), models.map((model) => (_jsx("option", { value: model.id, children: model.name }, model.id)))] })] }), _jsxs("div", { style: aiStyles.modalInputGroup, children: [_jsxs("div", { style: {
+                                            }, children: sourceText })] })), _jsx("div", { style: aiStyles.modalInputGroup, children: enableModelManagement ? (
+                                    // Version avancée avec gestion des modèles
+                                    _jsxs("div", { style: { marginBottom: "16px" }, children: [_jsxs("div", { style: {
+                                                    display: "flex",
+                                                    justifyContent: "space-between",
+                                                    alignItems: "center",
+                                                    marginBottom: "8px",
+                                                }, children: [_jsx("label", { htmlFor: "model-select", style: aiStyles.modalLabel, children: "AI Model" }), _jsxs("div", { style: {
+                                                            display: "flex",
+                                                            alignItems: "center",
+                                                            gap: "8px",
+                                                        }, children: [effectiveAvailableModels.length > 0 && (_jsxs("button", { onClick: () => setShowAllModels(!showAllModels), style: {
+                                                                    padding: "4px 8px",
+                                                                    fontSize: "12px",
+                                                                    color: "#8b5cf6",
+                                                                    background: "#8b5cf610",
+                                                                    border: "1px solid #8b5cf630",
+                                                                    borderRadius: "6px",
+                                                                    cursor: "pointer",
+                                                                    transition: "all 0.2s",
+                                                                }, onMouseEnter: (e) => {
+                                                                    e.currentTarget.style.background = "#8b5cf620";
+                                                                }, onMouseLeave: (e) => {
+                                                                    e.currentTarget.style.background = "#8b5cf610";
+                                                                }, children: [showAllModels ? "Mes modèles" : "Tous les modèles", !showAllModels &&
+                                                                        effectiveAvailableModels.filter((m) => m.category === "text" &&
+                                                                            !effectiveUserModels.includes(m.id)).length > 0 && (_jsxs("span", { style: {
+                                                                            marginLeft: "4px",
+                                                                            padding: "2px 6px",
+                                                                            fontSize: "10px",
+                                                                            background: "#8b5cf6",
+                                                                            color: "white",
+                                                                            borderRadius: "10px",
+                                                                        }, children: ["+", effectiveAvailableModels.filter((m) => m.category === "text" &&
+                                                                                !effectiveUserModels.includes(m.id)).length] }))] })), _jsx("button", { onClick: () => setIsModelManagementOpen(true), style: {
+                                                                    padding: "4px 8px",
+                                                                    fontSize: "12px",
+                                                                    color: "#8b5cf6",
+                                                                    background: "#8b5cf610",
+                                                                    border: "1px solid #8b5cf630",
+                                                                    borderRadius: "6px",
+                                                                    cursor: "pointer",
+                                                                    transition: "all 0.2s",
+                                                                    display: "flex",
+                                                                    alignItems: "center",
+                                                                    gap: "4px",
+                                                                }, onMouseEnter: (e) => {
+                                                                    e.currentTarget.style.background = "#8b5cf620";
+                                                                }, onMouseLeave: (e) => {
+                                                                    e.currentTarget.style.background = "#8b5cf610";
+                                                                }, children: _jsx(Settings, { size: 12 }) })] })] }), _jsxs("select", { id: "model-select", value: activeModelId, onChange: (e) => setSelectedModel(e.target.value), onFocus: () => setModelFocused(true), onBlur: () => setModelFocused(false), style: {
+                                                    ...aiStyles.select,
+                                                    ...(modelFocused && aiStyles.selectFocus),
+                                                }, children: [getFilteredModels().length === 0 && (_jsx("option", { value: "", children: "Loading models..." })), getFilteredModels().map((model) => {
+                                                        const isActive = effectiveUserModels.includes(model.id);
+                                                        return (_jsxs("option", { value: model.id, style: {
+                                                                opacity: showAllModels && !isActive ? 0.6 : 1,
+                                                            }, children: [model.name, showAllModels && isActive && " ✓", showAllModels && !isActive && " (Désactivé)"] }, model.id));
+                                                    })] }), showAllModels && onModelToggle && (_jsx("div", { style: {
+                                                    fontSize: "11px",
+                                                    color: "#6b7280",
+                                                    marginTop: "4px",
+                                                }, children: "\uD83D\uDCA1 Cliquez sur \"\u2699\uFE0F\" pour activer/d\u00E9sactiver les mod\u00E8les" }))] })) : (
+                                    // Version classique
+                                    _jsxs(_Fragment, { children: [_jsx("label", { htmlFor: "model-select", style: aiStyles.modalLabel, children: "AI Model" }), _jsxs("select", { id: "model-select", value: activeModelId, onChange: (e) => setSelectedModel(e.target.value), onFocus: () => setModelFocused(true), onBlur: () => setModelFocused(false), style: {
+                                                    ...aiStyles.select,
+                                                    ...(modelFocused && aiStyles.selectFocus),
+                                                }, children: [models.length === 0 && (_jsx("option", { value: "", children: "Loading models..." })), models.map((model) => (_jsx("option", { value: model.id, children: model.name }, model.id)))] })] })) }), _jsxs("div", { style: aiStyles.modalInputGroup, children: [_jsxs("div", { style: {
                                                 display: "flex",
                                                 justifyContent: "space-between",
                                                 alignItems: "center",
@@ -109,17 +333,20 @@ export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", mod
                                                             }, children: "(Cmd/Ctrl + Enter to submit)" })] }), filteredPrompts.length > 0 && (_jsxs("button", { onClick: () => setShowPromptLibrary(true), style: {
                                                         padding: "4px 12px",
                                                         fontSize: "12px",
-                                                        color: "#ffffff",
-                                                        background: "#8b5cf620",
-                                                        border: "none",
+                                                        color: "#8b5cf6",
+                                                        background: "#8b5cf610",
+                                                        border: "1px solid #8b5cf630",
                                                         borderRadius: "6px",
                                                         cursor: "pointer",
                                                         transition: "all 0.2s",
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        gap: "6px",
                                                     }, onMouseEnter: (e) => {
-                                                        e.currentTarget.style.background = "#8b5cf630";
-                                                    }, onMouseLeave: (e) => {
                                                         e.currentTarget.style.background = "#8b5cf620";
-                                                    }, children: ["\uD83D\uDCDA Browse Prompts (", filteredPrompts.length, ")"] }))] }), _jsx("textarea", { id: "prompt-input", value: prompt, onChange: (e) => setPrompt(e.target.value), onFocus: () => setPromptFocused(true), onBlur: () => setPromptFocused(false), placeholder: sourceText
+                                                    }, onMouseLeave: (e) => {
+                                                        e.currentTarget.style.background = "#8b5cf610";
+                                                    }, children: [_jsx(BookOpen, { size: 14 }), "Browse Prompts (", filteredPrompts.length, ")"] }))] }), _jsx("textarea", { id: "prompt-input", ref: promptRef, value: prompt, onChange: (e) => setPrompt(e.target.value), onFocus: () => setPromptFocused(true), onBlur: () => setPromptFocused(false), placeholder: sourceText
                                                 ? "Enter your AI prompt... e.g., 'Correct spelling and grammar', 'Make it more professional', 'Translate to English'"
                                                 : "Enter your AI prompt... e.g., 'Write a blog post about AI', 'Generate product description'", rows: 6, style: {
                                                 ...aiStyles.textarea,
@@ -136,47 +363,272 @@ export function AiPromptPanel({ isOpen, onClose, onSubmit, uiMode = "modal", mod
                                         display: "flex",
                                         alignItems: "center",
                                         gap: "4px",
-                                    }, children: "\u2190 Back to form" }), promptsLoading ? (_jsx("div", { style: { textAlign: "center", padding: "40px 0" }, children: "Loading prompts..." })) : filteredPrompts.length === 0 ? (_jsx("div", { style: { textAlign: "center", padding: "40px 0", color: "#6b7280" }, children: "No prompts available for this model type" })) : (_jsx("div", { style: {
+                                    }, children: "\u2190 Back to form" }), _jsxs("div", { style: { marginBottom: "12px" }, children: [_jsxs("div", { style: {
+                                                ...aiStyles.inputWrapper,
+                                                marginBottom: "10px",
+                                            }, children: [_jsx(Search, { size: 16, style: {
+                                                        position: "absolute",
+                                                        left: "12px",
+                                                        top: "50%",
+                                                        transform: "translateY(-50%)",
+                                                        color: aiStyles.tooltipLabel.color,
+                                                    } }), _jsx("input", { value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search prompts...", style: {
+                                                        ...aiStyles.input,
+                                                        padding: "10px 12px 10px 36px",
+                                                    } })] }), availableTags.length > 0 && (_jsxs("div", { style: {
+                                                display: "flex",
+                                                flexWrap: "wrap",
+                                                gap: "8px",
+                                                alignItems: "center",
+                                            }, children: [_jsxs("span", { style: {
+                                                        display: "inline-flex",
+                                                        alignItems: "center",
+                                                        gap: "6px",
+                                                        fontSize: "12px",
+                                                        color: aiStyles.tooltipLabel.color,
+                                                    }, children: [_jsx(Tag, { size: 14 }), "Tags"] }), _jsx("button", { onClick: () => setSelectedTag("all"), style: {
+                                                        ...aiStyles.chip,
+                                                        borderColor: selectedTag === "all"
+                                                            ? "#8b5cf6"
+                                                            : aiStyles.chip.border,
+                                                        background: selectedTag === "all"
+                                                            ? "#8b5cf620"
+                                                            : aiStyles.chip.background,
+                                                    }, children: "All" }), availableTags.map((tag) => (_jsx("button", { onClick: () => setSelectedTag(tag), style: {
+                                                        ...aiStyles.chip,
+                                                        borderColor: selectedTag === tag
+                                                            ? "#8b5cf6"
+                                                            : aiStyles.chip.border,
+                                                        background: selectedTag === tag
+                                                            ? "#8b5cf620"
+                                                            : aiStyles.chip.background,
+                                                    }, children: tag }, tag)))] }))] }), promptsLoading ? (_jsx("div", { style: { textAlign: "center", padding: "40px 0" }, children: "Loading prompts..." })) : visiblePrompts.length === 0 ? (_jsx("div", { style: {
+                                        textAlign: "center",
+                                        padding: "40px 0",
+                                        color: "#6b7280",
+                                    }, children: "No prompts available for this model type" })) : (_jsxs("div", { style: {
                                         display: "flex",
                                         flexDirection: "column",
                                         gap: "12px",
                                         maxHeight: "400px",
                                         overflow: "auto",
-                                    }, children: filteredPrompts.map((promptData) => (_jsxs("div", { onClick: () => handleSelectPrompt(promptData), style: {
-                                            padding: "16px",
-                                            border: `1px solid #e5e7eb`,
-                                            borderRadius: "8px",
-                                            cursor: "pointer",
-                                            transition: "all 0.2s",
-                                        }, onMouseEnter: (e) => {
-                                            e.currentTarget.style.background = "#8b5cf610";
-                                            e.currentTarget.style.borderColor = "#8b5cf6";
-                                        }, onMouseLeave: (e) => {
-                                            e.currentTarget.style.background = "transparent";
-                                            e.currentTarget.style.borderColor = "#e5e7eb";
-                                        }, children: [_jsx("div", { style: {
-                                                    fontWeight: 600,
-                                                    marginBottom: "4px",
-                                                    color: "#111827",
-                                                }, children: promptData.title }), _jsx("div", { style: {
-                                                    fontSize: "13px",
-                                                    color: "#6b7280",
-                                                    overflow: "hidden",
-                                                    textOverflow: "ellipsis",
-                                                    display: "-webkit-box",
-                                                    WebkitLineClamp: 2,
-                                                    WebkitBoxOrient: "vertical",
-                                                }, children: promptData.content }), ("category" in promptData && promptData.category) ? (_jsx("div", { style: {
-                                                    marginTop: "8px",
-                                                    fontSize: "11px",
-                                                    color: "#8b5cf6",
-                                                }, children: String(promptData.category) })) : null] }, promptData.id))) }))] })) }), _jsxs("div", { style: aiStyles.modalFooter, children: [_jsx("button", { onClick: handleClose, onMouseEnter: () => setIsCancelHovered(true), onMouseLeave: () => setIsCancelHovered(false), style: {
+                                    }, children: [favoritePrompts.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: {
+                                                        fontSize: "12px",
+                                                        color: "#6b7280",
+                                                        fontWeight: 600,
+                                                        textTransform: "uppercase",
+                                                        marginBottom: "8px",
+                                                    }, children: "Favorites" }), _jsx("div", { style: {
+                                                        display: "flex",
+                                                        flexDirection: "column",
+                                                        gap: "12px",
+                                                    }, children: favoritePrompts.map((promptData) => (_jsxs("div", { onClick: () => handleSelectPrompt(promptData), style: {
+                                                            padding: "16px",
+                                                            border: `1px solid #e5e7eb`,
+                                                            borderRadius: "8px",
+                                                            cursor: "pointer",
+                                                            transition: "all 0.2s",
+                                                        }, onMouseEnter: (e) => {
+                                                            e.currentTarget.style.background = "#8b5cf610";
+                                                            e.currentTarget.style.borderColor = "#8b5cf6";
+                                                        }, onMouseLeave: (e) => {
+                                                            e.currentTarget.style.background = "transparent";
+                                                            e.currentTarget.style.borderColor = "#e5e7eb";
+                                                        }, children: [_jsxs("div", { style: {
+                                                                    display: "flex",
+                                                                    alignItems: "center",
+                                                                    gap: "8px",
+                                                                    fontWeight: 600,
+                                                                    marginBottom: "4px",
+                                                                    color: "#9780a5",
+                                                                }, children: [_jsx(Star, { size: 14, color: "#8b5cf6" }), promptData.title] }), _jsx("div", { style: {
+                                                                    fontSize: "13px",
+                                                                    color: "#6b7280",
+                                                                    overflow: "hidden",
+                                                                    textOverflow: "ellipsis",
+                                                                    display: "-webkit-box",
+                                                                    WebkitLineClamp: 2,
+                                                                    WebkitBoxOrient: "vertical",
+                                                                }, children: promptData.content }), "category" in promptData && promptData.category ? (_jsx("div", { style: {
+                                                                    marginTop: "8px",
+                                                                    fontSize: "11px",
+                                                                    color: "#8b5cf6",
+                                                                }, children: String(promptData.category) })) : null] }, promptData.id))) })] })), nonFavoritePrompts.length > 0 && (_jsxs("div", { children: [_jsx("div", { style: {
+                                                        fontSize: "12px",
+                                                        color: "#6b7280",
+                                                        fontWeight: 600,
+                                                        textTransform: "uppercase",
+                                                        marginTop: favoritePrompts.length > 0 ? "12px" : undefined,
+                                                        marginBottom: "8px",
+                                                    }, children: "All prompts" }), _jsx("div", { style: {
+                                                        display: "flex",
+                                                        flexDirection: "column",
+                                                        gap: "12px",
+                                                    }, children: nonFavoritePrompts.map((promptData) => (_jsxs("div", { onClick: () => handleSelectPrompt(promptData), style: {
+                                                            padding: "16px",
+                                                            border: `1px solid #e5e7eb`,
+                                                            borderRadius: "8px",
+                                                            cursor: "pointer",
+                                                            transition: "all 0.2s",
+                                                        }, onMouseEnter: (e) => {
+                                                            e.currentTarget.style.background = "#8b5cf610";
+                                                            e.currentTarget.style.borderColor = "#8b5cf6";
+                                                        }, onMouseLeave: (e) => {
+                                                            e.currentTarget.style.background = "transparent";
+                                                            e.currentTarget.style.borderColor = "#e5e7eb";
+                                                        }, children: [_jsx("div", { style: {
+                                                                    fontWeight: 600,
+                                                                    marginBottom: "4px",
+                                                                    color: "#9780a5",
+                                                                }, children: promptData.title }), _jsx("div", { style: {
+                                                                    fontSize: "13px",
+                                                                    color: "#6b7280",
+                                                                    overflow: "hidden",
+                                                                    textOverflow: "ellipsis",
+                                                                    display: "-webkit-box",
+                                                                    WebkitLineClamp: 2,
+                                                                    WebkitBoxOrient: "vertical",
+                                                                }, children: promptData.content }), "category" in promptData && promptData.category ? (_jsx("div", { style: {
+                                                                    marginTop: "8px",
+                                                                    fontSize: "11px",
+                                                                    color: "#8b5cf6",
+                                                                }, children: String(promptData.category) })) : null] }, promptData.id))) })] }))] }))] })) }), _jsxs("div", { style: aiStyles.modalFooter, children: [_jsx("button", { onClick: handleClose, onMouseEnter: () => setIsCancelHovered(true), onMouseLeave: () => setIsCancelHovered(false), style: {
                                     ...aiStyles.button,
                                     ...aiStyles.buttonSecondary,
                                     ...(isCancelHovered && aiStyles.buttonSecondaryHover),
                                 }, children: "Cancel" }), _jsx("button", { onClick: handleSubmit, disabled: !selectedModel || !prompt.trim(), onMouseEnter: () => setIsSubmitHovered(true), onMouseLeave: () => setIsSubmitHovered(false), style: {
                                     ...aiStyles.button,
-                                    ...(isSubmitHovered && !(!selectedModel || !prompt.trim()) && aiStyles.buttonHover),
-                                    ...(!selectedModel || !prompt.trim() ? aiStyles.buttonDisabled : {}),
-                                }, children: sourceText ? "Transform with AI" : "Generate with AI" })] })] })] }));
+                                    ...(isSubmitHovered &&
+                                        !(!selectedModel || !prompt.trim()) &&
+                                        aiStyles.buttonHover),
+                                    ...(!selectedModel || !prompt.trim()
+                                        ? aiStyles.buttonDisabled
+                                        : {}),
+                                }, children: sourceText ? "Transform with AI" : "Generate with AI" })] })] }), enableModelManagement && isModelManagementOpen && (_jsxs("div", { style: {
+                    ...aiStyles.modal,
+                    zIndex: 1001, // Au-dessus du modal principal
+                }, children: [_jsx("div", { style: {
+                            ...aiStyles.modalOverlay,
+                            backgroundColor: "rgba(0, 0, 0, 0.7)",
+                        }, onClick: () => setIsModelManagementOpen(false) }), _jsxs("div", { style: {
+                            ...aiStyles.modalContent,
+                            maxWidth: "600px",
+                            maxHeight: "80vh",
+                            overflow: "auto",
+                        }, children: [_jsxs("div", { style: aiStyles.modalHeader, children: [_jsx("h2", { style: aiStyles.modalTitle, children: "Gestion des mod\u00E8les IA" }), _jsx("button", { style: aiStyles.modalCloseButton, onClick: () => setIsModelManagementOpen(false), "aria-label": "Close", children: "\u00D7" })] }), _jsxs("div", { style: aiStyles.modalBody, children: [_jsx("div", { style: { marginBottom: "16px" }, children: _jsx("p", { style: {
+                                                fontSize: "14px",
+                                                color: "#6b7280",
+                                                margin: "0 0 16px 0",
+                                            }, children: "Activez ou d\u00E9sactivez les mod\u00E8les selon vos besoins" }) }), _jsx("div", { style: {
+                                            display: "flex",
+                                            flexDirection: "column",
+                                            gap: "12px",
+                                        }, children: effectiveAvailableModels
+                                            .filter((model) => model.category === "text")
+                                            .map((modelData) => {
+                                            const isActive = effectiveUserModels.includes(modelData.id);
+                                            const isLoading = loadingModels.includes(modelData.id);
+                                            return (_jsxs("div", { style: {
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    justifyContent: "space-between",
+                                                    padding: "16px",
+                                                    border: "1px solid #e5e7eb",
+                                                    borderRadius: "8px",
+                                                    backgroundColor: isActive ? "#f0fdf4" : "#ffffff",
+                                                    transition: "all 0.2s",
+                                                }, children: [_jsxs("div", { style: {
+                                                            display: "flex",
+                                                            alignItems: "center",
+                                                            gap: "12px",
+                                                        }, children: [_jsx("div", { style: {
+                                                                    width: "12px",
+                                                                    height: "12px",
+                                                                    borderRadius: "50%",
+                                                                    backgroundColor: isActive ? "#10b981" : "#d1d5db",
+                                                                } }), _jsxs("div", { children: [_jsxs("div", { style: {
+                                                                            display: "flex",
+                                                                            alignItems: "center",
+                                                                            gap: "8px",
+                                                                            marginBottom: "4px",
+                                                                        }, children: [_jsx("span", { style: {
+                                                                                    fontWeight: "500",
+                                                                                    color: "#111827",
+                                                                                }, children: modelData.name }), modelData.isPro && (_jsx("span", { style: {
+                                                                                    padding: "2px 8px",
+                                                                                    fontSize: "11px",
+                                                                                    backgroundColor: "#8b5cf6",
+                                                                                    color: "white",
+                                                                                    borderRadius: "12px",
+                                                                                    fontWeight: "500",
+                                                                                }, children: "PRO" }))] }), modelData.description && (_jsx("p", { style: {
+                                                                            fontSize: "13px",
+                                                                            color: "#6b7280",
+                                                                            margin: "0 0 4px 0",
+                                                                        }, children: modelData.description })), _jsxs("div", { style: {
+                                                                            display: "flex",
+                                                                            alignItems: "center",
+                                                                            gap: "16px",
+                                                                            fontSize: "12px",
+                                                                            color: "#9ca3af",
+                                                                        }, children: [_jsxs("span", { children: ["Fournisseur: ", modelData.provider] }), modelData.costPer1M && (_jsxs("span", { children: ["Co\u00FBt: $", modelData.costPer1M, "/1M tokens"] }))] })] })] }), _jsx("button", { onClick: () => handleModelToggle(modelData.id, !isActive), disabled: isLoading, style: {
+                                                            padding: "8px 16px",
+                                                            fontSize: "13px",
+                                                            fontWeight: "500",
+                                                            borderRadius: "6px",
+                                                            border: "1px solid",
+                                                            cursor: isLoading ? "not-allowed" : "pointer",
+                                                            transition: "all 0.2s",
+                                                            minWidth: "80px",
+                                                            ...(isActive
+                                                                ? {
+                                                                    backgroundColor: "#fef2f2",
+                                                                    borderColor: "#fecaca",
+                                                                    color: "#dc2626",
+                                                                }
+                                                                : {
+                                                                    backgroundColor: "#f0fdf4",
+                                                                    borderColor: "#bbf7d0",
+                                                                    color: "#16a34a",
+                                                                }),
+                                                            opacity: isLoading ? 0.6 : 1,
+                                                        }, onMouseEnter: (e) => {
+                                                            if (!isLoading) {
+                                                                if (isActive) {
+                                                                    e.currentTarget.style.backgroundColor =
+                                                                        "#fee2e2";
+                                                                }
+                                                                else {
+                                                                    e.currentTarget.style.backgroundColor =
+                                                                        "#dcfce7";
+                                                                }
+                                                            }
+                                                        }, onMouseLeave: (e) => {
+                                                            if (!isLoading) {
+                                                                if (isActive) {
+                                                                    e.currentTarget.style.backgroundColor =
+                                                                        "#fef2f2";
+                                                                }
+                                                                else {
+                                                                    e.currentTarget.style.backgroundColor =
+                                                                        "#f0fdf4";
+                                                                }
+                                                            }
+                                                        }, children: isLoading ? (_jsx("div", { style: {
+                                                                display: "flex",
+                                                                alignItems: "center",
+                                                                justifyContent: "center",
+                                                                gap: "4px",
+                                                            }, children: _jsx("div", { style: {
+                                                                    width: "12px",
+                                                                    height: "12px",
+                                                                    border: "2px solid currentColor",
+                                                                    borderTop: "2px solid transparent",
+                                                                    borderRadius: "50%",
+                                                                    animation: "ai-spin 1s linear infinite",
+                                                                } }) })) : isActive ? ("Désactiver") : ("Activer") })] }, modelData.id));
+                                        }) })] }), _jsx("div", { style: aiStyles.modalFooter, children: _jsx("button", { onClick: () => setIsModelManagementOpen(false), style: {
+                                        ...aiStyles.button,
+                                        ...aiStyles.buttonSecondary,
+                                    }, children: "Fermer" }) })] })] }))] }));
 }