add Markdown detection and rendering

- Implement `containsMarkdown` function to identify messages with Markdown
- Utilize `flutter_markdown` package to render detected Markdown content
- Enhance chat UI to conditionally display plain text or formatted Markdown
This commit is contained in:
hunteraraujo
2023-10-19 22:19:09 -07:00
parent 17d93421e7
commit 9219bfba0e

View File

@@ -3,6 +3,7 @@ import 'dart:convert';
import 'package:auto_gpt_flutter_client/models/chat.dart';
import 'package:auto_gpt_flutter_client/views/chat/json_code_snippet_view.dart';
import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
class AgentMessageTile extends StatefulWidget {
final Chat chat;
@@ -26,6 +27,23 @@ class _AgentMessageTileState extends State<AgentMessageTile> {
String jsonString = jsonEncode(widget.chat.jsonResponse);
int artifactsCount = widget.chat.artifacts.length;
bool containsMarkdown(String text) {
// Regular expression to detect Markdown patterns like headers, bold, links, etc.
final RegExp markdownPattern = RegExp(
r'(?:\*\*|__).*?(?:\*\*|__)|' + // Bold
r'(?:\*|_).*?(?:\*|_)|' + // Italic
r'\[.*?\]\(.*?\)|' + // Links
r'!\[.*?\]\(.*?\)|' + // Images
r'#{1,6}.*', // Headers
multiLine: true,
caseSensitive: false,
);
return markdownPattern.hasMatch(text);
}
bool hasMarkdown = containsMarkdown(widget.chat.message);
return LayoutBuilder(
builder: (context, constraints) {
double chatViewWidth = constraints.maxWidth;
@@ -62,10 +80,9 @@ class _AgentMessageTileState extends State<AgentMessageTile> {
Expanded(
child: Container(
padding: const EdgeInsets.fromLTRB(0, 10, 20, 10),
child: Text(
widget.chat.message,
maxLines: null,
),
child: hasMarkdown
? Markdown(data: widget.chat.message)
: Text(widget.chat.message, maxLines: null),
),
),
ElevatedButton(