|
| 1 | +import { WebInspectorElement } from "../index"; |
| 2 | +import { |
| 3 | + CopilotKitCore, |
| 4 | + CopilotKitCoreRuntimeConnectionStatus, |
| 5 | + type CopilotKitCoreSubscriber, |
| 6 | +} from "@copilotkitnext/core"; |
| 7 | +import type { AbstractAgent, AgentSubscriber } from "@ag-ui/client"; |
| 8 | +import { describe, it, expect, vi, beforeEach } from "vitest"; |
| 9 | + |
| 10 | +type MockAgentController = { emit: (key: keyof AgentSubscriber, payload: unknown) => void }; |
| 11 | + |
| 12 | +type InspectorInternals = { |
| 13 | + flattenedEvents: Array<{ type: string }>; |
| 14 | + agentMessages: Map<string, Array<{ contentText?: string }>>; |
| 15 | + agentStates: Map<string, unknown>; |
| 16 | + cachedTools: Array<{ name: string }>; |
| 17 | +}; |
| 18 | + |
| 19 | +type InspectorContextInternals = { |
| 20 | + contextStore: Record<string, { description?: string; value: unknown }>; |
| 21 | + copyContextValue: (value: unknown, id: string) => Promise<void>; |
| 22 | + persistState: () => void; |
| 23 | +}; |
| 24 | + |
| 25 | +type MockAgentExtras = Partial<{ |
| 26 | + messages: unknown; |
| 27 | + state: unknown; |
| 28 | + toolHandlers: Record<string, unknown>; |
| 29 | + toolRenderers: Record<string, unknown>; |
| 30 | +}>; |
| 31 | + |
| 32 | +function createMockAgent( |
| 33 | + agentId: string, |
| 34 | + extras: MockAgentExtras = {}, |
| 35 | +): { agent: AbstractAgent; controller: MockAgentController } { |
| 36 | + const subscribers = new Set<AgentSubscriber>(); |
| 37 | + |
| 38 | + const agent = { |
| 39 | + agentId, |
| 40 | + ...extras, |
| 41 | + subscribe(subscriber: AgentSubscriber) { |
| 42 | + subscribers.add(subscriber); |
| 43 | + return { |
| 44 | + unsubscribe: () => subscribers.delete(subscriber), |
| 45 | + }; |
| 46 | + }, |
| 47 | + }; |
| 48 | + |
| 49 | + const emit = (key: keyof AgentSubscriber, payload: unknown) => { |
| 50 | + subscribers.forEach((subscriber) => { |
| 51 | + const handler = subscriber[key]; |
| 52 | + if (handler) { |
| 53 | + (handler as (arg: unknown) => void)(payload); |
| 54 | + } |
| 55 | + }); |
| 56 | + }; |
| 57 | + |
| 58 | + return { agent: agent as unknown as AbstractAgent, controller: { emit } }; |
| 59 | +} |
| 60 | + |
| 61 | +type MockCore = { |
| 62 | + agents: Record<string, AbstractAgent>; |
| 63 | + context: Record<string, unknown>; |
| 64 | + properties: Record<string, unknown>; |
| 65 | + runtimeConnectionStatus: CopilotKitCoreRuntimeConnectionStatus; |
| 66 | + subscribe: (subscriber: CopilotKitCoreSubscriber) => { unsubscribe: () => void }; |
| 67 | +}; |
| 68 | + |
| 69 | +function createMockCore(initialAgents: Record<string, AbstractAgent> = {}) { |
| 70 | + const subscribers = new Set<CopilotKitCoreSubscriber>(); |
| 71 | + const core: MockCore = { |
| 72 | + agents: initialAgents, |
| 73 | + context: {}, |
| 74 | + properties: {}, |
| 75 | + runtimeConnectionStatus: CopilotKitCoreRuntimeConnectionStatus.Connected, |
| 76 | + subscribe(subscriber: CopilotKitCoreSubscriber) { |
| 77 | + subscribers.add(subscriber); |
| 78 | + return { unsubscribe: () => subscribers.delete(subscriber) }; |
| 79 | + }, |
| 80 | + }; |
| 81 | + |
| 82 | + return { |
| 83 | + core, |
| 84 | + emitAgentsChanged(nextAgents = core.agents) { |
| 85 | + core.agents = nextAgents; |
| 86 | + subscribers.forEach((subscriber) => |
| 87 | + subscriber.onAgentsChanged?.({ |
| 88 | + copilotkit: core as unknown as CopilotKitCore, |
| 89 | + agents: core.agents, |
| 90 | + }), |
| 91 | + ); |
| 92 | + }, |
| 93 | + emitContextChanged(nextContext: Record<string, unknown>) { |
| 94 | + core.context = nextContext; |
| 95 | + subscribers.forEach((subscriber) => |
| 96 | + subscriber.onContextChanged?.({ |
| 97 | + copilotkit: core as unknown as CopilotKitCore, |
| 98 | + context: core.context as unknown as Readonly<Record<string, { value: string; description: string }>>, |
| 99 | + }), |
| 100 | + ); |
| 101 | + }, |
| 102 | + }; |
| 103 | +} |
| 104 | + |
| 105 | +describe("WebInspectorElement", () => { |
| 106 | + beforeEach(() => { |
| 107 | + document.body.innerHTML = ""; |
| 108 | + localStorage.clear(); |
| 109 | + const mockClipboard = { writeText: vi.fn().mockResolvedValue(undefined) }; |
| 110 | + (navigator as unknown as { clipboard: typeof mockClipboard }).clipboard = mockClipboard; |
| 111 | + }); |
| 112 | + |
| 113 | + it("records agent events and syncs state/messages/tools", async () => { |
| 114 | + const { agent, controller } = createMockAgent("alpha", { |
| 115 | + messages: [{ id: "m1", role: "user", content: "hi there" }], |
| 116 | + state: { foo: "bar" }, |
| 117 | + toolHandlers: { |
| 118 | + greet: { description: "hello", parameters: { type: "object" } }, |
| 119 | + }, |
| 120 | + }); |
| 121 | + const { core, emitAgentsChanged } = createMockCore({ alpha: agent }); |
| 122 | + |
| 123 | + const inspector = new WebInspectorElement(); |
| 124 | + document.body.appendChild(inspector); |
| 125 | + inspector.core = core as unknown as WebInspectorElement["core"]; |
| 126 | + |
| 127 | + emitAgentsChanged(); |
| 128 | + await inspector.updateComplete; |
| 129 | + |
| 130 | + controller.emit("onRunStartedEvent", { event: { id: "run-1" } }); |
| 131 | + controller.emit("onMessagesSnapshotEvent", { event: { id: "msg-1" } }); |
| 132 | + await inspector.updateComplete; |
| 133 | + |
| 134 | + const inspectorHandle = inspector as unknown as InspectorInternals; |
| 135 | + |
| 136 | + const flattened = inspectorHandle.flattenedEvents; |
| 137 | + expect(flattened.some((evt) => evt.type === "RUN_STARTED")).toBe(true); |
| 138 | + expect(flattened.some((evt) => evt.type === "MESSAGES_SNAPSHOT")).toBe(true); |
| 139 | + expect(inspectorHandle.agentMessages.get("alpha")?.[0]?.contentText).toContain("hi there"); |
| 140 | + expect(inspectorHandle.agentStates.get("alpha")).toBeDefined(); |
| 141 | + expect(inspectorHandle.cachedTools.some((tool) => tool.name === "greet")).toBe(true); |
| 142 | + }); |
| 143 | + |
| 144 | + it("normalizes context, persists state, and copies context values", async () => { |
| 145 | + const { core, emitContextChanged } = createMockCore(); |
| 146 | + const inspector = new WebInspectorElement(); |
| 147 | + document.body.appendChild(inspector); |
| 148 | + inspector.core = core as unknown as WebInspectorElement["core"]; |
| 149 | + |
| 150 | + emitContextChanged({ |
| 151 | + ctxA: { value: { nested: true } }, |
| 152 | + ctxB: { description: "Described", value: 5 }, |
| 153 | + }); |
| 154 | + await inspector.updateComplete; |
| 155 | + |
| 156 | + const inspectorHandle = inspector as unknown as InspectorContextInternals; |
| 157 | + const contextStore = inspectorHandle.contextStore; |
| 158 | + const ctxA = contextStore.ctxA!; |
| 159 | + const ctxB = contextStore.ctxB!; |
| 160 | + expect(ctxA.value).toMatchObject({ nested: true }); |
| 161 | + expect(ctxB.description).toBe("Described"); |
| 162 | + |
| 163 | + await inspectorHandle.copyContextValue({ nested: true }, "ctxA"); |
| 164 | + const clipboard = (navigator as unknown as { clipboard: { writeText: ReturnType<typeof vi.fn> } }).clipboard |
| 165 | + .writeText as ReturnType<typeof vi.fn>; |
| 166 | + expect(clipboard).toHaveBeenCalledTimes(1); |
| 167 | + |
| 168 | + inspectorHandle.persistState(); |
| 169 | + expect(localStorage.getItem("cpk:inspector:state")).toBeTruthy(); |
| 170 | + }); |
| 171 | +}); |
0 commit comments