@copilotkit/react-core
Version:
<img src="https://github.com/user-attachments/assets/0a6b64d9-e193-4940-a3f6-60334ac34084" alt="banner" style="border-radius: 12px; border: 2px solid #d6d4fa;" />
310 lines (308 loc) • 11.2 kB
JavaScript
import {
__spreadProps,
__spreadValues
} from "./chunk-SKC7AJIV.mjs";
// src/components/toast/toast-provider.tsx
import { createContext, useContext, useState, useCallback } from "react";
import { Severity } from "@copilotkit/shared";
import { jsx, jsxs } from "react/jsx-runtime";
var ToastContext = createContext(void 0);
function getErrorSeverity(error) {
if (error.severity) {
switch (error.severity) {
case Severity.CRITICAL:
return "critical";
case Severity.WARNING:
return "warning";
case Severity.INFO:
return "info";
default:
return "info";
}
}
const message = error.message.toLowerCase();
if (message.includes("api key") || message.includes("401") || message.includes("unauthorized") || message.includes("authentication") || message.includes("incorrect api key")) {
return "critical";
}
return "info";
}
function getErrorColors(severity) {
switch (severity) {
case "critical":
return {
background: "#fee2e2",
border: "#dc2626",
text: "#7f1d1d",
icon: "#dc2626"
};
case "warning":
return {
background: "#fef3c7",
border: "#d97706",
text: "#78350f",
icon: "#d97706"
};
case "info":
return {
background: "#dbeafe",
border: "#2563eb",
text: "#1e3a8a",
icon: "#2563eb"
};
}
}
function useToast() {
const context = useContext(ToastContext);
if (!context) {
throw new Error("useToast must be used within a ToastProvider");
}
return context;
}
function ToastProvider({
enabled,
children
}) {
const [toasts, setToasts] = useState([]);
const [bannerError, setBannerErrorState] = useState(null);
const removeToast = useCallback((id) => {
setToasts((prev) => prev.filter((toast) => toast.id !== id));
}, []);
const addToast = useCallback(
(toast) => {
var _a;
if (!enabled) {
return;
}
const id = (_a = toast.id) != null ? _a : Math.random().toString(36).substring(2, 9);
setToasts((currentToasts) => {
if (currentToasts.find((toast2) => toast2.id === id))
return currentToasts;
return [...currentToasts, __spreadProps(__spreadValues({}, toast), { id })];
});
if (toast.duration) {
setTimeout(() => {
removeToast(id);
}, toast.duration);
}
},
[enabled, removeToast]
);
const setBannerError = useCallback(
(error) => {
if (!enabled && error !== null) {
return;
}
setBannerErrorState(error);
},
[enabled]
);
const addGraphQLErrorsToast = useCallback((errors) => {
console.warn("addGraphQLErrorsToast is deprecated. All errors now show as banners.");
}, []);
const value = {
toasts,
addToast,
addGraphQLErrorsToast,
removeToast,
enabled,
bannerError,
setBannerError
};
return /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
bannerError && (() => {
const severity = getErrorSeverity(bannerError);
const colors = getErrorColors(severity);
return /* @__PURE__ */ jsx(
"div",
{
style: {
position: "fixed",
bottom: "20px",
left: "50%",
transform: "translateX(-50%)",
zIndex: 9999,
backgroundColor: colors.background,
border: `1px solid ${colors.border}`,
borderLeft: `4px solid ${colors.border}`,
borderRadius: "8px",
padding: "12px 16px",
fontSize: "13px",
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
backdropFilter: "blur(8px)",
maxWidth: "min(90vw, 700px)",
width: "100%",
boxSizing: "border-box",
overflow: "hidden"
},
children: /* @__PURE__ */ jsxs(
"div",
{
style: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "10px"
},
children: [
/* @__PURE__ */ jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
gap: "8px",
flex: 1,
minWidth: 0
},
children: [
/* @__PURE__ */ jsx(
"div",
{
style: {
width: "12px",
height: "12px",
borderRadius: "50%",
backgroundColor: colors.border,
flexShrink: 0
}
}
),
/* @__PURE__ */ jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
gap: "10px",
flex: 1,
minWidth: 0
},
children: [
/* @__PURE__ */ jsx(
"div",
{
style: {
color: colors.text,
lineHeight: "1.4",
fontWeight: "400",
fontSize: "13px",
flex: 1,
wordBreak: "break-all",
overflowWrap: "break-word",
maxWidth: "550px",
overflow: "hidden",
display: "-webkit-box",
WebkitLineClamp: 10,
WebkitBoxOrient: "vertical"
},
children: (() => {
let message = bannerError.message;
const jsonMatch = message.match(/'message':\s*'([^']+)'/);
if (jsonMatch) {
return jsonMatch[1];
}
message = message.split(" - ")[0];
message = message.split(": Error code")[0];
message = message.replace(/:\s*\d{3}$/, "");
message = message.replace(/See more:.*$/g, "");
message = message.trim();
return message || "Configuration error occurred.";
})()
}
),
(() => {
const message = bannerError.message;
const markdownLinkRegex = /\[([^\]]+)\]\(([^)]+)\)/g;
const plainUrlRegex = /(https?:\/\/[^\s)]+)/g;
let url = null;
let buttonText = "See More";
const markdownMatch = markdownLinkRegex.exec(message);
if (markdownMatch) {
url = markdownMatch[2];
buttonText = "See More";
} else {
const urlMatch = plainUrlRegex.exec(message);
if (urlMatch) {
url = urlMatch[0].replace(/[.,;:'"]*$/, "");
buttonText = "See More";
}
}
if (!url)
return null;
return /* @__PURE__ */ jsx(
"button",
{
onClick: () => window.open(url, "_blank", "noopener,noreferrer"),
style: {
background: colors.border,
color: "white",
border: "none",
borderRadius: "5px",
padding: "4px 10px",
fontSize: "11px",
fontWeight: "500",
cursor: "pointer",
transition: "all 0.2s ease",
flexShrink: 0
},
onMouseEnter: (e) => {
e.currentTarget.style.opacity = "0.9";
e.currentTarget.style.transform = "translateY(-1px)";
},
onMouseLeave: (e) => {
e.currentTarget.style.opacity = "1";
e.currentTarget.style.transform = "translateY(0)";
},
children: buttonText
}
);
})()
]
}
)
]
}
),
/* @__PURE__ */ jsx(
"button",
{
onClick: () => setBannerError(null),
style: {
background: "transparent",
border: "none",
color: colors.text,
cursor: "pointer",
padding: "2px",
borderRadius: "3px",
fontSize: "14px",
lineHeight: "1",
opacity: 0.6,
transition: "all 0.2s ease",
flexShrink: 0
},
title: "Dismiss",
onMouseEnter: (e) => {
e.currentTarget.style.opacity = "1";
e.currentTarget.style.background = "rgba(0, 0, 0, 0.05)";
},
onMouseLeave: (e) => {
e.currentTarget.style.opacity = "0.6";
e.currentTarget.style.background = "transparent";
},
children: "\xD7"
}
)
]
}
)
}
);
})(),
children
] });
}
export {
useToast,
ToastProvider
};
//# sourceMappingURL=chunk-EFL5OBKN.mjs.map