let COLOR_CODE='#a61d20';

                let chatbotName='Moolchand Mill';

                let botLogo='data:image/webp;base64,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';

                let whatsurl='https://wa.me/919529327342/?text=Hello%20i%20have%20a%20question%20about';window.onload = function () {
    renderChatBot()
    localStorage.removeItem('chatbot-tok')
}

let welcomeMessage = "Hi, there! \nHow can I help you?"

async function renderChatBot() {
    let newDiv = document.createElement('div');
    newDiv.id = 'webChatBot'
    document.body.appendChild(newDiv);
    setTimeout(() => {
        createChatBot();
    }, 1000)
}

let aiCount = 0

console.log(botLogo)

let createChatLi, chatbotToggler, closeBtn, chatbox, sendChatBtn;
let userMessage = null;

function createChatBot() {
    let htmlData = `
    <style>
        /* Import Google font - Poppins */
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
        .chatbot-toggler {
            position: fixed;
            bottom: 30px;
            right: 35px;
            outline: none;
            border: none;
            height: 50px;
            width: 50px;
            display: flex;
            cursor: pointer;
            align-items: center;
            justify-content: center;
            border-radius: 100%;
            background: ${COLOR_CODE};
            transition: all 0.2s ease;
        }

        .show-chatbot .chatbot-toggler {
            transform: rotate(90deg);
        }

        .chatbot-toggler span {
            color: #fff;
            position: absolute;
        }

        .chatbot-toggler span:last-child,
        body.show-chatbot .chatbot-toggler span:first-child {
            opacity: 0;
        }

        body.show-chatbot .chatbot-toggler span:last-child {
            opacity: 1;
        }

        .chatbot {
            font-family: "Poppins", sans-serif;
            position: fixed;
            right: 35px;
            bottom: 85px;
            width: 300px;
            background:rgb(220,220,220);
            background-size:cover;
            border-radius: 15px;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
            transform: scale(0.5);
            transform-origin: bottom right;
            box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1),
                0 32px 64px -48px rgba(0, 0, 0, 0.5);
            transition: all 0.1s ease;
            z-index: 100009;
            height:250px;
        }

        .show-chatbot .chatbot {
            opacity: 1;
            pointer-events: auto;
            transform: scale(1);
        }

        .chatbot .chatbot-header {
            padding: 10px 0;
            position: relative;
            text-align: left;
            color: #fff;
            background: ${COLOR_CODE};
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }

        .chatbot .chatbot-header span {
            position: absolute;
            right: 15px;
            top: 50%;
            display: flex;
            cursor: pointer;
            transform: translateY(-50%);
        }

        .chatbot-header font-h2 {
            padding:10px 0;
            font-size: 14px;
        }

        .chatbot .chatbox {
            overflow-y: auto;
            height: 20vh;
            padding: 5px 5px 70px;
            text-align:'left';
        }

        .chatbot :where(.chatbox)::-webkit-scrollbar {
            width: 6px;
        }

        .chatbot :where(.chatbox)::-webkit-scrollbar-track {
            background: #fff;
            border-radius: 25px;
        }

        .chatbot :where(.chatbox)::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 25px;
        }

        .chatbox .chat {
            display: flex;
            list-style: none;
        }

        .chatbox .chat p {
            padding: 8px 12px;
            border-radius: 10px 10px 0 10px;
            max-width: 75%;
            color: #fff;
            font-size: 16px;
            background: ${COLOR_CODE};
            text-align:left;
        }

        .chatbox .incoming p {
            border-radius: 10px 10px 10px 0;
            color:${COLOR_CODE};
        }

        .chatbox .incoming p {
            color: #000;
            background: white;
            font-size:12px;
        }

        .chatbot .chat-input {
            position: absolute;
            bottom: 0;
            width: 100%;
            background: #fff;
            padding: 12px 0px;
            font-family:Poppins;
        }


        @media (max-width: 490px) {
            .chatbot-toggler {
                right: 20px;
                bottom: 20px;
            }

            .chatbot {
                right: 0;
                bottom: 0;
                height: 100%;
                border-radius: 0;
                width: 100%;
                position:fixed;
                float:right;
                z-index:100009;
            }

            .chatbot .chatbox {
                height: 90%;
                padding: 25px 15px 100px;
            }

            .chatbot .chat-input {
                padding: 5px 15px;
            }

            .chatbot header span {
                display: block;
            }
        }
    </style>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
    <div class="chatbot-toggler" style="background: ${COLOR_CODE} !important;border: none !important;height:50px;width:50px">
        <span style="padding:10px"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 39 39"><path fill="#FFF" d="M32.4 6.4C29 2.9 24.3 1 19.5 1 9.3 1 1.1 9.3 1.2 19.4c0 3.2.9 6.3 2.4 9.1L1 38l9.7-2.5c2.7 1.5 5.7 2.2 8.7 2.2 10.1 0 18.3-8.3 18.3-18.4 0-4.9-1.9-9.5-5.3-12.9zM19.5 34.6c-2.7 0-5.4-.7-7.7-2.1l-.6-.3-5.8 1.5L6.9 28l-.4-.6c-4.4-7.1-2.3-16.5 4.9-20.9s16.5-2.3 20.9 4.9 2.3 16.5-4.9 20.9c-2.3 1.5-5.1 2.3-7.9 2.3zm8.8-11.1l-1.1-.5s-1.6-.7-2.6-1.2c-.1 0-.2-.1-.3-.1-.3 0-.5.1-.7.2 0 0-.1.1-1.5 1.7-.1.2-.3.3-.5.3h-.1c-.1 0-.3-.1-.4-.2l-.5-.2c-1.1-.5-2.1-1.1-2.9-1.9-.2-.2-.5-.4-.7-.6-.7-.7-1.4-1.5-1.9-2.4l-.1-.2c-.1-.1-.1-.2-.2-.4 0-.2 0-.4.1-.5 0 0 .4-.5.7-.8.2-.2.3-.5.5-.7.2-.3.3-.7.2-1-.1-.5-1.3-3.2-1.6-3.8-.2-.3-.4-.4-.7-.5h-1.1c-.2 0-.4.1-.6.1l-.1.1c-.2.1-.4.3-.6.4-.2.2-.3.4-.5.6-.7.9-1.1 2-1.1 3.1 0 .8.2 1.6.5 2.3l.1.3c.9 1.9 2.1 3.6 3.7 5.1l.4.4c.3.3.6.5.8.8 2.1 1.8 4.5 3.1 7.2 3.8.3.1.7.1 1 .2h1c.5 0 1.1-.2 1.5-.4.3-.2.5-.2.7-.4l.2-.2c.2-.2.4-.3.6-.5s.4-.4.5-.6c.2-.4.3-.9.4-1.4v-.7s-.1-.1-.3-.2z"></path></svg></span>
        <span class="material-symbols-outlined">close</span>
    </div>
    <div class="chatbot">
        <header class="chatbot-header">
            <div style="display:flex">
                <div style="height:35px;width:35px;background:white;border-radius:100%;padding:3px;margin-left:5px"><img src="${botLogo}" style="height:30px;width:30px;border-radius:100%"/></div>
                <div style="color:white;padding:1px 0;font-size:16px;margin-left:10px">
                    <div style="font-size:8px">Chat with</div>
                    ${chatbotName}
                </div>
                <span class="close-btn material-symbols-outlined">close</span>
            </div>
        </header>
        <ul class="chatbox" style="margin-left:0;margin-bottom:0">
            <li class="chat incoming">
                <p>
                    <span style="font-weight:bold;color:gray">${chatbotName}</span> <br/>   
                    <span>${welcomeMessage}</span>
                </p>
            </li>
        </ul>
        <div style="display:block;text-align:center" class="chat-input" id="textBoxData">
            <a href="${whatsurl}" target="blank"><button style="width:95%;background:${COLOR_CODE};color:white;border:none;padding:10px;border-radius:50px;cursor:pointer">
                Lets Chat
            </button></a>
        </div>
    </div>
    `
    let dat = document.getElementById('webChatBot')
    dat.innerHTML = htmlData

    chatbotToggler = document.querySelector(".chatbot-toggler");
    closeBtn = document.querySelector(".close-btn");
    chatbox = document.querySelector(".chatbox");

    closeBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot"));
    chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot"));
}