@lastbrain/ai-ui-react 1.0.68 → 1.0.70

package/src/components/AiPromptPanel.tsx

@@ -7,6 +7,7 @@ import {
   useLayoutEffect,
   type ReactNode,
 } from "react";
+import { createPortal } from "react-dom";
 import { BookOpen, Search, Sparkles, Star, Tag, Settings } from "lucide-react";
 import type { ModelRef } from "@lastbrain/ai-ui-core";
 import type { UiMode } from "../types";
@@ -107,8 +108,6 @@ function AiPromptPanelInternal({
   const [prompt, setPrompt] = useState("");
   const [promptId, setPromptId] = useState<string | undefined>(undefined);
   const [isCloseHovered, setIsCloseHovered] = useState(false);
-  const [isCancelHovered, setIsCancelHovered] = useState(false);
-  const [isSubmitHovered, setIsSubmitHovered] = useState(false);
   const [promptFocused, setPromptFocused] = useState(false);
   const [modelFocused, setModelFocused] = useState(false);
   const [showPromptLibrary, setShowPromptLibrary] = useState(false);
@@ -116,6 +115,7 @@ function AiPromptPanelInternal({
   const [selectedTag, setSelectedTag] = useState<string | "all">("all");
   const [isGenerating, setIsGenerating] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
+  const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null);
   const promptRef = useRef<HTMLTextAreaElement>(null);
   const closeTimeoutRef = useRef<number | null>(null);
 
@@ -272,6 +272,10 @@ function AiPromptPanelInternal({
     };
   }, []);
 
+  useEffect(() => {
+    setPortalRoot(document.body);
+  }, []);
+
   useEffect(() => {
     if (!isOpen) {
       return;
@@ -280,7 +284,9 @@ function AiPromptPanelInternal({
       setSelectedModel("");
       return;
     }
-    const hasSelected = modelOptions.some((model) => model.id === selectedModel);
+    const hasSelected = modelOptions.some(
+      (model) => model.id === selectedModel
+    );
     if (!hasSelected) {
       setSelectedModel(modelOptions[0].id);
     }
@@ -380,15 +386,20 @@ function AiPromptPanelInternal({
     onModelToggle: handleModelToggle,
   };
 
+  if (!portalRoot) {
+    return null;
+  }
+
   if (children) {
-    return (
+    return createPortal(
       <div style={aiStyles.modal} onKeyDown={handleKeyDown}>
         {children(renderProps)}
-      </div>
+      </div>,
+      portalRoot
     );
   }
 
-  return (
+  return createPortal(
     <div style={aiStyles.modal} onKeyDown={handleKeyDown}>
       <div
         style={{
@@ -432,22 +443,23 @@ function AiPromptPanelInternal({
                 width: "64px",
                 height: "64px",
                 borderRadius: "999px",
-                border: "2px solid #8b5cf620",
-                borderTopColor: "#8b5cf6",
+                border:
+                  "2px solid color-mix(in srgb, var(--ai-primary) 20%, transparent)",
+                borderTopColor: "var(--ai-primary)",
                 animation: "ai-spin 1.1s linear infinite",
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                boxShadow: "0 12px 24px rgba(139, 92, 246, 0.15)",
+                boxShadow: "0 12px 24px var(--ai-glow)",
               }}
             >
-              <Sparkles size={20} color="#8b5cf6" />
+              <Sparkles size={20} color="var(--ai-primary)" />
             </div>
             <div
               style={{
                 fontSize: "13px",
                 fontWeight: 600,
-                color: "#6b7280",
+                color: "var(--ai-text-secondary)",
                 letterSpacing: "0.02em",
               }}
             >
@@ -536,25 +548,7 @@ function AiPromptPanelInternal({
                       {effectiveAvailableModels.length > 0 && (
                         <button
                           onClick={() => setIsModelManagementOpen(true)}
-                          style={{
-                            padding: "4px 12px",
-                            fontSize: "12px",
-                            color: "#8b5cf6",
-                            background: "#8b5cf610",
-                            border: "1px solid #8b5cf630",
-                            borderRadius: "6px",
-                            cursor: "pointer",
-                            transition: "all 0.2s",
-                            display: "flex",
-                            alignItems: "center",
-                            gap: "6px",
-                          }}
-                          onMouseEnter={(e) => {
-                            e.currentTarget.style.background = "#8b5cf620";
-                          }}
-                          onMouseLeave={(e) => {
-                            e.currentTarget.style.background = "#8b5cf610";
-                          }}
+                          className="ai-inline-btn"
                           title="Gérer les modèles"
                         >
                           <Settings size={14} />
@@ -569,7 +563,7 @@ function AiPromptPanelInternal({
                                 marginLeft: "2px",
                                 padding: "2px 6px",
                                 fontSize: "10px",
-                                background: "#8b5cf6",
+                                background: "var(--ai-primary)",
                                 color: "white",
                                 borderRadius: "10px",
                                 fontWeight: "600",
@@ -627,7 +621,7 @@ function AiPromptPanelInternal({
                       <div
                         style={{
                           fontSize: "11px",
-                          color: "#6b7280",
+                          color: "var(--ai-text-secondary)",
                           marginTop: "4px",
                         }}
                       >
@@ -678,7 +672,7 @@ function AiPromptPanelInternal({
                     Prompt
                     <span
                       style={{
-                        color: "#6b7280",
+                        color: "var(--ai-text-secondary)",
                         marginLeft: "4px",
                         fontSize: "12px",
                         fontWeight: 400,
@@ -690,25 +684,7 @@ function AiPromptPanelInternal({
                   {filteredPrompts.length > 0 && (
                     <button
                       onClick={() => setShowPromptLibrary(true)}
-                      style={{
-                        padding: "4px 12px",
-                        fontSize: "12px",
-                        color: "#8b5cf6",
-                        background: "#8b5cf610",
-                        border: "1px solid #8b5cf630",
-                        borderRadius: "6px",
-                        cursor: "pointer",
-                        transition: "all 0.2s",
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "6px",
-                      }}
-                      onMouseEnter={(e) => {
-                        e.currentTarget.style.background = "#8b5cf620";
-                      }}
-                      onMouseLeave={(e) => {
-                        e.currentTarget.style.background = "#8b5cf610";
-                      }}
+                      className="ai-inline-btn"
                     >
                       <BookOpen size={14} />
                       Browse Prompts ({filteredPrompts.length})
@@ -743,7 +719,7 @@ function AiPromptPanelInternal({
                 style={{
                   padding: "8px 0",
                   fontSize: "14px",
-                  color: "#8b5cf6",
+                  color: "var(--ai-primary)",
                   background: "transparent",
                   border: "none",
                   cursor: "pointer",
@@ -811,11 +787,11 @@ function AiPromptPanelInternal({
                         ...aiStyles.chip,
                         borderColor:
                           selectedTag === "all"
-                            ? "#8b5cf6"
+                            ? "var(--ai-primary)"
                             : (aiStyles.chip.border as string),
                         background:
                           selectedTag === "all"
-                            ? "#8b5cf620"
+                            ? "color-mix(in srgb, var(--ai-primary) 20%, transparent)"
                             : (aiStyles.chip.background as string),
                       }}
                     >
@@ -829,11 +805,11 @@ function AiPromptPanelInternal({
                           ...aiStyles.chip,
                           borderColor:
                             selectedTag === tag
-                              ? "#8b5cf6"
+                              ? "var(--ai-primary)"
                               : (aiStyles.chip.border as string),
                           background:
                             selectedTag === tag
-                              ? "#8b5cf620"
+                              ? "color-mix(in srgb, var(--ai-primary) 20%, transparent)"
                               : (aiStyles.chip.background as string),
                         }}
                       >
@@ -853,7 +829,7 @@ function AiPromptPanelInternal({
                   style={{
                     textAlign: "center",
                     padding: "40px 0",
-                    color: "#6b7280",
+                    color: "var(--ai-text-secondary)",
                   }}
                 >
                   No prompts available for this model type
@@ -873,7 +849,7 @@ function AiPromptPanelInternal({
                       <div
                         style={{
                           fontSize: "12px",
-                          color: "#6b7280",
+                          color: "var(--ai-text-secondary)",
                           fontWeight: 600,
                           textTransform: "uppercase",
                           marginBottom: "8px",
@@ -894,18 +870,21 @@ function AiPromptPanelInternal({
                             onClick={() => handleSelectPrompt(promptData)}
                             style={{
                               padding: "16px",
-                              border: `1px solid #e5e7eb`,
+                              border: `1px solid var(--ai-border)`,
                               borderRadius: "8px",
                               cursor: "pointer",
                               transition: "all 0.2s",
                             }}
                             onMouseEnter={(e) => {
-                              e.currentTarget.style.background = "#8b5cf610";
-                              e.currentTarget.style.borderColor = "#8b5cf6";
+                              e.currentTarget.style.background =
+                                "color-mix(in srgb, var(--ai-primary) 10%, transparent)";
+                              e.currentTarget.style.borderColor =
+                                "var(--ai-primary)";
                             }}
                             onMouseLeave={(e) => {
                               e.currentTarget.style.background = "transparent";
-                              e.currentTarget.style.borderColor = "#e5e7eb";
+                              e.currentTarget.style.borderColor =
+                                "var(--ai-border)";
                             }}
                           >
                             <div
@@ -915,16 +894,16 @@ function AiPromptPanelInternal({
                                 gap: "8px",
                                 fontWeight: 600,
                                 marginBottom: "4px",
-                                color: "#9780a5",
+                                color: "var(--ai-text)",
                               }}
                             >
-                              <Star size={14} color="#8b5cf6" />
+                              <Star size={14} color="var(--ai-primary)" />
                               {promptData.title}
                             </div>
                             <div
                               style={{
                                 fontSize: "13px",
-                                color: "#6b7280",
+                                color: "var(--ai-text-secondary)",
                                 overflow: "hidden",
                                 textOverflow: "ellipsis",
                                 display: "-webkit-box",
@@ -939,7 +918,7 @@ function AiPromptPanelInternal({
                                 style={{
                                   marginTop: "8px",
                                   fontSize: "11px",
-                                  color: "#8b5cf6",
+                                  color: "var(--ai-primary)",
                                 }}
                               >
                                 {String(promptData.category)}
@@ -956,7 +935,7 @@ function AiPromptPanelInternal({
                       <div
                         style={{
                           fontSize: "12px",
-                          color: "#6b7280",
+                          color: "var(--ai-text-secondary)",
                           fontWeight: 600,
                           textTransform: "uppercase",
                           marginTop:
@@ -979,25 +958,28 @@ function AiPromptPanelInternal({
                             onClick={() => handleSelectPrompt(promptData)}
                             style={{
                               padding: "16px",
-                              border: `1px solid #e5e7eb`,
+                              border: `1px solid var(--ai-border)`,
                               borderRadius: "8px",
                               cursor: "pointer",
                               transition: "all 0.2s",
                             }}
                             onMouseEnter={(e) => {
-                              e.currentTarget.style.background = "#8b5cf610";
-                              e.currentTarget.style.borderColor = "#8b5cf6";
+                              e.currentTarget.style.background =
+                                "color-mix(in srgb, var(--ai-primary) 10%, transparent)";
+                              e.currentTarget.style.borderColor =
+                                "var(--ai-primary)";
                             }}
                             onMouseLeave={(e) => {
                               e.currentTarget.style.background = "transparent";
-                              e.currentTarget.style.borderColor = "#e5e7eb";
+                              e.currentTarget.style.borderColor =
+                                "var(--ai-border)";
                             }}
                           >
                             <div
                               style={{
                                 fontWeight: 600,
                                 marginBottom: "4px",
-                                color: "#9780a5",
+                                color: "var(--ai-text)",
                               }}
                             >
                               {promptData.title}
@@ -1005,7 +987,7 @@ function AiPromptPanelInternal({
                             <div
                               style={{
                                 fontSize: "13px",
-                                color: "#6b7280",
+                                color: "var(--ai-text-secondary)",
                                 overflow: "hidden",
                                 textOverflow: "ellipsis",
                                 display: "-webkit-box",
@@ -1020,7 +1002,7 @@ function AiPromptPanelInternal({
                                 style={{
                                   marginTop: "8px",
                                   fontSize: "11px",
-                                  color: "#8b5cf6",
+                                  color: "var(--ai-primary)",
                                 }}
                               >
                                 {String(promptData.category)}
@@ -1047,32 +1029,13 @@ function AiPromptPanelInternal({
             backdropFilter: "blur(8px)",
           }}
         >
-          <button
-            onClick={handleClose}
-            onMouseEnter={() => setIsCancelHovered(true)}
-            onMouseLeave={() => setIsCancelHovered(false)}
-            style={{
-              ...aiStyles.button,
-              ...aiStyles.buttonSecondary,
-              ...(isCancelHovered && aiStyles.buttonSecondaryHover),
-            }}
-          >
+          <button onClick={handleClose} className="ai-btn ai-btn--ghost">
             Cancel
           </button>
           <button
             onClick={handleSubmit}
             disabled={!selectedModel || !prompt.trim()}
-            onMouseEnter={() => setIsSubmitHovered(true)}
-            onMouseLeave={() => setIsSubmitHovered(false)}
-            style={{
-              ...aiStyles.button,
-              ...(isSubmitHovered &&
-                !(!selectedModel || !prompt.trim()) &&
-                aiStyles.buttonHover),
-              ...(!selectedModel || !prompt.trim()
-                ? aiStyles.buttonDisabled
-                : {}),
-            }}
+            className="ai-btn ai-btn--primary"
           >
             {sourceText ? "Transform with AI" : "Generate with AI"}
           </button>
@@ -1084,13 +1047,13 @@ function AiPromptPanelInternal({
         <div
           style={{
             ...aiStyles.modal,
-            zIndex: 1001, // Au-dessus du modal principal
+            zIndex: 2147483646, // Au-dessus du modal principal
           }}
         >
           <div
             style={{
               ...aiStyles.modalOverlay,
-              backgroundColor: "rgba(0, 0, 0, 0.75)",
+              backgroundColor: "var(--ai-overlay)",
             }}
             onClick={() => {
               setIsModelManagementOpen(false);
@@ -1105,8 +1068,7 @@ function AiPromptPanelInternal({
               overflow: "hidden",
               display: "flex",
               flexDirection: "column",
-
-              boxShadow: "0 20px 40px rgba(0, 0, 0, 0.5)",
+              boxShadow: "var(--ai-shadow-lg)",
             }}
           >
             <div style={aiStyles.modalHeader}>
@@ -1134,7 +1096,7 @@ function AiPromptPanelInternal({
                 <p
                   style={{
                     fontSize: "14px",
-                    color: "var(--ai-text-secondary, #6b7280)",
+                    color: "var(--ai-muted)",
                     margin: "0 0 8px 0",
                   }}
                 >
@@ -1143,7 +1105,7 @@ function AiPromptPanelInternal({
                 <p
                   style={{
                     fontSize: "12px",
-                    color: "var(--ai-text-tertiary, #9ca3af)",
+                    color: "var(--ai-text-tertiary)",
                     margin: "0 0 16px 0",
                   }}
                 >
@@ -1176,7 +1138,7 @@ function AiPromptPanelInternal({
                       left: "12px",
                       top: "50%",
                       transform: "translateY(-50%)",
-                      color: "var(--ai-text-tertiary, #9ca3af)",
+                      color: "var(--ai-text-tertiary)",
                     }}
                   />
                   <input
@@ -1186,19 +1148,13 @@ function AiPromptPanelInternal({
                     style={{
                       ...aiStyles.input,
                       padding: "10px 12px 10px 36px",
-                      background: "var(--ai-bg-secondary, #f9fafb)",
+                      background: "var(--ai-bg)",
                     }}
                   />
                 </div>
               </div>
 
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: "8px",
-                }}
-              >
+              <div className="ai-model-mgmt-list">
                 {effectiveAvailableModels
                   .filter((model) => {
                     if (model.category !== modelCategory) return false;
@@ -1217,116 +1173,26 @@ function AiPromptPanelInternal({
                     return (
                       <div
                         key={modelData.id}
-                        style={{
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "space-between",
-                          padding: "16px 18px",
-                          // border: "2px solid",
-                          // borderColor: isActive
-                          //   ? "#10b981"
-                          //   : "var(--ai-border-primary, #374151)",
-                          borderRadius: "10px",
-                          backgroundColor: isActive
-                            ? "rgba(16, 185, 129, 0.03)"
-                            : "var(--ai-bg-secondary, rgba(31, 41, 55, 0.2))",
-                          transition: "all 0.2s",
-                          cursor: "pointer",
-                          backdropFilter: "blur(8px)",
-                        }}
+                        className={`ai-model-item ${isActive ? "ai-model-item--active" : ""}`}
                         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: "14px",
-                            flex: 1,
-                          }}
-                        >
-                          {/* Status indicator */}
+                        <div className="ai-model-item-main">
                           <div
-                            style={{
-                              width: "8px",
-                              height: "8px",
-                              borderRadius: "50%",
-                              backgroundColor: isActive ? "#10b981" : "#6b7280",
-                              boxShadow: isActive
-                                ? "0 0 8px rgba(16, 185, 129, 0.6)"
-                                : "none",
-                              transition: "all 0.3s",
-                            }}
+                            className={`ai-model-item-dot ${isActive ? "ai-model-item-dot--active" : ""}`}
                           />
                           <div style={{ flex: 1 }}>
-                            <div
-                              style={{
-                                display: "flex",
-                                alignItems: "center",
-                                gap: "10px",
-                                marginBottom: "6px",
-                              }}
-                            >
-                              <span
-                                style={{
-                                  fontWeight: "600",
-                                  fontSize: "15px",
-                                  color: "var(--ai-text-secondary, #6b7280)",
-
-                                  letterSpacing: "-0.01em",
-                                }}
-                              >
-                                {modelData.name}
-                              </span>
+                            <div className="ai-model-item-title">
+                              <span>{modelData.name}</span>
                               {modelData.isPro && (
-                                <span
-                                  style={{
-                                    padding: "3px 10px",
-                                    fontSize: "10px",
-                                    backgroundColor: "#8b5cf6",
-                                    color: "white",
-                                    borderRadius: "12px",
-                                    fontWeight: "700",
-                                    textTransform: "uppercase",
-                                    letterSpacing: "0.05em",
-                                    boxShadow:
-                                      "0 2px 8px rgba(139, 92, 246, 0.3)",
-                                  }}
-                                >
+                                <span className="ai-pill ai-pill--pro">
                                   PRO
                                 </span>
                               )}
                             </div>
-                            <div
-                              style={{
-                                display: "flex",
-                                alignItems: "center",
-                                gap: "16px",
-                                fontSize: "13px",
-                                color: isActive
-                                  ? "#6ee7b7"
-                                  : "var(--ai-text-secondary, #d1d5db)",
-                                fontWeight: "500",
-                              }}
-                            >
+                            <div className="ai-model-item-meta">
                               <span
                                 style={{
                                   display: "flex",
@@ -1346,23 +1212,13 @@ function AiPromptPanelInternal({
                                 {modelData.provider}
                               </span>
                               {modelData.costPer1M && (
-                                <span
-                                  style={{
-                                    padding: "2px 8px",
-                                    background: isActive
-                                      ? "rgba(16, 185, 129, 0.15)"
-                                      : "rgba(107, 114, 128, 0.2)",
-                                    borderRadius: "6px",
-                                    fontSize: "12px",
-                                  }}
-                                >
+                                <span className="ai-pill ai-pill--cost">
                                   ${modelData.costPer1M}/1M
                                 </span>
                               )}
                             </div>
                           </div>
                         </div>
-                        {/* Toggle Switch CSS amélioré */}
                         <label
                           style={{
                             position: "relative",
@@ -1390,41 +1246,8 @@ function AiPromptPanelInternal({
                             }}
                           />
                           <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={{
-                                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)",
-                              }}
-                            />
-                          </span>
+                            className={`ai-toggle ${isActive ? "ai-toggle--active" : ""}`}
+                          />
                         </label>
                       </div>
                     );
@@ -1443,7 +1266,7 @@ function AiPromptPanelInternal({
                     style={{
                       textAlign: "center",
                       padding: "32px 16px",
-                      color: "var(--ai-text-tertiary, #9ca3af)",
+                      color: "var(--ai-text-tertiary)",
                       fontSize: "14px",
                     }}
                   >
@@ -1461,10 +1284,7 @@ function AiPromptPanelInternal({
                   setIsModelManagementOpen(false);
                   setModelSearchQuery("");
                 }}
-                style={{
-                  ...aiStyles.button,
-                  ...aiStyles.buttonSecondary,
-                }}
+                className="ai-btn ai-btn--ghost"
               >
                 Fermer
               </button>
@@ -1472,6 +1292,7 @@ function AiPromptPanelInternal({
           </div>
         </div>
       )}
-    </div>
+    </div>,
+    portalRoot
   );
 }