@lastbrain/ai-ui-react 1.0.63 → 1.0.64

package/src/components/AiStatusButton.tsx

@@ -43,6 +43,9 @@ export function AiStatusButton({
   let lbStorageStatus: any = null;
   let lbIsLoadingStatus: boolean = false;
   let lbIsLoadingStorage: boolean = false;
+  let lbSelectedKey: any = null;
+  let lbRefreshBasicStatus: (() => Promise<void>) | undefined;
+  let lbRefreshStorageStatus: ((force?: boolean) => Promise<void>) | undefined;
 
   try {
     const lbContext = useLB();
@@ -58,6 +61,9 @@ export function AiStatusButton({
     lbStorageStatus = lbContext.storageStatus;
     lbIsLoadingStatus = lbContext.isLoadingStatus || false;
     lbIsLoadingStorage = lbContext.isLoadingStorage || false;
+    lbSelectedKey = lbContext.selectedKey || null;
+    lbRefreshBasicStatus = lbContext.refreshBasicStatus;
+    lbRefreshStorageStatus = lbContext.refreshStorageStatus;
   } catch {
     // LBProvider n'est pas disponible, ignorer
     lbStatus = undefined;
@@ -65,13 +71,17 @@ export function AiStatusButton({
     logout = undefined;
   }
 
-  // Utiliser le status du contexte LB si pas de prop status
-  // Combinaison du basic status et storage status pour backward compatibility
-  const effectiveStatus = status || {
-    ...lbApiStatus,
-    ...lbBasicStatus,
-    storage: lbStorageStatus?.storage,
-  };
+  // Toujours prioriser les données du contexte LB quand disponibles
+  // pour éviter d'afficher un status externe obsolète (Unknown/0).
+  const lbEffectiveStatus =
+    lbStatus === "ready"
+      ? {
+          ...(lbApiStatus || {}),
+          ...(lbBasicStatus || {}),
+          storage: lbStorageStatus?.storage || lbApiStatus?.storage,
+        }
+      : null;
+  const effectiveStatus = lbEffectiveStatus || status || null;
 
   // Récupérer refetchProviders depuis AiProvider si disponible
   let refetchProviders: (() => Promise<void>) | undefined;
@@ -94,6 +104,7 @@ export function AiStatusButton({
     percentage?: number;
     purchased?: number;
     quota?: number;
+    remaining?: number;
   };
   type StorageUsage = {
     used_mb?: number;
@@ -104,8 +115,6 @@ export function AiStatusButton({
     total_mb?: number;
   };
 
-  const formatNumber = (value: number | null | undefined) =>
-    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) => {
@@ -179,10 +188,13 @@ export function AiStatusButton({
   const balanceUsage = effectiveStatus?.balance as BalanceUsage | undefined;
   const storageUsage = effectiveStatus?.storage as StorageUsage | undefined;
 
-  const balanceTotal =
+  const balanceUsed = safeNumber(balanceUsage?.used);
+  const balanceRemaining = safeNumber(balanceUsage?.remaining);
+  const rawBalanceTotal =
     balanceUsage?.total ??
     safeNumber(balanceUsage?.purchased) + safeNumber(balanceUsage?.quota);
-  const balanceUsed = balanceUsage?.used ?? balanceUsage?.total ?? 0;
+  const balanceTotal =
+    rawBalanceTotal > 0 ? rawBalanceTotal : balanceUsed + balanceRemaining;
   const balancePercentage =
     balanceUsage?.percentage ??
     (balanceTotal > 0 ? Math.round((balanceUsed / balanceTotal) * 100) : 0);
@@ -202,6 +214,11 @@ export function AiStatusButton({
   const buttonRef = useRef<HTMLButtonElement>(null);
   const tooltipRef = useRef<HTMLDivElement>(null);
   const canPortal = typeof document !== "undefined";
+  const hasApiKeySelected = Boolean(
+    effectiveStatus?.apiKey?.id || effectiveStatus?.api_key?.id || lbSelectedKey?.id
+  );
+  const requiresApiKeySelection =
+    lbStatus === "ready" && !hasApiKeySelected && apiKeys.length > 0;
 
   useLayoutEffect(() => {
     if (!showTooltip || !buttonRef.current) {
@@ -279,11 +296,17 @@ export function AiStatusButton({
   }, [showTooltip, canPortal]);
 
   const handleMouseEnter = () => {
+    if (requiresApiKeySelection) {
+      return;
+    }
     setShowTooltip(true);
     setIsHovered(true);
   };
 
   const handleMouseLeave = () => {
+    if (requiresApiKeySelection) {
+      return;
+    }
     // Keep tooltip visible if hovering over it
     setTimeout(() => {
       if (
@@ -296,6 +319,32 @@ export function AiStatusButton({
     }, 100);
   };
 
+  useLayoutEffect(() => {
+    if (!showTooltip || requiresApiKeySelection || lbStatus !== "ready") {
+      return;
+    }
+    if (!lbBasicStatus && !lbIsLoadingStatus && lbRefreshBasicStatus) {
+      lbRefreshBasicStatus().catch(() => undefined);
+    }
+    if (
+      !lbStorageStatus?.storage &&
+      !lbIsLoadingStorage &&
+      lbRefreshStorageStatus
+    ) {
+      lbRefreshStorageStatus().catch(() => undefined);
+    }
+  }, [
+    showTooltip,
+    requiresApiKeySelection,
+    lbStatus,
+    lbBasicStatus,
+    lbStorageStatus,
+    lbIsLoadingStatus,
+    lbIsLoadingStorage,
+    lbRefreshBasicStatus,
+    lbRefreshStorageStatus,
+  ]);
+
   if (loading || isSelectingApiKey || isLoadingStatus || lbIsLoadingStatus) {
     return (
       <button
@@ -321,6 +370,59 @@ export function AiStatusButton({
     );
   }
 
+  if (requiresApiKeySelection) {
+    return (
+      <div style={{ position: "relative", display: "inline-block" }}>
+        <button
+          ref={buttonRef}
+          style={{
+            ...aiStyles.statusButton,
+            color: "#f59e0b",
+            ...(isHovered && aiStyles.statusButtonHover),
+          }}
+          className={className}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+          onClick={() => setShowApiKeySelector(true)}
+          title="Select an API key to enable AI status and generation"
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+          >
+            <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
+          </svg>
+        </button>
+        {showApiKeySelector && apiKeys.length > 0 && (
+          <LBApiKeySelector
+            isOpen={showApiKeySelector}
+            apiKeys={apiKeys}
+            onSelect={async (keyId) => {
+              setIsSelectingApiKey(true);
+              try {
+                if (switchApiKey) {
+                  await switchApiKey(keyId);
+                }
+                setShowApiKeySelector(false);
+                if (refetchProviders) {
+                  await refetchProviders();
+                }
+              } catch (error) {
+                console.error("Failed to select API key:", error);
+              } finally {
+                setIsSelectingApiKey(false);
+              }
+            }}
+            onCancel={() => setShowApiKeySelector(false)}
+          />
+        )}
+      </div>
+    );
+  }
+
   if (!effectiveStatus) {
     // Si pas de statut API et pas de LBProvider, afficher message simple
     if (!lbStatus && lbStatus !== "ready") {
@@ -828,6 +930,14 @@ export function AiStatusButton({
                   req/min
                 </span>
               </div>
+              <div style={aiStyles.tooltipRow}>
+                <span style={aiStyles.tooltipLabel}>Auth:</span>
+                <span style={aiStyles.tooltipValue}>
+                  {lbIsLoadingStatus
+                    ? "..."
+                    : effectiveStatus?.authType || lbStatus || "unknown"}
+                </span>
+              </div>
             </div>
 
             <div style={aiStyles.tooltipSection}>
@@ -835,7 +945,7 @@ export function AiStatusButton({
               <div style={aiStyles.tooltipRow}>
                 <span style={aiStyles.tooltipLabel}>Total:</span>
                 <span style={aiStyles.tooltipValue}>
-                  ${formatFixed(balanceUsed, 6)} / ${formatNumber(balanceTotal)}
+                  ${formatFixed(balanceUsed, 2)} / ${formatFixed(balanceTotal, 2)}
                 </span>
                 {renderUsageCircle(balancePercentage)}
               </div>