How to add st.button next to st.chat_input

[w490846804]

I used chat_input to create a demo that can call llm, but I found that st.chat_input can’t seem to be divided into columns. So how should I add a button st.button to the red box No. 1 or red box No. 2 in the picture above?
Because I want to implement the function of using buttons to call ASR, which is voice input, and I have implemented it, but it cannot be placed in the red box.

[dataprofessor]

Hi @w490846804

Have you tried customizing the CSS styles so that the button could be relocated to a different position. For example, by adjusting the top-margin CSS paramter for the specific button that you’re looking to make the adjustment. Please see this video for details on how: https://www.youtube.com/watch?v=gr_KyGfO_eU

Hope this helps!

[w490846804]

Thank you for your response! I successfully used CSS to place my voice input button at the bottom of the page. However, now I have a new issue. I want the text recognized by the speech input to be filled into st.chat_input , just like with st.text_input . But in reality, when I use st.chat_input("This is Asr Words") , I only get a message that it cannot be modified, while st.text_input(label='text', value='This is Asr Words') can be directly modified.

Here is my code:

import streamlit as st
from audiorecorder import audiorecorder
from streamlit_extras.stylable_container import stylable_container

st.title("Audio Recorder")
with stylable_container(
        key="bottom_content",
        css_styles="""
            {
                position: fixed;
                bottom: 120px;
            }
            """,
    ):
        audio = audiorecorder("🎙️ start", "🎙️ stop")
        print('audio: ', audio)
        if len(audio) > 0:
            audio.export("audio.mp3", format="mp3")

st.chat_input("These are words.")

with stylable_container(
        key="text_input1",
        css_styles="""
            {
                position: fixed;
                bottom: 200px;
            }
            """,
    ):
    st.text_input(label = 'text' ,value = "These are words.")

[dataprofessor]

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:

Custom text value for `st.chat_input`

[w490846804]

Oh, that’s awesome! It works, and now I’ve successfully implemented a voice input functionality!

Thank you !!!

[dataprofessor]

Hi @w490846804

Glad to hear that it worked, share us your completed app, would love to see how it turned out.