ChatBot

Front End Chat Interface which allows users to connect with an API.AI bot of choice or any other service.

<a href="https://github.com/Jharrison23/ChatBot/blob/master/Images/AnaBotGIF.gif"><img src="https://github.com/Jharrison23/ChatBot/blob/master/Images/AnaBotGIF.gif" title="Simple Walkthrough GIF"/></a>

Capabilites

• The interface has normal text input capabilities
• Allows the user to use speech input, and the bot will speak back to the user using HTML 5 Speech Synthesis.
• There is a delay which simulates the bot typing and using regular expressions there can be a dynamic time delay for each message back.
• The bot can also have multiple choice responses which are seperated using regular expressions as well.

Screenshots

Initial Screen

<a href="https://github.com/Jharrison23/ChatBot/blob/master/Images/Startup%20Screenshot.png "><img src="https://github.com/Jharrison23/ChatBot/blob/master/Images/Startup%20Screenshot.png" title="Initial Screen"/></a>

Showing Multiple Choice Buttons

<a href="https://github.com/Jharrison23/ChatBot/blob/master/Images/Show%20Buttons.png "><img src="https://github.com/Jharrison23/ChatBot/blob/master/Images/Show%20Buttons.png" title="Buttons Screen"/></a>

Show the view when switched back to text input

<a href="https://github.com/Jharrison23/ChatBot/blob/master/Images/Show%20Text%20Input.png "><img src="https://github.com/Jharrison23/ChatBot/blob/master/Images/Show%20Text%20Input.png" title="Text Input Screen"/></a>

Built With

• API.AI - Used to build conversation experiences
• Firebase - Used for the Realtime Database
• jQuery - A Javascript Library used for easy DOM manipulation