search

Chainlit / chainlit

Build Conversational AI in minutes ⚡️
https://docs.chainlit.io
Apache License 2.0
6.79k stars 883 forks source link

Mime type of custom stylesheet momentarily set to HTML #469

Closed jimmarshall87 closed 11 months ago

jimmarshall87 commented 11 months ago

A little tricky to diagnose but I suspect if you set a custom stylesheet in the chainlit configuration file, for a moment after authenticating the MIME type of the custom stylesheet is set to HTML. If you look in the inspector and view the custom stylesheet its contents appear as HTML for some reason. If you refresh the page, the mime type is then set to CSS correctly and you can view it correctly in the inspector.

In the console, you will also see this log message momentarily:

Did not parse stylesheet at 'https://<obsfucated>' because non CSS MIME types are not allowed in strict mode.

I have obfuscated our domain in the above but there is a regular url in there.

This has the effect that if you try to (for example) use CSS to resize the new custom logo in the top left hand corner, after authenticating will not resize, but if you click refresh it will.

Could it be a bug somewhere?

willydouhard commented 11 months ago

I double checked and did not find anything suspicious. What is the name of your css file? Is it only happening in production or also locally?

jimmarshall87 commented 11 months ago

Happens locally and in qa/staging/prod actually. I'll try to make you something reproducible.

jimmarshall87 commented 11 months ago

css-issue.zip

jimmarshall87 commented 11 months ago

https://github.com/Chainlit/chainlit/assets/3678081/bcb24e5d-1f1f-458e-94d4-0e7a93a330c9

jimmarshall87 commented 11 months ago

Reproducible test case and video illustrating attached @willydouhard. You'll need to set some environment variables and maybe you want to exchange Okta for something else on your side - my guess is with any authentication mechanism it will do the same.

You'll see from the files, this is a simple CSS hack to increase the size of the logo which can look a bit small given the default height is only 25px.

After login you will see that it is showing the logo at height 25px, however you will see me (off screen) click refresh and then magically the CSS is applied.

Weirdly it seems like after the authentication, the css has mime type html and then after refresh it is picked up as css.

All a bit hocus pocus...! Feels like a race condition maybe? That said, it seems to do it every time for me.

willydouhard commented 11 months ago

Can't reproduce. Are you experiencing this across all browsers or just one?

jimmarshall87 commented 11 months ago

oh that's super weird. For me I get the same on both Safari and Chrome (on Mac - and both my work Mac and home Mac for that matter).

willydouhard commented 11 months ago

I think I understand what is going on. You should set custom_css = "/public/stylesheet.css" and not custom_css = "public/stylesheet.css.

Without the /, it will try to fetch the css from "http://localhost/login/public..." which is wrong. And this happens only after auth because you start at "http://localhost/login" and not from the root.

jimmarshall87 commented 11 months ago

Blackbelt debugging skills Willy! Will confirm shortly if that fixes it.

jimmarshall87 commented 11 months ago

Confirmed fix @willydouhard. Would be good to therefore update the docs here: https://docs.chainlit.io/ui-customisation/custom-css so others don't get tripped up! I've made a PR in the docs repo. https://github.com/Chainlit/docs/pull/61

willydouhard commented 11 months ago

Merged!