@copilotkit/web-inspector 1.77.1 → 1.77.2

package/dist/index.cjs

@@ -834,7 +834,86 @@ function coerceJsonValue(value) {
 		return value;
 	}
 }
+let inspectorJsonRenderer = null;
+let inspectorJsonSlotCount = 0;
+const JSON_BLOCK_TAG = "cpk-json-block";
+/**
+* Replaces the inspector's built-in JSON blocks (tool arguments and results,
+* state, events, and context) with a host renderer. Pass `null` to restore the
+* built-in blocks. Set it before the inspector renders: a block that is
+* already on screen changes at the inspector's next render.
+*
+* @example
+* ```ts
+* setInspectorJsonRenderer((container, value) => {
+*   const root = createRoot(container);
+*   root.render(<JsonView value={value} />);
+*   return () => root.unmount();
+* });
+* ```
+*/
+function setInspectorJsonRenderer(renderer) {
+	inspectorJsonRenderer = renderer;
+}
+/**
+* Hosts one value drawn by the host renderer. Inside a shadow root, the
+* container lives in the shadow host's light DOM and shows here through a
+* named slot, so the host page's own styles apply to what the renderer draws.
+*/
+var CpkJsonBlock = class extends (globalThis.HTMLElement ?? class {}) {
+	#value = void 0;
+	#hasValue = false;
+	#cleanup;
+	#container;
+	get value() {
+		return this.#value;
+	}
+	set value(next) {
+		if (this.#hasValue && Object.is(next, this.#value)) return;
+		this.#value = next;
+		this.#hasValue = true;
+		if (this.isConnected) this.#render();
+	}
+	connectedCallback() {
+		this.style.display = "block";
+		this.#render();
+	}
+	disconnectedCallback() {
+		this.#teardown();
+	}
+	#render() {
+		this.#teardown();
+		const renderer = inspectorJsonRenderer;
+		if (!renderer) return;
+		const root = this.getRootNode();
+		const container = this.ownerDocument.createElement("div");
+		if (root.nodeType === Node.DOCUMENT_FRAGMENT_NODE && "host" in root) {
+			inspectorJsonSlotCount += 1;
+			const name = `cpk-json-${inspectorJsonSlotCount}`;
+			const slot = this.ownerDocument.createElement("slot");
+			slot.name = name;
+			this.replaceChildren(slot);
+			container.slot = name;
+			root.host.append(container);
+		} else this.replaceChildren(container);
+		this.#container = container;
+		const cleanup = renderer(container, this.#value);
+		this.#cleanup = typeof cleanup === "function" ? cleanup : void 0;
+	}
+	#teardown() {
+		const cleanup = this.#cleanup;
+		this.#cleanup = void 0;
+		cleanup?.();
+		this.#container?.remove();
+		this.#container = void 0;
+		this.replaceChildren();
+	}
+};
 function renderHighlightedJsonBlock(value, options = {}) {
+	if (inspectorJsonRenderer) return lit.html`<cpk-json-block
+      .value=${value}
+      style=${options.maxHeight ? `overflow:auto;max-height:${options.maxHeight}` : lit.nothing}
+    ></cpk-json-block>`;
 	const parsed = coerceJsonValue(value);
 	return lit.html`<pre class="cpk-json-block" style=${(options.maxHeight ? `max-height:${options.maxHeight}` : void 0) || lit.nothing}>
 ${(0, lit_directives_unsafe_html_js.unsafeHTML)(highlightedJson(parsed))}</pre
@@ -16196,6 +16275,7 @@ function defineWebInspector(registry = globalThis.customElements) {
 	defineElementOnce(registry, THREAD_INSPECTOR_TAG, CpkThreadInspector);
 	defineElementOnce(registry, "cpk-thread-details", ɵCpkThreadDetails);
 	defineElementOnce(registry, "cpk-memory-list", CpkMemoryList);
+	defineElementOnce(registry, JSON_BLOCK_TAG, CpkJsonBlock);
 	defineElementOnce(registry, WEB_INSPECTOR_TAG, WebInspectorElement);
 }
 /**
@@ -16218,6 +16298,7 @@ exports.WEB_INSPECTOR_TAG = WEB_INSPECTOR_TAG;
 exports.WebInspectorElement = WebInspectorElement;
 exports.configureWebInspectorElement = configureWebInspectorElement;
 exports.defineWebInspector = defineWebInspector;
+exports.setInspectorJsonRenderer = setInspectorJsonRenderer;
 exports.ɵCpkThreadDetails = ɵCpkThreadDetails;
 exports.ɵbuildCapabilityRows = buildCapabilityRows;
 exports.ɵmaxRecallScore = maxRecallScore;