I have problem with st.button and and st.chat_input while using it both together like chatgpt chatbar and questions that showing above on search bar

[Tanveer_Bashir]

Hi
i am using my app locally. Can anyone please tell me that i want to built a conversational chatbot like chatgpt where chatgpt has one chat box and four question which is showing on above of chat box and in bottom side of entire page. i using this streamlit code :
with st.container():
st.chat_input(“Say something”)
st.button(“Please tell your query”)
st.button(“Would you like to retrive data”) So what i want these two buttons should show along with chat bar The chat bar showing in bottom and buttons are showing at above of page.but i need that the buttons a should show at below So please tell me how i do this. I am begginer in streamlit. So i am looking for expert that answer me about it.

[dataprofessor]

Hi @Tanveer_Bashir

You could probably achieve this via CSS customization.

Please see this related thread with example code snippet:

How to add st.button next to st.chat_input

Hi @w490846804 It does seem that the current implementation of st.chat_input does not support the insert of prompt text value while st.text_input does. There’s a discussion about this in the following GitHub issue and there’s actually a hacky solution mentioned, please see if that would work for you:

Also see the FAQ article on visual customization of a Streamlit app:

https://discuss.streamlit.io/t/faq-how-to-customize-the-style-or-appearance-of-your-streamlit-app/63878/2

Hope this helps!