JSQMessagesCollectionView (Message Bubble size all identical..)

Question

I am using JSQMessagesCollectionView to build an app which enables chat. It works really fine till now because I start to notice all the message bubbles have the width of the first one! If the message is longer than the 1st bubble, then text is cut... (I checked the messages I sent and received on the backend and the texts seem to be all fine...)

I am wondering if I did sth wrong in setting up JSQMessagesCollectionView correctly... and I can't figure it out :(

Here is my code:

// Total number of Messages in Section
override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return messages.count
}

// Message Data Model At IndexPath
override func collectionView(collectionView: JSQMessagesCollectionView!, messageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageData! {

    return messages[indexPath.item]
}

//messageBubbleImageDataForItemAtIndexPath
override func collectionView(collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageBubbleImageDataSource! {

    let message = messages[indexPath.item]

    if (outgoing(message)) {
        print(outgoingBubble)
        return outgoingBubble
    } else {
        return incomingBubble
    }
}

override func collectionView(collectionView: JSQMessagesCollectionView!, avatarImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageAvatarImageDataSource! {

    return avatarImageBlank // Return an empty avatar image for now
}


// Collection View text color and hyperlink
override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {

    let cell = super.collectionView(collectionView, cellForItemAtIndexPath: indexPath) as! JSQMessagesCollectionViewCell

    let message = messages[indexPath.item]

    if (outgoing(message)) {

        cell.textView!.textColor = UIColor.whiteColor()
    } else {
        cell.textView!.textColor = UIColor.blackColor()
    }

    // Under line links
    let attributes : [String:AnyObject] = [NSForegroundColorAttributeName:cell.textView!.textColor!, NSUnderlineStyleAttributeName: 1]
    cell.textView!.linkTextAttributes = attributes

    return cell
}


// Usernames above bubbles at Indexpah
override func collectionView(collectionView: JSQMessagesCollectionView!, attributedTextForMessageBubbleTopLabelAtIndexPath indexPath: NSIndexPath!) -> NSAttributedString! {

    let message = messages[indexPath.item]

    if (outgoing(message)) {
        return nil
    }

    // Same as previous sender, skip, eg. 2nd message from other sender
    if indexPath.item > 0 {
        let previousMessage = messages[indexPath.item - 1]

        if (previousMessage.senderId() == message.senderId()) {

            return nil
        }
    }

    // Otherwise, mark sender's name
    return NSAttributedString(string:message.senderDisplayName())

}

//heightForMessageBubbleTopLabelAtIndexPath (Flow Layout)

override func collectionView(collectionView: JSQMessagesCollectionView!, layout collectionViewLayout: JSQMessagesCollectionViewFlowLayout!, heightForMessageBubbleTopLabelAtIndexPath indexPath: NSIndexPath!) -> CGFloat {

    let message = messages[indexPath.item]

    // Sent by sendor, skip

    if (outgoing(message)) {
        return CGFloat(0.0)
    }

    // Same as previous sender, skip
    if indexPath.item > 0 {
        let previousMessage = messages[indexPath.item - 1]
        if (previousMessage.senderId() == message.senderId()) {
            return CGFloat(0.0)
        }
    }
    return kJSQMessagesCollectionViewCellLabelHeightDefault
}

I defined the incoming and outgoing message bubbles as follows:

let incomingBubble = JSQMessagesBubbleImageFactory().incomingMessagesBubbleImageWithColor(UIColor.lightGrayColor())
let outgoingBubble = JSQMessagesBubbleImageFactory().outgoingMessagesBubbleImageWithColor(UIColor(red: 82.0/255.0, green: 181.0/255.0, blue: 1, alpha: 1.0))

Answer 1

OK I solved the problem myself. The reason for this behaviour was because I have created a custom JSQMessage data model (eg. a Messaging class) for my project. When I use the default JSQMessage Data model, everything works perfectly (as shown below).

    func createTextMessage(item: [String: AnyObject]) -> JSQMessage {

    return JSQMessage.init(senderId: item["userId"] as! String,
                            senderDisplayName: item["name"] as! String,
                            date: String2Date(item["date"] as! String),
                            text: item["text"] as? String)
}