Пользовательские сценарии (flow)
Являются способом расширенной настройки интерфейса и позволяют точечно настроить необходимый экран и его элементы.
Они состоят из тех же компонентов, настраиваемых в базовых настройках, но позволяют переопределять их точечно, без изменений в других используемых местах.
Например, кнопка с иконкой используется в нескольких местах, но таким способом можно поменять её фон только в конкретном месте.
Пример настройки:
// Создание компонентов дизайн системы
let components = ChatComponents()
// Создание темы из компонентов
let theme = ChatTheme(components: components)
// Получение настроек экрана чата
let chatFlow = theme.flows.chatFlow
chatFlow.incomeMessages.showAvatar = true
chatFlow.outcomeMessages.showAvatar = false
// Получение настроек экрана поиска
let searchFlow = theme.flows.searchFlow
searchFlow.searchMessageStyle.matchTextStyle.color = .red
В SDK можно настроить два пользовательских сценария (экрана). Оба наследуют общие свойства:
backgroundColor:UIColor— цвет фона экрана.navigationBarStyle:NavigationBarStyle— стиль навигационной панели.
Чат
Экран чата является основным экраном SDK и содержит в себе его основные компоненты: список сообщений и панель ввода.
Отображение входа (загрузки данных, необходимых для работы):
Отображение пустого чата:
Отображение ошибки при получении данных:
Отображение сообщений:
Поиск сообщений
Экран поиска — вспомогательный экран, необходимый для поиска сообщений в чате и их отображения.
Он открывается по нажатию на иконку поиска в панели навигации (отображение включается в ChatConfig) и включает несколько состояний:
Отображение при открытии:
Отображение пустых результатов поиска:
Отображение результатов поиска:
Примеры настройки SearchFlow
let searchFlow = theme.flows.searchFlow
// Цвет выделения совпадений в результатах поиска
searchFlow.searchMessageStyle.matchTextStyle.color = UIColor(named: "BrandColor") ?? .systemOrange
// Шрифт выделения
searchFlow.searchMessageStyle.matchTextStyle.font = .systemFont(ofSize: 14, weight: .bold)
// Навигационная панель экрана поиска
searchFlow.navigationBarStyle.apply { nav in
nav.titleTextStyle.color = .white
nav.backgroundColor = UIColor(named: "BrandColor") ?? .systemBlue
nav.backButtonColor = .white
}
// Кнопка «Отмена» в поисковой строке
searchFlow.navigationBarStyle.searchBarStyle.cancelButtonStyle.tintColor = .white
// Текст при отсутствии результатов
searchFlow.notFoundTextStyle = ChatTextStyle(
font: .systemFont(ofSize: 15),
color: .secondaryLabel
)
// Фон экрана поиска
searchFlow.backgroundColor = .systemBackground
Полный перечень экранов (User Flow в Figma)
На странице User Flow в Figma представлены все возможные состояния интерфейса чата. Ниже перечислены основные экраны и их соответствие элементам SDK:
Запуск и загрузка
| Экран (Figma) | Описание | Настройка SDK |
|---|---|---|
| Starting | Инициализация чата, FaceID, спиннер | loadingChatStyle, loadingIndicatorStyle |
| Empty History | Пустой чат без сообщений | chatPlaceholderStyle |
| Load Prehistory | Загрузка истории сообщений | loadingIndicatorStyle |
Ошибки
| Экран (Figma) | Описание | Настройка SDK |
|---|---|---|
| Error first connection | Ошибка первого подключения (с кнопкой повтора) | errorPlaceholderStyle |
| Error connection | Потеря связи в процессе работы | errorPlaceholderStyle |
| Error Load Prehistory | Ошибка загрузки истории | errorPlaceholderStyle, ToastAlertStyle |
Сообщения
| Экран (Figma) | Описание | Настройка SDK |
|---|---|---|
| First Message | Первое сообщение в чате | chatFlow.outcomeMessages |
| Bot Ask | Сообщение от бота с кнопками | chatFlow.systemMessages, QuickReplyStyle |
| Agents is Down | Оператор недоступен (Snooze) | ScheduleChatMessageStyle |
Фото и файлы
| Экран (Figma) | Описание | Настройка SDK |
|---|---|---|
| Send Photo Message | Отправка фото в чат | ImageChatMessageStyle |
| View Photo | Полноэкранный просмотр фото | Встроенный просмотрщик |
| Photo Panopticum Size | Размеры фото в ленте | ImageChatMessageStyle |
| Photo Send State | Состояния отправки фото | ProgressViewStyle, статусы в ChatMessageStyle |
| File Send State | Состояния отправки файла | FileChatMessageStyle, ProgressViewStyle |
Голосовые сообщения
| Экран (Figma) | Описание | Настройка SDK |
|---|---|---|
| Voice Recording | Запись голосового сообщения | ChatInputVoiceStyle |
| Voice Recorded Done | Запись завершена | ChatInputVoiceStyle |
| Listen Voice Record | Прослушивание записи | AudioPlayerStyle |
| Voice Message Send State | Отправка голосового сообщения | AudioChatMessageStyle |
| Voice Message Transcribe to Text | Расшифровка голоса в текст | AudioChatMessageStyle |
Контекстные меню
| Экран (Figma) | Описание | Настройка SDK |
|---|---|---|
| Self Message Context menu | Контекстное меню своего сообщения (копировать, цитировать, удалить) | menuCopyImage, menuQuoteImage в ChatImages |
| Agent Message Context menu | Контекстное меню сообщения оператора | Аналогично |
| Self Photo / Doc Context menu | Меню для фото и документов | Аналогично |
| Agent Photo / Doc Context menu | Меню для фото/файлов оператора | Аналогично |
Цитирование
| Экран (Figma) | Описание | Настройка SDK |
|---|---|---|
| Self Cite Text / Photo / Doc Input | Ввод цитаты на своё сообщение | ChatInputQuoteStyle |
| Agent Cite Text / Photo Input | Ввод цитаты на сообщение оператора | ChatInputQuoteStyle |
| Cite all kinds | Отображение цитат всех типов в ленте | QuoteStyle |
Навигация и скролл
| Экран (Figma) | Описание | Настройка SDK |
|---|---|---|
| Fast travel to new message | Кнопка перехода к новым сообщениям | ScrollToMessageButtonStyle |
| Client is Down | Клиент внизу списка | ScrollToMessageButtonStyle.alwaysShow |
Оценка и опросы
| Экран (Figma) | Описание | Настройка SDK |
|---|---|---|
| Thread Rating Ask | Запрос оценки треда | SurveyChatMessageStyle |
| Thread Rating in Action | Процесс оценки | SurveyChatMessageStyle, ChatSurveyIcon |
| End Rating | Завершение оценки | SurveyChatMessageStyle |