Тема асситента

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

На устройствах SberBox и SberPortal предполагается использование темных тем:

import { darkJoy, darkEva, darkSber } from '@salutejs/plasma-tokens/themes';

По умолчанию используется тема darkSber.

Подробнее про персонажей ассистента читайте в документации.

Чтобы узнать какой персонаж выбран у пользователя, подпишитесь на событие data от assistant-client:

assistantClient.on('data', (command) => {
    if (command.type === 'character') {
        // 'sber' | 'eva' | 'joy';
        setCharacter(command.character.id);
    }
});

Пример смены персонажа

App.tsx

import React, { FC, useRef, useEffect, useState } from 'react';
import { createGlobalStyle } from 'styled-components';
import { createAssistant, AssistantAppState, CharacterId } from '@salutejs/client';
import { darkJoy, darkEva, darkSber } from '@salutejs/plasma-tokens/themes';
import { text, background, gradient } from '@salutejs/plasma-tokens';

const ThemeBackgroundEva = createGlobalStyle(darkEva);
const ThemeBackgroundSber = createGlobalStyle(darkSber);
const ThemeBackgroundJoy = createGlobalStyle(darkJoy);

const DocStyles = createGlobalStyle`
html {
    color: ${text};
    background-color: ${background};
    background-image: ${gradient};
    min-height: 100vh;
}
`;

const initializeAssistant = (getState: any) => {
    return createAssistant({ getState });
};

export default function App() {
    const [character, setCharacter] = useState('sber' as CharacterId);

    const assistantStateRef = useRef<AssistantAppState>();
    const assistantRef = useRef<ReturnType<typeof createAssistant>>();

    useEffect(() => {
        assistantRef.current = initializeAssistant(() => assistantStateRef.current);
        assistantRef.current.on('data', (command) => {
            switch (command.type) {
                case 'character':
                    setCharacter(command.character.id);
                    // 'sber' | 'eva' | 'joy';
                    break;
                case 'navigation':
                    break;
                case 'smart_app_data':
                    break;
                default:
                    return;
            }
        });
    }, []);

    return (
        <div>
            <DocStyles />
            {(() => {
                switch (character) {
                    case 'sber':
                        return <ThemeBackgroundSber />;
                    case 'eva':
                        return <ThemeBackgroundEva />;
                    case 'joy':
                        return <ThemeBackgroundJoy />;
                    default:
                        return;
                }
            })()}
        </div>
    );
}