When your user is using Siri, they aren't always looking at their device. But when they are, it's desirable that the experience a user has with your app through Siri looks and feels a lot like when they're directly interacting with your app. One of the tools you've already seen is custom vocabularies. You can use a vocabulary to map user and app specific terms to Siri's vocabulary.

Another way we can customize the Siri experience is through an Intents UI extension. Whenever you add an Intents extension to your project, Xcode asks you if you also want to add an Interface Extension. If you select this checkbox, you don't have to do anything to add the UI extension since it's already there. However, if you didn't check the checkbox, you should add a new Intents UI extension through the targets menu, just like you do for all extensions.

A custom user interface for an intent works a lot like other UI extensions. When you create the extension, you're given a storyboard, a view controller, and a .plist file. The .plist file is expected to specify all of the intents that this specific UI extension can handle. In the case of the example app, this is just a single intent; INSendMessageIntent.

If you intend to support multiple intents, it's often a good idea to split your extension up in multiple extensions, grouping intents together based on how similar they are. This will make it easier to maintain your code in the long run and it's easier to reason about the way your code and extensions work.

If you open the IntentViewController file, you'll discover a method named configure(with:context:completion:). We're expected to use this method to configure our view. We need to display the recipient group and the message contents for our extension so add the following two @IBOutlets in the IntentViewController:

@IBOutlet var recipientGroupLabel: UILabel! 
@IBOutlet var messageContentLabel: UILabel! 

Next, add the following implementation for configure(with:context:completion:):

func configure(with interaction: INInteraction!, context: INUIHostedViewContext, 
  completion: ((CGSize) -> Void)!) { 
    // Do configuration here, including preparing views and calculating a desired 
    // size for presentation. 
     
    guard let messageIntent = interaction.intent as? INSendMessageIntent 
        else { return } 
     
    recipientGroupLabel.text = messageIntent.groupName 
    messageContentLabel.text = messageIntent.content 
     
    let viewWidth = extensionContext?.hostedViewMaximumAllowedSize.width ?? 0 
    completion(CGSize(width: viewWidth, height: 100)) 
} 

This implementation verifies that we're dealing with a message sending intent and populates the receiving group and the message accordingly. We also determine at which width our UI should be displayed. Finally, we call the completion handler and pass in the size that we want to use for our interface. A value of 100 should be plenty of room to accommodate our message for now.

Add two labels to your storyboard and lay them out as shown in the following screenshot. Don't forget to hook up the outlets for these labels as well. The message content has a body style and the recipient group uses a Caption 1 style.

After hooking this up, you can try to send a message to one of the predefined groups and you'll see that your custom layout is now added into the conversation with Siri.

There is one problem though. The message transcript is now shown twice. Once through our extension and once through Siri itself. To prevent this from happening, all we need to do is make our view controller conform to INUIHostedViewSiriProviding. Add this protocol to IntentViewController class' declaration and add the following property:

var displaysMessage = true 

By doing this, Siri is now aware that we are rendering our own version of the message transcript so we don't need Siri to show the message for us.

Just like the notifications UI extension, Intent UI extensions are not interactive. They can only provide a static interface. Your custom interface should be simple, and to the point. Siri is often used as a quick way to perform certain tasks and you should keep this in mind while you're designing your custom Siri interface elements.