Пример использования чата с плавающим лавашаром

Ниже код примера использования чата с плавающим лавашаром.

import React, { FC } from 'react';
import { createAssistantClient } from '@sberdevices/assistant-client';
import { FloatingAssistantChat } from '@sberdevices/assistant-web-sdk';

const client = createAssistantClient(...);

export const ChatWithAssistant: FC = () => {
    const chatRef = useRef<{
        open: (params?: { disableGreetings: boolean }) => void;
        close: () => void;
        isOpen: boolean;
    }>(null);

    return (
        <FloatingAssistantChat
            ref={chatRef}
            assistant={client}
            avatar="./avatar.jpg"
            className="test"
            disableGreetings={true}
            onDeepLink={() => null}
            onOpenChatWithOperator={() => {}}
            themeColor="light"
            kpssAnimationSpritesUrl="example.com"
            verticalSuggestions={true}
            title="New Chat"
            fontsCdnUrl="example.com/fonts/"
        />
    );
};

Ниже перечислены параметры и их описание.

  • ref — объект чата.
  • assistant — объект, который получаем при вызове createAssistantClient.
  • avatar — ссылка на аватар пользователя.
  • className — стили оформления.
  • disableGreetings — отключение приветственных сообщений от ассистента.
  • onDeepLink — обработка стендонезависимых ссылок.
  • onOpenChatWithOperator — подписка на события открытия чата с оператором.
  • themeColor — цвет темы. Возможные значения: dark — темная тема, light — светлая тема.
  • kpssAnimationSpritesUrl — альтернативный CDN для лавашара.
  • verticalSuggestions — включение вертикальных саджестов. Значение по умолчанию — true.
  • title – заголовок для плавающего чата на мобильныx устройствах. Значение по умолчанию — Салют.
  • fontsCdnUrl — альтернативный CDN для шрифтов.

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

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