359 lines
10 KiB
Dart
359 lines
10 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:provider/provider.dart';
|
|
import '../providers/auth_provider.dart';
|
|
import '../providers/chat_provider.dart';
|
|
import '../services/chat_service.dart';
|
|
import '../widgets/message_bubble.dart';
|
|
import '../widgets/chat_input.dart';
|
|
|
|
class ChatScreen extends StatefulWidget {
|
|
const ChatScreen({super.key});
|
|
|
|
@override
|
|
State<ChatScreen> createState() => _ChatScreenState();
|
|
}
|
|
|
|
class _ChatScreenState extends State<ChatScreen> with WidgetsBindingObserver {
|
|
final _scrollController = ScrollController();
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
WidgetsBinding.instance.addObserver(this);
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
final auth = context.read<AuthProvider>();
|
|
final chat = context.read<ChatProvider>();
|
|
chat.updateAuth(auth);
|
|
chat.addListener(_onChatUpdate);
|
|
});
|
|
}
|
|
|
|
String? _lastError;
|
|
void _onChatUpdate() {
|
|
final chat = context.read<ChatProvider>();
|
|
if (chat.error != null && chat.error != _lastError) {
|
|
_lastError = chat.error;
|
|
ScaffoldMessenger.of(context).showSnackBar(
|
|
SnackBar(
|
|
content: Text(chat.error!),
|
|
backgroundColor: Colors.red.shade700,
|
|
action: SnackBarAction(
|
|
label: 'OK',
|
|
textColor: Colors.white,
|
|
onPressed: () => chat.clearError(),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
WidgetsBinding.instance.removeObserver(this);
|
|
_scrollController.dispose();
|
|
try {
|
|
final chat = context.read<ChatProvider>();
|
|
chat.removeListener(_onChatUpdate);
|
|
} catch (_) {}
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
void didChangeAppLifecycleState(AppLifecycleState state) {
|
|
if (state == AppLifecycleState.resumed) {
|
|
final chat = context.read<ChatProvider>();
|
|
if (!chat.isConnected) {
|
|
chat.connect();
|
|
}
|
|
}
|
|
}
|
|
|
|
void _scrollToBottom() {
|
|
if (_scrollController.hasClients) {
|
|
_scrollController.animateTo(
|
|
_scrollController.position.maxScrollExtent,
|
|
duration: const Duration(milliseconds: 300),
|
|
curve: Curves.easeOut,
|
|
);
|
|
}
|
|
}
|
|
|
|
void _sendMessage(String message) {
|
|
final chat = context.read<ChatProvider>();
|
|
chat.sendMessage(message);
|
|
Future.delayed(const Duration(milliseconds: 100), _scrollToBottom);
|
|
}
|
|
|
|
void _newChat() {
|
|
final chat = context.read<ChatProvider>();
|
|
final name = 'Chat ${DateTime.now().hour}:${DateTime.now().minute.toString().padLeft(2, '0')}';
|
|
chat.createSession(name);
|
|
}
|
|
|
|
void _logout() {
|
|
final auth = context.read<AuthProvider>();
|
|
final chat = context.read<ChatProvider>();
|
|
chat.disconnect();
|
|
auth.logout();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: const Color(0xFF1A1A1A),
|
|
appBar: AppBar(
|
|
backgroundColor: const Color(0xFF2D2D2D),
|
|
elevation: 0,
|
|
title: Consumer<ChatProvider>(
|
|
builder: (context, chat, _) {
|
|
return Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(Icons.auto_awesome, color: Colors.orange.shade400, size: 24),
|
|
const SizedBox(width: 8),
|
|
Text(
|
|
chat.currentSession?.name ?? 'Captain Claude',
|
|
style: const TextStyle(fontSize: 18),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
actions: [
|
|
Consumer<ChatProvider>(
|
|
builder: (context, chat, _) {
|
|
return IconButton(
|
|
icon: const Icon(Icons.add),
|
|
onPressed: _newChat,
|
|
tooltip: 'Nuevo Chat',
|
|
);
|
|
},
|
|
),
|
|
IconButton(
|
|
icon: const Icon(Icons.logout),
|
|
onPressed: _logout,
|
|
tooltip: 'Salir',
|
|
),
|
|
],
|
|
),
|
|
body: Column(
|
|
children: [
|
|
// Connection status bar
|
|
Consumer<ChatProvider>(
|
|
builder: (context, chat, _) {
|
|
return _buildConnectionBar(chat);
|
|
},
|
|
),
|
|
// Messages list
|
|
Expanded(
|
|
child: Consumer<ChatProvider>(
|
|
builder: (context, chat, _) {
|
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
if (chat.isProcessing) _scrollToBottom();
|
|
});
|
|
|
|
if (!chat.isSessionConnected) {
|
|
return _buildStartState();
|
|
}
|
|
|
|
if (chat.messages.isEmpty) {
|
|
return _buildEmptyState();
|
|
}
|
|
|
|
return ListView.builder(
|
|
controller: _scrollController,
|
|
padding: const EdgeInsets.only(top: 8, bottom: 8),
|
|
itemCount: chat.messages.length,
|
|
itemBuilder: (context, index) {
|
|
return MessageBubble(message: chat.messages[index]);
|
|
},
|
|
);
|
|
},
|
|
),
|
|
),
|
|
// Input area
|
|
Consumer<ChatProvider>(
|
|
builder: (context, chat, _) {
|
|
return ChatInput(
|
|
onSend: _sendMessage,
|
|
isConnected: chat.isConnected && chat.isSessionConnected,
|
|
isLoading: chat.isProcessing,
|
|
);
|
|
},
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildConnectionBar(ChatProvider chat) {
|
|
if (chat.connectionState == ChatConnectionState.connected) {
|
|
return const SizedBox.shrink();
|
|
}
|
|
|
|
Color backgroundColor;
|
|
String text;
|
|
IconData icon;
|
|
|
|
switch (chat.connectionState) {
|
|
case ChatConnectionState.connecting:
|
|
backgroundColor = Colors.blue.shade700;
|
|
text = 'Conectando...';
|
|
icon = Icons.sync;
|
|
break;
|
|
case ChatConnectionState.reconnecting:
|
|
backgroundColor = Colors.orange.shade700;
|
|
text = 'Reconectando...';
|
|
icon = Icons.sync;
|
|
break;
|
|
case ChatConnectionState.error:
|
|
backgroundColor = Colors.red.shade700;
|
|
text = 'Error de conexión';
|
|
icon = Icons.error_outline;
|
|
break;
|
|
default:
|
|
backgroundColor = Colors.grey.shade700;
|
|
text = 'Desconectado';
|
|
icon = Icons.cloud_off;
|
|
}
|
|
|
|
final showRetry = chat.connectionState == ChatConnectionState.error ||
|
|
chat.connectionState == ChatConnectionState.disconnected;
|
|
|
|
return GestureDetector(
|
|
onTap: showRetry ? () => chat.connect() : null,
|
|
child: Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
|
color: backgroundColor,
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(icon, size: 16, color: Colors.white),
|
|
const SizedBox(width: 8),
|
|
Text(
|
|
showRetry ? '$text - Toca para reintentar' : text,
|
|
style: const TextStyle(color: Colors.white, fontSize: 13),
|
|
),
|
|
if (chat.connectionState == ChatConnectionState.connecting ||
|
|
chat.connectionState == ChatConnectionState.reconnecting) ...[
|
|
const SizedBox(width: 8),
|
|
const SizedBox(
|
|
width: 12,
|
|
height: 12,
|
|
child: CircularProgressIndicator(
|
|
strokeWidth: 2,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildStartState() {
|
|
return Center(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(32),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(
|
|
Icons.chat_bubble_outline,
|
|
size: 80,
|
|
color: Colors.orange.shade400.withOpacity(0.5),
|
|
),
|
|
const SizedBox(height: 24),
|
|
Text(
|
|
'Captain Claude',
|
|
style: TextStyle(
|
|
color: Colors.grey.shade300,
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
Text(
|
|
'Toca el botón + para iniciar un chat',
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
color: Colors.grey.shade500,
|
|
fontSize: 15,
|
|
),
|
|
),
|
|
const SizedBox(height: 32),
|
|
ElevatedButton.icon(
|
|
onPressed: _newChat,
|
|
icon: const Icon(Icons.add),
|
|
label: const Text('Nuevo Chat'),
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: Colors.orange.shade700,
|
|
foregroundColor: Colors.white,
|
|
padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildEmptyState() {
|
|
return Center(
|
|
child: Padding(
|
|
padding: const EdgeInsets.all(32),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(
|
|
Icons.auto_awesome,
|
|
size: 80,
|
|
color: Colors.orange.shade400.withOpacity(0.5),
|
|
),
|
|
const SizedBox(height: 24),
|
|
Text(
|
|
'Chat Conectado',
|
|
style: TextStyle(
|
|
color: Colors.grey.shade300,
|
|
fontSize: 24,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
Text(
|
|
'Escribe un mensaje para hablar con Claude',
|
|
textAlign: TextAlign.center,
|
|
style: TextStyle(
|
|
color: Colors.grey.shade500,
|
|
fontSize: 15,
|
|
),
|
|
),
|
|
const SizedBox(height: 32),
|
|
Wrap(
|
|
spacing: 8,
|
|
runSpacing: 8,
|
|
alignment: WrapAlignment.center,
|
|
children: [
|
|
_buildSuggestionChip('Hola'),
|
|
_buildSuggestionChip('Estado del sistema'),
|
|
_buildSuggestionChip('Ayuda'),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildSuggestionChip(String text) {
|
|
return ActionChip(
|
|
label: Text(text),
|
|
backgroundColor: const Color(0xFF2D2D2D),
|
|
labelStyle: TextStyle(color: Colors.grey.shade300, fontSize: 13),
|
|
side: BorderSide(color: Colors.grey.shade700),
|
|
onPressed: () => _sendMessage(text),
|
|
);
|
|
}
|
|
}
|