691 lines
30 KiB
Dart
691 lines
30 KiB
Dart
// ⭐⭐⭐ UPDATED SWIPEABLE MESSAGE BUBBLE WITH IMAGE GRID VIEWER ⭐⭐⭐
|
|
import 'dart:io';
|
|
|
|
import 'package:flutter/material.dart';
|
|
import 'package:taxglide/consts/download_helper.dart';
|
|
import 'package:taxglide/model/chat_model.dart';
|
|
|
|
class SwipeableMessageBubble extends StatefulWidget {
|
|
final MessageModel message;
|
|
final DateTime msgDate;
|
|
final String Function(DateTime) formatTime;
|
|
final Widget Function(int, int) buildTick;
|
|
final VoidCallback onSwipe;
|
|
final Function(int?)? onParentTagTap;
|
|
final Function(List<String> imageUrls, int initialIndex)?
|
|
onImageTap; // 🖼️ NEW
|
|
|
|
const SwipeableMessageBubble({
|
|
super.key,
|
|
required this.message,
|
|
required this.msgDate,
|
|
required this.formatTime,
|
|
required this.buildTick,
|
|
required this.onSwipe,
|
|
this.onParentTagTap,
|
|
this.onImageTap, // 🖼️ NEW
|
|
});
|
|
|
|
@override
|
|
State<SwipeableMessageBubble> createState() => SwipeableMessageBubbleState();
|
|
}
|
|
|
|
class SwipeableMessageBubbleState extends State<SwipeableMessageBubble>
|
|
with SingleTickerProviderStateMixin {
|
|
double _dragExtent = 0;
|
|
late AnimationController _controller;
|
|
late Animation<double> _animation;
|
|
final Map<String, bool> _downloadingFiles = {};
|
|
final Map<String, bool> _downloadedFiles = {};
|
|
bool _isHighlighted = false;
|
|
|
|
void highlight() {
|
|
if (!mounted) return;
|
|
// Reset first to ensure it re-triggers if already highlighted
|
|
setState(() => _isHighlighted = false);
|
|
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
if (!mounted) return;
|
|
setState(() => _isHighlighted = true);
|
|
Future.delayed(const Duration(milliseconds: 1500), () {
|
|
if (mounted) setState(() => _isHighlighted = false);
|
|
});
|
|
});
|
|
}
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_controller = AnimationController(
|
|
vsync: this,
|
|
duration: const Duration(milliseconds: 200),
|
|
);
|
|
_animation = Tween<double>(begin: 0, end: 0).animate(_controller)
|
|
..addListener(() {
|
|
setState(() {
|
|
_dragExtent = _animation.value;
|
|
});
|
|
});
|
|
|
|
_checkDownloadedFiles();
|
|
}
|
|
|
|
Future<void> _checkDownloadedFiles() async {
|
|
for (var doc in widget.message.uploadedDocuments) {
|
|
final existingPath = await DownloadHelper.checkFileExistsInReceived(
|
|
doc.filePath,
|
|
);
|
|
if (existingPath != null && mounted) {
|
|
setState(() {
|
|
_downloadedFiles[doc.fileName] = true;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_controller.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
void _handleDragUpdate(DragUpdateDetails details) {
|
|
if (!mounted) return;
|
|
|
|
final isUserMessage = widget.message.chatBy == "user";
|
|
final delta = details.primaryDelta ?? 0;
|
|
|
|
if ((isUserMessage && delta < 0) || (!isUserMessage && delta > 0)) {
|
|
setState(() {
|
|
_dragExtent += delta;
|
|
_dragExtent = _dragExtent.clamp(
|
|
isUserMessage ? -80.0 : 0.0,
|
|
isUserMessage ? 0.0 : 80.0,
|
|
);
|
|
});
|
|
}
|
|
}
|
|
|
|
void _handleDragEnd(DragEndDetails details) {
|
|
if (!mounted) return;
|
|
|
|
final threshold = 60.0;
|
|
|
|
if (_dragExtent.abs() > threshold) {
|
|
widget.onSwipe();
|
|
}
|
|
|
|
_animation = Tween<double>(
|
|
begin: _dragExtent,
|
|
end: 0,
|
|
).animate(CurvedAnimation(parent: _controller, curve: Curves.easeOut));
|
|
|
|
_controller.reset();
|
|
_controller.forward();
|
|
}
|
|
|
|
// 🖼️ NEW: Handle image tap - open grid viewer
|
|
void _handleImageTap(int tappedIndex) {
|
|
if (widget.onImageTap == null) return;
|
|
|
|
// Get all image URLs from uploaded documents
|
|
final imageUrls = widget.message.uploadedDocuments
|
|
.where((doc) => DownloadHelper.isImageFile(doc.fileName))
|
|
.map((doc) => doc.filePath)
|
|
.toList();
|
|
|
|
if (imageUrls.isNotEmpty) {
|
|
widget.onImageTap!(imageUrls, tappedIndex);
|
|
}
|
|
}
|
|
|
|
Future<void> _handleFileView(String url, String fileName) async {
|
|
if (!mounted) return;
|
|
|
|
try {
|
|
print("👁️ Opening file: $fileName");
|
|
|
|
final existingPath = await DownloadHelper.checkFileExistsInReceived(url);
|
|
|
|
if (existingPath != null) {
|
|
await DownloadHelper.openDownloadedFile(existingPath);
|
|
} else {
|
|
final sendFolder = await DownloadHelper.getSendFolder();
|
|
final localPath = '${sendFolder.path}/$fileName';
|
|
final file = File(localPath);
|
|
|
|
if (await file.exists()) {
|
|
await DownloadHelper.openDownloadedFile(localPath);
|
|
} else {
|
|
if (mounted) {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
const SnackBar(
|
|
content: Text("File not found locally"),
|
|
backgroundColor: Colors.orange,
|
|
duration: Duration(seconds: 2),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
}
|
|
} catch (e) {
|
|
print("❌ View error: $e");
|
|
if (mounted) {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(
|
|
content: Text("Could not open file: $e"),
|
|
backgroundColor: Colors.red,
|
|
),
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
Future<void> _handleFileDownload(String url, String fileName) async {
|
|
if (!mounted) return;
|
|
|
|
setState(() {
|
|
_downloadingFiles[fileName] = true;
|
|
});
|
|
|
|
try {
|
|
print("🔗 Downloading from: $url");
|
|
final result = await DownloadHelper.downloadFileToReceived(url);
|
|
|
|
if (!mounted) return;
|
|
|
|
if (result['success'] == true) {
|
|
setState(() {
|
|
_downloadedFiles[fileName] = true;
|
|
});
|
|
|
|
if (mounted) {
|
|
if (result['isNewDownload'] == false) {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(
|
|
content: Text("Opening $fileName"),
|
|
backgroundColor: Colors.green,
|
|
duration: const Duration(seconds: 1),
|
|
),
|
|
);
|
|
} else {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(
|
|
content: Text("Downloaded $fileName"),
|
|
backgroundColor: Colors.green,
|
|
duration: const Duration(seconds: 1),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
}
|
|
} catch (e) {
|
|
print("❌ Download error: $e");
|
|
if (mounted) {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(
|
|
content: Text("Download failed: $e"),
|
|
backgroundColor: Colors.red,
|
|
),
|
|
);
|
|
}
|
|
} finally {
|
|
if (mounted) {
|
|
setState(() {
|
|
_downloadingFiles[fileName] = false;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
|
|
Future<void> _handleDownloadedFileView(String url, String fileName) async {
|
|
if (!mounted) return;
|
|
|
|
try {
|
|
final existingPath = await DownloadHelper.checkFileExistsInReceived(url);
|
|
if (existingPath != null) {
|
|
await DownloadHelper.openDownloadedFile(existingPath);
|
|
}
|
|
} catch (e) {
|
|
print("❌ View error: $e");
|
|
if (mounted) {
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(
|
|
content: Text("Could not open file: $e"),
|
|
backgroundColor: Colors.red,
|
|
),
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final isUserMessage = widget.message.chatBy == "user";
|
|
final hasDocuments = widget.message.uploadedDocuments.isNotEmpty;
|
|
|
|
print("💬 Building message bubble:");
|
|
print(" - ID: ${widget.message.id}");
|
|
print(" - chatBy: ${widget.message.chatBy}");
|
|
print(
|
|
" - uploadedDocuments count: ${widget.message.uploadedDocuments.length}",
|
|
);
|
|
|
|
return Stack(
|
|
children: [
|
|
if (_dragExtent.abs() > 10)
|
|
Positioned(
|
|
right: isUserMessage ? 20 : null,
|
|
left: isUserMessage ? null : 20,
|
|
top: 0,
|
|
bottom: 0,
|
|
child: Center(
|
|
child: Icon(
|
|
Icons.reply_rounded,
|
|
color: Colors.grey[600],
|
|
size: 24,
|
|
),
|
|
),
|
|
),
|
|
GestureDetector(
|
|
onHorizontalDragUpdate: _handleDragUpdate,
|
|
onHorizontalDragEnd: _handleDragEnd,
|
|
child: Transform.translate(
|
|
offset: Offset(_dragExtent, 0),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
if (widget.message.user != null)
|
|
Padding(
|
|
padding: const EdgeInsets.only(left: 5, right: 5),
|
|
child: Align(
|
|
alignment: isUserMessage
|
|
? Alignment.centerRight
|
|
: Alignment.centerLeft,
|
|
child: Text(
|
|
widget.message.user!.name,
|
|
style: const TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w600,
|
|
color: Colors.black87,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
if (widget.message.parentTag != null)
|
|
GestureDetector(
|
|
onTap: () {
|
|
if (widget.onParentTagTap != null) {
|
|
widget.onParentTagTap!(
|
|
widget.message.parentTag?.id ?? widget.message.tagId,
|
|
);
|
|
}
|
|
},
|
|
child: Align(
|
|
alignment: isUserMessage
|
|
? Alignment.centerRight
|
|
: Alignment.centerLeft,
|
|
child: Container(
|
|
margin: const EdgeInsets.only(
|
|
bottom: 4,
|
|
left: 5,
|
|
right: 5,
|
|
),
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 10,
|
|
vertical: 6,
|
|
),
|
|
constraints: BoxConstraints(
|
|
maxWidth: MediaQuery.of(context).size.width * 0.60,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: Colors.black.withOpacity(0.05),
|
|
borderRadius: BorderRadius.circular(8),
|
|
border: Border.all(
|
|
color: const Color(0xFF630A73).withOpacity(0.3),
|
|
),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Container(
|
|
width: 3,
|
|
height: 30,
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFF630A73),
|
|
borderRadius: BorderRadius.circular(2),
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
Flexible(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
if (widget.message.parentTag!.type == "file")
|
|
Row(
|
|
children: [
|
|
Icon(
|
|
Icons.insert_drive_file,
|
|
size: 14,
|
|
color: Colors.grey[600],
|
|
),
|
|
const SizedBox(width: 4),
|
|
Expanded(
|
|
child: Text(
|
|
widget
|
|
.message
|
|
.parentTag!
|
|
.fileName ??
|
|
"File",
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
fontSize: 11,
|
|
fontWeight: FontWeight.w600,
|
|
color: Colors.grey[700],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
Text(
|
|
widget.message.parentTag!.message,
|
|
maxLines: 2,
|
|
overflow: TextOverflow.ellipsis,
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: Colors.grey[700],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
Align(
|
|
alignment: isUserMessage
|
|
? Alignment.centerRight
|
|
: Alignment.centerLeft,
|
|
child: ConstrainedBox(
|
|
constraints: BoxConstraints(
|
|
maxWidth: MediaQuery.of(context).size.width * 0.70,
|
|
),
|
|
child: Container(
|
|
margin: const EdgeInsets.symmetric(vertical: 6),
|
|
padding: const EdgeInsets.symmetric(
|
|
vertical: 10,
|
|
horizontal: 14,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: _isHighlighted
|
|
? Colors.green.withOpacity(0.2)
|
|
: (isUserMessage
|
|
? const Color(0xFFFFF8E2)
|
|
: Colors.white),
|
|
border: Border.all(
|
|
color: _isHighlighted
|
|
? Colors.green.withOpacity(0.5)
|
|
: (isUserMessage
|
|
? const Color(0xFFF9D9C8)
|
|
: const Color(0xFFE2E2E2)),
|
|
),
|
|
borderRadius: BorderRadius.circular(10),
|
|
boxShadow: isUserMessage
|
|
? []
|
|
: const [
|
|
BoxShadow(
|
|
color: Color(0x40979797),
|
|
blurRadius: 3.6,
|
|
offset: Offset(0, 1),
|
|
),
|
|
],
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// ⭐⭐⭐ DISPLAY uploadedDocuments WITH IMAGE GRID SUPPORT
|
|
if (hasDocuments)
|
|
...widget.message.uploadedDocuments.asMap().entries.map((
|
|
entry,
|
|
) {
|
|
final index = entry.key;
|
|
final doc = entry.value;
|
|
final isImage = DownloadHelper.isImageFile(
|
|
doc.fileName,
|
|
);
|
|
final isDownloading =
|
|
_downloadingFiles[doc.fileName] ?? false;
|
|
final isDownloaded =
|
|
_downloadedFiles[doc.fileName] ?? false;
|
|
|
|
// 🖼️ Calculate image index (only count images before this one)
|
|
final imageIndex = widget
|
|
.message
|
|
.uploadedDocuments
|
|
.sublist(0, index)
|
|
.where(
|
|
(d) =>
|
|
DownloadHelper.isImageFile(d.fileName),
|
|
)
|
|
.length;
|
|
|
|
return GestureDetector(
|
|
onTap: isImage
|
|
? () =>
|
|
_handleImageTap(
|
|
imageIndex,
|
|
) // 🖼️ Open grid viewer
|
|
: (isUserMessage
|
|
? () => _handleFileView(
|
|
doc.filePath,
|
|
doc.fileName,
|
|
)
|
|
: null),
|
|
child: Container(
|
|
margin: const EdgeInsets.only(bottom: 8),
|
|
child: isImage
|
|
? Stack(
|
|
children: [
|
|
ClipRRect(
|
|
borderRadius:
|
|
BorderRadius.circular(8),
|
|
child: Image.network(
|
|
doc.filePath,
|
|
width: 150,
|
|
height: 100,
|
|
fit: BoxFit.cover,
|
|
errorBuilder:
|
|
(context, error, stack) {
|
|
return Container(
|
|
width: 200,
|
|
height: 150,
|
|
color: Colors.grey[300],
|
|
child: const Center(
|
|
child: Icon(
|
|
Icons.broken_image,
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
// ⭐ Download/View icon for receiver messages
|
|
if (!isUserMessage)
|
|
Positioned(
|
|
top: 8,
|
|
right: 8,
|
|
child: GestureDetector(
|
|
onTap: isDownloading
|
|
? null
|
|
: isDownloaded
|
|
? () =>
|
|
_handleDownloadedFileView(
|
|
doc.filePath,
|
|
doc.fileName,
|
|
)
|
|
: () =>
|
|
_handleFileDownload(
|
|
doc.filePath,
|
|
doc.fileName,
|
|
),
|
|
child: Container(
|
|
padding:
|
|
const EdgeInsets.all(8),
|
|
decoration: BoxDecoration(
|
|
color: Colors.black
|
|
.withOpacity(0.6),
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: isDownloading
|
|
? const SizedBox(
|
|
width: 16,
|
|
height: 16,
|
|
child: CircularProgressIndicator(
|
|
strokeWidth: 2,
|
|
valueColor:
|
|
AlwaysStoppedAnimation<
|
|
Color
|
|
>(
|
|
Colors
|
|
.white,
|
|
),
|
|
),
|
|
)
|
|
: Icon(
|
|
isDownloaded
|
|
? Icons
|
|
.visibility
|
|
: Icons
|
|
.download,
|
|
color: Colors.white,
|
|
size: 20,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
)
|
|
: Container(
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey[100],
|
|
borderRadius: BorderRadius.circular(
|
|
8,
|
|
),
|
|
border: Border.all(
|
|
color: Colors.grey[300]!,
|
|
),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Icon(
|
|
Icons.insert_drive_file,
|
|
color: Colors.grey[600],
|
|
),
|
|
const SizedBox(width: 8),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment:
|
|
CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
doc.fileName,
|
|
style: const TextStyle(
|
|
fontSize: 13,
|
|
fontWeight:
|
|
FontWeight.w600,
|
|
),
|
|
),
|
|
Text(
|
|
doc.fileType
|
|
.toUpperCase(),
|
|
style: TextStyle(
|
|
fontSize: 11,
|
|
color: Colors.grey[600],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
GestureDetector(
|
|
onTap: isDownloading
|
|
? null
|
|
: () => isUserMessage
|
|
? _handleFileView(
|
|
doc.filePath,
|
|
doc.fileName,
|
|
)
|
|
: isDownloaded
|
|
? _handleDownloadedFileView(
|
|
doc.filePath,
|
|
doc.fileName,
|
|
)
|
|
: _handleFileDownload(
|
|
doc.filePath,
|
|
doc.fileName,
|
|
),
|
|
child: isDownloading
|
|
? const SizedBox(
|
|
width: 20,
|
|
height: 20,
|
|
child:
|
|
CircularProgressIndicator(
|
|
strokeWidth: 2,
|
|
),
|
|
)
|
|
: Icon(
|
|
isUserMessage
|
|
? Icons.open_in_new
|
|
: isDownloaded
|
|
? Icons.visibility
|
|
: Icons.download,
|
|
color: Colors.grey[600],
|
|
size: 20,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}).toList(),
|
|
if (widget.message.message.isNotEmpty)
|
|
Text(
|
|
widget.message.message,
|
|
style: const TextStyle(fontSize: 15),
|
|
),
|
|
const SizedBox(height: 3),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
children: [
|
|
Text(
|
|
widget.formatTime(widget.msgDate),
|
|
style: TextStyle(
|
|
fontSize: 11,
|
|
color: Colors.grey[700],
|
|
),
|
|
),
|
|
const SizedBox(width: 4),
|
|
widget.buildTick(
|
|
widget.message.isDelivered,
|
|
widget.message.isRead,
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|