Ebbot Flutter UI is a flutter ui widget for implementing the Ebbot chat bot. This widget encapsulates the logic in the ebbot-dart-client package and provides an drop-in ready solution for rendering a Ebbot Chat in your Flutter App.
To integrate the Ebbot Flutter UI into your Flutter application, follow these steps:
Add the dependency: First, you need to add ebbot_flutter_ui to your project's pubspec.yaml file under the dependencies section:
dependencies:
flutter:
sdk: flutter
ebbot_flutter_ui:
git:
url: https://github.com/ebbot-ai/ebbot_flutter_ui
ref: v0.1.0
Install the package: Run the following command in your terminal to install the package:
flutter pub getImport the package: In the Dart file where you want to use the Ebbot chat widget, import the package:
import 'package:ebbot_flutter_ui/v1/ebbot_flutter_ui.dart';Use the Ebbot Flutter UI widget: You can now use the Ebbot Flutter UI widget in your app. Here is a basic example of how to include it in a Flutter app, along with the minimal configuration needed to implement the widget:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Ebbot Chat Example'),
),
body: EbbotFlutterUi(
botId: 'your-bot-id'),
),
);
}
}Run your app: Finally, run your app. You should now see the Ebbot UI chat interface integrated into your application.
A demo app that implements the ebbot-flutter-ui can be found in this repository: https://github.com/ebbot-ai/ebbot_flutter_ui_demo This is a good starting point for anyone implementing the chat for the first time.
Configuring Ebbot Flutter UI is done by passing a EbbotConfiguration instance to the the EbbotFlutterUi widget.
The Ebbot Flutter UI widget has the following configuration options:
change the underlying theme in flyer-chat
passing user specific attributes
setting the cloud environment the App is running against
adding a callback handler for certain events
controlling certain parts of the application through an api controller
As Ebbot Flutter UI is using the flyer-chat component under the hood, styling it is done by configure a theme and passing it in the configuration builder like so:
var config = EbbotConfigurationBuilder()
.theme(const DarkChatTheme())
.build();Consult the flyer-chat themeing guide for more in depth information on how to style the chat widget.
To feed the bot with more context about the user, you can pass user attributes in the configuration file, the allowed type is Map<String, dynamic>:
var userAttributes = {
'name': 'John Doe',
'email': '[email protected]',
'age': 30,
'height': 180.0,
'isPremium': true,
'lastLogin': DateTime.now().millisecondsSinceEpoch
};
var config = EbbotConfigurationBuilder()
.userAttributes(userAttributes)
.build();Configuring the cloud environment is done by passing a configuration property to the environment builder function.
Available configuration options are:
Environment.staging
https://ebbot-staging.storage.googleapis.com
(https/wss)://staging.ebbot.app/api/asyngular
Environment.release
https://ebbot-release.storage.googleapis.com
(https/wss)://release.ebbot.app/api/asyngular
Environment.googleCanadaProduction
https://ebbot-ca.storage.googleapis.com
(https/wss)://ca.ebbot.app/api/asyngular
Environment.googleEUProduction
https://ebbot-v2.storage.googleapis.com
(https/wss)://v2.ebbot.app/api/asyngular
Environment.ovhEUProduction
https://storage.gra.cloud.ovh.net
(https/wss)://ebbot.eu/api/asyngular
To configure what should happen when enter on the keyboard has been pressed, you can pass the following options:
var ebbotBehaviourInput = EbbotBehaviourInputBuilder()
.enterPressed(EbbotBehaviourInputEnterPressed.sendMessage)
.build();EbbotBehaviourInputEnterPressed.sendMessage
Indicates that pressing enter sends a message.
EbbotBehaviourInputEnterPressed.newline
Indicates that pressing enter inserts a new line.
Sometimes, it is useful to know what is happening in the widget and when it is happening. To address this, you can pass a callback object when configuring the app:
// Callback functions
Future<void> onLoadError(EbbotLoadError error) async {
print(
"CALLBACK: onLoadError: ${error.type}, ${error.stackTrace} caused by ${error.cause}");
}
Future<void> onLoad() async {
print("CALLBACK: onLoad");
}
Future<void> onRestartConversation() async {
print("CALLBACK: onRestartConversation");
}
Future<void> onEndConversation() async {
print("CALLBACK: onEndConversation");
}
Future<void> onMessage(String message) async {
print("CALLBACK: onMessage: $message");
}
Future<void> onBotMessage(String message) async {
print("CALLBACK: onBotMessage: $message");
}
Future<void> onUserMessage(String message) async {
print("CALLBACK: onUserMessage: $message");
}
Future<void> onStartConversation(String message) async {
print("CALLBACK: onStartConversation");
}
// Callback configuration object
var callback = EbbotCallbackBuilder()
.onLoadError(onLoadError)
.onLoad(onLoad)
.onRestartConversation(onRestartConversation)
.onEndConversation(onEndConversation)
.onMessage(onMessage)
.onBotMessage(onBotMessage)
.onUserMessage(onUserMessage)
.onStartConversation(onStartConversation)
.build();
onLoadError
Called when there is an error during the widget loading process.
error: An EbbotLoadError object containing details about the error.
onLoad
Called when the widget has successfully loaded.
No parameters.
onRestartConversation
Called when the conversation is restarted.
No parameters.
onEndConversation
Called when a conversation ends.
No parameters.
onMessage
Called when a general message is received.
message: A string containing the message received.
onBotMessage
Called when a message from the bot is received.
message: A string containing the bot's message.
onUserMessage
Called when a message from the user is received.
message: A string containing the user's message.
onStartConversation
Called when a new conversation starts.
No parameters.
onSessionData
Called when the session data is available.
chatId: The chat ID of the session, which can be provided when initing a chat widget, to restore a chat session.
In order to communciate with the widget, you can pass an instance of an API controller:
var apiController = EbbotApiController();
var configuration = EbbotConfigurationBuilder()
.apiController(apiController)
.build();[!IMPORTANT] The API controller can only be called once the widget has been fully loaded, which is known when
onLoadcallback has been invoked or by calling theisInitializedmethod.
isInitialized
Checks if the widget is initialized.
No parameters. Returns bool.
restartConversation
Restarts the conversation.
No parameters.
endConversation
Ends the current conversation.
No parameters.
showTranscript
Presents the user with the chat transcript.
No parameters.
sendMessage
Sends a message to the conversation.
message: A String containing the message to be sent.
setUserAttributes
Sets attributes for the user in the conversation.
attributes: A Map<String, dynamic> containing the attributes to be set for the user.
triggerScenario
Triggers a specific scenario in the conversation.
scenarioId: A String identifying the scenario to be triggered.
var logConfiguration = EbbotLogConfigurationBuilder().logLevel(Level.info).enabled(true).build();Currently, there is basic support for customizing the rating icons from the default stars, basically whatever that is a widget. Please note that the provided widget will be sized to fit within 30x30.
final ratingSelected = Image.asset("assets/sunglasses.png");
final rating =
Opacity(opacity: 0.5, child: Image.asset("assets/sunglasses.png"));
var chat =
EbbotChatBuilder().rating(rating).ratingSelected(ratingSelected).build();The following is a full fledged example with all configurable options passed to the widget:
Future<void> onLoadError(EbbotLoadError error) async {
print(
"CALLBACK: onLoadError: ${error.type}, ${error.stackTrace} caused by ${error.cause}");
}
Future<void> onLoad() async {
print("CALLBACK: onLoad");
}
Future<void> onRestartConversation() async {
print("CALLBACK: onRestartConversation");
}
Future<void> onEndConversation() async {
print("CALLBACK: onEndConversation");
}
Future<void> onMessage(String message) async {
print("CALLBACK: onMessage: $message");
}
Future<void> onBotMessage(String message) async {
print("CALLBACK: onBotMessage: $message");
}
Future<void> onUserMessage(String message) async {
print("CALLBACK: onUserMessage: $message");
}
Future<void> onStartConversation(String message) async {
print("CALLBACK: onStartConversation");
}
Future<void> onSessionData(String chatId) async {
print("CALLBACK: onSessionData, chatId: $chatId");
}
var userAttributes = {
'name': 'John Doe',
'email': '[email protected]',
'age': 30,
'height': 180.0,
'isPremium': true,
'lastLogin': DateTime.now().millisecondsSinceEpoch
};
var userConfiguration =
EbbotUserConfigurationBuilder().userAttributes(userAttributes).build();
var session
var callback = EbbotCallbackBuilder()
.onLoadError(onLoadError)
.onLoad(onLoad)
.onRestartConversation(onRestartConversation)
.onEndConversation(onEndConversation)
.onMessage(onMessage)
.onBotMessage(onBotMessage)
.onUserMessage(onUserMessage)
.onStartConversation(onStartConversation)
.onSessionData(onSessionData)
.build();
var ebbotBehaviourInput = EbbotBehaviourInputBuilder()
.enterPressed(EbbotBehaviourInputEnterPressed.sendMessage)
.build();
var behaviour = EbbotBehaviourBuilder()
.showContextMenu(true) // Disable this if you want to use the apiController instead
.input(ebbotBehaviourInput).build();
var logConfiguration = EbbotLogConfigurationBuilder().logLevel(EbbotLogLevel.info).enabled(true).build();
final ratingSelected = Image.asset("assets/sunglasses.png");
final rating =
Opacity(opacity: 0.5, child: Image.asset("assets/sunglasses.png"));
var chat = EbbotChatBuilder()
.rating(rating)
.ratingSelected(ratingSelected).build();
var someChatId = ""; // Provide your chatId here, it can be obtained from the onSessionData callback
var session = EbbotSessionBuilder().chatId(someChatId).build();
var configuration = EbbotConfigurationBuilder()
.apiController(apiController)
.environment(Environment.ovhEUProduction)
.userConfiguration(userConfiguration)
.behaviour(behaviour)
.theme(const DarkChatTheme())
.callback(callback)
.logConfiguration(logConfiguration)
.chat(chat)
.build();
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Ebbot Chat Example'),
),
body: EbbotFlutterUi(
botId: 'your-bot-id')
configuration: configuration,
),
);
}
}
To get started, visit the Getting Started Guide if you want to know how to start implementing Ebbot Flutter UI, or visit the Configuration page if you want to know which options there are for customizing and configuring Ebbot Flutter UI.
Ebbot Flutter UI is a flutter ui widget for implementing the Ebbot chat bot. This widget encapsulates the logic in the ebbot-dart-client package and provides an drop-in ready solution for rendering a Ebbot Chat in your Flutter App.
This widget depends on the flutter-chat-ui package for rendering the chat ui
It also depends on the ebbot-dart-client client library which wraps the business logic of the Ebbot Chat bot
A demo app that implements the ebbot-flutter-ui can be found in this repository: https://github.com/ebbot-ai/ebbot_flutter_ui_demo This is a good starting point for anyone implementing the chat for the first time.
For more detailed documentation, please see the .