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

chore: initial release

Browse Source
This commit is contained in:
cogwheel0
2025-08-10 01:20:45 +05:30
commit 758615813f
218 changed files with 67743 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

956
lib/features/chat/widgets/conversation_components.dart Normal file
View File

@@ -0,0 +1,956 @@
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'dart:io' show Platform;
import 'dart:ui' as ui;
import '../../../core/models/conversation.dart';
import '../../../core/providers/app_providers.dart';
import '../../../shared/theme/app_theme.dart';
import '../../../shared/theme/theme_extensions.dart';
import '../../../shared/utils/ui_utils.dart';
import '../../../shared/widgets/conduit_components.dart';
import '../providers/chat_providers.dart';
// Optimized delete conversation provider with error handling
final deleteConversationProvider = FutureProvider.family<void, String>((
ref,
conversationId,
) async {
final api = ref.read(apiServiceProvider);
if (api == null) throw Exception('No API service available');
await api.deleteConversation(conversationId);
ref.invalidate(conversationsProvider);
});
/// Optimized conversation tile with Conduit design aesthetics
class ModernConversationTile extends ConsumerStatefulWidget {
final Conversation conversation;
final bool isActive;
final Future<void> Function() onTap;
final VoidCallback onDelete;
const ModernConversationTile({
super.key,
required this.conversation,
required this.isActive,
required this.onTap,
required this.onDelete,
});
@override
ConsumerState<ModernConversationTile> createState() =>
_ModernConversationTileState();
}
class _ModernConversationTileState extends ConsumerState<ModernConversationTile>
with SingleTickerProviderStateMixin {
bool _isLoading = false;
late AnimationController _animationController;
late Animation<double> _scaleAnimation;
@override
void initState() {
super.initState();
_animationController = AnimationController(
duration: const Duration(milliseconds: 150),
vsync: this,
);
_scaleAnimation = Tween<double>(begin: 1.0, end: 0.95).animate(
CurvedAnimation(parent: _animationController, curve: Curves.easeInOut),
);
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _scaleAnimation,
builder: (context, child) {
return Transform.scale(
scale: _scaleAnimation.value,
child: Container(
margin: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.xs,
),
child: Dismissible(
key: Key(widget.conversation.id),
direction: DismissDirection.horizontal,
background: _buildSwipeBackground(DismissDirection.startToEnd),
secondaryBackground: _buildSwipeBackground(
DismissDirection.endToStart,
),
confirmDismiss: _handleDismiss,
child: _buildTileContent(),
),
),
);
},
);
}
Widget _buildSwipeBackground(DismissDirection direction) {
final isArchive = direction == DismissDirection.startToEnd;
return Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: isArchive
? [
AppTheme.brandPrimary.withValues(alpha: 0.1),
AppTheme.brandPrimary.withValues(alpha: 0.2),
]
: [
AppTheme.error.withValues(alpha: 0.1),
AppTheme.error.withValues(alpha: 0.2),
],
),
borderRadius: BorderRadius.circular(AppBorderRadius.lg),
),
alignment: isArchive ? Alignment.centerLeft : Alignment.centerRight,
padding: EdgeInsets.symmetric(horizontal: Spacing.lg),
child: Container(
width: Spacing.xxl,
height: Spacing.xxl,
decoration: BoxDecoration(
color: isArchive ? AppTheme.brandPrimary : AppTheme.error,
borderRadius: BorderRadius.circular(AppBorderRadius.md),
boxShadow: ConduitShadows.low,
),
child: Icon(
isArchive
? (Platform.isIOS ? CupertinoIcons.archivebox : Icons.archive)
: (Platform.isIOS ? CupertinoIcons.delete : Icons.delete),
color: AppTheme.neutral50,
size: AppTypography.headlineMedium,
),
),
);
}
Future<bool?> _handleDismiss(DismissDirection direction) async {
if (direction == DismissDirection.startToEnd) {
await _handleArchive();
} else {
widget.onDelete();
}
return false;
}
Widget _buildTileContent() {
return GestureDetector(
onTapDown: (_) => _animationController.forward(),
onTapUp: (_) => _animationController.reverse(),
onTapCancel: () => _animationController.reverse(),
onTap: _isLoading ? null : _handleTap,
child: Container(
padding: const EdgeInsets.all(Spacing.md),
decoration: BoxDecoration(
gradient: widget.isActive
? LinearGradient(
colors: [
AppTheme.brandPrimary.withValues(alpha: 0.15),
AppTheme.brandPrimary.withValues(alpha: 0.08),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
)
: LinearGradient(
colors: [
AppTheme.neutral700.withValues(alpha: 0.6),
AppTheme.neutral700.withValues(alpha: 0.3),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(AppBorderRadius.lg),
border: Border.all(
color: widget.isActive
? AppTheme.brandPrimary.withValues(alpha: 0.3)
: AppTheme.neutral600.withValues(alpha: 0.2),
width: widget.isActive ? BorderWidth.medium : BorderWidth.thin,
),
boxShadow: widget.isActive ? ConduitShadows.low : null,
),
child: Row(
children: [
_buildLeadingIcon(),
const SizedBox(width: Spacing.md),
Expanded(child: _buildContent()),
_buildTrailingActions(),
],
),
),
);
}
Widget _buildLeadingIcon() {
if (_isLoading) {
return SizedBox(
width: Spacing.xl,
height: Spacing.xl,
child: CircularProgressIndicator.adaptive(
strokeWidth: BorderWidth.thick,
valueColor: AlwaysStoppedAnimation<Color>(
widget.isActive ? AppTheme.brandPrimary : AppTheme.neutral300,
),
),
);
}
return Container(
width: Spacing.xl,
height: Spacing.xl,
decoration: BoxDecoration(
gradient: widget.isActive
? LinearGradient(
colors: [AppTheme.brandPrimary, AppTheme.brandPrimaryLight],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
)
: LinearGradient(
colors: [
AppTheme.neutral600.withValues(alpha: 0.8),
AppTheme.neutral500.withValues(alpha: 0.6),
],
),
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
),
child: Stack(
alignment: Alignment.center,
children: [
Icon(
Platform.isIOS
? CupertinoIcons.chat_bubble_2_fill
: Icons.chat_rounded,
color: AppTheme.neutral50,
size: Spacing.md,
),
if (widget.conversation.pinned)
Positioned(
top: Spacing.xxs,
right: Spacing.xxs,
child: Container(
width: Spacing.sm,
height: Spacing.sm,
decoration: const BoxDecoration(
color: AppTheme.warning,
shape: BoxShape.circle,
),
),
),
],
),
);
}
Widget _buildContent() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
widget.conversation.title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
color: widget.isActive ? AppTheme.neutral50 : AppTheme.neutral100,
fontWeight: FontWeight.w600,
fontSize: AppTypography.bodyLarge,
letterSpacing: -0.2,
),
),
const SizedBox(height: Spacing.xs),
Row(
children: [
Icon(
Platform.isIOS ? CupertinoIcons.time : Icons.access_time_rounded,
size: AppTypography.labelMedium,
color: AppTheme.neutral400,
),
const SizedBox(width: Spacing.xs),
Text(
_formatDate(widget.conversation.updatedAt),
style: const TextStyle(
color: AppTheme.neutral400,
fontSize: AppTypography.labelMedium,
fontWeight: FontWeight.w500,
),
),
if (widget.conversation.messages.isNotEmpty) ...[
Container(
margin: const EdgeInsets.symmetric(horizontal: Spacing.sm),
width: Spacing.xxs,
height: Spacing.xxs,
decoration: const BoxDecoration(
color: AppTheme.neutral400,
shape: BoxShape.circle,
),
),
Text(
'${widget.conversation.messages.length} messages',
style: const TextStyle(
color: AppTheme.neutral400,
fontSize: AppTypography.labelMedium,
fontWeight: FontWeight.w500,
),
),
],
],
),
if (widget.conversation.tags.isNotEmpty) ...[
const SizedBox(height: Spacing.sm),
_buildTags(),
],
],
);
}
Widget _buildTags() {
return Wrap(
spacing: Spacing.xs,
runSpacing: Spacing.xs,
children: widget.conversation.tags.take(3).map((tag) {
return Container(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.xs + Spacing.xxs,
vertical: Spacing.xxs,
),
decoration: BoxDecoration(
color: AppTheme.brandPrimary.withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(AppBorderRadius.xs),
border: Border.all(
color: AppTheme.brandPrimary.withValues(alpha: 0.2),
width: BorderWidth.thin,
),
),
child: Text(
tag,
style: const TextStyle(
color: AppTheme.brandPrimary,
fontSize: AppTypography.labelSmall,
fontWeight: FontWeight.w600,
),
),
);
}).toList(),
);
}
Widget _buildTrailingActions() {
return PopupMenuButton<String>(
icon: Container(
width: Spacing.xl,
height: Spacing.xl,
decoration: BoxDecoration(
color: AppTheme.neutral700.withValues(alpha: 0.6),
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
),
child: Icon(
Platform.isIOS ? CupertinoIcons.ellipsis : Icons.more_vert_rounded,
color: AppTheme.neutral300,
size: Spacing.md,
),
),
color: AppTheme.neutral800,
elevation: Elevation.high + Spacing.xs,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.md),
side: BorderSide(
color: AppTheme.neutral600.withValues(alpha: 0.3),
width: BorderWidth.thin,
),
),
onSelected: _handleMenuAction,
itemBuilder: (context) => _buildMenuItems(),
);
}
List<PopupMenuItem<String>> _buildMenuItems() {
return [
_buildMenuItem(
'pin',
widget.conversation.pinned
? (Platform.isIOS
? CupertinoIcons.pin_slash
: Icons.push_pin_outlined)
: (Platform.isIOS
? CupertinoIcons.pin_fill
: Icons.push_pin_rounded),
widget.conversation.pinned ? 'Unpin' : 'Pin',
),
_buildMenuItem(
'archive',
Platform.isIOS ? CupertinoIcons.archivebox : Icons.archive_rounded,
'Archive',
),
_buildMenuItem(
'share',
Platform.isIOS ? CupertinoIcons.share : Icons.share_rounded,
'Share',
),
_buildMenuItem(
'clone',
Platform.isIOS ? CupertinoIcons.doc_on_doc : Icons.content_copy_rounded,
'Clone',
),
PopupMenuItem<String>(
enabled: false,
child: Divider(color: AppTheme.neutral600, height: BorderWidth.regular),
),
_buildMenuItem(
'delete',
Platform.isIOS ? CupertinoIcons.delete : Icons.delete_rounded,
'Delete',
isDestructive: true,
),
];
}
PopupMenuItem<String> _buildMenuItem(
String value,
IconData icon,
String label, {
bool isDestructive = false,
}) {
return PopupMenuItem(
value: value,
child: Row(
children: [
Container(
width: Spacing.lg + Spacing.xs,
height: Spacing.lg + Spacing.xs,
decoration: BoxDecoration(
color: isDestructive
? AppTheme.error.withValues(alpha: 0.1)
: AppTheme.neutral700.withValues(alpha: 0.6),
borderRadius: BorderRadius.circular(AppBorderRadius.xs),
),
child: Icon(
icon,
size: Spacing.md,
color: isDestructive ? AppTheme.error : AppTheme.neutral200,
),
),
const SizedBox(width: Spacing.sm),
Text(
label,
style: TextStyle(
color: isDestructive ? AppTheme.error : AppTheme.neutral50,
fontWeight: FontWeight.w500,
),
),
],
),
);
}
Future<void> _handleTap() async {
setState(() => _isLoading = true);
try {
await widget.onTap();
} finally {
if (mounted) {
setState(() => _isLoading = false);
}
}
}
Future<void> _handleMenuAction(String action) async {
switch (action) {
case 'pin':
await _handlePin();
break;
case 'archive':
await _handleArchive();
break;
case 'share':
await _handleShare();
break;
case 'clone':
await _handleClone();
break;
case 'delete':
widget.onDelete();
break;
}
}
Future<void> _handlePin() async {
try {
await pinConversation(
ref,
widget.conversation.id,
!widget.conversation.pinned,
);
if (mounted) {
UiUtils.showMessage(
context,
widget.conversation.pinned
? 'Conversation unpinned'
: 'Conversation pinned',
);
}
} catch (e) {
if (mounted) {
UiUtils.showMessage(
context,
'Failed to ${widget.conversation.pinned ? 'unpin' : 'pin'} conversation',
);
}
}
}
Future<void> _handleArchive() async {
try {
await archiveConversation(ref, widget.conversation.id, true);
if (mounted) {
UiUtils.showMessage(context, 'Conversation archived');
}
} catch (e) {
if (mounted) {
UiUtils.showMessage(context, 'Failed to archive conversation');
}
}
}
Future<void> _handleShare() async {
try {
final shareId = await shareConversation(ref, widget.conversation.id);
if (mounted && shareId != null) {
_showShareDialog(shareId);
}
} catch (e) {
if (mounted) {
UiUtils.showMessage(context, 'Failed to share conversation');
}
}
}
Future<void> _handleClone() async {
try {
await cloneConversation(ref, widget.conversation.id);
if (mounted) {
Navigator.pop(context);
UiUtils.showMessage(context, 'Conversation cloned');
}
} catch (e) {
if (mounted) {
UiUtils.showMessage(context, 'Failed to clone conversation');
}
}
}
void _showShareDialog(String shareId) {
final shareUrl =
'${ref.read(apiServiceProvider)?.serverConfig.url}/s/$shareId';
showDialog(
context: context,
builder: (context) => AlertDialog(
backgroundColor: AppTheme.neutral800,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.lg),
side: BorderSide(
color: AppTheme.neutral600.withValues(alpha: 0.3),
width: BorderWidth.thin,
),
),
title: Row(
children: [
Container(
width: 32,
height: 32,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [AppTheme.brandPrimary, AppTheme.brandPrimaryLight],
),
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
),
child: const Icon(
Icons.share_rounded,
color: AppTheme.neutral50,
size: Spacing.md,
),
),
const SizedBox(width: Spacing.sm),
const Text(
'Share Conversation',
style: TextStyle(
color: AppTheme.neutral50,
fontWeight: FontWeight.w600,
),
),
],
),
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Anyone with this link can view the conversation:',
style: TextStyle(color: AppTheme.neutral300),
),
const SizedBox(height: Spacing.md),
Container(
padding: const EdgeInsets.all(Spacing.md),
decoration: BoxDecoration(
color: AppTheme.neutral700.withValues(alpha: 0.6),
borderRadius: BorderRadius.circular(AppBorderRadius.md),
border: Border.all(
color: AppTheme.neutral600.withValues(alpha: 0.3),
width: BorderWidth.thin,
),
),
child: SelectableText(
shareUrl,
style: const TextStyle(
fontFamily: 'monospace',
color: AppTheme.neutral50,
fontSize: AppTypography.labelMedium,
),
),
),
],
),
actions: [
ConduitButton(
text: 'Close',
isSecondary: true,
onPressed: () => Navigator.pop(context),
),
ConduitButton(
text: 'Copy Link',
onPressed: () async {
await Clipboard.setData(ClipboardData(text: shareUrl));
if (context.mounted) {
UiUtils.showMessage(context, 'Link copied to clipboard');
Navigator.pop(context);
}
},
),
],
),
);
}
String _formatDate(DateTime date) {
final now = DateTime.now();
// Convert to local timezone if needed
final localDate = date.toLocal();
final localNow = now.toLocal();
final difference = localNow.difference(localDate);
// Handle negative differences (future dates)
if (difference.isNegative) {
return 'Just now';
}
if (difference.inDays == 0) {
if (difference.inHours == 0) {
if (difference.inMinutes <= 1) {
return 'Just now';
}
return '${difference.inMinutes}m';
}
return '${difference.inHours}h';
} else if (difference.inDays == 1) {
return 'Yesterday';
} else if (difference.inDays < 7) {
return '${difference.inDays}d';
} else if (difference.inDays < 365) {
return '${localDate.month}/${localDate.day}';
} else {
return '${localDate.month}/${localDate.day}/${localDate.year}';
}
}
}
/// Optimized archived chats view with improved performance
class ModernArchivedChatsView extends ConsumerWidget {
final ScrollController scrollController;
const ModernArchivedChatsView({super.key, required this.scrollController});
@override
Widget build(BuildContext context, WidgetRef ref) {
final archivedConversations = ref.watch(archivedConversationsProvider);
return Container(
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [AppTheme.neutral800, AppTheme.neutral900],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
borderRadius: BorderRadius.only(
topLeft: ui.Radius.circular(AppBorderRadius.lg),
topRight: ui.Radius.circular(AppBorderRadius.lg),
),
border: Border.all(
color: AppTheme.neutral600.withValues(alpha: 0.2),
width: BorderWidth.thin,
),
),
child: Column(
children: [
_buildHandle(),
_buildHeader(context),
const Divider(color: AppTheme.neutral600, height: 1, thickness: 0.5),
Expanded(child: _buildContent(context, archivedConversations, ref)),
],
),
);
}
Widget _buildHandle() {
return Container(
margin: const EdgeInsets.symmetric(vertical: Spacing.sm),
width: Spacing.xxl,
height: Spacing.xs,
decoration: BoxDecoration(
color: AppTheme.neutral500,
borderRadius: BorderRadius.circular(AppBorderRadius.xs),
),
);
}
Widget _buildHeader(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(Spacing.lg),
child: Row(
children: [
Container(
width: Spacing.xxl,
height: Spacing.xxl,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [AppTheme.brandPrimary, AppTheme.brandPrimaryLight],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(AppBorderRadius.md),
),
child: const Icon(
Icons.archive_rounded,
color: AppTheme.neutral50,
size: AppTypography.headlineMedium,
),
),
const SizedBox(width: Spacing.md),
const Expanded(
child: Text(
'Archived Conversations',
style: TextStyle(
color: AppTheme.neutral50,
fontSize: AppTypography.headlineSmall,
fontWeight: FontWeight.w600,
letterSpacing: -0.3,
),
),
),
ConduitIconButton(
icon: Platform.isIOS ? CupertinoIcons.xmark : Icons.close_rounded,
onPressed: () => Navigator.pop(context),
),
],
),
);
}
Widget _buildContent(
BuildContext context,
List<Conversation> conversations,
WidgetRef ref,
) {
if (conversations.isEmpty) {
return _buildEmptyState();
}
return ListView.builder(
controller: scrollController,
padding: const EdgeInsets.all(Spacing.md),
itemCount: conversations.length,
itemBuilder: (context, index) {
final conversation = conversations[index];
return ModernArchivedConversationTile(
conversation: conversation,
onUnarchive: () => _handleUnarchive(ref, context, conversation.id),
);
},
);
}
Widget _buildEmptyState() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: Spacing.xxl + Spacing.xl,
height: Spacing.xxl + Spacing.xl,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
AppTheme.neutral600.withValues(alpha: 0.3),
AppTheme.neutral700.withValues(alpha: 0.1),
],
),
borderRadius: BorderRadius.circular(AppBorderRadius.round),
),
child: const Icon(
Icons.archive_rounded,
size: Spacing.xxl,
color: AppTheme.neutral400,
),
),
const SizedBox(height: Spacing.lg),
const Text(
'Nothing archived yet',
style: TextStyle(
color: AppTheme.neutral50,
fontSize: AppTypography.headlineSmall,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: Spacing.sm),
const Text(
'Conversations you archive will appear here',
style: TextStyle(
color: AppTheme.neutral400,
fontSize: AppTypography.labelLarge,
),
textAlign: TextAlign.center,
),
],
),
);
}
Future<void> _handleUnarchive(
WidgetRef ref,
BuildContext context,
String conversationId,
) async {
try {
await archiveConversation(ref, conversationId, false);
if (context.mounted) {
UiUtils.showMessage(context, 'Conversation unarchived');
}
} catch (e) {
if (context.mounted) {
UiUtils.showMessage(context, 'Failed to unarchive conversation');
}
}
}
}
/// Optimized archived conversation tile
class ModernArchivedConversationTile extends StatelessWidget {
final Conversation conversation;
final VoidCallback onUnarchive;
const ModernArchivedConversationTile({
super.key,
required this.conversation,
required this.onUnarchive,
});
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(bottom: Spacing.sm),
child: Container(
padding: const EdgeInsets.all(Spacing.md),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
AppTheme.neutral700.withValues(alpha: 0.4),
AppTheme.neutral700.withValues(alpha: 0.2),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: BorderRadius.circular(AppBorderRadius.lg),
border: Border.all(
color: AppTheme.neutral600.withValues(alpha: 0.2),
width: BorderWidth.thin,
),
),
child: Row(
children: [
Container(
width: 32,
height: 32,
decoration: BoxDecoration(
color: AppTheme.neutral600.withValues(alpha: 0.6),
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
),
child: const Icon(
Icons.archive_rounded,
color: AppTheme.neutral300,
size: 16,
),
),
const SizedBox(width: Spacing.md),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
conversation.title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
color: AppTheme.neutral50,
fontWeight: FontWeight.w600,
fontSize: AppTypography.bodyLarge,
),
),
const SizedBox(height: Spacing.xs),
Text(
_formatArchivedDate(conversation.updatedAt),
style: const TextStyle(
color: AppTheme.neutral400,
fontSize: AppTypography.labelMedium,
fontWeight: FontWeight.w500,
),
),
],
),
),
ConduitIconButton(
icon: Platform.isIOS
? CupertinoIcons.arrow_up_bin
: Icons.unarchive_rounded,
onPressed: onUnarchive,
tooltip: 'Unarchive',
),
],
),
),
);
}
String _formatArchivedDate(DateTime date) {
final now = DateTime.now();
final difference = now.difference(date);
if (difference.inDays == 0) {
return 'Today';
} else if (difference.inDays == 1) {
return 'Yesterday';
} else if (difference.inDays < 7) {
return '${difference.inDays} days ago';
} else {
return '${date.month}/${date.day}/${date.year}';
}
}
}

738
lib/features/chat/widgets/conversation_search_widget.dart Normal file
View File

@@ -0,0 +1,738 @@
import 'package:flutter/material.dart';
import '../../../shared/theme/app_theme.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'dart:io' show Platform;
import '../../../shared/theme/theme_extensions.dart';
import '../../../shared/widgets/loading_states.dart';
import '../../../shared/widgets/empty_states.dart';
import '../../../shared/utils/platform_utils.dart';
import '../services/conversation_search_service.dart';
import '../../../core/providers/app_providers.dart';
/// Advanced conversation search widget with filters and results
class ConversationSearchWidget extends ConsumerStatefulWidget {
final Function(String conversationId, String? messageId)? onResultTap;
final bool showFilters;
const ConversationSearchWidget({
super.key,
this.onResultTap,
this.showFilters = true,
});
@override
ConsumerState<ConversationSearchWidget> createState() =>
_ConversationSearchWidgetState();
}
class _ConversationSearchWidgetState
extends ConsumerState<ConversationSearchWidget> {
final TextEditingController _searchController = TextEditingController();
final FocusNode _searchFocus = FocusNode();
bool _isSearching = false;
bool _showFilters = false;
@override
void initState() {
super.initState();
_searchController.addListener(_onSearchChanged);
}
@override
void dispose() {
_searchController.removeListener(_onSearchChanged);
_searchController.dispose();
_searchFocus.dispose();
super.dispose();
}
void _onSearchChanged() {
final query = _searchController.text.trim();
ref.read(searchQueryProvider.notifier).state = query;
if (query.isNotEmpty) {
_performSearch(query);
} else {
ref.read(conversationSearchResultsProvider.notifier).state = null;
}
}
Future<void> _performSearch(String query) async {
if (_isSearching) return;
setState(() {
_isSearching = true;
});
try {
final searchService = ref.read(conversationSearchServiceProvider);
final conversations = ref
.read(conversationsProvider)
.when(
data: (data) => data,
loading: () => <dynamic>[],
error: (_, _) => <dynamic>[],
);
final options = ref.read(searchOptionsProvider);
final results = await searchService.searchConversations(
conversations: conversations.cast(),
query: query,
options: options,
);
ref.read(conversationSearchResultsProvider.notifier).state = results;
} catch (e) {
debugPrint('Search error: $e');
} finally {
if (mounted) {
setState(() {
_isSearching = false;
});
}
}
}
@override
Widget build(BuildContext context) {
final conduitTheme = context.conduitTheme;
final searchResults = ref.watch(conversationSearchResultsProvider);
return Column(
children: [
// Search header
Container(
padding: const EdgeInsets.all(Spacing.md),
decoration: BoxDecoration(
color: conduitTheme.cardBackground,
border: Border(
bottom: BorderSide(
color: conduitTheme.cardBorder,
width: BorderWidth.regular,
),
),
),
child: Column(
children: [
// Search input
Row(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
color: conduitTheme.inputBackground,
borderRadius: BorderRadius.circular(AppBorderRadius.md),
border: Border.all(
color: _searchFocus.hasFocus
? conduitTheme.inputBorderFocused
: conduitTheme.inputBorder,
width: BorderWidth.regular,
),
),
child: TextField(
controller: _searchController,
focusNode: _searchFocus,
decoration: InputDecoration(
hintText: 'Search conversations...',
hintStyle: TextStyle(
color: context.conduitTheme.inputPlaceholder,
fontSize: AppTypography.bodyLarge,
),
prefixIcon: Icon(
Platform.isIOS
? CupertinoIcons.search
: Icons.search,
color: context.conduitTheme.iconSecondary,
size: AppTypography.headlineMedium,
),
suffixIcon: _isSearching
? Padding(
padding: const EdgeInsets.all(Spacing.md),
child: ConduitLoading.inline(
size: Spacing.md,
),
)
: _searchController.text.isNotEmpty
? IconButton(
icon: Icon(
Platform.isIOS
? CupertinoIcons.clear
: Icons.clear,
color: context.conduitTheme.iconSecondary,
size: AppTypography.headlineMedium,
),
onPressed: () {
_searchController.clear();
_searchFocus.unfocus();
},
)
: null,
border: InputBorder.none,
contentPadding: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.xs,
),
),
style: TextStyle(
color: context.conduitTheme.inputText,
fontSize: AppTypography.bodyLarge,
),
onSubmitted: (_) => _searchFocus.unfocus(),
),
),
),
// Filter toggle
if (widget.showFilters) ...[
const SizedBox(width: Spacing.xs),
GestureDetector(
onTap: () {
PlatformUtils.lightHaptic();
setState(() {
_showFilters = !_showFilters;
});
},
child: Container(
width: Spacing.xxl + Spacing.xs,
height: Spacing.xxl + Spacing.xs,
decoration: BoxDecoration(
color: _showFilters
? AppTheme.neutral50.withValues(alpha: 0.2)
: Colors.transparent,
borderRadius: BorderRadius.circular(
AppBorderRadius.md,
),
border: Border.all(
color: _showFilters
? AppTheme.neutral50.withValues(alpha: 0.3)
: conduitTheme.inputBorder,
width: BorderWidth.regular,
),
),
child: Icon(
Platform.isIOS
? CupertinoIcons.slider_horizontal_3
: Icons.tune,
color: AppTheme.neutral50.withValues(alpha: 0.8),
size: AppTypography.headlineMedium,
),
),
),
],
],
),
// Search filters
if (_showFilters && widget.showFilters)
_buildSearchFilters(conduitTheme),
],
),
),
// Search results
Expanded(child: _buildSearchResults(conduitTheme, searchResults)),
],
);
}
Widget _buildSearchFilters(ConduitThemeExtension theme) {
final options = ref.watch(searchOptionsProvider);
return Container(
margin: const EdgeInsets.only(top: Spacing.md),
padding: const EdgeInsets.all(Spacing.md),
decoration: BoxDecoration(
color: AppTheme.neutral50.withValues(alpha: 0.05),
borderRadius: BorderRadius.circular(AppBorderRadius.md),
border: Border.all(color: theme.cardBorder, width: BorderWidth.regular),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Search in:',
style: theme.bodySmall?.copyWith(
fontWeight: FontWeight.w600,
color: AppTheme.neutral50.withValues(alpha: 0.8),
),
),
const SizedBox(height: Spacing.xs),
// Search scope toggles
Wrap(
spacing: Spacing.md,
runSpacing: Spacing.sm,
children: [
_buildFilterToggle(
'Titles',
options.searchTitles,
(value) =>
_updateSearchOptions(options.copyWith(searchTitles: value)),
),
_buildFilterToggle(
'Messages',
options.searchMessages,
(value) => _updateSearchOptions(
options.copyWith(searchMessages: value),
),
),
_buildFilterToggle(
'Tags',
options.searchTags,
(value) =>
_updateSearchOptions(options.copyWith(searchTags: value)),
),
],
),
const SizedBox(height: Spacing.md),
Text(
'Message type:',
style: theme.bodySmall?.copyWith(
fontWeight: FontWeight.w600,
color: AppTheme.neutral50.withValues(alpha: 0.8),
),
),
const SizedBox(height: Spacing.xs),
// Role filter
Wrap(
spacing: Spacing.md,
runSpacing: Spacing.sm,
children: [
_buildFilterChip(
'All',
options.roleFilter == null,
() => _updateSearchOptions(options.copyWith(roleFilter: null)),
),
_buildFilterChip(
'My messages',
options.roleFilter == 'user',
() =>
_updateSearchOptions(options.copyWith(roleFilter: 'user')),
),
_buildFilterChip(
'AI messages',
options.roleFilter == 'assistant',
() => _updateSearchOptions(
options.copyWith(roleFilter: 'assistant'),
),
),
],
),
],
),
).animate().slideY(
begin: -0.5,
end: 0,
duration: const Duration(milliseconds: 200),
curve: Curves.easeOut,
);
}
Widget _buildFilterToggle(
String label,
bool value,
Function(bool) onChanged,
) {
return GestureDetector(
onTap: () {
PlatformUtils.selectionHaptic();
onChanged(!value);
},
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: AppTypography.headlineMedium,
height: AppTypography.headlineMedium,
decoration: BoxDecoration(
color: value ? AppTheme.brandPrimary : Colors.transparent,
borderRadius: BorderRadius.circular(AppBorderRadius.xs),
border: Border.all(
color: value
? AppTheme.brandPrimary
: AppTheme.neutral50.withValues(alpha: 0.3),
width: BorderWidth.regular,
),
),
child: value
? const Icon(
Icons.check,
color: AppTheme.neutral50,
size: AppTypography.labelLarge,
)
: null,
),
const SizedBox(width: Spacing.sm),
Text(
label,
style: TextStyle(
color: AppTheme.neutral50.withValues(alpha: 0.8),
fontSize: AppTypography.labelLarge,
fontWeight: FontWeight.w500,
),
),
],
),
);
}
Widget _buildFilterChip(String label, bool isActive, VoidCallback onTap) {
return GestureDetector(
onTap: () {
PlatformUtils.selectionHaptic();
onTap();
},
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.xs,
vertical: Spacing.xs + Spacing.xxs,
),
decoration: BoxDecoration(
color: isActive
? AppTheme.brandPrimary.withValues(alpha: 0.2)
: Colors.transparent,
borderRadius: BorderRadius.circular(AppBorderRadius.lg),
border: Border.all(
color: isActive
? AppTheme.brandPrimary
: AppTheme.neutral50.withValues(alpha: 0.3),
width: BorderWidth.regular,
),
),
child: Text(
label,
style: TextStyle(
color: isActive
? AppTheme.brandPrimary
: AppTheme.neutral50.withValues(alpha: 0.8),
fontSize: AppTypography.labelMedium,
fontWeight: FontWeight.w500,
),
),
),
);
}
void _updateSearchOptions(ConversationSearchOptions newOptions) {
ref.read(searchOptionsProvider.notifier).state = newOptions;
// Re-search with new options if we have a query
final query = _searchController.text.trim();
if (query.isNotEmpty) {
_performSearch(query);
}
}
Widget _buildSearchResults(
ConduitThemeExtension theme,
ConversationSearchResults? results,
) {
if (_searchController.text.trim().isEmpty) {
return _buildSearchPrompt(theme);
}
if (results == null) {
return Center(child: ConduitLoading.primary());
}
if (results.isEmpty) {
return SearchEmptyState(
query: results.query,
onClearSearch: () {
_searchController.clear();
_searchFocus.unfocus();
},
);
}
return Column(
children: [
// Results header
Container(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.xs,
),
decoration: BoxDecoration(
color: AppTheme.neutral50.withValues(alpha: 0.05),
border: Border(
bottom: BorderSide(
color: theme.cardBorder,
width: BorderWidth.regular,
),
),
),
child: Row(
children: [
Text(
'${results.length} of ${results.totalMatches} results',
style: theme.bodySmall?.copyWith(
color: AppTheme.neutral50.withValues(alpha: 0.7),
),
),
const Spacer(),
Text(
'${results.searchDuration.inMilliseconds}ms',
style: theme.bodySmall?.copyWith(
color: AppTheme.neutral50.withValues(alpha: 0.5),
),
),
],
),
),
// Results list
Expanded(
child: ListView.builder(
itemCount: results.length,
itemBuilder: (context, index) {
final match = results.results[index];
return _buildSearchResultItem(theme, match, index);
},
),
),
],
);
}
Widget _buildSearchPrompt(ConduitThemeExtension theme) {
return ConduitEmptyState(
title: 'Search your conversations',
subtitle: 'Find messages, titles, and tags across all your conversations',
icon: Platform.isIOS ? CupertinoIcons.search : Icons.search,
);
}
Widget _buildSearchResultItem(
ConduitThemeExtension theme,
ConversationSearchMatch match,
int index,
) {
return GestureDetector(
onTap: () {
PlatformUtils.lightHaptic();
widget.onResultTap?.call(match.conversationId, match.messageId);
},
child: Container(
margin: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.xs,
),
padding: const EdgeInsets.all(Spacing.md),
decoration: BoxDecoration(
color: theme.cardBackground,
borderRadius: BorderRadius.circular(AppBorderRadius.md),
border: Border.all(
color: theme.cardBorder,
width: BorderWidth.regular,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Header with conversation title and match type
Row(
children: [
Expanded(
child: Text(
match.conversationTitle,
style: theme.headingSmall?.copyWith(
fontSize: AppTypography.bodyLarge,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
const SizedBox(width: Spacing.sm),
_buildMatchTypeBadge(match.matchType),
],
),
const SizedBox(height: Spacing.sm),
// Snippet with highlighted text
_buildHighlightedSnippet(theme, match.highlightedSnippet),
const SizedBox(height: Spacing.sm),
// Footer with metadata
Row(
children: [
if (match.messageRole != null) ...[
_buildRoleBadge(match.messageRole!),
const SizedBox(width: Spacing.sm),
],
Text(
_formatTimestamp(match.timestamp),
style: theme.caption,
),
const Spacer(),
Text(
'${match.relevanceScore.round()}% match',
style: theme.caption?.copyWith(
color: AppTheme.brandPrimary,
),
),
],
),
],
),
),
)
.animate(delay: Duration(milliseconds: index * 50))
.fadeIn(duration: const Duration(milliseconds: 200))
.slideX(begin: 0.3, end: 0);
}
Widget _buildMatchTypeBadge(SearchMatchType type) {
Color color;
String label;
switch (type) {
case SearchMatchType.title:
color = AppTheme.info;
label = 'Title';
break;
case SearchMatchType.message:
color = AppTheme.success;
label = 'Message';
break;
case SearchMatchType.tag:
color = AppTheme.warning;
label = 'Tag';
break;
}
return Container(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.sm,
vertical: Spacing.xxs,
),
decoration: BoxDecoration(
color: color.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(AppBorderRadius.md),
),
child: Text(
label,
style: TextStyle(
color: color,
fontSize: AppTypography.labelSmall,
fontWeight: FontWeight.w600,
),
),
);
}
Widget _buildRoleBadge(String role) {
Color color;
String label;
switch (role) {
case 'user':
color = AppTheme.brandPrimary;
label = 'You';
break;
case 'assistant':
color = AppTheme.success;
label = 'AI';
break;
case 'system':
color = AppTheme.warning;
label = 'System';
break;
default:
color = AppTheme.neutral400;
label = role;
}
return Container(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.xs + Spacing.xxs,
vertical: Spacing.xxs,
),
decoration: BoxDecoration(
color: color.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
),
child: Text(
label,
style: TextStyle(
color: color,
fontSize: AppTypography.labelSmall,
fontWeight: FontWeight.w500,
),
),
);
}
Widget _buildHighlightedSnippet(
ConduitThemeExtension theme,
String highlightedText,
) {
// Simple implementation - in a real app you'd want proper HTML parsing
final parts = highlightedText.split('<mark>');
final spans = <InlineSpan>[];
for (int i = 0; i < parts.length; i++) {
final part = parts[i];
if (i == 0) {
spans.add(TextSpan(text: part));
} else {
final markParts = part.split('</mark>');
if (markParts.length >= 2) {
// Highlighted part
spans.add(
TextSpan(
text: markParts[0],
style: TextStyle(
backgroundColor: AppTheme.brandPrimary.withValues(alpha: 0.3),
color: AppTheme.neutral50,
fontWeight: FontWeight.w600,
),
),
);
// Rest of the text
spans.add(TextSpan(text: markParts.sublist(1).join('</mark>')));
} else {
spans.add(TextSpan(text: part));
}
}
}
return RichText(
text: TextSpan(
style: theme.bodyMedium?.copyWith(
color: AppTheme.neutral50.withValues(alpha: 0.8),
height: 1.4,
),
children: spans,
),
maxLines: 3,
overflow: TextOverflow.ellipsis,
);
}
String _formatTimestamp(DateTime timestamp) {
final now = DateTime.now();
final diff = now.difference(timestamp);
if (diff.inDays > 7) {
return '${timestamp.day}/${timestamp.month}/${timestamp.year}';
} else if (diff.inDays > 0) {
return '${diff.inDays}d ago';
} else if (diff.inHours > 0) {
return '${diff.inHours}h ago';
} else if (diff.inMinutes > 0) {
return '${diff.inMinutes}m ago';
} else {
return 'Just now';
}
}
}

688
lib/features/chat/widgets/documentation_message_widget.dart Normal file
View File

@@ -0,0 +1,688 @@
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'dart:async';
import 'package:gpt_markdown/gpt_markdown.dart';
import 'dart:io' show Platform;
import '../../../shared/theme/theme_extensions.dart';
import '../../../core/utils/reasoning_parser.dart';
class DocumentationMessageWidget extends ConsumerStatefulWidget {
final dynamic message;
final bool isUser;
final bool isStreaming;
final String? modelName;
final VoidCallback? onCopy;
final VoidCallback? onEdit;
final VoidCallback? onRegenerate;
final VoidCallback? onLike;
final VoidCallback? onDislike;
const DocumentationMessageWidget({
super.key,
required this.message,
required this.isUser,
this.isStreaming = false,
this.modelName,
this.onCopy,
this.onEdit,
this.onRegenerate,
this.onLike,
this.onDislike,
});
@override
ConsumerState<DocumentationMessageWidget> createState() =>
_DocumentationMessageWidgetState();
}
class _DocumentationMessageWidgetState
extends ConsumerState<DocumentationMessageWidget>
with TickerProviderStateMixin {
bool _showActions = false;
bool _showReasoning = false;
late AnimationController _fadeController;
late AnimationController _slideController;
ReasoningContent? _reasoningContent;
String _renderedContent = '';
Timer? _throttleTimer;
String? _pendingContent;
@override
void initState() {
super.initState();
_renderedContent = widget.message.content ?? '';
_fadeController = AnimationController(
duration: const Duration(milliseconds: 200),
vsync: this,
);
_slideController = AnimationController(
duration: const Duration(milliseconds: 300),
vsync: this,
);
// Parse reasoning content if present
_updateReasoningContent();
}
@override
void didUpdateWidget(DocumentationMessageWidget oldWidget) {
super.didUpdateWidget(oldWidget);
// Re-parse reasoning content when message content changes
if (oldWidget.message.content != widget.message.content) {
// Throttle markdown re-rendering for smoother streaming
_scheduleRenderUpdate(widget.message.content ?? '');
_updateReasoningContent();
}
}
void _updateReasoningContent() {
if (!widget.isUser && widget.message.content != null) {
final newReasoningContent = ReasoningParser.parseReasoningContent(
widget.message.content!,
);
if (newReasoningContent != _reasoningContent) {
setState(() {
_reasoningContent = newReasoningContent;
});
}
}
}
void _scheduleRenderUpdate(String rawContent) {
final safe = _safeForStreaming(rawContent);
if (_throttleTimer != null && _throttleTimer!.isActive) {
_pendingContent = safe;
return;
}
if (mounted) {
setState(() => _renderedContent = safe);
} else {
_renderedContent = safe;
}
_throttleTimer = Timer(const Duration(milliseconds: 80), () {
if (!mounted) return;
if (_pendingContent != null) {
setState(() {
_renderedContent = _pendingContent!;
_pendingContent = null;
});
}
});
}
String _safeForStreaming(String content) {
if (content.isEmpty) return content;
// Auto-close an unbalanced triple backtick fence during streaming so markdown stays valid
final fenceCount = '```'.allMatches(content).length;
if (fenceCount.isOdd) {
return '$content\n```';
}
return content;
}
@override
void dispose() {
_fadeController.dispose();
_slideController.dispose();
super.dispose();
}
void _toggleActions() {
setState(() {
_showActions = !_showActions;
});
if (_showActions) {
_fadeController.forward();
_slideController.forward();
} else {
_fadeController.reverse();
_slideController.reverse();
}
}
@override
Widget build(BuildContext context) {
if (widget.isUser) {
return _buildUserMessage();
} else {
return _buildDocumentationMessage();
}
}
Widget _buildUserMessage() {
return Container(
width: double.infinity,
margin: const EdgeInsets.only(bottom: 16, left: 50, right: 12),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
child: GestureDetector(
onLongPress: () => _toggleActions(),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 16,
vertical: 12,
),
decoration: BoxDecoration(
color: context.conduitTheme.chatBubbleUser,
borderRadius: BorderRadius.circular(AppBorderRadius.lg),
border: Border.all(
color: context.conduitTheme.chatBubbleUserBorder,
width: BorderWidth.regular,
),
),
child: Text(
widget.message.content,
style: TextStyle(
color: context.conduitTheme.chatBubbleUserText,
fontSize: AppTypography.bodyLarge,
height: 1.5,
letterSpacing: 0.1,
),
),
),
),
),
],
),
)
.animate()
.fadeIn(duration: const Duration(milliseconds: 400))
.slideX(
begin: 0.2,
end: 0,
duration: const Duration(milliseconds: 400),
curve: Curves.easeOutCubic,
);
}
Widget _buildDocumentationMessage() {
return Container(
width: double.infinity,
margin: const EdgeInsets.only(bottom: 24, left: 12, right: 12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Simplified AI Name and Avatar
Padding(
padding: const EdgeInsets.only(bottom: 12),
child: Row(
children: [
Container(
width: 20,
height: 20,
decoration: BoxDecoration(
color: context.conduitTheme.buttonPrimary,
borderRadius: BorderRadius.circular(
AppBorderRadius.small,
),
),
child: Icon(
Icons.auto_awesome,
color: context.conduitTheme.buttonPrimaryText,
size: 12,
),
),
const SizedBox(width: Spacing.xs),
Text(
widget.modelName ?? 'Assistant',
style: TextStyle(
color: context.conduitTheme.textSecondary,
fontSize: AppTypography.bodySmall,
fontWeight: FontWeight.w500,
letterSpacing: 0.1,
),
),
],
),
),
// Reasoning Section (if present)
if (_reasoningContent != null) ...[
InkWell(
onTap: () => setState(() => _showReasoning = !_showReasoning),
borderRadius: BorderRadius.circular(AppBorderRadius.md),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.sm,
vertical: Spacing.xs,
),
decoration: BoxDecoration(
color: context.conduitTheme.surfaceContainer.withValues(
alpha: 0.5,
),
borderRadius: BorderRadius.circular(AppBorderRadius.md),
border: Border.all(
color: context.conduitTheme.dividerColor,
width: BorderWidth.thin,
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
_showReasoning
? Icons.expand_less_rounded
: Icons.expand_more_rounded,
size: 16,
color: context.conduitTheme.textSecondary,
),
const SizedBox(width: Spacing.xs),
Icon(
Icons.psychology_outlined,
size: 14,
color: context.conduitTheme.buttonPrimary,
),
const SizedBox(width: Spacing.xs),
Text(
_reasoningContent!.summary.isNotEmpty
? _reasoningContent!.summary
: 'Thought for ${_reasoningContent!.formattedDuration}',
style: TextStyle(
fontSize: AppTypography.bodySmall,
color: context.conduitTheme.textSecondary,
fontWeight: FontWeight.w500,
),
),
],
),
),
),
// Expandable reasoning content
AnimatedCrossFade(
firstChild: const SizedBox.shrink(),
secondChild: Container(
margin: const EdgeInsets.only(top: Spacing.sm),
padding: const EdgeInsets.all(Spacing.sm),
decoration: BoxDecoration(
color: context.conduitTheme.surfaceContainer.withValues(
alpha: 0.3,
),
borderRadius: BorderRadius.circular(AppBorderRadius.md),
border: Border.all(
color: context.conduitTheme.dividerColor,
width: BorderWidth.thin,
),
),
child: SelectableText(
_reasoningContent!.cleanedReasoning,
style: TextStyle(
fontSize: AppTypography.bodySmall,
color: context.conduitTheme.textSecondary,
fontFamily: 'monospace',
height: 1.4,
),
),
),
crossFadeState: _showReasoning
? CrossFadeState.showSecond
: CrossFadeState.showFirst,
duration: const Duration(milliseconds: 200),
),
const SizedBox(height: Spacing.md),
],
// Documentation-style content without heavy bubble; premium markdown
GestureDetector(
onLongPress: () => _toggleActions(),
child: SizedBox(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (widget.isStreaming &&
(widget.message.content.trim().isEmpty ||
widget.message.content == '[TYPING_INDICATOR]'))
_buildTypingIndicator()
else if (widget.isStreaming &&
widget.message.content.isNotEmpty &&
widget.message.content != '[TYPING_INDICATOR]')
// While streaming, render markdown with throttling and safety fixes
_buildEnhancedMarkdownContent(_renderedContent)
else
// After streaming finishes (or static content), render full markdown
_buildEnhancedMarkdownContent(
_reasoningContent?.mainContent ??
widget.message.content,
),
// Action buttons - inline and minimal
if (_showActions) ...[
const SizedBox(height: Spacing.md),
_buildActionButtons(),
],
],
),
),
),
],
),
)
.animate()
.fadeIn(duration: const Duration(milliseconds: 300))
.slideY(
begin: 0.1,
end: 0,
duration: const Duration(milliseconds: 300),
curve: Curves.easeOutCubic,
);
}
Widget _buildEnhancedMarkdownContent(String content) {
if (content.trim().isEmpty) {
return const SizedBox.shrink();
}
final codeFence = RegExp(
r"```([\w\-\+\.#]*)\n([\s\S]*?)```",
multiLine: true,
);
final widgets = <Widget>[];
int lastIndex = 0;
for (final match in codeFence.allMatches(content)) {
if (match.start > lastIndex) {
final textSegment = content.substring(lastIndex, match.start);
widgets.add(
GptMarkdown(
textSegment,
style: TextStyle(
color: context.conduitTheme.textPrimary,
fontSize: AppTypography.bodyLarge,
height: 1.6,
letterSpacing: 0.1,
),
),
);
}
final language = match.group(1)?.trim().isEmpty == true
? null
: match.group(1)!.trim();
final code = match.group(2) ?? '';
widgets.add(_buildCodeBlock(code, language));
lastIndex = match.end;
}
if (lastIndex < content.length) {
final tail = content.substring(lastIndex);
widgets.add(
GptMarkdown(
tail,
style: TextStyle(
color: context.conduitTheme.textPrimary,
fontSize: AppTypography.bodyLarge,
height: 1.6,
letterSpacing: 0.1,
),
),
);
}
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: widgets
.map(
(w) => Padding(
padding: const EdgeInsets.only(bottom: Spacing.xs),
child: w,
),
)
.toList(),
);
}
Widget _buildCodeBlock(String code, String? language) {
return Container(
decoration: BoxDecoration(
color: context.conduitTheme.surfaceBackground.withValues(alpha: 0.06),
borderRadius: BorderRadius.circular(AppBorderRadius.md),
border: Border.all(
color: context.conduitTheme.dividerColor.withValues(alpha: 0.7),
width: BorderWidth.thin,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.sm,
vertical: Spacing.xs,
),
child: Row(
children: [
Icon(
Platform.isIOS
? CupertinoIcons.chevron_left_slash_chevron_right
: Icons.code,
size: 14,
color: context.conduitTheme.iconSecondary,
),
const SizedBox(width: Spacing.xs),
Expanded(
child: Text(
language?.toUpperCase() ?? 'CODE',
style: TextStyle(
fontSize: AppTypography.labelSmall,
color: context.conduitTheme.textSecondary,
fontWeight: FontWeight.w600,
letterSpacing: 0.5,
),
),
),
GestureDetector(
onTap: () => _copyToClipboard(code),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.xs,
vertical: Spacing.xxs,
),
decoration: BoxDecoration(
color: context.conduitTheme.surfaceBackground.withValues(
alpha: 0.2,
),
borderRadius: BorderRadius.circular(AppBorderRadius.xs),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Platform.isIOS
? CupertinoIcons.doc_on_clipboard
: Icons.copy,
size: 14,
color: context.conduitTheme.iconSecondary,
),
const SizedBox(width: Spacing.xs),
Text(
'Copy',
style: TextStyle(
fontSize: AppTypography.labelSmall,
color: context.conduitTheme.textSecondary,
fontWeight: FontWeight.w500,
),
),
],
),
),
),
],
),
),
Container(
padding: const EdgeInsets.all(Spacing.sm),
decoration: BoxDecoration(
borderRadius: const BorderRadius.vertical(
bottom: Radius.circular(AppBorderRadius.md),
),
),
child: SelectableText(
code.trimRight(),
style: TextStyle(
color: context.conduitTheme.textSecondary,
fontFamily: AppTypography.monospaceFontFamily,
fontSize: AppTypography.bodySmall,
height: 1.5,
),
),
),
],
),
);
}
void _copyToClipboard(String text) {
Clipboard.setData(ClipboardData(text: text));
if (mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: const Text('Code copied'),
backgroundColor: context.conduitTheme.buttonPrimary,
),
);
}
}
// Removed lightweight streaming text; we now stream markdown with throttling
Widget _buildTypingIndicator() {
return Consumer(
builder: (context, ref, child) {
const statusText = 'Thinking about your question...';
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
statusText,
style: TextStyle(
color: context.conduitTheme.textSecondary.withValues(
alpha: 0.7,
),
fontSize: AppTypography.bodyMedium,
fontStyle: FontStyle.italic,
),
),
const SizedBox(height: Spacing.xs),
Row(
children: [
_buildTypingDot(0),
const SizedBox(width: Spacing.xs),
_buildTypingDot(200),
const SizedBox(width: Spacing.xs),
_buildTypingDot(400),
],
),
],
);
},
);
}
Widget _buildTypingDot(int delay) {
return Container(
width: 8,
height: 8,
decoration: BoxDecoration(
color: context.conduitTheme.textSecondary.withValues(alpha: 0.6),
borderRadius: BorderRadius.circular(AppBorderRadius.xs),
),
)
.animate(onPlay: (controller) => controller.repeat())
.scale(
duration: const Duration(milliseconds: 1000),
begin: const Offset(1, 1),
end: const Offset(1.3, 1.3),
)
.then(delay: Duration(milliseconds: delay))
.scale(
duration: const Duration(milliseconds: 1000),
begin: const Offset(1.3, 1.3),
end: const Offset(1, 1),
);
}
Widget _buildActionButtons() {
return Wrap(
spacing: 8,
runSpacing: 8,
children: [
_buildActionButton(
icon: Platform.isIOS
? CupertinoIcons.doc_on_clipboard
: Icons.content_copy,
label: 'Copy',
onTap: widget.onCopy,
),
_buildActionButton(
icon: Platform.isIOS
? CupertinoIcons.hand_thumbsup
: Icons.thumb_up_outlined,
label: 'Like',
onTap: widget.onLike,
),
_buildActionButton(
icon: Platform.isIOS
? CupertinoIcons.hand_thumbsdown
: Icons.thumb_down_outlined,
label: 'Dislike',
onTap: widget.onDislike,
),
_buildActionButton(
icon: Platform.isIOS ? CupertinoIcons.refresh : Icons.refresh,
label: 'Regenerate',
onTap: widget.onRegenerate,
),
],
);
}
Widget _buildActionButton({
required IconData icon,
required String label,
VoidCallback? onTap,
}) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
decoration: BoxDecoration(
color: context.conduitTheme.textPrimary.withValues(alpha: 0.04),
borderRadius: BorderRadius.circular(AppBorderRadius.lg),
border: Border.all(
color: context.conduitTheme.textPrimary.withValues(alpha: 0.08),
width: BorderWidth.regular,
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
icon,
size: IconSize.sm,
color: context.conduitTheme.textPrimary.withValues(alpha: 0.8),
),
const SizedBox(width: Spacing.xs),
Text(
label,
style: TextStyle(
fontSize: AppTypography.labelMedium,
color: context.conduitTheme.textPrimary.withValues(alpha: 0.8),
fontWeight: FontWeight.w500,
letterSpacing: 0.2,
),
),
],
),
),
);
}
}

249
lib/features/chat/widgets/file_attachment_widget.dart Normal file
View File

@@ -0,0 +1,249 @@
import 'package:flutter/material.dart';
import '../../../shared/theme/theme_extensions.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'dart:io' show Platform;
import '../services/file_attachment_service.dart';
import '../../../shared/widgets/loading_states.dart';
class FileAttachmentWidget extends ConsumerWidget {
const FileAttachmentWidget({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final attachedFiles = ref.watch(attachedFilesProvider);
if (attachedFiles.isEmpty) {
return const SizedBox.shrink();
}
return Container(
padding: const EdgeInsets.fromLTRB(Spacing.md, Spacing.sm, Spacing.md, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Attachments',
style: TextStyle(
color: context.conduitTheme.textSecondary.withValues(alpha: 0.7),
fontSize: AppTypography.labelMedium,
fontWeight: FontWeight.w500,
),
),
const SizedBox(height: Spacing.sm),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: attachedFiles
.map(
(fileState) => Padding(
padding: const EdgeInsets.only(right: Spacing.sm),
child: _FileAttachmentCard(fileState: fileState),
),
)
.toList(),
),
),
],
),
).animate().fadeIn(duration: const Duration(milliseconds: 300));
}
}
class _FileAttachmentCard extends ConsumerWidget {
final FileUploadState fileState;
const _FileAttachmentCard({required this.fileState});
@override
Widget build(BuildContext context, WidgetRef ref) {
return Container(
width: 160,
padding: const EdgeInsets.all(Spacing.md),
decoration: BoxDecoration(
color: context.conduitTheme.cardBackground,
borderRadius: BorderRadius.circular(AppBorderRadius.md),
border: Border.all(
color: _getBorderColor(fileState.status, context),
width: BorderWidth.regular,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
fileState.fileIcon,
style: const TextStyle(fontSize: AppTypography.headlineLarge),
),
const Spacer(),
_buildStatusIcon(context),
],
),
const SizedBox(height: Spacing.sm),
Text(
fileState.fileName,
style: TextStyle(
color: context.conduitTheme.textPrimary,
fontSize: AppTypography.labelLarge,
fontWeight: FontWeight.w500,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: Spacing.xs),
Text(
fileState.formattedSize,
style: TextStyle(
color: context.conduitTheme.textSecondary.withValues(alpha: 0.6),
fontSize: AppTypography.labelMedium,
),
),
if (fileState.status == FileUploadStatus.uploading) ...[
const SizedBox(height: Spacing.sm),
_buildProgressBar(context),
],
if (fileState.error != null) ...[
const SizedBox(height: Spacing.xs),
Text(
'Failed to upload',
style: TextStyle(
color: context.conduitTheme.error,
fontSize: AppTypography.labelMedium,
),
),
],
],
),
);
}
Widget _buildStatusIcon(BuildContext context) {
switch (fileState.status) {
case FileUploadStatus.pending:
return Icon(
Platform.isIOS ? CupertinoIcons.clock : Icons.schedule,
size: IconSize.sm,
color: context.conduitTheme.iconDisabled,
);
case FileUploadStatus.uploading:
return ConduitLoading.inline(
size: IconSize.sm,
color: context.conduitTheme.iconSecondary,
);
case FileUploadStatus.completed:
return Icon(
Platform.isIOS
? CupertinoIcons.checkmark_circle_fill
: Icons.check_circle,
size: IconSize.sm,
color: context.conduitTheme.success,
);
case FileUploadStatus.failed:
return GestureDetector(
onTap: () {
// Retry upload
},
child: Icon(
Platform.isIOS
? CupertinoIcons.exclamationmark_circle_fill
: Icons.error,
size: IconSize.sm,
color: context.conduitTheme.error,
),
);
}
}
Widget _buildProgressBar(BuildContext context) {
return ClipRRect(
borderRadius: BorderRadius.circular(AppBorderRadius.xs),
child: LinearProgressIndicator(
value: fileState.progress,
backgroundColor: context.conduitTheme.textPrimary.withValues(
alpha: 0.1,
),
valueColor: AlwaysStoppedAnimation<Color>(
context.conduitTheme.buttonPrimary,
),
minHeight: 4,
),
);
}
Color _getBorderColor(FileUploadStatus status, BuildContext context) {
switch (status) {
case FileUploadStatus.pending:
return context.conduitTheme.textPrimary.withValues(alpha: 0.2);
case FileUploadStatus.uploading:
return context.conduitTheme.buttonPrimary.withValues(alpha: 0.5);
case FileUploadStatus.completed:
return context.conduitTheme.success.withValues(alpha: 0.3);
case FileUploadStatus.failed:
return context.conduitTheme.error.withValues(alpha: 0.3);
}
}
}
// Attachment preview for messages
class MessageAttachmentPreview extends StatelessWidget {
final List<String> fileIds;
const MessageAttachmentPreview({super.key, required this.fileIds});
@override
Widget build(BuildContext context) {
if (fileIds.isEmpty) return const SizedBox.shrink();
return Container(
margin: const EdgeInsets.only(top: Spacing.sm),
child: Wrap(
spacing: 8,
runSpacing: 8,
children: fileIds
.map(
(fileId) => Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 6,
),
decoration: BoxDecoration(
color: context.conduitTheme.textPrimary.withValues(
alpha: 0.1,
),
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
border: Border.all(
color: context.conduitTheme.textPrimary.withValues(
alpha: 0.2,
),
width: BorderWidth.regular,
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
'📎',
style: TextStyle(fontSize: AppTypography.bodyLarge),
),
const SizedBox(width: Spacing.xs),
Text(
'Attachment',
style: TextStyle(
color: context.conduitTheme.textPrimary.withValues(
alpha: 0.8,
),
fontSize: AppTypography.labelLarge,
),
),
],
),
),
)
.toList(),
),
);
}
}

242
lib/features/chat/widgets/file_viewer_dialog.dart Normal file
View File

@@ -0,0 +1,242 @@
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../../../shared/theme/theme_extensions.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/models/file_info.dart';
import '../../../core/providers/app_providers.dart';
class FileViewerDialog extends ConsumerWidget {
final FileInfo fileInfo;
const FileViewerDialog({super.key, required this.fileInfo});
@override
Widget build(BuildContext context, WidgetRef ref) {
// Use themed tokens via extension
final fileContent = ref.watch(fileContentProvider(fileInfo.id));
return Dialog.fullscreen(
child: Scaffold(
backgroundColor: context.conduitTheme.surfaceBackground,
appBar: AppBar(
backgroundColor: context.conduitTheme.surfaceBackground,
elevation: 0,
title: Text(
fileInfo.originalFilename,
overflow: TextOverflow.ellipsis,
style: TextStyle(color: context.conduitTheme.textPrimary),
),
iconTheme: IconThemeData(color: context.conduitTheme.iconPrimary),
leading: IconButton(
icon: Icon(Platform.isIOS ? CupertinoIcons.back : Icons.arrow_back),
onPressed: () => Navigator.pop(context),
),
actions: [
IconButton(
icon: Icon(Platform.isIOS ? CupertinoIcons.info : Icons.info),
onPressed: () => _showFileInfo(context),
),
],
),
body: fileContent.when(
data: (content) => _buildContentView(context, content),
loading: () => Center(
child: CircularProgressIndicator(
color: context.conduitTheme.buttonPrimary,
),
),
error: (error, _) => Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.error, size: 64, color: context.conduitTheme.error),
const SizedBox(height: Spacing.md),
Text(
'Failed to load file',
style: TextStyle(
color: context.conduitTheme.error,
fontSize: AppTypography.headlineSmall,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: Spacing.sm),
Text(
error.toString(),
style: TextStyle(color: context.conduitTheme.textSecondary),
textAlign: TextAlign.center,
),
const SizedBox(height: Spacing.md),
ElevatedButton(
onPressed: () =>
ref.invalidate(fileContentProvider(fileInfo.id)),
child: const Text('Retry'),
),
],
),
),
),
),
);
}
Widget _buildContentView(BuildContext context, String content) {
final theme = context.conduitTheme;
final isTextFile = _isTextFile(fileInfo.mimeType);
if (!isTextFile) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
_getFileIcon(fileInfo.mimeType),
size: 64,
color: theme.buttonPrimary,
),
const SizedBox(height: Spacing.md),
Text(
fileInfo.originalFilename,
style: TextStyle(
color: theme.textPrimary,
fontSize: AppTypography.headlineSmall,
fontWeight: FontWeight.w600,
),
textAlign: TextAlign.center,
),
const SizedBox(height: Spacing.sm),
Text(
'File type: ${fileInfo.mimeType}',
style: TextStyle(color: theme.textSecondary),
),
Text(
'Size: ${_formatFileSize(fileInfo.size)}',
style: TextStyle(color: theme.textSecondary),
),
const SizedBox(height: Spacing.md),
Text(
'Preview not available for this file type',
style: TextStyle(color: theme.textTertiary),
),
],
),
);
}
return SingleChildScrollView(
padding: const EdgeInsets.all(Spacing.md),
child: SelectableText(
content,
style: TextStyle(
color: theme.textPrimary,
fontFamily: 'monospace',
fontSize: AppTypography.labelLarge,
),
),
);
}
void _showFileInfo(BuildContext context) {
showDialog(
context: context,
builder: (context) => AlertDialog(
backgroundColor: context.conduitTheme.surfaceBackground,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.dialog),
),
title: Text(
'File Information',
style: TextStyle(color: context.conduitTheme.textPrimary),
),
content: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildInfoRow(context, 'Name', fileInfo.originalFilename),
_buildInfoRow(context, 'Size', _formatFileSize(fileInfo.size)),
_buildInfoRow(context, 'Type', fileInfo.mimeType),
_buildInfoRow(context, 'Created', _formatDate(fileInfo.createdAt)),
_buildInfoRow(context, 'Modified', _formatDate(fileInfo.updatedAt)),
if (fileInfo.hash != null)
_buildInfoRow(context, 'Hash', fileInfo.hash!),
],
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text(
'Close',
style: TextStyle(color: context.conduitTheme.buttonPrimary),
),
),
],
),
);
}
Widget _buildInfoRow(BuildContext context, String label, String value) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: Spacing.xxxl + Spacing.md,
child: Text(
'$label:',
style: TextStyle(
fontWeight: FontWeight.w600,
color: context.conduitTheme.textSecondary,
),
),
),
Expanded(
child: Text(
value,
style: TextStyle(color: context.conduitTheme.textPrimary),
),
),
],
),
);
}
bool _isTextFile(String mimeType) {
return mimeType.startsWith('text/') ||
mimeType == 'application/json' ||
mimeType == 'application/xml' ||
mimeType == 'application/javascript' ||
mimeType.contains('yaml') ||
mimeType.contains('markdown');
}
IconData _getFileIcon(String mimeType) {
if (mimeType.startsWith('image/')) {
return Platform.isIOS ? CupertinoIcons.photo : Icons.image;
} else if (mimeType.startsWith('video/')) {
return Platform.isIOS ? CupertinoIcons.video_camera : Icons.video_file;
} else if (mimeType.startsWith('audio/')) {
return Platform.isIOS ? CupertinoIcons.music_note : Icons.audio_file;
} else if (mimeType.contains('pdf')) {
return Platform.isIOS ? CupertinoIcons.doc : Icons.picture_as_pdf;
} else if (mimeType.startsWith('text/') || mimeType.contains('json')) {
return Platform.isIOS ? CupertinoIcons.doc_text : Icons.description;
} else {
return Platform.isIOS ? CupertinoIcons.doc : Icons.insert_drive_file;
}
}
String _formatFileSize(int bytes) {
if (bytes < 1024) return '$bytes B';
if (bytes < 1024 * 1024) return '${(bytes / 1024).toStringAsFixed(1)} KB';
if (bytes < 1024 * 1024 * 1024) {
return '${(bytes / (1024 * 1024)).toStringAsFixed(1)} MB';
}
return '${(bytes / (1024 * 1024 * 1024)).toStringAsFixed(1)} GB';
}
String _formatDate(DateTime date) {
return '${date.day}/${date.month}/${date.year} ${date.hour.toString().padLeft(2, '0')}:${date.minute.toString().padLeft(2, '0')}';
}
}

708
lib/features/chat/widgets/folder_management_dialog.dart Normal file
View File

@@ -0,0 +1,708 @@
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../../../shared/theme/app_theme.dart';
import '../../../shared/theme/theme_extensions.dart';
import '../../../shared/widgets/conduit_components.dart';
import '../../../shared/utils/ui_utils.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/models/folder.dart';
import '../../../core/models/conversation.dart';
import '../../../core/providers/app_providers.dart';
class FolderManagementDialog extends ConsumerStatefulWidget {
final Conversation? conversation;
const FolderManagementDialog({super.key, this.conversation});
@override
ConsumerState<FolderManagementDialog> createState() =>
_FolderManagementDialogState();
}
class _FolderManagementDialogState
extends ConsumerState<FolderManagementDialog> {
final _nameController = TextEditingController();
bool _isCreating = false;
@override
void dispose() {
_nameController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final folders = ref.watch(foldersProvider);
return Dialog(
backgroundColor: Colors.transparent,
child: Container(
width: 400,
constraints: const BoxConstraints(maxHeight: 600),
decoration: BoxDecoration(
color: context.conduitTheme.cardBackground,
borderRadius: BorderRadius.circular(AppBorderRadius.xl),
border: Border.all(
color: context.conduitTheme.cardBorder.withValues(alpha: 0.3),
width: BorderWidth.thin,
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Header
Container(
padding: const EdgeInsets.all(Spacing.lg),
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
context.conduitTheme.buttonPrimary,
context.conduitTheme.buttonPrimary.withValues(alpha: 0.8),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: const BorderRadius.vertical(
top: Radius.circular(AppBorderRadius.xl),
),
),
child: Row(
children: [
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: context.conduitTheme.textInverse.withValues(
alpha: 0.2,
),
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
),
child: Icon(
Platform.isIOS
? CupertinoIcons.folder
: Icons.folder_rounded,
color: context.conduitTheme.textInverse,
size: IconSize.md,
),
),
const SizedBox(width: Spacing.md),
Expanded(
child: Text(
widget.conversation != null
? 'Move to Folder'
: 'Manage Folders',
style: TextStyle(
color: context.conduitTheme.textInverse,
fontSize: AppTypography.headlineSmall,
fontWeight: FontWeight.w600,
),
),
),
ConduitIconButton(
icon: Platform.isIOS
? CupertinoIcons.xmark
: Icons.close_rounded,
onPressed: () => Navigator.pop(context),
),
],
),
),
// Create new folder section
Padding(
padding: const EdgeInsets.all(Spacing.lg),
child: Row(
children: [
Expanded(
child: Container(
decoration: BoxDecoration(
color: context.conduitTheme.inputBackground,
borderRadius: BorderRadius.circular(AppBorderRadius.md),
border: Border.all(
color: context.conduitTheme.inputBorder,
width: BorderWidth.thin,
),
),
child: TextField(
controller: _nameController,
style: TextStyle(
color: context.conduitTheme.inputText,
fontSize: AppTypography.bodyLarge,
),
decoration: InputDecoration(
hintText: 'New folder name',
hintStyle: TextStyle(
color: context.conduitTheme.inputPlaceholder
.withValues(alpha: 0.5),
fontSize: AppTypography.bodyLarge,
),
border: InputBorder.none,
contentPadding: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.sm,
),
prefixIcon: Icon(
Platform.isIOS
? CupertinoIcons.folder_badge_plus
: Icons.create_new_folder_rounded,
color: context.conduitTheme.iconSecondary,
size: IconSize.md,
),
),
onSubmitted: (_) => _createFolder(),
),
),
),
const SizedBox(width: Spacing.md),
ConduitButton(
text: 'Create',
onPressed: _isCreating ? null : _createFolder,
isLoading: _isCreating,
width: 80,
),
],
),
),
// Divider
Container(
height: 0.5,
margin: const EdgeInsets.symmetric(horizontal: Spacing.lg),
color: context.conduitTheme.dividerColor.withValues(alpha: 0.3),
),
// Folders list
Expanded(
child: folders.when(
data: (folderList) => folderList.isEmpty
? _buildEmptyState()
: ListView.builder(
padding: const EdgeInsets.symmetric(
vertical: Spacing.sm,
),
itemCount: folderList.length,
itemBuilder: (context, index) {
final folder = folderList[index];
return _buildFolderTile(folder);
},
),
loading: () => _buildLoadingState(),
error: (error, _) => _buildErrorState(error),
),
),
// Bottom actions
if (widget.conversation != null) ...[
Container(
height: 0.5,
margin: const EdgeInsets.symmetric(horizontal: Spacing.lg),
color: context.conduitTheme.dividerColor.withValues(alpha: 0.3),
),
Padding(
padding: const EdgeInsets.all(Spacing.lg),
child: Row(
children: [
Expanded(
child: ConduitButton(
text: 'Remove from Folder',
onPressed: () => _moveToFolder(null),
isSecondary: true,
),
),
const SizedBox(width: Spacing.md),
Expanded(
child: ConduitButton(
text: 'Cancel',
onPressed: () => Navigator.pop(context),
isSecondary: true,
),
),
],
),
),
],
],
),
),
);
}
Widget _buildEmptyState() {
return Center(
child: Padding(
padding: const EdgeInsets.all(Spacing.xl),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 80,
height: 80,
decoration: BoxDecoration(
color: context.conduitTheme.cardBackground.withValues(
alpha: 0.6,
),
borderRadius: BorderRadius.circular(AppBorderRadius.round),
),
child: Icon(
Platform.isIOS ? CupertinoIcons.folder : Icons.folder_outlined,
size: 40,
color: context.conduitTheme.iconSecondary,
),
),
const SizedBox(height: Spacing.lg),
Text(
'No folders yet',
style: TextStyle(
color: context.conduitTheme.textPrimary,
fontSize: AppTypography.headlineSmall,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: Spacing.sm),
Text(
'Create a folder to organize\nyour conversations',
style: TextStyle(
color: context.conduitTheme.textSecondary,
fontSize: AppTypography.labelLarge,
height: 1.4,
),
textAlign: TextAlign.center,
),
],
),
),
);
}
Widget _buildLoadingState() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator.adaptive(
strokeWidth: 3,
valueColor: AlwaysStoppedAnimation<Color>(
context.conduitTheme.buttonPrimary,
),
),
SizedBox(height: Spacing.lg),
Text(
'Loading folders...',
style: TextStyle(
color: context.conduitTheme.textSecondary,
fontSize: AppTypography.bodyLarge,
fontWeight: FontWeight.w500,
),
),
],
),
);
}
Widget _buildErrorState(Object error) {
return Center(
child: Padding(
padding: const EdgeInsets.all(Spacing.xl),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 80,
height: 80,
decoration: BoxDecoration(
color: context.conduitTheme.error.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(AppBorderRadius.round),
),
child: Icon(
Icons.error_outline_rounded,
size: 40,
color: context.conduitTheme.error,
),
),
const SizedBox(height: Spacing.lg),
Text(
'Failed to load folders',
style: TextStyle(
color: context.conduitTheme.textPrimary,
fontSize: AppTypography.headlineSmall,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: Spacing.sm),
Text(
error.toString(),
style: TextStyle(
color: context.conduitTheme.textSecondary,
fontSize: AppTypography.labelLarge,
height: 1.4,
),
textAlign: TextAlign.center,
),
],
),
),
);
}
Widget _buildFolderTile(Folder folder) {
final isSelected = widget.conversation?.folderId == folder.id;
return Container(
margin: const EdgeInsets.symmetric(
horizontal: Spacing.lg,
vertical: Spacing.xs,
),
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: widget.conversation != null
? () => _moveToFolder(folder.id)
: null,
borderRadius: BorderRadius.circular(AppBorderRadius.md),
child: Container(
padding: const EdgeInsets.all(Spacing.md),
decoration: BoxDecoration(
color: isSelected
? context.conduitTheme.buttonPrimary.withValues(alpha: 0.1)
: context.conduitTheme.cardBackground.withValues(alpha: 0.5),
borderRadius: BorderRadius.circular(AppBorderRadius.md),
border: Border.all(
color: isSelected
? context.conduitTheme.buttonPrimary.withValues(alpha: 0.3)
: context.conduitTheme.cardBorder.withValues(alpha: 0.2),
width: BorderWidth.thin,
),
),
child: Row(
children: [
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: isSelected
? context.conduitTheme.buttonPrimary.withValues(
alpha: 0.2,
)
: context.conduitTheme.cardBorder.withValues(
alpha: 0.6,
),
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
),
child: Icon(
Platform.isIOS
? CupertinoIcons.folder_fill
: Icons.folder_rounded,
color: isSelected
? context.conduitTheme.buttonPrimary
: context.conduitTheme.iconSecondary,
size: IconSize.md,
),
),
const SizedBox(width: Spacing.md),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
folder.name,
style: TextStyle(
color: isSelected
? context.conduitTheme.buttonPrimary
: context.conduitTheme.textPrimary,
fontSize: AppTypography.bodyLarge,
fontWeight: isSelected
? FontWeight.w600
: FontWeight.w500,
),
),
const SizedBox(height: Spacing.xxs),
Text(
'${folder.conversationIds.length} conversations',
style: TextStyle(
color: context.conduitTheme.textSecondary,
fontSize: AppTypography.labelMedium,
),
),
],
),
),
if (widget.conversation != null && isSelected)
Container(
width: 24,
height: 24,
decoration: BoxDecoration(
color: context.conduitTheme.buttonPrimary,
borderRadius: BorderRadius.circular(
AppBorderRadius.round,
),
),
child: Icon(
Icons.check_rounded,
color: context.conduitTheme.textInverse,
size: 16,
),
)
else if (widget.conversation == null)
PopupMenuButton<String>(
icon: Icon(
Icons.more_vert_rounded,
color: context.conduitTheme.iconSecondary,
size: IconSize.md,
),
color: context.conduitTheme.cardBackground,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.md),
side: BorderSide(
color: context.conduitTheme.cardBorder.withValues(
alpha: 0.3,
),
width: BorderWidth.thin,
),
),
onSelected: (value) {
switch (value) {
case 'rename':
_renameFolder(folder);
break;
case 'delete':
_deleteFolder(folder);
break;
}
},
itemBuilder: (context) => [
PopupMenuItem(
value: 'rename',
child: Row(
children: [
Icon(
Icons.edit_rounded,
size: 18,
color: context.conduitTheme.iconSecondary,
),
const SizedBox(width: Spacing.sm),
Text(
'Rename',
style: TextStyle(
color: context.conduitTheme.textPrimary,
),
),
],
),
),
PopupMenuItem(
value: 'delete',
child: Row(
children: [
Icon(
Icons.delete_rounded,
size: 18,
color: context.conduitTheme.error,
),
const SizedBox(width: Spacing.sm),
Text(
'Delete',
style: TextStyle(
color: context.conduitTheme.error,
),
),
],
),
),
],
),
],
),
),
),
),
);
}
Future<void> _createFolder() async {
final name = _nameController.text.trim();
if (name.isEmpty) return;
setState(() => _isCreating = true);
try {
final api = ref.read(apiServiceProvider);
if (api == null) throw Exception('No API service available');
await api.createFolder(name: name);
ref.invalidate(foldersProvider);
_nameController.clear();
if (mounted) {
UiUtils.showMessage(context, 'Folder "$name" created');
}
} catch (e) {
if (mounted) {
UiUtils.showMessage(context, 'Error creating folder: $e');
}
} finally {
if (mounted) {
setState(() => _isCreating = false);
}
}
}
Future<void> _moveToFolder(String? folderId) async {
if (widget.conversation == null) return;
try {
final api = ref.read(apiServiceProvider);
if (api == null) throw Exception('No API service available');
await api.moveConversationToFolder(widget.conversation!.id, folderId);
ref.invalidate(conversationsProvider);
ref.invalidate(foldersProvider);
if (mounted) {
Navigator.pop(context);
UiUtils.showMessage(
context,
folderId != null
? 'Conversation moved to folder'
: 'Conversation removed from folder',
);
}
} catch (e) {
if (mounted) {
UiUtils.showMessage(context, 'Error moving conversation: $e');
}
}
}
void _renameFolder(Folder folder) async {
final controller = TextEditingController(text: folder.name);
final result = await showDialog<String>(
context: context,
builder: (context) => AlertDialog(
backgroundColor: AppTheme.neutral700,
title: Text(
'Rename Folder',
style: TextStyle(color: context.conduitTheme.textPrimary),
),
content: TextField(
controller: controller,
style: TextStyle(color: context.conduitTheme.inputText),
decoration: InputDecoration(
hintText: 'Folder name',
hintStyle: TextStyle(
color: context.conduitTheme.inputPlaceholder.withValues(
alpha: 0.5,
),
),
border: OutlineInputBorder(
borderSide: BorderSide(
color: context.conduitTheme.inputBorder.withValues(alpha: 0.2),
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: context.conduitTheme.inputBorder.withValues(alpha: 0.2),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: context.conduitTheme.buttonPrimary),
),
),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text(
'Cancel',
style: TextStyle(
color: context.conduitTheme.textPrimary.withValues(alpha: 0.7),
),
),
),
FilledButton(
onPressed: () => Navigator.pop(context, controller.text.trim()),
style: FilledButton.styleFrom(
backgroundColor: context.conduitTheme.buttonPrimary,
),
child: const Text('Rename'),
),
],
),
);
if (result != null && result.isNotEmpty && result != folder.name) {
try {
final api = ref.read(apiServiceProvider);
if (api != null) {
await api.updateFolder(folder.id, name: result);
ref.invalidate(foldersProvider);
if (mounted) {
UiUtils.showMessage(context, 'Folder renamed to "$result"');
}
}
} catch (e) {
if (mounted) {
UiUtils.showMessage(context, 'Failed to rename folder: $e');
}
}
}
controller.dispose();
}
void _deleteFolder(Folder folder) async {
final confirmed = await showDialog<bool>(
context: context,
builder: (context) => AlertDialog(
backgroundColor: context.conduitTheme.cardBackground,
title: Text(
'Delete Folder',
style: TextStyle(color: context.conduitTheme.textPrimary),
),
content: Text(
'Are you sure you want to delete "${folder.name}"?\n\nThis action cannot be undone. Conversations in this folder will be moved to the main folder.',
style: TextStyle(color: context.conduitTheme.textPrimary),
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context, false),
child: Text(
'Cancel',
style: TextStyle(
color: context.conduitTheme.textPrimary.withValues(alpha: 0.7),
),
),
),
FilledButton(
onPressed: () => Navigator.pop(context, true),
style: FilledButton.styleFrom(
backgroundColor: context.conduitTheme.error,
),
child: const Text('Delete'),
),
],
),
);
if (confirmed == true) {
try {
final api = ref.read(apiServiceProvider);
if (api != null) {
await api.deleteFolder(folder.id);
ref.invalidate(foldersProvider);
ref.invalidate(conversationsProvider);
if (mounted) {
UiUtils.showMessage(context, 'Folder "${folder.name}" deleted');
}
}
} catch (e) {
if (mounted) {
UiUtils.showMessage(context, 'Failed to delete folder: $e');
}
}
}
}
}

1056
lib/features/chat/widgets/message_batch_widget.dart Normal file
View File

File diff suppressed because it is too large Load Diff

792
lib/features/chat/widgets/modern_chat_input.dart Normal file
View File

@@ -0,0 +1,792 @@
import 'package:flutter/material.dart';
import '../../../shared/theme/theme_extensions.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter/services.dart';
import 'dart:io' show Platform;
import 'dart:async';
import '../providers/chat_providers.dart';
import '../../../shared/utils/platform_utils.dart';
class ModernChatInput extends ConsumerStatefulWidget {
final Function(String) onSendMessage;
final bool enabled;
final Function()? onVoiceInput;
final Function()? onFileAttachment;
final Function()? onImageAttachment;
final Function()? onCameraCapture;
const ModernChatInput({
super.key,
required this.onSendMessage,
this.enabled = true,
this.onVoiceInput,
this.onFileAttachment,
this.onImageAttachment,
this.onCameraCapture,
});
@override
ConsumerState<ModernChatInput> createState() => _ModernChatInputState();
}
class _ModernChatInputState extends ConsumerState<ModernChatInput>
with TickerProviderStateMixin {
final TextEditingController _controller = TextEditingController();
final FocusNode _focusNode = FocusNode();
final bool _isRecording = false;
bool _isExpanded = true; // Start expanded for better UX
// TODO: Implement voice input functionality
// final String _voiceInputText = '';
bool _hasText = false; // track locally without rebuilding on each keystroke
StreamSubscription<String>? _voiceStreamSubscription;
late AnimationController _expandController;
late AnimationController _pulseController;
Timer? _blurCollapseTimer;
bool _hasAutoFocusedOnce = false;
@override
void initState() {
super.initState();
_expandController = AnimationController(
duration:
AnimationDuration.fast, // Faster animation for better responsiveness
vsync: this,
value: 1.0, // Start expanded
);
_pulseController = AnimationController(
duration: AnimationDuration.slow,
vsync: this,
);
// Listen for text changes and update only when emptiness flips
_controller.addListener(() {
final has = _controller.text.trim().isNotEmpty;
if (has != _hasText) {
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!mounted) return;
setState(() => _hasText = has);
// Intelligent expansion: expand when user starts typing
if (has && !_isExpanded) {
_setExpanded(true);
}
});
}
});
// Intelligent expand/collapse around focus changes
_focusNode.addListener(() {
// Cancel any pending blur-driven collapse
_blurCollapseTimer?.cancel();
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!mounted) return;
final hasFocus = _focusNode.hasFocus;
if (hasFocus) {
if (!_isExpanded) _setExpanded(true);
} else {
// Defer collapse slightly to avoid IME show/hide race conditions
_blurCollapseTimer = Timer(const Duration(milliseconds: 160), () {
if (!mounted) return;
if (_focusNode.hasFocus) return; // focus came back
// Collapse only when keyboard is fully hidden to avoid flicker
final keyboardVisible =
MediaQuery.of(context).viewInsets.bottom > 0;
if (keyboardVisible) return;
final has = _controller.text.trim().isNotEmpty;
if (!has && _isExpanded) {
_setExpanded(false);
}
});
}
});
});
// Let autofocus handle the focus - no manual intervention
// The TextField's autofocus: true should handle focus and keyboard automatically
// Additionally, request focus after first frame to ensure reliability across platforms
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!mounted) return;
if (!_hasAutoFocusedOnce && widget.enabled) {
_ensureFocusedIfEnabled();
_hasAutoFocusedOnce = true;
}
});
}
@override
void dispose() {
_controller.dispose();
_focusNode.dispose();
_expandController.dispose();
_pulseController.dispose();
_blurCollapseTimer?.cancel();
_voiceStreamSubscription?.cancel();
super.dispose();
}
void _ensureFocusedIfEnabled() {
if (!widget.enabled) return;
if (!_focusNode.hasFocus) {
FocusScope.of(context).requestFocus(_focusNode);
}
}
@override
void didUpdateWidget(covariant ModernChatInput oldWidget) {
super.didUpdateWidget(oldWidget);
if (widget.enabled && !oldWidget.enabled && !_hasAutoFocusedOnce) {
// Became enabled (e.g., after selecting a model) → focus the input
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!mounted) return;
_ensureFocusedIfEnabled();
_hasAutoFocusedOnce = true;
});
}
if (!widget.enabled && oldWidget.enabled) {
// Became disabled → collapse and hide keyboard
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!mounted) return;
if (_isExpanded) _setExpanded(false);
if (_focusNode.hasFocus) {
_focusNode.unfocus();
}
});
}
}
void _sendMessage() {
final text = _controller.text.trim();
if (text.isEmpty || !widget.enabled) return;
PlatformUtils.lightHaptic();
widget.onSendMessage(text);
_controller.clear();
// Keep input expanded and focused for better UX - don't dismiss keyboard
// KeyboardUtils.dismissKeyboard(context);
// _setExpanded(false);
}
void _setExpanded(bool expanded) {
if (_isExpanded == expanded) return;
setState(() {
_isExpanded = expanded;
});
if (expanded) {
_expandController.forward();
} else {
_expandController.reverse();
}
}
@override
Widget build(BuildContext context) {
// Check if assistant is currently generating by checking last assistant message streaming
final messages = ref.watch(chatMessagesProvider);
final isGenerating =
messages.isNotEmpty &&
messages.last.role == 'assistant' &&
messages.last.isStreaming;
final stopGeneration = ref.read(stopGenerationProvider);
return Container(
// Transparent wrapper so rounded corners are visible against page background
color: Colors.transparent,
padding: EdgeInsets.only(
left: 0,
right: 0,
top: Spacing.xs.toDouble(),
bottom: 0,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Web search status indicator
_buildWebSearchStatusIndicator(),
// Main input area with unified 2-row design
Container(
clipBehavior: Clip.antiAlias,
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).padding.bottom,
),
decoration: BoxDecoration(
color: context.conduitTheme.inputBackground,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(AppBorderRadius.xl),
bottom: Radius.circular(0),
),
border: Border(
top: BorderSide(
color: context.conduitTheme.inputBorder,
width: BorderWidth.regular,
),
left: BorderSide(
color: context.conduitTheme.inputBorder,
width: BorderWidth.regular,
),
right: BorderSide(
color: context.conduitTheme.inputBorder,
width: BorderWidth.regular,
),
// Removed bottom border to eliminate divider
),
boxShadow: ConduitShadows.input,
),
width: double.infinity,
child: ConstrainedBox(
constraints: BoxConstraints(
// cap the input area to 40% of screen height to avoid bottom overflow
maxHeight: MediaQuery.of(context).size.height * 0.4,
),
child: AnimatedSize(
duration:
AnimationDuration.fast, // Faster for better responsiveness
curve: Curves.fastOutSlowIn, // More efficient curve
alignment: Alignment.topCenter,
child: SingleChildScrollView(
physics: const ClampingScrollPhysics(),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Collapsed/Expanded top row: text input with left/right buttons in collapsed
Padding(
padding: const EdgeInsets.all(Spacing.inputPadding),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
if (!_isExpanded) ...[
_buildRoundButton(
icon: Icons.add,
onTap: widget.enabled
? _showAttachmentOptions
: null,
tooltip: 'Add attachment',
),
const SizedBox(width: Spacing.sm),
],
// Text input expands to fill
Expanded(
child: Semantics(
textField: true,
label: 'Message input',
hint: 'Type your message',
child: TextField(
controller: _controller,
focusNode: _focusNode,
enabled: widget.enabled,
autofocus: false,
maxLines: _isExpanded ? null : 1,
keyboardType: TextInputType.multiline,
textInputAction: TextInputAction.newline,
showCursor: true,
cursorColor: context.conduitTheme.inputText,
style: AppTypography.chatMessageStyle
.copyWith(
color: context.conduitTheme.inputText,
),
decoration: InputDecoration(
hintText: 'Message...',
hintStyle: TextStyle(
color:
context.conduitTheme.inputPlaceholder,
fontSize: AppTypography.bodyLarge,
fontWeight: _isRecording
? FontWeight.w500
: FontWeight.w400,
fontStyle: _isRecording
? FontStyle.italic
: FontStyle.normal,
),
// Ensure the text field background matches its parent container
// and does not use the global InputDecorationTheme fill
filled: false,
border: InputBorder.none,
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
contentPadding: EdgeInsets.zero,
isDense: true,
alignLabelWithHint: true,
),
// Removed onChanged setState to reduce rebuilds
onSubmitted: (_) => _sendMessage(),
onTap: () {
if (!widget.enabled) return;
if (!_isExpanded) {
_setExpanded(true);
WidgetsBinding.instance
.addPostFrameCallback((_) {
if (!mounted) return;
_ensureFocusedIfEnabled();
});
} else {
_ensureFocusedIfEnabled();
}
},
),
),
),
if (!_isExpanded) ...[
const SizedBox(width: Spacing.sm),
// Primary action button (Send/Stop) when collapsed
_buildPrimaryButton(
_hasText,
isGenerating,
stopGeneration,
),
],
],
),
),
// Expanded bottom row with additional options
if (_isExpanded) ...[
Container(
padding: const EdgeInsets.only(
left: Spacing.inputPadding,
right: Spacing.inputPadding,
bottom: Spacing.inputPadding,
),
child: FadeTransition(
opacity: _expandController,
child: Row(
children: [
_buildRoundButton(
icon: Icons.add,
onTap: widget.enabled
? _showAttachmentOptions
: null,
tooltip: 'Add attachment',
),
const SizedBox(width: Spacing.sm),
Flexible(
child: Center(child: _buildResearchToggle()),
),
const SizedBox(width: Spacing.md),
// Microphone button: call provided callback for premium voice UI
_buildRoundButton(
icon: Platform.isIOS
? CupertinoIcons.mic_fill
: Icons.mic,
onTap: widget.enabled
? widget.onVoiceInput
: null,
tooltip: 'Voice input',
isActive: _isRecording,
),
const SizedBox(width: Spacing.sm),
// Primary action button (Send/Stop) when expanded
_buildPrimaryButton(
_hasText,
isGenerating,
stopGeneration,
),
],
),
),
),
],
],
),
),
),
),
),
],
),
);
}
Widget _buildPrimaryButton(
bool hasText,
bool isGenerating,
void Function() stopGeneration,
) {
// Spec: 48px touch target, circular radius, md icon size
const double buttonSize = TouchTarget.comfortable; // 48.0
const double radius = AppBorderRadius.round; // big to ensure circle
final enabled = !isGenerating && hasText && widget.enabled;
// Generating -> STOP variant
if (isGenerating) {
return Tooltip(
message: 'Stop generating',
child: GestureDetector(
onTap: stopGeneration,
child: Container(
width: buttonSize,
height: buttonSize,
decoration: BoxDecoration(
color: context.conduitTheme.error.withValues(
alpha: Alpha.buttonPressed,
),
borderRadius: BorderRadius.circular(radius),
border: Border.all(
color: context.conduitTheme.error,
width: BorderWidth.regular,
),
boxShadow: ConduitShadows.button,
),
child: Stack(
alignment: Alignment.center,
children: [
SizedBox(
width: buttonSize - 18,
height: buttonSize - 18,
child: CircularProgressIndicator(
strokeWidth: BorderWidth.medium,
valueColor: AlwaysStoppedAnimation<Color>(
context.conduitTheme.error,
),
),
),
Icon(
Platform.isIOS ? CupertinoIcons.stop_fill : Icons.stop,
size: IconSize.medium,
color: context.conduitTheme.error,
),
],
),
),
),
);
}
// Default SEND variant
return Tooltip(
message: enabled ? 'Send message' : 'Send',
child: GestureDetector(
onTap: enabled ? _sendMessage : null,
child: Opacity(
opacity: enabled ? Alpha.primary : Alpha.disabled,
child: IgnorePointer(
ignoring: !enabled,
child: Container(
width: buttonSize,
height: buttonSize,
decoration: BoxDecoration(
color: context.conduitTheme.cardBackground,
borderRadius: BorderRadius.circular(radius),
border: Border.all(
color: enabled
? context.conduitTheme.cardBorder
: context.conduitTheme.cardBorder.withValues(
alpha: Alpha.medium,
),
width: BorderWidth.regular,
),
boxShadow: ConduitShadows.button,
),
child: Icon(
Platform.isIOS ? CupertinoIcons.arrow_up : Icons.arrow_upward,
size: IconSize.medium,
color: enabled
? context.conduitTheme.textPrimary
: context.conduitTheme.textPrimary.withValues(
alpha: Alpha.disabled,
),
),
),
),
),
),
);
}
Widget _buildRoundButton({
required IconData icon,
VoidCallback? onTap,
String? tooltip,
bool isActive = false,
bool showBackground = true,
}) {
return Tooltip(
message: tooltip ?? '',
child: GestureDetector(
onTap: onTap,
child: Container(
width: TouchTarget.comfortable,
height: TouchTarget.comfortable,
decoration: BoxDecoration(
color: isActive
? context.conduitTheme.textPrimary.withValues(
alpha: Alpha.buttonHover,
)
: showBackground
? context.conduitTheme.cardBackground
: Colors.transparent,
borderRadius: BorderRadius.circular(AppBorderRadius.xl),
border: Border.all(
color: isActive
? context.conduitTheme.textPrimary.withValues(
alpha: Alpha.buttonHover + Alpha.subtle,
)
: showBackground
? context.conduitTheme.cardBorder
: Colors.transparent,
width: BorderWidth.regular,
),
boxShadow: (isActive || showBackground)
? ConduitShadows.button
: null,
),
child: Icon(
icon,
size: IconSize.medium,
color: widget.enabled
? (isActive
? context.conduitTheme.textPrimary
: context.conduitTheme.textPrimary.withValues(
alpha: Alpha.strong,
))
: context.conduitTheme.textPrimary.withValues(
alpha: Alpha.disabled,
),
),
),
),
);
}
Widget _buildResearchToggle() {
final webSearchEnabled = ref.watch(
webSearchEnabledProvider.select((enabled) => enabled),
);
return GestureDetector(
onTap: widget.enabled
? () {
ref.read(webSearchEnabledProvider.notifier).state =
!webSearchEnabled;
}
: null,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.sm,
),
decoration: BoxDecoration(
color: webSearchEnabled
? context.conduitTheme.textPrimary.withValues(
alpha: Alpha.buttonHover,
)
: context.conduitTheme.surfaceBackground.withValues(
alpha: Alpha.subtle,
),
borderRadius: BorderRadius.circular(AppBorderRadius.xl),
border: Border.all(
color: webSearchEnabled
? context.conduitTheme.textPrimary.withValues(
alpha: Alpha.buttonHover + Alpha.subtle,
)
: context.conduitTheme.textPrimary.withValues(
alpha: Alpha.subtle,
),
width: BorderWidth.regular,
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Platform.isIOS ? CupertinoIcons.search : Icons.travel_explore,
size: IconSize.small,
color: widget.enabled
? (webSearchEnabled
? context.conduitTheme.textPrimary
: context.conduitTheme.textPrimary.withValues(
alpha: Alpha.strong,
))
: context.conduitTheme.textPrimary.withValues(
alpha: Alpha.disabled,
),
),
const SizedBox(width: Spacing.sm),
Flexible(
child: Text(
'Search',
style: TextStyle(
fontSize: AppTypography.bodySmall,
fontWeight: FontWeight.w500,
color: widget.enabled
? (webSearchEnabled
? context.conduitTheme.textPrimary
: context.conduitTheme.textPrimary.withValues(
alpha: Alpha.strong,
))
: context.conduitTheme.textPrimary.withValues(
alpha: Alpha.disabled,
),
),
),
),
],
),
),
);
}
Widget _buildWebSearchStatusIndicator() {
final webSearchEnabled = ref.watch(
webSearchEnabledProvider.select((enabled) => enabled),
);
if (!webSearchEnabled) return const SizedBox.shrink();
return Container(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.md,
vertical: Spacing.xs,
),
margin: const EdgeInsets.only(
left: Spacing.md,
right: Spacing.md,
bottom: Spacing.xs,
),
decoration: BoxDecoration(
color: context.conduitTheme.info.withValues(
alpha: Alpha.badgeBackground,
),
borderRadius: BorderRadius.circular(AppBorderRadius.badge),
border: Border.all(
color: context.conduitTheme.info.withValues(alpha: Alpha.subtle),
width: BorderWidth.regular,
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Platform.isIOS ? CupertinoIcons.search : Icons.travel_explore,
size: IconSize.small,
color: context.conduitTheme.info,
),
const SizedBox(width: Spacing.xs),
Text(
'Web search on',
style: AppTypography.captionStyle.copyWith(
color: context.conduitTheme.info,
),
),
],
),
);
}
void _showAttachmentOptions() {
showModalBottomSheet(
context: context,
backgroundColor: Colors.transparent,
builder: (context) => Container(
decoration: BoxDecoration(
color: context.conduitTheme.surfaceBackground,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(AppBorderRadius.bottomSheet),
),
boxShadow: ConduitShadows.modal,
),
padding: const EdgeInsets.all(Spacing.bottomSheetPadding),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Handle bar
Container(
width: 40,
height: 4,
decoration: BoxDecoration(
color: context.conduitTheme.textPrimary.withValues(
alpha: Alpha.medium,
),
borderRadius: BorderRadius.circular(2),
),
),
const SizedBox(height: Spacing.lg),
// Options grid
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
_buildAttachmentOption(
icon: Platform.isIOS ? CupertinoIcons.doc : Icons.attach_file,
label: 'File',
onTap: () {
Navigator.pop(context); // Close modal
widget.onFileAttachment?.call();
},
),
_buildAttachmentOption(
icon: Platform.isIOS ? CupertinoIcons.photo : Icons.image,
label: 'Photo',
onTap: () {
Navigator.pop(context); // Close modal
widget.onImageAttachment?.call();
},
),
_buildAttachmentOption(
icon: Platform.isIOS
? CupertinoIcons.camera
: Icons.camera_alt,
label: 'Camera',
onTap: () {
Navigator.pop(context); // Close modal
widget.onCameraCapture?.call();
},
),
],
),
const SizedBox(height: Spacing.lg),
],
),
),
);
}
Widget _buildAttachmentOption({
required IconData icon,
required String label,
VoidCallback? onTap,
}) {
return GestureDetector(
onTap: onTap,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 64,
height: 64,
decoration: BoxDecoration(
color: context.conduitTheme.textPrimary.withValues(
alpha: Alpha.subtle,
),
borderRadius: BorderRadius.circular(AppBorderRadius.lg),
border: Border.all(
color: context.conduitTheme.textPrimary.withValues(
alpha: Alpha.subtle,
),
width: BorderWidth.regular,
),
),
child: Icon(
icon,
color: context.conduitTheme.textPrimary,
size: IconSize.xl,
),
),
const SizedBox(height: Spacing.sm),
Text(
label,
style: AppTypography.labelStyle.copyWith(
color: context.conduitTheme.textPrimary,
),
),
],
),
);
}
}

811
lib/features/chat/widgets/modern_message_bubble.dart Normal file
View File

@@ -0,0 +1,811 @@
import 'dart:convert';
import 'package:flutter/material.dart';
import '../../../shared/theme/theme_extensions.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_animate/flutter_animate.dart';
import 'dart:io' show Platform;
import '../../../core/providers/app_providers.dart';
class ModernMessageBubble extends ConsumerStatefulWidget {
final dynamic message;
final bool isUser;
final bool isStreaming;
final String? modelName;
final VoidCallback? onCopy;
final VoidCallback? onEdit;
final VoidCallback? onRegenerate;
final VoidCallback? onLike;
final VoidCallback? onDislike;
const ModernMessageBubble({
super.key,
required this.message,
required this.isUser,
this.isStreaming = false,
this.modelName,
this.onCopy,
this.onEdit,
this.onRegenerate,
this.onLike,
this.onDislike,
});
@override
ConsumerState<ModernMessageBubble> createState() =>
_ModernMessageBubbleState();
}
class _ModernMessageBubbleState extends ConsumerState<ModernMessageBubble>
with TickerProviderStateMixin {
bool _showActions = false;
late AnimationController _fadeController;
late AnimationController _slideController;
static const int _maxCachedImages = 24;
// Cache for image base64 data to prevent repeated API calls
final Map<String, String?> _imageCache = {};
@override
void initState() {
super.initState();
_fadeController = AnimationController(
duration: AnimationDuration.microInteraction,
vsync: this,
);
_slideController = AnimationController(
duration: AnimationDuration.messageSlide,
vsync: this,
);
}
@override
void dispose() {
_fadeController.dispose();
_slideController.dispose();
super.dispose();
}
void _toggleActions() {
setState(() {
_showActions = !_showActions;
});
if (_showActions) {
_fadeController.forward();
_slideController.forward();
} else {
_fadeController.reverse();
_slideController.reverse();
}
}
@override
Widget build(BuildContext context) {
if (widget.isUser) {
return _buildUserMessage();
} else {
return _buildAssistantMessage();
}
}
Widget _buildUserMessage() {
return Container(
width: double.infinity,
margin: const EdgeInsets.only(
bottom: Spacing.messagePadding,
left: Spacing.xxxl,
right: Spacing.xs,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
child: GestureDetector(
onLongPress: () => _toggleActions(),
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.messagePadding,
vertical: Spacing.sm,
),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
context.conduitTheme.chatBubbleUser.withValues(
alpha: 0.95,
),
context.conduitTheme.chatBubbleUser,
],
),
borderRadius: BorderRadius.circular(
AppBorderRadius.messageBubble,
),
border: Border.all(
color: context.conduitTheme.chatBubbleUserBorder,
width: BorderWidth.regular,
),
boxShadow: ConduitShadows.high,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Display images if any
if (widget.message.attachmentIds != null &&
widget.message.attachmentIds!.isNotEmpty)
_buildAttachmentImages(),
// Display text content if any
if (widget.message.content.isNotEmpty) ...[
if (widget.message.attachmentIds != null &&
widget.message.attachmentIds!.isNotEmpty)
const SizedBox(height: Spacing.sm),
_buildCustomText(
widget.message.content,
context.conduitTheme.chatBubbleUserText,
),
],
],
),
),
),
),
],
),
)
.animate()
.fadeIn(duration: AnimationDuration.messageAppear)
.slideX(
begin: AnimationValues.messageSlideDistance,
end: 0,
duration: AnimationDuration.messageSlide,
curve: AnimationCurves.messageSlide,
);
}
Widget _buildAssistantMessage() {
return Container(
width: double.infinity,
margin: const EdgeInsets.only(
bottom: Spacing.lg,
left: Spacing.xs,
right: Spacing.xxxl,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Simplified AI Name and Avatar
Padding(
padding: const EdgeInsets.only(bottom: 12),
child: Row(
children: [
Container(
width: 20,
height: 20,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
context.conduitTheme.buttonPrimary.withValues(
alpha: 0.9,
),
context.conduitTheme.buttonPrimary,
],
),
borderRadius: BorderRadius.circular(
AppBorderRadius.small,
),
),
child: Icon(
Icons.auto_awesome,
color: context.conduitTheme.buttonPrimaryText,
size: 12,
),
),
const SizedBox(width: Spacing.xs),
Text(
widget.modelName ?? 'Assistant',
style: TextStyle(
color: context.conduitTheme.textSecondary,
fontSize: AppTypography.bodySmall,
fontWeight: FontWeight.w500,
letterSpacing: 0.1,
),
),
],
),
),
// Message Content
GestureDetector(
onLongPress: () => _toggleActions(),
child: Container(
padding: const EdgeInsets.all(Spacing.messagePadding),
decoration: BoxDecoration(
color: context.conduitTheme.chatBubbleAssistant,
borderRadius: BorderRadius.circular(
AppBorderRadius.messageBubble,
),
border: Border.all(
color: context.conduitTheme.chatBubbleAssistantBorder,
width: BorderWidth.regular,
),
boxShadow: ConduitShadows.low,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Check for typing indicator - show for empty content OR explicit typing indicator during streaming
if ((widget.message.content.isEmpty ||
widget.message.content == '[TYPING_INDICATOR]') &&
widget.isStreaming) ...[
_buildTypingIndicator(),
] else if (widget.message.content.isNotEmpty &&
widget.message.content != '[TYPING_INDICATOR]') ...[
_buildCustomText(
widget.message.content,
context.conduitTheme.chatBubbleAssistantText,
),
] else
// Fallback: show empty state for non-streaming empty messages
const SizedBox.shrink(),
// Action buttons
if (_showActions) ...[
const SizedBox(height: Spacing.md),
_buildActionButtons(),
],
],
),
),
),
],
),
)
.animate()
.fadeIn(duration: AnimationDuration.messageAppear)
.slideX(
begin: -AnimationValues.messageSlideDistance,
end: 0,
duration: AnimationDuration.messageSlide,
curve: AnimationCurves.messageSlide,
);
}
Widget _buildAttachmentImages() {
if (widget.message.attachmentIds == null ||
widget.message.attachmentIds!.isEmpty) {
return const SizedBox.shrink();
}
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: widget.message.attachmentIds!.map<Widget>((attachmentId) {
return Consumer(
builder: (context, ref, child) {
final api = ref.watch(apiServiceProvider);
if (api == null) return const SizedBox.shrink();
return FutureBuilder<String?>(
future: _getCachedImageBase64(api, attachmentId),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Container(
height: 150,
width: 200,
margin: const EdgeInsets.only(bottom: Spacing.xs),
decoration: BoxDecoration(
color: context.conduitTheme.surfaceBackground.withValues(
alpha: 0.5,
),
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
),
child: Center(
child: CircularProgressIndicator(
color: context.conduitTheme.buttonPrimary,
strokeWidth: 2,
),
),
);
}
if (snapshot.hasError ||
!snapshot.hasData ||
snapshot.data == null) {
return Container(
height: 100,
width: 150,
margin: const EdgeInsets.only(bottom: Spacing.xs),
decoration: BoxDecoration(
color: context.conduitTheme.surfaceBackground.withValues(
alpha: 0.3,
),
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
border: Border.all(
color: context.conduitTheme.textSecondary.withValues(
alpha: 0.3,
),
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.broken_image_outlined,
color: context.conduitTheme.textSecondary,
size: 32,
),
const SizedBox(height: Spacing.xs),
Text(
'Image unavailable',
style: TextStyle(
color: context.conduitTheme.textSecondary,
fontSize: AppTypography.bodySmall,
),
),
],
),
);
}
final base64Data = snapshot.data!;
try {
// Handle data URLs (data:image/...;base64,...)
String actualBase64;
if (base64Data.startsWith('data:')) {
// Extract base64 part from data URL
final commaIndex = base64Data.indexOf(',');
if (commaIndex != -1) {
actualBase64 = base64Data.substring(commaIndex + 1);
} else {
throw Exception('Invalid data URL format');
}
} else {
// Direct base64 string
actualBase64 = base64Data;
}
final imageBytes = base64.decode(actualBase64);
return Container(
margin: const EdgeInsets.only(bottom: Spacing.xs),
constraints: const BoxConstraints(
maxWidth: 300,
maxHeight: 300,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
child: Image.memory(
imageBytes,
fit: BoxFit.cover,
errorBuilder: (context, error, stackTrace) {
return Container(
height: 100,
width: 150,
decoration: BoxDecoration(
color: context.conduitTheme.surfaceBackground
.withValues(alpha: 0.3),
borderRadius: BorderRadius.circular(
AppBorderRadius.sm,
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.error_outline,
color: context.conduitTheme.error,
size: 32,
),
const SizedBox(height: Spacing.xs),
Text(
'Failed to load image',
style: TextStyle(
color: context.conduitTheme.error,
fontSize: AppTypography.bodySmall,
),
),
],
),
);
},
),
),
);
} catch (e) {
return Container(
height: 100,
width: 150,
margin: const EdgeInsets.only(bottom: Spacing.xs),
decoration: BoxDecoration(
color: context.conduitTheme.surfaceBackground.withValues(
alpha: 0.3,
),
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.error_outline,
color: context.conduitTheme.error,
size: 32,
),
const SizedBox(height: Spacing.xs),
Text(
'Invalid image format',
style: TextStyle(
color: context.conduitTheme.error,
fontSize: AppTypography.bodySmall,
),
),
],
),
);
}
},
);
},
);
}).toList(),
);
}
Future<String?> _getCachedImageBase64(dynamic api, String fileId) async {
// Check cache first to prevent repeated API calls
if (_imageCache.containsKey(fileId)) {
return _imageCache[fileId];
}
// If not in cache, get the image and cache it
final result = await _getImageBase64(api, fileId);
// Simple LRU-like eviction to bound memory
if (_imageCache.length >= _maxCachedImages) {
_imageCache.remove(_imageCache.keys.first);
}
_imageCache[fileId] = result;
return result;
}
Future<String?> _getImageBase64(dynamic api, String fileId) async {
try {
// Check if this is already a data URL (for images)
if (fileId.startsWith('data:')) {
return fileId;
}
// First, get file info to determine if it's an image
final fileInfo = await api.getFileInfo(fileId);
final fileName =
fileInfo['filename'] ??
fileInfo['meta']?['name'] ??
fileInfo['name'] ??
fileInfo['file_name'] ??
fileInfo['original_name'] ??
fileInfo['original_filename'] ??
'';
final ext = fileName.toLowerCase().split('.').last;
// Only process image files
if (!['jpg', 'jpeg', 'png', 'gif', 'webp'].contains(ext)) {
debugPrint('DEBUG: Skipping non-image file: $fileName');
return null;
}
// Get file content as base64 string
final fileContent = await api.getFileContent(fileId);
return fileContent;
} catch (e) {
debugPrint('DEBUG: Error getting image content for $fileId: $e');
return null;
}
}
Widget _buildCustomText(String text, [Color? textColor]) {
// Simple markdown-like parsing for efficiency
final lines = text.split('\n');
final widgets = <Widget>[];
for (int i = 0; i < lines.length; i++) {
final line = lines[i];
if (line.trim().isEmpty) {
if (i < lines.length - 1) {
widgets.add(const SizedBox(height: Spacing.sm));
}
continue;
}
// Parse basic markdown
Widget textWidget = _parseMarkdownLine(line, textColor);
if (i < lines.length - 1) {
widgets.add(textWidget);
widgets.add(const SizedBox(height: Spacing.xs));
} else {
widgets.add(textWidget);
}
}
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: widgets,
);
}
Widget _parseMarkdownLine(String line, [Color? textColor]) {
// Handle code blocks
if (line.startsWith('```')) {
return Container(
margin: const EdgeInsets.symmetric(vertical: Spacing.xs),
padding: const EdgeInsets.all(Spacing.md),
decoration: BoxDecoration(
color: context.conduitTheme.surfaceBackground.withValues(
alpha: Alpha.badgeBackground,
),
borderRadius: BorderRadius.circular(AppBorderRadius.sm),
border: Border.all(
color: context.conduitTheme.textPrimary.withValues(
alpha: Alpha.subtle,
),
width: BorderWidth.regular,
),
),
child: Text(
line.substring(3),
style: AppTypography.chatCodeStyle.copyWith(
color: textColor ?? context.conduitTheme.textSecondary,
),
),
)
.animate()
.fadeIn(duration: AnimationDuration.microInteraction)
.slideX(
begin: 0.1,
end: 0,
duration: AnimationDuration.microInteraction,
);
}
// Handle headers
if (line.startsWith('#')) {
int level = 0;
while (level < line.length && line[level] == '#') {
level++;
}
final fontSize = AppTypography.headlineMedium - (level * 2);
return Text(
line.substring(level).trim(),
style: AppTypography.headlineMediumStyle.copyWith(
color: textColor ?? context.conduitTheme.textPrimary,
fontSize: fontSize.toDouble(),
),
)
.animate()
.fadeIn(duration: AnimationDuration.microInteraction)
.slideX(
begin: 0.1,
end: 0,
duration: AnimationDuration.microInteraction,
);
}
// Handle inline code
if (line.contains('`')) {
final parts = line.split('`');
final widgets = <Widget>[];
for (int i = 0; i < parts.length; i++) {
if (parts[i].isNotEmpty) {
if (i % 2 == 1) {
// Inline code
widgets.add(
Container(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.xs + Spacing.xxs,
vertical: Spacing.xxs,
),
decoration: BoxDecoration(
color: context.conduitTheme.textPrimary.withValues(
alpha: Alpha.badgeBackground,
),
borderRadius: BorderRadius.circular(AppBorderRadius.xs),
),
child: Text(
parts[i],
style: AppTypography.chatCodeStyle.copyWith(
color: textColor ?? context.conduitTheme.textSecondary,
),
),
),
);
} else {
// Regular text
widgets.add(
Text(
parts[i],
style: AppTypography.chatMessageStyle.copyWith(
color: textColor ?? context.conduitTheme.textPrimary,
),
),
);
}
}
}
return Wrap(
crossAxisAlignment: WrapCrossAlignment.start,
children: widgets,
)
.animate()
.fadeIn(duration: AnimationDuration.microInteraction)
.slideX(
begin: 0.1,
end: 0,
duration: AnimationDuration.microInteraction,
);
}
// Regular text
return Text(
line,
style: AppTypography.chatMessageStyle.copyWith(
color: textColor ?? context.conduitTheme.textPrimary,
letterSpacing: 0.1,
),
)
.animate()
.fadeIn(duration: AnimationDuration.microInteraction)
.slideX(
begin: 0.1,
end: 0,
duration: AnimationDuration.microInteraction,
);
}
Widget _buildTypingIndicator() {
return Consumer(
builder: (context, ref, child) {
// Show only animated dots, no text
return _buildTypingDots();
},
);
}
Widget _buildTypingDots() {
return Row(
children: List.generate(3, (index) {
return Container(
margin: EdgeInsets.only(right: index < 2 ? Spacing.xs : 0),
width: 6,
height: 6,
decoration: BoxDecoration(
color: context.conduitTheme.loadingIndicator,
borderRadius: BorderRadius.circular(3),
),
)
.animate(onPlay: (controller) => controller.repeat())
.scale(
duration: AnimationDuration.typingIndicator,
begin: const Offset(
AnimationValues.typingIndicatorScale,
AnimationValues.typingIndicatorScale,
),
end: const Offset(1.0, 1.0),
curve: AnimationCurves.typingIndicator,
delay: Duration(
milliseconds: index * 200,
), // Stagger the animation
);
}),
);
}
Widget _buildActionButtons() {
return Wrap(
spacing: Spacing.sm,
runSpacing: Spacing.sm,
children: [
_buildActionButton(
icon: Platform.isIOS ? CupertinoIcons.pencil : Icons.edit_outlined,
label: 'Edit',
onTap: widget.onEdit,
),
_buildActionButton(
icon: Platform.isIOS
? CupertinoIcons.doc_on_clipboard
: Icons.content_copy,
label: 'Copy',
onTap: widget.onCopy,
),
_buildActionButton(
icon: Platform.isIOS
? CupertinoIcons.speaker_1
: Icons.volume_up_outlined,
label: 'Read',
onTap: () => _handleTextToSpeech(context),
),
_buildActionButton(
icon: Platform.isIOS
? CupertinoIcons.hand_thumbsup
: Icons.thumb_up_outlined,
label: 'Like',
onTap: widget.onLike,
),
_buildActionButton(
icon: Platform.isIOS
? CupertinoIcons.hand_thumbsdown
: Icons.thumb_down_outlined,
label: 'Dislike',
onTap: widget.onDislike,
),
_buildActionButton(
icon: Platform.isIOS ? CupertinoIcons.refresh : Icons.refresh,
label: 'Regenerate',
onTap: widget.onRegenerate,
),
],
);
}
Widget _buildActionButton({
required IconData icon,
required String label,
VoidCallback? onTap,
}) {
return GestureDetector(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: Spacing.actionButtonPadding,
vertical: Spacing.xs,
),
decoration: BoxDecoration(
color: context.conduitTheme.surfaceBackground.withValues(
alpha: Alpha.buttonHover,
),
borderRadius: BorderRadius.circular(AppBorderRadius.actionButton),
border: Border.all(
color: context.conduitTheme.textPrimary.withValues(
alpha: Alpha.subtle,
),
width: BorderWidth.regular,
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
icon,
size: IconSize.small,
color: context.conduitTheme.iconSecondary,
),
const SizedBox(width: Spacing.xs),
Text(
label,
style: AppTypography.labelStyle.copyWith(
color: context.conduitTheme.textSecondary,
),
),
],
),
),
).animate().scale(
duration: AnimationDuration.buttonPress,
curve: AnimationCurves.buttonPress,
);
}
void _handleTextToSpeech(BuildContext context) {
// Implementation for text-to-speech functionality
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Text-to-speech feature coming soon!'),
backgroundColor: context.conduitTheme.info,
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(AppBorderRadius.snackbar),
),
),
);
}
}

259
lib/features/chat/widgets/tag_management_dialog.dart Normal file
View File

@@ -0,0 +1,259 @@
import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../../../shared/theme/theme_extensions.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/models/conversation.dart';
import '../../../core/providers/app_providers.dart';
class TagManagementDialog extends ConsumerStatefulWidget {
final Conversation conversation;
const TagManagementDialog({super.key, required this.conversation});
@override
ConsumerState<TagManagementDialog> createState() =>
_TagManagementDialogState();
}
class _TagManagementDialogState extends ConsumerState<TagManagementDialog> {
final _tagController = TextEditingController();
bool _isAdding = false;
@override
void dispose() {
_tagController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final conversationTags = widget.conversation.tags;
return Dialog(
child: Container(
width: 400,
constraints: const BoxConstraints(maxHeight: 500),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Header
Container(
padding: const EdgeInsets.all(Spacing.md),
decoration: BoxDecoration(
color: theme.colorScheme.primaryContainer,
borderRadius: const BorderRadius.vertical(
top: Radius.circular(AppBorderRadius.lg),
),
),
child: Row(
children: [
Icon(
Platform.isIOS ? CupertinoIcons.tag : Icons.label,
color: theme.colorScheme.onPrimaryContainer,
),
const SizedBox(width: Spacing.sm),
Text(
'Manage Tags',
style: theme.textTheme.titleLarge?.copyWith(
color: theme.colorScheme.onPrimaryContainer,
fontWeight: FontWeight.w600,
),
),
const Spacer(),
IconButton(
icon: Icon(
Platform.isIOS ? CupertinoIcons.xmark : Icons.close,
color: theme.colorScheme.onPrimaryContainer,
),
onPressed: () => Navigator.pop(context),
),
],
),
),
// Add new tag section
Padding(
padding: const EdgeInsets.all(Spacing.md),
child: Row(
children: [
Expanded(
child: TextField(
controller: _tagController,
decoration: InputDecoration(
hintText: 'Add new tag',
border: const OutlineInputBorder(),
prefixIcon: Icon(
Platform.isIOS
? CupertinoIcons.tag_fill
: Icons.label,
),
),
onSubmitted: (_) => _addTag(),
),
),
const SizedBox(width: Spacing.sm),
ElevatedButton(
onPressed: _isAdding ? null : _addTag,
child: _isAdding
? const SizedBox(
width: Spacing.md,
height: 16,
child: CircularProgressIndicator(strokeWidth: 2),
)
: const Text('Add'),
),
],
),
),
const Divider(height: 1),
// Current tags
Expanded(
child: conversationTags.isEmpty
? Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Platform.isIOS
? CupertinoIcons.tag
: Icons.label_outline,
size: 48,
color: theme.colorScheme.onSurface.withValues(
alpha: 0.3,
),
),
const SizedBox(height: Spacing.md),
Text(
'No tags yet',
style: theme.textTheme.bodyLarge?.copyWith(
color: theme.colorScheme.onSurface.withValues(
alpha: 0.6,
),
),
),
const SizedBox(height: Spacing.sm),
Text(
'Add tags to organize and find conversations easily',
style: theme.textTheme.bodySmall?.copyWith(
color: theme.colorScheme.onSurface.withValues(
alpha: 0.5,
),
),
textAlign: TextAlign.center,
),
],
),
)
: ListView.builder(
padding: const EdgeInsets.all(Spacing.md),
itemCount: conversationTags.length,
itemBuilder: (context, index) {
final tag = conversationTags[index];
return _buildTagChip(context, tag);
},
),
),
// Bottom actions
Padding(
padding: const EdgeInsets.all(Spacing.md),
child: SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () => Navigator.pop(context),
child: const Text('Done'),
),
),
),
],
),
),
);
}
Widget _buildTagChip(BuildContext context, String tag) {
final theme = Theme.of(context);
return Container(
margin: const EdgeInsets.only(bottom: 8),
child: Chip(
avatar: Icon(
Platform.isIOS ? CupertinoIcons.tag_fill : Icons.label,
size: 16,
color: theme.colorScheme.onPrimaryContainer,
),
label: Text(tag),
backgroundColor: theme.colorScheme.primaryContainer,
deleteIcon: Icon(
Platform.isIOS ? CupertinoIcons.xmark_circle_fill : Icons.cancel,
size: 18,
),
onDeleted: () => _removeTag(tag),
),
);
}
Future<void> _addTag() async {
final tag = _tagController.text.trim();
if (tag.isEmpty || widget.conversation.tags.contains(tag)) return;
setState(() => _isAdding = true);
try {
final api = ref.read(apiServiceProvider);
if (api == null) throw Exception('No API service available');
await api.addTagToConversation(widget.conversation.id, tag);
ref.invalidate(conversationsProvider);
_tagController.clear();
if (mounted) {
ScaffoldMessenger.of(
context,
).showSnackBar(SnackBar(content: Text('Tag "$tag" added')));
}
} catch (e) {
if (mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Error adding tag: $e'),
backgroundColor: Theme.of(context).colorScheme.error,
),
);
}
} finally {
setState(() => _isAdding = false);
}
}
Future<void> _removeTag(String tag) async {
try {
final api = ref.read(apiServiceProvider);
if (api == null) throw Exception('No API service available');
await api.removeTagFromConversation(widget.conversation.id, tag);
ref.invalidate(conversationsProvider);
if (mounted) {
ScaffoldMessenger.of(
context,
).showSnackBar(SnackBar(content: Text('Tag "$tag" removed')));
}
} catch (e) {
if (mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Error removing tag: $e'),
backgroundColor: Theme.of(context).colorScheme.error,
),
);
}
}
}
}