Skip to content

Commit b908eaa

Browse files
lbeurerkellnerlbeurerkellner
committed
loops, improved playgrounds
1 parent 2198d4c commit b908eaa

File tree

11 files changed

+585
-211
lines changed

11 files changed

+585
-211
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
__pycache__/mkdocs_config.cpython-312.pyc
2+
__pycache__

‎docs/assets/invariant.css‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -706,4 +706,39 @@ ul.md-nav__list {
706706
transform: translateX(-50%);
707707
height: 18pt;
708708
background-color: #8993FE;
709+
}
710+
711+
.language-example-trace {
712+
display: none;
713+
}
714+
715+
.language-guardrail {
716+
position: relative;
717+
margin-top: 30pt;
718+
}
719+
720+
.language-guardrail .action-links {
721+
display: inline-block;
722+
position: absolute;
723+
top: -22pt;
724+
right: 0pt;
725+
z-index: 10;
726+
font-size: 10pt;
727+
display: flex;
728+
flex-direction: row;
729+
gap: 10pt;
730+
}
731+
732+
.action-links a.link {
733+
margin-right: 5pt;
734+
color: #3A3E60;
735+
opacity: 0.4;
736+
transition: opacity 0.2s;
737+
text-decoration: none !important;
738+
}
739+
740+
.action-links a.link:hover {
741+
text-decoration: none;
742+
color: var(--md-accent-fg-color);
743+
opacity: 1.0;
709744
}

‎docs/assets/js/highlight.js‎

Lines changed: 105 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,112 @@
1-
BASE_URL = 'http://localhost/';
1+
BASE_URL = "http://localhost/";
22

3-
function changeElements(codeElements, endpoint) {
4-
// Add a button to each pre element
5-
codeElements.forEach(function(codeElement) {
6-
7-
// replace the code element with an iframe
8-
const textContent = codeElement.textContent || codeElement.innerText;
9-
const encodedContent = btoa(textContent);
10-
// get a UUID
11-
const id = crypto.randomUUID().toString();
12-
const iframe = document.createElement('iframe', { id: id });
13-
iframe.src = `${BASE_URL}embed/${endpoint}=${encodedContent}&id=${id}`;
14-
codeElement.replaceWith(iframe);
15-
16-
window.addEventListener('message', function(event) {
17-
//check which element the message is coming from
18-
if (event.data.type === 'resize' && event.data.id === id) {
19-
iframe.style.height = event.data.height + 'px';
20-
}
21-
});
22-
23-
});
3+
function encodeGuardrailURIComponent(content) {
4+
/**
5+
* Encodes the content using base64 and then encodes it for URL.
6+
*
7+
* @param {string} content - The content to encode.
8+
*
9+
*/
10+
return encodeURIComponent(btoa(content));
11+
}
12+
13+
function findExampleTraceElement(codeElement) {
14+
// check sibling with class language-example-trace
15+
let exampleTraceElement = codeElement.nextElementSibling;
16+
if (exampleTraceElement) {
17+
if (exampleTraceElement.classList.contains("language-example-trace")) {
18+
return exampleTraceElement;
19+
}
20+
}
21+
return null;
2422
}
2523

26-
document.addEventListener('DOMContentLoaded', function() {
27-
// check if BASE_URL is defined and reachable
28-
fetch(`${BASE_URL}embed/traceview`)
29-
.then(response => {
30-
if (!response.ok) {
31-
console.log('Network response was not ok');
32-
throw new Error('Network response was not ok');
24+
function findSnippetTitle(codeElement) {
25+
let exampleTitleElement = codeElement.previousElementSibling;
26+
if (exampleTitleElement) {
27+
if (exampleTitleElement.tagName === "P") {
28+
let exampleTitle = exampleTitleElement.innerText;
29+
if (exampleTitle.startsWith("Example:")) {
30+
let title = exampleTitle.substring(8).trim();
31+
// remove trailing :
32+
if (title.endsWith(":")) {
33+
title = title.substring(0, title.length - 1).trim();
3334
}
34-
return response.text();
35+
// remove leading whitespace
36+
return title;
37+
}
38+
}
39+
}
40+
return "New Guardrail";
41+
}
42+
43+
function changeElements(codeElements, endpoint) {
44+
// Add a button to each pre element
45+
codeElements.forEach(function (codeElement) {
46+
// replace the code element with an iframe
47+
let textContent = codeElement.textContent || codeElement.innerText;
48+
49+
// parse and split contents
50+
let encodedContent = encodeGuardrailURIComponent(textContent);
51+
52+
let exampleTraceElement = findExampleTraceElement(codeElement);
53+
let exampleTraceURIComponent = "";
54+
if (exampleTraceElement) {
55+
exampleTraceURIComponent =
56+
"&input=" +
57+
encodeGuardrailURIComponent(
58+
exampleTraceElement.textContent || exampleTraceElement.innerText
59+
);
60+
}
61+
62+
// add links for the ${BASE_URL}/playground?policy=...&input=... (Call it Open In Playground)
63+
const container = document.createElement("div");
64+
container.className = "action-links";
65+
66+
const playgroundLink = document.createElement("a");
67+
playgroundLink.className = "link open-in-playground";
68+
playgroundLink.href = `${BASE_URL}${endpoint}=${encodedContent}${exampleTraceURIComponent}`;
69+
playgroundLink.target = "_blank";
70+
playgroundLink.innerText = "⏵ Open In Playground";
71+
72+
const agentLink = document.createElement("a");
73+
agentLink.className = "link add-to-agent";
74+
agentLink.href = `${BASE_URL}deploy-guardrail#policy-code=${encodeURIComponent(
75+
textContent
76+
)}&name=${encodeURIComponent(findSnippetTitle(codeElement))}`;
77+
agentLink.target = "_blank";
78+
agentLink.innerText = "+ Add to Agent";
79+
80+
container.appendChild(agentLink);
81+
container.appendChild(playgroundLink);
82+
83+
codeElement.appendChild(container);
84+
});
85+
}
86+
87+
document.addEventListener("DOMContentLoaded", function () {
88+
// check if BASE_URL is defined and reachable
89+
fetch(`${BASE_URL}embed/traceview`)
90+
.then((response) => {
91+
if (!response.ok) {
92+
console.log("Network response was not ok");
93+
throw new Error("Network response was not ok");
94+
}
95+
return response.text();
3596
})
36-
.then(data => {
37-
// if we can reach it, add buttons to trace and guardrail elements
38-
// currently disabled as the traceview endpoint is not yet enabled on explorer
39-
changeElements(document.querySelectorAll('div.language-trace'), 'traceview?trace')
40-
changeElements(document.querySelectorAll('div.language-guardrail'), 'playground?policy')
97+
.then((data) => {
98+
// if we can reach it, add buttons to trace and guardrail elements
99+
// currently disabled as the traceview endpoint is not yet enabled on explorer
100+
changeElements(
101+
document.querySelectorAll("div.language-trace"),
102+
"traceview?trace"
103+
);
104+
changeElements(
105+
document.querySelectorAll("div.language-guardrail"),
106+
"playground?policy"
107+
);
41108
})
42-
.catch(error => {
43-
console.error('There was a problem with the fetch operation:', error);
109+
.catch((error) => {
110+
console.error("There was a problem with the fetch operation:", error);
44111
});
45-
46-
});
112+
});

0 commit comments

Comments
 (0)