const styleElement=document.createElement("style"),bot=(styleElement.innerHTML=`
    .bot-selected {
      box-shadow: 0 0 30px blue !important;
    }
    #chat {
      display: none;
      z-index: 9999;
      position: fixed;
      bottom: 20px;
      right: 20px;
      width: 350px;
      height: 600px;
      background-color: white;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      border: 1px solid #d1d1d3;
      flex-direction: column;
      box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 18px 2px
    }

    #top-area {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
      min-height: 60px;
      width: 100%;
      border-bottom: 1px solid #d1d1d3;
      padding-left: 10px;
      padding-right: 10px;
    }

    #message-area {
      flex-grow: 1; 
      overflow: auto;
      background-color: rgb(234, 238, 243);
    }

    #bot-send-chat {
      margin-right: 14px;
      margin-top: 4px;
      margin-bottom: 4px;
      display: flex;
      align-content: center;
      justify-content: center;
      cursor: pointer;
    }

    .bot-message {
      word-wrap: break-word;
      padding: 14px;
      margin: 10px;
      border-radius: 14px;
      border: 1px solid #d1d1d3;
    }

    .bot-message-user {
      background-color: #228be6;
      border: 1px solid #228be6;
      margin-right: 25px;
      margin-left: 40px;
      color: white;
    }

    .bot-message-bot {
      background-color: white;
      border-color: white;
      margin-right: 40px;
      margin-left: 25px;
    }

    #bot-input {
      margin: 10px; 
      border: none; 
      flex-grow: 1;
      height: 30px;
    }

    #bot-input:focus-visible {
      outline: none;
    }
  `,document.head.appendChild(styleElement),document.createElement("div")),botToggleButton=(bot.id="bot",bot.innerHTML=`
    <div 
      id="chat"
      tabindex="-1"
    >
      <div id="top-area">
        <div id="title" style="cursor: pointer;">
          <img href="https://guidelight.bot/assets/guidelightlogo-DPcPufjh.png" width="32px" />
          <span style="margin-left: 10px;">
            Chat with Velocitime
          </span>
        </div>
        <div id="close-button" style="height: 20px; width: 20px; cursor: pointer;">
          <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="20" height="20" viewBox="0 0 50 50">
            <path d="M 7.71875 6.28125 L 6.28125 7.71875 L 23.5625 25 L 6.28125 42.28125 L 7.71875 43.71875 L 25 26.4375 L 42.28125 43.71875 L 43.71875 42.28125 L 26.4375 25 L 43.71875 7.71875 L 42.28125 6.28125 L 25 23.5625 Z"></path>
          </svg>
        </div>
      </div>
      <div id="message-area">
        <div id="message-list" style="display: flex; flex-direction: column; padding-top: 5px;">
        </div>
        <div style="display: none;" id="bot-chat-loading-indicator">Loading...</div>  
      </div>
      <div style="display: flex; align-items: center;">
        <div style="flex-grow: 1; display: flex; padding: 4px;">
          <input id="bot-input" tabindex="-1" autocomplete="off" style="" />
        </div>
        <div id="bot-send-chat">
          <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA60lEQVR4nO2VvQ7BUBiGH0KIxSRCrEazprPFIrEajG6hq1i4BLfA5CpMBpsLkKhJYlOJHMsnaWjp0dNavMm7fk/ynJ8PUkwLqCUNaQNXYAl0koJkgD2gpBtgBBRNg+Y+yKNHYAY0TEG6AZBHPVFpx4UUgPMbkPKpHAL5b0GLCBAldYExUNGFDDQgSnoRlVZUSFn864LUk8rcJ9AKOMXsVp5AiV+mDzgGOpAb+5IscIhxJirKFbe+HOzp3LCp5nBXvp26znnsTCkJSzOiEpsYcUKGG/2J1wFKjO6UKnDzKUlkO/aASRp7/h8+5Q4mDbOf6JpbqQAAAABJRU5ErkJggg==">
        </div>
      </div>
    </div>
  `,document.createElement("div")),chatWindow=(botToggleButton.innerHTML=`
    <div id="bot-toggle-button" style="position: fixed; bottom: 20px; right: 20px; height: 50px; width: 50px; border-radius: 50%; background-color: #228be6; display: flex; align-items: center; justify-content: center; cursor: pointer;">
      <img src="https://guidelight.bot/assets/guidelightlogo_nobg-nhxnAbL7.png" width="32px" />
    </div>
  `,document.body.appendChild(bot),document.body.appendChild(botToggleButton),document.getElementById("chat")),messageArea=document.getElementById("message-area"),title=document.getElementById("title"),closeChatButton=document.getElementById("close-button"),chatInput=document.getElementById("bot-input"),sendChatButton=document.getElementById("bot-send-chat"),loadingIndicator=document.getElementById("bot-chat-loading-indicator"),toggleButton=document.getElementById("bot-toggle-button"),setLoading=(sendChatButton.disabled=!0,t=>{document.getElementById("bot-chat-loading-indicator")}),openChat=()=>{toggleButton.style.display="none",chatWindow.style.display="flex",chatInput.focus()},closeChat=()=>{chatWindow.style.display="none",toggleButton.style.display="flex"},performStep=(messageArea.addEventListener("click",function(t){chatInput.focus()}),toggleButton.addEventListener("click",function(t){openChat()}),closeChatButton.addEventListener("click",function(t){closeChat()}),chatInput.addEventListener("mousedown",function(t){t.stopPropagation()}),chatInput.addEventListener("click",function(t){t.stopPropagation()}),chatInput.addEventListener("input",function(t){sendChatButton.disabled=""===chatInput.value}),chatInput.addEventListener("keydown",function(t){"Enter"===t.key&&""!==chatInput.value&&chat()}),(t,e)=>{console.log("performing step",e);var o=t[e];if(console.log("step",o),o){if("highlight"===o?.action?.actionType?.toLowerCase()){console.log("highlighting element"),console.log("id",o.action.elementId);const n=document.getElementById(o.action.elementId);if(n){n.classList.add("bot-selected");const i=()=>{n.classList.remove("bot-selected"),n.removeEventListener("click",i),setTimeout(()=>performStep(t,e+1),"1000")};n.addEventListener("click",i)}else console.log("element not found")}}else console.log("no step")}),addMessage=(t,e)=>{var o=document.getElementById("message-list"),n=document.createElement("div");n.classList.add("bot-message"),n.classList.add("bot-message-"+e),n.innerHTML=t,o.appendChild(n),messageArea.scrollTop=messageArea.scrollHeight},chat=async()=>{var t,e,o;""!==chatInput.value&&(o=chatInput.value,chatInput.disabled=!0,sendChatButton.disabled=!0,addMessage(o,"user"),loadingIndicator.style.display="block",messageArea.scrollTop=messageArea.scrollHeight,o=await(await fetch("https://us-central1-guide-bot-31fe7.cloudfunctions.net/chat/7f0f998792bfb5f5ee8cc0f19dbbbb98",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({message:o})})).json(),chatInput.value="",chatInput.disabled=!1,sendChatButton.disabled=!1,loadingIndicator.style.display="none",chatInput.focus(),t=o?.steps,e=o?.messages,(o=o?.message)||!e||t||addMessage("Sorry! Something went wrong, please try asking me again.","bot"),chat)&&(o?addMessage(o,"bot"):t&&(t.forEach(t=>addMessage(t.title,"bot")),t[0])&&performStep(t,0))};sendChatButton.addEventListener("click",chat);