Пример использования чата с плавающим лавашаром
Обновлено 1 декабря 2023
Ниже код примера использования чата с плавающим лавашаром.
import React, { FC } from 'react';
import { createAssistantClient } from '@salutejs/client';
import { FloatingAssistantChatLottie, FloatingAssistantChatMethods } from '@sberdevices/assistant-web-sdk/floatingAssistantChatLottie';
const client = createAssistantClient(...);
export const ChatWithAssistant: FC = () => {
const chatRef = useRef<FloatingAssistantChatMethods>(null);
return (
<FloatingAssistantChatLottie
ref={chatRef}
assistant={client}
mobile={false}
// character="sber"
// disableGreetings={false}
// disableTransparentArea={false}
// features={{
// certErrorMessage: {...},
// closeByOutsideClick: false,
// disableAssistantUi: false,
// disableStartWithLowQuality: false,
// enableChatOverCanvas: true,
// useCustomFontLoading: false,
// }}
// history={{
// store: {...},
// disable: false,
// }}
// kpssAnimationSpritesUrl="example.com/sprites"
// kpssSize="large"
// onCanvasRender={<Canvas />}
// onDeepLink={() => {}}
// onEvent={() => {}}
// onOpenChatWithOperator={() => {}}
// position={...}
// sendTextAsSsml={false}
// themeColor="light"
// tooltip={<Tooltip />}
// userPreferences={{
// store: {...},
// disable: false,
// }}
// webTelemetry={...}
/>
);
};
Параметры чата и их описание:
ref
— объект чата.assistant
— объект, который получаем при вызовеcreateAssistantClient
.mobile
— указывает на включение мобильного режима отображения чата.character
— стартовый голос ассистента.disableGreetings
— отключение приветственных сообщений от ассистента.disableTransparentArea
— отключение кликабельности прозрачной области вокруг лавашара. Подробнее Некликабельность прозрачной области.features.certErrorMessage
— объект пользовательских данных для сообщения об ошибке, связанной с недействительным сертификатом.features.closeByOutsideClick
— закрытие чата при клике по странице. Значение по умолчанию —false
.features.disableAssistantUi
— отключение интерфейса ассистента.features.disableStartWithLowQuality
— отключение использования растровых анимаций лавашара в низком качестве при старте асситента (при FloatingAssistantChatImage). По умолчанию мобильная версия использует низкое качество до загрузки высокого.features.useCustomFontLoading
— отключение загрузки шрифтов ассистентом, если шрифт SB Sans загружается страницей. Используется для всех видов чата. Значение по умолчанию —false
.features.enableChatOverCanvas
— отключение использования чата вместе с Canvas App. Еслиtrue
, то канвас будет закрыт при вызове чатапа.history.store
— пользовательское хранилище истории общения клиента. Подробнее Хранение истории и пользовательских настроек.history.disable
— отключение истории общения клиента.kpssAnimationSpritesUrl
— альтернативный CDN для лавашара.kpssSize
— размер лавашара при закрытом чате.onCanvasRender
— компонент пользовательского Canvas App. Подробнее Кастомизация Canvas App.onDeepLink
— обработка стендонезависимых ссылок.onEvent
— подписка на события аналитики чата.onOpenChatWithOperator
— подписка на события открытия чата с оператором.position
— параметры управления позицией чата. Подробнее Изменение позиции лавашара и чата.sendTextAsSsml
— включение отправки текстовых сообщений в формате SSML.themeColor
— цвет темы. Возможные значения: dark — темная тема, light — светлая тема.tooltip
— пользовательский компонент подсказки. Подробнее Пример отображения всплывающих подсказок ассистента.userPreferences.store
— пользовательское хранилище настроек клиента. Подробнее Хранение истории и пользовательских настроек.userPreferences.disable
— отключение хранения настроек клиента.webTelemetry
— объект конфигурации WebTelemetry.
Методы чата и их описание:
open
– открытие чата. Принимает объект с параметрами.close
– закрытие чата.clearHistory
– очистка истории общения клиента.showTooltip
– открытие встроенной всплывающей подсказки для закрытого чата. Принимает текст подсказки или объект с параметрами.isOpen
– текущее состояние чата.