@lastbrain/ai-ui-react 1.0.36 → 1.0.38

package/src/components/AiPromptPanel.tsx

@@ -31,6 +31,7 @@ export interface AiPromptPanelProps {
   children?: (props: AiPromptPanelRenderProps) => ReactNode;
   // Nouvelles props pour la gestion avancée des modèles
   enableModelManagement?: boolean;
+  modelCategory?: "text" | "image"; // Catégorie de modèles à gérer
   availableModels?: AIModel[];
   userModels?: string[];
   onModelToggle?: (modelId: string, isActive: boolean) => Promise<void>;
@@ -80,7 +81,8 @@ function AiPromptPanelInternal({
   models = [],
   sourceText,
   children,
-  enableModelManagement = false,
+  enableModelManagement = true,
+  modelCategory = "text",
   availableModels = [],
   userModels = [],
   onModelToggle,
@@ -107,6 +109,7 @@ function AiPromptPanelInternal({
   const [showAllModels, setShowAllModels] = useState(false);
   const [isModelManagementOpen, setIsModelManagementOpen] = useState(false);
   const [loadingModels, setLoadingModels] = useState<string[]>([]);
+  const [modelSearchQuery, setModelSearchQuery] = useState("");
 
   const {
     prompts,
@@ -119,7 +122,7 @@ function AiPromptPanelInternal({
   const autoModelManagement = useModelManagement({
     apiKey,
     baseUrl,
-    category: "text", // Par défaut pour AiPromptPanel
+    category: modelCategory, // Utiliser la catégorie spécifiée
     autoFetch:
       enableModelManagement &&
       models.length === 0 &&
@@ -173,27 +176,37 @@ function AiPromptPanelInternal({
       }));
     }
 
-    const textModels = effectiveAvailableModels.filter(
-      (m) => m.category === "text"
+    const categoryModels = effectiveAvailableModels.filter(
+      (m) => m.category === modelCategory
     );
 
     if (showAllModels) {
-      return textModels;
+      return categoryModels;
     } else {
-      return textModels.filter((m) => effectiveUserModels.includes(m.id));
+      return categoryModels.filter((m) => effectiveUserModels.includes(m.id));
     }
   };
 
   // Fetch prompts when modal opens
   useEffect(() => {
-    if (isOpen && models.length > 0) {
-      const activeModelId = selectedModel || models[0]?.id;
-      const modelType = models.find((m) => m.id === activeModelId)?.type;
+    if (isOpen && (models.length > 0 || enableModelManagement)) {
+      // Déterminer le type de modèle à partir de modelCategory si enableModelManagement
+      const modelType = enableModelManagement
+        ? modelCategory
+        : models.find((m) => m.id === selectedModel)?.type || models[0]?.type;
+
       fetchPrompts({
         type: modelType === "image" ? "image" : "text",
       });
     }
-  }, [isOpen, selectedModel, models, fetchPrompts]);
+  }, [
+    isOpen,
+    selectedModel,
+    models,
+    fetchPrompts,
+    enableModelManagement,
+    modelCategory,
+  ]);
 
   const handleSubmit = async () => {
     const activeModelId = selectedModel || models[0]?.id;
@@ -354,6 +367,10 @@ function AiPromptPanelInternal({
           opacity: isClosing ? 0 : 1,
           transform: isClosing ? "translateY(12px)" : "translateY(0)",
           transition: "opacity 200ms ease, transform 200ms ease",
+          display: "flex",
+          flexDirection: "column",
+          maxHeight: "85vh",
+          overflow: "hidden",
         }}
       >
         {isGenerating && (
@@ -401,7 +418,17 @@ function AiPromptPanelInternal({
             </div>
           </div>
         )}
-        <div style={aiStyles.modalHeader}>
+        <div
+          style={{
+            ...aiStyles.modalHeader,
+            position: "sticky",
+            top: 0,
+            zIndex: 5,
+            background: "var(--ai-bg-primary, #1f2937)",
+            borderBottom: "1px solid var(--ai-border-primary, #374151)",
+            backdropFilter: "blur(8px)",
+          }}
+        >
           <h2 style={aiStyles.modalTitle}>
             {showPromptLibrary ? "Select a Prompt" : "AI Prompt Configuration"}
           </h2>
@@ -419,7 +446,13 @@ function AiPromptPanelInternal({
           </button>
         </div>
 
-        <div style={aiStyles.modalBody}>
+        <div
+          style={{
+            ...aiStyles.modalBody,
+            flex: 1,
+            overflow: "auto",
+          }}
+        >
           {!showPromptLibrary ? (
             <>
               {sourceText && (
@@ -464,66 +497,11 @@ function AiPromptPanelInternal({
                       <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>
-                        )}
+                      {effectiveAvailableModels.length > 0 && (
                         <button
                           onClick={() => setIsModelManagementOpen(true)}
                           style={{
-                            padding: "4px 8px",
+                            padding: "4px 12px",
                             fontSize: "12px",
                             color: "#8b5cf6",
                             background: "#8b5cf610",
@@ -533,7 +511,7 @@ function AiPromptPanelInternal({
                             transition: "all 0.2s",
                             display: "flex",
                             alignItems: "center",
-                            gap: "4px",
+                            gap: "6px",
                           }}
                           onMouseEnter={(e) => {
                             e.currentTarget.style.background = "#8b5cf620";
@@ -543,10 +521,36 @@ function AiPromptPanelInternal({
                           }}
                           title="Gérer les modèles"
                         >
-                          <Settings size={12} />
-                          Gérer
+                          <Settings size={14} />
+                          Gérer les modèles
+                          {effectiveAvailableModels.filter(
+                            (m) =>
+                              m.category === modelCategory &&
+                              !effectiveUserModels.includes(m.id)
+                          ).length > 0 && (
+                            <span
+                              style={{
+                                marginLeft: "2px",
+                                padding: "2px 6px",
+                                fontSize: "10px",
+                                background: "#8b5cf6",
+                                color: "white",
+                                borderRadius: "10px",
+                                fontWeight: "600",
+                              }}
+                            >
+                              +
+                              {
+                                effectiveAvailableModels.filter(
+                                  (m) =>
+                                    m.category === modelCategory &&
+                                    !effectiveUserModels.includes(m.id)
+                                ).length
+                              }
+                            </span>
+                          )}
                         </button>
-                      </div>
+                      )}
                     </div>
                     <select
                       id="model-select"
@@ -993,7 +997,17 @@ function AiPromptPanelInternal({
           )}
         </div>
 
-        <div style={aiStyles.modalFooter}>
+        <div
+          style={{
+            ...aiStyles.modalFooter,
+            position: "sticky",
+            bottom: 0,
+            zIndex: 5,
+            background: "var(--ai-bg-primary, #1f2937)",
+            borderTop: "1px solid var(--ai-border-primary, #374151)",
+            backdropFilter: "blur(8px)",
+          }}
+        >
           <button
             onClick={handleClose}
             onMouseEnter={() => setIsCancelHovered(true)}
@@ -1037,36 +1051,52 @@ function AiPromptPanelInternal({
           <div
             style={{
               ...aiStyles.modalOverlay,
-              backgroundColor: "rgba(0, 0, 0, 0.7)",
+              backgroundColor: "rgba(0, 0, 0, 0.75)",
+            }}
+            onClick={() => {
+              setIsModelManagementOpen(false);
+              setModelSearchQuery("");
             }}
-            onClick={() => setIsModelManagementOpen(false)}
           />
           <div
             style={{
               ...aiStyles.modalContent,
-              maxWidth: "600px",
-              maxHeight: "80vh",
-              overflow: "auto",
+              maxWidth: "700px",
+              maxHeight: "85vh",
+              overflow: "hidden",
+              display: "flex",
+              flexDirection: "column",
+              background: "var(--ai-bg-primary, #1f2937)",
+              boxShadow: "0 20px 40px rgba(0, 0, 0, 0.5)",
             }}
           >
             <div style={aiStyles.modalHeader}>
               <h2 style={aiStyles.modalTitle}>Gestion des modèles IA</h2>
               <button
                 style={aiStyles.modalCloseButton}
-                onClick={() => setIsModelManagementOpen(false)}
+                onClick={() => {
+                  setIsModelManagementOpen(false);
+                  setModelSearchQuery("");
+                }}
                 aria-label="Close"
               >
                 ×
               </button>
             </div>
 
-            <div style={aiStyles.modalBody}>
+            <div
+              style={{
+                ...aiStyles.modalBody,
+                flex: 1,
+                overflow: "auto",
+              }}
+            >
               <div style={{ marginBottom: "16px" }}>
                 <p
                   style={{
                     fontSize: "14px",
-                    color: "#6b7280",
-                    margin: "0 0 16px 0",
+                    color: "var(--ai-text-secondary, #6b7280)",
+                    margin: "0 0 8px 0",
                   }}
                 >
                   Activez ou désactivez les modèles selon vos besoins
@@ -1074,36 +1104,73 @@ function AiPromptPanelInternal({
                 <p
                   style={{
                     fontSize: "12px",
-                    color: "#9ca3af",
-                    margin: "0",
+                    color: "var(--ai-text-tertiary, #9ca3af)",
+                    margin: "0 0 16px 0",
                   }}
                 >
                   {
                     effectiveAvailableModels.filter(
-                      (m) => m.category === "text"
+                      (m) => m.category === modelCategory
                     ).length
                   }{" "}
                   modèles disponibles •{" "}
                   {
                     effectiveUserModels.filter((id) =>
                       effectiveAvailableModels.some(
-                        (m) => m.id === id && m.category === "text"
+                        (m) => m.id === id && m.category === modelCategory
                       )
                     ).length
                   }{" "}
                   activés
                 </p>
+                {/* Champ de recherche */}
+                <div
+                  style={{
+                    ...aiStyles.inputWrapper,
+                    marginBottom: "16px",
+                  }}
+                >
+                  <Search
+                    size={16}
+                    style={{
+                      position: "absolute",
+                      left: "12px",
+                      top: "50%",
+                      transform: "translateY(-50%)",
+                      color: "var(--ai-text-tertiary, #9ca3af)",
+                    }}
+                  />
+                  <input
+                    value={modelSearchQuery}
+                    onChange={(e) => setModelSearchQuery(e.target.value)}
+                    placeholder="Rechercher un modèle..."
+                    style={{
+                      ...aiStyles.input,
+                      padding: "10px 12px 10px 36px",
+                      background: "var(--ai-bg-secondary, #f9fafb)",
+                    }}
+                  />
+                </div>
               </div>
 
               <div
                 style={{
                   display: "flex",
                   flexDirection: "column",
-                  gap: "12px",
+                  gap: "8px",
                 }}
               >
                 {effectiveAvailableModels
-                  .filter((model) => model.category === "text")
+                  .filter((model) => {
+                    if (model.category !== modelCategory) return false;
+                    if (!modelSearchQuery.trim()) return true;
+                    const query = modelSearchQuery.toLowerCase();
+                    return (
+                      model.name.toLowerCase().includes(query) ||
+                      model.provider.toLowerCase().includes(query) ||
+                      model.description?.toLowerCase().includes(query)
+                    );
+                  })
                   .map((modelData) => {
                     const isActive = effectiveUserModels.includes(modelData.id);
                     const isLoading = loadingModels.includes(modelData.id);
@@ -1115,41 +1182,78 @@ function AiPromptPanelInternal({
                           display: "flex",
                           alignItems: "center",
                           justifyContent: "space-between",
-                          padding: "16px",
-                          border: "1px solid #e5e7eb",
-                          borderRadius: "8px",
-                          backgroundColor: isActive ? "#f0fdf4" : "#ffffff",
+                          padding: "16px 18px",
+                          border: "2px solid",
+                          borderColor: isActive
+                            ? "#10b981"
+                            : "var(--ai-border-primary, #374151)",
+                          borderRadius: "10px",
+                          backgroundColor: isActive
+                            ? "rgba(16, 185, 129, 0.08)"
+                            : "var(--ai-bg-secondary, rgba(31, 41, 55, 0.5))",
                           transition: "all 0.2s",
+                          cursor: "pointer",
+                          backdropFilter: "blur(8px)",
+                        }}
+                        onClick={() =>
+                          !isLoading &&
+                          handleModelToggle(modelData.id, !isActive)
+                        }
+                        onMouseEnter={(e) => {
+                          e.currentTarget.style.borderColor = isActive
+                            ? "#059669"
+                            : "#4b5563";
+                          e.currentTarget.style.transform = "translateY(-2px)";
+                          e.currentTarget.style.boxShadow = isActive
+                            ? "0 8px 16px rgba(16, 185, 129, 0.2)"
+                            : "0 8px 16px rgba(0, 0, 0, 0.15)";
+                        }}
+                        onMouseLeave={(e) => {
+                          e.currentTarget.style.borderColor = isActive
+                            ? "#10b981"
+                            : "var(--ai-border-primary, #374151)";
+                          e.currentTarget.style.transform = "translateY(0)";
+                          e.currentTarget.style.boxShadow = "none";
                         }}
                       >
                         <div
                           style={{
                             display: "flex",
                             alignItems: "center",
-                            gap: "12px",
+                            gap: "14px",
+                            flex: 1,
                           }}
                         >
+                          {/* Status indicator */}
                           <div
                             style={{
-                              width: "12px",
-                              height: "12px",
+                              width: "8px",
+                              height: "8px",
                               borderRadius: "50%",
-                              backgroundColor: isActive ? "#10b981" : "#d1d5db",
+                              backgroundColor: isActive ? "#10b981" : "#6b7280",
+                              boxShadow: isActive
+                                ? "0 0 8px rgba(16, 185, 129, 0.6)"
+                                : "none",
+                              transition: "all 0.3s",
                             }}
                           />
-                          <div>
+                          <div style={{ flex: 1 }}>
                             <div
                               style={{
                                 display: "flex",
                                 alignItems: "center",
-                                gap: "8px",
-                                marginBottom: "4px",
+                                gap: "10px",
+                                marginBottom: "6px",
                               }}
                             >
                               <span
                                 style={{
-                                  fontWeight: "500",
-                                  color: "#111827",
+                                  fontWeight: "600",
+                                  fontSize: "15px",
+                                  color: isActive
+                                    ? "#10b981"
+                                    : "var(--ai-text-primary, #f3f4f6)",
+                                  letterSpacing: "-0.01em",
                                 }}
                               >
                                 {modelData.name}
@@ -1157,132 +1261,168 @@ function AiPromptPanelInternal({
                               {modelData.isPro && (
                                 <span
                                   style={{
-                                    padding: "2px 8px",
-                                    fontSize: "11px",
+                                    padding: "3px 10px",
+                                    fontSize: "10px",
                                     backgroundColor: "#8b5cf6",
                                     color: "white",
                                     borderRadius: "12px",
-                                    fontWeight: "500",
+                                    fontWeight: "700",
+                                    textTransform: "uppercase",
+                                    letterSpacing: "0.05em",
+                                    boxShadow:
+                                      "0 2px 8px rgba(139, 92, 246, 0.3)",
                                   }}
                                 >
                                   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",
+                                fontSize: "13px",
+                                color: isActive
+                                  ? "#6ee7b7"
+                                  : "var(--ai-text-secondary, #d1d5db)",
+                                fontWeight: "500",
                               }}
                             >
-                              <span>Fournisseur: {modelData.provider}</span>
+                              <span
+                                style={{
+                                  display: "flex",
+                                  alignItems: "center",
+                                  gap: "6px",
+                                }}
+                              >
+                                <span
+                                  style={{
+                                    display: "inline-block",
+                                    width: "4px",
+                                    height: "4px",
+                                    borderRadius: "50%",
+                                    backgroundColor: "currentColor",
+                                  }}
+                                />
+                                {modelData.provider}
+                              </span>
                               {modelData.costPer1M && (
-                                <span>
-                                  Coût: ${modelData.costPer1M}/1M tokens
+                                <span
+                                  style={{
+                                    padding: "2px 8px",
+                                    background: isActive
+                                      ? "rgba(16, 185, 129, 0.15)"
+                                      : "rgba(107, 114, 128, 0.2)",
+                                    borderRadius: "6px",
+                                    fontSize: "12px",
+                                  }}
+                                >
+                                  ${modelData.costPer1M}/1M
                                 </span>
                               )}
                             </div>
                           </div>
                         </div>
-                        <button
-                          onClick={() =>
-                            handleModelToggle(modelData.id, !isActive)
-                          }
-                          disabled={isLoading}
+                        {/* Toggle Switch CSS amélioré */}
+                        <label
                           style={{
-                            padding: "8px 16px",
-                            fontSize: "13px",
-                            fontWeight: "500",
-                            borderRadius: "6px",
-                            border: "1px solid",
+                            position: "relative",
+                            display: "inline-block",
+                            width: "54px",
+                            height: "28px",
                             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";
-                              }
-                            }
+                            opacity: isLoading ? 0.5 : 1,
+                            flexShrink: 0,
                           }}
+                          onClick={(e) => e.stopPropagation()}
                         >
-                          {isLoading ? (
-                            <div
+                          <input
+                            type="checkbox"
+                            checked={isActive}
+                            disabled={isLoading}
+                            onChange={() =>
+                              handleModelToggle(modelData.id, !isActive)
+                            }
+                            style={{
+                              opacity: 0,
+                              width: 0,
+                              height: 0,
+                              position: "absolute",
+                            }}
+                          />
+                          <span
+                            style={{
+                              position: "absolute",
+                              cursor: isLoading ? "not-allowed" : "pointer",
+                              top: 0,
+                              left: 0,
+                              right: 0,
+                              bottom: 0,
+                              backgroundColor: isActive ? "#10b981" : "#4b5563",
+                              transition: "0.3s",
+                              borderRadius: "28px",
+                              boxShadow: isActive
+                                ? "0 0 12px rgba(16, 185, 129, 0.4), inset 0 1px 3px rgba(0, 0, 0, 0.2)"
+                                : "inset 0 1px 3px rgba(0, 0, 0, 0.3)",
+                              border: isActive
+                                ? "2px solid #059669"
+                                : "2px solid #374151",
+                            }}
+                          >
+                            <span
                               style={{
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                gap: "4px",
+                                position: "absolute",
+                                content: "",
+                                height: "22px",
+                                width: "22px",
+                                left: isActive ? "28px" : "2px",
+                                bottom: "2px",
+                                backgroundColor: "white",
+                                transition: "0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+                                borderRadius: "50%",
+                                boxShadow: isActive
+                                  ? "0 3px 8px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(16, 185, 129, 0.1)"
+                                  : "0 3px 8px rgba(0, 0, 0, 0.3)",
                               }}
-                            >
-                              <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>
+                            />
+                          </span>
+                        </label>
                       </div>
                     );
                   })}
+                {effectiveAvailableModels.filter((model) => {
+                  if (model.category !== modelCategory) return false;
+                  if (!modelSearchQuery.trim()) return true;
+                  const query = modelSearchQuery.toLowerCase();
+                  return (
+                    model.name.toLowerCase().includes(query) ||
+                    model.provider.toLowerCase().includes(query) ||
+                    model.description?.toLowerCase().includes(query)
+                  );
+                }).length === 0 && (
+                  <div
+                    style={{
+                      textAlign: "center",
+                      padding: "32px 16px",
+                      color: "var(--ai-text-tertiary, #9ca3af)",
+                      fontSize: "14px",
+                    }}
+                  >
+                    {modelSearchQuery.trim()
+                      ? "Aucun modèle ne correspond à votre recherche"
+                      : "Aucun modèle disponible"}
+                  </div>
+                )}
               </div>
             </div>
 
             <div style={aiStyles.modalFooter}>
               <button
-                onClick={() => setIsModelManagementOpen(false)}
+                onClick={() => {
+                  setIsModelManagementOpen(false);
+                  setModelSearchQuery("");
+                }}
                 style={{
                   ...aiStyles.button,
                   ...aiStyles.buttonSecondary,