const inoz_main = () => {

  function load_socket_io(){
    let script = document.createElement('script');
    script.src = "https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.2.0/socket.io.js";
    document.head.appendChild(script);
    script.onload = function () {
      //connectToSocket();
      const user_name = document.getElementById("widget-user-name")
      user_name.addEventListener("focusin",()=>{
        connectToSocket()
      })
      const user_email = document.getElementById("widget-user-email")
      user_email.addEventListener("focusin",()=>{
        connectToSocket()
      })
      const user_phone = document.getElementById("widget-user-phone")
      user_phone.addEventListener("focusin",()=>{
        connectToSocket()
      })







    }
  }
  function connectToSocket()
  {

    try {
      if(typeof socket !== "undefined"){
        return
      }

    socket = io.connect("https://api3.inoz.ai" + '/chat/' + defaultSettings.bot_id,{
      auth: {
        token:  localStorage.getItem("inoz_"+defaultSettings.bot_id+"_chat_session_id"),
        bot_id: defaultSettings.bot_id
      }
    });
    }catch (e) {
      console.log(e)
    }
    socket.on('connect', function() {
      console.log("Connected to socket");
    });
    /*socket.on("message_from_client",function (data){
        console.log("Message from client",data);
        addUserMessageToChat(data.message);
    })*/
    socket.on("message_from_ai",function (data){
      console.log("Message from ai",data);
      addBotMessageToChat(data.message);
    })
    socket.on("message_from_agent",function (data){
      console.log("Message from user",data);
      addBotMessageToChat(data.message);
    })
    socket.on("agent_typing",function (data){
      console.log("Agent is typing",data);
      addTypingMessageToChat()
    })
    socket.on('disconnect', function() {
      console.log("Disconnected from socket");
    });
  }

  let conversationHistory = []
  function addToConversationHistory(message,direction){
    conversationHistory = localStorage.getItem("inoz_"+defaultSettings.bot_id+"_conversation_history") || JSON.stringify([])

    entry = {
      msg:message,
      dir:direction,
      time:new Date()
    }
    let  updatedConversationHistory =JSON.parse(conversationHistory)
    updatedConversationHistory.push(entry)
    localStorage.setItem("inoz_"+defaultSettings.bot_id+"_conversation_history",JSON.stringify(updatedConversationHistory))

  }
  function deleteConversationHistory(){

  }
  function restoreConversationHistory(){
    conversationHistory = localStorage.getItem("inoz_"+defaultSettings.bot_id+"_conversation_history") || JSON.stringify([])
    const allChats = document.getElementById("all-chats");
    allChats.replaceChildren()
    localStorage.setItem("inoz_"+defaultSettings.bot_id+"_conversation_history","[]")
    JSON.parse(conversationHistory).map((entry)=>{
      if(entry.dir==="I"){
        addBotMessageToChat(entry.msg,true)
      }else if (entry.dir==="O"){
        addUserMessageToChat(entry.msg,true)
      }
      else{

      }

    })
  }

  function isMobile()
  {
    if (window.matchMedia("(max-width: 600px)").matches) {
      return false
    } else {
      return true
    }
  }



  const defaultSettings =
      {
    bot_id: "bfa76e74f6c5818d66e25851f20e01cb39ffb94c",
    chatBotTitle: "Casky",
    welcomeMessage: "Welcome to Cask International, I am your virtual assistant. How can I help you today?",
    widgetColor: "#d19c44",
    collectVisitorInfo: eval(true),
  widgetIcon: "https://app.inoz.ai/assets/images/icons/chat-icon.png",
      botImg: "https://api3.inoz.ai/images/0sh13XhmWuUyw4g9Bq8GSIfU0G03/thumbnail/1722499309494.png",
      widgetButtonPosition: "right",
      convoStarters: eval(["How can I contact ? ","What is the Company Background ? ","What is your Mission & Vision ? ","What are your products and services ? "]),
  fontFamily: "Poppins",
      fontUrl: "@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Sixtyfour&display=swap')",
      profile: {
    profileDescription: "Profile description here",
        placeholder: "Enter your message",
        socials: {
      twitter: {
        socialLink: "https://twitter.com",
            icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"/></svg>'
      },
      facebook: {
        icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"/></svg>`,
            socialLink: "https://facebook.com"
      },
      "Whatsapp": {
        "icon": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M92.1 254.6c0 24.9 7 49.2 20.2 70.1l3.1 5-13.3 48.6L152 365.2l4.8 2.9c20.2 12 43.4 18.4 67.1 18.4h.1c72.6 0 133.3-59.1 133.3-131.8c0-35.2-15.2-68.3-40.1-93.2c-25-25-58-38.7-93.2-38.7c-72.7 0-131.8 59.1-131.9 131.8zM274.8 330c-12.6 1.9-22.4 .9-47.5-9.9c-36.8-15.9-61.8-51.5-66.9-58.7c-.4-.6-.7-.9-.8-1.1c-2-2.6-16.2-21.5-16.2-41c0-18.4 9-27.9 13.2-32.3c.3-.3 .5-.5 .7-.8c3.6-4 7.9-5 10.6-5c2.6 0 5.3 0 7.6 .1c.3 0 .5 0 .8 0c2.3 0 5.2 0 8.1 6.8c1.2 2.9 3 7.3 4.9 11.8c3.3 8 6.7 16.3 7.3 17.6c1 2 1.7 4.3 .3 6.9c-3.4 6.8-6.9 10.4-9.3 13c-3.1 3.2-4.5 4.7-2.3 8.6c15.3 26.3 30.6 35.4 53.9 47.1c4 2 6.3 1.7 8.6-1c2.3-2.6 9.9-11.6 12.5-15.5c2.6-4 5.3-3.3 8.9-2s23.1 10.9 27.1 12.9c.8 .4 1.5 .7 2.1 1c2.8 1.4 4.7 2.3 5.5 3.6c.9 1.9 .9 9.9-2.4 19.1c-3.3 9.3-19.1 17.7-26.7 18.8zM448 96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96zM148.1 393.9L64 416l22.5-82.2c-13.9-24-21.2-51.3-21.2-79.3C65.4 167.1 136.5 96 223.9 96c42.4 0 82.2 16.5 112.2 46.5c29.9 30 47.9 69.8 47.9 112.2c0 87.4-72.7 158.5-160.1 158.5c-26.6 0-52.7-6.7-75.8-19.3z"/></svg>`,
            socialLink: "https://web.whatsapp.com"
      },
      "Instagram": {
        "icon": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M194.4 211.7a53.3 53.3 0 1 0 59.3 88.7 53.3 53.3 0 1 0 -59.3-88.7zm142.3-68.4c-5.2-5.2-11.5-9.3-18.4-12c-18.1-7.1-57.6-6.8-83.1-6.5c-4.1 0-7.9 .1-11.2 .1c-3.3 0-7.2 0-11.4-.1c-25.5-.3-64.8-.7-82.9 6.5c-6.9 2.7-13.1 6.8-18.4 12s-9.3 11.5-12 18.4c-7.1 18.1-6.7 57.7-6.5 83.2c0 4.1 .1 7.9 .1 11.1s0 7-.1 11.1c-.2 25.5-.6 65.1 6.5 83.2c2.7 6.9 6.8 13.1 12 18.4s11.5 9.3 18.4 12c18.1 7.1 57.6 6.8 83.1 6.5c4.1 0 7.9-.1 11.2-.1c3.3 0 7.2 0 11.4 .1c25.5 .3 64.8 .7 82.9-6.5c6.9-2.7 13.1-6.8 18.4-12s9.3-11.5 12-18.4c7.2-18 6.8-57.4 6.5-83c0-4.2-.1-8.1-.1-11.4s0-7.1 .1-11.4c.3-25.5 .7-64.9-6.5-83l0 0c-2.7-6.9-6.8-13.1-12-18.4zm-67.1 44.5A82 82 0 1 1 178.4 324.2a82 82 0 1 1 91.1-136.4zm29.2-1.3c-3.1-2.1-5.6-5.1-7.1-8.6s-1.8-7.3-1.1-11.1s2.6-7.1 5.2-9.8s6.1-4.5 9.8-5.2s7.6-.4 11.1 1.1s6.5 3.9 8.6 7s3.2 6.8 3.2 10.6c0 2.5-.5 5-1.4 7.3s-2.4 4.4-4.1 6.2s-3.9 3.2-6.2 4.2s-4.8 1.5-7.3 1.5l0 0c-3.8 0-7.5-1.1-10.6-3.2zM448 96c0-35.3-28.7-64-64-64H64C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96zM357 389c-18.7 18.7-41.4 24.6-67 25.9c-26.4 1.5-105.6 1.5-132 0c-25.6-1.3-48.3-7.2-67-25.9s-24.6-41.4-25.8-67c-1.5-26.4-1.5-105.6 0-132c1.3-25.6 7.1-48.3 25.8-67s41.5-24.6 67-25.8c26.4-1.5 105.6-1.5 132 0c25.6 1.3 48.3 7.1 67 25.8s24.6 41.4 25.8 67c1.5 26.3 1.5 105.4 0 131.9c-1.3 25.6-7.1 48.3-25.8 67z"/></svg>`,
            socialLink: "https://instagram.com"
      },
    }

  },
  widget: {
    style:  "highEngagement",
        showPopupText: eval(true),
    popupText: "Welcome 👋! How can we help you today?",
  },
  expandByDefault: eval(isMobile()),
  removePoweredBy: eval(false),
  chatislocked: false,
      typingMessage: "typing..",
      haveSoundEffects:"true"

}

  let socket;
  var chatSessionId = localStorage.getItem("inoz_"+defaultSettings.bot_id+"_chat_session_id");
  function generateChatSessionId(length) {
    let chatSessionId = '';
    for (let i = 0; i < length; i++) {
      chatSessionId += Math.random().toString(36).substring(2, 15);
    }
    return chatSessionId;
  }

  if (chatSessionId === null) {
    chatSessionId = generateChatSessionId(15);
    localStorage.setItem("inoz_"+defaultSettings.bot_id+"_chat_session_id", chatSessionId);
  }












  const socialIcons = {
    "twitter": {
      "twitterIcon": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"/></svg>`
    },
    "facebook": {
      "facebookIcon": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"/></svg>`
    },
    "Airbnb": {
      "twitterIcon": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"/></svg>`
    },

    "Amazon": {
      "twitterIcon": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"/></svg>`
    },
    "Android": {
      "twitterIcon": `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103v-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"/></svg>`
    },
  }


  var popupStyle = "";
  var popupStyleArrow = "";
  let selectedRating = 0;

  if (defaultSettings.widget.style == "solid") {
    popupStyle = "background:" + defaultSettings.widgetColor + ";color:white;";
    popupStyleArrow = "background:" + defaultSettings.widgetColor + ";";
  } else if (defaultSettings.widget.style == "gradient") {
    popupStyle = "background:linear-gradient(to right,white," + defaultSettings.widgetColor + ");color:black;";
    popupStyleArrow = "background:" + defaultSettings.widgetColor + ";";
  } else {
    popupStyle = "background:white;"
    popupStyleArrow = "background:white;"
  }
  let soundEffect;

  function createChatWidget() {

    console.log("trying to create chatwidget")
    const chatWrapper = document.createElement("div");
    chatWrapper.classList.add("chat-wrapper-f12asd");
    chatWrapper.style.position = "fixed";

    soundEffect = document.createElement("audio");
    soundEffect.setAttribute("id", "sound-effect-sdf12d");
    soundEffect.setAttribute("src", "https://cdn.pixabay.com/audio/2022/10/30/audio_f5dbe8213e.mp3")

    var widget = document.createElement("div");
    widget.classList.add("widget-dfs234asdf");

    var widgetHeader = document.createElement("header");
    widgetHeader.classList.add("widget-header-sdfe32e2");

    var headerParagraph = document.createElement("p");
    headerParagraph.style.fontSize = "larger";
    headerParagraph.style.letterSpacing = "1px";
    headerParagraph.style.fontWeight = "700";
    headerParagraph.style.color = "white";
    headerParagraph.textContent = defaultSettings.chatBotTitle;

    const headerLeftDiv = document.createElement("div");
    headerLeftDiv.classList.add("header-left-div-dsf124wd")

    const headerAgentTyping = document.createElement("p");
    headerAgentTyping.setAttribute("id", "header-agent-typing")
    headerAgentTyping.innerText = defaultSettings.typingMessage;

    headerLeftDiv.appendChild(headerParagraph)

    headerLeftDiv.appendChild(headerAgentTyping)

    const profileViewButton = document.createElement("button");
    profileViewButton.innerText = "Profile";
    profileViewButton.classList.add("profile-view-button-sdg2r2e2");


    const chatViewButton = document.createElement("button");
    chatViewButton.innerText = "Chat";
    chatViewButton.classList.add("chat-view-button-sdr23d");

    const closeBtn = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    closeBtn.classList.add("close-btn-for-widget-qwerty5")
    closeBtn.style.cursor = "pointer";
    closeBtn.style.fill = "white";
    closeBtn.style.width = "14px";
    closeBtn.setAttribute("xmlns", "http://www.w3.org/2000/svg");
    closeBtn.setAttribute("viewBox", "0 0 384 512");

    const closeBtnPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
    closeBtnPath.setAttribute("d", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z");
    closeBtn.appendChild(closeBtnPath);

    const headerRightDiv = document.createElement("div");
    headerRightDiv.classList.add("header-right-div-3daer234")
    headerRightDiv.appendChild(profileViewButton)
    headerRightDiv.appendChild(chatViewButton)
    headerRightDiv.appendChild(closeBtn);


    widgetHeader.appendChild(headerLeftDiv);
    widgetHeader.appendChild(headerRightDiv)

    var chatContainer = document.createElement("div");
    chatContainer.classList.add("chat-container-kasl12csd");
    chatContainer.style.width = "100%";
    chatContainer.style.height = "100%";

    var allChats = document.createElement("div");
    allChats.setAttribute("id", "all-chats");

    var profilePage = document.createElement("div");
    profilePage.classList.add("profile-page");

    var profileContent = document.createElement("div");
    profileContent.classList.add("profile-content-cdj4fiuq3");

    if (!defaultSettings.botImg) {
      const svgElement2 = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "svg"
      );
      svgElement2.setAttribute(
          "xmlns",
          "http://www.w3.org/2000/svg"
      );
      svgElement2.setAttribute("viewBox", "0 0 640 512");
      svgElement2.classList.add("profile-tab-icon-n13bopj");

      const pathElement2 = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "path"
      );
      pathElement2.setAttribute(
          "d",
          "M320 0c17.7 0 32 14.3 32 32V96H472c39.8 0 72 32.2 72 72V440c0 39.8-32.2 72-72 72H168c-39.8 0-72-32.2-72-72V168c0-39.8 32.2-72 72-72H288V32c0-17.7 14.3-32 32-32zM208 384c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H208zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H304zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H400zM264 256a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zm152 40a40 40 0 1 0 0-80 40 40 0 1 0 0 80zM48 224H64V416H48c-26.5 0-48-21.5-48-48V272c0-26.5 21.5-48 48-48zm544 0c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H576V224h16z"
      );

      svgElement2.appendChild(pathElement2);
      profileContent.appendChild(svgElement2);
    } else {
      const imgElement = document.createElement("img");
      imgElement.setAttribute("src", defaultSettings.botImg);
      imgElement.classList.add("profile-tab-icon-n13bopj");
      profileContent.appendChild(imgElement)
    }

    const chatBotTitle2 = document.createElement("p");
    chatBotTitle2.innerText = defaultSettings.chatBotTitle;
    chatBotTitle2.classList.add("profile-chat-bot-title-thnu7ru");

    const profileTabDescription = document.createElement("p");
    profileTabDescription.innerText = defaultSettings.profile.profileDescription;
    profileTabDescription.classList.add("profile-tab-description-ot1uhdl")

    const profileInput = document.createElement("input");
    profileInput.setAttribute("placeholder", defaultSettings.profile.placeholder);
    profileInput.classList.add("profile-input-iejl9vu");
    profileInput.addEventListener("focusin",()=>{connectToSocket()})

    const profileInputSend = document.createElement("button");
    profileInputSend.textContent = "Start Conversation";
    profileInputSend.classList.add("widget-send-button-profile-y3zyj5k");


    profileInputSend.addEventListener("click",()=>{
      console.log("Start Conversation Clicked")
      addUserMessageToChat(profileInput.value)
      chatViewButton.click()
    })

    const socialIconsContainer = document.createElement("div");
    socialIconsContainer.classList.add("social-icons-container-59j3jc3");

    for (const [social, {icon, socialLink}] of Object.entries(defaultSettings.profile.socials)) {
      const socialIconElement = document.createElement("a");
      socialIconElement.setAttribute("href", socialLink);
      socialIconElement.setAttribute("target", "_blank");

      const socialIconSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      socialIconSvg.classList.add("social-icon-3ypjpan");
      socialIconSvg.innerHTML = icon;

      socialIconElement.appendChild(socialIconSvg);
      socialIconsContainer.appendChild(socialIconElement);
    }


    profileContent.appendChild(chatBotTitle2);
    profileContent.appendChild(profileTabDescription)
    profileContent.appendChild(profileInput)
    profileContent.appendChild(profileInputSend);
    profileContent.appendChild(socialIconsContainer)
    profilePage.appendChild(profileContent);
    chatContainer.appendChild(profilePage);


    chatContainer.appendChild(allChats);
    if (defaultSettings.collectVisitorInfo) {
      var emailForm = document.createElement("div");
      emailForm.setAttribute("id", "email-form");

      var emailFormTopDiv = document.createElement("div");
      emailFormTopDiv.classList.add("email-form-top-div-exlgu8x");


      var emailFormParagraph = document.createElement("p");
      emailFormParagraph.style.color = "black";
      emailFormParagraph.style.textAlign = "center";
      emailFormParagraph.style.margin = "0";
      emailFormParagraph.textContent = "Contact Details";

      const closeBtnEmail = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      closeBtnEmail.classList.add("close-btn-for-widget-qwerty5-email-s185rwx")
      closeBtnEmail.setAttribute("id", "close-btn-for-widget-qwerty5-email")
      closeBtnEmail.style.cursor = "pointer";
      closeBtnEmail.style.fill = "black";
      closeBtnEmail.style.width = "14px";
      closeBtnEmail.setAttribute("xmlns", "http://www.w3.org/2000/svg");
      closeBtnEmail.setAttribute("viewBox", "0 0 384 512");


      const closeBtnPathEmail = document.createElementNS("http://www.w3.org/2000/svg", "path");
      closeBtnPathEmail.setAttribute("d", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z");
      closeBtnEmail.appendChild(closeBtnPathEmail);

      emailFormTopDiv.appendChild(emailFormParagraph);
      emailFormTopDiv.appendChild(closeBtnEmail)
      emailForm.appendChild(emailFormTopDiv)


      var widgetUserName = document.createElement("input");
      widgetUserName.classList.add("widget-input-email-byl793h");
      widgetUserName.setAttribute("id", "widget-user-name");
      widgetUserName.setAttribute("placeholder", "Name");
      emailForm.appendChild(widgetUserName);

      var widgetUserEmail = document.createElement("input");
      widgetUserEmail.classList.add("widget-input-email-byl793h");
      widgetUserEmail.setAttribute("id", "widget-user-email");
      widgetUserEmail.setAttribute("placeholder", "Email");
      widgetUserEmail.setAttribute("type", "email");
      emailForm.appendChild(widgetUserEmail);

      var widgetUserPhone = document.createElement("input");
      widgetUserPhone.classList.add("widget-input-email-byl793h");
      widgetUserPhone.setAttribute("id", "widget-user-phone");
      widgetUserPhone.setAttribute("placeholder", "Phone");
      widgetUserPhone.setAttribute("type", "tel");
      emailForm.appendChild(widgetUserPhone);


      var emailSubmitButton = document.createElement("button");
      emailSubmitButton.setAttribute("id", "email-submit-button");
      emailSubmitButton.addEventListener("click", submitUserInfo);
      emailSubmitButton.textContent = "Submit";
      emailForm.appendChild(emailSubmitButton);

      chatContainer.appendChild(emailForm);
    }

    widget.appendChild(widgetHeader);


    widget.appendChild(chatContainer);

    var interactiveBar = document.createElement("div");
    interactiveBar.setAttribute("id", "iteractive-bar");

    var inputDiv = document.createElement("div");
    inputDiv.classList.add("input-div-ow7s31y");
    inputDiv.style.position = "relative";

    var widgetInput = document.createElement("input");
    widgetInput.classList.add("widget-input-1wlknav");
    widgetInput.id = "widget-input-message";
    //widgetInput.setAttribute("onkeydown", "return handleOnEnterPressed(event)");
    widgetInput.setAttribute("placeholder", "Type your message...");
    widgetInput.addEventListener("focusin",()=>{connectToSocket()})


    const resetButton = document.createElement("button");
    resetButton.classList.add("reset-button-fn3gbxl");
    resetButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" class="reset-btn" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160H352c-17.7 0-32 14.3-32 32s14.3 32 32 32H463.5c0 0 0 0 0 0h.4c17.7 0 32-14.3 32-32V80c0-17.7-14.3-32-32-32s-32 14.3-32 32v35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1V432c0 17.7 14.3 32 32 32s32-14.3 32-32V396.9l17.6 17.5 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352H160c17.7 0 32-14.3 32-32s-14.3-32-32-32H48.4c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"/></svg>';
    resetButton.addEventListener("click", resetChat);

    inputDiv.appendChild(widgetInput);
    widgetInput.addEventListener("keydown",(event)=>{
      const keyCode = event.keyCode || event.which;
      if (keyCode === 13) { // 13 is the key code for Enter
        // Execute your action here
        console.log('Enter key pressed!');
        addUserMessageToChat()
        return false; // Prevent the default action
      }
    })
    //inputDiv.appendChild(resetButton);


    const widgetSendButton = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    widgetSendButton.classList.add("widget-send-button-2xgz14i");
    widgetSendButton.addEventListener("click", () => addUserMessageToChat()); // Update to use addEventListener
    widgetSendButton.setAttribute("xmlns", "http://www.w3.org/2000/svg");
    widgetSendButton.setAttribute("viewBox", "0 0 512 512");

    const widgetSendButtonPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
    widgetSendButtonPath.setAttribute("d", "M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3.3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z");
    widgetSendButton.appendChild(widgetSendButtonPath);
    inputDiv.appendChild(widgetSendButton);

    const fileInput = document.createElement("input");
    fileInput.setAttribute("accept", ".jpg, .jpeg, .png");

    fileInput.setAttribute("type", "file");
    fileInput.setAttribute("id", "file-input");
    fileInput.style.display = "none";
    fileInput.onchange = handleFileUpload;

    function handleFileUpload() {
      const selectedFile = fileInput.files[0];
      if (selectedFile) {
        const allowedTypes = ["image/jpeg", "image/png"];
        if (allowedTypes.includes(selectedFile.type)) {
          displayImageInChat(selectedFile)
        } else {
          alert("Please select a valid file type (JPG or PNG).");
          fileInput.value = "";
        }
      }
    }

    function displayImageInChat(file) {
      const imageElement = document.createElement("img");
      const allChats = document.getElementById("all-chats")
      imageElement.setAttribute("src", URL.createObjectURL(file));
      imageElement.setAttribute("alt", "Uploaded Image");
      imageElement.classList.add("user-image-47ubx3h")

      allChats.appendChild(imageElement);

      autoScroll()
    }

    function displayFileInChat(file) {
      const allChats = document.getElementById("all-chats")
      const fileContainer = document.createElement("div");
      fileContainer.className = "file-container-u6tr22e";

      const fileIcon = document.createElement("span");

      fileIcon.innerHTML = "&#128193;";
      const fileNameLabel = document.createElement("span");
      fileNameLabel.textContent = file.name;

      fileContainer.appendChild(fileIcon);
      fileContainer.appendChild(fileNameLabel);

      allChats.appendChild(fileContainer);
      autoScroll()
      hideConvoStarters();
    }

    // FILE UPLOAD
    const fileInputSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    fileInputSvg.classList.add("file-input-svg-kpk670t");
    fileInputSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
    fileInputSvg.setAttribute("viewBox", "0 0 448 512");
    fileInputSvg.onclick = openFilePicker;

    const fileInputSvgPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
    fileInputSvgPath.setAttribute("d", "M364.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z");
    fileInputSvg.appendChild(fileInputSvgPath);

    function openFilePicker() {
      document.getElementById('file-input').click();
    }

    //inputDiv.appendChild(fileInput);
    //inputDiv.appendChild(fileInputSvg)

    interactiveBar.appendChild(inputDiv);


    widget.appendChild(interactiveBar);

    if (!defaultSettings.removePoweredBy) {
      var poweredText = document.createElement("p");
      poweredText.classList.add("powered-text-kpk670t");
      poweredText.innerHTML = "<a href='https://www.inoz.ai'>Powered by <b>Inoz.ai</b></a>";
      widget.appendChild(poweredText);
    }

    chatWrapper.appendChild(widget);

    var widgetOpenDiv = document.createElement("div");
    widgetOpenDiv.classList.add("widget-open-div-s185rwx");

    var widgetButton = document.createElement("button");
    widgetButton.setAttribute("id", "widgetButton");
    widgetButton.classList.add("widget-btn-6n23t4f");

    /*console.log(defaultSettings.expandByDefault,"defaultX")
    if(defaultSettings.expandByDefault) {
      setTimeout(() => {
        document.getElementById("widgetButton").click()
      }, 3000)
    }*/

    if (defaultSettings.widget.style == "highEngagement") {
      const notificationPopup = document.createElement("div");
      notificationPopup.innerText = "1";
      notificationPopup.classList.add("noti-popup-7gm67xq");
      widgetButton.appendChild(notificationPopup)
    }
    if (defaultSettings.widgetIcon) {
      const widgetIcon = document.createElement("img");
      widgetIcon.setAttribute("src", defaultSettings.widgetIcon);
      widgetIcon.classList.add("widget-icon-rr3g5oy")
      widgetButton.appendChild(widgetIcon)

    } else {
      const widgetButtonSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      widgetButtonSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
      widgetButtonSvg.setAttribute("fill", "none");
      widgetButtonSvg.setAttribute("viewBox", "0 0 24 24");
      widgetButtonSvg.setAttribute("stroke-width", "1.5");
      widgetButtonSvg.setAttribute("stroke", "currentColor")
      widgetButtonSvg.classList.add("widget-icon-rr3g5oy");

      const widgetButtonPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
      widgetButtonPath.setAttribute("stroke-linecap", "round");
      widgetButtonPath.setAttribute("stroke-linejoin", "round");
      widgetButtonPath.setAttribute("d", "M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018");

      widgetButtonSvg.appendChild(widgetButtonPath);
      widgetButton.appendChild(widgetButtonSvg);
    }


    widgetOpenDiv.appendChild(widgetButton);

    if (defaultSettings.widget.showPopupText) {
      const widgetPopup = document.createElement("div");


      widgetPopup.classList.add("widget-popup-6n23t4f");
      widgetPopup.setAttribute("id", "widget-popup")

      const widgetPopupContent = document.createElement("div");
      widgetPopupContent.classList.add("amalpopup")

      widgetPopup.classList.add("widget-popup-content-kpk670t");

      const widgetPopupText = document.createElement("p");
      widgetPopupText.classList.add("widget-popup-text-rpnvogd");
      widgetPopupText.innerText = defaultSettings.widget.popupText;
      widgetPopupContent.appendChild(widgetPopupText);


      const closeBtnPopup = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      closeBtnPopup.classList.add("close-btn-for-widget-qwerty5-popup-g469949")
      closeBtnPopup.setAttribute("id", "close-btn-for-widget-qwerty5-popup")
      closeBtnPopup.style.cursor = "pointer";
      closeBtnPopup.style.fill = "black";
      closeBtnPopup.style.width = "14px";
      closeBtnPopup.setAttribute("xmlns", "http://www.w3.org/2000/svg");
      closeBtnPopup.setAttribute("viewBox", "0 0 384 512");


      const closeBtnPathPopup = document.createElementNS("http://www.w3.org/2000/svg", "path");
      closeBtnPathPopup.setAttribute("d", "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z");
      closeBtnPopup.appendChild(closeBtnPathPopup);

      closeBtnPopup.appendChild(closeBtnPathPopup);
      widgetPopupContent.appendChild(closeBtnPopup)

      const widgetPopupArrow = document.createElement("div");
      widgetPopupArrow.classList.add("widget-popup-arrow-7gm67xq");

      widgetPopup.appendChild(widgetPopupContent)
      widgetPopup.appendChild(widgetPopupArrow)

      chatWrapper.appendChild(widgetPopup)


    }

    //debugger
    chatWrapper.appendChild(widgetOpenDiv);


    console.log(document.body)
    document.body.appendChild(chatWrapper);


    const styleElement = document.createElement("style");

    const cssStyles = `
    ${defaultSettings.fontUrl};

.amalpopup{
  display:flex;
  min-width:10vb;
}

.inoz-loader {
    position: relative;
  width: 5px;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: l5 1s infinite linear alternate;
}
@keyframes l5 {
  0%  {box-shadow: 20px 0 #000, -20px 0 #0002;background: #000 }
  33% {box-shadow: 20px 0 #000, -20px 0 #0002;background: #0002}
  66% {box-shadow: 20px 0 #0002,-20px 0 #000; background: #0002}
  100%{box-shadow: 20px 0 #0002,-20px 0 #000; background: #000 }
}
      #widgetButton{
        border-radius:50%
      }
      #widgetButton:hover {
        transform: scale(1.1) !important;
      }
      a{
        color:${defaultSettings.widgetColor}
      }

      .widget-btn-6n23t4f {
        width: 60px;
        height: 60px;
        border: 0px;
        cursor: pointer;
        border-radius: 100%;
        padding: 10px;
        padding-top: 12px;
        display: flex;
        align-content: center;
        align-items: center;
        box-sizing: border-box;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
        justify-content: center;
        background-color: ${defaultSettings.widgetColor};
        transition: all 0.6s ease;
        opacity: 0;
      }
      .noti-popup-7gm67xq{
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:10px;
        color:white;
        border:1px solid white;
        width:20px;
        height:20px;
        background:red;
        position:absolute;
        top:-2px;
        right:-2px;
        border-radius:100%;
        text-align:center;
      }
      .widget-btn-show {
        opacity: 1;
      }
    
      .widget-dfs234asdf {
        z-index:9999999999999;
        padding-bottom:10px;
        visibility: hidden;
        opacity: 0;
        height: 700px;
        width: 420px;
        transition: opacity 0.5s ease;
        background-color:white;
        box-sizing: border-box;
        border-radius: 25px;
        position: relative;
        display: none;
        justify-content: space-between;
        flex-direction: column;
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
      }
      .widget-header-sdfe32e2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0px 20px;
        width: 100%;
        height:100px;
        max-height:70px;
        background-color: ${defaultSettings.widgetColor};
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
      }
      .header-left-div-dsf124wd{
        display:flex;
        flex-direction:column;
      }
      #header-agent-typing{
        display:none;
        font-size:13px;
      }
      .header-left-div-dsf124wd p{
        margin:0px;
        color:white;
      }

      .show-widget {
        display: flex;
        visibility: visible;
        opacity: 1;
      }

      .hide-widget-button {
        display: none;
      }
      svg {
        width: 40px;
        height: 40px;
        color: white;
      }
      .widget-dfs234asdf header,
      .widget-dfs234asdf .iteractive-bar {
        transition: opacity 0.5s ease;
      }
      .each-message{
      }
      .user-message {
        max-width:80%;
        border-radius: 10px;
        padding: 10px 20px;
        color: white;
        align-self: flex-end;
        background-color: ${defaultSettings.widgetColor};
        float: right;
        word-wrap: break-word;
      }
      .bot-message {
        display: flex;
        //flex-direction: column;
        //justify-content: flex-start;
        //align-items: flex-end;
        border-radius:10px;
        word-wrap:break-word;
      }
      .chat-wrapper-f12asd {
      z-index:9999999999999;
        font-family:${defaultSettings.fontFamily},sans-serif;
        position:fixed;
        ${defaultSettings.widgetButtonPosition}: 20px;
        align-items:${defaultSettings.widgetButtonPosition == "left" ? "flex-start" : "flex-end"};
        display:flex;
        flex-direction:column;
        bottom: 20px;
        box-sizing: border-box;
      }
      .profile-img-bot {
        width: 35px;
        height: 35px;
        border-radius:100%;
        margin: 0 7px;
        fill: ${defaultSettings.widgetColor};
      }
      #all-chats {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .user-message a{
        color:white;
      }
      .user-image-47ubx3h{
        align-self: flex-end;
        width:200px;
        float:right;
        border-radius:10px;
      }
       .bot-message a{
        color:black;
      }
      .message-content-bot {
        max-width:70%;
        border-radius: 10px;
        color: black;
        align-self: flex-start;
        padding: 10px 10px;
        background-color: rgb(241, 241, 241);
      }
      .message-content-bot-typing {
        max-width:80%;
        border-radius: 10px;
        color: black;
        align-self: flex-start;
        padding: 10px 20px 10px 20px;
        background-color: rgb(241, 241, 241);
      }
      .chat-container-kasl12csd {
        scrollbar-width: none;
        font-weight: 300;
        font-size: 15px;
        box-sizing: border-box;
        padding: 15px;
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 4px;
        overflow-y: scroll;
      }
      .rating-container{
        direction:rtl;
        box-sizing:border-box;
        padding:50px;
        height:100%;
        width:100%;
        display:flex;
        justify-content:space-around;
        gap:10px;
      }
      .star{
        transition:all 0.3s ease;
        fill:gray;
     box-shadow: rgba(60, 64, 67, 0.3) 0px 0px 0px 0px, rgba(60, 64, 67, 0.15) 0px 0px 0px 0px; 
      }
      .star:hover{
        fill:gold;
        transform:scale(1.15);
      }
      .selected{
        fill:gold;
      }
      .s1:hover ~ .star{
        fill:gold;
      }
      .s2:hover ~ .star{
        fill:gold;
      }
      .s3:hover ~ .star{
        fill:gold;
      }
      .s4:hover ~ .star{
        fill:gold;
      }

      .s5:hover ~ .star{
        fill:gold;
      }
      .header-right-div-3daer234{
        display:flex;
        gap:20px;
        align-items:center;
        justify-content:center;
      }
    .profile-view-button-sdg2r2e2{
        cursor:pointer;
        border-radius:20px;
        padding:9px 20px;
        border:2px solid white;
        color:white;
        background-color:transparent;
      }
      .chat-view-button-sdr23d{
        display:none;
        cursor:pointer;
        border-radius:20px;
        padding:9px 20px;
        border:2px solid white;
        color:white;
        background-color:transparent;
      }
      .input-div-ow7s31y{
        display:flex;
      }

      #email-form {
        padding: 20px;
        gap: 7px;
        display: flex;
        flex-direction: column;
        margin: 20px;
        border-radius: 20px;
        background-color: rgb(244, 243, 246);
        transition: box-shadow 0.3s ease;
        box-shadow:
          rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
          rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
      }
      #email-form:hover {
        box-shadow:
          rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
          rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
      }
      .email-form-top-div-exlgu8x{
        display:flex;
        justify-content:space-between;
        align-items:center;
      }
      .close-btn-email-s185rwx{
        fill:black;
        margin-right:3px;
      }
      .widget-input-email-byl793h {
        width: 100%;
        border-radius: 5px;
        border: 1px solid ${defaultSettings.widgetColor};
        font-size: 13px;
        padding: 15px 10px;
        outline: 0px;
        box-sizing: border-box;
        z-index: 9;
      }
      #iteractive-bar {
        box-sizing:border-box;
        border-top: 1px solid gray;
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
        padding: 10px;
        padding-bottom:0px;
        width:100%;
      }
      .file-input-svg-kpk670t{
        fill:${defaultSettings.widgetColor};
        z-index: 9999;
        position: absolute;
        top: 5px;
        right: 75px;
        width: 18px;
        cursor: pointer;
      }
      #email-submit-button {
        width: 100%;
        border-radius: 5px;
        border: 0px;
        padding: 12px 15px;
        font-size: 13px;
        color: white;
        background-color: ${defaultSettings.widgetColor};
        cursor: pointer;
      }
      .widget-input-1wlknav {
        width: 100%;
        border-radius: 10px;
        border: 1.5px solid ${defaultSettings.widgetColor};
        font-size: 15px;
        padding: 15px 10px;
        padding-right:40px;
        outline: 0px;
        box-sizing: border-box;
        z-index: 9;
      }
      .reset-btn{
        width:20px;
        margin:0px 5px;
      }
      .reset-button-fn3gbxl{
        margin-left:5px;
        padding:0px;
        border:0;
        background:transparent;
      }
      
      .email-form-text {
        text-align: center;
        color: black;
        font-size: 15px;
        font-weight: bold;
        margin: 0;
      }
      .widget-send-button-2xgz14i {
        fill:${defaultSettings.widgetColor};
        z-index: 9999;
        position: absolute;
        top: 5px;
        right: 10px;
        width: 18px;
        cursor: pointer;
      }
      .widget-send-button-profile-y3zyj5k {
        color:white;
        border:2px solid ${defaultSettings.widgetColor};
        background:${defaultSettings.widgetColor};
        z-index: 9999;
        cursor: pointer;
        font-size:15px;
        outline:0px;
        width:80%;
        padding:15px 10px;
        border-radius:10px;
        border:1px solid black;
        position:relative;
      }
      .widget-open-div-s185rwx {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        z-index: 9999;
        position: relative;
        margin:10px;
      }
      .widget-icon-rr3g5oy{
        width:40px;
        height:40px;
        min-width:40px;
        min-height:40px;
      }
      .powered-text-kpk670t {
        margin: 0 15px;
        color: gray;
        text-align: center;
        margin-top: 6px;
      }
      .convo-starter{
        cursor:pointer;
        width:100%;
        display:grid;
        gap:2px;
        place-items:center;
      }
      .profile-page{
            height:100%;
        flex-direction:column;
        align-items:center;
        justift-content:center;
        display:none;
      }
      .social-icons-container-59j3jc3{
        margin-top:50px;
        display:none;
        gap:30px;
        
      }
      .social-icon-3ypjpan{
        width:30px;
        fill:${defaultSettings.widgetColor};
        transition:transform 0.3s ease;
        
      }
      .social-icon-3ypjpan:hover{
        transform:scale(1.2);
        box-shadow: rgba(99, 99, 99, 0.2);
      }
      .convo-starter p:hover{
            box-shadow:
          rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
          rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; 
          transform:scale(1.05);
      }
      .convo-starter > p{ 
        padding:4px 8px;
        border-radius:20px;
        width:fit-content;
        margin:0;
        transition: transform 0.3s ease, box-shadow .3s ease;
         box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
      }
      .profile-content-cdj4fiuq3{
        width:100%;
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        flex-direction:column;
        gap:5px;
      }
      .profile-tab-icon-n13bopj{
        fill:${defaultSettings.widgetColor};
        height:80px;
        width:80px;
        margin:0;
      }
      .profile-chat-bot-title-thnu7ru{
        color:black;
        font-weight:600;
        font-size:25px;
        margin:0px;
        text-align:center;
      }
      .profile-tab-description-ot1uhdl{
        text-align:center;
        font-size:15px;
        margin:5px 0px;
      }
      .profile-input-iejl9vu{
        font-size:15px;
        outline:0px;
        width:80%;
        padding:15px 10px;
        border-radius:10px;
        border:1px solid black;
        position:relative;
      }
      .profile-input-iejl9vu{
        width: 80%;
        border-radius: 10px;
        border: 1.5px solid ${defaultSettings.widgetColor};
        font-size: 15px;
        padding: 15px 10px;
        outline: 0px;
        box-sizing: border-box;
        z-index: 9;
    }
    .widget-popup-6n23t4f{
        transition:display 0.4s ease;
        padding: 10px 25px;
        border-radius: 10px;
        color: black;
        display:none;
        ${popupStyle}
        margin-bottom:15px;
    }
  
     .widget-popup-content-kpk670t{
        
        z-index: 2147483646;
            min-width: 80px;
            max-width: 250px;
            box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 20px 0px;
            border-radius: 10px;
            height: auto;
            cursor: pointer;
            transform: translateX(0%) translateZ(0px);
        }
        .widget-popup-arrow-7gm67xq{
            
            position: absolute;
            bottom: -4px;
            width: 10px;
            height: 10px;
            z-index: 0;
            transform: rotate(45deg);
            background: center center white;
            border-radius: 3px;
            ${defaultSettings.widgetButtonPosition}: 27px;
            ${popupStyleArrow}
        }
        .close-btn-popup-g469949{
            top:0px;
            position:absolute;
            right:10px;
        }
        .feedback-p-g469949{
          font-size:20px;
          text-align:center;
          font-weight:500;
        }
        .feedback-g469949{
          box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px;
          margin:5px;
          border:2px solid ${defaultSettings.widgetColor};
          border-radius:10px;
          display:flex;
          justify-content:center;
          align-items:center;
          flex-direction:column;
          text-align:cetner;
          padding:20px 0px;
        }
        
      @media only screen and (max-width: 600px) {
        .widget-dfs234asdf {
          box-sizing: border-box;
          padding: 0;
          width: calc(100vw - 0px);
          height: calc(100vh - 50px);
          right: 0;
          top:0px;
          left:0px;
          bottom:0px;
          max-height:88vh
        }
        .chat-wrapper-f12asd {
        z-index:9999999999999;
          box-sizing:border-box;
          padding:0px;
          
          ${defaultSettings.widgetButtonPosition}: 0px;
          bottom: 0px;
        }
        .widget-popup-6n23t4f{
            display:none;
        }
      }
       @media only screen and (max-width: 400px) {
        .widget-dfs234asdf {
          z-index:9999999999999;
          box-sizing: border-box;
          padding: 0;
          width: calc(100vw - 0px);
          height: calc(100vh - 50px);
          right: 0;
          top:0px;
          left:0px;
          bottom:0px;
        }
        .chat-wrapper-f12asd {
        z-index:999999;
          padding: 0px;
          right: 0px;
          bottom: 0px;
        }
       
      }
       
      
      
      @media (max-height: 740px) and (min-width: 600px) {
        .widget-dfs234asdf {
          max-height:90vh
        }
      }
      
      
      
      
      
      
      
      
      
      `


    styleElement.textContent = cssStyles;

    document.head.appendChild(styleElement);


    restoreConversationHistory()




  }

  let themeColor;

  const customSettings = {
    chatBotTitle: "Inoz.ai",
    welcomeMessage: "Welcome 👋! How can we help you today?",
    widgetColor: "black",
    collectVisitorInfo: true,
    widgetButtonPosition: "right",
  }


  console.log("BeforeDomCOntentLoaded")
  /*document.addEventListener("load",*/
      async function start() {
    console.log("DomCOntentLoaded")
    let isWidgetOpened = false;
//debugger
    try {
      /*const response = await fetch("https://mocki.io/v1/698ca67d-8935-4abd-8d14-c5c2bb961c6b", {
        method: "GET",
        mode: "cors",
        headers: {
          "Content-Type": "application/json",
        },
      });

      if (!response.ok) {
        throw new Error(`Failed to fetch data. Status: ${response.status}`);
      }

      const data = await response.json();*/

      themeColor = "#000000";
      createChatWidget(customSettings);

      conversationHistory = localStorage.getItem("inoz_"+defaultSettings.bot_id+"_conversation_history") || JSON.stringify([])
      console.log( conversationHistory)
      if(conversationHistory==="[]"){
        addBotMessageToChat(defaultSettings.welcomeMessage);
      }


      const allChat = document.getElementById("all-chats");

      const closeBtnPopup = document.getElementById("widget-popup");
      setTimeout(() => {
        if (!isWidgetOpened) {
          closeBtnPopup.style.display = "block"
        }

      }, 3000)

      defaultSettings.convoStarters.forEach((each) => {
        const convoStarter = document.createElement("div");
        convoStarter.classList.add("convo-starter")
        const convoStarterText = document.createElement("p");
        convoStarterText.innerText = each;
        convoStarterText.addEventListener("click", () => {
          connectToSocket()
          const timex = setInterval(()=>{
            if(typeof socket !== "undefined"){
              addUserMessageToChat(each);
              clearTimeout(timex)
            }

          },1000)
          hideConvoStarters();
        });
        convoStarter.appendChild(convoStarterText);
        allChat.appendChild(convoStarter)

      })
      console.log(defaultSettings,"defaultX")
      if (defaultSettings.expandByDefault) {
        toggleWidget();
      }

    } catch (error) {
      console.error("Error fetching data:", error);
      return;
    }
    const closeBtn = document.querySelector(".close-btn-for-widget-qwerty5");
    const widget = document.querySelector(".widget-dfs234asdf");
    const widgetButton = document.getElementById("widgetButton");
    const popup = document.querySelector(".widget-popup-6n23t4f")

    widgetButton.classList.add("widget-btn-show");
    widgetButton.addEventListener("click", toggleWidget);
    closeBtn.addEventListener("click", toggleWidget );
    popup.addEventListener('click', toggleWidget)


    widgetButton.style.opacity = "0";
    widgetButton.classList.add("widget-btn-show");
    setTimeout(() => {
      widgetButton.style.opacity = "1";
    }, 100);


    function toggleWidget() {
      const widgetPopup = document.querySelector(".widget-popup-6n23t4f")
      const widget = document.querySelector(".widget-dfs234asdf");
      const widgetButton = document.getElementById("widgetButton");
      widget.classList.toggle("show-widget");
      widgetButton.classList.toggle("hide-widget-button");
      widgetPopup.style.display = "none";
      isWidgetOpened = true;



    }

    const profileViewButton = document.querySelector(".profile-view-button-sdg2r2e2");

    const chatViewButton = document.querySelector(".chat-view-button-sdr23d");
    const profilePage = document.querySelector(".profile-page");

    const allChat = document.getElementById("all-chats");
    const emailForm = document.querySelector("#email-form");
    const interactiveBar = document.querySelector("#iteractive-bar")
    profileViewButton.addEventListener("click", function () {
      chatViewButton.style.display = "block";
      allChat.style.display = "none";
      if (emailForm) {
        emailForm.style.display = "none";
      }
      profileViewButton.style.display = "none";
      profilePage.style.display = "flex";
      interactiveBar.style.display = "none"
    });

    chatViewButton.addEventListener("click", function () {
      allChat.style.display = "flex";
      if (emailForm) {
        emailForm.style.display = "flex";
      }
      chatViewButton.style.display = "none";
      profileViewButton.style.display = "block";
      profilePage.style.display = "none";
      interactiveBar.style.display = "block"
    });

    const closeBtnPopup = document.getElementById("close-btn-for-widget-qwerty5-popup");
    const widgetPopup = document.querySelector(".widget-popup-6n23t4f")
    closeBtnPopup.addEventListener("click", ($event) => {
      widgetPopup.style.display = "none"
      $event.stopPropagation()
      $event.preventDefault()
      return

    })

    const closeBtnEmail = document.getElementById("close-btn-for-widget-qwerty5-email");
    if (closeBtnEmail) {
      closeBtnEmail.addEventListener("click", handleRemoveEmailForm)
    }


  }
  start()

  /*);*/

  function submitUserInfo() {
    const emailForm = document.querySelector("#email-form")
    emailForm.style.display = "none"
    const name = document.getElementById("widget-user-name").value
    const email = document.getElementById("widget-user-email").value
    const phone = document.getElementById("widget-user-phone").value
    socket.emit('saved_user_details', {name: name, email: email, phone: phone});
    socket.emit("message_from_user",{ message: "name:"+name+" ,email:"+email+", phone:"+phone, message_id: Math.random() })
    console.log("Chat started");
  }




  function addUserMessageToChat(custom_message,restore=false) {
    const chatContainer = document.querySelector(".chat-container-kasl12csd");
    const allChat = document.getElementById("all-chats");
    const widgetInput = document.querySelector(".widget-input-1wlknav");
    const message = custom_message || widgetInput.value;
    if (!message) return;
    widgetInput.value = "";

    const messageElement = document.createElement("div");
    messageElement.classList.add("user-message", "each-message");
    messageElement.style.backgroundColor = defaultSettings.widgetColor;
    const messageText = document.createElement("p");
    messageText.classList.add("user-message-content")
    messageText.style.margin = "0";
    messageText.innerHTML = linkify(message);
    messageElement.appendChild(messageText);
    allChat.appendChild(messageElement);
    chatContainer.scrollTop = chatContainer.scrollHeight;
    hideConvoStarters();
    if(restore==false){
    socket.emit('message_from_user', { message: message, message_id: Math.random() });
    }
    addToConversationHistory(message,"O")
  }

  function addBotMessageToChat(message,restore=false) {

    document.querySelector(".message-content-bot-typing")?.parentElement.remove();



    const chatContainer = document.querySelector(".chat-container-kasl12csd");
    const widgetInput = document.querySelector(".widget-input-1wlknav");
    widgetInput.value = "";


    const messageElement = document.createElement("div");
    messageElement.classList.add("bot-message", "each-message");


      const lastElment =document.getElementById("all-chats").lastElementChild
      const lastImg = lastElment?.querySelector("img")

      let showDP = lastElment?.classList?.contains("user-message")
      if(showDP === undefined){
        showDP = true
      }
    console.log(showDP)



      if (!defaultSettings.botImg) {
        const svgElement = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "svg"
        );
        svgElement.setAttribute(
            "xmlns",
            "http://www.w3.org/2000/svg"
        );
        svgElement.setAttribute("viewBox", "0 0 640 512");
        svgElement.classList.add("profile-img-bot");

        const pathElement = document.createElementNS(
            "http://www.w3.org/2000/svg",
            "path"
        );
        pathElement.setAttribute(
            "d",
            "M320 0c17.7 0 32 14.3 32 32V96H472c39.8 0 72 32.2 72 72V440c0 39.8-32.2 72-72 72H168c-39.8 0-72-32.2-72-72V168c0-39.8 32.2-72 72-72H288V32c0-17.7 14.3-32 32-32zM208 384c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H208zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H304zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H400zM264 256a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zm152 40a40 40 0 1 0 0-80 40 40 0 1 0 0 80zM48 224H64V416H48c-26.5 0-48-21.5-48-48V272c0-26.5 21.5-48 48-48zm544 0c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H576V224h16z"
        );

        svgElement.style.visibility = showDP?"visible":"hidden";
        svgElement.appendChild(pathElement);
        messageElement.appendChild(svgElement);
      }
      else {
        const imgElement = document.createElement("img");
        imgElement.setAttribute("src", defaultSettings.botImg);
        imgElement.classList.add("profile-img-bot");
        imgElement.style.visibility = showDP?"visible":"hidden";
        messageElement.appendChild(imgElement)
      }



    if(defaultSettings.haveSoundEffects === true && restore === false) {
      soundEffect.play();
    }


    const chatElement = document.createElement("div");
    chatElement.classList.add("message-content-bot");
    const messageText = document.createElement("p");
    messageText.style.margin = "0";
    messageText.innerHTML = linkify(message);
    chatElement.appendChild(messageText);
    messageElement.appendChild(chatElement);
    const allChat = document.getElementById("all-chats");
    allChat.appendChild(messageElement);
    autoScroll();
    addToConversationHistory(message,"I")
  }

  function addTypingMessageToChat(fromProfile=null) {
    setAgentTyping();
    const chatContainer = document.querySelector(".chat-container-kasl12csd");
    let widgetInput = ""
    console.log("fromProfile = ",fromProfile)
    if(fromProfile == null){
       widgetInput = document.querySelector(".widget-input-1wlknav");
    }else {

       widgetInput= fromProfile
    }
    widgetInput.value = "";


    const messageElement = document.createElement("div");
    messageElement.classList.add("bot-message", "each-message");

    if (!defaultSettings.botImg) {
      const svgElement = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "svg"
      );
      svgElement.setAttribute(
          "xmlns",
          "http://www.w3.org/2000/svg"
      );
      svgElement.setAttribute("viewBox", "0 0 640 512");
      svgElement.classList.add("profile-img-bot");

      const pathElement = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "path"
      );
      pathElement.setAttribute(
          "d",
          "M320 0c17.7 0 32 14.3 32 32V96H472c39.8 0 72 32.2 72 72V440c0 39.8-32.2 72-72 72H168c-39.8 0-72-32.2-72-72V168c0-39.8 32.2-72 72-72H288V32c0-17.7 14.3-32 32-32zM208 384c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H208zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H304zm96 0c-8.8 0-16 7.2-16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s-7.2-16-16-16H400zM264 256a40 40 0 1 0 -80 0 40 40 0 1 0 80 0zm152 40a40 40 0 1 0 0-80 40 40 0 1 0 0 80zM48 224H64V416H48c-26.5 0-48-21.5-48-48V272c0-26.5 21.5-48 48-48zm544 0c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H576V224h16z"
      );

      svgElement.appendChild(pathElement);
      messageElement.appendChild(svgElement);
    } else {
      const imgElement = document.createElement("img");
      imgElement.setAttribute("src", defaultSettings.botImg);
      imgElement.classList.add("profile-img-bot");
      messageElement.appendChild(imgElement)
    }
    //soundEffect.play();
    const chatElement = document.createElement("div");
    chatElement.classList.add("message-content-bot-typing");
    const messageText = document.createElement("p");
    messageText.style.margin = "0";
    messageText.style.padding = ".5rem";
    messageText.innerHTML = "<div class=\"inoz-loader\"></div>\n";
    chatElement.appendChild(messageText);
    messageElement.appendChild(chatElement);
    const allChat = document.getElementById("all-chats");
    allChat.appendChild(messageElement);
    autoScroll();
    setTimeout(()=>{
      document.querySelector(".message-content-bot-typing")?.parentElement.remove();
    },5000)

  }




  function hideConvoStarters() {
    const allChat = document.getElementById("all-chats");
    const convoStarters = document.querySelectorAll(".convo-starter");
    convoStarters.forEach((convoStarter) => {
      allChat.removeChild(convoStarter);
    });
  }

  function setAgentTyping() {
    const agentP = document.getElementById("header-agent-typing");
    agentP.style.display = "block";
    setTimeout(() => {
      agentP.style.display = "none"
    }, 4000)
  }

  function linkify(text) {
    const urlRegex = /(https?:\/\/[^\s]+)|(www\.[^\s]+)/g;
    // Ensure text is a string
    const inputText = String(text);

    return inputText.replace(urlRegex, (url) => {
      if (url.startsWith('www.')) {
        url = 'http://' + url;
      }
      return `<a href="${url}" target="_blank">${url}</a>`;
    });
  }

  function handleRemoveEmailForm() {

    const emailForm = document.getElementById("email-form");
    emailForm.style.display = "none";
  }

  function autoScroll() {
    const chatContainer = document.querySelector(".chat-container-kasl12csd");
    chatContainer.scrollTop = chatContainer.scrollHeight;
  }

  function resetChat() {
    const allChats = document.querySelector("#all-chats");
    allChats.innerHTML = ""
    addBotMessageToChat(defaultSettings.welcomeMessage);

  }

  function sendRatingMessage() {
    const feedback = document.createElement("div");
    feedback.classList.add("feedback-g469949")

    const feedbackp = document.createElement("p");
    feedbackp.textContent = "your opinion matters to us! 😇";
    feedbackp.classList.add("feedback-p-g469949");

    feedback.appendChild(feedbackp);

    const ratingContainer = document.createElement('div');
    let selectedRating = 0;

    function handleRating(rating) {
      selectedRating = rating;
      updateStars();
    }

    function updateStars() {
      const stars = document.querySelectorAll('.star');
      stars.forEach((star, index) => {
        if (stars.length - index <= selectedRating) {
          star.classList.add('selected');
        } else {
          star.classList.remove('selected');
        }
      });
    }

    ratingContainer.classList.add('rating-container');
    for (let i = 5; i >= 1; i--) {
      const star = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      star.classList.add("star", "s" + i);
      star.setAttribute("xmlns", "http://www.w3.org/2000/svg");
      star.onclick = () => {
        handleRating(i)
      };
      star.setAttribute("viewBox", "0 0 576 512");
      star.innerHTML = `
      <path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18>"/>
    `;
      star.addEventListener('click', () => handleRating(i));
      ratingContainer.appendChild(star);
    }

    feedback.appendChild(ratingContainer);

    const allChats = document.querySelector("#all-chats");
    allChats.appendChild(feedback)
    const interactiveBar = document.querySelector("#iteractive-bar");
    interactiveBar.style.display = "none"
  }
  load_socket_io();


}
document.addEventListener("DOMContentLoaded", async ()=>{
  console.log("Document loading started")
  inoz_main()
});
//main();

/* HTML: <div class="loader"></div> */