rama/halobestie-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 3.2 WS1: Chat request overlay, queue, stale reasons

Browse Source 
- Backend: add reason field to chat_request_closed WS messages
  (cancelled_by_customer, accepted_by_other, expired)
- Backend: include duration_minutes, is_free_trial in chat_request WS
- ChatRequestNotifier: add ChatRequestStaleData, StaleReason enum,
  request queue (List<Map>), ignore(), acknowledgeStale(), _advanceQueue()
- New ChatRequestOverlay widget: slides up from bottom, dimmed background,
  swipe to dismiss, shows active/stale request content
- Integrate overlay in main.dart wrapping MaterialApp.router
- Cleanup: convert HomeScreen to ConsumerWidget, remove showModalBottomSheet,
  remove IncomingRequestSheet, remove lifecycle observer

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
ramadhan sjamsani
2026-04-09 22:16:30 +08:00
parent 4158fb9432
commit b9c4841eb1
7 changed files with 380 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
mitra_app/lib/core/chat/chat_request_notifier.dart
View File

@@ -11,6 +11,13 @@ import '../notifications/notification_service.dart';
part 'chat_request_notifier.g.dart';
// Stale reason for dismissed requests
enum StaleReason {
cancelledByCustomer, // "Permintaan dibatalkan oleh customer"
acceptedByOther, // "Permintaan diterima oleh Bestie lain"
expired, // "Permintaan kedaluwarsa"
}
// States
sealed class ChatRequestData {
const ChatRequestData();
@@ -26,7 +33,21 @@ class ChatRequestListeningData extends ChatRequestData {
class ChatRequestIncomingData extends ChatRequestData {
final String sessionId;
const ChatRequestIncomingData(this.sessionId);
final int? durationMinutes;
final bool? isFreeTrial;
final DateTime? createdAt;
const ChatRequestIncomingData(
this.sessionId, {
this.durationMinutes,
this.isFreeTrial,
this.createdAt,
});
}
class ChatRequestStaleData extends ChatRequestData {
final String sessionId;
final StaleReason reason;
const ChatRequestStaleData(this.sessionId, this.reason);
}
class ChatRequestAcceptingData extends ChatRequestData {
@@ -47,6 +68,7 @@ class ChatRequestErrorData extends ChatRequestData {
class ChatRequest extends _$ChatRequest {
WebSocketChannel? _channel;
StreamSubscription? _wsSubscription;
final List<Map<String, dynamic>> _pendingQueue = [];
ApiClient get _apiClient => ref.read(apiClientProvider);
@@ -54,7 +76,6 @@ class ChatRequest extends _$ChatRequest {
ChatRequestData build() => const ChatRequestIdleData();
Future<void> startListening() async {
// Don't reset state if actively accepting/accepted — would lose navigation
if (state is ChatRequestAcceptingData || state is ChatRequestAcceptedData) return;
_closeWebSocket();
state = const ChatRequestListeningData();
@@ -63,6 +84,7 @@ class ChatRequest extends _$ChatRequest {
void stopListening() {
_closeWebSocket();
_pendingQueue.clear();
state = const ChatRequestIdleData();
}
@@ -112,33 +134,65 @@ class ChatRequest extends _$ChatRequest {
if (type == WsMessage.chatRequest) {
final sessionId = data['session_id'] as String;
state = ChatRequestIncomingData(sessionId);
// Show local notification so mitra is alerted even when app is backgrounded
// If already showing a request or stale message, queue it
if (state is ChatRequestIncomingData ||
state is ChatRequestStaleData ||
state is ChatRequestAcceptingData) {
if (!_pendingQueue.any((q) => q['session_id'] == sessionId)) {
_pendingQueue.add(data);
}
} else {
state = ChatRequestIncomingData(
sessionId,
durationMinutes: data['duration_minutes'] as int?,
isFreeTrial: data['is_free_trial'] as bool?,
createdAt: data['created_at'] != null
? DateTime.tryParse(data['created_at'] as String)
: null,
);
}
// Show local notification
NotificationService.showLocalNotification(
title: 'Permintaan Chat Baru',
body: 'Ada pelanggan yang ingin curhat! Ketuk untuk menerima.',
data: {'type': 'chat_request', 'session_id': sessionId, 'action': 'open_accept'},
);
} else if (type == WsMessage.chatRequestClosed) {
if (state is ChatRequestIncomingData) {
state = const ChatRequestListeningData();
final closedSessionId = data['session_id'] as String;
final reason = data['reason'] as String?;
// Remove from queue if queued
_pendingQueue.removeWhere((q) => q['session_id'] == closedSessionId);
// If currently displayed, transition to stale
if (state is ChatRequestIncomingData &&
(state as ChatRequestIncomingData).sessionId == closedSessionId) {
final staleReason = switch (reason) {
'cancelled_by_customer' => StaleReason.cancelledByCustomer,
'accepted_by_other' => StaleReason.acceptedByOther,
'expired' => StaleReason.expired,
_ => StaleReason.expired,
};
state = ChatRequestStaleData(closedSessionId, staleReason);
}
} else if (type == 'session_rerouted') {
_pendingQueue.clear();
state = const ChatRequestListeningData();
} else if (type == 'session_assigned') {
_pendingQueue.clear();
state = ChatRequestAcceptedData({'session_id': data['session_id']});
}
}
/// Called when user taps a chat_request notification. Sets the incoming state
/// with the given session and validates it's still pending.
/// Called when user taps a chat_request notification.
Future<void> setIncomingFromNotification(String sessionId) async {
state = ChatRequestIncomingData(sessionId);
await validateIncomingRequest();
}
/// Check if the current incoming request is still valid (pending_acceptance).
/// If stale, reset to listening state.
/// Check if the current incoming request is still valid.
Future<void> validateIncomingRequest() async {
if (state is! ChatRequestIncomingData) return;
final sessionId = (state as ChatRequestIncomingData).sessionId;
@@ -146,10 +200,39 @@ class ChatRequest extends _$ChatRequest {
final response = await _apiClient.get('/api/mitra/chat-requests/$sessionId/status');
final status = response['data']?['status'] as String?;
if (status != 'pending_acceptance') {
state = const ChatRequestListeningData();
state = ChatRequestStaleData(sessionId, StaleReason.expired);
}
} catch (_) {
// On error, keep current state — don't dismiss valid requests
// On error, keep current state
}
}
/// Swipe down on active request — ignore without sending reject to backend.
void ignore() {
_advanceQueue();
}
/// Acknowledge a stale message (OK button or swipe down).
void acknowledgeStale() {
_advanceQueue();
}
/// Show next queued request or return to listening.
void _advanceQueue() {
if (_pendingQueue.isNotEmpty) {
final next = _pendingQueue.removeAt(0);
final sessionId = next['session_id'] as String;
state = ChatRequestIncomingData(
sessionId,
durationMinutes: next['duration_minutes'] as int?,
isFreeTrial: next['is_free_trial'] as bool?,
createdAt: next['created_at'] != null
? DateTime.tryParse(next['created_at'] as String)
: null,
);
validateIncomingRequest();
} else {
state = const ChatRequestListeningData();
}
}
@@ -157,11 +240,12 @@ class ChatRequest extends _$ChatRequest {
state = const ChatRequestAcceptingData();
try {
final response = await _apiClient.post('/api/mitra/chat-requests/$sessionId/accept');
_pendingQueue.clear();
state = ChatRequestAcceptedData(response['data'] as Map<String, dynamic>);
} on DioException catch (e) {
final code = e.response?.data?['error']?['code'];
if (code == 'REQUEST_UNAVAILABLE') {
state = const ChatRequestListeningData();
state = ChatRequestStaleData(sessionId, StaleReason.acceptedByOther);
} else {
state = const ChatRequestErrorData('Gagal menerima. Coba lagi.');
}
@@ -172,7 +256,7 @@ class ChatRequest extends _$ChatRequest {
try {
await _apiClient.post('/api/mitra/chat-requests/$sessionId/decline');
} catch (_) {}
state = const ChatRequestListeningData();
_advanceQueue();
}
void _closeWebSocket() {

2
mitra_app/lib/core/chat/chat_request_notifier.g.dart
View File

@@ -6,7 +6,7 @@ part of 'chat_request_notifier.dart';
// RiverpodGenerator
// **************************************************************************
String _$chatRequestHash() => r'b99836c687e861493c432ff5a5901a70f24ab1c7';
String _$chatRequestHash() => r'c80b16e371658fbbaca88a75b48e16a3c0e057b3';
/// See also [ChatRequest].
@ProviderFor(ChatRequest)

266
mitra_app/lib/core/chat/widgets/chat_request_overlay.dart Normal file
View File

@@ -0,0 +1,266 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../chat_request_notifier.dart';
import '../../../router.dart';
class ChatRequestOverlay extends ConsumerStatefulWidget {
final Widget child;
const ChatRequestOverlay({super.key, required this.child});
@override
ConsumerState<ChatRequestOverlay> createState() => _ChatRequestOverlayState();
}
class _ChatRequestOverlayState extends ConsumerState<ChatRequestOverlay>
with SingleTickerProviderStateMixin {
late final AnimationController _animController;
late final Animation<Offset> _slideAnimation;
bool _visible = false;
@override
void initState() {
super.initState();
_animController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 300),
);
_slideAnimation = Tween<Offset>(
begin: const Offset(0, 1),
end: Offset.zero,
).animate(CurvedAnimation(parent: _animController, curve: Curves.easeOutCubic));
}
@override
void dispose() {
_animController.dispose();
super.dispose();
}
void _show() {
if (!_visible) {
setState(() => _visible = true);
_animController.forward();
}
}
void _hide() {
_animController.reverse().then((_) {
if (mounted) setState(() => _visible = false);
});
}
void _onSwipeDown(DragEndDetails details) {
if (details.primaryVelocity != null && details.primaryVelocity! > 200) {
final state = ref.read(chatRequestProvider);
if (state is ChatRequestIncomingData) {
ref.read(chatRequestProvider.notifier).ignore();
} else if (state is ChatRequestStaleData) {
ref.read(chatRequestProvider.notifier).acknowledgeStale();
}
}
}
@override
Widget build(BuildContext context) {
ref.listen(chatRequestProvider, (prev, next) {
if (next is ChatRequestIncomingData || next is ChatRequestStaleData) {
_show();
} else if (next is ChatRequestAcceptedData) {
_hide();
// Navigate to chat session
final session = next.session;
final sessionId = session['session_id'] as String? ?? session['id'] as String;
final router = ref.read(routerProvider);
router.push('/chat/session/$sessionId', extra: {
'customerName': session['customer_display_name'] as String? ?? 'Customer',
});
} else {
_hide();
}
});
return Stack(
children: [
widget.child,
if (_visible) ...[
// Semi-transparent dim
Positioned.fill(
child: GestureDetector(
onTap: () {}, // Block taps but don't dismiss
child: FadeTransition(
opacity: _animController,
child: Container(color: Colors.black.withOpacity(0.3)),
),
),
),
// Overlay content
Positioned(
left: 0,
right: 0,
bottom: 0,
child: SlideTransition(
position: _slideAnimation,
child: GestureDetector(
onVerticalDragEnd: _onSwipeDown,
child: _buildContent(),
),
),
),
],
],
);
}
Widget _buildContent() {
final requestState = ref.watch(chatRequestProvider);
if (requestState is ChatRequestIncomingData) {
return _buildActiveRequest(requestState);
}
if (requestState is ChatRequestStaleData) {
return _buildStaleRequest(requestState);
}
return const SizedBox.shrink();
}
Widget _buildActiveRequest(ChatRequestIncomingData data) {
final durationText = data.isFreeTrial == true
? 'Free Trial'
: data.durationMinutes != null
? '${data.durationMinutes} Menit'
: '';
return Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
boxShadow: [BoxShadow(color: Colors.black26, blurRadius: 10, offset: Offset(0, -2))],
),
child: SafeArea(
top: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(24, 12, 24, 24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Drag handle
Container(
width: 40,
height: 4,
margin: const EdgeInsets.only(bottom: 16),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(2),
),
),
const Icon(Icons.chat, size: 48, color: Colors.blue),
const SizedBox(height: 12),
const Text(
'Ada permintaan chat baru!',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
),
const SizedBox(height: 4),
if (durationText.isNotEmpty)
Text(
'Durasi: $durationText',
style: const TextStyle(fontSize: 14, color: Colors.grey),
),
const SizedBox(height: 8),
const Text(
'Seorang customer ingin curhat denganmu.',
style: TextStyle(fontSize: 14, color: Colors.grey),
),
const SizedBox(height: 20),
Row(
children: [
Expanded(
child: OutlinedButton(
onPressed: () {
ref.read(chatRequestProvider.notifier).decline(data.sessionId);
},
child: const Text('Tolak'),
),
),
const SizedBox(width: 16),
Expanded(
child: ElevatedButton(
onPressed: () {
ref.read(chatRequestProvider.notifier).accept(data.sessionId);
},
child: const Text('Terima'),
),
),
],
),
const SizedBox(height: 8),
Text(
'Geser ke bawah untuk mengabaikan',
style: TextStyle(fontSize: 12, color: Colors.grey.shade400),
),
],
),
),
),
);
}
Widget _buildStaleRequest(ChatRequestStaleData data) {
final message = switch (data.reason) {
StaleReason.cancelledByCustomer => 'Permintaan dibatalkan oleh customer',
StaleReason.acceptedByOther => 'Permintaan diterima oleh Bestie lain',
StaleReason.expired => 'Permintaan kedaluwarsa',
};
final icon = switch (data.reason) {
StaleReason.cancelledByCustomer => Icons.cancel_outlined,
StaleReason.acceptedByOther => Icons.people_outline,
StaleReason.expired => Icons.timer_off_outlined,
};
return Container(
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
boxShadow: [BoxShadow(color: Colors.black26, blurRadius: 10, offset: Offset(0, -2))],
),
child: SafeArea(
top: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(24, 12, 24, 24),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Drag handle
Container(
width: 40,
height: 4,
margin: const EdgeInsets.only(bottom: 16),
decoration: BoxDecoration(
color: Colors.grey.shade300,
borderRadius: BorderRadius.circular(2),
),
),
Icon(icon, size: 48, color: Colors.orange),
const SizedBox(height: 12),
Text(
message,
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () {
ref.read(chatRequestProvider.notifier).acknowledgeStale();
},
child: const Text('OK'),
),
),
],
),
),
),
);
}
}