Dialogflow ES - Chat Window Content Customization to fix scroll issue

[fogpuddle]

Hello,

I'm working on a Dialogflow ES agent where the bot has long responses in my use cases to where the beginning of most responses get hidden under the titlebar in the header of the chot window.  The user would have to scroll up to see the start of the message which is not an ideal UX. 

A thought to fix this issue is show one paragraph at a time in the response by using a delay and maybe showing three dots like someone is typing so a user would have time to read the response and has some kind of signal that there's more to the response vs dialogflow showing all the response at once.  How would I go about setting that up either through configurations and/or scripts? The HTML is something like:

<div id="messageList">
    <div class="message">Paragraph 1</div>
    <div class="message">Paragraph 2</div>
   <div class="message">Paragraph 3</div>
   <div class="message">Paragraph 4</div>
</div>

Thanks! 

[Joevanie]

You can use JavaScript to show one paragraph at a time in the response by using a delay and maybe showing three dots like someone is typing so a user would have time to read the response and has some kind of signal that there’s more to the response. Here’s an example of how you can do this:

<div id="messageList">
   <div class="message">Paragraph 1</div>
   <div class="message">Paragraph 2</div>
   <div class="message">Paragraph 3</div>
   <div class="message">Paragraph 4</div>
</div>
const messageList = document.getElementById('messageList');
const messages = messageList.querySelectorAll('.message');
let i = 0;
const delay = 2000; // 2 seconds
const dots = '...';
function showNextMessage() {
if (i < messages.length) {
const message = messages[i];
message.style.display = 'block';
i++;
setTimeout(showNextMessage, delay);
} else {
// All messages have been shown
}
}
showNextMessage();

[fogpuddle]

Thank you for this possible solution.  How I would I be able to execute this script (or similar) on every chatbot response that gets added dynamically through the the lifetime of the chatbot conversation session?  Can you point me to documentation on how this can be done?

Thanks