#2427 - Add 'reply' menu for a proposal notification message. (#2491)

* enable reply menu for MessageInteractive.vue * re-format replying message for proposal-notification message * make sure names are displayed properly in replying text * update according to the feedback
okTurtles · Jan 15, 2025 · 09ae6f2 · 09ae6f2
1 parent 6eff95f
commit 09ae6f2
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 13 deletions.
diff --git a/frontend/views/containers/chatroom/ChatMain.vue b/frontend/views/containers/chatroom/ChatMain.vue
@@ -128,7 +128,7 @@ import Vue from 'vue'
 import Avatar from '@components/Avatar.vue'
 import InfiniteLoading from 'vue-infinite-loading'
 import Message from './Message.vue'
-import MessageInteractive from './MessageInteractive.vue'
+import MessageInteractive, { interactiveMessage } from './MessageInteractive.vue'
 import MessageNotification from './MessageNotification.vue'
 import MessagePoll from './MessagePoll.vue'
 import ConversationGreetings from '@containers/chatroom/ConversationGreetings.vue'
@@ -137,7 +137,7 @@ import ViewArea from './ViewArea.vue'
 import Emoticons from './Emoticons.vue'
 import TouchLinkHelper from './TouchLinkHelper.vue'
 import DragActiveOverlay from './file-attachment/DragActiveOverlay.vue'
-import { MESSAGE_TYPES, MESSAGE_VARIANTS, CHATROOM_ACTIONS_PER_PAGE } from '@model/contracts/shared/constants.js'
+import { MESSAGE_TYPES, MESSAGE_VARIANTS, CHATROOM_ACTIONS_PER_PAGE, CHATROOM_MEMBER_MENTION_SPECIAL_CHAR } from '@model/contracts/shared/constants.js'
 import { CHATROOM_EVENTS, NEW_CHATROOM_UNREAD_POSITION, DELETE_ATTACHMENT_FEEDBACK } from '@utils/events.js'
 import { findMessageIdx } from '@model/contracts/shared/functions.js'
 import { proximityDate, MINS_MILLIS } from '@model/contracts/shared/time.js'
@@ -616,9 +616,20 @@ export default ({
       this.handleSendMessage(message.text, message.attachments, message.replyingMessage)
     },
     replyMessage (message) {
-      const { text, hash } = message
-      this.ephemeral.replyingMessage = { text, hash }
-      this.ephemeral.replyingTo = this.who(message)
+      const { text, hash, type } = message
+
+      if (type === MESSAGE_TYPES.INTERACTIVE) {
+        const proposal = message.proposal
+
+        this.ephemeral.replyingMessage = {
+          text: interactiveMessage(proposal, { from: `${CHATROOM_MEMBER_MENTION_SPECIAL_CHAR}${proposal.creatorID}` }),
+          hash
+        }
+        this.ephemeral.replyingTo = L('Proposal notification')
+      } else {
+        this.ephemeral.replyingMessage = { text, hash }
+        this.ephemeral.replyingTo = this.who(message)
+      }
     },
     editMessage (message, newMessage) {
       message.text = newMessage

diff --git a/frontend/views/containers/chatroom/MessageActions.vue b/frontend/views/containers/chatroom/MessageActions.vue
@@ -23,7 +23,7 @@ menu-parent.c-message-menu(ref='menu')
         i.icon-pencil-alt
 
     tooltip(
-      v-if='isText'
+      v-if='isReplyable'
       direction='top'
       :text='L("Reply")'
     )
@@ -107,6 +107,9 @@ export default ({
     isPoll () {
       return this.type === MESSAGE_TYPES.POLL
     },
+    isReplyable () {
+      return [MESSAGE_TYPES.TEXT, MESSAGE_TYPES.INTERACTIVE].includes(this.type)
+    },
     isPinnable () {
       return this.isText || this.isPoll
     },
@@ -130,9 +133,9 @@ export default ({
         conditionToShow: !this.isDesktopScreen && this.isEditable
       }, {
         name: L('Reply'),
-        action: 'Reply',
+        action: 'reply',
         icon: 'reply',
-        conditionToShow: !this.isDesktopScreen && this.isText
+        conditionToShow: !this.isDesktopScreen && this.isReplyable
       }, {
         name: L('Retry'),
         action: 'retry',

diff --git a/frontend/views/containers/chatroom/MessageInteractive.vue b/frontend/views/containers/chatroom/MessageInteractive.vue
@@ -1,5 +1,8 @@
 <template lang='pug'>
-message-base(v-bind='$props' @wrapperAction='action')
+message-base(v-bind='$props'
+  @wrapperAction='action'
+  @reply='$emit("reply")'
+)
   template(#image='')
     .c-icon(:class='{"is-warning": isYellowHorn}')
       svg-yellow-horn(v-if='isYellowHorn')
@@ -41,7 +44,7 @@ import SvgYellowHorn from '@svgs/yellow-horn.svg'
 import { humanDate } from '@model/contracts/shared/time.js'
 import { get } from '@model/contracts/shared/giLodash.js'
 
-const interactiveMessage = (proposal, baseOptions = {}) => {
+export const interactiveMessage = (proposal, baseOptions = {}) => {
   const { status, creatorID, proposalType, proposalData } = proposal
   const { options: proposalDetails } = getProposalDetails({
     status,

diff --git a/frontend/views/containers/chatroom/SendArea.vue b/frontend/views/containers/chatroom/SendArea.vue
@@ -51,7 +51,7 @@
 
     .c-reply-wrapper
       .c-reply(v-if='replyingMessage')
-        i18n(:args='{ replyingTo, text: replyingMessage.text }') Replying to {replyingTo}: "{text}"
+        i18n(:args='{ replyingTo, text: swapMentionIDForDisplayname(replyingMessage.text) }') Replying to {replyingTo}: "{text}"
         button.c-clear.is-icon-small(
           :aria-label='L("Stop replying")'
           @click='stopReplying'
@@ -272,7 +272,7 @@ import CreatePoll from './CreatePoll.vue'
 import Avatar from '@components/Avatar.vue'
 import Tooltip from '@components/Tooltip.vue'
 import ChatAttachmentPreview from './file-attachment/ChatAttachmentPreview.vue'
-import { makeMentionFromUsername, makeChannelMention } from '@model/chatroom/utils.js'
+import { makeMentionFromUsername, makeChannelMention, swapMentionIDForDisplayname } from '@model/chatroom/utils.js'
 import {
   CHATROOM_PRIVACY_LEVEL,
   CHATROOM_MEMBER_MENTION_SPECIAL_CHAR,
@@ -927,7 +927,8 @@ export default ({
       }).catch(e => {
         console.error('Error emitting user stopped typing event', e)
       })
-    }
+    },
+    swapMentionIDForDisplayname
   }
 }: Object)
 </script>