@copilotkit/react-core
Version:
<img src="https://github.com/user-attachments/assets/0a6b64d9-e193-4940-a3f6-60334ac34084" alt="banner" style="border-radius: 12px; border: 2px solid #d6d4fa;" />
231 lines (229 loc) • 7.69 kB
JavaScript
import {
DeveloperConsoleModal
} from "./chunk-OKCYPO4I.mjs";
import {
CopilotKitIcon
} from "./chunk-PIF5KJYI.mjs";
import {
useCopilotContext
} from "./chunk-EUX2P2E7.mjs";
// src/components/dev-console/console-trigger.tsx
import { useState, useEffect, useRef } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
var INSPECTOR_HIDE_KEY = "cpk:inspector:hidden";
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 [isHidden, setIsHidden] = useState(false);
const dragRef = useRef(null);
const buttonRef = useRef(null);
useEffect(() => {
setMounted(true);
try {
const hidden = typeof window !== "undefined" ? localStorage.getItem(INSPECTOR_HIDE_KEY) : null;
if (hidden === "1" || hidden === "true") {
setIsHidden(true);
}
} catch (e) {
}
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 || isHidden) {
return null;
}
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsxs(
"button",
{
ref: buttonRef,
onClick: (e) => {
if (!isDragging) {
if (e.metaKey || e.altKey) {
try {
localStorage.setItem(INSPECTOR_HIDE_KEY, "1");
} catch (e2) {
}
setIsHidden(true);
return;
}
setIsModalOpen(true);
}
},
onContextMenu: (e) => {
e.preventDefault();
try {
localStorage.setItem(INSPECTOR_HIDE_KEY, "1");
} catch (e2) {
}
setIsHidden(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 Inspector (Drag to move)" : "Inspector (License Key Required, Drag to move)",
children: [
/* @__PURE__ */ jsx(
"div",
{
onClick: (e) => {
e.preventDefault();
e.stopPropagation();
try {
localStorage.setItem(INSPECTOR_HIDE_KEY, "1");
} catch (e2) {
}
setIsHidden(true);
},
style: {
position: "absolute",
bottom: "2px",
right: "2px",
width: "20px",
height: "20px",
borderRadius: "50%",
background: "#ffffff",
color: "#ef4444",
fontSize: "14px",
lineHeight: "18px",
textAlign: "center",
boxShadow: "0 2px 6px rgba(0,0,0,0.35)",
cursor: "pointer",
border: "1px solid #e5e7eb",
display: "flex",
alignItems: "center",
justifyContent: "center",
zIndex: 1
},
title: "Hide Inspector",
children: "\xD7"
}
),
/* @__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-DXEQPN43.mjs.map