Scroll Top the inner chat while the typewriter message is printed (when the inner chat height is higher than the chat container)

Question

We have a conversational flow (like a chatbot) where we have a chat container and an inner chat where the chat responses will be printed. The first message will be printed with a typewriter effect. The problem is that the message is too long and when the height of the response/message is higher than the height of the container, the container is covering the chat message.

For the first message printed I tried the code below, but the scrollTop is only applied when the message printing reaches the end. What I want is that the inner chat scrolls top while the characters of the message are incremented if the height of the message is higher than the height of the container.

// Function to print the chatbot response with a typewriter effect
    const printTypewriter = async function (message, delay) {
      const response = document.createElement('div');
      response.classList.add('chat-response');
      insertNewChatItem(response);


      let index = 0;

      return new Promise((resolve) => {
        let timer = setInterval(async function() {
          const char = message[index];

          if (char === '<') {
            index = message.indexOf('>', index);  // searches for the corresponding > character (i.e., the end of the tag). The new index position is then updated to the end of the tag, so the tag will be skipped when the message is printed.
          }

          response.innerHTML = message.slice(0, index);

          if (container.offsetHeight < response.scrollHeight) {
            inner.scrollTop=response.scrollHeight;
          }

          if (++index === message.length) {
            clearInterval(timer);
            resolve();
          }

        }, delay);
      });
    };