@copilotkit/react-core/dist/chunk-3BASANUO.mjs

<img src="https://github.com/user-attachments/assets/0a6b64d9-e193-4940-a3f6-60334ac34084" alt="banner" style="border-radius: 12px; border: 2px solid #d6d4fa;" />

import {
  DeveloperConsoleModal
} from "./chunk-WSXTUD36.mjs";
import {
  CopilotKitIcon
} from "./chunk-PIF5KJYI.mjs";
import {
  useCopilotContext
} from "./chunk-TEMLWRRT.mjs";

// src/components/dev-console/console-trigger.tsx
import { useState, useEffect, useRef } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function ConsoleTrigger({ position = "bottom-right" }) {
  const context = useCopilotContext();
  const hasApiKey = Boolean(context.copilotApiConfig.publicApiKey);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isHovered, setIsHovered] = useState(false);
  const [isDragging, setIsDragging] = useState(false);
  const [buttonPosition, setButtonPosition] = useState(null);
  const [mounted, setMounted] = useState(false);
  const dragRef = useRef(null);
  const buttonRef = useRef(null);
  useEffect(() => {
    setMounted(true);
    if (typeof window !== "undefined" && !buttonPosition) {
      const buttonSize = 60;
      const margin = 24;
      const initialPosition = {
        x: margin,
        y: window.innerHeight - buttonSize - margin
      };
      setButtonPosition(initialPosition);
    }
  }, [position]);
  const handleMouseDown = (e) => {
    e.preventDefault();
    if (!buttonPosition)
      return;
    dragRef.current = {
      startX: e.clientX,
      startY: e.clientY,
      buttonX: buttonPosition.x,
      buttonY: buttonPosition.y
    };
    setIsDragging(true);
  };
  useEffect(() => {
    if (!isDragging)
      return;
    const handleMouseMove = (e) => {
      e.preventDefault();
      e.stopPropagation();
      if (!dragRef.current)
        return;
      const deltaX = e.clientX - dragRef.current.startX;
      const deltaY = e.clientY - dragRef.current.startY;
      let newX = dragRef.current.buttonX + deltaX;
      let newY = dragRef.current.buttonY + deltaY;
      newX = Math.max(0, Math.min(newX, window.innerWidth - 60));
      newY = Math.max(0, Math.min(newY, window.innerHeight - 60));
      setButtonPosition({ x: newX, y: newY });
    };
    const handleMouseUp = (e) => {
      e.preventDefault();
      e.stopPropagation();
      setIsDragging(false);
      dragRef.current = null;
    };
    document.addEventListener("mousemove", handleMouseMove, { capture: true, passive: false });
    document.addEventListener("mouseup", handleMouseUp, { capture: true, passive: false });
    return () => {
      document.removeEventListener("mousemove", handleMouseMove, { capture: true });
      document.removeEventListener("mouseup", handleMouseUp, { capture: true });
    };
  }, [isDragging]);
  if (!mounted || !buttonPosition) {
    return null;
  }
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(
      "button",
      {
        ref: buttonRef,
        onClick: () => {
          if (!isDragging) {
            setIsModalOpen(true);
          }
        },
        onMouseDown: handleMouseDown,
        onMouseEnter: () => setIsHovered(true),
        onMouseLeave: () => setIsHovered(false),
        style: {
          position: "fixed",
          left: `${buttonPosition.x}px`,
          top: `${buttonPosition.y}px`,
          zIndex: 2147483647,
          width: "60px",
          height: "60px",
          background: isDragging ? "#000000" : isHovered ? "#111111" : "#000000",
          color: "white",
          borderRadius: "50%",
          boxShadow: isDragging ? "0 8px 32px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4)" : isHovered ? "0 12px 40px rgba(0, 0, 0, 0.7), 0 6px 20px rgba(0, 0, 0, 0.5)" : "0 6px 20px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.3)",
          transition: isDragging ? "none" : "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          border: "none",
          cursor: isDragging ? "grabbing" : "grab",
          opacity: 1,
          userSelect: "none",
          transform: isDragging ? "scale(1.05)" : isHovered ? "scale(1.1)" : "scale(1)",
          backdropFilter: "blur(10px)",
          pointerEvents: "auto",
          isolation: "isolate"
        },
        title: hasApiKey ? "Open Developer Console (Drag to move)" : "Developer Console (API Key Required, Drag to move)",
        children: [
          /* @__PURE__ */ jsx(
            "div",
            {
              style: {
                width: "28px",
                height: "28px",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.2))"
              },
              children: /* @__PURE__ */ jsx(CopilotKitIcon, {})
            }
          ),
          !hasApiKey && /* @__PURE__ */ jsx(
            "div",
            {
              style: {
                position: "absolute",
                top: "-2px",
                right: "-2px",
                width: "18px",
                height: "18px",
                background: "linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%)",
                borderRadius: "50%",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                boxShadow: "0 2px 8px rgba(255, 107, 107, 0.4)",
                border: "2px solid white"
              },
              children: /* @__PURE__ */ jsx("span", { style: { fontSize: "10px", color: "white", fontWeight: "bold" }, children: "!" })
            }
          )
        ]
      }
    ),
    /* @__PURE__ */ jsx(
      DeveloperConsoleModal,
      {
        isOpen: isModalOpen,
        onClose: () => setIsModalOpen(false),
        hasApiKey
      }
    )
  ] });
}

export {
  ConsoleTrigger
};
//# sourceMappingURL=chunk-3BASANUO.mjs.map