mirror of
https://github.com/block/buzz.git
synced 2026-10-27 12:40:30 +00:00
bbcbd7ce13
## Summary Preview buzz-app's Tabler icon style in the mobile app, replacing app-drawn Lucide glyphs across channels, messages, activity, search, and settings. A shared `BuzzIcons` mapping uses the bundled Tabler 3.46.0 outline font, matching buzz-app's version, with its MIT license and source documented. Native UIKit controls retain SF Symbols. The former 300/500 navigation glyphs use Tabler's standard outline; existing selection colors and labels remain. ### Related issue No matching Tabler mobile migration issue or PR found. Related native iOS controls: #8055. ### Testing - Pre-push mobile analysis, formatting, file-size checks, and the full mobile test suite passed. - 194 focused widget tests passed, including channels, home, search, settings, and message content. - Light and dark community-settings renders inspected. - Signed iPhone Release build succeeded; installed and launched as Buzz Tabler on a physical iPhone. - Full `just ci` attempted; stopped during Rust clippy compilation because the Mac ran low on disk space. Full repository validation is not claimed. Signed-off-by: kenny lopez <klopez4212@gmail.com>
493 lines
16 KiB
Dart
493 lines
16 KiB
Dart
import 'dart:convert';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
|
import 'package:gpt_markdown/gpt_markdown.dart';
|
|
import 'package:buzz/shared/theme/buzz_icons.dart';
|
|
|
|
import '../../../shared/theme/theme.dart';
|
|
import 'observer_models.dart';
|
|
|
|
/// Renders a single [TranscriptItem] in the agent activity transcript.
|
|
class TranscriptItemWidget extends StatelessWidget {
|
|
final TranscriptItem item;
|
|
|
|
const TranscriptItemWidget({super.key, required this.item});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return switch (item) {
|
|
final MessageItem i => _MessageItemWidget(item: i),
|
|
final ThoughtItem i => _ThoughtItemWidget(item: i),
|
|
final LifecycleItem i => _LifecycleItemWidget(item: i),
|
|
final MetadataItem i => _MetadataItemWidget(item: i),
|
|
final ToolItem i => _ToolItemWidget(item: i),
|
|
};
|
|
}
|
|
}
|
|
|
|
class _MessageItemWidget extends StatelessWidget {
|
|
final MessageItem item;
|
|
|
|
const _MessageItemWidget({required this.item});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final isAssistant = item.role == 'assistant';
|
|
final badgeColor = isAssistant
|
|
? context.colors.primary
|
|
: context.colors.onSurfaceVariant;
|
|
final badgeLabel = isAssistant ? 'Assistant' : 'User';
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: Grid.half),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: Grid.xxs,
|
|
vertical: Grid.quarter,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: badgeColor.withValues(alpha: 0.12),
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Text(
|
|
badgeLabel,
|
|
style: context.textTheme.labelSmall?.copyWith(
|
|
color: badgeColor,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: Grid.half),
|
|
if (item.text.isNotEmpty)
|
|
GptMarkdown(
|
|
item.text,
|
|
style: context.textTheme.bodyMedium?.copyWith(
|
|
color: context.colors.onSurface,
|
|
),
|
|
// No link handler here, so an autolinked URL would draw as a
|
|
// link and do nothing when tapped. Transcript URLs stay text,
|
|
// as they were before gpt_markdown started autolinking.
|
|
autolink: false,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _ThoughtItemWidget extends HookWidget {
|
|
final ThoughtItem item;
|
|
|
|
const _ThoughtItemWidget({required this.item});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final expanded = useState(item.text.length <= 200);
|
|
|
|
useEffect(() {
|
|
expanded.value = item.text.length <= 200;
|
|
return null;
|
|
}, [item.id]);
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: Grid.half),
|
|
child: GestureDetector(
|
|
onTap: () => expanded.value = !expanded.value,
|
|
child: Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(Grid.xxs),
|
|
decoration: BoxDecoration(
|
|
color: context.colors.surfaceContainerHighest.withValues(
|
|
alpha: 0.5,
|
|
),
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Icon(
|
|
BuzzIcons.brain,
|
|
size: 14,
|
|
color: context.colors.onSurfaceVariant,
|
|
),
|
|
const SizedBox(width: Grid.half),
|
|
Expanded(
|
|
child: Text(
|
|
item.title,
|
|
style: context.textTheme.labelMedium?.copyWith(
|
|
color: context.colors.onSurfaceVariant,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
Icon(
|
|
expanded.value
|
|
? BuzzIcons.chevronUp
|
|
: BuzzIcons.chevronDown,
|
|
size: 14,
|
|
color: context.colors.onSurfaceVariant,
|
|
),
|
|
],
|
|
),
|
|
if (expanded.value && item.text.isNotEmpty) ...[
|
|
const SizedBox(height: Grid.half),
|
|
GptMarkdown(
|
|
item.text,
|
|
style: context.textTheme.bodySmall?.copyWith(
|
|
color: context.colors.onSurfaceVariant,
|
|
),
|
|
// As above: no link handler on this surface either.
|
|
autolink: false,
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _LifecycleItemWidget extends StatelessWidget {
|
|
final LifecycleItem item;
|
|
|
|
const _LifecycleItemWidget({required this.item});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: Grid.half),
|
|
child: Center(
|
|
child: Text(
|
|
'${item.title}${item.text.isNotEmpty ? ' \u2014 ${item.text}' : ''}',
|
|
style: context.textTheme.labelSmall?.copyWith(
|
|
color: context.colors.onSurfaceVariant,
|
|
),
|
|
textAlign: TextAlign.center,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _MetadataItemWidget extends HookWidget {
|
|
final MetadataItem item;
|
|
|
|
const _MetadataItemWidget({required this.item});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final expanded = useState(false);
|
|
|
|
useEffect(() {
|
|
expanded.value = false;
|
|
return null;
|
|
}, [item.id]);
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: Grid.half),
|
|
child: GestureDetector(
|
|
onTap: () => expanded.value = !expanded.value,
|
|
child: Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(Grid.xxs),
|
|
decoration: BoxDecoration(
|
|
color: context.colors.surfaceContainerHighest.withValues(
|
|
alpha: 0.3,
|
|
),
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Icon(
|
|
BuzzIcons.fileText,
|
|
size: 14,
|
|
color: context.colors.onSurfaceVariant,
|
|
),
|
|
const SizedBox(width: Grid.half),
|
|
Expanded(
|
|
child: Text(
|
|
'${item.title} (${item.sections.length} sections)',
|
|
style: context.textTheme.labelMedium?.copyWith(
|
|
color: context.colors.onSurfaceVariant,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
Icon(
|
|
expanded.value
|
|
? BuzzIcons.chevronUp
|
|
: BuzzIcons.chevronDown,
|
|
size: 14,
|
|
color: context.colors.onSurfaceVariant,
|
|
),
|
|
],
|
|
),
|
|
if (expanded.value)
|
|
for (final section in item.sections) ...[
|
|
const SizedBox(height: Grid.xxs),
|
|
Text(
|
|
section.title,
|
|
style: context.textTheme.labelSmall?.copyWith(
|
|
color: context.colors.onSurfaceVariant,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
if (section.body.isNotEmpty) ...[
|
|
const SizedBox(height: Grid.quarter),
|
|
Text(
|
|
section.body.length > 500
|
|
? '${section.body.substring(0, 500)}\u2026'
|
|
: section.body,
|
|
style: context.textTheme.bodySmall?.copyWith(
|
|
color: context.colors.onSurfaceVariant,
|
|
),
|
|
),
|
|
],
|
|
],
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _ToolItemWidget extends HookWidget {
|
|
final ToolItem item;
|
|
|
|
const _ToolItemWidget({required this.item});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final argsExpanded = useState(false);
|
|
final resultExpanded = useState(false);
|
|
|
|
useEffect(() {
|
|
argsExpanded.value = false;
|
|
resultExpanded.value = false;
|
|
return null;
|
|
}, [item.id]);
|
|
|
|
final (statusColor, statusLabel, statusIcon) = _toolStatusDisplay(
|
|
item.status,
|
|
item.isError,
|
|
context,
|
|
);
|
|
|
|
final displayName = _formatToolName(item.toolName);
|
|
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: Grid.half),
|
|
child: Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(Grid.xxs),
|
|
decoration: BoxDecoration(
|
|
color: context.colors.surfaceContainerHighest.withValues(alpha: 0.4),
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: item.isError
|
|
? Border.all(color: context.colors.error.withValues(alpha: 0.3))
|
|
: null,
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Header: tool name + status badge
|
|
Row(
|
|
children: [
|
|
Icon(BuzzIcons.wrench, size: 14, color: statusColor),
|
|
const SizedBox(width: Grid.half),
|
|
Expanded(
|
|
child: Text(
|
|
displayName,
|
|
style: context.textTheme.labelMedium?.copyWith(
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
),
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: Grid.xxs,
|
|
vertical: Grid.quarter,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: statusColor.withValues(alpha: 0.12),
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(statusIcon, size: 10, color: statusColor),
|
|
const SizedBox(width: Grid.quarter),
|
|
Text(
|
|
statusLabel,
|
|
style: context.textTheme.labelSmall?.copyWith(
|
|
color: statusColor,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
// Args section
|
|
if (item.args.isNotEmpty) ...[
|
|
const SizedBox(height: Grid.half),
|
|
GestureDetector(
|
|
onTap: () => argsExpanded.value = !argsExpanded.value,
|
|
child: Row(
|
|
children: [
|
|
Text(
|
|
'Arguments',
|
|
style: context.textTheme.labelSmall?.copyWith(
|
|
color: context.colors.onSurfaceVariant,
|
|
),
|
|
),
|
|
const SizedBox(width: Grid.half),
|
|
Icon(
|
|
argsExpanded.value
|
|
? BuzzIcons.chevronUp
|
|
: BuzzIcons.chevronDown,
|
|
size: 12,
|
|
color: context.colors.onSurfaceVariant,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
if (argsExpanded.value) ...[
|
|
const SizedBox(height: Grid.quarter),
|
|
_CodeBlock(text: _prettyJson(item.args)),
|
|
],
|
|
],
|
|
// Result section
|
|
if (item.result.isNotEmpty) ...[
|
|
const SizedBox(height: Grid.half),
|
|
GestureDetector(
|
|
onTap: () => resultExpanded.value = !resultExpanded.value,
|
|
child: Row(
|
|
children: [
|
|
Text(
|
|
'Result',
|
|
style: context.textTheme.labelSmall?.copyWith(
|
|
color: item.isError
|
|
? context.colors.error
|
|
: context.colors.onSurfaceVariant,
|
|
),
|
|
),
|
|
const SizedBox(width: Grid.half),
|
|
Icon(
|
|
resultExpanded.value
|
|
? BuzzIcons.chevronUp
|
|
: BuzzIcons.chevronDown,
|
|
size: 12,
|
|
color: item.isError
|
|
? context.colors.error
|
|
: context.colors.onSurfaceVariant,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
if (resultExpanded.value) ...[
|
|
const SizedBox(height: Grid.quarter),
|
|
_CodeBlock(
|
|
text: item.result.length > 2000
|
|
? '${item.result.substring(0, 2000)}\n\n\u2026 (truncated)'
|
|
: item.result,
|
|
isError: item.isError,
|
|
),
|
|
],
|
|
],
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
(Color, String, IconData) _toolStatusDisplay(
|
|
ToolStatus status,
|
|
bool isError,
|
|
BuildContext context,
|
|
) {
|
|
if (isError || status == ToolStatus.failed) {
|
|
return (context.colors.error, 'Error', BuzzIcons.circleX);
|
|
}
|
|
if (status == ToolStatus.completed) {
|
|
return (context.appColors.success, 'Done', BuzzIcons.circleCheck);
|
|
}
|
|
if (status == ToolStatus.pending) {
|
|
return (context.colors.onSurfaceVariant, 'Pending', BuzzIcons.circleDot);
|
|
}
|
|
return (context.appColors.warning, 'Running', BuzzIcons.clock3);
|
|
}
|
|
|
|
String _formatToolName(String toolName) {
|
|
return toolName
|
|
.split('_')
|
|
.map(
|
|
(part) =>
|
|
part.isEmpty ? '' : '${part[0].toUpperCase()}${part.substring(1)}',
|
|
)
|
|
.join(' ');
|
|
}
|
|
|
|
String _prettyJson(Map<String, dynamic> value) {
|
|
try {
|
|
return const JsonEncoder.withIndent(' ').convert(value);
|
|
} catch (_) {
|
|
return value.toString();
|
|
}
|
|
}
|
|
|
|
class _CodeBlock extends StatelessWidget {
|
|
final String text;
|
|
final bool isError;
|
|
|
|
const _CodeBlock({required this.text, this.isError = false});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(Grid.xxs),
|
|
decoration: BoxDecoration(
|
|
color: isError
|
|
? context.colors.error.withValues(alpha: 0.06)
|
|
: context.colors.surface,
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
child: SingleChildScrollView(
|
|
scrollDirection: Axis.horizontal,
|
|
child: Text(
|
|
text,
|
|
softWrap: false,
|
|
style: context.textTheme.bodySmall?.copyWith(
|
|
fontFamily: 'monospace',
|
|
fontSize: 11,
|
|
color: isError
|
|
? context.colors.error
|
|
: context.colors.onSurfaceVariant,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|