132 lines
5.4 KiB
JavaScript
132 lines
5.4 KiB
JavaScript
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
|