@lastbrain/ai-ui-react 1.0.67 → 1.0.69

package/src/components/AiImageButton.tsx

@@ -10,11 +10,11 @@ import {
   Lock,
 } from "lucide-react";
 import type { BaseAiProps } from "../types";
+import type { AiRadius, AiSize, AiVariant } from "../types";
 import { useAiCallImage } from "../hooks/useAiCallImage";
 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";
@@ -36,6 +36,9 @@ export interface AiImageButtonProps
   // Props optionnelles pour override du contexte
   baseUrl?: string;
   apiKeyId?: string;
+  size?: AiSize;
+  radius?: AiRadius;
+  variant?: AiVariant;
 }
 
 export function AiImageButton({
@@ -54,6 +57,9 @@ export function AiImageButton({
   onImageSave,
   storeOutputs,
   artifactTitle,
+  size = "md",
+  radius = "full",
+  variant = "default",
   ...buttonProps
 }: AiImageButtonProps) {
   const [isOpen, setIsOpen] = useState(false);
@@ -121,45 +127,6 @@ export function AiImageButton({
     setGeneratedImage(null);
   };
 
-  // Styles selon le thème
-  const getThemeStyles = () => {
-    // Détection automatique du thème comme dans les autres composants
-    const isDark =
-      typeof document !== "undefined" &&
-      (document.documentElement.classList.contains("dark") ||
-        (!document.documentElement.classList.contains("light") &&
-          window.matchMedia("(prefers-color-scheme: dark)").matches));
-
-    return {
-      card: {
-        backgroundColor: isDark ? "#1f2937" : "white",
-        border: `1px solid ${isDark ? "#374151" : "#e5e7eb"}`,
-        color: isDark ? "#f3f4f6" : "#374151",
-      },
-      header: {
-        color: isDark ? "#f9fafb" : "#1f2937",
-      },
-      closeButton: {
-        color: isDark ? "#9ca3af" : "#6b7280",
-        hoverColor: isDark ? "#d1d5db" : "#374151",
-      },
-      imageContainer: {
-        backgroundColor: isDark ? "#111827" : "#f9fafb",
-      },
-      actionButton: {
-        backgroundColor: isDark ? "#374151" : "white",
-        border: `1px solid ${isDark ? "#4b5563" : "#e5e7eb"}`,
-        color: isDark ? "#d1d5db" : "#6b7280",
-        hoverBackground: isDark ? "#4b5563" : "#f3f4f6",
-        hoverColor: isDark ? "#f3f4f6" : "#1f2937",
-      },
-      metadata: {
-        borderTop: `1px solid ${isDark ? "#374151" : "#f3f4f6"}`,
-        color: isDark ? "#9ca3af" : "#6b7280",
-      },
-    };
-  };
-
   const handleSubmit = async (
     selectedModel: string,
     selectedPrompt: string
@@ -216,107 +183,38 @@ export function AiImageButton({
     }
   };
 
+  const sizeClass = `ai-size-${size}`;
+  const radiusClass = `ai-radius-${radius}`;
+  const variantClass = variant === "light" ? "ai-btn--light" : "";
+
   return (
     <div className="flex items-start gap-4">
-      <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"
-                : "#6366f1",
-            color: "white",
-            border: "none",
-            borderRadius: "12px",
-            padding: "12px 20px",
-            fontSize: "14px",
-            fontWeight: "600",
-            minWidth: "140px",
-            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(99, 102, 241, 0.2)",
-            transform: "scale(1)",
-            ...(loading && {
-              background: "linear-gradient(135deg, #6366f1, #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(99, 102, 241, 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(99, 102, 241, 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)";
-            }
-          }}
+          className={`ai-btn ai-image-btn ${variantClass} ${sizeClass} ${radiusClass} ${className || ""}`}
+          style={buttonProps.style}
           data-ai-image-button
           title={!isAuthReady ? "Authentication required" : "Générer une image"}
         >
           {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" }}>Génération...</span>
+              <Loader2 size={18} className="ai-spinner" />
+              <span className="ai-text-microtracking">Génération...</span>
             </>
           ) : !isAuthReady ? (
             <>
-              <Lock
-                size={18}
-                style={{
-                  color: "white",
-                  filter: "drop-shadow(0 0 2px rgba(255,255,255,0.2))",
-                }}
-              />
+              <Lock size={18} />
+
               {children || <span>Connexion requise</span>}
             </>
           ) : (
             <>
-              <ImageIcon
-                size={18}
-                style={{
-                  color: "white",
-                  filter: "drop-shadow(0 0 2px rgba(255,255,255,0.2))",
-                }}
-              />
-              <span style={{ letterSpacing: "0.025em" }}>
+              <ImageIcon size={18} />
+
+              <span className="ai-text-microtracking">
                 {children || "Générer une image"}
               </span>
             </>
@@ -339,24 +237,11 @@ export function AiImageButton({
 
       {/* Card d'affichage de l'image générée */}
       {showImageCard && generatedImage && (
-        <div
-          className="relative"
-          style={{
-            maxWidth: "320px",
-            borderRadius: "12px",
-            padding: "16px",
-            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
-            ...getThemeStyles().card,
-          }}
-        >
+        <div className="ai-surface ai-image-card relative">
           {/* Header avec prompt et bouton fermer */}
           <div className="flex items-start justify-between mb-3">
             <h3
-              className="font-medium text-sm leading-tight"
-              style={{
-                maxWidth: "calc(100% - 32px)",
-                ...getThemeStyles().header,
-              }}
+              className="font-medium text-sm leading-tight max-w-[calc(100%-32px)]"
               title={generatedImage.prompt}
             >
               {generatedImage.prompt.length > 60
@@ -365,42 +250,18 @@ export function AiImageButton({
             </h3>
             <button
               onClick={handleCloseImage}
-              className="transition-colors flex-shrink-0"
-              style={{
-                padding: "2px",
-                borderRadius: "4px",
-                backgroundColor: "transparent",
-                border: "none",
-                cursor: "pointer",
-                color: getThemeStyles().closeButton.color,
-              }}
-              onMouseEnter={(e) => {
-                e.currentTarget.style.color =
-                  getThemeStyles().closeButton.hoverColor;
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.color =
-                  getThemeStyles().closeButton.color;
-              }}
+              className="ai-icon-btn flex-shrink-0"
             >
               <X size={16} />
             </button>
           </div>
 
           {/* Image */}
-          <div
-            className="mb-4 rounded-lg overflow-hidden"
-            style={getThemeStyles().imageContainer}
-          >
+          <div className="ai-image-frame">
             <img
               src={generatedImage.url}
               alt={generatedImage.prompt}
-              className="w-full h-auto"
-              style={{
-                maxHeight: "200px",
-                objectFit: "contain",
-                display: "block",
-              }}
+              className="ai-image-preview"
             />
           </div>
 
@@ -408,24 +269,7 @@ export function AiImageButton({
           <div className="flex items-center gap-2 flex-wrap">
             <button
               onClick={handleDownload}
-              className="flex items-center gap-2 px-4 py-2.5 text-sm font-semibold rounded-lg transition-all shadow-sm"
-              style={{
-                backgroundColor: "#10b981",
-                color: "white",
-                border: "none",
-                cursor: "pointer",
-              }}
-              onMouseEnter={(e) => {
-                e.currentTarget.style.backgroundColor = "#059669";
-                e.currentTarget.style.transform = "translateY(-1px)";
-                e.currentTarget.style.boxShadow =
-                  "0 4px 12px rgba(16, 185, 129, 0.3)";
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.backgroundColor = "#10b981";
-                e.currentTarget.style.transform = "translateY(0)";
-                e.currentTarget.style.boxShadow = "";
-              }}
+              className="ai-btn ai-btn--primary"
               title="Télécharger l'image"
             >
               <Download size={16} />
@@ -435,7 +279,7 @@ export function AiImageButton({
             {onImageSave && (
               <button
                 onClick={handleSave}
-                className="flex items-center gap-1 px-3 py-2 text-xs font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
+                className="ai-btn"
                 title="Sauvegarder en base"
               >
                 <ExternalLink size={14} />
@@ -445,12 +289,7 @@ export function AiImageButton({
           </div>
 
           {/* Metadata */}
-          <div
-            className="mt-3 pt-3 text-xs"
-            style={{
-              ...getThemeStyles().metadata,
-            }}
-          >
+          <div className="ai-image-meta">
             <div className="flex justify-center">
               <span>ID: {generatedImage.requestId.slice(-8)}</span>
             </div>

package/src/components/AiInput.tsx

@@ -1,13 +1,12 @@
 "use client";
 
 import React, { useState, useRef, type InputHTMLAttributes } from "react";
-import { Sparkles } from "lucide-react";
-import type { BaseAiProps } from "../types";
+import { Loader2, Lock, Sparkles } from "lucide-react";
+import type { AiRadius, AiSize, BaseAiProps } from "../types";
 import { useAiCallText } from "../hooks/useAiCallText";
 import { useAiModels } from "../hooks/useAiModels";
 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";
@@ -16,15 +15,19 @@ import { useAiContext } from "../context/AiProvider";
 export interface AiInputProps
   extends
     Omit<BaseAiProps, "type">,
-    Omit<InputHTMLAttributes<HTMLInputElement>, "onValue"> {
+    Omit<InputHTMLAttributes<HTMLInputElement>, "onValue" | "size"> {
   uiMode?: "modal" | "drawer";
   enableModelManagement?: boolean;
+  size?: AiSize;
+  radius?: AiRadius;
 }
 
 export function AiInput({
   baseUrl: propBaseUrl,
   apiKeyId: propApiKeyId,
   uiMode = "modal",
+  size = "md",
+  radius = "full",
   context,
   model,
   prompt,
@@ -43,8 +46,6 @@ export function AiInput({
   const [inputValue, setInputValue] = useState(
     inputProps.value?.toString() || inputProps.defaultValue?.toString() || ""
   );
-  const [isFocused, setIsFocused] = useState(false);
-  const [isButtonHovered, setIsButtonHovered] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
 
@@ -171,75 +172,49 @@ export function AiInput({
     inputProps.onChange?.(e);
   };
 
+  const sizeClass = `ai-size-${size}`;
+  const radiusClass = `ai-radius-${radius}`;
+
   return (
-    <div style={aiStyles.inputWrapper} className={className}>
-      <input
-        ref={inputRef}
-        {...inputProps}
-        style={{
-          ...aiStyles.input,
-          ...(isFocused && aiStyles.inputFocus),
-        }}
-        value={inputValue}
-        onChange={handleInputChange}
-        onFocus={(e) => {
-          setIsFocused(true);
-          inputProps.onFocus?.(e);
-        }}
-        onBlur={(e) => {
-          setIsFocused(false);
-          inputProps.onBlur?.(e);
-        }}
-        disabled={disabled || loading}
-      />
-      <button
-        style={{
-          ...aiStyles.inputAiButton,
-          ...(isButtonHovered && aiStyles.inputAiButtonHover),
-          ...(disabled || loading
-            ? { opacity: 0.5, cursor: "not-allowed" }
-            : {}),
-        }}
-        onClick={hasConfiguration ? handleQuickGenerate : handleOpenPanel}
-        onMouseEnter={() => setIsButtonHovered(true)}
-        onMouseLeave={() => setIsButtonHovered(false)}
-        disabled={disabled || loading || !isAuthReady}
-        type="button"
-        title={
-          !isAuthReady
-            ? "Authentication required"
-            : hasConfiguration
-              ? "Generate with AI"
-              : "Setup AI"
-        }
-      >
-        {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} />
-        ) : (
-          <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>
+    <div className={`ai-control-group ai-glow ${className || ""}`}>
+      <div className={`ai-shell ${sizeClass} ${radiusClass}`}>
+        <input
+          ref={inputRef}
+          {...inputProps}
+          className={`ai-control ai-control-input ${sizeClass} ${radiusClass}`}
+          value={inputValue}
+          onChange={handleInputChange}
+          onFocus={(e) => {
+            inputProps.onFocus?.(e);
+          }}
+          onBlur={(e) => {
+            inputProps.onBlur?.(e);
+          }}
+          aria-invalid={Boolean(inputProps["aria-invalid"])}
+          disabled={disabled || loading}
+        />
+        <button
+          className={`ai-control-action ai-spark ${sizeClass} ${radiusClass}`}
+          onClick={hasConfiguration ? handleQuickGenerate : handleOpenPanel}
+          disabled={disabled || loading}
+          type="button"
+          title={
+            !isAuthReady
+              ? "Authentication required"
+              : hasConfiguration
+                ? "Generate with AI"
+                : "Setup AI"
+          }
+        >
+          {loading ? (
+            <Loader2 size={16} className="ai-spinner" />
+          ) : shouldShowSparkles ? (
+            <Sparkles size={16} />
+          ) : (
+            <Lock size={16} />
+          )}
+        </button>
+      </div>
       {isOpen && (
         <AiPromptPanel
           isOpen={isOpen}