Multiple-lines textarea support

packages/css/themes/src/common/components/Composer.css

@@ -1,5 +1,4 @@
 .nlux-comp-composer {
-    height: 100%;
     display: flex;
     align-items: stretch;
     flex-direction: row;
@@ -8,11 +7,14 @@
     gap: var(--nlux-prmBx--gap);
 
     > textarea {
-        height: 100%;
+        height:100%;
+        max-height: var(--nlux-prmInp-mxhg); /* Set maximum height the textarea can expand to */ 
+        field-sizing: content;
+
         font-family: var(--nlux-prmInp--ftFm), sans-serif;
         font-size: var(--nlux-prmInp--ftSz);
         font-weight: 400;
-        line-height: 1.3;
+        line-height: 1;
         box-sizing: border-box;
         padding:  var(--nlux-chtr--pdng);
         flex: 1;

packages/css/themes/src/common/layout.css

@@ -102,7 +102,8 @@
     --nlux-prmInp--brdrWd: var(--nlux-PromptInput--BorderWidth);
     --nlux-prmInp--brdrRd: var(--nlux-PromptInput--BorderRadius);
     --nlux-prmInp-fcs-otln--wd: var(--nlux-PromptInput-Focus-Outline--Width, 6px);
-
+    --nlux-prmInp-mxhg: var(--nlux-PromptInput-Max-Height, 80px);
+    --nlux-prmInp-hg: var(--nlux-PromptInput-Height, 60px);
     /** Conversation starters */
     --nlux-cvStrt--pdng: var(--nlux-ConversationStarter--Padding, 0 10px);
     --nlux-cvStrt--brdrRd: var(--nlux-ConversationStarter--BorderRadius);

packages/css/themes/src/common/structure.css

@@ -38,7 +38,7 @@
         }
 
         > .nlux-composer-container {
-            height: 60px;
+            min-height: var(--nlux-prmInp-hg);
             width: 100%;
             display: flex;
             flex-direction: row;

packages/css/themes/src/dev/layout.css

@@ -84,6 +84,8 @@
     --nlux-PromptInput--BorderWidth: 5px;
     --nlux-PromptInput--BorderRadius: 8px;
     --nlux-PromptInput-Focus-Outline--Width: 5px;
+    --nlux-PromptInput-Max-Height: 80px;
+    --nlux-PromptInput-Height: 60px;
 
     /** 👇 Submit button */
     --nlux-SubmitButton--Width: 65px;

packages/css/themes/src/luna/layout.css

@@ -114,7 +114,9 @@
     --nlux-PromptInput--BorderWidth: var(--nlux-luna--BorderWidth);
     --nlux-PromptInput--BorderRadius: var(--nlux-luna--BorderRadius);
     --nlux-PromptInput-Focus-Outline--Width: var(--nlux-luna--BorderWidth);
-
+    --nlux-PromptInput-Max-Height: 80px;
+    --nlux-PromptInput-Height: 60px;
+
     /** Conversation starters */
     --nlux-ConversationStarter--Padding: 0 10px;
     --nlux-ConversationStarter--BorderRadius: var(--nlux-luna--BorderRadius);

packages/css/themes/src/nova/layout.css

@@ -113,6 +113,8 @@
     --nlux-PromptInput--BorderWidth: 0;
     --nlux-PromptInput--BorderRadius: 12px;
     --nlux-PromptInput-Focus-Outline--Width: 2px;
+    --nlux-PromptInput-Max-Height: 80px;
+    --nlux-PromptInput-Height: 60px;
 
     /** Conversation starters */
     --nlux-ConversationStarter--Padding: 0 10px;

packages/css/themes/src/openai/layout.css

@@ -113,6 +113,8 @@
     --nlux-PromptInput--BorderWidth: 0;
     --nlux-PromptInput--BorderRadius: 12px;
     --nlux-PromptInput-Focus-Outline--Width: 2px;
+    --nlux-PromptInput-Max-Height: 80px;
+    --nlux-PromptInput-Height: 60px;
 
     /** Conversation starters */
     --nlux-ConversationStarter--Padding: 0 10px;

packages/react/core/src/sections/Composer/ComposerComp.tsx

@@ -48,6 +48,20 @@ export const ComposerComp = (props: ComposerProps) => {
         }
     }, [handleSubmit, props.submitShortcut]);
 
+    useEffect(()=>{
+        if(!textareaRef.current) return;
+        const adjustHeight = () => {
+            const textarea = textareaRef.current;
+            if (textarea) {
+              textarea.style.height = 'auto'; // Reset height
+              textarea.style.height = `${textarea.scrollHeight}px`; // Set new height based on content
+            }
+        };
+        textareaRef.current.addEventListener('input',adjustHeight);
+        return ()=>{textareaRef.current?.removeEventListener('input',adjustHeight)}
+
+    },[textareaRef.current])
+
     return (
         <div className={className}>
             <textarea

packages/shared/src/components/Composer/create.ts

@@ -11,9 +11,9 @@ export const createComposerDom: DomCreator<ComposerProps> = (props) => {
     element.classList.add(className);
 
     const textarea = document.createElement('textarea');
+
     textarea.placeholder = props.placeholder ?? '';
     textarea.value = props.message ?? '';
-
     if (props.autoFocus) {
         textarea.autofocus = true;
     }

packages/shared/src/components/Composer/update.ts

@@ -17,14 +17,16 @@ export const updateComposerDom: DomUpdater<ComposerProps> = (
     ) {
         return;
     }
-
+
+    const textArea: HTMLTextAreaElement = element.querySelector('* > textarea')!;
     if (propsBefore.status !== propsAfter.status) {
         applyNewStatusClassName(element, propsAfter.status);
         updateContentOnStatusChange(element, propsBefore, propsAfter);
+        //try to update textarea height after recieving new value or after sumbit 
+        adjustHeight(textArea);
         return;
     }
 
-    const textArea: HTMLTextAreaElement = element.querySelector('* > textarea')!;
 
     if (propsBefore.placeholder !== propsAfter.placeholder) {
         textArea.placeholder = propsAfter.placeholder ?? '';
@@ -36,6 +38,8 @@ export const updateComposerDom: DomUpdater<ComposerProps> = (
 
     if (propsBefore.message !== propsAfter.message) {
         textArea.value = propsAfter.message ?? '';
+        //try to update textarea height after recieving new value or after sumbit 
+        adjustHeight(textArea);
     }
 
     if (propsBefore.status === 'typing') {
@@ -50,3 +54,8 @@ export const updateComposerDom: DomUpdater<ComposerProps> = (
         }
     }
 };
+
+const adjustHeight = (target:HTMLElement) => {
+    target.style.height = 'auto'; // Reset height
+    target.style.height = `${target.scrollHeight}px`; // Set new height based on content
+};