Customize AI Assistant appearance

SwiftUI

Overview

The AI Assistant chat UI can be presented independently using AIAssistantView. You can also customize its appearance to match your application.

The chat UI provides color customization options for its appearance. You can customize background colors, text colors, and accent colors for messages, input fields, and the overall container.

Appearance Customization

To customize the appearance of AIAssistantView, use the aiAssistantStyle(_:) modifier with these three main style types:

  • AIAssistantStyle - Main style that controls how the entire chat interface looks. Set the background color and customize message bubble and input field styling all in one place.
  • AIAssistantMessageStyle - Controls the background colors, text colors, and colors for interactive elements like links for message bubbles from AI and users.
  • AIAssistantInputStyle - Controls the input area's text field background and send button color.

Example Implementation 

AIAssistantView(session: aiSession)
    .aiAssistantStyle(
        AIAssistantStyle(
            backgroundColor: UIColor(red: 0.98, green: 0.98, blue: 0.98, alpha: 1),
            messageStyle: AIAssistantMessageStyle(
                userMessageBackgroundColor: UIColor(red: 0.85, green: 0.93, blue: 0.87, alpha: 1.0),
                aiMessageBackgroundColor: UIColor(red: 0.92, green: 0.89, blue: 0.98, alpha: 1.0),
                userMessageTextColor: UIColor(red: 0.18, green: 0.24, blue: 0.21, alpha: 1.0),
                aiMessageTextColor: UIColor(red: 0.16, green: 0.13, blue: 0.32, alpha: 1.0),
                interactiveAccentColor: UIColor(red: 0.38, green: 0.53, blue: 0.96, alpha: 1.0)
            ),
            inputStyle: AIAssistantInputStyle(
                inputBackgroundColor: UIColor(red: 0.98, green: 0.98, blue: 0.98, alpha: 1),
                sendButtonColor: UIColor(red: 0.435, green: 0.710, blue: 0.475, alpha: 1)
            )
        )
    )
AI Assistant with custom appearance