const AGENTLAB_AGENT_DATA = {"createdAt":"2025-05-04T22:13:51.321Z","updatedAt":"2025-05-04T22:13:51.321Z","id":11,"style":{"banner":true,"topSpace":0,"leftSpace":0,"mainColor":"#dd8342","popupImage":"https://s3.eu-central-1.amazonaws.com/agentlab-prod-public/agents/46379db1-32d9-46b3-989b-4620a1bc3802/public/popupImage?1747446852963","rightSpace":0,"bottomSpace":0,"headerImage":"https://s3.eu-central-1.amazonaws.com/agentlab-prod-public/agents/46379db1-32d9-46b3-989b-4620a1bc3802/public/headerImage?1747446852963","dashboardImage":"https://s3.eu-central-1.amazonaws.com/agentlab-prod-public/agents/46379db1-32d9-46b3-989b-4620a1bc3802/public/dashboardImage?1747446852963","secondaryColor":"#b7b33c","widgetPosition":"bottom_right"},"name":"Sophia | Concierge Virtuale","description":"Phi Hotel Dei Medaglioni","payoff":"","systemPrompt":"","organizationDescription":"Concierge virtuale del Phi Hotel Dei Medaglioni.","personality":null,"draftId":"46379db1-32d9-46b3-989b-4620a1bc3802","popupEnabled":false} const AGENTLAB_CONFIG = { ANIMATION_TIMEOUTS: {}, IFRAME_ID: "AGENTLAB_IFRAME", BTN_ID: "AGENTLAB_BTN", BTN_CONTAINER: "AGENTLAB_BTN_CONTAINER", POPUP_ID: "AGENTLAB_POPUP", hideElement: (elementId, addHideClass) => { if (elementId && AGENTLAB_CONFIG.ANIMATION_TIMEOUTS[elementId]) { clearTimeout(AGENTLAB_CONFIG.ANIMATION_TIMEOUTS[elementId]) AGENTLAB_CONFIG.ANIMATION_TIMEOUTS[elementId] = null; } let element = document.getElementById(elementId) if (element) { element.style.animation = addHideClass ? "fadeOut 0.2s ease-out forwards" : "slideFadeOut 0.2s ease-out forwards" AGENTLAB_CONFIG.ANIMATION_TIMEOUTS[elementId] = setTimeout(() => { element.setAttribute("hidden", true) if(addHideClass) element?.classList?.add("agentlab-hide"); }, 400); } }, showElement: (elementId, removeHideClass) => { if (elementId && AGENTLAB_CONFIG.ANIMATION_TIMEOUTS[elementId]) { clearTimeout(AGENTLAB_CONFIG.ANIMATION_TIMEOUTS[elementId]) AGENTLAB_CONFIG.ANIMATION_TIMEOUTS[elementId] = null; } let element = document.getElementById(elementId) if (element) { element.style.animation = removeHideClass ? "fadeIn 0.2s ease-out forwards" : "slideFadeIn 0.2s ease-out forwards" element?.removeAttribute("hidden"); if(removeHideClass) element?.classList?.remove("agentlab-hide"); } } } function addStyle() { const style = document.createElement("style"); style.innerHTML = ` @keyframes slideFadeIn { 0% { opacity: 0; transform: translateY(50px); /* transform: translateY(100%); */ } 50% { opacity: 0.3; /* transform: translateY(-30px); */ } 99% { opacity: 0.8; transform: translateY(2px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slideFadeOut { 0% { opacity: 1; transform: translateY(0); /* transform: translateY(100%); */ } 50% { opacity: 0.8; transform: translateY(2px); /* transform: translateY(-30px); */ } 99% { opacity: 0.3; } 100% { opacity: 0; transform: translateY(50px); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes shadow { 0% { box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.45); } 50% { box-shadow: 0px 0px 10px 4px rgba(255, 255, 255, 0.45); } 100% { box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.45); } } @keyframes size-pulse { 0% { transform: scale(1); filter: blur(10px); } 50% { transform: scale(0.2); } 100% { transform: scale(1); filter: blur(10px); } } @keyframes top-left-pulse { 0% { transform: translate(0, 0); } 50% { transform: translate(-5px, -5px); } 100% { transform: translate(0, 0); } } @keyframes top-right-pulse { 0% { transform: translate(0, 0); } 50% { transform: translate(5px, -5px); } 100% { transform: translate(0, 0); } } @keyframes bottom-right-pulse { 0% { transform: translate(0, 0); } 50% { transform: translate(5px, 5px); } 100% { transform: translate(0, 0); } } @keyframes bottom-left-pulse { 0% { transform: translate(0, 0); } 50% { transform: translate(-5px, 5px); } 100% { transform: translate(0, 0); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes shrink { 0% { transform: scale(1); } 50% { transform: scale(0.9); } 100% { transform: scale(1); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .fade-in { animation: fadeIn 0.5s ease-in-out forwards; } .shrink { transform: scale(1); transition: all 0.2s ease-in-out; } .shrink:active { transform: scale(0.9); } #AGENTLAB_IFRAME { position: fixed; z-index: 9999999999999; opacity: 0; border-radius: 17px; } #AGENTLAB_IFRAME .agentlab-hide { display: none !important; } #AGENTLAB_IFRAME .loader-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: white; border-radius: 17px; border: 1px solid #f2f2f2; z-index: 1; } #AGENTLAB_IFRAME .loader-container #spinner { border: 4px solid rgba(0, 0, 0, 0.1); border-left: 6px solid #ffffff; border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; } #AGENTLAB_IFRAME iframe { background-color: transparent; z-index: 0; border: none; overflow: hidden; border-radius: 17px; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); aspect-ratio: 0.65; } #AGENTLAB_BTN_CONTAINER { position: fixed; z-index: 9999999999999; } #AGENTLAB_BTN_CONTAINER .agentlab-popup { position: absolute; bottom: calc(100% + 20px); right: 6px; transition: all 0.2s ease-in-out; /* width: 200px; */ aspect-ratio: 1.96; height: 170px; border-radius: 20px; } #AGENTLAB_BTN_CONTAINER .agentlab-popup img { height: 100%; width: 100%; border-radius: 20px; cursor: pointer; } #AGENTLAB_BTN_CONTAINER .agentlab-popup .agentlab-arrow { width: 30px; height: 30px; background-color: white; border-radius: 6px; position: absolute; bottom: -9px; right: 20px; z-index: -1; transform: rotate(45deg); } #AGENTLAB_BTN_CONTAINER .agentlab-popup-close { position: absolute; bottom: calc(100% + 10px); right: 0; width: 20px; height: 20px; cursor: pointer; background-color: rgba(90, 90, 90, 0.5); border-radius: 10.96px; padding: 5px; } #AGENTLAB_BTN_CONTAINER .agentlab-popup-close img { width: 100%; height: 100%; } #AGENTLAB_BTN { width: 80px; min-width: 80px; height: 80px; min-height: 80px; border-radius: 9999px; transition: all 0.2s ease-in-out; -webkit-tap-highlight-color: transparent; } #AGENTLAB_BTN .glowing { position: relative; width: 100%; height: 100%; } #AGENTLAB_BTN .image, #AGENTLAB_BTN .close-image { width: 85%; height: 85%; border-radius: 100%; background-color: white; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; z-index: 99; transition: all 0.2s ease-in-out; cursor: pointer; } #AGENTLAB_BTN .circles-container { width: 100%; height: 100%; border-radius: 50%; overflow: visible; z-index: -1; animation: rotate 12s linear infinite; position: absolute; top: 0; left: 0; width: 120%; height: 120%; margin-left: -10%; margin-top: -10%; } #AGENTLAB_BTN .circles-container .circle { width: 50%; height: 50%; position: absolute; filter: blur(10px); border-radius: 99999px; transition: all 0.12s ease-in-out; } #AGENTLAB_BTN .circles-container .top-left { top: 16px; left: 16px; z-index: 1; animation: size-pulse 12s infinite ease-in-out, top-left-pulse 12s infinite ease-in-out; } #AGENTLAB_BTN .circles-container .top-right { top: 16px; right: 16px; z-index: 2; animation: size-pulse 12s infinite ease-in-out, top-right-pulse 12s infinite ease-in-out; } #AGENTLAB_BTN .circles-container .bottom-left { bottom: 16px; left: 16px; z-index: 2; animation: size-pulse 12s infinite ease-in-out, bottom-left-pulse 12s infinite ease-in-out; } #AGENTLAB_BTN .circles-container .bottom-right { bottom: 16px; right: 16px; z-index: 1; animation: size-pulse 12s infinite ease-in-out, bottom-right-pulse 12s infinite ease-in-out; } #AGENTLAB_BTN .image { animation: fadeIn 0.3s ease-in-out forwards; z-index: 1; } #AGENTLAB_BTN .close-image { z-index: 0; } #AGENTLAB_BTN:not(.initialized) .close-image { opacity: 0; } #AGENTLAB_BTN.initialized .close-image { animation: fadeOut 0.4s ease-in-out 0.1s forwards; } #AGENTLAB_BTN.opened .image { animation: fadeOut 0.3s ease-in-out forwards; } #AGENTLAB_BTN.opened .close-image { animation: fadeIn 0.3s ease-in-out forwards; } #AGENTLAB_CHAT_CONTROLS { position: absolute; } @media screen and (max-width: 678px) { #AGENTLAB_IFRAME { top: 0 !important; left: 0 !important; right: unset !important; bottom: unset !important; width: 100% !important; height: 100% !important; border-radius: 0 !important; } #AGENTLAB_IFRAME iframe { width: 100% !important; height: 100% !important; border-radius: 0 !important; } #AGENTLAB_BTN_CONTAINER { bottom: 10px !important; right: 4px !important; top: unset !important; left: unset !important; } #AGENTLAB_BTN { width: 60px !important; min-width: 60px !important; height: 60px !important; min-height: 60px !important; } #AGENTLAB_BTN.opened { bottom: 3px !important; right: -3px !important; } #AGENTLAB_BTN.opened .circles-container { display: none; } #AGENTLAB_BTN_CONTAINER .agentlab-popup { height: 100px; } } ` document.head.appendChild(style); } function addCircle(parentEl, className, background) { const circle = document.createElement("div"); circle.className = `circle fade-in ${className || ""}`; circle.style.backgroundColor = background !== "undefined" ? background : "#7980D8"; if (parentEl) parentEl.appendChild(circle); } let positions = {}; switch (AGENTLAB_AGENT_DATA?.style?.widgetPosition) { case "bottom_right": positions = { bottom: `${AGENTLAB_AGENT_DATA?.style?.bottomSpace || 0}px`, right: `${AGENTLAB_AGENT_DATA?.style?.rightSpace || 0}px` } break; case "bottom_left": positions = { bottom: `${AGENTLAB_AGENT_DATA?.style?.bottomSpace || 0}px`, left: `${AGENTLAB_AGENT_DATA?.style?.leftSpace || 0}px` } break; case "top_left": positions = { top: `${AGENTLAB_AGENT_DATA?.style?.topSpace || 0}px`, left: `${AGENTLAB_AGENT_DATA?.style?.leftSpace || 0}px` } break; case "top_right": positions = { top: `${AGENTLAB_AGENT_DATA?.style?.topSpace || 0}px`, right: `${AGENTLAB_AGENT_DATA?.style?.rightSpace || 0}px` } break; default: positions = { bottom: "15px", right: "15px" } } function loadImageAsBase64(url) { return new Promise(async (resolve) => { try{ const response = await fetch(url); const blob = await response.blob(); const reader = new FileReader(); reader.onloadend = () => resolve(reader.result); reader.readAsDataURL(blob); } catch(error){ resolve(url); } }); } var popupTimeout = null; function addAgentlabPopup() { localStorage.setItem("AGENTLAB_POPUP_CLOSED", "") const popup = document.createElement('div'); popup.id = AGENTLAB_CONFIG.POPUP_ID; popup.className = 'agentlab-popup'; popup.style.animation = "slideFadeIn 0.3s ease-out forwards" popup.setAttribute("hidden", "true"); loadImageAsBase64(AGENTLAB_AGENT_DATA?.style?.popupImage || "https://agentlab-assets.s3.eu-central-1.amazonaws.com/popup.png").then((result) => { const img = document.createElement("img"); img.src = result; img.onclick = function () { clearTimeout(popupTimeout) let iframeElement = document.getElementById(AGENTLAB_CONFIG.IFRAME_ID) let widgetBtn = document.getElementById(AGENTLAB_CONFIG.BTN_ID) if (widgetBtn) { widgetBtn.classList.toggle("opened"); } if (iframeElement) { if (iframeElement?.hasAttribute("hidden")) { AGENTLAB_CONFIG.showElement(AGENTLAB_CONFIG.IFRAME_ID); hideAgentlabPopup(); } } } popup.appendChild(img); const closeImg = document.createElement("img"); closeImg.src = "https://agentlab-assets.s3.eu-central-1.amazonaws.com/popup-close.png"; const closeImgDiv = document.createElement("div"); closeImgDiv.className = "agentlab-popup-close"; closeImgDiv.appendChild(closeImg); closeImgDiv.onclick = () => { hideAgentlabPopup(); localStorage.setItem("AGENTLAB_POPUP_CLOSED", "true") } popup.appendChild(closeImgDiv); const arrowDiv = document.createElement("div"); arrowDiv.className = "agentlab-arrow"; popup.appendChild(arrowDiv); const btnEl = document.getElementById(AGENTLAB_CONFIG.BTN_CONTAINER); if (btnEl) { btnEl.appendChild(popup); setAgentlabPopupTimeout(); } }) } function playPopupSound() { const sound = new Audio("https://agentlab-assets.s3.eu-central-1.amazonaws.com/popup-sound.mp3"); sound.volume = 0.7; sound.play().catch(error => { console.error('Sound play error:', error); }); } function hideAgentlabPopup () { clearTimeout(popupTimeout) AGENTLAB_CONFIG.hideElement(AGENTLAB_CONFIG.POPUP_ID); } function setAgentlabPopupTimeout() { clearTimeout(popupTimeout) if(localStorage.getItem("AGENTLAB_POPUP_CLOSED") !== "true"){ const popupEl = document.querySelector(`#${AGENTLAB_CONFIG.BTN_CONTAINER} .agentlab-popup`); if(popupEl){ popupTimeout = setTimeout(() => { AGENTLAB_CONFIG.showElement(AGENTLAB_CONFIG.POPUP_ID); playPopupSound(); }, 3000) } } } async function createAgentlabBtn() { const imageUrl = AGENTLAB_AGENT_DATA?.style?.chatLaunchImage || "https://app.agentlab.so/assets/images/placeholder.png" loadImageAsBase64(imageUrl).then((result) => { const bg = AGENTLAB_AGENT_DATA?.style?.mainColor || "#7980D8"; const bg2 = `${AGENTLAB_AGENT_DATA?.style?.secondaryColor}` || "#7980D8"; const AGENTLAB_BTN_CONTAINER = document.createElement("div"); AGENTLAB_BTN_CONTAINER.id = AGENTLAB_CONFIG.BTN_CONTAINER; const AGENTLAB_BTN = document.createElement("div"); AGENTLAB_BTN.id = AGENTLAB_CONFIG.BTN_ID; AGENTLAB_BTN.className = "shrink fade-in"; AGENTLAB_BTN_CONTAINER.style.top = positions?.top || ""; AGENTLAB_BTN_CONTAINER.style.bottom = positions?.bottom || ""; AGENTLAB_BTN_CONTAINER.style.left = positions?.left || ""; AGENTLAB_BTN_CONTAINER.style.right = positions?.right || ""; AGENTLAB_BTN.onclick = function () { clearTimeout(popupTimeout) let iframeElement = document.getElementById(AGENTLAB_CONFIG.IFRAME_ID) let widgetBtn = document.getElementById(AGENTLAB_CONFIG.BTN_ID) if (widgetBtn) { widgetBtn.classList.toggle("opened"); } if (iframeElement) { if (iframeElement?.hasAttribute("hidden")) { AGENTLAB_CONFIG.showElement(AGENTLAB_CONFIG.IFRAME_ID); hideAgentlabPopup(); // AGENTLAB_CONFIG.hideElement(AGENTLAB_CONFIG.BTN_ID); } else { AGENTLAB_CONFIG.hideElement(AGENTLAB_CONFIG.IFRAME_ID); // setAgentlabPopupTimeout(); // AGENTLAB_CONFIG.showElement(AGENTLAB_CONFIG.BTN_ID); } } } const innerDiv = document.createElement("div"); innerDiv.className = "glowing fade-in"; const circlesContainer = document.createElement("div"); circlesContainer.className = "circles-container fade-in"; addCircle(circlesContainer, "top-left", bg); addCircle(circlesContainer, "top-right", bg2); addCircle(circlesContainer, "bottom-left", bg2); addCircle(circlesContainer, "bottom-right", bg); innerDiv.appendChild(circlesContainer); const image = document.createElement("img"); image.className = "image"; image.src = result; innerDiv.appendChild(image); const closeImg = document.createElement("img"); closeImg.className = "close-image"; const closeImgUrl = "https://app.agentlab.so/assets/images/widget_close.png" closeImg.src = closeImgUrl; innerDiv.appendChild(closeImg); AGENTLAB_BTN.appendChild(innerDiv) AGENTLAB_BTN_CONTAINER.appendChild(AGENTLAB_BTN); document.body.appendChild(AGENTLAB_BTN_CONTAINER); setTimeout(() => { AGENTLAB_BTN.classList.add("initialized") if(AGENTLAB_AGENT_DATA.popupEnabled){ addAgentlabPopup(); } }, 2000) }) } function getAgentlabSessionId () { return localStorage.getItem("AGENTLAB_SESSION_ID") } function initLoading (parentNode) { if(parentNode){ let loaderContainer = document.createElement("div"); loaderContainer.id = "AGENTLAB-LOADER"; loaderContainer.className = "loader-container"; // loader let loader = document.createElement("div"); loader.id = "spinner"; loader.style = "" loaderContainer.appendChild(loader); parentNode.appendChild(loaderContainer); } } function showLoader () { const loaderEl = document.getElementById("AGENTLAB-LOADER") if (loaderEl) { AGENTLAB_CONFIG.showElement("AGENTLAB-LOADER", true); } } function hideLoader () { const loaderEl = document.getElementById("AGENTLAB-LOADER") if (loaderEl) { setTimeout(() => { AGENTLAB_CONFIG.hideElement("AGENTLAB-LOADER", true); }, 500) } } async function initIframe () { const sessionId = getAgentlabSessionId(); const AGENTLAB_IFRAME_CONTAINER = document.createElement("div"); AGENTLAB_IFRAME_CONTAINER.id = "AGENTLAB_IFRAME"; AGENTLAB_IFRAME_CONTAINER.hidden = true; // initLoading(AGENTLAB_IFRAME_CONTAINER); const AGENTLAB_IFRAME = document.createElement("iframe"); // AGENTLAB_IFRAME.addEventListener("load", () => { // setTimeout(() => { // hideLoader(); // }, 1000) // }) AGENTLAB_IFRAME.setAttribute("allow", "microphone") if(sessionId) AGENTLAB_IFRAME.src = "https://app.agentlab.so/w/46379db1-32d9-46b3-989b-4620a1bc3802/chat?session=" + sessionId else AGENTLAB_IFRAME.src = "https://app.agentlab.so/w/46379db1-32d9-46b3-989b-4620a1bc3802/chat" AGENTLAB_IFRAME_CONTAINER.style.top = positions?.top ? `${AGENTLAB_AGENT_DATA?.style?.topSpace + 80}px` : ""; AGENTLAB_IFRAME_CONTAINER.style.bottom = positions?.bottom ? `${AGENTLAB_AGENT_DATA?.style?.bottomSpace + 80}px` : ""; AGENTLAB_IFRAME_CONTAINER.style.left = positions?.left || ""; AGENTLAB_IFRAME_CONTAINER.style.right = positions?.right || ""; const iframeHeight = `${window.innerHeight - 80 - 20 - AGENTLAB_AGENT_DATA?.style?.bottomSpace}px` AGENTLAB_IFRAME.style.height = iframeHeight; AGENTLAB_IFRAME_CONTAINER.appendChild(AGENTLAB_IFRAME); window.addEventListener("resize", () => { const iframeEl = document.querySelector("#AGENTLAB_IFRAME iframe"); if(iframeEl){ const iframeHeight = `${window.innerHeight - 80 - 20 - AGENTLAB_AGENT_DATA?.style?.bottomSpace}px` iframeEl.style.height = iframeHeight; } }) window.addEventListener("message", (event) => { if(event?.origin !== "https://app.agentlab.so") return; // console.log("sessionId message", event?.data) if (event.data?.action === "iframeSessionChange") { const newSessionId = event.data.newSessionId const sessionId = getAgentlabSessionId(); if(newSessionId !== sessionId){ localStorage.setItem("AGENTLAB_SESSION_ID", newSessionId) const iframeEl = document.querySelector("#AGENTLAB_IFRAME iframe"); if(iframeEl){ // showLoader(); // iframeEl.src = "about:blank"; // setTimeout(() => { // hideLoader(); // // iframeEl.src = "https://app.agentlab.so/w/46379db1-32d9-46b3-989b-4620a1bc3802/chat?session=" + newSessionId; // }, 1000) } } else { setTimeout(() => { hideLoader(); }, 1000) } } }, false); document.body.appendChild(AGENTLAB_IFRAME_CONTAINER); } addStyle(); createAgentlabBtn(); initIframe();