Version: Next

Styles

Element appearance configuration on screen is done through configuring corresponding element style.

Style Class	Description
Base Interface Elements
`NavigationBarStyle`	Navigation bar style in chat
`ChatLoadingStyle`	Overall chat loading screen style
`ChatPlaceholderStyle`	Empty chat state style (e.g., no messages)
`ChatPlaceholderErrorStyle`	Error display style (e.g., failed to load chat)
`LoadingIndicatorStyle`	Loading indicator style (in messages, actions)
`ChatInputStyle`	Message input panel style in chat
`ChatInputTextStyle`	Text input container style
`ChatInputVoiceStyle`	Voice message recording element style
`ChatInputQuoteStyle`	Quote display element style above input field
`SearchBarStyle`	Search bar style in navigation bar
`ToastAlertStyle`	Toast notifications style
`ScrollToMessageButtonStyle`	Scroll to new messages button
`PhotoPickerStyle`	Photo picker style (gallery/camera)
`ProgressViewStyle`	Progress indicator style (file loading, etc.)
`FileViewerStyle`	File display style (PDF, documents)
`ButtonStyle`	Base button style in chat
`TextButtonStyle`	Text button (no background)
`IconButtonStyle`	Icon button
`AudioPlayerStyle`	Audio player style (in chat or separate)

Message Styles
`ChatMessagesStyles`	Container for all user message type styles
`ChatMessageStyle`	Base message style in chat
`TextChatMessageStyle`	Text message style
`FileChatMessageStyle`	File message style
`SearchChatMessageStyle`	Search highlight style in messages
`ImageChatMessageStyle`	Image style in message
`AudioChatMessageStyle`	Audio message style
`SurveyChatMessageStyle`	Survey/poll style in message
`ScheduleChatMessageStyle`	Schedule/reminder message style
`OperatorJoinedChatMessageStyle`	Operator connection message style
`QuickReplyStyle`	Quick replies style
`QuoteStyle`	Message quoting display style
`OpenGraphViewStyle`	OpenGraph display style in text messages

Each component has common base parameters described in ChatMessageStyle, for example:

/// Element corner radius (if applicable to element, otherwise ignored)
public var cornerRadius: CGFloat
/// Element background color
public var backgroundColor: UIColor
/// Element color (if applicable to element, otherwise ignored)
public var tintColor: UIColor

And unique parameters for each component. Full list available in API Documentation

Style can be created using base constructor:

let outcomeMessages = ChatMessagesStyles(components: components)
outcomeMessages.textMessageStyle.textStyle.color = .black
outcomeMessages.showAvatar = showOutcomeAvatar
outcomeMessages.bubbleErrorColor = .red

or using builder with closure for parameter configuration:

let outcomeMessages = ChatMessagesStyles.build(with: components) { messagesStyle in
    messagesStyle.textMessageStyle.textStyle.color = .black
    messagesStyle.showAvatar = showOutcomeAvatar
    messagesStyle.bubbleErrorColor = .red
}

Existing style configuration is done through properties:

// Get search screen settings
let searchFlow = theme.flows.searchFlow
searchFlow.navigationBarStyle.hidden = false
searchFlow.navigationBarStyle.searchBarStyle.cancelButtonStyle.tintColor = .white
searchFlow.searchMessageStyle.matchTextStyle.color = .red
searchFlow.notFoundTextStyle = ChatTextStyle(font: typography.message, color: .white)

or using apply method with closure configuration:

// Apply search screen settings
theme.flows.searchFlow.apply {
    $0.navigationBarStyle = NavigationBarStyle.build(with: components, configure: {
        $0.hidden = false
        $0.backButtonColor = .red
    })
    $0.searchMessageStyle.apply {
        $0.matchTextStyle = .init(font: UIFont.systemFont(ofSize: 20), color: .systemGreen)
        $0.nextImage = ChatImage(system: "chevron.forward", tintColor: .systemGreen)
    }
    $0.navigationBarStyle.searchBarStyle.cancelButtonStyle.tintColor = .red
    $0.notFoundTextStyle = ChatTextStyle(font: typography.message, color: .red)
}

note

Current version has limitation on component configuration (reused from ChatComponents) through apply. Their configuration in one flow through apply may lead to their global change in theme. In this case, it's recommended to create new component specifically and configure it in required flow location.

note

Design system was applied to current chat in this version, not all parameters may have been considered. If configuration problems are discovered, contact support.