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

Обновлено 1 декабря 2023

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

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

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

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

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

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

import { background, gradient } from '@salutejs/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 '@salutejs/client';
import { PlasmaTheme } from '@sberdevices/assistant-web-sdk';
import { AssistantBar } from '@sberdevices/assistant-web-sdk/assistantBar';

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}
                        onChatToggle={handleChatToggle}
                        // avatar="./avatar.jpg" // Ссылка на аватар пользователя
                        // className="test" // стили оформления
                        // disableGreetings={true} // Отключение приветственных сообщений от ассистента
                        // onDeepLink={() => null} // Обработка ссылок, независимых от стенда
                        // onOpenChatWithOperator={() => {}} //  подписка на события открытия чата с оператором
                        // themeColor="light" // Цвет темы. 'dark' | 'light'
                        // kpssAnimationSpritesUrl="example.com" // Альтернативный CDN для лавашара
                        // verticalSuggestions={true} // Отображение подсказок в вертикальном режиме. По умолчанию - true
                        // title="New Chat" // Заголовок для чата. По умолчанию - Ассистент
                        // fontsCdnUrl="example.com/fonts/" // Альтернативный CDN для шрифтов
                        // assetsCdnUrl="example.com/assets" // CDN для статических файлов, например, картинок
                    />
                </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>
    );
};