Phase 4 checkpoint: chat-screen perf refactor + retryable blast-failure + repo-wide dispose-ref guardrail
Chat-screen performance (customer + mitra): - Parent screens have zero `ref.watch` — only `ref.listen` for side effects - Body extracted into its own `ConsumerStatefulWidget`; AppBar parts split into narrow `.select` consumers (mode, sensitivity, timer) - Per-second timer ticks routed to dedicated providers (`chatRemainingSecondsProvider` + new `mitraChatRemainingSecondsProvider`) so WS `session_tick` frames don't invalidate the rest of the chat state Dispose-in-ref bug fix: - `home_screen.dart`, `payment_screen.dart`, `mitra_chat_screen.dart` — ref-using cleanup moved from `dispose()` to `deactivate()`. Modern Riverpod invalidates `ref` the moment `dispose()` runs; the resulting silent error corrupts the widget-tree finalize and the next screen appears frozen - `halo_lints` package added at repo root with `no_ref_in_dispose` rule to catch this pattern in CI / IDE analysis - `custom_lint` activated in both apps' `analysis_options.yaml` (was installed but never wired in — also brings `riverpod_lint`'s `avoid_ref_inside_state_dispose` online) - CLAUDE.md Pitfalls section added to client_app + mitra_app Phase 4 §3 retryable blast-failure (Option A): - Backend `expirePairingRequest` + all-rejected use `recordIntermediateFailure` instead of `failPaymentSession` so the payment session stays `confirmed` for re-blast - WS `pairing_failed` payload carries `is_terminal: false` on the retryable paths; client parses the flag and exposes `retryBlast()` - "Coba cari lagi" CTA on S7 Timeout now re-blasts on the same payment - Pairing service test updated to reflect the new semantics Customer waiting-payment screen navigation patch: - `_navigateTerminal` uses `Future.microtask` + `addPostFrameCallback` redundancy after a release-mode bug where polling stopped but `context.go` never fired, leaving the screen visually stuck on "menunggu pembayaran" See requirement/resume-2026-05-15.md for next-day pickup checklist (mitra release rebuild + S21 Ultra install + retest is the gating item). Bundles unrelated in-flight Phase 4 §2.x work that was already on disk (ESP screen removal, USP one-time gate scaffolding, bestie-availability public route, OTP service edits, Maestro flow tweaks) — kept together to avoid a partial-rebase mess. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -10,6 +10,28 @@ import '../constants.dart';
|
||||
|
||||
part 'mitra_chat_notifier.g.dart';
|
||||
|
||||
/// Per-second session countdown, decoupled from `mitraChatProvider` so the
|
||||
/// `session_tick` WS frame doesn't invalidate the entire chat state (which
|
||||
/// would force `ref.watch(mitraChatProvider)` callers — including the chat
|
||||
/// screen — to rebuild every second). Watched only by the small timer
|
||||
/// indicator in the chat AppBar. See mitra_app/CLAUDE.md for the wider perf
|
||||
/// rationale.
|
||||
///
|
||||
/// Manually declared (no @Riverpod annotation) to keep .g.dart codegen
|
||||
/// minimal — one-line Notifier with no special config.
|
||||
class MitraChatRemainingSecondsNotifier
|
||||
extends AutoDisposeNotifier<int?> {
|
||||
@override
|
||||
int? build() => null;
|
||||
void update(int? seconds) => state = seconds;
|
||||
void clear() => state = null;
|
||||
}
|
||||
|
||||
final mitraChatRemainingSecondsProvider =
|
||||
NotifierProvider.autoDispose<MitraChatRemainingSecondsNotifier, int?>(
|
||||
MitraChatRemainingSecondsNotifier.new,
|
||||
);
|
||||
|
||||
// States
|
||||
sealed class MitraChatData {
|
||||
const MitraChatData();
|
||||
@@ -304,7 +326,11 @@ class MitraChat extends _$MitraChat {
|
||||
break;
|
||||
|
||||
case WsMessage.sessionTimer:
|
||||
state = current.copyWith(remainingSeconds: data['remaining_seconds'] as int?);
|
||||
// Route timer ticks to the dedicated provider so the chat state isn't
|
||||
// invalidated every second. See [mitraChatRemainingSecondsProvider].
|
||||
ref
|
||||
.read(mitraChatRemainingSecondsProvider.notifier)
|
||||
.update(data['remaining_seconds'] as int?);
|
||||
break;
|
||||
|
||||
case WsMessage.sessionExpired:
|
||||
|
||||
@@ -32,8 +32,6 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
|
||||
final _goodbyeController = TextEditingController();
|
||||
final _scrollController = ScrollController();
|
||||
Timer? _typingThrottle;
|
||||
bool _showBestieBanner = true;
|
||||
bool _showUserBanner = true;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
@@ -43,15 +41,25 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
void deactivate() {
|
||||
// Disconnect runs here, NOT in dispose(): modern Riverpod invalidates
|
||||
// `ref` the instant dispose() starts, and the resulting silent error
|
||||
// corrupts the widget-tree finalize (next screen freezes). deactivate()
|
||||
// runs BEFORE dispose() while `ref` is still valid. Same fix pattern
|
||||
// applied in client_app/home_screen + payment_screen on 2026-05-14.
|
||||
// ignore: discarded_futures
|
||||
ref.read(mitraChatProvider.notifier).disconnect();
|
||||
super.deactivate();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
final notifier = ref.read(mitraChatProvider.notifier);
|
||||
_messageController.dispose();
|
||||
_goodbyeController.dispose();
|
||||
_scrollController.dispose();
|
||||
_typingThrottle?.cancel();
|
||||
super.dispose();
|
||||
Future.microtask(() => notifier.disconnect());
|
||||
}
|
||||
|
||||
void _scrollToBottom() {
|
||||
@@ -82,17 +90,20 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final chatState = ref.watch(mitraChatProvider);
|
||||
final extState = ref.watch(mitraExtensionProvider);
|
||||
|
||||
// Listen for extension complete -> navigate home
|
||||
// Parent build runs ONCE per lifecycle — there are no ref.watch calls here.
|
||||
// State changes (messages, typing, status updates, mode flip, sensitivity
|
||||
// flip) all rebuild only the leaf consumers that watch them:
|
||||
// - _MitraChatVoicePill → mode flag (via .select)
|
||||
// - _MitraChatTopicToggle → topicSensitivity (via .select) + config
|
||||
// - _MitraChatTimerAction → mitraChatRemainingSecondsProvider
|
||||
// - _MitraChatBodyContent → full chatProvider + extensionProvider
|
||||
// Pattern mirrors client_app/chat_screen post-refactor (2026-05-14).
|
||||
ref.listen(mitraExtensionProvider, (prev, next) {
|
||||
if (next is ExtensionCompleteData) {
|
||||
context.go('/home');
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for chat state changes
|
||||
ref.listen(mitraChatProvider, (prev, next) {
|
||||
if (next is MitraChatConnectedData) {
|
||||
_scrollToBottom();
|
||||
@@ -106,10 +117,6 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
|
||||
}
|
||||
});
|
||||
|
||||
final currentSensitivity = chatState is MitraChatConnectedData
|
||||
? chatState.topicSensitivity
|
||||
: TopicSensitivity.regular;
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
backgroundColor: Colors.white,
|
||||
@@ -130,41 +137,53 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
if (chatState is MitraChatConnectedData &&
|
||||
chatState.mode == SessionMode.call) ...[
|
||||
const SizedBox(width: 8),
|
||||
_buildVoiceCallPill(),
|
||||
],
|
||||
const _MitraChatVoicePill(),
|
||||
],
|
||||
),
|
||||
actions: [
|
||||
if (chatState is MitraChatConnectedData) _buildTopicToggle(chatState),
|
||||
if (chatState is MitraChatConnectedData && chatState.remainingSeconds != null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(right: 16),
|
||||
child: Center(
|
||||
child: Text(
|
||||
'${chatState.remainingSeconds}s',
|
||||
style: TextStyle(
|
||||
color: chatState.remainingSeconds! < 30 ? Colors.red : Colors.black,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
_MitraChatTopicToggle(sessionId: widget.sessionId),
|
||||
const _MitraChatTimerAction(),
|
||||
],
|
||||
),
|
||||
body: Column(
|
||||
children: [
|
||||
if (currentSensitivity == TopicSensitivity.sensitive)
|
||||
_buildSensitivityHeader(),
|
||||
Expanded(child: _buildBody(chatState, extState)),
|
||||
],
|
||||
body: _MitraChatBodyContent(
|
||||
sessionId: widget.sessionId,
|
||||
customerName: widget.customerName,
|
||||
messageController: _messageController,
|
||||
goodbyeController: _goodbyeController,
|
||||
scrollController: _scrollController,
|
||||
onSend: _sendMessage,
|
||||
onTextChanged: _onTextChanged,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Widget _buildVoiceCallPill() {
|
||||
/// AppBar voice-call mode badge. Watches only the `mode` field of the chat
|
||||
/// state — the conditional collapses to a bool via `.select`, so this widget
|
||||
/// rebuilds only when the mode actually flips (essentially never during a
|
||||
/// session) and the surrounding AppBar stays still on every message/typing
|
||||
/// state change.
|
||||
class _MitraChatVoicePill extends ConsumerWidget {
|
||||
const _MitraChatVoicePill();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final isCall = ref.watch(mitraChatProvider.select(
|
||||
(s) => s is MitraChatConnectedData && s.mode == SessionMode.call,
|
||||
));
|
||||
if (!isCall) return const SizedBox.shrink();
|
||||
return const Padding(
|
||||
padding: EdgeInsets.only(left: 8),
|
||||
child: _VoiceCallPillBody(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _VoiceCallPillBody extends StatelessWidget {
|
||||
const _VoiceCallPillBody();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
|
||||
decoration: const BoxDecoration(
|
||||
@@ -181,35 +200,31 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Widget _buildSensitivityHeader() {
|
||||
const theme = SensitivityTheme.sensitive;
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 12),
|
||||
color: theme.badgeBg,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(Icons.warning_amber_rounded, size: 16, color: theme.badgeFg),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
'Topik sensitif',
|
||||
style: TextStyle(
|
||||
color: theme.badgeFg,
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
/// AppBar topic-sensitivity flag/lock action. Watches only `topicSensitivity`
|
||||
/// (via `.select`) plus the `sensitivityConfigProvider`. Confirmation dialog
|
||||
/// + snackbars + `flipTopic` call all live here so the parent screen doesn't
|
||||
/// need to know about topic state.
|
||||
class _MitraChatTopicToggle extends ConsumerStatefulWidget {
|
||||
final String sessionId;
|
||||
const _MitraChatTopicToggle({required this.sessionId});
|
||||
|
||||
Widget _buildTopicToggle(MitraChatConnectedData state) {
|
||||
@override
|
||||
ConsumerState<_MitraChatTopicToggle> createState() => _MitraChatTopicToggleState();
|
||||
}
|
||||
|
||||
class _MitraChatTopicToggleState extends ConsumerState<_MitraChatTopicToggle> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final sensitivity = ref.watch(mitraChatProvider.select((s) {
|
||||
if (s is MitraChatConnectedData) return s.topicSensitivity;
|
||||
return null;
|
||||
}));
|
||||
if (sensitivity == null) return const SizedBox.shrink();
|
||||
final configAsync = ref.watch(sensitivityConfigProvider);
|
||||
final config = configAsync.value ?? SensitivityConfig.defaults;
|
||||
final isSensitive = state.topicSensitivity == TopicSensitivity.sensitive;
|
||||
final isSensitive = sensitivity == TopicSensitivity.sensitive;
|
||||
final locked = config.oneWayLatch && isSensitive;
|
||||
|
||||
return Tooltip(
|
||||
@@ -223,16 +238,16 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
|
||||
isSensitive ? Icons.flag : Icons.outlined_flag,
|
||||
color: isSensitive ? SensitivityTheme.sensitive.badgeBg : Colors.grey.shade600,
|
||||
),
|
||||
onPressed: locked ? null : () => _onTopicTogglePressed(state, config),
|
||||
onPressed: locked ? null : () => _onTopicTogglePressed(sensitivity, config),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> _onTopicTogglePressed(
|
||||
MitraChatConnectedData state,
|
||||
TopicSensitivity current,
|
||||
SensitivityConfig config,
|
||||
) async {
|
||||
final toValue = state.topicSensitivity == TopicSensitivity.sensitive
|
||||
final toValue = current == TopicSensitivity.sensitive
|
||||
? TopicSensitivity.regular
|
||||
: TopicSensitivity.sensitive;
|
||||
|
||||
@@ -285,6 +300,95 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Owns the chat-body subtree. Watches `mitraChatProvider` and
|
||||
/// `mitraExtensionProvider` — so a WS message / typing / status / extension
|
||||
/// update rebuilds *this* widget only, not the parent Scaffold or AppBar.
|
||||
/// Entry-banner dismiss state moved here from the parent so its setState
|
||||
/// doesn't propagate back up either.
|
||||
class _MitraChatBodyContent extends ConsumerStatefulWidget {
|
||||
final String sessionId;
|
||||
final String customerName;
|
||||
final TextEditingController messageController;
|
||||
final TextEditingController goodbyeController;
|
||||
final ScrollController scrollController;
|
||||
final VoidCallback onSend;
|
||||
final ValueChanged<String> onTextChanged;
|
||||
|
||||
const _MitraChatBodyContent({
|
||||
required this.sessionId,
|
||||
required this.customerName,
|
||||
required this.messageController,
|
||||
required this.goodbyeController,
|
||||
required this.scrollController,
|
||||
required this.onSend,
|
||||
required this.onTextChanged,
|
||||
});
|
||||
|
||||
@override
|
||||
ConsumerState<_MitraChatBodyContent> createState() => _MitraChatBodyContentState();
|
||||
}
|
||||
|
||||
class _MitraChatBodyContentState extends ConsumerState<_MitraChatBodyContent> {
|
||||
bool _showBestieBanner = true;
|
||||
bool _showUserBanner = true;
|
||||
|
||||
// Phase 4 ESP topic display labels. Mirrors the customer-side `EspTopic`
|
||||
// enum's `label` property — we only need to read these here, not write.
|
||||
static const Map<String, String> _espTopicLabels = {
|
||||
'relationship': 'Hubungan',
|
||||
'family': 'Keluarga',
|
||||
'work': 'Pekerjaan',
|
||||
'study': 'Sekolah / Kuliah',
|
||||
'finance': 'Keuangan',
|
||||
'health': 'Kesehatan',
|
||||
'friendship': 'Pertemanan',
|
||||
'self_worth': 'Self-worth',
|
||||
'anxiety': 'Kecemasan',
|
||||
'loneliness': 'Kesepian',
|
||||
'grief': 'Kehilangan',
|
||||
'identity': 'Identitas',
|
||||
};
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final chatState = ref.watch(mitraChatProvider);
|
||||
final extState = ref.watch(mitraExtensionProvider);
|
||||
final isSensitive = chatState is MitraChatConnectedData &&
|
||||
chatState.topicSensitivity == TopicSensitivity.sensitive;
|
||||
|
||||
return Column(
|
||||
children: [
|
||||
if (isSensitive) _buildSensitivityHeader(),
|
||||
Expanded(child: _buildBody(chatState, extState)),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSensitivityHeader() {
|
||||
const theme = SensitivityTheme.sensitive;
|
||||
return Container(
|
||||
width: double.infinity,
|
||||
padding: const EdgeInsets.symmetric(vertical: 6, horizontal: 12),
|
||||
color: theme.badgeBg,
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(Icons.warning_amber_rounded, size: 16, color: theme.badgeFg),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
'Topik sensitif',
|
||||
style: TextStyle(
|
||||
color: theme.badgeFg,
|
||||
fontSize: 12,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBody(MitraChatData chatState, ExtensionData extState) {
|
||||
if (chatState is MitraChatConnectingData) {
|
||||
@@ -352,7 +456,7 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
|
||||
// item (above the first message bubble). Info-only.
|
||||
Expanded(
|
||||
child: ListView.builder(
|
||||
controller: _scrollController,
|
||||
controller: widget.scrollController,
|
||||
padding: const EdgeInsets.all(16),
|
||||
itemCount: state.messages.length +
|
||||
(state.topics.isNotEmpty ? 1 : 0),
|
||||
@@ -385,23 +489,6 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
|
||||
);
|
||||
}
|
||||
|
||||
// Phase 4 ESP topic display labels. Mirrors the customer-side `EspTopic`
|
||||
// enum's `label` property — we only need to read these here, not write.
|
||||
static const Map<String, String> _espTopicLabels = {
|
||||
'relationship': 'Hubungan',
|
||||
'family': 'Keluarga',
|
||||
'work': 'Pekerjaan',
|
||||
'study': 'Sekolah / Kuliah',
|
||||
'finance': 'Keuangan',
|
||||
'health': 'Kesehatan',
|
||||
'friendship': 'Pertemanan',
|
||||
'self_worth': 'Self-worth',
|
||||
'anxiety': 'Kecemasan',
|
||||
'loneliness': 'Kesepian',
|
||||
'grief': 'Kehilangan',
|
||||
'identity': 'Identitas',
|
||||
};
|
||||
|
||||
Widget _buildTopicChipsRow(List<String> topics) {
|
||||
return Container(
|
||||
margin: const EdgeInsets.only(bottom: 12),
|
||||
@@ -510,10 +597,10 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
|
||||
children: [
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: _messageController,
|
||||
onChanged: _onTextChanged,
|
||||
controller: widget.messageController,
|
||||
onChanged: widget.onTextChanged,
|
||||
textInputAction: TextInputAction.send,
|
||||
onSubmitted: (_) => _sendMessage(),
|
||||
onSubmitted: (_) => widget.onSend(),
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Ketik Pesan',
|
||||
hintStyle: TextStyle(color: Colors.grey.shade400),
|
||||
@@ -535,7 +622,7 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
|
||||
),
|
||||
child: IconButton(
|
||||
icon: const Icon(Icons.send, color: Colors.white, size: 20),
|
||||
onPressed: _sendMessage,
|
||||
onPressed: widget.onSend,
|
||||
),
|
||||
),
|
||||
],
|
||||
@@ -558,64 +645,64 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
|
||||
return Container(
|
||||
color: isSensitive ? SensitivityTheme.sensitive.bgTint : null,
|
||||
child: Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(Icons.timer, size: 64, color: Colors.orange),
|
||||
const SizedBox(height: 16),
|
||||
const Text('Permintaan Perpanjangan', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
|
||||
if (isSensitive) ...[
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
const Icon(Icons.timer, size: 64, color: Colors.orange),
|
||||
const SizedBox(height: 16),
|
||||
const Text('Permintaan Perpanjangan', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
|
||||
if (isSensitive) ...[
|
||||
const SizedBox(height: 8),
|
||||
SensitivityBadge(sensitivity: topic),
|
||||
],
|
||||
const SizedBox(height: 8),
|
||||
SensitivityBadge(sensitivity: topic),
|
||||
],
|
||||
const SizedBox(height: 8),
|
||||
Text('Customer ingin perpanjang $duration menit', textAlign: TextAlign.center),
|
||||
if (timeoutSeconds != null) ...[
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
'Tidak menjawab dalam $timeoutSeconds detik = otomatis disetujui',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
color: Colors.grey.shade700,
|
||||
fontStyle: FontStyle.italic,
|
||||
Text('Customer ingin perpanjang $duration menit', textAlign: TextAlign.center),
|
||||
if (timeoutSeconds != null) ...[
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
'Tidak menjawab dalam $timeoutSeconds detik = otomatis disetujui',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
color: Colors.grey.shade700,
|
||||
fontStyle: FontStyle.italic,
|
||||
),
|
||||
),
|
||||
],
|
||||
const SizedBox(height: 24),
|
||||
if (isResponding)
|
||||
const CircularProgressIndicator()
|
||||
else
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
|
||||
onPressed: extensionId == null ? null : () => ref.read(mitraExtensionProvider.notifier).respond(
|
||||
widget.sessionId,
|
||||
extensionId: extensionId,
|
||||
accepted: true,
|
||||
),
|
||||
child: const Text('Terima', style: TextStyle(color: Colors.white)),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
|
||||
onPressed: extensionId == null ? null : () => ref.read(mitraExtensionProvider.notifier).respond(
|
||||
widget.sessionId,
|
||||
extensionId: extensionId,
|
||||
accepted: false,
|
||||
),
|
||||
child: const Text('Tolak', style: TextStyle(color: Colors.white)),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
const SizedBox(height: 24),
|
||||
if (isResponding)
|
||||
const CircularProgressIndicator()
|
||||
else
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
|
||||
onPressed: extensionId == null ? null : () => ref.read(mitraExtensionProvider.notifier).respond(
|
||||
widget.sessionId,
|
||||
extensionId: extensionId,
|
||||
accepted: true,
|
||||
),
|
||||
child: const Text('Terima', style: TextStyle(color: Colors.white)),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
ElevatedButton(
|
||||
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
|
||||
onPressed: extensionId == null ? null : () => ref.read(mitraExtensionProvider.notifier).respond(
|
||||
widget.sessionId,
|
||||
extensionId: extensionId,
|
||||
accepted: false,
|
||||
),
|
||||
child: const Text('Tolak', style: TextStyle(color: Colors.white)),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -625,38 +712,38 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
|
||||
child: Column(
|
||||
children: [
|
||||
const SizedBox(height: 48),
|
||||
const Icon(Icons.waving_hand, size: 64, color: Colors.amber),
|
||||
const SizedBox(height: 16),
|
||||
const Text('Pesan Penutup', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
|
||||
const SizedBox(height: 8),
|
||||
const Text('Tuliskan pesan terakhirmu untuk Customer', textAlign: TextAlign.center),
|
||||
const SizedBox(height: 24),
|
||||
TextField(
|
||||
controller: _goodbyeController,
|
||||
maxLines: 3,
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Terima kasih sudah curhat...',
|
||||
border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
|
||||
),
|
||||
const Icon(Icons.waving_hand, size: 64, color: Colors.amber),
|
||||
const SizedBox(height: 16),
|
||||
const Text('Pesan Penutup', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
|
||||
const SizedBox(height: 8),
|
||||
const Text('Tuliskan pesan terakhirmu untuk Customer', textAlign: TextAlign.center),
|
||||
const SizedBox(height: 24),
|
||||
TextField(
|
||||
controller: widget.goodbyeController,
|
||||
maxLines: 3,
|
||||
decoration: InputDecoration(
|
||||
hintText: 'Terima kasih sudah curhat...',
|
||||
border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
ElevatedButton(
|
||||
onPressed: extState is ExtensionSubmittingData
|
||||
? null
|
||||
: () {
|
||||
final text = _goodbyeController.text.trim();
|
||||
if (text.isNotEmpty) {
|
||||
ref.read(mitraExtensionProvider.notifier).submitGoodbye(
|
||||
widget.sessionId, text,
|
||||
);
|
||||
}
|
||||
},
|
||||
child: extState is ExtensionSubmittingData
|
||||
? const SizedBox(width: 20, height: 20, child: CircularProgressIndicator(strokeWidth: 2))
|
||||
: const Text('Kirim & Selesai'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
ElevatedButton(
|
||||
onPressed: extState is ExtensionSubmittingData
|
||||
? null
|
||||
: () {
|
||||
final text = widget.goodbyeController.text.trim();
|
||||
if (text.isNotEmpty) {
|
||||
ref.read(mitraExtensionProvider.notifier).submitGoodbye(
|
||||
widget.sessionId, text,
|
||||
);
|
||||
}
|
||||
},
|
||||
child: extState is ExtensionSubmittingData
|
||||
? const SizedBox(width: 20, height: 20, child: CircularProgressIndicator(strokeWidth: 2))
|
||||
: const Text('Kirim & Selesai'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -695,7 +782,7 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
|
||||
),
|
||||
Expanded(
|
||||
child: ListView.builder(
|
||||
controller: _scrollController,
|
||||
controller: widget.scrollController,
|
||||
padding: const EdgeInsets.all(16),
|
||||
itemCount: state.messages.length,
|
||||
itemBuilder: (context, index) {
|
||||
@@ -711,3 +798,30 @@ class _MitraChatScreenState extends ConsumerState<MitraChatScreen> {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Tiny AppBar action that watches only [mitraChatRemainingSecondsProvider].
|
||||
/// Decoupling the timer from the chat state means a WS `session_tick` frame
|
||||
/// rebuilds *only* this widget (a single Text), not the surrounding AppBar,
|
||||
/// Scaffold body, message ListView, or input bar. This is the per-second
|
||||
/// hotspot the wider chat-screen perf work targets.
|
||||
class _MitraChatTimerAction extends ConsumerWidget {
|
||||
const _MitraChatTimerAction();
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final seconds = ref.watch(mitraChatRemainingSecondsProvider);
|
||||
if (seconds == null) return const SizedBox.shrink();
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(right: 16),
|
||||
child: Center(
|
||||
child: Text(
|
||||
'${seconds}s',
|
||||
style: TextStyle(
|
||||
color: seconds < 30 ? Colors.red : Colors.black,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user