update

README.md

@@ -22,7 +22,7 @@
 
 ### 第一步
 
-- pubspec.yaml添加：bytedesk_kefu: ^0.1.1
+- pubspec.yaml添加：bytedesk_kefu: ^最近版本号
 - [注册账号](https://www.bytedesk.com/antv/user/login)
 - 获取appkey，登录后台->客服管理->渠道管理->添加应用->appkey
 - 获取subDomain，也即企业号：登录后台->客服管理->客服账号->企业号

bytedesk_demo/README.md

@@ -2,12 +2,13 @@
 
 萝卜丝(bytedesk) flutter 客服SDK
 
-## 功能
+## 部分功能
 
 - 技能组客服
 - 一对一客服
 - 支持发送电商商品信息
 - 支持发送附言消息
+- 对接APP用户信息(昵称/头像)
 - 获取当前客服在线状态
 - 获取历史会话
 - 消息提示设置
@@ -22,7 +23,8 @@
 
 ### 第一步
 
-- pubspec.yaml添加：bytedesk_kefu: ^0.1.1
+- pubspec.yaml添加：bytedesk_kefu: ^最近版本号
+- 最新版本：[![Pub](https://img.shields.io/pub/v/bytedesk_kefu.svg)](https://pub.dev/packages/bytedesk_kefu)
 - [注册账号](https://www.bytedesk.com/antv/user/login)
 - 获取appkey，登录后台->客服管理->渠道管理->添加应用->appkey
 - 获取subDomain，也即企业号：登录后台->客服管理->客服账号->企业号
@@ -43,6 +45,7 @@
 <img src="./chat_type.jpeg" width="25%" height="25%"/>
 <img src="./userinfo.jpeg" width="25%" height="25%"/>
 <img src="./status.jpeg" width="25%" height="25%"/>
+<img src="./setting.jpeg" width="25%" height="25%"/>
 
 ### 其他
 

bytedesk_demo/lib/main.dart

@@ -4,15 +4,25 @@ import 'package:bytedesk_kefu/util/bytedesk_events.dart';
 import 'package:bytedesk_demo/page/chat_type_page.dart';
 import 'package:bytedesk_demo/page/history_thread_page.dart';
 import 'package:bytedesk_demo/page/online_status_page.dart';
-import 'package:bytedesk_demo/page/setting_page.dart';
+// import 'package:bytedesk_demo/page/setting_page.dart';
 import 'package:bytedesk_demo/page/user_info_page.dart';
+import 'package:bytedesk_kefu/util/bytedesk_utils.dart';
+import 'package:overlay_support/overlay_support.dart';
 import 'package:flutter/material.dart';
 
+import 'notification/custom_notification.dart';
+
 void main() {
   // runApp(MyApp());
-  runApp(MaterialApp(
-    debugShowCheckedModeBanner: false, // 去除右上角debug的标签
-    home: MyApp(),
+  // runApp(MaterialApp(
+  //   debugShowCheckedModeBanner: false, // 去除右上角debug的标签
+  //   home: MyApp(),
+  // ));
+  runApp(OverlaySupport(
+    child: MaterialApp(
+      debugShowCheckedModeBanner: false, // 去除右上角debug的标签
+      home: MyApp(),
+    )
   ));
 
   // 参考文档：https://github.com/Bytedesk/bytedesk-flutter
@@ -152,6 +162,21 @@ class _MyAppState extends State<MyApp> with WidgetsBindingObserver {
       // print('receive message:' + event.message.content);
       if (event.message.type == BytedeskConstants.MESSAGE_TYPE_TEXT) {
         print('文字消息: ' + event.message.content);
+        // 判断当前是否客服页面，如否，则显示顶部通知栏
+        if (!BytedeskUtils.isCurrentChatKfPage()) {
+          // https://github.com/boyan01/overlay_support
+          showOverlayNotification((context) {
+            return MessageNotification(
+              avatar: event.message.user.avatar,
+              nickname: event.message.user.nickname,
+              content: event.message.content,
+              onReply: () {
+                OverlaySupportEntry.of(context).dismiss();
+              },
+            );
+          }, duration: Duration(milliseconds: 4000));
+        }
+        
       } else if (event.message.type == BytedeskConstants.MESSAGE_TYPE_IMAGE) {
         print('图片消息:' + event.message.imageUrl);
       } else {

bytedesk_demo/lib/notification/custom_animation.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+import 'ios_toast.dart';
+
+/// Example to show how to popup overlay with custom animation.
+class CustomAnimationToast extends StatelessWidget {
+  final double value;
+
+  static final Tween<Offset> tweenOffset = Tween<Offset>(begin: Offset(0, 40), end: Offset(0, 0));
+
+  static final Tween<double> tweenOpacity = Tween<double>(begin: 0, end: 1);
+
+  const CustomAnimationToast({Key key, @required this.value}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Transform.translate(
+      offset: tweenOffset.transform(value),
+      child: Opacity(
+        child: IosStyleToast(),
+        opacity: tweenOpacity.transform(value),
+      ),
+    );
+  }
+}

bytedesk_demo/lib/notification/custom_notification.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+
+class MessageNotification extends StatelessWidget {
+  //
+  final VoidCallback onReply;
+  final String avatar;
+  final String nickname;
+  final String content;
+
+  const MessageNotification({
+    Key key,
+    @required this.onReply,
+    @required this.avatar,
+    @required this.nickname,
+    @required this.content,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      margin: const EdgeInsets.symmetric(horizontal: 4),
+      child: SafeArea(
+        child: ListTile(
+          leading: SizedBox.fromSize(
+              size: const Size(40, 40),
+              child: ClipOval(child: Image.network(avatar))),
+          title: Text(nickname),
+          subtitle: Text(content),
+          trailing: IconButton(
+              icon: Icon(Icons.reply),
+              onPressed: () {
+                if (onReply != null) onReply();
+              }),
+        ),
+      ),
+    );
+  }
+}

bytedesk_demo/lib/notification/ios_toast.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+
+class IosStyleToast extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: DefaultTextStyle(
+        style: Theme.of(context).textTheme.bodyText2.copyWith(color: Colors.white),
+        child: Padding(
+          padding: const EdgeInsets.all(16),
+          child: Center(
+            child: ClipRRect(
+              borderRadius: BorderRadius.circular(10),
+              child: Container(
+                color: Colors.black87,
+                padding: const EdgeInsets.symmetric(
+                  vertical: 8,
+                  horizontal: 16,
+                ),
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: <Widget>[
+                    Icon(
+                      Icons.check,
+                      color: Colors.white,
+                    ),
+                    Text('Succeed')
+                  ],
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

bytedesk_demo/pubspec.yaml

@@ -31,8 +31,10 @@ dependencies:
   fluttertoast: ^7.1.1
   # 消息设置switch https://pub.dev/packages/list_tile_switch
   list_tile_switch: ^0.0.2
+  # 应用内-顶部通知栏 https://pub.dev/packages/overlay_support/
+  overlay_support: ^1.0.5
   # https://pub.dev/packages/bytedesk_kefu
-  bytedesk_kefu: ^0.1.1
+  bytedesk_kefu: ^0.1.5
 
 
   # The following adds the Cupertino Icons font to your application.