Flutter聊天集成插件flutter_chatwoot_sdk的使用

通过在Flutter应用中集成Chatwoot客户端，您可以实时与访客聊天并提供卓越的支持。Chatwoot帮助您与访客进行实时交流，并提供出色的支持服务。要在您的Flutter应用中使用Chatwoot，请按照以下步骤操作。

1. 将插件添加到项目中

在终端运行以下命令：

flutter pub add flutter_chatwoot_sdk

或者

在项目的pubspec.yaml文件中添加：

dependencies:
  flutter_chatwoot_sdk: <<版本号>>

您可以在这里查看最新版本。

2. 如何使用

a. 使用ChatwootWidget

步骤：

1. 在Chatwoot服务器上创建一个网站频道，具体步骤可以参考这里。
2. 替换websiteToken和baseUrl。

完整示例代码：

import 'dart:io';
import 'package:flutter_chatwoot_sdk/flutter_chatwoot_sdk.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image/image.dart' as image;
import 'package:image_picker/image_picker.dart' as image_picker;
import 'package:path_provider/path_provider.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Chatwoot Example"),
      ),
      body: ChatwootWidget(
        websiteToken: "您的Website Token", // 替换为实际值
        baseUrl: "https://app.chatwoot.com", // 替换为实际值
        user: ChatwootUser(
          identifier: "test@test.com",
          name: "Tester test",
          email: "test@test.com",
        ),
        locale: "en",
        closeWidget: () {
          if (Platform.isAndroid) {
            SystemNavigator.pop();
          } else if (Platform.isIOS) {
            exit(0);
          }
        },
        // 附件功能目前仅支持Android
        onAttachFile: _androidFilePicker,
        onLoadStarted: () {
          print("加载小部件...");
        },
        onLoadProgress: (int progress) {
          print("加载进度: ${progress}%");
        },
        onLoadCompleted: () {
          print("小部件加载完成");
        },
      ),
    );
  }

  Future<List<String>> _androidFilePicker() async {
    final picker = image_picker.ImagePicker();
    final photo = await picker.pickImage(source: image_picker.ImageSource.gallery);

    if (photo == null) {
      return [];
    }

    final imageData = await photo.readAsBytes();
    final decodedImage = image.decodeImage(imageData)!;
    final scaledImage = image.copyResize(decodedImage, width: 500);
    final jpg = image.encodeJpg(scaledImage, quality: 90);

    final filePath = (await getTemporaryDirectory()).uri.resolve(
          './image_${DateTime.now().microsecondsSinceEpoch}.jpg',
        );
    final file = await File.fromUri(filePath).create(recursive: true);
    await file.writeAsBytes(jpg, flush: true);

    return [file.uri.toString()];
  }
}

可用参数说明：

b. 使用Chatwoot Client

步骤：

1. 在Chatwoot中创建一个API收件箱，具体步骤可以参考这里。
2. 创建自定义聊天界面，并使用ChatwootClient加载和发送消息。消息事件如onMessageSent和onMessageReceived将在创建客户端实例时传递的ChatwootCallback中触发。

示例代码：

final chatwootCallbacks = ChatwootCallbacks(
      onWelcome: (){
        print("欢迎事件触发");
      },
      onPing: (){
        print("Ping事件触发");
      },
      onConfirmedSubscription: (){
        print("订阅确认事件触发");
      },
      onConversationStartedTyping: (){
        print("会话开始输入事件触发");
      },
      onConversationStoppedTyping: (){
        print("会话停止输入事件触发");
      },
      onPersistedMessagesRetrieved: (persistedMessages){
        print("已保存的消息已检索到");
      },
      onMessagesRetrieved: (messages){
        print("消息已检索到");
      },
      onMessageReceived: (chatwootMessage){
        print("接收到消息");
      },
      onMessageDelivered: (chatwootMessage, echoId){
        print("消息已送达");
      },
      onMessageSent: (chatwootMessage, echoId){
        print("消息已发送");
      },
      onError: (error){
        print("出错！错误原因: ${error.cause}");
      },
    );

    ChatwootClient.create(
        baseUrl: widget.baseUrl,
        inboxIdentifier: widget.inboxIdentifier,
        user: widget.user,
        enablePersistence: widget.enablePersistence,
        callbacks: chatwootCallbacks
    ).then((client) {
        client.loadMessages();
    }).onError((error, stackTrace) {
      print("Chatwoot客户端创建失败，错误信息: $error");
    });