Лавашар со всплывающей подсказкой

Обновлено 15 января 2024

Импортируйте компонент КПСС с плавающей подсказкой вокруг него.

Компонент не связан с чатом, вы можете разместить его в любом месте страницы. Компонент предоставляет доступ к колбэк на события; различные параметры для настройки КПСС и подсказки.

Параметры компонента:

• className?: string;
• tooltip?: ReactElement | TooltipProps | null – собственный компонент подсказки или параметры для подсказки по умолчанию;
• tooltipAlign?: 'left' | 'right' | 'center' – выравнивание подсказки относительно КПСС;
• kpss?: KpssButtonProps & { label: string }.

import React, { FC, useState, useEffect } from 'react';
import { KpssGroup, TooltipProps, KpssLottie } from '@sberdevices/assistant-web-sdk/components';
// import { Tooltip } from '@sberdevices/assistant-web-sdk/components';

export const AssistantKpssWithTooltip: FC = () => {
    const [tooltip, setTooltip] = useState<TooltipProps | null>(null);

    useEffect(() => {
        const timeoutId = window.setTimeout(() => {
            setTooltip({
                title: 'Lorem ipsum dolor',
                description: 'Sit lorem ipsum dolor amet consectetur',
                isPrimary: false,
                onClose: () => setTooltip(null),
                buttons: [
                    {
                        label: 'Button 1',
                        isPrimary: true,
                        onClick: () => {},
                    },
                    {
                        label: 'Button 2',
                        onClick: () => {},
                    },
                ],
            });
        }, 5000);

        return () => window.clearTimeout(timeoutId);
    }, []);

    return (
        <KpssGroup
            tooltipAlign="left"
            // tooltip={<Tooltip title="Lorem ipsum dolor sit amet consectetur" />}
            tooltip={tooltip}
            kpss={{
                KpssComponent: KpssLottie,
                size: 'medium',
                label: 'Открыть чат',
                character: 'sber',
                emotion: 'idle',
            }}
        />
    );
};