170 lines
8.1 KiB
JavaScript
170 lines
8.1 KiB
JavaScript
const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
|
|
const require_CopilotChatConfigurationProvider = require('../../providers/CopilotChatConfigurationProvider.cjs');
|
|
const require_utils = require('../../lib/utils.cjs');
|
|
const require_slots = require('../../lib/slots.cjs');
|
|
const require_CopilotChatView = require('./CopilotChatView.cjs');
|
|
const require_CopilotChatToggleButton = require('./CopilotChatToggleButton.cjs');
|
|
const require_CopilotModalHeader = require('./CopilotModalHeader.cjs');
|
|
let react = require("react");
|
|
react = require_runtime.__toESM(react);
|
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
|
|
//#region src/components/chat/CopilotPopupView.tsx
|
|
const DEFAULT_POPUP_WIDTH = 420;
|
|
const DEFAULT_POPUP_HEIGHT = 560;
|
|
const dimensionToCss = (value, fallback) => {
|
|
if (typeof value === "number" && Number.isFinite(value)) return `${value}px`;
|
|
if (typeof value === "string" && value.trim().length > 0) return value;
|
|
return `${fallback}px`;
|
|
};
|
|
function CopilotPopupView({ header, toggleButton, width, height, clickOutsideToClose, defaultOpen = true, className, ...restProps }) {
|
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CopilotChatConfigurationProvider.CopilotChatConfigurationProvider, {
|
|
isModalDefaultOpen: defaultOpen,
|
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotPopupViewInternal, {
|
|
header,
|
|
toggleButton,
|
|
width,
|
|
height,
|
|
clickOutsideToClose,
|
|
className,
|
|
...restProps
|
|
})
|
|
});
|
|
}
|
|
function CopilotPopupViewInternal({ header, toggleButton, width, height, clickOutsideToClose, className, ...restProps }) {
|
|
const configuration = require_CopilotChatConfigurationProvider.useCopilotChatConfiguration();
|
|
const isPopupOpen = configuration?.isModalOpen ?? false;
|
|
const setModalOpen = configuration?.setModalOpen;
|
|
const labels = configuration?.labels ?? require_CopilotChatConfigurationProvider.CopilotChatDefaultLabels;
|
|
const containerRef = (0, react.useRef)(null);
|
|
const [isRendered, setIsRendered] = (0, react.useState)(isPopupOpen);
|
|
const [isAnimatingOut, setIsAnimatingOut] = (0, react.useState)(false);
|
|
(0, react.useEffect)(() => {
|
|
if (isPopupOpen) {
|
|
setIsRendered(true);
|
|
setIsAnimatingOut(false);
|
|
return;
|
|
}
|
|
if (!isRendered) return;
|
|
setIsAnimatingOut(true);
|
|
const timeout = setTimeout(() => {
|
|
setIsRendered(false);
|
|
setIsAnimatingOut(false);
|
|
}, 200);
|
|
return () => clearTimeout(timeout);
|
|
}, [isPopupOpen, isRendered]);
|
|
(0, react.useEffect)(() => {
|
|
if (!isPopupOpen) return;
|
|
if (typeof window === "undefined") return;
|
|
const handleKeyDown = (event) => {
|
|
if (event.key === "Escape") {
|
|
event.preventDefault();
|
|
setModalOpen?.(false);
|
|
}
|
|
};
|
|
window.addEventListener("keydown", handleKeyDown);
|
|
return () => window.removeEventListener("keydown", handleKeyDown);
|
|
}, [isPopupOpen, setModalOpen]);
|
|
(0, react.useEffect)(() => {
|
|
if (!isPopupOpen) return;
|
|
const focusTimer = setTimeout(() => {
|
|
const container = containerRef.current;
|
|
if (container && !container.contains(document.activeElement)) container.focus({ preventScroll: true });
|
|
}, 200);
|
|
return () => clearTimeout(focusTimer);
|
|
}, [isPopupOpen]);
|
|
(0, react.useEffect)(() => {
|
|
if (!isPopupOpen || !clickOutsideToClose) return;
|
|
if (typeof document === "undefined") return;
|
|
const handlePointerDown = (event) => {
|
|
const target = event.target;
|
|
if (!target) return;
|
|
if (containerRef.current?.contains(target)) return;
|
|
const toggleButton = document.querySelector("[data-slot='chat-toggle-button']");
|
|
if (toggleButton && toggleButton.contains(target)) return;
|
|
setModalOpen?.(false);
|
|
};
|
|
document.addEventListener("pointerdown", handlePointerDown);
|
|
return () => document.removeEventListener("pointerdown", handlePointerDown);
|
|
}, [
|
|
isPopupOpen,
|
|
clickOutsideToClose,
|
|
setModalOpen
|
|
]);
|
|
const headerElement = (0, react.useMemo)(() => require_slots.renderSlot(header, require_CopilotModalHeader.CopilotModalHeader, {}), [header]);
|
|
const toggleButtonElement = (0, react.useMemo)(() => require_slots.renderSlot(toggleButton, require_CopilotChatToggleButton.default, {}), [toggleButton]);
|
|
const resolvedWidth = dimensionToCss(width, DEFAULT_POPUP_WIDTH);
|
|
const resolvedHeight = dimensionToCss(height, DEFAULT_POPUP_HEIGHT);
|
|
const popupStyle = (0, react.useMemo)(() => ({
|
|
"--copilot-popup-width": resolvedWidth,
|
|
"--copilot-popup-height": resolvedHeight,
|
|
"--copilot-popup-max-width": "calc(100vw - 3rem)",
|
|
"--copilot-popup-max-height": "calc(100dvh - 7.5rem)",
|
|
paddingTop: "env(safe-area-inset-top)",
|
|
paddingBottom: "env(safe-area-inset-bottom)",
|
|
paddingLeft: "env(safe-area-inset-left)",
|
|
paddingRight: "env(safe-area-inset-right)"
|
|
}), [resolvedHeight, resolvedWidth]);
|
|
const popupAnimationClass = isPopupOpen && !isAnimatingOut ? "cpk:pointer-events-auto cpk:translate-y-0 cpk:opacity-100 cpk:md:scale-100" : "cpk:pointer-events-none cpk:translate-y-4 cpk:opacity-0 cpk:md:translate-y-5 cpk:md:scale-[0.95]";
|
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [toggleButtonElement, isRendered ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
"data-copilotkit": true,
|
|
className: require_utils.cn("cpk:fixed cpk:inset-0 cpk:z-[1200] cpk:flex cpk:max-w-full cpk:flex-col cpk:items-stretch", "cpk:md:inset-auto cpk:md:bottom-24 cpk:md:right-6 cpk:md:items-end cpk:md:gap-4"),
|
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
ref: containerRef,
|
|
tabIndex: -1,
|
|
role: "dialog",
|
|
"aria-label": labels.modalHeaderTitle,
|
|
"data-testid": "copilot-popup",
|
|
"data-copilot-popup": true,
|
|
className: require_utils.cn("copilotKitPopup copilotKitWindow", "cpk:relative cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden cpk:bg-background cpk:text-foreground", "cpk:origin-bottom cpk:focus:outline-none cpk:transform-gpu cpk:transition-transform cpk:transition-opacity cpk:duration-200 cpk:ease-out", "cpk:md:transition-transform cpk:md:transition-opacity", "cpk:rounded-none cpk:border cpk:border-border/0 cpk:shadow-none cpk:ring-0", "cpk:md:h-[var(--copilot-popup-height)] cpk:md:w-[var(--copilot-popup-width)]", "cpk:md:max-h-[var(--copilot-popup-max-height)] cpk:md:max-w-[var(--copilot-popup-max-width)]", "cpk:md:origin-bottom-right cpk:md:rounded-2xl cpk:md:border-border cpk:md:shadow-xl cpk:md:ring-1 cpk:md:ring-border/40", popupAnimationClass),
|
|
style: popupStyle,
|
|
children: [headerElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
className: "cpk:flex-1 cpk:overflow-hidden",
|
|
"data-popup-chat": true,
|
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CopilotChatView.default, {
|
|
...restProps,
|
|
className: require_utils.cn("cpk:h-full cpk:min-h-0", className)
|
|
})
|
|
})]
|
|
})
|
|
}) : null] });
|
|
}
|
|
CopilotPopupView.displayName = "CopilotPopupView";
|
|
(function(_CopilotPopupView) {
|
|
_CopilotPopupView.WelcomeScreen = ({ welcomeMessage, input, suggestionView, className, children, ...props }) => {
|
|
const BoundWelcomeMessage = require_slots.renderSlot(welcomeMessage, require_CopilotChatView.default.WelcomeMessage, {});
|
|
if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
"data-copilotkit": true,
|
|
style: { display: "contents" },
|
|
children: children({
|
|
welcomeMessage: BoundWelcomeMessage,
|
|
input,
|
|
suggestionView,
|
|
className,
|
|
...props
|
|
})
|
|
});
|
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
className: require_utils.cn("cpk:h-full cpk:flex cpk:flex-col", className),
|
|
...props,
|
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
className: "cpk:flex-1 cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:px-4",
|
|
children: BoundWelcomeMessage
|
|
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
className: "cpk:mb-4 cpk:flex cpk:justify-center cpk:px-4",
|
|
children: suggestionView
|
|
}), input] })]
|
|
});
|
|
};
|
|
})(CopilotPopupView || (CopilotPopupView = {}));
|
|
var CopilotPopupView_default = CopilotPopupView;
|
|
|
|
//#endregion
|
|
Object.defineProperty(exports, 'CopilotPopupView', {
|
|
enumerable: true,
|
|
get: function () {
|
|
return CopilotPopupView;
|
|
}
|
|
});
|
|
exports.default = CopilotPopupView_default;
|
|
//# sourceMappingURL=CopilotPopupView.cjs.map
|