From 2ae629e2be2ecd6004673020f0195b5939bab729 Mon Sep 17 00:00:00 2001
From: somebodyawesome-dev <luckynoob2011830@gmail.com>
Date: Wed, 26 Jun 2024 20:03:18 +0100
Subject: [PATCH 1/7] corrected --nlux-ChatRoom--Padding values to match figma

---
 packages/css/themes/src/dev/layout.css  | 2 +-
 packages/css/themes/src/luna/layout.css | 2 +-
 packages/css/themes/src/nova/layout.css | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/css/themes/src/dev/layout.css b/packages/css/themes/src/dev/layout.css
index d29a36be..6e90d33f 100644
--- a/packages/css/themes/src/dev/layout.css
+++ b/packages/css/themes/src/dev/layout.css
@@ -33,7 +33,7 @@
     --nlux-ChatRoom--FontFamily: 'Merienda', cursive;
     --nlux-ChatRoom--FontSize: 16px;
 
-    --nlux-ChatRoom--Padding: 10px;
+    --nlux-ChatRoom--Padding: 20px;
     --nlux-ChatRoom--BorderRadius: 8px;
     --nlux-ChatRoom--BorderWidth: 5px;
 
diff --git a/packages/css/themes/src/luna/layout.css b/packages/css/themes/src/luna/layout.css
index 7eec47a2..5cf95590 100644
--- a/packages/css/themes/src/luna/layout.css
+++ b/packages/css/themes/src/luna/layout.css
@@ -39,7 +39,7 @@
     --nlux-ChatRoom--FontFamily: var(--nlux-luna--FontFamily);
     --nlux-ChatRoom--FontSize: 16px;
 
-    --nlux-ChatRoom--Padding: 10px;
+    --nlux-ChatRoom--Padding: 20px;
     --nlux-ChatRoom--BorderRadius: var(--nlux-luna--BorderRadius);
     --nlux-ChatRoom--BorderWidth: var(--nlux-luna--BorderWidth);
 
diff --git a/packages/css/themes/src/nova/layout.css b/packages/css/themes/src/nova/layout.css
index 50d646e0..6fe5efee 100644
--- a/packages/css/themes/src/nova/layout.css
+++ b/packages/css/themes/src/nova/layout.css
@@ -38,7 +38,7 @@
     --nlux-ChatRoom--FontFamily: var(--nlux-nova--FontFamily);
     --nlux-ChatRoom--FontSize: 16px;
 
-    --nlux-ChatRoom--Padding: 10px;
+    --nlux-ChatRoom--Padding: 20px;
     --nlux-ChatRoom--BorderRadius: 18px;
     --nlux-ChatRoom--BorderWidth: var(--nlux-nova--BorderWidth);
 

From d2dca3703bac8f446cf9bce8b245f37ec57f5932 Mon Sep 17 00:00:00 2001
From: somebodyawesome-dev <luckynoob2011830@gmail.com>
Date: Sun, 30 Jun 2024 17:52:53 +0100
Subject: [PATCH 2/7] update textarea style to support multiple lines

---
 packages/css/themes/src/common/components/Composer.css | 10 +++++++---
 packages/css/themes/src/common/structure.css           |  2 +-
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/css/themes/src/common/components/Composer.css b/packages/css/themes/src/common/components/Composer.css
index 0ee44ebe..81308aca 100644
--- a/packages/css/themes/src/common/components/Composer.css
+++ b/packages/css/themes/src/common/components/Composer.css
@@ -1,5 +1,5 @@
 .nlux-comp-composer {
-    height: 100%;
+    /* height: 100%; */
     display: flex;
     align-items: stretch;
     flex-direction: row;
@@ -8,11 +8,15 @@
     gap: var(--nlux-prmBx--gap);
 
     > textarea {
-        height: 100%;
+        height:100%;
+        max-height: 80px; /* Set the initial height */
+        /* overflow-y: hidden; */
+        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;
diff --git a/packages/css/themes/src/common/structure.css b/packages/css/themes/src/common/structure.css
index fab73039..109efc81 100644
--- a/packages/css/themes/src/common/structure.css
+++ b/packages/css/themes/src/common/structure.css
@@ -38,7 +38,7 @@
         }
 
         > .nlux-composer-container {
-            height: 60px;
+            min-height: 60px;
             width: 100%;
             display: flex;
             flex-direction: row;

From 19ee7911eafab6a3dcb46f94feea8fca5e25c8ea Mon Sep 17 00:00:00 2001
From: somebodyawesome-dev <luckynoob2011830@gmail.com>
Date: Sun, 30 Jun 2024 17:53:28 +0100
Subject: [PATCH 3/7] auto adjust textarea height after  input change

---
 .../core/src/sections/Composer/ComposerComp.tsx    | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/react/core/src/sections/Composer/ComposerComp.tsx b/packages/react/core/src/sections/Composer/ComposerComp.tsx
index 0cd635c5..83ea4f70 100644
--- a/packages/react/core/src/sections/Composer/ComposerComp.tsx
+++ b/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

From f0bed43a7d7b26e7306b8b31a0bf0bf0c12d413a Mon Sep 17 00:00:00 2001
From: somebodyawesome-dev <luckynoob2011830@gmail.com>
Date: Sun, 30 Jun 2024 17:58:01 +0100
Subject: [PATCH 4/7] adjust textarea height for core/js

---
 packages/shared/src/components/Composer/create.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/shared/src/components/Composer/create.ts b/packages/shared/src/components/Composer/create.ts
index ab208660..af602427 100644
--- a/packages/shared/src/components/Composer/create.ts
+++ b/packages/shared/src/components/Composer/create.ts
@@ -11,9 +11,14 @@ export const createComposerDom: DomCreator<ComposerProps> = (props) => {
     element.classList.add(className);
 
     const textarea = document.createElement('textarea');
+
     textarea.placeholder = props.placeholder ?? '';
     textarea.value = props.message ?? '';
-
+    const adjustHeight = () => {
+          textarea.style.height = 'auto'; // Reset height
+          textarea.style.height = `${textarea.scrollHeight}px`; // Set new height based on content
+    };
+    textarea.addEventListener('input',adjustHeight);
     if (props.autoFocus) {
         textarea.autofocus = true;
     }

From db586b89430d3187a7c3f58505a6560e123d36f3 Mon Sep 17 00:00:00 2001
From: somebodyawesome-dev <luckynoob2011830@gmail.com>
Date: Mon, 8 Jul 2024 21:11:34 +0100
Subject: [PATCH 5/7] remove extra comments

---
 packages/css/themes/src/common/components/Composer.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/css/themes/src/common/components/Composer.css b/packages/css/themes/src/common/components/Composer.css
index 81308aca..cd42facb 100644
--- a/packages/css/themes/src/common/components/Composer.css
+++ b/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;
@@ -9,8 +8,7 @@
 
     > textarea {
         height:100%;
-        max-height: 80px; /* Set the initial height */
-        /* overflow-y: hidden; */
+        max-height: 80px; /* Set maximum height the textarea can expand to */ 
         field-sizing: content;
 
         font-family: var(--nlux-prmInp--ftFm), sans-serif;

From cd000a6cb384f472b10c67d7c3a4ee420b5ec077 Mon Sep 17 00:00:00 2001
From: somebodyawesome-dev <luckynoob2011830@gmail.com>
Date: Mon, 8 Jul 2024 22:38:23 +0100
Subject: [PATCH 6/7] fixed issue textarea doesnt get resized after submit

---
 packages/shared/src/components/Composer/create.ts |  5 -----
 packages/shared/src/components/Composer/update.ts | 13 +++++++++++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/shared/src/components/Composer/create.ts b/packages/shared/src/components/Composer/create.ts
index af602427..6d929494 100644
--- a/packages/shared/src/components/Composer/create.ts
+++ b/packages/shared/src/components/Composer/create.ts
@@ -14,11 +14,6 @@ export const createComposerDom: DomCreator<ComposerProps> = (props) => {
 
     textarea.placeholder = props.placeholder ?? '';
     textarea.value = props.message ?? '';
-    const adjustHeight = () => {
-          textarea.style.height = 'auto'; // Reset height
-          textarea.style.height = `${textarea.scrollHeight}px`; // Set new height based on content
-    };
-    textarea.addEventListener('input',adjustHeight);
     if (props.autoFocus) {
         textarea.autofocus = true;
     }
diff --git a/packages/shared/src/components/Composer/update.ts b/packages/shared/src/components/Composer/update.ts
index 99a51315..50a82d19 100644
--- a/packages/shared/src/components/Composer/update.ts
+++ b/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
+};
\ No newline at end of file

From 8e5060a489093f7cbfd1d0fee40b02de1f148109 Mon Sep 17 00:00:00 2001
From: somebodyawesome-dev <luckynoob2011830@gmail.com>
Date: Mon, 8 Jul 2024 22:56:08 +0100
Subject: [PATCH 7/7] exported height and max height properties for prompt
 input's style

---
 packages/css/themes/src/common/components/Composer.css | 2 +-
 packages/css/themes/src/common/layout.css              | 3 ++-
 packages/css/themes/src/common/structure.css           | 2 +-
 packages/css/themes/src/dev/layout.css                 | 2 ++
 packages/css/themes/src/luna/layout.css                | 4 +++-
 packages/css/themes/src/nova/layout.css                | 2 ++
 packages/css/themes/src/openai/layout.css              | 2 ++
 7 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/css/themes/src/common/components/Composer.css b/packages/css/themes/src/common/components/Composer.css
index cd42facb..8eefc1c8 100644
--- a/packages/css/themes/src/common/components/Composer.css
+++ b/packages/css/themes/src/common/components/Composer.css
@@ -8,7 +8,7 @@
 
     > textarea {
         height:100%;
-        max-height: 80px; /* Set maximum height the textarea can expand to */ 
+        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;
diff --git a/packages/css/themes/src/common/layout.css b/packages/css/themes/src/common/layout.css
index ecafdbcf..769cd624 100644
--- a/packages/css/themes/src/common/layout.css
+++ b/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);
diff --git a/packages/css/themes/src/common/structure.css b/packages/css/themes/src/common/structure.css
index 8da89ffb..b2a4d776 100644
--- a/packages/css/themes/src/common/structure.css
+++ b/packages/css/themes/src/common/structure.css
@@ -38,7 +38,7 @@
         }
 
         > .nlux-composer-container {
-            min-height: 60px;
+            min-height: var(--nlux-prmInp-hg);
             width: 100%;
             display: flex;
             flex-direction: row;
diff --git a/packages/css/themes/src/dev/layout.css b/packages/css/themes/src/dev/layout.css
index 38eb4e67..7b867bc7 100644
--- a/packages/css/themes/src/dev/layout.css
+++ b/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;
diff --git a/packages/css/themes/src/luna/layout.css b/packages/css/themes/src/luna/layout.css
index 2a79938d..0eaf2626 100644
--- a/packages/css/themes/src/luna/layout.css
+++ b/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);
diff --git a/packages/css/themes/src/nova/layout.css b/packages/css/themes/src/nova/layout.css
index d1d3ccf7..f539b992 100644
--- a/packages/css/themes/src/nova/layout.css
+++ b/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;
diff --git a/packages/css/themes/src/openai/layout.css b/packages/css/themes/src/openai/layout.css
index d191b025..866904ae 100644
--- a/packages/css/themes/src/openai/layout.css
+++ b/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;