From 628e4cef7355c6198786621481b6368eff151a14 Mon Sep 17 00:00:00 2001
From: Sanjeev Suresh <ssuresh@dialpad.com>
Date: Wed, 25 Oct 2023 10:36:27 -0700
Subject: [PATCH 1/2] fix: message input tooltip for character limit

---
 .../message_input/message_input.stories.js    |  1 +
 .../message_input/message_input.vue           | 27 ++++++++++++++++---
 .../message_input_default.story.vue           |  1 +
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/recipes/conversation_view/message_input/message_input.stories.js b/recipes/conversation_view/message_input/message_input.stories.js
index 1b1ad0a0a8..0b0b0e1226 100644
--- a/recipes/conversation_view/message_input/message_input.stories.js
+++ b/recipes/conversation_view/message_input/message_input.stories.js
@@ -79,6 +79,7 @@ export const argsData = {
   placeholder: 'New message',
   inputAriaLabel: 'Input text field',
   noticeMessage: 'Files must be less than 32 MB to be sent as Dialpad messages.',
+  characterLimitWarningMessage: 'You have reached the character limit.',
   onSubmit: action('submit'),
   onFocus: action('focus'),
   onBlur: action('blur'),
diff --git a/recipes/conversation_view/message_input/message_input.vue b/recipes/conversation_view/message_input/message_input.vue
index 0f44f200b7..7e9e7d6588 100644
--- a/recipes/conversation_view/message_input/message_input.vue
+++ b/recipes/conversation_view/message_input/message_input.vue
@@ -145,13 +145,24 @@
         <!-- Right content -->
         <div class="d-d-flex">
           <!-- Optionally displayed remaining character counter -->
-          <p
+          <dt-tooltip
             v-if="displayCharacterLimitWarning"
+            :enabled="characterLimitWarningMessage && (characterLimitCount - inputLength < 0)"
+            placement="top-end"
+            :message="characterLimitWarningMessage"
             class="d-fc-error d-mr16 d-as-center dt-message-input--remaining-char"
-            data-qa="dt-message-input-character-limit"
+            :offset="[10, -8]"
           >
-            {{ characterLimitCount - inputLength }}
-          </p>
+            <template #anchor>
+              <p
+                v-if="displayCharacterLimitWarning"
+                data-qa="dt-message-input-character-limit"
+              >
+                {{ characterLimitCount - inputLength }}
+              </p>
+            </template>
+          </dt-tooltip>
+
           <dt-tooltip
             placement="top-end"
             :message="sendTooltipLabel"
@@ -363,6 +374,14 @@ export default {
       default: 500,
     },
 
+    /**
+     * Character limit warning message
+     */
+    characterLimitWarningMessage: {
+      type: String,
+      default: '',
+    },
+
     // Error related props
 
     /**
diff --git a/recipes/conversation_view/message_input/message_input_default.story.vue b/recipes/conversation_view/message_input/message_input_default.story.vue
index 6098591e91..ebf2a5e426 100644
--- a/recipes/conversation_view/message_input/message_input_default.story.vue
+++ b/recipes/conversation_view/message_input/message_input_default.story.vue
@@ -15,6 +15,7 @@
       :has-character-limit="$attrs.hasCharacterLimit"
       :character-limit-count="$attrs.characterLimitCount"
       :character-limit-warning="$attrs.characterLimitWarning"
+      :character-limit-warning-message="$attrs.characterLimitWarningMessage"
       :notice-kind="$attrs.noticeKind"
       :notice-message="$attrs.noticeMessage"
       :emoji-tab-set-labels="$attrs.emojiTabSetLabels"

From 866861605987dfde42885d05f482896d134511d3 Mon Sep 17 00:00:00 2001
From: Sanjeev Suresh <ssuresh@dialpad.com>
Date: Thu, 26 Oct 2023 10:14:41 -0700
Subject: [PATCH 2/2] fix: move class to anchor

---
 recipes/conversation_view/message_input/message_input.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/recipes/conversation_view/message_input/message_input.vue b/recipes/conversation_view/message_input/message_input.vue
index 7e9e7d6588..925bbb1a12 100644
--- a/recipes/conversation_view/message_input/message_input.vue
+++ b/recipes/conversation_view/message_input/message_input.vue
@@ -150,12 +150,12 @@
             :enabled="characterLimitWarningMessage && (characterLimitCount - inputLength < 0)"
             placement="top-end"
             :message="characterLimitWarningMessage"
-            class="d-fc-error d-mr16 d-as-center dt-message-input--remaining-char"
             :offset="[10, -8]"
           >
             <template #anchor>
               <p
                 v-if="displayCharacterLimitWarning"
+                class="d-fc-error d-mr16 d-as-center dt-message-input--remaining-char"
                 data-qa="dt-message-input-character-limit"
               >
                 {{ characterLimitCount - inputLength }}