Chashmeet Singh

Calculation of the frame size of the Chat Bubble(iOS Client)

Chashmeet Singh — Mon, 22 May 2017 00:00:00 GMT

Starting with the implementation, we will need a UICollectionViewController.

import UIKit

class ChatViewController: UICollectionViewController, UICollectionViewDelegateFlowLayout {

    let cellId = "cellId"

    override func viewDidLoad() {
        super.viewDidLoad()
    }

}

Then, we setup the background of the view and configure the collectionView and call these methods inside inside viewDidLoad .

// Setup View
func setupView() {
   self.view.backgroundColor = UIColor.rgb(red: 236, green: 229, blue: 221)
}

// Setup Collection View
func setupCollectionView() {
    collectionView?.backgroundColor = .clear
    collectionView?.delegate = self

    collectionView?.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height - 50)

    // register cell
    collectionView?.register(UICollectionViewCell.self, forCellWithReuseIdentifier: cellId)
}

The -50 is supposed to be occupied by the Message Container. Continuing with this, we implement the CollectionView methods as follows:

    // Number of items to be displayed
    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 5
    }

    // Configure Cell
    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath)
        cell.backgroundColor = .red
        return cell
    }

When trying to run this, we get the following output.

We need to increase the width of each cell as well give it a height for displaying a message.

    // Calculate Bubble Height
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: view.frame.width, height: 100)
    }

To remove the cell spacing we override the edge insets as:

    // Calculate Bubble Height
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: view.frame.width, height: 100)
    }

We configure a custom Chat Cell to customize the cell according to the needs:

class BaseCell: UICollectionViewCell {
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupViews()
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func setupViews() {}
}

class ChatLogMessageCell: BaseCell {

    let messageTextView: UITextView = {
        let textView = UITextView()
        textView.font = UIFont.systemFontOfSize(18)
        textView.text = "Sample message"
        textView.backgroundColor = UIColor.clearColor()
        return textView
    }()

    let textBubbleView: UIView = {
        let view = UIView()
        view.layer.cornerRadius = 15
        view.layer.masksToBounds = true
        return view
    }()

    static let grayBubbleImage = UIImage(named: "bubble_gray")!.resizableImageWithCapInsets(UIEdgeInsetsMake(22, 26, 22, 26)).imageWithRenderingMode(.AlwaysTemplate)
    static let blueBubbleImage = UIImage(named: "bubble_blue")!.resizableImageWithCapInsets(UIEdgeInsetsMake(22, 26, 22, 26)).imageWithRenderingMode(.AlwaysTemplate)

    let bubbleImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.image = ChatLogMessageCell.grayBubbleImage
        imageView.tintColor = UIColor(white: 0.90, alpha: 1)
        return imageView
    }()

    override func setupViews() {
        super.setupViews()

        addSubview(textBubbleView)
        addSubview(messageTextView)

        textBubbleView.addSubview(bubbleImageView)
        textBubbleView.addConstraintsWithFormat("H:|[v0]|", views: bubbleImageView)
        textBubbleView.addConstraintsWithFormat("V:|[v0]|", views: bubbleImageView)
    }
}

extension UIView {

    func addConstraintsWithFormat(format: String, views: UIView...) {

        var viewsDictionary = [String: UIView]()
        for (index, view) in views.enumerated() {
            let key = "v\(index)"
            viewsDictionary[key] = view
            view.translatesAutoresizingMaskIntoConstraints = false
        }

        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: format, options: NSLayoutFormatOptions(), metrics: nil, views: viewsDictionary))
    }

}

Using this custom cell, we can now add text to the message cells and the only thing left is to configure the frame size of each chat bubble. To implement this, we will need an array string of 4 messages which can be used to test anc calculate dynamic frame for each message.

let messages: [String] = ["Hello Susi", "I love FossAsia", "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s", "The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from de Finibus Bonorum et Malorum"]

We now modify the sizeForItemAt method to calculate the frame size.

// Calculate Bubble Height
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let message = messages[indexPath.row]

        let size = CGSize(width: 250, height: 1000)
        let options = NSStringDrawingOptions.usesFontLeading.union(.usesLineFragmentOrigin)
        let estimatedFrame = NSString(string: message).boundingRect(with: size, options: options, attributes: [NSFontAttributeName: UIFont.systemFont(ofSize: 18)], context: nil)

        return CGSize(width: view.frame.width, height: estimatedFrame.height + 20)
    }

And accordingly modify the cellForItemAt method as well.

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

        let message = messages[indexPath.row]

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: cellId, for: indexPath) as! ChatLogMessageCell

        cell.messageTextView.textColor = .black

        let size = CGSize(width: 250, height: 1000)
        let options = NSStringDrawingOptions.usesFontLeading.union(.usesLineFragmentOrigin)
        let estimatedFrame = NSString(string: message).boundingRect(with: size, options: options, attributes: [NSFontAttributeName: UIFont.systemFont(ofSize: 18)], context: nil)

        if indexPath.row % 2 == 0 {

            cell.bubbleImageView.image = ChatLogMessageCell.grayBubbleImage
            cell.bubbleImageView.tintColor = .white
            cell.messageTextView.textColor = UIColor.black
            cell.messageTextView.frame = CGRect(x: 16, y: 0, width: estimatedFrame.width + 16, height: estimatedFrame.height + 30)
            cell.textBubbleView.frame = CGRect(x: 4, y: -4, width: estimatedFrame.width + 16 + 8 + 16, height: estimatedFrame.height + 20 + 6)

        } else {
            cell.messageTextView.frame = CGRect(x: view.frame.width - estimatedFrame.width - 16 - 16, y: 0, width: estimatedFrame.width + 16, height: estimatedFrame.height + 20)
            cell.textBubbleView.frame = CGRect(x:view.frame.width - estimatedFrame.width - 16 - 8 - 16, y: -4, width: estimatedFrame.width + 16 + 8 + 10, height: estimatedFrame.height + 20 + 6)
            cell.bubbleImageView.image = ChatLogMessageCell.blueBubbleImage
            cell.bubbleImageView.tintColor = UIColor.rgb(red: 220, green: 248, blue: 198)
        }

        cell.messageTextView.text = message

        return cell
    }

Below is the final output:

Susi AI Skill Development

Chashmeet Singh — Sat, 13 May 2017 00:00:00 GMT

What is Susi?

Susi is an open source intelligent personal assistant which has the capability to learn and respond better to queries. It is also capable of making to-do lists, setting alarms, providing weather and traffic info all in real time. Susi responds based on skills.

What is a skill? How do we teach a skill?

A skill is a piece of code which performs a set of actions in order to respond to the user’s query. These skills are based on pattern matching which help them mapping the user’s query to a specific skill and responding accordingly. Teaching a skill to Susi is surprisingly very easy to implement. One can take a look at the Susi Skill Development Tutorial and a video workshop by Michael Christen.

I will try to give a basic idea on how to create a skill, it’s basic structure and some of the skills I developed in the first week.

Prepare to create a skill:

Head over to http://dream.susi.ai Create a etherpad with some relevant name Delete all text currently present in there Start writing your skill Adding to this, for testing a skill one can head over to Susi Web Chat Interface.

Basic Structure for calling an API:


!console:
{
  "url":"",
  "path":""
}
eol

So, let me explain this line by line.

The regular expression is the one to which the user’s query is matched first.
The console is meant to output the actual response the user sees as response.
In place of the url, the API endpoint is passed in. “path” here specifies how we traverse through the response Json or Jsonp to get the object, starts with $..
At last, eol which is the end-of-line marks the end of a skill.

Let’s take an example for better understanding of this:

random gif
!console: $url$
{
    "url" : "http://api.giphy.com/v1/gifs/trending?api_key=dc6zaTOxFJmzC",
    "path" : "$.data[0].images.fixed_height"
}
eol

This skill responds with a link to a random gif.

Steps involved:

Match the string random gif with the user’s query.
On successful match, make an API call to the API endpoint specified in url
On response, extract the object at the specified path in the json under path
Respond to the user with the url key’s value which would here be an URL of a GIF.

Let’s try it out on Susi Web Chat. For this, you will first have to load your skill using the dream command followed by etherpad name:

dream

And then you can start testing your skill.

So, we queried random gif and we got a response Click Here!. The complete URL didn’t show up because all the URLs are currently parsed and a hyperlink for each is created. So try clicking on it to find a GIF.

Now, let’s look at one more skill I developed during this period.

#Returns the name of the president of a country
president of *|who is the president of *| president *
!console:$plaintext$
{      "url":"https://api.wolframalpha.com/v2/query?input=president+$1$&output=JSON&appid=9WA6XR-26EWTGEVTE&includepodid=Result",
  "path" : "$.queryresult.pods[0].subpods[0]"
}
eol

Let’s understand this step by step:

We have here president of \*|who is the president of *| president *, which means the user’s query matches with anyone of the following because of the use of pipe symbol |. The * here replaces a word or a list of words, which can be accessed like: ${index}$ where index is replaced by the position of the * in the expression starting from 1.
Now we have something new in the URL. See that $1$ inside the URL? On runtime, that is replaced with the content of the * variable. So if a user puts in query like: president of usa, usa is mapped to $1$ and is replaced in the URL and appropriate API request is made.
Then the path is traversed in the json response and the value of the plaintext key is used to respond to the user.

It’s now time to try it out on Susi Web Chat.

So, we got our desired response here, i.e., the name of the president of usa.