(function () {
  const chatHTML = `<style>
  /* === Base Container === Caho ChatBot */
  #chatbotContainer {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }

  #chatbotInitContainer {
    z-index: 9999;
    position: fixed;
    bottom: 8px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: 720px;
    height: 48px;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(270deg, hsl(216, 100%, 95%), white);
    color: #333;
    border: 1px solid #2b7fff;
    border-radius: 24px;
    padding: 12px 18px;
    /* cursor: pointer; */
    /* font-weight: 600; */
    font-size: 14px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    outline: none;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    z-index: 1;

    border-top: 4px solid #2b7fff;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #chatbotInitContainer.open {
    visibility: visible;
    opacity: 1;
  }

  #chatbotInput {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  #chatInput2 {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    color: #333;
    font-size: 14px;
    border-radius: 0;
  }

  /* === Toggle Button === */
  #chatToggleBtn {
    background: hsl(169, 71%, 36%);
    color: #FFFFFF;
    border: 1px solid #ccc;
    border-radius: 24px;
    padding: 12px 18px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    outline: none;
    transition: transform 0.2s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
    visibility: hidden;
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }

  #floatingBotAvatar {
  width: 75px;/* Bigger size */
  height: 90px;
  border-radius: 0%;
  margin-bottom: -8px;
  margin-left:40px;
  // background: white;
  padding: 5px;
  object-fit: cover;
  z-index: 10000;
}
  #chatToggleBtn:hover {
    transform: scale(1.1);
    color: hsl(169, 71%, 36%);
    background: #FFFFFF;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  #chatToggleBtn.open {
    visibility: visible;
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  /* === Chat Window === */
  #chatWindow {
    position: absolute;
    bottom: 20px;
    right: 0;
    justify-content: space-between;
    visibility: hidden;
    opacity: 0;
    transform: scale(0.9) translateY(10px);
    transition: all 0.3s ease;
    width: 350px;
    height: 480px;
    display: flex;
    flex-direction: column;
    background: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }
  #chatWindow.open {
    visibility: visible;
    opacity: 1;
    transform: scale(1) translateY(0);
  }

  /* === Header === */
  #chatHeader {
    background: linear-gradient(90deg,hsl(169, 71%, 36%), white);
    display: flex;
    padding: 12px 16px;
    border-bottom: 1px solid #ccc;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    justify-content: space-between;
  }
  #chatHeading {
    color: #333;
    font-weight: bold;
    font-size: 15px;
    /* text-align: center; */
  }

  #maximizeBtnR {
    border: none;
    background: transparent;
    cursor: pointer;
  }

  #maximizeBtnR:hover {
    border-radius: 24px;
    background: #e6e6fa;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  #minimizeBtnR {
    padding: 1px 6px !important;
    background: hsl(169, 71%, 80%)!important;
    border: none;
    border-radius: 24px;
    cursor: pointer;
  }

  #minimizeBtnR:hover {
    background: hsl(169, 71%, 60%) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  /* === Messages Area === */
  #chatMessages {
    flex: 1;
    overflow-y: auto;
    margin-top: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* === Chat Bubbles === */
  .bubble {
    max-width: 80%;
    padding: 10px 32px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
  }
  .userBubble {
    align-self: flex-end;
    background: #ffffff;
    color: #333;
  }
  .botBubble {
    align-self: flex-start;
    background:hsl(181, 48%, 90%);
    color: #333;
  }

  /* === Input & Buttons Area === */
  #chatInputArea {
    display: flex;
    align-items: center;
    border-top: 1px solid #ccc;
    background: #fff;
  }

  #chatInput {
    flex: 1;
    border: none;
    outline: none;
    background: #fff;
    color: #333;
    padding: 10px;
    font-size: 14px;
    border-radius: 0;
  }

  /* Make micBtn and sendBtn the same size */
  .micBtn {
    width: 32px;
    height: 24px;
    border: 1px solid #ccc;
    border: none;
    outline: none;
    cursor: pointer;
    color: #333;
    font-weight: bold;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    font-size: 14px; /* ensures consistent text size */
  }

  .micBtn {
    background: none;
  }
  .micBtn:hover {
    background: #e6e6fa;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }

  /* === Animated Mic Icon === */
  .micBtn svg {
    width: 20px;
    height: 20px;
    fill: #333;
    transition: transform 0.3s ease;
  }
  
  .listening {
    animation: micPulse 1s infinite alternate;
  }

  @keyframes micPulse {
    0% {
      transform: scale(1);
    }
    100% {
      border-radius: 24px;
      background: #e6e6fa;
      transform: scale(1.3);
    }
  }

  #chatInit {
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
  }

  #chatInitR{
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
  }

  .sendIcon {
    width: 26px;
    height: 26px;
    fill:hsl(181, 48%, 80%);
    transition: transform 0.3s ease;
    transform: scale(1.5);
    margin-right: 4px !important;
  }
  .sendIcon:hover {
    fill: hsl(181, 48%, 80%);
    transform: scale(1.8);
  }


  .headerBtn{
    position: absolute;
    top: -30px;
    right: 30px;
    cursor: pointer;
    padding: 1px;
    border-radius: 16px;
    border: 1px solid;
    background: #2b7fff;
    color: white;
  }
  .headerBtn:focus {
    outline: none;
  }
  .headerBtn .svg {
    width: 16px;
    height: 16px;
    fill: #fff;
    transition: transform 0.3s ease;
  }
  .headerBtn:hover .svg {
    fill: #333;
    transform: scale(1.1);
  }
  .headerBtn:hover {
    background: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    color: black;
  }


  #minimizeBtn {
    position: absolute;
    top: -30px;
    right: 30px;
  }

  #maximizeBtnL {
    position: absolute;
    top: -30px;
    right: 30px;
  }

  #moveAsideBtn{
    position: absolute;
    top: -30px;
    right: 0px;
  }

  #chatTitle{
    font-size: 24px;
    align-self: center;
    font-weight: 600;
  }

  #chatTitle a{
    color: #2b7fff !important;
    text-decoration: underline;
  }

  #chatTitle a:hover{
    color: #2b7fff !important;
    text-decoration: underline;
  }

  #suggestion{
    position: absolute ;
    top: -30px;
    display: flex;
    justify-content: space-between;
  }

  #suggestion-inside{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 0 12px;
    bottom: 40;
  }

  #suggestion-inside .suggestbtn{
    margin-bottom: 8px;
    align-self: center;
    font-size: 14px;
  }

  .suggestbtn{
    color: 	#FFFFFF !important;
    font-weight: 300;
    border-radius: 24px;
    cursor: pointer;
    border: 1px solid #ccc;
    background:hsl(169, 71%, 46%);
    margin-right: 8px;
    padding: 1px 6px;
  }

  .suggestbtn:hover{
    background:hsl(181, 48%, 75%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* color: black; */
  }

  #chatArea input::placeholder {
    color: #999;
    font-style: italic;
    font-size: 14px;
    opacity: 1; /* Ensure it's fully visible */
  }

  .botAvatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
    position: absolute;
    left: 0px;
  }

</style>

<div>
  

  <div id="chatbotContainer">
    <!-- Toggle Button -->
    <img id="floatingBotAvatar" src="https://bot.claybox.ai/static/cbt.png" alt="Bot Avatar">
    <button id="chatToggleBtn" style = "display:flex" ><img style="height:16px" src="" alt="" height="24">Hi! I’m Claybot</button>

    <!-- Chat Window -->
    <div id="chatWindow">
      <div id="chatHeader">
        <div id="chatHeading">
          <img style="height:22px" src="https://bot.claybox.ai/static/claybox%20logo.png" alt="Hi! I’m Claybot" height="24">
        </div>
        <div>
  
          <button id="minimizeBtnR" title="Minimize Chat">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="#333"
              width="20px"
              height="20px"
            >
              <path d="M4 11h16v2H4z" />
            </svg>
          </button>
        </div>
      </div>

      <div id="chatMessages"></div>
      <div id="suggestion-inside">
        <button  class="suggestbtn">Tell me about Claybox AI</button>
        <button  class="suggestbtn">Modules of Claybox AI</button>
        <button  class="suggestbtn">How can Claybox AI help me</button>
      </div>
      <div id="chatInputArea">
        <!-- Microphone Button -->
        
        <!-- Text Input -->
        <input type="text" id="chatInput" placeholder="Or type your query here..." />
        <!-- Send Button -->
        <button id="chatInitR">
          <svg
            width="32px"
            height="32px"
            class="sendIcon"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M6.99811 10.2467L7.43298 11.0077C7.70983 11.4922 7.84825 11.7344 7.84825 12C7.84825 12.2656 7.70983 12.5078 7.43299 12.9923L7.43298 12.9923L6.99811 13.7533C5.75981 15.9203 5.14066 17.0039 5.62348 17.5412C6.1063 18.0785 7.24961 17.5783 9.53623 16.5779L15.8119 13.8323C17.6074 13.0468 18.5051 12.654 18.5051 12C18.5051 11.346 17.6074 10.9532 15.8119 10.1677L9.53624 7.4221C7.24962 6.42171 6.1063 5.92151 5.62348 6.45883C5.14066 6.99615 5.75981 8.07966 6.99811 10.2467Z"
              fill="#2A4157"
              fill-opacity="0.24"
              stroke="hsl(181, 48%, 35%)"
              stroke-width="1.2"
            />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

      `;

  async function loadLibrary(src) {
    return new Promise((resolve, reject) => {
      const script = document.createElement("script");
      script.src = src;
      script.onload = resolve;
      script.onerror = reject;
      document.head.appendChild(script);
    });
  }
  console.log("Injecting script");
  // const container = document.createElement("div");
  // container.innerHTML = chatHTML;
  // document.body.appendChild(container);
  document.addEventListener("DOMContentLoaded", function () {
    const container = document.createElement("div");
    container.innerHTML = chatHTML;
    document.body.appendChild(container);
    const projectKey = "b4ce27ba-46ff-4b27-814a-ee2303cc0b55";
    // References to elements
    const chatToggleBtn = document.getElementById("chatToggleBtn");
    const chatWindow = document.getElementById("chatWindow");
    const chatMessages = document.getElementById("chatMessages");
    const chatInput = document.getElementById("chatInput");
    const micBtn1 = document.getElementById("micBtn1");
    const micBtn2 = document.getElementById("micBtn2");

    // const chatInput2 = document.getElementById("chatInput2");
    const sendIcon = document.querySelector(".sendIcon");
    const minimizeBtn = document.getElementById("minimizeBtn");
    const maximizeBtnL = document.getElementById("maximizeBtnL");
    const moveAsideBtn = document.getElementById("moveAsideBtn");
    const minimizeBtnR = document.getElementById("minimizeBtnR");
    const maximizeBtnR = document.getElementById("maximizeBtnR");
    const chatArea = document.getElementById("chatArea");
    const chatInitR = document.getElementById("chatInitR");
    // const chatbotInitContainer = document.getElementById(
    //   "chatbotInitContainer"
    // );
    const chatTitle = document.getElementById("chatTitle");
    const suggestion = document.getElementById("suggestion");
    const suggestionInside = document.getElementById("suggestion-inside");

    // chatbotInitContainer.classList.add("open");
    chatToggleBtn.classList.toggle("open");

    function submitSuggestion(suggestionText) {
      suggestionInside.style.display = "none"; // Hide suggestion buttons
      suggestionInside.remove(); // Remove the suggestion element from the DOM
      chatInput.value = suggestionText; // Set the input value to the suggestion
      
      sendFirstMessage(); // Call the function to send the message
    }

    document.querySelectorAll(".suggestbtn").forEach((button) => {
      button.addEventListener("click", function () {
        submitSuggestion(this.innerText); // Or use this.textContent
      });
    });

    // We'll also keep a reference to the SVG icon
    // const micIcon2 = micBtn2.querySelector("svg");

    // Toggle chat window
    chatToggleBtn.addEventListener("click", () => {
      chatWindow.classList.toggle("open");
      chatToggleBtn.classList.toggle("open");
      // chatToggleBtn.classList.remove("open");
    });

    function openChatModal() {
      // chatbotInitContainer.style.height = "450px";
      // chatbotInitContainer.style.padding = "10px 64px";
      chatArea.style.background = "white";
      chatArea.style.border = "1px solid #ccc";
      chatArea.style.borderRadius = "24px";
      chatArea.style.boxShadow = "0 4px 12px rgba(0,0,0,0.1)";
      chatArea.style.padding = "10px";
      chatMessages.style.display = "flex";
      minimizeBtn.style.display = "block";

      chatTitle.style.display = "block";
    }

    function minimizeChatModal() {
     
      

      chatArea.style.background = "transparent";
      chatArea.style.border = "none";
      chatArea.style.borderRadius = "0px";
      chatArea.style.boxShadow = "none";
      chatArea.style.padding = "0px";
      chatMessages.style.display = "none";
      minimizeBtn.style.display = "none";

      chatTitle.style.display = "none";
      maximizeBtnL.style.display = "block";
    }

    function sendFirstMessage() {
      const question = chatInput.value.trim();
      if (question) {
        sendMessage(question);
      }
    }


    sendIcon.addEventListener("click", () => {
      //  chatWindow.classList.toggle('open');
      sendFirstMessage();
    });

    chatInitR.addEventListener("click", () => {
      const question = chatInput.value.trim();
      if (question) {
        sendMessage(question);
      }
    });

   
    minimizeBtnR.addEventListener("click", () => {
      chatWindow.classList.remove("open");
      // chatbotInitContainer.classList.remove("open");
      chatToggleBtn.classList.add("open");
    });


    function createBubble(text, sender) {
      const bubble = document.createElement("div");
      bubble.classList.add("bubble");
    
      // Create a container for avatar and message
      const container = document.createElement("div");
      container.classList.add("bubbleContainer");
    
      if (sender === "user") {
        bubble.classList.add("userBubble");
      } else {
        bubble.classList.add("botBubble");
        // Add bot avatar
        const botAvatar = document.createElement("img");
        botAvatar.src = "https://bot.claybox.ai/static/ab.png"; // Replace with your bot avatar image URL
        botAvatar.alt = "Bot Avatar";
        botAvatar.classList.add("avatar", "botAvatar");
        // container.appendChild(botAvatar);
        bubble.appendChild(botAvatar);
      }
    
      // Add the message text
      const message = document.createElement("div");
      message.classList.add("bubbleText");
      message.innerHTML = text;
      // container.appendChild(message);
    
      bubble.appendChild(message);
      return bubble;
    }
    

    // // Helper: create message bubble
    // function createBubble(text, sender) {
    //   const bubble = document.createElement("div");
    //   bubble.classList.add("bubble");
    //   if (sender === "user") {
    //     bubble.classList.add("userBubble");
    //   } else {
    //     bubble.classList.add("botBubble");
    //   }
    //   // bubble.textContent = text;
    //   bubble.innerHTML = text;
    //   return bubble;
    // }


    // Scroll chat to bottom
    function scrollToBottom() {
      chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    // ========== Text-to-Speech (Voice Output) ==========
    function speakText(text) {
      if ("speechSynthesis" in window) {
        const utterance = new SpeechSynthesisUtterance(text);
        // You can customize the voice, language, pitch, rate, etc.
        // utterance.lang = 'en-US';
        // utterance.pitch = 1.0;
        // utterance.rate = 1.0;
        window.speechSynthesis.speak(utterance);
      }
    }

    // ========== Speech-to-Text (Voice Input) ==========
    let recognition;
    let isListening = false;

    if ("webkitSpeechRecognition" in window) {
      recognition = new webkitSpeechRecognition();
      recognition.continuous = false;
      recognition.interimResults = false;
      recognition.lang = "en-US";

      recognition.onstart = () => {
        isListening = true;
        // Animate mic icon
        micIcon1.classList.add("listening");
        micIcon2.classList.add("listening");
      };
      recognition.onend = () => {
        isListening = false;
        micIcon1.classList.remove("listening");
        micIcon2.classList.remove("listening");
      };
      recognition.onresult = (event) => {
        const transcript = event.results[0][0].transcript;
        chatInput.value = transcript; // put recognized text in input
        // Optionally, immediately send message:
        // sendMessage(transcript);
        chatInput2.value = transcript; // put recognized text in input
      };
    } else {
      // If not supported, disable mic button
      micBtn1.disabled = true;
      micBtn1.title = "Speech recognition not supported in this browser";

      micBtn2.disabled = true;
      micBtn2.title = "Speech recognition not supported in this browser";
    }

    const params = new URLSearchParams(window.location.search);
    const msg = params.get('msg');
  
    if (msg === 'feedback') {
      console.log("matched");
      chatToggleBtn.classList.toggle("open");
      chatWindow.classList.toggle("open");
      sendMessage("Hey Claybot! I want to provide feedback for the workshop");}


   

    loadLibrary("https://cdn.jsdelivr.net/npm/marked/marked.min.js"); // Load marked.js dynamically

    // ========== Sending Message to Server ==========
    async function sendMessage(question) {
      // Append user's message
      const userBubble = createBubble(question, "user");
      chatMessages.appendChild(userBubble);
      scrollToBottom();

      // Clear input
      chatInput.value = "";

      // Show a 'typing...' bubble
      const typingBubble = createBubble("...", "bot");
      chatMessages.appendChild(typingBubble);
      scrollToBottom();
      // Generate a random UUID
      function generateUUID() {
        return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
          /[xy]/g,
          function (c) {
            const r = (Math.random() * 16) | 0,
              v = c === "x" ? r : (r & 0x3) | 0x8;
            return v.toString(16);
          }
        );
      }

      // Save UUID in session storage
      let sessionUUID = sessionStorage.getItem("sessionUUID");
      if (!sessionUUID) {
        sessionUUID = generateUUID();
        sessionStorage.setItem("sessionUUID", sessionUUID);
      }
      const chatId = "824bdc3e-6c92-495f-9dd6-2821079b0852";

      // Add UUID to the request body
      const requestBody = {
        query: question,
        project_id: projectKey,
        id: chatId || sessionUUID,
      };
      const response = await fetch("https://bot.claybox.ai/claybox", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          Authorization: "Basic " + btoa("ayush:Ecosystm"),
        },
        body: JSON.stringify(requestBody),
      });

      const reader = response.body.getReader();
      const decoder = new TextDecoder("utf-8");
      let botAnswer = "";

      // Format the bot's response as markdown
      function formatMarkdown(text) {
        const markdownContainer = document.createElement("div");
        markdownContainer.innerHTML = marked(text);
        return markdownContainer;
      }

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        botAnswer += decoder.decode(value, { stream: true });
        typingBubble.innerHTML = marked.parse(botAnswer);
        scrollToBottom();
      }
      typingBubble.remove();
      const botBubble = createBubble(marked.parse(botAnswer), "bot");
      // const botBubble = createBubble(botAnswer, 'bot');
      chatMessages.appendChild(botBubble);
      scrollToBottom();
    }

    // Press Enter => send message
    chatInput.addEventListener("keypress", (e) => {
      if (e.key === "Enter") {
        e.preventDefault();
        const question = chatInput.value.trim();
        if (question) {
          sendMessage(question);
        }
      }
    });

  });
})();