@lastbrain/ai-ui-react 1.0.24 → 1.0.26

package/src/components/AiContextButton.tsx

@@ -0,0 +1,553 @@
+"use client";
+
+import { useState, type ButtonHTMLAttributes } from "react";
+import { Loader2, X, FileText, Sparkle, Download } from "lucide-react";
+import type { BaseAiProps } from "../types";
+import { useAiCallText } from "../hooks/useAiCallText";
+import { useAiModels } from "../hooks/useAiModels";
+import { AiPromptPanel } from "./AiPromptPanel";
+import { useUsageToast } from "./UsageToast";
+import { aiStyles } from "../styles/inline";
+import { useAiContext } from "../context/AiProvider";
+
+export interface AiContextButtonProps
+  extends
+    Omit<BaseAiProps, "onValue" | "type">,
+    Omit<ButtonHTMLAttributes<HTMLButtonElement>, "baseUrl" | "apiKeyId"> {
+  // Données de contexte à analyser
+  contextData: any;
+  contextDescription?: string;
+  onResult?: (
+    result: string,
+    metadata?: { requestId: string; tokens: number }
+  ) => 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
+  baseUrl?: string;
+  apiKeyId?: string;
+}
+
+export function AiContextButton({
+  baseUrl: propBaseUrl,
+  apiKeyId: propApiKeyId,
+  uiMode = "modal",
+  contextData,
+  contextDescription = "Données à analyser",
+  onResult,
+  onToast,
+  disabled,
+  className,
+  children,
+  resultModalTitle = "Résultat de l'analyse",
+  storeOutputs,
+  artifactTitle,
+  context: _context,
+  model: _model,
+  prompt: _prompt,
+  ...buttonProps
+}: AiContextButtonProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isResultOpen, setIsResultOpen] = useState(false);
+  const [analysisResult, setAnalysisResult] = useState<{
+    content: string;
+    prompt: string;
+    requestId: string;
+    tokens: number;
+    cost: number;
+  } | null>(null);
+  const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
+
+  // Récupérer le contexte AiProvider avec fallback sur les props
+  const aiContext = useAiContext();
+  const baseUrl = propBaseUrl ?? aiContext.baseUrl;
+  const apiKeyId = propApiKeyId ?? aiContext.apiKeyId;
+
+  const { models, loading: modelsLoading } = useAiModels({ baseUrl, apiKeyId });
+  const { generateText: callText, loading } = useAiCallText({
+    baseUrl,
+    apiKeyId,
+  });
+
+  const handleOpenPanel = () => {
+    console.log("Opening panel, models:", models, "loading:", modelsLoading);
+    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 === "object" && data !== null) {
+      return JSON.stringify(data, null, 2);
+    }
+    return String(data);
+  };
+
+  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 result = await callText({
+        prompt: fullPrompt,
+        model: selectedModel || "gpt-4o-mini",
+        context: _context || undefined,
+        maxTokens: 4000,
+        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,
+        };
+
+        setAnalysisResult(resultData);
+        setIsResultOpen(true);
+
+        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)}`,
+        });
+
+        // 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,
+        });
+      }
+    } catch (error) {
+      onToast?.({
+        type: "error",
+        message: "Erreur lors de l'analyse",
+        code: error instanceof Error ? error.message : undefined,
+      });
+    } finally {
+      setIsOpen(false);
+    }
+  };
+
+  return (
+    <>
+      <div style={{ position: "relative", display: "inline-block" }}>
+        <button
+          {...buttonProps}
+          onClick={handleOpenPanel}
+          disabled={disabled || loading}
+          className={className}
+          style={{
+            ...aiStyles.button,
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            cursor: disabled || loading ? "not-allowed" : "pointer",
+            opacity: disabled || loading ? 0.6 : 1,
+            backgroundColor: loading ? "#8b5cf6" : "#7c3aed",
+            color: "white",
+            border: "none",
+            borderRadius: "12px",
+            // padding: "12px 20px",
+            margin: "0px 8px",
+            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) {
+              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) {
+              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) {
+              e.currentTarget.style.transform = "scale(0.98)";
+            }
+          }}
+          onMouseUp={(e) => {
+            if (!disabled && !loading) {
+              e.currentTarget.style.transform = "scale(1.02)";
+            }
+          }}
+          data-ai-context-button
+        >
+          {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>
+            </>
+          ) : (
+            <>
+              <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> */}
+            </>
+          )}
+        </button>
+
+        {isOpen && (
+          <AiPromptPanel
+            isOpen={isOpen}
+            onClose={handleClosePanel}
+            onSubmit={handleSubmit}
+            uiMode={uiMode}
+            models={models?.filter((m) => m.type === "language") || []}
+            enableModelManagement={true}
+          />
+        )}
+      </div>
+
+      {/* Modal de résultat */}
+      {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",
+          }}
+          onClick={(e) => {
+            if (e.target === e.currentTarget) {
+              handleCloseResult();
+            }
+          }}
+        >
+          <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>
+              <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"
+                >
+                  <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;
+                  }}
+                >
+                  <X size={18} />
+                </button>
+              </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>
+
+                {/* Metadata */}
+                <div style={{ height: "120px" }}>
+                  <div
+                    style={{
+                      marginTop: "20px",
+                      padding: "12px",
+                      fontSize: "12px",
+                      borderRadius: "8px",
+                      display: "flex",
+
+                      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>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}