code_chat_ui 0.0.2

Simple Chatbot UI

code_chat_ui

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

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) => response['text'],
  onFailure: (dynamic error, dynamic response, String input) => '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

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

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

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  final _chats = <String>[];
  final _chatsValueNotifier = ValueNotifier<List<String>>([]);
  final _requestBuilder = (String input) => {'text': input};
  final _url = 'https://your-chat-api-url.com';

  void _onResponseSuccess(dynamic response, String input) {
    final chat = response['text'];
    setState(() {
      _chats.add(chat);
      _chatsValueNotifier.value = _chats;
    });
  }

  void _onFailure(dynamic error, dynamic response, String input) {
    final chat = 'Error: $error';
    setState(() {
      _chats.add(chat);
      _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,
        onFailure: _onFailure,
        chatsValueListenable: _chatsValueNotifier,
        chatBuilder: (context, chat) => ChatBubble(text: chat),
      ),
    );
  }
}

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

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

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10),
      child: Row(
        mainAxisAlignment:
            isUser ? MainAxisAlignment.end : MainAxisAlignment.start,
        children: [
          Container(
            padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
            decoration: BoxDecoration(
              color: isUser ? Colors.blue : Colors.grey[300],
              borderRadius: BorderRadius.circular(30),
            ),
            child: Text(
              text,
              style: TextStyle(
                color: isUser ? Colors.white : Colors.black,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

License

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