diff --git a/README.md b/README.md index e77167c..38b964a 100644 --- a/README.md +++ b/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，也即企业号：登录后台->客服管理->客服账号->企业号 diff --git a/bytedesk_demo/README.md b/bytedesk_demo/README.md index e77167c..a230a1b 100644 --- a/bytedesk_demo/README.md +++ b/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 @@ + ### 其他 diff --git a/bytedesk_demo/lib/main.dart b/bytedesk_demo/lib/main.dart index 285c897..e3e51c1 100644 --- a/bytedesk_demo/lib/main.dart +++ b/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 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 { diff --git a/bytedesk_demo/lib/notification/custom_animation.dart b/bytedesk_demo/lib/notification/custom_animation.dart new file mode 100755 index 0000000..abe84df --- /dev/null +++ b/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 tweenOffset = Tween(begin: Offset(0, 40), end: Offset(0, 0)); + + static final Tween tweenOpacity = Tween(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), + ), + ); + } +} diff --git a/bytedesk_demo/lib/notification/custom_notification.dart b/bytedesk_demo/lib/notification/custom_notification.dart new file mode 100755 index 0000000..168caf9 --- /dev/null +++ b/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(); + }), + ), + ), + ); + } +} diff --git a/bytedesk_demo/lib/notification/ios_toast.dart b/bytedesk_demo/lib/notification/ios_toast.dart new file mode 100755 index 0000000..00929b3 --- /dev/null +++ b/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: [ + Icon( + Icons.check, + color: Colors.white, + ), + Text('Succeed') + ], + ), + ), + ), + ), + ), + ), + ); + } +} diff --git a/bytedesk_demo/pubspec.yaml b/bytedesk_demo/pubspec.yaml index 9602587..903a44e 100644 --- a/bytedesk_demo/pubspec.yaml +++ b/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. diff --git a/bytedesk_demo/setting.jpeg b/bytedesk_demo/setting.jpeg new file mode 100644 index 0000000..c6e74c1 Binary files /dev/null and b/bytedesk_demo/setting.jpeg differ