|
|
@ -13,20 +13,26 @@ class ChatView extends GetView<ChatController> { |
|
|
|
|
|
|
|
|
@override |
|
|
@override |
|
|
Widget build(BuildContext context) { |
|
|
Widget build(BuildContext context) { |
|
|
|
|
|
final isDarkMode = Theme.of(context).brightness == Brightness.dark; |
|
|
|
|
|
|
|
|
return Scaffold( |
|
|
return Scaffold( |
|
|
backgroundColor: Colors.grey[50], // 使用浅灰背景，类似HTML模板 |
|
|
backgroundColor: isDarkMode ? AppColors.darkBackground : Colors.grey[50], |
|
|
appBar: _buildAppBar(), |
|
|
appBar: _buildAppBar(isDarkMode), |
|
|
body: _buildBody(), |
|
|
body: _buildBody(isDarkMode), |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 构建AppBar |
|
|
// 构建AppBar |
|
|
PreferredSizeWidget _buildAppBar() { |
|
|
PreferredSizeWidget _buildAppBar(bool isDarkMode) { |
|
|
return AppBar( |
|
|
return AppBar( |
|
|
elevation: 1, |
|
|
elevation: 1, |
|
|
backgroundColor: Colors.white, |
|
|
backgroundColor: isDarkMode ? AppColors.cardBackground : Colors.white, |
|
|
leading: IconButton( |
|
|
leading: IconButton( |
|
|
icon: Icon(Icons.arrow_back_ios, color: Colors.black87, size: 20.r), |
|
|
icon: Icon( |
|
|
|
|
|
Icons.arrow_back_ios, |
|
|
|
|
|
color: isDarkMode ? Colors.white : Colors.black87, |
|
|
|
|
|
size: 20.r |
|
|
|
|
|
), |
|
|
onPressed: () => Get.back(), |
|
|
onPressed: () => Get.back(), |
|
|
), |
|
|
), |
|
|
titleSpacing: 0, |
|
|
titleSpacing: 0, |
|
|
@ -80,7 +86,7 @@ class ChatView extends GetView<ChatController> { |
|
|
style: TextStyle( |
|
|
style: TextStyle( |
|
|
fontSize: 16.sp, |
|
|
fontSize: 16.sp, |
|
|
fontWeight: FontWeight.bold, |
|
|
fontWeight: FontWeight.bold, |
|
|
color: Colors.black87, |
|
|
color: isDarkMode ? Colors.white : Colors.black87, |
|
|
), |
|
|
), |
|
|
), |
|
|
), |
|
|
Row( |
|
|
Row( |
|
|
@ -117,7 +123,7 @@ class ChatView extends GetView<ChatController> { |
|
|
: Icons.volume_off, |
|
|
: Icons.volume_off, |
|
|
color: controller.isTtsEnabled.value |
|
|
color: controller.isTtsEnabled.value |
|
|
? AppColors.primary |
|
|
? AppColors.primary |
|
|
: Colors.grey, |
|
|
: isDarkMode ? Colors.grey[400] : Colors.grey, |
|
|
), |
|
|
), |
|
|
onPressed: controller.toggleTts, |
|
|
onPressed: controller.toggleTts, |
|
|
)), |
|
|
)), |
|
|
@ -127,21 +133,27 @@ class ChatView extends GetView<ChatController> { |
|
|
height: 34.r, |
|
|
height: 34.r, |
|
|
margin: EdgeInsets.only(right: 8.w), |
|
|
margin: EdgeInsets.only(right: 8.w), |
|
|
decoration: BoxDecoration( |
|
|
decoration: BoxDecoration( |
|
|
color: Colors.grey[100], |
|
|
color: isDarkMode ? Colors.white.withOpacity(0.1) : Colors.grey[100], |
|
|
shape: BoxShape.circle, |
|
|
shape: BoxShape.circle, |
|
|
boxShadow: [ |
|
|
boxShadow: [ |
|
|
BoxShadow( |
|
|
if (!isDarkMode) |
|
|
color: Colors.black.withOpacity(0.05), |
|
|
BoxShadow( |
|
|
blurRadius: 2, |
|
|
color: Colors.black.withOpacity(0.05), |
|
|
spreadRadius: 0.5, |
|
|
blurRadius: 2, |
|
|
), |
|
|
spreadRadius: 0.5, |
|
|
|
|
|
), |
|
|
], |
|
|
], |
|
|
), |
|
|
), |
|
|
child: PopupMenuButton( |
|
|
child: PopupMenuButton( |
|
|
icon: Icon(Icons.more_vert, color: Colors.black87, size: 20.r), |
|
|
icon: Icon( |
|
|
|
|
|
Icons.more_vert, |
|
|
|
|
|
color: isDarkMode ? Colors.white : Colors.black87, |
|
|
|
|
|
size: 20.r |
|
|
|
|
|
), |
|
|
shape: RoundedRectangleBorder( |
|
|
shape: RoundedRectangleBorder( |
|
|
borderRadius: BorderRadius.circular(12.r), |
|
|
borderRadius: BorderRadius.circular(12.r), |
|
|
), |
|
|
), |
|
|
|
|
|
color: isDarkMode ? AppColors.cardBackground : Colors.white, |
|
|
itemBuilder: (context) => [ |
|
|
itemBuilder: (context) => [ |
|
|
PopupMenuItem( |
|
|
PopupMenuItem( |
|
|
value: 'clear', |
|
|
value: 'clear', |
|
|
@ -149,16 +161,23 @@ class ChatView extends GetView<ChatController> { |
|
|
children: [ |
|
|
children: [ |
|
|
Icon(Icons.delete_outline, color: Colors.red), |
|
|
Icon(Icons.delete_outline, color: Colors.red), |
|
|
SizedBox(width: 8.w), |
|
|
SizedBox(width: 8.w), |
|
|
Text('清空对话'), |
|
|
Text( |
|
|
|
|
|
'清空聊天记录', |
|
|
|
|
|
style: TextStyle( |
|
|
|
|
|
color: isDarkMode ? Colors.white : Colors.black87, |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
], |
|
|
], |
|
|
), |
|
|
), |
|
|
|
|
|
onTap: () { |
|
|
|
|
|
// 延迟执行，避免在弹出菜单关闭前执行 |
|
|
|
|
|
Future.delayed( |
|
|
|
|
|
const Duration(milliseconds: 100), |
|
|
|
|
|
() => controller.clearChat(), |
|
|
|
|
|
); |
|
|
|
|
|
}, |
|
|
), |
|
|
), |
|
|
], |
|
|
], |
|
|
onSelected: (value) { |
|
|
|
|
|
if (value == 'clear') { |
|
|
|
|
|
controller.clearChat(); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
|
|
|
), |
|
|
), |
|
|
), |
|
|
), |
|
|
], |
|
|
], |
|
|
@ -166,59 +185,43 @@ class ChatView extends GetView<ChatController> { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 构建主体内容 |
|
|
// 构建主体内容 |
|
|
Widget _buildBody() { |
|
|
Widget _buildBody(bool isDarkMode) { |
|
|
return Column( |
|
|
return Column( |
|
|
children: [ |
|
|
children: [ |
|
|
// 消息列表 |
|
|
// 聊天内容区域 |
|
|
Expanded( |
|
|
Expanded( |
|
|
child: Container( |
|
|
child: Obx(() { |
|
|
color: Colors.grey[50], // 使用浅灰背景 |
|
|
if (controller.messages.isEmpty) { |
|
|
child: Obx(() => controller.messages.isEmpty |
|
|
return _buildEmptyState(isDarkMode); |
|
|
? _buildEmptyChat() |
|
|
} else { |
|
|
: _buildChatList()), |
|
|
return _buildChatList(isDarkMode); |
|
|
), |
|
|
} |
|
|
|
|
|
}), |
|
|
), |
|
|
), |
|
|
|
|
|
|
|
|
// 输入区域 - 根据当前模式显示不同的输入面板 |
|
|
// 底部输入区域 |
|
|
Obx(() => controller.isVoiceRecognitionActive.value |
|
|
_buildInputArea(isDarkMode), |
|
|
? _buildVoiceInputPanel() |
|
|
|
|
|
: _buildTextInputPanel()), |
|
|
|
|
|
], |
|
|
], |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 构建空聊天界面 |
|
|
// 构建空状态 |
|
|
Widget _buildEmptyChat() { |
|
|
Widget _buildEmptyState(bool isDarkMode) { |
|
|
return Center( |
|
|
return Center( |
|
|
child: Column( |
|
|
child: Column( |
|
|
mainAxisSize: MainAxisSize.min, |
|
|
mainAxisAlignment: MainAxisAlignment.center, |
|
|
children: [ |
|
|
children: [ |
|
|
Container( |
|
|
Container( |
|
|
width: 80.r, |
|
|
width: 80.w, |
|
|
height: 80.r, |
|
|
height: 80.w, |
|
|
decoration: BoxDecoration( |
|
|
decoration: BoxDecoration( |
|
|
color: AppColors.primary.withOpacity(0.1), |
|
|
color: isDarkMode ? Colors.white.withOpacity(0.1) : Colors.grey[100], |
|
|
shape: BoxShape.circle, |
|
|
shape: BoxShape.circle, |
|
|
), |
|
|
), |
|
|
child: ClipRRect( |
|
|
child: Icon( |
|
|
borderRadius: BorderRadius.circular(40.r), |
|
|
Icons.chat_bubble_outline, |
|
|
child: controller.agent.avatarUrl.isNotEmpty |
|
|
size: 40.w, |
|
|
? Image.asset( |
|
|
color: isDarkMode ? Colors.white.withOpacity(0.5) : Colors.grey[400], |
|
|
controller.agent.avatarUrl, |
|
|
|
|
|
fit: BoxFit.cover, |
|
|
|
|
|
errorBuilder: (context, error, stackTrace) { |
|
|
|
|
|
return Icon( |
|
|
|
|
|
Icons.smart_toy_rounded, |
|
|
|
|
|
size: 40.r, |
|
|
|
|
|
color: AppColors.primary, |
|
|
|
|
|
); |
|
|
|
|
|
}, |
|
|
|
|
|
) |
|
|
|
|
|
: Icon( |
|
|
|
|
|
Icons.smart_toy_rounded, |
|
|
|
|
|
size: 40.r, |
|
|
|
|
|
color: AppColors.primary, |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
), |
|
|
), |
|
|
), |
|
|
SizedBox(height: 24.h), |
|
|
SizedBox(height: 24.h), |
|
|
@ -227,7 +230,7 @@ class ChatView extends GetView<ChatController> { |
|
|
style: TextStyle( |
|
|
style: TextStyle( |
|
|
fontSize: 18.sp, |
|
|
fontSize: 18.sp, |
|
|
fontWeight: FontWeight.bold, |
|
|
fontWeight: FontWeight.bold, |
|
|
color: Colors.black87, |
|
|
color: isDarkMode ? Colors.white : Colors.black87, |
|
|
), |
|
|
), |
|
|
), |
|
|
), |
|
|
SizedBox(height: 12.h), |
|
|
SizedBox(height: 12.h), |
|
|
@ -238,7 +241,7 @@ class ChatView extends GetView<ChatController> { |
|
|
textAlign: TextAlign.center, |
|
|
textAlign: TextAlign.center, |
|
|
style: TextStyle( |
|
|
style: TextStyle( |
|
|
fontSize: 14.sp, |
|
|
fontSize: 14.sp, |
|
|
color: Colors.grey[600], |
|
|
color: isDarkMode ? Colors.grey[400] : Colors.grey[600], |
|
|
height: 1.5, |
|
|
height: 1.5, |
|
|
), |
|
|
), |
|
|
), |
|
|
), |
|
|
@ -249,7 +252,7 @@ class ChatView extends GetView<ChatController> { |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 构建聊天列表 |
|
|
// 构建聊天列表 |
|
|
Widget _buildChatList() { |
|
|
Widget _buildChatList(bool isDarkMode) { |
|
|
return ListView.builder( |
|
|
return ListView.builder( |
|
|
controller: controller.scrollController, |
|
|
controller: controller.scrollController, |
|
|
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 10.h), |
|
|
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 10.h), |
|
|
@ -259,14 +262,14 @@ class ChatView extends GetView<ChatController> { |
|
|
cacheExtent: 1000, // 增加缓存范围，减少重建 |
|
|
cacheExtent: 1000, // 增加缓存范围，减少重建 |
|
|
itemBuilder: (context, index) { |
|
|
itemBuilder: (context, index) { |
|
|
final message = controller.messages[index]; |
|
|
final message = controller.messages[index]; |
|
|
return _buildMessageItem(message); |
|
|
return _buildMessageItem(message, isDarkMode); |
|
|
}, |
|
|
}, |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 构建消息项 |
|
|
// 构建消息项 |
|
|
Widget _buildMessageItem(Message message) { |
|
|
Widget _buildMessageItem(Message message, bool isDarkMode) { |
|
|
final bool isUser = message.role == 'user'; |
|
|
final isUser = message.role == 'user'; |
|
|
|
|
|
|
|
|
return Padding( |
|
|
return Padding( |
|
|
padding: EdgeInsets.only(bottom: 16.h), |
|
|
padding: EdgeInsets.only(bottom: 16.h), |
|
|
@ -274,164 +277,102 @@ class ChatView extends GetView<ChatController> { |
|
|
mainAxisAlignment: isUser ? MainAxisAlignment.end : MainAxisAlignment.start, |
|
|
mainAxisAlignment: isUser ? MainAxisAlignment.end : MainAxisAlignment.start, |
|
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
|
children: [ |
|
|
children: [ |
|
|
// AI头像（非用户消息时显示） |
|
|
if (!isUser) _buildAvatar(false, isDarkMode), |
|
|
if (!isUser) |
|
|
|
|
|
Container( |
|
|
SizedBox(width: 8.w), |
|
|
width: 36.r, |
|
|
|
|
|
height: 36.r, |
|
|
|
|
|
margin: EdgeInsets.only(right: 8.w, top: 2.h), |
|
|
|
|
|
decoration: BoxDecoration( |
|
|
|
|
|
color: AppColors.primary, |
|
|
|
|
|
borderRadius: BorderRadius.circular(18.r), |
|
|
|
|
|
boxShadow: [ |
|
|
|
|
|
BoxShadow( |
|
|
|
|
|
color: Colors.black.withOpacity(0.1), |
|
|
|
|
|
blurRadius: 2, |
|
|
|
|
|
offset: Offset(0, 1), |
|
|
|
|
|
), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
child: ClipRRect( |
|
|
|
|
|
borderRadius: BorderRadius.circular(18.r), |
|
|
|
|
|
child: controller.agent.avatarUrl.isNotEmpty |
|
|
|
|
|
? Image.asset( |
|
|
|
|
|
controller.agent.avatarUrl, |
|
|
|
|
|
fit: BoxFit.cover, |
|
|
|
|
|
errorBuilder: (context, error, stackTrace) { |
|
|
|
|
|
return Icon( |
|
|
|
|
|
Icons.smart_toy_rounded, |
|
|
|
|
|
color: Colors.white, |
|
|
|
|
|
size: 20.r, |
|
|
|
|
|
); |
|
|
|
|
|
}, |
|
|
|
|
|
) |
|
|
|
|
|
: Icon( |
|
|
|
|
|
Icons.smart_toy_rounded, |
|
|
|
|
|
color: Colors.white, |
|
|
|
|
|
size: 20.r, |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
|
|
|
|
|
|
// 消息气泡 |
|
|
|
|
|
Flexible( |
|
|
Flexible( |
|
|
child: Container( |
|
|
child: Column( |
|
|
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h), |
|
|
crossAxisAlignment: isUser ? CrossAxisAlignment.end : CrossAxisAlignment.start, |
|
|
decoration: BoxDecoration( |
|
|
children: [ |
|
|
color: isUser ? AppColors.primary : Colors.white, |
|
|
// 消息气泡 |
|
|
borderRadius: BorderRadius.only( |
|
|
Container( |
|
|
topLeft: Radius.circular(isUser ? 16.r : 0), |
|
|
padding: EdgeInsets.all(12.r), |
|
|
topRight: Radius.circular(isUser ? 0 : 16.r), |
|
|
decoration: BoxDecoration( |
|
|
bottomLeft: Radius.circular(16.r), |
|
|
color: isUser |
|
|
bottomRight: Radius.circular(16.r), |
|
|
? AppColors.primary |
|
|
), |
|
|
: isDarkMode ? AppColors.cardBackground : Colors.grey[200], |
|
|
boxShadow: [ |
|
|
borderRadius: BorderRadius.circular(16.r), |
|
|
BoxShadow( |
|
|
|
|
|
color: Colors.black.withOpacity(0.05), |
|
|
|
|
|
blurRadius: 3, |
|
|
|
|
|
spreadRadius: 0.5, |
|
|
|
|
|
offset: Offset(0, 1), |
|
|
|
|
|
), |
|
|
), |
|
|
], |
|
|
child: Column( |
|
|
), |
|
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
|
child: Column( |
|
|
children: [ |
|
|
crossAxisAlignment: CrossAxisAlignment.start, |
|
|
// 消息内容 |
|
|
children: [ |
|
|
if (message.content.isNotEmpty) |
|
|
// 消息内容 |
|
|
SelectableText( |
|
|
if (message.content.isNotEmpty) |
|
|
message.content, |
|
|
SelectableText( |
|
|
style: TextStyle( |
|
|
message.content, |
|
|
color: isUser |
|
|
style: TextStyle( |
|
|
? Colors.white |
|
|
color: isUser ? Colors.white : Colors.black87, |
|
|
: isDarkMode ? Colors.white : Colors.black, |
|
|
fontSize: 15.sp, |
|
|
fontSize: 16.sp, |
|
|
height: 1.5, |
|
|
height: 1.5, |
|
|
letterSpacing: 0.2, |
|
|
|
|
|
), |
|
|
|
|
|
textAlign: TextAlign.left, |
|
|
|
|
|
maxLines: null, |
|
|
|
|
|
enableInteractiveSelection: true, |
|
|
|
|
|
textWidthBasis: TextWidthBasis.longestLine, |
|
|
|
|
|
), |
|
|
|
|
|
|
|
|
|
|
|
// 加载指示器 |
|
|
|
|
|
if (message.isLoading) |
|
|
|
|
|
Padding( |
|
|
|
|
|
padding: EdgeInsets.only(top: message.content.isNotEmpty ? 8.h : 0), |
|
|
|
|
|
child: Row( |
|
|
|
|
|
mainAxisSize: MainAxisSize.min, |
|
|
|
|
|
children: [ |
|
|
|
|
|
SizedBox( |
|
|
|
|
|
width: 12.w, |
|
|
|
|
|
height: 12.h, |
|
|
|
|
|
child: CircularProgressIndicator( |
|
|
|
|
|
strokeWidth: 2, |
|
|
|
|
|
valueColor: AlwaysStoppedAnimation<Color>( |
|
|
|
|
|
isUser ? Colors.white : AppColors.primary, |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
), |
|
|
SizedBox(width: 8.w), |
|
|
), |
|
|
Text( |
|
|
|
|
|
'思考中...', |
|
|
// 加载中动画 |
|
|
style: TextStyle( |
|
|
if (message.isLoading) |
|
|
color: isUser ? Colors.white : Colors.black54, |
|
|
Padding( |
|
|
fontSize: 12.sp, |
|
|
padding: EdgeInsets.only(top: 8.h), |
|
|
|
|
|
child: Row( |
|
|
|
|
|
mainAxisSize: MainAxisSize.min, |
|
|
|
|
|
children: List.generate( |
|
|
|
|
|
3, |
|
|
|
|
|
(index) => _buildLoadingDot(index, isDarkMode), |
|
|
), |
|
|
), |
|
|
), |
|
|
), |
|
|
], |
|
|
), |
|
|
), |
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
|
|
|
|
|
|
// 时间戳 |
|
|
|
|
|
Padding( |
|
|
|
|
|
padding: EdgeInsets.only(top: 4.h, left: 4.w, right: 4.w), |
|
|
|
|
|
child: Text( |
|
|
|
|
|
_formatTime(message.timestamp), |
|
|
|
|
|
style: TextStyle( |
|
|
|
|
|
fontSize: 10.sp, |
|
|
|
|
|
color: isDarkMode ? Colors.grey[500] : Colors.grey[500], |
|
|
), |
|
|
), |
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
|
|
|
|
|
|
// 用户头像（用户消息时显示） |
|
|
|
|
|
if (isUser) |
|
|
|
|
|
Container( |
|
|
|
|
|
width: 36.r, |
|
|
|
|
|
height: 36.r, |
|
|
|
|
|
margin: EdgeInsets.only(left: 8.w, top: 2.h), |
|
|
|
|
|
decoration: BoxDecoration( |
|
|
|
|
|
color: Colors.grey[200], |
|
|
|
|
|
borderRadius: BorderRadius.circular(18.r), |
|
|
|
|
|
boxShadow: [ |
|
|
|
|
|
BoxShadow( |
|
|
|
|
|
color: Colors.black.withOpacity(0.05), |
|
|
|
|
|
blurRadius: 2, |
|
|
|
|
|
offset: Offset(0, 1), |
|
|
|
|
|
), |
|
|
), |
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
child: Center( |
|
|
|
|
|
child: Icon( |
|
|
|
|
|
Icons.person, |
|
|
|
|
|
color: Colors.grey[600], |
|
|
|
|
|
size: 20.r, |
|
|
|
|
|
), |
|
|
), |
|
|
), |
|
|
], |
|
|
), |
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
|
|
|
|
|
|
SizedBox(width: 8.w), |
|
|
|
|
|
|
|
|
|
|
|
if (isUser) _buildAvatar(true, isDarkMode), |
|
|
], |
|
|
], |
|
|
), |
|
|
), |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 构建文本输入面板 |
|
|
// 构建输入区域 |
|
|
Widget _buildTextInputPanel() { |
|
|
Widget _buildInputArea(bool isDarkMode) { |
|
|
final textController = TextEditingController(text: controller.inputText.value); |
|
|
final textController = TextEditingController(text: controller.inputText.value); |
|
|
|
|
|
|
|
|
textController.addListener(() { |
|
|
// 检查是否处于语音识别模式 |
|
|
controller.inputText.value = textController.text; |
|
|
return Obx(() { |
|
|
|
|
|
if (controller.isVoiceRecognitionActive.value) { |
|
|
|
|
|
return _buildVoiceInputPanel(isDarkMode); |
|
|
|
|
|
} else { |
|
|
|
|
|
return _buildTextInputPanel(isDarkMode, textController); |
|
|
|
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 构建文本输入面板 |
|
|
|
|
|
Widget _buildTextInputPanel(bool isDarkMode, TextEditingController textController) { |
|
|
return Container( |
|
|
return Container( |
|
|
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 10.h), |
|
|
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h), |
|
|
decoration: BoxDecoration( |
|
|
decoration: BoxDecoration( |
|
|
color: Colors.white, |
|
|
color: isDarkMode ? AppColors.cardBackground : Colors.white, |
|
|
boxShadow: [ |
|
|
boxShadow: [ |
|
|
BoxShadow( |
|
|
BoxShadow( |
|
|
color: Colors.black.withOpacity(0.06), |
|
|
color: Colors.black.withOpacity(0.05), |
|
|
blurRadius: 10, |
|
|
blurRadius: 3, |
|
|
offset: Offset(0, -1), |
|
|
offset: Offset(0, -1), |
|
|
), |
|
|
), |
|
|
], |
|
|
], |
|
|
@ -439,25 +380,18 @@ class ChatView extends GetView<ChatController> { |
|
|
child: SafeArea( |
|
|
child: SafeArea( |
|
|
child: Row( |
|
|
child: Row( |
|
|
children: [ |
|
|
children: [ |
|
|
// 语音输入按钮 |
|
|
// 语音识别按钮 |
|
|
Container( |
|
|
Container( |
|
|
width: 40.r, |
|
|
width: 40.w, |
|
|
height: 40.r, |
|
|
height: 40.w, |
|
|
decoration: BoxDecoration( |
|
|
decoration: BoxDecoration( |
|
|
color: Colors.grey[100], |
|
|
color: isDarkMode ? Colors.white.withOpacity(0.1) : Colors.grey[100], |
|
|
shape: BoxShape.circle, |
|
|
shape: BoxShape.circle, |
|
|
boxShadow: [ |
|
|
|
|
|
BoxShadow( |
|
|
|
|
|
color: Colors.black.withOpacity(0.05), |
|
|
|
|
|
blurRadius: 3, |
|
|
|
|
|
spreadRadius: 0.5, |
|
|
|
|
|
), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
), |
|
|
child: IconButton( |
|
|
child: IconButton( |
|
|
icon: Icon( |
|
|
icon: Icon( |
|
|
Icons.mic_none, |
|
|
Icons.mic_none, |
|
|
color: Colors.grey[600], |
|
|
color: isDarkMode ? Colors.white : Colors.grey[700], |
|
|
size: 20.r, |
|
|
size: 20.r, |
|
|
), |
|
|
), |
|
|
padding: EdgeInsets.zero, |
|
|
padding: EdgeInsets.zero, |
|
|
@ -465,115 +399,99 @@ class ChatView extends GetView<ChatController> { |
|
|
), |
|
|
), |
|
|
), |
|
|
), |
|
|
|
|
|
|
|
|
// 文本输入框 |
|
|
SizedBox(width: 8.w), |
|
|
|
|
|
|
|
|
|
|
|
// 输入框 |
|
|
Expanded( |
|
|
Expanded( |
|
|
child: Container( |
|
|
child: TextField( |
|
|
margin: EdgeInsets.symmetric(horizontal: 8.w), |
|
|
controller: textController, |
|
|
decoration: BoxDecoration( |
|
|
decoration: InputDecoration( |
|
|
color: Colors.grey[100], |
|
|
hintText: '输入消息...', |
|
|
borderRadius: BorderRadius.circular(20.r), |
|
|
hintStyle: TextStyle( |
|
|
), |
|
|
color: isDarkMode ? Colors.grey[500] : Colors.grey[500] |
|
|
child: TextField( |
|
|
|
|
|
controller: textController, |
|
|
|
|
|
decoration: InputDecoration( |
|
|
|
|
|
hintText: '输入消息...', |
|
|
|
|
|
hintStyle: TextStyle(color: Colors.grey[500]), |
|
|
|
|
|
border: InputBorder.none, |
|
|
|
|
|
contentPadding: EdgeInsets.symmetric( |
|
|
|
|
|
horizontal: 16.w, |
|
|
|
|
|
vertical: 10.h, |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
), |
|
|
maxLines: null, |
|
|
filled: true, |
|
|
textInputAction: TextInputAction.send, |
|
|
fillColor: isDarkMode ? Colors.white.withOpacity(0.1) : Colors.grey[100], |
|
|
style: TextStyle( |
|
|
border: OutlineInputBorder( |
|
|
fontSize: 15.sp, |
|
|
borderRadius: BorderRadius.circular(20.r), |
|
|
color: Colors.black87, |
|
|
borderSide: BorderSide.none, |
|
|
), |
|
|
), |
|
|
onSubmitted: (value) { |
|
|
contentPadding: EdgeInsets.symmetric( |
|
|
if (value.trim().isNotEmpty) { |
|
|
horizontal: 16.w, |
|
|
controller.sendMessage(value); |
|
|
vertical: 10.h, |
|
|
textController.clear(); |
|
|
), |
|
|
} |
|
|
), |
|
|
}, |
|
|
maxLines: null, |
|
|
|
|
|
textInputAction: TextInputAction.send, |
|
|
|
|
|
style: TextStyle( |
|
|
|
|
|
fontSize: 15.sp, |
|
|
|
|
|
color: isDarkMode ? Colors.white : Colors.black87, |
|
|
), |
|
|
), |
|
|
|
|
|
onSubmitted: (value) { |
|
|
|
|
|
if (value.trim().isNotEmpty) { |
|
|
|
|
|
controller.sendMessage(value); |
|
|
|
|
|
textController.clear(); |
|
|
|
|
|
} |
|
|
|
|
|
}, |
|
|
), |
|
|
), |
|
|
), |
|
|
), |
|
|
|
|
|
|
|
|
|
|
|
SizedBox(width: 8.w), |
|
|
|
|
|
|
|
|
// 发送按钮 |
|
|
// 发送按钮 |
|
|
Obx(() => Container( |
|
|
Obx(() { |
|
|
width: 40.r, |
|
|
final hasText = controller.inputText.value.isNotEmpty; |
|
|
height: 40.r, |
|
|
return Container( |
|
|
decoration: BoxDecoration( |
|
|
width: 40.w, |
|
|
color: controller.inputText.value.trim().isEmpty |
|
|
height: 40.w, |
|
|
? Colors.grey[100] |
|
|
decoration: BoxDecoration( |
|
|
: AppColors.primary, |
|
|
color: hasText |
|
|
shape: BoxShape.circle, |
|
|
? AppColors.primary |
|
|
boxShadow: controller.inputText.value.trim().isEmpty |
|
|
: isDarkMode ? Colors.white.withOpacity(0.1) : Colors.grey[200], |
|
|
? [ |
|
|
shape: BoxShape.circle, |
|
|
BoxShadow( |
|
|
|
|
|
color: Colors.black.withOpacity(0.05), |
|
|
|
|
|
blurRadius: 3, |
|
|
|
|
|
spreadRadius: 0.5, |
|
|
|
|
|
), |
|
|
|
|
|
] |
|
|
|
|
|
: [ |
|
|
|
|
|
BoxShadow( |
|
|
|
|
|
color: AppColors.primary.withOpacity(0.3), |
|
|
|
|
|
blurRadius: 5, |
|
|
|
|
|
spreadRadius: 0.5, |
|
|
|
|
|
), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
child: IconButton( |
|
|
|
|
|
icon: Icon( |
|
|
|
|
|
Icons.send, |
|
|
|
|
|
size: 18.r, |
|
|
|
|
|
color: controller.inputText.value.trim().isEmpty |
|
|
|
|
|
? Colors.grey[500] |
|
|
|
|
|
: Colors.white, |
|
|
|
|
|
), |
|
|
), |
|
|
padding: EdgeInsets.zero, |
|
|
child: IconButton( |
|
|
onPressed: controller.inputText.value.trim().isEmpty |
|
|
icon: Icon( |
|
|
? null |
|
|
Icons.send, |
|
|
: () { |
|
|
color: hasText |
|
|
controller.sendMessage(controller.inputText.value); |
|
|
? Colors.white |
|
|
textController.clear(); |
|
|
: isDarkMode ? Colors.white.withOpacity(0.5) : Colors.grey[400], |
|
|
}, |
|
|
size: 18.r, |
|
|
), |
|
|
), |
|
|
)), |
|
|
padding: EdgeInsets.zero, |
|
|
|
|
|
onPressed: hasText |
|
|
|
|
|
? () { |
|
|
|
|
|
controller.sendMessage(controller.inputText.value); |
|
|
|
|
|
textController.clear(); |
|
|
|
|
|
} |
|
|
|
|
|
: null, |
|
|
|
|
|
), |
|
|
|
|
|
); |
|
|
|
|
|
}), |
|
|
], |
|
|
], |
|
|
), |
|
|
), |
|
|
), |
|
|
), |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
// 构建语音输入面板 |
|
|
// 构建语音输入面板 |
|
|
Widget _buildVoiceInputPanel() { |
|
|
Widget _buildVoiceInputPanel(bool isDarkMode) { |
|
|
return Container( |
|
|
return Container( |
|
|
decoration: BoxDecoration( |
|
|
decoration: BoxDecoration( |
|
|
gradient: LinearGradient( |
|
|
color: isDarkMode ? AppColors.cardBackground : Colors.white, |
|
|
begin: Alignment.topCenter, |
|
|
boxShadow: [ |
|
|
end: Alignment.bottomCenter, |
|
|
BoxShadow( |
|
|
colors: [ |
|
|
color: Colors.black.withOpacity(0.05), |
|
|
Colors.white, |
|
|
blurRadius: 3, |
|
|
Color(0xFFE8D5F5), |
|
|
offset: Offset(0, -1), |
|
|
], |
|
|
), |
|
|
stops: [0.3, 1.0], |
|
|
], |
|
|
), |
|
|
|
|
|
// boxShadow: [ |
|
|
|
|
|
// BoxShadow( |
|
|
|
|
|
// color: Colors.black.withOpacity(0.06), |
|
|
|
|
|
// blurRadius: 10, |
|
|
|
|
|
// offset: Offset(0, -1), |
|
|
|
|
|
// ), |
|
|
|
|
|
// ], |
|
|
|
|
|
), |
|
|
), |
|
|
child: SafeArea( |
|
|
child: SafeArea( |
|
|
child: SizedBox( |
|
|
child: SizedBox( |
|
|
height: 80.h, |
|
|
height: 120.h, |
|
|
child: Padding( |
|
|
child: Padding( |
|
|
padding: EdgeInsets.symmetric(horizontal: 30.w), |
|
|
padding: EdgeInsets.symmetric(horizontal: 20.w), |
|
|
child: Row( |
|
|
child: Row( |
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
|
|
crossAxisAlignment: CrossAxisAlignment.center, |
|
|
crossAxisAlignment: CrossAxisAlignment.center, |
|
|
@ -583,7 +501,7 @@ class ChatView extends GetView<ChatController> { |
|
|
width: 60.r, |
|
|
width: 60.r, |
|
|
height: 60.r, |
|
|
height: 60.r, |
|
|
decoration: BoxDecoration( |
|
|
decoration: BoxDecoration( |
|
|
color: Colors.white, |
|
|
color: isDarkMode ? Colors.white.withOpacity(0.1) : Colors.white, |
|
|
shape: BoxShape.circle, |
|
|
shape: BoxShape.circle, |
|
|
boxShadow: [ |
|
|
boxShadow: [ |
|
|
BoxShadow( |
|
|
BoxShadow( |
|
|
@ -639,7 +557,7 @@ class ChatView extends GetView<ChatController> { |
|
|
decoration: BoxDecoration( |
|
|
decoration: BoxDecoration( |
|
|
color: isSpeaking |
|
|
color: isSpeaking |
|
|
? AppColors.primary |
|
|
? AppColors.primary |
|
|
: Colors.grey.shade400, |
|
|
: isDarkMode ? Colors.grey.shade600 : Colors.grey.shade400, |
|
|
borderRadius: BorderRadius.circular(2.r), |
|
|
borderRadius: BorderRadius.circular(2.r), |
|
|
), |
|
|
), |
|
|
), |
|
|
), |
|
|
@ -659,7 +577,7 @@ class ChatView extends GetView<ChatController> { |
|
|
controller.isSpeechDetected.value ? '正在聆听...' : '你可以开始说话', |
|
|
controller.isSpeechDetected.value ? '正在聆听...' : '你可以开始说话', |
|
|
style: TextStyle( |
|
|
style: TextStyle( |
|
|
fontSize: 14.sp, |
|
|
fontSize: 14.sp, |
|
|
color: Colors.grey.shade700, |
|
|
color: isDarkMode ? Colors.grey[400] : Colors.grey[700], |
|
|
fontWeight: FontWeight.w500, |
|
|
fontWeight: FontWeight.w500, |
|
|
), |
|
|
), |
|
|
)), |
|
|
)), |
|
|
@ -672,7 +590,7 @@ class ChatView extends GetView<ChatController> { |
|
|
width: 60.r, |
|
|
width: 60.r, |
|
|
height: 60.r, |
|
|
height: 60.r, |
|
|
decoration: BoxDecoration( |
|
|
decoration: BoxDecoration( |
|
|
color: Colors.white, |
|
|
color: isDarkMode ? Colors.white.withOpacity(0.1) : Colors.white, |
|
|
shape: BoxShape.circle, |
|
|
shape: BoxShape.circle, |
|
|
boxShadow: [ |
|
|
boxShadow: [ |
|
|
BoxShadow( |
|
|
BoxShadow( |
|
|
@ -686,7 +604,7 @@ class ChatView extends GetView<ChatController> { |
|
|
child: IconButton( |
|
|
child: IconButton( |
|
|
icon: Icon( |
|
|
icon: Icon( |
|
|
Icons.close, |
|
|
Icons.close, |
|
|
color: Colors.grey.shade600, |
|
|
color: isDarkMode ? Colors.white : Colors.grey.shade600, |
|
|
size: 28.r, |
|
|
size: 28.r, |
|
|
), |
|
|
), |
|
|
padding: EdgeInsets.zero, |
|
|
padding: EdgeInsets.zero, |
|
|
@ -701,4 +619,87 @@ class ChatView extends GetView<ChatController> { |
|
|
), |
|
|
), |
|
|
); |
|
|
); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 构建头像 |
|
|
|
|
|
Widget _buildAvatar(bool isUser, bool isDarkMode) { |
|
|
|
|
|
return Container( |
|
|
|
|
|
width: 36.r, |
|
|
|
|
|
height: 36.r, |
|
|
|
|
|
decoration: BoxDecoration( |
|
|
|
|
|
color: isUser |
|
|
|
|
|
? (isDarkMode ? Colors.white.withOpacity(0.1) : Colors.grey[200]) |
|
|
|
|
|
: AppColors.primary, |
|
|
|
|
|
shape: BoxShape.circle, |
|
|
|
|
|
boxShadow: [ |
|
|
|
|
|
BoxShadow( |
|
|
|
|
|
color: Colors.black.withOpacity(0.05), |
|
|
|
|
|
blurRadius: 2, |
|
|
|
|
|
offset: Offset(0, 1), |
|
|
|
|
|
), |
|
|
|
|
|
], |
|
|
|
|
|
), |
|
|
|
|
|
child: isUser |
|
|
|
|
|
? Center( |
|
|
|
|
|
child: Icon( |
|
|
|
|
|
Icons.person, |
|
|
|
|
|
color: isDarkMode ? Colors.white : Colors.grey[700], |
|
|
|
|
|
size: 20.r, |
|
|
|
|
|
), |
|
|
|
|
|
) |
|
|
|
|
|
: ClipRRect( |
|
|
|
|
|
borderRadius: BorderRadius.circular(18.r), |
|
|
|
|
|
child: controller.agent.avatarUrl.isNotEmpty |
|
|
|
|
|
? Image.asset( |
|
|
|
|
|
controller.agent.avatarUrl, |
|
|
|
|
|
fit: BoxFit.cover, |
|
|
|
|
|
errorBuilder: (context, error, stackTrace) { |
|
|
|
|
|
return Icon( |
|
|
|
|
|
Icons.smart_toy_rounded, |
|
|
|
|
|
color: Colors.white, |
|
|
|
|
|
size: 20.r, |
|
|
|
|
|
); |
|
|
|
|
|
}, |
|
|
|
|
|
) |
|
|
|
|
|
: Icon( |
|
|
|
|
|
Icons.smart_toy_rounded, |
|
|
|
|
|
color: Colors.white, |
|
|
|
|
|
size: 20.r, |
|
|
|
|
|
), |
|
|
|
|
|
), |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 构建加载动画点 |
|
|
|
|
|
Widget _buildLoadingDot(int index, bool isDarkMode) { |
|
|
|
|
|
return AnimatedBuilder( |
|
|
|
|
|
animation: AlwaysStoppedAnimation(0), |
|
|
|
|
|
builder: (context, child) { |
|
|
|
|
|
return Container( |
|
|
|
|
|
margin: EdgeInsets.symmetric(horizontal: 2.w), |
|
|
|
|
|
width: 8.r, |
|
|
|
|
|
height: 8.r, |
|
|
|
|
|
decoration: BoxDecoration( |
|
|
|
|
|
color: isDarkMode ? Colors.white.withOpacity(0.5) : Colors.grey[400], |
|
|
|
|
|
shape: BoxShape.circle, |
|
|
|
|
|
), |
|
|
|
|
|
); |
|
|
|
|
|
}, |
|
|
|
|
|
); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 格式化时间 |
|
|
|
|
|
String _formatTime(DateTime time) { |
|
|
|
|
|
final now = DateTime.now(); |
|
|
|
|
|
final today = DateTime(now.year, now.month, now.day); |
|
|
|
|
|
final yesterday = today.subtract(const Duration(days: 1)); |
|
|
|
|
|
final messageDate = DateTime(time.year, time.month, time.day); |
|
|
|
|
|
|
|
|
|
|
|
if (messageDate == today) { |
|
|
|
|
|
return '今天 ${time.hour.toString().padLeft(2, '0')}:${time.minute.toString().padLeft(2, '0')}'; |
|
|
|
|
|
} else if (messageDate == yesterday) { |
|
|
|
|
|
return '昨天 ${time.hour.toString().padLeft(2, '0')}:${time.minute.toString().padLeft(2, '0')}'; |
|
|
|
|
|
} else { |
|
|
|
|
|
return '${time.month}月${time.day}日 ${time.hour.toString().padLeft(2, '0')}:${time.minute.toString().padLeft(2, '0')}'; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
wolfplus
2 years ago