Initial work for ChatBox events

Author: Franco Bugnano

lib/src/chatbox.dart

@@ -13,6 +13,23 @@ import './conversation.dart';
 import './webview.dart';
 import './chatoptions.dart';
 import './user.dart';
+import './message.dart';
+
+typedef BlurHandler = void Function();
+typedef FocusHandler = void Function();
+typedef SendMessageHandler = void Function(SendMessageEvent event);
+typedef TranslationToggledHandler = void Function();
+
+class SendMessageEvent {
+  ConversationData conversation;
+  User me;
+  SentMessage message;
+
+  SendMessageEvent.fromJson(Map<String, dynamic> json)
+    : conversation = ConversationData.fromJson(json['conversation']),
+    me = User.fromJson(json['me']),
+    message = SentMessage.fromJson(json['message']);
+}
 
 /// A messaging UI for just a single conversation.
 ///
@@ -33,6 +50,11 @@ class ChatBox extends StatefulWidget {
   final Conversation? conversation;
   final bool? asGuest;
 
+  final BlurHandler? onBlur;
+  final FocusHandler? onFocus;
+  final SendMessageHandler? onSendMessage;
+  final TranslationToggledHandler? onTranslationToggled;
+
   const ChatBox({Key? key,
       this.chatSubtitleMode,
       this.chatTitleMode,
@@ -46,13 +68,17 @@ class ChatBox extends StatefulWidget {
       this.conversationIdsToTranslate,
       this.conversation,
       this.asGuest,
+      this.onBlur,
+      this.onFocus,
+      this.onSendMessage,
+      this.onTranslationToggled,
     }) : super(key: key);
 
   @override
-  State<ChatBox> createState() => _ChatBoxState();
+  State<ChatBox> createState() => ChatBoxState();
 }
 
-class _ChatBoxState extends State<ChatBox> {
+class ChatBoxState extends State<ChatBox> {
   /// Used to control the underlying WebView
   WebViewController? _webViewController;
 
@@ -84,7 +110,12 @@ class _ChatBoxState extends State<ChatBox> {
 
     execute('chatBox.mount(document.getElementById("talkjs-container"));');
 
-    return ChatWebView(_webViewCreatedCallback, _onPageFinished);
+    return ChatWebView(_webViewCreatedCallback, _onPageFinished, <JavascriptChannel>{
+      JavascriptChannel(name: 'JSCBlur', onMessageReceived: _jscBlur),
+      JavascriptChannel(name: 'JSCFocus', onMessageReceived: _jscFocus),
+      JavascriptChannel(name: 'JSCSendMessage', onMessageReceived: _jscSendMessage),
+      JavascriptChannel(name: 'JSCTranslationToggled', onMessageReceived: _jscTranslationToggled),
+    });
   }
 
   void _createSession(SessionState sessionState) {
@@ -119,7 +150,12 @@ class _ChatBoxState extends State<ChatBox> {
       conversationIdsToTranslate: widget.conversationIdsToTranslate,
     );
 
-    execute('const chatBox = session.createChatbox(${options.getJsonString()});');
+    execute('const chatBox = session.createChatbox(${options.getJsonString(this)});');
+
+    execute('chatBox.on("blur", (event) => JSCBlur.postMessage(JSON.stringify(event)));');
+    execute('chatBox.on("focus", (event) => JSCFocus.postMessage(JSON.stringify(event)));');
+    execute('chatBox.on("sendMessage", (event) => JSCSendMessage.postMessage(JSON.stringify(event)));');
+    execute('chatBox.on("translationToggled", (event) => JSCTranslationToggled.postMessage(JSON.stringify(event)));');
   }
 
   void _createConversation() {
@@ -156,19 +192,51 @@ class _ChatBoxState extends State<ChatBox> {
         print('📗 chatbox._onPageFinished: $js');
       }
 
-      _webViewController!.runJavascriptReturningResult(js);
+      _webViewController!.runJavascript(js);
 
       // Execute any pending instructions
       for (var statement in _pending) {
         if (kDebugMode) {
           print('📗 chatbox._onPageFinished _pending: $statement');
         }
 
-        _webViewController!.runJavascriptReturningResult(statement);
+        _webViewController!.runJavascript(statement);
       }
     }
   }
 
+  void _jscBlur(JavascriptMessage message) {
+    if (kDebugMode) {
+      print('📗 chatbox._jscBlur: ${message.message}');
+    }
+
+    widget.onBlur?.call();
+  }
+
+  void _jscFocus(JavascriptMessage message) {
+    if (kDebugMode) {
+      print('📗 chatbox._jscFocus: ${message.message}');
+    }
+
+    widget.onFocus?.call();
+  }
+
+  void _jscSendMessage(JavascriptMessage message) {
+    if (kDebugMode) {
+      print('📗 chatbox._jscSendMessage: ${message.message}');
+    }
+
+    widget.onSendMessage?.call(SendMessageEvent.fromJson(json.decode(message.message)));
+  }
+
+  void _jscTranslationToggled(JavascriptMessage message) {
+    if (kDebugMode) {
+      print('📗 chatbox._jscTranslationToggled: ${message.message}');
+    }
+    // {"isEnabled":true,"conversation":{}}
+    widget.onTranslationToggled?.call();
+  }
+
   /// For internal use only. Implementation detail that may change anytime.
   ///
   /// Return a string with a unique ID
@@ -259,7 +327,7 @@ class _ChatBoxState extends State<ChatBox> {
     }
 
     if (controller != null) {
-      controller.runJavascriptReturningResult(statement);
+      controller.runJavascript(statement);
     } else {
       this._pending.add(statement);
     }
@@ -300,7 +368,7 @@ class _ChatBoxState extends State<ChatBox> {
 /// Encapsulates the message entry field tied to the currently selected conversation.
 class MessageField {
   /// The ChatBox associated with this message field
-  _ChatBoxState chatbox;
+  ChatBoxState chatbox;
 
   /// The JavaScript variable name for this object.
   String variableName;

lib/src/chatoptions.dart

@@ -200,7 +200,7 @@ abstract class _ChatOptions {
   /// The toJson method is intentionally omitted, to produce an error if
   /// someone tries to convert this object to JSON instead of using the
   /// getJsonString method.
-  String getJsonString() {
+  String getJsonString(ChatBoxState chatBox) {
     final result = <String, dynamic>{};
 
     if (chatSubtitleMode != null) {
@@ -232,19 +232,17 @@ abstract class _ChatOptions {
       result['theme'] = theme;
     }
 
-/* TODO: Conversation.variableName is to be done
     if (conversationsToTranslate != null) {
       // Highest priority: TranslateConversations.off
       if (translateConversations != TranslateConversations.off) {
         // High priority: conversationsToTranslate
         // This results in a string value that will be parsed later
         result['translateConversations'] ??= '[' + conversationsToTranslate
-          !.map((conversation) => conversation.variableName)
+          !.map((conversation) => chatBox.getConversationVariableName(conversation))
           .join(',')
           + ']';
       }
     }
-*/
 
     if (conversationIdsToTranslate != null) {
       // Highest priority: TranslateConversations.off

lib/src/conversation.dart

@@ -122,3 +122,31 @@ class Conversation {
   */
 }
 
+class ConversationData {
+  /// The unique conversation identifier.
+  String id;
+
+  /// Custom metadata for this conversation
+  Map<String, String?>? custom;
+
+  /// Messages sent at the beginning of a chat.
+  ///
+  /// The messages will appear as system messages.
+  List<String>? welcomeMessages;
+
+  /// The URL to a photo which will be shown as the photo for the conversation.
+  String? photoUrl;
+
+  /// The conversation subject which will be displayed in the chat header.
+  String? subject;
+
+  ConversationData.fromJson(Map<String, dynamic> json)
+    : id = json['id'],
+    custom = json['custom'] != null ? Map<String, String?>.from(json['custom']) : null,
+    welcomeMessages = json['welcomeMessages'] != null ? List<String>.from(json['welcomeMessages']) : null,
+    photoUrl = json['photoUrl'],
+    subject = json['subject'];
+
+}
+
+

lib/src/message.dart

@@ -0,0 +1,51 @@
+
+enum MessageType { UserMessage, SystemMessage }
+
+class Attachment {
+  String url;
+  int size;
+
+  Attachment.fromJson(Map<String, dynamic> json)
+    : url = json['url'],
+    size = json['size'];
+}
+
+class SentMessage {
+  /// The message ID of the message that was sent
+  String? id;
+
+  /// The ID of the conversation that the message belongs to
+  String conversationId;
+
+  /// Identifies the message as either a User message or System message
+  MessageType type;
+
+  /// Contains an Array of User.id's that have read the message
+  List<String> readBy;
+
+  /// Contains the user ID for the person that sent the message
+  String senderId; // redundant since the user is always me, but keeps it consistant
+
+  /// Contains the message's text
+  String? text;
+
+  /// Only given if the message contains a file. An object with the URL and filesize (in bytes) of the given file.
+  Attachment? attachment;
+
+  /// Only given if the message contains a location. An array of two numbers which represent the longitude and latitude of this location, respectively. Only given if this message is a shared location.
+  ///
+  /// Example:
+  /// [51.481083, -3.178306]
+  List<double>? location;
+
+  SentMessage.fromJson(Map<String, dynamic> json)
+    : id = json['id'],
+    conversationId = json['conversationId'],
+    type = json['type'] == 'UserMessage' ? MessageType.UserMessage : MessageType.SystemMessage,
+    readBy = List<String>.from(json['readBy']),
+    senderId = json['senderId'],
+    text = json['text'],
+    attachment = json['attachment'] != null ? Attachment.fromJson(json['attachment']) : null,
+    location = json['location'] != null ? List<double>.from(json['location']) : null;
+}
+

lib/src/session.dart

@@ -38,9 +38,7 @@ class Session extends StatelessWidget {
       // can own Counter's lifecycle, making sure to call `dispose`
       // when not needed anymore.
       create: (context) => SessionState(appId: appId, me: me, signature: signature),
-      child: Container(
-          child: child,
-      ),
+      child: child,
     );
   }
 }

lib/src/user.dart

@@ -28,10 +28,10 @@ class User {
   List<String>? phone;
 
   /// The unique user identifier.
-  String id;
+  final String id;
 
   /// This user's name which will be displayed on the TalkJS UI
-  String name;
+  final String name;
 
   /// The language on the UI.
   ///
@@ -58,6 +58,19 @@ class User {
 
   User.fromId(this.id) : this.name = '', this._idOnly = true;
 
+  User.fromJson(Map<String, dynamic> json)
+    : availabilityText = json['availabilityText'],
+    custom = json['custom'] != null ? Map<String, String?>.from(json['custom']) : null,
+    email = json['email'] != null ? (json['email'] is String ? <String>[json['email']] : List<String>.from(json['email'])) : null,
+    phone = json['phone'] != null ? (json['phone'] is String ? <String>[json['phone']] : List<String>.from(json['phone'])) : null,
+    id = json['id'],
+    name = json['name'],
+    locale = json['locale'],
+    photoUrl = json['photoUrl'],
+    role = json['role'],
+    welcomeMessage = json['welcomeMessage'],
+    _idOnly = false;
+
   /// For internal use only. Implementation detail that may change anytime.
   ///
   /// This method is used instead of toJson, as we need to output valid JS
@@ -110,3 +123,4 @@ class User {
     }
   }
 }
+

lib/src/webview.dart

@@ -1,16 +1,16 @@
 import 'dart:io';
 
 import 'package:flutter/material.dart';
-import 'package:flutter/foundation.dart' show kReleaseMode;
+import 'package:flutter/foundation.dart' show kDebugMode;
 
 import 'package:webview_flutter/webview_flutter.dart';
 
 /// Wrapper around the [WebView] widget.
 class ChatWebView extends StatefulWidget {
   final ChatWebViewState state;
 
-  ChatWebView(WebViewCreatedCallback webViewFn, PageFinishedCallback jsFn, {Key? key})
-      : state = ChatWebViewState(webViewFn, jsFn),
+  ChatWebView(WebViewCreatedCallback webViewFn, PageFinishedCallback jsFn, Set<JavascriptChannel> javascriptChannels, {Key? key})
+      : state = ChatWebViewState(webViewFn, jsFn, javascriptChannels),
       super(key: key);
 
   @override
@@ -20,8 +20,7 @@ class ChatWebView extends StatefulWidget {
 class ChatWebViewState extends State<ChatWebView> {
   late WebView webView;
 
-  ChatWebViewState(WebViewCreatedCallback webViewFn,
-      PageFinishedCallback jsFn) {
+  ChatWebViewState(WebViewCreatedCallback webViewFn, PageFinishedCallback jsFn, Set<JavascriptChannel> javascriptChannels) {
     // Enable hybrid composition.
     if (Platform.isAndroid) {
       WebView.platform = SurfaceAndroidWebView();
@@ -30,9 +29,10 @@ class ChatWebViewState extends State<ChatWebView> {
     this.webView = WebView(
       initialUrl: 'about:blank',
       javascriptMode: JavascriptMode.unrestricted,
-      debuggingEnabled: !kReleaseMode,
+      debuggingEnabled: kDebugMode,
       onWebViewCreated: webViewFn,
       onPageFinished: jsFn,
+      javascriptChannels: javascriptChannels,
     );
   }