Merge remote-tracking branch 'origin/main' into feat/mermaid

* origin/main:
  feature: add configuration option for default sidebar state (Chainlit#2065)
  Fix File Icons (Chainlit#2067)
  fix: flickering (Chainlit#2068)
  feat: add ids for most commonly customized ui elements (Chainlit#2069)
  chore: prepare release (Chainlit#2061)

Author: tcx4c70

CHANGELOG.md

@@ -4,6 +4,17 @@ 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.4.302] - 2025-03-26
+
+### Added
+
+- Add thinking token support to langchain callback handler
+
+### Fixed
+
+- Pasting issues in the chat input
+- Rename nl-NL.json to nl.json
+
 ## [2.4.301] - 2025-03-24
 
 ### Fixed

backend/chainlit/config.py

@@ -137,6 +137,8 @@
 
 # layout = "wide"
 
+# default_sidebar_state = "open"
+
 # Description of the assistant. This is used for HTML tags.
 # description = ""
 
@@ -272,6 +274,7 @@ class UISettings(DataClassJsonMixin):
     font_family: Optional[str] = None
     default_theme: Optional[Literal["light", "dark"]] = "dark"
     layout: Optional[Literal["default", "wide"]] = "default"
+    default_sidebar_state: Optional[Literal["open", "closed"]] = "open"
     github: Optional[str] = None
     # Optional custom CSS file that allows you to customize the UI
     custom_css: Optional[str] = None

backend/chainlit/version.py

@@ -5,4 +5,4 @@
 except metadata.PackageNotFoundError:
     # Case where package metadata is not available, default to a 'non-outdated' version.
     # Ref: config.py::load_settings()
-    __version__ = "2.4.301"
+    __version__ = "2.4.302"

backend/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "chainlit"
-version = "2.4.301"
+version = "2.4.302"
 keywords = [
     'LLM',
     'Agents',

frontend/src/App.tsx

@@ -1,3 +1,4 @@
+import { cn } from '@/lib/utils';
 import { useEffect } from 'react';
 import { RouterProvider } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
@@ -7,6 +8,7 @@ import { useAuth, useChatSession, useConfig } from '@chainlit/react-client';
 
 import ChatSettingsModal from './components/ChatSettings';
 import { ThemeProvider } from './components/ThemeProvider';
+import { Loader } from '@/components/Loader';
 import { Toaster } from '@/components/ui/sonner';
 
 import { userEnvState } from 'state/user';
@@ -80,6 +82,15 @@ function App() {
 
       <ChatSettingsModal />
       <RouterProvider router={router} />
+
+      <div
+        className={cn(
+          'bg-[hsl(var(--background))] flex items-center justify-center fixed size-full p-2 top-0',
+          isReady && 'hidden'
+        )}
+      >
+        <Loader className="!size-6" />
+      </div>
     </ThemeProvider>
   );
 }

frontend/src/components/LeftSidebar/Search.tsx

@@ -93,6 +93,7 @@ export default function SearchChats() {
         <Tooltip>
           <TooltipTrigger asChild>
             <Button
+              id="search-chats-button"
               onClick={() => setOpen(!open)}
               size="icon"
               variant="ghost"

frontend/src/components/LeftSidebar/ThreadHistory.tsx

@@ -129,7 +129,7 @@ export function ThreadHistory() {
       <SidebarGroup>
         <SidebarMenu>
           {threadHistory ? (
-            <div className="flex-grow">
+            <div id="thread-history" className="flex-grow">
               <ThreadList
                 threadHistory={threadHistory}
                 error={error}

frontend/src/components/chat/MessageComposer/Attachment.tsx

@@ -16,9 +16,12 @@ interface AttachmentProps {
 }
 
 const Attachment: React.FC<AttachmentProps> = ({ name, mime, children }) => {
-  const extension = (
-    mime ? mime.split('/').pop() : 'txt'
-  ) as DefaultExtensionType;
+  let extension: DefaultExtensionType;
+  if (name.includes('.')) {
+    extension = name.split('.').pop()!.toLowerCase() as DefaultExtensionType;
+  } else {
+    extension = mime ? (mime.split('/').pop() || 'txt') as DefaultExtensionType : 'txt' as DefaultExtensionType;
+  }
 
   return (
     <TooltipProvider delayDuration={100}>

frontend/src/components/chat/MessageComposer/Input.tsx

@@ -243,6 +243,9 @@ const Input = forwardRef<InputMethods, Props>(
         const textData = event.clipboardData?.getData('text/plain');
         if (textData) {
           const escapedText = escapeHtml(textData);
+
+          document.execCommand('insertText', false, textData);
+
           const textWithNewLines = escapedText.replace(/\n/g, '<br>');
 
           // Get selection from the element's ownerDocument instead of window
@@ -407,7 +410,7 @@ const Input = forwardRef<InputMethods, Props>(
           contentEditable
           data-placeholder={placeholder}
           className={cn(
-            'min-h-10 max-h-[250px] overflow-y-auto w-full focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 empty:before:content-[attr(data-placeholder)] empty:before:text-muted-foreground',
+            'min-h-10 max-h-[250px] whitespace-pre-wrap overflow-y-auto w-full focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:ring-0 focus-visible:ring-offset-0 empty:before:content-[attr(data-placeholder)] empty:before:text-muted-foreground',
             className
           )}
           onInput={handleInput}

frontend/src/components/chat/MessageComposer/index.tsx

@@ -146,7 +146,10 @@ export default function MessageComposer({
   ]);
 
   return (
-    <div className="bg-accent dark:bg-card rounded-3xl p-3 px-4 w-full min-h-24 flex flex-col">
+    <div
+      id="message-composer"
+      className="bg-accent dark:bg-card rounded-3xl p-3 px-4 w-full min-h-24 flex flex-col"
+    >
       {attachments.length > 0 ? (
         <div className="mb-1">
           <Attachments />

frontend/src/components/chat/Messages/index.tsx

@@ -72,7 +72,8 @@ const Messages = memo(
                     scorableRun={scorableRun}
                   />
                 ) : null}
-                {showToolCoTLoader || showHiddenCoTLoader ? (
+                {(showToolCoTLoader || showHiddenCoTLoader) &&
+                m.name !== 'on_chat_start' ? (
                   <BlinkingCursor />
                 ) : null}
               </React.Fragment>

frontend/src/components/chat/Starters.tsx

@@ -28,7 +28,10 @@ export default function Starters({ className }: Props) {
   if (!starters?.length) return null;
 
   return (
-    <div className={cn('flex gap-2 justify-center flex-wrap', className)}>
+    <div
+      id="starters"
+      className={cn('flex gap-2 justify-center flex-wrap', className)}
+    >
       {starters?.map((starter, i) => (
         <Starter key={i} starter={starter} />
       ))}

frontend/src/components/chat/WelcomeScreen.tsx

@@ -78,6 +78,7 @@ export default function WelcomeScreen(props: Props) {
 
   return (
     <div
+      id="welcome-screen"
       className={cn(
         'flex flex-col -mt-[60px] gap-4 w-full flex-grow items-center justify-center welcome-screen mx-auto transition-opacity duration-500 opacity-0 delay-100',
         isVisible && 'opacity-100'

frontend/src/components/header/ApiKeys.tsx

@@ -24,6 +24,7 @@ export default function ApiKeys() {
         <TooltipTrigger asChild>
           <Link to="/env">
             <Button
+              id="api-keys-button"
               size="icon"
               variant="ghost"
               className="text-muted-foreground hover:text-muted-foreground"

frontend/src/components/header/SidebarTrigger.tsx

@@ -18,6 +18,7 @@ export default function SidebarTrigger() {
       <Tooltip>
         <TooltipTrigger asChild>
           <Button
+            id="sidebar-trigger-button"
             onClick={() =>
               isMobile ? setOpenMobile(!openMobile) : setOpen(!open)
             }

frontend/src/components/header/UserNav.tsx

@@ -24,7 +24,11 @@ export default function UserNav() {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+        <Button
+          id="user-nav-button"
+          variant="ghost"
+          className="relative h-8 w-8 rounded-full"
+        >
           <Avatar className="h-8 w-8">
             <AvatarImage src={user?.metadata.image} alt="user image" />
             <AvatarFallback className="bg-primary text-primary-foreground font-semibold">

frontend/src/pages/Page.tsx

@@ -52,7 +52,9 @@ const Page = ({ children }: Props) => {
   const historyEnabled = config?.dataPersistence && data?.requireLogin;
 
   return (
-    <SidebarProvider>
+    <SidebarProvider
+      defaultOpen={config?.ui.default_sidebar_state !== 'closed'}
+    >
       {historyEnabled ? (
         <>
           <LeftSidebar />

libs/react-client/src/types/config.ts

@@ -33,6 +33,7 @@ export interface IChainlitConfig {
     font_family?: string;
     default_theme?: 'light' | 'dark';
     layout?: 'default' | 'wide';
+    default_sidebar_state?: 'open' | 'closed';
     cot: 'hidden' | 'tool_call' | 'full';
     github?: string;
     custom_css?: string;