OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Streamlit calendar is not being displayed

  • Thread starter Thread starter KS Rao
  • Start date Start date
K

KS Rao

Guest
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!

Code:
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})
<p>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 <a href="https://github.com/im-perativa/streamlit-calendar" rel="nofollow noreferrer">github</a></p>
<p>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.</p>
<p>Question: How can I properly integrate and display the calendar component within my Streamlit chatbot application, ensuring it persists and functions correctly?</p>
<p>Any insights or suggestions would be greatly appreciated!</p>
<pre><code>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})
</code></pre>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top