Resolve #1256 - Fix Interaction Issues with Chat Profile Description Popover

[AidanShipperley]

Summary

This pull request resolves #1256, where users are unable to interact with chat profile descriptions, such as scrolling through long descriptions or clicking links within them. The modifications ensure that the description popover remains open and interactable when the mouse hovers over it, and closes appropriately when the mouse leaves the popover area or a selection is made.

Changes

All changes were done in chatProfiles.tsx.

The main change was modifying popoverOpen to manage the open/close state of the description popover instead of the previous implicit check using Boolean(anchorEl). The rest of the changes support properly opening and closing the description popover throughout all interactions with the chat profile SelectInput.

Impact

These changes allow developers to include longer descriptions and links within their chat profile descriptions, as users can now properly interact with them.

Let me know if any changes need to be made!

[dokterbob]

Hi @AidanShipperley, thanks for what prima facie looks to be a great contribution!

Would it perhaps be possible for you to help us testing by providing a minimal example for us to replicate the issues you were having, and how to reproduce the issue?

Better yet would be if you could extend the chat profile tests to include a test replicating your issue in main, only for it to be fixed in your PR. :)

If you have any troubles with it or questions, don't hesitate. We're here to help you help. :)

[AidanShipperley]

Hi @dokterbob, thank you for reply! I've included both a simple example and I've updated the chat profile tests as you requested.

To Replicate

The issue can be replicated with the following code:

import chainlit as cl

@cl.set_chat_profiles
async def chat_profile():
    return [
        cl.ChatProfile(
            name="GPT-3.5",
            markdown_description="Click [Learn more](https://openai.com/chatgpt/) for more info on ChatGPT!",
            icon="https://picsum.photos/200",
        ),
        cl.ChatProfile(
            name="GPT-4",
            markdown_description="Click [Learn more](https://openai.com/chatgpt/) for more info on ChatGPT!",
            icon="https://picsum.photos/250",
        ),
    ]

@cl.on_chat_start
async def on_chat_start():
    chat_profile = cl.user_session.get("chat_profile")
    await cl.Message(
        content=f"starting chat using the {chat_profile} chat profile"
    ).send()

You will be unable to click the links in the chat profile descriptions on the current frontend.

Updated Tests

I updated the cypress/e2e/chat_profiles test as requested to include an additional test which replicates the issue and demonstrates that the issue is fixed with my changes. When running the updated chat profile tests on the current code in main, you get the following error:

AssertionError: Timed out retrying after 10000ms: expected '<a.MuiTypography-root.MuiTypography-inherit.MuiLink-root.MuiLink-underlineAlways.css-93z3fs>' to be 'visible'

This element `<a.MuiTypography-root.MuiTypography-inherit.MuiLink-root.MuiLink-underlineAlways.css-93z3fs>` is not visible because it has CSS property: `position: fixed` and it's being covered by another element:

`<div aria-hidden="true" class="MuiBackdrop-root MuiBackdrop-invisible MuiModal-backdrop css-esi9ax" style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"></div>`
      at Context.eval (webpack:///./cypress/e2e/chat_profiles/spec.cy.ts:62:0)

This error shows that when the mouse moves over to the link in the chat profile description, the description disappears, and therefore is no longer visible.

When running the same test on my changes, both tests in cypress/e2e/chat_profiles succeed:

Please let me know if these changes look good :)