@copilotkit/react-core 1.10.0-next.9 → 1.10.0

package/dist/chunk-WSXTUD36.mjs

@@ -0,0 +1,759 @@
+import {
+  CheckIcon,
+  CopilotKitIcon,
+  ExclamationMarkTriangleIcon
+} from "./chunk-PIF5KJYI.mjs";
+import {
+  useCopilotContext
+} from "./chunk-TEMLWRRT.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: "Developer Console"
+                      }
+                    ),
+                    /* @__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 API 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-WSXTUD36.mjs.map