The release of Chatbot custom UI with Bot integration and Custom UI at Vivify Healthcare is part of the company’s research and development efforts to find the best technology stack that is both sustainable and affordable.
The company constantly looks for ways to improve its offerings and stay ahead of the curve in the highly competitive healthcare industry. Utilizing the leading and open-source platform for transforming; how people interact with people/organizations through extensible conversational AI via RASA, Vivify Healthcare aims to deliver a top-notch user experience while keeping costs low and maintaining stability, security, and compliance.
Creation of Custom UI to overcome challenges for implementing enhanced features and functionalities; i.e. media upload, calendar selection, Search in chatbot, which is sometimes difficult or unmanageable in third party UI’s
About :
A chatbot is a computer program that is designed to simulate human conversation and interact with users through text messages. Chatbots are often used in mobile applications to provide automated customer support, deliver personalized experiences, and assist users with various tasks.
How it works :
- The user interacts with the chatbot through a text interface within the mobile application.
- The chatbot identifies the intent behind the user’s message, which represents the user’s goal or the action they want to perform. For example, the intent could be to get product information, make a reservation, or ask a question.
- The chatbot sends the response back to the user through the mobile application’s interface. The user can then view or listen to the response and continue the conversation by providing further input or asking follow-up questions.
Purpose:
Creation of Custom UI to overcome challenges for implementing enhanced features and functionalities; i.e. media upload, calendar selection, Search in chat bot, which is sometimes difficult or unmanageable in third party UI’s
Requirements :
- Dart : The latest stable version of Dart at the time was Dart 2.14+. You can visit the official Dart website Dart SDK.
- Flutter : The latest stable version of Flutter was Flutter 2.5+. You can visit the official Flutter website Flutter.
- Android Studio : At the time of my knowledge cutoff, Android Studio 4.2+ was the latest stable version.you can visit the official Android Studio website Andriod studio.
- Take a Bot URL that should be in web hooks. For example,
http://ivinbot.vivifyhealthcare.com/:0000/webhooks/rest/webhookPlease replace with your webhook URL for the BOT.
NOTE : This Custom UI in Flutter is compatible with the "Provider State Managmenmet".Process :
- Clone this repository and open in Android Studio.
- Now, open the pubspec.yaml file and do pubget.
- Now, click on the enable dart support.
- Then open the emulator, run the main.dart file.
- You will get like below
- Now, click on message icon and send a “Hi” message to get the response from the bot.
Developer :
Below code snippet for UI, When bot or User send/receive the message then bubble widget will be build with the response and UI will be refreshed. For bubble widget, we used bubble package in pubspec.yaml.If you want to change the bubble widget, by changing below code.
Widget buildItem(String item, animation, int index) {
bool mine = item.endsWith('<bot>');
return Padding(
padding: const EdgeInsets.all(2),
child: Container(
margin: const EdgeInsets.only(left: 15.0),
alignment: mine ? Alignment.topLeft : Alignment.topRight,
child: mine
? Container(
color: mine ? Colors.white : Colors.blue,
child: mg(item, index),
)
: Bubble(
alignment: Alignment.topRight,
color: Colors.white,
child: mg(item, index),
)),
);
}
- We are classifying the buttons, images and text in the method of getresponse from the Bot URL and those responses are adding to the list and we are calling the UI in setstate method to refresh the screen by the refrence of the list.
