From ddfbd1b9f8ca4a345925e0c15bbe53d1b5f48642 Mon Sep 17 00:00:00 2001
From: hunteraraujo <hunter_araujo@msn.com>
Date: Thu, 24 Aug 2023 20:59:47 -0700
Subject: [PATCH] Implement UserMessageTile Widget and Tests

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.
---
 lib/views/chat/user_message_tile.dart | 70 +++++++++++++++++++++++++++
 test/user_message_tile_test.dart      | 42 ++++++++++++++++
 2 files changed, 112 insertions(+)
 create mode 100644 lib/views/chat/user_message_tile.dart
 create mode 100644 test/user_message_tile_test.dart

diff --git a/lib/views/chat/user_message_tile.dart b/lib/views/chat/user_message_tile.dart
new file mode 100644
index 00000000..a707a6e5
--- /dev/null
+++ b/lib/views/chat/user_message_tile.dart
@@ -0,0 +1,70 @@
+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,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
diff --git a/test/user_message_tile_test.dart b/test/user_message_tile_test.dart
new file mode 100644
index 00000000..6f5133a2
--- /dev/null
+++ b/test/user_message_tile_test.dart
@@ -0,0 +1,42 @@
+import 'package:auto_gpt_flutter_client/views/chat/user_message_tile.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+void main() {
+  // Test group for UserMessageTile widget
+  group('UserMessageTile', () {
+    // Test to check if the widget renders without error
+    testWidgets('renders without error', (WidgetTester tester) async {
+      await tester.pumpWidget(const MaterialApp(
+        home: Scaffold(
+          body: UserMessageTile(message: 'Hello, User!'),
+        ),
+      ));
+      expect(find.byType(UserMessageTile), findsOneWidget);
+    });
+
+    // Test to check if the widget displays the correct user message
+    testWidgets('displays the correct user message',
+        (WidgetTester tester) async {
+      const testMessage = 'Test Message';
+      await tester.pumpWidget(const MaterialApp(
+        home: Scaffold(
+          body: UserMessageTile(message: testMessage),
+        ),
+      ));
+
+      expect(find.text(testMessage), findsOneWidget);
+    });
+
+    // Test to check if the widget displays the "User" title
+    testWidgets('displays the "User" title', (WidgetTester tester) async {
+      await tester.pumpWidget(const MaterialApp(
+        home: Scaffold(
+          body: UserMessageTile(message: 'Any Message'),
+        ),
+      ));
+
+      expect(find.text('User'), findsOneWidget);
+    });
+  });
+}