code_chat_ui

A simple Flutter package for building chat UI that can consume any chat API especially chatbot.

Features

Consumes any chat API
Customizable chat bubble
Customizable send button and text field
Supports header request
Supports loading indicator
Supports failure handling

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  code_chat_ui: ^0.1.0

In your library add the following import:

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

A widget for building chat UI that can consume any chat API.

Properties

Name	Type	Description
`url`	`String`	The URL of the chat API endpoint.
`requestBuilder`	`Map<String, dynamic> Function(String input)`	A function that builds the request body from the user input.
`onResponseSuccess`	`T Function(dynamic response, String input)`	A function that extracts the chat message from the API response.
`onFailure`	`void Function(dynamic error, dynamic response, String input)?`	A function that handles the API error.
`chatsValueListenable`	`ValueNotifier<List<T>>`	A value notifier that holds the list of chat messages.
`chatBuilder`	`Widget Function(BuildContext context, T chat)`	A function that builds the chat bubble widget.
`headerRequest`	`Map<String, String>?`	A map of headers to be included in the API request.
`appBar`	`PreferredSizeWidget?`	A widget that builds the app bar.
`sendButtonBuilder`	`Widget Function(BuildContext context, void Function() onSend)?`	A function that builds the send button widget.
`textFormFieldBuilder`	`Widget Function(BuildContext context, TextEditingController controller, FocusNode focusNode, void Function() onFieldSubmitted)?`	A function that builds the text form field widget.

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,
  ),
),

License

This project is licensed under the MIT License - see the LICENSE file for details.