I am building a chatbot application in Streamlit that integrates with a calendar component. The calendar should be displayed when certain keywords are detected in the chatbot's response. However, I am running into issues where the calendar either doesn't display correctly or disappears immediately. I have referenced this from github
Issue: The calendar displays for a second and then disappears. Additionally, the importing the events, calendar_options, custom_css and key d doesn't seem to work as expected.
Question: How can I properly integrate and display the calendar component within my Streamlit chatbot application, ensuring it persists and functions correctly?
Any insights or suggestions would be greatly appreciated!
import streamlit as st
from streamlit_calendar import calendar
from lib.pages.calendar_component import events, calendar_options, custom_css, key
def toggle_button():
st.session_state['button_clicked'] = not st.session_state['button_clicked']
def show_intelliBot_page():
from dotenv import load_dotenv
load_dotenv()
from lib.interpreter.LLMInterpreter import LLMInterpreter
from langchain_community.callbacks.streamlit import StreamlitCallbackHandler
from streamlit_calendar import calendar
if "messages" not in st.session_state:
st.session_state.messages = []
for message in st.session_state.messages:
with st.chat_message(message["role"]):
st.markdown(message["content"])
if prompt := st.chat_input("How may I help you?"):
# st.session_state.messages.append({"role": "user", "content": prompt})
# Display user message in chat message container
with st.chat_message("user"):
st.markdown(prompt)
# Add user message to chat history
st.session_state.messages.append({"role": "user", "content": prompt})
with (st.chat_message("assistant")):
with st.spinner("Processing..."):
st_callback = StreamlitCallbackHandler(st.container())
interpreter = LLMInterpreter(prompt)
response = interpreter.interpret(prompt, [st_callback])
st.markdown(response)
# Add assistant message to chat history
st.session_state.messages.append({"role": "assistant", "content": response})
if "edd" in response.lower() or "sourcing" in response.lower():
events = [
{
"title": "Event 1",
"color": "#FF6C6C",
"start": "2023-07-03",
"end": "2023-07-05",
"resourceId": "a",
},
{
"title": "Event 2",
"color": "#FFBD45",
"start": "2023-07-01",
"end": "2023-07-10",
"resourceId": "b",
},
{
"title": "Event 3",
"color": "#FF4B4B",
"start": "2023-07-20",
"end": "2023-07-20",
"resourceId": "c",
},
{
"title": "Event 4",
"color": "#FF6C6C",
"start": "2023-07-23",
"end": "2023-07-25",
"resourceId": "d",
},
{
"title": "Event 5",
"color": "#FFBD45",
"start": "2023-07-29",
"end": "2023-07-30",
"resourceId": "e",
},
{
"title": "Event 6",
"color": "#FF4B4B",
"start": "2023-07-28",
"end": "2023-07-20",
"resourceId": "f",
},
{
"title": "Event 7",
"color": "#FF4B4B",
"start": "2023-07-01T08:30:00",
"end": "2023-07-01T10:30:00",
"resourceId": "a",
},
{
"title": "Event 8",
"color": "#3D9DF3",
"start": "2023-07-01T07:30:00",
"end": "2023-07-01T10:30:00",
"resourceId": "b",
},
{
"title": "Event 9",
"color": "#3DD56D",
"start": "2023-07-02T10:40:00",
"end": "2023-07-02T12:30:00",
"resourceId": "c",
},
{
"title": "Event 10",
"color": "#FF4B4B",
"start": "2023-07-15T08:30:00",
"end": "2023-07-15T10:30:00",
"resourceId": "d",
},
{
"title": "Event 11",
"color": "#3DD56D",
"start": "2023-07-15T07:30:00",
"end": "2023-07-15T10:30:00",
"resourceId": "e",
},
{
"title": "Event 12",
"color": "#3D9DF3",
"start": "2023-07-21T10:40:00",
"end": "2023-07-21T12:30:00",
"resourceId": "f",
},
{
"title": "Event 13",
"color": "#FF4B4B",
"start": "2023-07-17T08:30:00",
"end": "2023-07-17T10:30:00",
"resourceId": "a",
},
{
"title": "Event 14",
"color": "#3D9DF3",
"start": "2023-07-17T09:30:00",
"end": "2023-07-17T11:30:00",
"resourceId": "b",
},
{
"title": "Event 15",
"color": "#3DD56D",
"start": "2023-07-17T10:30:00",
"end": "2023-07-17T12:30:00",
"resourceId": "c",
},
{
"title": "Event 16",
"color": "#FF6C6C",
"start": "2023-07-17T13:30:00",
"end": "2023-07-17T14:30:00",
"resourceId": "d",
},
{
"title": "Event 17",
"color": "#FFBD45",
"start": "2023-07-17T15:30:00",
"end": "2023-07-17T16:30:00",
"resourceId": "e",
},
{
"title": "Event 18",
"color": "#3D9DF3",
"duration": "00:40",
"resourceId": "a",
"rrule": {
"freq": 'weekly',
"byweekday": ['tu', 'we'],
"interval": 1,
"dtstart": '2023-07-04T10:00:00', # will also accept '20120201T103000'
"until": '2023-07-20' # will also accept '20120201'
}
},
]
calendar_options = {
"editable": "true",
"navLinks": "true",
"selectable": "true",
"initialView": "multiMonthYear"
}
custom_css = """
.fc-event-past {
opacity: 0.8;
}
.fc-event-time {
font-style: italic;
}
.fc-event-title {
font-weight: 700;
}
.fc-toolbar-title {
font-size: 2rem;
}
"""
key = "multimonth"
calendar_state = calendar(events=st.session_state.get("events", events), options=calendar_options,
custom_css=custom_css, key=key)
st.session_state.messages.append({"role": "assistant", "content": calendar_state})
