# How to enable scroll for streamlit\_chat keeping input box at same position

**URL:** <https://discuss.streamlit.io/t/how-to-enable-scroll-for-streamlit-chat-keeping-input-box-at-same-position/40587>\
**Category:** Custom Components\
**Tags:** session-state\
**Created:** [April 3, 2023, 5:07am UTC](https://discuss.streamlit.io/t/how-to-enable-scroll-for-streamlit-chat-keeping-input-box-at-same-position/40587 "2023-04-03T05:07:57Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![piam](https://avatars.discourse-cdn.com/v4/letter/p/67e7ee/32.png) [@piam](https://discuss.streamlit.io/u/piam)\
**Post date:** [April 3, 2023, 5:07am UTC](https://discuss.streamlit.io/t/how-to-enable-scroll-for-streamlit-chat-keeping-input-box-at-same-position/40587/1 "2023-04-03T05:07:57Z")

</div>

I am building a `chatbot` by using `chatgpt3.5` and `streamlit` app.  
I am able to put `Input text (text_input)` at bottom of screen. But as text queries grows my `input text area` also goes down.

Frontend code for `streamlit_chat` [st-chat/stChat.tsx at main · AI-Yash/st-chat · GitHub](https://github.com/AI-Yash/st-chat/blob/main/streamlit_chat/frontend/src/stChat.tsx)

Here is the code:

```
import openai
import streamlit as st
from streamlit_chat import message

openai.api_key='API_KEY'

def generate_response(prompt):
    completion=openai.Completion.create(
        engine='text-davinci-003',
        prompt=prompt,
        max_tokens=1024,
        n=1,
        stop=None,
        temperature=0.6,
    )
    message=completion.choices[0].text
    return message

st.title("ChatGPT3.5 BOT")

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

def inputchange():

    inp={
        "inputs": {
            "past_user_inputs": st.session_state.past,
            "generated_responses": st.session_state.generated,
            "text": st.session_state.input,
        },
    }
    output=generate_response(inp['inputs']['text'])

    # append user_input and output to state
    st.session_state['past'].append(st.session_state.input)
    st.session_state['generated'].append(output)

# If responses have been generated by the model
if st.session_state['generated']:
    # Reverse iteration through the list
    for i in range(len(st.session_state['generated']) - 1, -1, -1):
        # message from streamlit_chat
        # message(st.session_state['past'][::-1][i], is_user=True, key=str(i) + '_user', )
        message(st.session_state['past'][::-1][i], is_user=True, key=str(i) + '_user', )
        message(st.session_state['generated'][::-1][i], key=str(i),avatar_style="adventurer",seed=123,)

user_input = st.text_input("Input Message: ", "", key="input", on_change=inputchange)

```

**How to add scroll for `messages` just like ChatGPT3.5 does the messages can be scrolled up instead of scrolling the whole page.**

**Secondly, If I type same message in `user_input` then it doesn’t take this into account.**

---

<div class="post-metadata">

**Author:** ![dclin](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/dclin/32/22279_2.png) [@dclin](https://discuss.streamlit.io/u/dclin)\
**Post date:** [April 3, 2023, 4:51pm UTC](https://discuss.streamlit.io/t/how-to-enable-scroll-for-streamlit-chat-keeping-input-box-at-same-position/40587/2 "2023-04-03T16:51:34Z")

</div>

Haven’t personally found a good way to keep a container size fixed. This is why in my application, I kept the user text message box on top, and render the chat messages below (starting from most recent).

Also, seems a bit excessive for you to keep user messages and AI responses in separate lists. You can simply have a list of dictionaries (each with “message” and “is\_user” fields).

---

<div class="post-metadata">

**Author:** ![rag](https://avatars.discourse-cdn.com/v4/letter/r/b19c9b/32.png) [@rag](https://discuss.streamlit.io/u/rag)\
**Post date:** [May 15, 2023, 6:53am UTC](https://discuss.streamlit.io/t/how-to-enable-scroll-for-streamlit-chat-keeping-input-box-at-same-position/40587/3 "2023-05-15T06:53:32Z")

</div>

@piam

Have you got a solution for this scrolling issue. Even for me, I need to scroll manually

---

<div class="post-metadata">

**Author:** ![bsalita](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/bsalita/32/6463_2.png) [@bsalita](https://discuss.streamlit.io/u/bsalita)\
**Post date:** [July 9, 2023, 11:58pm UTC](https://discuss.streamlit.io/t/how-to-enable-scroll-for-streamlit-chat-keeping-input-box-at-same-position/40587/4 "2023-07-09T23:58:08Z")

</div>

I just posted a minimal example which demonstrates scrolling openai and Whatsapp style, amongst other chat features. [ChatGPT Style Example SOTA](https://discuss.streamlit.io/t/chatgpt-style-example-sota/46863)

---

<div class="post-metadata">

**Author:** ![Samin](https://sea2.discourse-cdn.com/streamlit/user_avatar/discuss.streamlit.io/samin/32/73200_2.png) [@Samin](https://discuss.streamlit.io/u/Samin)\
**Post date:** [April 1, 2026, 5:52pm UTC](https://discuss.streamlit.io/t/how-to-enable-scroll-for-streamlit-chat-keeping-input-box-at-same-position/40587/5 "2026-04-01T17:52:01Z")

</div>

This worked for me

```auto
# Chat messages in styled container
chat_html = _build_chat_html(qid)
st.session_state.scroll_counter += 1
st.markdown(f"""
        <div class="tutor-chat-box">
{chat_html}
        </div>""", unsafe_allow_html=True)

# Auto-scroll chat to bottom (dummy variable forces Streamlit to re-execute JS)
st.components.v1.html(f"""
        <script>
            var dummy = {st.session_state.scroll_counter};
            var chatBoxes = window.parent.document.querySelectorAll('.tutor-chat-box');
            chatBoxes.forEach(function(box) {{ box.scrollTop = box.scrollHeight; }});
        </script>

```