1 of 4

Ebbot SDK

README

A Flutter UI library for integrating Ebbot chat functionality into Flutter applications. This library provides a complete chat interface with real-time messaging, image uploads, session management, and customizable themes.

Features

🚀 Real-time messaging with WebSocket support
📱 Cross-platform support (iOS, Android, Web, Desktop)
📸 Image upload capabilities
🔄 Session management and recovery
🎨 Customizable themes and styling
👥 Agent handover support
📝 Conversation transcripts
🔧 Programmatic API for chat control
📋 Context menu with chat actions
🌐 Multi-environment support (staging, production)

Installation

Add this library to your Flutter project by adding it to your pubspec.yaml:

dependencies:
  ebbot_flutter_ui:
    git:
      url: https://github.com/ebbot-ai/ebbot-flutter-ui.git
      ref: main  # or specify a specific version tag

Then run:

flutter pub get

Quick Start

Basic Usage

import 'package:flutter/material.dart';
import 'package:ebbot_flutter_ui/ebbot_flutter_ui.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Ebbot Chat')),
        body: EbbotFlutterUi(
          botId: 'your-bot-id',
          configuration: EbbotConfigurationBuilder()
            .environment(Environment.production)
            .build(),
        ),
      ),
    );
  }
}

Advanced Configuration

import 'package:ebbot_flutter_ui/ebbot_flutter_ui.dart';

class AdvancedChatExample extends StatelessWidget {
  final EbbotApiController _controller = EbbotApiController();

  @override
  Widget build(BuildContext context) {
    return EbbotFlutterUi(
      botId: 'your-bot-id',
      configuration: EbbotConfigurationBuilder()
        .environment(Environment.production)
        .apiController(_controller)
        .userConfiguration(
          EbbotUserConfigurationBuilder()
            .userAttributes({
              'userId': '123',
              'name': 'John Doe',
              'email': '[email protected]',
              'membershipLevel': 'premium'
            })
            .build()
        )
        .behaviour(
          EbbotBehaviourBuilder()
            .showContextMenu(true)
            .build()
        )
        .callback(
          EbbotCallbackBuilder()
            .onLoad(() => print('Chat loaded'))
            .onMessage((message) => print('Message: $message'))
            .onBotMessage((message) => print('Bot: $message'))
            .onUserMessage((message) => print('User: $message'))
            .onStartConversation((message) => print('Started: $message'))
            .onEndConversation(() => print('Ended'))
            .onChatClosed(() => print('Chat closed'))
            .onInputVisibilityChanged((isVisible) => print('Input: $isVisible'))
            .onTypingChanged((isTyping, entity) => print('Typing: $isTyping ($entity)'))
            .onAgentHandover(() => print('Agent handover'))
            .build()
        )
        .logConfiguration(
          EbbotLogConfigurationBuilder()
            .enabled(true)
            .logLevel(EbbotLogLevel.debug)
            .build()
        )
        .build(),
    );
  }
}

Programmatic Control

// Send a message programmatically
_controller.sendMessage('Hello from code!');

// Check if chat is initialized
if (_controller.isInitialized()) {
  // Restart the conversation
  _controller.restartConversation();
}

// Update user attributes
_controller.setUserAttributes({
  'userId': '456',
  'name': 'Jane Smith'
});

// Trigger a scenario
_controller.triggerScenario('550e8400-e29b-41d4-a716-446655440000');

// End the conversation
_controller.endConversation();

Configuration Options

Environment Configuration

EbbotConfigurationBuilder()
  .environment(Environment.production)  // or Environment.staging
  .build()

User Configuration

EbbotUserConfigurationBuilder()
  .userAttributes({
    'userId': '123',
    'name': 'John Doe',
    'email': '[email protected]',
    'customField': 'value'
  })
  .build()

Behavior Configuration

EbbotBehaviourBuilder()
  .showContextMenu(true)          // Show context menu with actions
  .input(
    EbbotBehaviourInputBuilder()
      .enterPressed(EbbotBehaviourInputEnterPressed.sendMessage)
      .build()
  )
  .build()

Session Management

EbbotSessionBuilder()
  .chatId('existing-chat-id-123')  // Resume existing conversation
  .build()

Logging Configuration

EbbotLogConfigurationBuilder()
  .enabled(true)
  .logLevel(EbbotLogLevel.debug)  // debug, info, warning, error
  .build()

Event Callbacks

Handle chat events with custom callbacks:

EbbotCallbackBuilder()
  .onLoad(() {
    print('Chat loaded successfully');
  })
  .onMessage((message) {
    print('New message: $message');
  })
  .onBotMessage((message) {
    print('Bot message: $message');
  })
  .onUserMessage((message) {
    print('User message: $message');
  })
  .onStartConversation((message) {
    print('Conversation started with: $message');
  })
  .onEndConversation(() {
    print('Conversation ended');
  })
  .onChatClosed(() {
    print('Chat closed');
  })
  .onRestartConversation(() {
    print('Conversation restarted');
  })
  .onSessionData((chatId) {
    print('Session data received: $chatId');
  })
  .onInputVisibilityChanged((isVisible) {
    print('Input visibility: $isVisible');
  })
  .onTypingChanged((isTyping, typingEntity) {
    print('Typing: $isTyping, entity: $typingEntity');
  })
  .onAgentHandover(() {
    print('Agent handover occurred');
  })
  .onLoadError((error) {
    print('Load error: $error');
  })
  .build()

Multi-page Integration

The chat widget maintains its state across page navigation:

class MultiPageExample extends StatefulWidget {
  @override
  _MultiPageExampleState createState() => _MultiPageExampleState();
}

class _MultiPageExampleState extends State<MultiPageExample> {
  final PageController _pageController = PageController();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        children: [
          // Other pages
          Container(child: Text('Page 1')),
          Container(child: Text('Page 2')),
          
          // Chat page with key for state preservation
          EbbotFlutterUi(
            key: PageStorageKey('chat-page'),
            botId: 'your-bot-id',
            configuration: yourConfiguration,
          ),
        ],
      ),
    );
  }
}

Example Application

A complete example application demonstrating all features can be found in the example/ directory. To run it:

cd example
flutter pub get
flutter run

Technical Dependencies

flutter_chat_ui: Provides the chat interface components
ebbot_dart_client: Handles the business logic and API communication
flutter_chat_types: Defines message types and structures

Documentation

For more detailed documentation, please see:

Getting Started Guide
Configuration Guide
API Reference

Platform Support

✅ Android
✅ iOS
✅ Web
✅ macOS
✅ Windows
✅ Linux

License

This library is proprietary software. Please contact Ebbot for licensing information.

Support

For support and questions:

Create an issue on GitHub
Contact the development team
Check the documentation at docs.ebbot.ai

Introduction

Welcome to the Ebbot Flutter UI documentation. This library provides a complete chat interface for integrating Ebbot's conversational AI into your Flutter applications.

📚 Documentation Overview

Getting Started

Getting Started Guide - Learn how to install and implement Ebbot Flutter UI in your app
Basic Configuration - Understanding the configuration system and basic setup

Configuration Guides

Styling and Theming - Customize the appearance of your chat widget
User Attributes - Pass user-specific data to personalize conversations
Environment Configuration - Configure different environments (staging, production, etc.)
Chat Behavior - Configure input behavior, UI elements, and message throttling
Logging - Set up logging for debugging and monitoring

Advanced Features

Event Callbacks - Handle chat events and lifecycle hooks
API Controller - Programmatically control the chat widget
Advanced Configuration - Session management, custom widgets, and complete examples

Additional Resources

Troubleshooting - Common issues and solutions

🚀 Quick Links

📦 Package Information

Current Version: 0.2.6+1
Minimum Flutter SDK: >=3.2.6 <4.0.0
Platform Support: iOS, Android, Web, macOS, Windows, Linux

🎯 Key Features

Real-time messaging with WebSocket support
Image upload capabilities
Session management and recovery
Customizable themes and styling
Agent handover support
Conversation transcripts
Programmatic API for chat control
Multi-language support
Cross-platform compatibility
Message delivery throttling

💡 Need Help?

If you can't find what you're looking for in the documentation:

Check the Troubleshooting Guide
Browse the Example Application
Create an issue on GitHub
Contact the Ebbot support team

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 a drop-in ready solution for rendering an Ebbot Chat in your Flutter App.

Prerequisites
Installation
Basic Implementation
Demo Application
Next Steps

Prerequisites

Before getting started, ensure you have:

Flutter SDK >=3.2.6 <4.0.0
A valid Ebbot bot ID
Access to the Ebbot Flutter UI repository

Installation

1. Add the dependency

Add ebbot_flutter_ui to your project's pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  ebbot_flutter_ui:
    git:
      url: https://github.com/ebbot-ai/ebbot_flutter_ui
      ref: main  # or specify a version tag like v0.2.6

2. Install the package

Run the following command in your terminal:

flutter pub get

3. Import the package

In your Dart file, import the library:

import 'package:ebbot_flutter_ui/ebbot_flutter_ui.dart';

Basic Implementation

Here's a minimal example to get you started:

import 'package:flutter/material.dart';
import 'package:ebbot_flutter_ui/ebbot_flutter_ui.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ebbot Chat Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ebbot Chat Example'),
        ),
        body: EbbotFlutterUi(
          botId: 'your-bot-id',
          configuration: EbbotConfigurationBuilder()
            .environment(Environment.production)
            .build(),
        ),
      ),
    );
  }
}

Running your app

After implementing the code above, run your app:

flutter run

You should now see the Ebbot chat interface integrated into your application.

Demo Application

A complete example application is available in two locations:

In this repository: Check the example/ directory for a fully functional demo app
Standalone repository: https://github.com/ebbot-ai/ebbot_flutter_ui_demo

The example demonstrates:

Basic setup and configuration
Multiple environment configurations
User attribute passing
Custom callbacks
Multi-page integration

Next Steps

Now that you have the basic implementation working, explore these topics:

Basic Configuration - Learn about configuration options
Styling and Theming - Customize the chat appearance
User Attributes - Pass user data for personalization
Callbacks - Handle chat events
API Controller - Control the chat programmatically

For a complete implementation example with all features, see the Advanced Configuration guide.

Configuration

Getting Started

Prerequisites
Installation
Basic Implementation
Demo Application
Next Steps

Prerequisites

Before getting started, ensure you have:

Flutter SDK >=3.2.6 <4.0.0
A valid Ebbot bot ID
Access to the Ebbot Flutter UI repository

Installation

1. Add the dependency

Add ebbot_flutter_ui to your project's pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  ebbot_flutter_ui:
    git:
      url: https://github.com/ebbot-ai/ebbot_flutter_ui
      ref: main  # or specify a version tag like v0.2.6

2. Install the package

Run the following command in your terminal:

flutter pub get

3. Import the package

In your Dart file, import the library:

import 'package:ebbot_flutter_ui/ebbot_flutter_ui.dart';

Basic Implementation

Here's a minimal example to get you started:

import 'package:flutter/material.dart';
import 'package:ebbot_flutter_ui/ebbot_flutter_ui.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Ebbot Chat Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Ebbot Chat Example'),
        ),
        body: EbbotFlutterUi(
          botId: 'your-bot-id',
          configuration: EbbotConfigurationBuilder()
            .environment(Environment.production)
            .build(),
        ),
      ),
    );
  }
}

Running your app

After implementing the code above, run your app:

flutter run

You should now see the Ebbot chat interface integrated into your application.

Demo Application

A complete example application is available in two locations:

In this repository: Check the example/ directory for a fully functional demo app
Standalone repository: https://github.com/ebbot-ai/ebbot_flutter_ui_demo

The example demonstrates:

Basic setup and configuration
Multiple environment configurations
User attribute passing
Custom callbacks
Multi-page integration

Next Steps

Now that you have the basic implementation working, explore these topics:

Basic Configuration - Learn about configuration options
Styling and Theming - Customize the chat appearance
User Attributes - Pass user data for personalization
Callbacks - Handle chat events
API Controller - Control the chat programmatically

For a complete implementation example with all features, see the Advanced Configuration guide.

README

Features

🚀 Real-time messaging with WebSocket support
📱 Cross-platform support (iOS, Android, Web, Desktop)
📸 Image upload capabilities
🔄 Session management and recovery
🎨 Customizable themes and styling
👥 Agent handover support
📝 Conversation transcripts
🔧 Programmatic API for chat control
📋 Context menu with chat actions
🌐 Multi-environment support (staging, production)

Installation

Add this library to your Flutter project by adding it to your pubspec.yaml:

dependencies:
  ebbot_flutter_ui:
    git:
      url: https://github.com/ebbot-ai/ebbot-flutter-ui.git
      ref: main  # or specify a specific version tag

Then run:

flutter pub get

Quick Start

Basic Usage

import 'package:flutter/material.dart';
import 'package:ebbot_flutter_ui/ebbot_flutter_ui.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Ebbot Chat')),
        body: EbbotFlutterUi(
          botId: 'your-bot-id',
          configuration: EbbotConfigurationBuilder()
            .environment(Environment.production)
            .build(),
        ),
      ),
    );
  }
}

Advanced Configuration

import 'package:ebbot_flutter_ui/ebbot_flutter_ui.dart';

class AdvancedChatExample extends StatelessWidget {
  final EbbotApiController _controller = EbbotApiController();

  @override
  Widget build(BuildContext context) {
    return EbbotFlutterUi(
      botId: 'your-bot-id',
      configuration: EbbotConfigurationBuilder()
        .environment(Environment.production)
        .apiController(_controller)
        .userConfiguration(
          EbbotUserConfigurationBuilder()
            .userAttributes({
              'userId': '123',
              'name': 'John Doe',
              'email': '[email protected]',
              'membershipLevel': 'premium'
            })
            .build()
        )
        .behaviour(
          EbbotBehaviourBuilder()
            .showContextMenu(true)
            .build()
        )
        .callback(
          EbbotCallbackBuilder()
            .onLoad(() => print('Chat loaded'))
            .onMessage((message) => print('Message: $message'))
            .onBotMessage((message) => print('Bot: $message'))
            .onUserMessage((message) => print('User: $message'))
            .onStartConversation((message) => print('Started: $message'))
            .onEndConversation(() => print('Ended'))
            .onChatClosed(() => print('Chat closed'))
            .onInputVisibilityChanged((isVisible) => print('Input: $isVisible'))
            .onTypingChanged((isTyping, entity) => print('Typing: $isTyping ($entity)'))
            .onAgentHandover(() => print('Agent handover'))
            .build()
        )
        .logConfiguration(
          EbbotLogConfigurationBuilder()
            .enabled(true)
            .logLevel(EbbotLogLevel.debug)
            .build()
        )
        .build(),
    );
  }
}

Programmatic Control

// Send a message programmatically
_controller.sendMessage('Hello from code!');

// Check if chat is initialized
if (_controller.isInitialized()) {
  // Restart the conversation
  _controller.restartConversation();
}

// Update user attributes
_controller.setUserAttributes({
  'userId': '456',
  'name': 'Jane Smith'
});

// Trigger a scenario
_controller.triggerScenario('550e8400-e29b-41d4-a716-446655440000');

// End the conversation
_controller.endConversation();

Configuration Options

Environment Configuration

EbbotConfigurationBuilder()
  .environment(Environment.production)  // or Environment.staging
  .build()

User Configuration

EbbotUserConfigurationBuilder()
  .userAttributes({
    'userId': '123',
    'name': 'John Doe',
    'email': '[email protected]',
    'customField': 'value'
  })
  .build()

Behavior Configuration

EbbotBehaviourBuilder()
  .showContextMenu(true)          // Show context menu with actions
  .input(
    EbbotBehaviourInputBuilder()
      .enterPressed(EbbotBehaviourInputEnterPressed.sendMessage)
      .build()
  )
  .build()

Session Management

EbbotSessionBuilder()
  .chatId('existing-chat-id-123')  // Resume existing conversation
  .build()

Logging Configuration

EbbotLogConfigurationBuilder()
  .enabled(true)
  .logLevel(EbbotLogLevel.debug)  // debug, info, warning, error
  .build()

Event Callbacks

Handle chat events with custom callbacks:

EbbotCallbackBuilder()
  .onLoad(() {
    print('Chat loaded successfully');
  })
  .onMessage((message) {
    print('New message: $message');
  })
  .onBotMessage((message) {
    print('Bot message: $message');
  })
  .onUserMessage((message) {
    print('User message: $message');
  })
  .onStartConversation((message) {
    print('Conversation started with: $message');
  })
  .onEndConversation(() {
    print('Conversation ended');
  })
  .onChatClosed(() {
    print('Chat closed');
  })
  .onRestartConversation(() {
    print('Conversation restarted');
  })
  .onSessionData((chatId) {
    print('Session data received: $chatId');
  })
  .onInputVisibilityChanged((isVisible) {
    print('Input visibility: $isVisible');
  })
  .onTypingChanged((isTyping, typingEntity) {
    print('Typing: $isTyping, entity: $typingEntity');
  })
  .onAgentHandover(() {
    print('Agent handover occurred');
  })
  .onLoadError((error) {
    print('Load error: $error');
  })
  .build()

Multi-page Integration

The chat widget maintains its state across page navigation:

class MultiPageExample extends StatefulWidget {
  @override
  _MultiPageExampleState createState() => _MultiPageExampleState();
}

class _MultiPageExampleState extends State<MultiPageExample> {
  final PageController _pageController = PageController();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        children: [
          // Other pages
          Container(child: Text('Page 1')),
          Container(child: Text('Page 2')),
          
          // Chat page with key for state preservation
          EbbotFlutterUi(
            key: PageStorageKey('chat-page'),
            botId: 'your-bot-id',
            configuration: yourConfiguration,
          ),
        ],
      ),
    );
  }
}

Example Application

A complete example application demonstrating all features can be found in the example/ directory. To run it:

cd example
flutter pub get
flutter run

Technical Dependencies

flutter_chat_ui: Provides the chat interface components
ebbot_dart_client: Handles the business logic and API communication
flutter_chat_types: Defines message types and structures

Documentation

For more detailed documentation, please see:

Getting Started Guide
Configuration Guide
API Reference

Platform Support

✅ Android
✅ iOS
✅ Web
✅ macOS
✅ Windows
✅ Linux

License

This library is proprietary software. Please contact Ebbot for licensing information.

Support

For support and questions:

Create an issue on GitHub
Contact the development team
Check the documentation at docs.ebbot.ai

Ebbot SDK

README

Features

Installation

Quick Start

Basic Usage

Advanced Configuration

Programmatic Control

Configuration Options

Environment Configuration

User Configuration

Behavior Configuration

Session Management

Logging Configuration

Event Callbacks

Multi-page Integration

Example Application

Technical Dependencies

Documentation

Platform Support

License

Support

Introduction

📚 Documentation Overview

Getting Started

Configuration Guides

Advanced Features

Additional Resources

🚀 Quick Links

📦 Package Information

🎯 Key Features

💡 Need Help?

Getting Started

Table of Contents

Prerequisites

Installation

1. Add the dependency

2. Install the package

3. Import the package

Basic Implementation

Running your app

Demo Application

Next Steps

Configuration

Introduction

📚 Documentation Overview

Getting Started

Configuration Guides

Advanced Features

Additional Resources

🚀 Quick Links

📦 Package Information

🎯 Key Features

💡 Need Help?

Configuration

Getting Started

Table of Contents

Prerequisites

Installation

1. Add the dependency

2. Install the package

3. Import the package

Basic Implementation

Running your app

Demo Application

Next Steps

README

Features

Installation

Quick Start

Basic Usage

Advanced Configuration

Programmatic Control

Configuration Options

Environment Configuration

User Configuration

Behavior Configuration

Session Management

Logging Configuration

Event Callbacks