90 lines
4.1 KiB
JavaScript
90 lines
4.1 KiB
JavaScript
import { CopilotChatDefaultLabels, useCopilotChatConfiguration } from "../../providers/CopilotChatConfigurationProvider.mjs";
|
|
import { cn } from "../../lib/utils.mjs";
|
|
import { renderSlot } from "../../lib/slots.mjs";
|
|
import React, { useState } from "react";
|
|
import { MessageCircle, X } from "lucide-react";
|
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
|
//#region src/components/chat/CopilotChatToggleButton.tsx
|
|
const DefaultOpenIcon = ({ className, ...props }) => /* @__PURE__ */ jsx(MessageCircle, {
|
|
className: cn("cpk:h-6 cpk:w-6", className),
|
|
strokeWidth: 1.75,
|
|
fill: "currentColor",
|
|
...props
|
|
});
|
|
const DefaultCloseIcon = ({ className, ...props }) => /* @__PURE__ */ jsx(X, {
|
|
className: 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 = 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.forwardRef(function CopilotChatToggleButton({ openIcon, closeIcon, className, ...buttonProps }, ref) {
|
|
const { onClick, type, disabled, ...restProps } = buttonProps;
|
|
const configuration = useCopilotChatConfiguration();
|
|
const labels = configuration?.labels ?? CopilotChatDefaultLabels;
|
|
const [fallbackOpen, setFallbackOpen] = 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 = renderSlot(openIcon, DefaultOpenIcon, {
|
|
className: "cpk:h-6 cpk:w-6",
|
|
"aria-hidden": true,
|
|
focusable: false
|
|
});
|
|
const renderedCloseIcon = renderSlot(closeIcon, DefaultCloseIcon, {
|
|
className: "cpk:h-6 cpk:w-6",
|
|
"aria-hidden": true,
|
|
focusable: false
|
|
});
|
|
const openIconElement = /* @__PURE__ */ 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__ */ 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__ */ 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: 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
|
|
export { DefaultCloseIcon, DefaultOpenIcon, CopilotChatToggleButton as default };
|
|
//# sourceMappingURL=CopilotChatToggleButton.mjs.map
|