@lastbrain/ai-ui-react 1.0.68 → 1.0.69

package/src/components/AiContextButton.tsx

@@ -1,23 +1,28 @@
 "use client";
 
 import { useState, type ButtonHTMLAttributes } from "react";
-import { Loader2, X, FileText, Sparkle, Download, Lock } from "lucide-react";
+import {
+  Download,
+  FileText,
+  Loader2,
+  Lock,
+  Sparkles,
+  X,
+} from "lucide-react";
 import type { BaseAiProps } from "../types";
+import type { AiRadius, AiSize, AiVariant } from "../types";
 import { useAiCallText } from "../hooks/useAiCallText";
 import { AiPromptPanel } from "./AiPromptPanel";
 import { useUsageToast } from "./UsageToast";
 import { useErrorToast, ErrorToast } from "./ErrorToast";
-import { aiStyles } from "../styles/inline";
 import { useAiContext } from "../context/AiProvider";
 import { handleAIError } from "../utils/errorHandler";
 import { useLB } from "../context/LBAuthProvider";
 import { LBSigninModal } from "./LBSigninModal";
 
 export interface AiContextButtonProps
-  extends
-    Omit<BaseAiProps, "onValue" | "type">,
+  extends Omit<BaseAiProps, "onValue" | "type">,
     Omit<ButtonHTMLAttributes<HTMLButtonElement>, "baseUrl" | "apiKeyId"> {
-  // Données de contexte à analyser
   contextData: any;
   contextDescription?: string;
   onResult?: (
@@ -26,11 +31,13 @@ export interface AiContextButtonProps
   ) => void;
   uiMode?: "modal" | "drawer";
   resultModalTitle?: string;
-  storeOutputs?: boolean; // For external API calls - whether to store outputs
-  artifactTitle?: string; // Title for stored artifacts
-  // Props optionnelles pour override du contexte
+  storeOutputs?: boolean;
+  artifactTitle?: string;
   baseUrl?: string;
   apiKeyId?: string;
+  size?: AiSize;
+  radius?: AiRadius;
+  variant?: AiVariant;
 }
 
 export function AiContextButton({
@@ -45,11 +52,10 @@ export function AiContextButton({
   className,
   children,
   resultModalTitle = "Résultat de l'analyse",
-  storeOutputs,
-  artifactTitle,
+  size = "md",
+  radius = "full",
+  variant = "default",
   context: _context,
-  model: _model,
-  prompt: _prompt,
   ...buttonProps
 }: AiContextButtonProps) {
   const [isOpen, setIsOpen] = useState(false);
@@ -62,20 +68,18 @@ export function AiContextButton({
     tokens: number;
     cost: number;
   } | null>(null);
-  const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
+
+  const { showUsageToast } = useUsageToast();
   const { showErrorToast, errorData, errorKey, clearError } = useErrorToast();
 
-  // Rendre l'authentification optionnelle
   let lbStatus: string | undefined;
   try {
     const lbContext = useLB();
     lbStatus = lbContext.status;
   } catch {
-    // LBProvider n'est pas disponible, ignorer
     lbStatus = undefined;
   }
 
-  // Récupérer le contexte AiProvider avec fallback sur les props
   const aiContext = useAiContext();
   const baseUrl = propBaseUrl ?? aiContext.baseUrl;
   const apiKeyId = propApiKeyId ?? aiContext.apiKeyId;
@@ -95,99 +99,20 @@ export function AiContextButton({
     setIsOpen(true);
   };
 
-  const handleClosePanel = () => {
-    setIsOpen(false);
-  };
-
-  const handleCloseResult = () => {
-    setIsResultOpen(false);
-    setAnalysisResult(null);
-  };
-
-  const saveToFile = () => {
-    if (!analysisResult) return;
-
-    const currentDate = new Date()
-      .toLocaleDateString("fr-FR")
-      .replace(/\//g, "-");
-    const defaultName = `analyse-${currentDate}.txt`;
-    const fileName = prompt("Nom du fichier :", defaultName) || defaultName;
-
-    const content = `ANALYSE DES DONNÉES - ${new Date().toLocaleString("fr-FR")}
-
-PROMPT UTILISÉ :
-${analysisResult.prompt}
-
-RÉSULTAT DE L'ANALYSE :
-${analysisResult.content}
-
---- MÉTADONNÉES ---
-Tokens utilisés: ${analysisResult.tokens.toLocaleString()}
-Coût: $${(apiKeyId?.includes("dev") ? 0 : analysisResult.cost).toFixed(6)}
-ID de requête: ${analysisResult.requestId || "N/A"}
-Date: ${new Date().toLocaleString("fr-FR")}`;
-
-    const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = fileName.endsWith(".txt") ? fileName : `${fileName}.txt`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  };
-
-  // Styles selon le thème
-  const getThemeStyles = () => {
-    const isDark =
-      typeof document !== "undefined" &&
-      (document.documentElement.classList.contains("dark") ||
-        (!document.documentElement.classList.contains("light") &&
-          window.matchMedia("(prefers-color-scheme: dark)").matches));
-
-    return {
-      modal: {
-        backgroundColor: isDark ? "#1f2937" : "white",
-        border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
-        color: isDark ? "#f3f4f6" : "#374151",
-      },
-      header: {
-        color: isDark ? "#f9fafb" : "#1f2937",
-        borderBottom: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
-      },
-      content: {
-        backgroundColor: isDark ? "#111827" : "#f9fafb",
-        border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
-      },
-      closeButton: {
-        color: isDark ? "#9ca3af" : "#6b7280",
-        hoverColor: isDark ? "#d1d5db" : "#374151",
-      },
-    };
-  };
-
   const formatContextData = (data: any): string => {
-    if (typeof data === "string") return data;
+    if (typeof data === "string") {
+      return data;
+    }
     if (typeof data === "object" && data !== null) {
       return JSON.stringify(data, null, 2);
     }
     return String(data);
   };
 
-  const handleSubmit = async (
-    selectedModel: string,
-    selectedPrompt: string
-  ) => {
+  const handleSubmit = async (selectedModel: string, selectedPrompt: string) => {
     try {
-      // Construire le prompt avec le contexte
       const contextString = formatContextData(contextData);
-      const fullPrompt = `${selectedPrompt}
-
-CONTEXTE (${contextDescription}):
-${contextString}
-
-Analyse ces données et réponds de manière structurée et claire.`;
+      const fullPrompt = `${selectedPrompt}\n\nCONTEXTE (${contextDescription}):\n${contextString}\n\nAnalyse ces données et réponds de manière structurée et claire.`;
 
       const result = await callText({
         prompt: fullPrompt,
@@ -197,48 +122,46 @@ Analyse ces données et réponds de manière structurée et claire.`;
         temperature: 0.7,
       });
 
-      if (result.text) {
-        // Calculer le total des tokens depuis la réponse réelle
-        const resultAny = result as any;
-        const totalTokens =
-          (resultAny.inputTokens || 0) + (resultAny.outputTokens || 0) ||
-          result.debitTokens ||
-          0;
-        const actualCost = resultAny.cost || 0;
-
-        const resultData = {
-          content: result.text,
-          prompt: selectedPrompt,
-          requestId: result.requestId,
-          tokens: totalTokens,
-          cost: actualCost,
-        };
+      if (!result.text) {
+        return;
+      }
 
-        setAnalysisResult(resultData);
-        setIsResultOpen(true);
+      const resultAny = result as any;
+      const totalTokens =
+        (resultAny.inputTokens || 0) + (resultAny.outputTokens || 0) ||
+        result.debitTokens ||
+        0;
+      const actualCost = resultAny.cost || 0;
+
+      setAnalysisResult({
+        content: result.text,
+        prompt: selectedPrompt,
+        requestId: result.requestId,
+        tokens: totalTokens,
+        cost: actualCost,
+      });
+      setIsResultOpen(true);
 
-        onResult?.(result.text, {
-          requestId: result.requestId,
-          tokens: result.debitTokens || 0,
-        });
+      onResult?.(result.text, {
+        requestId: result.requestId,
+        tokens: result.debitTokens || 0,
+      });
 
-        onToast?.({
-          type: "success",
-          message: `Analyse terminée - Coût: $${(apiKeyId?.includes("dev") ? 0 : actualCost).toFixed(6)}`,
-        });
+      onToast?.({
+        type: "success",
+        message: `Analyse terminée - Coût: $${(apiKeyId?.includes("dev") ? 0 : actualCost).toFixed(6)}`,
+      });
 
-        // Afficher le toast de coût
-        showUsageToast({
-          requestId: result.requestId,
-          debitTokens: totalTokens,
-          usage: {
-            total_tokens: totalTokens,
-            prompt_tokens: resultAny.inputTokens || 0,
-            completion_tokens: resultAny.outputTokens || 0,
-          },
-          cost: apiKeyId?.includes("dev") ? 0 : actualCost,
-        });
-      }
+      showUsageToast({
+        requestId: result.requestId,
+        debitTokens: totalTokens,
+        usage: {
+          total_tokens: totalTokens,
+          prompt_tokens: resultAny.inputTokens || 0,
+          completion_tokens: resultAny.outputTokens || 0,
+        },
+        cost: apiKeyId?.includes("dev") ? 0 : actualCost,
+      });
     } catch (error) {
       console.error("AiContextButton error:", error);
       handleAIError(error, onToast, showErrorToast);
@@ -247,352 +170,137 @@ Analyse ces données et réponds de manière structurée et claire.`;
     }
   };
 
+  const saveToFile = () => {
+    if (!analysisResult) {
+      return;
+    }
+
+    const currentDate = new Date().toLocaleDateString("fr-FR").replace(/\//g, "-");
+    const defaultName = `analyse-${currentDate}.txt`;
+    const fileName = prompt("Nom du fichier :", 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("dev") ? 0 : analysisResult.cost
+    ).toFixed(6)}\nID de requête: ${analysisResult.requestId || "N/A"}`;
+
+    const blob = new Blob([content], { type: "text/plain;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = fileName.endsWith(".txt") ? fileName : `${fileName}.txt`;
+    document.body.appendChild(anchor);
+    anchor.click();
+    document.body.removeChild(anchor);
+    URL.revokeObjectURL(url);
+  };
+
+  const sizeClass = `ai-size-${size}`;
+  const radiusClass = `ai-radius-${radius}`;
+  const variantClass = variant === "light" ? "ai-btn--light" : "";
+
   return (
     <>
-      <div style={{ position: "relative", display: "inline-block" }}>
+      <div className="relative inline-block ai-glow">
         <button
           {...buttonProps}
           onClick={handleOpenPanel}
           disabled={disabled || loading || !isAuthReady}
-          className={className}
-          style={{
-            ...aiStyles.button,
-            display: "flex",
-            alignItems: "center",
-            gap: "8px",
-            cursor:
-              disabled || loading || !isAuthReady ? "not-allowed" : "pointer",
-            opacity: disabled || loading || !isAuthReady ? 0.6 : 1,
-            backgroundColor: loading
-              ? "#8b5cf6"
-              : !isAuthReady
-                ? "#94a3b8"
-                : "#7c3aed",
-            color: "white",
-            border: "none",
-            borderRadius: "12px",
-            // padding: "12px 20px",
-
-            fontSize: "14px",
-            fontWeight: "600",
-            minWidth: "20px",
-            height: "44px",
-            transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-            boxShadow: loading
-              ? "0 4px 12px rgba(139, 92, 246, 0.3)"
-              : "0 2px 8px rgba(124, 58, 237, 0.2)",
-            transform: "scale(1)",
-            ...(loading && {
-              background: "linear-gradient(135deg, #7c3aed, #8b5cf6)",
-              animation: "pulse 2s ease-in-out infinite",
-            }),
-            ...buttonProps.style,
-          }}
-          onMouseEnter={(e) => {
-            if (!disabled && !loading && isAuthReady) {
-              e.currentTarget.style.transform = "scale(1.02)";
-              e.currentTarget.style.boxShadow =
-                "0 6px 16px rgba(124, 58, 237, 0.3)";
-            }
-          }}
-          onMouseLeave={(e) => {
-            if (!disabled && !loading && isAuthReady) {
-              e.currentTarget.style.transform = "scale(1)";
-              e.currentTarget.style.boxShadow = loading
-                ? "0 4px 12px rgba(139, 92, 246, 0.3)"
-                : "0 2px 8px rgba(124, 58, 237, 0.2)";
-            }
-          }}
-          onMouseDown={(e) => {
-            if (!disabled && !loading && isAuthReady) {
-              e.currentTarget.style.transform = "scale(0.98)";
-            }
-          }}
-          onMouseUp={(e) => {
-            if (!disabled && !loading && isAuthReady) {
-              e.currentTarget.style.transform = "scale(1.02)";
-            }
-          }}
-          data-ai-context-button
-          title={
-            !isAuthReady ? "Authentication required" : "Analyser avec l'IA"
-          }
+          className={`ai-btn ai-context-btn ${variantClass} ${sizeClass} ${radiusClass} ${className || ""}`}
+          title={!isAuthReady ? "Authentication required" : "Analyser avec l'IA"}
         >
           {loading ? (
             <>
-              <Loader2
-                size={18}
-                className="animate-spin"
-                style={{
-                  color: "white",
-                  filter: "drop-shadow(0 0 2px rgba(255,255,255,0.3))",
-                }}
-              />
-              <span style={{ letterSpacing: "0.025em" }}>Analyse...</span>
+              <Loader2 size={16} className="ai-spinner" />
+              <span>Analyse...</span>
             </>
           ) : !isAuthReady ? (
             <>
-              <Lock
-                size={18}
-                style={{
-                  color: "white",
-                  filter: "drop-shadow(0 0 2px rgba(255,255,255,0.2))",
-                }}
-              />
+              <Lock size={16} />
               {children || <span>Connexion requise</span>}
             </>
           ) : (
             <>
-              <Sparkle
-                size={18}
-                style={{
-                  color: "white",
-                  filter: "drop-shadow(0 0 2px rgba(255,255,255,0.2))",
-                }}
-              />
-              {/* <span style={{ letterSpacing: "0.025em" }}>{children || ""}</span> */}
+              <Sparkles size={16} />
+              {children || <span>Analyser</span>}
             </>
           )}
         </button>
 
-        {isOpen && (
+        {isOpen ? (
           <AiPromptPanel
             isOpen={isOpen}
-            onClose={handleClosePanel}
+            onClose={() => setIsOpen(false)}
             onSubmit={handleSubmit}
             uiMode={uiMode}
             models={[]}
-            enableModelManagement={true}
+            enableModelManagement
             modelCategory="text"
             baseUrl={baseUrl}
             apiKey={apiKeyId}
           />
-        )}
+        ) : null}
       </div>
 
-      {/* Modal de résultat */}
-      {isResultOpen && analysisResult && (
+      {isResultOpen && analysisResult ? (
         <div
-          style={{
-            position: "fixed",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: "rgba(0, 0, 0, 0.5)",
-            backdropFilter: "blur(8px)",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            zIndex: 1000,
-            padding: "20px",
-          }}
+          className="ai-signin-overlay ai-overlay-panel"
           onClick={(e) => {
             if (e.target === e.currentTarget) {
-              handleCloseResult();
+              setIsResultOpen(false);
+              setAnalysisResult(null);
             }
           }}
         >
-          <div
-            style={{
-              maxWidth: "800px",
-              position: "relative",
-              width: "100%",
-              maxHeight: "90vh",
-              borderRadius: "16px",
-              boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1)",
-              overflow: "hidden",
-              ...getThemeStyles().modal,
-            }}
-          >
-            {/* Header */}
-            <div
-              style={{
-                padding: "20px 24px 16px",
-                marginBottom: "12px",
-                display: "flex",
-                alignItems: "center",
-                gap: "12px",
-                flexDirection: "column",
-                justifyContent: "space-between",
-                ...getThemeStyles().header,
-              }}
-            >
-              <div
-                style={{
-                  display: "flex",
-
-                  alignItems: "center",
-                  gap: "12px",
-                }}
-              >
-                <FileText size={20} />
-                <h2
-                  style={{
-                    fontSize: "18px",
-                    fontWeight: "600",
-                    margin: 0,
-                  }}
-                >
-                  {resultModalTitle}
-                </h2>
+          <div className="ai-popover ai-result-modal" onClick={(e) => e.stopPropagation()}>
+            <div className="ai-result-header">
+              <div className="ai-row">
+                <FileText size={18} />
+                <h2 className="ai-result-title">{resultModalTitle}</h2>
               </div>
-              <div style={{ display: "flex", gap: "8px" }}>
-                <button
-                  onClick={saveToFile}
-                  style={{
-                    padding: "8px 12px",
-                    borderRadius: "6px",
-                    backgroundColor: "transparent",
-                    border: `1px solid ${getThemeStyles().closeButton.color}30`,
-                    cursor: "pointer",
-                    color: getThemeStyles().closeButton.color,
-                    transition: "all 0.2s",
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "6px",
-                    fontSize: "12px",
-                  }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.backgroundColor =
-                      getThemeStyles().closeButton.hoverColor + "10";
-                    e.currentTarget.style.color =
-                      getThemeStyles().closeButton.hoverColor;
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.backgroundColor = "transparent";
-                    e.currentTarget.style.color =
-                      getThemeStyles().closeButton.color;
-                  }}
-                  title="Télécharger l'analyse"
-                >
+              <div className="ai-row">
+                <button type="button" className={`ai-btn ai-btn--ghost ai-btn--compact ${sizeClass} ${radiusClass}`} onClick={saveToFile}>
                   <Download size={14} />
                   Sauvegarder
                 </button>
                 <button
-                  onClick={handleCloseResult}
-                  style={{
-                    position: "absolute",
-                    top: "16px",
-                    right: "16px",
-                    padding: "4px",
-                    borderRadius: "6px",
-                    backgroundColor: "transparent",
-                    border: "none",
-                    cursor: "pointer",
-                    color: getThemeStyles().closeButton.color,
-                    transition: "color 0.2s",
-                  }}
-                  onMouseEnter={(e) => {
-                    e.currentTarget.style.color =
-                      getThemeStyles().closeButton.hoverColor;
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.color =
-                      getThemeStyles().closeButton.color;
+                  type="button"
+                  className="ai-icon-btn"
+                  onClick={() => {
+                    setIsResultOpen(false);
+                    setAnalysisResult(null);
                   }}
+                  aria-label="Fermer"
                 >
-                  <X size={18} />
+                  <X size={16} />
                 </button>
               </div>
+            </div>
 
-              {/* Content */}
-              <div
-                style={{
-                  padding: "0 24px 24px",
-                  overflow: "auto",
-                  maxHeight: "calc(90vh - 80px)",
-                }}
-              >
-                {/* Prompt utilisé */}
-                <div style={{ marginBottom: "20px" }}>
-                  <h3
-                    style={{
-                      fontSize: "14px",
-                      fontWeight: "600",
-                      marginBottom: "8px",
-                      color: getThemeStyles().modal.color,
-                    }}
-                  >
-                    Prompt utilisé :
-                  </h3>
-                  <div
-                    style={{
-                      padding: "12px",
-                      borderRadius: "8px",
-                      fontSize: "13px",
-                      fontFamily: "monospace",
-                      ...getThemeStyles().content,
-                    }}
-                  >
-                    {analysisResult.prompt}
-                  </div>
-                </div>
-
-                {/* Résultat */}
-                <div>
-                  <h3
-                    style={{
-                      fontSize: "14px",
-                      fontWeight: "600",
-                      marginBottom: "12px",
-                      color: getThemeStyles().modal.color,
-                    }}
-                  >
-                    Résultat de l'analyse :
-                  </h3>
-                  <div
-                    style={{
-                      padding: "16px",
-                      borderRadius: "8px",
-                      lineHeight: "1.6",
-                      fontSize: "14px",
-                      whiteSpace: "pre-wrap",
-                      ...getThemeStyles().content,
-                    }}
-                  >
-                    {analysisResult.content}
-                  </div>
-                </div>
+            <div className="ai-result-body">
+              <div className="ai-result-block">
+                <h3 className="ai-result-subtitle">Prompt utilisé</h3>
+                <pre className="ai-result-code">{analysisResult.prompt}</pre>
+              </div>
 
-                {/* Metadata */}
-                <div style={{ height: "120px" }}>
-                  <div
-                    style={{
-                      marginTop: "20px",
-                      padding: "12px",
-                      fontSize: "12px",
-                      borderRadius: "8px",
-                      display: "flex",
+              <div className="ai-result-block">
+                <h3 className="ai-result-subtitle">Résultat</h3>
+                <div className="ai-result-content">{analysisResult.content}</div>
+              </div>
 
-                      justifyContent: "space-between",
-                      ...getThemeStyles().content,
-                    }}
-                  >
-                    <span>
-                      Coût: $
-                      {(apiKeyId?.includes("dev")
-                        ? 0
-                        : analysisResult.cost
-                      ).toFixed(6)}
-                    </span>
-                    <span>
-                      ID: {analysisResult.requestId?.slice(-8) || "N/A"}
-                    </span>
-                  </div>
-                </div>
+              <div className="ai-result-meta ai-between">
+                <span>
+                  Coût: ${
+                    (apiKeyId?.includes("dev") ? 0 : analysisResult.cost).toFixed(6)
+                  }
+                </span>
+                <span>ID: {analysisResult.requestId?.slice(-8) || "N/A"}</span>
               </div>
             </div>
           </div>
         </div>
-      )}
-
-      <LBSigninModal
-        isOpen={showAuthModal}
-        onClose={() => setShowAuthModal(false)}
-      />
+      ) : null}
 
-      {/* Error Toast */}
+      <LBSigninModal isOpen={showAuthModal} onClose={() => setShowAuthModal(false)} />
       <ErrorToast key={errorKey} error={errorData} onComplete={clearError} />
     </>
   );