Плавающий чат с лавашаром

Обновлено 15 января 2024

import React, { FC } from 'react';
import { createAssistantClient } from '@salutejs/client';
import { FloatingAssistantChatLottie, FloatingAssistantChatMethods } from '@sberdevices/assistant-web-sdk/floatingAssistantChatLottie';

// Клиент VPS
const client = createAssistantClient(...);

export const FloatingChatWithAssistant: FC = () => {
    const chatRef = useRef<FloatingAssistantChatMethods>(null);

    return (
        <FloatingAssistantChatLottie
            ref={chatRef}
            assistant={client}
            mobile={false}
            // allowLightCanvas={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. Подробнее Настройка клиента VPS.
• mobile — указывает на включение мобильного режима отображения чата. Подробнее Определение флага mobile.
• allowLightCanvas — включение использования текущей темы для Canvas-контейнера. Подробнее Управление цветом стандартного контейнера Canvas App.
• 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 – текущее состояние чата.