@lastbrain/ai-ui-react 1.0.37 → 1.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lastbrain/ai-ui-react",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "description": "Headless React components for LastBrain AI UI Kit",
   "private": false,
   "type": "module",
@@ -48,7 +48,7 @@
   },
   "dependencies": {
     "lucide-react": "^0.257.0",
-    "@lastbrain/ai-ui-core": "1.0.26"
+    "@lastbrain/ai-ui-core": "1.0.29"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",

package/src/components/AiPromptPanel.tsx

@@ -424,7 +424,7 @@ function AiPromptPanelInternal({
             position: "sticky",
             top: 0,
             zIndex: 5,
-            background: "var(--ai-bg-primary, #1f2937)",
+
             borderBottom: "1px solid var(--ai-border-primary, #374151)",
             backdropFilter: "blur(8px)",
           }}
@@ -1003,7 +1003,7 @@ function AiPromptPanelInternal({
             position: "sticky",
             bottom: 0,
             zIndex: 5,
-            background: "var(--ai-bg-primary, #1f2937)",
+
             borderTop: "1px solid var(--ai-border-primary, #374151)",
             backdropFilter: "blur(8px)",
           }}
@@ -1066,7 +1066,7 @@ function AiPromptPanelInternal({
               overflow: "hidden",
               display: "flex",
               flexDirection: "column",
-              background: "var(--ai-bg-primary, #1f2937)",
+
               boxShadow: "0 20px 40px rgba(0, 0, 0, 0.5)",
             }}
           >
@@ -1250,9 +1250,8 @@ function AiPromptPanelInternal({
                                 style={{
                                   fontWeight: "600",
                                   fontSize: "15px",
-                                  color: isActive
-                                    ? "#10b981"
-                                    : "var(--ai-text-primary, #f3f4f6)",
+                                  color: "var(--ai-text-secondary, #6b7280)",
+
                                   letterSpacing: "-0.01em",
                                 }}
                               >

package/src/components/ErrorToast.tsx

@@ -24,6 +24,21 @@ export function ErrorToast({
   const fadeTimeoutRef = useRef<number | null>(null);
   const autoCloseTimeoutRef = useRef<number | null>(null);
 
+  const handleClose = () => {
+    if (isClosing) return;
+
+    // Clear auto-close timeout if user closes manually
+    if (autoCloseTimeoutRef.current) {
+      window.clearTimeout(autoCloseTimeoutRef.current);
+    }
+
+    setIsClosing(true);
+    fadeTimeoutRef.current = window.setTimeout(() => {
+      setIsVisible(false);
+      onComplete?.();
+    }, 200);
+  };
+
   useEffect(() => {
     if (error) {
       // Show toast immediately
@@ -46,22 +61,7 @@ export function ErrorToast({
         window.clearTimeout(autoCloseTimeoutRef.current);
       }
     };
-  }, [error]);
-
-  const handleClose = () => {
-    if (isClosing) return;
-
-    // Clear auto-close timeout if user closes manually
-    if (autoCloseTimeoutRef.current) {
-      window.clearTimeout(autoCloseTimeoutRef.current);
-    }
-
-    setIsClosing(true);
-    fadeTimeoutRef.current = window.setTimeout(() => {
-      setIsVisible(false);
-      onComplete?.();
-    }, 200);
-  };
+  }, [error, handleClose]);
 
   if (!error) return null;
 

package/src/components/LBConnectButton.tsx

@@ -0,0 +1,230 @@
+"use client";
+
+/**
+ * Bouton de connexion LastBrain
+ * Ouvre la modal d'authentification
+ */
+
+import React from "react";
+import { useLB } from "../context/LBAuthProvider";
+
+interface LBConnectButtonProps {
+  /** Texte du bouton */
+  label?: string;
+  /** Classe CSS personnalisée */
+  className?: string;
+  /** Callback après connexion réussie */
+  onConnected?: () => void;
+  /** Callback à l'ouverture de la modal */
+  onOpenModal?: () => void;
+}
+
+export function LBConnectButton({
+  label = "Se connecter à LastBrain",
+  className = "",
+  onConnected,
+  onOpenModal,
+}: LBConnectButtonProps) {
+  const { status, user, logout } = useLB();
+  const [showModal, setShowModal] = React.useState(false);
+
+  const handleClick = () => {
+    if (status === "ready" && user) {
+      // Déjà connecté, proposer de se déconnecter
+      logout();
+    } else {
+      // Pas connecté, ouvrir la modal
+      setShowModal(true);
+      onOpenModal?.();
+    }
+  };
+
+  const handleModalClose = (success: boolean) => {
+    setShowModal(false);
+    if (success) {
+      onConnected?.();
+    }
+  };
+
+  return (
+    <>
+      <button
+        onClick={handleClick}
+        className={
+          className ||
+          "px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+        }
+        disabled={status === "loading"}
+      >
+        {status === "loading"
+          ? "Chargement..."
+          : status === "ready" && user
+            ? `Connecté (${user.email})`
+            : label}
+      </button>
+
+      {showModal && <LBAuthModal onClose={handleModalClose} />}
+    </>
+  );
+}
+
+/**
+ * Modal d'authentification LastBrain
+ */
+interface LBAuthModalProps {
+  onClose: (success: boolean) => void;
+}
+
+function LBAuthModal({ onClose }: LBAuthModalProps) {
+  const { login, fetchApiKeys, selectApiKey, status } = useLB();
+  const [step, setStep] = React.useState<"login" | "select-key">("login");
+  const [email, setEmail] = React.useState("");
+  const [password, setPassword] = React.useState("");
+  const [error, setError] = React.useState("");
+  const [loading, setLoading] = React.useState(false);
+  const [accessToken, setAccessToken] = React.useState("");
+  const [apiKeys, setApiKeys] = React.useState<any[]>([]);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setLoading(true);
+
+    try {
+      const result = await login(email, password);
+      setAccessToken(result.accessToken);
+
+      // Récupérer les clés API
+      const keys = await fetchApiKeys(result.accessToken);
+      setApiKeys(keys);
+
+      if (keys.length === 0) {
+        setError(
+          "Aucune clé API active trouvée. Créez-en une dans votre dashboard LastBrain."
+        );
+        return;
+      }
+
+      // Passer à l'étape de sélection
+      setStep("select-key");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Échec de la connexion");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSelectKey = async (apiKeyId: string) => {
+    setError("");
+    setLoading(true);
+
+    try {
+      await selectApiKey(accessToken, apiKeyId);
+      onClose(true); // Succès
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Échec de la sélection");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+      <div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-xl font-bold">
+            {step === "login"
+              ? "Connexion LastBrain"
+              : "Sélectionner une clé API"}
+          </h2>
+          <button
+            onClick={() => onClose(false)}
+            className="text-gray-500 hover:text-gray-700"
+          >
+            ✕
+          </button>
+        </div>
+
+        {step === "login" ? (
+          <form onSubmit={handleLogin} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium mb-1">Email</label>
+              <input
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full px-3 py-2 border rounded dark:bg-gray-700"
+                required
+                autoFocus
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium mb-1">
+                Mot de passe
+              </label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full px-3 py-2 border rounded dark:bg-gray-700"
+                required
+              />
+            </div>
+
+            {error && <div className="text-red-600 text-sm">{error}</div>}
+
+            <button
+              type="submit"
+              disabled={loading}
+              className="w-full px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50"
+            >
+              {loading ? "Connexion..." : "Se connecter"}
+            </button>
+
+            <p className="text-sm text-gray-600 dark:text-gray-400 text-center">
+              Pas encore de compte ?{" "}
+              <a
+                href="https://lastbrain.io/signup"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-600 hover:underline"
+              >
+                Créer un compte
+              </a>
+            </p>
+          </form>
+        ) : (
+          <div className="space-y-4">
+            <p className="text-sm text-gray-600 dark:text-gray-400">
+              Sélectionnez une clé API pour créer une session de 72h
+            </p>
+
+            <div className="space-y-2">
+              {apiKeys.map((key) => (
+                <button
+                  key={key.id}
+                  onClick={() => handleSelectKey(key.id)}
+                  disabled={!key.isActive || loading}
+                  className="w-full text-left px-4 py-3 border rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+                >
+                  <div className="font-medium">{key.name}</div>
+                  <div className="text-sm text-gray-500">
+                    {key.keyPrefix}...
+                  </div>
+                  {!key.isActive && (
+                    <div className="text-xs text-red-600">Inactive</div>
+                  )}
+                </button>
+              ))}
+            </div>
+
+            {error && <div className="text-red-600 text-sm">{error}</div>}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export { LBAuthModal };

package/src/components/LBKeyPicker.tsx

@@ -0,0 +1,145 @@
+"use client";
+
+/**
+ * Composant LBKeyPicker
+ * Permet de changer de clé API sans se reconnecter
+ */
+
+import { useEffect, useState } from "react";
+import { useLB } from "../hooks/useLB";
+import type { LBApiKey } from "@lastbrain/ai-ui-core";
+
+interface LBKeyPickerProps {
+  /** Classe CSS personnalisée */
+  className?: string;
+  /** Callback après changement de clé */
+  onKeyChanged?: (key: LBApiKey) => void;
+}
+
+export function LBKeyPicker({
+  className = "",
+  onKeyChanged,
+}: LBKeyPickerProps) {
+  const { status, selectedKey, fetchApiKeys, selectApiKey, accessToken } =
+    useLB();
+  const [apiKeys, setApiKeys] = useState<LBApiKey[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  useEffect(() => {
+    if (status === "ready" && accessToken) {
+      loadKeys();
+    }
+  }, [status, accessToken]);
+
+  const loadKeys = async () => {
+    if (!accessToken) return;
+
+    try {
+      setLoading(true);
+      const keys = await fetchApiKeys(accessToken);
+      setApiKeys(keys);
+    } catch (err) {
+      setError("Impossible de charger les clés API");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSelectKey = async (keyId: string) => {
+    if (!accessToken) return;
+
+    try {
+      setLoading(true);
+      setError("");
+      await selectApiKey(accessToken, keyId);
+      const selectedApiKey = apiKeys.find((k) => k.id === keyId);
+      if (selectedApiKey) {
+        onKeyChanged?.(selectedApiKey);
+      }
+      setShowDropdown(false);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Échec du changement de clé"
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (status !== "ready" || !selectedKey) {
+    return null;
+  }
+
+  return (
+    <div className={`relative ${className}`}>
+      <button
+        onClick={() => setShowDropdown(!showDropdown)}
+        disabled={loading}
+        className="px-4 py-2 border rounded hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 flex items-center gap-2"
+      >
+        <span className="font-mono text-sm">{selectedKey.keyPrefix}...</span>
+        <svg
+          className="w-4 h-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      {showDropdown && (
+        <>
+          <div
+            className="fixed inset-0 z-10"
+            onClick={() => setShowDropdown(false)}
+          />
+          <div className="absolute right-0 mt-2 w-64 bg-white dark:bg-gray-800 border rounded-lg shadow-lg z-20">
+            <div className="p-2">
+              <div className="text-sm font-medium text-gray-700 dark:text-gray-300 px-3 py-2">
+                Changer de clé API
+              </div>
+              <div className="space-y-1">
+                {apiKeys.map((key) => (
+                  <button
+                    key={key.id}
+                    onClick={() => handleSelectKey(key.id)}
+                    disabled={
+                      !key.isActive || loading || key.id === selectedKey.id
+                    }
+                    className={`w-full text-left px-3 py-2 rounded text-sm ${
+                      key.id === selectedKey.id
+                        ? "bg-blue-100 dark:bg-blue-900"
+                        : "hover:bg-gray-100 dark:hover:bg-gray-700"
+                    } disabled:opacity-50 disabled:cursor-not-allowed`}
+                  >
+                    <div className="font-medium">{key.name}</div>
+                    <div className="text-xs text-gray-500 font-mono">
+                      {key.keyPrefix}...
+                    </div>
+                    {!key.isActive && (
+                      <div className="text-xs text-red-600">Inactive</div>
+                    )}
+                  </button>
+                ))}
+              </div>
+            </div>
+
+            {error && (
+              <div className="px-3 py-2 text-xs text-red-600 border-t">
+                {error}
+              </div>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}