Перейти к основному содержимому
Версия: 5.5.0

Инструкции по миграции

Переход на версию 5.0.0​

Подключение через CocoaPods​

Название пода поменялось на ChatCenterUI, версия 5.0.0

Конфигурация ChatCenterUI​

В этой версии изменился API SDK и он не совместим с версиями 4.x. Пример настройки можно посмотреть в демо приложении. (https://github.com/edna-ru/cc-ios-demo)

Основные шаги остались прежними:

    1. Настройка подключения к серверу
    let chatTransportConfig = ChatTransportConfig(rest: "restURL",
                                                  webSocket: "webSocketURL",
                                                  dataStore: "dataStoreURL")
    1. Настройка параметров сетевого подключения
    var chatNetworkConfig = ChatNetworkConfig()
    chatNetworkConfig.sslPinning.allowUntrustedSSLCertificate = true
    1. Настройка параметров работы чата
    var chatConfig = ChatConfig(transportConfig: chatTransportConfig,
                                networkConfig: chatNetworkConfig)
    chatConfig.searchEnabled = searchEnabled
    chatConfig.voiceRecordingEnabled = voiceRecordingEnabled
    chatConfig.linkPreviewEnabled = linkPreviewEnabled
    chatConfig.keepSocketActive = keepWebSocketActive
    1. Инициализация СДК
    let chatCenterSdk = ChatCenterUISDK(providerUid: selectedServer.providerUid,
                                        chatConfig: chatConfig,
                                        loggerConfig: ChatLoggerConfig(logLevel: .all))
    1. Настройка тем оформления
    chatCenterSdk.theme = makeLightTheme()
    chatCenterSdk.darkTheme = makeDarkTheme()

Настройка внешнего вида​

Настройка UI осуществляется через темы (светлая/темная).

В СДК 3 уровня кастомизации интерфейса:

  1. Минимальный. Настройка цветов, шрифтов и/или изображений (например, под корпоративные цвета)

  2. Покомпонентный. Настройка компонентов дизайн системы СДК (переиспользуемые элементы, например кнопка)

  3. Точечный. Детальная настройка flow (экраны чата или поиска), в этом случае настраивается внешний вид конкретного элемента на экране

Уровни имеют вложенную структуру:

let components = ChatComponents(images: ChatImages(), colors: ChatColors(), typography: ChatTypography())
let flows = ChatFlows(components: components)
let theme = ChatTheme(flows: flows)

Приоритет у нижних уровней выше, т.е если в ChatFlow установить цвет элемента, он заменит цвет заданнный в компоненте ChatColors

Переход на версию 5.3.0​

В версии 5.3 стабилизирован интерфейс настроек дизайн системы. Это привело к изменениям в существующих АПИ. В дальнейших релизах больших изменений больше не будет.

Основные изменения это приведение названий к единому виду:

  • Переименованы некоторые стили (для основных старые названия помечены как устаревшие, рекомендуется переименовать)
  • Переименованы некоторые свойства для унификации. В основном добавлены в название Color, Style и т.д (Xcode в этом случае подсказывает замену и предлагает исправление)

В некоторых местах изменена структура настройки стилей, например, для голосовых сообщений. Рекомендуется посмотреть на АПИ нового стиля и перенастроить под ваш дизайн.

Также для удобства создания стилей, к ним добавлен билдер (метод класса build), позволяющий создать стиль и тут же настроить его через замыкание:

    // Создание компонентов дизайн системы
    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
    }

Для удобной настройки существующих стилей, к ним также добавлен метод класса apply:

// Применение настроек для экрана поиска
        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)
        }
примечание

В текущей версии есть ограничение на настройку компонентов (переиспользуемых из ChatComponents) через метод apply. Их настройка во флоу через apply, может приводить к их глобальному изменению во всей теме. В этом случае рекомендуется создавать новый компонент и настраивать его в нужном месте флоу.

Последнее обновление