Multi-modal support for file size, mime types and number of files (#787)

- adds `accept` (mime type), `max_files` and `max_size_mb` configurations (under `features.multi_modal`)
- file uploads are rejected if they aren't respecting the configuration

backend/chainlit/config.py

@@ -3,7 +3,7 @@
 import sys
 from importlib import util
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Callable, Dict, List, Optional
+from typing import TYPE_CHECKING, Any, Callable, Dict, List, Optional, Union
 
 import tomli
 from chainlit.logger import logger
@@ -50,7 +50,7 @@
 # Enable third parties caching (e.g LangChain cache)
 cache = false
 
-# Authorized origins 
+# Authorized origins
 allow_origins = ["*"]
 
 # Follow symlink for asset mount (see /~https://github.com/Chainlit/chainlit/issues/317)
@@ -67,7 +67,11 @@
 latex = false
 
 # Authorize users to upload files with messages
-multi_modal = true
+[features.multi_modal]
+    enabled = true
+    accept = ["*/*"]
+    max_files = 20
+    max_size_mb = 500
 
 # Allows user to use speech to text
 [features.speech_to_text]
@@ -185,10 +189,18 @@ class SpeechToTextFeature:
     language: Optional[str] = None
 
 
+@dataclass
+class MultiModalFeature:
+    enabled: Optional[bool] = None
+    accept: Optional[Union[List[str], Dict[str, List[str]]]] = None
+    max_files: Optional[int] = None
+    max_size_mb: Optional[int] = None
+
+
 @dataclass()
 class FeaturesSettings(DataClassJsonMixin):
     prompt_playground: bool = True
-    multi_modal: bool = True
+    multi_modal: Optional[MultiModalFeature] = None
     latex: bool = False
     unsafe_allow_html: bool = False
     speech_to_text: Optional[SpeechToTextFeature] = None

cypress/e2e/ask_multiple_files/.chainlit/config.toml

@@ -19,7 +19,11 @@ cache = false
 prompt_playground = true
 
 # Authorize users to upload files with messages
-multi_modal = true
+[features.multi_modal]
+    enabled = true
+    accept = ["*/*"]
+    max_files = 20
+    max_size_mb = 500
 
 [UI]
 # Name of the app and chatbot.

cypress/e2e/chat_profiles/.chainlit/config.toml

@@ -25,7 +25,11 @@ unsafe_allow_html = false
 latex = false
 
 # Authorize users to upload files with messages
-multi_modal = true
+[features.multi_modal]
+    enabled = true
+    accept = ["*/*"]
+    max_files = 20
+    max_size_mb = 500
 
 # Allows user to use speech to text
 [features.speech_to_text]

cypress/e2e/copilot/.chainlit/config.toml

@@ -12,7 +12,7 @@ session_timeout = 3600
 # Enable third parties caching (e.g LangChain cache)
 cache = false
 
-# Authorized origins 
+# Authorized origins
 allow_origins = ["*"]
 
 # Follow symlink for asset mount (see /~https://github.com/Chainlit/chainlit/issues/317)
@@ -29,7 +29,11 @@ unsafe_allow_html = false
 latex = false
 
 # Authorize users to upload files with messages
-multi_modal = true
+[features.multi_modal]
+    enabled = true
+    accept = ["*/*"]
+    max_files = 20
+    max_size_mb = 500
 
 # Allows user to use speech to text
 [features.speech_to_text]
@@ -63,6 +67,10 @@ hide_cot = false
 # The CSS file can be served from the public directory or via an external link.
 # custom_css = "/public/test.css"
 
+# Specify a Javascript file that can be used to customize the user interface.
+# The Javascript file can be served from the public directory.
+# custom_js = "/public/test.js"
+
 # Specify a custom font url.
 # custom_font = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
 
@@ -90,4 +98,4 @@ hide_cot = false
 
 
 [meta]
-generated_by = "1.0.101"
+generated_by = "1.0.400"

cypress/e2e/custom_build/.chainlit/config.toml

@@ -12,7 +12,7 @@ session_timeout = 3600
 # Enable third parties caching (e.g LangChain cache)
 cache = false
 
-# Authorized origins 
+# Authorized origins
 allow_origins = ["*"]
 
 # Follow symlink for asset mount (see /~https://github.com/Chainlit/chainlit/issues/317)
@@ -29,7 +29,11 @@ unsafe_allow_html = false
 latex = false
 
 # Authorize users to upload files with messages
-multi_modal = true
+[features.multi_modal]
+    enabled = true
+    accept = ["*/*"]
+    max_files = 20
+    max_size_mb = 500
 
 # Allows user to use speech to text
 [features.speech_to_text]
@@ -72,6 +76,7 @@ hide_cot = false
 
 # Specify a custom build directory for the frontend. 
 # This can be used to customize the frontend code.
+# Be careful: If this is a relative path, it should not start with a slash.
 custom_build = "./public/build"
 
 # Override default MUI light theme. (Check theme.ts)
@@ -98,4 +103,4 @@ custom_build = "./public/build"
 
 
 [meta]
-generated_by = "1.0.301"
+generated_by = "1.0.301"

cypress/e2e/elements/.chainlit/config.toml

@@ -2,6 +2,7 @@
 # Whether to enable telemetry (default: true). No personal data is collected.
 enable_telemetry = true
 
+
 # List of environment variables to be provided by each user to use the app.
 user_env = []
 
@@ -11,17 +12,42 @@ session_timeout = 3600
 # Enable third parties caching (e.g LangChain cache)
 cache = false
 
+# Authorized origins
+allow_origins = ["*"]
+
 # Follow symlink for asset mount (see /~https://github.com/Chainlit/chainlit/issues/317)
 # follow_symlink = false
 
 [features]
 # Show the prompt playground
 prompt_playground = true
 
+# Process and display HTML in messages. This can be a security risk (see https://stackoverflow.com/questions/19603097/why-is-it-dangerous-to-render-user-generated-html-or-javascript)
+unsafe_allow_html = false
+
+# Process and display mathematical expressions. This can clash with "$" characters in messages.
+latex = false
+
+# Authorize users to upload files with messages
+[features.multi_modal]
+    enabled = true
+    accept = ["*/*"]
+    max_files = 20
+    max_size_mb = 500
+
+# Allows user to use speech to text
+[features.speech_to_text]
+    enabled = false
+    # See all languages here /~https://github.com/JamesBrill/react-speech-recognition/blob/HEAD/docs/API.md#language-string
+    # language = "en-US"
+
 [UI]
 # Name of the app and chatbot.
 name = "Chatbot"
 
+# Show the readme while the thread is empty.
+show_readme_as_default = true
+
 # Description of the app and chatbot. This is used for HTML tags.
 # description = ""
 
@@ -37,7 +63,20 @@ hide_cot = false
 # Link to your github repo. This will add a github button in the UI's header.
 # github = ""
 
+# Specify a CSS file that can be used to customize the user interface.
+# The CSS file can be served from the public directory or via an external link.
+# custom_css = "/public/test.css"
+
+# Specify a Javascript file that can be used to customize the user interface.
+# The Javascript file can be served from the public directory.
+# custom_js = "/public/test.js"
+
+# Specify a custom font url.
+# custom_font = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
+
 # Override default MUI light theme. (Check theme.ts)
+[UI.theme]
+    #font_family = "Inter, sans-serif"
 [UI.theme.light]
     #background = "#FAFAFA"
     #paper = "#FFFFFF"
@@ -59,4 +98,4 @@ hide_cot = false
 
 
 [meta]
-generated_by = "0.6.402"
+generated_by = "1.0.400"

cypress/e2e/llama_index_cb/.chainlit/config.toml

@@ -2,6 +2,7 @@
 # Whether to enable telemetry (default: true). No personal data is collected.
 enable_telemetry = true
 
+
 # List of environment variables to be provided by each user to use the app.
 user_env = []
 
@@ -11,17 +12,42 @@ session_timeout = 3600
 # Enable third parties caching (e.g LangChain cache)
 cache = false
 
+# Authorized origins
+allow_origins = ["*"]
+
 # Follow symlink for asset mount (see /~https://github.com/Chainlit/chainlit/issues/317)
 # follow_symlink = false
 
 [features]
 # Show the prompt playground
 prompt_playground = true
 
+# Process and display HTML in messages. This can be a security risk (see https://stackoverflow.com/questions/19603097/why-is-it-dangerous-to-render-user-generated-html-or-javascript)
+unsafe_allow_html = false
+
+# Process and display mathematical expressions. This can clash with "$" characters in messages.
+latex = false
+
+# Authorize users to upload files with messages
+[features.multi_modal]
+    enabled = true
+    accept = ["*/*"]
+    max_files = 20
+    max_size_mb = 500
+
+# Allows user to use speech to text
+[features.speech_to_text]
+    enabled = false
+    # See all languages here /~https://github.com/JamesBrill/react-speech-recognition/blob/HEAD/docs/API.md#language-string
+    # language = "en-US"
+
 [UI]
 # Name of the app and chatbot.
 name = "Chatbot"
 
+# Show the readme while the thread is empty.
+show_readme_as_default = true
+
 # Description of the app and chatbot. This is used for HTML tags.
 # description = ""
 
@@ -37,7 +63,20 @@ hide_cot = false
 # Link to your github repo. This will add a github button in the UI's header.
 # github = ""
 
+# Specify a CSS file that can be used to customize the user interface.
+# The CSS file can be served from the public directory or via an external link.
+# custom_css = "/public/test.css"
+
+# Specify a Javascript file that can be used to customize the user interface.
+# The Javascript file can be served from the public directory.
+# custom_js = "/public/test.js"
+
+# Specify a custom font url.
+# custom_font = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
+
 # Override default MUI light theme. (Check theme.ts)
+[UI.theme]
+    #font_family = "Inter, sans-serif"
 [UI.theme.light]
     #background = "#FAFAFA"
     #paper = "#FFFFFF"
@@ -59,4 +98,4 @@ hide_cot = false
 
 
 [meta]
-generated_by = "0.6.402"
+generated_by = "1.0.400"

cypress/e2e/plotly/.chainlit/config.toml

@@ -19,7 +19,11 @@ cache = false
 prompt_playground = true
 
 # Authorize users to upload files with messages
-multi_modal = true
+[features.multi_modal]
+    enabled = true
+    accept = ["*/*"]
+    max_files = 20
+    max_size_mb = 500
 
 # Allows user to use speech to text
 [features.speech_to_text]

cypress/e2e/tasklist/.chainlit/config.toml

@@ -2,6 +2,7 @@
 # Whether to enable telemetry (default: true). No personal data is collected.
 enable_telemetry = true
 
+
 # List of environment variables to be provided by each user to use the app.
 user_env = []
 
@@ -11,17 +12,42 @@ session_timeout = 3600
 # Enable third parties caching (e.g LangChain cache)
 cache = false
 
+# Authorized origins
+allow_origins = ["*"]
+
 # Follow symlink for asset mount (see /~https://github.com/Chainlit/chainlit/issues/317)
 # follow_symlink = false
 
 [features]
 # Show the prompt playground
 prompt_playground = true
 
+# Process and display HTML in messages. This can be a security risk (see https://stackoverflow.com/questions/19603097/why-is-it-dangerous-to-render-user-generated-html-or-javascript)
+unsafe_allow_html = false
+
+# Process and display mathematical expressions. This can clash with "$" characters in messages.
+latex = false
+
+# Authorize users to upload files with messages
+[features.multi_modal]
+    enabled = true
+    accept = ["*/*"]
+    max_files = 20
+    max_size_mb = 500
+
+# Allows user to use speech to text
+[features.speech_to_text]
+    enabled = false
+    # See all languages here /~https://github.com/JamesBrill/react-speech-recognition/blob/HEAD/docs/API.md#language-string
+    # language = "en-US"
+
 [UI]
 # Name of the app and chatbot.
 name = "Chatbot"
 
+# Show the readme while the thread is empty.
+show_readme_as_default = true
+
 # Description of the app and chatbot. This is used for HTML tags.
 # description = ""
 
@@ -37,7 +63,20 @@ hide_cot = false
 # Link to your github repo. This will add a github button in the UI's header.
 # github = ""
 
+# Specify a CSS file that can be used to customize the user interface.
+# The CSS file can be served from the public directory or via an external link.
+# custom_css = "/public/test.css"
+
+# Specify a Javascript file that can be used to customize the user interface.
+# The Javascript file can be served from the public directory.
+# custom_js = "/public/test.js"
+
+# Specify a custom font url.
+# custom_font = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
+
 # Override default MUI light theme. (Check theme.ts)
+[UI.theme]
+    #font_family = "Inter, sans-serif"
 [UI.theme.light]
     #background = "#FAFAFA"
     #paper = "#FFFFFF"
@@ -59,4 +98,4 @@ hide_cot = false
 
 
 [meta]
-generated_by = "0.6.402"
+generated_by = "1.0.400"