Revision history [back]

To activate the scroll feature of streamlit_chat while keeping the input box in its original position, you can place the input box inside a fixed container and set the height of the chat messages container to a fixed value.

Here is an example code snippet:

import streamlit as st
from streamlit_chat import chat

st.title("Chat Example")

# Initialize chat
messages = []

# Define chat parameters
chat_params = {
    "scroll_to_bottom": True,
    "input_text_color": "black",
    "output_text_color": "black"
}

# Define fixed container for input box
input_container = st.beta_container()
with input_container:
    input_text = st.text_input("Type your message here:")
    if st.button("Send"):
        messages.append({"text": input_text, "is_user_message": True})
        input_text = ""

# Define chat messages container with fixed height
chat_container = st.beta_container()
with chat_container:
    chat(messages, **chat_params, height=500)

In this code, the input_container container holds the input box and has a fixed position on the page. The chat_container container holds the chat messages and has a fixed height of 500 pixels. This allows the scrolling feature to work independently of the input box position.