Willy/ui2 (#1615)

* chore: clean auth hooks * wip * wip header+sidebar * wip sidebar * wip login * wip composer * wip chat settings * wip tasklist * wip readme + starters * wip copy button * wip footer * wip: messages * wip sideview * wip actions * wip thread resume * wip env * wip element view * chore: delete old mui files * wip copilot * fix scroll * fix: enforce cookie auth * fix: copilot css * replace formik/yup with hookform/zod * improve copilot scroll * fix: lint * fix: tests * fix: format/lint * fix: import * fix: ruff * fix: ruff * fix: ruff * fix: mypy * fix: mypy * feat: custom theme/font * fix: ruff * fix: ruff * fix: mypy * feat: copilot shadow root * feat: custom element * fix: ruff * fix: mypy * chore: bump python multipart * chore: regenerate poetry.lock * feat: expose shadcn components to CustomElement * feat: fix chat if not thread resumable * fix: add error boundary to dynamic icon * fix: enhance thread page * fix: prevent enter when composing message * feat: replace jsx parser with react runner * fix: icon component * fix: thread page * Update README.md * chore: update changelog * fix: step content check * fix: check ROOT_PATH everytime html template is rendered * feat: add autofocus on login input * Hugues/data layer (#1621) * feat: add chainlit data layer * feat: add gcs and azure * fix: poetry lock * fix: poetry lock * fix: ignore type * fix: ruff * fix: renaming * fix: gcs * Willy/UI (#1593) * chore: clean auth hooks * fix: don't call /user if no auth is configured * chore: prepare release (#1595) * fix: asyncpg dep + warnings import + feedback type removal * fix: remove asyncpg dependencies * fix: user * fix: issues * fix: search * fix: linter * fix: add gcs * feat: expose shadcn components to CustomElement * feat: fix chat if not thread resumable * fix: data layer * fix: use db_url instead of litera data layer * fix: least start * fix: azure blob * fix: storage * fix: linter * fix: url * fix: data layer metadata * fix: poetry lock * fix: code style --------- Co-authored-by: Willy Douhard <[email protected]> * fix: comment in feedback --------- Co-authored-by: Hugues de Saxcé <[email protected]> Co-authored-by: Hugues de Saxcé <[email protected]>
Chainlit · Jan 6, 2025 · 5ecfbce · 5ecfbce
1 parent dba5b4d
commit 5ecfbce
Show file tree

Hide file tree

Showing 413 changed files with 17,609 additions and 17,467 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,6 +1,7 @@
 {
   "root": true,
   "parser": "@typescript-eslint/parser",
+  "ignorePatterns": ["**/*.jsx"],
   "plugins": ["@typescript-eslint"],
   "extends": [
     "eslint:recommended",

diff --git a/.prettierrc b/.prettierrc
@@ -6,7 +6,6 @@
   "plugins": ["@trivago/prettier-plugin-sort-imports"],
   "importOrder": [
     "pages/(.*)$",
-    "@mui/(.*)$",
     "@chainlit/(.*)$",
     "components/(.*)$",
     "assets/(.*)$",

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,38 @@ All notable changes to Chainlit will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## [2.0.0] - 2025-01-06
+
+The Chainlit UI (including the copilot) has been completely re-written with Shadcn/Tailwind. This brings several advantages:
+1. The codebase is simpler and more contribution friendly.
+2. It enabled the new custom element feature.
+3. The theme customisation is more powerful.
+
+### Added
+- Custom Elements (code your own elements)
+- `Cmd+k` thread search
+- Thread rename
+- Official PostGres open source data layer
+- New `@data_layer` decorator for configuring custom data layers declaratively
+
+### Changed
+- Authentication is now based on cookies. Cross Origins are disallowed unless added in `allow_origins` in the `config.toml` file
+- No longer need to click on `resume` to resume a thread
+- **[breaking]**: Theme customisation is now handled in `public/theme.json` instead of `config.toml`.
+- **[breaking]**: Changed fields on the `Action` class:
+  - The `value` field has replaced with `payload` which accepts a Python dict
+  - The `description` field has been renamed `tooltip`
+  - The field `icon` has been added
+  - The `collapsed` field has been removed.
+- **[breaking]**: Completely revamped audio implementation (#1401, #1410):
+  - Replaced `AudioChunk` with `InputAudioChunk` and `OutputAudioChunk`
+  - Changed default audio sampling rate from 44100 to 24000
+  - Removed several audio configuration options (`min_decibels`, `initial_silence_timeout`, `silence_timeout`, `chunk_duration`, `max_duration`)
+
+### Fixed
+
+- Autoscaling of Chainlit app behind a load balancer should now work. Don't forget to enable sticky sessions
+
 ## [2.1.dev0] - 2024-11-14
 
 Pre-release: developer preview.

diff --git a/backend/README.md b/backend/README.md
@@ -10,22 +10,10 @@
 
 Chainlit is an open-source async Python framework which allows developers to build scalable Conversational AI or agentic applications.
 
-- ✅ ChatGPT-like application
-- ✅ Embedded Chatbot & Software Copilot
-- ✅ Slack & Discord
-- ✅ Custom frontend (build your own agentic experience)
-- ✅ API Endpoint
-
 Full documentation is available [here](https://docs.chainlit.io). You can ask Chainlit related questions to [Chainlit Help](https://help.chainlit.io/), an app built using Chainlit!
 
-> [!NOTE]
-> Check out [Literal AI](https://literalai.com), our product to monitor and evaluate LLM applications! It works with any Python or TypeScript applications and [seamlessly](https://docs.chainlit.io/data-persistence/overview) with Chainlit by adding a `LITERAL_API_KEY` in your project.
->
-> Chainlit is developed and maintained by the Literal AI team, which is currently focused on expanding the capabilities of Literal AI. While we continue to support and maintain Chainlit, we are also committed to enabling the community to contribute, particularly in areas like integrations and data layers.
+https://github.com/user-attachments/assets/b3738aba-55c0-42fa-ac00-6efd1ee0d148
 
-<p align="center">
-    <img src="https://github.com/Chainlit/chainlit/assets/13104895/0c2cc7a9-766c-41d3-aae2-117a2d0eb8ed" alt="Chainlit user interface" width="80%"></img>
-</p>
 
 ## Installation
 
@@ -93,24 +81,6 @@ chainlit run demo.py -w
 
 <img src="/images/quick-start.png" alt="Quick Start"></img>
 
-## 🎉 Key Features and Integrations
-
-Full documentation is available [here](https://docs.chainlit.io). Key features:
-
-- [💬 Multi Modal chats](https://docs.chainlit.io/advanced-features/multi-modal)
-- [💭 Chain of Thought visualization](https://docs.chainlit.io/concepts/step)
-- [💾 Data persistence + human feedback](https://docs.chainlit.io/data-persistence/overview)
-- [🐛 Debug Mode](https://docs.chainlit.io/data-persistence/enterprise#debug-mode)
-- [👤 Authentication](https://docs.chainlit.io/authentication/overview)
-
-Chainlit is compatible with all Python programs and libraries. That being said, it comes with integrations for:
-
-- [LangChain](https://docs.chainlit.io/integrations/langchain)
-- [Llama Index](https://docs.chainlit.io/integrations/llama-index)
-- [Autogen](https://github.com/Chainlit/cookbook/tree/main/pyautogen)
-- [OpenAI Assistant](https://github.com/Chainlit/cookbook/tree/main/openai-assistant)
-- [Haystack](https://docs.chainlit.io/integrations/haystack)
-
 ## 📚 More Examples - Cookbook
 
 You can find various examples of Chainlit apps [here](https://github.com/Chainlit/cookbook) that leverage tools and services such as OpenAI, Anthropiс, LangChain, LlamaIndex, ChromaDB, Pinecone and more.

diff --git a/backend/chainlit/__init__.py b/backend/chainlit/__init__.py
@@ -25,7 +25,7 @@
 from chainlit.context import context
 from chainlit.element import (
     Audio,
-    Component,
+    CustomElement,
     Dataframe,
     File,
     Image,
@@ -117,83 +117,73 @@ def acall(self):
 )
 
 __all__ = [
-    "__version__",
+    "Action",
+    "AskActionMessage",
+    "AskFileMessage",
+    "AskUserMessage",
+    "AsyncLangchainCallbackHandler",
+    "Audio",
+    "ChatGeneration",
     "ChatProfile",
-    "Starter",
-    "user_session",
-    "chat_context",
+    "ChatSettings",
+    "CompletionGeneration",
     "CopilotFunction",
+    "CustomElement",
+    "Dataframe",
+    "ErrorMessage",
+    "File",
+    "GenerationMessage",
+    "HaystackAgentCallbackHandler",
+    "Image",
     "InputAudioChunk",
+    "LangchainCallbackHandler",
+    "LlamaIndexCallbackHandler",
+    "Message",
     "OutputAudioChunk",
-    "Action",
-    "User",
-    "PersistedUser",
-    "Audio",
     "Pdf",
+    "PersistedUser",
     "Plotly",
-    "Image",
-    "Text",
-    "Component",
-    "Dataframe",
     "Pyplot",
-    "File",
+    "Starter",
+    "Step",
     "Task",
     "TaskList",
     "TaskStatus",
+    "Text",
+    "User",
     "Video",
-    "ChatSettings",
-    "input_widget",
-    "Message",
-    "ErrorMessage",
-    "AskUserMessage",
-    "AskActionMessage",
-    "AskFileMessage",
-    "Step",
-    "step",
-    "ChatGeneration",
-    "CompletionGeneration",
-    "GenerationMessage",
-    "on_logout",
-    "on_window_message",
-    "send_window_message",
-    "on_chat_start",
-    "on_chat_end",
-    "on_chat_resume",
-    "on_stop",
+    "__version__",
     "action_callback",
     "author_rename",
-    "on_settings_update",
-    "password_auth_callback",
-    "header_auth_callback",
-    "sleep",
-    "run_sync",
-    "make_async",
     "cache",
+    "chat_context",
     "context",
-    "LangchainCallbackHandler",
-    "AsyncLangchainCallbackHandler",
-    "LlamaIndexCallbackHandler",
-    "HaystackAgentCallbackHandler",
-    "instrument_openai",
-    "instrument_mistralai",
-    "password_auth_callback",
+    "data_layer",
     "header_auth_callback",
+    "input_widget",
+    "instrument_mistralai",
+    "instrument_openai",
+    "make_async",
     "oauth_callback",
+    "on_audio_chunk",
+    "on_audio_end",
+    "on_audio_start",
+    "on_chat_end",
+    "on_chat_resume",
+    "on_chat_start",
     "on_logout",
     "on_message",
-    "on_chat_start",
-    "on_chat_resume",
+    "on_settings_update",
+    "on_stop",
+    "on_window_message",
+    "password_auth_callback",
+    "run_sync",
+    "send_window_message",
     "set_chat_profiles",
     "set_starters",
-    "on_chat_end",
-    "on_audio_start",
-    "on_audio_chunk",
-    "on_audio_end",
-    "author_rename",
-    "on_stop",
-    "action_callback",
-    "on_settings_update",
-    "data_layer",
+    "sleep",
+    "step",
+    "user_session",
 ]
 
 

diff --git a/backend/chainlit/action.py b/backend/chainlit/action.py
@@ -1,5 +1,5 @@
 import uuid
-from typing import Optional
+from typing import Dict, Optional
 
 from dataclasses_json import DataClassJsonMixin
 from pydantic import Field
@@ -13,18 +13,18 @@
 class Action(DataClassJsonMixin):
     # Name of the action, this should be used in the action_callback
     name: str
-    # The value associated with the action. This is useful to differentiate between multiple actions with the same name.
-    value: str
-    # The label of the action. This is what the user will see. If not provided the name will be used.
+    # The parameters to call this action with.
+    payload: Dict
+    # The label of the action. This is what the user will see.
     label: str = ""
-    # The description of the action. This is what the user will see when they hover the action.
-    description: str = ""
+    # The tooltip of the action button. This is what the user will see when they hover the action.
+    tooltip: str = ""
+    # The lucid icon name for this action.
+    icon: Optional[str] = None
     # This should not be set manually, only used internally.
     forId: Optional[str] = None
     # The ID of the action
     id: str = Field(default_factory=lambda: str(uuid.uuid4()))
-    # Show the action in a drawer menu
-    collapsed: bool = False
 
     def __post_init__(self) -> None:
         trace_event(f"init {self.__class__.__name__}")

diff --git a/backend/chainlit/auth/__init__.py b/backend/chainlit/auth/__init__.py
@@ -38,10 +38,10 @@ def get_configuration():
         "requireLogin": require_login(),
         "passwordAuth": config.code.password_auth_callback is not None,
         "headerAuth": config.code.header_auth_callback is not None,
-        "cookieAuth": config.project.cookie_auth,
         "oauthProviders": (
             get_configured_oauth_providers() if is_oauth_enabled() else []
         ),
+        "default_theme": config.ui.default_theme,
     }
 
 

diff --git a/backend/chainlit/auth/cookie.py b/backend/chainlit/auth/cookie.py
@@ -88,7 +88,6 @@ def set_auth_cookie(response: Response, token: str):
         secure=_cookie_secure,
         samesite=_cookie_samesite,
         max_age=_auth_cookie_lifetime,
-        path="/",  # Why is path set here and not below?
     )
 
 

diff --git a/backend/chainlit/callbacks.py b/backend/chainlit/callbacks.py
@@ -325,7 +325,7 @@ def action_callback(name: str) -> Callable:
     """
 
     def decorator(func: Callable[[Action], Any]):
-        config.code.action_callbacks[name] = wrap_user_function(func, with_task=True)
+        config.code.action_callbacks[name] = wrap_user_function(func, with_task=False)
         return func
 
     return decorator