Programmatically update text in chat_input

Using Streamlit
1

I have an app that is (presently) designed to be a ChatGPT clone using st.chat_input and st.chat_message. It has a dropdown of predefined prompts that the user could choose from, and once they select one from the dropdown, the prompt would go into the chat_input box automatically as if the user typed out that prompt manually (just like example prompts in ChatGPT). In order to do so, I inserted a piece of hacky JS code into the app (see below):

init_prompt = st.selectbox(
    'You might want to try these prompts...',
    ['<Click Me to Expand>',
     'How to socialize?',
     'How to focus on tasks?',
     'How to find peace in daily work?']
)

INIT_PROMPT_HTML = """
    <script>
        const doc = window.parent.document;
        const dropdown = doc.querySelector('[data-baseweb="select"]');
        const watcher = dropdown.firstChild.firstChild.firstChild;
        const origSetAttr = watcher.setAttribute;
        watcher.setAttribute = (key, value) => {
            const input = doc.querySelector('[type="textarea"]');  // This is the chat_input element
            input.click();
            input.innerText = value;
            origSetAttr.call(watcher, key, value);
        };
    </script>
"""
html(INIT_PROMPT_HTML)

I was able to update the chat_input element with the line input.innerText = value; everytime the user selects from the dropdown, causing its value to change. However, the change goes away almost instantly (e.g., the chat_input would hold the updated value for 1 second and then resume to its previous state). I doubt that streamlit somehow overwrote the change but couldn’t figure how it does that. Or maybe this is a XY problem?

Any help would be much appreciated!

2

Anyone?

3

Anyone x2? I still have no luck…

4

Hi @Night_Starry

It seems you’d like to use the selectbox to provide some starter prompts, however the st.chat_input() does not return these as entered strings and rather uses it as a placeholder text that serves as a visual display of text such as “Enter your text here”.

Rather, if you’re using your selectbox with st.text_input() this may accept the selectbox text as entered text.

Thus, perhaps you can use this instead:

import streamlit as st

init_prompt = st.selectbox(
    'You might want to try these prompts...',
    ['<Click Me to Expand>',
     'How to socialize?',
     'How to focus on tasks?',
     'How to find peace in daily work?']
)

st.text_input('Enter you text', init_prompt)

Hope this helps!

5

Hi, thank you for the help! However, with st.text_input, while it does put the starter prompt on, it automatically triggers a ChatGPT response when the user selects an item from the dropdown without them manually sending it out. Any ideas for addressing this issue?

Right now the code looks like this:

init_prompt = st.selectbox(
    'You might want to try these prompts...',
    ['<Click Me to Expand>',
     'How to socialize?',
     'How to focus on tasks?',
     'How to find peace in daily work?']
)

instr = 'Hi there! Enter what you want to let me know here.'
if prompt := st.text_input(
        instr,
        value=init_prompt,
        placeholder=instr,  # Instruct the user to enter sth
        label_visibility='collapsed'  # Hide the label
):
    # Get the ChatGPT response and put it on the screen (this is auto-triggered
    # whenever the user chooses something from the dropdown, which is unwanted)
1 Like
6

Hi,
You can use st.form() and add a Submit button. This would allow the LLM generated response to occur only after the initial prompt is selected and the Submit button is clicked.

You could also use the disabled parameter of st.text_input() so that the text input box is deactivated and after the initial prompt is selected, this would trigger the activation of the text_input.

1 Like
7

Thank you for the great ideas! I’ll work on it a bit later

8

Hi, I think I got it working, thanks a lot! One final question: Right now the form submit button is below rather than horizontally next to the input, which is a little strange for a Chat app. Is there any way to have st.text_input and st.form_submit_button in the same line?

1 Like
9

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