Improve behavior of sending messages with attachments

frontend/model/contracts/shared/functions.js

@@ -51,12 +51,18 @@ export function createPaymentInfo (paymentHash: string, payment: Object): {
 // chatroom.js related
 
 export function createMessage ({ meta, data, hash, height, state, pending, innerSigningContractID }: {
-  meta: Object, data: Object, hash: string, height: number, state?: Object, pending?: boolean, innerSigningContractID?: String
+  meta: Object,
+  data: Object,
+  hash: string,
+  height: number,
+  state?: Object,
+  pending?: boolean,
+  innerSigningContractID?: String
 }): Object {
-  const { type, text, replyingMessage } = data
+  const { type, text, replyingMessage, attachments } = data
   const { createdDate } = meta
 
-  let newMessage = {
+  let newMessage: any = {
     type,
     hash,
     height,
@@ -66,7 +72,13 @@ export function createMessage ({ meta, data, hash, height, state, pending, inner
   }
 
   if (type === MESSAGE_TYPES.TEXT) {
-    newMessage = !replyingMessage ? { ...newMessage, text } : { ...newMessage, text, replyingMessage }
+    newMessage = { ...newMessage, text }
+    if (replyingMessage) {
+      newMessage = { ...newMessage, replyingMessage }
+    }
+    if (attachments) {
+      newMessage = { ...newMessage, attachments }
+    }
   } else if (type === MESSAGE_TYPES.POLL) {
     const pollData = data.pollData
 

frontend/model/contracts/shared/types.js

@@ -2,7 +2,7 @@
 
 import {
   objectOf, objectMaybeOf, arrayOf, unionOf,
-  string, optional, number, mapOf, literalOf
+  object, string, optional, number, mapOf, literalOf
 } from '~/frontend/model/contracts/misc/flowTyper.js'
 import {
   CHATROOM_TYPES, CHATROOM_PRIVACY_LEVEL,
@@ -44,6 +44,14 @@ export const messageType: any = objectMaybeOf({
     type: unionOf(...Object.values(MESSAGE_NOTIFICATIONS).map(v => literalOf(v))),
     params: mapOf(string, string) // { username }
   }),
+  attachments: arrayOf(objectOf({
+    name: string,
+    mimeType: string,
+    downloadData: objectOf({
+      manifestCid: string,
+      downloadParams: optional(object)
+    })
+  })),
   replyingMessage: objectOf({
     hash: string, // scroll to the original message and highlight
     text: string // display text(if too long, truncate)

frontend/utils/constants.js

@@ -5,12 +5,17 @@
 
 export const CHAT_ATTACHMENT_SUPPORTED_EXTENSIONS = [
   // reference: https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types
-  '.avif', '.bmp', '.gif', '.ico', '.jpeg', '.jpg', '.png', '.svg', '.tif', '.tiff', '.webp', // image
-  '.aac', '.cda', '.mid', '.midi', '.mp3', '.oga', '.opus', '.wav', '.weba', // audio
-  '.avi', '.mov', '.mp4', '.mpeg', '.ogv', '.ogx', '.ts', '.webm', '.3gp', '.3g2', // video
-  '.arc', '.bz', '.bz2', '.epub', '.gz', '.jar', '.rar', '.tar', '.zip', '.7z', // archive
-  '.csh', '.css', '.csv', '.doc', '.docx', '.htm', '.html', '.ics', '.js', '.json', '.jsonld', '.md', '.mjs',
-  '.odp', '.ods', '.odt', '.pdf', '.php', '.ppt', '.pptx', '.sh', '.txt', '.xhtml', '.xls', '.xlsx', '.xml', // common text/document
-  '.eot', '.otf', '.rtf', '.ttf', '.woff', '.woff2', // font
-  '.abw', '.azw', '.bin', '.csh', '.db', '.mpkg', '.vsd', '.xul' // miscellaneous
+  'avif', 'bmp', 'gif', 'ico', 'jpeg', 'jpg', 'png', 'svg', 'tif', 'tiff', 'webp', // image
+  'aac', 'cda', 'mid', 'midi', 'mp3', 'oga', 'opus', 'wav', 'weba', // audio
+  'avi', 'mov', 'mp4', 'mpeg', 'ogv', 'ogx', 'ts', 'webm', '3gp', '3g2', // video
+  'arc', 'bz', 'bz2', 'epub', 'gz', 'jar', 'rar', 'tar', 'zip', '7z', // archive
+  'csh', 'css', 'csv', 'doc', 'docx', 'htm', 'html', 'ics', 'js', 'json', 'jsonld', 'md', 'mjs', 'vue', 'ts', 'scss',
+  'odp', 'ods', 'odt', 'pdf', 'php', 'ppt', 'pptx', 'sh', 'txt', 'xhtml', 'xls', 'xlsx', 'xml', // common text/document
+  'eot', 'otf', 'rtf', 'ttf', 'woff', 'woff2', // font
+  'abw', 'azw', 'bin', 'csh', 'db', 'mpkg', 'vsd', 'xul' // miscellaneous
 ]
+
+// NOTE: Below value was obtained from the '413 Payload Too Large' server error
+//       meaning if this limit is updated on the server-side, an update is required here too.
+// TODO: fetch this value from a server API
+export const CHAT_ATTACHMENT_SIZE_LIMIT = 6291456 // in byte.

frontend/utils/image.js

@@ -2,6 +2,11 @@
 
 import sbp from '@sbp/sbp'
 
+// Copied from https://stackoverflow.com/questions/11876175/how-to-get-a-file-or-blob-from-an-object-url
+export function objectURLtoBlob (url: string): Promise<Blob> {
+  return fetch(url).then(r => r.blob())
+}
+
 // Copied from https://stackoverflow.com/a/27980815/4737729
 export function imageDataURItoBlob (dataURI: string): Blob {
   const [prefix, data] = dataURI.split(',')

frontend/views/containers/chatroom/ChatMain.vue

@@ -63,6 +63,7 @@
           :messageId='message.id'
           :messageHash='message.hash'
           :text='message.text'
+          :attachments='message.attachments'
           :type='message.type'
           :notification='message.notification'
           :proposal='message.proposal'
@@ -77,7 +78,7 @@
           :avatar='avatar(message.from)'
           :variant='variant(message)'
           :isSameSender='isSameSender(index)'
-          :isCurrentUser='isCurrentUser(message.from)'
+          :isMsgSender='isMsgSender(message.from)'
           :class='{removed: message.delete}'
           @retry='retryMessage(index)'
           @reply='replyMessage(message)'
@@ -117,7 +118,6 @@ import { mapGetters } from 'vuex'
 import { Vue } from '@common/common.js'
 import Avatar from '@components/Avatar.vue'
 import InfiniteLoading from 'vue-infinite-loading'
-import Loading from '@components/Loading.vue'
 import Message from './Message.vue'
 import MessageInteractive from './MessageInteractive.vue'
 import MessageNotification from './MessageNotification.vue'
@@ -133,10 +133,11 @@ import {
   CHATROOM_ACTIONS_PER_PAGE,
   CHATROOM_MAX_ARCHIVE_ACTION_PAGES
 } from '@model/contracts/shared/constants.js'
-import { findMessageIdx } from '@model/contracts/shared/functions.js'
+import { findMessageIdx, createMessage } from '@model/contracts/shared/functions.js'
 import { proximityDate, MINS_MILLIS } from '@model/contracts/shared/time.js'
 import { cloneDeep, debounce, throttle } from '@model/contracts/shared/giLodash.js'
 import { EVENT_HANDLED } from '~/shared/domains/chelonia/events.js'
+import { objectURLtoBlob } from '@utils/image.js'
 
 const ignorableScrollDistanceInPixel = 500
 
@@ -210,7 +211,6 @@ export default ({
     ConversationGreetings,
     Emoticons,
     InfiniteLoading,
-    Loading,
     Message,
     MessageInteractive,
     MessageNotification,
@@ -344,11 +344,11 @@ export default ({
         [MESSAGE_TYPES.POLL]: 'message-poll'
       }[message.type]
     },
-    isCurrentUser (from) {
+    isMsgSender (from) {
       return this.currentUserAttr.id === from
     },
     who (message) {
-      const user = this.isCurrentUser(message.from) ? this.currentUserAttr : this.summary.participants[message.from]
+      const user = this.isMsgSender(message.from) ? this.currentUserAttr : this.summary.participants[message.from]
       return user?.displayName || user?.username || message.from
     },
     variant (message) {
@@ -357,7 +357,7 @@ export default ({
       } else if (message.hasFailed) {
         return MESSAGE_VARIANTS.FAILED
       } else {
-        return this.isCurrentUser(message.from) ? MESSAGE_VARIANTS.SENT : MESSAGE_VARIANTS.RECEIVED
+        return this.isMsgSender(message.from) ? MESSAGE_VARIANTS.SENT : MESSAGE_VARIANTS.RECEIVED
       }
     },
     replyingMessage (message) {
@@ -386,59 +386,133 @@ export default ({
       this.ephemeral.replyingMessageHash = null
       this.ephemeral.replyingTo = null
     },
-    handleSendMessage (message) {
+    handleSendMessage (text, attachments) {
+      const hasAttachments = attachments?.length > 0
+      const contractID = this.currentChatRoomId
       const replyingMessage = this.ephemeral.replyingMessageHash
         ? { hash: this.ephemeral.replyingMessageHash, text: this.ephemeral.replyingMessage }
         : null
-      // Consider only simple TEXT now
-      // TODO: implement other types of messages later
-      const data = { type: MESSAGE_TYPES.TEXT, text: message }
 
-      const contractID = this.currentChatRoomId
-      // Call 'gi.actions/chatroom/addMessage' action with necessary data
-      // to send the message
-      sbp('gi.actions/chatroom/addMessage', {
-        contractID,
+      let data = { type: MESSAGE_TYPES.TEXT, text }
+      if (replyingMessage) {
         // If not replying to a message, use original data; otherwise, append
         // replyingMessage to data.
-        data: !replyingMessage ? data : { ...data, replyingMessage },
-        hooks: {
-          // Define a 'beforeRequest' hook for additional processing before the
-          // request is made.
-          // IMPORTANT: This will call 'chelonia/in/processMessage' *BEFORE* the
-          // message has been received. This is intentional to mark yet-unsent
-          // messages as pending in the UI
-          prepublish: (message) => {
-            if (!this.checkEventSourceConsistency(contractID)) return
+        data = { ...data, replyingMessage }
+      }
 
-            // IMPORTANT: This is executed *BEFORE* the message is received over
-            // the network
-            sbp('okTurtles.eventQueue/queueEvent', 'chatroom-events', async () => {
-              if (!this.checkEventSourceConsistency(contractID)) return
-              Vue.set(this.messageState, 'contract', await sbp('chelonia/in/processMessage', message, this.messageState.contract))
-            }).catch((e) => {
-              console.error('Error sending message during pre-publish: ' + e.message)
-            })
+      const sendMessage = (beforePrePublish) => {
+        const prepublish = (message) => {
+          if (!this.checkEventSourceConsistency(contractID)) return
+
+          beforePrePublish?.()
 
-            this.stopReplying()
-            this.updateScroll()
-          },
-          beforeRequest: (message, oldMessage) => {
+          // IMPORTANT: This is executed *BEFORE* the message is received over
+          // the network
+          sbp('okTurtles.eventQueue/queueEvent', 'chatroom-events', async () => {
             if (!this.checkEventSourceConsistency(contractID)) return
-            sbp('okTurtles.eventQueue/queueEvent', 'chatroom-events', () => {
-              if (!this.checkEventSourceConsistency(contractID)) return
-              const messageStateContract = this.messageState.contract
-              const msg = messageStateContract.messages.find(m => (m.hash === oldMessage.hash()))
-              if (!msg) return
-              msg.hash = message.hash()
-              msg.height = message.height()
-            })
+            Vue.set(this.messageState, 'contract', await sbp('chelonia/in/processMessage', message, this.messageState.contract))
+          }).catch((e) => {
+            console.error('Error sending message during pre-publish: ' + e.message)
+          })
+
+          this.stopReplying()
+          this.updateScroll()
+        }
+        const beforeRequest = (message, oldMessage) => {
+          if (!this.checkEventSourceConsistency(contractID)) return
+          sbp('okTurtles.eventQueue/queueEvent', 'chatroom-events', () => {
+            if (!this.checkEventSourceConsistency(contractID)) return
+            const messageStateContract = this.messageState.contract
+            const msg = messageStateContract.messages.find(m => (m.hash === oldMessage.hash()))
+            if (!msg) return
+            msg.hash = message.hash()
+            msg.height = message.height()
+          })
+        }
+        // Call 'gi.actions/chatroom/addMessage' action with necessary data to send the message
+        sbp('gi.actions/chatroom/addMessage', {
+          contractID,
+          data,
+          hooks: {
+            // Define a 'beforeRequest' hook for additional processing before the
+            // request is made.
+            // IMPORTANT: This will call 'chelonia/in/processMessage' *BEFORE* the
+            // message has been received. This is intentional to mark yet-unsent
+            // messages as pending in the UI
+            prepublish,
+            beforeRequest
           }
+        }).catch((e) => {
+          console.error(`Error while publishing message for ${contractID}`, e)
+          alert(e?.message || e)
+        })
+      }
+      const uploadAttachments = async () => {
+        try {
+          const attachmentsToSend = await Promise.all(attachments.map(async (attachment) => {
+            const { mimeType, url, name } = attachment
+            // url here is an instance of URL.createObjectURL(), which needs to be converted to a 'Blob'
+            const attachmentBlob = await objectURLtoBlob(url)
+            const downloadData = await sbp('chelonia/fileUpload', attachmentBlob, {
+              type: mimeType, cipher: 'aes256gcm'
+            })
+            return { name, mimeType, downloadData }
+          }))
+          data = { ...data, attachments: attachmentsToSend }
+
+          return true
+        } catch (e) {
+          console.log('[ChatMain.vue]: something went wrong while uploading attachments ', e)
+          return false
         }
-      }).catch((e) => {
-        console.error(`Error while publishing message for ${contractID}`, e)
-        alert(e?.message || e)
-      })
+      }
+
+      if (!hasAttachments) {
+        sendMessage()
+      } else {
+        let temporaryMessage = null
+        sbp('gi.actions/chatroom/addMessage', {
+          contractID,
+          data,
+          hooks: {
+            preSendCheck: (message, state) => {
+              // NOTE: this preSendCheck does nothing except appending pending message
+              //       temporarily until the uploading attachments is finished
+              //       it always returns false, so it doesn't affect the contract state
+              const [, opV] = message.op()
+              const { meta } = opV.valueOf().valueOf()
+
+              temporaryMessage = createMessage({
+                meta,
+                data,
+                hash: message.hash(),
+                height: message.height(),
+                state: this.messageState.contract,
+                pending: true,
+                innerSigningContractID: this.ourIdentityContractId
+              })
+              this.messageState.contract.messages.push(temporaryMessage)
+              this.updateScroll()
+
+              return false
+            }
+          }
+        })
+        uploadAttachments().then((isUploaded) => {
+          const removeTemporaryMessage = () => {
+            // NOTE: remove temporary message which is created before uploading attachments
+            if (temporaryMessage) {
+              const msgIndex = findMessageIdx(temporaryMessage.hash, this.messageState.contract.messages)
+              this.messageState.contract.messages.splice(msgIndex, 1)
+            }
+          }
+          if (isUploaded) {
+            sendMessage(removeTemporaryMessage)
+          } else {
+            removeTemporaryMessage()
+          }
+        })
+      }
     },
     async scrollToMessage (messageHash, effect = true) {
       if (!messageHash || !this.messages.length) {
@@ -841,7 +915,7 @@ export default ({
             if (addedOrDeleted === 'ADDED' && this.messages.length) {
               const isScrollable = this.$refs.conversation &&
               this.$refs.conversation.scrollHeight !== this.$refs.conversation.clientHeight
-              const fromOurselves = this.isCurrentUser(this.messages[this.messages.length - 1].from)
+              const fromOurselves = this.isMsgSender(this.messages[this.messages.length - 1].from)
               if (!fromOurselves && isScrollable) {
                 this.updateScroll()
               } else if (!isScrollable && this.messages.length) {

frontend/views/containers/chatroom/Message.vue

@@ -25,6 +25,7 @@ export default ({
     messageHash: String,
     type: String,
     text: String,
+    attachments: Array,
     who: String,
     currentUserID: String,
     avatar: [Object, String],
@@ -44,7 +45,7 @@ export default ({
       default: null
     },
     isSameSender: Boolean,
-    isCurrentUser: Boolean,
+    isMsgSender: Boolean,
     replyingMessage: null
   },
   constants: Object.freeze({

frontend/views/containers/chatroom/MessageActions.vue

@@ -116,7 +116,7 @@ export default ({
   props: {
     variant: String,
     type: String,
-    isCurrentUser: Boolean
+    isMsgSender: Boolean
   },
   computed: {
     isText () {
@@ -126,7 +126,7 @@ export default ({
       return this.type === MESSAGE_TYPES.POLL
     },
     isEditable (): Boolean {
-      return this.isCurrentUser && (this.isText || this.isPoll)
+      return this.isMsgSender && (this.isText || this.isPoll)
     }
   },
   methods: {