Issues with HTML functionality in the message function

[damin604]

Thank you for adding the HTML functionality to the message function. While using it, I came across few use-cases where the current front-end output needs improvement.

Using Collapsed sections with markdown,

Example code

import streamlit as st
from streamlit_chat import message

def on_input_change():
    user_input = st.session_state.user_input
    st.session_state.past.append(user_input)
    st.session_state.generated.append("The messages from Bot\nWith new line")

def on_btn_click():
    del st.session_state.past[:]
    del st.session_state.generated[:]

markdown = "Below is an example of collapsible markdown taken from Wikipedia."
paragraph = "Euclidean geometry is a mathematical system attributed to ancient Greek mathematician Euclid, which he described in his textbook on geometry; Elements. Euclid's approach consists in assuming a small set of intuitively appealing axioms (postulates) and deducing many other propositions (theorems) from these. Although many of Euclid's results had been stated earlier,[1] Euclid was the first to organize these propositions into a logical system in which each result is proved from axioms and previously proved theorems."
markdown += """<details><summary>Toggle me!</summary>{paragraph}</details>""".format(paragraph=paragraph)

st.session_state.setdefault('past', ['Show example of collapsible markdown'])
st.session_state.setdefault('generated', [{'type': 'normal', 'data': f'{markdown}'}])

st.title("Example")
with st.container():    
    for i in range(len(st.session_state['generated'])):                
        message(st.session_state['past'][i], is_user=True, key=f"{i}_user")
        message(
            st.session_state['generated'][i]['data'], 
            key=f"{i}", 
            allow_html=True,
            is_table=True if st.session_state['generated'][i]['type']=='table' else False
        )
    
    st.button("Clear message", on_click=on_btn_click)

with st.container():
    st.text_input("User Input:", on_change=on_input_change, key="user_input")

Can you please add functionality to support scrolling with message function?
https://discuss.streamlit.io/t/scrolling-text-containers/26485/3

It will be also useful to have a fixed height container with scrolling for the whole chat functionality. Below is a Gradio example,

[yashppawar]

okay, I'll look into it in the next couple of days