/rivescript-viz

Visualisations using .rive files for rivescript chatbot projects

Primary LanguageJavaScriptMIT LicenseMIT

rivescript-viz

This is Admin UI for your rivescript chatbot project. We are using here node, express, angular, d3 and other modules to create a full adminstrative page.

To install fork this project, run npm install and npm ..

This project was made using separated server/client side, so you can include this in your project as it is. To use this project, copy your .rive files into /aiml/ folder.

Admin GUI

Rive

In this page you have a spreadsheet that loads all .rive files inside aiml folder. So you can change, add and remove rules. After all you can save changes back again in your rive files. In that way you can give to your team a place to easily manage the bot brain.

Rive editor

Interview Chat

A interview chat mode is when the user has to answer questions made by the bot. In this case we give to user some options to answer, as buttons, select input or text.

Answer with 2 to 4 questions

Interview results

Interview results

Answer with many options

Interview results

Interview results

Answer text

Interview results

Interview Results

In the end of the interview is possible to show a custom page using variables that the user answered during the interview.

Interview results

Interview Results

In interview chat mode the bot will ask you questions and then when you reach the final of a flow, it will give you a page showing some text and results. The interview results page you have a HTML editor where you can create those files and contents.

Interview results

Chat

TODO

Graphs

This chart we look every topic and connect them using the reply, here a code example where a topic interview1 is connected to interview2:

> topic interview1
	+ *
	- Hi there! My name is <bot name>. What's your name?
	^ <set retry=0>{topic=interview2}
< topic

Here is a example of chart using as example begin.rive from rivescript repository. The size of nodes is based on connections numbers, so nodes that are important shows more and nodes that are at the end of the flow will be smaller.

Network Example

Connection between nodes now has a label that shows the trigger that connect them.

Connections Example

TODO

  • Interview chatbot
  • Normal Chat
  • Interview results: create a example in rive scripts, using user bot vars and document in readme
  • Save rive changes in file