Flutter聊天界面UI插件code_chat_ui的使用

Features

• 支持任何聊天API
• 可自定义聊天气泡
• 可自定义发送按钮和输入框
• 支持头部请求
• 支持加载指示器
• 支持失败处理

Getting Started

在你的Flutter项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  code_chat_ui: ^0.1.0

在你的库中添加以下导入：

import 'package:code_chat_ui/code_chat_ui.dart';

Usage

CodeChatUI<String>(
  url: 'https://your-chat-api-url.com',
  requestBuilder: (String input) => {'text': input},
  onResponseSuccess: (dynamic response, String input) => print(response['text']),
  onFailure: (dynamic error, dynamic response, String input) => print('Error: $error'),
  chatsValueListenable: ValueNotifier<List<String>>([]),
  chatBuilder: (BuildContext context, String chat) => ChatBubble(text: chat),
)

API

CodeChatUI

一个用于构建聊天界面的Widget，可以消费任何聊天API。

Properties

Example CodeChatUi

import 'package:flutter/material.dart';

import 'package:code_chat_ui/code_chat_ui.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'OpenAI Chat Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'OpenAI Chat Demo'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _chats = <String>[];
  final _chatsValueNotifier = ValueNotifier<List<String>>([]);

  Map<String, dynamic> _requestBuilder(String input) => {
        "model": "gpt-3.5-turbo",
        "messages": [
          {
            "role": "user",
            "content": input,
          }
        ],
      };

  final _headerRequest = {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer YOUR_OPENAI_API_KEY_HERE',
  };

  final _url = 'https://api.openai.com/v1/chat/completions';

  void _onResponseSuccess(dynamic response, String input) {
    final completions = response['choices'][0]['message']['content'];
    print(response);
    print(completions);
    setState(() {
      _chats.add(input);
      _chats.add(completions);
      _chatsValueNotifier.value = _chats;
    });
  }

  void _onFailure(dynamic error, dynamic response, String input) {
    print(error);
    print(response);
    setState(() {
      _chats.add('Error: $error');
      _chatsValueNotifier.value = _chats;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: CodeChatUI<String>(
        url: _url,
        requestBuilder: _requestBuilder,
        onResponseSuccess: _onResponseSuccess,
        headerRequest: _headerRequest,
        onFailure: _onFailure,
        chatsValueListenable: _chatsValueNotifier,
        chatBuilder: (context, chat) => ChatBubble(
          text: chat,
          isUser: _chats.indexOf(chat) % 2 == 0,
        ),
      ),
    );
  }
}

class ChatBubble extends StatelessWidget {
  final String text;
  final bool isUser;

  const ChatBubble({Key? key, required this.text, required this.isUser}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 10),
      alignment: isUser ? Alignment.centerRight : Alignment.centerLeft,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
        decoration: BoxDecoration(
          color: isUser ? Colors.blue : Colors.grey[300],
          borderRadius: BorderRadius.only(
            bottomLeft: const Radius.circular(20),
            bottomRight: const Radius.circular(20),
            topLeft: isUser ? const Radius.circular(20) : const Radius.circular(0),
            topRight: isUser ? const Radius.circular(0) : const Radius.circular(20),
          )
        ),
        child: Text(
          text,
          style: TextStyle(
            color: isUser ? Colors.white : Colors.black,
          ),
        ),
      ),
    );
  }
}

Example CodeChatOpenai (code.id implementation)

CodeChatOpenai(
  url: getIt<Endpoints>().urlChatOpenai,
  appBar: AppBar(
    backgroundColor: Colors.white,
    leading: IconButton(
      icon: const Icon(
        Icons.arrow_back,
        color: Colors.black,
      ),
      onPressed: () {
        Get.back();
      },
    ),
    title: Row(
      children: [
        Image.asset(
          'assets/sgb_header.png',
          fit: BoxFit.fitWidth,
          height: 30,
          width: 30,
        ),
        const SizedBox(
          width: 10,
        ),
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("SGB",
                  style: heeboBold.copyWith(
                    fontSize: 16.sp,
                    color: mainColor,
                  )),
              Text(
                "Online",
                style: heeboRegular.copyWith(
                  fontSize: 16.sp,
                  color: Colors.green,
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
  onFailure: (error, response, input) {
    debugPrint(error.toString());
    debugPrint(response.toString());
    debugPrint(input);
  },
  onResponseSuccess: (response, input) {
    debugPrint(response.toString());
    debugPrint(input);
  },
  sendButtonBuilder: (context, onSend) => FloatingActionButton(
    onPressed: onSend,
    backgroundColor: mainColor,
    child: SvgPicture.asset('assets/icon_send.svg'),
  ),
  botIcon: Image.asset(
    'assets/sgb_header.png',
    fit: BoxFit.fitWidth,
    height: 30,
    width: 30,
  ),
),