feat: Add "Enter to send" option on format mode (#1671)

app/javascript/dashboard/assets/scss/widgets/_reply-box.scss

@@ -9,16 +9,15 @@
 
   .reply-box__top {
     .canned {
-      @include elegant-card;
+      background: var(--white);
-      background: $color-white;
+      border-bottom: var(--space-small) solid var(--white);
-      border-bottom: $space-small solid $color-white;
+      border-top: 1px solid var(--color-border);
-      border-top: $space-small solid $color-white;
       left: 0;
-
       max-height: 14rem;
       overflow: auto;
+      padding-top: var(--space-small);
       position: absolute;
-      width: 24rem;
+      width: 100%;
       z-index: 100;
 
       .active a {

app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue

@@ -31,6 +31,17 @@
       </button>
     </div>
     <div class="right-wrap">
+      <div v-if="isFormatMode" class="enter-to-send--checkbox">
+        <input
+          :checked="enterToSendEnabled"
+          type="checkbox"
+          value="enterToSend"
+          @input="toggleEnterToSend"
+        />
+        <label for="enterToSend">
+          {{ $t('CONVERSATION.REPLYBOX.ENTER_TO_SEND') }}
+        </label>
+      </div>
       <button
         class="button nice primary button--send"
         :class="buttonClass"
@@ -95,6 +106,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    enterToSendEnabled: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     isNote() {
@@ -119,6 +134,9 @@ export default {
     toggleFormatMode() {
       this.setFormatMode(!this.isFormatMode);
     },
+    toggleEnterToSend() {
+      this.$emit('toggleEnterToSend', !this.enterToSendEnabled);
+    },
   },
 };
 </script>
@@ -173,8 +191,8 @@ export default {
 }
 
 .left-wrap {
-  display: flex;
   align-items: center;
+  display: flex;
 }
 
 .button--reply {
@@ -185,4 +203,21 @@ export default {
   color: var(--s-600);
   font-size: var(--font-size-default);
 }
+
+.right-wrap {
+  display: flex;
+
+  .enter-to-send--checkbox {
+    align-items: center;
+    display: flex;
+
+    input {
+      margin: 0;
+    }
+
+    label {
+      color: var(--s-500);
+    }
+  }
+}
 </style>

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

@@ -35,6 +35,13 @@ export default {
       cannedMessages: 'getCannedResponses',
     }),
   },
+  watch: {
+    cannedMessages(newCannedMessages) {
+      if (newCannedMessages.length < this.selectedIndex + 1) {
+        this.selectedIndex = 0;
+      }
+    },
+  },
   mounted() {
     document.addEventListener('keydown', this.keyListener);
   },
@@ -44,7 +51,7 @@ export default {
   methods: {
     getTopPadding() {
       if (this.cannedMessages.length <= 4) {
-        return -this.cannedMessages.length * 3.5;
+        return -(this.cannedMessages.length * 2.8 + 1.7);
       }
       return -14;
     },
@@ -75,7 +82,7 @@ export default {
       if (this.isEnter(e)) {
         this.onKeyenter(this.cannedMessages[this.selectedIndex].content);
       }
-      this.$el.scrollTop = 34 * this.selectedIndex;
+      this.$el.scrollTop = 28 * this.selectedIndex;
     },
     onHover(index) {
       this.selectedIndex = index;

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

@@ -61,6 +61,8 @@
       :set-format-mode="setFormatMode"
       :is-format-mode="isFormatMode"
       :enable-rich-editor="isRichEditorEnabled"
+      :enter-to-send-enabled="enterToSendEnabled"
+      @toggleEnterToSend="toggleEnterToSend"
     />
   </div>
 </template>
@@ -115,7 +117,13 @@ export default {
     };
   },
   computed: {
-    ...mapGetters({ currentChat: 'getSelectedChat' }),
+    ...mapGetters({
+      currentChat: 'getSelectedChat',
+      uiSettings: 'getUISettings',
+    }),
+    enterToSendEnabled() {
+      return !!this.uiSettings.enter_to_send_enabled;
+    },
     isPrivate() {
       if (this.currentChat.can_reply) {
         return this.replyType === REPLY_EDITOR_MODES.NOTE;
@@ -209,6 +217,12 @@ export default {
   watch: {
     currentChat(conversation) {
       const { can_reply: canReply } = conversation;
+      const isUserReplyingOnPrivate =
+        this.replyType === REPLY_EDITOR_MODES.NOTE;
+      if (isUserReplyingOnPrivate) {
+        return;
+      }
+
       if (canReply) {
         this.replyType = REPLY_EDITOR_MODES.REPLY;
       } else {
@@ -216,9 +230,6 @@ export default {
       }
     },
     message(updatedMessage) {
-      if (this.isPrivate) {
-        return;
-      }
       const isSlashCommand = updatedMessage[0] === '/';
       const hasNextWord = updatedMessage.includes(' ');
       const isShortCodeActive = isSlashCommand && !hasNextWord;
@@ -247,14 +258,24 @@ export default {
         this.hideEmojiPicker();
         this.hideCannedResponse();
       } else if (isEnter(e)) {
+        const hasSendOnEnterEnabled =
+          (this.isFormatMode && this.enterToSendEnabled) || !this.isFormatMode;
         const shouldSendMessage =
-          !this.isFormatMode && !hasPressedShift(e) && this.isFocused;
+          hasSendOnEnterEnabled && !hasPressedShift(e) && this.isFocused;
         if (shouldSendMessage) {
           e.preventDefault();
           this.sendMessage();
         }
       }
     },
+    toggleEnterToSend(enterToSendEnabled) {
+      this.$store.dispatch('updateUISettings', {
+        uiSettings: {
+          ...this.uiSettings,
+          enter_to_send_enabled: enterToSendEnabled,
+        },
+      });
+    },
     async sendMessage() {
       if (this.isReplyButtonDisabled) {
         return;

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -44,7 +44,8 @@
       "TWEET": "Tweet",
       "TIP_FORMAT_ICON": "Show rich text editor",
       "TIP_EMOJI_ICON": "Show emoji selector",
-      "TIP_ATTACH_ICON": "Attach files"
+      "TIP_ATTACH_ICON": "Attach files",
+      "ENTER_TO_SEND": "Enter to send"
     },
     "VISIBLE_TO_AGENTS": "Private Note: Only visible to you and your team",
     "CHANGE_STATUS": "Conversation status changed",