How can I change the CSS of the ChatBOT?

[Vasile_Caraus]

I made a chatBOT with AI API COD. Works good. See this print screen:

Except that Chat BAR should be down, and the writing above. And history of chat will be also there, above, each time I write. So, if I write something, and press enter, the wrinting will be on top.

In this moment, I have only one single bar, on top, and I cannot see the previous answers

This is my Python code also with css in it. I try many combinations, but I cannot change the BOT style.

import streamlit as st

# CSS-ul tău personalizat
custom_css = """
<style>
    /* Aici vine stilul tău personalizat pentru bara de chat și containerul de mesaje */
    .chat-bar-container {
        position: fixed;
        bottom: 0;
        width: 100%;
        /* Adaugă alte stiluri aici, cum ar fi padding, background, etc. */
    }

    .messages-container {
        position: fixed;
        bottom: 50px; /* Înlocuiește cu înălțimea reală a barei de chat */
        top: 0;
        width: 100%;
        overflow-y: auto;
        /* Adaugă alte stiluri aici, cum ar fi padding, etc. */
    }

    /* Stiluri suplimentare, dacă e necesar */
</style>
"""

st.markdown(custom_css, unsafe_allow_html=True)

import os
from embedchain import App

# Set OpenAI API key as environment variable
os.environ["OPENAI_API_KEY"] = "sk-Ref49......"

# Create the bot instance
elon_bot = App()

# Add resources to the bot
elon_bot.add("https://neculaifantanaru.com/en/the-law-of-ordering-spontaneity.html")
elon_bot.add("https://neculaifantanaru.com/en/93-percent-of-the-total-of-a-temporary-space.html")
elon_bot.add("https://neculaifantanaru.com/leadership-art40/en/lead-your-people-in-a-new-direction-anchoring-them-to-your-art.html")

# Set viewport meta tag for responsiveness
st.markdown(
    """
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    """,
    unsafe_allow_html=True
)

# Create Streamlit app with title and responsive layout
st.title("Support Bot")

# Define a function to query the bot and display the response
def get_answer(query):
    query += " Explain in detail the above question based on context provided. Be like a teacher explaining to student"
    ans = elon_bot.query(query)
    return ans

# Get user query
query = st.text_input("Ask a question about Neculai Fantanaru's leadership:")

# If a query is entered, call the function and display the response
if query:
    st.markdown("**Response:**")
    st.write(get_answer(query))

# If the screen is small, display an expander for the chatbot
# if st.sidebar.button("Open Chatbot"):
with st.sidebar.expander("Chatbot"):
    try:
        query = st.text_input("Ask a question about Neculai Fantanaru's leadership")
        if query:
            st.markdown("**Response:**")
            st.write(get_answer(query))
    except Exception as excp:
        print("exception ", excp)

I want the ChatBOT look like this. The bar in which I write is below the writing, not above the writing

[Vasile_Caraus]

I created a new code in Python in which I included ccs. This version is close to the version I wanted, but it is not perfect. I would like the messages I write in the text bar to disappear instantly after I hit send. And I would like the messages received from the BOT to be separated by a bar. Eventually, the chat form should display my message, then the BOT message, then again my message, then the BOT message, and so on.

import streamlit as st
import os
from embedchain import App

def main():
    # Inițializează componentele UI și CSS-ul
    initialize_ui()

    # Setează cheia API ca variabilă de mediu
    os.environ["OPENAI_API_KEY"] = "sk-Rejfhc....."

    # Crează instanța botului
    elon_bot = App()

    # Adaugă resurse la bot
    add_resources_to_bot(elon_bot)

    # Preia interogarea utilizatorului și afișează răspunsul
    query_user_and_display_response(elon_bot)

def initialize_ui():
    # CSS-ul personalizat
    custom_css = """
    <style>
        html, body, .stApp {
            height: 100%;
        }
        .stTextInput {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 99;
        }
        .stTextInput .st-dg {
            background-color: #f1f1f1; /* culoarea fundalului input-ului */
        }
        .stTextInput input {
            padding: 10px; /* spațierea din interiorul input-ului */
            border: none;
            border-radius: 5px; /* colțurile rotunjite ale input-ului */
        }
        .stButton > button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 99;
        }
        .chat-messages {
            margin-bottom: 70px; /* spațiu la partea de jos pentru input */
        }
        .css-12oz5g7 {
            overflow-y: auto;
            height: calc(100% - 75px); /* ajustează înălțimea containerului de mesaje */
            padding: 0 20px 20px;
        }
        header {
            display: none;
        }
    </style>
    """
    st.markdown(custom_css, unsafe_allow_html=True)

    # Set viewport meta tag for responsiveness
    st.markdown(
        '<meta name="viewport" content="width=device-width, initial-scale=1.0">',
        unsafe_allow_html=True
    )

    # Titlul aplicației
    st.title("Support Bot")

def add_resources_to_bot(bot):
    bot.add("https://neculaifantanaru.com/en/the-law-of-ordering-spontaneity.html")
    bot.add("https://neculaifantanaru.com/en/93-percent-of-the-total-of-a-temporary-space.html")
    bot.add("https://neculaifantanaru.com/leadership-art40/en/lead-your-people-in-a-new-direction-anchoring-them-to-your-art.html")

def query_user_and_display_response(bot):
    # Verifică dacă starea 'submitted' este True și actualizează textul condițional
    if 'submitted' not in st.session_state:
        st.session_state.submitted = False  # Initializează starea ca False

    # Folosește un spațiu gol (placeholder) pentru a putea elimina textul introductiv mai târziu
    if not st.session_state.submitted:
        st.session_state.intro_text = st.empty()
        st.session_state.intro_text.markdown("Ask a question about Neculai Fantanaru's leadership:")

    # Definește o funcție pentru a interoga botul și a afișa răspunsul
    def get_answer(query):
        query += " Explain in detail the above question based on context provided. Be like a teacher explaining to student"
        ans = bot.query(query)
        return ans

    query = st.text_input("", key="input_text", on_change=lambda: setattr(st.session_state, 'submitted', True))

    # Dacă există o interogare, apelează funcția și afișează răspunsul
    if query:
        if not st.session_state.submitted:
            st.session_state.submitted = True
            st.session_state.intro_text.empty()  # Elimină textul introductiv
        
        response = get_answer(query)
        st.markdown(response, unsafe_allow_html=True)

if __name__ == "__main__":
    main()