Vue Bot Scenario Syntax

Q: what's your name? A: input: name Q: how old are you? A: 28 (if < 18) do (1) else do (2) (1) Q: you have to be 18 years old to see the content (2) Q: welcome on board 

type IVariable = Any // Group set of scenarios in one collection interface Scenarios { id: String title: String } // Define scenario interface Scenario { id: String title: String } // Define global variable shared between all scenarios interface Var { v-model: IVariable // Global variable val: IVariable // Set default value userInput: Boolean // Show UI element to accept user input then: String // Scenario id to execute if value is TRUE else: String // Scenario id to execute if value is FALSE request: Promise // Function which returns promise to deliver value } // Add text UI element to chat interface Text { } // Play scenario by id interface Play { id: String } 

<template> <Scenarios id="dance-events" title="Dance Events"> <Scenario id="welcome" title="Welcome"> <Var v-model="$ConversationsCount" :val="$ConversationsCount || 0"/> <Var v-model="$GreetingText" :request="Quotes.getRandom({ type: 'greeting', name: $MyProfile.name })"/> <Text> {{ $GreetingText }}. How can I serve you? </Text> <Play v-if="$ConversationsCount === 0" id="dance-now" /> <Var v-else v-model="$Input" userInput @input="Stop()" then="FindScenarios($Input)" /> </Scenario> <Scenario id="dance-now" title="Where can I dance today?"> <Var v-model="$Type" value="events"/> <Var v-model="$MyCity" :value="$MyProfile.currentCity"/> <Var v-model="$Date" value="today"/> <Var v-model="$MyGenres" :value="$MyProfile.genres"/> <Var v-model="$FoundEvents" request="Search($Type, $MyCity, $Date, $MyGenres)" then="events-found" empty="events-notfound"/> </Scenario> <Scenario id="events-found"> <Var v-model="$FoundGenres" request="GetAllGenres($FoundEvents)" then="genres-found" empty="genres-notfound"/> </Scenario> <Scenario id="genres-found"> <Text> What would you like to dance today? </Text> <Var v-model="$SelectedGenre" userInput :options="$FoundGenres" then="events-results"/> </Scenario> <Scenario id="events-results"> <Var v-model="$FilteredEvents" request="Filter($FoundEvents, { genre: $SelectedGenre })"/> <Var v-model="$SelectedResultIndex" :val="$SelectedResultIndex || 0"/> <Var v-model="$SelectedEvent" :val="$FilteredEvents[$selectedResult]"/> <Text> There is a {{ $SelectedEvent.name }} near {{ $SelectedEvent.subwayStation }} with {{ $SelectedEvent.guests | count }} guests. Wanna go? </Text> <Event id="$SelectedEvent.id"/> <Var v-model="$RSVP" userInput then="rsvp"> <Else> <Var v-model="$SelectedResultIndex" :val="$SelectedResultIndex + 1"/> <Play id="events-results" /> </Else> </Var> </Scenario> <Scenario id="rsvp"> <Var v-model="$BookingStatus" :request="Event.RSVP($SelectedEvent, 'yes')" then="rsvp-confirmed" else="rsvp-aborted"/> </Scenario> <Scenario id="rsvp-aborted"> <Text> There was a problem with your RSVP: {{ $BookingStatus.error }}. Would you like to try again? <Var v-model="$RSVP" userInput then="rsvp"> <Else> <Var v-model="$SelectedResultIndex" :val="$SelectedResultIndex + 1"/> <Play id="events-results" /> </Else> </Var> </Text> </Scenario> <Scenario id="rsvp-confirmed"> <Text> Booking is confirmed today at {{ $SelectedEvent.startAt | time }} <Play id="end" /> </Text> </Scenario> </Scenarios> </template>