How to correctly use a relative path for ChatProfile icons?

[foragerr]

I want to use images from the public directory for ChatProfile icons. I have:

        cl.ChatProfile(
            name="foo",
            markdown_description="Can't believe it's not bar",
            icon="public/foo.png",
        ),

This works fine for a simple setup. The relative icon path gets translated to https://base_url/public/foo.png.

However, after enabling data layer, and browsing threads, the generated path is https://base_url/threads/public/foo.png which does not work and I have broken images.

What's the right way to set relative path for ChatProfile icon? Is there a way to grab base_url in the @cl.set_chat_profiles block so I can construct the resolved URL myself?

[dosubot[bot]]

Hey there, @foragerr! 👋 I'm here to help you with any bugs, questions, or contributions you have. Let's squash this bug together!

To correctly use a relative path for ChatProfile icons and avoid broken images when browsing threads, you should place your icon files in the /public directory. You can then use the apiClient.buildEndpoint method to dynamically construct the URL for the icons, ensuring the path is correct.

Here's how you can do it:

@cl.set_chat_profiles
async def chat_profile(current_user: cl.User):
    if current_user.metadata["role"] != "ADMIN":
        return None

    return [
        cl.ChatProfile(
            name="foo",
            icon=apiClient.buildEndpoint("/public/foo.png"),  # Use the buildEndpoint method
            markdown_description="Can't believe it's not bar",
        ),
    ]

By using apiClient.buildEndpoint, you ensure that the URLs are correctly constructed based on the base URL, avoiding broken images when browsing threads ^[1].

To continue talking to Dosu, mention @dosu.

[foragerr]

@dosu what's the correct import for apiClient ?

[dosubot[bot]]

You can import apiClient from the appropriate module where it is defined. Typically, it might look something like this:

from your_module import apiClient

Replace your_module with the actual module name where apiClient is defined. If apiClient is part of a specific library or framework you are using, refer to its documentation for the correct import path.

To continue talking to Dosu, mention @dosu.

[foragerr]

Found this: https://github.com/Chainlit/chainlit/blob/1c5098c0cb25c40a0c18721bb1389a0d0319032e/frontend/src/components/organisms/chat/welcomeScreen/starter.tsx#L59-L60

Apparently relative icon path needs to start with /public, I'm missing the / This works like I need it to:

        cl.ChatProfile(
            name="foo",
            markdown_description="Can't believe it's not bar",
            icon="/public/foo.png",
        ),