Mime is not matching with file icon on UI

[tugbayatilla]

trafficstars

Describe the bug When you set mime in File element for docx file extension, which is 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', in the UI, you cannot see the correct icon which is docx.

To Reproduce Steps to reproduce the behavior:

1. Go to 'app.py'
2. Create a hello.docx file in root directory
3. Create a simple File element - reference: https://docs.chainlit.io/api-reference/elements/file
4. Set mime as ''application/vnd.openxmlformats-officedocument.wordprocessingml.document''
5. Run chainlit

Expected behavior When you define 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' in mime of File element, I would like to see docx icon.

Screenshots

If applicable, add screenshots to help explain your problem. Here is the problematic situation.

File element on UI, using Attachment. Attachment is using defaultStyles from react-file-icon Here is the source code: line 61: https://github.com/Chainlit/chainlit/blob/main/frontend/src/components/atoms/Attachment.tsx

Line 14 to 16, it is using mime information and pops the last part to find out icon from defaultStyles. If you send mime='application/docx', you can see the correct icon. Here is the source code: Line 378: https://www.npmjs.com/package/react-file-icon?activeTab=code

To solve the issue, mimetypes can be used. here is the documentation: https://docs.python.org/3/library/mimetypes.html

Thanks for in advance, Tugbay

Desktop (please complete the following information):

• OS: System Version: macOS 14.5 (23F79)
• Browser: chrome
• Version: Version 125.0.6422.142 (Official Build) (arm64)