feat(chat): connect file upload to iridium

components/ui/Chat/Image/Image.less

@@ -1,5 +1,6 @@
 .image {
-  padding: @light-spacing 0;
+  display: flex;
+  flex-grow: 0;
   border-radius: @corner-rounding;
 
   .image-container {

components/views/chat/chatbar/Chatbar.vue

@@ -19,6 +19,7 @@ import { ChatbarUploadRef } from '~/components/views/chat/chatbar/upload/Upload.
 import {
   Conversation,
   ConversationMessagePayload,
+  MessageAttachment,
 } from '~/libraries/Iridium/chat/types'
 
 const Chatbar = Vue.extend({
@@ -196,32 +197,50 @@ const Chatbar = Vue.extend({
       }
       this.smartTypingStart()
     },
+    async uploadAttachments(): Promise<MessageAttachment[]> {
+      const conversationId = this.$route.params.id
+      return await Promise.all(
+        this.files.map(async (file, index) => {
+          return await iridium.chat.addFile(file, {
+            progress: (bytes) => {
+              this.$store.commit('chat/setFileProgress', {
+                id: conversationId,
+                index,
+                progress: Math.floor((bytes / file.file.size) * 100),
+              })
+            },
+          })
+        }),
+      )
+    },
     /**
      * @method sendMessage
      * @description Sends message by calling the sendMessage action with current data and
      * then setting all related fields to their default (empty)
      * @example v-on:click="sendMessage"
      */
     async sendMessage() {
-      // set id in case recipient changes during send
-      const conversationId = this.$route.params.id
-      // if there are any files attached to this chat, send
-      // await this.sendFiles()
-      // return if input is empty or over max length
       if (
-        this.text.length > this.$Config.chat.maxChars ||
-        !this.text.trim().length
+        !this.files.length &&
+        (this.text.length > this.$Config.chat.maxChars ||
+          !this.text.trim().length)
       ) {
         return
       }
       const value = this.text
       this.text = ''
 
+      const conversationId = this.$route.params.id
+      const attachments = await this.uploadAttachments()
+
+      this.$store.commit('chat/deleteFiles', conversationId)
+
       const payload: ConversationMessagePayload = {
         conversationId,
         type: 'text',
         body: value,
         at: Date.now(),
+        attachments,
       }
 
       if (this.chat.replyChatbarMessages[conversationId]) {

components/views/chat/message/Message.html

@@ -26,6 +26,7 @@
         :class="{ bigmoji: containsOnlyEmoji(message.body) }"
         data-cy="chat-message"
       />
+      <MessageAttachments :attachments="message.attachments" />
       <MessageGlyph v-if="message.glyph" :glyph="message.glyph" />
       <span class="status editing" v-if="message.editingAt">
         <UiLoadersSpinner spinning />

components/views/chat/message/attachments/Attachments.html

@@ -0,0 +1,7 @@
+<div class="message-attachments">
+  <MessageAttachmentsItem
+    v-for="(attachment, index) in attachments"
+    :key="attachment.id + index"
+    :attachment="attachment"
+  />
+</div>

components/views/chat/message/attachments/Attachments.less

@@ -0,0 +1,8 @@
+.message-attachments {
+  display: flex;
+  gap: 1rem;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin: 0.5rem 0;
+}

components/views/chat/message/attachments/Attachments.vue

@@ -0,0 +1,17 @@
+<template src="./Attachments.html"></template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import { MessageAttachment } from '~/libraries/Iridium/chat/types'
+
+export default Vue.extend({
+  props: {
+    attachments: {
+      type: [] as PropType<MessageAttachment>,
+      required: true,
+    },
+  },
+})
+</script>
+
+<style scoped lang="less" src="./Attachments.less"></style>

components/views/chat/message/attachments/Item/Item.html

@@ -0,0 +1,33 @@
+<div class="message-attachments-item">
+  <UiChatImage v-if="isEmbeddable" :image="attachment" :alt="attachment.name" />
+  <template v-else>
+    <div class="details" @click="download">
+      <file-icon size="2x" class="file-icon" />
+      <div class="file-info">
+        <TypographyText class="ellipsis">
+          {{ attachment.name }}
+        </TypographyText>
+        <TypographyText font="heading" color="dark" size="sm">
+          {{ $filesize(attachment.size) }} - {{ attachment.type }}
+        </TypographyText>
+      </div>
+      <InteractablesButton
+        @click="download"
+        color="primary"
+        data-cy="chat-file"
+        :rel="$t('controls.download')"
+      >
+        <download-icon size="1x" />
+      </InteractablesButton>
+    </div>
+    <a
+      class="download-link"
+      ref="download"
+      download
+      :href="attachment.src"
+      :rel="$t('controls.download')"
+      noopener
+      noreferrer
+    ></a>
+  </template>
+</div>

components/views/chat/message/attachments/Item/Item.less

@@ -0,0 +1,34 @@
+.message-attachments-item {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 0;
+  justify-content: stretch;
+  background: @semitransparent-lighter-gradient;
+  box-shadow: @ui-shadow;
+  border-radius: 4px;
+  overflow: hidden;
+
+  .details {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: stretch;
+    padding: 0.5rem 1rem;
+    width: 300px;
+    overflow: hidden;
+
+    > * {
+      flex-shrink: 0;
+    }
+
+    .file-info {
+      flex-shrink: 1;
+      overflow: hidden;
+      cursor: pointer;
+    }
+  }
+
+  .download-link {
+    display: none;
+  }
+}

components/views/chat/message/attachments/Item/Item.vue

@@ -0,0 +1,34 @@
+<template src="./Item.html"></template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue'
+import { DownloadIcon, FileIcon } from 'satellite-lucide-icons'
+import { MessageAttachment } from '~/libraries/Iridium/chat/types'
+import { isMimeEmbeddableImage } from '~/utilities/FileType'
+
+export default Vue.extend({
+  components: {
+    DownloadIcon,
+    FileIcon,
+  },
+  props: {
+    attachment: {
+      type: {} as PropType<MessageAttachment>,
+      required: true,
+    },
+  },
+  computed: {
+    isEmbeddable(): boolean {
+      return isMimeEmbeddableImage(this.attachment.type)
+    },
+  },
+  methods: {
+    download() {
+      const anchor = this.$refs.download as HTMLAnchorElement
+      anchor.click()
+    },
+  },
+})
+</script>
+
+<style scoped lang="less" src="./Item.less"></style>

libraries/Iridium/chat/ChatManager.ts

@@ -5,19 +5,27 @@ import {
   didUtils,
   IridiumPubsubMessage,
 } from '@satellite-im/iridium'
+import type { AddOptions, AddResult } from 'ipfs-core-types/root'
+import type { IPFS } from 'ipfs-core-types'
 import type { SyncSubscriptionResponse } from '@satellite-im/iridium/src/sync/agent'
 import type { EmitterCallback } from '@satellite-im/iridium'
-
+import { ItemErrors } from '../files/types'
 import {
   Conversation,
   ConversationMessage,
   ChatError,
   MessageReactionPayload,
   ConversationMessagePayload,
+  MessageAttachment,
 } from '~/libraries/Iridium/chat/types'
 import { Friend } from '~/libraries/Iridium/friends/types'
 import { IridiumManager } from '~/libraries/Iridium/IridiumManager'
 import logger from '~/plugins/local/logger'
+import { ChatFileUpload } from '~/store/chat/types'
+import createThumbnail from '~/utilities/Thumbnail'
+import { FILE_TYPE } from '~/libraries/Files/types/file'
+import { blobToStream } from '~/utilities/BlobManip'
+import isNSFW from '~/utilities/NSFW'
 
 export type ConversationPubsubEvent = IridiumMessage<{
   message: ConversationMessage
@@ -285,6 +293,36 @@ export default class ChatManager extends Emitter<ConversationMessage> {
     this.off(`conversations/${id}`, onMessage)
   }
 
+  async addFile(
+    upload: ChatFileUpload,
+    options?: AddOptions,
+  ): Promise<MessageAttachment> {
+    if (upload.file.size === 0) {
+      throw new Error('TODO')
+    }
+    const thumbnailBlob = await createThumbnail(upload.file, 400)
+
+    return {
+      id: (await this.upload(upload.file, options)).path,
+      name: upload.file.name,
+      size: upload.file.size,
+      nsfw: await isNSFW(upload.file),
+      type: Object.values(FILE_TYPE).includes(upload.file.type as FILE_TYPE)
+        ? (upload.file.type as FILE_TYPE)
+        : FILE_TYPE.GENERIC,
+      thumbnail: thumbnailBlob
+        ? (await this.upload(thumbnailBlob, options)).path
+        : '',
+    }
+  }
+
+  async upload(file: Blob, options?: AddOptions): Promise<AddResult> {
+    return await (this.iridium.connector?.ipfs as IPFS).add(
+      blobToStream(file),
+      options,
+    )
+  }
+
   /**
    * @method sendMessage
    * @description Sends a message to the given groupChat
@@ -301,7 +339,7 @@ export default class ChatManager extends Emitter<ConversationMessage> {
         ...payload,
         from: this.iridium.connector.id,
         reactions: {},
-        attachments: [],
+        attachments: payload.attachments,
       },
       {
         encrypt: { recipients: conversation.participants },
@@ -321,7 +359,7 @@ export default class ChatManager extends Emitter<ConversationMessage> {
       ...payload,
       from: this.iridium.connector.id,
       reactions: {},
-      attachments: [],
+      attachments: payload.attachments,
       id: messageCID,
     }
     Vue.set(

libraries/Iridium/chat/types.ts

@@ -1,10 +1,19 @@
-import { Glyph } from '~/types/ui/glyph'
+import { FILE_TYPE } from '~/libraries/Files/types/file'
 
 export type MessageGlyph = {
   packId: string
   src: string
 }
 
+export type MessageAttachment = {
+  id: string
+  name: string
+  type: FILE_TYPE
+  size: number
+  thumbnail: string
+  nsfw: boolean
+}
+
 export type ConversationMessageType =
   | 'text'
   | 'file'
@@ -21,14 +30,14 @@ export type ConversationMessage = {
   at: number
   body?: string
   glyph?: MessageGlyph
-  attachments: string[]
+  attachments: MessageAttachment[]
   reactions: { [key: string]: string[] }
   replyToId?: string
 }
 
 export type ConversationMessagePayload = Omit<
   ConversationMessage,
-  'id' | 'from' | 'reactions' | 'attachments'
+  'id' | 'from' | 'reactions'
 >
 
 export type MessageReactionPayload = {