Adding voice memo content type (Work in progress)

components/Conversation/MessageComposer.tsx

@@ -4,27 +4,56 @@ import messageComposerStyles from '../../styles/MessageComposer.module.css'
 import upArrowGreen from '../../public/up-arrow-green.svg'
 import upArrowGrey from '../../public/up-arrow-grey.svg'
 import { useRouter } from 'next/router'
+import { AudioRecorder } from 'react-audio-voice-recorder'
 import Image from 'next/image'
 
 type MessageComposerProps = {
-  onSend: (msg: string) => Promise<void>
+  onSend: (msg: object) => Promise<void>
 }
 
+type Message = { content: string | ArrayBuffer; contentType: string }
+
 const MessageComposer = ({ onSend }: MessageComposerProps): JSX.Element => {
-  const [message, setMessage] = useState('')
+  const [message, setMessage] = useState<Message>({
+    content: '',
+    contentType: '',
+  })
+
   const router = useRouter()
 
-  useEffect(() => setMessage(''), [router.query.recipientWalletAddr])
+  useEffect(
+    () => setMessage({ ...message, content: '' }),
+    [router.query.recipientWalletAddr]
+  )
 
-  const onMessageChange = (e: React.FormEvent<HTMLInputElement>) =>
-    setMessage(e.currentTarget.value)
+  const onMessageChange = (e: React.FormEvent<HTMLInputElement>) => {
+    setMessage({ ...message, content: e.currentTarget.value })
+  }
+
+  const addAudioElement = (blob: Blob) => {
+    const reader = new FileReader()
+    reader.readAsDataURL(blob)
+    return new Promise(() => {
+      reader.onloadend = () => {
+        if (reader.result !== null) {
+          setMessage({
+            ...message,
+            content: reader.result,
+            contentType: 'voiceMemo',
+          })
+        }
+      }
+    })
+  }
 
   const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
-    if (!message) {
+    const contentMessage = message.content
+
+    if (!contentMessage) {
       return
     }
-    setMessage('')
+    setMessage({ ...message, content: '', contentType: '' })
     await onSend(message)
   }
 
@@ -46,6 +75,7 @@ const MessageComposer = ({ onSend }: MessageComposerProps): JSX.Element => {
         autoComplete="off"
         onSubmit={onSubmit}
       >
+        <AudioRecorder onRecordingComplete={addAudioElement} />
         <input
           type="text"
           placeholder="Type something..."
@@ -58,7 +88,7 @@ const MessageComposer = ({ onSend }: MessageComposerProps): JSX.Element => {
             messageComposerStyles.input
           )}
           name="message"
-          value={message}
+          value={message.content}
           onChange={onMessageChange}
           required
         />

components/Conversation/MessagesList.tsx

@@ -24,6 +24,23 @@ const isOnSameDay = (d1?: Date, d2?: Date): boolean => {
 const formatDate = (d?: Date) =>
   d?.toLocaleString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })
 
+const TypeOfMessage = ({ message }: MessageTileProps): JSX.Element => {
+  const contentTypeId = message.contentType.typeId
+  const isVoiceMemo = contentTypeId === 'voice-key'
+
+  if (isVoiceMemo) {
+    return (
+      <audio controls>
+        <source src={message.content} type="audio/mpeg" />
+      </audio>
+    )
+  } else if (message.error) {
+    return <div>{message.error.message}</div>
+  } else {
+    return <Emoji text={message.content || ''} />
+  }
+}
+
 const MessageTile = ({ message }: MessageTileProps): JSX.Element => (
   <div className="flex items-start mx-auto mb-4">
     <Avatar peerAddress={message.senderAddress as string} />
@@ -35,11 +52,12 @@ const MessageTile = ({ message }: MessageTileProps): JSX.Element => (
         </span>
       </div>
       <span className="block text-md px-2 mt-2 text-black font-normal break-words">
-        {message.error ? (
+        <TypeOfMessage message={message} />
+        {/* {message.error ? (
           `Error: ${message.error?.message}`
         ) : (
           <Emoji text={message.content || ''} />
-        )}
+        )} */}
       </span>
     </div>
   </div>

components/ConversationsList.tsx

@@ -43,6 +43,8 @@ const ConversationTile = ({
 
   const latestMessage = previewMessages.get(getConversationKey(conversation))
 
+  const contentTypeId = latestMessage?.contentType.typeId
+
   const conversationDomain =
     conversation.context?.conversationId.split('/')[0] ?? ''
 
@@ -103,8 +105,10 @@ const ConversationTile = ({
           </span>
         </div>
         <span className="text-sm text-gray-500 line-clamp-1 break-all">
-          {address === latestMessage?.senderAddress && 'You: '}{' '}
-          {latestMessage?.content}
+          {address === latestMessage?.senderAddress && 'You: '}
+          {contentTypeId === 'voice-key'
+            ? 'Audio File'
+            : latestMessage?.content}
         </span>
       </div>
     </div>

hooks/useInitXmtpClient.ts

@@ -1,4 +1,4 @@
-import { Client } from '@xmtp/xmtp-js'
+import { Client, ContentTypeId } from '@xmtp/xmtp-js'
 import { Signer } from 'ethers'
 import { useCallback, useEffect, useState } from 'react'
 import {
@@ -25,6 +25,33 @@ const useInitXmtpClient = (cacheOnly = false) => {
     }
   }
 
+  const ContentTypeVoiceKey = new ContentTypeId({
+    authorityId: 'xmtp.test',
+    typeId: 'voice-key',
+    versionMajor: 1,
+    versionMinor: 0,
+  })
+
+  class voiceCodec {
+    get contentType() {
+      return ContentTypeVoiceKey
+    }
+
+    encode(key: string | undefined) {
+      return {
+        type: ContentTypeVoiceKey,
+        parameters: {},
+        content: new TextEncoder().encode(key),
+      }
+    }
+
+    decode(content: { content: any }) {
+      const uint8Array = content.content
+      const key = new TextDecoder().decode(uint8Array)
+      return key
+    }
+  }
+
   const initClient = useCallback(
     async (wallet: Signer) => {
       if (wallet && !client) {
@@ -45,6 +72,7 @@ const useInitXmtpClient = (cacheOnly = false) => {
             env: getEnv(),
             appVersion: getAppVersion(),
             privateKeyOverride: keys,
+            codecs: [new voiceCodec()],
           })
           setClient(xmtp)
           setIsRequestPending(false)

hooks/useSendMessage.ts

@@ -1,10 +1,27 @@
-import { Conversation } from '@xmtp/xmtp-js'
+import { Conversation, ContentTypeId } from '@xmtp/xmtp-js'
 import { useCallback } from 'react'
 
 const useSendMessage = (selectedConversation?: Conversation) => {
   const sendMessage = useCallback(
-    async (message: string) => {
-      await selectedConversation?.send(message)
+    async (message: object) => {
+      const ContentTypeVoiceKey = new ContentTypeId({
+        authorityId: 'xmtp.test',
+        typeId: 'voice-key',
+        versionMajor: 1,
+        versionMinor: 0,
+      })
+
+      const messageText = message.content
+      const isVoiceMemo = message.contentType === 'voiceMemo'
+
+      if (isVoiceMemo) {
+        await selectedConversation?.send(messageText, {
+          contentType: ContentTypeVoiceKey,
+          contentFallback: 'This is a voice memo',
+        })
+      } else {
+        await selectedConversation?.send(messageText)
+      }
     },
     [selectedConversation]
   )

package.json

@@ -29,6 +29,7 @@
     "imagemin-svgo": "^9.0.0",
     "next": "13.0.5",
     "react": "18.2.0",
+    "react-audio-voice-recorder": "^1.0.4",
     "react-blockies": "^1.4.1",
     "react-dom": "18.2.0",
     "react-emoji-render": "^1.2.4",