@cognigy/rest-api-client
Version:
Cognigy REST-Client
336 lines (317 loc) • 10.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.knowledgeAssistTemplate = void 0;
const knowledgeAssistTemplate = ({ data, promptResponse, tileId, searchString, postMessageUrl, enableCopyToClipboard, fontSize, }) => `
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Search Knowledge Base</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
/>
<style>
.min-w-20 {
min-width: 5rem
}
@keyframes blinkGreen {
50% {
background-color: #10b981;
}
}
.blink-green {
animation: blinkGreen 0.5s ease-in-out;
}
.knowledgeContainer {
display: grid;
grid-auto-rows: 1fr;
grid-template-columns: 1fr;
grid-template-rows: 0.5fr 2fr 0.5fr;
grid-template-areas:
"search"
"content"
"footer";
}
.search { grid-area: search; }
.content {
grid-area: content;
overflow: auto;
}
.footer { grid-area: footer; }
</style>
${postbackScript(tileId, postMessageUrl, enableCopyToClipboard)}
</head>
<body class="h-full">
<div
class="h-full items-center bg-white rounded-xl shadow-md p-4 knowledgeContainer overflow-auto"
data-cognigy-copilot-tile-ka
data-cognigy-copilot-tile
>
<div class="flex flex-wrap items-center w-full h-auto search">
<div
class="${fontSize} font-semibold uppercase tracking-wide text-indigo-500"
>
Search
</div>
<div class="flex flex-grow rounded-md border ml-2 min-w-20">
<input
id="searchInput"
type="text"
class="w-full rounded-md p-2 focus:outline-none ${fontSize}"
placeholder="Search your knowledge base"
/>
<button
id="postbackButton"
class="flex items-center rounded-r-md px-4 py-2"
>
<img
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14'/%3E%3C/svg%3E"
alt="Search Icon"
class="h-6 w-8 text-white"
/>
</button>
</div>
</div>
<div class="flex flex-col w-full h-full content overflow-auto">
<div class="${fontSize} mt-5 tracking-wide text-indigo-500">
${searchString}
</div>
${renderPrompt(promptResponse, fontSize)} ${renderSourceElements(data, fontSize)}
</div>
<div class="flex mt-auto justify-between w-full py-2 footer">
${renderButtons(enableCopyToClipboard, fontSize)}
</div>
</div>
</body>
</html>
`;
exports.knowledgeAssistTemplate = knowledgeAssistTemplate;
const renderPrompt = (promptResponse, fontSize) => `
<div class="flex-grow">
<div
id="resultContainer"
class="flex items-center justify-center mt-2 h-full"
>
<textarea
id="textArea"
class="w-full h-full rounded-md border p-2 ${fontSize} focus:outline-none"
placeholder="Your search results will be displayed here"
data-cognigy-content
>
${promptResponse}
</textarea>
<div
id="loader"
class="w-2 hidden h-30 rounded-full border-t-4 border-gray-300 border-solid animate-spin"
style="border-width: 16px; border-top-color: #3498db"
></div>
</div>
</div>
`;
const renderSourceElements = (data, fontSize) => {
const result = data === null || data === void 0 ? void 0 : data.topK[0];
const hasSource = result === null || result === void 0 ? void 0 : result.sourceMetaData.sourceName;
return hasSource ? sourcesElements(fontSize, result === null || result === void 0 ? void 0 : result.sourceMetaData) : "";
};
const renderButtons = (enableCopyToClipboard, fontSize) => `
${enableCopyToClipboard
? `
<button
class="min-w-20 bg-blue-500 hover:bg-blue-700 text-white font-bold rounded focus:ring-4 focus:outline-none focus:ring-blue-300 ${fontSize} py-2 items-center inline-flex justify-center hidden"
data-cognigy-clipboard-button
disabled
>
<span class="default-message">Copy</span>
<span class="success-message hidden inline-flex items-center gap-1">
<svg
class="w-3 h-3 text-white me-1.5"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 16 12"
>
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 5.917 5.724 10.5 15 1.5"
/>
</svg>
Copied!
</span>
</button>
`
: "<div></div>"}
<button
id="liveAgentForwardButton"
class="hidden"
disabled
>
<svg
width="45px"
height="auto"
viewBox="0 0 45 35"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M 18.17 19.653 C 18.538 19.338 16.6 12.9 30.995 15.028 L 30.968 18.05 L 39.7 12.4 L 31.021 6.619 L 31.021 9.326 C 30.1 10.2 16.042 8.143 18.118 19.627"
fill="#0b3694"
transform="scale(-1, 1) translate(-50, 0)"
/>
</svg>
</button>
`;
/**
* Helper function to dynamically render the sources section based on the data provided by the search.
*
* @param source
* @returns
*/
const sourcesElements = (fontSize, source) => {
var _a;
if (!source || !source.url) {
return "";
}
return `
<div class="mt-4">
<div class="${fontSize} font-semibold uppercase tracking-wide text-indigo-500">Source</div>
<div class="mt-2">
<div class="flex flex-col flex-wrap gap-2">
<a href="${source.url}" target="_blank" class="break-all text-indigo-500 ${fontSize} hover:text-indigo-600">${(_a = source.title) !== null && _a !== void 0 ? _a : source.url}</a>
${source.sourceType
? `<p class="${fontSize} break-all">${source.sourceType}</p>`
: ""}
</div>
</div>
</div>
`;
};
const postbackScript = (tileId, postMessageUrl, enableCopyToClipboard) => `
<script>
(function () {
const triggerSearch = () => {
const input = document.getElementById("searchInput").value;
const data = { searchString: input, tileId: "${tileId}" };
window.SDK.postback(data);
document.getElementById("searchInput").value = "";
document.getElementById("loader").style.display = "block";
document.getElementById("textArea").style.display = "none";
};
let showButton = false;
let showCopyButton = true;
function updateButtonVisibility() {
const elements = document.querySelectorAll(
"[data-cognigy-copilot-tile-ka]",
);
elements.forEach((element) => {
const button = element.querySelector("#liveAgentForwardButton");
if (button) {
button.className = showButton
? "justify-self-end col-start-8"
: "hidden";
}
});
}
function updateCopyButtonVisibility() {
const elements = document.querySelectorAll(
"[data-cognigy-copilot-tile-ka]",
);
elements.forEach((element) => {
const button = element.querySelector("[data-cognigy-clipboard-button]");
if(!button) return;
if (showCopyButton) {
button.classList.remove("hidden");
} else {
button.classList.add("hidden");
}
});
}
window.addEventListener("message", (event) => {
const message = event.data;
if (message.type === "toggleButton") {
showButton = message.show;
updateButtonVisibility();
}
if (message.type === "toggleCopyButton") {
showCopyButton = message.show;
updateCopyButtonVisibility();
}
});
function sendPostMessage() {
const wrapper = event.target.closest("[data-cognigy-copilot-tile]");
const contentElement = wrapper.querySelector(
"[data-cognigy-content]",
);
const content = contentElement.value.trim();
window.parent.postMessage(
{ type: "replyBoxContent", content },
"${postMessageUrl}",
);
}
${enableCopyToClipboard
? ` async function copyToClipboard(event) {
const wrapper = event.target.closest("[data-cognigy-copilot-tile]");
const contentElement = wrapper.querySelector(
"[data-cognigy-content]",
);
const button = wrapper.querySelector(
"[data-cognigy-clipboard-button]",
);
button.classList.add("blink-green");
button.addEventListener(
"animationend",
function () {
button.classList.remove("blink-green");
},
{ once: true },
);
const defaultMessage = button.querySelector(".default-message");
const successMessage = button.querySelector(".success-message");
try {
await navigator.clipboard.writeText(contentElement.value.trim());
defaultMessage.classList.add("hidden");
successMessage.classList.remove("hidden");
// reset to default state
setTimeout(() => {
defaultMessage.classList.remove("hidden");
successMessage.classList.add("hidden");
}, 2000);
} catch (err) {
console.error("Failed to copy: ", err);
}
}`
: ""}
document.addEventListener("DOMContentLoaded", updateButtonVisibility);
document.addEventListener("DOMContentLoaded", updateCopyButtonVisibility);
document.addEventListener("DOMContentLoaded", () => {
document
.getElementById("searchInput")
.addEventListener("keypress", (event) => {
if (event.key === "Enter") {
event.preventDefault();
triggerSearch();
}
});
document.querySelector("#postbackButton").addEventListener("click", triggerSearch);
document
.querySelector("[data-cognigy-copilot-tile-ka] #liveAgentForwardButton")
.addEventListener("click", sendPostMessage);
${enableCopyToClipboard
? `document
.querySelector("[data-cognigy-copilot-tile-ka] [data-cognigy-clipboard-button]")
.addEventListener("click", copyToClipboard);
document
.querySelector("[data-cognigy-copilot-tile-ka] [data-cognigy-clipboard-button]")
.removeAttribute("disabled");`
: ""}
document
.querySelector("[data-cognigy-copilot-tile-ka] #liveAgentForwardButton")
.removeAttribute("disabled");
});
})();
</script>
`;
//# sourceMappingURL=knowledgeAssistTemplate.js.map