Flutter智能聊天插件mercury_aichat_sdk的使用

Flutter智能聊天插件mercury_aichat_sdk的使用

一个用于在应用程序中实现聊天机器人的Flutter插件。

一个使用GetX的Flutter应用可以通过GetXController进行状态管理。Mercury AI Chat SDK 提供了一个GetXController及其UseCases，这为聊天机器人的使用实现了简单的状态管理。此包还管理了会话ID，使用flutter_secure_storage进行存储。

在未来，需要聊天机器人的应用程序可以轻松地通过此包实现。

功能

  1. 聊天机器人状态管理（ChatbotController）形式为GetxController
  2. 聊天机器人用例（CreateConversation, SendMessage, GetMessages）

如何安装

在pubspec.yaml文件中添加依赖：

dependencies:
  mercury_aichat_sdk:

无需针对任何平台进行特定配置。

使用

导入包：

import 'package:mercury_aichat_sdk/mercury_aichat_sdk.dart';

可以在创建/注入过程中（mercury-aichat-sdk/example/lib/chatbot/chatbot_binding.dart）或在视图中（mercury-aichat-sdk/example/lib/chatbot/chatbot_view.dart）查看完整的示例以使用ChatbotController。

示例代码：注入（使用GetX-Bindings）

import 'package:dio/dio.dart';
import 'package:get/get.dart';
import 'package:mercury_aichat_sdk/mercury_aichat_sdk.dart';
import '../core/dio_client.dart';

class ChatbotBinding extends Bindings {
  [@override](/user/override)
  void dependencies() {
    /// 在聊天机器人包中，数据源、仓库、用例和控制器分别创建，并且具有依赖链（控制器 -> 用例 -> 仓库 -> 数据源）。
    /// 可以在这里进行依赖注入。并且也可以在此处设置基本URL和ChatBotId
    Get.lazyPut<ChatbotRepo>(
      () => ChatbotRepo(
        dioClient: DioClient(
          options: BaseOptions(
            baseUrl: 'https://staging-mercury-api-bwjdcapn3a-as.a.run.app',
            connectTimeout: const Duration(seconds: 10),
            receiveTimeout: const Duration(seconds: 30),
          ),
        ),
        chatBotId: '9f1196141ce84950ad05ced4b6db4d9e',
        dataSource: ChatLocalDataSource(),
      ),
    );
    Get.lazyPut(() => CreateConversationUsecase(Get.find()));
    Get.lazyPut(() => GetMessagesUsecase(Get.find()));
    Get.lazyPut(() => SendMessageUsecase(Get.find()));

    Get.lazyPut<ChatbotController>(
      () => ChatbotController(
        conversationUsecase: Get.find(),
        getMessagesUsecase: Get.find(),
        sendMessageUsecase: Get.find(),
      ),
    );
  }
}

示例代码：聊天机器人视图（使用GetView）

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:mercury_aichat_sdk/mercury_aichat_sdk.dart';

class ChatbotView extends GetView<ChatbotController> {
  const ChatbotView({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          /// 显示聊天列表
          Expanded(
            child: GetBuilder(
              builder: (ChatbotController controller) {
                if (controller.error.isNotEmpty) {
                  /// 错误组件
                  return Center(
                    child: Padding(
                      padding: const EdgeInsets.all(24.0),
                      child: Text(
                        controller.error,
                      ),
                    ),
                  );
                }

                return NotificationListener(
                  child: ListView.separated(
                    /// 因为最新的聊天是最先的聊天项，所以使用reverse: true
                    reverse: true,

                    /// 聊天机器人控制器的方法适配了反向的ListView。
                    padding: const EdgeInsets.all(24.0),
                    itemCount: controller.data.length,
                    keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
                    separatorBuilder: (context, i) => const SizedBox(height: 16.0),
                    itemBuilder: (context, i) => ChatItem(
                      controller.data[i],
                      i,
                    ),
                    controller: controller.scrollController,
                  ),
                  onNotification: (ScrollUpdateNotification scrollInfo) {
                    if (scrollInfo.metrics.pixels == scrollInfo.metrics.maxScrollExtent) {}
                    return true;
                  },
                );
              },
            ),
          ),
          /// 指示机器人正在处理用户的聊天
          GetBuilder(
            builder: (ChatbotController controller) {
              return AnimatedSize(
                duration: const Duration(milliseconds: 300),
                child: controller.botThinking
                    ? const Padding(
                        padding: EdgeInsets.only(
                          left: 24.0,
                          top: 12.0,
                          bottom: 4.0,
                        ),
                        child: Text('. . .'),
                      )
                    : Container(),
              );
            },
          ),
          const SizedBox(height: 8.0),
          /// 用户输入文本框
          Padding(
            padding: const EdgeInsets.only(
              bottom: 24.0,
              left: 24.0,
              right: 24.0,
            ),
            child: Row(
              children: [
                Expanded(
                  child: TextFormField(
                    controller: controller.textController,
                    maxLines: null,
                  ),
                ),
                const SizedBox(width: 16.0),
                InkWell(
                  key: const Key("send_chat"),
                  onTap: () => controller.sendChat(),
                  child: Transform(
                    alignment: Alignment.center,
                    transform: Matrix4.rotationZ(-0.5),
                    child: const CircleAvatar(
                      radius: 18.0,
                      child: Icon(
                        Icons.send,
                        size: 24,
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class ChatItem extends StatelessWidget {
  final ChatMessage data;
  final int index;
  const ChatItem(this.data, this.index, {Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    /// 用户角色名为"user"，机器人角色名为"assistant"
    bool me = data.role == Role.user;
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
            topLeft: const Radius.circular(12),
            topRight: const Radius.circular(12),
            bottomRight: Radius.circular(me ? 0 : 12),
            bottomLeft: Radius.circular(me ? 12 : 0)),
      ),
      padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),
      margin: EdgeInsets.only(
        left: me ? 54.0 : 0.0,
        right: me ? 0.0 : 54.0,
      ),
      child: Column(
        crossAxisAlignment:
            me ? CrossAxisAlignment.end : CrossAxisAlignment.start,
        children: [
          /// 聊天项应该用GetBuilder(id: chatMessage.id)包裹起来，以便逐步显示。
          GetBuilder(
            id: data.id,
            builder: (ChatbotController controller) {
              return Text(
                controller.data[index].content,
              );
            },
          ),
        ],
      ),
    );
  }
}

示例代码：主应用（使用GetX）

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:mercury_aichat_sdk_example/routest.dart';

import 'chatbot/chatbot_binding.dart';
import 'chatbot/chatbot_view.dart';

/// 此示例中的应用程序使用GetX包，允许在ChatbotBinding中执行注入过程。

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Mercury AI-Chat SDK Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      getPages: [
        GetPage(
          name: Routes.chatbot,
          page: () => const ChatbotView(),
          binding: ChatbotBinding(),
        ),
      ],
    );
  }
}

更多关于Flutter智能聊天插件mercury_aichat_sdk的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter智能聊天插件mercury_aichat_sdk的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中集成和使用mercury_aichat_sdk插件的详细步骤和相关代码案例。请注意，这假设你已经有一个Flutter开发环境，并且已经配置好了Dart和Flutter SDK。

1. 添加依赖

首先，你需要在你的pubspec.yaml文件中添加mercury_aichat_sdk依赖。确保你的pubspec.yaml文件包含以下部分：

dependencies:
  flutter:
    sdk: flutter
  mercury_aichat_sdk: ^最新版本号  # 请替换为实际的最新版本号

然后运行以下命令来安装依赖：

flutter pub get

2. 初始化插件

在你的Flutter项目的入口文件（通常是main.dart）中，你需要初始化MercuryAiChatSdk。以下是一个基本的初始化代码示例：

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化 MercuryAiChatSdk
  MercuryAiChatSdk.init(
    apiKey: '你的API_KEY',  // 请替换为你的实际API Key
    appId: '你的APP_ID',    // 请替换为你的实际App ID
    onInitialized: (success) {
      if (success) {
        print('MercuryAiChatSdk 初始化成功');
      } else {
        print('MercuryAiChatSdk 初始化失败');
      }
    },
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChatScreen(),
    );
  }
}

3. 创建聊天界面

接下来，你需要创建一个简单的聊天界面来展示聊天功能。以下是一个基本的聊天界面示例：

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

class ChatScreen extends StatefulWidget {
  @override
  _ChatScreenState createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final TextEditingController _textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('智能聊天'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: <Widget>[
            Expanded(
              child: ListView.builder(
                itemBuilder: (context, index) {
                  // 这里你可以添加逻辑来显示聊天记录
                  // 假设我们有一个简单的聊天记录列表
                  return ListTile(
                    title: Text('聊天记录 ${index + 1}'),
                  );
                },
                itemCount: 10,  // 假设有10条聊天记录
              ),
            ),
            Divider(),
            TextField(
              controller: _textController,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                labelText: '输入消息',
              ),
            ),
            SizedBox(height: 10),
            ElevatedButton(
              onPressed: () async {
                String userMessage = _textController.text;
                if (userMessage.isNotEmpty) {
                  // 发送消息到AI聊天机器人
                  var response = await MercuryAiChatSdk.sendMessage(userMessage);
                  if (response != null) {
                    // 处理AI的回复
                    print('AI回复: ${response.message}');
                    
                    // 更新UI来显示AI的回复
                    // 这里你需要添加逻辑来更新你的聊天记录列表
                  }
                  
                  // 清空输入框
                  _textController.clear();
                }
              },
              child: Text('发送'),
            ),
          ],
        ),
      ),
    );
  }
}

注意事项

  1. API Key 和 App ID：确保你使用了正确的API Key和App ID。
  2. 错误处理：在实际应用中，你应该添加更多的错误处理逻辑。
  3. UI更新：上面的代码示例中并没有展示如何实时更新UI来显示AI的回复，你需要根据你的应用需求来实现这部分功能。

这个示例提供了一个基本的框架，你可以根据需要进行扩展和修改。

回到顶部