Skip to main content

Взаимодействие со сценарием

рекомендация

Если разработка канваса планируется на базе Next.js, рекомендуется использовать шаблон canvas-example, который в том числе включает функционал взаимодействия с ассистентом. В данном случае использование компонента AssistantProvider не рекомендуется.

AssistantProvider#

Для реакции на команды ассистента (сценарные или навигационные), используйте хуки или подписку на команды в экземпляре ассистента. Предварительно обернув дерево компонентов компонентом AssistantProvider.

Хуки#

Хуки можно использовать в любом месте смартапа, обернутого компонентом AssistantProvider как на экранах, так и в компонентах одного или нескольких экранов.

useAssistant#

Обеспечивает доступ к экземпляру ассистента. Так же можно получить доступ используя getAssistantRef.

useAssistantCharacter (useCharacter)#

Возвращает текущй персонаж

useAssistantInsets (useInsets)#

Возвращает текущие отступы, переданные ассистентом

useAssistantOnSmartAppData#

Хук подписывается на событие data и проверяет тип входящей команды. Если входящая команда имеет тип smart_app_data, то значение ключа smart_app_data передается в качестве аргумента в функцию, которую принимает хук useAssistantOnSmartAppData.

const ScreenComponent = ({ pushScreen }) => {    ...    useAssistantOnSmartAppData((action /* a-ka `smart_app_data` */) => {        if (action.type = 'goto') {            pushScreen(action.payload.screen, action.payload.params);        }    })}

useAssistantOnNavigation#

Хук подписывается на событие data и проверяет тип входящей команды. Если входящая команда имеет тип navigation, то команда будет передана в качестве аргумента в функцию, которую принимает хук useAssistantOnNavigation.

const ScreenComponent = () => {    ...    useAssistantOnNavigation((command) => {        if (command.navigation.command === 'DOWN') {            window.scrollTo({                top: window.scrollY + 600,            })        }
        if (command.navigation.command === 'UP') {            window.scrollTo({                top: window.scrollY - 600,            })        }    })}

useVoiceNavigation#

Хук позволяет навигироваться по списку (карусели, галереи) голосом

useAssistantOnData#

Хук подписывается на событие data от ассистента и передает указанную функцию, как колбек на событие.

const ScreenComponent = () => {    ...    useAssistantOnData((anyCommand) => {        if (command.type === 'smart_app_error') {            // do whatever with error        }    })}

useAssistantState#

Хук useAssistantAppState принимает в качестве аргумента объект типа AssistantAppState.

Используйте хук для формирования состояний интерфейса. Такой подход поможет сценарию смартапа принимать решения, например понять, что скрывается под номером 4 в запросе «Открой номер 4». AssistantAppState

const ScreenComponent = ({ name, state }) => {    ...    useAssistantState({        name,        item_selector: {            items: state.gallery,        }    })}