@np-dev/ui-ai-anotation 0.1.0

package/src/components/Highlighter.tsx

@@ -0,0 +1,497 @@
+import { useEffect, useState } from "react";
+import { useAiAnnotation } from "../store";
+import { AnnotationInput } from "./AnnotationInput";
+import { captureScreenshot } from "../utils/screenshot";
+import { getComponentDetails } from "../utils/fiber";
+
+export function Highlighter() {
+  const { state, dispatch } = useAiAnnotation();
+  const { hoveredElement, mode, hoveredComponentInfo } = state;
+
+  const [rect, setRect] = useState<DOMRect | null>(null);
+  const [showInput, setShowInput] = useState(false);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+  const [isLocked, setIsLocked] = useState(false);
+  const [lockedPos, setLockedPos] = useState({ x: 0, y: 0 });
+  const [isCapturing, setIsCapturing] = useState(false);
+  const [captureSuccess, setCaptureSuccess] = useState(false);
+  const [showDetails, setShowDetails] = useState(false);
+
+  const componentName = hoveredComponentInfo?.name || "";
+  const componentDetails = hoveredComponentInfo?.details;
+
+  // Detect hovered element when in inspecting mode
+  useEffect(() => {
+    if (mode !== 'inspecting') return;
+
+    const handleMouseOver = (e: MouseEvent) => {
+      // Don't detect if locked (user is interacting with tooltip)
+      if (isLocked) return;
+
+      const target = e.target as HTMLElement;
+      
+      // Ignore annotation UI elements
+      if (target.closest('[data-ai-annotation-ui]') || target.closest('[data-annotation-tooltip]')) {
+        return;
+      }
+
+      // Get React component info from fiber with enhanced details
+      const details = getComponentDetails(target, {
+        includeProps: false,
+        maxParentDepth: 10,
+        maxChildDepth: 5,
+      });
+
+      dispatch({
+        type: 'SET_HOVERED',
+        payload: { element: target, name: details.name, details }
+      });
+    };
+
+    document.addEventListener('mouseover', handleMouseOver);
+    
+    return () => {
+      document.removeEventListener('mouseover', handleMouseOver);
+    };
+  }, [mode, isLocked, dispatch]);
+
+  // Global ESC key handler for inspecting mode - handles ESC when no element is selected
+  useEffect(() => {
+    if (mode !== 'inspecting') return;
+
+    const handleGlobalEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && !isLocked) {
+        e.preventDefault();
+        e.stopPropagation();
+        // No highlight block selected, disable mode
+        dispatch({ type: 'SET_MODE', payload: 'disabled' });
+      }
+    };
+
+    document.addEventListener('keydown', handleGlobalEsc);
+    return () => document.removeEventListener('keydown', handleGlobalEsc);
+  }, [mode, isLocked, dispatch]);
+
+  // Reset all state when mode changes to disabled
+  useEffect(() => {
+    if (mode === 'disabled') {
+      setRect(null);
+      setShowInput(false);
+      setIsLocked(false);
+      setMousePos({ x: 0, y: 0 });
+      setLockedPos({ x: 0, y: 0 });
+      setIsCapturing(false);
+      setCaptureSuccess(false);
+      setShowDetails(false);
+
+      // Clear hovered element in store
+      dispatch({ type: 'RESET_HOVER' });
+    }
+  }, [mode, dispatch]);
+
+  useEffect(() => {
+    if (!hoveredElement) {
+      setRect(null);
+      setShowInput(false);
+      setIsLocked(false);
+      return;
+    }
+
+    const updateRect = () => {
+      const newRect = hoveredElement.getBoundingClientRect();
+      setRect(newRect);
+    };
+
+    updateRect();
+
+    const handleMouseMove = (e: MouseEvent) => {
+      // Only update mouse position if not locked
+      if (!isLocked) {
+        setMousePos({ x: e.clientX, y: e.clientY });
+      }
+    };
+
+    // Click handler to lock/unlock tooltip
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      
+      // Ignore clicks on the tooltip buttons themselves
+      if (target.closest('[data-annotation-tooltip]')) {
+        return;
+      }
+      
+      // Ignore clicks on annotation input
+      if (target.closest('[data-ai-annotation-ui]')) {
+        return;
+      }
+
+      if (!isLocked) {
+        // Lock the tooltip at current position
+        e.preventDefault();
+        e.stopPropagation();
+        setIsLocked(true);
+        setLockedPos({ x: e.clientX, y: e.clientY });
+      } else {
+        // Unlock and go back to following mode
+        setIsLocked(false);
+      }
+    };
+
+    // ESC key handler to unlock tooltip when locked
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isLocked) {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsLocked(false);
+        setShowInput(false);
+      }
+    };
+
+    window.addEventListener("scroll", updateRect, true);
+    window.addEventListener("resize", updateRect);
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("click", handleClick, true);
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      window.removeEventListener("scroll", updateRect, true);
+      window.removeEventListener("resize", updateRect);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("click", handleClick, true);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [hoveredElement, isLocked]);
+
+  const handleScreenshot = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!hoveredElement || isCapturing) return;
+
+    setIsCapturing(true);
+    try {
+      const result = await captureScreenshot(hoveredElement, {
+        copyToClipboard: true,
+        scale: 2,
+      });
+
+      if (result.success) {
+        setCaptureSuccess(true);
+        setTimeout(() => {
+          setCaptureSuccess(false);
+          setIsLocked(false); // Unlock after successful capture
+        }, 1500);
+      }
+    } catch (error) {
+      console.error("Screenshot failed:", error);
+    } finally {
+      setIsCapturing(false);
+    }
+  };
+
+  const handleAddClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowInput(true);
+    setShowDetails(false);
+    setIsLocked(false); // Unlock when showing input
+  };
+
+  const handleDetailsClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setShowDetails(!showDetails);
+  };
+
+  const handleCloseInput = () => {
+    setShowInput(false);
+  };
+
+  if (mode !== "inspecting" || !rect) return null;
+
+  // Use locked position or current mouse position
+  const tooltipX = isLocked ? lockedPos.x : mousePos.x;
+  const tooltipY = isLocked ? lockedPos.y : mousePos.y;
+
+  return (
+    <>
+      {/* Highlight overlay */}
+      <div
+        data-annotation-ui="true"
+        style={{
+          position: "fixed",
+          left: rect.left - 2,
+          top: rect.top - 2,
+          width: rect.width + 4,
+          height: rect.height + 4,
+          border: "2px solid #3b82f6",
+          borderRadius: 4,
+          pointerEvents: "none",
+          zIndex: 99998,
+          backgroundColor: "rgba(59, 130, 246, 0.1)",
+        }}
+      />
+
+      {/* Component name label */}
+      {componentName && (
+        <div
+          data-annotation-ui="true"
+          style={{
+            position: "fixed",
+            left: rect.left,
+            top: rect.top - 24,
+            backgroundColor: "#3b82f6",
+            color: "white",
+            padding: "2px 8px",
+            borderRadius: 4,
+            fontSize: 12,
+            fontFamily: "monospace",
+            pointerEvents: "none",
+            zIndex: 99999,
+          }}
+        >
+          {componentName}
+        </div>
+      )}
+
+      {/* Floating tooltip following mouse */}
+      {!showInput && (
+        <div
+          data-annotation-ui="true"
+          data-annotation-tooltip="true"
+          style={{
+            position: "fixed",
+            left: tooltipX + 16,
+            top: tooltipY + 16,
+            display: "flex",
+            flexDirection: "column",
+            gap: 6,
+            padding: 6,
+            backgroundColor: isLocked ? "rgba(0, 0, 0, 0.95)" : "rgba(0, 0, 0, 0.85)",
+            borderRadius: 8,
+            boxShadow: isLocked
+              ? "0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(59, 130, 246, 0.5)"
+              : "0 4px 12px rgba(0, 0, 0, 0.3)",
+            zIndex: 100000,
+            pointerEvents: isLocked ? "auto" : "none",
+            backdropFilter: "blur(8px)",
+            transition: isLocked ? "none" : "left 0.05s ease-out, top 0.05s ease-out",
+            maxWidth: showDetails ? 400 : "auto",
+          }}
+        >
+          {/* Button row */}
+          <div style={{ display: "flex", gap: 6 }}>
+            {/* Screenshot button */}
+            <button
+              onClick={handleScreenshot}
+              disabled={isCapturing || !isLocked}
+              style={{
+                width: 32,
+                height: 32,
+                borderRadius: 6,
+                border: "none",
+                backgroundColor: captureSuccess
+                  ? "#22c55e"
+                  : isCapturing
+                  ? "#6b7280"
+                  : "#8b5cf6",
+                color: "white",
+                cursor: isLocked ? "pointer" : "default",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: 16,
+                transition: "all 0.15s ease",
+                opacity: isLocked ? 1 : 0.7,
+              }}
+              title="Capture screenshot"
+            >
+              {captureSuccess ? "✓" : isCapturing ? "..." : "📷"}
+            </button>
+
+            {/* Add annotation button */}
+            <button
+              onClick={handleAddClick}
+              disabled={!isLocked}
+              style={{
+                width: 32,
+                height: 32,
+                borderRadius: 6,
+                border: "none",
+                backgroundColor: "#3b82f6",
+                color: "white",
+                cursor: isLocked ? "pointer" : "default",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: 18,
+                fontWeight: "bold",
+                transition: "all 0.15s ease",
+                opacity: isLocked ? 1 : 0.7,
+              }}
+              title="Add annotation"
+            >
+              +
+            </button>
+
+            {/* Details toggle button */}
+            <button
+              onClick={handleDetailsClick}
+              disabled={!isLocked}
+              style={{
+                width: 32,
+                height: 32,
+                borderRadius: 6,
+                border: showDetails ? "2px solid #10b981" : "none",
+                backgroundColor: showDetails ? "#10b981" : "#6b7280",
+                color: "white",
+                cursor: isLocked ? "pointer" : "default",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: 14,
+                transition: "all 0.15s ease",
+                opacity: isLocked ? 1 : 0.7,
+              }}
+              title="Show component details"
+            >
+              ⓘ
+            </button>
+          </div>
+
+          {/* Lock hint */}
+          {!isLocked && (
+            <div
+              style={{
+                position: "absolute",
+                bottom: -20,
+                left: "50%",
+                transform: "translateX(-50%)",
+                fontSize: 10,
+                color: "rgba(255, 255, 255, 0.7)",
+                whiteSpace: "nowrap",
+                pointerEvents: "none",
+              }}
+            >
+              Click to lock
+            </div>
+          )}
+
+          {/* Component details panel */}
+          {showDetails && componentDetails && (
+            <div
+              style={{
+                padding: "8px 4px 4px 4px",
+                borderTop: "1px solid rgba(255, 255, 255, 0.2)",
+                fontSize: 11,
+                color: "rgba(255, 255, 255, 0.9)",
+                maxHeight: 300,
+                overflowY: "auto",
+              }}
+            >
+              {/* Element info */}
+              <div style={{ marginBottom: 8 }}>
+                <div style={{ color: "#60a5fa", fontWeight: "bold", marginBottom: 4 }}>
+                  Element
+                </div>
+                <div style={{ fontFamily: "monospace", color: "#f59e0b" }}>
+                  &lt;{componentDetails.elementInfo.tagName}
+                  {componentDetails.elementInfo.id && ` id="${componentDetails.elementInfo.id}"`}
+                  {componentDetails.elementInfo.className && ` class="${componentDetails.elementInfo.className}"`}
+                  &gt;
+                </div>
+                {componentDetails.elementInfo.textContent && (
+                  <div style={{ color: "rgba(255, 255, 255, 0.6)", marginTop: 2, fontStyle: "italic" }}>
+                    "{componentDetails.elementInfo.textContent}"
+                  </div>
+                )}
+                <div style={{ color: "rgba(255, 255, 255, 0.5)", marginTop: 2 }}>
+                  {componentDetails.elementInfo.childElementCount} child element(s)
+                </div>
+              </div>
+
+              {/* Parent hierarchy */}
+              {componentDetails.parentHierarchy.length > 0 && (
+                <div style={{ marginBottom: 8 }}>
+                  <div style={{ color: "#60a5fa", fontWeight: "bold", marginBottom: 4 }}>
+                    Parent Components
+                  </div>
+                  <div style={{ fontFamily: "monospace" }}>
+                    {componentDetails.parentHierarchy.slice(0, 5).map((parent, i) => (
+                      <div key={i} style={{ color: "#a78bfa", paddingLeft: i * 8 }}>
+                        {"← "}{parent}
+                      </div>
+                    ))}
+                    {componentDetails.parentHierarchy.length > 5 && (
+                      <div style={{ color: "rgba(255, 255, 255, 0.5)" }}>
+                        ... and {componentDetails.parentHierarchy.length - 5} more
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {/* Child components */}
+              {componentDetails.childComponents.length > 0 && (
+                <div style={{ marginBottom: 8 }}>
+                  <div style={{ color: "#60a5fa", fontWeight: "bold", marginBottom: 4 }}>
+                    Child Components ({componentDetails.childComponents.length})
+                  </div>
+                  <div style={{ fontFamily: "monospace" }}>
+                    {componentDetails.childComponents.slice(0, 10).map((child, i) => (
+                      <div
+                        key={i}
+                        style={{
+                          display: "flex",
+                          justifyContent: "space-between",
+                          gap: 8,
+                          color: "#34d399",
+                        }}
+                      >
+                        <span>
+                          {"→ "}{child.name}
+                          {child.hasChildren && " ▾"}
+                        </span>
+                        {child.count > 1 && (
+                          <span style={{ color: "rgba(255, 255, 255, 0.5)" }}>
+                            ×{child.count}
+                          </span>
+                        )}
+                      </div>
+                    ))}
+                    {componentDetails.childComponents.length > 10 && (
+                      <div style={{ color: "rgba(255, 255, 255, 0.5)" }}>
+                        ... and {componentDetails.childComponents.length - 10} more
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+
+              {/* Important attributes */}
+              {Object.keys(componentDetails.elementInfo.attributes).length > 0 && (
+                <div>
+                  <div style={{ color: "#60a5fa", fontWeight: "bold", marginBottom: 4 }}>
+                    Attributes
+                  </div>
+                  <div style={{ fontFamily: "monospace" }}>
+                    {Object.entries(componentDetails.elementInfo.attributes).map(([key, value]) => (
+                      <div key={key} style={{ color: "#fbbf24" }}>
+                        {key}="{value}"
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Annotation input */}
+      {showInput && (
+        <AnnotationInput
+          onClose={handleCloseInput}
+          componentName={componentName || "Unknown"}
+          componentDetails={componentDetails}
+        />
+      )}
+    </>
+  );
+}