@lastbrain/ai-ui-react 1.0.73 → 1.0.75

package/src/components/AiInput.tsx

@@ -12,6 +12,8 @@ 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 interface AiInputProps
   extends
@@ -42,6 +44,7 @@ export function AiInput({
   className,
   ...inputProps
 }: AiInputProps) {
+  const { t } = useI18n();
   const [isOpen, setIsOpen] = useState(false);
   const [showAuthModal, setShowAuthModal] = useState(false);
   const [inputValue, setInputValue] = useState(
@@ -80,6 +83,7 @@ export function AiInput({
     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);
@@ -125,7 +129,10 @@ export function AiInput({
           inputRef.current.value = result.text;
         }
         onValue?.(result.text);
-        onToast?.({ type: "success", message: "AI generation successful" });
+        onToast?.({
+          type: "success",
+          message: t("ai.generationSuccess", "AI generation successful"),
+        });
       }
     } catch (error) {
       console.error("AiInput error:", error);
@@ -159,7 +166,10 @@ export function AiInput({
           inputRef.current.value = result.text;
         }
         onValue?.(result.text);
-        onToast?.({ type: "success", message: "AI generation successful" });
+        onToast?.({
+          type: "success",
+          message: t("ai.generationSuccess", "AI generation successful"),
+        });
       }
     } catch (error) {
       console.error("AiInput handleQuickGenerate error:", error);
@@ -201,10 +211,10 @@ export function AiInput({
           type="button"
           title={
             !isAuthReady
-              ? "Authentication required"
+              ? t("auth.required", "Authentication required")
               : hasConfiguration
-                ? "Generate with AI"
-                : "Setup AI"
+                ? t("ai.generate", "Generate with AI")
+                : t("ai.setup", "Setup AI")
           }
         >
           {loading ? (
@@ -216,6 +226,11 @@ export function AiInput({
           )}
         </button>
       </div>
+      {loading ? (
+        <span className="ai-control-timer">
+          {t("ai.loading.elapsed", "{seconds}", { seconds: loadingElapsed })}
+        </span>
+      ) : null}
       {isOpen && (
         <AiPromptPanel
           isOpen={isOpen}

package/src/components/AiModelSelect.tsx

@@ -3,6 +3,7 @@
 import "../styles/register";
 import React from "react";
 import type { ModelRef } from "@lastbrain/ai-ui-core";
+import { useI18n } from "../context/I18nContext";
 
 export interface AiModelSelectProps {
   models: ModelRef[];
@@ -19,6 +20,7 @@ export function AiModelSelect({
   className,
   disabled,
 }: AiModelSelectProps) {
+  const { t } = useI18n();
   return (
     <select
       value={value}
@@ -27,7 +29,9 @@ export function AiModelSelect({
       disabled={disabled}
       data-ai-model-select
     >
-      <option value="">Select a model</option>
+      <option value="">
+        {t("ai.select.modelPlaceholder", "Select a model")}
+      </option>
       {models.map((model) => (
         <option key={model.id} value={model.id}>
           {model.name}

package/src/components/AiPromptPanel.tsx

@@ -9,7 +9,15 @@ import {
   type ReactNode,
 } 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 type { ModelRef } from "@lastbrain/ai-ui-core";
 import type { UiMode } from "../types";
 import { aiStyles } from "../styles/inline";
@@ -22,6 +30,8 @@ import {
 import { useModelManagement } from "../hooks/useModelManagement";
 import { type AIModel } from "../context/AiProvider";
 import { AiProvider, useAiContext } from "../context/AiProvider";
+import { useI18n } from "../context/I18nContext";
+import { useLoadingTimer } from "../hooks/useLoadingTimer";
 
 export interface AiPromptPanelProps {
   isOpen: boolean;
@@ -105,6 +115,7 @@ function AiPromptPanelInternal({
   baseUrl,
   showOnlyUserModels = false,
 }: AiPromptPanelProps) {
+  const { t } = useI18n();
   const [selectedModel, setSelectedModel] = useState("");
   const [prompt, setPrompt] = useState("");
   const [promptId, setPromptId] = useState<string | undefined>(undefined);
@@ -125,6 +136,7 @@ function AiPromptPanelInternal({
   const [isModelManagementOpen, setIsModelManagementOpen] = useState(false);
   const [loadingModels, setLoadingModels] = useState<string[]>([]);
   const [modelSearchQuery, setModelSearchQuery] = useState("");
+  const { formatted: loadingElapsed } = useLoadingTimer(isGenerating);
 
   const {
     prompts,
@@ -164,6 +176,8 @@ function AiPromptPanelInternal({
   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: string, isActive: boolean) => {
@@ -187,7 +201,7 @@ function AiPromptPanelInternal({
         id: m.id,
         name: m.name,
         category: m.type === "image" ? ("image" as const) : ("text" as const),
-        provider: "Unknown",
+        provider: t("common.unknown", "Unknown"),
       }));
     }
 
@@ -464,7 +478,12 @@ function AiPromptPanelInternal({
                 letterSpacing: "0.02em",
               }}
             >
-              Génération en cours…
+              {t("prompt.modal.generating", "Generating...")}
+            </div>
+            <div className="ai-loading-meta">
+              {t("ai.loading.elapsed", "{seconds}", {
+                seconds: loadingElapsed,
+              })}
             </div>
           </div>
         )}
@@ -479,7 +498,9 @@ function AiPromptPanelInternal({
           }}
         >
           <h2 style={aiStyles.modalTitle}>
-            {showPromptLibrary ? "Select a Prompt" : "AI Prompt Configuration"}
+            {showPromptLibrary
+              ? t("prompt.modal.selectPrompt", "Select a Prompt")
+              : t("prompt.modal.title", "AI Prompt Configuration")}
           </h2>
           <button
             style={{
@@ -489,7 +510,7 @@ function AiPromptPanelInternal({
             onClick={handleClose}
             onMouseEnter={() => setIsCloseHovered(true)}
             onMouseLeave={() => setIsCloseHovered(false)}
-            aria-label="Close"
+            aria-label={t("common.closeLabel", "Close")}
           >
             ×
           </button>
@@ -511,7 +532,9 @@ function AiPromptPanelInternal({
                     marginBottom: "16px",
                   }}
                 >
-                  <label style={aiStyles.modalLabel}>Source Text</label>
+                  <label style={aiStyles.modalLabel}>
+                    {t("prompt.modal.sourceText", "Source Text")}
+                  </label>
                   <div
                     style={{
                       padding: "12px",
@@ -546,14 +569,22 @@ function AiPromptPanelInternal({
                       <label htmlFor="model-select" style={aiStyles.modalLabel}>
                         AI Model
                       </label>
-                      {effectiveAvailableModels.length > 0 && (
+                      {isModelsLoading ? (
+                        <span
+                          className="ai-inline-skeleton"
+                          aria-hidden="true"
+                        />
+                      ) : effectiveAvailableModels.length > 0 ? (
                         <button
                           onClick={() => setIsModelManagementOpen(true)}
                           className="ai-inline-btn"
-                          title="Gérer les modèles"
+                          title={t(
+                            "prompt.modal.manageModels",
+                            "Manage models"
+                          )}
                         >
                           <Settings size={14} />
-                          Gérer les modèles
+                          {t("prompt.modal.manageModels", "Manage models")}
                           {effectiveAvailableModels.filter(
                             (m) =>
                               m.category === modelCategory &&
@@ -581,7 +612,7 @@ function AiPromptPanelInternal({
                             </span>
                           )}
                         </button>
-                      )}
+                      ) : null}
                     </div>
                     <select
                       id="model-select"
@@ -597,8 +628,14 @@ function AiPromptPanelInternal({
                       {modelOptions.length === 0 && (
                         <option value="">
                           {showOnlyUserModels
-                            ? "No active models. Open 'Gérer les modèles'."
-                            : "Loading models..."}
+                            ? t(
+                                "prompt.modal.noActiveModels",
+                                "No active models. Open 'Manage models'."
+                              )
+                            : t(
+                                "prompt.modal.loadingModels",
+                                "Loading models..."
+                              )}
                         </option>
                       )}
                       {modelOptions.map((model) => {
@@ -613,7 +650,9 @@ function AiPromptPanelInternal({
                           >
                             {model.name}
                             {showAllModels && isActive && " ✓"}
-                            {showAllModels && !isActive && " (Désactivé)"}
+                            {showAllModels && !isActive
+                              ? ` (${t("common.inactive", "Inactive")})`
+                              : ""}
                           </option>
                         );
                       })}
@@ -626,7 +665,11 @@ function AiPromptPanelInternal({
                           marginTop: "4px",
                         }}
                       >
-                        💡 Cliquez sur "⚙️" pour activer/désactiver les modèles
+                        💡{" "}
+                        {t(
+                          "prompt.modal.clickSettingsHint",
+                          "Click ⚙️ to enable/disable models"
+                        )}
                       </div>
                     )}
                   </div>
@@ -648,7 +691,9 @@ function AiPromptPanelInternal({
                       }}
                     >
                       {models.length === 0 && (
-                        <option value="">Loading models...</option>
+                        <option value="">
+                          {t("prompt.modal.loadingModels", "Loading models...")}
+                        </option>
                       )}
                       {models.map((model) => (
                         <option key={model.id} value={model.id}>
@@ -670,7 +715,7 @@ function AiPromptPanelInternal({
                   }}
                 >
                   <label htmlFor="prompt-input" style={aiStyles.modalLabel}>
-                    Prompt
+                    {t("prompt.modal.prompt", "Prompt")}
                     <span
                       style={{
                         color: "var(--ai-text-secondary)",
@@ -679,18 +724,24 @@ function AiPromptPanelInternal({
                         fontWeight: 400,
                       }}
                     >
-                      (Cmd/Ctrl + Enter to submit)
+                      {t(
+                        "prompt.modal.promptHint",
+                        "(Cmd/Ctrl + Enter to submit)"
+                      )}
                     </span>
                   </label>
-                  {filteredPrompts.length > 0 && (
+                  {promptsLoading ? (
+                    <span className="ai-inline-skeleton" aria-hidden="true" />
+                  ) : filteredPrompts.length > 0 ? (
                     <button
                       onClick={() => setShowPromptLibrary(true)}
                       className="ai-inline-btn"
                     >
                       <BookOpen size={14} />
-                      Browse Prompts ({filteredPrompts.length})
+                      {t("prompt.modal.browsePrompts", "Browse Prompts")} (
+                      {filteredPrompts.length})
                     </button>
-                  )}
+                  ) : null}
                 </div>
                 <textarea
                   id="prompt-input"
@@ -701,8 +752,14 @@ function AiPromptPanelInternal({
                   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'"
+                      ? 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={{
@@ -730,7 +787,7 @@ function AiPromptPanelInternal({
                   gap: "4px",
                 }}
               >
-                ← Back to form
+                ← {t("prompt.modal.backToFormNoArrow", "Back to form")}
               </button>
 
               <div style={{ marginBottom: "12px" }}>
@@ -753,7 +810,10 @@ function AiPromptPanelInternal({
                   <input
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
-                    placeholder="Search prompts..."
+                    placeholder={t(
+                      "prompt.modal.searchPrompts",
+                      "Search prompts..."
+                    )}
                     style={{
                       ...aiStyles.input,
                       padding: "10px 12px 10px 36px",
@@ -780,7 +840,7 @@ function AiPromptPanelInternal({
                       }}
                     >
                       <Tag size={14} />
-                      Tags
+                      {t("prompt.modal.tags", "Tags")}
                     </span>
                     <button
                       onClick={() => setSelectedTag("all")}
@@ -796,7 +856,7 @@ function AiPromptPanelInternal({
                             : (aiStyles.chip.background as string),
                       }}
                     >
-                      All
+                      {t("common.all", "All")}
                     </button>
                     {availableTags.map((tag) => (
                       <button
@@ -822,8 +882,24 @@ function AiPromptPanelInternal({
               </div>
 
               {promptsLoading ? (
-                <div style={{ textAlign: "center", padding: "40px 0" }}>
-                  Loading prompts...
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "12px",
+                    maxHeight: "400px",
+                    overflow: "auto",
+                  }}
+                >
+                  {Array.from({ length: 4 }).map((_, idx) => (
+                    <div
+                      key={`prompt-skeleton-${idx}`}
+                      className="ai-list-skeleton"
+                    >
+                      <div className="ai-list-skeleton__line ai-list-skeleton__line--lg" />
+                      <div className="ai-list-skeleton__line ai-list-skeleton__line--md" />
+                    </div>
+                  ))}
                 </div>
               ) : visiblePrompts.length === 0 ? (
                 <div
@@ -833,7 +909,10 @@ function AiPromptPanelInternal({
                     color: "var(--ai-text-secondary)",
                   }}
                 >
-                  No prompts available for this model type
+                  {t(
+                    "prompt.modal.noPrompts",
+                    "No prompts available for this model type"
+                  )}
                 </div>
               ) : (
                 <div
@@ -856,7 +935,7 @@ function AiPromptPanelInternal({
                           marginBottom: "8px",
                         }}
                       >
-                        Favorites
+                        {t("prompt.modal.favorites", "Favorites")}
                       </div>
                       <div
                         style={{
@@ -944,7 +1023,7 @@ function AiPromptPanelInternal({
                           marginBottom: "8px",
                         }}
                       >
-                        All prompts
+                        {t("prompt.modal.allPrompts", "All prompts")}
                       </div>
                       <div
                         style={{
@@ -1031,14 +1110,34 @@ function AiPromptPanelInternal({
           }}
         >
           <button onClick={handleClose} className="ai-btn ai-btn--ghost">
-            Cancel
+            {t("prompt.modal.cancel", "Cancel")}
           </button>
           <button
             onClick={handleSubmit}
-            disabled={!selectedModel || !prompt.trim()}
+            disabled={isGenerating || !selectedModel || !prompt.trim()}
             className="ai-btn ai-btn--primary"
           >
-            {sourceText ? "Transform with AI" : "Generate with AI"}
+            {isGenerating ? (
+              <span className="ai-loading-stack">
+                <span className="ai-loading-row">
+                  <Loader2 size={16} className="ai-spinner" />
+                  <span>
+                    {sourceText
+                      ? t("prompt.modal.transforming", "Transforming...")
+                      : t("prompt.modal.generating", "Generating...")}
+                  </span>
+                </span>
+                <span className="ai-loading-meta">
+                  {t("ai.loading.elapsed", "{seconds}", {
+                    seconds: loadingElapsed,
+                  })}
+                </span>
+              </span>
+            ) : sourceText ? (
+              t("prompt.modal.transform", "Transform with AI")
+            ) : (
+              t("prompt.modal.generate", "Generate with AI")
+            )}
           </button>
         </div>
       </div>
@@ -1073,14 +1172,16 @@ function AiPromptPanelInternal({
             }}
           >
             <div style={aiStyles.modalHeader}>
-              <h2 style={aiStyles.modalTitle}>Gestion des modèles IA</h2>
+              <h2 style={aiStyles.modalTitle}>
+                {t("prompt.modal.modelMgmtTitle", "AI Model Management")}
+              </h2>
               <button
                 style={aiStyles.modalCloseButton}
                 onClick={() => {
                   setIsModelManagementOpen(false);
                   setModelSearchQuery("");
                 }}
-                aria-label="Close"
+                aria-label={t("common.closeLabel", "Close")}
               >
                 ×
               </button>
@@ -1101,7 +1202,10 @@ function AiPromptPanelInternal({
                     margin: "0 0 8px 0",
                   }}
                 >
-                  Activez ou désactivez les modèles selon vos besoins
+                  {t(
+                    "prompt.modal.modelMgmtSubtitle",
+                    "Enable or disable models based on your needs"
+                  )}
                 </p>
                 <p
                   style={{
@@ -1110,20 +1214,20 @@ function AiPromptPanelInternal({
                     margin: "0 0 16px 0",
                   }}
                 >
-                  {
-                    effectiveAvailableModels.filter(
-                      (m) => m.category === modelCategory
-                    ).length
-                  }{" "}
-                  modèles disponibles •{" "}
-                  {
-                    effectiveUserModels.filter((id) =>
-                      effectiveAvailableModels.some(
-                        (m) => m.id === id && m.category === modelCategory
-                      )
-                    ).length
-                  }{" "}
-                  activés
+                  {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,
+                    }
+                  )}
                 </p>
                 {/* Champ de recherche */}
                 <div
@@ -1145,7 +1249,10 @@ function AiPromptPanelInternal({
                   <input
                     value={modelSearchQuery}
                     onChange={(e) => setModelSearchQuery(e.target.value)}
-                    placeholder="Rechercher un modèle..."
+                    placeholder={t(
+                      "prompt.modal.searchModel",
+                      "Search a model..."
+                    )}
                     style={{
                       ...aiStyles.input,
                       padding: "10px 12px 10px 36px",
@@ -1156,6 +1263,19 @@ function AiPromptPanelInternal({
               </div>
 
               <div className="ai-model-mgmt-list">
+                {isModelsLoading ? (
+                  <>
+                    {Array.from({ length: 4 }).map((_, idx) => (
+                      <div
+                        key={`model-skeleton-${idx}`}
+                        className="ai-list-skeleton"
+                      >
+                        <div className="ai-list-skeleton__line ai-list-skeleton__line--lg" />
+                        <div className="ai-list-skeleton__line ai-list-skeleton__line--md" />
+                      </div>
+                    ))}
+                  </>
+                ) : null}
                 {effectiveAvailableModels
                   .filter((model) => {
                     if (model.category !== modelCategory) return false;
@@ -1253,29 +1373,36 @@ function AiPromptPanelInternal({
                       </div>
                     );
                   })}
-                {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 && (
-                  <div
-                    style={{
-                      textAlign: "center",
-                      padding: "32px 16px",
-                      color: "var(--ai-text-tertiary)",
-                      fontSize: "14px",
-                    }}
-                  >
-                    {modelSearchQuery.trim()
-                      ? "Aucun modèle ne correspond à votre recherche"
-                      : "Aucun modèle disponible"}
-                  </div>
-                )}
+                {!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 && (
+                    <div
+                      style={{
+                        textAlign: "center",
+                        padding: "32px 16px",
+                        color: "var(--ai-text-tertiary)",
+                        fontSize: "14px",
+                      }}
+                    >
+                      {modelSearchQuery.trim()
+                        ? t(
+                            "prompt.modal.noModelMatch",
+                            "No model matches your search"
+                          )
+                        : t(
+                            "prompt.modal.noModelAvailable",
+                            "No models available"
+                          )}
+                    </div>
+                  )}
               </div>
             </div>
 
@@ -1287,7 +1414,7 @@ function AiPromptPanelInternal({
                 }}
                 className="ai-btn ai-btn--ghost"
               >
-                Fermer
+                {t("prompt.modal.closeModelMgmt", "Close")}
               </button>
             </div>
           </div>

package/src/components/AiSelect.tsx

@@ -12,6 +12,7 @@ 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 interface AiSelectProps
   extends
@@ -41,6 +42,7 @@ export function AiSelect({
   children,
   ...selectProps
 }: AiSelectProps) {
+  const { t } = useI18n();
   const [isOpen, setIsOpen] = useState(false);
   const [showAuthModal, setShowAuthModal] = useState(false);
   const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
@@ -107,7 +109,10 @@ export function AiSelect({
 
       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);
       }
     } catch (error) {
@@ -140,8 +145,8 @@ export function AiSelect({
           onClick={handleOpenPanel}
           title={
             shouldShowSparkles
-              ? "Générer avec l'IA"
-              : "Se connecter pour utiliser l'IA"
+              ? t("ai.generate", "Generate with AI")
+              : t("auth.connectToUseAi", "Sign in to use AI")
           }
           disabled={disabled || loading}
           type="button"