@lastbrain/ai-ui-react 1.0.68 → 1.0.70

package/src/components/AiSelect.tsx

@@ -1,29 +1,33 @@
 "use client";
 
 import React, { useState, type SelectHTMLAttributes } from "react";
-import { Sparkles, Lock } from "lucide-react";
-import type { BaseAiProps } from "../types";
+import { ChevronDown, 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 { LBSigninModal } from "./LBSigninModal";
-import { aiStyles } from "../styles/inline";
 import { handleAIError } from "../utils/errorHandler";
 import { useLB } from "../context/LBAuthProvider";
+import { useAiContext } from "../context/AiProvider";
 
 export interface AiSelectProps
   extends
     Omit<BaseAiProps, "type">,
-    Omit<SelectHTMLAttributes<HTMLSelectElement>, "onValue"> {
+    Omit<SelectHTMLAttributes<HTMLSelectElement>, "onValue" | "size"> {
   children: React.ReactNode;
   uiMode?: "modal" | "drawer";
+  size?: AiSize;
+  radius?: AiRadius;
 }
 
 export function AiSelect({
-  baseUrl,
-  apiKeyId,
+  baseUrl: propBaseUrl,
+  apiKeyId: propApiKeyId,
   uiMode = "modal",
+  size = "md",
+  radius = "full",
   context,
   model,
   prompt,
@@ -38,7 +42,6 @@ export function AiSelect({
 }: AiSelectProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [showAuthModal, setShowAuthModal] = useState(false);
-  const [isFocused, setIsFocused] = useState(false);
   const { showUsageToast, toastData, toastKey, clearToast } = useUsageToast();
 
   // Rendre l'authentification optionnelle
@@ -51,6 +54,20 @@ export function AiSelect({
     lbStatus = undefined;
   }
 
+  let ctxBaseUrl: string | undefined;
+  let ctxApiKeyId: string | undefined;
+  try {
+    const aiContext = useAiContext();
+    ctxBaseUrl = aiContext.baseUrl;
+    ctxApiKeyId = aiContext.apiKeyId;
+  } catch {
+    ctxBaseUrl = undefined;
+    ctxApiKeyId = undefined;
+  }
+
+  const baseUrl = propBaseUrl ?? ctxBaseUrl;
+  const apiKeyId = propApiKeyId ?? ctxApiKeyId;
+
   const { models } = useAiModels({
     baseUrl,
     apiKeyId,
@@ -99,69 +116,44 @@ export function AiSelect({
     }
   };
 
+  const sizeClass = `ai-size-${size}`;
+  const radiusClass = `ai-radius-${radius}`;
+
   return (
-    <div style={{ width: "100%", position: "relative" }} className={className}>
-      <select
-        {...selectProps}
-        style={{
-          ...aiStyles.select,
-          ...(isFocused && aiStyles.selectFocus),
-          paddingRight: "40px", // Space for AI button
-        }}
-        onFocus={(e) => {
-          setIsFocused(true);
-          selectProps.onFocus?.(e);
-        }}
-        onBlur={(e) => {
-          setIsFocused(false);
-          selectProps.onBlur?.(e);
-        }}
-        disabled={disabled || loading}
-      >
-        {children}
-      </select>
-
-      {/* AI Button */}
-      <button
-        onClick={handleOpenPanel}
-        style={{
-          position: "absolute",
-          right: "8px",
-          top: "50%",
-          transform: "translateY(-50%)",
-          background: "none",
-          border: "none",
-          cursor: "pointer",
-          padding: "4px",
-          borderRadius: "4px",
-          display: "flex",
-          alignItems: "center",
-          color: shouldShowSparkles ? "#6366f1" : "#ef4444",
-        }}
-        title={
-          shouldShowSparkles
-            ? "Générer avec l'IA"
-            : "Se connecter pour utiliser l'IA"
-        }
-        disabled={disabled || loading}
-      >
-        {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 ${sizeClass} ${radiusClass}`}>
+        <select
+          {...selectProps}
+          className={`ai-control ai-control-input ai-control-select ${sizeClass} ${radiusClass}`}
+          disabled={disabled || loading}
+        >
+          {children}
+        </select>
+
+        <span className="ai-control-select-chevron" aria-hidden="true">
+          <ChevronDown size={14} />
+        </span>
+
+        <button
+          className={`ai-control-action ai-spark ${sizeClass} ${radiusClass}`}
+          onClick={handleOpenPanel}
+          title={
+            shouldShowSparkles
+              ? "Générer avec l'IA"
+              : "Se connecter pour utiliser l'IA"
+          }
+          disabled={disabled || loading}
+          type="button"
+        >
+          {loading ? (
+            <Loader2 size={16} className="ai-spinner" />
+          ) : shouldShowSparkles ? (
+            <Sparkles size={16} />
+          ) : (
+            <Lock size={16} />
+          )}
+        </button>
+      </div>
       {isOpen && (
         <AiPromptPanel
           isOpen={isOpen}