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.