@lastbrain/ai-ui-react 1.0.72 → 1.0.74

package/src/components/AiImageButton.tsx

@@ -20,6 +20,8 @@ import { useAiContext } from "../context/AiProvider";
 import { handleAIError } from "../utils/errorHandler";
 import { useLB } from "../context/LBAuthProvider";
 import { LBSigninModal } from "./LBSigninModal";
+import { useI18n } from "../context/I18nContext";
+import { useLoadingTimer } from "../hooks/useLoadingTimer";
 
 export interface AiImageButtonProps
   extends
@@ -63,6 +65,7 @@ export function AiImageButton({
   variant = "default",
   ...buttonProps
 }: AiImageButtonProps) {
+  const { t } = useI18n();
   const [isOpen, setIsOpen] = useState(false);
   const [showAuthModal, setShowAuthModal] = useState(false);
   const [generatedImage, setGeneratedImage] = useState<{
@@ -90,6 +93,7 @@ export function AiImageButton({
   const apiKeyId = propApiKeyId ?? aiContext.apiKeyId;
 
   const { generateImage, loading } = useAiCallImage({ baseUrl, apiKeyId });
+  const { formatted: loadingElapsed } = useLoadingTimer(loading);
 
   const isAuthReady = lbStatus === "ready" || Boolean(process.env.LB_API_KEY);
 
@@ -118,9 +122,12 @@ export function AiImageButton({
     if (!generatedImage || !onImageSave) return;
     try {
       await onImageSave(generatedImage.url);
-      onToast?.({ type: "success", message: "Image sauvegardée" });
+      onToast?.({ type: "success", message: t("ai.image.savedSuccess", "Image saved") });
     } catch (_error) {
-      onToast?.({ type: "error", message: "Erreur lors de la sauvegarde" });
+      onToast?.({
+        type: "error",
+        message: t("ai.image.saveError", "Error while saving"),
+      });
     }
   };
 
@@ -149,32 +156,37 @@ export function AiImageButton({
       });
 
       if (result.url) {
+        const safeRequestId = result.requestId || `img-${Date.now()}`;
+        const safeTokens = result.debitTokens || 0;
         // Stocker l'image générée
         const imageData = {
           url: result.url,
           prompt: selectedPrompt,
-          requestId: result.requestId,
-          tokens: result.debitTokens,
+          requestId: safeRequestId,
+          tokens: safeTokens,
         };
         setGeneratedImage(imageData);
         console.log("[AiImageButton] Image data stored:", imageData);
 
         onImage?.(result.url, {
-          requestId: result.requestId,
-          tokens: result.debitTokens,
+          requestId: safeRequestId,
+          tokens: safeTokens,
+        });
+        onToast?.({
+          type: "success",
+          message: t("ai.image.generatedSuccess", "Image generated successfully"),
         });
-        onToast?.({ type: "success", message: "Image générée avec succès" });
 
         // Afficher le toast de coût même en mode dev
         showUsageToast({
-          requestId: result.requestId,
-          debitTokens: result.debitTokens,
+          requestId: safeRequestId,
+          debitTokens: safeTokens,
           usage: {
-            total_tokens: result.debitTokens,
-            prompt_tokens: Math.floor(result.debitTokens * 0.8),
-            completion_tokens: Math.floor(result.debitTokens * 0.2),
+            total_tokens: safeTokens,
+            prompt_tokens: Math.floor(safeTokens * 0.8),
+            completion_tokens: Math.floor(safeTokens * 0.2),
           },
-          cost: apiKeyId?.includes("dev") ? 0 : result.debitTokens * 0.002, // Coût simulé
+          cost: apiKeyId?.includes("dev") ? 0 : safeTokens * 0.002, // Coût simulé
         });
       }
     } catch (error) {
@@ -198,25 +210,40 @@ export function AiImageButton({
           className={`ai-btn ai-image-btn ${variantClass} ${sizeClass} ${radiusClass} ${className || ""}`}
           style={buttonProps.style}
           data-ai-image-button
-          title={!isAuthReady ? "Authentication required" : "Générer une image"}
+          title={
+            !isAuthReady
+              ? t("auth.required", "Authentication required")
+              : t("ai.image.generate", "Generate image")
+          }
         >
           {loading ? (
-            <>
-              <Loader2 size={18} className="ai-spinner" />
-              <span className="ai-text-microtracking">Génération...</span>
-            </>
+            <span className="ai-loading-stack">
+              <span className="ai-loading-row">
+                <Loader2 size={18} className="ai-spinner" />
+                <span className="ai-text-microtracking">
+                  {t("ai.image.generating", "Generating...")}
+                </span>
+              </span>
+              <span className="ai-loading-meta">
+                {t("ai.loading.elapsed", "{seconds}", {
+                  seconds: loadingElapsed,
+                })}
+              </span>
+            </span>
           ) : !isAuthReady ? (
             <>
               <Lock size={18} />
 
-              {children || <span>Connexion requise</span>}
+              {children || (
+                <span>{t("auth.connectRequired", "Connection required")}</span>
+              )}
             </>
           ) : (
             <>
               <ImageIcon size={18} />
 
               <span className="ai-text-microtracking">
-                {children || "Générer une image"}
+                {children || t("ai.image.generate", "Generate image")}
               </span>
             </>
           )}
@@ -271,20 +298,20 @@ export function AiImageButton({
             <button
               onClick={handleDownload}
               className="ai-btn ai-btn--primary"
-              title="Télécharger l'image"
+              title={t("ai.image.download", "Download image")}
             >
               <Download size={16} />
-              Télécharger l'image
+              {t("ai.image.download", "Download image")}
             </button>
 
             {onImageSave && (
               <button
                 onClick={handleSave}
                 className="ai-btn"
-                title="Sauvegarder en base"
+                title={t("ai.image.saveToDb", "Save to database")}
               >
                 <ExternalLink size={14} />
-                Sauvegarder
+                {t("common.save", "Save")}
               </button>
             )}
           </div>
@@ -292,7 +319,7 @@ export function AiImageButton({
           {/* Metadata */}
           <div className="ai-image-meta">
             <div className="flex justify-center">
-              <span>ID: {generatedImage.requestId.slice(-8)}</span>
+              <span>ID: {(generatedImage.requestId || "N/A").slice(-8)}</span>
             </div>
           </div>
         </div>

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,7 @@ 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}