From 2c5a0abcce1b0f9fafbe0d65d046f3895086ea05 Mon Sep 17 00:00:00 2001
From: Pranav Raj S <pranav@chatwoot.com>
Date: Fri, 17 Nov 2023 17:29:44 -0800
Subject: [PATCH] fix: Update the height of the input based on the rows (#8373)

---
 .../modules/widget-preview/components/WidgetFooter.vue       | 1 +
 .../routes/dashboard/helpcenter/components/ArticleEditor.vue | 2 +-
 app/javascript/shared/components/GreetingsEditor.vue         | 2 +-
 app/javascript/shared/components/ResizableTextArea.vue       | 5 +++++
 app/javascript/widget/components/ChatInputWrap.vue           | 1 +
 5 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
index 64355b6cd..b5d4bbc28 100644
--- a/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
+++ b/app/javascript/dashboard/modules/widget-preview/components/WidgetFooter.vue
@@ -12,6 +12,7 @@
     <div v-else class="chat-message-input is-focused">
       <resizable-text-area
         id="chat-input"
+        :rows="1"
         :placeholder="
           $t('INBOX_MGMT.WIDGET_BUILDER.FOOTER.CHAT_INPUT_PLACEHOLDER')
         "
diff --git a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
index 5a4a669aa..d51017703 100644
--- a/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
+++ b/app/javascript/dashboard/routes/dashboard/helpcenter/components/ArticleEditor.vue
@@ -3,7 +3,7 @@
     <resizable-text-area
       v-model="articleTitle"
       type="text"
-      rows="1"
+      :rows="1"
       class="article-heading"
       :placeholder="$t('HELP_CENTER.EDIT_ARTICLE.TITLE_PLACEHOLDER')"
       @focus="onFocus"
diff --git a/app/javascript/shared/components/GreetingsEditor.vue b/app/javascript/shared/components/GreetingsEditor.vue
index 25bd9d3d6..0dc72a727 100644
--- a/app/javascript/shared/components/GreetingsEditor.vue
+++ b/app/javascript/shared/components/GreetingsEditor.vue
@@ -17,7 +17,7 @@
     <resizable-text-area
       v-else
       v-model="greetingsMessage"
-      rows="4"
+      :rows="4"
       type="text"
       class="greetings--textarea"
       :label="label"
diff --git a/app/javascript/shared/components/ResizableTextArea.vue b/app/javascript/shared/components/ResizableTextArea.vue
index 8257694f5..bb3935f57 100644
--- a/app/javascript/shared/components/ResizableTextArea.vue
+++ b/app/javascript/shared/components/ResizableTextArea.vue
@@ -2,6 +2,7 @@
   <textarea
     ref="textarea"
     :placeholder="placeholder"
+    :rows="rows"
     :value="value"
     @input="onInput"
     @focus="onFocus"
@@ -36,6 +37,10 @@ export default {
       type: String,
       default: '',
     },
+    rows: {
+      type: Number,
+      default: 2,
+    },
     // add this as a prop, so that we won't have to include uiSettingsMixin
     sendWithSignature: {
       type: Boolean,
diff --git a/app/javascript/widget/components/ChatInputWrap.vue b/app/javascript/widget/components/ChatInputWrap.vue
index 67fc4e9eb..1d68a9263 100755
--- a/app/javascript/widget/components/ChatInputWrap.vue
+++ b/app/javascript/widget/components/ChatInputWrap.vue
@@ -8,6 +8,7 @@
       id="chat-input"
       ref="chatInput"
       v-model="userInput"
+      :rows="1"
       :aria-label="$t('CHAT_PLACEHOLDER')"
       :placeholder="$t('CHAT_PLACEHOLDER')"
       class="form-input user-message-input is-focused"