import { CopilotChatConfigurationProvider, useCopilotChatConfiguration } from "../../providers/CopilotChatConfigurationProvider.mjs";
import { cn } from "../../lib/utils.mjs";
import { renderSlot } from "../../lib/slots.mjs";
import CopilotChatView_default from "./CopilotChatView.mjs";
import CopilotChatToggleButton from "./CopilotChatToggleButton.mjs";
import { CopilotModalHeader } from "./CopilotModalHeader.mjs";
import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";

//#region src/components/chat/CopilotSidebarView.tsx
const DEFAULT_SIDEBAR_WIDTH = 480;
const SIDEBAR_TRANSITION_MS = 260;
function CopilotSidebarView({ header, toggleButton, width, defaultOpen = true, ...props }) {
	return /* @__PURE__ */ jsx(CopilotChatConfigurationProvider, {
		isModalDefaultOpen: defaultOpen,
		children: /* @__PURE__ */ jsx(CopilotSidebarViewInternal, {
			header,
			toggleButton,
			width,
			...props
		})
	});
}
function CopilotSidebarViewInternal({ header, toggleButton, width, ...props }) {
	const isSidebarOpen = useCopilotChatConfiguration()?.isModalOpen ?? false;
	const sidebarRef = useRef(null);
	const [sidebarWidth, setSidebarWidth] = useState(width ?? DEFAULT_SIDEBAR_WIDTH);
	const widthToCss = (w) => {
		return typeof w === "number" ? `${w}px` : w;
	};
	const widthToMargin = (w) => {
		if (typeof w === "number") return `${w}px`;
		return w;
	};
	useEffect(() => {
		if (width !== void 0) return;
		if (typeof window === "undefined") return;
		const element = sidebarRef.current;
		if (!element) return;
		const updateWidth = () => {
			const rect = element.getBoundingClientRect();
			if (rect.width > 0) setSidebarWidth(rect.width);
		};
		updateWidth();
		if (typeof ResizeObserver !== "undefined") {
			const observer = new ResizeObserver(() => updateWidth());
			observer.observe(element);
			return () => observer.disconnect();
		}
		window.addEventListener("resize", updateWidth);
		return () => window.removeEventListener("resize", updateWidth);
	}, [width]);
	const hasMounted = useRef(false);
	useLayoutEffect(() => {
		if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
		if (!window.matchMedia("(min-width: 768px)").matches) return;
		if (isSidebarOpen) {
			if (hasMounted.current) document.body.style.transition = `margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease`;
			document.body.style.marginInlineEnd = widthToMargin(sidebarWidth);
		} else if (hasMounted.current) {
			document.body.style.transition = `margin-inline-end ${SIDEBAR_TRANSITION_MS}ms ease`;
			document.body.style.marginInlineEnd = "";
		}
		hasMounted.current = true;
		return () => {
			document.body.style.marginInlineEnd = "";
			document.body.style.transition = "";
		};
	}, [isSidebarOpen, sidebarWidth]);
	const headerElement = renderSlot(header, CopilotModalHeader, {});
	return /* @__PURE__ */ jsxs(Fragment, { children: [renderSlot(toggleButton, CopilotChatToggleButton, {}), /* @__PURE__ */ jsx("aside", {
		ref: sidebarRef,
		"data-copilotkit": true,
		"data-testid": "copilot-sidebar",
		"data-copilot-sidebar": true,
		className: cn("copilotKitSidebar copilotKitWindow", "cpk:fixed cpk:right-0 cpk:top-0 cpk:z-[1200] cpk:flex", "cpk:h-[100vh] cpk:h-[100dvh] cpk:max-h-screen", "cpk:w-full", "cpk:border-l cpk:border-border cpk:bg-background cpk:text-foreground cpk:shadow-xl", "cpk:transition-transform cpk:duration-300 cpk:ease-out", isSidebarOpen ? "cpk:translate-x-0" : "cpk:translate-x-full cpk:pointer-events-none"),
		style: {
			["--sidebar-width"]: widthToCss(sidebarWidth),
			paddingTop: "env(safe-area-inset-top)",
			paddingBottom: "env(safe-area-inset-bottom)"
		},
		"aria-hidden": !isSidebarOpen,
		"aria-label": "Copilot chat sidebar",
		role: "complementary",
		children: /* @__PURE__ */ jsxs("div", {
			className: "cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden",
			children: [headerElement, /* @__PURE__ */ jsx("div", {
				className: "cpk:flex-1 cpk:overflow-hidden",
				"data-sidebar-chat": true,
				children: /* @__PURE__ */ jsx(CopilotChatView_default, { ...props })
			})]
		})
	})] });
}
CopilotSidebarView.displayName = "CopilotSidebarView";
(function(_CopilotSidebarView) {
	_CopilotSidebarView.WelcomeScreen = ({ welcomeMessage, input, suggestionView, className, children, ...props }) => {
		const BoundWelcomeMessage = renderSlot(welcomeMessage, CopilotChatView_default.WelcomeMessage, {});
		if (children) return /* @__PURE__ */ jsx("div", {
			"data-copilotkit": true,
			style: { display: "contents" },
			children: children({
				welcomeMessage: BoundWelcomeMessage,
				input,
				suggestionView,
				className,
				...props
			})
		});
		return /* @__PURE__ */ jsxs("div", {
			className: cn("cpk:h-full cpk:flex cpk:flex-col", className),
			...props,
			children: [/* @__PURE__ */ jsx("div", {
				className: "cpk:flex-1 cpk:flex cpk:flex-col cpk:items-center cpk:justify-center cpk:px-4",
				children: BoundWelcomeMessage
			}), /* @__PURE__ */ jsx("div", {
				className: "cpk:px-8 cpk:pb-4",
				children: /* @__PURE__ */ jsxs("div", {
					className: "cpk:max-w-3xl cpk:mx-auto",
					children: [/* @__PURE__ */ jsx("div", {
						className: "cpk:mb-4 cpk:flex cpk:justify-center",
						children: suggestionView
					}), input]
				})
			})]
		});
	};
})(CopilotSidebarView || (CopilotSidebarView = {}));

//#endregion
export { CopilotSidebarView };
//# sourceMappingURL=CopilotSidebarView.mjs.map