@lastbrain/ai-ui-react 1.0.73 → 1.0.74

package/dist/components/AiPromptPanel.js

@@ -3,12 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import "../styles/register";
 import { useState, useEffect, useRef, useLayoutEffect, } from "react";
 import { createPortal } from "react-dom";
-import { BookOpen, Search, Sparkles, Star, Tag, Settings } from "lucide-react";
+import { BookOpen, Search, Sparkles, Star, Tag, Settings, Loader2, } from "lucide-react";
 import { aiStyles } from "../styles/inline";
 import { handleAIError } from "../utils/errorHandler";
 import { usePrompts, } from "../hooks/usePrompts";
 import { useModelManagement } from "../hooks/useModelManagement";
 import { AiProvider, useAiContext } from "../context/AiProvider";
+import { useI18n } from "../context/I18nContext";
+import { useLoadingTimer } from "../hooks/useLoadingTimer";
 export function AiPromptPanel(props) {
     const { apiKey, baseUrl } = props;
     let hasContext = false;
@@ -31,6 +33,7 @@ export function AiPromptPanel(props) {
     return _jsx(AiPromptPanelInternal, { ...props });
 }
 function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "modal", models = [], sourceText, children, enableModelManagement = true, modelCategory = "text", availableModels = [], userModels = [], onModelToggle, apiKey, baseUrl, showOnlyUserModels = false, }) {
+    const { t } = useI18n();
     const [selectedModel, setSelectedModel] = useState("");
     const [prompt, setPrompt] = useState("");
     const [promptId, setPromptId] = useState(undefined);
@@ -50,6 +53,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
     const [isModelManagementOpen, setIsModelManagementOpen] = useState(false);
     const [loadingModels, setLoadingModels] = useState([]);
     const [modelSearchQuery, setModelSearchQuery] = useState("");
+    const { formatted: loadingElapsed } = useLoadingTimer(isGenerating);
     const { prompts, loading: promptsLoading, fetchPrompts, incrementStat, } = usePrompts();
     // Hook de gestion des modèles (automatique si enableModelManagement et pas de models/availableModels externes)
     const autoModelManagement = useModelManagement({
@@ -76,6 +80,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
             : autoModelManagement.availableModels;
     const effectiveUserModels = userModels.length > 0 ? userModels : autoModelManagement.userModels;
     const effectiveToggleModel = onModelToggle || autoModelManagement.toggleModel;
+    const isModelsLoading = autoModelManagement.loading && effectiveAvailableModels.length === 0;
     // Gestion des modèles
     const handleModelToggle = async (modelId, isActive) => {
         if (!effectiveToggleModel)
@@ -99,7 +104,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                 id: m.id,
                 name: m.name,
                 category: m.type === "image" ? "image" : "text",
-                provider: "Unknown",
+                provider: t("common.unknown", "Unknown"),
             }));
         }
         const categoryModels = effectiveAvailableModels.filter((m) => m.category === modelCategory);
@@ -309,23 +314,27 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                                     fontWeight: 600,
                                     color: "var(--ai-text-secondary)",
                                     letterSpacing: "0.02em",
-                                }, children: "G\u00E9n\u00E9ration en cours\u2026" })] })), _jsxs("div", { style: {
+                                }, children: t("prompt.modal.generating", "Generating...") }), _jsx("div", { className: "ai-loading-meta", children: t("ai.loading.elapsed", "{seconds}", {
+                                    seconds: loadingElapsed,
+                                }) })] })), _jsxs("div", { style: {
                             ...aiStyles.modalHeader,
                             position: "sticky",
                             top: 0,
                             zIndex: 5,
                             backdropFilter: "blur(8px)",
-                        }, children: [_jsx("h2", { style: aiStyles.modalTitle, children: showPromptLibrary ? "Select a Prompt" : "AI Prompt Configuration" }), _jsx("button", { style: {
+                        }, children: [_jsx("h2", { style: aiStyles.modalTitle, children: showPromptLibrary
+                                    ? t("prompt.modal.selectPrompt", "Select a Prompt")
+                                    : t("prompt.modal.title", "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: {
+                                }, onClick: handleClose, onMouseEnter: () => setIsCloseHovered(true), onMouseLeave: () => setIsCloseHovered(false), "aria-label": t("common.closeLabel", "Close"), children: "\u00D7" })] }), _jsx("div", { style: {
                             ...aiStyles.modalBody,
                             flex: 1,
                             overflow: "auto",
                         }, children: !showPromptLibrary ? (_jsxs(_Fragment, { children: [sourceText && (_jsxs("div", { style: {
                                         ...aiStyles.modalInputGroup,
                                         marginBottom: "16px",
-                                    }, children: [_jsx("label", { style: aiStyles.modalLabel, children: "Source Text" }), _jsx("div", { style: {
+                                    }, children: [_jsx("label", { style: aiStyles.modalLabel, children: t("prompt.modal.sourceText", "Source Text") }), _jsx("div", { style: {
                                                 padding: "12px",
                                                 background: aiStyles.textarea.background,
                                                 border: `1px solid ${aiStyles.input.border}`,
@@ -343,7 +352,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                                                     justifyContent: "space-between",
                                                     alignItems: "center",
                                                     marginBottom: "8px",
-                                                }, children: [_jsx("label", { htmlFor: "model-select", style: aiStyles.modalLabel, children: "AI Model" }), effectiveAvailableModels.length > 0 && (_jsxs("button", { onClick: () => setIsModelManagementOpen(true), className: "ai-inline-btn", title: "G\u00E9rer les mod\u00E8les", children: [_jsx(Settings, { size: 14 }), "G\u00E9rer les mod\u00E8les", effectiveAvailableModels.filter((m) => m.category === modelCategory &&
+                                                }, children: [_jsx("label", { htmlFor: "model-select", style: aiStyles.modalLabel, children: "AI Model" }), isModelsLoading ? (_jsx("span", { className: "ai-inline-skeleton", "aria-hidden": "true" })) : effectiveAvailableModels.length > 0 ? (_jsxs("button", { onClick: () => setIsModelManagementOpen(true), className: "ai-inline-btn", title: t("prompt.modal.manageModels", "Manage models"), children: [_jsx(Settings, { size: 14 }), t("prompt.modal.manageModels", "Manage models"), effectiveAvailableModels.filter((m) => m.category === modelCategory &&
                                                                 !effectiveUserModels.includes(m.id)).length > 0 && (_jsxs("span", { style: {
                                                                     marginLeft: "2px",
                                                                     padding: "2px 6px",
@@ -353,42 +362,44 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                                                                     borderRadius: "10px",
                                                                     fontWeight: "600",
                                                                 }, children: ["+", effectiveAvailableModels.filter((m) => m.category === modelCategory &&
-                                                                        !effectiveUserModels.includes(m.id)).length] }))] }))] }), _jsxs("select", { id: "model-select", value: activeModelId, onChange: (e) => setSelectedModel(e.target.value), onFocus: () => setModelFocused(true), onBlur: () => setModelFocused(false), style: {
+                                                                        !effectiveUserModels.includes(m.id)).length] }))] })) : null] }), _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: [modelOptions.length === 0 && (_jsx("option", { value: "", children: showOnlyUserModels
-                                                            ? "No active models. Open 'Gérer les modèles'."
-                                                            : "Loading models..." })), modelOptions.map((model) => {
+                                                            ? t("prompt.modal.noActiveModels", "No active models. Open 'Manage models'.")
+                                                            : t("prompt.modal.loadingModels", "Loading models...") })), modelOptions.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: {
+                                                            }, children: [model.name, showAllModels && isActive && " ✓", showAllModels && !isActive
+                                                                    ? ` (${t("common.inactive", "Inactive")})`
+                                                                    : ""] }, model.id));
+                                                    })] }), showAllModels && onModelToggle && (_jsxs("div", { style: {
                                                     fontSize: "11px",
                                                     color: "var(--ai-text-secondary)",
                                                     marginTop: "4px",
-                                                }, children: "\uD83D\uDCA1 Cliquez sur \"\u2699\uFE0F\" pour activer/d\u00E9sactiver les mod\u00E8les" }))] })) : (
+                                                }, children: ["\uD83D\uDCA1", " ", t("prompt.modal.clickSettingsHint", "Click ⚙️ to enable/disable models")] }))] })) : (
                                     // 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: {
+                                                }, children: [models.length === 0 && (_jsx("option", { value: "", children: t("prompt.modal.loadingModels", "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",
                                                 marginBottom: "8px",
-                                            }, children: [_jsxs("label", { htmlFor: "prompt-input", style: aiStyles.modalLabel, children: ["Prompt", _jsx("span", { style: {
+                                            }, children: [_jsxs("label", { htmlFor: "prompt-input", style: aiStyles.modalLabel, children: [t("prompt.modal.prompt", "Prompt"), _jsx("span", { style: {
                                                                 color: "var(--ai-text-secondary)",
                                                                 marginLeft: "4px",
                                                                 fontSize: "12px",
                                                                 fontWeight: 400,
-                                                            }, children: "(Cmd/Ctrl + Enter to submit)" })] }), filteredPrompts.length > 0 && (_jsxs("button", { onClick: () => setShowPromptLibrary(true), className: "ai-inline-btn", 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: {
+                                                            }, children: t("prompt.modal.promptHint", "(Cmd/Ctrl + Enter to submit)") })] }), promptsLoading ? (_jsx("span", { className: "ai-inline-skeleton", "aria-hidden": "true" })) : filteredPrompts.length > 0 ? (_jsxs("button", { onClick: () => setShowPromptLibrary(true), className: "ai-inline-btn", children: [_jsx(BookOpen, { size: 14 }), t("prompt.modal.browsePrompts", "Browse Prompts"), " (", filteredPrompts.length, ")"] })) : null] }), _jsx("textarea", { id: "prompt-input", ref: promptRef, value: prompt, onChange: (e) => setPrompt(e.target.value), onFocus: () => setPromptFocused(true), onBlur: () => setPromptFocused(false), placeholder: sourceText
+                                                ? t("prompt.modal.promptPlaceholderWithSource", "Enter your AI prompt... e.g., 'Fix grammar', 'Make it more professional', 'Translate to English'")
+                                                : t("prompt.modal.promptPlaceholderNoSource", "Enter your AI prompt... e.g., 'Write a blog post about AI', 'Generate product description'"), rows: 6, style: {
                                                 ...aiStyles.textarea,
                                                 padding: "12px 16px",
                                                 ...(promptFocused && aiStyles.textareaFocus),
-                                            } })] })] })) : (_jsxs("div", { children: [_jsx("button", { onClick: () => setShowPromptLibrary(false), style: {
+                                            } })] })] })) : (_jsxs("div", { children: [_jsxs("button", { onClick: () => setShowPromptLibrary(false), style: {
                                         padding: "8px 0",
                                         fontSize: "14px",
                                         color: "var(--ai-primary)",
@@ -399,7 +410,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                                         display: "flex",
                                         alignItems: "center",
                                         gap: "4px",
-                                    }, children: "\u2190 Back to form" }), _jsxs("div", { style: { marginBottom: "12px" }, children: [_jsxs("div", { style: {
+                                    }, children: ["\u2190 ", t("prompt.modal.backToFormNoArrow", "Back to form")] }), _jsxs("div", { style: { marginBottom: "12px" }, children: [_jsxs("div", { style: {
                                                 ...aiStyles.inputWrapper,
                                                 marginBottom: "10px",
                                             }, children: [_jsx(Search, { size: 16, style: {
@@ -408,7 +419,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                                                         top: "50%",
                                                         transform: "translateY(-50%)",
                                                         color: aiStyles.tooltipLabel.color,
-                                                    } }), _jsx("input", { value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search prompts...", style: {
+                                                    } }), _jsx("input", { value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: t("prompt.modal.searchPrompts", "Search prompts..."), style: {
                                                         ...aiStyles.input,
                                                         padding: "10px 12px 10px 36px",
                                                     } })] }), availableTags.length > 0 && (_jsxs("div", { style: {
@@ -422,7 +433,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                                                         gap: "6px",
                                                         fontSize: "12px",
                                                         color: aiStyles.tooltipLabel.color,
-                                                    }, children: [_jsx(Tag, { size: 14 }), "Tags"] }), _jsx("button", { onClick: () => setSelectedTag("all"), style: {
+                                                    }, children: [_jsx(Tag, { size: 14 }), t("prompt.modal.tags", "Tags")] }), _jsx("button", { onClick: () => setSelectedTag("all"), style: {
                                                         ...aiStyles.chip,
                                                         borderColor: selectedTag === "all"
                                                             ? "var(--ai-primary)"
@@ -430,7 +441,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                                                         background: selectedTag === "all"
                                                             ? "color-mix(in srgb, var(--ai-primary) 20%, transparent)"
                                                             : aiStyles.chip.background,
-                                                    }, children: "All" }), availableTags.map((tag) => (_jsx("button", { onClick: () => setSelectedTag(tag), style: {
+                                                    }, children: t("common.all", "All") }), availableTags.map((tag) => (_jsx("button", { onClick: () => setSelectedTag(tag), style: {
                                                         ...aiStyles.chip,
                                                         borderColor: selectedTag === tag
                                                             ? "var(--ai-primary)"
@@ -438,11 +449,17 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                                                         background: selectedTag === tag
                                                             ? "color-mix(in srgb, var(--ai-primary) 20%, transparent)"
                                                             : aiStyles.chip.background,
-                                                    }, children: tag }, tag)))] }))] }), promptsLoading ? (_jsx("div", { style: { textAlign: "center", padding: "40px 0" }, children: "Loading prompts..." })) : visiblePrompts.length === 0 ? (_jsx("div", { style: {
+                                                    }, children: tag }, tag)))] }))] }), promptsLoading ? (_jsx("div", { style: {
+                                        display: "flex",
+                                        flexDirection: "column",
+                                        gap: "12px",
+                                        maxHeight: "400px",
+                                        overflow: "auto",
+                                    }, children: Array.from({ length: 4 }).map((_, idx) => (_jsxs("div", { className: "ai-list-skeleton", children: [_jsx("div", { className: "ai-list-skeleton__line ai-list-skeleton__line--lg" }), _jsx("div", { className: "ai-list-skeleton__line ai-list-skeleton__line--md" })] }, `prompt-skeleton-${idx}`))) })) : visiblePrompts.length === 0 ? (_jsx("div", { style: {
                                         textAlign: "center",
                                         padding: "40px 0",
                                         color: "var(--ai-text-secondary)",
-                                    }, children: "No prompts available for this model type" })) : (_jsxs("div", { style: {
+                                    }, children: t("prompt.modal.noPrompts", "No prompts available for this model type") })) : (_jsxs("div", { style: {
                                         display: "flex",
                                         flexDirection: "column",
                                         gap: "12px",
@@ -454,7 +471,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                                                         fontWeight: 600,
                                                         textTransform: "uppercase",
                                                         marginBottom: "8px",
-                                                    }, children: "Favorites" }), _jsx("div", { style: {
+                                                    }, children: t("prompt.modal.favorites", "Favorites") }), _jsx("div", { style: {
                                                         display: "flex",
                                                         flexDirection: "column",
                                                         gap: "12px",
@@ -499,7 +516,7 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                                                         textTransform: "uppercase",
                                                         marginTop: favoritePrompts.length > 0 ? "12px" : undefined,
                                                         marginBottom: "8px",
-                                                    }, children: "All prompts" }), _jsx("div", { style: {
+                                                    }, children: t("prompt.modal.allPrompts", "All prompts") }), _jsx("div", { style: {
                                                         display: "flex",
                                                         flexDirection: "column",
                                                         gap: "12px",
@@ -540,7 +557,11 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                             bottom: 0,
                             zIndex: 5,
                             backdropFilter: "blur(8px)",
-                        }, children: [_jsx("button", { onClick: handleClose, className: "ai-btn ai-btn--ghost", children: "Cancel" }), _jsx("button", { onClick: handleSubmit, disabled: !selectedModel || !prompt.trim(), className: "ai-btn ai-btn--primary", children: sourceText ? "Transform with AI" : "Generate with AI" })] })] }), enableModelManagement && isModelManagementOpen && (_jsxs("div", { style: {
+                        }, children: [_jsx("button", { onClick: handleClose, className: "ai-btn ai-btn--ghost", children: t("prompt.modal.cancel", "Cancel") }), _jsx("button", { onClick: handleSubmit, disabled: isGenerating || !selectedModel || !prompt.trim(), className: "ai-btn ai-btn--primary", children: isGenerating ? (_jsxs("span", { className: "ai-loading-stack", children: [_jsxs("span", { className: "ai-loading-row", children: [_jsx(Loader2, { size: 16, className: "ai-spinner" }), _jsx("span", { children: sourceText
+                                                        ? t("prompt.modal.transforming", "Transforming...")
+                                                        : t("prompt.modal.generating", "Generating...") })] }), _jsx("span", { className: "ai-loading-meta", children: t("ai.loading.elapsed", "{seconds}", {
+                                                seconds: loadingElapsed,
+                                            }) })] })) : sourceText ? (t("prompt.modal.transform", "Transform with AI")) : (t("prompt.modal.generate", "Generate with AI")) })] })] }), enableModelManagement && isModelManagementOpen && (_jsxs("div", { style: {
                     ...aiStyles.modal,
                     zIndex: 2147483646, // Au-dessus du modal principal
                 }, children: [_jsx("div", { style: {
@@ -557,10 +578,10 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                             display: "flex",
                             flexDirection: "column",
                             boxShadow: "var(--ai-shadow-lg)",
-                        }, children: [_jsxs("div", { style: aiStyles.modalHeader, children: [_jsx("h2", { style: aiStyles.modalTitle, children: "Gestion des mod\u00E8les IA" }), _jsx("button", { style: aiStyles.modalCloseButton, onClick: () => {
+                        }, children: [_jsxs("div", { style: aiStyles.modalHeader, children: [_jsx("h2", { style: aiStyles.modalTitle, children: t("prompt.modal.modelMgmtTitle", "AI Model Management") }), _jsx("button", { style: aiStyles.modalCloseButton, onClick: () => {
                                             setIsModelManagementOpen(false);
                                             setModelSearchQuery("");
-                                        }, "aria-label": "Close", children: "\u00D7" })] }), _jsxs("div", { style: {
+                                        }, "aria-label": t("common.closeLabel", "Close"), children: "\u00D7" })] }), _jsxs("div", { style: {
                                     ...aiStyles.modalBody,
                                     flex: 1,
                                     overflow: "auto",
@@ -568,11 +589,14 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                                                     fontSize: "14px",
                                                     color: "var(--ai-muted)",
                                                     margin: "0 0 8px 0",
-                                                }, children: "Activez ou d\u00E9sactivez les mod\u00E8les selon vos besoins" }), _jsxs("p", { style: {
+                                                }, children: t("prompt.modal.modelMgmtSubtitle", "Enable or disable models based on your needs") }), _jsx("p", { style: {
                                                     fontSize: "12px",
                                                     color: "var(--ai-text-tertiary)",
                                                     margin: "0 0 16px 0",
-                                                }, children: [effectiveAvailableModels.filter((m) => m.category === modelCategory).length, " ", "mod\u00E8les disponibles \u2022", " ", effectiveUserModels.filter((id) => effectiveAvailableModels.some((m) => m.id === id && m.category === modelCategory)).length, " ", "activ\u00E9s"] }), _jsxs("div", { style: {
+                                                }, children: t("prompt.modal.modelAvailableCount", "{available} models available • {active} enabled", {
+                                                    available: effectiveAvailableModels.filter((m) => m.category === modelCategory).length,
+                                                    active: effectiveUserModels.filter((id) => effectiveAvailableModels.some((m) => m.id === id && m.category === modelCategory)).length,
+                                                }) }), _jsxs("div", { style: {
                                                     ...aiStyles.inputWrapper,
                                                     marginBottom: "16px",
                                                 }, children: [_jsx(Search, { size: 16, style: {
@@ -581,11 +605,11 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                                                             top: "50%",
                                                             transform: "translateY(-50%)",
                                                             color: "var(--ai-text-tertiary)",
-                                                        } }), _jsx("input", { value: modelSearchQuery, onChange: (e) => setModelSearchQuery(e.target.value), placeholder: "Rechercher un mod\u00E8le...", style: {
+                                                        } }), _jsx("input", { value: modelSearchQuery, onChange: (e) => setModelSearchQuery(e.target.value), placeholder: t("prompt.modal.searchModel", "Search a model..."), style: {
                                                             ...aiStyles.input,
                                                             padding: "10px 12px 10px 36px",
                                                             background: "var(--ai-bg)",
-                                                        } })] })] }), _jsxs("div", { className: "ai-model-mgmt-list", children: [effectiveAvailableModels
+                                                        } })] })] }), _jsxs("div", { className: "ai-model-mgmt-list", children: [isModelsLoading ? (_jsx(_Fragment, { children: Array.from({ length: 4 }).map((_, idx) => (_jsxs("div", { className: "ai-list-skeleton", children: [_jsx("div", { className: "ai-list-skeleton__line ai-list-skeleton__line--lg" }), _jsx("div", { className: "ai-list-skeleton__line ai-list-skeleton__line--md" })] }, `model-skeleton-${idx}`))) })) : null, effectiveAvailableModels
                                                 .filter((model) => {
                                                 if (model.category !== modelCategory)
                                                     return false;
@@ -624,24 +648,25 @@ function AiPromptPanelInternal({ isOpen, onClose, onSubmit, uiMode: _uiMode = "m
                                                                         height: 0,
                                                                         position: "absolute",
                                                                     } }), _jsx("span", { className: `ai-toggle ${isActive ? "ai-toggle--active" : ""}` })] })] }, modelData.id));
-                                            }), effectiveAvailableModels.filter((model) => {
-                                                if (model.category !== modelCategory)
-                                                    return false;
-                                                if (!modelSearchQuery.trim())
-                                                    return true;
-                                                const query = modelSearchQuery.toLowerCase();
-                                                return (model.name.toLowerCase().includes(query) ||
-                                                    model.provider.toLowerCase().includes(query) ||
-                                                    model.description?.toLowerCase().includes(query));
-                                            }).length === 0 && (_jsx("div", { style: {
+                                            }), !isModelsLoading &&
+                                                effectiveAvailableModels.filter((model) => {
+                                                    if (model.category !== modelCategory)
+                                                        return false;
+                                                    if (!modelSearchQuery.trim())
+                                                        return true;
+                                                    const query = modelSearchQuery.toLowerCase();
+                                                    return (model.name.toLowerCase().includes(query) ||
+                                                        model.provider.toLowerCase().includes(query) ||
+                                                        model.description?.toLowerCase().includes(query));
+                                                }).length === 0 && (_jsx("div", { style: {
                                                     textAlign: "center",
                                                     padding: "32px 16px",
                                                     color: "var(--ai-text-tertiary)",
                                                     fontSize: "14px",
                                                 }, children: modelSearchQuery.trim()
-                                                    ? "Aucun modèle ne correspond à votre recherche"
-                                                    : "Aucun modèle disponible" }))] })] }), _jsx("div", { style: aiStyles.modalFooter, children: _jsx("button", { onClick: () => {
+                                                    ? t("prompt.modal.noModelMatch", "No model matches your search")
+                                                    : t("prompt.modal.noModelAvailable", "No models available") }))] })] }), _jsx("div", { style: aiStyles.modalFooter, children: _jsx("button", { onClick: () => {
                                         setIsModelManagementOpen(false);
                                         setModelSearchQuery("");
-                                    }, className: "ai-btn ai-btn--ghost", children: "Fermer" }) })] })] }))] }), portalRoot);
+                                    }, className: "ai-btn ai-btn--ghost", children: t("prompt.modal.closeModelMgmt", "Close") }) })] })] }))] }), portalRoot);
 }

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

@@ -1 +1 @@
-{"version":3,"file":"AiSelect.d.ts","sourceRoot":"","sources":["../../src/components/AiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAY,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAU9D,MAAM,WAAW,aACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IACnE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB;AAED,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAgB,EAChB,IAAW,EACX,MAAe,EACf,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,aAAa,2CA4If"}
+{"version":3,"file":"AiSelect.d.ts","sourceRoot":"","sources":["../../src/components/AiSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAY,KAAK,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAEnE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAW9D,MAAM,WAAW,aACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IACnE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB;AAED,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAgB,EAChB,IAAW,EACX,MAAe,EACf,OAAO,EACP,KAAK,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,WAAW,EACf,EAAE,aAAa,2CAgJf"}

package/dist/components/AiSelect.js

@@ -11,7 +11,9 @@ import { LBSigninModal } from "./LBSigninModal";
 import { handleAIError } from "../utils/errorHandler";
 import { useLB } from "../context/LBAuthProvider";
 import { useAiContext } from "../context/AiProvider";
+import { useI18n } from "../context/I18nContext";
 export function AiSelect({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMode = "modal", size = "md", radius = "full", context, model, prompt, storeOutputs, artifactTitle, onValue, onToast, disabled, className, children, ...selectProps }) {
+    const { t } = useI18n();
     const [isOpen, setIsOpen] = useState(false);
     const [showAuthModal, setShowAuthModal] = useState(false);
     const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
@@ -68,7 +70,10 @@ export function AiSelect({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMode
             });
             if (result.text) {
                 onValue?.(result.text);
-                onToast?.({ type: "success", message: "AI suggestion ready" });
+                onToast?.({
+                    type: "success",
+                    message: t("ai.select.suggestionReady", "AI suggestion ready"),
+                });
                 showUsageToast(result);
             }
         }
@@ -82,6 +87,6 @@ export function AiSelect({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMode
     const sizeClass = `ai-size-${size}`;
     const radiusClass = `ai-radius-${radius}`;
     return (_jsxs("div", { className: `ai-control-group ai-glow ${className || ""}`, children: [_jsxs("div", { className: `ai-shell ${sizeClass} ${radiusClass}`, children: [_jsx("select", { ...selectProps, className: `ai-control ai-control-input ai-control-select ${sizeClass} ${radiusClass}`, disabled: disabled || loading, children: children }), _jsx("span", { className: "ai-control-select-chevron", "aria-hidden": "true", children: _jsx(ChevronDown, { size: 14 }) }), _jsx("button", { className: `ai-control-action ai-spark ${sizeClass} ${radiusClass}`, onClick: handleOpenPanel, title: shouldShowSparkles
-                            ? "Générer avec l'IA"
-                            : "Se connecter pour utiliser l'IA", disabled: disabled || loading, type: "button", children: loading ? (_jsx(Loader2, { size: 16, className: "ai-spinner" })) : shouldShowSparkles ? (_jsx(Sparkles, { size: 16 })) : (_jsx(Lock, { size: 16 })) })] }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [] })), Boolean(toastData) && (_jsx(UsageToast, { result: toastData, position: "bottom-right", onComplete: clearToast }, toastKey)), _jsx(LBSigninModal, { isOpen: showAuthModal, onClose: () => setShowAuthModal(false) })] }));
+                            ? t("ai.generate", "Generate with AI")
+                            : t("auth.connectToUseAi", "Sign in to use AI"), disabled: disabled || loading, type: "button", children: loading ? (_jsx(Loader2, { size: 16, className: "ai-spinner" })) : shouldShowSparkles ? (_jsx(Sparkles, { size: 16 })) : (_jsx(Lock, { size: 16 })) })] }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: models || [] })), Boolean(toastData) && (_jsx(UsageToast, { result: toastData, position: "bottom-right", onComplete: clearToast }, toastKey)), _jsx(LBSigninModal, { isOpen: showAuthModal, onClose: () => setShowAuthModal(false) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"AiStatusButton.d.ts","sourceRoot":"","sources":["../../src/components/AiStatusButton.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,QAAQ,EAAU,MAAM,uBAAuB,CAAC;AAuB9D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAEjD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB;AAmHD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAe,EACf,SAAc,EACd,IAAW,EACX,MAAe,GAChB,EAAE,mBAAmB,2CA+gBrB"}
+{"version":3,"file":"AiStatusButton.d.ts","sourceRoot":"","sources":["../../src/components/AiStatusButton.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,QAAQ,EAAU,MAAM,uBAAuB,CAAC;AAuB9D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGjD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,QAAQ,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB;AAmHD,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,OAAe,EACf,SAAc,EACd,IAAW,EACX,MAAe,GAChB,EAAE,mBAAmB,2CAyhBrB"}

package/dist/components/AiStatusButton.js

@@ -8,30 +8,31 @@ import { LBContext, } from "../context/LBAuthProvider";
 import { AiContext } from "../context/AiProvider";
 import { LBApiKeySelector } from "./LBApiKeySelector";
 import { LBSigninModal } from "./LBSigninModal";
+import { useI18n } from "../context/I18nContext";
 const QUICK_LINKS = [
     {
         href: "https://prompt.lastbrain.io/auth/ai/tokens",
-        title: "Dashboard",
+        titleKey: "status.dashboard",
         icon: BarChart3,
     },
     {
         href: "https://prompt.lastbrain.io/auth/ai/history",
-        title: "Historique",
+        titleKey: "status.history",
         icon: History,
     },
     {
         href: "https://prompt.lastbrain.io/auth/ai/settings",
-        title: "Settings",
+        titleKey: "status.settings",
         icon: Settings,
     },
     {
         href: "https://prompt.lastbrain.io/auth/ai/prompts",
-        title: "Prompts",
+        titleKey: "status.prompts",
         icon: FileText,
     },
     {
         href: "https://prompt.lastbrain.io/auth/folder",
-        title: "Dossiers",
+        titleKey: "status.folders",
         icon: Folder,
     },
 ];
@@ -64,6 +65,7 @@ function UsageCircle({ percentage }) {
                         : "ai-usage-circle-text--low", fontWeight: "700", children: [safe.toFixed(0), "%"] })] }));
 }
 export function AiStatusButton({ status, loading = false, className = "", size = "md", radius = "full", }) {
+    const { t } = useI18n();
     let lbStatus;
     let user = null;
     let logout;
@@ -272,28 +274,29 @@ export function AiStatusButton({ status, loading = false, className = "", size =
         .filter(Boolean)
         .join(" ");
     const tooltipNode = showTooltip && canPortal
-        ? createPortal(_jsx("div", { ref: tooltipRef, className: "ai-popover ai-tooltip ai-status-tooltip", style: tooltipStyle, onMouseEnter: () => setShowTooltip(true), onMouseLeave: closeTooltip, children: lbStatus === "ready" && user ? (_jsx(_Fragment, { children: _jsxs("div", { className: "ai-popover-body", children: [_jsx("div", { className: "ai-popover-header", children: "API Status" }), _jsx("div", { className: "ai-popover-section ai-popover-section--first", children: _jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: "User" }), _jsx("span", { className: "ai-popover-value ai-truncate max-w-[200px]", children: user.email })] }) }), _jsxs("div", { className: "ai-popover-section", children: [_jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: "API Key" }), _jsxs("div", { className: "ai-row", children: [lbIsLoadingStatus || isImplicitStatusLoading ? (_jsx("div", { className: "ai-kv-skeleton w-[110px]" })) : (_jsx("span", { className: "ai-popover-value", children: effectiveStatus?.apiKey?.name ||
+        ? createPortal(_jsx("div", { ref: tooltipRef, className: "ai-popover ai-tooltip ai-status-tooltip", style: tooltipStyle, onMouseEnter: () => setShowTooltip(true), onMouseLeave: closeTooltip, children: lbStatus === "ready" && user ? (_jsx(_Fragment, { children: _jsxs("div", { className: "ai-popover-body", children: [_jsx("div", { className: "ai-popover-header", children: t("status.title", "API Status") }), _jsx("div", { className: "ai-popover-section ai-popover-section--first", children: _jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: t("status.user", "User") }), _jsx("span", { className: "ai-popover-value ai-truncate", style: { maxWidth: 200 }, children: user.email })] }) }), _jsxs("div", { className: "ai-popover-section", children: [_jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: t("status.apiKey", "API Key") }), _jsxs("div", { className: "ai-row", children: [lbIsLoadingStatus || isImplicitStatusLoading ? (_jsx("div", { className: "ai-kv-skeleton ai-kv-skeleton--110" })) : (_jsx("span", { className: "ai-popover-value", children: effectiveStatus?.apiKey?.name ||
                                                         effectiveStatus?.api_key?.name ||
-                                                        "Unknown" })), switchApiKey &&
+                                                        t("common.unknown", "Unknown") })), switchApiKey &&
                                                     !isApiKeyAuthMode &&
                                                     !isImplicitStatusLoading ? (_jsx("button", { type: "button", className: "ai-icon-btn", onClick: (e) => {
                                                         e.stopPropagation();
                                                         setShowTooltip(false);
                                                         setShowApiKeySelector(true);
-                                                    }, title: "Changer de cl\u00E9 API", children: _jsx(ArrowRightLeft, { size: 12 }) })) : null] })] }), _jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: "Env" }), (lbIsLoadingStatus || isImplicitStatusLoading) &&
-                                            !effectiveStatus?.apiKey?.env ? (_jsx("div", { className: "ai-kv-skeleton w-12" })) : (_jsx("span", { className: "ai-popover-value", children: effectiveStatus?.apiKey?.env ||
+                                                    }, title: t("status.changeApiKey", "Switch API key"), children: _jsx(ArrowRightLeft, { size: 12 }) })) : null] })] }), _jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: t("status.env", "Env") }), (lbIsLoadingStatus || isImplicitStatusLoading) &&
+                                            !effectiveStatus?.apiKey?.env ? (_jsx("div", { className: "ai-kv-skeleton ai-kv-skeleton--48" })) : (_jsx("span", { className: "ai-popover-value", children: effectiveStatus?.apiKey?.env ||
                                                 effectiveStatus?.api_key?.env ||
-                                                "N/A" }))] }), _jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: "Rate Limit" }), (lbIsLoadingStatus || isImplicitStatusLoading) &&
-                                            !effectiveStatus?.apiKey?.rate_limit_rpm ? (_jsx("div", { className: "ai-kv-skeleton w-[92px]" })) : (_jsxs("span", { className: "ai-popover-value", children: [effectiveStatus?.apiKey?.rate_limit_rpm ||
+                                                "N/A" }))] }), _jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: t("status.rateLimit", "Rate Limit") }), (lbIsLoadingStatus || isImplicitStatusLoading) &&
+                                            !effectiveStatus?.apiKey?.rate_limit_rpm ? (_jsx("div", { className: "ai-kv-skeleton ai-kv-skeleton--92" })) : (_jsxs("span", { className: "ai-popover-value", children: [effectiveStatus?.apiKey?.rate_limit_rpm ||
                                                     effectiveStatus?.api_key?.rate_limit_rpm ||
-                                                    0, " ", "req/min"] }))] }), _jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: "Auth" }), _jsx("span", { className: "ai-popover-value", children: lbIsLoadingStatus || isImplicitStatusLoading
+                                                    0, " ", "req/min"] }))] }), _jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: t("status.auth", "Auth") }), _jsx("span", { className: "ai-popover-value", children: lbIsLoadingStatus || isImplicitStatusLoading
                                                 ? "..."
                                                 : authTypeValue ||
                                                     lbStatus ||
-                                                    "unknown" })] })] }), _jsxs("div", { className: "ai-popover-section", children: [_jsx("div", { className: "ai-popover-header text-xs mb-2", children: "Wallet" }), _jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: "Total" }), (lbIsLoadingStatus || isImplicitStatusLoading) &&
-                                            !effectiveStatus?.balance ? (_jsxs("div", { className: "ai-row", children: [_jsx("div", { className: "ai-kv-skeleton w-[120px]" }), _jsx("div", { className: "ai-kv-skeleton w-7 h-7 rounded-full" })] })) : (_jsxs("div", { className: "ai-row", children: [_jsxs("span", { className: "ai-popover-value", children: ["$", fixed(balanceUsed, 2), " / $", fixed(balanceTotal, 2)] }), _jsx(UsageCircle, { percentage: balancePct })] }))] })] }), _jsxs("div", { className: "ai-popover-section", children: [_jsx("div", { className: "ai-popover-header text-xs mb-2", children: "Storage" }), _jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: "Total" }), lbIsLoadingStorage || isImplicitStorageLoading ? (_jsxs("div", { className: "ai-row", children: [_jsx("div", { className: "ai-kv-skeleton w-[120px]" }), _jsx("div", { className: "ai-kv-skeleton w-7 h-7 rounded-full" })] })) : (_jsxs("div", { className: "ai-row", children: [_jsxs("span", { className: "ai-popover-value", children: [formatStorage(storageUsed), " /", " ", formatStorage(storageTotal)] }), _jsx(UsageCircle, { percentage: storagePct })] }))] })] }), _jsxs("div", { className: "ai-status-actions", children: [QUICK_LINKS.map((item) => {
+                                                    t("status.unknown", "unknown") })] })] }), _jsxs("div", { className: "ai-popover-section", children: [_jsx("div", { className: "ai-popover-header ai-popover-header--sub", children: t("status.wallet", "Wallet") }), _jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: t("status.total", "Total") }), (lbIsLoadingStatus || isImplicitStatusLoading) &&
+                                            !effectiveStatus?.balance ? (_jsxs("div", { className: "ai-row", children: [_jsx("div", { className: "ai-kv-skeleton ai-kv-skeleton--120" }), _jsx("div", { className: "ai-kv-skeleton ai-kv-skeleton--circle" })] })) : (_jsxs("div", { className: "ai-row", children: [_jsxs("span", { className: "ai-popover-value", children: ["$", fixed(balanceUsed, 2), " / $", fixed(balanceTotal, 2)] }), _jsx(UsageCircle, { percentage: balancePct })] }))] })] }), _jsxs("div", { className: "ai-popover-section", children: [_jsx("div", { className: "ai-popover-header ai-popover-header--sub", children: t("status.storage", "Storage") }), _jsxs("div", { className: "ai-popover-row", children: [_jsx("span", { className: "ai-popover-label", children: t("status.total", "Total") }), lbIsLoadingStorage || isImplicitStorageLoading ? (_jsxs("div", { className: "ai-row", children: [_jsx("div", { className: "ai-kv-skeleton ai-kv-skeleton--120" }), _jsx("div", { className: "ai-kv-skeleton ai-kv-skeleton--circle" })] })) : (_jsxs("div", { className: "ai-row", children: [_jsxs("span", { className: "ai-popover-value", children: [formatStorage(storageUsed), " /", " ", formatStorage(storageTotal)] }), _jsx(UsageCircle, { percentage: storagePct })] }))] })] }), _jsxs("div", { className: "ai-status-actions", children: [QUICK_LINKS.map((item) => {
                                     const Icon = item.icon;
-                                    return (_jsx("button", { type: "button", className: "ai-status-action-btn", onClick: () => window.open(item.href, "_blank"), title: item.title, children: _jsx(Icon, { size: 17 }) }, item.href));
+                                    const label = t(item.titleKey, item.titleKey);
+                                    return (_jsx("button", { type: "button", className: "ai-status-action-btn", onClick: () => window.open(item.href, "_blank"), title: label, "data-ai-tip": label, children: _jsx(Icon, { size: 17 }) }, item.href));
                                 }), logout && !isApiKeyAuthMode ? (_jsx("button", { type: "button", className: "ai-status-action-btn ai-status-action-btn--danger", onClick: async () => {
                                         try {
                                             await logout();
@@ -305,12 +308,12 @@ export function AiStatusButton({ status, loading = false, className = "", size =
                                         catch (error) {
                                             console.error("Logout failed:", error);
                                         }
-                                    }, title: "Logout", children: _jsx(LogOut, { size: 17 }) })) : null] })] }) })) : (_jsxs("div", { className: "ai-popover-body", children: [_jsx("div", { className: "ai-popover-header", children: "LastBrain Authentication" }), _jsx("p", { className: "ai-signin-subtitle mt-0", children: "Connectez-vous pour acc\u00E9der aux fonctionnalit\u00E9s IA." }), _jsx("button", { type: "button", className: "ai-btn ai-btn--auth w-full mt-2", onClick: () => {
+                                    }, title: t("status.logout", "Logout"), "data-ai-tip": t("status.logout", "Logout"), children: _jsx(LogOut, { size: 17 }) })) : null] })] }) })) : (_jsxs("div", { className: "ai-popover-body", children: [_jsx("div", { className: "ai-popover-header", children: t("status.lastbrainAuth", "LastBrain Authentication") }), _jsx("p", { className: "ai-signin-subtitle", style: { marginTop: 0 }, children: t("status.connectToAccess", "Sign in to access AI features.") }), _jsx("button", { type: "button", className: "ai-btn ai-btn--auth", style: { width: "100%", marginTop: 8 }, onClick: () => {
                             setShowSigninModal(true);
                             setShowTooltip(false);
-                        }, children: "Se connecter" })] })) }), document.body)
+                        }, children: t("auth.signIn", "Sign in") })] })) }), document.body)
         : null;
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative inline-block", children: [_jsx("button", { ref: buttonRef, className: triggerClass, onMouseEnter: openTooltip, onMouseLeave: closeTooltip, onClick: () => {
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: { position: "relative", display: "inline-block" }, children: [_jsx("button", { ref: buttonRef, className: triggerClass, onMouseEnter: openTooltip, onMouseLeave: closeTooltip, onClick: () => {
                             if (requiresApiKeySelection) {
                                 setShowApiKeySelector(true);
                                 return;
@@ -319,8 +322,8 @@ export function AiStatusButton({ status, loading = false, className = "", size =
                                 setShowSigninModal(true);
                             }
                         }, disabled: loading || isSelectingApiKey, title: requiresApiKeySelection
-                            ? "Sélectionnez une clé API"
-                            : "Voir le status", "aria-label": "AI status", children: renderTriggerIcon() }), showCornerLoading ? (_jsx("span", { className: "ai-status-loading-dot", "aria-hidden": "true", children: _jsx(Loader2, { size: 7, className: "ai-spinner text-[var(--ai-primary)]" }) })) : null] }), tooltipNode, showApiKeySelector && apiKeys.length > 0 ? (_jsx(LBApiKeySelector, { isOpen: showApiKeySelector, apiKeys: apiKeys, onSelect: async (keyId) => {
+                            ? t("status.selectApiKey", "Select an API key")
+                            : t("status.view", "View status"), "aria-label": t("status.aiStatusAria", "AI status"), children: renderTriggerIcon() }), showCornerLoading ? (_jsx("span", { className: "ai-status-loading-dot", "aria-hidden": "true", children: _jsx(Loader2, { size: 7, className: "ai-spinner" }) })) : null] }), tooltipNode, showApiKeySelector && apiKeys.length > 0 ? (_jsx(LBApiKeySelector, { isOpen: showApiKeySelector, apiKeys: apiKeys, onSelect: async (keyId) => {
                     setIsSelectingApiKey(true);
                     try {
                         if (!switchApiKey) {

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

@@ -1 +1 @@
-{"version":3,"file":"AiTextarea.d.ts","sourceRoot":"","sources":["../../src/components/AiTextarea.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAC5B,OAAc,EAIZ,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAU9D,MAAM,WAAW,eACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAC9D,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAgB,EAChB,IAAW,EACX,MAAa,EACb,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,qBAAqB,EACrB,YAAY,EACZ,aAAa,EACb,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,aAAa,EACjB,EAAE,eAAe,2CA+NjB"}
+{"version":3,"file":"AiTextarea.d.ts","sourceRoot":"","sources":["../../src/components/AiTextarea.tsx"],"names":[],"mappings":"AAEA,OAAO,oBAAoB,CAAC;AAC5B,OAAc,EAIZ,KAAK,sBAAsB,EAC5B,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAY9D,MAAM,WAAW,eACf,SACE,IAAI,CAAC,WAAW,EAAE,MAAM,CAAC,EACzB,IAAI,CAAC,sBAAsB,CAAC,mBAAmB,CAAC,EAAE,SAAS,CAAC;IAC9D,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,YAAY,EACtB,MAAgB,EAChB,IAAW,EACX,MAAa,EACb,OAAO,EACP,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,qBAAqB,EACrB,YAAY,EACZ,aAAa,EACb,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,GAAG,aAAa,EACjB,EAAE,eAAe,2CA+OjB"}

package/dist/components/AiTextarea.js

@@ -11,7 +11,10 @@ import { handleAIError } from "../utils/errorHandler";
 import { useLB } from "../context/LBAuthProvider";
 import { LBSigninModal } from "./LBSigninModal";
 import { useAiContext } from "../context/AiProvider";
+import { useI18n } from "../context/I18nContext";
+import { useLoadingTimer } from "../hooks/useLoadingTimer";
 export function AiTextarea({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMode = "modal", size = "md", radius = "lg", context, model, prompt, editMode = false, enableModelManagement, storeOutputs, artifactTitle, onValue, onToast, disabled, className, ...textareaProps }) {
+    const { t } = useI18n();
     const [isOpen, setIsOpen] = useState(false);
     const [showAuthModal, setShowAuthModal] = useState(false);
     const [textareaValue, setTextareaValue] = useState(textareaProps.value?.toString() ||
@@ -48,6 +51,7 @@ export function AiTextarea({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMod
         modelType: "text-or-language",
     });
     const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
+    const { formatted: loadingElapsed } = useLoadingTimer(loading);
     const hasConfiguration = Boolean(model && prompt);
     const isAuthReady = lbStatus === "ready" || Boolean(process.env.LB_API_KEY);
     const shouldShowSparkles = isAuthReady && !disabled;
@@ -82,12 +86,18 @@ export function AiTextarea({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMod
                     textareaRef.current.value = result.text;
                 }
                 onValue?.(result.text);
-                onToast?.({ type: "success", message: "AI generation successful" });
+                onToast?.({
+                    type: "success",
+                    message: t("ai.generationSuccess", "AI generation successful"),
+                });
                 showUsageToast(result);
             }
         }
         catch (error) {
-            onToast?.({ type: "error", message: "Failed to generate text" });
+            onToast?.({
+                type: "error",
+                message: t("ai.generationError", "Failed to generate text"),
+            });
         }
         finally {
             setIsOpen(false);
@@ -114,7 +124,10 @@ export function AiTextarea({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMod
                     textareaRef.current.value = result.text;
                 }
                 onValue?.(result.text);
-                onToast?.({ type: "success", message: "AI generation successful" });
+                onToast?.({
+                    type: "success",
+                    message: t("ai.generationSuccess", "AI generation successful"),
+                });
                 showUsageToast(result);
             }
         }
@@ -146,8 +159,8 @@ export function AiTextarea({ baseUrl: propBaseUrl, apiKeyId: propApiKeyId, uiMod
                         }, onBlur: (e) => {
                             textareaProps.onBlur?.(e);
                         }, "aria-invalid": Boolean(textareaProps["aria-invalid"]), disabled: disabled || loading }), _jsx("button", { className: `ai-control-action ai-spark ${sizeClass} ${radiusClass}`, onClick: hasConfiguration ? handleQuickGenerate : handleOpenPanel, disabled: disabled || loading || !isAuthReady, type: "button", title: !isAuthReady
-                            ? "Authentication required"
+                            ? t("auth.required", "Authentication required")
                             : hasConfiguration
-                                ? "Generate with AI"
-                                : "Setup AI", children: loading ? (_jsx(Loader2, { size: 16, className: "ai-spinner" })) : shouldShowSparkles ? (_jsx(Sparkles, { size: 16 })) : (_jsx(Lock, { size: 16 })) })] }), isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: [], modelCategory: "text", sourceText: textareaValue || undefined, baseUrl: baseUrl, apiKey: apiKeyId, enableModelManagement: enableModelManagement, showOnlyUserModels: true })), Boolean(toastData) && (_jsx(UsageToast, { result: toastData, position: "bottom-right", onComplete: clearToast }, toastKey)), _jsx(LBSigninModal, { isOpen: showAuthModal, onClose: () => setShowAuthModal(false) })] }));
+                                ? t("ai.generate", "Generate with AI")
+                                : t("ai.setup", "Setup AI"), children: loading ? (_jsx(Loader2, { size: 16, className: "ai-spinner" })) : shouldShowSparkles ? (_jsx(Sparkles, { size: 16 })) : (_jsx(Lock, { size: 16 })) })] }), loading ? (_jsx("span", { className: "ai-control-timer", children: t("ai.loading.elapsed", "{seconds}", { seconds: loadingElapsed }) })) : null, isOpen && (_jsx(AiPromptPanel, { isOpen: isOpen, onClose: handleClosePanel, onSubmit: handleSubmit, uiMode: uiMode, models: [], modelCategory: "text", sourceText: textareaValue || undefined, baseUrl: baseUrl, apiKey: apiKeyId, enableModelManagement: enableModelManagement, showOnlyUserModels: true })), Boolean(toastData) && (_jsx(UsageToast, { result: toastData, position: "bottom-right", onComplete: clearToast }, toastKey)), _jsx(LBSigninModal, { isOpen: showAuthModal, onClose: () => setShowAuthModal(false) })] }));
 }