@lastbrain/ai-ui-react 1.0.40 → 1.0.42

package/src/components/AiStatusButton.tsx

@@ -9,8 +9,11 @@ import {
   FileText,
   History as HistoryIcon,
   FolderPlus,
+  Power,
 } from "lucide-react";
 import { aiStyles, calculateTooltipPosition } from "../styles/inline";
+import { useLB } from "../context/LBAuthProvider";
+import { LBSigninModal } from "./LBSigninModal";
 
 export interface AiStatusButtonProps {
   status: AiStatus | null;
@@ -23,6 +26,25 @@ export function AiStatusButton({
   loading = false,
   className = "",
 }: AiStatusButtonProps) {
+  // Rendre l'authentification optionnelle
+  let lbStatus: string | undefined;
+  let user: any;
+  let logout: (() => Promise<void>) | undefined;
+  
+  try {
+    const lbContext = useLB();
+    lbStatus = lbContext.status;
+    user = lbContext.user;
+    logout = lbContext.logout;
+  } catch {
+    // LBProvider n'est pas disponible, ignorer
+    lbStatus = undefined;
+    user = undefined;
+    logout = undefined;
+  }
+  
+  const [showSigninModal, setShowSigninModal] = useState(false);
+
   type BalanceUsage = {
     used?: number;
     total?: number;
@@ -257,47 +279,343 @@ export function AiStatusButton({
   }
 
   if (!status) {
+    // Si pas de statut API et pas de LBProvider, afficher message simple
+    if (!lbStatus && lbStatus !== "ready") {
+      return (
+        <div style={{ position: "relative", display: "inline-block" }}>
+          <button
+            ref={buttonRef}
+            style={{
+              ...aiStyles.statusButton,
+              color: "#ef4444",
+              ...(isHovered && aiStyles.statusButtonHover),
+            }}
+            className={className}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+          >
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+            >
+              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+            </svg>
+          </button>
+          {showTooltip &&
+            canPortal &&
+            createPortal(
+              <div
+                ref={tooltipRef}
+                style={{
+                  ...aiStyles.tooltip,
+                  ...tooltipPosition,
+                  zIndex: 50,
+                }}
+                onMouseEnter={() => setShowTooltip(true)}
+                onMouseLeave={handleMouseLeave}
+              >
+                No status available
+              </div>,
+              document.body
+            )}
+        </div>
+      );
+    }
+
     return (
-      <div style={{ position: "relative", display: "inline-block" }}>
-        <button
-          ref={buttonRef}
-          style={{
-            ...aiStyles.statusButton,
-            color: "#ef4444",
-            ...(isHovered && aiStyles.statusButtonHover),
-          }}
-          className={className}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-        >
-          <svg
-            width="16"
-            height="16"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
+      <>
+        <div style={{ position: "relative", display: "inline-block" }}>
+          <button
+            ref={buttonRef}
+            style={{
+              ...aiStyles.statusButton,
+              color: lbStatus === "ready" ? "#10b981" : "#ef4444",
+              ...(isHovered && aiStyles.statusButtonHover),
+            }}
+            className={className}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+            onClick={() => {
+              if (lbStatus !== "ready") {
+                setShowSigninModal(true);
+              }
+            }}
           >
-            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
-          </svg>
-        </button>
-        {showTooltip &&
-          canPortal &&
-          createPortal(
-            <div
-              ref={tooltipRef}
-              style={{
-                ...aiStyles.tooltip,
-                ...tooltipPosition,
-                zIndex: 50,
-              }}
-              onMouseEnter={() => setShowTooltip(true)}
-              onMouseLeave={handleMouseLeave}
+            <svg
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
             >
-              No status available
-            </div>,
-            document.body
-          )}
-      </div>
+              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+            </svg>
+          </button>
+          {showTooltip &&
+            canPortal &&
+            createPortal(
+              <div
+                ref={tooltipRef}
+                style={{
+                  ...aiStyles.tooltip,
+                  ...tooltipPosition,
+                  zIndex: 50,
+                }}
+                onMouseEnter={() => setShowTooltip(true)}
+                onMouseLeave={handleMouseLeave}
+              >
+                {lbStatus === "ready" && user ? (
+                  <>
+                    <div style={aiStyles.tooltipHeader}>
+                      LastBrain Connected
+                    </div>
+                    <div
+                      style={{
+                        ...aiStyles.tooltipSection,
+                        paddingBottom: "8px",
+                      }}
+                    >
+                      <div style={aiStyles.tooltipRow}>
+                        <span style={aiStyles.tooltipLabel}>User:</span>
+                        <span style={aiStyles.tooltipValue}>{user.email}</span>
+                      </div>
+                    </div>
+                    <div
+                      style={{
+                        display: "flex",
+                        gap: "8px",
+                        borderTop:
+                          "1px solid var(--ai-border-primary, #374151)",
+                        paddingTop: "12px",
+                      }}
+                    >
+                      <button
+                        onClick={() =>
+                          window.open("https://lastbrain.io/metrics", "_blank")
+                        }
+                        style={{
+                          flex: 1,
+                          background: "transparent",
+                          border: "none",
+                          padding: "14px",
+                          cursor: "pointer",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          color: "#8b5cf6",
+                          transition: "all 0.2s ease",
+                        }}
+                        onMouseEnter={(e) => {
+                          Object.assign(e.currentTarget.style, {
+                            background: "rgba(139, 92, 246, 0.1)",
+                          });
+                        }}
+                        onMouseLeave={(e) => {
+                          Object.assign(e.currentTarget.style, {
+                            background: "transparent",
+                          });
+                        }}
+                        title="View Metrics"
+                      >
+                        <BarChart3 size={18} />
+                      </button>
+                      <button
+                        onClick={() =>
+                          window.open("https://lastbrain.io/settings", "_blank")
+                        }
+                        style={{
+                          flex: 1,
+                          background: "transparent",
+                          border: "none",
+                          padding: "14px",
+                          cursor: "pointer",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          color: "#8b5cf6",
+                          transition: "all 0.2s ease",
+                        }}
+                        onMouseEnter={(e) => {
+                          Object.assign(e.currentTarget.style, {
+                            background: "rgba(139, 92, 246, 0.1)",
+                          });
+                        }}
+                        onMouseLeave={(e) => {
+                          Object.assign(e.currentTarget.style, {
+                            background: "transparent",
+                          });
+                        }}
+                        title="Settings"
+                      >
+                        <Settings size={18} />
+                      </button>
+                      <button
+                        onClick={() =>
+                          window.open(
+                            "https://prompt.lastbrain.io/auth/prompts",
+                            "_blank"
+                          )
+                        }
+                        style={{
+                          flex: 1,
+                          background: "transparent",
+                          border: "none",
+                          padding: "14px",
+                          cursor: "pointer",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          color: "#8b5cf6",
+                          transition: "all 0.2s ease",
+                        }}
+                        onMouseEnter={(e) => {
+                          Object.assign(e.currentTarget.style, {
+                            background: "rgba(139, 92, 246, 0.1)",
+                          });
+                        }}
+                        onMouseLeave={(e) => {
+                          Object.assign(e.currentTarget.style, {
+                            background: "transparent",
+                          });
+                        }}
+                        title="My Prompts"
+                      >
+                        <FileText size={18} />
+                      </button>
+                      <button
+                        onClick={() =>
+                          window.open(
+                            "https://prompt.lastbrain.io/auth/folder",
+                            "_blank"
+                          )
+                        }
+                        style={{
+                          flex: 1,
+                          background: "transparent",
+                          border: "none",
+                          padding: "14px",
+                          cursor: "pointer",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          color: "#8b5cf6",
+                          transition: "all 0.2s ease",
+                        }}
+                        onMouseEnter={(e) => {
+                          Object.assign(e.currentTarget.style, {
+                            background: "rgba(139, 92, 246, 0.1)",
+                          });
+                        }}
+                        onMouseLeave={(e) => {
+                          Object.assign(e.currentTarget.style, {
+                            background: "transparent",
+                          });
+                        }}
+                        title="New Folder"
+                      >
+                        <FolderPlus size={18} />
+                      </button>
+                      <button
+                        onClick={async () => {
+                          if (logout) {
+                            await logout();
+                          }
+                          setShowTooltip(false);
+                        }}
+                        style={{
+                          flex: 1,
+                          background: "transparent",
+                          border: "none",
+                          padding: "14px",
+                          cursor: "pointer",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          color: "#ef4444",
+                          transition: "all 0.2s ease",
+                        }}
+                        onMouseEnter={(e) => {
+                          Object.assign(e.currentTarget.style, {
+                            background: "rgba(239, 68, 68, 0.1)",
+                          });
+                        }}
+                        onMouseLeave={(e) => {
+                          Object.assign(e.currentTarget.style, {
+                            background: "transparent",
+                          });
+                        }}
+                        title="Logout"
+                      >
+                        <Power size={18} />
+                      </button>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <div style={aiStyles.tooltipHeader}>
+                      LastBrain Authentication
+                    </div>
+                    <div
+                      style={{
+                        ...aiStyles.tooltipSection,
+                        paddingBottom: "12px",
+                      }}
+                    >
+                      <p
+                        style={{
+                          margin: 0,
+                          fontSize: "13px",
+                          color: "var(--ai-text-secondary, #9ca3af)",
+                          lineHeight: "1.5",
+                        }}
+                      >
+                        Connectez-vous pour accéder aux fonctionnalités IA
+                      </p>
+                    </div>
+                    <button
+                      onClick={() => {
+                        setShowSigninModal(true);
+                        setShowTooltip(false);
+                      }}
+                      style={{
+                        width: "100%",
+                        padding: "10px",
+                        background:
+                          "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)",
+                        border: "none",
+                        borderRadius: "6px",
+                        color: "#ffffff",
+                        fontSize: "13px",
+                        fontWeight: 600,
+                        cursor: "pointer",
+                        transition: "all 0.2s ease",
+                      }}
+                      onMouseEnter={(e) => {
+                        e.currentTarget.style.transform = "translateY(-1px)";
+                        e.currentTarget.style.boxShadow =
+                          "0 4px 12px rgba(139, 92, 246, 0.3)";
+                      }}
+                      onMouseLeave={(e) => {
+                        e.currentTarget.style.transform = "translateY(0)";
+                        e.currentTarget.style.boxShadow = "none";
+                      }}
+                    >
+                      🔐 Se connecter
+                    </button>
+                  </>
+                )}
+              </div>,
+              document.body
+            )}
+        </div>
+        <LBSigninModal
+          isOpen={showSigninModal}
+          onClose={() => setShowSigninModal(false)}
+        />
+      </>
     );
   }
 

package/src/components/AiTextarea.tsx

@@ -14,6 +14,8 @@ import { AiPromptPanel } from "./AiPromptPanel";
 import { UsageToast, useUsageToast } from "./UsageToast";
 import { aiStyles } from "../styles/inline";
 import { handleAIError } from "../utils/errorHandler";
+import { useLB } from "../context/LBAuthProvider";
+import { LBSigninModal } from "./LBSigninModal";
 
 export interface AiTextareaProps
   extends
@@ -40,6 +42,7 @@ export function AiTextarea({
   ...textareaProps
 }: AiTextareaProps) {
   const [isOpen, setIsOpen] = useState(false);
+  const [showAuthModal, setShowAuthModal] = useState(false);
   const [textareaValue, setTextareaValue] = useState(
     textareaProps.value?.toString() ||
       textareaProps.defaultValue?.toString() ||
@@ -49,6 +52,16 @@ export function AiTextarea({
   const [isButtonHovered, setIsButtonHovered] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   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,
@@ -58,8 +71,14 @@ export function AiTextarea({
   const { generateText, loading } = useAiCallText({ baseUrl, apiKeyId });
 
   const hasConfiguration = Boolean(model && prompt);
+  const isAuthReady = lbStatus === "ready" || Boolean(process.env.LB_API_KEY);
+  const shouldShowSparkles = isAuthReady && !disabled;
 
   const handleOpenPanel = () => {
+    if (!isAuthReady) {
+      setShowAuthModal(true);
+      return;
+    }
     setIsOpen(true);
   };
 
@@ -190,9 +209,15 @@ export function AiTextarea({
         onClick={hasConfiguration ? handleQuickGenerate : handleOpenPanel}
         onMouseEnter={() => setIsButtonHovered(true)}
         onMouseLeave={() => setIsButtonHovered(false)}
-        disabled={disabled || loading}
+        disabled={disabled || loading || !isAuthReady}
         type="button"
-        title={hasConfiguration ? "Generate with AI" : "Setup AI"}
+        title={
+          !isAuthReady
+            ? "Authentication required"
+            : hasConfiguration
+              ? "Generate with AI"
+              : "Setup AI"
+        }
       >
         {loading ? (
           <svg
@@ -205,8 +230,20 @@ export function AiTextarea({
           >
             <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} />
+        ) : (
+          <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>
         )}
       </button>
       {isOpen && (
@@ -231,6 +268,10 @@ export function AiTextarea({
           onComplete={clearToast}
         />
       )}
+      <LBSigninModal
+        isOpen={showAuthModal}
+        onClose={() => setShowAuthModal(false)}
+      />
     </div>
   );
 }