feat(message): disable emoji/reply in group chat

components/views/chat/message/Message.vue

@@ -12,10 +12,11 @@ import {
   convertTimestampToDate,
 } from '~/utilities/Messaging'
 import { toHTML } from '~/libraries/ui/Markdown'
-import { ContextMenuItem, EmojiUsage } from '~/store/ui/types'
+import { ContextMenuItem, EmojiUsage, ModalWindows } from '~/store/ui/types'
 import { isMimeEmbeddableImage } from '~/utilities/FileType'
 import { FILE_TYPE } from '~/libraries/Files/types/file'
 import placeholderImage from '~/assets/svg/mascot/sad_curious.svg'
+import { RootState } from '~/types/store/store'
 
 export default Vue.extend({
   components: {
@@ -62,7 +63,12 @@ export default Vue.extend({
     }
   },
   computed: {
-    ...mapState(['ui', 'textile', 'accounts']),
+    ...mapState({
+      ui: (state) => (state as RootState).ui,
+      textile: (state) => (state as RootState).textile,
+      accounts: (state) => (state as RootState).accounts,
+      isGroup: (state) => (state as RootState).conversation.type === 'group',
+    }),
     ...mapGetters('friends', ['findFriendByAddress']),
     hasReactions(): boolean {
       return (
@@ -230,6 +236,10 @@ export default Vue.extend({
      * @example
      */
     setReplyChatbarContent() {
+      if (this.isGroup) {
+        this.toggleModal(ModalWindows.CALL_TO_ACTION)
+        return
+      }
       const myTextilePublicKey = this.$TextileManager.getIdentityPublicKey()
       const { id, type, payload, to, from } = this.$props.message
       let finalPayload = payload
@@ -253,6 +263,10 @@ export default Vue.extend({
      * @example
      */
     emojiReaction(e: MouseEvent) {
+      if (this.isGroup) {
+        this.toggleModal(ModalWindows.CALL_TO_ACTION)
+        return
+      }
       const myTextilePublicKey = this.$TextileManager.getIdentityPublicKey()
       this.$store.commit('ui/settingReaction', {
         status: true,
@@ -350,6 +364,12 @@ export default Vue.extend({
 
       return response.blob()
     },
+    toggleModal(modalName: ModalWindows) {
+      this.$store.commit('ui/toggleModal', {
+        name: modalName,
+        state: !this.ui.modals[modalName],
+      })
+    },
   },
 })
 </script>

components/views/chat/message/actions/Actions.html

@@ -1,7 +1,8 @@
 <div class="message-actions">
   <div
     class="reply-command"
-    v-tooltip.top="$t('ui.emotes')"
+    :class="{'coming-soon': isGroup}"
+    v-tooltip.top="$t(isGroup ? 'ui.coming_soon' : 'ui.emotes')"
     @click="emojiReaction"
   >
     <smile-icon
@@ -12,7 +13,8 @@
   <div
     v-if="!hideReply"
     class="reply-command"
-    v-tooltip.top="$t('messaging.reply')"
+    :class="{'coming-soon': isGroup}"
+    v-tooltip.top="$t(isGroup ? 'ui.coming_soon' : 'messaging.reply')"
     @click="setReplyChatbarContent"
   >
     <corner-down-right-icon size="1x" :class="'control-icon'" />

components/views/chat/message/actions/Actions.vue

@@ -12,6 +12,7 @@ import {
 import { mapState } from 'vuex'
 import { UIMessage } from '~/types/messaging'
 import { ModalWindows } from '~/store/ui/types'
+import { RootState } from '~/types/store/store'
 
 export default Vue.extend({
   components: {
@@ -57,10 +58,14 @@ export default Vue.extend({
     }
   },
   computed: {
-    ...mapState(['ui', 'accounts']),
+    ...mapState({
+      ui: (state) => (state as RootState).ui,
+      accounts: (state) => (state as RootState).accounts,
+      isGroup: (state) => (state as RootState).conversation.type === 'group',
+    }),
     isEditable(): boolean {
       return (
-        this.message.from === this.accounts.details.textilePubkey &&
+        this.message.from === this.accounts.details?.textilePubkey &&
         !(this.message.type === 'glyph' || this.message.type === 'file')
       )
     },

locales/en-US.js

@@ -26,6 +26,7 @@ export default {
     copied: 'ATTN: Copied to clipboard.',
     send: 'Send',
     emotes: 'Emoji',
+    coming_soon: 'Coming Soon',
     glyphs: 'Glyphs',
     fullscreen: 'Fullscreen',
     exit_fullscreen: 'Exit fullscreen',
@@ -113,7 +114,7 @@ export default {
     turn_off_camera: 'Turn Off Camera',
     turn_on_camera: 'Turn On Camera',
     crop: 'Crop',
-    edit: 'Edit\nComing Soon',
+    edit: 'Coming Soon',
     end_stream: 'End Stream',
     not_connected: 'Offline calling unavailable',
     not_available: 'Not available yet',