refactor: Refactor agent message tile rendering logic

- Updated the regular expression pattern to include matching fenced code blocks in addition to headers.
- Set the `dotAll` parameter to `true` to match across multiple lines in the regular expression.
- Wrapped the message container with a `SingleChildScrollView` widget to enable scrolling when the message content exceeds the available space.
- Implemented logic to conditionally render the message as markdown or selectable text based on the value of `hasMarkdown`.
- Modified the `MarkdownStyleSheet` to customize the appearance of blockquotes and code blocks.
- Updated the child widget of the message container to reflect the changes.

1 files changed, 42 insertions, 6 deletions

diff --git a/frontend/lib/views/chat/agent_message_tile.dart b/frontend/lib/views/chat/agent_message_tile.dart
index 851af1f06..029f487c0 100644
--- a/frontend/lib/views/chat/agent_message_tile.dart
+++ b/frontend/lib/views/chat/agent_message_tile.dart
@@ -34,8 +34,9 @@ class _AgentMessageTileState extends State<AgentMessageTile> {
             r'(?:\*|_).*?(?:\*|_)|' + // Italic
             r'\[.*?\]\(.*?\)|' + // Links
             r'!\[.*?\]\(.*?\)|' + // Images
-            r'#{1,6}.*', // Headers
-        multiLine: true,
+            r'#{1,6}.*|' + // Headers
+            r'```.*?```', // Fenced code blocks
+        dotAll: true, // To match across multiple lines
         caseSensitive: false,
       );
 
@@ -80,10 +81,45 @@ class _AgentMessageTileState extends State<AgentMessageTile> {
                       Expanded(
                         child: Container(
                           padding: const EdgeInsets.fromLTRB(0, 10, 20, 10),
-                          child: false
-                              ? Markdown(data: widget.chat.message)
-                              : SelectableText(widget.chat.message,
-                                  maxLines: null),
+                          child: SingleChildScrollView(
+                            child: hasMarkdown
+                                ? Markdown(
+                                    data: widget.chat.message,
+                                    shrinkWrap: true,
+                                    styleSheet: MarkdownStyleSheet.fromTheme(
+                                            Theme.of(context))
+                                        .copyWith(
+                                      blockquoteDecoration: BoxDecoration(
+                                        color: Colors
+                                            .black, // Background color for blockquotes
+                                        border: Border(
+                                          left: BorderSide(
+                                            color: Colors.grey,
+                                            width: 4.0,
+                                          ),
+                                        ),
+                                      ),
+                                      blockquoteAlign: WrapAlignment.start,
+                                      blockquotePadding: const EdgeInsets.all(
+                                          10.0), // Padding for blockquotes
+                                      codeblockDecoration: BoxDecoration(
+                                        color: Colors.grey[
+                                            200], // Background color for code blocks
+                                        borderRadius:
+                                            BorderRadius.circular(4.0),
+                                      ),
+                                      codeblockPadding: const EdgeInsets.all(
+                                          10.0), // Padding for code blocks
+                                      code: TextStyle(
+                                        backgroundColor: Colors.grey[
+                                            200], // Background color for inline code
+                                        fontFamily: 'monospace',
+                                      ),
+                                    ),
+                                  )
+                                : SelectableText(widget.chat.message,
+                                    maxLines: null),
+                          ),
                         ),
                       ),
                       ElevatedButton(