@lastbrain/ai-ui-react 1.0.68 → 1.0.70

package/src/context/LBAuthProvider.tsx

@@ -24,6 +24,39 @@ import type {
 } from "@lastbrain/ai-ui-core";
 import { createLBClient } from "@lastbrain/ai-ui-core";
 
+export interface ApiKeyUser {
+  id?: string;
+  name?: string;
+  prefix?: string;
+  env?: string;
+  rate_limit_rpm?: number;
+  scopes?: string[];
+}
+
+export interface BasicStatus {
+  authType?: string;
+  user?: {
+    id?: string;
+    email?: string;
+  } | null;
+  apiKey?: ApiKeyUser | null;
+  api_key?: ApiKeyUser | null;
+  balance?: {
+    used?: number;
+    total?: number;
+    percentage?: number;
+  };
+  storage?: StorageStatus["storage"];
+}
+
+export interface StorageStatus {
+  storage?: {
+    used_mb?: number;
+    allocated_mb?: number;
+    percentage?: number;
+  } | null;
+}
+
 interface LBProviderProps {
   children: ReactNode;
   /** URL de l'API LastBrain (ex: https://api.lastbrain.io) */
@@ -66,9 +99,9 @@ interface LBContextValue extends LBAuthState {
   /** Status API (balance, storage, API key info) */
   apiStatus: AiStatus | null;
   /** Status basique (rapide) - balance, API key info sans storage */
-  basicStatus: any;
+  basicStatus: BasicStatus | null;
   /** Status storage (lent) avec cache */
-  storageStatus: any;
+  storageStatus: StorageStatus | null;
   /** Fonction pour rafraîchir le status rapide */
   refreshBasicStatus: () => Promise<void>;
   /** Fonction pour rafraîchir le storage (avec cache optionnel) */
@@ -83,6 +116,9 @@ interface LBContextValue extends LBAuthState {
 
 const LBContext = createContext<LBContextValue | undefined>(undefined);
 
+// Export pour usage dans d'autres composants
+export { LBContext };
+
 export function LBProvider({
   children,
   baseUrl: _baseUrl = "/api/lastbrain",
@@ -96,8 +132,8 @@ export function LBProvider({
   const [apiKeys, setApiKeys] = useState<LBApiKey[]>([]);
   const [accessToken, setAccessToken] = useState<string>();
   const [apiStatus, setApiStatus] = useState<AiStatus | null>(null);
-  const [basicStatus, setBasicStatus] = useState<any>(null);
-  const [storageStatus, setStorageStatus] = useState<any>(null);
+  const [basicStatus, setBasicStatus] = useState<BasicStatus | null>(null);
+  const [storageStatus, setStorageStatus] = useState<StorageStatus | null>(null);
   const [isLoadingStatus, setIsLoadingStatus] = useState(false);
   const [isLoadingStorage, setIsLoadingStorage] = useState(false);
   const [storageLastFetch, setStorageLastFetch] = useState<number>(0);
@@ -373,7 +409,7 @@ export function LBProvider({
 
     setIsLoadingStatus(true);
     try {
-      let data: any;
+      let data: BasicStatus;
       try {
         data = await lbClient.getStatus();
       } catch {
@@ -452,7 +488,7 @@ export function LBProvider({
           ...basicStatus,
           storage: storageData?.storage,
         };
-        setApiStatus(combinedStatus);
+        setApiStatus(combinedStatus as AiStatus);
       } catch (error) {
         console.error("[LBProvider] Failed to fetch storage status:", error);
         // Arrêter les tentatives répétées si erreur persistante
@@ -619,3 +655,6 @@ export function useLB(): LBContextValue {
   }
   return context;
 }
+
+// Re-export des types pour usage externe
+export type { LBApiKey };

package/src/examples/AiUiPremiumShowcase.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { Sparkles } from "lucide-react";
+import { AiProvider } from "../context/AiProvider";
+import { AiInput } from "../components/AiInput";
+import { AiTextarea } from "../components/AiTextarea";
+import { AiChipLabel } from "../components/AiChipLabel";
+
+function ShowcasePanel({
+  title,
+  theme,
+}: {
+  title: string;
+  theme: "light" | "dark";
+}) {
+  return (
+    <section
+      data-theme={theme}
+      className={`rounded-2xl border p-6 ${
+        theme === "dark"
+          ? "bg-slate-950 border-slate-800 text-slate-100"
+          : "bg-white border-slate-200 text-slate-900"
+      }`}
+    >
+      <div className="mb-4 flex items-center justify-between">
+        <h3 className="text-base font-semibold">{title}</h3>
+        <span className="text-xs opacity-70">{theme}</span>
+      </div>
+
+      <AiProvider baseUrl="/api/ai" apiKeyId="demo-key">
+        <div className="space-y-4">
+          <AiInput
+            value=""
+            onChange={() => {}}
+            placeholder="Ask anything..."
+            data-testid={`showcase-input-${theme}`}
+          />
+
+          <AiTextarea
+            value=""
+            onChange={() => {}}
+            placeholder="Generate a concise product description..."
+            data-testid={`showcase-textarea-${theme}`}
+          />
+
+          <div className="flex flex-wrap gap-2">
+            <AiChipLabel>Default</AiChipLabel>
+            <AiChipLabel variant="selected">Selected</AiChipLabel>
+            <AiChipLabel variant="success">Success</AiChipLabel>
+            <AiChipLabel variant="danger">Danger</AiChipLabel>
+          </div>
+
+          <div className="ai-surface p-3">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium">Static control states</span>
+              <Sparkles size={14} className="text-[var(--ai-primary)]" />
+            </div>
+            <div className="mt-3 space-y-2">
+              <input
+                className="ai-control ai-control-input"
+                placeholder="Default state"
+              />
+              <input
+                className="ai-control ai-control-input ai-control--focused"
+                placeholder="Focused style"
+                readOnly
+              />
+              <input
+                className="ai-control ai-control-input ai-control--error"
+                aria-invalid="true"
+                placeholder="Error style"
+                readOnly
+              />
+              <input
+                className="ai-control ai-control-input ai-control--disabled"
+                placeholder="Disabled style"
+                disabled
+              />
+            </div>
+          </div>
+        </div>
+      </AiProvider>
+    </section>
+  );
+}
+
+export function AiUiPremiumShowcase() {
+  return (
+    <div className="grid gap-6 md:grid-cols-2">
+      <ShowcasePanel title="Premium UI Showcase" theme="dark" />
+      <ShowcasePanel title="Premium UI Showcase" theme="light" />
+    </div>
+  );
+}

package/src/hooks/useAiModels.ts

@@ -26,7 +26,8 @@ export function useAiModels(options?: UseAiModelsOptions): UseAiModelsResult {
 
   // Utiliser le contexte dès que la base URL correspond.
   // L'apiKeyId peut varier (session/api-key sélectionnée) sans invalider le contexte.
-  const useContextData = !options?.baseUrl || options.baseUrl === context.baseUrl;
+  const useContextData =
+    !options?.baseUrl || options.baseUrl === context.baseUrl;
 
   // Filtrer les modèles selon le type demandé
   const filteredModels = useMemo(() => {

package/src/hooks/useModelManagement.ts

@@ -44,7 +44,8 @@ export function useModelManagement(
   // Utiliser les données du contexte si la base URL correspond.
   // L'apiKey peut changer selon le mode d'auth (lb_session/supabase/api_key) sans
   // devoir casser le cache/provider de modèles déjà présent.
-  const useContextData = !options.baseUrl || options.baseUrl === context.baseUrl;
+  const useContextData =
+    !options.baseUrl || options.baseUrl === context.baseUrl;
 
   // Filtrer par catégorie si nécessaire
   const filteredModels = useMemo(() => {

package/src/index.ts

@@ -1,3 +1,5 @@
+import "./styles.css";
+
 // Types
 export * from "./types";
 
@@ -45,3 +47,4 @@ export * from "./examples/AiPromptPanelAdvanced";
 export * from "./examples/AiChipInputExample";
 export * from "./examples/AiImageButtonExample";
 export * from "./examples/AiContextButtonExample";
+export * from "./examples/AiUiPremiumShowcase";

package/src/styles/inline.ts

@@ -3,6 +3,8 @@
  * Theme: Purple/Violet primary color with light/dark mode support
  */
 
+import type React from "react";
+
 // Theme colors
 const colors = {
   // Purple/Violet theme
@@ -18,114 +20,23 @@ const colors = {
   warningLight: "#fbbf24",
   danger: "#ef4444",
   dangerLight: "#f87171",
-
-  // Neutral colors - Light mode
-  light: {
-    bg: "#ffffff",
-    bgSecondary: "#f9fafb",
-    bgTertiary: "#f3f4f6",
-    border: "#e2e8f0",
-    borderLight: "#f1f5f9",
-    text: "#111827",
-    textSecondary: "#6b7280",
-    textTertiary: "#9ca3af",
-    shadow: "rgba(0, 0, 0, 0.1)",
-    shadowMd:
-      "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
-    shadowLg:
-      "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
-    shadowXl:
-      "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)",
-  },
-
-  // Neutral colors - Dark mode
-  dark: {
-    bg: "#1f2937",
-    bgSecondary: "#111827",
-    bgTertiary: "#0f172a",
-    border: "#374151",
-    borderLight: "#4b5563",
-    text: "#f9fafb",
-    textSecondary: "#d1d5db",
-    textTertiary: "#9ca3af",
-    shadow: "rgba(0, 0, 0, 0.3)",
-    shadowMd:
-      "0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.3)",
-    shadowLg:
-      "0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3)",
-    shadowXl:
-      "0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3)",
-  },
-};
-
-// Use light mode by default (can be made dynamic later)
-const getIsDark = () => {
-  if (typeof document !== "undefined") {
-    const root = document.documentElement;
-    if (root.classList.contains("dark")) {
-      return true;
-    }
-    if (root.classList.contains("light")) {
-      return false;
-    }
-  }
-
-  return (
-    typeof window !== "undefined" &&
-    window.matchMedia?.("(prefers-color-scheme: dark)").matches
-  );
 };
 
 const themeVars = {
   bg: "var(--ai-bg)",
-  bgSecondary: "var(--ai-bg-secondary)",
-  bgTertiary: "var(--ai-bg-tertiary)",
+  bgSecondary: "var(--ai-bg2)",
+  bgTertiary: "var(--ai-bg3)",
   border: "var(--ai-border)",
-  borderLight: "var(--ai-border-light)",
-  text: "var(--ai-text)",
-  textSecondary: "var(--ai-text-secondary)",
-  textTertiary: "var(--ai-text-tertiary)",
-  shadow: "var(--ai-shadow)",
-  shadowMd: "var(--ai-shadow-md)",
+  borderLight: "color-mix(in srgb, var(--ai-border) 70%, transparent)",
+  text: "var(--ai-foreground)",
+  textSecondary: "var(--ai-secondary)",
+  textTertiary: "var(--ai-tertiary)",
+  shadow: "var(--ai-shadow-sm)",
+  shadowMd: "var(--ai-shadow-sm)",
   shadowLg: "var(--ai-shadow-lg)",
   shadowXl: "var(--ai-shadow-xl)",
 } as const;
 
-const applyThemeVariables = () => {
-  if (typeof document === "undefined") {
-    return;
-  }
-
-  const nextTheme = getIsDark() ? colors.dark : colors.light;
-  const root = document.documentElement;
-
-  root.style.setProperty("--ai-bg", nextTheme.bg);
-  root.style.setProperty("--ai-bg-secondary", nextTheme.bgSecondary);
-  root.style.setProperty("--ai-bg-tertiary", nextTheme.bgTertiary);
-  root.style.setProperty("--ai-border", nextTheme.border);
-  root.style.setProperty("--ai-border-light", nextTheme.borderLight);
-  root.style.setProperty("--ai-text", nextTheme.text);
-  root.style.setProperty("--ai-text-secondary", nextTheme.textSecondary);
-  root.style.setProperty("--ai-text-tertiary", nextTheme.textTertiary);
-  root.style.setProperty("--ai-shadow", nextTheme.shadow);
-  root.style.setProperty("--ai-shadow-md", nextTheme.shadowMd);
-  root.style.setProperty("--ai-shadow-lg", nextTheme.shadowLg);
-  root.style.setProperty("--ai-shadow-xl", nextTheme.shadowXl);
-};
-
-if (typeof window !== "undefined") {
-  applyThemeVariables();
-
-  const media = window.matchMedia?.("(prefers-color-scheme: dark)");
-  media?.addEventListener?.("change", applyThemeVariables);
-
-  const observer = new MutationObserver(() => applyThemeVariables());
-  observer.observe(document.documentElement, {
-    attributes: true,
-    attributeFilter: ["class"],
-  });
-}
-
 export const aiStyles = {
   // Input field
   input: {
@@ -134,7 +45,7 @@ export const aiStyles = {
     fontSize: "14px",
     lineHeight: "1.5",
     color: themeVars.text,
-    background: themeVars.bg,
+    background: "var(--ai-glass-strong)",
     border: `1px solid ${themeVars.border}`,
     borderColor: themeVars.border,
     borderRadius: "8px",
@@ -192,7 +103,7 @@ export const aiStyles = {
     fontSize: "14px",
     lineHeight: "1.5",
     color: themeVars.text,
-    background: themeVars.bg,
+    background: "var(--ai-glass-strong)",
     border: `1px solid ${themeVars.border}`,
     borderColor: themeVars.border,
     borderRadius: "8px",
@@ -277,7 +188,7 @@ export const aiStyles = {
     fontSize: "14px",
     lineHeight: "1.5",
     color: themeVars.text,
-    background: themeVars.bg,
+    background: "var(--ai-glass-strong)",
     borderWidth: "1px",
     borderStyle: "solid",
     borderColor: themeVars.border,
@@ -311,7 +222,7 @@ export const aiStyles = {
     height: "40px",
     border: `1px solid ${themeVars.border}`,
     borderRadius: "8px",
-    background: themeVars.bg,
+    background: "var(--ai-glass, rgba(255,255,255,0.7))",
     color: themeVars.text,
     cursor: "pointer" as const,
     transition: "all 0.2s",
@@ -319,7 +230,7 @@ export const aiStyles = {
   } as React.CSSProperties,
 
   statusButtonHover: {
-    background: themeVars.bgSecondary,
+    background: "var(--ai-glass-strong, rgba(255,255,255,0.82))",
     boxShadow: themeVars.shadowLg,
     transform: "scale(1.05)",
   } as React.CSSProperties,
@@ -336,7 +247,7 @@ export const aiStyles = {
     minWidth: "320px",
     maxWidth: "400px",
     padding: "16px",
-    background: themeVars.bg,
+    background: "var(--ai-bg2)",
     border: `1px solid ${themeVars.border}`,
     borderRadius: "12px",
     boxShadow: themeVars.shadowXl,
@@ -428,13 +339,13 @@ export const aiStyles = {
     transition: "all 0.2s",
     fontSize: "11px",
     fontWeight: 500,
-    background: `${colors.primary}10`,
-    border: `1px solid ${colors.primary}30`,
+    background: "color-mix(in srgb, var(--ai-primary) 10%, transparent)",
+    border: "1px solid color-mix(in srgb, var(--ai-primary) 30%, transparent)",
   } as React.CSSProperties,
 
   tooltipLinkHover: {
-    background: `${colors.primary}20`,
-    borderColor: colors.primary,
+    background: "color-mix(in srgb, var(--ai-primary) 20%, transparent)",
+    borderColor: "var(--ai-primary)",
   } as React.CSSProperties,
 
   // Chip/Label
@@ -446,9 +357,9 @@ export const aiStyles = {
     fontSize: "12px",
     fontWeight: 500,
     borderRadius: "6px",
-    background: `${colors.primary}10`,
-    color: colors.primary,
-    border: `1px solid ${colors.primary}30`,
+    background: "color-mix(in srgb, var(--ai-primary) 10%, transparent)",
+    color: "var(--ai-primary)",
+    border: "1px solid color-mix(in srgb, var(--ai-primary) 30%, transparent)",
   } as React.CSSProperties,
 
   // Modal (basic styles)
@@ -458,7 +369,7 @@ export const aiStyles = {
     left: 0,
     right: 0,
     bottom: 0,
-    zIndex: 9999,
+    zIndex: 2147483645,
     display: "flex" as const,
     alignItems: "center" as const,
     justifyContent: "center" as const,
@@ -472,7 +383,7 @@ export const aiStyles = {
     left: 0,
     right: 0,
     bottom: 0,
-    background: "rgba(0, 0, 0, 0.5)",
+    background: "var(--ai-overlay, rgba(0, 0, 0, 0.5))",
     backdropFilter: "blur(4px)",
     WebkitBackdropFilter: "blur(4px)",
   } as React.CSSProperties,
@@ -483,7 +394,8 @@ export const aiStyles = {
     maxWidth: "600px",
     maxHeight: "90vh",
     overflow: "auto" as const,
-    background: themeVars.bg,
+    background: "var(--ai-bg2)",
+    border: "1px solid var(--ai-border)",
     borderRadius: "12px",
     boxShadow: themeVars.shadowXl,
     padding: "0",
@@ -578,39 +490,6 @@ export const aiStyles = {
   } as React.CSSProperties,
 };
 
-// Inject keyframes animation for spinner
-if (typeof document !== "undefined") {
-  const styleSheet = document.createElement("style");
-  styleSheet.textContent = `
-    @keyframes ai-spin {
-      from { transform: rotate(0deg); }
-      to { transform: rotate(360deg); }
-    }
-    
-    @keyframes ai-fadeIn {
-      from { opacity: 0; }
-      to { opacity: 1; }
-    }
-    
-    @keyframes ai-slideUp {
-      from {
-        opacity: 0;
-        transform: translateY(20px);
-      }
-      to {
-        opacity: 1;
-        transform: translateY(0);
-      }
-    }
-    
-    @keyframes pulse {
-      0%, 100% { opacity: 1; }
-      50% { opacity: 0.6; }
-    }
-  `;
-  document.head.appendChild(styleSheet);
-}
-
 // Helper function to calculate tooltip position
 export function calculateTooltipPosition(
   buttonRect: DOMRect,