mirror of
https://github.com/aljazceru/Auto-GPT.git
synced 2025-12-28 03:14:32 +01:00
ddfbd1b9f8
This commit introduces the UserMessageTile widget, designed to display user messages in the chat interface. The widget includes the following features: - Proper alignment based on available screen width - A predefined minimum height with flexible expansion for longer messages - Styling including a white background, thin black border, and small corner radius Alongside the widget, this commit also includes comprehensive widget tests to ensure the correct rendering and functionality of the UserMessageTile. The tests cover: - Rendering without errors - Displaying the correct user message - Showing the "User" title as expected These implementations improve the structure and readability of the user messages within the chat view, ensuring a consistent and user-friendly experience.
71 lines
2.4 KiB
Dart
71 lines
2.4 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
class UserMessageTile extends StatelessWidget {
|
|
final String message;
|
|
|
|
// Constructor takes the user message as a required parameter
|
|
const UserMessageTile({
|
|
Key? key,
|
|
required this.message,
|
|
}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
// Calculate the width of the chat view based on the constraints provided
|
|
double chatViewWidth = constraints.maxWidth;
|
|
|
|
// Determine the width of the message tile based on the chat view width
|
|
double tileWidth = (chatViewWidth >= 1000) ? 900 : chatViewWidth - 40;
|
|
|
|
return Align(
|
|
alignment: Alignment.center,
|
|
child: Container(
|
|
width: tileWidth,
|
|
// Minimum height constraint for the container
|
|
constraints: const BoxConstraints(
|
|
minHeight: 50,
|
|
),
|
|
// Margin and padding for styling
|
|
margin: const EdgeInsets.symmetric(vertical: 8),
|
|
padding: const EdgeInsets.symmetric(horizontal: 20),
|
|
// Decoration to style the container with a white background, thin black border, and small corner radius
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
border: Border.all(color: Colors.black, width: 0.5),
|
|
borderRadius: BorderRadius.circular(4),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
// "User" label with custom styling
|
|
const Text(
|
|
"User",
|
|
style: TextStyle(
|
|
color: Colors.black,
|
|
fontSize: 16,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
const SizedBox(width: 20),
|
|
// Expanded widget to accommodate the message text
|
|
Expanded(
|
|
child: Container(
|
|
// Padding for the text content
|
|
padding: const EdgeInsets.fromLTRB(0, 10, 20, 10),
|
|
// Displaying the user message with no max line limit
|
|
child: Text(
|
|
message,
|
|
maxLines: null,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|