@lastbrain/ai-ui-react 1.0.11 → 1.0.14

package/src/components/AiPromptPanel.tsx

@@ -7,7 +7,7 @@ import {
   useLayoutEffect,
   type ReactNode,
 } from "react";
-import { BookOpen, Search, Sparkles, Star, Tag } from "lucide-react";
+import { BookOpen, Search, Sparkles, Star, Tag, Settings } from "lucide-react";
 import type { ModelRef } from "@lastbrain/ai-ui-core";
 import type { UiMode } from "../types";
 import { aiStyles } from "../styles/inline";
@@ -16,6 +16,7 @@ import {
   type Prompt,
   type PublicPrompt,
 } from "../hooks/usePrompts";
+import { useModelManagement, type AIModel } from "../hooks/useModelManagement";
 
 export interface AiPromptPanelProps {
   isOpen: boolean;
@@ -25,6 +26,13 @@ export interface AiPromptPanelProps {
   models?: ModelRef[];
   sourceText?: string; // Current text from input/textarea
   children?: (props: AiPromptPanelRenderProps) => ReactNode;
+  // Nouvelles props pour la gestion avancée des modèles
+  enableModelManagement?: boolean;
+  availableModels?: AIModel[];
+  userModels?: string[];
+  onModelToggle?: (modelId: string, isActive: boolean) => Promise<void>;
+  apiKey?: string;
+  baseUrl?: string;
 }
 
 export interface AiPromptPanelRenderProps {
@@ -36,6 +44,13 @@ export interface AiPromptPanelRenderProps {
   sourceText?: string;
   handleSubmit: () => void;
   handleClose: () => void;
+  // Nouvelles props pour la gestion des modèles
+  enableModelManagement?: boolean;
+  availableModels?: AIModel[];
+  userModels?: string[];
+  showAllModels?: boolean;
+  setShowAllModels?: (show: boolean) => void;
+  onModelToggle?: (modelId: string, isActive: boolean) => Promise<void>;
 }
 
 export function AiPromptPanel({
@@ -46,6 +61,12 @@ export function AiPromptPanel({
   models = [],
   sourceText,
   children,
+  enableModelManagement = false,
+  availableModels = [],
+  userModels = [],
+  onModelToggle,
+  apiKey,
+  baseUrl,
 }: AiPromptPanelProps) {
   const [selectedModel, setSelectedModel] = useState("");
   const [prompt, setPrompt] = useState("");
@@ -63,6 +84,11 @@ export function AiPromptPanel({
   const promptRef = useRef<HTMLTextAreaElement>(null);
   const closeTimeoutRef = useRef<number | null>(null);
 
+  // États pour la gestion des modèles
+  const [showAllModels, setShowAllModels] = useState(false);
+  const [isModelManagementOpen, setIsModelManagementOpen] = useState(false);
+  const [loadingModels, setLoadingModels] = useState<string[]>([]);
+
   const {
     prompts,
     loading: promptsLoading,
@@ -70,6 +96,60 @@ export function AiPromptPanel({
     incrementStat,
   } = usePrompts();
 
+  // Hook de gestion des modèles (automatique si enableModelManagement et pas de props externes)
+  const autoModelManagement = useModelManagement({
+    apiKey,
+    baseUrl,
+    category: "text", // Par défaut pour AiPromptPanel
+    autoFetch:
+      enableModelManagement && availableModels.length === 0 && !!apiKey,
+  });
+
+  // Utiliser soit les props externes soit la gestion automatique
+  const effectiveAvailableModels =
+    availableModels.length > 0
+      ? availableModels
+      : autoModelManagement.availableModels;
+  const effectiveUserModels =
+    userModels.length > 0 ? userModels : autoModelManagement.userModels;
+  const effectiveToggleModel = onModelToggle || autoModelManagement.toggleModel;
+
+  // Gestion des modèles
+  const handleModelToggle = async (modelId: string, isActive: boolean) => {
+    if (!effectiveToggleModel) return;
+
+    setLoadingModels((prev) => [...prev, modelId]);
+    try {
+      await effectiveToggleModel(modelId, isActive);
+    } catch (error) {
+      console.error("Erreur lors du changement de modèle:", error);
+    } finally {
+      setLoadingModels((prev) => prev.filter((id) => id !== modelId));
+    }
+  };
+
+  const getFilteredModels = () => {
+    if (!enableModelManagement || effectiveAvailableModels.length === 0) {
+      // Mode classique : transformer les ModelRef en AIModel
+      return models.map((m) => ({
+        id: m.id,
+        name: m.name,
+        category: m.type === "image" ? ("image" as const) : ("text" as const),
+        provider: "Unknown",
+      }));
+    }
+
+    const textModels = effectiveAvailableModels.filter(
+      (m) => m.category === "text"
+    );
+
+    if (showAllModels) {
+      return textModels;
+    } else {
+      return textModels.filter((m) => effectiveUserModels.includes(m.id));
+    }
+  };
+
   // Fetch prompts when modal opens
   useEffect(() => {
     if (isOpen && models.length > 0) {
@@ -207,6 +287,13 @@ export function AiPromptPanel({
     sourceText,
     handleSubmit,
     handleClose,
+    // Nouvelles props pour la gestion des modèles
+    enableModelManagement,
+    availableModels: effectiveAvailableModels,
+    userModels: effectiveUserModels,
+    showAllModels,
+    setShowAllModels,
+    onModelToggle: handleModelToggle,
   };
 
   if (children) {
@@ -329,29 +416,173 @@ export function AiPromptPanel({
               )}
 
               <div style={aiStyles.modalInputGroup}>
-                <label htmlFor="model-select" style={aiStyles.modalLabel}>
-                  AI Model
-                </label>
-                <select
-                  id="model-select"
-                  value={activeModelId}
-                  onChange={(e) => setSelectedModel(e.target.value)}
-                  onFocus={() => setModelFocused(true)}
-                  onBlur={() => setModelFocused(false)}
-                  style={{
-                    ...aiStyles.select,
-                    ...(modelFocused && aiStyles.selectFocus),
-                  }}
-                >
-                  {models.length === 0 && (
-                    <option value="">Loading models...</option>
-                  )}
-                  {models.map((model) => (
-                    <option key={model.id} value={model.id}>
-                      {model.name}
-                    </option>
-                  ))}
-                </select>
+                {enableModelManagement ? (
+                  // Version avancée avec gestion des modèles
+                  <div style={{ marginBottom: "16px" }}>
+                    <div
+                      style={{
+                        display: "flex",
+                        justifyContent: "space-between",
+                        alignItems: "center",
+                        marginBottom: "8px",
+                      }}
+                    >
+                      <label htmlFor="model-select" style={aiStyles.modalLabel}>
+                        AI Model
+                      </label>
+                      <div
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "8px",
+                        }}
+                      >
+                        {effectiveAvailableModels.length > 0 && (
+                          <button
+                            onClick={() => setShowAllModels(!showAllModels)}
+                            style={{
+                              padding: "4px 8px",
+                              fontSize: "12px",
+                              color: "#8b5cf6",
+                              background: "#8b5cf610",
+                              border: "1px solid #8b5cf630",
+                              borderRadius: "6px",
+                              cursor: "pointer",
+                              transition: "all 0.2s",
+                            }}
+                            onMouseEnter={(e) => {
+                              e.currentTarget.style.background = "#8b5cf620";
+                            }}
+                            onMouseLeave={(e) => {
+                              e.currentTarget.style.background = "#8b5cf610";
+                            }}
+                          >
+                            {showAllModels ? "Mes modèles" : "Tous les modèles"}
+                            {!showAllModels &&
+                              effectiveAvailableModels.filter(
+                                (m) =>
+                                  m.category === "text" &&
+                                  !effectiveUserModels.includes(m.id)
+                              ).length > 0 && (
+                                <span
+                                  style={{
+                                    marginLeft: "4px",
+                                    padding: "2px 6px",
+                                    fontSize: "10px",
+                                    background: "#8b5cf6",
+                                    color: "white",
+                                    borderRadius: "10px",
+                                  }}
+                                >
+                                  +
+                                  {
+                                    effectiveAvailableModels.filter(
+                                      (m) =>
+                                        m.category === "text" &&
+                                        !effectiveUserModels.includes(m.id)
+                                    ).length
+                                  }
+                                </span>
+                              )}
+                          </button>
+                        )}
+                        <button
+                          onClick={() => setIsModelManagementOpen(true)}
+                          style={{
+                            padding: "4px 8px",
+                            fontSize: "12px",
+                            color: "#8b5cf6",
+                            background: "#8b5cf610",
+                            border: "1px solid #8b5cf630",
+                            borderRadius: "6px",
+                            cursor: "pointer",
+                            transition: "all 0.2s",
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "4px",
+                          }}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.background = "#8b5cf620";
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.background = "#8b5cf610";
+                          }}
+                        >
+                          <Settings size={12} />
+                        </button>
+                      </div>
+                    </div>
+                    <select
+                      id="model-select"
+                      value={activeModelId}
+                      onChange={(e) => setSelectedModel(e.target.value)}
+                      onFocus={() => setModelFocused(true)}
+                      onBlur={() => setModelFocused(false)}
+                      style={{
+                        ...aiStyles.select,
+                        ...(modelFocused && aiStyles.selectFocus),
+                      }}
+                    >
+                      {getFilteredModels().length === 0 && (
+                        <option value="">Loading models...</option>
+                      )}
+                      {getFilteredModels().map((model) => {
+                        const isActive = effectiveUserModels.includes(model.id);
+                        return (
+                          <option
+                            key={model.id}
+                            value={model.id}
+                            style={{
+                              opacity: showAllModels && !isActive ? 0.6 : 1,
+                            }}
+                          >
+                            {model.name}
+                            {showAllModels && isActive && " ✓"}
+                            {showAllModels && !isActive && " (Désactivé)"}
+                          </option>
+                        );
+                      })}
+                    </select>
+                    {showAllModels && onModelToggle && (
+                      <div
+                        style={{
+                          fontSize: "11px",
+                          color: "#6b7280",
+                          marginTop: "4px",
+                        }}
+                      >
+                        💡 Cliquez sur "⚙️" pour activer/désactiver les modèles
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  // Version classique
+                  <>
+                    <label htmlFor="model-select" style={aiStyles.modalLabel}>
+                      AI Model
+                    </label>
+                    <select
+                      id="model-select"
+                      value={activeModelId}
+                      onChange={(e) => setSelectedModel(e.target.value)}
+                      onFocus={() => setModelFocused(true)}
+                      onBlur={() => setModelFocused(false)}
+                      style={{
+                        ...aiStyles.select,
+                        ...(modelFocused && aiStyles.selectFocus),
+                      }}
+                    >
+                      {models.length === 0 && (
+                        <option value="">Loading models...</option>
+                      )}
+                      {models.map((model) => (
+                        <option key={model.id} value={model.id}>
+                          {model.name}
+                        </option>
+                      ))}
+                    </select>
+                  </>
+                )}
               </div>
 
               <div style={aiStyles.modalInputGroup}>
@@ -758,6 +989,253 @@ export function AiPromptPanel({
           </button>
         </div>
       </div>
+
+      {/* Modal de gestion des modèles */}
+      {enableModelManagement && isModelManagementOpen && (
+        <div
+          style={{
+            ...aiStyles.modal,
+            zIndex: 1001, // Au-dessus du modal principal
+          }}
+        >
+          <div
+            style={{
+              ...aiStyles.modalOverlay,
+              backgroundColor: "rgba(0, 0, 0, 0.7)",
+            }}
+            onClick={() => setIsModelManagementOpen(false)}
+          />
+          <div
+            style={{
+              ...aiStyles.modalContent,
+              maxWidth: "600px",
+              maxHeight: "80vh",
+              overflow: "auto",
+            }}
+          >
+            <div style={aiStyles.modalHeader}>
+              <h2 style={aiStyles.modalTitle}>Gestion des modèles IA</h2>
+              <button
+                style={aiStyles.modalCloseButton}
+                onClick={() => setIsModelManagementOpen(false)}
+                aria-label="Close"
+              >
+                ×
+              </button>
+            </div>
+
+            <div style={aiStyles.modalBody}>
+              <div style={{ marginBottom: "16px" }}>
+                <p
+                  style={{
+                    fontSize: "14px",
+                    color: "#6b7280",
+                    margin: "0 0 16px 0",
+                  }}
+                >
+                  Activez ou désactivez les modèles selon vos besoins
+                </p>
+              </div>
+
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "12px",
+                }}
+              >
+                {effectiveAvailableModels
+                  .filter((model) => model.category === "text")
+                  .map((modelData) => {
+                    const isActive = effectiveUserModels.includes(modelData.id);
+                    const isLoading = loadingModels.includes(modelData.id);
+
+                    return (
+                      <div
+                        key={modelData.id}
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "space-between",
+                          padding: "16px",
+                          border: "1px solid #e5e7eb",
+                          borderRadius: "8px",
+                          backgroundColor: isActive ? "#f0fdf4" : "#ffffff",
+                          transition: "all 0.2s",
+                        }}
+                      >
+                        <div
+                          style={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "12px",
+                          }}
+                        >
+                          <div
+                            style={{
+                              width: "12px",
+                              height: "12px",
+                              borderRadius: "50%",
+                              backgroundColor: isActive ? "#10b981" : "#d1d5db",
+                            }}
+                          />
+                          <div>
+                            <div
+                              style={{
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "8px",
+                                marginBottom: "4px",
+                              }}
+                            >
+                              <span
+                                style={{
+                                  fontWeight: "500",
+                                  color: "#111827",
+                                }}
+                              >
+                                {modelData.name}
+                              </span>
+                              {modelData.isPro && (
+                                <span
+                                  style={{
+                                    padding: "2px 8px",
+                                    fontSize: "11px",
+                                    backgroundColor: "#8b5cf6",
+                                    color: "white",
+                                    borderRadius: "12px",
+                                    fontWeight: "500",
+                                  }}
+                                >
+                                  PRO
+                                </span>
+                              )}
+                            </div>
+                            {modelData.description && (
+                              <p
+                                style={{
+                                  fontSize: "13px",
+                                  color: "#6b7280",
+                                  margin: "0 0 4px 0",
+                                }}
+                              >
+                                {modelData.description}
+                              </p>
+                            )}
+                            <div
+                              style={{
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "16px",
+                                fontSize: "12px",
+                                color: "#9ca3af",
+                              }}
+                            >
+                              <span>Fournisseur: {modelData.provider}</span>
+                              {modelData.costPer1M && (
+                                <span>
+                                  Coût: ${modelData.costPer1M}/1M tokens
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                        <button
+                          onClick={() =>
+                            handleModelToggle(modelData.id, !isActive)
+                          }
+                          disabled={isLoading}
+                          style={{
+                            padding: "8px 16px",
+                            fontSize: "13px",
+                            fontWeight: "500",
+                            borderRadius: "6px",
+                            border: "1px solid",
+                            cursor: isLoading ? "not-allowed" : "pointer",
+                            transition: "all 0.2s",
+                            minWidth: "80px",
+                            ...(isActive
+                              ? {
+                                  backgroundColor: "#fef2f2",
+                                  borderColor: "#fecaca",
+                                  color: "#dc2626",
+                                }
+                              : {
+                                  backgroundColor: "#f0fdf4",
+                                  borderColor: "#bbf7d0",
+                                  color: "#16a34a",
+                                }),
+                            opacity: isLoading ? 0.6 : 1,
+                          }}
+                          onMouseEnter={(e) => {
+                            if (!isLoading) {
+                              if (isActive) {
+                                e.currentTarget.style.backgroundColor =
+                                  "#fee2e2";
+                              } else {
+                                e.currentTarget.style.backgroundColor =
+                                  "#dcfce7";
+                              }
+                            }
+                          }}
+                          onMouseLeave={(e) => {
+                            if (!isLoading) {
+                              if (isActive) {
+                                e.currentTarget.style.backgroundColor =
+                                  "#fef2f2";
+                              } else {
+                                e.currentTarget.style.backgroundColor =
+                                  "#f0fdf4";
+                              }
+                            }
+                          }}
+                        >
+                          {isLoading ? (
+                            <div
+                              style={{
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                gap: "4px",
+                              }}
+                            >
+                              <div
+                                style={{
+                                  width: "12px",
+                                  height: "12px",
+                                  border: "2px solid currentColor",
+                                  borderTop: "2px solid transparent",
+                                  borderRadius: "50%",
+                                  animation: "ai-spin 1s linear infinite",
+                                }}
+                              />
+                            </div>
+                          ) : isActive ? (
+                            "Désactiver"
+                          ) : (
+                            "Activer"
+                          )}
+                        </button>
+                      </div>
+                    );
+                  })}
+              </div>
+            </div>
+
+            <div style={aiStyles.modalFooter}>
+              <button
+                onClick={() => setIsModelManagementOpen(false)}
+                style={{
+                  ...aiStyles.button,
+                  ...aiStyles.buttonSecondary,
+                }}
+              >
+                Fermer
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

package/src/components/AiSettingsButton.tsx

@@ -66,10 +66,12 @@ export function AiSettingsButton({
                         <span>Tokens:</span>
                         <span>{status.balance?.total || 0}</span>
                       </div>
-                      {status.storage?.total_mb !== undefined && (
+                      {status.storage?.allocated_mb !== undefined && (
                         <div data-ai-status-item>
                           <span>Storage:</span>
-                          <span>{status.storage.total_mb.toFixed(2)} MB</span>
+                          <span>
+                            {status.storage.allocated_mb.toFixed(2)} MB
+                          </span>
                         </div>
                       )}
                     </div>