Установка

Assistant SDK для Web — это пакет, который содержит компонент чата с виртуальным ассистентом Салют для веба. Компонент написан на языке React и использует styled-components.

caution

Пока мы интегрируем Assistant SDK только в дочерние компании Сбера. Возможно, вас заинтересуют инструменты для создания смартапов (навыков для виртуальных ассистентов Сбера). Почитайте о них подробнее в документации.

В состав пакета входят следующие компоненты:

Chat — фиксированный чат;
FloatingAssistantChat — плавающий чат;
AssistantBar — чат со шторкой;
PlasmaTheme — подключение шрифтов и переменных плазмы;
ChatThemeProvider - подключение темы
Kpss — лавашар КПСС с анимациями;
KpssButton — кнопка с КПСС;
createIeCssVarsPlugin — плагин для переключения тем в Internet Explorer 11;
createCookieStore — хранилище истории в cookie;
Gradient — компонент с градиентом.
ChatInputBar - компонент с полем ввода
Card - компонент карточки
Bubble - компонент для текстовых сообщений чата
ChatBar - нижняя полоса чата
Suggestions - компонент саджестов

Установка пакета

В командной строке выполните команду:

npm i -s @sberdevices/assistant-web-sdk @sberdevices/assistant-client react react-dom styled-components @sberdevices/plasma-ui @sberdevices/plasma-tokens @sberdevices/plasma-icons

Поддержка Internet Explorer 11

ES5 в Internet Explorer 11

npm i -D react-app-polyfill resize-observer-polyfill @types/resize-observer-browser

В начале файла index.js:

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import 'resize-observer-polyfill/dist/ResizeObserver.global';

import ResizeObserver from 'resize-observer-polyfill';

window.ResizeObserver = window.ResizeObserver || ResizeObserver;

В Internet Explorer нельзя узнать часовой пояс пользователя в нужном бэкенду формате, поэтому используйте полифил Intl.DateTimeFormat().resolvedOptions().timeZone.

Например, он может выглядеть так:

var moment = require("moment-timezone");
 ⁣ ⁣ ⁣ ⁣
⁣var DateTimeFormatPolyfilled = Intl.DateTimeFormat;
⁣⁣var result = JSON.parse(JSON.stringify(Intl.DateTimeFormat().resolvedOptions()))
⁣⁣Object.defineProperty(DateTimeFormatPolyfilled.prototype, 'resolvedOptions', {
⁣    ⁣writable: true,
    configurable: true,
    value: function(){
        return Object.assign(result,{timeZone: moment.tz.guess()})
    },
⁣});

⁣window.Intl.DateTimeFormat = DateTimeFormatPolyfilled;

Обработка CSS-переменных в Internet Explorer 11

Internet Explorer 11 не поддерживает CSS-переменные, поэтому необходимо дополнительно обрабатывать стили. Для этого используйте плагин stylis-plugin-css-variables — он поставляется в пакете с SDK.

Создание styledPlugins лучше вынести за пределы рендера компонента, так как при перерендере <App /> может произойти перерисовка без CSS-переменных:

import { StyleSheetManager } from 'styled-components';
import { createIeCssVarsPlugin } from '@sberdevices/assistant-web-sdk';

const isNativeSupport = typeof window !== 'undefined' && window.CSS?.supports?.('(--a: 0)');

const stylisPlugins = [createIeCssVarsPlugin()];

const App = () => (
    /// styled-components (в production) использует CSSOM для редактирования стилей документа
    /// хоть IE и поддерживает CSSOM достать переменные не представляется возможным, поэтому CSSOM необходимо отключить
    <StyleSheetManager stylisPlugins={stylisPlugins} disableCSSOMInjection={!isNativeSupport}>
        {...}
    </StyleSheetManager>
);

render(<App />, document.getElementById('root'));

Обновлено 20 апреля 2022

Заметили ошибку?

Выделите текст и нажмите Ctrl + Enter, чтобы сообщить нам о ней

Популярные