feat: migrate markdown parser
This commit is contained in:
cogwheel0
197
lib/shared/widgets/markdown/markdown_config.dart
Normal file
197
lib/shared/widgets/markdown/markdown_config.dart
Normal file
@@ -0,0 +1,197 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:markdown_widget/markdown_widget.dart';
|
||||
import 'package:flutter_highlight/themes/atom-one-dark.dart';
|
||||
import 'package:flutter_highlight/themes/atom-one-light.dart';
|
||||
import 'package:cached_network_image/cached_network_image.dart';
|
||||
import 'package:url_launcher/url_launcher_string.dart';
|
||||
import 'package:conduit/shared/theme/app_theme.dart';
|
||||
import 'package:conduit/shared/theme/theme_extensions.dart';
|
||||
|
||||
class ConduitMarkdownConfig {
|
||||
static MarkdownConfig getConfig({
|
||||
required bool isDark,
|
||||
required BuildContext context,
|
||||
bool isStreaming = false,
|
||||
}) {
|
||||
final theme = context.conduitTheme;
|
||||
|
||||
return (isDark ? MarkdownConfig.darkConfig : MarkdownConfig.defaultConfig).copy(
|
||||
configs: [
|
||||
// Code block config
|
||||
PreConfig(
|
||||
theme: isDark ? atomOneDarkTheme : atomOneLightTheme,
|
||||
decoration: BoxDecoration(
|
||||
color: theme.surfaceBackground.withValues(alpha: 0.06),
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
||||
border: Border.all(
|
||||
color: theme.dividerColor.withValues(alpha: 0.7),
|
||||
width: BorderWidth.thin,
|
||||
),
|
||||
),
|
||||
padding: const EdgeInsets.all(Spacing.md),
|
||||
textStyle: AppTypography.chatCodeStyle,
|
||||
wrapper: (child, text, language) => CodeBlockWrapper(
|
||||
code: text,
|
||||
language: language,
|
||||
theme: theme,
|
||||
child: child,
|
||||
),
|
||||
),
|
||||
|
||||
// Link config
|
||||
LinkConfig(
|
||||
style: TextStyle(
|
||||
color: AppTheme.brandPrimary,
|
||||
decoration: TextDecoration.underline,
|
||||
),
|
||||
onTap: (url) async {
|
||||
if (await canLaunchUrlString(url)) {
|
||||
launchUrlString(url, mode: LaunchMode.inAppWebView);
|
||||
}
|
||||
},
|
||||
),
|
||||
|
||||
// Image config - optimized for mobile
|
||||
ImgConfig(
|
||||
builder: (url, attributes) => CachedNetworkImage(
|
||||
imageUrl: url,
|
||||
placeholder: (context, url) => Container(
|
||||
height: 200,
|
||||
color: theme.surfaceBackground,
|
||||
child: Center(
|
||||
child: CircularProgressIndicator(
|
||||
color: AppTheme.brandPrimary,
|
||||
),
|
||||
),
|
||||
),
|
||||
errorWidget: (context, url, error) => Container(
|
||||
height: 100,
|
||||
color: theme.surfaceBackground,
|
||||
child: Center(
|
||||
child: Icon(
|
||||
Icons.broken_image,
|
||||
color: theme.iconSecondary,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
// Table config - mobile responsive
|
||||
TableConfig(
|
||||
wrapper: (table) => SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: table,
|
||||
),
|
||||
),
|
||||
|
||||
// Paragraph config
|
||||
PConfig(
|
||||
textStyle: AppTypography.chatMessageStyle.copyWith(
|
||||
color: theme.textPrimary,
|
||||
),
|
||||
),
|
||||
|
||||
// Headers
|
||||
H1Config(
|
||||
style: AppTypography.headlineLargeStyle.copyWith(
|
||||
color: theme.textPrimary,
|
||||
),
|
||||
),
|
||||
H2Config(
|
||||
style: AppTypography.headlineMediumStyle.copyWith(
|
||||
color: theme.textPrimary,
|
||||
),
|
||||
),
|
||||
H3Config(
|
||||
style: AppTypography.headlineSmallStyle.copyWith(
|
||||
color: theme.textPrimary,
|
||||
),
|
||||
),
|
||||
|
||||
// Blockquote
|
||||
BlockquoteConfig(),
|
||||
|
||||
// Code inline
|
||||
CodeConfig(
|
||||
style: AppTypography.chatCodeStyle.copyWith(
|
||||
color: theme.textPrimary,
|
||||
backgroundColor: theme.surfaceBackground.withValues(alpha: 0.1),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Custom wrapper for code blocks with copy functionality
|
||||
class CodeBlockWrapper extends StatelessWidget {
|
||||
final Widget child;
|
||||
final String code;
|
||||
final String? language;
|
||||
final ConduitThemeExtension theme;
|
||||
|
||||
const CodeBlockWrapper({
|
||||
super.key,
|
||||
required this.child,
|
||||
required this.code,
|
||||
this.language,
|
||||
required this.theme,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Stack(
|
||||
children: [
|
||||
child,
|
||||
Positioned(
|
||||
top: 8,
|
||||
right: 8,
|
||||
child: Material(
|
||||
color: Colors.transparent,
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
|
||||
onTap: () {
|
||||
// Copy code to clipboard
|
||||
// Implementation depends on clipboard service
|
||||
},
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(Spacing.xs),
|
||||
decoration: BoxDecoration(
|
||||
color: theme.surfaceBackground.withValues(alpha: 0.8),
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
|
||||
),
|
||||
child: Icon(
|
||||
Icons.copy,
|
||||
size: IconSize.sm,
|
||||
color: theme.iconSecondary,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
if (language != null)
|
||||
Positioned(
|
||||
top: 8,
|
||||
left: 8,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: Spacing.sm,
|
||||
vertical: Spacing.xxs,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: theme.surfaceBackground.withValues(alpha: 0.8),
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.xs),
|
||||
),
|
||||
child: Text(
|
||||
language!,
|
||||
style: AppTypography.captionStyle.copyWith(
|
||||
color: theme.textSecondary,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
200
lib/shared/widgets/markdown/streaming_markdown_widget.dart
Normal file
200
lib/shared/widgets/markdown/streaming_markdown_widget.dart
Normal file
@@ -0,0 +1,200 @@
|
||||
import 'dart:async';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:markdown_widget/markdown_widget.dart';
|
||||
import 'package:conduit/shared/widgets/markdown/markdown_config.dart';
|
||||
|
||||
class StreamingMarkdownWidget extends StatefulWidget {
|
||||
final Stream<String>? contentStream;
|
||||
final String? staticContent;
|
||||
final bool isStreaming;
|
||||
final ScrollController? scrollController;
|
||||
final EdgeInsetsGeometry? padding;
|
||||
|
||||
const StreamingMarkdownWidget({
|
||||
super.key,
|
||||
this.contentStream,
|
||||
this.staticContent,
|
||||
required this.isStreaming,
|
||||
this.scrollController,
|
||||
this.padding,
|
||||
});
|
||||
|
||||
@override
|
||||
State<StreamingMarkdownWidget> createState() => _StreamingMarkdownWidgetState();
|
||||
}
|
||||
|
||||
class _StreamingMarkdownWidgetState extends State<StreamingMarkdownWidget> {
|
||||
final _buffer = StringBuffer();
|
||||
Timer? _debounceTimer;
|
||||
String _renderedContent = '';
|
||||
StreamSubscription<String>? _streamSubscription;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
if (widget.contentStream != null) {
|
||||
_streamSubscription = widget.contentStream!.listen(_handleChunk);
|
||||
} else if (widget.staticContent != null) {
|
||||
_renderedContent = widget.staticContent!;
|
||||
}
|
||||
}
|
||||
|
||||
void _handleChunk(String chunk) {
|
||||
_buffer.write(chunk);
|
||||
|
||||
// Debounce rendering for performance
|
||||
_debounceTimer?.cancel();
|
||||
_debounceTimer = Timer(const Duration(milliseconds: 50), () {
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
_renderedContent = _fixIncompleteMarkdown(_buffer.toString());
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
String _fixIncompleteMarkdown(String content) {
|
||||
// Auto-close unclosed code blocks for valid markdown during streaming
|
||||
final fenceCount = '```'.allMatches(content).length;
|
||||
if (fenceCount % 2 != 0) {
|
||||
content += '\n```';
|
||||
}
|
||||
|
||||
// Fix incomplete bold/italic markers
|
||||
final boldCount = RegExp(r'\*\*').allMatches(content).length;
|
||||
if (boldCount % 2 != 0) {
|
||||
content += '**';
|
||||
}
|
||||
|
||||
final italicCount = RegExp(r'(?<!\*)\*(?!\*)').allMatches(content).length;
|
||||
if (italicCount % 2 != 0) {
|
||||
content += '*';
|
||||
}
|
||||
|
||||
// Fix incomplete link brackets
|
||||
final openBrackets = '['.allMatches(content).length;
|
||||
final closeBrackets = ']'.allMatches(content).length;
|
||||
if (openBrackets > closeBrackets) {
|
||||
content += ']' * (openBrackets - closeBrackets);
|
||||
}
|
||||
|
||||
final openParens = '('.allMatches(content).length;
|
||||
final closeParens = ')'.allMatches(content).length;
|
||||
if (openParens > closeParens) {
|
||||
content += ')' * (openParens - closeParens);
|
||||
}
|
||||
|
||||
return content;
|
||||
}
|
||||
|
||||
@override
|
||||
void didUpdateWidget(StreamingMarkdownWidget oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
|
||||
// Handle stream changes
|
||||
if (widget.contentStream != oldWidget.contentStream) {
|
||||
_streamSubscription?.cancel();
|
||||
if (widget.contentStream != null) {
|
||||
_streamSubscription = widget.contentStream!.listen(_handleChunk);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle static content changes
|
||||
if (widget.staticContent != oldWidget.staticContent) {
|
||||
setState(() {
|
||||
_renderedContent = widget.staticContent ?? '';
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isDark = Theme.of(context).brightness == Brightness.dark;
|
||||
final config = ConduitMarkdownConfig.getConfig(
|
||||
isDark: isDark,
|
||||
context: context,
|
||||
isStreaming: widget.isStreaming,
|
||||
);
|
||||
|
||||
if (_renderedContent.isEmpty) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
if (widget.isStreaming && _renderedContent.isNotEmpty) {
|
||||
// Use MarkdownBlock for streaming - it's optimized for live updates
|
||||
return Container(
|
||||
padding: widget.padding,
|
||||
child: MarkdownBlock(
|
||||
data: _renderedContent,
|
||||
config: config,
|
||||
selectable: true,
|
||||
),
|
||||
);
|
||||
} else {
|
||||
// Use MarkdownWidget for completed messages
|
||||
// This provides better interactivity and selection
|
||||
return MarkdownWidget(
|
||||
data: _renderedContent,
|
||||
config: config,
|
||||
selectable: true,
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
padding: widget.padding,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_debounceTimer?.cancel();
|
||||
_streamSubscription?.cancel();
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
/// Extension to provide easy access to streaming markdown
|
||||
extension StreamingMarkdownExtension on String {
|
||||
Widget toMarkdown({
|
||||
required BuildContext context,
|
||||
bool isStreaming = false,
|
||||
EdgeInsetsGeometry? padding,
|
||||
}) {
|
||||
return StreamingMarkdownWidget(
|
||||
staticContent: this,
|
||||
isStreaming: isStreaming,
|
||||
padding: padding,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Helper widget for displaying markdown with loading state
|
||||
class MarkdownWithLoading extends StatelessWidget {
|
||||
final String? content;
|
||||
final bool isLoading;
|
||||
final EdgeInsetsGeometry? padding;
|
||||
|
||||
const MarkdownWithLoading({
|
||||
super.key,
|
||||
this.content,
|
||||
required this.isLoading,
|
||||
this.padding,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (isLoading && (content == null || content!.isEmpty)) {
|
||||
return Container(
|
||||
padding: padding ?? const EdgeInsets.all(16),
|
||||
child: const Center(
|
||||
child: CircularProgressIndicator(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return StreamingMarkdownWidget(
|
||||
staticContent: content ?? '',
|
||||
isStreaming: isLoading,
|
||||
padding: padding,
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user