Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[WIP] expose properties and fix some bugs in chat widget. #1727

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+265 −131
Open

[WIP] expose properties and fix some bugs in chat widget. #1727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9afbd02
chat widget customization
TheNoumanDev Nov 15, 2024
6bc2bcf
added safeArea
TheNoumanDev Nov 15, 2024
4e9ac55
dded padding
TheNoumanDev Nov 15, 2024
1e89ba7
fixed initialmessages error about inlineWidget
TheNoumanDev Nov 18, 2024
b835455
fixed bad state error
TheNoumanDev Nov 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
284 changes: 181 additions & 103 deletions modules/chat/lib/chat_page.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import 'dart:convert';

import 'package:ensemble/framework/scope.dart';
import 'package:ensemble/framework/view/data_scope_widget.dart';
import 'package:ensemble/util/utils.dart';
import 'package:ensemble/widget/helpers/controllers.dart';
import 'package:ensemble_chat/ensemble_chat.dart';
import 'package:flutter/material.dart';
import 'package:yaml/yaml.dart';
Expand All @@ -16,138 +18,202 @@ class ChatPage extends StatefulWidget {
super.key,
required this.messages,
required this.onMessageSend,
required this.controller,
});

final List<InternalMessage> messages;
final Function(String value) onMessageSend;
final EnsembleChatController controller;

@override
State<ChatPage> createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
final ScrollController scrollController = ScrollController();
class BubbleStyleComposite extends WidgetCompositeProperty {
BubbleStyleComposite(ChangeNotifier widgetController)
: super(widgetController);

final TextEditingController _textController = TextEditingController();
Color? backgroundColor;
Color? textColor;
double borderRadius = 20.0;
TextStyle? textStyle;
EdgeInsets padding = const EdgeInsets.symmetric(horizontal: 16, vertical: 12);
EdgeInsets margin = const EdgeInsets.symmetric(vertical: 4);

@override
void didUpdateWidget(covariant ChatPage oldWidget) {
super.didUpdateWidget(oldWidget);
factory BubbleStyleComposite.from(
ChangeNotifier widgetController, dynamic payload) {
BubbleStyleComposite composite = BubbleStyleComposite(widgetController);
if (payload is Map) {
composite.backgroundColor = Utils.getColor(payload['backgroundColor']);
composite.textColor = Utils.getColor(payload['textColor']);
composite.borderRadius =
Utils.getDouble(payload['borderRadius'], fallback: 20.0);
composite.textStyle = Utils.getTextStyle(payload['textStyle']);
composite.padding = Utils.getInsets(payload['padding'],
fallback: const EdgeInsets.symmetric(horizontal: 16, vertical: 12));
composite.margin = Utils.getInsets(payload['margin'],
fallback: const EdgeInsets.symmetric(vertical: 4));
}
return composite;
}

@override
Map<String, Function> setters() => {
'backgroundColor': (value) => backgroundColor = Utils.getColor(value),
'textColor': (value) => textColor = Utils.getColor(value),
'borderRadius': (value) =>
borderRadius = Utils.getDouble(value, fallback: 20.0),
'textStyle': (value) => textStyle = Utils.getTextStyle(value),
'padding': (value) => padding = Utils.getInsets(value,
fallback: const EdgeInsets.symmetric(horizontal: 16, vertical: 12)),
'margin': (value) => margin = Utils.getInsets(value,
fallback: const EdgeInsets.symmetric(vertical: 4)),
};

@override
Map<String, Function> getters() => {
'backgroundColor': () => backgroundColor,
'textColor': () => textColor,
'borderRadius': () => borderRadius,
'textStyle': () => textStyle,
'padding': () => padding,
'margin': () => margin,
};

@override
Map<String, Function> methods() => {};
}

class _ChatPageState extends State<ChatPage> {
final ScrollController scrollController = ScrollController();
final TextEditingController _textController = TextEditingController();

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Column(
children: [
Flexible(
child: ListView.builder(
reverse: true,
itemCount: widget.messages.length,
itemBuilder: (context, index) {
final effectiveIndex = widget.messages.length - 1 - index;
final message = widget.messages.elementAt(effectiveIndex);
return Container(
margin: const EdgeInsets.only(top: 8.0),
child: MessageWidget(
key: ValueKey(message.id),
message: message,
),
);
},
findChildIndexCallback: (key) {
// TODO: https://www.youtube.com/watch?v=2FjCg1IAeds
return null;
},
),
),
const SizedBox(height: 8),
Padding(
padding: EdgeInsets.fromLTRB(
MediaQuery.of(context).padding.left + 16,
0,
MediaQuery.of(context).padding.right + 16,
MediaQuery.of(context).viewInsets.bottom +
MediaQuery.of(context).padding.bottom +
8,
),
child: Row(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 1,
blurRadius: 5,
offset: const Offset(0, 2),
),
],
borderRadius: BorderRadius.circular(16),
return SafeArea(
minimum: widget.controller.padding ?? const EdgeInsets.all(0),
child: Scaffold(
backgroundColor: widget.controller.backgroundColor ?? Colors.black,
body: Column(
children: [
Flexible(
child: ListView.builder(
reverse: true,
itemCount: widget.messages.length,
itemBuilder: (context, index) {
final effectiveIndex = widget.messages.length - 1 - index;
final message = widget.messages.elementAt(effectiveIndex);
return Container(
margin: const EdgeInsets.only(top: 8.0),
child: MessageWidget(
key: ValueKey(message.id),
message: message,
controller: widget.controller,
),
child: TextFormField(
controller: _textController,
maxLines: 5,
minLines: 1,
onFieldSubmitted: (value) {
if (_textController.text.trim().isEmpty) return;
widget.onMessageSend.call(_textController.text);
_textController.clear();
},
decoration: InputDecoration(
hintText: 'Send a message',
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(16.0),
borderSide: BorderSide.none,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16.0),
borderSide: BorderSide.none,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16.0),
borderSide: BorderSide.none,
);
},
),
),
const SizedBox(height: 8),
Padding(
padding: EdgeInsets.fromLTRB(
MediaQuery.of(context).padding.left + 16,
0,
MediaQuery.of(context).padding.right + 16,
MediaQuery.of(context).viewInsets.bottom +
MediaQuery.of(context).padding.bottom +
8,
),
child: Row(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
color: widget.controller.textFieldBackgroundColor ??
Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.circular(16),
),
child: TextFormField(
controller: _textController,
style: widget.controller.textFieldTextStyle ??
const TextStyle(color: Colors.white),
maxLines: 5,
minLines: 1,
onFieldSubmitted: _handleSubmit,
decoration: InputDecoration(
hintText: 'Send a message',
filled: true,
fillColor: Colors.transparent,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(16.0),
borderSide: BorderSide.none,
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16.0),
borderSide: BorderSide.none,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(16.0),
borderSide: BorderSide.none,
),
),
),
),
),
),
IconButton(
constraints: const BoxConstraints(
minHeight: 24,
minWidth: 24,
),
icon: const Icon(
Icons.send,
color: Colors.white,
),
onPressed: () {
if (_textController.text.trim().isEmpty) return;
widget.onMessageSend.call(_textController.text);
_textController.clear();
},
padding: const EdgeInsets.symmetric(horizontal: 16.0),
splashRadius: 24,
)
],
IconButton(
constraints: const BoxConstraints(
minHeight: 24,
minWidth: 24,
),
icon: Icon(
Icons.send,
color: widget.controller.iconColor ?? Colors.white,
),
onPressed: () => _handleSubmit(),
padding: const EdgeInsets.symmetric(horizontal: 16.0),
splashRadius: 24,
)
],
),
),
),
],
],
),
),
);
}

void _handleSubmit([String? value]) {
if (_textController.text.trim().isEmpty) return;
widget.onMessageSend.call(_textController.text);
_textController.clear();
}
}

class MessageWidget extends StatelessWidget {
const MessageWidget({super.key, required this.message});
const MessageWidget({
super.key,
required this.message,
required this.controller,
});

final InternalMessage message;
final EnsembleChatController controller;

BubbleStyleComposite _getStyleForRole() {
switch (message.role) {
case MessageRole.user:
return controller.userBubbleStyle;
case MessageRole.assistant:
return controller.assistantBubbleStyle;
case MessageRole.system:
return controller.assistantBubbleStyle; // Fallback to assistant style
}
}

@override
Widget build(BuildContext context) {
final bubbleStyle = _getStyleForRole();

return Padding(
padding: const EdgeInsets.symmetric(horizontal: 12.0),
child: message.role == MessageRole.system
Expand All @@ -160,14 +226,26 @@ class MessageWidget extends StatelessWidget {
)
: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: message.role == MessageRole.user
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
children: [
const SizedBox(height: 4),
if (message.content != null)
BubbleContainer(
text: message.content ?? '',
color: const Color(0xFFEAEAEA),
bubbleAlignment: BubbleAlignment.left,
bubbleAlignment: message.role == MessageRole.user
? BubbleAlignment.right
: BubbleAlignment.left,
color: bubbleStyle.backgroundColor ??
Colors.white.withOpacity(0.15),
textStyle: bubbleStyle.textStyle?.copyWith(
color: bubbleStyle.textColor,
) ??
TextStyle(color: bubbleStyle.textColor ?? Colors.white),
padding: bubbleStyle.padding,
margin: bubbleStyle.margin,
bubbleRadius: bubbleStyle.borderRadius,
),
if (message.widget != null)
Container(
Expand Down
Loading
Loading