@lastbrain/ai-ui-react 1.0.49 → 1.0.52

package/src/context/LBAuthProvider.tsx

@@ -19,6 +19,7 @@ import type {
   LBSession,
   LBLoginResult,
   LBSessionResult,
+  AiStatus,
 } from "@lastbrain/ai-ui-core";
 
 interface LBProviderProps {
@@ -57,6 +58,10 @@ interface LBContextValue extends LBAuthState {
   apiKeys: LBApiKey[];
   /** Access token temporaire (après login) */
   accessToken?: string;
+  /** Status API (balance, storage, API key info) */
+  apiStatus: AiStatus | null;
+  /** Fonction pour rafraîchir le status */
+  refreshStatus: () => Promise<void>;
 }
 
 const LBContext = createContext<LBContextValue | undefined>(undefined);
@@ -73,6 +78,7 @@ export function LBProvider({
   });
   const [apiKeys, setApiKeys] = useState<LBApiKey[]>([]);
   const [accessToken, setAccessToken] = useState<string>();
+  const [apiStatus, setApiStatus] = useState<AiStatus | null>(null);
 
   /**
    * Vérifie si une session existe au chargement
@@ -85,13 +91,13 @@ export function LBProvider({
 
       if (response.ok) {
         const session: LBSession = await response.json();
-        
+
         // Récupérer les infos utilisateur depuis /auth/status
         try {
           const statusResponse = await fetch(`${proxyUrl}/auth/status`, {
             credentials: "include",
           });
-          
+
           if (statusResponse.ok) {
             const statusData = await statusResponse.json();
             setState({
@@ -125,7 +131,7 @@ export function LBProvider({
             },
           });
         }
-        
+
         onStatusChange?.("ready");
       } else {
         setState({ status: "needs_auth" });
@@ -419,6 +425,72 @@ export function LBProvider({
     await checkSession();
   }, [checkSession]);
 
+  /**
+   * Récupère le status API (balance, storage, API key info)
+   */
+  const refreshStatus = useCallback(async (): Promise<void> => {
+    if (state.status !== "ready") {
+      setApiStatus(null);
+      return;
+    }
+
+    try {
+      const response = await fetch(`${proxyUrl}/auth/status`, {
+        credentials: "include",
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setApiStatus(data);
+      } else {
+        setApiStatus(null);
+      }
+    } catch (error) {
+      console.error("[LBProvider] Failed to fetch status:", error);
+      setApiStatus(null);
+    }
+  }, [proxyUrl, state.status]);
+
+  /**
+   * Récupère les clés API avec la session active
+   */
+  const fetchApiKeysWithSession = useCallback(async (): Promise<void> => {
+    if (state.status !== "ready") {
+      setApiKeys([]);
+      return;
+    }
+
+    try {
+      console.log("[LBProvider] Fetching API keys with session...");
+      const response = await fetch(`${proxyUrl}/auth/api-keys`, {
+        credentials: "include",
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        console.log("[LBProvider] API keys received:", data);
+        setApiKeys(data.apiKeys || []);
+      } else {
+        console.warn("[LBProvider] Failed to fetch API keys:", response.status);
+        setApiKeys([]);
+      }
+    } catch (error) {
+      console.error("[LBProvider] Failed to fetch API keys:", error);
+      setApiKeys([]);
+    }
+  }, [proxyUrl, state.status]);
+
+  // Refresh status quand la session devient ready
+  useEffect(() => {
+    if (state.status === "ready") {
+      refreshStatus();
+      fetchApiKeysWithSession(); // Also fetch API keys list
+    } else {
+      setApiStatus(null);
+      setApiKeys([]);
+    }
+  }, [state.status, refreshStatus, fetchApiKeysWithSession]);
+
   const value: LBContextValue = {
     ...state,
     login,
@@ -429,6 +501,8 @@ export function LBProvider({
     refreshSession,
     apiKeys,
     accessToken,
+    apiStatus,
+    refreshStatus,
   };
 
   return <LBContext.Provider value={value}>{children}</LBContext.Provider>;

package/README.md

@@ -1,147 +0,0 @@
-# @lastbrain/ai-ui-react
-
-Headless React components for LastBrain AI UI Kit.
-
-## Features
-
-- Headless components (no UI library dependency)
-- Built-in CSS styles (optional)
-- React hooks for AI operations
-- Context provider for configuration
-- TypeScript support
-- SSR safe
-
-## Installation
-
-```bash
-npm install @lastbrain/ai-ui-react @lastbrain/ai-ui-core
-# or
-pnpm add @lastbrain/ai-ui-react @lastbrain/ai-ui-core
-```
-
-## Styles
-
-**Version 1.0.8+**: Components now use inline styles by default. No CSS import required!
-
-The package includes built-in styling that works out of the box. Components will render correctly without any additional CSS imports.
-
-If you want to customize the styling, you can:
-
-1. **Override inline styles**: Pass custom `className` or `style` props
-2. **Use the optional CSS file**: Import `@lastbrain/ai-ui-react/styles.css` for additional customization
-3. **Provide your own styles**: Style components using the provided CSS classes
-
-```tsx
-// ✅ Works out of the box (no CSS import needed)
-import { AiStatusButton } from "@lastbrain/ai-ui-react";
-
-// ✅ Optional: Import CSS for customization
-import "@lastbrain/ai-ui-react/styles.css";
-```
-
-### CSS Classes (for custom styling)
-
-If you want to override styles using CSS, target these classes:
-
-- `.ai-input` - Input field
-- `.ai-textarea` - Textarea
-- `.ai-button` - Button
-- `.ai-select` - Select dropdown
-- `.ai-modal` - Modal dialog
-- `.ai-tooltip` - Tooltip
-- `.ai-chip` - Chip/Badge
-- `.ai-status-button` - Status button
-- And more...
-
-### CSS Variables
-
-Customize the theme using CSS variables:
-
-```css
-:root {
-  --ai-primary: #3b82f6;
-  --ai-primary-hover: #2563eb;
-  --ai-success: #10b981;
-  --ai-warning: #f59e0b;
-  --ai-danger: #ef4444;
-  --ai-border: #e5e7eb;
-  --ai-text: #1f2937;
-  --ai-text-secondary: #6b7280;
-  --ai-bg: #ffffff;
-  --ai-bg-hover: #f9fafb;
-  --ai-radius: 8px;
-}
-```
-
-## Usage
-
-### With Provider (Recommended)
-
-```tsx
-import {
-  AiProvider,
-  AiInput,
-  AiSettingsButton,
-  AiStatusButton,
-} from "@lastbrain/ai-ui-react";
-import "@lastbrain/ai-ui-react/styles.css";
-
-function App() {
-  return (
-    <AiProvider baseUrl="https://api.lastbrain.com" apiKeyId="your-key">
-      <div>
-        <AiInput
-          model="openai/gpt-4o-mini"
-          prompt="Improve this text"
-          onValue={(text) => console.log(text)}
-          onToast={(toast) => alert(toast.message)}
-        />
-        <AiStatusButton />
-        <AiSettingsButton />
-      </div>
-    </AiProvider>
-  );
-}
-```
-
-### Without Provider
-
-```tsx
-import { AiInput } from "@lastbrain/ai-ui-react";
-import "@lastbrain/ai-ui-react/styles.css";
-
-function MyComponent() {
-  return (
-    <AiInput
-      baseUrl="https://api.lastbrain.com"
-      apiKeyId="your-key"
-      model="openai/gpt-4o-mini"
-      prompt="Improve this text"
-      onValue={(text) => console.log(text)}
-    />
-  );
-}
-```
-
-## Components
-
-- `AiInput` - Text input with AI assistance
-- `AiTextarea` - Textarea with AI assistance
-- `AiSelect` - Select dropdown with AI assistance
-- `AiChipLabel` - Chip/label with AI assistance
-- `AiImageButton` - Button for AI image generation
-- `AiSettingsButton` - Settings button with status display
-- `AiPromptPanel` - Modal/drawer for model and prompt selection
-- `AiModelSelect` - Model selection dropdown
-
-## Hooks
-
-- `useAiClient` - Access AI client instance
-- `useAiModels` - Fetch available models
-- `useAiStatus` - Fetch user status (tokens, wallet, storage)
-- `useAiCallText` - Generate text
-- `useAiCallImage` - Generate images
-
-## API Reference
-
-See the [full documentation](https://docs.lastbrain.com/ai-ui-kit/react) for detailed API reference.