Active menu button is not highlighted

[fsmosca]

Checklist

• I have searched the existing issues for similar issues.
• I added a very descriptive title to this issue.
• I have provided sufficient information below to help reproduce this issue.

Summary

The first time the chat menu button is selected, it is not highlighted as active.

Reproducible code example

import streamlit as st
from streamlit import session_state as ss
from streamlit_navigation_bar import st_navbar
import random
import string


st.set_page_config(layout='centered')


if 'msg' not in ss:
     ss.msg = []


def generate_random_response(msg):
    letters = string.ascii_lowercase
    return f'my response to {msg} is ' + ''.join(random.choice(letters) for _ in range(6))


def main():
    page = st_navbar(["Home", "Documentation", "Chat", "About"])
    st.write(page)

    if page == 'Chat':
        # Show message history.
        for message in ss.msg:
            with st.chat_message(message["role"]):
                st.markdown(message["content"])

        # user prompt
        if prompt := st.chat_input("enter your prompt"):
            ss.msg.append({"role": "user", "content": prompt})
            with st.chat_message("user"):
                st.markdown(prompt)

            # Get response.
            with st.chat_message("assistant"):
                response = generate_random_response(prompt)
                st.markdown(response)
                ss.msg.append({"role": "assistant", "content": response})


if __name__ == '__main__':
    main()

Steps to reproduce

1. run the app
2. select chat
3. the chat menu button is not highlighted

Expected behavior

If chat is selected is should highlight the chat menu button as active.

Current behavior

No response

Is this a regression?

• Yes, this used to work in a previous version.

Debug info

• Streamlit version: 1.33
• Streamlit Navigation Bar version: 3.1.2
• Python version: 3.11
• Operating System: windows 10
• Browser: chrome

Additional information

No response

[gabrieltempass]

Hey @fsmosca, thanks for opening the bug report! I will take a look at this as soon as possible.

[gabrieltempass]

Just an update, I was able to reproduce the bug with the following code:

import streamlit as st
from streamlit_navigation_bar import st_navbar

page = st_navbar(["Home", "Chat"])
st.write(page)

if page == "Chat":
    prompt = st.chat_input("Say something")

But I'm still working on the solution.

[MatteoMaske]

Hi, I have the exact same issue, and I can confirm that is the chat_input element to be the source of the problem. Has someone found any kind of solution yet?

In addition to that, I have to report that this could be strictly related with "Extra rerun on page switch", in fact if you try to debug the simple code you reported the page change is called twice. The first time the new page is temporarily set to active correctly, but as soon as you resume the breakpoint the issue reported here happens.
It happens also when using the suggested MPA setting without using switch_page.

Thank you

[OriginalGoku]

I am having the same problem and I also think the problem is any type of chat_input on the page. I really liked this navigation bar code but its almost impossible to use it in a meaningful way because it is not reliable for any page which includes chat_input.
Thanks for the great code any ways.