Chat Interface UI

So I’m trying to make a chat application.
The issue is, the chat input box is appearing at the top, just below my header, as I added one component just below it, i.e., an add attachment button, so I want that the chat input along with the component to appear at the bottom in a scrollable format.
When I added that add attachment button, the input box went up.

import streamlit as st
import random
import time

st.title("Simple chat")

# Initialize chat history
if "messages" not in st.session_state:
    st.session_state.messages = []

# Create placeholders for chat messages
message_placeholders = {}

# Display chat messages from history on app rerun
for message in st.session_state.messages:
    role = message["role"]
    content = message["content"]
    message_placeholders[role] = st.empty()
    with st.chat_message(role):
        st.markdown(content)

# Accept user input and attachment
user_input = st.text_input("What is up?")
attachment = st.file_uploader("Attach a file (optional)", type=["jpg", "png", "pdf"])

if user_input or attachment:
    # Add user message to chat history
    if user_input:
        st.session_state.messages.append({"role": "user", "content": user_input})
        # Display user message in chat message container
        with st.chat_message("user"):
            st.markdown(user_input)

    if attachment:
        # You can process the attachment here or save it as needed
        # For example, you can save it to a temporary folder and store the file path in the chat history
        attachment_path = f"attachments/{attachment.name}"
        with open(attachment_path, "wb") as f:
            f.write(attachment.read())

        # Add attachment message to chat history
        st.session_state.messages.append({"role": "user", "content": f"Attachment: {attachment.name}"})
        # Display attachment message in chat message container
        with st.chat_message("user"):
            st.markdown(f"Attachment: {attachment.name}")

    # Display assistant response in chat message container
    with st.chat_message("assistant"):
        message_placeholder = st.empty()
        full_response = ""
        assistant_response = random.choice(
            [
                "Hello there! How can I assist you today?",
                "Hi, human! Is there anything I can help you with?",
                "Do you need help?",
            ]
        )
        # Simulate stream of response with milliseconds delay
        for chunk in assistant_response.split():
            full_response += chunk + " "
            time.sleep(0.05)
            # Add a blinking cursor to simulate typing
            message_placeholder.markdown(full_response + "β–Œ")
        message_placeholder.markdown(full_response)
    # Add assistant response to chat history
    st.session_state.messages.append({"role": "assistant", "content": full_response})

Go through this, I found this snippet in streamlit docs at conversational apps, added what I wanted, and the issue I’m talking about

I want the input chat and file uploader attachment to appear at the bottom, and the conversation at the top of it.

Hi @Aryan_Gupta,

Thank you for sharing your question with the community!

Your post is missing a code snippet and a link to your app’s GitHub repo. Please check out our guidelines on how to post an effective question here and update your post to help the community answer your question.

Added!
Rough structure of what I want

1 Like

Can anyone help me out with this?

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.