Streamlit_card card object sesssion state is not getting updated properly

🧩 Custom Components
, ,
1

I am trying to use the streamlit_card’s card object to show the sample prompts from various domains in the UI. When the user clicks on the card, the prompt in the text part goes to the LLM and the output is displayed using the streamlit chat_message() component. To this the general chat conversation with LLM code is added.

Here is a part of the code.

from streamlit_card import card
import streamlit as st 
from langchain_community.llms import HuggingFaceEndpoint

# Initialize chat history
if "messages" not in st.session_state:
    st.session_state.messages = []

if "card_states" not in st.session_state:
    st.session_state.card_states = {
        "prompt1": False,
        "prompt2": False,
        "prompt3": False}

def reset_conversation():
  st.session_state.messages = []
  st.session_state.card_states = {
        "prompt1": False,
        "prompt2": False,
        "prompt3": False,
    }

col4.button('Clear Chat', on_click= reset_conversation)


def handle_click(card_name):
    st.session_state.card_states[card_name] = not st.session_state.card_states[card_name]

col5, col6, col7  = st.columns(3)

with col5:
    prompt1 = card(
        title="Coding",
        text="Write a SQL code explaining the recursion.",
        image=image_url, 
        on_click=lambda: handle_click("prompt1"),
   
        )

with col6:
      ... 
with col7:
      ... 
llm = HuggingFaceEndpoint(
    repo_id=llm_model, 
    temperature = 0.1,
    max_new_tokens = 1024,
    top_k = 50)

# Display chat messages from history on app rerun
for message in st.session_state.messages:
    with st.chat_message(message["role"]):
        st.markdown(message["content"])


if st.session_state.card_states['prompt1']:
    p1 = "Write a SQL code explaining the recursion."
    st.chat_message("user").markdown(p1)
    # Add user message to chat history
    # st.session_state.messages.append({"role": "user", "content": p1})

    response1 = llm(p1)
    with st.chat_message("assistant"):
        st.markdown(response1)
    # Add assistant response to chat history
    # st.session_state.messages.append({"role": "assistant", "content": response1})
    
# This code is to show the user own chat conversation with the LLM
if prompt := st.chat_input(f"Ask  {llm.model.split('/')[-1]}"):
    st.chat_message("user").markdown(prompt)
    st.session_state.messages.append({"role": "user", "content": prompt})

    response = llm(prompt)
    with st.chat_message("assistant"):
        st.markdown(response)
    st.session_state.messages.append({"role": "assistant", "content": response})

The issue if I click on the Clear Chat button, the messages stored in the session state of messages are only getting deleted but not the one in card_states. The thing I observed is the streamlit_card’s card object when clicked on it, it is turning to True and staying the same in all the app reruns. It is not getting set to False in the app -rerun. Because of this, I think even when I click on the Clear Chat button only the messages is getting set to empty list but the card_states values are not getting set to False. Strangely, they even got set to True.

What I want is if the user clicks on the card, the corresponding prompt should be processed and response by LLM should be displayed. If user clicks on the other card, the previous card response should be deleted automatically. How can I get the card object value to become False when a new card is clicked?

Can I help / explain how to handle the streamlit_card card object and its behaviour with session state? Where am I doing wrong here? Thank you.

1 Like