next-ai-editor 0.2.1 → 0.2.3

package/dist/{AIEditorProvider-CKA2K_g2.js → AIEditorProvider-DWId5Qmv.js}

@@ -4,7 +4,7 @@ import { useRef, useEffect, useState, useCallback, createContext } from "react";
 import { c as cleanPath, s as shouldSkipPath } from "./path-utils-Bai2xKx9.js";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
-import { FileCode, Box, Type } from "lucide-react";
+import { FileCode, Box, Type, X, Pencil } from "lucide-react";
 function getFiberFromElement(element) {
   const key = Object.keys(element).find(
     (k) => k.startsWith("__reactFiber$") || k.startsWith("__reactInternalInstance$")
@@ -858,6 +858,7 @@ function ChatPanel({
   const [threadId] = useState(() => `thread-${Date.now()}`);
   const textareaRef = useRef(null);
   const [contextRanges, setContextRanges] = useState([]);
+  const [isMessagesCollapsed, setMessagesCollapsed] = useState(false);
   const { messages, isStreaming, sendMessage } = useChatStream({
     threadId
   });
@@ -918,37 +919,25 @@ function ChatPanel({
     return null;
   }
   return /* @__PURE__ */ jsxs("div", { className: `chat-panel ai-editor-ui ${theme}`, children: [
-    commentMessages.length > 0 && /* @__PURE__ */ jsx("div", { className: "chat-panel-messages", children: /* @__PURE__ */ jsx(MessageList, { messages: commentMessages, isStreaming }) }),
+    commentMessages.length > 0 && /* @__PURE__ */ jsxs("div", { className: `chat-panel-messages-container ${isMessagesCollapsed ? "collapsed" : "expanded"}`, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "chat-panel-messages-header",
+          onClick: () => setMessagesCollapsed(!isMessagesCollapsed),
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "chat-panel-messages-title", children: [
+              commentMessages.length,
+              " message",
+              commentMessages.length !== 1 ? "s" : ""
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "chat-panel-messages-toggle", children: "▼" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "chat-panel-messages", children: /* @__PURE__ */ jsx(MessageList, { messages: commentMessages, isStreaming }) })
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: "chat-panel-input", children: [
-      /* @__PURE__ */ jsxs("div", { className: "chat-panel-tools", children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: `tool-button ${activeTool === "component" ? "active" : ""}`,
-            onClick: () => onToolChange(activeTool === "component" ? null : "component"),
-            title: "Select Component",
-            children: /* @__PURE__ */ jsx(FileCode, { size: 16 })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: `tool-button ${activeTool === "area" ? "active" : ""}`,
-            onClick: () => onToolChange(activeTool === "area" ? null : "area"),
-            title: "Select Area",
-            children: /* @__PURE__ */ jsx(Box, { size: 16 })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: `tool-button ${activeTool === "text" ? "active" : ""}`,
-            onClick: () => onToolChange(activeTool === "text" ? null : "text"),
-            title: "Select Text",
-            children: /* @__PURE__ */ jsx(Type, { size: 16 })
-          }
-        )
-      ] }),
       contextRanges.length > 0 && /* @__PURE__ */ jsx("div", { className: "context-pills-container", children: contextRanges.map((range, idx) => /* @__PURE__ */ jsxs("div", { className: "context-pill-inline", children: [
         /* @__PURE__ */ jsx("span", { children: range.context.displayText }),
         /* @__PURE__ */ jsx(
@@ -987,11 +976,46 @@ function ChatPanel({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "input-hint", children: activeTool ? /* @__PURE__ */ jsxs("span", { children: [
-        "Select a ",
-        activeTool,
-        " to attach context"
-      ] }) : /* @__PURE__ */ jsx("span", { children: "⌘↵ to send • Esc to close" }) })
+      /* @__PURE__ */ jsxs("div", { className: "chat-panel-toolbar", children: [
+        /* @__PURE__ */ jsxs("div", { className: "chat-panel-tools", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `tool-button ${activeTool === "component" ? "active" : ""}`,
+              onClick: () => onToolChange(activeTool === "component" ? null : "component"),
+              title: "Select Component",
+              children: /* @__PURE__ */ jsx(FileCode, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `tool-button ${activeTool === "area" ? "active" : ""}`,
+              onClick: () => onToolChange(activeTool === "area" ? null : "area"),
+              title: "Select Area",
+              children: /* @__PURE__ */ jsx(Box, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `tool-button ${activeTool === "text" ? "active" : ""}`,
+              onClick: () => onToolChange(activeTool === "text" ? null : "text"),
+              title: "Select Text",
+              children: /* @__PURE__ */ jsx(Type, { size: 16 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "close-button",
+            onClick: onToggle,
+            title: "Close (Esc)",
+            children: /* @__PURE__ */ jsx(X, { size: 16 })
+          }
+        )
+      ] })
     ] })
   ] });
 }
@@ -1017,11 +1041,14 @@ function ControlPill({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [onToggle, isExpanded]);
+  if (isExpanded) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs("div", { className: "control-pill ai-editor-ui", onClick: onToggle, children: [
     /* @__PURE__ */ jsxs("div", { className: "control-pill-inner", children: [
-      /* @__PURE__ */ jsx("span", { className: "pill-icon", children: "💬" }),
-      /* @__PURE__ */ jsx("span", { className: "pill-label", children: isExpanded ? "Close Chat" : "AI Editor" }),
-      activeTool && !isExpanded && /* @__PURE__ */ jsxs("span", { className: "active-tool-indicator", title: `${activeTool} tool active`, children: [
+      /* @__PURE__ */ jsx(Pencil, { size: 16, className: "pill-icon" }),
+      /* @__PURE__ */ jsx("span", { className: "pill-label", children: "Edit" }),
+      activeTool && /* @__PURE__ */ jsxs("span", { className: "active-tool-indicator", title: `${activeTool} tool active`, children: [
         activeTool === "component" && "🎯",
         activeTool === "area" && "⬛",
         activeTool === "text" && "📝"
@@ -1106,26 +1133,40 @@ async function resolveSourceLocation(source) {
 const EditorContext = createContext(null);
 function AIEditorProvider({
   children,
-  theme = "dark"
+  theme = "dark",
+  enabled
 }) {
+  const [serverEnabled, setServerEnabled] = useState(null);
+  useEffect(() => {
+    if (enabled !== void 0) return;
+    fetch("/api/ai-editor/config").then((res) => res.json()).then((data) => {
+      setServerEnabled(data.enabled === true);
+    }).catch(() => {
+      setServerEnabled(false);
+    });
+  }, [enabled]);
+  const isEditorEnabled = enabled ?? serverEnabled;
   const [isEnabled, setEnabled] = useState(false);
   const [isHistoryOpen, setHistoryOpen] = useState(false);
   const [taskHistory, setTaskHistory] = useState([]);
   const [isChatExpanded, setChatExpanded] = useState(false);
   const [activeTool, setActiveTool] = useState(null);
   const [attachedContext, setAttachedContext] = useState(null);
-  useCallback((taskUpdate) => {
-    setTaskHistory((prev) => {
-      const existing = prev.find((t) => t.id === taskUpdate.id);
-      if (existing) {
-        return prev.map(
-          (t) => t.id === taskUpdate.id ? { ...t, ...taskUpdate } : t
-        );
-      } else {
-        return [...prev, taskUpdate];
-      }
-    });
-  }, []);
+  useCallback(
+    (taskUpdate) => {
+      setTaskHistory((prev) => {
+        const existing = prev.find((t) => t.id === taskUpdate.id);
+        if (existing) {
+          return prev.map(
+            (t) => t.id === taskUpdate.id ? { ...t, ...taskUpdate } : t
+          );
+        } else {
+          return [...prev, taskUpdate];
+        }
+      });
+    },
+    []
+  );
   const handleChatToggle = useCallback(() => {
     setChatExpanded((prev) => !prev);
   }, []);
@@ -1157,7 +1198,7 @@ function AIEditorProvider({
     window.addEventListener("keydown", handleKey);
     return () => window.removeEventListener("keydown", handleKey);
   }, [isHistoryOpen]);
-  if (process.env.NODE_ENV !== "development") {
+  if (!isEditorEnabled) {
     return /* @__PURE__ */ jsx(Fragment, { children });
   }
   return /* @__PURE__ */ jsxs(
@@ -1187,24 +1228,32 @@ function AIEditorProvider({
             }
           }
         ),
-        /* @__PURE__ */ jsx(
-          ChatPanel,
-          {
-            isExpanded: isChatExpanded,
-            onToggle: handleChatToggle,
-            activeTool,
-            onToolChange: handleToolChange,
-            attachedContext,
-            onClearContext: handleClearContext,
-            theme
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ControlPill,
+        /* @__PURE__ */ jsxs(
+          "div",
           {
-            isExpanded: isChatExpanded,
-            onToggle: handleChatToggle,
-            activeTool
+            className: `editor-container ai-editor-ui ${isChatExpanded ? "expanded" : "collapsed"} ${theme}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                ChatPanel,
+                {
+                  isExpanded: isChatExpanded,
+                  onToggle: handleChatToggle,
+                  activeTool,
+                  onToolChange: handleToolChange,
+                  attachedContext,
+                  onClearContext: handleClearContext,
+                  theme
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ControlPill,
+                {
+                  isExpanded: isChatExpanded,
+                  onToggle: handleChatToggle,
+                  activeTool
+                }
+              )
+            ]
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1221,7 +1270,9 @@ function AIEditorProvider({
 }
 function EditorOverlay({ theme, onComponentSelect }) {
   var _a;
-  const [hoveredSource, setHoveredSource] = useState(null);
+  const [hoveredSource, setHoveredSource] = useState(
+    null
+  );
   const [hoveredElement, setHoveredElement] = useState(null);
   const [hoveredRect, setHoveredRect] = useState(null);
   const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
@@ -1229,7 +1280,10 @@ function EditorOverlay({ theme, onComponentSelect }) {
   const lastHoverStateRef = useRef(null);
   useEffect(() => {
     if (hoveredSource && hoveredElement) {
-      lastHoverStateRef.current = { source: hoveredSource, element: hoveredElement };
+      lastHoverStateRef.current = {
+        source: hoveredSource,
+        element: hoveredElement
+      };
     }
   }, [hoveredSource, hoveredElement]);
   const isDark = theme === "dark";
@@ -1304,125 +1358,132 @@ function EditorOverlay({ theme, onComponentSelect }) {
       cancelAnimationFrame(raf);
     };
   }, [onComponentSelect]);
-  return /* @__PURE__ */ jsxs("div", { className: "ai-editor-ui", style: { fontFamily: "system-ui, sans-serif" }, children: [
-    hoveredRect && /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "fixed",
-          left: hoveredRect.left - 2,
-          top: hoveredRect.top - 2,
-          width: hoveredRect.width + 4,
-          height: hoveredRect.height + 4,
-          border: `2px solid ${c.accent}`,
-          borderRadius: 6,
-          background: `${c.accent}15`,
-          pointerEvents: "none",
-          zIndex: 99998
-        }
-      }
-    ),
-    hoveredSource && !isResolvingSource && /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          position: "fixed",
-          left: Math.min(mousePos.x + 14, window.innerWidth - 340),
-          top: mousePos.y + 14,
-          background: c.bg,
-          color: c.text,
-          border: `1px solid ${c.border}`,
-          borderRadius: 10,
-          padding: "12px 16px",
-          fontSize: 12,
-          fontFamily: "ui-monospace, monospace",
-          zIndex: 99999,
-          boxShadow: `0 8px 30px rgba(0,0,0,${isDark ? 0.5 : 0.15})`,
-          maxWidth: 320,
-          pointerEvents: "none"
-        },
-        children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                fontWeight: 700,
-                color: c.accent,
-                marginBottom: 4,
-                fontSize: 14
-              },
-              children: [
-                "<",
-                hoveredSource.componentName,
-                " />"
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs("div", { style: { color: c.muted, fontSize: 11 }, children: [
-            hoveredSource.filePath,
-            ":",
-            hoveredSource.lineNumber
-          ] }),
-          ((_a = hoveredSource.elementContext) == null ? void 0 : _a.textContent) && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              style: {
-                color: c.muted,
-                fontSize: 10,
-                marginTop: 4,
-                fontStyle: "italic"
-              },
-              children: [
-                '"',
-                hoveredSource.elementContext.textContent,
-                '"'
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        style: {
-          position: "fixed",
-          bottom: 20,
-          right: 20,
-          background: c.bg,
-          color: c.success,
-          padding: "10px 16px",
-          borderRadius: 20,
-          fontSize: 13,
-          fontWeight: 600,
-          zIndex: 99997,
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-          border: `1px solid ${c.border}`,
-          boxShadow: `0 4px 20px rgba(0,0,0,${isDark ? 0.4 : 0.1})`
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              style: {
-                width: 8,
-                height: 8,
-                borderRadius: "50%",
-                background: c.success
-              }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "ai-editor-ui",
+      style: { fontFamily: "system-ui, sans-serif" },
+      children: [
+        hoveredRect && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              left: hoveredRect.left - 2,
+              top: hoveredRect.top - 2,
+              width: hoveredRect.width + 4,
+              height: hoveredRect.height + 4,
+              border: `2px solid ${c.accent}`,
+              borderRadius: 6,
+              background: `${c.accent}15`,
+              pointerEvents: "none",
+              zIndex: 99998
             }
-          ),
-          "Select Component"
-        ]
-      }
-    )
-  ] });
+          }
+        ),
+        hoveredSource && !isResolvingSource && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              left: Math.min(mousePos.x + 14, window.innerWidth - 340),
+              top: mousePos.y + 14,
+              background: c.bg,
+              color: c.text,
+              border: `1px solid ${c.border}`,
+              borderRadius: 10,
+              padding: "12px 16px",
+              fontSize: 12,
+              fontFamily: "ui-monospace, monospace",
+              zIndex: 99999,
+              boxShadow: `0 8px 30px rgba(0,0,0,${isDark ? 0.5 : 0.15})`,
+              maxWidth: 320,
+              pointerEvents: "none"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    fontWeight: 700,
+                    color: c.accent,
+                    marginBottom: 4,
+                    fontSize: 14
+                  },
+                  children: [
+                    "<",
+                    hoveredSource.componentName,
+                    " />"
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { color: c.muted, fontSize: 11 }, children: [
+                hoveredSource.filePath,
+                ":",
+                hoveredSource.lineNumber
+              ] }),
+              ((_a = hoveredSource.elementContext) == null ? void 0 : _a.textContent) && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    color: c.muted,
+                    fontSize: 10,
+                    marginTop: 4,
+                    fontStyle: "italic"
+                  },
+                  children: [
+                    '"',
+                    hoveredSource.elementContext.textContent,
+                    '"'
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "fixed",
+              bottom: 20,
+              right: 20,
+              background: c.bg,
+              color: c.success,
+              padding: "10px 16px",
+              borderRadius: 20,
+              fontSize: 13,
+              fontWeight: 600,
+              zIndex: 99997,
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              border: `1px solid ${c.border}`,
+              boxShadow: `0 4px 20px rgba(0,0,0,${isDark ? 0.4 : 0.1})`
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: {
+                    width: 8,
+                    height: 8,
+                    borderRadius: "50%",
+                    background: c.success
+                  }
+                }
+              ),
+              "Select Component"
+            ]
+          }
+        )
+      ]
+    }
+  );
 }
 export {
   AIEditorProvider as A,
   ChatPanel as C,
   ControlPill as a
 };
-//# sourceMappingURL=AIEditorProvider-CKA2K_g2.js.map
+//# sourceMappingURL=AIEditorProvider-DWId5Qmv.js.map