Add custom button to JSQMessage cell

Question

I need to create a user interface as shown below

The user interface that I have successfully developed is

The user interface that I developed uses all the existing controls and classes, I have not configured any cells for this user interface.

Now I'm stuck to add a DIMOND button with an account displaying the maximum left side (for received messages).

In any case, I can add this button and programmatically designate without setting up a full cell.

 override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        let message = messageList[indexPath.item]
            let cell = super.collectionView(collectionView, cellForItemAt: indexPath) as! JSQMessagesCollectionViewCell
            cell.textView?.textColor = UIColor.black
            if message.senderId != strMemberID {
                // configure avatar
                cell.avatarImageView.isHidden = false
                cell.avatarImageView.layer.cornerRadius = CGFloat(avatarImageDiameter/2)
                cell.avatarImageView.clipsToBounds = true

                let profilePictureURL = "\(quickChatUserProfilePictureBaseUrl)/\(message.senderId!)_m.jpg"

                cell.avatarImageView.sd_setImage(with: URL(string: profilePictureURL), placeholderImage: UIImage(named: kIndividualChatICon))
            } else {
                // add gesture only for group chat and on sender chat bubbles
            }
            if (message.messageType == MessageType.TextMessage.rawValue) {
                 cell.textView.attributedText = getAttributedMessageText(message: message)
            } else if (message.messageType == MessageType.NotificationMessage.rawValue) {
                cell.avatarImageView.isHidden = true
            }
           cell.textView?.linkTextAttributes = [NSForegroundColorAttributeName : QuickchatTheme.getHyperLinksColorForChatBubbles()]
            return cell
    }