139 lines
6.1 KiB
JavaScript
139 lines
6.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/CopilotSidebarView.tsx
|
|
const DEFAULT_SIDEBAR_WIDTH = 480;
|
|
const SIDEBAR_TRANSITION_MS = 260;
|
|
function CopilotSidebarView({ header, toggleButton, width, defaultOpen = true, ...props }) {
|
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CopilotChatConfigurationProvider.CopilotChatConfigurationProvider, {
|
|
isModalDefaultOpen: defaultOpen,
|
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotSidebarViewInternal, {
|
|
header,
|
|
toggleButton,
|
|
width,
|
|
...props
|
|
})
|
|
});
|
|
}
|
|
function CopilotSidebarViewInternal({ header, toggleButton, width, ...props }) {
|
|
const isSidebarOpen = require_CopilotChatConfigurationProvider.useCopilotChatConfiguration()?.isModalOpen ?? false;
|
|
const sidebarRef = (0, react.useRef)(null);
|
|
const [sidebarWidth, setSidebarWidth] = (0, react.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;
|
|
};
|
|
(0, react.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 = (0, react.useRef)(false);
|
|
(0, react.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 = require_slots.renderSlot(header, require_CopilotModalHeader.CopilotModalHeader, {});
|
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [require_slots.renderSlot(toggleButton, require_CopilotChatToggleButton.default, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
|
|
ref: sidebarRef,
|
|
"data-copilotkit": true,
|
|
"data-testid": "copilot-sidebar",
|
|
"data-copilot-sidebar": true,
|
|
className: require_utils.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__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
className: "cpk:flex cpk:h-full cpk:w-full cpk:flex-col cpk:overflow-hidden",
|
|
children: [headerElement, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
className: "cpk:flex-1 cpk:overflow-hidden",
|
|
"data-sidebar-chat": true,
|
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_CopilotChatView.default, { ...props })
|
|
})]
|
|
})
|
|
})] });
|
|
}
|
|
CopilotSidebarView.displayName = "CopilotSidebarView";
|
|
(function(_CopilotSidebarView) {
|
|
_CopilotSidebarView.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.jsx)("div", {
|
|
className: "cpk:px-8 cpk:pb-4",
|
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
|
|
className: "cpk:max-w-3xl cpk:mx-auto",
|
|
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
|
|
className: "cpk:mb-4 cpk:flex cpk:justify-center",
|
|
children: suggestionView
|
|
}), input]
|
|
})
|
|
})]
|
|
});
|
|
};
|
|
})(CopilotSidebarView || (CopilotSidebarView = {}));
|
|
|
|
//#endregion
|
|
Object.defineProperty(exports, 'CopilotSidebarView', {
|
|
enumerable: true,
|
|
get: function () {
|
|
return CopilotSidebarView;
|
|
}
|
|
});
|
|
//# sourceMappingURL=CopilotSidebarView.cjs.map
|