Chainlit mounting mechanism fails when FastAPI has root_path.

[duarteocarmo]

Describe the bug
When I use the root_path option on my FastAPI application, the chainlit app stops working (it's fetching static assets from the wrong path)

To Reproduce

# chat.py
import chainlit as cl

@cl.on_message
async def main(message: cl.Message):
    # Your custom logic goes here...

    # Send a response back to the user
    await cl.Message(
        content=f"Received: {message.content}",
    ).send()

from fastapi import FastAPI
from chainlit.utils import mount_chainlit

app = FastAPI(
    root_path="/api",
)

@app.get("/app")
def read_main():
    return {"message": "Hello World from main app"}


mount_chainlit(app=app, target="chat.py", path="/chainlit")

run: uvicorn app:app --reload

Go to http://127.0.0.1:8000/chainlit/ and notice a white screen.

Expected behavior
There's something funky with asset fetching. I tried debugging - but I am not sure what's happening. I do know it's related to assets and staticfiles.

Screenshots

Desktop (please complete the following information):

ProductName:            macOS
ProductVersion:         14.6.1
BuildVersion:           23G93

Additional context

➤ pip freeze | grep 'chainlit'
chainlit==1.2.0

[duarteocarmo]

Could be related to #1397 (but not sure)

[dosubot]

Hello @duarteocarmo! I'm here to help with any bugs, questions, or contributions you have regarding Chainlit. Let's tackle this together!

It seems like the issue you're experiencing with the Chainlit app not loading correctly when using the root_path option in FastAPI might be related to URL path duplication. This is similar to a known issue discussed in GitHub issue #1397, where the frontend encounters problems with the subpath being duplicated.

To address this, you can use the mount_chainlit function from the chainlit.utils module to mount the Chainlit app onto your FastAPI application at a specified path. Here's an example of how you can do this:

from fastapi import FastAPI
from chainlit.utils import mount_chainlit

app = FastAPI(root_path="/api")

@app.get("/app")
def read_main():
    return {"message": "Hello World from main app"}

# Specify the target module and the path where Chainlit should be mounted
target_module = "chat.py"
mount_path = "/chainlit"

# Mount the Chainlit app
mount_chainlit(app=app, target=target_module, path=mount_path)

Make sure to replace "chat.py" with the actual path to your target module. Additionally, ensure that the CHAINLIT_ROOT_PATH environment variable is set correctly to match the root_path you are using. This setup should help in resolving the issue by correctly mounting the Chainlit app at the specified path, thus preventing any URL path duplication ^[1].

For further reference, you might also want to check out GitHub issue #1330, which was resolved by addressing WebSocket connection problems when submounting Chainlit. This might provide additional insights into resolving your issue.

To continue talking to Dosu, mention @dosu.

[duarteocarmo]

I tested export CHAINLIT_ROOT_PATH=/api before running uvicorn app:app --reload but same issue persists.

[alexagr]

@duarteocarmo you just need to hack mount_chainlit() (or create your own version of it) and add FastAPI's root path to CHAINLIT_ROOT_PATH environment variable, e.g.:

os.environ["CHAINLIT_ROOT_PATH"] = "/my-root" + path

[willydouhard]

I think this is fixed with the latest release