Vue Bot Scenario Syntax

Background

I was about to write a chat bot, but I had a problem to review scenarios with my partner and also I didn't find a good js API to create scenarios.

So I started with some declarative 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

But then I asked myself, what if I want to have more complex scenarios and still want to be able to communicate them with my partner. And I came up with Vue.js syntax below.

My questions are:

• Is it easy to read and understand?
• Is it possible to implement?
• How likely that you would use it in your project?

Benefits

• User Friendly - requires WYSIWYG editor to provide friendly UI for users
• Developer Friendly - requires only knowledge of templates in Vue.js
• Flexible - based on very simple concept, which can handle complex scenarios by providing logical steps (yes/no conditions) and cycles (jump from one to another scenario)

API

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
}

Scenario Example

<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>

Star on GitHub

As I mentioned in the beginning my questions are:

• Is it easy to read and understand?
• Is it possible to implement?
• How likely that you would use it in your project?

Motivate me with your star - Vue Bot Scenario

---

Reading list

Overviews

• https://chatbotsmagazine.com/the-tools-every-bot-creator-must-know-c0e9dd685094
• https://medium.com/swlh/what-is-conversation-design-and-how-to-design-your-chatbot-3754f04ab1e7

Platforms

• https://docs.microsoft.com/en-us/healthbot/quickstart-createyourfirstscenario
• https://botpress.io/
• https://botsociety.io/
• https://docs.botstar.com/en/wit.ai.html
• https://botmock.com/
• https://chatbotslife.com/custom-api-ai-chatbot-using-botui-58d673155c7d

Google Assistant

• https://www.gupshup.io/developer/docs/bot-platform/guide/how-to-build-a-bot-on-google-home
• https://chatbotslife.com/how-to-build-an-app-for-google-assistant-using-dialogflow-enterprise-edition-and-actions-on-google-4413a61d2f2d
• https://dialogflow.com/docs/integrations/google-assistant
• https://tutorials.botsfloor.com/tagged/google-assistant

Vue.js modules

• https://docs.botui.org/index.html
• https://github.com/ajb413/chat-engine-vue
• https://github.com/ajb413/vue-chat-engine
• https://medium.com/js-dojo/building-a-chatbot-with-vue-js-chatengine-and-amazon-lex-67ea1a3352b9
• https://github.com/Microsoft/BotFramework-WebChat/issues/461

Products

• https://reminderbot.io/?ref=madewithvuejs.com