@cognigy/rest-api-client
Version:
Cognigy REST-Client
225 lines (209 loc) • 7.43 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const nextActionWidgetTemplate = ({ text, postMessageUrl, enableCopyToClipboard, fontSize, actionFontSize, }) => {
return `
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Next Best Action</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;
}
</style>
<script>
(function () {
let showButton = false;
let showCopyButton = true;
function updateCopyButtonVisibility() {
const elements = document.querySelectorAll(
"[data-cognigy-copilot-tile-nba]",
);
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");
}
});
}
function updateButtonVisibility() {
const elements = document.querySelectorAll(
"[data-cognigy-copilot-tile-nba]",
);
elements.forEach((element) => {
const button = element.querySelector("#liveAgentForwardButton");
if (button) {
button.className = showButton
? "justify-self-end col-start-8"
: "hidden";
}
});
}
function sendPostMessage(event) {
const wrapper = event.target.closest("[data-cognigy-copilot-tile]");
const contentElement = wrapper.querySelector(
"[data-cognigy-content]",
);
window.parent.postMessage(
{ type: "replyBoxContent", content: contentElement.innerHTML.trim() },
"${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.textContent.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);
}
}
`
: ""}
window.addEventListener("message", (event) => {
const message = event.data;
if (message.type === "toggleButton") {
showButton = message.show;
updateButtonVisibility();
}
if (message.type === "toggleCopyButton") {
showCopyButton = message.show;
updateCopyButtonVisibility();
}
});
document.addEventListener("DOMContentLoaded", updateButtonVisibility);
document.addEventListener("DOMContentLoaded", updateCopyButtonVisibility);
document.addEventListener("DOMContentLoaded", () => {
document
.querySelector("[data-cognigy-copilot-tile-nba] #liveAgentForwardButton")
.addEventListener("click", sendPostMessage);
document
.querySelector("[data-cognigy-copilot-tile-nba] #liveAgentForwardButton")
.removeAttribute("disabled");
${enableCopyToClipboard
? `
document
.querySelector("[data-cognigy-copilot-tile-nba] [data-cognigy-clipboard-button]")
.addEventListener("click", copyToClipboard);
document
.querySelector("[data-cognigy-copilot-tile-nba] [data-cognigy-clipboard-button]")
.removeAttribute("disabled");
`
: ""}
});
})();
</script>
</head>
<body class="h-full">
<div
class="flex flex-col h-full overflow-auto p-4 justify-center pb-1 bg-white rounded-xl shadow-md"
data-cognigy-copilot-tile
data-cognigy-copilot-tile-nba
>
<div class="flex justify-between">
<span
class="${fontSize} font-semibold uppercase tracking-wide text-indigo-500 flex-grow"
>
Next Best Action
</span>
<img
class="h-6 w-6"
src="https://www.cognigy.com/hubfs/AI%20badge.png"
alt="AI Logo"
/>
</div>
<p class="flex-grow overflow-auto text-gray-800 ${actionFontSize}" data-cognigy-content>
${text}
</p>
<div class="flex mt-auto w-full justify-between py-2">
${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>
</div>
</div>
</body>
</html>
`;
};
exports.default = nextActionWidgetTemplate;
//# sourceMappingURL=nextActionWidgetTemplate.js.map