refactor(chat): Replace StatusHistoryTimeline with StreamingStatusWidget
This commit is contained in:
cogwheel0
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
|
||||
|
||||
import '../../../core/models/chat_message.dart';
|
||||
import '../../../core/utils/citation_parser.dart';
|
||||
import '../../theme/theme_extensions.dart';
|
||||
import 'citation_badge.dart';
|
||||
import 'markdown_config.dart';
|
||||
import 'markdown_preprocessor.dart';
|
||||
@@ -134,11 +135,10 @@ class StreamingMarkdownWidget extends StatelessWidget {
|
||||
return SelectionArea(child: result);
|
||||
}
|
||||
|
||||
/// Builds markdown content with citation source references.
|
||||
/// Builds markdown content with inline citation badges.
|
||||
///
|
||||
/// Citations like [1], [2] are kept as text in the markdown to preserve
|
||||
/// inline formatting. A source reference footer is added when citations
|
||||
/// are detected, providing clickable access to sources.
|
||||
/// Citations like [1], [2] are rendered as clickable badges inline
|
||||
/// within the text, matching OpenWebUI's behavior.
|
||||
Widget _buildMarkdownWithCitations(BuildContext context, String data) {
|
||||
// If no sources provided, render plain markdown
|
||||
if (sources == null || sources!.isEmpty) {
|
||||
@@ -160,9 +160,43 @@ class StreamingMarkdownWidget extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
|
||||
// Extract unique source IDs referenced in the content
|
||||
final referencedIds = CitationParser.extractSourceIds(data);
|
||||
if (referencedIds.isEmpty) {
|
||||
// Render content with inline citation badges
|
||||
return _InlineCitationMarkdown(
|
||||
data: data,
|
||||
sources: sources!,
|
||||
onTapLink: onTapLink,
|
||||
onSourceTap: onSourceTap,
|
||||
imageBuilderOverride: imageBuilderOverride,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Widget that renders markdown with inline citation badges.
|
||||
///
|
||||
/// Parses the markdown content, identifies citation patterns, and renders
|
||||
/// them as clickable badges inline with the text.
|
||||
class _InlineCitationMarkdown extends StatelessWidget {
|
||||
const _InlineCitationMarkdown({
|
||||
required this.data,
|
||||
required this.sources,
|
||||
this.onTapLink,
|
||||
this.onSourceTap,
|
||||
this.imageBuilderOverride,
|
||||
});
|
||||
|
||||
final String data;
|
||||
final List<ChatSourceReference> sources;
|
||||
final MarkdownLinkTapCallback? onTapLink;
|
||||
final void Function(int sourceIndex)? onSourceTap;
|
||||
final Widget Function(Uri uri, String? title, String? alt)?
|
||||
imageBuilderOverride;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// Split content into lines/paragraphs for processing
|
||||
final segments = _parseContentWithCitations(data);
|
||||
|
||||
if (segments.isEmpty) {
|
||||
return ConduitMarkdown.build(
|
||||
context: context,
|
||||
data: data,
|
||||
@@ -171,67 +205,219 @@ class StreamingMarkdownWidget extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
|
||||
// Render markdown content as-is (preserving all formatting)
|
||||
// and add a source references footer
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// Build widgets for each segment
|
||||
final children = <Widget>[];
|
||||
final buffer = StringBuffer();
|
||||
|
||||
for (final segment in segments) {
|
||||
if (segment.hasCitations) {
|
||||
// Flush any accumulated non-citation content
|
||||
if (buffer.isNotEmpty) {
|
||||
children.add(
|
||||
ConduitMarkdown.build(
|
||||
context: context,
|
||||
data: buffer.toString(),
|
||||
onTapLink: onTapLink,
|
||||
imageBuilderOverride: imageBuilderOverride,
|
||||
),
|
||||
);
|
||||
buffer.clear();
|
||||
}
|
||||
|
||||
// Render this segment with inline citations
|
||||
children.add(_buildParagraphWithCitations(context, segment.text));
|
||||
} else {
|
||||
// Accumulate non-citation content
|
||||
if (buffer.isNotEmpty) {
|
||||
buffer.writeln();
|
||||
}
|
||||
buffer.write(segment.text);
|
||||
}
|
||||
}
|
||||
|
||||
// Flush remaining content
|
||||
if (buffer.isNotEmpty) {
|
||||
children.add(
|
||||
ConduitMarkdown.build(
|
||||
context: context,
|
||||
data: data,
|
||||
data: buffer.toString(),
|
||||
onTapLink: onTapLink,
|
||||
imageBuilderOverride: imageBuilderOverride,
|
||||
),
|
||||
_SourceReferencesFooter(
|
||||
referencedIds: referencedIds,
|
||||
sources: sources!,
|
||||
onSourceTap: onSourceTap,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
if (children.isEmpty) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
if (children.length == 1) {
|
||||
return children.first;
|
||||
}
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: children,
|
||||
);
|
||||
}
|
||||
|
||||
/// Parses content into segments, identifying which have citations.
|
||||
List<_ContentSegment> _parseContentWithCitations(String content) {
|
||||
final segments = <_ContentSegment>[];
|
||||
|
||||
// Split by double newlines (paragraphs) while preserving structure
|
||||
final paragraphs = content.split(RegExp(r'\n\n+'));
|
||||
|
||||
for (final paragraph in paragraphs) {
|
||||
if (paragraph.trim().isEmpty) continue;
|
||||
|
||||
final hasCitations = CitationParser.hasCitations(paragraph);
|
||||
segments.add(
|
||||
_ContentSegment(text: paragraph, hasCitations: hasCitations),
|
||||
);
|
||||
}
|
||||
|
||||
return segments;
|
||||
}
|
||||
|
||||
/// Builds a paragraph widget with inline citation badges.
|
||||
Widget _buildParagraphWithCitations(BuildContext context, String text) {
|
||||
final theme = context.conduitTheme;
|
||||
final segments = CitationParser.parse(text);
|
||||
|
||||
if (segments == null || segments.isEmpty) {
|
||||
return Text(text);
|
||||
}
|
||||
|
||||
final baseStyle = AppTypography.bodyMediumStyle.copyWith(
|
||||
color: theme.textPrimary,
|
||||
height: 1.45,
|
||||
);
|
||||
|
||||
final spans = <InlineSpan>[];
|
||||
|
||||
for (final segment in segments) {
|
||||
if (segment.isText && segment.text != null) {
|
||||
// Process text for basic markdown formatting
|
||||
spans.add(_buildTextSpan(segment.text!, baseStyle, theme));
|
||||
} else if (segment.isCitation && segment.citation != null) {
|
||||
final citation = segment.citation!;
|
||||
spans.add(
|
||||
WidgetSpan(
|
||||
alignment: PlaceholderAlignment.middle,
|
||||
child: _buildCitationBadge(context, citation.sourceIds),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return Text.rich(TextSpan(children: spans), style: baseStyle);
|
||||
}
|
||||
|
||||
/// Builds a text span with basic markdown formatting support.
|
||||
InlineSpan _buildTextSpan(
|
||||
String text,
|
||||
TextStyle baseStyle,
|
||||
ConduitThemeExtension theme,
|
||||
) {
|
||||
// Handle basic inline markdown: **bold**, *italic*, `code`
|
||||
final spans = <InlineSpan>[];
|
||||
|
||||
// Pattern for bold, italic, and code
|
||||
final pattern = RegExp(r'(\*\*(.+?)\*\*)|(\*(.+?)\*)|(`(.+?)`)');
|
||||
|
||||
var lastEnd = 0;
|
||||
for (final match in pattern.allMatches(text)) {
|
||||
// Add text before match
|
||||
if (match.start > lastEnd) {
|
||||
spans.add(
|
||||
TextSpan(
|
||||
text: text.substring(lastEnd, match.start),
|
||||
style: baseStyle,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
if (match.group(1) != null) {
|
||||
// Bold **text**
|
||||
spans.add(
|
||||
TextSpan(
|
||||
text: match.group(2),
|
||||
style: baseStyle.copyWith(fontWeight: FontWeight.bold),
|
||||
),
|
||||
);
|
||||
} else if (match.group(3) != null) {
|
||||
// Italic *text*
|
||||
spans.add(
|
||||
TextSpan(
|
||||
text: match.group(4),
|
||||
style: baseStyle.copyWith(fontStyle: FontStyle.italic),
|
||||
),
|
||||
);
|
||||
} else if (match.group(5) != null) {
|
||||
// Code `text`
|
||||
spans.add(
|
||||
TextSpan(
|
||||
text: match.group(6),
|
||||
style: baseStyle.copyWith(
|
||||
fontFamily: AppTypography.monospaceFontFamily,
|
||||
backgroundColor: theme.surfaceContainer.withValues(alpha: 0.3),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
lastEnd = match.end;
|
||||
}
|
||||
|
||||
// Add remaining text
|
||||
if (lastEnd < text.length) {
|
||||
spans.add(TextSpan(text: text.substring(lastEnd), style: baseStyle));
|
||||
}
|
||||
|
||||
if (spans.isEmpty) {
|
||||
return TextSpan(text: text, style: baseStyle);
|
||||
}
|
||||
|
||||
if (spans.length == 1) {
|
||||
return spans.first;
|
||||
}
|
||||
|
||||
return TextSpan(children: spans);
|
||||
}
|
||||
|
||||
/// Builds a citation badge widget.
|
||||
Widget _buildCitationBadge(BuildContext context, List<int> sourceIds) {
|
||||
if (sourceIds.isEmpty) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
// Convert to 0-based indices
|
||||
final indices = sourceIds.map((id) => id - 1).toList();
|
||||
|
||||
if (indices.length == 1) {
|
||||
return CitationBadge(
|
||||
sourceIndex: indices.first,
|
||||
sources: sources,
|
||||
onTap: onSourceTap != null ? () => onSourceTap!(indices.first) : null,
|
||||
);
|
||||
}
|
||||
|
||||
return CitationBadgeGroup(
|
||||
sourceIndices: indices,
|
||||
sources: sources,
|
||||
onSourceTap: onSourceTap,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Footer widget showing source references with clickable badges.
|
||||
class _SourceReferencesFooter extends StatelessWidget {
|
||||
const _SourceReferencesFooter({
|
||||
required this.referencedIds,
|
||||
required this.sources,
|
||||
this.onSourceTap,
|
||||
});
|
||||
/// A segment of content that may or may not contain citations.
|
||||
class _ContentSegment {
|
||||
final String text;
|
||||
final bool hasCitations;
|
||||
|
||||
/// 1-based source IDs that are referenced in the content.
|
||||
final List<int> referencedIds;
|
||||
|
||||
/// All available sources.
|
||||
final List<ChatSourceReference> sources;
|
||||
|
||||
/// Callback when a source is tapped.
|
||||
final void Function(int sourceIndex)? onSourceTap;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (referencedIds.isEmpty) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(top: 8),
|
||||
child: Wrap(
|
||||
spacing: 4,
|
||||
runSpacing: 4,
|
||||
children: [
|
||||
for (final id in referencedIds)
|
||||
CitationBadge(
|
||||
sourceIndex: id - 1, // Convert to 0-based
|
||||
sources: sources,
|
||||
onTap: onSourceTap != null ? () => onSourceTap!(id - 1) : null,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
const _ContentSegment({required this.text, required this.hasCitations});
|
||||
}
|
||||
|
||||
/// Types of special blocks that need custom rendering
|
||||
|
||||
Reference in New Issue
Block a user