Components

Components are main elements of design system configuration. When component type (appearance) matches, they can be reused in user scenarios (screens). For example, an icon button.

Allows quick setup and change of chat styling.

Configuration example:

// Create design system components
let components = ChatComponents()
// Override parameters of common SDK components
components.navigationBarStyle.titleStyle.color = .white
components.searchBarStyle.cancelButtonStyle.tintColor = .white

// Create theme from components
let theme = ChatTheme(components: components)

or using build constructor:

// Create design system components
let components = ChatComponents.build { components in
    components.searchBarStyle.cancelButtonStyle.tintColor = .black
    components.loadingChatStyle.indicatorStyle.backgroundColor = .systemGray3
    components.loadingChatStyle.indicatorStyle.cornerRadius = 20.0
    components.audioPlayerStyle.playButtonStyle.image = ChatImage(system: "play.fill", tintColor: .red)
    components.audioPlayerStyle.pauseButtonStyle.image = ChatImage(system: "pause.fill", tintColor: .green)
    components.audioPlayerStyle.progressViewStyle.color = .black
    components.audioPlayerStyle.progressViewStyle.backgroundColor = .yellow
}

note

If you need to change common component style in only one place, override it in required user scenario.

Following components are available for parameter override:

(list will be expanded as needed)

Chat Component Styles

Name	Description
navigationBarStyle	Navigation bar style (title, back/forward buttons, background color, etc.)
searchBarStyle	Search bar style in navigation bar
loadingIndicatorStyle	Loading indicator style (progress bar, spinner). Used everywhere waiting process needs to be displayed
loadingChatStyle	Chat loading style (screen when opening chat)
chatPlaceholderStyle	Empty chat placeholder style (e.g., when no messages)
errorPlaceholderStyle	Chat error style (network error, loading failure). Shows informative message and actions (e.g., "Retry")
inputTextStyle	Message input text field style. Font, text color, placeholder, margins and other input parameters configuration
audioPlayerStyle	Audio player style for voice message playback. Includes appearance and behavior of controls
inputViewStyle	Message input panel style (bottom chat section). Includes input field, send and attach buttons
photoPickerStyle	Photo picker component style from gallery or camera
fileViewerStyle	File viewer style (images, documents, video). Controls fullscreen viewing and interactivity