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

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';
import { background, gradient } from '@sberdevices/plasma-core/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';
import { background, gradient } from '@sberdevices/plasma-core/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>
    );
};

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

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