CSS tweaking

[wzol]

Would it be possible to fit everything into the viewport? I tried to tweak the CSS but not perfect.

I have found that this would help to create a container for the chat, so it would behave like any chat area: https://css-tricks.com/books/greatest-css-tricks/pin-scrolling-to-bottom/

Also it would be nice to maximize the Assistant Behavior, so if it long you don't need to scroll up and down during chat.

So some draft ideas:
.chat_container {overflow-y: auto; max-height: 40vh;}
remove height: 441px; from Assistant Behavior textarea
the Message textarea should also work without the height: 126px;

also I have noticed that --tw-bg-opacity isn't defined so the assistant answers doesn't have a background color.

[awiggins12]

Let me preface this by saying that I haven't done CSS/front end dev in many many years. And I was never good at it. Also, I've never worked with Gradio so I haven't figured out how to incorporate JS into it (yet). That's next on my list.

I just "resolved" the issue with the styling not appearing. Gradio changed how their CSS was working, so I took the easy way out and I'm telling people to drop their version by running:

pip install --force-reinstall gradio==3.16.2

I tried making the changes you suggested, but I can't get it to pin the scrolling to the bottom. I wonder if that could be related to the difference in Gradio versions?

[wzol]

I've absolutely no experience in this area, but I tried this, I believe it should work, but the script doesn't seem to execute. Any idea why?

def format_message_data():
    chat_history = "<div id='chat_container'>"
    for message in messages[0:]:
        if message["role"] != "system":
            chat_history += "<div class='{}'>{}</div>".format(message["role"],markdown.markdown(message["content"], output_format='html5'))
    chat_history += "</div>"
    
    # add JavaScript code to scroll to the bottom of the chat window
    chat_history += """
        <script>
            var chatContainer = document.getElementById("chat_container");
            chatContainer.scrollTop = chatContainer.scrollHeight;
        </script>
    """
    
    return chat_history

[awiggins12]

I'm hoping I can dig into JS soon, but unfortunately I don't have an answer just yet.

Did switching Gradio versions resolve your other styling issues?

[wzol]

The colors seem to be fine now, but I'm still playing with the layout sizes.

I was thinking about what if you could use insertAdjacentElement(position, element) for the new elements in the chat area, would it help?

[awiggins12]

Are you saying to use that function to add chat elements to the end of the chat area?

[wzol]

Yes, as I see you are rebuilding and repopulating the chat area each time. What if you'd use insertAdjacentElement(position, element) to add the last messages (user and answer) to the chat block? in that case the var chatContainer = document.getElementById("chat_container"); chatContainer.scrollTop = chatContainer.scrollHeight; script might work to scroll to the bottom, also the UI would be much faster.