feat(chat): integrate ChatBloc into HomeScreen
This commit is contained in:
@@ -1,7 +1,13 @@
|
|||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter_bloc/flutter_bloc.dart';
|
||||||
import 'package:go_router/go_router.dart';
|
import 'package:go_router/go_router.dart';
|
||||||
import 'package:lucide_icons/lucide_icons.dart';
|
import 'package:lucide_icons/lucide_icons.dart';
|
||||||
import '../../../../core/theme/design_tokens.dart';
|
import '../../../../core/theme/design_tokens.dart';
|
||||||
|
import '../../../chat/data/models/chat_list_item.dart';
|
||||||
|
import '../../../chat/presentation/bloc/chat_bloc.dart';
|
||||||
|
import '../../../chat/ui/widgets/ui_schema_renderer.dart';
|
||||||
|
import '../../../../shared/widgets/toast/toast.dart';
|
||||||
|
import '../../../../shared/widgets/toast/toast_type.dart';
|
||||||
import 'home_sheet.dart';
|
import 'home_sheet.dart';
|
||||||
|
|
||||||
class HomeScreen extends StatefulWidget {
|
class HomeScreen extends StatefulWidget {
|
||||||
@@ -13,6 +19,7 @@ class HomeScreen extends StatefulWidget {
|
|||||||
|
|
||||||
class _HomeScreenState extends State<HomeScreen> {
|
class _HomeScreenState extends State<HomeScreen> {
|
||||||
final TextEditingController _messageController = TextEditingController();
|
final TextEditingController _messageController = TextEditingController();
|
||||||
|
final ScrollController _scrollController = ScrollController();
|
||||||
|
|
||||||
bool get _hasMessage => _messageController.text.trim().isNotEmpty;
|
bool get _hasMessage => _messageController.text.trim().isNotEmpty;
|
||||||
|
|
||||||
@@ -26,6 +33,7 @@ class _HomeScreenState extends State<HomeScreen> {
|
|||||||
void dispose() {
|
void dispose() {
|
||||||
_messageController.removeListener(_onMessageChanged);
|
_messageController.removeListener(_onMessageChanged);
|
||||||
_messageController.dispose();
|
_messageController.dispose();
|
||||||
|
_scrollController.dispose();
|
||||||
super.dispose();
|
super.dispose();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -35,18 +43,30 @@ class _HomeScreenState extends State<HomeScreen> {
|
|||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
|
return BlocProvider(
|
||||||
|
create: (context) => ChatBloc(),
|
||||||
|
child: BlocConsumer<ChatBloc, ChatState>(
|
||||||
|
listener: (context, state) {
|
||||||
|
if (state.error != null) {
|
||||||
|
Toast.show(context, state.error!, type: ToastType.error);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
builder: (context, state) {
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
backgroundColor: const Color(0xFFF8FAFC),
|
backgroundColor: const Color(0xFFF8FAFC),
|
||||||
body: SafeArea(
|
body: SafeArea(
|
||||||
child: Column(
|
child: Column(
|
||||||
children: [
|
children: [
|
||||||
_buildHeader(context),
|
_buildHeader(context),
|
||||||
Expanded(child: _buildChatArea()),
|
Expanded(child: _buildChatArea(context, state)),
|
||||||
_buildInputContainer(context),
|
_buildInputContainer(context),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
},
|
||||||
|
),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget _buildHeader(BuildContext context) {
|
Widget _buildHeader(BuildContext context) {
|
||||||
@@ -92,91 +112,159 @@ class _HomeScreenState extends State<HomeScreen> {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget _buildChatArea() {
|
Widget _buildChatArea(BuildContext context, ChatState state) {
|
||||||
return Padding(
|
if (state.items.isEmpty) {
|
||||||
padding: const EdgeInsets.all(20),
|
return const Center(
|
||||||
child: Column(
|
child: Text(
|
||||||
children: [
|
'开始对话吧',
|
||||||
_buildUserMessageRow(),
|
style: TextStyle(fontSize: 16, color: AppColors.slate400),
|
||||||
const SizedBox(height: 16),
|
|
||||||
_buildTodoCard(),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget _buildUserMessageRow() {
|
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||||
|
if (_scrollController.hasClients) {
|
||||||
|
_scrollController.animateTo(
|
||||||
|
_scrollController.position.maxScrollExtent,
|
||||||
|
duration: const Duration(milliseconds: 300),
|
||||||
|
curve: Curves.easeOut,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return ListView.builder(
|
||||||
|
controller: _scrollController,
|
||||||
|
padding: const EdgeInsets.all(20),
|
||||||
|
itemCount: state.items.length,
|
||||||
|
itemBuilder: (context, index) {
|
||||||
|
final item = state.items[index];
|
||||||
|
return Padding(
|
||||||
|
padding: const EdgeInsets.only(bottom: 16),
|
||||||
|
child: _buildChatItem(item),
|
||||||
|
);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildChatItem(ChatListItem item) {
|
||||||
|
switch (item.type) {
|
||||||
|
case ChatItemType.message:
|
||||||
|
return _buildMessageItem(item as TextMessageItem);
|
||||||
|
case ChatItemType.toolCall:
|
||||||
|
return _buildToolCallItem(item as ToolCallItem);
|
||||||
|
case ChatItemType.toolResult:
|
||||||
|
return _buildToolResultItem(item as ToolResultItem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget _buildMessageItem(TextMessageItem item) {
|
||||||
|
final isUser = item.sender == MessageSender.user;
|
||||||
return Row(
|
return Row(
|
||||||
|
mainAxisAlignment: isUser
|
||||||
|
? MainAxisAlignment.end
|
||||||
|
: MainAxisAlignment.start,
|
||||||
crossAxisAlignment: CrossAxisAlignment.center,
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
children: [
|
children: [
|
||||||
const Expanded(child: SizedBox()),
|
if (!isUser) ...[
|
||||||
Container(
|
Container(
|
||||||
|
width: 32,
|
||||||
|
height: 32,
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: AppColors.blue100,
|
||||||
|
shape: BoxShape.circle,
|
||||||
|
),
|
||||||
|
child: const Icon(
|
||||||
|
LucideIcons.bot,
|
||||||
|
size: 18,
|
||||||
|
color: AppColors.blue600,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
const SizedBox(width: 8),
|
||||||
|
],
|
||||||
|
Flexible(
|
||||||
|
child: Container(
|
||||||
padding: const EdgeInsets.symmetric(horizontal: 13, vertical: 9),
|
padding: const EdgeInsets.symmetric(horizontal: 13, vertical: 9),
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: const Color(0xFFEAF1FB),
|
color: isUser ? const Color(0xFFEAF1FB) : AppColors.white,
|
||||||
borderRadius: const BorderRadius.only(
|
borderRadius: BorderRadius.only(
|
||||||
topLeft: Radius.circular(12),
|
topLeft: const Radius.circular(12),
|
||||||
topRight: Radius.circular(12),
|
topRight: const Radius.circular(12),
|
||||||
bottomLeft: Radius.circular(12),
|
bottomLeft: Radius.circular(isUser ? 12 : 0),
|
||||||
bottomRight: Radius.circular(0),
|
bottomRight: Radius.circular(isUser ? 0 : 12),
|
||||||
|
),
|
||||||
|
border: isUser ? null : Border.all(color: AppColors.slate300),
|
||||||
|
),
|
||||||
|
child: Text(
|
||||||
|
item.content,
|
||||||
|
style: const TextStyle(fontSize: 14, color: AppColors.slate900),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
child: const Text(
|
|
||||||
'明天提醒我开会',
|
|
||||||
style: TextStyle(fontSize: 14, color: AppColors.slate900),
|
|
||||||
),
|
|
||||||
),
|
),
|
||||||
|
if (isUser) const SizedBox(width: 40),
|
||||||
|
if (!isUser) const SizedBox(width: 40),
|
||||||
],
|
],
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
Widget _buildTodoCard() {
|
Widget _buildToolCallItem(ToolCallItem item) {
|
||||||
|
String statusText;
|
||||||
|
Color statusColor;
|
||||||
|
IconData statusIcon;
|
||||||
|
|
||||||
|
switch (item.status) {
|
||||||
|
case ToolCallStatus.pending:
|
||||||
|
statusText = '准备中...';
|
||||||
|
statusColor = AppColors.slate500;
|
||||||
|
statusIcon = LucideIcons.clock;
|
||||||
|
break;
|
||||||
|
case ToolCallStatus.executing:
|
||||||
|
statusText = '执行中...';
|
||||||
|
statusColor = AppColors.blue600;
|
||||||
|
statusIcon = LucideIcons.loader;
|
||||||
|
break;
|
||||||
|
case ToolCallStatus.error:
|
||||||
|
statusText = item.errorMessage ?? '执行失败';
|
||||||
|
statusColor = AppColors.red600;
|
||||||
|
statusIcon = LucideIcons.alertCircle;
|
||||||
|
break;
|
||||||
|
case ToolCallStatus.completed:
|
||||||
|
statusText = '已完成';
|
||||||
|
statusColor = AppColors.emerald600;
|
||||||
|
statusIcon = LucideIcons.checkCircle;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
return Container(
|
return Container(
|
||||||
width: double.infinity,
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||||
padding: const EdgeInsets.all(16),
|
|
||||||
decoration: BoxDecoration(
|
decoration: BoxDecoration(
|
||||||
color: AppColors.white,
|
color: AppColors.blue50,
|
||||||
borderRadius: BorderRadius.circular(16),
|
borderRadius: BorderRadius.circular(8),
|
||||||
|
border: Border.all(color: AppColors.slate300),
|
||||||
),
|
),
|
||||||
child: Row(
|
child: Row(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
children: [
|
children: [
|
||||||
Container(
|
Icon(statusIcon, size: 16, color: statusColor),
|
||||||
width: 4,
|
const SizedBox(width: 8),
|
||||||
height: 60,
|
|
||||||
decoration: const BoxDecoration(
|
|
||||||
color: AppColors.blue500,
|
|
||||||
borderRadius: BorderRadius.only(
|
|
||||||
topLeft: Radius.circular(4),
|
|
||||||
bottomLeft: Radius.circular(4),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
const SizedBox(width: 12),
|
|
||||||
const Expanded(
|
|
||||||
child: Column(
|
|
||||||
crossAxisAlignment: CrossAxisAlignment.start,
|
|
||||||
children: [
|
|
||||||
Text(
|
Text(
|
||||||
'明天 10:00',
|
item.toolName,
|
||||||
style: TextStyle(fontSize: 12, color: AppColors.slate500),
|
style: const TextStyle(
|
||||||
),
|
fontSize: 13,
|
||||||
SizedBox(height: 4),
|
|
||||||
Text(
|
|
||||||
'开会',
|
|
||||||
style: TextStyle(
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: FontWeight.w500,
|
fontWeight: FontWeight.w500,
|
||||||
color: AppColors.slate900,
|
color: AppColors.slate700,
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
const SizedBox(width: 8),
|
||||||
|
Text(statusText, style: TextStyle(fontSize: 12, color: statusColor)),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Widget _buildToolResultItem(ToolResultItem item) {
|
||||||
|
return UiSchemaRenderer.render(item.uiCard);
|
||||||
|
}
|
||||||
|
|
||||||
Widget _buildInputContainer(BuildContext context) {
|
Widget _buildInputContainer(BuildContext context) {
|
||||||
return Container(
|
return Container(
|
||||||
padding: const EdgeInsets.all(16),
|
padding: const EdgeInsets.all(16),
|
||||||
@@ -231,13 +319,19 @@ class _HomeScreenState extends State<HomeScreen> {
|
|||||||
contentPadding: EdgeInsets.zero,
|
contentPadding: EdgeInsets.zero,
|
||||||
filled: false,
|
filled: false,
|
||||||
),
|
),
|
||||||
|
onSubmitted: (_) => _sendMessage(context),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
const SizedBox(width: 8),
|
const SizedBox(width: 8),
|
||||||
Icon(
|
GestureDetector(
|
||||||
|
onTap: _hasMessage ? () => _sendMessage(context) : null,
|
||||||
|
child: Icon(
|
||||||
_hasMessage ? LucideIcons.send : LucideIcons.mic,
|
_hasMessage ? LucideIcons.send : LucideIcons.mic,
|
||||||
size: 24,
|
size: 24,
|
||||||
color: _hasMessage ? AppColors.blue600 : AppColors.slate500,
|
color: _hasMessage
|
||||||
|
? AppColors.blue600
|
||||||
|
: AppColors.slate500,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
@@ -248,6 +342,13 @@ class _HomeScreenState extends State<HomeScreen> {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Future<void> _sendMessage(BuildContext context) async {
|
||||||
|
final content = _messageController.text.trim();
|
||||||
|
if (content.isEmpty) return;
|
||||||
|
_messageController.clear();
|
||||||
|
context.read<ChatBloc>().sendMessage(content);
|
||||||
|
}
|
||||||
|
|
||||||
void _showBottomSheet(BuildContext context) {
|
void _showBottomSheet(BuildContext context) {
|
||||||
showModalBottomSheet(
|
showModalBottomSheet(
|
||||||
context: context,
|
context: context,
|
||||||
|
|||||||
Reference in New Issue
Block a user