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.

Notable technical dependencies

• 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

Demo app

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.

Documentation

For more detailed documentation, please see the documentation index page.

• Getting started

  • How to Implement Ebbot Flutter UI in Your App

  • Demo app

Getting started

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.

How to Implement Ebbot Flutter UI in Your App

To integrate the Ebbot Flutter UI into your Flutter application, follow these steps:

1. Add the dependency: First, you need to add ebbot_flutter_ui to your project's pubspec.yaml file under the dependencies section:

   Copy

   dependencies:
     flutter:
       sdk: flutter
     ebbot_flutter_ui:
        git:
            url: https://github.com/ebbot-ai/ebbot_flutter_ui
            ref: v0.1.0
   

2. Install the package: Run the following command in your terminal to install the package:

   Copy

   flutter pub get

3. Import the package: In the Dart file where you want to use the Ebbot chat widget, import the package:

   Copy

   import 'package:ebbot_flutter_ui/v1/ebbot_flutter_ui.dart';

4. 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:

   Copy

   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'),
           ),
           );
       }
   }

5. Run your app: Finally, run your app. You should now see the Ebbot UI chat interface integrated into your application.

Demo app

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.

• Configuration

  • Styling and theming

  • Passing custom user specific attributes

  • Configuring the cloud environment

  • Enter pressed behaviour

  • Adding a callback handler

    • Callback function descriptions

  • API Controller

  • Configuring logging

  • Putting everything together

Configuration

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

Styling and theming

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.

Passing custom user specific attributes

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': 'john@doe.com',
      'age': 30,
      'height': 180.0,
      'isPremium': true,
      'lastLogin': DateTime.now().millisecondsSinceEpoch
    };
var config = EbbotConfigurationBuilder()
      .userAttributes(userAttributes)
      .build();

Configuring the cloud environment

Configuring the cloud environment is done by passing a configuration property to the environment builder function.

Available configuration options are:

Enter pressed behaviour

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();

Adding a callback handler

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();

Callback function descriptions

API Controller

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 onLoad callback has been invoked or by calling the isInitialized method.

Configuring logging

var logConfiguration = EbbotLogConfigurationBuilder().logLevel(Level.info).enabled(true).build();

Putting everything together

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");
}

var userAttributes = {
    'name': 'John Doe',
    'email': 'john@doe.com',
    'age': 30,
    'height': 180.0,
    'isPremium': true,
    'lastLogin': DateTime.now().millisecondsSinceEpoch
  };

  var userConfiguration =
      EbbotUserConfigurationBuilder().userAttributes(userAttributes).build();

  var callback = EbbotCallbackBuilder()
      .onLoadError(onLoadError)
      .onLoad(onLoad)
      .onRestartConversation(onRestartConversation)
      .onEndConversation(onEndConversation)
      .onMessage(onMessage)
      .onBotMessage(onBotMessage)
      .onUserMessage(onUserMessage)
      .onStartConversation(onStartConversation)
      .build();

  var ebbotBehaviourInput = EbbotBehaviourInputBuilder()
      .enterPressed(EbbotBehaviourInputEnterPressed.sendMessage)
      .build();
  var behaviour = EbbotBehaviourBuilder().input(ebbotBehaviourInput).build();

  var logConfiguration = EbbotLogConfigurationBuilder().logLevel(EbbotLogLevel.info).enabled(true).build();

  var configuration = EbbotConfigurationBuilder()
      .apiController(apiController)
      .environment(Environment.ovhEUProduction)
      .userConfiguration(userConfiguration)
      .behaviour(behaviour)
      .theme(const DarkChatTheme())
      .callback(callback)
      .logConfiguration(logConfiguration)
      .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.