Feature messaging

components/tailored/core/chatbar/Chatbar.vue

@@ -1,12 +1,10 @@
 <template src="./Chatbar.html"></template>
 
 <script lang="ts">
-import Vue from 'vue'
+import Vue, { PropType } from 'vue'
 import { mapState } from 'vuex'
 
-import {
-  TerminalIcon,
-} from 'satellite-lucide-icons'
+import { TerminalIcon } from 'satellite-lucide-icons'
 
 import FileUpload from '../fileupload/FileUpload.vue'
 import {
@@ -16,6 +14,7 @@ import {
   commands,
   isArgsValid,
 } from '~/libraries/ui/Commands'
+import { Friend } from '~/types/ui/friends'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -37,6 +36,11 @@ export default Vue.extend({
       maxChars: 256,
     }
   },
+  props: {
+    recipient: {
+      type: Object as PropType<Friend>,
+    },
+  },
   computed: {
     ...mapState(['ui']),
     /**
@@ -119,7 +123,10 @@ export default Vue.extend({
       const messageBox = this.$refs.messageuser as HTMLElement
       const wrap = this.$refs.wrap as HTMLElement
       // Delete extra character when it exceeds the charlimit
-      if (messageBox.innerHTML && messageBox.innerHTML.length > this.$data.maxChars + 1) {
+      if (
+        messageBox.innerHTML &&
+        messageBox.innerHTML.length > this.$data.maxChars + 1
+      ) {
         messageBox.innerHTML = messageBox.innerHTML.slice(0, -1)
         let sel = window.getSelection()
         sel?.selectAllChildren(messageBox)
@@ -170,20 +177,31 @@ export default Vue.extend({
      * @example v-on:click="sendMessage"
      */
     sendMessage() {
-      if (!this.value) return
-      this.$store.dispatch('ui/sendMessage', {
-        value: this.value,
-        user: this.$mock.user,
-        isOwner: true,
-      })
+      if (!this.recipient) {
+        return
+      }
+
+      if (this.ui.replyChatbarContent.from) {
+        this.$store.dispatch('textile/sendReplyMessage', {
+          to: this.recipient.textilePubkey,
+          text: this.value,
+          replyTo: this.ui.replyChatbarContent.messageID,
+        })
+      } else {
+        this.$store.dispatch('textile/sendTextMessage', {
+          to: this.recipient.textilePubkey,
+          text: this.value,
+        })
+      }
+
       const messageBox = this.$refs.messageuser as HTMLElement
       // Clear Chatbar
       messageBox.innerHTML = ''
       this.value = ''
     },
     /**
      * @method handleDrop
-     * @description Allows the drag and drop of files into the chatbar to auto open 
+     * @description Allows the drag and drop of files into the chatbar to auto open
      * the file uploader
      */
     handleDrop(e: any) {

components/tailored/core/user/User.vue

@@ -22,11 +22,6 @@ export default Vue.extend({
   props: {
     user: {
       type: Object as PropType<User>,
-      default: () => ({
-        name: '',
-        address: '',
-        status: '',
-      }),
       required: true,
     },
     isTyping: {
@@ -56,7 +51,7 @@ export default Vue.extend({
      * @example ---
      */
     navigateToUser() {
-      this.$router.push('/chat/direct')
+      this.$router.push(`/chat/direct/${this.user.address}`)
     },
   },
 })

components/tailored/friends/friend/Friend.vue

@@ -61,8 +61,6 @@ export default Vue.extend({
       try {
         await this.$store.dispatch('friends/createFriendRequest', {
           friendToKey: new PublicKey(this.$props.friend.account.accountId),
-          textileMailboxId:
-            'cafkwqw5h6zlko43enhmrrlksx3fhitmojzpnwtagbrjcflm737btxbq', // TO DO : change textileMailboxId when it'll be available
         })
         this.$emit('requestSent', '')
       } catch (e) {
@@ -76,8 +74,6 @@ export default Vue.extend({
       try {
         await this.$store.dispatch('friends/acceptFriendRequest', {
           friendRequest: this.$props.friend.request,
-          textileMailboxId:
-            'cafkwqw5h6zlko43enhmrrlksx3fhitmojzpnwtagbrjcflm737btxbq', // TO DO : change textileMailboxId when it'll be available
         })
       } finally {
         this.loading = ''

components/tailored/messaging/enhancers/Enhancers.vue

@@ -72,19 +72,14 @@ export default Vue.extend({
      */
     addEmoji(emoji: any) {
       if (this.ui.settingReaction.status) {
-        this.$store.dispatch('ui/addReaction', {
+        this.$store.dispatch('textile/sendReactionMessage', {
+          to: this.ui.settingReaction.to,
           emoji,
-          reactor: this.$mock.user.name,
-          groupID: this.ui.settingReaction.groupID,
-          messageID: this.ui.settingReaction.messageID,
-          replyID: this.ui.settingReaction.replyID,
+          reactTo: this.ui.settingReaction.messageID,
         })
         this.toggleEnhancers()
       } else {
-        this.$store.commit(
-          'ui/chatbarContent',
-          this.ui.chatbarContent + emoji
-        )
+        this.$store.commit('ui/chatbarContent', this.ui.chatbarContent + emoji)
       }
     },
     /**

components/tailored/messaging/group/Group.html

@@ -6,13 +6,12 @@
     <div class="group-heading">
       <span v-on:click="showQuickProfile">
         <!-- <TypographyTitle :size="6" :text="$mock.users.filter(u => u.address === group.from)[0].name" /> -->
-        <UiUsername :username="$mock.users.filter(u => u.address === group.from)[0].name"
-          :badge="$mock.users.filter(u => u.address === group.from)[0].badge" />
+        <UiUsername :username="username" :badge="badge" />
       </span>
       <TypographyText :text="$dayjs(group.at).from()" />
     </div>
     <div class="group-messages">
-      <TailoredMessagingMessage v-for="message in group.messages" :group="group" :message="message" :from="$mock.users.filter(u => u.address === group.from)[0].name" :key="message.id" />
+      <TailoredMessagingMessage v-for="message in group.messages" :group="group" :message="message" :from="username" :key="message.id" />
     </div>
   </div>
 </div>

components/tailored/messaging/group/Group.vue

@@ -3,12 +3,23 @@
 import Vue, { PropType } from 'vue'
 
 import { Group } from '~/types/messaging'
+import { User } from '~/types/ui/user'
+import { getUsernameFromState } from '~/utilities/Messaging'
 
 export default Vue.extend({
   props: {
     group: {
       type: Object as PropType<Group>,
-      default: () => {},
+      // default: () => {},
+    },
+  },
+  computed: {
+    username() {
+      return getUsernameFromState(this.group.from, this.$store.state)
+    },
+    badge() {
+      // $mock.users.filter(u => u.address === group.from)[0].badge
+      return ''
     },
   },
   methods: {

components/tailored/messaging/message/Message.html

@@ -28,6 +28,6 @@
       :group="this.$props.group"
       :key="`${this.$props.message.id}-${hasReactions ? this.$props.message.reactions.length : 0}`" />
   </div>
-  <TailoredMessagingMessageReply :message="message" :group="group" v-if="!hideActions"/>
+  <TailoredMessagingMessageReply :message="message" :group="group" v-if="!hideActions" :from="from"/>
   <TailoredMessagingMessageEdit v-if="messageEdit" :message="message.payload" @commitMessage="saveMessage" />
 </div>

components/tailored/messaging/message/Message.vue

@@ -108,7 +108,8 @@ export default Vue.extend({
      * @example
      */
     setReplyChatbarContent() {
-      const { id, type, payload } = this.$props.message
+      const myTextilePublicKey = this.$TextileManager.getIdentityPublicKey()
+      const { id, type, payload, to, from } = this.$props.message
       let finalPayload = payload
       if (['image', 'video', 'audio', 'file'].includes(type)) {
         finalPayload = `*${this.$t('conversation.multimedia')}*`
@@ -118,6 +119,8 @@ export default Vue.extend({
         id,
         payload: finalPayload,
         from: this.$props.from,
+        messageID: this.$props.message.id,
+        to: to === myTextilePublicKey ? from : to,
       })
     },
     /**
@@ -126,10 +129,15 @@ export default Vue.extend({
      * @example
      */
     emojiReaction() {
+      const myTextilePublicKey = this.$TextileManager.getIdentityPublicKey()
       this.$store.commit('ui/settingReaction', {
         status: true,
         groupID: this.$props.group.id,
         messageID: this.$props.message.id,
+        to:
+          this.$props.message.to === myTextilePublicKey
+            ? this.$props.message.from
+            : this.$props.message.to,
       })
       this.$store.commit('ui/toggleEnhancers', { show: true, floating: true })
     },

components/tailored/messaging/message/reactions/Reactions.html

@@ -2,14 +2,8 @@
   <div v-for="reaction in reactions">
     <div v-if="hovering === reaction.emoji" class="reactors">
       <div class="reactors-emoji">{{reaction.emoji}}</div>
-      <div class="reactors-list" v-if="reaction.reactors.length > 3">
-        <span class="reactor">{{reaction.reactors[0]}}, {{reaction.reactors[1]}}, {{reaction.reactors[2]}}, and {{reaction.reactors.length - 3}} others...</span>
-      </div>
-      <div class="reactors-list" v-else>
-        <div v-for="reactor in reaction.reactors" class="reactor">
-          <span v-if="reactor === reaction.reactors[reaction.reactors.length-1]">{{reactor}}</span>
-          <span v-else>{{reactor}},</span>
-        </div>
+      <div class="reactors-list" >
+        <span class="reactor">{{getReactorsList(reaction.reactors)}}</span>
       </div>
     </div>
     <div :class="didIReact(reaction) ? 'emoji-reaction emoji-reacted' : 'emoji-reaction'" @click="quickReaction(reaction.emoji)" @mouseenter="toggleReactors(reaction.emoji)" @mouseleave="toggleReactors(null)">

components/tailored/messaging/message/reactions/Reactions.vue

@@ -3,7 +3,8 @@
 // eslint-disable-next-line import/named
 import Vue, { PropType } from 'vue'
 import { SmileIcon } from 'satellite-lucide-icons'
-import { Message, Group, Reply } from '~/types/messaging'
+import { Group, Reply, UIMessage } from '~/types/messaging'
+import { getUsernameFromState } from '~/utilities/Messaging'
 
 export default Vue.extend({
   components: {
@@ -20,7 +21,7 @@ export default Vue.extend({
       }),
     },
     message: {
-      type: Object as PropType<Message>,
+      type: Object as PropType<UIMessage>,
       default: () => ({
         id: '0',
         at: 1620515543000,
@@ -52,11 +53,15 @@ export default Vue.extend({
      * @example
      */
     emojiReaction() {
+      const myTextilePublicKey = this.$TextileManager.getIdentityPublicKey()
       this.$store.commit('ui/settingReaction', {
         status: true,
         groupID: this.$props.group.id,
         messageID: this.$props.message.id,
-        replyID: this.$props.reply.id,
+        to:
+          this.$props.message.to === myTextilePublicKey
+            ? this.$props.message.from
+            : this.$props.message.to,
       })
       this.$store.commit('ui/toggleEnhancers', { show: true })
     },
@@ -94,6 +99,24 @@ export default Vue.extend({
     didIReact(reaction: any) {
       return reaction.reactors.includes(this.$mock.user.name)
     },
+    getReactorsList(reactors: string[], limit = 3) {
+      const numberOfReactors = reactors.length
+      const list = reactors
+        .slice(0, limit)
+        .reduce(
+          (reactorsList, reactorPublickey, i) =>
+            (i === 0 ? '' : ',') +
+            reactorsList +
+            getUsernameFromState(reactorPublickey, this.$store.state),
+          ''
+        )
+
+      return `${list}${
+        numberOfReactors > limit
+          ? `and ${numberOfReactors - limit} more ...`
+          : ''
+      }`
+    },
   },
 })
 </script>

components/tailored/messaging/message/reply/Reply.html

@@ -12,8 +12,8 @@
       <div class="reply-body">
         <div class="reply-heading">
           <span v-on:click="showQuickProfile">
-            <UiUsername :username="$mock.users.filter(u => u.address === reply.from)[0].name"
-              :badge="$mock.users.filter(u => u.address === reply.from)[0].badge" />
+            <!-- TODO: update badges -->
+            <UiUsername :username="getUsernameFromReply(reply)" :badge="''" />
           </span>
           <TypographyText :text="$dayjs(reply.at).from()" />
         </div>