fix: auto focus chat input (Chainlit#1811)

* fix: auto focus chat input * fix: only display output word in step if display input * chore: prepare release * chore: changelog
Progressive-Insurance · Jan 27, 2025 · a3ecfb2 · a3ecfb2
1 parent 6b3da19
commit a3ecfb2
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,19 @@ 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.602] - 2025-01-27
+
+### Fixed
+
+- Chat input should now auto focus
+- When unfolding a step, the `Output` title should only show if there is an input to display
+
+## [2.0.601] - 2025-01-25
+
+### Fixed
+
+- Element sidebar should take full height
+
 ## [2.0.6] - 2025-01-24
 
 ### Added

diff --git a/backend/chainlit/version.py b/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.0.6"
+    __version__ = "2.0.602"
diff --git a/backend/pyproject.toml b/backend/pyproject.toml
@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "chainlit"
-version = "2.0.601"
+version = "2.0.602"
 keywords = [
     'LLM',
     'Agents',

diff --git a/frontend/src/components/chat/MessageComposer/Input.tsx b/frontend/src/components/chat/MessageComposer/Input.tsx
@@ -94,6 +94,8 @@ const Input = forwardRef<InputMethods, Props>(
     useEffect(() => {
       if (!contentEditableRef.current) return;
 
+      contentEditableRef.current.focus();
+
       mutationObserverRef.current = new MutationObserver((mutations) => {
         if (isUpdatingRef.current) return;
 

diff --git a/frontend/src/components/chat/Messages/Message/Content/index.tsx b/frontend/src/components/chat/Messages/Message/Content/index.tsx
@@ -33,11 +33,13 @@ const MessageContent = memo(
       language: message.language
     });
 
+    const displayInput = message.input && message.showInput;
+
     const isMessage = message.type.includes('message');
 
     const outputMarkdown = (
       <p className="flex flex-col gap-2">
-        {!isMessage ? (
+        {!isMessage && displayInput ? (
           <div className="text-lg font-semibold leading-none tracking-tight">
             Output
           </div>
@@ -54,7 +56,7 @@ const MessageContent = memo(
 
     let inputMarkdown;
 
-    if (message.input && message.showInput) {
+    if (displayInput) {
       const inputContent =
         message.streaming && message.input
           ? message.input + CURSOR_PLACEHOLDER

diff --git a/frontend/src/components/chat/Messages/Message/Step.tsx b/frontend/src/components/chat/Messages/Message/Step.tsx
@@ -30,7 +30,7 @@ export default function Step({
     <div className="flex flex-col flex-grow w-0">
       <p
         className={cn(
-          'flex items-center gap-1 group/step',
+          'flex items-center group/step',
           isError && 'text-red-500',
           hasContent && 'cursor-pointer',
           !using && 'text-muted-foreground hover:text-foreground',
@@ -50,9 +50,9 @@ export default function Step({
         )}
         {hasContent ? (
           open ? (
-            <ChevronUp className="invisible group-hover/step:visible !size-4" />
+            <ChevronUp className="invisible group-hover/step:visible !size-4 ml-1" />
           ) : (
-            <ChevronDown className="invisible group-hover/step:visible !size-4" />
+            <ChevronDown className="invisible group-hover/step:visible !size-4 ml-1" />
           )
         ) : null}
       </p>