ars/iiEsaywebUIapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(chat): Simplify tool call tile with minimal design

Browse Source
This commit is contained in:
cogwheel0
2025-12-07 23:33:26 +05:30
parent e9de32fbec
commit 03c2b030e1
2 changed files with 413 additions and 631 deletions
Download Patch File Download Diff File Expand all files Collapse all files

357
lib/features/chat/widgets/assistant_message_widget.dart
View File

@@ -376,6 +376,7 @@ class _AssistantMessageWidgetState extends ConsumerState<AssistantMessageWidget>
// No streaming-specific markdown fixes needed here; handled by Markdown widget // No streaming-specific markdown fixes needed here; handled by Markdown widget
// Tool call tile - minimal design inspired by OpenWebUI
Widget _buildToolCallTile(ToolCallEntry tc) { Widget _buildToolCallTile(ToolCallEntry tc) {
final isExpanded = _expandedToolIds.contains(tc.id); final isExpanded = _expandedToolIds.contains(tc.id);
final theme = context.conduitTheme; final theme = context.conduitTheme;
@@ -394,7 +395,7 @@ class _AssistantMessageWidgetState extends ConsumerState<AssistantMessageWidget>
return Padding( return Padding(
padding: const EdgeInsets.only(bottom: Spacing.xs), padding: const EdgeInsets.only(bottom: Spacing.xs),
child: InkWell( child: GestureDetector(
onTap: () { onTap: () {
setState(() { setState(() {
if (isExpanded) { if (isExpanded) {
@@ -404,127 +405,111 @@ class _AssistantMessageWidgetState extends ConsumerState<AssistantMessageWidget>
} }
}); });
}, },
borderRadius: BorderRadius.circular(AppBorderRadius.small), behavior: HitTestBehavior.opaque,
child: Container( child: Column(
width: double.infinity, crossAxisAlignment: CrossAxisAlignment.start,
padding: const EdgeInsets.symmetric( mainAxisSize: MainAxisSize.min,
horizontal: Spacing.sm, children: [
vertical: Spacing.xs, // Minimal header - just text with chevron
), Row(
decoration: BoxDecoration( mainAxisSize: MainAxisSize.min,
color: theme.surfaceContainer.withValues(alpha: 0.3), crossAxisAlignment: CrossAxisAlignment.center,
borderRadius: BorderRadius.circular(AppBorderRadius.small), children: [
border: Border.all( Icon(
color: theme.dividerColor.withValues(alpha: 0.5), isExpanded
width: BorderWidth.thin, ? Icons.keyboard_arrow_up_rounded
), : Icons.keyboard_arrow_down_rounded,
), size: 14,
child: Column( color: theme.textSecondary,
crossAxisAlignment: CrossAxisAlignment.start, ),
children: [ const SizedBox(width: 2),
Row( Flexible(
mainAxisSize: MainAxisSize.min, child: Text(
children: [ tc.done ? 'Used ${tc.name}' : 'Running ${tc.name}…',
Icon( overflow: TextOverflow.ellipsis,
isExpanded style: TextStyle(
? Icons.expand_less_rounded fontSize: AppTypography.bodySmall,
: Icons.expand_more_rounded, color: theme.textSecondary,
size: 16, height: 1.3,
color: theme.textSecondary,
),
const SizedBox(width: Spacing.xs),
Icon(
tc.done
? Icons.build_circle_outlined
: Icons.play_circle_outline,
size: 14,
color: theme.buttonPrimary,
),
const SizedBox(width: Spacing.xs),
Flexible(
child: Text(
tc.done
? 'Tool Executed: ${tc.name}'
: 'Running tool: ${tc.name}…',
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: AppTypography.bodySmall,
color: theme.textSecondary,
fontWeight: FontWeight.w500,
),
), ),
), ),
],
),
AnimatedCrossFade(
firstChild: const SizedBox.shrink(),
secondChild: Container(
margin: const EdgeInsets.only(top: Spacing.sm),
padding: const EdgeInsets.all(Spacing.sm),
decoration: BoxDecoration(
color: theme.surfaceContainer.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(AppBorderRadius.small),
border: Border.all(
color: theme.dividerColor.withValues(alpha: 0.5),
width: BorderWidth.thin,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (tc.arguments != null) ...[
Text(
'Arguments',
style: TextStyle(
fontSize: AppTypography.bodySmall,
color: theme.textSecondary,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: Spacing.xxs),
SelectableText(
pretty(tc.arguments),
style: TextStyle(
fontSize: AppTypography.bodySmall,
color: theme.textSecondary,
fontFamily: AppTypography.monospaceFontFamily,
height: 1.35,
),
),
const SizedBox(height: Spacing.sm),
],
if (tc.result != null) ...[
Text(
'Result',
style: TextStyle(
fontSize: AppTypography.bodySmall,
color: theme.textSecondary,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: Spacing.xxs),
SelectableText(
pretty(tc.result),
style: TextStyle(
fontSize: AppTypography.bodySmall,
color: theme.textSecondary,
fontFamily: AppTypography.monospaceFontFamily,
height: 1.35,
),
),
],
],
),
), ),
crossFadeState: isExpanded ],
? CrossFadeState.showSecond ),
: CrossFadeState.showFirst,
duration: const Duration(milliseconds: 200), // Expanded content with left border accent
AnimatedCrossFade(
firstChild: const SizedBox.shrink(),
secondChild: Container(
margin: const EdgeInsets.only(top: Spacing.xs, left: 16),
padding: const EdgeInsets.symmetric(
horizontal: Spacing.sm,
vertical: Spacing.xs,
),
decoration: BoxDecoration(
color: theme.surfaceContainer.withValues(alpha: 0.3),
borderRadius: BorderRadius.circular(4),
border: Border(
left: BorderSide(
color: theme.dividerColor.withValues(alpha: 0.4),
width: 2,
),
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (tc.arguments != null) ...[
Text(
'Arguments',
style: TextStyle(
fontSize: AppTypography.labelSmall,
color: theme.textSecondary,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: 2),
SelectableText(
pretty(tc.arguments),
style: TextStyle(
fontSize: AppTypography.bodySmall,
color: theme.textSecondary,
fontFamily: AppTypography.monospaceFontFamily,
height: 1.35,
),
),
if (tc.result != null) const SizedBox(height: Spacing.xs),
],
if (tc.result != null) ...[
Text(
'Result',
style: TextStyle(
fontSize: AppTypography.labelSmall,
color: theme.textSecondary,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: 2),
SelectableText(
pretty(tc.result),
style: TextStyle(
fontSize: AppTypography.bodySmall,
color: theme.textSecondary,
fontFamily: AppTypography.monospaceFontFamily,
height: 1.35,
),
),
],
],
),
), ),
], crossFadeState: isExpanded
), ? CrossFadeState.showSecond
: CrossFadeState.showFirst,
duration: const Duration(milliseconds: 200),
),
],
), ),
), ),
); );
@@ -1307,7 +1292,7 @@ class _AssistantMessageWidgetState extends ConsumerState<AssistantMessageWidget>
return ChatActionButton(icon: icon, label: label, onTap: onTap); return ChatActionButton(icon: icon, label: label, onTap: onTap);
} }
// Reasoning tile rendered inline at the position it appears // Reasoning tile rendered inline - minimal design inspired by OpenWebUI
Widget _buildReasoningTile(ReasoningEntry rc, int index) { Widget _buildReasoningTile(ReasoningEntry rc, int index) {
final isExpanded = _expandedReasoning.contains(index); final isExpanded = _expandedReasoning.contains(index);
final theme = context.conduitTheme; final theme = context.conduitTheme;
@@ -1332,7 +1317,7 @@ class _AssistantMessageWidgetState extends ConsumerState<AssistantMessageWidget>
return Padding( return Padding(
padding: const EdgeInsets.only(bottom: Spacing.xs), padding: const EdgeInsets.only(bottom: Spacing.xs),
child: InkWell( child: GestureDetector(
onTap: () { onTap: () {
setState(() { setState(() {
if (isExpanded) { if (isExpanded) {
@@ -1342,85 +1327,73 @@ class _AssistantMessageWidgetState extends ConsumerState<AssistantMessageWidget>
} }
}); });
}, },
borderRadius: BorderRadius.circular(AppBorderRadius.small), behavior: HitTestBehavior.opaque,
child: Container( child: Column(
width: double.infinity, crossAxisAlignment: CrossAxisAlignment.start,
padding: const EdgeInsets.symmetric( mainAxisSize: MainAxisSize.min,
horizontal: Spacing.sm, children: [
vertical: Spacing.xs, // Minimal header - just text with chevron
), Row(
decoration: BoxDecoration( mainAxisSize: MainAxisSize.min,
color: theme.surfaceContainer.withValues(alpha: 0.3), crossAxisAlignment: CrossAxisAlignment.center,
borderRadius: BorderRadius.circular(AppBorderRadius.small), children: [
border: Border.all( Icon(
color: theme.dividerColor.withValues(alpha: 0.5), isExpanded
width: BorderWidth.thin, ? Icons.keyboard_arrow_up_rounded
), : Icons.keyboard_arrow_down_rounded,
), size: 14,
child: Column( color: theme.textSecondary,
crossAxisAlignment: CrossAxisAlignment.start, ),
children: [ const SizedBox(width: 2),
Row( Flexible(
mainAxisSize: MainAxisSize.min, child: Text(
children: [ headerText(),
Icon( overflow: TextOverflow.ellipsis,
isExpanded
? Icons.expand_less_rounded
: Icons.expand_more_rounded,
size: 16,
color: theme.textSecondary,
),
const SizedBox(width: Spacing.xs),
Icon(
Icons.psychology_outlined,
size: 14,
color: theme.buttonPrimary,
),
const SizedBox(width: Spacing.xs),
Flexible(
child: Text(
headerText(),
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: AppTypography.bodySmall,
color: theme.textSecondary,
fontWeight: FontWeight.w500,
),
),
),
],
),
AnimatedCrossFade(
firstChild: const SizedBox.shrink(),
secondChild: Container(
margin: const EdgeInsets.only(top: Spacing.sm),
padding: const EdgeInsets.all(Spacing.sm),
decoration: BoxDecoration(
color: theme.surfaceContainer.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(AppBorderRadius.small),
border: Border.all(
color: theme.dividerColor.withValues(alpha: 0.5),
width: BorderWidth.thin,
),
),
child: SelectableText(
rc.cleanedReasoning,
style: TextStyle( style: TextStyle(
fontSize: AppTypography.bodySmall, fontSize: AppTypography.bodySmall,
color: theme.textSecondary, color: theme.textSecondary,
fontFamily: AppTypography.monospaceFontFamily, height: 1.3,
height: 1.4,
), ),
), ),
), ),
crossFadeState: isExpanded ],
? CrossFadeState.showSecond ),
: CrossFadeState.showFirst,
duration: const Duration(milliseconds: 200), // Expanded content - subtle background only when shown
AnimatedCrossFade(
firstChild: const SizedBox.shrink(),
secondChild: Container(
margin: const EdgeInsets.only(top: Spacing.xs, left: 16),
padding: const EdgeInsets.symmetric(
horizontal: Spacing.sm,
vertical: Spacing.xs,
),
decoration: BoxDecoration(
color: theme.surfaceContainer.withValues(alpha: 0.3),
borderRadius: BorderRadius.circular(4),
border: Border(
left: BorderSide(
color: theme.dividerColor.withValues(alpha: 0.4),
width: 2,
),
),
),
child: SelectableText(
rc.cleanedReasoning,
style: TextStyle(
fontSize: AppTypography.bodySmall,
color: theme.textSecondary,
fontFamily: AppTypography.monospaceFontFamily,
height: 1.4,
),
),
), ),
], crossFadeState: isExpanded
), ? CrossFadeState.showSecond
: CrossFadeState.showFirst,
duration: const Duration(milliseconds: 200),
),
],
), ),
), ),
); );

687
lib/features/chat/widgets/streaming_status_widget.dart
View File

@@ -3,11 +3,12 @@ import 'package:flutter_animate/flutter_animate.dart';
import 'package:url_launcher/url_launcher_string.dart'; import 'package:url_launcher/url_launcher_string.dart';
import '../../../core/models/chat_message.dart'; import '../../../core/models/chat_message.dart';
import '../../../shared/theme/theme_extensions.dart';
import '../../../core/utils/debug_logger.dart'; import '../../../core/utils/debug_logger.dart';
import '../../../shared/theme/theme_extensions.dart';
/// A modern, mobile-first streaming status widget that displays /// A minimal, unobtrusive streaming status widget inspired by OpenWebUI.
/// live status updates during AI response generation. /// Displays live status updates during AI response generation without
/// drawing focus away from the actual response content.
class StreamingStatusWidget extends StatefulWidget { class StreamingStatusWidget extends StatefulWidget {
const StreamingStatusWidget({ const StreamingStatusWidget({
super.key, super.key,
@@ -64,53 +65,33 @@ class _StreamingStatusWidgetState extends State<StreamingStatusWidget>
final current = visible.last; final current = visible.last;
final hasPrevious = visible.length > 1; final hasPrevious = visible.length > 1;
final isPending = current.done != true && widget.isStreaming;
final theme = context.conduitTheme; return GestureDetector(
return InkWell(
onTap: hasPrevious ? () => setState(() => _expanded = !_expanded) : null, onTap: hasPrevious ? () => setState(() => _expanded = !_expanded) : null,
borderRadius: BorderRadius.circular(AppBorderRadius.small), behavior: HitTestBehavior.opaque,
child: Container( child: Padding(
width: double.infinity, padding: const EdgeInsets.only(bottom: Spacing.xs),
padding: const EdgeInsets.symmetric(
horizontal: Spacing.sm,
vertical: Spacing.xs,
),
decoration: BoxDecoration(
color: theme.surfaceContainer.withValues(alpha: 0.3),
borderRadius: BorderRadius.circular(AppBorderRadius.small),
border: Border.all(
color: theme.dividerColor.withValues(alpha: 0.5),
width: BorderWidth.thin,
),
),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [ children: [
// Current status header (always visible) // Current status (always visible) - minimal text only
_StatusRow( _MinimalStatusRow(
update: current, update: current,
isPending: current.done != true && widget.isStreaming, isPending: isPending,
shimmerController: _shimmerController, shimmerController: _shimmerController,
showExpandIcon: hasPrevious, hasPrevious: hasPrevious,
isExpanded: _expanded, isExpanded: _expanded,
), ),
// Expandable timeline with full history // Expanded history timeline
AnimatedCrossFade( if (_expanded && hasPrevious)
firstChild: const SizedBox.shrink(), _MinimalHistoryTimeline(
secondChild: hasPrevious updates: visible,
? _HistoryTimeline( shimmerController: _shimmerController,
updates: visible, isStreaming: widget.isStreaming,
shimmerController: _shimmerController, ),
isStreaming: widget.isStreaming,
)
: const SizedBox.shrink(),
crossFadeState: _expanded
? CrossFadeState.showSecond
: CrossFadeState.showFirst,
duration: const Duration(milliseconds: 200),
),
], ],
), ),
), ),
@@ -118,20 +99,20 @@ class _StreamingStatusWidgetState extends State<StreamingStatusWidget>
} }
} }
/// Status row with expand chevron (header when collapsed). /// Minimal status row - just text with optional chevron.
class _StatusRow extends StatelessWidget { class _MinimalStatusRow extends StatelessWidget {
const _StatusRow({ const _MinimalStatusRow({
required this.update, required this.update,
required this.isPending, required this.isPending,
required this.shimmerController, required this.shimmerController,
this.showExpandIcon = false, required this.hasPrevious,
this.isExpanded = false, required this.isExpanded,
}); });
final ChatStatusUpdate update; final ChatStatusUpdate update;
final bool isPending; final bool isPending;
final AnimationController shimmerController; final AnimationController shimmerController;
final bool showExpandIcon; final bool hasPrevious;
final bool isExpanded; final bool isExpanded;
@override @override
@@ -139,61 +120,82 @@ class _StatusRow extends StatelessWidget {
final theme = context.conduitTheme; final theme = context.conduitTheme;
final queries = _collectQueries(update); final queries = _collectQueries(update);
final links = _collectLinks(update); final links = _collectLinks(update);
final description = _resolveStatusDescription(update);
return Column( return Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [ children: [
// Header row // Main status text
Row( Row(
mainAxisSize: MainAxisSize.min, mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [ children: [
// Expand chevron if (hasPrevious) ...[
if (showExpandIcon)
Icon( Icon(
isExpanded isExpanded
? Icons.expand_less_rounded ? Icons.keyboard_arrow_up_rounded
: Icons.expand_more_rounded, : Icons.keyboard_arrow_down_rounded,
size: 16, size: 14,
color: theme.textSecondary, color: theme.textSecondary,
), ),
if (showExpandIcon) const SizedBox(width: Spacing.xs), const SizedBox(width: 2),
// Status icon ],
_StatusIcon( Flexible(child: _buildStatusText(context, description, isPending)),
action: update.action,
isPending: isPending,
shimmerController: shimmerController,
),
const SizedBox(width: Spacing.xs),
// Status text
Flexible(
child: _StatusText(
update: update,
isPending: isPending,
shimmerController: shimmerController,
),
),
], ],
), ),
// Query pills (only when collapsed) // Query pills (inline, compact)
if (!isExpanded && queries.isNotEmpty) ...[ if (queries.isNotEmpty && !isExpanded) ...[
const SizedBox(height: Spacing.xs), const SizedBox(height: Spacing.xxs),
_QueryChips(queries: queries), _MinimalQueryChips(queries: queries),
], ],
// Source links (only when collapsed) // Source links (inline, compact)
if (!isExpanded && links.isNotEmpty) ...[ if (links.isNotEmpty && !isExpanded) ...[
const SizedBox(height: Spacing.xs), const SizedBox(height: Spacing.xxs),
_SourceLinks(links: links), _MinimalSourceLinks(links: links),
], ],
], ],
); );
} }
Widget _buildStatusText(
BuildContext context,
String description,
bool isPending,
) {
final theme = context.conduitTheme;
final baseStyle = TextStyle(
fontSize: AppTypography.bodySmall,
color: theme.textSecondary,
height: 1.3,
);
if (!isPending) {
return Text(description, style: baseStyle, maxLines: 1);
}
// Subtle shimmer for pending state
return AnimatedBuilder(
animation: shimmerController,
builder: (context, child) {
final opacity = 0.6 + (0.4 * (1.0 - shimmerController.value));
return Text(
description,
style: baseStyle.copyWith(
color: theme.textSecondary.withValues(alpha: opacity),
),
maxLines: 1,
);
},
);
}
} }
/// Full history timeline matching the web client. /// Minimal timeline for expanded history - small dots like OpenWebUI.
class _HistoryTimeline extends StatelessWidget { class _MinimalHistoryTimeline extends StatelessWidget {
const _HistoryTimeline({ const _MinimalHistoryTimeline({
required this.updates, required this.updates,
required this.shimmerController, required this.shimmerController,
required this.isStreaming, required this.isStreaming,
@@ -205,213 +207,104 @@ class _HistoryTimeline extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final theme = context.conduitTheme;
return Padding( return Padding(
padding: const EdgeInsets.only(top: Spacing.sm), padding: const EdgeInsets.only(top: Spacing.xs, left: 6),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ mainAxisSize: MainAxisSize.min,
...updates.asMap().entries.map((entry) { children: updates.asMap().entries.map((entry) {
final index = entry.key; final index = entry.key;
final update = entry.value; final update = entry.value;
final isLast = index == updates.length - 1; final isLast = index == updates.length - 1;
final isPending = isLast && update.done != true && isStreaming; final isPending = isLast && update.done != true && isStreaming;
final description = _resolveStatusDescription(update);
final queries = _collectQueries(update);
final links = _collectLinks(update);
return _TimelineItem( return IntrinsicHeight(
update: update, child: Row(
isPending: isPending, crossAxisAlignment: CrossAxisAlignment.start,
shimmerController: shimmerController,
isLast: isLast,
);
}),
],
),
);
}
}
/// Single timeline item with dot and connecting line.
class _TimelineItem extends StatelessWidget {
const _TimelineItem({
required this.update,
required this.isPending,
required this.shimmerController,
required this.isLast,
});
final ChatStatusUpdate update;
final bool isPending;
final AnimationController shimmerController;
final bool isLast;
@override
Widget build(BuildContext context) {
final theme = context.conduitTheme;
final queries = _collectQueries(update);
final links = _collectLinks(update);
return IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// Timeline indicator (dot + line)
SizedBox(
width: 16,
child: Column(
children: [ children: [
// Dot // Timeline dot and line
Container( SizedBox(
margin: const EdgeInsets.only(top: Spacing.xs), width: 12,
width: 6, child: Column(
height: 6, children: [
decoration: BoxDecoration( Container(
shape: BoxShape.circle, margin: const EdgeInsets.only(top: 5),
color: isPending width: 5,
? theme.buttonPrimary height: 5,
: theme.textTertiary.withValues(alpha: 0.6), decoration: BoxDecoration(
shape: BoxShape.circle,
color: theme.textSecondary.withValues(alpha: 0.6),
),
),
if (!isLast)
Expanded(
child: Container(
width: 0.5,
margin: const EdgeInsets.symmetric(vertical: 2),
color: theme.dividerColor.withValues(alpha: 0.4),
),
),
],
), ),
), ),
// Connecting line (not on last item) const SizedBox(width: Spacing.xs),
if (!isLast) // Content
Expanded( Expanded(
child: Container( child: Padding(
width: 1, padding: const EdgeInsets.only(bottom: Spacing.xs),
margin: const EdgeInsets.symmetric(vertical: 2), child: Column(
color: theme.dividerColor.withValues(alpha: 0.5), crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
_buildStatusText(context, description, isPending),
if (queries.isNotEmpty) ...[
const SizedBox(height: 2),
_MinimalQueryChips(queries: queries),
],
if (links.isNotEmpty) ...[
const SizedBox(height: 2),
_MinimalSourceLinks(links: links),
],
],
), ),
), ),
),
], ],
), ),
), );
const SizedBox(width: Spacing.xs), }).toList(),
// Content
Expanded(
child: Padding(
padding: const EdgeInsets.only(bottom: Spacing.sm),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Status text
_StatusText(
update: update,
isPending: isPending,
shimmerController: shimmerController,
),
// Query chips
if (queries.isNotEmpty) ...[
const SizedBox(height: Spacing.xs),
_QueryChips(queries: queries),
],
// Source links
if (links.isNotEmpty) ...[
const SizedBox(height: Spacing.xs),
_SourceLinks(links: links),
],
],
),
),
),
],
), ),
); );
} }
}
/// Status icon matching the reasoning tile style. Widget _buildStatusText(
class _StatusIcon extends StatelessWidget { BuildContext context,
const _StatusIcon({ String description,
required this.action, bool isPending,
required this.isPending, ) {
required this.shimmerController,
});
final String? action;
final bool isPending;
final AnimationController shimmerController;
@override
Widget build(BuildContext context) {
final theme = context.conduitTheme; final theme = context.conduitTheme;
final iconData = _getIconForAction(action); final baseStyle = TextStyle(
final iconColor = theme.buttonPrimary; fontSize: AppTypography.bodySmall,
color: theme.textSecondary,
height: 1.3,
);
// Simple icon matching reasoning tile (14px, primary color)
if (!isPending) { if (!isPending) {
return Icon(iconData, size: 14, color: iconColor); return Text(description, style: baseStyle);
} }
// Subtle pulse animation for pending state
return AnimatedBuilder( return AnimatedBuilder(
animation: shimmerController, animation: shimmerController,
builder: (context, child) { builder: (context, child) {
final opacity = 0.6 + (0.4 * (1.0 - shimmerController.value)); final opacity = 0.6 + (0.4 * (1.0 - shimmerController.value));
return Icon(
iconData,
size: 14,
color: iconColor.withValues(alpha: opacity),
);
},
);
}
IconData _getIconForAction(String? action) {
switch (action) {
case 'web_search':
case 'web_search_queries_generated':
case 'queries_generated':
return Icons.search_rounded;
case 'knowledge_search':
return Icons.menu_book_rounded;
case 'sources_retrieved':
return Icons.source_rounded;
case 'generating':
return Icons.edit_note_rounded;
default:
return Icons.bolt_rounded;
}
}
}
/// Status text matching the reasoning tile style.
class _StatusText extends StatelessWidget {
const _StatusText({
required this.update,
required this.isPending,
required this.shimmerController,
});
final ChatStatusUpdate update;
final bool isPending;
final AnimationController shimmerController;
@override
Widget build(BuildContext context) {
final theme = context.conduitTheme;
final description = _resolveStatusDescription(update);
// Match reasoning tile text style
final textStyle = TextStyle(
fontSize: AppTypography.bodySmall,
color: theme.textSecondary,
fontWeight: FontWeight.w500,
);
if (!isPending) {
return Text(
description,
overflow: TextOverflow.ellipsis,
style: textStyle,
);
}
// Shimmer effect for pending state
return AnimatedBuilder(
animation: shimmerController,
builder: (context, child) {
final opacity = 0.5 + (0.5 * (1.0 - shimmerController.value));
return Text( return Text(
description, description,
overflow: TextOverflow.ellipsis, style: baseStyle.copyWith(
style: textStyle.copyWith(
color: theme.textSecondary.withValues(alpha: opacity), color: theme.textSecondary.withValues(alpha: opacity),
), ),
); );
@@ -420,9 +313,9 @@ class _StatusText extends StatelessWidget {
} }
} }
/// Horizontally scrollable query chips. /// Minimal query chips - smaller, less prominent.
class _QueryChips extends StatelessWidget { class _MinimalQueryChips extends StatelessWidget {
const _QueryChips({required this.queries}); const _MinimalQueryChips({required this.queries});
final List<String> queries; final List<String> queries;
@@ -430,69 +323,46 @@ class _QueryChips extends StatelessWidget {
Widget build(BuildContext context) { Widget build(BuildContext context) {
final theme = context.conduitTheme; final theme = context.conduitTheme;
return SizedBox( return Wrap(
height: 32, spacing: 4,
child: ListView.separated( runSpacing: 4,
scrollDirection: Axis.horizontal, children: queries.asMap().entries.map((entry) {
itemCount: queries.length, final index = entry.key;
separatorBuilder: (_, index) => const SizedBox(width: Spacing.xs), final query = entry.value;
itemBuilder: (context, index) { return GestureDetector(
final query = queries[index]; onTap: () => _launchSearch(query),
return Material( child: Container(
color: Colors.transparent, padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 3),
child: InkWell( decoration: BoxDecoration(
onTap: () => _launchSearch(query), color: theme.surfaceContainer.withValues(alpha: 0.6),
borderRadius: BorderRadius.circular(AppBorderRadius.pill), borderRadius: BorderRadius.circular(4),
child: Container( ),
padding: const EdgeInsets.symmetric( child: Row(
horizontal: Spacing.sm, mainAxisSize: MainAxisSize.min,
vertical: Spacing.xs, children: [
), Icon(
decoration: BoxDecoration( Icons.search_rounded,
color: theme.buttonPrimary.withValues(alpha: 0.08), size: 11,
borderRadius: BorderRadius.circular(AppBorderRadius.pill), color: theme.textSecondary,
border: Border.all( ),
color: theme.buttonPrimary.withValues(alpha: 0.2), const SizedBox(width: 3),
width: BorderWidth.thin, ConstrainedBox(
), constraints: const BoxConstraints(maxWidth: 150),
), child: Text(
child: Row( query,
mainAxisSize: MainAxisSize.min, style: TextStyle(
children: [ fontSize: AppTypography.labelSmall,
Icon( color: theme.textSecondary,
Icons.search_rounded,
size: 14,
color: theme.buttonPrimary,
),
const SizedBox(width: Spacing.xxs),
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 180),
child: Text(
query,
style: TextStyle(
fontSize: AppTypography.labelSmall,
fontWeight: FontWeight.w500,
color: theme.buttonPrimary,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
), ),
maxLines: 1,
overflow: TextOverflow.ellipsis,
), ),
), ),
) ],
.animate() ),
.fadeIn(duration: 200.ms, delay: (50 * index).ms) ).animate().fadeIn(duration: 150.ms, delay: (30 * index).ms),
.slideX( );
begin: 0.1, }).toList(),
end: 0,
duration: 200.ms,
delay: (50 * index).ms,
);
},
),
); );
} }
@@ -506,137 +376,83 @@ class _QueryChips extends StatelessWidget {
} }
} }
/// Source link chips with favicons. /// Minimal source links - smaller, less prominent.
class _SourceLinks extends StatelessWidget { class _MinimalSourceLinks extends StatelessWidget {
const _SourceLinks({required this.links}); const _MinimalSourceLinks({required this.links});
final List<_LinkData> links; final List<_LinkData> links;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final theme = context.conduitTheme; final theme = context.conduitTheme;
// Show max 4 links, with a "+N more" indicator
final displayLinks = links.take(4).toList(); final displayLinks = links.take(4).toList();
final remaining = links.length - 4; final remaining = links.length - 4;
return Wrap( return Wrap(
spacing: Spacing.xs, spacing: 4,
runSpacing: Spacing.xs, runSpacing: 4,
children: [ children: [
...displayLinks.asMap().entries.map((entry) { ...displayLinks.asMap().entries.map((entry) {
final index = entry.key; final index = entry.key;
final link = entry.value; final link = entry.value;
return _SourceLinkChip(link: link) final domain = _extractDomain(link.url);
.animate()
.fadeIn(duration: 200.ms, delay: (50 * index).ms) return GestureDetector(
.scale( onTap: () => _launchUrl(link.url),
begin: const Offset(0.9, 0.9), child: Container(
end: const Offset(1, 1), padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 3),
duration: 200.ms, decoration: BoxDecoration(
delay: (50 * index).ms, color: theme.surfaceContainer.withValues(alpha: 0.6),
); borderRadius: BorderRadius.circular(4),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(2),
child: Image.network(
'https://www.google.com/s2/favicons?sz=16&domain=$domain',
width: 12,
height: 12,
errorBuilder: (context, error, stackTrace) => Icon(
Icons.public_rounded,
size: 12,
color: theme.textSecondary,
),
),
),
const SizedBox(width: 4),
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 100),
child: Text(
link.title ?? domain,
style: TextStyle(
fontSize: AppTypography.labelSmall,
color: theme.textSecondary,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
).animate().fadeIn(duration: 150.ms, delay: (30 * index).ms),
);
}), }),
if (remaining > 0) if (remaining > 0)
Container( Text(
padding: const EdgeInsets.symmetric( '+$remaining',
horizontal: Spacing.sm, style: TextStyle(
vertical: Spacing.xs, fontSize: AppTypography.labelSmall,
), color: theme.textSecondary,
decoration: BoxDecoration(
color: theme.surfaceContainer.withValues(alpha: 0.5),
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
),
child: Text(
'+$remaining',
style: TextStyle(
fontSize: AppTypography.labelSmall,
color: theme.textSecondary,
fontWeight: FontWeight.w500,
),
), ),
).animate().fadeIn( ).animate().fadeIn(
duration: 200.ms, duration: 150.ms,
delay: (50 * displayLinks.length).ms, delay: (30 * displayLinks.length).ms,
), ),
], ],
); );
} }
}
/// Individual source link chip with favicon.
class _SourceLinkChip extends StatelessWidget {
const _SourceLinkChip({required this.link});
final _LinkData link;
@override
Widget build(BuildContext context) {
final theme = context.conduitTheme;
final domain = _extractDomain(link.url);
return Material(
color: Colors.transparent,
child: InkWell(
onTap: () => _launchUrl(link.url),
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.sm,
vertical: Spacing.xs,
),
decoration: BoxDecoration(
color: theme.surfaceContainer.withValues(alpha: 0.5),
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
border: Border.all(
color: theme.dividerColor.withValues(alpha: 0.3),
width: BorderWidth.thin,
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
// Favicon
ClipRRect(
borderRadius: BorderRadius.circular(4),
child: Image.network(
'https://www.google.com/s2/favicons?sz=32&domain=$domain',
width: 14,
height: 14,
errorBuilder: (context, error, stackTrace) => Icon(
Icons.public_rounded,
size: 14,
color: theme.textSecondary,
),
),
),
const SizedBox(width: Spacing.xs),
// Domain or title
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 120),
child: Text(
link.title ?? domain,
style: TextStyle(
fontSize: AppTypography.labelSmall,
color: theme.textSecondary,
fontWeight: FontWeight.w500,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
const SizedBox(width: Spacing.xxs),
Icon(
Icons.open_in_new_rounded,
size: 10,
color: theme.textTertiary,
),
],
),
),
),
);
}
void _launchUrl(String url) async { void _launchUrl(String url) async {
try { try {
@@ -681,7 +497,6 @@ List<String> _collectQueries(ChatStatusUpdate update) {
List<_LinkData> _collectLinks(ChatStatusUpdate update) { List<_LinkData> _collectLinks(ChatStatusUpdate update) {
final links = <_LinkData>[]; final links = <_LinkData>[];
// Collect from items
for (final item in update.items) { for (final item in update.items) {
final url = item.link; final url = item.link;
if (url != null && url.isNotEmpty) { if (url != null && url.isNotEmpty) {
@@ -689,7 +504,6 @@ List<_LinkData> _collectLinks(ChatStatusUpdate update) {
} }
} }
// Collect from urls
for (final url in update.urls) { for (final url in update.urls) {
if (url.isNotEmpty && !links.any((l) => l.url == url)) { if (url.isNotEmpty && !links.any((l) => l.url == url)) {
links.add(_LinkData(url: url)); links.add(_LinkData(url: url));
@@ -703,7 +517,6 @@ String _resolveStatusDescription(ChatStatusUpdate update) {
final description = update.description?.trim(); final description = update.description?.trim();
final action = update.action?.trim(); final action = update.action?.trim();
// Match OpenWebUI copy exactly
if (action == 'knowledge_search' && update.query?.isNotEmpty == true) { if (action == 'knowledge_search' && update.query?.isNotEmpty == true) {
return 'Searching Knowledge for "${update.query}"'; return 'Searching Knowledge for "${update.query}"';
} }
@@ -723,9 +536,7 @@ String _resolveStatusDescription(ChatStatusUpdate update) {
return 'Retrieved $count sources'; return 'Retrieved $count sources';
} }
// Handle description with placeholders
if (description != null && description.isNotEmpty) { if (description != null && description.isNotEmpty) {
// Handle known OpenWebUI descriptions
if (description == 'Generating search query') { if (description == 'Generating search query') {
return 'Generating search query'; return 'Generating search query';
} }
@@ -739,7 +550,6 @@ String _resolveStatusDescription(ChatStatusUpdate update) {
} }
if (action != null && action.isNotEmpty) { if (action != null && action.isNotEmpty) {
// Convert action to readable text
return action.replaceAll('_', ' ').capitalize(); return action.replaceAll('_', ' ').capitalize();
} }
@@ -773,4 +583,3 @@ extension _StringExtension on String {
return '${this[0].toUpperCase()}${substring(1)}'; return '${this[0].toUpperCase()}${substring(1)}';
} }
} }