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

Шторка ассистента — это выдвижная панель в интерфейсе, которая отображает окно для взаимодействия с виртуальным ассистентом.

Встраивается в 100vh контейнер. У нее прозрачный фон, поэтому его надо выставлять сразу для всей страницы. Чтобы это сделать, подпишитесь на смену персонажа в assistant-client.

Пример подписки:

client.on('vps', (event) => {
    if (event.type === 'incoming') {
        const { character: nextCharacter, emotion: nextEmotion } = event.systemMessage;
        if (nextCharacter && nextCharacter.id) {
            setCharacter(nextCharacter.id); // сохраняем персонаж в локальный стейт
        }
    }
});

Шторка может быть в свернутом и развернутом состоянии. В свернутом состоянии цвет фона должен быть черным или белым (в зависимости от темной или светлой темы). Для настройки используйте переменную background из @sberdevices/plasma-tokens. Фон в зависимости от выбранного ассистента установите с помощью переменной gradient.

Пример настройки фона:

import { background, gradient } from '@sberdevices/plasma-tokens';

const StyledContainer = styled.div<StyledContainerProps>`
    display: flex;
    height: 100vh;
    background: ${background};
    background-image: ${gradient};
`;

Чтобы подписаться на состояния открытия/закрытия шторки, ипользуйте свойство onChatToggle:

const [backgroundImage, setBackgroundImage] = useState(null);

const handleChatToggle = useCallback((isOpen) => {
    setBackgroundImage(isOpen ? gradient : null);
}, []);

Чтобы смена фона работала через переменные из Plasma, необходимо добавить тему из Plasma. Для этого используйте компонент PlasmaTheme из assistank-web-sdk или реализуйте свою обертку для поддержки Plasma.

Пример встроенной шторки ассистента с использованием PlasmaTheme:

import React, { FC, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
import styled, { StyleSheetManager } from 'styled-components';
import {
    CharacterId,
    createAssistantClient,
} from '@sberdevices/assistant-client';
import { PlasmaTheme, AssistantBar } from '@sberdevices/assistant-web-sdk';

const client = createAssistantClient(...);

interface StyledContainerProps {
    backgroundImage?: string;
}

const StyledContainer = styled.div<StyledContainerProps>`
    display: flex;
    height: 100vh;
    background: ${background};
    background-image: ${({ backgroundImage }) => backgroundImage};
`;

const StyledBlock = styled.div`
    flex: 1;
`;

const StyledChatBlock = styled.div`
    position: relative;
    flex: 3;
`;

const App: FC = () => {
    const [bg, setBg] = useState(null);
    const [character, setCharacter] = useState<CharacterId>('sber');

    const handleChatToggle = useCallback((isOpen) => {
        setBg(isOpen ? gradient : null);
    }, []);

    return (
        <PlasmaTheme character={character} themeColor={'dark'}>
            <StyledContainer backgroundImage={bg}>
                <StyledBlock>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis dolor qui, dolorum tempora impedit ut
                    consectetur maxime fuga! Tenetur quis laboriosam maxime ab quasi vero provident blanditiis quas, officia
                    alias.
                </StyledBlock>
                <StyledChatBlock>
                    <AssistantBar
                        assistant={client}
                        mobile={false}
                        avatar="./avatar.jpg" // Ссылка на аватар пользователя
                        className="test" // стили оформления
                        disableGreetings={true} // Отключение приветственных сообщений от ассистента
                        onDeepLink={() => null} // Обработка стендонезависимых ссылок
                        onOpenChatWithOperator={() => {}} //  подписка на события открытия чата с оператором
                        themeColor="light" // Цвет темы. 'dark' | 'light'
                        kpssAnimationSpritesUrl="example.com" // Альтернативный CDN для лавашара
                        verticalSuggestions={true} // Включение вертикальных саджестов. Default - true
                        title="New Chat" // Заголовок для чата. Default - Ассистент
                        fontsCdnUrl="example.com/fonts/" // Альтернативный CDN для шрифтов
                        onChatToggle={handleChatToggle}
                    />
                </StyledChatBlock>
                <StyledBlock>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis dolor qui, dolorum tempora impedit ut
                    consectetur maxime fuga! Tenetur quis laboriosam maxime ab quasi vero provident blanditiis quas, officia
                    alias.
                </StyledBlock>
            </StyledContainer>
        </PlasmaTheme>
    );
};

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

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