@lastbrain/ai-ui-react 1.0.63 → 1.0.65

package/src/components/AiInput.tsx

@@ -11,6 +11,7 @@ import { aiStyles } from "../styles/inline";
 import { handleAIError } from "../utils/errorHandler";
 import { useLB } from "../context/LBAuthProvider";
 import { LBSigninModal } from "./LBSigninModal";
+import { useAiContext } from "../context/AiProvider";
 
 export interface AiInputProps
   extends
@@ -21,8 +22,8 @@ export interface AiInputProps
 }
 
 export function AiInput({
-  baseUrl,
-  apiKeyId,
+  baseUrl: propBaseUrl,
+  apiKeyId: propApiKeyId,
   uiMode = "modal",
   context,
   model,
@@ -57,6 +58,20 @@ export function AiInput({
     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,
@@ -237,6 +252,7 @@ export function AiInput({
           apiKey={apiKeyId}
           baseUrl={baseUrl}
           enableModelManagement={enableModelManagement}
+          showOnlyUserModels={true}
         />
       )}
       <LBSigninModal

package/src/components/AiPromptPanel.tsx

@@ -19,7 +19,7 @@ import {
 } from "../hooks/usePrompts";
 import { useModelManagement } from "../hooks/useModelManagement";
 import { type AIModel } from "../context/AiProvider";
-import { AiProvider } from "../context/AiProvider";
+import { AiProvider, useAiContext } from "../context/AiProvider";
 
 export interface AiPromptPanelProps {
   isOpen: boolean;
@@ -37,6 +37,7 @@ export interface AiPromptPanelProps {
   onModelToggle?: (modelId: string, isActive: boolean) => Promise<void>;
   apiKey?: string;
   baseUrl?: string;
+  showOnlyUserModels?: boolean;
 }
 
 export interface AiPromptPanelRenderProps {
@@ -59,8 +60,20 @@ export interface AiPromptPanelRenderProps {
 
 export function AiPromptPanel(props: AiPromptPanelProps) {
   const { apiKey, baseUrl } = props;
+  let hasContext = false;
+  try {
+    useAiContext();
+    hasContext = true;
+  } catch {
+    hasContext = false;
+  }
+
+  // Si un contexte existe déjà, ne pas re-wrapper (évite les refetch multiples).
+  if (hasContext) {
+    return <AiPromptPanelInternal {...props} />;
+  }
 
-  // Si apiKey et baseUrl sont fournis, wrapper avec AiProvider
+  // Sinon, si apiKey/baseUrl sont fournis, wrapper avec AiProvider
   if (apiKey || baseUrl) {
     return (
       <AiProvider baseUrl={baseUrl || ""} apiKeyId={apiKey || ""}>
@@ -88,6 +101,7 @@ function AiPromptPanelInternal({
   onModelToggle,
   apiKey,
   baseUrl,
+  showOnlyUserModels = false,
 }: AiPromptPanelProps) {
   const [selectedModel, setSelectedModel] = useState("");
   const [prompt, setPrompt] = useState("");
@@ -180,13 +194,22 @@ function AiPromptPanelInternal({
       (m) => m.category === modelCategory
     );
 
+    if (!showAllModels && showOnlyUserModels) {
+      return categoryModels.filter((m) => effectiveUserModels.includes(m.id));
+    }
+
     if (showAllModels) {
       return categoryModels;
-    } else {
-      return categoryModels.filter((m) => effectiveUserModels.includes(m.id));
     }
+
+    const enabledModels = categoryModels.filter((m) =>
+      effectiveUserModels.includes(m.id)
+    );
+    return enabledModels.length > 0 ? enabledModels : categoryModels;
   };
 
+  const modelOptions = getFilteredModels();
+
   // Fetch prompts when modal opens
   useEffect(() => {
     if (isOpen && (models.length > 0 || enableModelManagement)) {
@@ -209,7 +232,7 @@ function AiPromptPanelInternal({
   ]);
 
   const handleSubmit = async () => {
-    const activeModelId = selectedModel || models[0]?.id;
+    const activeModelId = selectedModel || modelOptions[0]?.id;
     if (!activeModelId || !prompt.trim()) return;
     setIsGenerating(true);
     try {
@@ -249,6 +272,20 @@ function AiPromptPanelInternal({
     };
   }, []);
 
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    if (modelOptions.length === 0) {
+      setSelectedModel("");
+      return;
+    }
+    const hasSelected = modelOptions.some((model) => model.id === selectedModel);
+    if (!hasSelected) {
+      setSelectedModel(modelOptions[0].id);
+    }
+  }, [isOpen, modelOptions, selectedModel]);
+
   const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.key === "Escape") {
       handleClose();
@@ -284,7 +321,7 @@ function AiPromptPanelInternal({
 
   if (!isOpen) return null;
 
-  const activeModelId = selectedModel || models[0]?.id || "";
+  const activeModelId = selectedModel || modelOptions[0]?.id || "";
   const currentModelType = models.find((m) => m.id === activeModelId)?.type;
   const filteredPrompts = prompts.filter((p: Prompt | PublicPrompt) => {
     const matchesType =
@@ -562,10 +599,14 @@ function AiPromptPanelInternal({
                         ...(modelFocused && aiStyles.selectFocus),
                       }}
                     >
-                      {getFilteredModels().length === 0 && (
-                        <option value="">Loading models...</option>
+                      {modelOptions.length === 0 && (
+                        <option value="">
+                          {showOnlyUserModels
+                            ? "No active models. Open 'Gérer les modèles'."
+                            : "Loading models..."}
+                        </option>
                       )}
-                      {getFilteredModels().map((model) => {
+                      {modelOptions.map((model) => {
                         const isActive = effectiveUserModels.includes(model.id);
                         return (
                           <option

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,7 +319,37 @@ export function AiStatusButton({
     }, 100);
   };
 
-  if (loading || isSelectingApiKey || isLoadingStatus || lbIsLoadingStatus) {
+  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) && !effectiveStatus)
+  ) {
     return (
       <button
         ref={buttonRef}
@@ -321,6 +374,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 +934,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 +949,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>

package/src/components/AiTextarea.tsx

@@ -16,6 +16,7 @@ import { aiStyles } from "../styles/inline";
 import { handleAIError } from "../utils/errorHandler";
 import { useLB } from "../context/LBAuthProvider";
 import { LBSigninModal } from "./LBSigninModal";
+import { useAiContext } from "../context/AiProvider";
 
 export interface AiTextareaProps
   extends
@@ -25,8 +26,8 @@ export interface AiTextareaProps
 }
 
 export function AiTextarea({
-  baseUrl,
-  apiKeyId,
+  baseUrl: propBaseUrl,
+  apiKeyId: propApiKeyId,
   uiMode = "modal",
   context,
   model,
@@ -63,6 +64,20 @@ export function AiTextarea({
     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,
@@ -248,6 +263,7 @@ export function AiTextarea({
           baseUrl={baseUrl}
           apiKey={apiKeyId}
           enableModelManagement={enableModelManagement}
+          showOnlyUserModels={true}
         />
       )}
       {Boolean(toastData) && (