@copilotkit/react-core
Version:
<div align="center"> <a href="https://copilotkit.ai" target="_blank"> <img src="https://github.com/copilotkit/copilotkit/raw/main/assets/banner.png" alt="CopilotKit Logo"> </a>
226 lines (225 loc) • 7.49 kB
JavaScript
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/components/usage-banner.tsx
var usage_banner_exports = {};
__export(usage_banner_exports, {
UsageBanner: () => UsageBanner,
renderCopilotKitUsage: () => renderCopilotKitUsage
});
module.exports = __toCommonJS(usage_banner_exports);
var import_shared = require("@copilotkit/shared");
var import_jsx_runtime = require("react/jsx-runtime");
var defaultIcons = {
[import_shared.Severity.Error]: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"svg",
{
viewBox: "0 0 24 24",
width: "20",
height: "20",
stroke: "currentColor",
strokeWidth: "2",
fill: "none",
strokeLinecap: "round",
strokeLinejoin: "round",
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
]
}
)
};
function UsageBanner({
severity = import_shared.Severity.Error,
message = "",
icon,
actions
}) {
if (!message || !severity) {
return null;
}
const Icon = icon || defaultIcons[severity];
const bgColor = {
info: "#dbeafe",
warning: "#fef3c7",
error: "#fee2e2"
}[severity];
const textColor = {
info: "#1e40af",
warning: "#854d0e",
error: "#991b1b"
}[severity];
const iconColor = {
info: "#3b82f6",
warning: "#eab308",
error: "#ef4444"
}[severity];
const primaryButtonColor = {
info: "#3b82f6",
warning: "#eab308",
error: "#ef4444"
}[severity];
const primaryButtonHoverColor = {
info: "#2563eb",
warning: "#ca8a04",
error: "#dc2626"
}[severity];
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
style: {
position: "fixed",
bottom: "16px",
left: "50%",
transform: "translateX(-50%)",
maxWidth: "90%",
zIndex: 9999
},
children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
style: {
display: "flex",
flexWrap: "wrap",
alignItems: "center",
gap: "12px",
borderRadius: "9999px",
border: "1px solid #e5e7eb",
backgroundColor: bgColor,
padding: "8px 16px",
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1)"
},
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: iconColor }, children: Icon }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"span",
{
style: {
flex: 1,
fontSize: "14px",
fontWeight: 500,
color: textColor,
whiteSpace: "normal",
wordBreak: "break-word"
},
children: message
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
"div",
{
style: {
display: "flex",
gap: "8px",
flexWrap: "wrap"
},
children: [
(actions == null ? void 0 : actions.secondary) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"button",
{
onClick: actions.secondary.onClick,
style: {
borderRadius: "9999px",
padding: "4px 12px",
fontSize: "14px",
fontWeight: 500,
color: textColor,
backgroundColor: "transparent",
border: "none",
cursor: "pointer",
transition: "background-color 0.2s"
},
onMouseOver: (e) => e.currentTarget.style.backgroundColor = "rgba(255,255,255,0.5)",
onMouseOut: (e) => e.currentTarget.style.backgroundColor = "transparent",
children: actions.secondary.label
}
),
(actions == null ? void 0 : actions.primary) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"button",
{
onClick: actions.primary.onClick,
style: {
borderRadius: "9999px",
padding: "4px 12px",
fontSize: "14px",
fontWeight: 500,
color: "#fff",
backgroundColor: primaryButtonColor,
border: "none",
cursor: "pointer",
transition: "background-color 0.2s"
},
onMouseOver: (e) => e.currentTarget.style.backgroundColor = primaryButtonHoverColor,
onMouseOut: (e) => e.currentTarget.style.backgroundColor = primaryButtonColor,
children: actions.primary.label
}
)
]
}
)
]
}
)
}
);
}
function renderCopilotKitUsage(error) {
switch (error.name) {
case import_shared.ERROR_NAMES.CONFIGURATION_ERROR:
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageBanner, { severity: error.severity, message: error.message });
case import_shared.ERROR_NAMES.MISSING_PUBLIC_API_KEY_ERROR:
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
UsageBanner,
{
severity: error.severity,
message: error.message,
actions: {
primary: {
label: "Sign In",
onClick: () => {
window.location.href = "https://cloud.copilotkit.ai";
}
}
}
}
);
case import_shared.ERROR_NAMES.UPGRADE_REQUIRED_ERROR:
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
UsageBanner,
{
severity: error.severity,
message: error.message,
actions: {
primary: {
label: "Upgrade",
onClick: () => {
window.location.href = "https://copilotkit.ai/";
}
}
}
}
);
}
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
UsageBanner,
renderCopilotKitUsage
});
//# sourceMappingURL=usage-banner.js.map