How to add a Title/ text Or Few sample Prompts close to the chat_input()?

[Supernova]

My Question Or Request to the community is very simple to catch.

How could we add a Title or some texts Or few sample example prompts close to the chat_input() field which we call as prompt box. It is always stays at the bottom of the page. Sometimes in mobile device, users find it difficult to trace if is obscured by red streamlit logo at bottom right corner and browser elements.

If we can place some texts at the top of the input field, users might be able to see those texts or title to figure they need to scroll down.

[tonykip]

Hi @Supernova,

Thanks for sharing your question with the community! Please update your debugging post to include a code snippet and a link to your app’s public GitHub repo – this will allow the community to help you find an answer as quickly as possible. In the meantime, this post will be tagged as needs-more-info.

Also, have you considered using streamlit-pills component to hold the pre-staged examples?

You can use it like so and when the use picks a given example, the selected example question is passed to the LLM call:

selected = pills(
            "Choose a question to get started or write your own below.",
            [
                "What is Snowflake?",
                "What company did Snowflake announce they would acquire in October 2023?",
                "What company did Snowflake acquire in March 2022?",
                "When did Snowflake IPO?",
            ],
            clearable=True,
            index=None,
        )

[Supernova]

Thank u v m @tonykip for ur prompt response. Good to see this ‘pills’ proposal. I will try to take this pill now and update here. I liked this. Hopefully it will give a remedy.

Possibly I wd get stuck in changing/ updating the default value of the st.chat_input field after selecting a readymade pill. Anyone have any idea to do this effectively?

I will share screenshots, code snippet here.

[tonykip]

Yes, pills can work a charm.

By this:

Possibly I wd get stuck in changing/ updating the default value of the `st.chat_input` field after selecting a readymade pill. Anyone have any idea to do this effectively?

do you mean picking a pill then editing it before submitting to the LLM?

[Supernova]

@tonykip

selected = pills(
            "Choose a question to get started or write your own below.",
            [
                "What is Snowflake?",
                "What company did Snowflake announce they would acquire in October 2023?",
                "What company did Snowflake acquire in March 2022?",
                "When did Snowflake IPO?",
            ],
            clearable=True,
            index=None,
        )

Yes ur pills are cool. Rendering as a remedy to display, select and directly pass to LLM. But , as u got it right, if I want to pass to the chat input field to edit it before sending onwards to LLM, what should I do?

When I pass the selected option to the placeholder value of this input, it is displaying the selected one inside the chat_input field. But not acting as an editable string. ( cause it is a new placeholder value now ).

[Supernova]

As a quick work around for now. I’m thinking to display these pills as an unelectable examples. I want to title these as an example to lead ur thoughts. U can copy and paste/edit inside the chat_input before submit. What is best way to do then. if Pills has any attributes like disabled = true or something like this which will just render these pills or options but won’t interact with click(select).
Or I can use a simple array to display the values. But those won’t have nice rounded borders like pills.

note the difference inside the input field before and after selection of a pill.
These dynamic values r acting as a placeholder again. So not possible to submit to edit.

[tonykip]

Thanks for the detailed feedback on your implementation. I will update here if i come across a better solution that fits what you were looking for initially.

[Supernova]

Thank u @tonykip
Please dont forget. Appreciate that u r thinking about it. I was busy in again w a hackathon which ended day before night. Then since yesterday w Nvidia sessions. I am losing out time to sit with this work. Have to sit from 22nd onwards or before if possible.

The present objective will be -
To display some examples using ur Pills as non clickable buttons.
Or display as an array of names with comma or gaps.

Better user experience will be when selected/ clicked. the respective example will be passed as a prompt to API call.

If any better option is possible then pls be open to discuss.

Thanks.

[RomeoSe]

Hi! Is it possible to change the .css style of the pills without manipulating the “venv/Lib/site-packages/streamlit_pills/frontend/build/styles.css”?

Since venv is in .gitignore, so if I do some changes to styles.css, then those changes will not be pushed

[Supernova]

Hi
YES possible!
U need to change the value of primaryColor which gives the color to the interface widgets on streamnlit pages.

If u use dark theme, the change the front color accordingly, to get contrast with the widget background.

Sharing a sample color example:
[theme]
base=“dark”

screens and components of widgets

primaryColor = “#588000”

Font color for the page.

textColor = “#FFF”

Hope this will help to move,

I’was out of all these for a while. Just back.

[Supernova]

Hi @tonykip
Hope u r good. Thanks for ur pills. It heals!
Helped me to enhance the UX a bit in the app.

I could find some solutions to my requests. I forgot to update it back here as got busy with serious of other stiffs. I will go through our communications here and try to update back here after refereeing my code files.

Thank you!