refactor: debug logs
This commit is contained in:
cogwheel0
537
lib/features/chat/widgets/assistant_message_widget.dart
Normal file
537
lib/features/chat/widgets/assistant_message_widget.dart
Normal file
@@ -0,0 +1,537 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:flutter_animate/flutter_animate.dart';
|
||||
import 'dart:async';
|
||||
import 'dart:io' show Platform;
|
||||
import '../../../shared/theme/theme_extensions.dart';
|
||||
import '../../../shared/widgets/markdown/streaming_markdown_widget.dart';
|
||||
import '../../../core/utils/reasoning_parser.dart';
|
||||
import 'enhanced_image_attachment.dart';
|
||||
|
||||
class AssistantMessageWidget extends ConsumerStatefulWidget {
|
||||
final dynamic message;
|
||||
final bool isStreaming;
|
||||
final String? modelName;
|
||||
final VoidCallback? onCopy;
|
||||
final VoidCallback? onRegenerate;
|
||||
final VoidCallback? onLike;
|
||||
final VoidCallback? onDislike;
|
||||
|
||||
const AssistantMessageWidget({
|
||||
super.key,
|
||||
required this.message,
|
||||
this.isStreaming = false,
|
||||
this.modelName,
|
||||
this.onCopy,
|
||||
this.onRegenerate,
|
||||
this.onLike,
|
||||
this.onDislike,
|
||||
});
|
||||
|
||||
@override
|
||||
ConsumerState<AssistantMessageWidget> createState() =>
|
||||
_AssistantMessageWidgetState();
|
||||
}
|
||||
|
||||
class _AssistantMessageWidgetState extends ConsumerState<AssistantMessageWidget>
|
||||
with TickerProviderStateMixin {
|
||||
bool _showReasoning = false;
|
||||
late AnimationController _fadeController;
|
||||
late AnimationController _slideController;
|
||||
ReasoningContent? _reasoningContent;
|
||||
String _renderedContent = '';
|
||||
Timer? _throttleTimer;
|
||||
String? _pendingContent;
|
||||
Widget? _cachedAvatar;
|
||||
|
||||
@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 didChangeDependencies() {
|
||||
super.didChangeDependencies();
|
||||
// Build cached avatar when theme context is available
|
||||
_buildCachedAvatar();
|
||||
}
|
||||
|
||||
@override
|
||||
void didUpdateWidget(AssistantMessageWidget 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();
|
||||
}
|
||||
|
||||
// Rebuild cached avatar if model name changes
|
||||
if (oldWidget.modelName != widget.modelName) {
|
||||
_buildCachedAvatar();
|
||||
}
|
||||
}
|
||||
|
||||
void _updateReasoningContent() {
|
||||
if (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;
|
||||
}
|
||||
|
||||
void _buildCachedAvatar() {
|
||||
_cachedAvatar = Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_fadeController.dispose();
|
||||
_slideController.dispose();
|
||||
_throttleTimer?.cancel();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return _buildDocumentationMessage();
|
||||
}
|
||||
|
||||
Widget _buildDocumentationMessage() {
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
margin: const EdgeInsets.only(bottom: 16, left: 12, right: 12),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Cached AI Name and Avatar to prevent flashing
|
||||
_cachedAvatar ?? const SizedBox.shrink(),
|
||||
|
||||
// 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
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Display attachment images if any (for user uploaded images)
|
||||
if (widget.message.attachmentIds != null &&
|
||||
widget.message.attachmentIds!.isNotEmpty) ...[
|
||||
_buildAttachmentImages(),
|
||||
const SizedBox(height: Spacing.md),
|
||||
],
|
||||
|
||||
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 below the message content (always visible)
|
||||
const SizedBox(height: Spacing.sm),
|
||||
_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();
|
||||
}
|
||||
|
||||
// Process content to ensure proper image rendering
|
||||
final processedContent = _processContentForImages(content);
|
||||
|
||||
return StreamingMarkdownWidget(
|
||||
staticContent: processedContent,
|
||||
isStreaming: widget.isStreaming,
|
||||
);
|
||||
}
|
||||
|
||||
String _processContentForImages(String content) {
|
||||
// Check if content contains image markdown or base64 data URLs
|
||||
// This ensures images generated by AI are properly formatted
|
||||
|
||||
// Pattern to detect base64 images that might not be in markdown format
|
||||
final base64Pattern = RegExp(r'data:image/[^;]+;base64,[A-Za-z0-9+/]+=*');
|
||||
|
||||
// If we find base64 images not wrapped in markdown, wrap them
|
||||
if (base64Pattern.hasMatch(content) && !content.contains('![')) {
|
||||
content = content.replaceAllMapped(base64Pattern, (match) {
|
||||
final imageData = match.group(0)!;
|
||||
// Check if this image is already in markdown format
|
||||
final markdownCheck = RegExp(
|
||||
r'!\[.*?\]\(' + RegExp.escape(imageData) + r'\)',
|
||||
);
|
||||
if (!markdownCheck.hasMatch(content)) {
|
||||
return '\n\n';
|
||||
}
|
||||
return imageData;
|
||||
});
|
||||
}
|
||||
|
||||
return content;
|
||||
}
|
||||
|
||||
Widget _buildAttachmentImages() {
|
||||
if (widget.message.attachmentIds == null ||
|
||||
widget.message.attachmentIds!.isEmpty) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
final imageCount = widget.message.attachmentIds!.length;
|
||||
|
||||
// Display images in a clean, modern layout for assistant messages
|
||||
if (imageCount == 1) {
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
||||
child: EnhancedImageAttachment(
|
||||
attachmentId: widget.message.attachmentIds![0],
|
||||
isMarkdownFormat: true,
|
||||
constraints: const BoxConstraints(maxWidth: 500, maxHeight: 400),
|
||||
),
|
||||
);
|
||||
} else {
|
||||
return Wrap(
|
||||
spacing: Spacing.sm,
|
||||
runSpacing: Spacing.sm,
|
||||
children: widget.message.attachmentIds!.map<Widget>((attachmentId) {
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
||||
child: EnhancedImageAttachment(
|
||||
attachmentId: attachmentId,
|
||||
isMarkdownFormat: true,
|
||||
constraints: BoxConstraints(
|
||||
maxWidth: imageCount == 2 ? 245 : 160,
|
||||
maxHeight: imageCount == 2 ? 245 : 160,
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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() {
|
||||
final isErrorMessage =
|
||||
widget.message.content.contains('⚠️') ||
|
||||
widget.message.content.contains('Error') ||
|
||||
widget.message.content.contains('timeout') ||
|
||||
widget.message.content.contains('retry options');
|
||||
|
||||
return Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: [
|
||||
_buildActionButton(
|
||||
icon: Platform.isIOS
|
||||
? CupertinoIcons.doc_on_clipboard
|
||||
: Icons.content_copy,
|
||||
label: 'Copy',
|
||||
onTap: widget.onCopy,
|
||||
),
|
||||
if (isErrorMessage) ...[
|
||||
_buildActionButton(
|
||||
icon: Platform.isIOS
|
||||
? CupertinoIcons.arrow_clockwise
|
||||
: Icons.refresh,
|
||||
label: 'Retry',
|
||||
onTap: widget.onRegenerate,
|
||||
),
|
||||
] else ...[
|
||||
_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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -11,6 +11,7 @@ import '../../../shared/widgets/empty_states.dart';
|
||||
import '../../../shared/utils/platform_utils.dart';
|
||||
import '../services/conversation_search_service.dart';
|
||||
import '../../../core/providers/app_providers.dart';
|
||||
import '../../../core/utils/debug_logger.dart';
|
||||
|
||||
/// Advanced conversation search widget with filters and results
|
||||
class ConversationSearchWidget extends ConsumerStatefulWidget {
|
||||
@@ -87,7 +88,7 @@ class _ConversationSearchWidgetState
|
||||
|
||||
ref.read(conversationSearchResultsProvider.notifier).state = results;
|
||||
} catch (e) {
|
||||
debugPrint('Search error: $e');
|
||||
DebugLogger.error('Search error', e);
|
||||
} finally {
|
||||
if (mounted) {
|
||||
setState(() {
|
||||
|
||||
@@ -1,752 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:flutter_animate/flutter_animate.dart';
|
||||
import 'dart:async';
|
||||
import 'dart:io' show Platform;
|
||||
import '../../../shared/theme/theme_extensions.dart';
|
||||
import '../../../shared/widgets/markdown/streaming_markdown_widget.dart';
|
||||
import '../../../core/utils/reasoning_parser.dart';
|
||||
import 'enhanced_image_attachment.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;
|
||||
Widget? _cachedAvatar;
|
||||
|
||||
@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 didChangeDependencies() {
|
||||
super.didChangeDependencies();
|
||||
// Build cached avatar when theme context is available
|
||||
_buildCachedAvatar();
|
||||
}
|
||||
|
||||
@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();
|
||||
}
|
||||
|
||||
// Rebuild cached avatar if model name changes
|
||||
if (oldWidget.modelName != widget.modelName) {
|
||||
_buildCachedAvatar();
|
||||
}
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
void _buildCachedAvatar() {
|
||||
_cachedAvatar = Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_fadeController.dispose();
|
||||
_slideController.dispose();
|
||||
_throttleTimer?.cancel();
|
||||
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() {
|
||||
final hasImages = widget.message.attachmentIds != null &&
|
||||
widget.message.attachmentIds!.isNotEmpty;
|
||||
final hasText = widget.message.content.isNotEmpty;
|
||||
|
||||
return GestureDetector(
|
||||
onLongPress: () => _toggleActions(),
|
||||
behavior: HitTestBehavior.translucent,
|
||||
child: Container(
|
||||
width: double.infinity,
|
||||
margin: const EdgeInsets.only(bottom: 12, left: 50, right: 12),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
// Display images outside and above the text bubble
|
||||
if (hasImages) ...[
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
Flexible(
|
||||
child: _buildUserAttachmentImages(),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (hasText) const SizedBox(height: Spacing.xs),
|
||||
],
|
||||
|
||||
// Display text bubble if there's text content
|
||||
if (hasText)
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
Flexible(
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 8,
|
||||
),
|
||||
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.bodyMedium,
|
||||
height: 1.3,
|
||||
letterSpacing: 0.1,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Action buttons below the message bubble
|
||||
if (_showActions) ...[
|
||||
const SizedBox(height: Spacing.sm),
|
||||
_buildUserActionButtons(),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
.animate()
|
||||
.fadeIn(duration: const Duration(milliseconds: 400))
|
||||
.slideX(
|
||||
begin: 0.2,
|
||||
end: 0,
|
||||
duration: const Duration(milliseconds: 400),
|
||||
curve: Curves.easeOutCubic,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDocumentationMessage() {
|
||||
return GestureDetector(
|
||||
onLongPress: () => _toggleActions(),
|
||||
behavior: HitTestBehavior.translucent,
|
||||
child: Container(
|
||||
width: double.infinity,
|
||||
margin: const EdgeInsets.only(bottom: 16, left: 12, right: 12),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Cached AI Name and Avatar to prevent flashing
|
||||
_cachedAvatar ?? const SizedBox.shrink(),
|
||||
|
||||
// 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
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Display attachment images if any (for user uploaded images)
|
||||
if (widget.message.attachmentIds != null &&
|
||||
widget.message.attachmentIds!.isNotEmpty) ...[
|
||||
_buildAttachmentImages(),
|
||||
const SizedBox(height: Spacing.md),
|
||||
],
|
||||
|
||||
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 below the message content
|
||||
if (_showActions) ...[
|
||||
const SizedBox(height: Spacing.sm),
|
||||
_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();
|
||||
}
|
||||
|
||||
// Process content to ensure proper image rendering
|
||||
final processedContent = _processContentForImages(content);
|
||||
|
||||
return StreamingMarkdownWidget(
|
||||
staticContent: processedContent,
|
||||
isStreaming: widget.isStreaming,
|
||||
);
|
||||
}
|
||||
|
||||
String _processContentForImages(String content) {
|
||||
// Check if content contains image markdown or base64 data URLs
|
||||
// This ensures images generated by AI are properly formatted
|
||||
|
||||
// Pattern to detect base64 images that might not be in markdown format
|
||||
final base64Pattern = RegExp(r'data:image/[^;]+;base64,[A-Za-z0-9+/]+=*');
|
||||
|
||||
// If we find base64 images not wrapped in markdown, wrap them
|
||||
if (base64Pattern.hasMatch(content) && !content.contains('![')) {
|
||||
content = content.replaceAllMapped(base64Pattern, (match) {
|
||||
final imageData = match.group(0)!;
|
||||
// Check if this image is already in markdown format
|
||||
final markdownCheck = RegExp(r'!\[.*?\]\(' + RegExp.escape(imageData) + r'\)');
|
||||
if (!markdownCheck.hasMatch(content)) {
|
||||
return '\n\n';
|
||||
}
|
||||
return imageData;
|
||||
});
|
||||
}
|
||||
|
||||
return content;
|
||||
}
|
||||
|
||||
Widget _buildUserAttachmentImages() {
|
||||
if (widget.message.attachmentIds == null ||
|
||||
widget.message.attachmentIds!.isEmpty) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
final imageCount = widget.message.attachmentIds!.length;
|
||||
|
||||
// Similar to iMessage style but adapted for documentation widget
|
||||
if (imageCount == 1) {
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.lg),
|
||||
child: EnhancedImageAttachment(
|
||||
attachmentId: widget.message.attachmentIds![0],
|
||||
isUserMessage: true,
|
||||
constraints: const BoxConstraints(
|
||||
maxWidth: 280,
|
||||
maxHeight: 350,
|
||||
),
|
||||
),
|
||||
);
|
||||
} else if (imageCount == 2) {
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: widget.message.attachmentIds!.map((attachmentId) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.only(
|
||||
left: attachmentId == widget.message.attachmentIds!.first
|
||||
? 0
|
||||
: Spacing.xs,
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.lg),
|
||||
child: EnhancedImageAttachment(
|
||||
attachmentId: attachmentId,
|
||||
isUserMessage: true,
|
||||
constraints: const BoxConstraints(
|
||||
maxWidth: 135,
|
||||
maxHeight: 180,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
);
|
||||
} else {
|
||||
return Container(
|
||||
constraints: const BoxConstraints(maxWidth: 280),
|
||||
child: Wrap(
|
||||
alignment: WrapAlignment.end,
|
||||
spacing: Spacing.xs,
|
||||
runSpacing: Spacing.xs,
|
||||
children: widget.message.attachmentIds!.map((attachmentId) {
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
||||
child: EnhancedImageAttachment(
|
||||
attachmentId: attachmentId,
|
||||
isUserMessage: true,
|
||||
constraints: BoxConstraints(
|
||||
maxWidth: imageCount == 3 ? 135 : 90,
|
||||
maxHeight: imageCount == 3 ? 135 : 90,
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Widget _buildAttachmentImages() {
|
||||
if (widget.message.attachmentIds == null ||
|
||||
widget.message.attachmentIds!.isEmpty) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
final imageCount = widget.message.attachmentIds!.length;
|
||||
|
||||
// Display images in a clean, modern layout for assistant messages
|
||||
if (imageCount == 1) {
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
||||
child: EnhancedImageAttachment(
|
||||
attachmentId: widget.message.attachmentIds![0],
|
||||
isMarkdownFormat: true,
|
||||
constraints: const BoxConstraints(
|
||||
maxWidth: 500,
|
||||
maxHeight: 400,
|
||||
),
|
||||
),
|
||||
);
|
||||
} else {
|
||||
return Wrap(
|
||||
spacing: Spacing.sm,
|
||||
runSpacing: Spacing.sm,
|
||||
children: widget.message.attachmentIds!.map<Widget>((attachmentId) {
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
||||
child: EnhancedImageAttachment(
|
||||
attachmentId: attachmentId,
|
||||
isMarkdownFormat: true,
|
||||
constraints: BoxConstraints(
|
||||
maxWidth: imageCount == 2 ? 245 : 160,
|
||||
maxHeight: imageCount == 2 ? 245 : 160,
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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() {
|
||||
final isErrorMessage = widget.message.content.contains('⚠️') ||
|
||||
widget.message.content.contains('Error') ||
|
||||
widget.message.content.contains('timeout') ||
|
||||
widget.message.content.contains('retry options');
|
||||
|
||||
return Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: [
|
||||
_buildActionButton(
|
||||
icon: Platform.isIOS
|
||||
? CupertinoIcons.doc_on_clipboard
|
||||
: Icons.content_copy,
|
||||
label: 'Copy',
|
||||
onTap: widget.onCopy,
|
||||
),
|
||||
if (isErrorMessage) ...[
|
||||
_buildActionButton(
|
||||
icon: Platform.isIOS ? CupertinoIcons.arrow_clockwise : Icons.refresh,
|
||||
label: 'Retry',
|
||||
onTap: widget.onRegenerate,
|
||||
),
|
||||
] else ...[
|
||||
_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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildUserActionButtons() {
|
||||
return Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
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,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,621 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../shared/theme/theme_extensions.dart';
|
||||
import '../../../shared/widgets/markdown/streaming_markdown_widget.dart';
|
||||
import 'enhanced_image_attachment.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;
|
||||
|
||||
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;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_fadeController = AnimationController(
|
||||
duration: AnimationDuration.microInteraction,
|
||||
vsync: this,
|
||||
);
|
||||
_slideController = AnimationController(
|
||||
duration: AnimationDuration.messageSlide,
|
||||
vsync: this,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
Widget _buildUserAttachmentImages() {
|
||||
if (widget.message.attachmentIds == null ||
|
||||
widget.message.attachmentIds!.isEmpty) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
final imageCount = widget.message.attachmentIds!.length;
|
||||
|
||||
// iMessage-style image layout
|
||||
if (imageCount == 1) {
|
||||
// Single image - larger display
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.messageBubble),
|
||||
child: EnhancedImageAttachment(
|
||||
attachmentId: widget.message.attachmentIds![0],
|
||||
isUserMessage: true,
|
||||
constraints: const BoxConstraints(
|
||||
maxWidth: 280,
|
||||
maxHeight: 350,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
} else if (imageCount == 2) {
|
||||
// Two images side by side
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Flexible(
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: widget.message.attachmentIds!.map((attachmentId) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.only(
|
||||
left: attachmentId == widget.message.attachmentIds!.first
|
||||
? 0
|
||||
: Spacing.xs,
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.messageBubble),
|
||||
child: EnhancedImageAttachment(
|
||||
attachmentId: attachmentId,
|
||||
isUserMessage: true,
|
||||
constraints: const BoxConstraints(
|
||||
maxWidth: 135,
|
||||
maxHeight: 180,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
} else {
|
||||
// Grid layout for 3+ images
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
Flexible(
|
||||
child: Container(
|
||||
constraints: const BoxConstraints(maxWidth: 280),
|
||||
child: Wrap(
|
||||
alignment: WrapAlignment.end,
|
||||
spacing: Spacing.xs,
|
||||
runSpacing: Spacing.xs,
|
||||
children: widget.message.attachmentIds!.map((attachmentId) {
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
||||
child: EnhancedImageAttachment(
|
||||
attachmentId: attachmentId,
|
||||
isUserMessage: true,
|
||||
constraints: BoxConstraints(
|
||||
maxWidth: imageCount == 3 ? 135 : 90,
|
||||
maxHeight: imageCount == 3 ? 135 : 90,
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Widget _buildAssistantAttachmentImages() {
|
||||
if (widget.message.attachmentIds == null ||
|
||||
widget.message.attachmentIds!.isEmpty) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
// Assistant images - similar style but left-aligned
|
||||
return Wrap(
|
||||
spacing: Spacing.sm,
|
||||
runSpacing: Spacing.sm,
|
||||
children: widget.message.attachmentIds!.map<Widget>((attachmentId) {
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.messageBubble),
|
||||
child: EnhancedImageAttachment(
|
||||
attachmentId: attachmentId,
|
||||
constraints: const BoxConstraints(
|
||||
maxWidth: 300,
|
||||
maxHeight: 350,
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
);
|
||||
}
|
||||
|
||||
@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() {
|
||||
final hasImages = widget.message.attachmentIds != null &&
|
||||
widget.message.attachmentIds!.isNotEmpty;
|
||||
final hasText = widget.message.content.isNotEmpty;
|
||||
|
||||
return GestureDetector(
|
||||
onLongPress: () => _toggleActions(),
|
||||
behavior: HitTestBehavior.translucent,
|
||||
child: Container(
|
||||
width: double.infinity,
|
||||
margin: const EdgeInsets.only(
|
||||
bottom: Spacing.sm,
|
||||
left: Spacing.xxxl,
|
||||
right: Spacing.xs,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
// Display images outside and above the text bubble (iMessage style)
|
||||
if (hasImages) ...[
|
||||
_buildUserAttachmentImages(),
|
||||
if (hasText) const SizedBox(height: Spacing.xs),
|
||||
],
|
||||
|
||||
// Display text bubble if there's text content
|
||||
if (hasText)
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
Flexible(
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: Spacing.messagePadding,
|
||||
vertical: Spacing.xs,
|
||||
),
|
||||
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: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.08),
|
||||
blurRadius: 4,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: _buildCustomText(
|
||||
widget.message.content,
|
||||
context.conduitTheme.chatBubbleUserText,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Action buttons below the message
|
||||
if (_showActions) ...[
|
||||
const SizedBox(height: Spacing.sm),
|
||||
_buildUserActionButtons(),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
.animate()
|
||||
.fadeIn(duration: AnimationDuration.messageAppear)
|
||||
.slideX(
|
||||
begin: AnimationValues.messageSlideDistance,
|
||||
end: 0,
|
||||
duration: AnimationDuration.messageSlide,
|
||||
curve: AnimationCurves.messageSlide,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildAssistantMessage() {
|
||||
final hasImages = widget.message.attachmentIds != null &&
|
||||
widget.message.attachmentIds!.isNotEmpty;
|
||||
final hasContent = widget.message.content.isNotEmpty &&
|
||||
widget.message.content != '[TYPING_INDICATOR]';
|
||||
final showTyping = (widget.message.content.isEmpty ||
|
||||
widget.message.content == '[TYPING_INDICATOR]') &&
|
||||
widget.isStreaming;
|
||||
|
||||
return GestureDetector(
|
||||
onLongPress: () => _toggleActions(),
|
||||
behavior: HitTestBehavior.translucent,
|
||||
child: Container(
|
||||
width: double.infinity,
|
||||
margin: const EdgeInsets.only(
|
||||
bottom: Spacing.md,
|
||||
left: Spacing.xs,
|
||||
right: Spacing.xxxl,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// Simplified AI Name and Avatar
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
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,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
// Display images outside the bubble if any
|
||||
if (hasImages) ...[
|
||||
_buildAssistantAttachmentImages(),
|
||||
if (hasContent || showTyping) const SizedBox(height: Spacing.xs),
|
||||
],
|
||||
|
||||
// Message Content Bubble
|
||||
if (hasContent || showTyping)
|
||||
Container(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: Spacing.messagePadding,
|
||||
vertical: Spacing.xs,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: context.conduitTheme.chatBubbleAssistant,
|
||||
borderRadius: BorderRadius.circular(
|
||||
AppBorderRadius.messageBubble,
|
||||
),
|
||||
border: Border.all(
|
||||
color: context.conduitTheme.chatBubbleAssistantBorder,
|
||||
width: BorderWidth.regular,
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.05),
|
||||
blurRadius: 3,
|
||||
offset: const Offset(0, 1),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: showTyping
|
||||
? _buildTypingIndicator()
|
||||
: _buildCustomText(
|
||||
widget.message.content,
|
||||
context.conduitTheme.chatBubbleAssistantText,
|
||||
),
|
||||
),
|
||||
|
||||
// Action buttons below the message content
|
||||
if (_showActions) ...[
|
||||
const SizedBox(height: Spacing.sm),
|
||||
_buildActionButtons(),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
.animate()
|
||||
.fadeIn(duration: AnimationDuration.messageAppear)
|
||||
.slideX(
|
||||
begin: -AnimationValues.messageSlideDistance,
|
||||
end: 0,
|
||||
duration: AnimationDuration.messageSlide,
|
||||
curve: AnimationCurves.messageSlide,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Widget _buildCustomText(String text, [Color? textColor]) {
|
||||
// Use the new markdown widget for rich text rendering
|
||||
return StreamingMarkdownWidget(
|
||||
staticContent: text,
|
||||
isStreaming: widget.isStreaming,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
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() {
|
||||
final isErrorMessage = widget.message.content.contains('⚠️') ||
|
||||
widget.message.content.contains('Error') ||
|
||||
widget.message.content.contains('timeout') ||
|
||||
widget.message.content.contains('retry options');
|
||||
|
||||
return Wrap(
|
||||
spacing: Spacing.sm,
|
||||
runSpacing: Spacing.sm,
|
||||
children: [
|
||||
_buildActionButton(
|
||||
icon: Platform.isIOS
|
||||
? CupertinoIcons.doc_on_clipboard
|
||||
: Icons.content_copy,
|
||||
label: 'Copy',
|
||||
onTap: widget.onCopy,
|
||||
),
|
||||
if (isErrorMessage) ...[
|
||||
_buildActionButton(
|
||||
icon: Platform.isIOS ? CupertinoIcons.arrow_clockwise : Icons.refresh,
|
||||
label: 'Retry',
|
||||
onTap: widget.onRegenerate,
|
||||
),
|
||||
] else ...[
|
||||
_buildActionButton(
|
||||
icon: Platform.isIOS ? CupertinoIcons.pencil : Icons.edit_outlined,
|
||||
label: 'Edit',
|
||||
onTap: widget.onEdit,
|
||||
),
|
||||
_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,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildUserActionButtons() {
|
||||
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),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
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),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
346
lib/features/chat/widgets/user_message_bubble.dart
Normal file
346
lib/features/chat/widgets/user_message_bubble.dart
Normal file
@@ -0,0 +1,346 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../shared/theme/theme_extensions.dart';
|
||||
import 'enhanced_image_attachment.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;
|
||||
|
||||
class UserMessageBubble 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 UserMessageBubble({
|
||||
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<UserMessageBubble> createState() => _UserMessageBubbleState();
|
||||
}
|
||||
|
||||
class _UserMessageBubbleState extends ConsumerState<UserMessageBubble>
|
||||
with TickerProviderStateMixin {
|
||||
bool _showActions = false;
|
||||
late AnimationController _fadeController;
|
||||
late AnimationController _slideController;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_fadeController = AnimationController(
|
||||
duration: AnimationDuration.microInteraction,
|
||||
vsync: this,
|
||||
);
|
||||
_slideController = AnimationController(
|
||||
duration: AnimationDuration.messageSlide,
|
||||
vsync: this,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildUserAttachmentImages() {
|
||||
if (widget.message.attachmentIds == null ||
|
||||
widget.message.attachmentIds!.isEmpty) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
|
||||
final imageCount = widget.message.attachmentIds!.length;
|
||||
|
||||
// iMessage-style image layout
|
||||
if (imageCount == 1) {
|
||||
// Single image - larger display
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.messageBubble),
|
||||
child: EnhancedImageAttachment(
|
||||
attachmentId: widget.message.attachmentIds![0],
|
||||
isUserMessage: true,
|
||||
constraints: const BoxConstraints(maxWidth: 280, maxHeight: 350),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
} else if (imageCount == 2) {
|
||||
// Two images side by side
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Flexible(
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: widget.message.attachmentIds!.map((attachmentId) {
|
||||
return Padding(
|
||||
padding: EdgeInsets.only(
|
||||
left: attachmentId == widget.message.attachmentIds!.first
|
||||
? 0
|
||||
: Spacing.xs,
|
||||
),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(
|
||||
AppBorderRadius.messageBubble,
|
||||
),
|
||||
child: EnhancedImageAttachment(
|
||||
attachmentId: attachmentId,
|
||||
isUserMessage: true,
|
||||
constraints: const BoxConstraints(
|
||||
maxWidth: 135,
|
||||
maxHeight: 180,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
} else {
|
||||
// Grid layout for 3+ images
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
Flexible(
|
||||
child: Container(
|
||||
constraints: const BoxConstraints(maxWidth: 280),
|
||||
child: Wrap(
|
||||
alignment: WrapAlignment.end,
|
||||
spacing: Spacing.xs,
|
||||
runSpacing: Spacing.xs,
|
||||
children: widget.message.attachmentIds!.map((attachmentId) {
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(AppBorderRadius.md),
|
||||
child: EnhancedImageAttachment(
|
||||
attachmentId: attachmentId,
|
||||
isUserMessage: true,
|
||||
constraints: BoxConstraints(
|
||||
maxWidth: imageCount == 3 ? 135 : 90,
|
||||
maxHeight: imageCount == 3 ? 135 : 90,
|
||||
),
|
||||
),
|
||||
);
|
||||
}).toList(),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Assistant-only helpers removed; this widget renders only user bubbles.
|
||||
|
||||
@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) {
|
||||
return _buildUserMessage();
|
||||
}
|
||||
|
||||
Widget _buildUserMessage() {
|
||||
final hasImages =
|
||||
widget.message.attachmentIds != null &&
|
||||
widget.message.attachmentIds!.isNotEmpty;
|
||||
final hasText = widget.message.content.isNotEmpty;
|
||||
|
||||
return GestureDetector(
|
||||
onLongPress: () => _toggleActions(),
|
||||
behavior: HitTestBehavior.translucent,
|
||||
child: Container(
|
||||
width: double.infinity,
|
||||
margin: const EdgeInsets.only(
|
||||
bottom: Spacing.sm,
|
||||
left: Spacing.xxxl,
|
||||
right: Spacing.xs,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
children: [
|
||||
// Display images outside and above the text bubble (iMessage style)
|
||||
if (hasImages) ...[_buildUserAttachmentImages()],
|
||||
|
||||
// Display text bubble if there's text content
|
||||
if (hasText) const SizedBox(height: Spacing.xs),
|
||||
if (hasText)
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
ConstrainedBox(
|
||||
constraints: BoxConstraints(
|
||||
maxWidth: MediaQuery.of(context).size.width * 0.82,
|
||||
),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: Spacing.chatBubblePadding,
|
||||
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: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.08),
|
||||
blurRadius: 4,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Text(
|
||||
widget.message.content,
|
||||
style: AppTypography.chatMessageStyle.copyWith(
|
||||
color: context.conduitTheme.chatBubbleUserText,
|
||||
),
|
||||
softWrap: true,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (hasText) const SizedBox(height: Spacing.xs),
|
||||
|
||||
// Action buttons below the message
|
||||
if (_showActions) ...[
|
||||
const SizedBox(height: Spacing.sm),
|
||||
_buildUserActionButtons(),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
.animate()
|
||||
.fadeIn(duration: AnimationDuration.messageAppear)
|
||||
.slideX(
|
||||
begin: AnimationValues.messageSlideDistance,
|
||||
end: 0,
|
||||
duration: AnimationDuration.messageSlide,
|
||||
curve: AnimationCurves.messageSlide,
|
||||
);
|
||||
}
|
||||
|
||||
// Assistant-only message renderer removed.
|
||||
|
||||
// Markdown rendering and typing indicator helpers removed.
|
||||
|
||||
// Removed unused assistant action buttons builder.
|
||||
|
||||
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,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildUserActionButtons() {
|
||||
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,
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user