Chat NOT scrolling with the messagesr?

I created a GPT chat using the ‘Webview element in Tasker, through a chat.html file. My Tasker GPT projekt here.
The problem I have, is that the chat scroll is not scrolling with the messages. I have to manually scroll through messages that are now hidden at the bottom. What have I done wrong?. The link above gives access to the Tasker project and the Html file used.

</style>
    <script>
        if (!window["global"]) {
            window["global"] = () => {
                return `[
                    {
                        "role": "user",
                        "content": "hello there how are you"
                    },
                    {
                        "role": "assistant",
                        "content": "Hello! As an AI language model, I don't have emotions in the human sense, but I'm functioning well. How can I assist you today?"
                    }
                ]`;
            }
        }

        const sendChat = () => {
            const inputElement = document.querySelector("#chat_input");
            const chat = inputElement.value;
            console.log("Sending chat", chat);
            performTask("-----AI-----System >> Send Chat", 5, chat);
        }
        const clearChat = () => {
            const inputElement = document.querySelector("#chat_input");
            const conversationElement = document.querySelector("#conversation");
            inputElement.value = "";
            conversationElement.innerHTML = "";
            performTask("-----AI-----System >> Clear Chat", 5);
        }
        if (!window["setClip"]) {
            window["setClip"] = (text) => alert(`Setting clipboard to "${text}"`);
        }

        const getMessages = () => {
            var messagesText = global("%Messages");
            if (!messagesText) {
                messagesText = "[]";
            }
            const messagesObject = JSON.parse(messagesText);
            return messagesObject;
        }
        const setClipboardToMessageIndex = (index) => {
            const messages = getMessages();
            const messageToSetOnClipboard = messages[index];
            if(!messageToSetOnClipboard) return;

            setClip(messageToSetOnClipboard.content);
        }
        const updateMessages = () => {
            const messagesObject = getMessages();
            var html = "";
            var index = 0;
            messagesObject.forEach(message => {
                const isAssistant = message.role == "assistant";
                html += `
    <div class="container${isAssistant ? " darker" : ""}">
        <img src="${isAssistant ? "https://assets.website-files.com/5bd07377b823419565a29426/63ee56ec00064ef3dc4ff13d_ChatGPT_logo.png" : "https://cdn-icons-png.flaticon.com/512/6947/6947573.png"}" class="${isAssistant ? "" : "right"}" alt="Avatar" style="width:100%;">
        <p>${message.content}</p>
        ${isAssistant ? `<div class="copy_button" onclick="setClipboardToMessageIndex(${index})"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSJ8McyNKbbcml1Joy3U7bBV7I0-7KA-QtpNkQ0PooCmWjd7awaKDKyxluDlrdzpkONN7E&usqp=CAU"></div>` : ""}
    </div>`;
                index++;
            });
            const conversationElement = document.querySelector("#conversation");
            conversationElement.innerHTML = html;
        }
        setInterval(updateMessages, 1000);  
    </script>