code_chat_ui

Description:

code chat ui

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
copied to clipboard
In your library add the following import:
import 'package:code_chat_ui/code_chat_ui.dart';
copied to clipboard
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),
)
copied to clipboard
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,
),
),
),
);
}
}

copied to clipboard
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,
),
),
copied to clipboard
License #
This project is licensed under the MIT License - see the LICENSE file for details.