fix: pasting multiline text (Chainlit#1820)

frontend/package.json

@@ -113,8 +113,7 @@
       "vite@>=4.0.0 <=4.5.3": ">=4.5.4",
       "rollup@>=3.0.0 <3.29.5": ">=3.29.5",
       "rollup@>=4.0.0 <4.22.4": ">=4.22.4",
-      "cross-spawn@>=7.0.0 <7.0.5": ">=7.0.5",
-      "nanoid@<3.3.8": ">=3.3.8"
-    }
+      "cross-spawn@>=7.0.0 <7.0.5": ">=7.0.5"
+        }
   }
 }

frontend/src/components/LeftSidebar/Search.tsx

@@ -135,7 +135,9 @@ export default function SearchChats() {
                       navigate(`/thread/${thread.id}`);
                     }}
                   >
-                    {thread.name || 'Untitled Conversation'}
+                    <div className="line-clamp-2">
+                      {thread.name || 'Untitled Conversation'}
+                    </div>
                   </CommandItem>
                 ))}
               </CommandGroup>

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

@@ -73,7 +73,15 @@ const Input = forwardRef<InputMethods, Props>(
         commandSpan.remove();
       }
 
-      return clone.textContent?.replace('\u200B', '') || '';
+      return (
+        clone.innerHTML
+          ?.replace(/<br\s*\/?>/g, '\n') // Convert <br> to newlines
+          .replace(/<div>/g, '\n') // Convert <div> to newlines
+          .replace(/<\/div>/g, '') // Remove closing div tags
+          .replace(/&nbsp;/g, ' ') // Convert &nbsp; to spaces
+          .replace(/<[^>]*>/g, '') // Remove any other HTML tags
+          .replace('\u200B', '') || ''
+      );
     };
 
     const reset = () => {
@@ -209,10 +217,49 @@ const Input = forwardRef<InputMethods, Props>(
       const textarea = contentEditableRef.current;
       if (!textarea || !onPaste) return;
 
-      textarea.addEventListener('paste', onPaste);
+      const _onPaste = (event: ClipboardEvent) => {
+        event.preventDefault();
+
+        const text = event.clipboardData
+          ?.getData('text/plain')
+          .replace(/\n/g, '<br>');
+        if (text) {
+          const selection = window.getSelection();
+          if (selection?.rangeCount) {
+            const range = selection.getRangeAt(0);
+            range.deleteContents();
+
+            // Insert the HTML content
+            const tempDiv = document.createElement('div');
+            tempDiv.innerHTML = text;
+            const fragment = document.createDocumentFragment();
+            while (tempDiv.firstChild) {
+              fragment.appendChild(tempDiv.firstChild);
+            }
+            range.insertNode(fragment);
+
+            // Move cursor to end of pasted content
+            range.collapse(false);
+            selection.removeAllRanges();
+            selection.addRange(range);
+
+            // Force focus back to the content editable
+            textarea.focus();
+            textarea.scrollTop = textarea.scrollHeight;
+          }
+
+          // Trigger input event to update state
+          const inputEvent = new Event('input', { bubbles: true });
+          textarea.dispatchEvent(inputEvent);
+        }
+
+        onPaste(event);
+      };
+
+      textarea.addEventListener('paste', _onPaste);
 
       return () => {
-        textarea.removeEventListener('paste', onPaste);
+        textarea.removeEventListener('paste', _onPaste);
       };
     }, [onPaste]);
 

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

@@ -55,15 +55,6 @@ export default function MessageComposer({
     if (event.clipboardData && event.clipboardData.items) {
       const items = Array.from(event.clipboardData.items);
 
-      // Attempt to handle text data first
-      const textData = event.clipboardData.getData('text/plain');
-      if (textData) {
-        // Skip file handling if text data is present
-        return;
-      }
-
-      event.preventDefault();
-
       // If no text data, check for files (e.g., images)
       items.forEach((item) => {
         if (item.kind === 'file') {

libs/copilot/package.json

@@ -76,8 +76,7 @@
       "vite@>=4.0.0 <=4.5.3": ">=4.5.4",
       "rollup@>=3.0.0 <3.29.5": ">=3.29.5",
       "cookie@<0.7.0": ">=0.7.0",
-      "cross-spawn@>=7.0.0 <7.0.5": ">=7.0.5",
-      "nanoid@<3.3.8": ">=3.3.8"
+      "cross-spawn@>=7.0.0 <7.0.5": ">=7.0.5"
     }
   }
 }

libs/react-client/package.json

@@ -71,8 +71,7 @@
       "vite@>=4.0.0 <4.5.4": ">=4.5.4",
       "vite@>=4.0.0 <=4.5.3": ">=4.5.4",
       "rollup@>=3.0.0 <3.29.5": ">=3.29.5",
-      "cross-spawn@>=7.0.0 <7.0.5": ">=7.0.5",
-      "nanoid@<3.3.8": ">=3.3.8"
+      "cross-spawn@>=7.0.0 <7.0.5": ">=7.0.5"
     }
   }
 }