Установка
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'));
Заметили ошибку?
Выделите текст и нажмите Ctrl
+ Enter
, чтобы сообщить нам о ней