How to add FAQ's in a streamlit app that users can click and can be added to text area?

[Himanshu_Gupta]

I have built a simple app where users post some queries and it generates some answers. Now i want to add a feature where i can recommend top 20 frequently asked questions and users can simply select one of them, which get’s copied to the text area(below). Any suggestions on this, do we have a streamlit element for this?

[ferdy]

If you have an FAQ’s in a list, you can use them in a selectbox. Users can select one, show it in text area and display the answer in text area, either from same text area the question is shown or from a new text area.

[Himanshu_Gupta]

Can it happen in the same box, instead of 2 box one for selectbox and another textarea search?

something like this format. You can write custom question and at the sametime in the selectbox it shows a list of predefined questions.

[ferdy]

First draft.

The FAQ and FAA is just a lookup. It is separate from the query writing.

FAQ_FAA = {
    '': '',
    'What is A?': 'A is the first letter of the alphabet.',
    'What is B?': 'B is a letter after A.'
}

with st.container(border=True):
    st.selectbox('FAQ', options=list(FAQ_FAA.keys()), key='faq')
    st.text_area('FAA', value=FAQ_FAA[ss.faq])

The user query can be answered by pressing the button.

with st.container(border=True):
    st.selectbox('FAQ', options=list(FAQ_FAA.keys()), key='faq')
    st.text_area('FAA', value=FAQ_FAA[ss.faq])

    st.divider()

    st.text_area('Query', key='query')
    st.button('Ai Response', on_click=response)
    st.text_area('Ai response', value=ss.res)

The callback response just checks if query is there.

def response():
    ss.res = ''
    if ss.query:
        ss.res = f'ai response from your query {ss.query}'

Full code

import streamlit as st
from streamlit import session_state as ss


FAQ_FAA = {
    '': '',
    'What is A?': 'A is the first letter of the alphabet.',
    'What is B?': 'B is a letter after A.'
}


if 'res' not in ss:
    ss.res = None


def response():
    ss.res = ''
    if ss.query:
        ss.res = f'ai response from your query {ss.query}'


st.header('Design')

with st.container(border=True):
    st.selectbox('FAQ', options=list(FAQ_FAA.keys()), key='faq')
    st.text_area('FAA', value=FAQ_FAA[ss.faq])

    st.divider()

    st.text_area('Query', key='query')
    st.button('Ai Response', on_click=response)
    st.text_area('Ai response', value=ss.res)