@copilotkit/react-core
Version:
<img src="https://github.com/user-attachments/assets/0a6b64d9-e193-4940-a3f6-60334ac34084" alt="banner" style="border-radius: 12px; border: 2px solid #d6d4fa;" />
759 lines (757 loc) • 30.6 kB
JavaScript
import {
CheckIcon,
CopilotKitIcon,
ExclamationMarkTriangleIcon
} from "./chunk-PIF5KJYI.mjs";
import {
useCopilotContext
} from "./chunk-YHT6CWIY.mjs";
import {
useCopilotMessagesContext
} from "./chunk-ZLQVRPDS.mjs";
// src/components/dev-console/developer-console-modal.tsx
import { COPILOTKIT_VERSION } from "@copilotkit/shared";
import { useEffect, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
function DeveloperConsoleModal({ isOpen, onClose, hasApiKey }) {
const context = useCopilotContext();
const messagesContext = useCopilotMessagesContext();
const [activeTab, setActiveTab] = useState("actions");
useEffect(() => {
const handleEscape = (e) => {
if (e.key === "Escape") {
onClose();
}
};
if (isOpen) {
document.addEventListener("keydown", handleEscape);
document.body.style.overflow = "hidden";
}
return () => {
document.removeEventListener("keydown", handleEscape);
document.body.style.overflow = "unset";
};
}, [isOpen, onClose]);
if (!isOpen)
return null;
const displayContext = hasApiKey ? context : {
actions: {
search_web: { name: "search_web", description: "Search the web for information" },
send_email: { name: "send_email", description: "Send an email to a contact" },
create_document: { name: "create_document", description: "Create a new document" },
analyze_code: {
name: "analyze_code",
description: "Analyze code for issues and improvements"
},
generate_tests: {
name: "generate_tests",
description: "Generate unit tests for functions"
}
},
getAllContext: () => [
{
content: "User preferences: dark mode enabled, TypeScript preferred",
metadata: { source: "settings" }
},
{
content: "Current project: Building a React application with CopilotKit",
metadata: { source: "project" }
},
{
content: "Recent activity: Implemented authentication system",
metadata: { source: "activity" }
},
{
content: "Development environment: VS Code, Node.js 18, React 18",
metadata: { source: "environment" }
}
],
coagentStates: {
"main-agent": { status: "active", lastUpdate: Date.now() },
"code-assistant": { status: "active", lastUpdate: Date.now() - 15e3 },
"search-agent": { status: "idle", lastUpdate: Date.now() - 6e4 }
},
getDocumentsContext: () => [
{
content: "README.md: Project setup and installation instructions",
metadata: { type: "documentation" }
},
{
content: "API Documentation: CopilotKit integration guide",
metadata: { type: "documentation" }
},
{
content: "package.json: Project dependencies and scripts",
metadata: { type: "configuration" }
}
]
};
const displayMessagesContext = hasApiKey ? messagesContext : {
messages: [
{
id: "1",
role: "user",
content: "Help me implement a todo list with drag and drop functionality"
},
{
id: "2",
role: "assistant",
content: "I'll help you create a todo list with drag and drop. Let me start by setting up the basic components and then add the drag and drop functionality using React DnD."
},
{ id: "3", role: "user", content: "Can you also add priority levels and due dates?" },
{
id: "4",
role: "assistant",
content: "Absolutely! I'll enhance the todo items with priority levels (high, medium, low) and due date functionality. This will make your todo list much more powerful for task management."
},
{ id: "5", role: "user", content: "Perfect! How about adding categories or tags?" }
]
};
return /* @__PURE__ */ jsx(
"div",
{
style: {
position: "fixed",
top: 0,
left: 0,
right: 0,
bottom: 0,
zIndex: 9999,
backgroundColor: "rgba(0, 0, 0, 0.3)",
display: "flex",
alignItems: "center",
justifyContent: "center",
padding: "16px"
},
onClick: onClose,
children: /* @__PURE__ */ jsxs(
"div",
{
style: {
width: "1152px",
maxWidth: "95vw",
height: "80vh",
backgroundColor: "white",
borderRadius: "12px",
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
display: "flex",
flexDirection: "column",
overflow: "hidden",
position: "relative"
},
onClick: (e) => e.stopPropagation(),
children: [
/* @__PURE__ */ jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "24px",
borderBottom: "1px solid #e5e7eb",
minHeight: "73px",
flexShrink: 0,
filter: !hasApiKey ? "blur(0.3px)" : "none",
opacity: !hasApiKey ? 0.95 : 1
},
children: [
/* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "12px" }, children: [
/* @__PURE__ */ jsx(CopilotKitIcon, {}),
/* @__PURE__ */ jsx(
"h1",
{
style: {
fontWeight: "bold",
fontSize: "20px",
color: "#1f2937",
margin: 0
},
children: "Inspector"
}
),
/* @__PURE__ */ jsxs(
"span",
{
style: {
fontSize: "14px",
color: "#6b7280",
backgroundColor: "#f3f4f6",
padding: "4px 8px",
borderRadius: "4px"
},
children: [
"v",
COPILOTKIT_VERSION
]
}
)
] }),
/* @__PURE__ */ jsx(
"button",
{
onClick: onClose,
style: {
color: "#9ca3af",
fontSize: "24px",
fontWeight: "300",
border: "none",
background: "none",
cursor: "pointer",
padding: "4px"
},
onMouseEnter: (e) => e.currentTarget.style.color = "#4b5563",
onMouseLeave: (e) => e.currentTarget.style.color = "#9ca3af",
children: "\xD7"
}
)
]
}
),
/* @__PURE__ */ jsx(
"div",
{
style: {
display: "flex",
borderBottom: "1px solid #e5e7eb",
backgroundColor: "#f9fafb",
minHeight: "50px",
flexShrink: 0,
filter: !hasApiKey ? "blur(0.3px)" : "none",
opacity: !hasApiKey ? 0.9 : 1
},
children: [
{ id: "actions", label: "Actions", count: Object.keys(displayContext.actions).length },
{ id: "readables", label: "Readables", count: displayContext.getAllContext().length },
{
id: "agent",
label: "Agent Status",
count: Object.keys(displayContext.coagentStates).length
},
{ id: "messages", label: "Messages", count: displayMessagesContext.messages.length },
{
id: "context",
label: "Context",
count: displayContext.getDocumentsContext([]).length
}
].map((tab) => /* @__PURE__ */ jsxs(
"button",
{
onClick: () => setActiveTab(tab.id),
style: {
padding: "12px 24px",
fontSize: "14px",
fontWeight: "500",
border: "none",
cursor: "pointer",
backgroundColor: activeTab === tab.id ? "white" : "transparent",
color: activeTab === tab.id ? "#2563eb" : "#6b7280",
borderBottom: activeTab === tab.id ? "2px solid #2563eb" : "none",
transition: "all 0.2s"
},
onMouseEnter: (e) => {
if (activeTab !== tab.id) {
e.currentTarget.style.color = "#1f2937";
e.currentTarget.style.backgroundColor = "#f3f4f6";
}
},
onMouseLeave: (e) => {
if (activeTab !== tab.id) {
e.currentTarget.style.color = "#6b7280";
e.currentTarget.style.backgroundColor = "transparent";
}
},
children: [
tab.label,
tab.count > 0 && /* @__PURE__ */ jsx(
"span",
{
style: {
marginLeft: "8px",
backgroundColor: "#e5e7eb",
color: "#374151",
padding: "2px 8px",
borderRadius: "9999px",
fontSize: "12px"
},
children: tab.count
}
)
]
},
tab.id
))
}
),
/* @__PURE__ */ jsxs(
"div",
{
style: {
height: "calc(100% - 142px)",
overflow: "auto",
padding: "24px",
backgroundColor: "#f9fafb",
filter: !hasApiKey ? "blur(0.3px)" : "none",
opacity: !hasApiKey ? 0.85 : 1
},
children: [
activeTab === "actions" && /* @__PURE__ */ jsx(ActionsTab, { context: displayContext }),
activeTab === "readables" && /* @__PURE__ */ jsx(ReadablesTab, { context: displayContext }),
activeTab === "agent" && /* @__PURE__ */ jsx(AgentStatusTab, { context: displayContext }),
activeTab === "messages" && /* @__PURE__ */ jsx(MessagesTab, { messagesContext: displayMessagesContext }),
activeTab === "context" && /* @__PURE__ */ jsx(ContextTab, { context: displayContext })
]
}
),
/* @__PURE__ */ jsxs(
"div",
{
style: {
padding: "16px 24px",
borderTop: "1px solid #e5e7eb",
backgroundColor: "white",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
minHeight: "57px",
flexShrink: 0,
filter: !hasApiKey ? "blur(0.3px)" : "none",
opacity: !hasApiKey ? 0.9 : 1
},
children: [
/* @__PURE__ */ jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: /* @__PURE__ */ jsx(
"a",
{
href: "https://github.com/CopilotKit/CopilotKit/issues",
target: "_blank",
rel: "noopener noreferrer",
style: { color: "#2563eb", textDecoration: "none" },
onMouseEnter: (e) => e.currentTarget.style.textDecoration = "underline",
onMouseLeave: (e) => e.currentTarget.style.textDecoration = "none",
children: "Report an issue"
}
) }),
/* @__PURE__ */ jsx("div", { style: { fontSize: "14px", color: "#6b7280" }, children: /* @__PURE__ */ jsx(
"a",
{
href: "https://mcp.copilotkit.ai/",
target: "_blank",
rel: "noopener noreferrer",
style: { color: "#2563eb", textDecoration: "none" },
onMouseEnter: (e) => e.currentTarget.style.textDecoration = "underline",
onMouseLeave: (e) => e.currentTarget.style.textDecoration = "none",
children: "Add MCP Server \u2192"
}
) })
]
}
),
!hasApiKey && /* @__PURE__ */ jsx(
"div",
{
style: {
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(255, 255, 255, 0.2)",
backdropFilter: "blur(2px)",
WebkitBackdropFilter: "blur(2px)",
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "12px",
zIndex: 10
},
onClick: (e) => e.stopPropagation(),
children: /* @__PURE__ */ jsxs(
"button",
{
onClick: () => window.open("https://cloud.copilotkit.ai/sign-in", "_blank"),
style: {
// Following button system specifications
height: "48px",
padding: "12px 24px",
backgroundColor: "#030507",
// textPrimary token
color: "#FFFFFF",
borderRadius: "12px",
// Medium radius token
border: "none",
cursor: "pointer",
fontSize: "14px",
// Medium Semi Bold typography
fontWeight: "600",
fontFamily: "'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif",
lineHeight: "22px",
boxShadow: "0 4px 16px rgba(3, 5, 7, 0.2), 0 1px 3px rgba(3, 5, 7, 0.1)",
transition: "all 200ms ease",
// 200ms ease as per specs
display: "inline-flex",
alignItems: "center",
gap: "8px",
textTransform: "uppercase",
letterSpacing: "0.5px"
},
onMouseEnter: (e) => {
e.currentTarget.style.backgroundColor = "#575758";
e.currentTarget.style.transform = "translateY(-1px)";
e.currentTarget.style.boxShadow = "0 6px 20px rgba(3, 5, 7, 0.25), 0 2px 4px rgba(3, 5, 7, 0.15)";
},
onMouseLeave: (e) => {
e.currentTarget.style.backgroundColor = "#030507";
e.currentTarget.style.transform = "translateY(0)";
e.currentTarget.style.boxShadow = "0 4px 16px rgba(3, 5, 7, 0.2), 0 1px 3px rgba(3, 5, 7, 0.1)";
},
onMouseDown: (e) => {
e.currentTarget.style.backgroundColor = "#858589";
e.currentTarget.style.transform = "translateY(0)";
},
onMouseUp: (e) => {
e.currentTarget.style.backgroundColor = "#575758";
e.currentTarget.style.transform = "translateY(-1px)";
},
onFocus: (e) => {
e.currentTarget.style.outline = "2px solid #BEC9FF";
e.currentTarget.style.outlineOffset = "2px";
},
onBlur: (e) => {
e.currentTarget.style.outline = "none";
},
children: [
"Get License Key",
/* @__PURE__ */ jsx("span", { style: { fontSize: "16px", marginLeft: "-4px" }, children: "\u2192" })
]
}
)
}
)
]
}
)
}
);
}
function ActionsTab({ context }) {
const actions = Object.values(context.actions);
if (actions.length === 0) {
return /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "48px 0", color: "#6b7280" }, children: [
/* @__PURE__ */ jsx("p", { style: { fontSize: "18px", margin: "0 0 8px 0" }, children: "No actions available" }),
/* @__PURE__ */ jsx("p", { style: { fontSize: "14px", margin: 0 }, children: "Actions will appear here when registered" })
] });
}
return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: actions.map((action, index) => /* @__PURE__ */ jsx(
"div",
{
style: {
backgroundColor: "white",
padding: "16px",
borderRadius: "8px",
boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
border: "1px solid #e5e7eb"
},
children: /* @__PURE__ */ jsxs(
"div",
{
style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" },
children: [
/* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
/* @__PURE__ */ jsx("h3", { style: { fontWeight: "600", color: "#1f2937", margin: "0 0 4px 0" }, children: action.name }),
action.description && /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: "#4b5563", margin: "0 0 12px 0" }, children: action.description }),
action.parameters && action.parameters.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: "12px" }, children: [
/* @__PURE__ */ jsx(
"p",
{
style: {
fontSize: "12px",
fontWeight: "500",
color: "#6b7280",
textTransform: "uppercase",
margin: "0 0 4px 0"
},
children: "Parameters:"
}
),
/* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "4px" }, children: action.parameters.map((param, pIndex) => /* @__PURE__ */ jsxs("div", { style: { fontSize: "14px" }, children: [
/* @__PURE__ */ jsx("span", { style: { fontFamily: "monospace", color: "#374151" }, children: param.name }),
param.required && /* @__PURE__ */ jsx("span", { style: { marginLeft: "4px", fontSize: "12px", color: "#ef4444" }, children: "*required" }),
param.type && /* @__PURE__ */ jsxs("span", { style: { marginLeft: "8px", fontSize: "12px", color: "#6b7280" }, children: [
"(",
param.type,
")"
] })
] }, pIndex)) })
] })
] }),
/* @__PURE__ */ jsx("div", { style: { marginLeft: "16px" }, children: action.status === "available" ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(ExclamationMarkTriangleIcon, {}) })
]
}
)
},
index
)) });
}
function ReadablesTab({ context }) {
const readables = context.getAllContext();
if (readables.length === 0) {
return /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "48px 0", color: "#6b7280" }, children: [
/* @__PURE__ */ jsx("p", { style: { fontSize: "18px", margin: "0 0 8px 0" }, children: "No readable context available" }),
/* @__PURE__ */ jsx("p", { style: { fontSize: "14px", margin: 0 }, children: "Readable context will appear here when provided" })
] });
}
return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: readables.map((readable, index) => /* @__PURE__ */ jsx(
"div",
{
style: {
backgroundColor: "white",
padding: "16px",
borderRadius: "8px",
boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
border: "1px solid #e5e7eb"
},
children: /* @__PURE__ */ jsx(
"div",
{
style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" },
children: /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
/* @__PURE__ */ jsx("h3", { style: { fontWeight: "600", color: "#1f2937", margin: "0 0 4px 0" }, children: readable.name || `Readable ${index + 1}` }),
readable.description && /* @__PURE__ */ jsx("p", { style: { fontSize: "14px", color: "#4b5563", margin: "0 0 12px 0" }, children: readable.description }),
readable.value && /* @__PURE__ */ jsx(
"pre",
{
style: {
marginTop: "12px",
padding: "8px",
backgroundColor: "#f9fafb",
borderRadius: "4px",
fontSize: "12px",
overflowX: "auto",
margin: "12px 0 0 0"
},
children: JSON.stringify(readable.value, null, 2)
}
)
] })
}
)
},
index
)) });
}
function AgentStatusTab({ context }) {
const agentStates = context.coagentStates || {};
const agentStateEntries = Object.entries(agentStates);
if (agentStateEntries.length === 0) {
return /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "48px 0", color: "#6b7280" }, children: [
/* @__PURE__ */ jsx("p", { style: { fontSize: "18px", margin: "0 0 8px 0" }, children: "No agent states available" }),
/* @__PURE__ */ jsx("p", { style: { fontSize: "14px", margin: 0 }, children: "Agent states will appear here when agents are active" })
] });
}
return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "24px" }, children: agentStateEntries.map(([agentName, state]) => /* @__PURE__ */ jsxs(
"div",
{
style: {
backgroundColor: "white",
padding: "24px",
borderRadius: "8px",
boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
border: "1px solid #e5e7eb"
},
children: [
/* @__PURE__ */ jsxs(
"div",
{
style: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
marginBottom: "16px"
},
children: [
/* @__PURE__ */ jsx("h3", { style: { fontWeight: "600", fontSize: "18px", color: "#1f2937", margin: 0 }, children: agentName }),
/* @__PURE__ */ jsx(
"span",
{
style: {
padding: "4px 12px",
borderRadius: "9999px",
fontSize: "12px",
fontWeight: "500",
backgroundColor: state.status === "running" ? "#dcfce7" : state.status === "complete" ? "#dbeafe" : "#f3f4f6",
color: state.status === "running" ? "#166534" : state.status === "complete" ? "#1e40af" : "#1f2937"
},
children: state.status || "idle"
}
)
]
}
),
state.state && /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
/* @__PURE__ */ jsx(
"p",
{
style: {
fontSize: "12px",
fontWeight: "500",
color: "#6b7280",
textTransform: "uppercase",
margin: "0 0 4px 0"
},
children: "Current State:"
}
),
/* @__PURE__ */ jsx(
"pre",
{
style: {
padding: "12px",
backgroundColor: "#f9fafb",
borderRadius: "4px",
fontSize: "12px",
overflowX: "auto",
margin: 0
},
children: JSON.stringify(state.state, null, 2)
}
)
] }),
state.running && /* @__PURE__ */ jsxs(
"div",
{
style: {
marginTop: "16px",
display: "flex",
alignItems: "center",
fontSize: "14px",
color: "#4b5563"
},
children: [
/* @__PURE__ */ jsx("div", { style: { marginRight: "8px" }, children: /* @__PURE__ */ jsxs(
"svg",
{
width: "16",
height: "16",
viewBox: "0 0 16 16",
style: { animation: "spin 1s linear infinite" },
children: [
/* @__PURE__ */ jsx("style", { children: `@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }` }),
/* @__PURE__ */ jsx(
"circle",
{
cx: "8",
cy: "8",
r: "6",
fill: "none",
stroke: "#4b5563",
strokeWidth: "2",
strokeDasharray: "9 3"
}
)
]
}
) }),
/* @__PURE__ */ jsx("span", { children: "Agent is currently running..." })
]
}
)
]
},
agentName
)) });
}
function MessagesTab({ messagesContext }) {
const messages = messagesContext.messages || [];
if (messages.length === 0) {
return /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "48px 0", color: "#6b7280" }, children: [
/* @__PURE__ */ jsx("p", { style: { fontSize: "18px", margin: "0 0 8px 0" }, children: "No messages yet" }),
/* @__PURE__ */ jsx("p", { style: { fontSize: "14px", margin: 0 }, children: "Messages will appear here as the conversation progresses" })
] });
}
return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: messages.map((message, index) => /* @__PURE__ */ jsxs(
"div",
{
style: {
padding: "16px",
borderRadius: "8px",
backgroundColor: message.role === "user" ? "#eff6ff" : message.role === "assistant" ? "#f9fafb" : "#fefce8",
border: `1px solid ${message.role === "user" ? "#c7d2fe" : message.role === "assistant" ? "#e5e7eb" : "#fde047"}`,
marginLeft: message.role === "user" ? "48px" : "0",
marginRight: message.role === "assistant" ? "48px" : "0"
},
children: [
/* @__PURE__ */ jsxs(
"div",
{
style: {
display: "flex",
alignItems: "flex-start",
justifyContent: "space-between",
marginBottom: "8px"
},
children: [
/* @__PURE__ */ jsx(
"span",
{
style: {
fontWeight: "500",
fontSize: "14px",
color: "#374151",
textTransform: "capitalize"
},
children: message.role || "system"
}
),
message.timestamp && /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "#6b7280" }, children: new Date(message.timestamp).toLocaleTimeString() })
]
}
),
/* @__PURE__ */ jsx("div", { style: { fontSize: "14px", color: "#1f2937", whiteSpace: "pre-wrap" }, children: message.content || "" })
]
},
index
)) });
}
function ContextTab({ context }) {
const documents = context.getDocumentsContext([]);
if (documents.length === 0) {
return /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "48px 0", color: "#6b7280" }, children: [
/* @__PURE__ */ jsx("p", { style: { fontSize: "18px", margin: "0 0 8px 0" }, children: "No document context available" }),
/* @__PURE__ */ jsx("p", { style: { fontSize: "14px", margin: 0 }, children: "Document context will appear here when provided" })
] });
}
return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "16px" }, children: documents.map((doc, index) => /* @__PURE__ */ jsxs(
"div",
{
style: {
backgroundColor: "white",
padding: "16px",
borderRadius: "8px",
boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
border: "1px solid #e5e7eb"
},
children: [
/* @__PURE__ */ jsx("h3", { style: { fontWeight: "600", color: "#1f2937", margin: "0 0 8px 0" }, children: doc.name || `Document ${index + 1}` }),
doc.content && /* @__PURE__ */ jsx(
"pre",
{
style: {
padding: "12px",
backgroundColor: "#f9fafb",
borderRadius: "4px",
fontSize: "12px",
overflowX: "auto",
margin: 0
},
children: doc.content
}
)
]
},
index
)) });
}
export {
DeveloperConsoleModal
};
//# sourceMappingURL=chunk-DSDAZA3B.mjs.map