@copilotkit/react-ui
Version:
<img src="https://github.com/user-attachments/assets/0a6b64d9-e193-4940-a3f6-60334ac34084" alt="banner" style="border-radius: 12px; border: 2px solid #d6d4fa;" />
1,346 lines (1,329 loc) • 107 kB
JavaScript
"use client";
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
//#region \0rolldown/runtime.js
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
key = keys[i];
if (!__hasOwnProp.call(to, key) && key !== except) {
__defProp(to, key, {
get: ((k) => from[k]).bind(null, key),
enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
});
}
}
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
value: mod,
enumerable: true
}) : target, mod));
//#endregion
let react = require("react");
react = __toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
let _copilotkit_react_core = require("@copilotkit/react-core");
let _copilotkit_shared = require("@copilotkit/shared");
let _headlessui_react = require("@headlessui/react");
let react_markdown = require("react-markdown");
react_markdown = __toESM(react_markdown);
let react_syntax_highlighter = require("react-syntax-highlighter");
let remark_gfm = require("remark-gfm");
remark_gfm = __toESM(remark_gfm);
let remark_math = require("remark-math");
remark_math = __toESM(remark_math);
let rehype_raw = require("rehype-raw");
rehype_raw = __toESM(rehype_raw);
let rehype_sanitize = require("rehype-sanitize");
rehype_sanitize = __toESM(rehype_sanitize);
let _copilotkit_runtime_client_gql = require("@copilotkit/runtime-client-gql");
//#region src/components/chat/Icons.tsx
const OpenIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
fill: "currentColor",
width: "24",
height: "24",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
transform: "translate(24, 0) scale(-1, 1)",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
fillRule: "evenodd",
d: "M5.337 21.718a6.707 6.707 0 01-.533-.074.75.75 0 01-.44-1.223 3.73 3.73 0 00.814-1.686c.023-.115-.022-.317-.254-.543C3.274 16.587 2.25 14.41 2.25 12c0-5.03 4.428-9 9.75-9s9.75 3.97 9.75 9c0 5.03-4.428 9-9.75 9-.833 0-1.643-.097-2.417-.279a6.721 6.721 0 01-4.246.997z",
clipRule: "evenodd"
})
})
});
const CloseIcon$1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
strokeWidth: "1.5",
stroke: "currentColor",
width: "24",
height: "24",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
})
});
const HeaderCloseIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
strokeWidth: "1.5",
stroke: "currentColor",
width: "24",
height: "24",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M6 18L18 6M6 6l12 12"
})
});
const SendIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
strokeWidth: "1.5",
stroke: "currentColor",
width: "24",
height: "24",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M12 19V5m0 0l-7 7m7-7l7 7"
})
});
const MicrophoneIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
strokeWidth: "1.5",
stroke: "currentColor",
width: "24",
height: "24",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z"
})
});
const StopIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
strokeWidth: "1.5",
stroke: "currentColor",
width: "24",
height: "24",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M5.25 7.5A2.25 2.25 0 017.5 5.25h9a2.25 2.25 0 012.25 2.25v9a2.25 2.25 0 01-2.25 2.25h-9a2.25 2.25 0 01-2.25-2.25v-9z"
})
});
const RegenerateIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
strokeWidth: "2",
stroke: "currentColor",
width: "16",
height: "16",
style: {
minWidth: "16px",
minHeight: "16px"
},
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
})
});
const CopyIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
strokeWidth: "2",
stroke: "currentColor",
width: "16",
height: "16",
style: {
minWidth: "16px",
minHeight: "16px"
},
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 01-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 011.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 00-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 01-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 00-3.375-3.375h-1.5a1.125 1.125 0 01-1.125-1.125v-1.5a3.375 3.375 0 00-3.375-3.375H9.75"
})
});
const SmallSpinnerIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: "copilotKitSpinner",
style: {
width: "13px",
height: "13px"
}
});
const SpinnerIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: "copilotKitSpinner",
style: {
width: "24px",
height: "24px"
}
});
const ActivityIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
style: {
display: "flex",
alignItems: "center",
gap: "4px"
},
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: "copilotKitActivityDot",
style: { animationDelay: "0s" }
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: "copilotKitActivityDot",
style: { animationDelay: "0.2s" }
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: "copilotKitActivityDot",
style: { animationDelay: "0.4s" }
})
]
});
const ThumbsUpIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
strokeWidth: "2",
stroke: "currentColor",
width: "16",
height: "16",
style: {
minWidth: "16px",
minHeight: "16px"
},
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z"
})
});
const ThumbsDownIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
strokeWidth: "2",
stroke: "currentColor",
width: "16",
height: "16",
style: {
minWidth: "16px",
minHeight: "16px"
},
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M7.5 15h2.25m8.024-9.75c.011.05.028.1.052.148.591 1.2.924 2.55.924 3.977a8.96 8.96 0 01-.999 4.125m.023-8.25c-.076-.365.183-.75.575-.75h.908c.889 0 1.713.518 1.972 1.368.339 1.11.521 2.287.521 3.507 0 1.553-.295 3.036-.831 4.398C20.613 14.547 19.833 15 19 15h-1.053c-.472 0-.745-.556-.5-.96a8.95 8.95 0 00.303-.54m.023-8.25H16.48a4.5 4.5 0 01-1.423-.23l-3.114-1.04a4.5 4.5 0 00-1.423-.23H6.504c-.618 0-1.217.247-1.605.729A11.95 11.95 0 002.25 12c0 .434.023.863.068 1.285C2.427 14.306 3.346 15 4.372 15h3.126c.618 0 .991.724.725 1.282A7.471 7.471 0 007.5 19.5a2.25 2.25 0 002.25 2.25.75.75 0 00.75-.75v-.633c0-.573.11-1.14.322-1.672.304-.76.93-1.33 1.653-1.715a9.04 9.04 0 002.86-2.4c.498-.634 1.226-1.08 2.032-1.08h.384"
})
});
const DownloadIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
strokeWidth: "2",
stroke: "currentColor",
width: "16",
height: "16",
style: {
minWidth: "16px",
minHeight: "16px"
},
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3"
})
});
const UploadIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
strokeWidth: "1.5",
stroke: "currentColor",
width: "24",
height: "24",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M12 4.5v15m7.5-7.5h-15"
})
});
const CheckIcon$1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
strokeWidth: "2",
stroke: "currentColor",
width: "16",
height: "16",
style: {
minWidth: "16px",
minHeight: "16px"
},
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M4.5 12.75l6 6 9-13.5"
})
});
//#endregion
//#region src/components/chat/ChatContext.tsx
const ChatContext = react.default.createContext(void 0);
function useChatContext() {
const context = react.default.useContext(ChatContext);
if (context === void 0) throw new Error("Context not found. Did you forget to wrap your app in a <ChatContextProvider> component?");
return context;
}
const ChatContextProvider = ({ labels, icons, children, open, setOpen }) => {
const memoizedLabels = (0, react.useMemo)(() => ({
initial: "",
title: "CopilotKit",
placeholder: "Type a message...",
error: "❌ An error occurred. Please try again.",
stopGenerating: "Stop generating",
regenerateResponse: "Regenerate response",
copyToClipboard: "Copy to clipboard",
thumbsUp: "Thumbs up",
thumbsDown: "Thumbs down",
copied: "Copied!",
...labels
}), [labels]);
const memoizedIcons = (0, react.useMemo)(() => ({
openIcon: OpenIcon,
closeIcon: CloseIcon$1,
headerCloseIcon: HeaderCloseIcon,
sendIcon: SendIcon,
activityIcon: ActivityIcon,
spinnerIcon: SpinnerIcon,
stopIcon: StopIcon,
regenerateIcon: RegenerateIcon,
pushToTalkIcon: MicrophoneIcon,
copyIcon: CopyIcon,
thumbsUpIcon: ThumbsUpIcon,
thumbsDownIcon: ThumbsDownIcon,
uploadIcon: UploadIcon,
...icons
}), [icons]);
const context = (0, react.useMemo)(() => ({
labels: memoizedLabels,
icons: memoizedIcons,
open,
setOpen
}), [
memoizedLabels,
memoizedIcons,
open,
setOpen
]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChatContext.Provider, {
value: context,
children
});
};
//#endregion
//#region src/components/chat/Window.tsx
const Window = ({ children, clickOutsideToClose, shortcut, hitEscapeToClose }) => {
const windowRef = react.default.useRef(null);
(0, _copilotkit_react_core.useCopilotContext)();
const { open, setOpen } = useChatContext();
const handleClickOutside = (0, react.useCallback)((event) => {
if (!clickOutsideToClose) return;
const parentElement = windowRef.current?.parentElement;
let className = "";
if (event.target instanceof HTMLElement) className = event.target.className;
if (open && parentElement && !parentElement.contains(event.target) && !className.includes("copilotKitDebugMenu")) setOpen(false);
}, [
clickOutsideToClose,
open,
setOpen
]);
const handleKeyDown = (0, react.useCallback)((event) => {
const target = event.target;
const isInput = target.tagName === "INPUT" || target.tagName === "SELECT" || target.tagName === "TEXTAREA" || target.isContentEditable;
const isDescendantOfWrapper = windowRef.current?.contains(target);
if (open && event.key === "Escape" && (!isInput || isDescendantOfWrapper) && hitEscapeToClose) setOpen(false);
else if (event.key === shortcut && ((0, _copilotkit_shared.isMacOS)() && event.metaKey || !(0, _copilotkit_shared.isMacOS)() && event.ctrlKey) && (!isInput || isDescendantOfWrapper)) setOpen(!open);
}, [
hitEscapeToClose,
shortcut,
open,
setOpen
]);
const adjustForMobile = (0, react.useCallback)(() => {
const copilotKitWindow = windowRef.current;
const vv = window.visualViewport;
if (!copilotKitWindow || !vv) return;
if (window.innerWidth < 640 && open) {
copilotKitWindow.style.height = `${vv.height}px`;
copilotKitWindow.style.left = `${vv.offsetLeft}px`;
copilotKitWindow.style.top = `${vv.offsetTop}px`;
document.body.style.position = "fixed";
document.body.style.width = "100%";
document.body.style.height = `${window.innerHeight}px`;
document.body.style.overflow = "hidden";
document.body.style.touchAction = "none";
document.body.addEventListener("touchmove", preventScroll, { passive: false });
} else {
copilotKitWindow.style.height = "";
copilotKitWindow.style.left = "";
copilotKitWindow.style.top = "";
document.body.style.position = "";
document.body.style.height = "";
document.body.style.width = "";
document.body.style.overflow = "";
document.body.style.top = "";
document.body.style.touchAction = "";
document.body.removeEventListener("touchmove", preventScroll);
}
}, [open]);
(0, react.useEffect)(() => {
document.addEventListener("mousedown", handleClickOutside);
document.addEventListener("keydown", handleKeyDown);
if (window.visualViewport) {
window.visualViewport.addEventListener("resize", adjustForMobile);
adjustForMobile();
}
return () => {
document.removeEventListener("mousedown", handleClickOutside);
document.removeEventListener("keydown", handleKeyDown);
if (window.visualViewport) window.visualViewport.removeEventListener("resize", adjustForMobile);
};
}, [
adjustForMobile,
handleClickOutside,
handleKeyDown
]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `copilotKitWindow ${open ? " open" : ""}`,
ref: windowRef,
children
});
};
const preventScroll = (event) => {
let targetElement = event.target;
const hasParentWithClass = (element, className) => {
while (element && element !== document.body) {
if (element.classList.contains(className)) return true;
element = element.parentElement;
}
return false;
};
if (!hasParentWithClass(targetElement, "copilotKitMessages")) event.preventDefault();
};
//#endregion
//#region src/components/chat/Button.tsx
const Button = ({}) => {
const { open, setOpen, icons } = useChatContext();
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
onClick: () => setOpen(!open),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
className: `copilotKitButton ${open ? "open" : ""}`,
"aria-label": open ? "Close Chat" : "Open Chat",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: "copilotKitButtonIcon copilotKitButtonIconOpen",
children: icons.openIcon
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: "copilotKitButtonIcon copilotKitButtonIconClose",
children: icons.closeIcon
})]
})
});
};
//#endregion
//#region src/components/dev-console/utils.ts
async function getPublishedCopilotKitVersion(current, forceCheck = false) {
const LOCAL_STORAGE_KEY = "__copilotkit_version_check__";
const serializedVersion = localStorage.getItem(LOCAL_STORAGE_KEY);
if (serializedVersion && !forceCheck) try {
const parsedVersion = JSON.parse(serializedVersion);
const oneHour = 3600 * 1e3;
const now = (/* @__PURE__ */ new Date()).getTime();
if (parsedVersion.current === current && now - new Date(parsedVersion.lastChecked).getTime() < oneHour) return parsedVersion;
} catch (error) {
console.error("Failed to parse CopilotKitVersion from localStorage", error);
}
try {
const data = await (await fetch("https://api.cloud.copilotkit.ai/check-for-updates", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ packages: [{
packageName: "@copilotkit/shared",
packageVersion: current
}] })
})).json();
const version = {
current,
lastChecked: (/* @__PURE__ */ new Date()).getTime(),
latest: data.packages[0].latestVersion,
severity: data.packages[0].severity,
advisory: data.packages[0].advisory || null
};
localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(version));
return version;
} catch (error) {
console.error("Failed to check for updates", error);
throw error;
}
}
function logReadables(context) {
console.log("%cCurrent Readables:", "font-size: 16px; font-weight: bold;");
const readables = context.getContextString([], _copilotkit_react_core.defaultCopilotContextCategories).trim();
if (readables.length === 0) {
console.log("No readables found");
return;
}
console.log(readables);
}
function logActions(context) {
console.log("%cCurrent Actions:", "font-size: 16px; font-weight: bold;");
if (Object.values(context.actions).length === 0) {
console.log("No actions found");
return;
}
for (const action of Object.values(context.actions)) {
console.group(action.name);
console.log("name", action.name);
console.log("description", action.description);
console.log("parameters", action.parameters);
console.groupEnd();
}
}
function logMessages(context) {
console.log("%cCurrent Messages:", "font-size: 16px; font-weight: bold;");
if (context.messages.length === 0) {
console.log("No messages found");
return;
}
const tableData = context.messages.map((message) => {
if (message.isTextMessage()) return {
id: message.id,
type: "TextMessage",
role: message.role,
name: void 0,
scope: void 0,
content: message.content
};
else if (message.isActionExecutionMessage()) return {
id: message.id,
type: "ActionExecutionMessage",
role: void 0,
name: message.name,
scope: message.parentMessageId,
content: message.arguments
};
else if (message.isResultMessage()) return {
id: message.id,
type: "ResultMessage",
role: void 0,
name: message.actionName,
scope: message.actionExecutionId,
content: message.result
};
else if (message.isAgentStateMessage()) return {
id: message.id,
type: `AgentStateMessage (running: ${message.running})`,
role: message.role,
name: void 0,
scope: message.threadId,
content: message.state
};
});
console.table(tableData);
}
//#endregion
//#region src/components/dev-console/icons.tsx
const ExclamationMarkTriangleIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
width: "13.3967723px",
height: "12px",
viewBox: "0 0 13.3967723 12",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
id: "Page-1",
stroke: "none",
strokeWidth: "1",
fill: "none",
fillRule: "evenodd",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
id: "exclamation-triangle",
fill: "#CD2121",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M5.39935802,0.75 C5.97670802,-0.25 7.42007802,-0.25 7.99742802,0.75 L13.193588,9.75 C13.770888,10.75 13.049288,12 11.894588,12 L1.50223802,12 C0.34753802,12 -0.37414898,10.75 0.20319802,9.75 L5.39935802,0.75 Z M6.69838802,2.5 C7.11260802,2.5 7.44838802,2.83579 7.44838802,3.25 L7.44838802,6.25 C7.44838802,6.66421 7.11260802,7 6.69838802,7 C6.28417802,7 5.94838802,6.66421 5.94838802,6.25 L5.94838802,3.25 C5.94838802,2.83579 6.28417802,2.5 6.69838802,2.5 Z M6.69838802,10.5 C7.25067802,10.5 7.69838802,10.0523 7.69838802,9.5 C7.69838802,8.9477 7.25067802,8.5 6.69838802,8.5 C6.14610802,8.5 5.69838802,8.9477 5.69838802,9.5 C5.69838802,10.0523 6.14610802,10.5 6.69838802,10.5 Z",
id: "Shape"
})
})
})
});
const ExclamationMarkIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
width: "14px",
height: "14px",
viewBox: "0 0 14 14",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
id: "Page-1",
stroke: "none",
strokeWidth: "1",
fill: "none",
fillRule: "evenodd",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
id: "exclamation-circle",
fill: "#EC662C",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M7,14 C10.866,14 14,10.866 14,7 C14,3.13401 10.866,0 7,0 C3.13401,0 0,3.13401 0,7 C0,10.866 3.13401,14 7,14 Z M7,3 C7.41421,3 7.75,3.33579 7.75,3.75 L7.75,6.75 C7.75,7.16421 7.41421,7.5 7,7.5 C6.58579,7.5 6.25,7.16421 6.25,6.75 L6.25,3.75 C6.25,3.33579 6.58579,3 7,3 Z M7,11 C7.55228,11 8,10.5523 8,10 C8,9.4477 7.55228,9 7,9 C6.44772,9 6,9.4477 6,10 C6,10.5523 6.44772,11 7,11 Z",
id: "Shape"
})
})
})
});
const ChevronDownIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
width: "7px",
height: "4px",
viewBox: "0 0 7 4",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
fill: "currentColor",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
id: "Page-1",
stroke: "none",
strokeWidth: "1",
fill: "none",
fillRule: "evenodd",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
id: "Group",
fill: "currentColor",
fillRule: "nonzero",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M3.71690723,3.90271086 C3.59268176,4.03242971 3.39143629,4.03242971 3.26721082,3.90271086 L0.0853966595,0.57605615 C-0.0314221035,0.444981627 -0.0279751448,0.240725043 0.0931934622,0.114040675 C0.214362069,-0.0126436935 0.409725445,-0.0162475626 0.535093061,0.105888951 L3.49205902,3.19746006 L6.44902499,0.105888951 C6.52834574,0.0168884389 6.64780588,-0.0197473458 6.7605411,0.0103538404 C6.87327633,0.0404550266 6.96130636,0.132492308 6.99009696,0.250359396 C7.01888756,0.368226483 6.98384687,0.493124608 6.89872139,0.57605615 L3.71690723,3.90271086 Z",
id: "Path"
})
})
})
});
const CheckIcon = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
width: "14px",
height: "14px",
viewBox: "0 0 14 14",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
id: "Page-1",
stroke: "none",
strokeWidth: "1",
fill: "none",
fillRule: "evenodd",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
id: "Group-2",
transform: "translate(-118, 0)",
fill: "#1BC030",
fillRule: "nonzero",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("g", {
id: "Group",
transform: "translate(118, 0)",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
d: "M0,7 C0,3.13384615 3.13384615,0 7,0 C10.8661538,0 14,3.13384615 14,7 C14,10.8661538 10.8661538,14 7,14 C3.13384615,14 0,10.8661538 0,7 Z M9.59179487,5.69764103 C9.70905818,5.54139023 9.73249341,5.33388318 9.65303227,5.15541491 C9.57357113,4.97694665 9.40367989,4.85551619 9.20909814,4.83811118 C9.01451638,4.82070616 8.82577109,4.91005717 8.71589744,5.07158974 L6.39261538,8.32389744 L5.22666667,7.15794872 C5.01450582,6.96025518 4.68389046,6.9660885 4.47883563,7.17114332 C4.27378081,7.37619815 4.26794748,7.70681351 4.46564103,7.91897436 L6.08102564,9.53435897 C6.19289944,9.64614839 6.3482622,9.70310251 6.50588106,9.69010587 C6.66349993,9.67710922 6.80743532,9.59547613 6.89948718,9.46687179 L9.59179487,5.69764103 L9.59179487,5.69764103 Z",
id: "Shape"
})
})
})
})
});
//#endregion
//#region src/components/help-modal/icons.tsx
const CloseIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
strokeWidth: "1.5",
stroke: "currentColor",
width: "20",
height: "20",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M6 18L18 6M6 6l12 12"
})
});
//#endregion
//#region src/components/help-modal/modal.tsx
function CopilotKitHelpModal() {
const [showHelpModal, setShowHelpModal] = (0, react.useState)(false);
const buttonRef = (0, react.useRef)(null);
const popoverRef = (0, react.useRef)(null);
(0, react.useEffect)(() => {
const handleClickOutside = (event) => {
if (popoverRef.current && !popoverRef.current.contains(event.target) && buttonRef.current && !buttonRef.current.contains(event.target)) setShowHelpModal(false);
};
if (showHelpModal) document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [showHelpModal]);
const HelpButton = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
ref: buttonRef,
onClick: () => setShowHelpModal(!showHelpModal),
className: "copilotKitDebugMenuTriggerButton relative",
"aria-label": "Open Help",
children: "Help"
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: "relative",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(HelpButton, {}), showHelpModal && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
ref: popoverRef,
className: "absolute mt-2 z-50",
style: {
top: "100%",
right: "-120px",
width: "380px"
},
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: "copilotKitHelpModal rounded-lg shadow-xl w-full p-4 flex-col relative",
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
className: "copilotKitHelpModalCloseButton absolute text-gray-400 hover:text-gray-600 focus:outline-none",
style: {
top: "10px",
right: "10px"
},
onClick: () => setShowHelpModal(false),
"aria-label": "Close",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon, {})
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: "w-full flex mb-6 justify-center",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
className: "text-2xl font-bold",
children: "Help Options"
})
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: "space-y-4 mb-4",
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: "copilotKitHelpItemButton",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
href: "https://docs.copilotkit.ai/langgraph-python/troubleshooting/common-issues",
target: "_blank",
rel: "noopener noreferrer",
children: "Visit the Troubleshooting and FAQ section in the docs"
})
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: "copilotKitHelpItemButton",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
href: "https://go.copilotkit.ai/dev-console-support-discord",
target: "_blank",
rel: "noopener noreferrer",
children: "Go to Discord Support Channel (Community Support)"
})
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: "copilotKitHelpItemButton",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
href: "https://go.copilotkit.ai/dev-console-support-slack",
target: "_blank",
rel: "noopener noreferrer",
children: "Apply for Priority Direct Slack Support"
})
})
]
})
]
})
})]
});
}
//#endregion
//#region src/components/dev-console/console.tsx
function CopilotDevConsole() {
const currentVersion = _copilotkit_shared.COPILOTKIT_VERSION;
const context = (0, _copilotkit_react_core.useCopilotContext)();
const [showDevConsole, setShowDevConsole] = (0, react.useState)(false);
(0, react.useEffect)(() => {
setShowDevConsole((0, _copilotkit_react_core.shouldShowDevConsole)(context.showDevConsole));
}, [context.showDevConsole]);
const dontRunTwiceInDevMode = (0, react.useRef)(false);
const [versionStatus, setVersionStatus] = (0, react.useState)("unknown");
const [latestVersion, setLatestVersion] = (0, react.useState)("");
const consoleRef = (0, react.useRef)(null);
const [debugButtonMode, setDebugButtonMode] = (0, react.useState)("full");
const checkForUpdates = (force = false) => {
setVersionStatus("checking");
getPublishedCopilotKitVersion(currentVersion, force).then((v) => {
setLatestVersion(v.latest);
let versionOk = false;
if (v.current === v.latest) versionOk = true;
else if (/[a-zA-Z]/.test(v.current)) versionOk = true;
if (versionOk) setVersionStatus("latest");
else if (v.severity !== "low") setVersionStatus("outdated");
else setVersionStatus("update-available");
}).catch((e) => {
console.error(e);
setVersionStatus("unknown");
});
};
(0, react.useEffect)(() => {
if (!showDevConsole) return;
if (dontRunTwiceInDevMode.current === true) return;
dontRunTwiceInDevMode.current = true;
checkForUpdates();
}, [showDevConsole]);
if (!showDevConsole) return null;
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
ref: consoleRef,
className: "copilotKitDevConsole " + (versionStatus === "update-available" ? "copilotKitDevConsoleUpgrade" : "") + (versionStatus === "outdated" ? "copilotKitDevConsoleWarnOutdated" : ""),
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(VersionInfo, {
showDevConsole: context.showDevConsole,
versionStatus,
currentVersion,
latestVersion
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotKitHelpModal, {}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(DebugMenuButton, {
setShowDevConsole,
checkForUpdates,
mode: debugButtonMode
})
]
});
}
function VersionInfo({ showDevConsole, versionStatus, currentVersion, latestVersion }) {
const [copyStatus, setCopyStatus] = (0, react.useState)("");
let versionIcon = "";
let currentVersionLabel = currentVersion;
if (versionStatus === "latest") versionIcon = CheckIcon;
else if (versionStatus === "checking") versionIcon = SmallSpinnerIcon;
else if (versionStatus === "update-available") {
versionIcon = ExclamationMarkIcon;
currentVersionLabel = `${currentVersion} → ${latestVersion}`;
} else if (versionStatus === "outdated") {
versionIcon = ExclamationMarkTriangleIcon;
currentVersionLabel = `${currentVersion} → ${latestVersion}`;
}
if (showDevConsole === true) {}
const installCommand = [
`npm install`,
`@copilotkit/react-core@${latestVersion}`,
`@copilotkit/react-ui@${latestVersion}`,
`@copilotkit/react-textarea@${latestVersion}`,
`&& npm install @copilotkit/runtime@${latestVersion}`
].join(" ");
const handleCopyClick = async () => {
if (await (0, _copilotkit_shared.copyToClipboard)(installCommand.trim())) {
setCopyStatus("Command copied to clipboard!");
setTimeout(() => setCopyStatus(""), 1e3);
}
};
if (versionStatus === "update-available" || versionStatus === "outdated") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: "copilotKitVersionInfo",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", { children: [
currentVersionLabel,
" ",
versionIcon
] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
onClick: handleCopyClick,
children: copyStatus || installCommand
})]
});
return null;
}
function DebugMenuButton({ setShowDevConsole, checkForUpdates, mode }) {
const context = (0, _copilotkit_react_core.useCopilotContext)();
const messagesContext = (0, _copilotkit_react_core.useCopilotMessagesContext)();
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.Menu, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuButton, {
className: `copilotKitDebugMenuTriggerButton ${mode === "compact" ? "compact" : ""}`,
children: mode == "compact" ? "Debug" : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: ["Debug ", ChevronDownIcon] })
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_headlessui_react.MenuItems, {
transition: true,
anchor: "bottom end",
className: "copilotKitDebugMenu",
style: { zIndex: 40 },
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
className: "copilotKitDebugMenuItem",
onClick: () => logReadables(context),
children: "Log Readables"
}) }),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
className: "copilotKitDebugMenuItem",
onClick: () => logActions(context),
children: "Log Actions"
}) }),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
className: "copilotKitDebugMenuItem",
onClick: () => logMessages(messagesContext),
children: "Log Messages"
}) }),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
className: "copilotKitDebugMenuItem",
onClick: () => checkForUpdates(true),
children: "Check for Updates"
}) }),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_headlessui_react.MenuItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
className: "copilotKitDebugMenuItem",
onClick: () => setShowDevConsole(false),
children: "Hide Dev Console"
}) })
]
})] }) });
}
//#endregion
//#region src/components/chat/Header.tsx
const Header = ({}) => {
const { setOpen, icons, labels } = useChatContext();
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: "copilotKitHeader",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: labels.title }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: "copilotKitHeaderControls",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopilotDevConsole, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
onClick: () => setOpen(false),
"aria-label": "Close",
className: "copilotKitHeaderCloseButton",
children: icons.headerCloseIcon
})]
})]
});
};
//#endregion
//#region src/components/chat/AttachmentRenderer.tsx
const ImageAttachment = (0, react.memo)(function ImageAttachment({ src, className }) {
const [error, setError] = (0, react.useState)(false);
if (error) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `copilotKitImageRendering copilotKitImageRenderingError ${className ?? ""}`,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: "copilotKitImageRenderingErrorMessage",
children: "Failed to load image"
})
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `copilotKitImageRendering ${className ?? ""}`,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
src,
alt: "Image attachment",
className: "copilotKitImageRenderingImage",
onError: () => setError(true)
})
});
});
const AudioAttachment = (0, react.memo)(function AudioAttachment({ src, filename, className }) {
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: `copilotKitAttachment copilotKitAttachmentAudio ${className ?? ""}`,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("audio", {
src,
controls: true,
preload: "metadata"
}), filename && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: "copilotKitAttachmentFilename",
children: filename
})]
});
});
const VideoAttachment = (0, react.memo)(function VideoAttachment({ src, className }) {
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `copilotKitAttachment copilotKitAttachmentVideo ${className ?? ""}`,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("video", {
src,
controls: true,
preload: "metadata"
})
});
});
const DocumentAttachment = (0, react.memo)(function DocumentAttachment({ source, filename, className }) {
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: `copilotKitAttachment copilotKitAttachmentDocument ${className ?? ""}`,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: "copilotKitAttachmentDocIcon",
children: (0, _copilotkit_shared.getDocumentIcon)(source.mimeType ?? "")
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: "copilotKitAttachmentDocInfo",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: "copilotKitAttachmentDocName",
children: filename || source.mimeType || "Unknown type"
})
})]
});
});
const AttachmentRenderer = ({ type, source, filename, className }) => {
const src = (0, _copilotkit_shared.getSourceUrl)(source);
switch (type) {
case "image": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageAttachment, {
src,
className
});
case "audio": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AudioAttachment, {
src,
filename,
className
});
case "video": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoAttachment, {
src,
className
});
case "document": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocumentAttachment, {
source,
filename,
className
});
}
};
//#endregion
//#region src/components/chat/messages/UserMessage.tsx
const getTextContent = (content) => {
if (typeof content === "undefined") return;
if (typeof content === "string") return content;
return content.map((part) => {
if (part.type === "text") return part.text;
}).filter((value) => typeof value === "string" && value.length > 0).join(" ").trim() || void 0;
};
const getMediaParts = (content) => {
if (!content || typeof content === "string") return [];
return content.filter((part) => part.type === "image" || part.type === "audio" || part.type === "video" || part.type === "document");
};
const UserMessage = (props) => {
const { message, ImageRenderer } = props;
const content = message?.content;
if (message && "image" in message && Boolean(message.image)) {
const legacyImage = message.image;
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: "copilotKitMessage copilotKitUserMessage",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ImageRenderer, {
image: legacyImage,
content: getTextContent(content)
})
});
}
const textContent = getTextContent(content);
const mediaParts = getMediaParts(content);
if (mediaParts.length === 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: "copilotKitMessage copilotKitUserMessage",
children: textContent
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: "copilotKitMessage copilotKitUserMessage",
children: [textContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: textContent }), mediaParts.map((part, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AttachmentRenderer, {
type: part.type,
source: part.source
}, index))]
});
};
//#endregion
//#region src/hooks/use-copy-to-clipboard.tsx
function useCopyToClipboard({ timeout = 2e3 }) {
const [isCopied, setIsCopied] = react.useState(false);
const copyToClipboard = (value) => {
if (typeof window === "undefined" || !navigator.clipboard?.writeText) return;
if (!value) return;
navigator.clipboard.writeText(value).then(() => {
setIsCopied(true);
setTimeout(() => {
setIsCopied(false);
}, timeout);
});
};
return {
isCopied,
copyToClipboard
};
}
//#endregion
//#region src/components/chat/CodeBlock.tsx
const programmingLanguages = {
javascript: ".js",
python: ".py",
java: ".java",
c: ".c",
cpp: ".cpp",
"c++": ".cpp",
"c#": ".cs",
ruby: ".rb",
php: ".php",
swift: ".swift",
"objective-c": ".m",
kotlin: ".kt",
typescript: ".ts",
go: ".go",
perl: ".pl",
rust: ".rs",
scala: ".scala",
haskell: ".hs",
lua: ".lua",
shell: ".sh",
sql: ".sql",
html: ".html",
css: ".css"
};
const generateRandomString = (length, lowercase = false) => {
const chars = "ABCDEFGHJKLMNPQRSTUVWXY3456789";
let result = "";
for (let i = 0; i < length; i++) result += chars.charAt(Math.floor(Math.random() * 30));
return lowercase ? result.toLowerCase() : result;
};
const CodeBlock = (0, react.memo)(({ language, value }) => {
const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2e3 });
const [SyntaxHighlighter, setSyntaxHighlighter] = (0, react.useState)(() => react_syntax_highlighter.Light);
(0, react.useEffect)(() => {
try {
setSyntaxHighlighter(() => react_syntax_highlighter.Prism);
} catch {
setSyntaxHighlighter(() => react_syntax_highlighter.Light);
}
}, []);
const downloadAsFile = () => {
if (typeof window === "undefined") return;
const fileExtension = programmingLanguages[language] || ".file";
const suggestedFileName = `file-${generateRandomString(3, true)}${fileExtension}`;
const fileName = window.prompt("Enter file name", suggestedFileName);
if (!fileName) return;
const blob = new Blob([value], { type: "text/plain" });
const url = URL.createObjectURL(blob);
const link = document.createElement("a");
link.download = fileName;
link.href = url;
link.style.display = "none";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
};
const onCopy = () => {
if (isCopied) return;
copyToClipboard(value);
};
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: "copilotKitCodeBlock",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: "copilotKitCodeBlockToolbar",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: "copilotKitCodeBlockToolbarLanguage",
children: language
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: "copilotKitCodeBlockToolbarButtons",
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
className: "copilotKitCodeBlockToolbarButton",
onClick: downloadAsFile,
children: DownloadIcon
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
className: "copilotKitCodeBlockToolbarButton",
onClick: onCopy,
children: isCopied ? CheckIcon$1 : CopyIcon
})]
})]
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SyntaxHighlighter, {
language,
style: highlightStyle,
PreTag: "div",
customStyle: {
margin: 0,
borderBottomLeftRadius: "0.375rem",
borderBottomRightRadius: "0.375rem"
},
children: value
})]
});
});
CodeBlock.displayName = "CodeBlock";
const highlightStyle = {
"pre[class*=\"language-\"]": {
color: "#d4d4d4",
fontSize: "13px",
textShadow: "none",
fontFamily: "Menlo, Monaco, Consolas, \"Andale Mono\", \"Ubuntu Mono\", \"Courier New\", monospace",
direction: "ltr",
textAlign: "left",
whiteSpace: "pre",
wordSpacing: "normal",
wordBreak: "normal",
lineHeight: "1.5",
MozTabSize: "4",
OTabSize: "4",
tabSize: "4",
WebkitHyphens: "none",
MozHyphens: "none",
msHyphens: "none",
hyphens: "none",
padding: "1em",
margin: ".5em 0",
overflow: "auto",
background: "#1e1e1e"
},
"code[class*=\"language-\"]": {
color: "#d4d4d4",
fontSize: "13px",
textShadow: "none",
fontFamily: "Menlo, Monaco, Consolas, \"Andale Mono\", \"Ubuntu Mono\", \"Courier New\", monospace",
direction: "ltr",
textAlign: "left",
whiteSpace: "pre",
wordSpacing: "normal",
wordBreak: "normal",
lineHeight: "1.5",
MozTabSize: "4",
OTabSize: "4",
tabSize: "4",
WebkitHyphens: "none",
MozHyphens: "none",
msHyphens: "none",
hyphens: "none"
},
"pre[class*=\"language-\"]::selection": {
textShadow: "none",
background: "#264F78"
},
"code[class*=\"language-\"]::selection": {
textShadow: "none",
background: "#264F78"
},
"pre[class*=\"language-\"] *::selection": {
textShadow: "none",
background: "#264F78"
},
"code[class*=\"language-\"] *::selection": {
textShadow: "none",
background: "#264F78"
},
":not(pre) > code[class*=\"language-\"]": {
padding: ".1em .3em",
borderRadius: ".3em",
color: "#db4c69",
background: "#1e1e1e"
},
".namespace": { Opacity: ".7" },
"doctype.doctype-tag": { color: "#569CD6" },
"doctype.name": { color: "#9cdcfe" },
comment: { color: "#6a9955" },
prolog: { color: "#6a9955" },
punctuation: { color: "#d4d4d4" },
".language-html .language-css .token.punctuation": { color: "#d4d4d4" },
".language-html .language-javascript .token.punctuation": { color: "#d4d4d4" },
property: { color: "#9cdcfe" },
tag: { color: "#569cd6" },
boolean: { color: "#569cd6" },
number: { color: "#b5cea8" },
constant: { color: "#9cdcfe" },
symbol: { color: "#b5cea8" },
inserted: { color: "#b5cea8" },
unit: { color: "#b5cea8" },
selector: { color: "#d7ba7d" },
"attr-name": { color: "#9cdcfe" },
string: { color: "#ce9178" },
char: { color: "#ce9178" },
builtin: { color: "#ce9178" },
deleted: { color: "#ce9178" },
".language-css .token.string.url": { textDecoration: "underline" },
operator: { color: "#d4d4d4" },
entity: { color: "#569cd6" },
"operator.arrow": { color: "#569CD6" },
atrule: { color: "#ce9178" },
"atrule.rule": { color: "#c586c0" },
"atrule.url": { color: "#9cdcfe" },
"atrule.url.function": { color: "#dcdcaa" },
"atrule.url.punctuation": { color: "#d4d4d4" },
keyword: { color: "#569CD6" },
"keyword.module": { color: "#c586c0" },
"keyword.control-flow": { color: "#c586c0" },
function: { color: "#dcdcaa" },
"function.maybe-class-name": { color: "#dcdcaa" },
regex: { color: "#d16969" },
important: { color: "#569cd6" },
italic: { fontStyle: "italic" },
"class-name": { color: "#4ec9b0" },
"maybe-class-name": { color: "#4ec9b0" },
console: { color: "#9cdcfe" },
parameter: { color: "#9cdcfe" },
interpolation: { color: "#9cdcfe" },
"punctuation.interpolation-punctuation": { color: "#569cd6" },
variable: { color: "#9cdcfe" },
"imports.maybe-class-name": { color: "#9cdcfe" },
"exports.maybe-class-name": { color: "#9cdcfe" },
escape: { color: "#d7ba7d" },
"tag.punctuation": { color: "#808080" },
cdata: { color: "#808080" },
"attr-value": { color: "#ce9178" },
"attr-value.punctuation": { color: "#ce9178" },
"attr-value.punctuation.attr-equals": { color: "#d4d4d4" },
namespace: { color: "#4ec9b0" },
"pre[class*=\"language-javascript\"]": { color: "#9cdcfe" },
"code[class*=\"language-javascript\"]": { color: "#9cdcfe" },
"pre[class*=\"language-jsx\"]": { color: "#9cdcfe" },
"code[class*=\"language-jsx\"]": { color: "#9cdcfe" },
"pre[class*=\"language-typescript\"]": { color: "#9cdcfe" },
"code[class*=\"language-typescript\"]": { color: "#9cdcfe" },
"pre[class*=\"language-tsx\"]": { color: "#9cdcfe" },
"code[class*=\"language-tsx\"]": { color: "#9cdcfe" },
"pre[class*=\"language-css\"]": { color: "#ce9178" },
"code[class*=\"language-css\"]": { color: "#ce9178" },
"pre[class*=\"language-html\"]": { color: "#d4d4d4" },
"code[class*=\"language-html\"]": { color: "#d4d4d4" },
".language-regex .token.anchor": { color: "#dcdcaa" },
".language-html .token.punctuation": { color: "#808080" },
"pre[class*=\"language-\"] > code[class*=\"language-\"]": {
position: "relative",
zIndex: "1"
},
".line-highlight.line-highlight": {
background: "#f7ebc6",
boxShadow: "inset 5px 0 0 #f7d87c",
zIndex: "0"
}
};
//#endregion
//#region src/components/chat/Markdown.tsx
const defaultComponents = {
a({ children, ...props }) {
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
className: "copilotKitMarkdownElement",
...props,
target: "_blank",
rel: "noopener noreferrer",
children
});
},
code({ children, className, inline, ...props }) {
if (Array.isArray(children) && children.length) {
if (children[0] == "▍") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
style: {
animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
marginTop: "0.25rem"
},
children: "▍"
});
children[0] = (children?.[0]).replace("`▍`", "▍");
}
const match = /language-(\w+)/.exec(className || "");
const hasLanguage = match && match[1];
const hasNewlines = String(children).includes("\n");
if (!hasLanguage && !hasNewlines) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
className: `copilotKitMarkdownElement copilotKitInlineCode ${className || ""}`,
...props,
children
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeBlock, {
language: match && match[1] || "",
value: String(children).replace(/\n$/, ""),
...props
});
},
h1: ({ chil