feat(friends): can click on a friend and open direct message (#3893)

* feat(friends): friends WIP

* feat(friends): friends WIP, cleanups

* feat(friends): chat WIP, progress

* feat(friends): chat WIP, ChatManager

* feat(chat): friends and chat progress

* feat(chat): friends refactor wip

* feat(chat): user B gets notified for messages

* feat(chat): ui messages progress

* feat(chat): resolved conflicts

Co-authored-by: Drew Ewing <drew.ewing@satellite.im>

components/views/chat/chatbar/Chatbar.vue

@@ -1,6 +1,6 @@
 <template src="./Chatbar.html"></template>
 <script lang="ts">
-import Vue from 'vue'
+import Vue, { PropType } from 'vue'
 import { mapState, mapGetters } from 'vuex'
 import { throttle } from 'lodash'
 import { TerminalIcon } from 'satellite-lucide-icons'
@@ -15,17 +15,23 @@ import {
 } from '~/libraries/Enums/enums'
 import { Config } from '~/config'
 import { UploadDropItemType } from '~/types/files/file'
-import { RootState } from '~/types/store/store'
 import { ChatText } from '~/store/chat/types'
+// import { Group } from '~/types/messaging'
+import { RootState } from '~/types/store/store'
 import iridium from '~/libraries/Iridium/IridiumManager'
-
 export default Vue.extend({
   components: {
     TerminalIcon,
   },
+  props: {
+    recipient: {
+      type: Object as PropType<Friend | Group>,
+      default: () => {},
+    },
+  },
   computed: {
     ...mapGetters({
-      recipient: 'conversation/recipient',
+      // recipient: 'conversation/recipient',
       getFiles: 'chat/getFiles',
       isGroup: 'conversation/isGroup',
     }),

components/views/chat/conversation/Conversation.html

@@ -1,68 +1,34 @@
-<div id="conversation" class="conversation">
-  <UiChatScroll
-    ref="chatScroll"
-    :prevent-scroll-offset="10"
-    :older-messages-scroll-offset="300"
-    :class="{'media-open': isActiveCall}"
-    enable-wrap
-  >
-    <div class="conversation-content">
-      <div class="group" v-for="message of messages">
-        <div v-if="message.type === 'direct'">
-          <p>{{message.body}}</p>
-        </div>
+<div id="conversation">
+  <UiLoadersMessage :count="3" v-if="loading" />
+  <div class="group" v-for="message of messages">
+    <div v-if="message.type === 'direct'">
+      <div v-if="message.from === did">
+        <p>SELF:</p>
       </div>
-      <!-- <div
-        class="group"
-        v-for="group in currentChat.messages"
-        :id="group.id"
-        :key="group.id"
-      >
-        <div v-if="group.type === 'group'">
-          <Group :group="group" :groupId="groupId" />
-        </div>
-        <div v-else-if="group.type === 'caret_divider'">
-          <UiCaretDivider text="New Messages" />
-        </div>
-        <div v-else-if="group.type === 'divider'">
-          <TypographyHorizontalRuleText :value="group.at.toString()" />
-        </div>
+      <div v-else>
+        <p>FRIEND:</p>
       </div>
-      <div
-        v-if="textile.messageLoading"
-        data-cy="loading-indicator"
-        class="zoop"
-      >
-        <UiLoadersLoadingBar />
-      </div> -->
+      <span>
+        <UiUserName :username="message.from" :badge="badge" />
+      </span>
+      <TypographyText :text="message.at" data-cy="chat-timestamp" />
+      <p>{{message.body}}</p>
     </div>
-    <UiChatInfo
-      v-if="showOlderMessageInfo"
-      :caption="$t('pages.chat.older_messages')"
-      class="conversation-info"
-      type="primary"
-      @click="handleClick()"
-    >
-      <chevron-down-icon size="1.5x" />
-      {{ $t('pages.chat.recent_messages') }}
-    </UiChatInfo>
-    <UiChatInfiniteScroll
-      class="conversation-infiniteScroll"
-      :class="{ 'is-reversed': isReversedScroll }"
-      :options="options"
-      @intersect="handleIntersect"
-    >
-      <template #placeholder>
-        <div class="conversation-loader">
-          <UiLoadersSpinner
-            data-cy="message-loading"
-            class="conversation-loader-spinner"
-            spinning
-          />
-          {{ $t('pages.chat.infinite_scroll.loading') }}
-        </div>
-      </template>
-      <template #no-more> <UiChatEncrypted /> </template>
-    </UiChatInfiniteScroll>
-  </UiChatScroll>
+    <p>--------</p>
+  </div>
+  <!-- 
+  <div class="group" v-for="message in messages">
+    <div v-if="message.type === 'direct'">
+      <Group :group="message" :key="message.id" :groupId="groupId" />
+    </div>
+    <div v-if="message.type === 'caret_divider'">
+      <UiCaretDivider text="New Messages" />
+    </div>
+    <div v-else-if="message.type === 'divider'">
+      <TypographyHorizontalRuleText :value="message.at.toString()" />
+    </div>
+  </div>
+  <div v-if="textile.messageLoading" data-cy="loading-indicator" class="zoop">
+    <UiLoadersLoadingBar />
+  </div> -->
 </div>

components/views/chat/conversation/Conversation.vue

@@ -24,6 +24,10 @@ export default Vue.extend({
       type: String,
       default: '',
     },
+    did: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     ...mapState({

components/views/friends/add/Add.vue

@@ -54,10 +54,16 @@ export default Vue.extend({
         this.error = this.$t('friends.already_friend') as string
       }
 
-      this.user = {
-        did: friendId,
-        name: friendId,
-        status: 'offline',
+      try {
+        const request = await iridium.friends?.requestCreate(friendId)
+        this.user = {
+          did: friendId,
+          name: friendId,
+          status: 'offline',
+        }
+        this.request = request
+      } catch (error) {
+        this.error = this.$t('friends.invalid_id') as string
       }
 
       this.searching = false

layouts/chat.vue

@@ -85,7 +85,7 @@
             </UiChatScroll>-->
             <Nuxt />
             <WalletMini v-if="ui.modals.walletMini" />
-            <Chatbar ref="chatbar" />
+            <Chatbar v-if="recipient" ref="chatbar" :recipient="recipient" />
           </DroppableWrapper>
         </swiper-slide>
         <swiper-slide v-if="$data.asidebar" class="aside-container">

libraries/Iridium/chat/ChatManager.ts

@@ -4,7 +4,7 @@ import {
   Iridium,
   Emitter,
   EmitterCallback,
-} from '@satellite-im/iridium/'
+} from '@satellite-im/iridium'
 // Iridium import above has static function called hash, use to hash this user id and the name of the chat
 
 import {
@@ -173,7 +173,6 @@ export default class ChatManager extends Emitter<ConversationMessage> {
    * @param message Message to be sent
    */
   async sendMessage(id: string, message: ConversationMessage) {
-    console.log('debug: | ChatManager | sendMessage | id', id)
     if (!this.iridium.connector) return
     const conversation = await this.getConversation(id)
     if (!conversation) {
@@ -199,15 +198,36 @@ export default class ChatManager extends Emitter<ConversationMessage> {
       action: 'message',
       message: messageCID,
     })
-    await this.iridium.connector.send(conversation, {
-      to: await Promise.all(
-        conversation.participants.map((p) => Iridium.DIDToPeerId(p)),
-      ),
-    })
+    await this.iridium.connector.send(
+      { type: 'chat/message', conversationId: id, messageCID },
+      {
+        to: await Promise.all(
+          conversation.participants.map((p) => Iridium.DIDToPeerId(p)),
+        ),
+      },
+    )
     this.emit(`conversation/${id}`, {
       action: 'message',
       message: messageCID,
       from: this.iridium.connector.id,
     })
   }
+
+  /**
+   * @method subscribeToChannel
+   * @description Adds a watcher to channel activity
+   * @param did {string} did
+   * @param onMessage {EmitterCallback<IridiumMessage>} function to be called
+   */
+  async subscribeToChannel(
+    did: string,
+    onMessage: EmitterCallback<ConversationMessage>,
+  ) {
+    const pid = await Iridium.DIDToPeerId(did)
+    if (this.iridium.connector._peers[pid])
+      this.iridium.connector.on(
+        this.iridium.connector._peers[pid].channel,
+        onMessage,
+      )
+  }
 }

pages/chat/direct/Direct.html

@@ -1,4 +1,4 @@
 <div id="direct">
-  <!-- <UiChatEncrypted v-if="$route.params.address" /> -->
-  <Conversation :messages="messages" :loading="false" />
+  <UiChatEncrypted v-if="$route.params.address" />
+  <Conversation :did="did" :messages="messages" :loading="false" />
 </div>

pages/chat/direct/_address.vue

@@ -16,7 +16,7 @@ export default Vue.extend({
   data() {
     return {
       messages: [],
-      replies: [],
+      did: iridium.connector.id,
     }
   },
   computed: {
@@ -91,6 +91,13 @@ export default Vue.extend({
         const message = await iridium.connector.load(event.message)
         this.messages.push(message)
       })
+      await iridium.chat.subscribeToChannel(this.friend, async (event) => {
+        if (event.payload.messageCID && event.payload.type === 'chat/message') {
+          this.messages.push(
+            await iridium.connector.load(event.payload.messageCID),
+          )
+        }
+      })
     }
   },
 })