@lastbrain/ai-ui-react 1.0.49 → 1.0.52

package/src/components/AiContextButton.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, type ButtonHTMLAttributes } from "react";
-import { Loader2, X, FileText, Sparkle, Download } from "lucide-react";
+import { Loader2, X, FileText, Sparkle, Download, Lock } from "lucide-react";
 import type { BaseAiProps } from "../types";
 import { useAiCallText } from "../hooks/useAiCallText";
 import { AiPromptPanel } from "./AiPromptPanel";
@@ -272,7 +272,7 @@ Analyse ces données et réponds de manière structurée et claire.`;
             border: "none",
             borderRadius: "12px",
             // padding: "12px 20px",
-            margin: "0px 8px",
+
             fontSize: "14px",
             fontWeight: "600",
             minWidth: "20px",
@@ -332,17 +332,13 @@ Analyse ces données et réponds de manière structurée et claire.`;
             </>
           ) : !isAuthReady ? (
             <>
-              <svg
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-              >
-                <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
-                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-              </svg>
+              <Lock
+                size={18}
+                style={{
+                  color: "white",
+                  filter: "drop-shadow(0 0 2px rgba(255,255,255,0.2))",
+                }}
+              />
               {children || <span>Connexion requise</span>}
             </>
           ) : (

package/src/components/AiImageButton.tsx

@@ -1,7 +1,14 @@
 "use client";
 
 import { useState, type ButtonHTMLAttributes } from "react";
-import { ImageIcon, Loader2, Download, ExternalLink, X } from "lucide-react";
+import {
+  ImageIcon,
+  Loader2,
+  Download,
+  ExternalLink,
+  X,
+  Lock,
+} from "lucide-react";
 import type { BaseAiProps } from "../types";
 import { useAiCallImage } from "../hooks/useAiCallImage";
 import { AiPromptPanel } from "./AiPromptPanel";
@@ -291,17 +298,13 @@ export function AiImageButton({
             </>
           ) : !isAuthReady ? (
             <>
-              <svg
-                width="18"
-                height="18"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-              >
-                <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
-                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-              </svg>
+              <Lock
+                size={18}
+                style={{
+                  color: "white",
+                  filter: "drop-shadow(0 0 2px rgba(255,255,255,0.2))",
+                }}
+              />
               {children || <span>Connexion requise</span>}
             </>
           ) : (

package/src/components/AiSelect.tsx

@@ -1,13 +1,16 @@
 "use client";
 
 import React, { useState, type SelectHTMLAttributes } from "react";
+import { Sparkles, Lock } from "lucide-react";
 import type { BaseAiProps } from "../types";
 import { useAiCallText } from "../hooks/useAiCallText";
 import { useAiModels } from "../hooks/useAiModels";
 import { AiPromptPanel } from "./AiPromptPanel";
 import { UsageToast, useUsageToast } from "./UsageToast";
+import { LBSigninModal } from "./LBSigninModal";
 import { aiStyles } from "../styles/inline";
 import { handleAIError } from "../utils/errorHandler";
+import { useLB } from "../context/LBAuthProvider";
 
 export interface AiSelectProps
   extends
@@ -34,9 +37,20 @@ export function AiSelect({
   ...selectProps
 }: AiSelectProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const [showAuthModal, setShowAuthModal] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
   const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
 
+  // Rendre l'authentification optionnelle
+  let lbStatus: string | undefined;
+  try {
+    const lbContext = useLB();
+    lbStatus = lbContext.status;
+  } catch {
+    // LBProvider n'est pas disponible, ignorer
+    lbStatus = undefined;
+  }
+
   const { models } = useAiModels({
     baseUrl,
     apiKeyId,
@@ -44,7 +58,14 @@ export function AiSelect({
   });
   const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
 
+  const isAuthReady = lbStatus === "ready" || Boolean(process.env.LB_API_KEY);
+  const shouldShowSparkles = isAuthReady && !disabled;
+
   const handleOpenPanel = () => {
+    if (!isAuthReady) {
+      setShowAuthModal(true);
+      return;
+    }
     setIsOpen(true);
   };
 
@@ -79,12 +100,13 @@ export function AiSelect({
   };
 
   return (
-    <div style={{ width: "100%" }} className={className}>
+    <div style={{ width: "100%", position: "relative" }} className={className}>
       <select
         {...selectProps}
         style={{
           ...aiStyles.select,
           ...(isFocused && aiStyles.selectFocus),
+          paddingRight: "40px", // Space for AI button
         }}
         onFocus={(e) => {
           setIsFocused(true);
@@ -98,6 +120,48 @@ export function AiSelect({
       >
         {children}
       </select>
+
+      {/* AI Button */}
+      <button
+        onClick={handleOpenPanel}
+        style={{
+          position: "absolute",
+          right: "8px",
+          top: "50%",
+          transform: "translateY(-50%)",
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          padding: "4px",
+          borderRadius: "4px",
+          display: "flex",
+          alignItems: "center",
+          color: shouldShowSparkles ? "#6366f1" : "#ef4444",
+        }}
+        title={
+          shouldShowSparkles
+            ? "Générer avec l'IA"
+            : "Se connecter pour utiliser l'IA"
+        }
+        disabled={disabled || loading}
+      >
+        {loading ? (
+          <svg
+            style={aiStyles.spinner}
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+          >
+            <path d="M12 2v4m0 12v4M4.93 4.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" />
+          </svg>
+        ) : shouldShowSparkles ? (
+          <Sparkles size={16} />
+        ) : (
+          <Lock size={16} />
+        )}
+      </button>
       {isOpen && (
         <AiPromptPanel
           isOpen={isOpen}
@@ -115,6 +179,12 @@ export function AiSelect({
           onComplete={clearToast}
         />
       )}
+
+      {/* Modal signin pour les utilisateurs non connectés */}
+      <LBSigninModal
+        isOpen={showAuthModal}
+        onClose={() => setShowAuthModal(false)}
+      />
     </div>
   );
 }

package/src/components/AiStatusButton.tsx

@@ -12,7 +12,7 @@ import {
   Power,
   LogOut,
   Key,
-  RefreshCw,
+  ArrowRightLeft,
 } from "lucide-react";
 import { aiStyles, calculateTooltipPosition } from "../styles/inline";
 import { useLB } from "../context/LBAuthProvider";
@@ -38,6 +38,7 @@ export function AiStatusButton({
   let apiKeys: any[] = [];
   let accessToken: string | undefined;
   let selectApiKeyWithToken: ((apiKeyId: string) => Promise<void>) | undefined;
+  let lbApiStatus: any = null;
 
   try {
     const lbContext = useLB();
@@ -47,6 +48,7 @@ export function AiStatusButton({
     apiKeys = lbContext.apiKeys || [];
     accessToken = lbContext.accessToken;
     selectApiKeyWithToken = lbContext.selectApiKeyWithToken;
+    lbApiStatus = lbContext.apiStatus;
   } catch {
     // LBProvider n'est pas disponible, ignorer
     lbStatus = undefined;
@@ -54,6 +56,9 @@ export function AiStatusButton({
     logout = undefined;
   }
 
+  // Utiliser le status du contexte LB si pas de prop status
+  const effectiveStatus = status || lbApiStatus;
+
   // Récupérer refetchProviders depuis AiProvider si disponible
   let refetchProviders: (() => Promise<void>) | undefined;
   try {
@@ -155,8 +160,8 @@ export function AiStatusButton({
     );
   };
 
-  const balanceUsage = status?.balance as BalanceUsage | undefined;
-  const storageUsage = status?.storage as StorageUsage | undefined;
+  const balanceUsage = effectiveStatus?.balance as BalanceUsage | undefined;
+  const storageUsage = effectiveStatus?.storage as StorageUsage | undefined;
 
   const balanceTotal =
     balanceUsage?.total ??
@@ -300,7 +305,7 @@ export function AiStatusButton({
     );
   }
 
-  if (!status) {
+  if (!effectiveStatus) {
     // Si pas de statut API et pas de LBProvider, afficher message simple
     if (!lbStatus && lbStatus !== "ready") {
       return (
@@ -592,7 +597,6 @@ export function AiStatusButton({
                     </div>
                     <div
                       style={{
-                        ...aiStyles.tooltipSection,
                         paddingBottom: "12px",
                       }}
                     >
@@ -691,7 +695,7 @@ export function AiStatusButton({
             <div style={aiStyles.tooltipHeader}>API Status</div>
 
             {/* User Info Section */}
-            {status.user?.email && (
+            {effectiveStatus.user?.email && (
               <div
                 style={{
                   ...aiStyles.tooltipSection,
@@ -709,7 +713,7 @@ export function AiStatusButton({
                       textOverflow: "ellipsis",
                     }}
                   >
-                    {status.user.email}
+                    {effectiveStatus.user.email}
                   </span>
                 </div>
               </div>
@@ -718,7 +722,9 @@ export function AiStatusButton({
             <div
               style={{
                 ...aiStyles.tooltipSection,
-                ...(status.user?.email ? {} : aiStyles.tooltipSectionFirst),
+                ...(effectiveStatus.user?.email
+                  ? {}
+                  : aiStyles.tooltipSectionFirst),
               }}
             >
               <div style={aiStyles.tooltipRow}>
@@ -731,12 +737,15 @@ export function AiStatusButton({
                   }}
                 >
                   <span style={aiStyles.tooltipValue}>
-                    {status.apiKey?.name || status.api_key?.name || "Unknown"}
+                    {effectiveStatus.apiKey?.name ||
+                      effectiveStatus.api_key?.name ||
+                      "Unknown"}
                   </span>
-                  {apiKeys.length > 1 && selectApiKeyWithToken && (
+                  {selectApiKeyWithToken && (
                     <button
                       onClick={(e) => {
                         e.stopPropagation();
+                        setShowTooltip(false);
                         setShowApiKeySelector(true);
                       }}
                       style={{
@@ -766,7 +775,7 @@ export function AiStatusButton({
                       }}
                       title="Change API Key"
                     >
-                      <RefreshCw
+                      <ArrowRightLeft
                         size={12}
                         style={{ color: "rgba(139, 92, 246, 1)" }}
                       />
@@ -777,14 +786,16 @@ export function AiStatusButton({
               <div style={aiStyles.tooltipRow}>
                 <span style={aiStyles.tooltipLabel}>Env:</span>
                 <span style={aiStyles.tooltipValue}>
-                  {status.apiKey?.env || status.api_key?.env || "N/A"}
+                  {effectiveStatus.apiKey?.env ||
+                    effectiveStatus.api_key?.env ||
+                    "N/A"}
                 </span>
               </div>
               <div style={aiStyles.tooltipRow}>
                 <span style={aiStyles.tooltipLabel}>Rate Limit:</span>
                 <span style={aiStyles.tooltipValue}>
-                  {status.apiKey?.rate_limit_rpm ||
-                    status.api_key?.rate_limit_rpm ||
+                  {effectiveStatus.apiKey?.rate_limit_rpm ||
+                    effectiveStatus.api_key?.rate_limit_rpm ||
                     0}{" "}
                   req/min
                 </span>
@@ -792,7 +803,7 @@ export function AiStatusButton({
             </div>
 
             <div style={aiStyles.tooltipSection}>
-              <div style={aiStyles.tooltipSubtitle}>Balance</div>
+              <div style={aiStyles.tooltipSubtitle}>Wallet</div>
               <div style={aiStyles.tooltipRow}>
                 <span style={aiStyles.tooltipLabel}>Total:</span>
                 <span style={aiStyles.tooltipValue}>
@@ -1001,6 +1012,7 @@ export function AiStatusButton({
                     justifyContent: "center",
                     color: "#8b5cf6",
                     transition: "all 0.2s ease",
+                    borderRadius: "4px",
                   }}
                   onMouseEnter={(e) => {
                     Object.assign(e.currentTarget.style, {
@@ -1043,6 +1055,7 @@ export function AiStatusButton({
                     justifyContent: "center",
                     color: "#ef4444",
                     transition: "all 0.2s ease",
+                    borderRadius: "4px",
                   }}
                   onMouseEnter={(e) => {
                     Object.assign(e.currentTarget.style, {

package/src/components/AiTextarea.tsx

@@ -6,7 +6,7 @@ import React, {
   useLayoutEffect,
   type TextareaHTMLAttributes,
 } from "react";
-import { Sparkles } from "lucide-react";
+import { Sparkles, Lock } from "lucide-react";
 import type { BaseAiProps } from "../types";
 import { useAiCallText } from "../hooks/useAiCallText";
 import { useAiModels } from "../hooks/useAiModels";
@@ -233,17 +233,7 @@ export function AiTextarea({
         ) : shouldShowSparkles ? (
           <Sparkles size={16} />
         ) : (
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-          >
-            <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
-            <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-          </svg>
+          <Lock size={16} />
         )}
       </button>
       {isOpen && (

package/src/components/LBApiKeySelector.tsx

@@ -66,7 +66,7 @@ export function LBApiKeySelector({
           left: 0,
           right: 0,
           bottom: 0,
-          background: "var(--ai-overlay-bg, rgba(0, 0, 0, 0.75))",
+          background: "rgba(0, 0, 0, 0.75)",
           backdropFilter: "blur(8px)",
         }}
       />
@@ -75,8 +75,8 @@ export function LBApiKeySelector({
       <div
         style={{
           position: "relative",
-          background: "var(--ai-modal-bg, #1f2937)",
-          border: "1px solid var(--ai-border-primary, #374151)",
+          background: "light-dark(#ffffff, #1e293b)",
+          border: "1px solid light-dark(#e2e8f0, #334155)",
           borderRadius: "12px",
           padding: "24px",
           maxWidth: "500px",
@@ -90,7 +90,7 @@ export function LBApiKeySelector({
             margin: "0 0 8px 0",
             fontSize: "20px",
             fontWeight: 600,
-            color: "var(--ai-text-primary, #f9fafb)",
+            color: "light-dark(#1e293b, #f8fafc)",
             textAlign: "center",
           }}
         >
@@ -101,7 +101,7 @@ export function LBApiKeySelector({
           style={{
             margin: "0 0 24px 0",
             fontSize: "14px",
-            color: "var(--ai-text-secondary, #9ca3af)",
+            color: "light-dark(#64748b, #94a3b8)",
             textAlign: "center",
             lineHeight: "1.5",
           }}
@@ -133,12 +133,10 @@ export function LBApiKeySelector({
                     alignItems: "center",
                     padding: "12px 16px",
                     background: isSelected
-                      ? "var(--ai-input-bg-focus, #374151)"
-                      : "var(--ai-input-bg, #111827)",
+                      ? "light-dark(#f1f5f9, #334155)"
+                      : "light-dark(#f8fafc, #0f172a)",
                     border: `2px solid ${
-                      isSelected
-                        ? "var(--ai-accent-primary, #8b5cf6)"
-                        : "var(--ai-border-primary, #374151)"
+                      isSelected ? "#8b5cf6" : "light-dark(#e2e8f0, #334155)"
                     }`,
                     borderRadius: "8px",
                     cursor: isActive ? "pointer" : "not-allowed",
@@ -148,17 +146,17 @@ export function LBApiKeySelector({
                   onMouseEnter={(e) => {
                     if (isActive && !isSelected) {
                       e.currentTarget.style.borderColor =
-                        "var(--ai-border-hover, #4b5563)";
+                        "light-dark(#cbd5e1, #475569)";
                       e.currentTarget.style.background =
-                        "var(--ai-input-bg-focus, #374151)";
+                        "light-dark(#f1f5f9, #334155)";
                     }
                   }}
                   onMouseLeave={(e) => {
                     if (isActive && !isSelected) {
                       e.currentTarget.style.borderColor =
-                        "var(--ai-border-primary, #374151)";
+                        "light-dark(#e2e8f0, #334155)";
                       e.currentTarget.style.background =
-                        "var(--ai-input-bg, #111827)";
+                        "light-dark(#f8fafc, #0f172a)";
                     }
                   }}
                 >
@@ -171,7 +169,7 @@ export function LBApiKeySelector({
                     onChange={(e) => setSelectedKeyId(e.target.value)}
                     style={{
                       marginRight: "12px",
-                      accentColor: "var(--ai-accent-primary, #8b5cf6)",
+                      accentColor: "#8b5cf6",
                       cursor: isActive ? "pointer" : "not-allowed",
                     }}
                   />
@@ -180,7 +178,7 @@ export function LBApiKeySelector({
                       style={{
                         fontSize: "14px",
                         fontWeight: 500,
-                        color: "var(--ai-text-primary, #f9fafb)",
+                        color: "light-dark(#1e293b, #f8fafc)",
                         marginBottom: "4px",
                       }}
                     >
@@ -189,7 +187,7 @@ export function LBApiKeySelector({
                     <div
                       style={{
                         fontSize: "12px",
-                        color: "var(--ai-text-secondary, #9ca3af)",
+                        color: "light-dark(#64748b, #94a3b8)",
                         fontFamily: "monospace",
                       }}
                     >
@@ -261,9 +259,9 @@ export function LBApiKeySelector({
                 flex: 1,
                 padding: "12px",
                 background: "transparent",
-                border: "1px solid var(--ai-border-primary, #374151)",
+                border: "1px solid light-dark(#e2e8f0, #334155)",
                 borderRadius: "8px",
-                color: "var(--ai-text-secondary, #9ca3af)",
+                color: "light-dark(#64748b, #94a3b8)",
                 fontSize: "14px",
                 fontWeight: 600,
                 cursor: loading ? "not-allowed" : "pointer",
@@ -273,16 +271,16 @@ export function LBApiKeySelector({
               onMouseEnter={(e) => {
                 if (!loading) {
                   e.currentTarget.style.background =
-                    "var(--ai-input-bg, #111827)";
+                    "light-dark(#f8fafc, #0f172a)";
                   e.currentTarget.style.borderColor =
-                    "var(--ai-border-hover, #4b5563)";
+                    "light-dark(#cbd5e1, #475569)";
                 }
               }}
               onMouseLeave={(e) => {
                 if (!loading) {
                   e.currentTarget.style.background = "transparent";
                   e.currentTarget.style.borderColor =
-                    "var(--ai-border-primary, #374151)";
+                    "light-dark(#e2e8f0, #334155)";
                 }
               }}
             >
@@ -295,7 +293,7 @@ export function LBApiKeySelector({
                 flex: 1,
                 padding: "12px",
                 background: loading
-                  ? "var(--ai-input-bg, #111827)"
+                  ? "light-dark(#e2e8f0, #0f172a)"
                   : "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)",
                 border: "none",
                 borderRadius: "8px",