@lastbrain/ai-ui-react 1.0.11 → 1.0.12

package/src/components/AiStatusButton.tsx

@@ -3,6 +3,13 @@
 import type { AiStatus } from "@lastbrain/ai-ui-core";
 import { useState, useRef, useLayoutEffect, type CSSProperties } from "react";
 import { createPortal } from "react-dom";
+import {
+  BarChart3,
+  Settings,
+  FileText,
+  History as HistoryIcon,
+  FolderPlus,
+} from "lucide-react";
 import { aiStyles, calculateTooltipPosition } from "../styles/inline";
 
 export interface AiStatusButtonProps {
@@ -36,6 +43,14 @@ export function AiStatusButton({
     typeof value === "number" ? value.toLocaleString() : "0";
   const formatFixed = (value: number | null | undefined, digits: number) =>
     typeof value === "number" ? value.toFixed(digits) : "0.00";
+  const formatStorage = (valueMb: number | null | undefined) => {
+    const mb = typeof valueMb === "number" ? valueMb : 0;
+    if (mb >= 1024) {
+      const gb = mb / 1024;
+      return `${gb.toFixed(2)} GB`;
+    }
+    return `${mb.toFixed(2)} MB`;
+  };
   const safeNumber = (value: number | null | undefined) =>
     typeof value === "number" ? value : 0;
   const clampPercentage = (value: number | null | undefined) =>
@@ -81,6 +96,17 @@ export function AiStatusButton({
           strokeLinecap="round"
           transform={`rotate(-90 ${size / 2} ${size / 2})`}
         />
+        <text
+          x={size / 2}
+          y={size / 2}
+          textAnchor="middle"
+          dominantBaseline="central"
+          fontSize="7px"
+          fill={color}
+          fontWeight="600"
+        >
+          {percentage.toFixed(0)}%
+        </text>
       </svg>
     );
   };
@@ -352,65 +378,185 @@ export function AiStatusButton({
               <div style={aiStyles.tooltipRow}>
                 <span style={aiStyles.tooltipLabel}>Total:</span>
                 <span style={aiStyles.tooltipValue}>
-                  {formatFixed(storageUsed, 2)} MB /{" "}
-                  {formatFixed(storageAllocated, 2)} MB
+                  {formatStorage(storageUsed)} /{" "}
+                  {formatStorage(storageAllocated)}
                 </span>
                 {renderUsageCircle(storagePercentage)}
               </div>
             </div>
 
-            <div style={aiStyles.tooltipActions}>
-              <a
-                href="https://prompt.lastbrain.io/fr/auth/dashboard"
-                target="_blank"
-                rel="noopener noreferrer"
-                style={aiStyles.tooltipLink}
+            <div
+              style={{
+                ...aiStyles.tooltipActions,
+                width: "100%",
+
+                flexDirection: "row",
+              }}
+            >
+              <button
+                onClick={() =>
+                  window.open(
+                    "https://prompt.lastbrain.io/auth/ai/tokens",
+                    "_blank"
+                  )
+                }
+                style={{
+                  background: "transparent",
+                  border: "none",
+                  borderRadius: "4px",
+                  padding: "14px",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "#8b5cf6",
+                  transition: "all 0.2s ease",
+                }}
                 onMouseEnter={(e) => {
-                  Object.assign(
-                    e.currentTarget.style,
-                    aiStyles.tooltipLinkHover
-                  );
+                  Object.assign(e.currentTarget.style, {
+                    background: "rgba(139, 92, 246, 0.1)",
+                  });
                 }}
                 onMouseLeave={(e) => {
-                  Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
+                  Object.assign(e.currentTarget.style, {
+                    background: "transparent",
+                  });
                 }}
+                title="Dashboard"
               >
-                Dashboard
-              </a>
-              <a
-                href="https://prompt.lastbrain.io/fr/auth/billing"
-                target="_blank"
-                rel="noopener noreferrer"
-                style={aiStyles.tooltipLink}
+                <BarChart3 size={18} />
+              </button>
+              <button
+                onClick={() =>
+                  window.open(
+                    "https://prompt.lastbrain.io/auth/ai/history",
+                    "_blank"
+                  )
+                }
+                style={{
+                  background: "transparent",
+                  border: "none",
+                  borderRadius: "4px",
+                  padding: "14px",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "#8b5cf6",
+                  transition: "all 0.2s ease",
+                }}
                 onMouseEnter={(e) => {
-                  Object.assign(
-                    e.currentTarget.style,
-                    aiStyles.tooltipLinkHover
-                  );
+                  Object.assign(e.currentTarget.style, {
+                    background: "rgba(139, 92, 246, 0.1)",
+                  });
                 }}
                 onMouseLeave={(e) => {
-                  Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
+                  Object.assign(e.currentTarget.style, {
+                    background: "transparent",
+                  });
                 }}
+                title="History"
               >
-                History
-              </a>
-              <a
-                href="https://prompt.lastbrain.io/fr/auth/billing"
-                target="_blank"
-                rel="noopener noreferrer"
-                style={aiStyles.tooltipLink}
+                <HistoryIcon size={18} />
+              </button>
+              <button
+                onClick={() =>
+                  window.open(
+                    "https://prompt.lastbrain.io/auth/ai/settings",
+                    "_blank"
+                  )
+                }
+                style={{
+                  background: "transparent",
+                  border: "none",
+                  borderRadius: "4px",
+                  padding: "14px",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "#8b5cf6",
+                  transition: "all 0.2s ease",
+                }}
+                onMouseEnter={(e) => {
+                  Object.assign(e.currentTarget.style, {
+                    background: "rgba(139, 92, 246, 0.1)",
+                  });
+                }}
+                onMouseLeave={(e) => {
+                  Object.assign(e.currentTarget.style, {
+                    background: "transparent",
+                  });
+                }}
+                title="Settings"
+              >
+                <Settings size={18} />
+              </button>
+              <button
+                onClick={() =>
+                  window.open(
+                    "https://prompt.lastbrain.io/auth/ai/prompts",
+                    "_blank"
+                  )
+                }
+                style={{
+                  background: "transparent",
+                  border: "none",
+                  borderRadius: "4px",
+                  padding: "14px",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "#8b5cf6",
+                  transition: "all 0.2s ease",
+                }}
+                onMouseEnter={(e) => {
+                  Object.assign(e.currentTarget.style, {
+                    background: "rgba(139, 92, 246, 0.1)",
+                  });
+                }}
+                onMouseLeave={(e) => {
+                  Object.assign(e.currentTarget.style, {
+                    background: "transparent",
+                  });
+                }}
+                title="New Prompt"
+              >
+                <FileText size={18} />
+              </button>
+              <button
+                onClick={() =>
+                  window.open(
+                    "https://prompt.lastbrain.io/auth/folder",
+                    "_blank"
+                  )
+                }
+                style={{
+                  background: "transparent",
+                  border: "none",
+                  padding: "14px",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "#8b5cf6",
+                  transition: "all 0.2s ease",
+                }}
                 onMouseEnter={(e) => {
-                  Object.assign(
-                    e.currentTarget.style,
-                    aiStyles.tooltipLinkHover
-                  );
+                  Object.assign(e.currentTarget.style, {
+                    background: "rgba(139, 92, 246, 0.1)",
+                  });
                 }}
                 onMouseLeave={(e) => {
-                  Object.assign(e.currentTarget.style, aiStyles.tooltipLink);
+                  Object.assign(e.currentTarget.style, {
+                    background: "transparent",
+                  });
                 }}
+                title="New Folder"
               >
-                Settings
-              </a>
+                <FolderPlus size={18} />
+              </button>
             </div>
           </div>,
           document.body

package/src/examples/AiImageGenerator.tsx

@@ -0,0 +1,214 @@
+import { useModelManagement } from "../hooks/useModelManagement";
+
+interface ModelManagementExampleProps {
+  /** Clé API LastBrain pour l'authentification */
+  apiKey?: string;
+  /** URL de base de l'API */
+  baseUrl?: string;
+  /** Catégorie de modèles à gérer */
+  category?: "text" | "image" | "audio" | "video";
+}
+
+/**
+ * Composant exemple montrant comment utiliser le hook useModelManagement
+ * Retourne les données et handlers pour les passer à d'autres composants
+ */
+export function useImageModelManagement({
+  apiKey,
+  baseUrl,
+  category = "image",
+}: ModelManagementExampleProps = {}) {
+  const {
+    availableModels,
+    userModels,
+    loading,
+    error,
+    toggleModel,
+    isModelActive,
+    getActiveModels,
+    getInactiveModels,
+  } = useModelManagement({
+    apiKey,
+    baseUrl,
+    category,
+    autoFetch: true,
+  });
+
+  const handleModelToggle = async (modelId: string, isActive: boolean) => {
+    try {
+      await toggleModel(modelId, isActive);
+    } catch (error) {
+      console.error("Erreur lors de la modification du modèle:", error);
+      throw error;
+    }
+  };
+
+  return {
+    availableModels,
+    userModels,
+    loading,
+    error,
+    toggleModel: handleModelToggle,
+    isModelActive,
+    getActiveModels,
+    getInactiveModels,
+  };
+}
+
+/**
+ * Composant exemple affichant les statistiques des modèles
+ */
+export function ModelManagementStats({
+  apiKey,
+  baseUrl,
+  category = "image",
+}: ModelManagementExampleProps = {}) {
+  const {
+    availableModels,
+    loading,
+    error,
+    getActiveModels,
+    getInactiveModels,
+  } = useModelManagement({
+    apiKey,
+    baseUrl,
+    category,
+    autoFetch: true,
+  });
+
+  if (loading) {
+    return <div className="p-4 text-center">Chargement des modèles...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 border border-red-200 rounded-lg bg-red-50">
+        <p className="text-red-600">Erreur: {error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-3 gap-4">
+      <div className="p-3 bg-green-100 rounded-lg">
+        <div className="text-sm text-green-700">Modèles activés</div>
+        <div className="text-2xl font-bold text-green-800">
+          {getActiveModels().length}
+        </div>
+      </div>
+      <div className="p-3 bg-blue-100 rounded-lg">
+        <div className="text-sm text-blue-700">Modèles disponibles</div>
+        <div className="text-2xl font-bold text-blue-800">
+          {availableModels.length}
+        </div>
+      </div>
+      <div className="p-3 bg-orange-100 rounded-lg">
+        <div className="text-sm text-orange-700">Non utilisés</div>
+        <div className="text-2xl font-bold text-orange-800">
+          {getInactiveModels().length}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Composant exemple pour afficher et gérer une liste de modèles
+ */
+export function ModelManagementList({
+  apiKey,
+  baseUrl,
+  category = "image",
+  onModelToggle,
+}: ModelManagementExampleProps & {
+  onModelToggle?: (modelId: string, isActive: boolean) => void;
+}) {
+  const {
+    availableModels,
+    userModels,
+    loading,
+    error,
+    toggleModel,
+    isModelActive,
+  } = useModelManagement({
+    apiKey,
+    baseUrl,
+    category,
+    autoFetch: true,
+  });
+
+  const handleToggle = async (modelId: string) => {
+    const isCurrentlyActive = isModelActive(modelId);
+    const newState = !isCurrentlyActive;
+
+    try {
+      await toggleModel(modelId, newState);
+      onModelToggle?.(modelId, newState);
+    } catch (error) {
+      console.error("Erreur lors de la modification du modèle:", error);
+    }
+  };
+
+  if (loading) {
+    return <div className="p-4 text-center">Chargement des modèles...</div>;
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 border border-red-200 rounded-lg bg-red-50">
+        <p className="text-red-600">Erreur: {error}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      <h3 className="text-lg font-semibold">Modèles {category}</h3>
+      {availableModels.map((model) => {
+        const isActive = isModelActive(model.id);
+
+        return (
+          <div
+            key={model.id}
+            className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50"
+          >
+            <div className="flex items-center gap-3">
+              <div
+                className={`w-3 h-3 rounded-full ${isActive ? "bg-green-500" : "bg-gray-300"}`}
+              />
+              <div>
+                <div className="flex items-center gap-2">
+                  <span className="font-medium">{model.name}</span>
+                  {model.isPro && (
+                    <span className="px-2 py-1 text-xs bg-blue-100 text-blue-800 rounded">
+                      PRO
+                    </span>
+                  )}
+                </div>
+                {model.description && (
+                  <p className="text-sm text-gray-500">{model.description}</p>
+                )}
+                <div className="flex items-center gap-4 mt-1 text-xs text-gray-400">
+                  <span>Fournisseur: {model.provider}</span>
+                  {model.costPer1M && (
+                    <span>Coût: ${model.costPer1M}/1M tokens</span>
+                  )}
+                </div>
+              </div>
+            </div>
+            <button
+              onClick={() => handleToggle(model.id)}
+              className={`px-3 py-1 text-sm rounded ${
+                isActive
+                  ? "bg-red-100 text-red-700 hover:bg-red-200"
+                  : "bg-green-100 text-green-700 hover:bg-green-200"
+              }`}
+            >
+              {isActive ? "Désactiver" : "Activer"}
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}