bvandeusen/FabledApp
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 32 Wiki Activity

feat(chat): render tool-call chips and live peek status in mobile bubbles

Browse Source 
The mobile app was receiving SSE status events but showing the peek text
only while the assistant bubble was empty — as soon as the first token
arrived, the status line was replaced by streaming content and any tool
calls fired mid-turn left no trace. Tool call SSE events were also being
dropped by the parser, and Message.fromJson never read the persisted
tool_calls array, so chips never rendered after reload either.

Parse tool_call SSE frames into a new ChatToolCall event, carry tool
calls on Message, and update the chat and briefing streaming loops to
append chips to the in-flight assistant message as they arrive. Rework
ChatMessageBubble to show a chip row + rolling peek status line above
any streamed text, matching the web ToolCallCard/status indicator
behaviour across chat, briefing, and briefing history surfaces.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
bvandeusen
2026-04-13 17:48:16 -04:00
parent 6771ec5e81
commit a3fe0b4b61
7 changed files with 297 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/widgets/chat_message_bubble.dart
+93 -32
View File
@@ -4,6 +4,7 @@ import 'package:flutter/material.dart';
import 'package:flutter_markdown_plus/flutter_markdown_plus.dart';
import '../data/models/message.dart';
import 'tool_call_chip.dart';
class ChatMessageBubble extends StatelessWidget {
final Message message;
@@ -19,6 +20,12 @@ class ChatMessageBubble extends StatelessWidget {
final isUser = message.role == MessageRole.user;
final scheme = Theme.of(context).colorScheme;
final isGenerating = message.status == 'generating';
final toolCalls = message.toolCalls ?? const [];
// An assistant bubble with no text, no tool calls, and still generating
// falls back to the spinner+status "waiting for the first token" view.
final showSpinnerOnly =
isGenerating && message.content.isEmpty && toolCalls.isEmpty;
return Align(
alignment: isUser ? Alignment.centerRight : Alignment.centerLeft,
@@ -29,7 +36,6 @@ class ChatMessageBubble extends StatelessWidget {
margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 4),
decoration: isUser
? BoxDecoration(
// Ghost style: transparent bg, thin border
color: Colors.transparent,
border: Border.all(
color: scheme.primary.withValues(alpha: 0.35),
@@ -43,7 +49,6 @@ class ChatMessageBubble extends StatelessWidget {
),
)
: BoxDecoration(
// Assistant: elevated surface + left accent border
color: scheme.surfaceContainerHighest,
border: Border(
left: BorderSide(color: scheme.primary, width: 2),
@@ -57,46 +62,102 @@ class ChatMessageBubble extends StatelessWidget {
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
child: isGenerating && message.content.isEmpty
? Row(
child: showSpinnerOnly
? _buildSpinner(scheme)
: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(
strokeWidth: 2,
color: scheme.onSurfaceVariant,
// Accumulated tool-call chips: visible both during
// streaming (fed live over SSE) and after reload (from
// the persisted message.tool_calls array).
if (toolCalls.isNotEmpty) ...[
Wrap(
spacing: 6,
runSpacing: 6,
children: [
for (final tc in toolCalls) ToolCallChip(toolCall: tc),
],
),
),
if (streamingStatus.isNotEmpty) ...[
const SizedBox(width: 8),
Flexible(
child: Text(
streamingStatus,
style: TextStyle(
fontSize: 12,
color: scheme.onSurfaceVariant,
fontStyle: FontStyle.italic,
const SizedBox(height: 6),
],
// Rolling status line — shows backend stage text
// ("Creating note", "Searching calendar") while the
// model is between tool rounds or just before the
// first token. Stays above any already-streamed text
// so the user can see what's happening mid-turn.
if (isGenerating && streamingStatus.isNotEmpty) ...[
Row(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
width: 12,
height: 12,
child: CircularProgressIndicator(
strokeWidth: 1.5,
color: scheme.onSurfaceVariant,
),
),
const SizedBox(width: 6),
Flexible(
child: Text(
streamingStatus,
style: TextStyle(
fontSize: 11,
color: scheme.onSurfaceVariant,
fontStyle: FontStyle.italic,
),
),
),
],
),
const SizedBox(height: 6),
],
if (message.content.isNotEmpty)
MarkdownBody(
data: message.content,
styleSheet: MarkdownStyleSheet(
p: TextStyle(
color: isUser
? scheme.onSurface.withValues(alpha: 0.75)
: scheme.onSurface,
fontSize: 14,
),
),
),
],
],
)
: MarkdownBody(
data: message.content.isEmpty ? '…' : message.content,
styleSheet: MarkdownStyleSheet(
p: TextStyle(
color: isUser
? scheme.onSurface.withValues(alpha: 0.75)
: scheme.onSurface,
fontSize: 14,
),
),
),
),
),
);
}
Widget _buildSpinner(ColorScheme scheme) {
return Row(
mainAxisSize: MainAxisSize.min,
children: [
SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(
strokeWidth: 2,
color: scheme.onSurfaceVariant,
),
),
if (streamingStatus.isNotEmpty) ...[
const SizedBox(width: 8),
Flexible(
child: Text(
streamingStatus,
style: TextStyle(
fontSize: 12,
color: scheme.onSurfaceVariant,
fontStyle: FontStyle.italic,
),
),
),
],
],
);
}
}
lib/widgets/tool_call_chip.dart
+109
View File
@@ -0,0 +1,109 @@
import 'package:flutter/material.dart';
/// Human-readable labels for each backend tool. Kept in sync with
/// `_TOOL_LABELS` in `fabledassistant/services/generation_task.py` so the
/// mobile chips use the same wording as the web ToolCallCard status pills.
const Map<String, String> _toolLabels = {
'create_note': 'Created note',
'update_note': 'Updated note',
'delete_note': 'Deleted note',
'create_task': 'Created task',
'update_task': 'Updated task',
'delete_task': 'Deleted task',
'read_note': 'Read note',
'list_notes': 'Listed notes',
'list_tasks': 'Searched tasks',
'search_notes': 'Searched notes',
'create_event': 'Created event',
'list_events': 'Searched calendar',
'search_events': 'Searched calendar',
'update_event': 'Updated event',
'delete_event': 'Removed event',
'list_calendars': 'Listed calendars',
'search_web': 'Searched the web',
'research_topic': 'Researched topic',
'search_images': 'Searched images',
'create_project': 'Created project',
'update_project': 'Updated project',
'list_projects': 'Listed projects',
'get_project': 'Read project',
'search_projects': 'Searched projects',
'create_milestone': 'Created milestone',
'update_milestone': 'Updated milestone',
'list_milestones': 'Listed milestones',
'set_rag_scope': 'Changed knowledge scope',
'calculate': 'Calculated',
'read_article': 'Read article',
'get_profile': 'Read profile',
'update_profile': 'Updated profile',
'update_person': 'Updated person',
'update_place': 'Updated place',
'add_task_log': 'Logged task progress',
};
IconData _iconFor(String fn) {
if (fn.contains('note')) return Icons.sticky_note_2_outlined;
if (fn.contains('task')) return Icons.check_circle_outline;
if (fn.contains('event') || fn.contains('calendar')) {
return Icons.event_outlined;
}
if (fn.contains('project')) return Icons.folder_outlined;
if (fn.contains('milestone')) return Icons.flag_outlined;
if (fn.contains('web') || fn.contains('research') || fn.contains('article')) {
return Icons.public;
}
if (fn.contains('image')) return Icons.image_outlined;
if (fn.contains('person') || fn.contains('profile')) {
return Icons.person_outline;
}
if (fn.contains('place')) return Icons.place_outlined;
if (fn.contains('rag') || fn.contains('scope')) return Icons.tune;
if (fn.contains('calculate')) return Icons.calculate_outlined;
return Icons.auto_awesome;
}
/// Small status pill rendered inside an assistant message bubble for each
/// tool invocation. Mirrors the web app's ToolCallCard header at a glance —
/// icon + label + success/error tint.
class ToolCallChip extends StatelessWidget {
final Map<String, dynamic> toolCall;
const ToolCallChip({super.key, required this.toolCall});
@override
Widget build(BuildContext context) {
final scheme = Theme.of(context).colorScheme;
final function = (toolCall['function'] as String?) ?? 'tool';
final status = (toolCall['status'] as String?) ?? 'success';
final isError = status == 'error';
final label = _toolLabels[function] ?? function;
final bg = isError
? scheme.errorContainer.withValues(alpha: 0.55)
: scheme.primary.withValues(alpha: 0.12);
final fg = isError ? scheme.onErrorContainer : scheme.primary;
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: bg,
borderRadius: BorderRadius.circular(10),
border: Border.all(color: fg.withValues(alpha: 0.35), width: 0.5),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(_iconFor(function), size: 13, color: fg),
const SizedBox(width: 5),
Text(
label,
style: TextStyle(
fontSize: 11,
color: fg,
fontWeight: FontWeight.w500,
),
),
],
),
);
}
}