Управление позицией AssistantBar

Обновлено 22 ноября 2023

AssistantBar зафиксирован в окне браузера, но вы можете управлять его отступами, шириной и цветом фона.

Для этого передавайте нужные CSS-свойства в необязательное свойство displayingOptions. displayingOptions принимает следующие свойства с типом string:

• top;
• bottom;
• left;
• right;
• width;
• background;
• backgroundImage.

Обратите внимание, что у диалога пользователя с ассистентом прозрачный фон. Вы можете установить другой цвет самостоятельно.

Фоновый цвет можно установить:

• с помощью параметров background и backgroundImage;
• создав собственный фоновый блок position=fixed — в этом случае может понадобиться подписка на событие открытия и закрытия шторки ассистента (свойство onChatToggle: (isOpen: boolean) => void).

Пример использования AssistantBar с передачей фонового цвета:

import React, { FC } from 'react';
import { AssistantBar } from '@sberdevices/assistant-web-sdk/assistantBar';
import { background, gradient } from '@salutejs/plasma-tokens';

const displayingOptions = {
    background,
    backgroundImage: gradient,
};

export const AssistantBarWithBackground: FC = () => {
    return <AssistantBar {...props} displayingOptions={displayingOptions} />;
};

Пример использования AssistantBar ограниченной ширины с общим фоном для всей страницы:

import React, { FC, useState, useCallback } from 'react';
import styled from 'styled-components';
import { AssistantBar } from '@sberdevices/assistant-web-sdk/assistantBar';
import { background, gradient } from '@salutejs/plasma-tokens';

import { Content } from '../components/Content';

const displayingOptions = {
    left: '20%',
    width: '60%',
};

const StyledContentContainer = styled.div<{ isOpen: boolean }>`
    height: 100vh;
    background: ${background};
    ${({ isOpen }) => (isOpen ? `background-image: ${gradient};` : '')};
`;

export const AssistantBarWithBackground: FC = () => {
    const [isOpen, setIsOpen] = useState(false);

    const handleChatToggle = useCallback((isOpen) => {
        setIsOpen(isOpen);
    }, []);

    return (
        <StyledContentContainer isOpen={isOpen}>
            <AssistantBar {...props} displayingOptions={displayingOptions} onChatToggle={handleChatToggle} />

            <Content />
        </StyledContentContainer>
    );
};