Allow inline usage of st.chat_input

[LukasMasuch]

Describe your changes

This PR enables st.chat_input to be used inline in addition to the usage pinned to the bottom of the app. This is activated if the chat_input is nested with any other layout container (e.g. st.container, st.columns, st.expander, st.sidebar):

with st.container():
    st.chat_input("Whats up?")

Demo: https://inline-chat-input-demo.streamlit.app/

GitHub Issue Link (if applicable)

• Closes Allow st.chat_input to be inside a container (i.e. have it above other elements) #7296

Testing Plan

• Updated unit tests
• Migrate cypress e2e tests to playwright

---

Contribution License Agreement

By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

[vdonato]

Proto changes LGTM

[karthickk17]

Is it possible to share the source code of the demo file? It will be really useful for reference. I am trying to add a chat_input() within tabs and the chat_input() keeps moving up.

[LukasMasuch]

You need to put the new messages into a container that is above the chat_input, e.g.:

import streamlit as st

with st.sidebar:
    messages = st.container(height=300)
    if prompt := st.chat_input("Say something"):
        messages.chat_message("user").write(prompt)
        messages.chat_message("assistant").write(f"Echo: {prompt}")