94 lines
4.6 KiB
JavaScript
94 lines
4.6 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');
|
|
let react = require("react");
|
|
react = require_runtime.__toESM(react);
|
|
let lucide_react = require("lucide-react");
|
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
|
|
//#region src/components/chat/CopilotChatToggleButton.tsx
|
|
const DefaultOpenIcon = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.MessageCircle, {
|
|
className: require_utils.cn("cpk:h-6 cpk:w-6", className),
|
|
strokeWidth: 1.75,
|
|
fill: "currentColor",
|
|
...props
|
|
});
|
|
const DefaultCloseIcon = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
|
|
className: require_utils.cn("cpk:h-6 cpk:w-6", className),
|
|
strokeWidth: 1.75,
|
|
...props
|
|
});
|
|
DefaultOpenIcon.displayName = "CopilotChatToggleButton.OpenIcon";
|
|
DefaultCloseIcon.displayName = "CopilotChatToggleButton.CloseIcon";
|
|
const ICON_TRANSITION_STYLE = Object.freeze({ transition: "opacity 120ms ease-out, transform 260ms cubic-bezier(0.22, 1, 0.36, 1)" });
|
|
const ICON_WRAPPER_BASE = "cpk:pointer-events-none cpk:absolute cpk:inset-0 cpk:flex cpk:items-center cpk:justify-center cpk:will-change-transform";
|
|
const BUTTON_BASE_CLASSES = require_utils.cn("copilotKitButton", "cpk:fixed cpk:bottom-6 cpk:right-6 cpk:z-[1100] cpk:flex cpk:h-14 cpk:w-14 cpk:items-center cpk:justify-center", "cpk:rounded-full cpk:border cpk:border-primary cpk:bg-primary cpk:text-primary-foreground", "cpk:shadow-sm cpk:transition-all cpk:duration-200 cpk:ease-out", "cpk:hover:scale-[1.04] cpk:hover:shadow-md", "cpk:cursor-pointer", "cpk:active:scale-[0.96]", "cpk:focus-visible:outline-none cpk:focus-visible:ring-2 cpk:focus-visible:ring-primary/50 cpk:focus-visible:ring-offset-2 cpk:focus-visible:ring-offset-background", "cpk:disabled:pointer-events-none cpk:disabled:opacity-60");
|
|
const CopilotChatToggleButton = react.default.forwardRef(function CopilotChatToggleButton({ openIcon, closeIcon, className, ...buttonProps }, ref) {
|
|
const { onClick, type, disabled, ...restProps } = buttonProps;
|
|
const configuration = require_CopilotChatConfigurationProvider.useCopilotChatConfiguration();
|
|
const labels = configuration?.labels ?? require_CopilotChatConfigurationProvider.CopilotChatDefaultLabels;
|
|
const [fallbackOpen, setFallbackOpen] = (0, react.useState)(false);
|
|
const isOpen = configuration?.isModalOpen ?? fallbackOpen;
|
|
const setModalOpen = configuration?.setModalOpen ?? setFallbackOpen;
|
|
const handleClick = (event) => {
|
|
if (disabled) return;
|
|
if (onClick) onClick(event);
|
|
if (event.defaultPrevented) return;
|
|
setModalOpen(!isOpen);
|
|
};
|
|
const renderedOpenIcon = require_slots.renderSlot(openIcon, DefaultOpenIcon, {
|
|
className: "cpk:h-6 cpk:w-6",
|
|
"aria-hidden": true,
|
|
focusable: false
|
|
});
|
|
const renderedCloseIcon = require_slots.renderSlot(closeIcon, DefaultCloseIcon, {
|
|
className: "cpk:h-6 cpk:w-6",
|
|
"aria-hidden": true,
|
|
focusable: false
|
|
});
|
|
const openIconElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
"aria-hidden": "true",
|
|
"data-slot": "chat-toggle-button-open-icon",
|
|
className: ICON_WRAPPER_BASE,
|
|
style: {
|
|
...ICON_TRANSITION_STYLE,
|
|
opacity: isOpen ? 0 : 1,
|
|
transform: `scale(${isOpen ? .75 : 1}) rotate(${isOpen ? 90 : 0}deg)`
|
|
},
|
|
children: renderedOpenIcon
|
|
});
|
|
const closeIconElement = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
|
|
"aria-hidden": "true",
|
|
"data-slot": "chat-toggle-button-close-icon",
|
|
className: ICON_WRAPPER_BASE,
|
|
style: {
|
|
...ICON_TRANSITION_STYLE,
|
|
opacity: isOpen ? 1 : 0,
|
|
transform: `scale(${isOpen ? 1 : .75}) rotate(${isOpen ? 0 : -90}deg)`
|
|
},
|
|
children: renderedCloseIcon
|
|
});
|
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
|
|
ref,
|
|
type: type ?? "button",
|
|
"data-copilotkit": true,
|
|
"data-testid": "copilot-chat-toggle",
|
|
"data-slot": "chat-toggle-button",
|
|
"data-state": isOpen ? "open" : "closed",
|
|
className: require_utils.cn(BUTTON_BASE_CLASSES, className),
|
|
"aria-label": isOpen ? labels.chatToggleCloseLabel : labels.chatToggleOpenLabel,
|
|
"aria-pressed": isOpen,
|
|
disabled,
|
|
onClick: handleClick,
|
|
...restProps,
|
|
children: [openIconElement, closeIconElement]
|
|
});
|
|
});
|
|
CopilotChatToggleButton.displayName = "CopilotChatToggleButton";
|
|
|
|
//#endregion
|
|
exports.DefaultCloseIcon = DefaultCloseIcon;
|
|
exports.DefaultOpenIcon = DefaultOpenIcon;
|
|
exports.default = CopilotChatToggleButton;
|
|
//# sourceMappingURL=CopilotChatToggleButton.cjs.map
|