This project enhance visualisation ability to your dialogflow project. It will shown you the relation of an intent that you designed for the converstion. This is a Demo.

Dialogflow platform provide service to create chatbot in a few click. You can build a conversation logic by create an intent, define a training phase and define a reponse to what ever you want the bot to reply. but the conversation in real life it not only question and answer. We need to consider the context of converstion aswell. To make conversation more smooth you have to create conversation flow by define input/output context but let imagine if you have a hundread of intent with fully relationship It will be exhausted task to understand how the conversation flow is

Create service accounts in google cloud platform for your project. download a key and setting your environment variable with name 'GOOGLE_APPLICATION_CREDENTIALS' on your local machine

export GOOGLE_APPLICATION_CREDENTIALS='your-key-file.json'

Install all dependency

npm install

In /src/config folder replace 'proj-id' and 'code' with your project id and language code repectively

{
    "projectId": "proj-id"
    "languageCode": "code"
}

Start visulisation server

npm run build && npm run start

Open your browser with 8080 port

http://localhost:8080/

After open the browser. On the header you will see your project ID on the left and main menu on the right.

• Intent - This section shows intents which have a relation (inputcontext and outputcontext) with other
• Individual intent - This section shows stand alone intents (no relation with others)
• Read me This section shows the information about icon or meaning of the edge color

Intent section will show the graph about relation of an intents. it's directional graph

At the bottom, there is a control panel make you able to move left/right zoom in/out

Once you hover the node it will show you below

• Training pharse - This is your training phrase. we limited number of the phrase to 3 pharses.
  
• Response Message - This is your Text Response Message (not include text in payload)
• Number of payload - This is you number of payload that you create on platform

Once you hover the edge it will show you below

• Context name - This is context name. the edge will start from the parent intent to follow-up intent
• LifespanCount - This is a number of lifespan for this context

Next section is individual intent This section will show the intent in yourproject which has/have no relation with other intents

Last section is readme section. This will provide information about the symbol, color that we use in visualisation

You can execute our unit test by using below command

npm t

if all unit test passed will show result as below

or with coverage version

npm run testWithCoverage