@lastbrain/ai-ui-react 1.0.68 → 1.0.69

package/src/components/AiTextarea.tsx

@@ -6,13 +6,12 @@ import React, {
   useLayoutEffect,
   type TextareaHTMLAttributes,
 } from "react";
-import { Sparkles, Lock } 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";
@@ -23,12 +22,16 @@ export interface AiTextareaProps
     Omit<BaseAiProps, "type">,
     Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "onValue"> {
   uiMode?: "modal" | "drawer";
+  size?: AiSize;
+  radius?: AiRadius;
 }
 
 export function AiTextarea({
   baseUrl: propBaseUrl,
   apiKeyId: propApiKeyId,
   uiMode = "modal",
+  size = "md",
+  radius = "lg",
   context,
   model,
   prompt,
@@ -49,8 +52,6 @@ export function AiTextarea({
       textareaProps.defaultValue?.toString() ||
       ""
   );
-  const [isFocused, setIsFocused] = useState(false);
-  const [isButtonHovered, setIsButtonHovered] = useState(false);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
 
@@ -191,66 +192,50 @@ export function AiTextarea({
     adjustHeight();
   }, [textareaValue]);
 
+  const sizeClass = `ai-size-${size}`;
+  const radiusClass = `ai-radius-${radius}`;
+
   return (
-    <div style={aiStyles.textareaWrapper} className={className}>
-      <textarea
-        ref={textareaRef}
-        {...textareaProps}
-        style={{
-          ...aiStyles.textarea,
-          ...(isFocused && aiStyles.textareaFocus),
-        }}
-        value={textareaValue}
-        onChange={handleTextareaChange}
-        onFocus={(e) => {
-          setIsFocused(true);
-          textareaProps.onFocus?.(e);
-          adjustHeight();
-        }}
-        onBlur={(e) => {
-          setIsFocused(false);
-          textareaProps.onBlur?.(e);
-        }}
-        disabled={disabled || loading}
-      />
-      <button
-        style={{
-          ...aiStyles.textareaAiButton,
-          ...(isButtonHovered && aiStyles.textareaAiButtonHover),
-          ...(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} />
-        ) : (
-          <Lock size={16} />
-        )}
-      </button>
+    <div className={`ai-control-group ai-glow ${className || ""}`}>
+      <div className={`ai-shell ai-shell--textarea ${sizeClass} ${radiusClass}`}>
+        <textarea
+          ref={textareaRef}
+          {...textareaProps}
+          className={`ai-control ai-control-textarea ${sizeClass} ${radiusClass}`}
+          value={textareaValue}
+          onChange={handleTextareaChange}
+          onFocus={(e) => {
+            textareaProps.onFocus?.(e);
+            adjustHeight();
+          }}
+          onBlur={(e) => {
+            textareaProps.onBlur?.(e);
+          }}
+          aria-invalid={Boolean(textareaProps["aria-invalid"])}
+          disabled={disabled || loading}
+        />
+        <button
+          className={`ai-control-action ai-spark ${sizeClass} ${radiusClass}`}
+          onClick={hasConfiguration ? handleQuickGenerate : handleOpenPanel}
+          disabled={disabled || loading || !isAuthReady}
+          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}

package/src/components/LBApiKeySelector.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { CheckCircle2, KeyRound, Loader2, XCircle } from "lucide-react";
 import type { LBApiKey } from "@lastbrain/ai-ui-core";
 
 interface LBApiKeySelectorProps {
@@ -43,286 +44,97 @@ export function LBApiKeySelector({
   };
 
   return (
-    <div
-      style={{
-        position: "fixed",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        zIndex: 10000,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: "16px",
-      }}
-      onClick={onCancel}
-    >
-      {/* Backdrop */}
-      <div
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          background: "rgba(0, 0, 0, 0.75)",
-          backdropFilter: "blur(8px)",
-          height: "110%",
-        }}
-      />
-
-      {/* Modal */}
-      <div
-        style={{
-          position: "relative",
-          background: "light-dark(#ffffff, #1e293b)",
-          border: "1px solid light-dark(#e2e8f0, #334155)",
-          borderRadius: "12px",
-          padding: "24px",
-          maxWidth: "500px",
-          width: "100%",
-          boxShadow: "0 20px 50px rgba(0, 0, 0, 0.5)",
-        }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <h2
-          style={{
-            margin: "0 0 8px 0",
-            fontSize: "20px",
-            fontWeight: 600,
-            color: "light-dark(#1e293b, #f8fafc)",
-            textAlign: "center",
-          }}
-        >
-          Sélectionnez une clé API
-        </h2>
-
-        <p
-          style={{
-            margin: "0 0 24px 0",
-            fontSize: "14px",
-            color: "light-dark(#64748b, #94a3b8)",
-            textAlign: "center",
-            lineHeight: "1.5",
-          }}
-        >
-          Choisissez la clé API à utiliser pour vos requêtes IA
-        </p>
-
-        <form onSubmit={handleSubmit}>
-          {/* Liste des clés API */}
-          <div
-            style={{
-              display: "flex",
-              flexDirection: "column",
-              gap: "8px",
-              marginBottom: "24px",
-              maxHeight: "300px",
-              overflowY: "auto",
-            }}
-          >
-            {apiKeys.map((key) => {
-              const isSelected = key.id === selectedKeyId;
-              const isActive = key.isActive;
-
-              return (
-                <label
-                  key={key.id}
-                  style={{
-                    display: "flex",
-                    alignItems: "center",
-                    padding: "12px 16px",
-                    background: isSelected
-                      ? "light-dark(#f1f5f9, #334155)"
-                      : "light-dark(#f8fafc, #0f172a)",
-                    border: `2px solid ${
-                      isSelected ? "#8b5cf6" : "light-dark(#e2e8f0, #334155)"
-                    }`,
-                    borderRadius: "8px",
-                    cursor: isActive ? "pointer" : "not-allowed",
-                    opacity: isActive ? 1 : 0.5,
-                    transition: "all 0.2s ease",
-                  }}
-                  onMouseEnter={(e) => {
-                    if (isActive && !isSelected) {
-                      e.currentTarget.style.borderColor =
-                        "light-dark(#cbd5e1, #475569)";
-                      e.currentTarget.style.background =
-                        "light-dark(#f1f5f9, #334155)";
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    if (isActive && !isSelected) {
-                      e.currentTarget.style.borderColor =
-                        "light-dark(#e2e8f0, #334155)";
-                      e.currentTarget.style.background =
-                        "light-dark(#f8fafc, #0f172a)";
-                    }
-                  }}
-                >
-                  <input
-                    type="radio"
-                    name="apiKey"
-                    value={key.id}
-                    checked={isSelected}
-                    disabled={!isActive}
-                    onChange={(e) => setSelectedKeyId(e.target.value)}
-                    style={{
-                      marginRight: "12px",
-                      accentColor: "#8b5cf6",
-                      cursor: isActive ? "pointer" : "not-allowed",
-                    }}
-                  />
-                  <div style={{ flex: 1 }}>
-                    <div
-                      style={{
-                        fontSize: "14px",
-                        fontWeight: 500,
-                        color: "light-dark(#1e293b, #f8fafc)",
-                        marginBottom: "4px",
-                      }}
-                    >
-                      {key.name}
-                    </div>
-                    <div
-                      style={{
-                        fontSize: "12px",
-                        color: "light-dark(#64748b, #94a3b8)",
-                        fontFamily: "monospace",
-                      }}
-                    >
-                      {key.keyPrefix || key.id.substring(0, 12) + "..."}
-                    </div>
-                  </div>
-                  {isActive ? (
-                    <div
-                      style={{
-                        fontSize: "11px",
-                        padding: "4px 8px",
-                        borderRadius: "4px",
-                        background: "rgba(16, 185, 129, 0.1)",
-                        color: "#10b981",
-                        fontWeight: 600,
-                      }}
-                    >
-                      Active
-                    </div>
-                  ) : (
-                    <div
-                      style={{
-                        fontSize: "11px",
-                        padding: "4px 8px",
-                        borderRadius: "4px",
-                        background: "rgba(239, 68, 68, 0.1)",
-                        color: "#ef4444",
-                        fontWeight: 600,
-                      }}
-                    >
-                      Inactive
-                    </div>
-                  )}
-                </label>
-              );
-            })}
+    <div className="ai-signin-overlay" onClick={onCancel}>
+      <div className="ai-signin-panel ai-key-modal-panel" onClick={(e) => e.stopPropagation()}>
+        <div className="ai-signin-header">
+          <div className="ai-center mb-3">
+            <span className="ai-icon-badge">
+              <KeyRound size={20} />
+            </span>
           </div>
+          <h2 className="ai-signin-title">Sélectionnez une clé API</h2>
+          <p className="ai-signin-subtitle">
+            Choisissez la clé API à utiliser pour vos requêtes IA.
+          </p>
+        </div>
 
-          {error && (
+        <div className="ai-signin-content">
+          <form onSubmit={handleSubmit}>
             <div
-              style={{
-                padding: "12px",
-                background: "rgba(239, 68, 68, 0.1)",
-                border: "1px solid rgba(239, 68, 68, 0.3)",
-                borderRadius: "6px",
-                marginBottom: "16px",
-              }}
+              className="ai-model-mgmt-list"
+              style={{ maxHeight: 300, overflowY: "auto", marginBottom: 16 }}
             >
-              <p
-                style={{
-                  margin: 0,
-                  fontSize: "13px",
-                  color: "#ef4444",
-                  lineHeight: "1.5",
-                }}
-              >
-                {error}
-              </p>
+              {apiKeys.map((key) => {
+                const isSelected = key.id === selectedKeyId;
+                const isActive = key.isActive;
+                return (
+                  <label
+                    key={key.id}
+                    className={`ai-model-item ${isSelected ? "ai-model-item--active" : ""} ${
+                      !isActive ? "ai-model-item--disabled" : ""
+                    }`}
+                  >
+                    <div className="ai-model-item-main">
+                      <input
+                        type="radio"
+                        name="apiKey"
+                        value={key.id}
+                        checked={isSelected}
+                        disabled={!isActive}
+                        onChange={(e) => setSelectedKeyId(e.target.value)}
+                        className="ai-key-radio"
+                      />
+                      <div>
+                        <div className="ai-model-item-title">{key.name}</div>
+                        <div className="ai-model-item-meta">
+                          <span>{key.keyPrefix || key.id.substring(0, 12) + "..."}</span>
+                        </div>
+                      </div>
+                    </div>
+                    {isActive ? (
+                      <span className="ai-pill ai-pill--cost">
+                        <CheckCircle2 size={12} />
+                        Active
+                      </span>
+                    ) : (
+                      <span className="ai-pill ai-pill--cost">
+                        <XCircle size={12} />
+                        Inactive
+                      </span>
+                    )}
+                  </label>
+                );
+              })}
             </div>
-          )}
 
-          {/* Boutons */}
-          <div style={{ display: "flex", gap: "12px" }}>
-            <button
-              type="button"
-              onClick={onCancel}
-              disabled={loading}
-              style={{
-                flex: 1,
-                padding: "12px",
-                background: "transparent",
-                border: "1px solid light-dark(#e2e8f0, #334155)",
-                borderRadius: "8px",
-                color: "light-dark(#64748b, #94a3b8)",
-                fontSize: "14px",
-                fontWeight: 600,
-                cursor: loading ? "not-allowed" : "pointer",
-                opacity: loading ? 0.5 : 1,
-                transition: "all 0.2s ease",
-              }}
-              onMouseEnter={(e) => {
-                if (!loading) {
-                  e.currentTarget.style.background =
-                    "light-dark(#f8fafc, #0f172a)";
-                  e.currentTarget.style.borderColor =
-                    "light-dark(#cbd5e1, #475569)";
-                }
-              }}
-              onMouseLeave={(e) => {
-                if (!loading) {
-                  e.currentTarget.style.background = "transparent";
-                  e.currentTarget.style.borderColor =
-                    "light-dark(#e2e8f0, #334155)";
-                }
-              }}
-            >
-              Annuler
-            </button>
-            <button
-              type="submit"
-              disabled={loading || !selectedKeyId}
-              style={{
-                flex: 1,
-                padding: "12px",
-                background: loading
-                  ? "light-dark(#e2e8f0, #0f172a)"
-                  : "linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%)",
-                border: "none",
-                borderRadius: "8px",
-                color: "#ffffff",
-                fontSize: "14px",
-                fontWeight: 600,
-                cursor: loading || !selectedKeyId ? "not-allowed" : "pointer",
-                opacity: loading || !selectedKeyId ? 0.5 : 1,
-                transition: "all 0.2s ease",
-              }}
-              onMouseEnter={(e) => {
-                if (!loading && selectedKeyId) {
-                  e.currentTarget.style.transform = "translateY(-1px)";
-                  e.currentTarget.style.boxShadow =
-                    "0 8px 20px rgba(139, 92, 246, 0.4)";
-                }
-              }}
-              onMouseLeave={(e) => {
-                if (!loading && selectedKeyId) {
-                  e.currentTarget.style.transform = "none";
-                  e.currentTarget.style.boxShadow = "none";
-                }
-              }}
-            >
-              {loading ? "Connexion..." : "Continuer"}
-            </button>
-          </div>
-        </form>
+            {error ? (
+              <div className="ai-signin-error" role="alert">
+                <XCircle size={16} />
+                <span>{error}</span>
+              </div>
+            ) : null}
+
+            <div className="ai-signin-actions">
+              <button type="button" onClick={onCancel} disabled={loading} className="ai-btn ai-btn--ghost">
+                Annuler
+              </button>
+              <button
+                type="submit"
+                disabled={loading || !selectedKeyId}
+                className="ai-btn ai-btn--primary"
+              >
+                {loading ? (
+                  <>
+                    <Loader2 size={16} className="ai-spinner" />
+                    Connexion...
+                  </>
+                ) : (
+                  "Continuer"
+                )}
+              </button>
+            </div>
+          </form>
+        </div>
       </div>
     </div>
   );