ym88659208ym87991671
Установка | Документация SmartMarket
Skip to main content

Установка

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, чтобы сообщить нам о ней