How to enable scroll for streamlit_chat keeping input box at same position

Custom Components
1

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

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.

1 Like
2

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).

3

@piam

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

1 Like
4

I just posted a minimal example which demonstrates scrolling openai and Whatsapp style, amongst other chat features. ChatGPT Style Example SOTA