@lastbrain/ai-ui-react 1.0.73 → 1.0.75

package/dist/styles.css

@@ -122,7 +122,7 @@
 /* Base surface */
 .ai-surface {
   border: 1px solid var(--ai-border);
-  border-radius: var(--ai-radius-current, var(--ai-radius-md));
+  border-radius: 6px;
   color: var(--ai-foreground);
   background:
     linear-gradient(180deg, var(--ai-bg2), var(--ai-bg2)),
@@ -601,6 +601,14 @@
   margin-bottom: 10px;
 }
 
+.ai-popover-header--sub {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+  margin-bottom: 8px;
+  color: var(--ai-foreground);
+}
+
 .ai-popover-section {
   padding: 12px 0;
   border-top: 1px solid color-mix(in srgb, var(--ai-border) 72%, transparent);
@@ -648,6 +656,7 @@
 }
 
 .ai-status-action-btn {
+  position: relative;
   border: 1px solid color-mix(in srgb, var(--ai-primary) 34%, var(--ai-border));
   border-radius: 12px;
   width: 34px;
@@ -667,6 +676,34 @@
   transform: translateY(-1px);
 }
 
+.ai-status-action-btn[data-ai-tip]::after {
+  content: attr(data-ai-tip);
+  position: absolute;
+  left: 50%;
+  bottom: calc(100% + 8px);
+  transform: translate(-50%, 4px);
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  z-index: 2147483647;
+  padding: 4px 8px;
+  border-radius: 8px;
+  border: 1px solid var(--ai-border);
+  background: var(--ai-bg2);
+  color: var(--ai-foreground);
+  font-size: 11px;
+  font-weight: 600;
+  box-shadow: var(--ai-shadow-sm);
+  transition:
+    opacity var(--ai-transition),
+    transform var(--ai-transition);
+}
+
+.ai-status-action-btn[data-ai-tip]:hover::after {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
 .ai-status-trigger {
   position: relative;
   border: 1px solid var(--ai-border);
@@ -726,6 +763,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  color: var(--ai-primary);
   pointer-events: none;
 }
 
@@ -1145,6 +1183,12 @@
   background: color-mix(in srgb, var(--ai-bg2) 82%, transparent);
 }
 
+.ai-pill--warning {
+  color: #f59e0b;
+  border-color: color-mix(in srgb, #f59e0b 40%, var(--ai-border));
+  background: color-mix(in srgb, #f59e0b 14%, var(--ai-bg2));
+}
+
 .ai-toggle {
   position: relative;
   display: inline-flex;
@@ -1369,6 +1413,41 @@
   letter-spacing: 0.01em;
 }
 
+.ai-control-timer {
+  position: absolute;
+  right: 10px;
+  top: calc(100% + 5px);
+  font-size: 11px;
+  line-height: 1;
+  color: var(--ai-tertiary);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.ai-loading-stack {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 2px;
+}
+
+.ai-loading-row {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.ai-loading-meta {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  line-height: 1;
+  color: color-mix(in srgb, var(--ai-foreground) 68%, transparent);
+}
+
 .ai-inline-icon {
   color: var(--ai-muted);
 }
@@ -1380,6 +1459,67 @@
   animation: ai-pulse 1.4s ease-in-out infinite;
 }
 
+.ai-kv-skeleton--48 {
+  width: 48px;
+}
+
+.ai-kv-skeleton--92 {
+  width: 92px;
+}
+
+.ai-kv-skeleton--110 {
+  width: 110px;
+}
+
+.ai-kv-skeleton--120 {
+  width: 120px;
+}
+
+.ai-kv-skeleton--circle {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+}
+
+.ai-inline-skeleton {
+  display: inline-flex;
+  align-items: center;
+  min-width: 124px;
+  height: 30px;
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--ai-primary) 12%, var(--ai-bg2));
+  animation: ai-pulse 1.4s ease-in-out infinite;
+}
+
+.ai-list-skeleton {
+  border: 1px solid var(--ai-border);
+  border-radius: 12px;
+  background:
+    linear-gradient(180deg, var(--ai-bg2), var(--ai-bg2)),
+    radial-gradient(
+      120% 120% at 100% 0%,
+      rgba(var(--ai-glow-rgb), 0.05),
+      transparent 76%
+    );
+  padding: 14px 16px;
+}
+
+.ai-list-skeleton__line {
+  height: 12px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--ai-primary) 14%, var(--ai-bg2));
+  animation: ai-pulse 1.4s ease-in-out infinite;
+}
+
+.ai-list-skeleton__line--lg {
+  width: 56%;
+  margin-bottom: 10px;
+}
+
+.ai-list-skeleton__line--md {
+  width: 34%;
+}
+
 .ai-spinner,
 .ai-spin {
   animation: ai-spin 1s linear infinite;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/ai-ui-react",
-  "version": "1.0.73",
+  "version": "1.0.75",
   "description": "Headless React components for LastBrain AI UI Kit",
   "private": false,
   "type": "module",
@@ -51,7 +51,7 @@
   },
   "dependencies": {
     "lucide-react": "^0.257.0",
-    "@lastbrain/ai-ui-core": "1.0.53"
+    "@lastbrain/ai-ui-core": "1.0.54"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
@@ -62,7 +62,7 @@
   },
   "scripts": {
     "dev": "tsc -p tsconfig.json --watch",
-    "build": "tsc -p tsconfig.json && cp src/styles.css dist/styles.css && cp styles.d.ts dist/styles.d.ts",
+    "build": "tsc -p tsconfig.json && mkdir -p dist/i18n && cp src/i18n/*.json dist/i18n/ && cp src/styles.css dist/styles.css && cp styles.d.ts dist/styles.d.ts",
     "lint": "eslint ."
   }
 }

package/src/components/AiChipLabel.tsx

@@ -11,6 +11,7 @@ import { useAiContext } from "../context/AiProvider";
 import { useLB } from "../context/LBAuthProvider";
 import { handleAIError } from "../utils/errorHandler";
 import type { AiRadius, AiSize } from "../types";
+import { useI18n } from "../context/I18nContext";
 
 export interface AiChipLabelProps {
   children: React.ReactNode;
@@ -67,7 +68,7 @@ export interface AiChipInputProps {
 export function AiChipInput({
   value = [],
   onChange,
-  placeholder = "Tapez et appuyez sur Entrée pour ajouter des tags...",
+  placeholder,
   context,
   maxChips,
   allowDuplicates = false,
@@ -79,6 +80,7 @@ export function AiChipInput({
   size = "md",
   radius = "full",
 }: AiChipInputProps) {
+  const { t } = useI18n();
   const [inputValue, setInputValue] = useState("");
   const [showPromptPanel, setShowPromptPanel] = useState(false);
   const [showSigninModal, setShowSigninModal] = useState(false);
@@ -156,7 +158,8 @@ Exemple de réponse attendue: javascript, react, frontend, api, development`;
         model,
         prompt: instruction,
         storeOutputs,
-        artifactTitle: artifactTitle || "Tags générés par IA",
+        artifactTitle:
+          artifactTitle || t("ai.chips.artifactTitle", "AI generated tags"),
       });
 
       const chips = parseChipsFromResponse(response.text);
@@ -207,7 +210,10 @@ Exemple de réponse attendue: javascript, react, frontend, api, development`;
             value={inputValue}
             onChange={(e) => setInputValue(e.target.value)}
             onKeyDown={handleKeyDown}
-            placeholder={placeholder}
+            placeholder={
+              placeholder ||
+              t("ai.chips.placeholder", "Type and press Enter to add tags...")
+            }
             className={`ai-control ai-control-input ai-control-input--with-action ${sizeClass} ${radiusClass}`}
           />
           <button
@@ -221,13 +227,13 @@ Exemple de réponse attendue: javascript, react, frontend, api, development`;
             className={`ai-control-action ai-spark ${sizeClass} ${radiusClass}`}
             aria-label={
               isAuthenticated
-                ? "Générer des tags avec l'IA"
-                : "Connexion requise"
+                ? t("ai.chips.generate", "Generate tags with AI")
+                : t("auth.connectRequired", "Connection required")
             }
             title={
               isAuthenticated
-                ? "Générer des tags avec l'IA"
-                : "Se connecter pour utiliser l'IA"
+                ? t("ai.chips.generate", "Generate tags with AI")
+                : t("auth.connectToUseAi", "Sign in to use AI")
             }
           >
             {isAuthenticated ? <Sparkles size={16} /> : <Lock size={16} />}
@@ -247,7 +253,7 @@ Exemple de réponse attendue: javascript, react, frontend, api, development`;
               <button
                 onClick={() => removeChip(index)}
                 className="ai-chip-remover"
-                title="Supprimer"
+                title={t("ai.chips.remove", "Remove")}
               >
                 <X size={14} />
               </button>

package/src/components/AiContextButton.tsx

@@ -13,6 +13,7 @@ import { useAiContext } from "../context/AiProvider";
 import { handleAIError } from "../utils/errorHandler";
 import { useLB } from "../context/LBAuthProvider";
 import { LBSigninModal } from "./LBSigninModal";
+import { useI18n } from "../context/I18nContext";
 
 // Types pour les données de contexte
 type ContextData =
@@ -49,19 +50,22 @@ export function AiContextButton({
   apiKeyId: propApiKeyId,
   uiMode = "modal",
   contextData,
-  contextDescription = "Données à analyser",
+  contextDescription,
   onResult,
   onToast,
   disabled,
   className,
   children,
-  resultModalTitle = "Résultat de l'analyse",
+  resultModalTitle,
+  storeOutputs,
+  artifactTitle,
   size = "md",
   radius = "full",
   variant = "default",
   context: _context,
   ...buttonProps
 }: AiContextButtonProps) {
+  const { t, lang } = useI18n();
   const [isOpen, setIsOpen] = useState(false);
   const [showAuthModal, setShowAuthModal] = useState(false);
   const [isResultOpen, setIsResultOpen] = useState(false);
@@ -75,6 +79,8 @@ export function AiContextButton({
 
   const { showUsageToast } = useUsageToast();
   const { showErrorToast, errorData, errorKey, clearError } = useErrorToast();
+  const resolvedContextDescription =
+    contextDescription || t("ai.context.description", "Data to analyze");
 
   let lbStatus: string | undefined;
   try {
@@ -119,7 +125,7 @@ export function AiContextButton({
   ) => {
     try {
       const contextString = formatContextData(contextData);
-      const fullPrompt = `${selectedPrompt}\n\nCONTEXTE (${contextDescription}):\n${contextString}\n\nAnalyse ces données et réponds de manière structurée et claire.`;
+      const fullPrompt = `${selectedPrompt}\n\nCONTEXTE (${resolvedContextDescription}):\n${contextString}\n\n${t("ai.context.analyzeStructured", "Analyze this data and respond in a clear, structured way.")}`;
 
       const result = await callText({
         prompt: fullPrompt,
@@ -127,6 +133,8 @@ export function AiContextButton({
         context: _context || undefined,
         maxTokens: 4000,
         temperature: 0.7,
+        storeOutputs,
+        artifactTitle,
       });
 
       if (!result.text) {
@@ -156,7 +164,9 @@ export function AiContextButton({
 
       onToast?.({
         type: "success",
-        message: `Analyse terminée - Coût: $${(apiKeyId?.includes("dev") ? 0 : actualCost).toFixed(6)}`,
+        message: t("ai.analysisDoneCost", "Analysis completed - Cost: {cost}", {
+          cost: `$${(apiKeyId?.includes("dev") ? 0 : actualCost).toFixed(6)}`,
+        }),
       });
 
       showUsageToast({
@@ -182,18 +192,25 @@ export function AiContextButton({
       return;
     }
 
+    const locale = lang === "fr" ? "fr-FR" : "en-US";
     const currentDate = new Date()
-      .toLocaleDateString("fr-FR")
+      .toLocaleDateString(locale)
       .replace(/\//g, "-");
-    const defaultName = `analyse-${currentDate}.txt`;
-    const fileName = prompt("Nom du fichier :", defaultName) || defaultName;
+    const defaultName = t("ai.context.fileNameBase", "analysis-{date}.txt", {
+      date: currentDate,
+    });
+    const fileName =
+      prompt(t("ai.context.saveFileNamePrompt", "File name:"), defaultName) ||
+      defaultName;
 
-    const content = `ANALYSE DES DONNÉES - ${new Date().toLocaleString("fr-FR")}\n\nPROMPT UTILISÉ :\n${analysisResult.prompt}\n\nRÉSULTAT DE L'ANALYSE :\n${analysisResult.content}\n\n--- MÉTADONNÉES ---\nTokens utilisés: ${analysisResult.tokens.toLocaleString()}\nCoût: $${(apiKeyId?.includes(
+    const content = `${t("ai.context.fileHeader", "DATA ANALYSIS")} - ${new Date().toLocaleString(locale)}\n\n${t("common.promptUsed", "Prompt used").toUpperCase()} :\n${analysisResult.prompt}\n\n${t("common.result", "Result").toUpperCase()} :\n${analysisResult.content}\n\n--- ${t("ai.context.metadata", "METADATA")} ---\n${t("ai.context.tokensUsed", "Tokens used")}: ${analysisResult.tokens.toLocaleString()}\n${t("ai.context.cost", "Cost")}: $${(apiKeyId?.includes(
       "dev"
     )
       ? 0
       : analysisResult.cost
-    ).toFixed(6)}\nID de requête: ${analysisResult.requestId || "N/A"}`;
+    ).toFixed(
+      6
+    )}\n${t("ai.context.requestId", "Request ID")}: ${analysisResult.requestId || "N/A"}`;
 
     const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
     const url = URL.createObjectURL(blob);
@@ -219,23 +236,29 @@ export function AiContextButton({
           disabled={disabled || loading || !isAuthReady}
           className={`ai-btn ai-context-btn ${variantClass} ${sizeClass} ${radiusClass} ${className || ""}`}
           title={
-            !isAuthReady ? "Authentication required" : "Analyser avec l'IA"
+            !isAuthReady
+              ? t("auth.required", "Authentication required")
+              : t("ai.analyze", "Analyze with AI")
           }
         >
           {loading ? (
             <>
               <Loader2 size={16} className="ai-spinner" />
-              <span>Analyse...</span>
+              <span>{t("ai.analyzing", "Analyzing...")}</span>
             </>
           ) : !isAuthReady ? (
             <>
               <Lock size={16} />
-              {children || <span>Connexion requise</span>}
+              {children || (
+                <span>{t("auth.connectRequired", "Connection required")}</span>
+              )}
             </>
           ) : (
             <>
               <Sparkles size={16} />
-              {children || <span>Analyser</span>}
+              {children || (
+                <span>{t("ai.context.buttonAnalyze", "Analyze")}</span>
+              )}
             </>
           )}
         </button>
@@ -272,7 +295,10 @@ export function AiContextButton({
             <div className="ai-result-header">
               <div className="ai-row">
                 <FileText size={18} />
-                <h2 className="ai-result-title">{resultModalTitle}</h2>
+                <h2 className="ai-result-title">
+                  {resultModalTitle ||
+                    t("ai.context.resultTitle", "Analysis result")}
+                </h2>
               </div>
               <div className="ai-row">
                 <button
@@ -281,7 +307,7 @@ export function AiContextButton({
                   onClick={saveToFile}
                 >
                   <Download size={14} />
-                  Sauvegarder
+                  {t("common.save", "Save")}
                 </button>
                 <button
                   type="button"
@@ -290,7 +316,7 @@ export function AiContextButton({
                     setIsResultOpen(false);
                     setAnalysisResult(null);
                   }}
-                  aria-label="Fermer"
+                  aria-label={t("common.closeLabel", "Close")}
                 >
                   <X size={16} />
                 </button>
@@ -299,12 +325,16 @@ export function AiContextButton({
 
             <div className="ai-result-body">
               <div className="ai-result-block">
-                <h3 className="ai-result-subtitle">Prompt utilisé</h3>
+                <h3 className="ai-result-subtitle">
+                  {t("common.promptUsed", "Prompt used")}
+                </h3>
                 <pre className="ai-result-code">{analysisResult.prompt}</pre>
               </div>
 
               <div className="ai-result-block">
-                <h3 className="ai-result-subtitle">Résultat</h3>
+                <h3 className="ai-result-subtitle">
+                  {t("common.result", "Result")}
+                </h3>
                 <div className="ai-result-content">
                   {analysisResult.content}
                 </div>
@@ -312,13 +342,16 @@ export function AiContextButton({
 
               <div className="ai-result-meta ai-between">
                 <span>
-                  Coût: $
+                  {t("ai.context.cost", "Cost")}: $
                   {(apiKeyId?.includes("dev")
                     ? 0
                     : analysisResult.cost
                   ).toFixed(6)}
                 </span>
-                <span>ID: {analysisResult.requestId?.slice(-8) || "N/A"}</span>
+                <span>
+                  {t("ai.context.requestId", "Request ID")}:{" "}
+                  {analysisResult.requestId?.slice(-8) || "N/A"}
+                </span>
               </div>
             </div>
           </div>

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,15 @@ 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 +159,40 @@ 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 +216,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 +304,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 +325,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>