fix: Uses woot-button in mention box (#6317)

* fix: Uses woot-button in mention box

* Style changes to fix mention box position

* Fixes review comments

* Fixes review comments

---------

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>
Co-authored-by: Vishnu Narayanan <vishnu@chatwoot.com>
Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

app/javascript/dashboard/components/widgets/conversation/ReplyBox.vue

@@ -20,6 +20,7 @@
       <canned-response
         v-if="showMentions && hasSlashCommand"
         v-on-clickaway="hideMentions"
+        class="normal-editor__canned-box"
         :search-key="mentionSearchKey"
         @click="replaceText"
       />
@@ -1045,6 +1046,7 @@ export default {
 }
 
 .reply-box__top {
+  position: relative;
   padding: 0 var(--space-normal);
   border-top: 1px solid var(--color-border);
   margin-top: -1px;
@@ -1082,4 +1084,9 @@ export default {
     margin-bottom: 0;
   }
 }
+
+.normal-editor__canned-box {
+  width: calc(100% - 2 * var(--space-normal));
+  left: var(--space-normal);
+}
 </style>

app/javascript/dashboard/components/widgets/conversation/TagAgents.vue

@@ -2,7 +2,6 @@
   <ul
     v-if="items.length"
     class="vertical dropdown menu mention--box"
-    :style="{ top: getTopSpacing() + 'rem' }"
     :class="{ 'with-bottom-border': items.length <= 4 }"
   >
     <li
@@ -69,12 +68,6 @@ export default {
   },
 
   methods: {
-    getTopSpacing() {
-      if (this.items.length <= 4) {
-        return -(this.items.length * 5 + 1.7);
-      }
-      return -20;
-    },
     handleKeyboardEvent(e) {
       this.processKeyDownEvent(e);
       this.$el.scrollTop = 50 * this.selectedIndex;
@@ -101,6 +94,7 @@ export default {
   box-shadow: var(--shadow-medium);
   font-size: var(--font-size-small);
   left: 0;
+  bottom: 100%;
   line-height: 1.2;
   max-height: 20rem;
   overflow: auto;