Использование Embedded App и Background App

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

Background App — это смартапы, которые не представлены на экране пользователя. Они работают в фоновом режиме.

Embedded App — один из типов Background App. Этот сценарий может обрабатывать:

• запрос пользователя - например, с помощью Embedded App можно управлять сайтом с помощью голоса;
• ответ сценария на клиенте — например, с помощью Embedded App можно управлять перемещением пользователя по страницам сайта.

Чтобы использовать смартапы типа Embedded App, добавьте Embedded App в массив backgroundApps Assistant Client. Для этого используйте метод assistant.addBackgroundApp, который возвращает объект смартапа:

• remove: () => void — удаляет данный Background App из backgroundApps;
• onCommand: <T>(subscriber: (command: AssistantSmartAppData<T>, messageId: string) => void) => { clearSubscribers: () => void } — подписывает на команды для данного Background App и возвращает объект с методом для очистки подписчиков;
• sendServerAction: (serverAction: unknown, messageName?: string, requestId?: string) => void — отправляет serverAction в данный Background App.

Подключение Embedded App:

import React, { FC } from 'react';
import { createAssistantClient, AppInfo } from '@salutejs/client';
import { FloatingAssistantChatLottie } from '@sberdevices/assistant-web-sdk/floatingAssistantChatLottie';

const assistant = createAssistantClient(...);

const appInfo: AppInfo = { ..., frontendType: 'EMBEDDED_APP' };
const getState: Promise<Record<string, unknown>> = () => Promise.resolve({});

const myEmbeddedApp = assistant.addBackgroundApp({ appInfo, getState });

interface FrontendAction {
    type: 'SET_COLOR';
    payload: {
        color: 'green' | 'orange' | 'red';
    }
}

myEmbeddedApp.onCommand<FrontendAction>((command) => {
    dispatchAction(command.smart_app_data as FrontendAction)
});

myEmbeddedApp.sendServerAction({ type: 'SET_COLOR', payload: { color: 'orange' } });

export const FloatingChatWithAssistant: FC = () => {
    return <FloatingAssistantChatLottie {...props} assistant={assistant} />;
};