@copilotkit/react-core 1.10.0-next.10 → 1.10.0-next.12

package/src/components/dev-console/developer-console-modal.tsx

@@ -0,0 +1,866 @@
+"use client";
+
+import { useCopilotContext } from "../../context/copilot-context";
+import { useCopilotMessagesContext } from "../../context/copilot-messages-context";
+import { COPILOTKIT_VERSION } from "@copilotkit/shared";
+import { useEffect, useState } from "react";
+import { CheckIcon, CopilotKitIcon, ExclamationMarkTriangleIcon } from "./icons";
+
+// Type definitions for the developer console
+interface ActionParameter {
+  name: string;
+  required?: boolean;
+  type?: string;
+}
+
+interface Action {
+  name: string;
+  description?: string;
+  parameters?: ActionParameter[];
+  status?: string;
+}
+
+interface Readable {
+  name?: string;
+  description?: string;
+  value?: any;
+  content?: string;
+  metadata?: Record<string, any>;
+}
+
+interface AgentState {
+  status?: string;
+  state?: any;
+  running?: boolean;
+  lastUpdate?: number;
+}
+
+interface Message {
+  id?: string;
+  role?: "user" | "assistant" | "system";
+  content?: string;
+  timestamp?: number;
+  [key: string]: any; // Allow additional properties from CopilotKit
+}
+
+interface Document {
+  name?: string;
+  content?: string;
+  metadata?: Record<string, any>;
+}
+
+interface DisplayContext {
+  actions: Record<string, Action>;
+  getAllContext: () => Readable[];
+  coagentStates: Record<string, AgentState>;
+  getDocumentsContext: (args?: any[]) => Document[];
+}
+
+interface MessagesContext {
+  messages: Message[];
+}
+
+interface DeveloperConsoleModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  hasApiKey: boolean;
+}
+
+export function DeveloperConsoleModal({ isOpen, onClose, hasApiKey }: DeveloperConsoleModalProps) {
+  const context = useCopilotContext();
+  const messagesContext = useCopilotMessagesContext();
+  const [activeTab, setActiveTab] = useState("actions");
+
+  // Handle escape key
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      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;
+
+  // Create mock data for preview when no API key
+  const displayContext: DisplayContext = hasApiKey
+    ? (context as DisplayContext)
+    : {
+        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() - 15000 },
+          "search-agent": { status: "idle", lastUpdate: Date.now() - 60000 },
+        },
+        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: MessagesContext = hasApiKey
+    ? (messagesContext as 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 (
+    <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}
+    >
+      <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()}
+      >
+        {/* Header */}
+        <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,
+          }}
+        >
+          <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+            <CopilotKitIcon />
+            <h1
+              style={{
+                fontWeight: "bold",
+                fontSize: "20px",
+                color: "#1f2937",
+                margin: 0,
+              }}
+            >
+              Developer Console
+            </h1>
+            <span
+              style={{
+                fontSize: "14px",
+                color: "#6b7280",
+                backgroundColor: "#f3f4f6",
+                padding: "4px 8px",
+                borderRadius: "4px",
+              }}
+            >
+              v{COPILOTKIT_VERSION}
+            </span>
+          </div>
+          <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")}
+          >
+            ×
+          </button>
+        </div>
+
+        {/* Tab Navigation */}
+        <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,
+          }}
+        >
+          {[
+            { 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) => (
+            <button
+              key={tab.id}
+              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";
+                }
+              }}
+            >
+              {tab.label}
+              {tab.count > 0 && (
+                <span
+                  style={{
+                    marginLeft: "8px",
+                    backgroundColor: "#e5e7eb",
+                    color: "#374151",
+                    padding: "2px 8px",
+                    borderRadius: "9999px",
+                    fontSize: "12px",
+                  }}
+                >
+                  {tab.count}
+                </span>
+              )}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div
+          style={{
+            height: "calc(100% - 142px)",
+            overflow: "auto",
+            padding: "24px",
+            backgroundColor: "#f9fafb",
+            filter: !hasApiKey ? "blur(0.3px)" : "none",
+            opacity: !hasApiKey ? 0.85 : 1,
+          }}
+        >
+          {activeTab === "actions" && <ActionsTab context={displayContext} />}
+          {activeTab === "readables" && <ReadablesTab context={displayContext} />}
+          {activeTab === "agent" && <AgentStatusTab context={displayContext} />}
+          {activeTab === "messages" && <MessagesTab messagesContext={displayMessagesContext} />}
+          {activeTab === "context" && <ContextTab context={displayContext} />}
+        </div>
+
+        {/* Footer */}
+        <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,
+          }}
+        >
+          <div style={{ fontSize: "14px", color: "#6b7280" }}>
+            <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")}
+            >
+              Report an issue
+            </a>
+          </div>
+          <div style={{ fontSize: "14px", color: "#6b7280" }}>
+            <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")}
+            >
+              Add MCP Server →
+            </a>
+          </div>
+        </div>
+
+        {/* Enhanced CTA Overlay */}
+        {!hasApiKey && (
+          <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()}
+          >
+            <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"; // textSecondary token for hover
+                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"; // textDisabled token for pressed
+                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";
+              }}
+            >
+              Get API Key
+              <span style={{ fontSize: "16px", marginLeft: "-4px" }}>→</span>
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Tab Components
+function ActionsTab({ context }: { context: DisplayContext }) {
+  const actions = Object.values(context.actions);
+
+  if (actions.length === 0) {
+    return (
+      <div style={{ textAlign: "center", padding: "48px 0", color: "#6b7280" }}>
+        <p style={{ fontSize: "18px", margin: "0 0 8px 0" }}>No actions available</p>
+        <p style={{ fontSize: "14px", margin: 0 }}>Actions will appear here when registered</p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      {actions.map((action: Action, index: number) => (
+        <div
+          key={index}
+          style={{
+            backgroundColor: "white",
+            padding: "16px",
+            borderRadius: "8px",
+            boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
+            border: "1px solid #e5e7eb",
+          }}
+        >
+          <div
+            style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}
+          >
+            <div style={{ flex: 1 }}>
+              <h3 style={{ fontWeight: "600", color: "#1f2937", margin: "0 0 4px 0" }}>
+                {action.name}
+              </h3>
+              {action.description && (
+                <p style={{ fontSize: "14px", color: "#4b5563", margin: "0 0 12px 0" }}>
+                  {action.description}
+                </p>
+              )}
+              {action.parameters && action.parameters.length > 0 && (
+                <div style={{ marginTop: "12px" }}>
+                  <p
+                    style={{
+                      fontSize: "12px",
+                      fontWeight: "500",
+                      color: "#6b7280",
+                      textTransform: "uppercase",
+                      margin: "0 0 4px 0",
+                    }}
+                  >
+                    Parameters:
+                  </p>
+                  <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
+                    {action.parameters.map((param: ActionParameter, pIndex: number) => (
+                      <div key={pIndex} style={{ fontSize: "14px" }}>
+                        <span style={{ fontFamily: "monospace", color: "#374151" }}>
+                          {param.name}
+                        </span>
+                        {param.required && (
+                          <span style={{ marginLeft: "4px", fontSize: "12px", color: "#ef4444" }}>
+                            *required
+                          </span>
+                        )}
+                        {param.type && (
+                          <span style={{ marginLeft: "8px", fontSize: "12px", color: "#6b7280" }}>
+                            ({param.type})
+                          </span>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+            <div style={{ marginLeft: "16px" }}>
+              {action.status === "available" ? <CheckIcon /> : <ExclamationMarkTriangleIcon />}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ReadablesTab({ context }: { context: DisplayContext }) {
+  const readables = context.getAllContext();
+
+  if (readables.length === 0) {
+    return (
+      <div style={{ textAlign: "center", padding: "48px 0", color: "#6b7280" }}>
+        <p style={{ fontSize: "18px", margin: "0 0 8px 0" }}>No readable context available</p>
+        <p style={{ fontSize: "14px", margin: 0 }}>
+          Readable context will appear here when provided
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      {readables.map((readable: Readable, index: number) => (
+        <div
+          key={index}
+          style={{
+            backgroundColor: "white",
+            padding: "16px",
+            borderRadius: "8px",
+            boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
+            border: "1px solid #e5e7eb",
+          }}
+        >
+          <div
+            style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between" }}
+          >
+            <div style={{ flex: 1 }}>
+              <h3 style={{ fontWeight: "600", color: "#1f2937", margin: "0 0 4px 0" }}>
+                {readable.name || `Readable ${index + 1}`}
+              </h3>
+              {readable.description && (
+                <p style={{ fontSize: "14px", color: "#4b5563", margin: "0 0 12px 0" }}>
+                  {readable.description}
+                </p>
+              )}
+              {readable.value && (
+                <pre
+                  style={{
+                    marginTop: "12px",
+                    padding: "8px",
+                    backgroundColor: "#f9fafb",
+                    borderRadius: "4px",
+                    fontSize: "12px",
+                    overflowX: "auto",
+                    margin: "12px 0 0 0",
+                  }}
+                >
+                  {JSON.stringify(readable.value, null, 2)}
+                </pre>
+              )}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function AgentStatusTab({ context }: { context: DisplayContext }) {
+  const agentStates = context.coagentStates || {};
+  const agentStateEntries = Object.entries(agentStates);
+
+  if (agentStateEntries.length === 0) {
+    return (
+      <div style={{ textAlign: "center", padding: "48px 0", color: "#6b7280" }}>
+        <p style={{ fontSize: "18px", margin: "0 0 8px 0" }}>No agent states available</p>
+        <p style={{ fontSize: "14px", margin: 0 }}>
+          Agent states will appear here when agents are active
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+      {agentStateEntries.map(([agentName, state]: [string, AgentState]) => (
+        <div
+          key={agentName}
+          style={{
+            backgroundColor: "white",
+            padding: "24px",
+            borderRadius: "8px",
+            boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
+            border: "1px solid #e5e7eb",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              marginBottom: "16px",
+            }}
+          >
+            <h3 style={{ fontWeight: "600", fontSize: "18px", color: "#1f2937", margin: 0 }}>
+              {agentName}
+            </h3>
+            <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",
+              }}
+            >
+              {state.status || "idle"}
+            </span>
+          </div>
+
+          {state.state && (
+            <div style={{ marginBottom: "12px" }}>
+              <p
+                style={{
+                  fontSize: "12px",
+                  fontWeight: "500",
+                  color: "#6b7280",
+                  textTransform: "uppercase",
+                  margin: "0 0 4px 0",
+                }}
+              >
+                Current State:
+              </p>
+              <pre
+                style={{
+                  padding: "12px",
+                  backgroundColor: "#f9fafb",
+                  borderRadius: "4px",
+                  fontSize: "12px",
+                  overflowX: "auto",
+                  margin: 0,
+                }}
+              >
+                {JSON.stringify(state.state, null, 2)}
+              </pre>
+            </div>
+          )}
+
+          {state.running && (
+            <div
+              style={{
+                marginTop: "16px",
+                display: "flex",
+                alignItems: "center",
+                fontSize: "14px",
+                color: "#4b5563",
+              }}
+            >
+              <div style={{ marginRight: "8px" }}>
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  style={{ animation: "spin 1s linear infinite" }}
+                >
+                  <style>{`@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}</style>
+                  <circle
+                    cx="8"
+                    cy="8"
+                    r="6"
+                    fill="none"
+                    stroke="#4b5563"
+                    strokeWidth="2"
+                    strokeDasharray="9 3"
+                  />
+                </svg>
+              </div>
+              <span>Agent is currently running...</span>
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function MessagesTab({ messagesContext }: { messagesContext: MessagesContext }) {
+  const messages = messagesContext.messages || [];
+
+  if (messages.length === 0) {
+    return (
+      <div style={{ textAlign: "center", padding: "48px 0", color: "#6b7280" }}>
+        <p style={{ fontSize: "18px", margin: "0 0 8px 0" }}>No messages yet</p>
+        <p style={{ fontSize: "14px", margin: 0 }}>
+          Messages will appear here as the conversation progresses
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      {messages.map((message: Message, index: number) => (
+        <div
+          key={index}
+          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",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "flex-start",
+              justifyContent: "space-between",
+              marginBottom: "8px",
+            }}
+          >
+            <span
+              style={{
+                fontWeight: "500",
+                fontSize: "14px",
+                color: "#374151",
+                textTransform: "capitalize",
+              }}
+            >
+              {message.role || "system"}
+            </span>
+            {message.timestamp && (
+              <span style={{ fontSize: "12px", color: "#6b7280" }}>
+                {new Date(message.timestamp).toLocaleTimeString()}
+              </span>
+            )}
+          </div>
+          <div style={{ fontSize: "14px", color: "#1f2937", whiteSpace: "pre-wrap" }}>
+            {message.content || ""}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function ContextTab({ context }: { context: DisplayContext }) {
+  const documents = context.getDocumentsContext([]);
+
+  if (documents.length === 0) {
+    return (
+      <div style={{ textAlign: "center", padding: "48px 0", color: "#6b7280" }}>
+        <p style={{ fontSize: "18px", margin: "0 0 8px 0" }}>No document context available</p>
+        <p style={{ fontSize: "14px", margin: 0 }}>
+          Document context will appear here when provided
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
+      {documents.map((doc: Document, index: number) => (
+        <div
+          key={index}
+          style={{
+            backgroundColor: "white",
+            padding: "16px",
+            borderRadius: "8px",
+            boxShadow: "0 1px 3px 0 rgba(0, 0, 0, 0.1)",
+            border: "1px solid #e5e7eb",
+          }}
+        >
+          <h3 style={{ fontWeight: "600", color: "#1f2937", margin: "0 0 8px 0" }}>
+            {doc.name || `Document ${index + 1}`}
+          </h3>
+          {doc.content && (
+            <pre
+              style={{
+                padding: "12px",
+                backgroundColor: "#f9fafb",
+                borderRadius: "4px",
+                fontSize: "12px",
+                overflowX: "auto",
+                margin: 0,
+              }}
+            >
+              {doc.content}
+            </pre>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}