How to make a form in JSQMessageViewController cell

Question

I need to make forms inside cell using JSQMessagesViewController. How can I do this? I am trying to implement a custom cell.

• How can I change the size of the message bubble?

• Can I use multiple different Custom cell classes? If yes then how? Here is what i have been able to do -

  class ViewController: JSQMessagesViewController {
  
  //MARK: Properties
  
  var messages = [JSQMessage]()
  var outgoingBubbleImageView: JSQMessagesBubbleImage!
  var incomingBubbleImageView: JSQMessagesBubbleImage!
  
  
  //MARK: Input button methods
  
  override func didPressSendButton(button: UIButton!, withMessageText text: String!, senderId: String!, senderDisplayName: String!, date: NSDate!) {
      print("sending message '\(text)'")
  
      self.addMessage("2", text: text)
  
      self.inputToolbar.contentView.textView.resignFirstResponder()
      finishSendingMessage()
  }
  
  override func didPressAccessoryButton(sender: UIButton!) {
  
  }
  
  func addMessage(id: String, text: String) {
      let message = JSQMessage(senderId: id, displayName: "Default Name", text: text)
  
      messages.append(message)
  }
  
  func setupBubbles() {
      let factory = JSQMessagesBubbleImageFactory()
      outgoingBubbleImageView = factory.outgoingMessagesBubbleImageWithColor(UIColor.jsq_messageBubbleBlueColor())
      incomingBubbleImageView = factory.incomingMessagesBubbleImageWithColor(UIColor.jsq_messageBubbleLightGrayColor())
  }
  
  //MARK: Delegate methods
  
  override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
  

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

      let cell: JSQMessagesCollectionViewCell
      let message = messages[indexPath.item]
  
      if message.senderId == self.senderId {
          cell = super.collectionView(collectionView, cellForItemAtIndexPath: indexPath) as! JSQMessagesCollectionViewCell
  
          cell.textView.hidden = true
  
          cell.messageBubbleContainerView
  
          cell.textView.removeFromSuperview()
  
      }
      else {
          cell = super.collectionView(collectionView, cellForItemAtIndexPath: indexPath) as! JSQMessagesCollectionViewCell
      }
  
      if message.senderId == self.senderId {
          cell.textView.textColor = UIColor.whiteColor()
      } else {
          cell.textView.textColor = UIColor.blackColor()
      }
  
      return cell
  
  }
  
  
  override func collectionView(collectionView: JSQMessagesCollectionView!, avatarImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageAvatarImageDataSource! {
      return nil
  }
  
  override func collectionView(collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageBubbleImageDataSource! {
      let message = messages[indexPath.item]
  
      // Check if the message is incoming or outgoing and generate the image accordingly
  
      if message.senderId == senderId {
          return outgoingBubbleImageView
      } else {
          return incomingBubbleImageView
      }
  
  }
  
  override func collectionView(collectionView: JSQMessagesCollectionView!, messageDataForItemAtIndexPath indexPath: NSIndexPath!) -> JSQMessageData! {
      return messages[indexPath.item]
  }
  
  
  override func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
      return messages.count
  }
  
  // MARK: App lifecycle methods
  
  
  override func viewDidLoad() {
  
      self.senderId = "2"
      self.senderDisplayName = "soe_random_display_name"
  
      super.viewDidLoad()
      // Do any additional setup after loading the view, typically from a nib.
  
      self.setupBubbles()
  
      self.outgoingCellIdentifier = CustomOutgoingCell.cellReuseIdentifier()
      self.collectionView.registerNib(CustomOutgoingCell.nib(), forCellWithReuseIdentifier: self.outgoingCellIdentifier)
  
  
  
      //Remove the avatar images
      self.collectionView.collectionViewLayout.incomingAvatarViewSize = CGSizeZero
      self.collectionView.collectionViewLayout.outgoingAvatarViewSize = CGSizeZero
  
  
      finishReceivingMessage()
  
      self.navigationController?.navigationItem.title = "RedCarpet"
  
  
  }
  
  override func didReceiveMemoryWarning() {
      super.didReceiveMemoryWarning()
      // Dispose of any resources that can be recreated.
  }
  

  }

My CustomOutgoingCell.xib -

The result is -

But this is shown when I type in a vey long message, long enough to generate the message bubble. Otherwise the text field comes out of the message bubble.