Версия: 5.9.0

Дизайн-система

Для настройки пользовательского интерфейса в SDK используется дизайн-система на основе класса ChatTheme.

SDK поддерживает светлую и тёмную темы — они задаются через свойства theme и darkTheme на экземпляре ChatCenterUISDK. Если darkTheme не задана явно, для тёмного режима используются значения из theme.

Установка theme сбрасывает darkTheme — назначайте darkTheme после theme.

Дизайн-система в Figma

Визуальное представление дизайн-системы доступно в виде UIKit в Figma.

Файл содержит следующие страницы:

Foundation — цвета, типографика, иконки (светлая и тёмная темы)
Message Type — все типы сообщений в контексте чата
Components — Navigation, Status, Button, Bubbles, Input Field, OS UI, Content, Illustration
User Flow — 40+ экранов с полным пользовательским сценарием

С чего начать

Начните с Быстрого старта — готовый пример, который можно скопировать и адаптировать.

Термины «токен», «компонент», «flow» описаны в Глоссарии.

Быстрый пример

// Создание темы с кастомными цветами
let colors = ChatColors()
colors.main = .black
colors.link = .systemBlue

let theme = ChatTheme(colors: colors)

// Применение
chatCenterSDK.theme = theme
// chatCenterSDK.darkTheme = darkTheme // опционально, если отдельная тёмная тема задана

ChatTheme можно создать двумя способами:

// Из базовых токенов (цвета, шрифты, изображения) — любой аргумент можно опустить
ChatTheme(colors: myColors, typography: myTypography)

// Из настроенных компонентов (для более детальной кастомизации)
ChatTheme(components: myComponents)

Что и когда настраивать

Как выбрать уровень кастомизации?

Дизайн-система имеет три уровня кастомизации. Выберите подходящий:

Задача	Уровень	Что изменить
Изменить фирменный цвет во всём SDK	Токен	`ChatColors`
Изменить шрифты во всём SDK	Токен	`ChatTypography`
Заменить иконки	Токен	`ChatImages`
Настроить кнопку, панель или виджет во всём SDK	Компонент	`ChatComponents`
Настроить элемент только в экране чата	Сценарий	`ChatFlow`
Настроить элемент только в экране поиска	Сценарий	`SearchFlow`

Все параметры опциональны — по умолчанию используются стандартные настройки.

Архитектура

ChatTheme содержит ChatComponents (общие стили, переиспользуемые на всех экранах SDK) и ChatFlows (переопределения для конкретных экранов). Компоненты опираются на три набора токенов: ChatColors, ChatTypography, ChatImages.

Полный список полей ChatComponents — в Компонентах. Точечная кастомизация через chatFlow / searchFlow — в Сценариях.

Приоритет применения

ChatFlows (точечно, для одного экрана) > ChatComponents (глобально) > ChatColors / ChatTypography / ChatImages (токены по умолчанию).

Метод `apply` и протокол `Applicable`

Все объекты дизайн-системы (ChatTheme, ChatColors, ChatTypography, ChatImages, ChatComponents, стили и сценарии) поддерживают метод apply(_ configure:) через протокол Applicable.

theme.flows.chatFlow.apply {
    $0.incomeMessages.showAvatar = true
    $0.outcomeMessages.showAvatar = false
    $0.inputViewStyle.sendButtonStyle.tintColor = .white
}

Метод apply возвращает Self, что позволяет настроить свежесозданный объект в одном выражении:

let theme = ChatTheme().apply { $0.flows.chatFlow.incomeMessages.bubbleTintColor = .red }

Для создания стиля с кастомной конфигурацией используйте фабричный метод build.

Базовый класс `ChatStyle`

Все стили в SDK наследуют от базового класса ChatStyle. Он реализует протокол Applicable и предоставляет статический метод build(with:configure:) для создания подклассов.

Основные свойства базового класса:

Свойство	Тип	Описание
`backgroundColor`	`UIColor`	Цвет фона элемента
`tintColor`	`UIColor`	Цвет элемента (кнопка, иконка и т.п.)
`cornerRadius`	`CGFloat`	Скругление углов (если применимо)
`components`	`ChatComponents`	Ссылка на основные компоненты стиля

Каждый подкласс (например, ChatInputTextStyle, NavigationBarStyle, QuickReplyStyle) наследует эти свойства и добавляет свои специфичные параметры. ChatStyle напрямую не создаётся — используйте конкретный подкласс через конструктор с components или статический метод build:

let customStyle = ChatInputTextStyle.build(with: components) { style in
    style.backgroundColor = .white
    style.cursorColor = .systemBlue
}

Расширенные настройки

Для точечной кастомизации отдельных элементов используйте стили через пользовательские сценарии. Например, можно поменять цвет кнопки только на конкретном экране, не затрагивая остальные.

Быстрый поиск: куда идти

Хочу...	Файл	Класс / свойство
Применить фирменный цвет	Цвета	`ChatColors.link`
Заменить шрифт в пузырях	Типографика	`ChatTypography.message`
Заменить иконку отправки	Изображения	`ChatImages.sendButtonImage`
Настроить навигационную панель	Компоненты	`ChatComponents.navigationBarStyle`
Скрыть аватар у исходящих	Сценарии	`chatFlow.outcomeMessages.showAvatar`
Изменить цвет выделения в поиске	Сценарии	`searchFlow.searchMessageStyle.matchTextStyle.color`
Настроить аудиоплеер	Компоненты	`ChatComponents.audioPlayerStyle`
Задать тёмную тему	Быстрый старт	`chatCenterSDK.darkTheme`
Найти все классы стилей	Стили	—
Что-то не работает	Troubleshooting	—
Изменить цвет кнопки отправки (везде)	Компоненты	`components.inputViewStyle.sendButtonStyle.tintColor`
Изменить цвет кнопки отправки (только чат)	Сценарии	`chatFlow.inputViewStyle.sendButtonStyle.tintColor`
Настроить пустой экран чата	Компоненты	`components.chatPlaceholderStyle`

Быстрый пример​

Что и когда настраивать​

Как выбрать уровень кастомизации?​

Архитектура​

Метод apply и протокол Applicable​

Базовый класс ChatStyle​

Расширенные настройки​

Рекомендации по производительности​

Быстрый поиск: куда идти​