320 lines
9.8 KiB
Dart
320 lines
9.8 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
|
|
|
import '../../../core/theme/app_theme.dart';
|
|
import '../providers/help_chat_provider.dart';
|
|
|
|
const _quickQuestions = [
|
|
'¿Cuándo pasa el camión por mi colonia?',
|
|
'¿Cómo separo correctamente la basura?',
|
|
'¿Qué hago si no pasó el camión?',
|
|
'¿Cómo reporto un problema con una unidad?',
|
|
];
|
|
|
|
class HelpFaqScreen extends ConsumerStatefulWidget {
|
|
const HelpFaqScreen({super.key});
|
|
|
|
@override
|
|
ConsumerState<HelpFaqScreen> createState() => _HelpFaqScreenState();
|
|
}
|
|
|
|
class _HelpFaqScreenState extends ConsumerState<HelpFaqScreen> {
|
|
final _inputCtrl = TextEditingController();
|
|
final _scrollCtrl = ScrollController();
|
|
|
|
@override
|
|
void dispose() {
|
|
_inputCtrl.dispose();
|
|
_scrollCtrl.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
Future<void> _send(String text) async {
|
|
_inputCtrl.clear();
|
|
await ref.read(helpChatControllerProvider.notifier).send(text);
|
|
await Future.delayed(const Duration(milliseconds: 100));
|
|
if (_scrollCtrl.hasClients) {
|
|
_scrollCtrl.animateTo(
|
|
_scrollCtrl.position.maxScrollExtent,
|
|
duration: const Duration(milliseconds: 250),
|
|
curve: Curves.easeOut,
|
|
);
|
|
}
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final state = ref.watch(helpChatControllerProvider);
|
|
|
|
return Scaffold(
|
|
backgroundColor: AppTheme.background,
|
|
body: Column(
|
|
children: [
|
|
_GradientHeader(
|
|
hasMessages: state.messages.isNotEmpty,
|
|
onReset: state.messages.isEmpty
|
|
? null
|
|
: () => ref.read(helpChatControllerProvider.notifier).reset(),
|
|
),
|
|
if (state.messages.isEmpty) _QuickQuestions(onSelect: _send),
|
|
Expanded(
|
|
child: state.messages.isEmpty
|
|
? const _EmptyHint()
|
|
: ListView.builder(
|
|
controller: _scrollCtrl,
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 16,
|
|
vertical: 12,
|
|
),
|
|
itemCount: state.messages.length,
|
|
itemBuilder: (_, i) => _Bubble(message: state.messages[i]),
|
|
),
|
|
),
|
|
if (state.error != null)
|
|
Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.all(12),
|
|
color: AppTheme.danger.withValues(alpha: 0.1),
|
|
child: Text(
|
|
state.error!,
|
|
style: const TextStyle(color: AppTheme.danger, fontSize: 13),
|
|
),
|
|
),
|
|
_Composer(
|
|
controller: _inputCtrl,
|
|
sending: state.sending,
|
|
onSend: _send,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _GradientHeader extends StatelessWidget {
|
|
final bool hasMessages;
|
|
final VoidCallback? onReset;
|
|
const _GradientHeader({required this.hasMessages, this.onReset});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
decoration: const BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topLeft,
|
|
end: Alignment.bottomRight,
|
|
stops: [0.0, 0.6, 1.0],
|
|
colors: [Color(0xFF4A0E26), Color(0xFF6D1234), Color(0xFF9B1B4A)],
|
|
),
|
|
),
|
|
child: SafeArea(
|
|
bottom: false,
|
|
child: Padding(
|
|
padding: const EdgeInsets.fromLTRB(8, 4, 8, 18),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
IconButton(
|
|
icon: const Icon(Icons.arrow_back_ios_new_rounded,
|
|
color: Colors.white, size: 20),
|
|
onPressed: () => Navigator.of(context).pop(),
|
|
),
|
|
const Spacer(),
|
|
if (hasMessages)
|
|
IconButton(
|
|
tooltip: 'Reiniciar conversación',
|
|
icon: const Icon(Icons.refresh_rounded,
|
|
color: Colors.white, size: 20),
|
|
onPressed: onReset,
|
|
),
|
|
],
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.fromLTRB(16, 4, 16, 0),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
width: 42,
|
|
height: 42,
|
|
decoration: BoxDecoration(
|
|
color: Colors.white.withValues(alpha: 0.15),
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: const Icon(Icons.support_agent_rounded,
|
|
color: Colors.white, size: 22),
|
|
),
|
|
const SizedBox(width: 14),
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'Ayuda y soporte',
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w700,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
Text(
|
|
'Pregunta lo que necesites',
|
|
style: TextStyle(
|
|
fontSize: 12,
|
|
color: Colors.white.withValues(alpha: 0.75),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _QuickQuestions extends StatelessWidget {
|
|
final ValueChanged<String> onSelect;
|
|
const _QuickQuestions({required this.onSelect});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Container(
|
|
width: double.infinity,
|
|
padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.surface,
|
|
border: Border(
|
|
bottom: BorderSide(
|
|
color: Theme.of(context).colorScheme.outlineVariant, width: 0.5),
|
|
),
|
|
),
|
|
child: Wrap(
|
|
spacing: 8,
|
|
runSpacing: 8,
|
|
children: [
|
|
for (final q in _quickQuestions)
|
|
ActionChip(
|
|
label: Text(q, style: const TextStyle(fontSize: 12)),
|
|
onPressed: () => onSelect(q),
|
|
backgroundColor: AppTheme.primaryLight,
|
|
side: const BorderSide(color: AppTheme.primary, width: 0.5),
|
|
labelStyle: const TextStyle(color: AppTheme.primaryDark),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _EmptyHint extends StatelessWidget {
|
|
const _EmptyHint();
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return const Center(
|
|
child: Padding(
|
|
padding: EdgeInsets.all(24),
|
|
child: Text(
|
|
'Hazme una pregunta sobre la recolección de basura,\nseparación de residuos o cómo usar la app.',
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(color: AppTheme.textSecondary, height: 1.5),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _Bubble extends StatelessWidget {
|
|
final HelpChatMessage message;
|
|
const _Bubble({required this.message});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final isUser = message.role == 'user';
|
|
return Align(
|
|
alignment: isUser ? Alignment.centerRight : Alignment.centerLeft,
|
|
child: Container(
|
|
margin: const EdgeInsets.symmetric(vertical: 4),
|
|
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
|
|
constraints: BoxConstraints(
|
|
maxWidth: MediaQuery.of(context).size.width * 0.78,
|
|
),
|
|
decoration: BoxDecoration(
|
|
color: isUser ? AppTheme.primary : AppTheme.surface,
|
|
borderRadius: BorderRadius.circular(AppTheme.radiusLg),
|
|
border: Border.all(
|
|
color: isUser ? AppTheme.primary : AppTheme.border,
|
|
width: 0.5,
|
|
),
|
|
),
|
|
child: Text(
|
|
message.content,
|
|
style: TextStyle(
|
|
color: isUser ? Colors.white : AppTheme.textPrimary,
|
|
fontSize: 14,
|
|
height: 1.4,
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _Composer extends StatelessWidget {
|
|
final TextEditingController controller;
|
|
final bool sending;
|
|
final ValueChanged<String> onSend;
|
|
const _Composer({
|
|
required this.controller,
|
|
required this.sending,
|
|
required this.onSend,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SafeArea(
|
|
top: false,
|
|
child: Container(
|
|
padding: const EdgeInsets.fromLTRB(12, 8, 8, 8),
|
|
decoration: const BoxDecoration(
|
|
color: AppTheme.surface,
|
|
border: Border(top: BorderSide(color: AppTheme.border, width: 0.5)),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: TextField(
|
|
controller: controller,
|
|
enabled: !sending,
|
|
minLines: 1,
|
|
maxLines: 4,
|
|
textInputAction: TextInputAction.send,
|
|
onSubmitted: onSend,
|
|
decoration: const InputDecoration(
|
|
hintText: 'Escribe tu pregunta…',
|
|
border: InputBorder.none,
|
|
),
|
|
),
|
|
),
|
|
IconButton(
|
|
icon: sending
|
|
? const SizedBox(
|
|
width: 20,
|
|
height: 20,
|
|
child: CircularProgressIndicator(strokeWidth: 2),
|
|
)
|
|
: const Icon(Icons.send_rounded, color: AppTheme.primary),
|
|
onPressed: sending ? null : () => onSend(controller.text),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|