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.
Custom UI in Mobile app
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 Rasa chatbot :
A chatbot is a computer program that is designed to simulate human conversation and interact with users through text messages. Chatbots are often used 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 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 response and continue the conversation by providing further input or asking follow-up questions.
Purpose :
Creation of Custom UI overcome challenges implementing enhanced features and functionalities; i.e. media upload, calendar selection, Search in chatbot, 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 webhooks. For example
http://ivinbot.vivifyhealthcare.com/:xxxx/webhooks/rest/webhook . Please replace with your webhook URL for the BOT.
NOTE : This Custom UI in Flutter is compatible with the "GetX State Managmenmet".Process :
- Clone this respository 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
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.
