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/WootWriter/Editor.vue

@@ -210,6 +210,8 @@ export default {
       }
     },
     editorId() {
+      this.showCannedMenu = false;
+      this.cannedSearchTerm = '';
       this.reloadState();
     },
     isPrivate() {

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;

app/javascript/dashboard/components/widgets/mentions/MentionBox.vue

@@ -1,22 +1,24 @@
 <template>
-  <ul
+  <div v-if="items.length" ref="mentionsListContainer" class="mention--box">
-    v-if="items.length"
+    <ul class="vertical dropdown menu">
-    class="vertical dropdown menu mention--box"
+      <woot-dropdown-item
-    :style="{ top: getTopPadding() + 'rem' }"
+        v-for="(item, index) in items"
-  >
+        :id="`mention-item-${index}`"
-    <li
+        :key="item.key"
-      v-for="(item, index) in items"
+        @mouseover="onHover(index)"
-      :id="`mention-item-${index}`"
+      >
-      :key="item.key"
+        <woot-button
-      :class="{ active: index === selectedIndex }"
+          size="small"
-      @click="onListItemSelection(index)"
+          class="canned-item__button"
-      @mouseover="onHover(index)"
+          :variant="index === selectedIndex ? '' : 'clear'"
-    >
+          :class="{ active: index === selectedIndex }"
-      <a class="text-truncate">
+          @click="onListItemSelection(index)"
-        <slot :item="item" />
+        >
-      </a>
+          <strong>{{ item.label }}</strong> - {{ item.description }}
-    </li>
+        </woot-button>
-  </ul>
+      </woot-dropdown-item>
+    </ul>
+  </div>
 </template>
 
 <script>
@@ -40,17 +42,27 @@ export default {
         this.selectedIndex = 0;
       }
     },
+    selectedIndex() {
+      const container = this.$refs.mentionsListContainer;
+      const item = container.querySelector(
+        `#mention-item-${this.selectedIndex}`
+      );
+      if (item) {
+        const itemTop = item.offsetTop;
+        const itemBottom = itemTop + item.offsetHeight;
+        const containerTop = container.scrollTop;
+        const containerBottom = containerTop + container.offsetHeight;
+        if (itemTop < containerTop) {
+          container.scrollTop = itemTop;
+        } else if (itemBottom + 34 > containerBottom) {
+          container.scrollTop = itemBottom - container.offsetHeight + 34;
+        }
+      }
+    },
   },
   methods: {
-    getTopPadding() {
-      if (this.items.length <= 4) {
-        return -(this.items.length * 2.9 + 1.7);
-      }
-      return -14;
-    },
     handleKeyboardEvent(e) {
       this.processKeyDownEvent(e);
-      this.$el.scrollTop = 29 * this.selectedIndex;
     },
     onHover(index) {
       this.selectedIndex = index;
@@ -69,20 +81,38 @@ export default {
 <style scoped lang="scss">
 .mention--box {
   background: var(--white);
-  border-bottom: var(--space-small) solid var(--white);
   border-radius: var(--border-radius-normal);
   border-top: 1px solid var(--color-border);
   box-shadow: var(--shadow-medium);
   left: 0;
-  max-height: 14rem;
+  bottom: 100%;
+  max-height: 15.6rem;
   overflow: auto;
-  padding-top: var(--space-small);
+  padding: var(--space-small) var(--space-small) 0;
   position: absolute;
   width: 100%;
   z-index: 100;
 
-  .active a {
+  .dropdown-menu__item:last-child {
-    background: var(--w-500);
+    padding-bottom: var(--space-smaller);
+  }
+
+  .active {
+    color: var(--white);
+
+    &:hover {
+      color: var(--w-700);
+    }
+  }
+
+  .button {
+    transition: none;
   }
 }
+
+.canned-item__button::v-deep .button__content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 </style>

app/javascript/dashboard/routes/dashboard/conversation/contact/ConversationForm.vue

@@ -323,11 +323,7 @@ export default {
 }
 
 .canned-response {
-  ::v-deep .mention--box {
+  position: relative;
-    border-left: 1px solid var(--color-border);
-    border-right: 1px solid var(--color-border);
-    top: var(--space-jumbo) !important;
-  }
 }
 
 .input-group-label {
@@ -363,12 +359,10 @@ export default {
 }
 
 ::v-deep .mention--box {
-  border-left: 1px solid var(--color-border);
-  border-right: 1px solid var(--color-border);
   left: 0;
   margin: auto;
   right: 0;
-  top: 18rem !important;
+  top: unset;
-  width: 90%;
+  height: fit-content;
 }
 </style>