Calculation of the Frame Size of the Chat Bubble in SUSI iOS
We receive intelligent responses from the SUSI Server based on our query. Each response contains a different set of actions and the content of the action can be of variable sizes, map, string, table, pie chart, etc. To make the chat bubble size dynamic in the SUSI iOS client, we need to check the action type. For each action, we calculate a different frame size which makes the size of the chat bubble dynamic and hence solving the issue of dynamic size of these bubbles.
In order to calculate the frame size, as mentioned above, we need to check the action type of that message. Let’s start by first making the API call sending the query and getting the action types as a response.
func queryResponse(_ params: [String : AnyObject], _ completion: @escaping(_ messages: List<Message>?, _ success: Bool, _ error: String?) -> Void) { let url = getApiUrl(UserDefaults.standard.object(forKey: ControllerConstants.UserDefaultsKeys.ipAddress) as! String, Methods.Chat) _ = makeRequest(url, .get, [:], parameters: params, completion: { (results, message) in if let _ = message { completion(nil, false, ResponseMessages.ServerError) } else if let results = results { guard let response = results as? [String : AnyObject] else { completion(nil, false, ResponseMessages.InvalidParams) return } let messages = Message.getAllActions(data: response) completion(messages, true, nil) } return }) }
Here, we are sending the query in the params dictionary. The `makeRequest` method makes the actual API call and returns a results object and an error object if any which default to `nil`. First, we check if the error variable is `nil` or not and if it is, we parse the complete response by using a helper method created in the Message object called `getAllActions`. This basically takes the response and gives us a list of messages of all action types returned for that query.
In order to display this in the UI, we need to call this method in the View Controller to actually use the result. Here is how we call this method.
var params: [String : AnyObject] = [ Client.WebsearchKeys.Query: inputTextView.text! as AnyObject, Client.ChatKeys.TimeZoneOffset: ControllerConstants.timeZone as AnyObject, Client.ChatKeys.Language: Locale.current.languageCode as AnyObject ] if let location = locationManager.location { params[Client.ChatKeys.Latitude] = location.coordinate.latitude as AnyObject params[Client.ChatKeys.Longitude] = location.coordinate.longitude as AnyObject } if let userData = UserDefaults.standard.dictionary(forKey: ControllerConstants.UserDefaultsKeys.user) as [String : AnyObject]? { let user = User(dictionary: userData) params[Client.ChatKeys.AccessToken] = user.accessToken as AnyObject } Client.sharedInstance.queryResponse(params) { (messages, success, _) in DispatchQueue.main.async { if success { self.collectionView?.performBatchUpdates({ for message in messages! { try! self.realm.write { self.realm.add(message) self.messages.append(message) let indexPath = IndexPath(item: self.messages.count - 1, section: 0) self.collectionView?.insertItems(at: [indexPath]) } } }, completion: { (_) in self.scrollToLast() }) } } }
Here, we are creating a params object sending the query and some additional parameters such as time zone, location coordinates and access token identifying the user. After the response is received, which contains a list of messages, we use a method called `performBatchUpdates` on the collection view where we loop through all the messages, writing each one of them to the database and then adding at the end of the collection view. Here we got all the messages inside the `messages` list object where each message can be checked for its action type and a frame can be calculated for the same.
Since the frame for each cell is returned in the `sizeForItemAt` delegate method of the collectionViewDelegate, we first grab the message using its indexPath and check the action type for each such message added to the collection view.
if message.actionType == ActionType.map.rawValue { // map action } else if message.actionType == ActionType.rss.rawValue { // rss action type } else if message.actionType == ActionType.websearch.rawValue { // web search action }
Since map action will be a static map, we use a hard coded value for the map’s height and the width equals to the width of the cell frame.
CGSize(width: view.frame.width, height: Constants.mapActionHeight)
Next, web search and rss action having the same UI, will have the same frame size but the number of cells inside each of the frame for these action depends on number of responses were received from the server.
CGSize(width: view.frame.width, height: Constants.rssActionHeight)
And the check can be condensed as well, instead of checking each action separately, we use a `||` (pipes) or an `OR`.
else if message.actionType == ActionType.rss.rawValue || message.actionType == ActionType.websearch.rawValue { // web search and rss action }
The anchor and answer action types, are supposed to display a string in the chat bubble. So the chat bubble size can be calculated using the following method:
let size = CGSize(width: Constants.maxCellWidth, height: Constants.maxCellHeight) let options = NSStringDrawingOptions.usesFontLeading.union(.usesLineFragmentOrigin) let estimatedFrame = NSString(string: messageBody).boundingRect(with: size, options: options, attributes: [NSFontAttributeName: UIFont.systemFont(ofSize: Constants.messageFontSize)], context: nil)
Here, we first create a maximum frame size that can exist. Then, using the drawingOptions create an options variable. The actual calculation of the frame happens in the last method where we use the complete message string and this returns us the actual frame for the above action types. Use the above method to get the frame in the `CGRect` type.
Below, is the complete method used for this calculation:
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize { let message = messages[indexPath.row] let estimatedFrame = self.estimatedFrame(messageBody: message.message) if message.actionType == ActionType.map.rawValue { return CGSize(width: view.frame.width, height: Constants.mapActionHeight) } else if message.actionType == ActionType.rss.rawValue || message.actionType == ActionType.websearch.rawValue { return CGSize(width: view.frame.width, height: Constants.rssActionType) } return CGSize(width: view.frame.width, height: estimatedFrame.height + Constants.answerActionMargin) }
rn CGSize(width: view.frame.width, height: estimatedFrame.height + Constants.answerActionMargin)
}
Below are the results of the app in action.
References:
–
You must be logged in to post a comment.