@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,461 lines (1,443 loc) • 97.7 kB
JavaScript
"use client";
import * as React$1 from "react";
import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { defaultCopilotContextCategories, shouldShowDevConsole, useCopilotChatInternal, useCopilotChatSuggestions as useCopilotChatSuggestions$1, useCopilotContext, useCopilotMessagesContext } from "@copilotkit/react-core";
import { COPILOTKIT_VERSION, CopilotKitError, CopilotKitErrorCode, ErrorVisibility, Severity, copyToClipboard, exceedsMaxSize, formatFileSize, formatFileSize as formatFileSize$1, generateVideoThumbnail, getDocumentIcon, getModalityFromMimeType, getSourceUrl, isMacOS, matchesAcceptFilter, randomUUID, readFileAsBase64, styledConsole } from "@copilotkit/shared";
import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
import ReactMarkdown from "react-markdown";
import { Light, Prism } from "react-syntax-highlighter";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import rehypeRaw from "rehype-raw";
import rehypeSanitize from "rehype-sanitize";
import { aguiToGQL, gqlToAGUI } from "@copilotkit/runtime-client-gql";
//#region src/components/chat/Icons.tsx
const OpenIcon = /* @__PURE__ */ jsx("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24",
fill: "currentColor",
width: "24",
height: "24",
children: /* @__PURE__ */ jsx("g", {
transform: "translate(24, 0) scale(-1, 1)",
children: /* @__PURE__ */ 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__ */ 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__ */ jsx("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M19.5 8.25l-7.5 7.5-7.5-7.5"
})
});
const HeaderCloseIcon = /* @__PURE__ */ 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__ */ jsx("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M6 18L18 6M6 6l12 12"
})
});
const SendIcon = /* @__PURE__ */ 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__ */ jsx("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M12 19V5m0 0l-7 7m7-7l7 7"
})
});
const MicrophoneIcon = /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx("span", {
className: "copilotKitSpinner",
style: {
width: "13px",
height: "13px"
}
});
const SpinnerIcon = /* @__PURE__ */ jsx("span", {
className: "copilotKitSpinner",
style: {
width: "24px",
height: "24px"
}
});
const ActivityIcon = /* @__PURE__ */ jsxs("div", {
style: {
display: "flex",
alignItems: "center",
gap: "4px"
},
children: [
/* @__PURE__ */ jsx("span", {
className: "copilotKitActivityDot",
style: { animationDelay: "0s" }
}),
/* @__PURE__ */ jsx("span", {
className: "copilotKitActivityDot",
style: { animationDelay: "0.2s" }
}),
/* @__PURE__ */ jsx("span", {
className: "copilotKitActivityDot",
style: { animationDelay: "0.4s" }
})
]
});
const ThumbsUpIcon = /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx("path", {
strokeLinecap: "round",
strokeLinejoin: "round",
d: "M12 4.5v15m7.5-7.5h-15"
})
});
const CheckIcon$1 = /* @__PURE__ */ 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__ */ 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.createContext(void 0);
function useChatContext() {
const context = React.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 = 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 = 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 = useMemo(() => ({
labels: memoizedLabels,
icons: memoizedIcons,
open,
setOpen
}), [
memoizedLabels,
memoizedIcons,
open,
setOpen
]);
return /* @__PURE__ */ jsx(ChatContext.Provider, {
value: context,
children
});
};
//#endregion
//#region src/components/chat/Window.tsx
const Window = ({ children, clickOutsideToClose, shortcut, hitEscapeToClose }) => {
const windowRef = React.useRef(null);
useCopilotContext();
const { open, setOpen } = useChatContext();
const handleClickOutside = 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 = 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 && (isMacOS() && event.metaKey || !isMacOS() && event.ctrlKey) && (!isInput || isDescendantOfWrapper)) setOpen(!open);
}, [
hitEscapeToClose,
shortcut,
open,
setOpen
]);
const adjustForMobile = 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]);
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__ */ 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__ */ jsx("div", {
onClick: () => setOpen(!open),
children: /* @__PURE__ */ jsxs("button", {
className: `copilotKitButton ${open ? "open" : ""}`,
"aria-label": open ? "Close Chat" : "Open Chat",
children: [/* @__PURE__ */ jsx("div", {
className: "copilotKitButtonIcon copilotKitButtonIconOpen",
children: icons.openIcon
}), /* @__PURE__ */ 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([], 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__ */ 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__ */ jsx("g", {
id: "Page-1",
stroke: "none",
strokeWidth: "1",
fill: "none",
fillRule: "evenodd",
children: /* @__PURE__ */ jsx("g", {
id: "exclamation-triangle",
fill: "#CD2121",
children: /* @__PURE__ */ 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__ */ jsx("svg", {
width: "14px",
height: "14px",
viewBox: "0 0 14 14",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ jsx("g", {
id: "Page-1",
stroke: "none",
strokeWidth: "1",
fill: "none",
fillRule: "evenodd",
children: /* @__PURE__ */ jsx("g", {
id: "exclamation-circle",
fill: "#EC662C",
children: /* @__PURE__ */ 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__ */ 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__ */ jsx("g", {
id: "Page-1",
stroke: "none",
strokeWidth: "1",
fill: "none",
fillRule: "evenodd",
children: /* @__PURE__ */ jsx("g", {
id: "Group",
fill: "currentColor",
fillRule: "nonzero",
children: /* @__PURE__ */ 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__ */ jsx("svg", {
width: "14px",
height: "14px",
viewBox: "0 0 14 14",
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
children: /* @__PURE__ */ jsx("g", {
id: "Page-1",
stroke: "none",
strokeWidth: "1",
fill: "none",
fillRule: "evenodd",
children: /* @__PURE__ */ jsx("g", {
id: "Group-2",
transform: "translate(-118, 0)",
fill: "#1BC030",
fillRule: "nonzero",
children: /* @__PURE__ */ jsx("g", {
id: "Group",
transform: "translate(118, 0)",
children: /* @__PURE__ */ 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__ */ 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__ */ 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] = useState(false);
const buttonRef = useRef(null);
const popoverRef = useRef(null);
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__ */ jsx("button", {
ref: buttonRef,
onClick: () => setShowHelpModal(!showHelpModal),
className: "copilotKitDebugMenuTriggerButton relative",
"aria-label": "Open Help",
children: "Help"
});
return /* @__PURE__ */ jsxs("div", {
className: "relative",
children: [/* @__PURE__ */ jsx(HelpButton, {}), showHelpModal && /* @__PURE__ */ jsx("div", {
ref: popoverRef,
className: "absolute mt-2 z-50",
style: {
top: "100%",
right: "-120px",
width: "380px"
},
children: /* @__PURE__ */ jsxs("div", {
className: "copilotKitHelpModal rounded-lg shadow-xl w-full p-4 flex-col relative",
children: [
/* @__PURE__ */ 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__ */ jsx(CloseIcon, {})
}),
/* @__PURE__ */ jsx("div", {
className: "w-full flex mb-6 justify-center",
children: /* @__PURE__ */ jsx("h2", {
className: "text-2xl font-bold",
children: "Help Options"
})
}),
/* @__PURE__ */ jsxs("div", {
className: "space-y-4 mb-4",
children: [
/* @__PURE__ */ jsx("div", {
className: "copilotKitHelpItemButton",
children: /* @__PURE__ */ 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__ */ jsx("div", {
className: "copilotKitHelpItemButton",
children: /* @__PURE__ */ 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__ */ jsx("div", {
className: "copilotKitHelpItemButton",
children: /* @__PURE__ */ 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_VERSION;
const context = useCopilotContext();
const [showDevConsole, setShowDevConsole] = useState(false);
useEffect(() => {
setShowDevConsole(shouldShowDevConsole(context.showDevConsole));
}, [context.showDevConsole]);
const dontRunTwiceInDevMode = useRef(false);
const [versionStatus, setVersionStatus] = useState("unknown");
const [latestVersion, setLatestVersion] = useState("");
const consoleRef = useRef(null);
const [debugButtonMode, setDebugButtonMode] = 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");
});
};
useEffect(() => {
if (!showDevConsole) return;
if (dontRunTwiceInDevMode.current === true) return;
dontRunTwiceInDevMode.current = true;
checkForUpdates();
}, [showDevConsole]);
if (!showDevConsole) return null;
return /* @__PURE__ */ jsxs("div", {
ref: consoleRef,
className: "copilotKitDevConsole " + (versionStatus === "update-available" ? "copilotKitDevConsoleUpgrade" : "") + (versionStatus === "outdated" ? "copilotKitDevConsoleWarnOutdated" : ""),
children: [
/* @__PURE__ */ jsx(VersionInfo, {
showDevConsole: context.showDevConsole,
versionStatus,
currentVersion,
latestVersion
}),
/* @__PURE__ */ jsx(CopilotKitHelpModal, {}),
/* @__PURE__ */ jsx(DebugMenuButton, {
setShowDevConsole,
checkForUpdates,
mode: debugButtonMode
})
]
});
}
function VersionInfo({ showDevConsole, versionStatus, currentVersion, latestVersion }) {
const [copyStatus, setCopyStatus] = 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 copyToClipboard(installCommand.trim())) {
setCopyStatus("Command copied to clipboard!");
setTimeout(() => setCopyStatus(""), 1e3);
}
};
if (versionStatus === "update-available" || versionStatus === "outdated") return /* @__PURE__ */ jsxs("div", {
className: "copilotKitVersionInfo",
children: [/* @__PURE__ */ jsxs("p", { children: [
currentVersionLabel,
" ",
versionIcon
] }), /* @__PURE__ */ jsx("button", {
onClick: handleCopyClick,
children: copyStatus || installCommand
})]
});
return null;
}
function DebugMenuButton({ setShowDevConsole, checkForUpdates, mode }) {
const context = useCopilotContext();
const messagesContext = useCopilotMessagesContext();
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsx(MenuButton, {
className: `copilotKitDebugMenuTriggerButton ${mode === "compact" ? "compact" : ""}`,
children: mode == "compact" ? "Debug" : /* @__PURE__ */ jsxs(Fragment, { children: ["Debug ", ChevronDownIcon] })
}), /* @__PURE__ */ jsxs(MenuItems, {
transition: true,
anchor: "bottom end",
className: "copilotKitDebugMenu",
style: { zIndex: 40 },
children: [
/* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx("button", {
className: "copilotKitDebugMenuItem",
onClick: () => logReadables(context),
children: "Log Readables"
}) }),
/* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx("button", {
className: "copilotKitDebugMenuItem",
onClick: () => logActions(context),
children: "Log Actions"
}) }),
/* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx("button", {
className: "copilotKitDebugMenuItem",
onClick: () => logMessages(messagesContext),
children: "Log Messages"
}) }),
/* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ jsx("button", {
className: "copilotKitDebugMenuItem",
onClick: () => checkForUpdates(true),
children: "Check for Updates"
}) }),
/* @__PURE__ */ jsx("hr", {}),
/* @__PURE__ */ jsx(MenuItem, { children: /* @__PURE__ */ 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__ */ jsxs("div", {
className: "copilotKitHeader",
children: [/* @__PURE__ */ jsx("div", { children: labels.title }), /* @__PURE__ */ jsxs("div", {
className: "copilotKitHeaderControls",
children: [/* @__PURE__ */ jsx(CopilotDevConsole, {}), /* @__PURE__ */ jsx("button", {
onClick: () => setOpen(false),
"aria-label": "Close",
className: "copilotKitHeaderCloseButton",
children: icons.headerCloseIcon
})]
})]
});
};
//#endregion
//#region src/components/chat/AttachmentRenderer.tsx
const ImageAttachment = memo(function ImageAttachment({ src, className }) {
const [error, setError] = useState(false);
if (error) return /* @__PURE__ */ jsx("div", {
className: `copilotKitImageRendering copilotKitImageRenderingError ${className ?? ""}`,
children: /* @__PURE__ */ jsx("div", {
className: "copilotKitImageRenderingErrorMessage",
children: "Failed to load image"
})
});
return /* @__PURE__ */ jsx("div", {
className: `copilotKitImageRendering ${className ?? ""}`,
children: /* @__PURE__ */ jsx("img", {
src,
alt: "Image attachment",
className: "copilotKitImageRenderingImage",
onError: () => setError(true)
})
});
});
const AudioAttachment = memo(function AudioAttachment({ src, filename, className }) {
return /* @__PURE__ */ jsxs("div", {
className: `copilotKitAttachment copilotKitAttachmentAudio ${className ?? ""}`,
children: [/* @__PURE__ */ jsx("audio", {
src,
controls: true,
preload: "metadata"
}), filename && /* @__PURE__ */ jsx("span", {
className: "copilotKitAttachmentFilename",
children: filename
})]
});
});
const VideoAttachment = memo(function VideoAttachment({ src, className }) {
return /* @__PURE__ */ jsx("div", {
className: `copilotKitAttachment copilotKitAttachmentVideo ${className ?? ""}`,
children: /* @__PURE__ */ jsx("video", {
src,
controls: true,
preload: "metadata"
})
});
});
const DocumentAttachment = memo(function DocumentAttachment({ source, filename, className }) {
return /* @__PURE__ */ jsxs("div", {
className: `copilotKitAttachment copilotKitAttachmentDocument ${className ?? ""}`,
children: [/* @__PURE__ */ jsx("div", {
className: "copilotKitAttachmentDocIcon",
children: getDocumentIcon(source.mimeType ?? "")
}), /* @__PURE__ */ jsx("div", {
className: "copilotKitAttachmentDocInfo",
children: /* @__PURE__ */ jsx("span", {
className: "copilotKitAttachmentDocName",
children: filename || source.mimeType || "Unknown type"
})
})]
});
});
const AttachmentRenderer = ({ type, source, filename, className }) => {
const src = getSourceUrl(source);
switch (type) {
case "image": return /* @__PURE__ */ jsx(ImageAttachment, {
src,
className
});
case "audio": return /* @__PURE__ */ jsx(AudioAttachment, {
src,
filename,
className
});
case "video": return /* @__PURE__ */ jsx(VideoAttachment, {
src,
className
});
case "document": return /* @__PURE__ */ 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__ */ jsx("div", {
className: "copilotKitMessage copilotKitUserMessage",
children: /* @__PURE__ */ jsx(ImageRenderer, {
image: legacyImage,
content: getTextContent(content)
})
});
}
const textContent = getTextContent(content);
const mediaParts = getMediaParts(content);
if (mediaParts.length === 0) return /* @__PURE__ */ jsx("div", {
className: "copilotKitMessage copilotKitUserMessage",
children: textContent
});
return /* @__PURE__ */ jsxs("div", {
className: "copilotKitMessage copilotKitUserMessage",
children: [textContent && /* @__PURE__ */ jsx("div", { children: textContent }), mediaParts.map((part, index) => /* @__PURE__ */ 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$1.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 = memo(({ language, value }) => {
const { isCopied, copyToClipboard } = useCopyToClipboard({ timeout: 2e3 });
const [SyntaxHighlighter, setSyntaxHighlighter] = useState(() => Light);
useEffect(() => {
try {
setSyntaxHighlighter(() => Prism);
} catch {
setSyntaxHighlighter(() => 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__ */ jsxs("div", {
className: "copilotKitCodeBlock",
children: [/* @__PURE__ */ jsxs("div", {
className: "copilotKitCodeBlockToolbar",
children: [/* @__PURE__ */ jsx("span", {
className: "copilotKitCodeBlockToolbarLanguage",
children: language
}), /* @__PURE__ */ jsxs("div", {
className: "copilotKitCodeBlockToolbarButtons",
children: [/* @__PURE__ */ jsx("button", {
className: "copilotKitCodeBlockToolbarButton",
onClick: downloadAsFile,
children: DownloadIcon
}), /* @__PURE__ */ jsx("button", {
className: "copilotKitCodeBlockToolbarButton",
onClick: onCopy,
children: isCopied ? CheckIcon$1 : CopyIcon
})]
})]
}), /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("code", {
className: `copilotKitMarkdownElement copilotKitInlineCode ${className || ""}`,
...props,
children
});
return /* @__PURE__ */ jsx(CodeBlock, {
language: match && match[1] || "",
value: String(children).replace(/\n$/, ""),
...props
});
},
h1: ({ children, ...props }) => /* @__PURE__ */ jsx("h1", {
className: "copilotKitMarkdownElement",
...props,
children
}),
h2: ({ children, ...props }) => /* @__PURE__ */ jsx("h2", {
className: "copilotKitMarkdownElement",
...props,
children
}),
h3: ({ children, ...props }) => /* @__PURE__ */ jsx("h3", {
className: "copilotKitMarkdownElement",
...props,
children
}),
h4: ({ children, ...props }) => /* @__PURE__ */ jsx("h4", {
className: "copilotKitMarkdownElement",
...props,
children
}),
h5: ({ children, ...props }) => /* @__PURE__ */ jsx("h5", {
className: "copilotKitMarkdownElement",
...props,
children
}),
h6: ({ children, ...props }) => /* @__PURE__ */ jsx("h6", {
className: "copilotKitMarkdownElement",
...props,
children
}),
p: ({ children, ...props }) => /* @__PURE__ */ jsx("div", {
className: "copilotKitMarkdownElement copilotKitParagraph",
...props,
children
}),
pre: ({ children, ...props }) => /* @__PURE__ */ jsx("pre", {
className: "copilotKitMarkdownElement",
...props,
children
}),
blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx("blockquote", {
className: "copilotKitMarkdownElement",
...props,
children
}),
ul: ({ children, ...props }) => /* @__PURE__ */ jsx("ul", {
className: "copilotKitMarkdownElement",
...props,
children
}),
li: ({ children, ...props }) => /* @__PURE__ */ jsx("li", {
className: "copilotKitMarkdownElement",
...props,
children
})
};
const MemoizedReactMarkdown = memo(ReactMarkdown);
const Markdown = ({ content, components, remarkPlugins, rehypePlugins, ...rest }) => {
const mergedComponents = useMemo(() => ({
...defaultComponents,
...components
}), [components]);
const mergedRemarkPlugins = useMemo(() => [
remarkGfm,
[remarkMath, { singleDollarTextMath: false }],
...remarkPlugins ?? []
], [remarkPlugins]);
const mergedRehypePlugins = useMemo(() => [
rehypeRaw,
...rehypePlugins ?? [],
rehypeSanitize
], [rehypePlugins]);
return /* @__PURE__ */ jsx("div", {
className: "copilotKitMarkdown",
children: /* @__PURE__ */ jsx(MemoizedReactMarkdown, {
...rest,
components: mergedComponents,
remarkPlugins: mergedRemarkPlugins,
rehypePlugins: mergedRehypePlugins,
children: content
})
});
};
//#endregion
//#region src/components/chat/messages/AssistantMessage.tsx
const AssistantMessage = (props) => {
const { icons, labels } = useChatContext();
const { message, isLoading, onRegenerate, onCopy, onThumbsUp, onThumbsDown, isCurrentMessage, feedback, markdownTagRenderers } = props;
const [copied, setCopied] = useState(false);
const handleCopy = async () => {
const content = message?.content || "";
if (!content) return;
if (await copyToClipboard(content)) {
setCopied(true);
if (onCopy) onCopy(content);
setTimeout(() => setCopied(false), 2e3);
}
};
const handleRegenerate = () => {
if (onRegenerate) onRegenerate();
};
const handleThumbsUp = () => {
if (onThumbsUp && message) onThumbsUp(message);
};
const handleThumbsDown = () => {
if (onThumbsDown && message) onThumbsDown(message);
};
const LoadingIcon = () => /* @__PURE__ */ jsx("span", {
"data-testid": "copilot-loading-cursor",
children: icons.activityIcon
});
const content = message?.content || "";
const subComponent = message?.generativeUI?.() ?? props.subComponent;
const subComponentPosition = message?.generativeUIPosition ?? "after";
const renderBefore = subComponent && subComponentPosition === "before";
const renderAfter = subComponent && subComponentPosition !== "before";
return /* @__PURE__ */ jsxs(Fragment, { children: [
renderBefore ? /* @__PURE__ */ jsx("div", {
style: { marginBottom: "0.5rem" },
children: subComponent
}) : null,
content && /* @__PURE__ */ jsxs("div", {
className: "copilotKitMessage copilotKitAssistantMessage",
children: [content && /* @__PURE__ */ jsx(Markdown, {
content,
components: markdownTagRenderers
}), content && !isLoading && /* @__PURE__ */ jsxs("div", {
className: `copilotKitMessageControls ${isCurrentMessage ? "currentMessage" : ""}`,
children: [
/* @__PURE__ */ jsx("button", {
className: "copilotKitMessageControlButton",
onClick: handleRegenerate,
"aria-label": labels.regenerateResponse,
title: labels.regenerateResponse,
children: icons.regenerateIcon
}),
/* @__PURE__ */ jsx("button", {
className: "copilotKitMessageControlButton",
onClick: handleCopy,
"aria-label": labels.copyToClipboard,
title: labels.copyToClipboard,
children: copied ? /* @__PURE__ */ jsx("span", {
style: {
fontSize: "10px",
fontWeight: "bold"
},
children: "✓"