feat(widget): Add citation badge for source references

This commit is contained in:
cogwheel0
2025-12-07 22:35:16 +05:30
parent ccde2e4a46
commit 6e4ee2acd3
5 changed files with 667 additions and 20 deletions

View File

@@ -1,5 +1,8 @@
import 'package:flutter/material.dart';
import '../../../core/models/chat_message.dart';
import '../../../core/utils/citation_parser.dart';
import 'citation_badge.dart';
import 'markdown_config.dart';
import 'markdown_preprocessor.dart';
@@ -16,6 +19,8 @@ class StreamingMarkdownWidget extends StatelessWidget {
required this.isStreaming,
this.onTapLink,
this.imageBuilderOverride,
this.sources,
this.onSourceTap,
});
final String content;
@@ -24,6 +29,13 @@ class StreamingMarkdownWidget extends StatelessWidget {
final Widget Function(Uri uri, String? title, String? alt)?
imageBuilderOverride;
/// Sources for inline citation badge rendering.
/// When provided, [1] patterns will be rendered as clickable badges.
final List<ChatSourceReference>? sources;
/// Callback when a source badge is tapped.
final void Function(int sourceIndex)? onSourceTap;
@override
Widget build(BuildContext context) {
if (content.trim().isEmpty) {
@@ -69,12 +81,7 @@ class StreamingMarkdownWidget extends StatelessWidget {
specialBlocks.sort((a, b) => a.start.compareTo(b.start));
Widget buildMarkdown(String data) {
return ConduitMarkdown.build(
context: context,
data: data,
onTapLink: onTapLink,
imageBuilderOverride: imageBuilderOverride,
);
return _buildMarkdownWithCitations(context, data);
}
Widget result;
@@ -126,6 +133,105 @@ class StreamingMarkdownWidget extends StatelessWidget {
return SelectionArea(child: result);
}
/// Builds markdown content with citation source references.
///
/// 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.
Widget _buildMarkdownWithCitations(BuildContext context, String data) {
// If no sources provided, render plain markdown
if (sources == null || sources!.isEmpty) {
return ConduitMarkdown.build(
context: context,
data: data,
onTapLink: onTapLink,
imageBuilderOverride: imageBuilderOverride,
);
}
// Check if content has citations
if (!CitationParser.hasCitations(data)) {
return ConduitMarkdown.build(
context: context,
data: data,
onTapLink: onTapLink,
imageBuilderOverride: imageBuilderOverride,
);
}
// Extract unique source IDs referenced in the content
final referencedIds = CitationParser.extractSourceIds(data);
if (referencedIds.isEmpty) {
return ConduitMarkdown.build(
context: context,
data: data,
onTapLink: onTapLink,
imageBuilderOverride: imageBuilderOverride,
);
}
// Render markdown content as-is (preserving all formatting)
// and add a source references footer
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
ConduitMarkdown.build(
context: context,
data: data,
onTapLink: onTapLink,
imageBuilderOverride: imageBuilderOverride,
),
_SourceReferencesFooter(
referencedIds: referencedIds,
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,
});
/// 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,
),
],
),
);
}
}
/// Types of special blocks that need custom rendering
@@ -151,11 +257,15 @@ extension StreamingMarkdownExtension on String {
required BuildContext context,
bool isStreaming = false,
MarkdownLinkTapCallback? onTapLink,
List<ChatSourceReference>? sources,
void Function(int sourceIndex)? onSourceTap,
}) {
return StreamingMarkdownWidget(
content: this,
isStreaming: isStreaming,
onTapLink: onTapLink,
sources: sources,
onSourceTap: onSourceTap,
);
}
}