How to place text box to the bottom?

Custom Components
3

Hi there Caroline! New here, hope i can jump in for a similar question.
Im wondering if it is possible to create a ‘chat’ environment like whatsapp/telegram where the text input is at the bottom of the page and the messages appear above the textbox.

currently my solution looks like this

image
image736×802 34.8 KB

But the ideal solution is something like this

image
image736×476 97.4 KB

This is my current streamlit code:

st.set_page_config(
    page_title="Assistant",
    page_icon=":robot:"
)

st.header("Welcome to Assistant")

if 'generated' not in st.session_state:
    st.session_state['generated'] = []

if 'past' not in st.session_state:
    st.session_state['past'] = []

def get_text():
    input_text = st.text_input("Input Message: ","", key="input")
    return input_text 

user_input = get_text()

if user_input:
    output = chatquery({
        "inputs": {
            "past_user_inputs": st.session_state.past,
            "generated_responses": st.session_state.generated,
            "text": user_input,
        },"parameters": {"repetition_penalty": 1.33},
    })

    st.session_state.past.append(user_input)
    st.session_state.generated.append(output)

if st.session_state['generated']:

    # for i in range(len(st.session_state['generated'])-1, -1, -1):
    #     message(st.session_state["generated"][i], key=str(i))
    #     message(st.session_state['past'][i], is_user=True, key=str(i) + '_user')
    for i in range(len(st.session_state['generated'])-1, -1, -1):
        message(st.session_state['past'][::-1][i], is_user=True, key=str(i) + '_user')
        message(st.session_state["generated"][::-1][i], key=str(i))

To sum up:

  1. How can the textbox be moved to the bottom of the page?
  2. How can a large collection of messages in chat format be displayed? (when the message list exceeds items on the screen they should not make the page scroll)

Thank you :slight_smile:

1 Like