You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
620 lines
18 KiB
620 lines
18 KiB
import 'package:flutter/material.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
|
import '../controllers/chat_controller.dart';
|
|
import '../models/message_model.dart';
|
|
import '../../../data/services/volcano_tts_service.dart';
|
|
import '../widgets/voice_input_panel.dart';
|
|
|
|
class ChatView extends GetView<ChatController> {
|
|
const ChatView({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return WillPopScope(
|
|
onWillPop: () async {
|
|
// 停止TTS服务
|
|
final tts = Get.find<VolcanoTtsService>();
|
|
await tts.stop();
|
|
|
|
// 停止语音输入
|
|
if (controller.isVoiceInputVisible.value) {
|
|
controller.stopVoiceInput();
|
|
}
|
|
|
|
return true;
|
|
},
|
|
child: Scaffold(
|
|
backgroundColor: Colors.white,
|
|
appBar: _buildAppBar(),
|
|
body: SafeArea(
|
|
child: Column(
|
|
children: [
|
|
Expanded(
|
|
child: _buildMessageList(),
|
|
),
|
|
_buildInputSection(),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
PreferredSizeWidget _buildAppBar() {
|
|
return AppBar(
|
|
backgroundColor: Colors.white,
|
|
elevation: 0,
|
|
leading: IconButton(
|
|
icon: Icon(
|
|
Icons.arrow_back_ios,
|
|
color: Colors.black,
|
|
size: 20.sp,
|
|
),
|
|
onPressed: () async {
|
|
// 停止TTS服务
|
|
final tts = Get.find<VolcanoTtsService>();
|
|
await tts.stop();
|
|
|
|
// 停止语音输入
|
|
if (controller.isVoiceInputVisible.value) {
|
|
controller.stopVoiceInput();
|
|
}
|
|
|
|
Get.back();
|
|
},
|
|
),
|
|
title: Column(
|
|
children: [
|
|
Text(
|
|
controller.agentName,
|
|
style: TextStyle(
|
|
fontSize: 17.sp,
|
|
fontWeight: FontWeight.w600,
|
|
color: Colors.black,
|
|
),
|
|
),
|
|
if (controller.agentSubtitle != null)
|
|
Text(
|
|
controller.agentSubtitle!,
|
|
style: TextStyle(
|
|
fontSize: 12.sp,
|
|
color: Colors.grey[600],
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
],
|
|
),
|
|
centerTitle: true,
|
|
actions: [
|
|
IconButton(
|
|
icon: Obx(() => Icon(
|
|
Get.find<VolcanoTtsService>().isEnabled.value
|
|
? Icons.volume_up
|
|
: Icons.volume_off,
|
|
color: Colors.black,
|
|
size: 24.sp,
|
|
)),
|
|
onPressed: controller.toggleTTS,
|
|
),
|
|
IconButton(
|
|
icon: Icon(
|
|
Icons.more_horiz,
|
|
color: Colors.black,
|
|
size: 24.sp,
|
|
),
|
|
onPressed: () => _showMoreOptions(),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildMessageList() {
|
|
return Stack(
|
|
children: [
|
|
Obx(() => ListView.builder(
|
|
controller: controller.scrollController,
|
|
padding: EdgeInsets.only(
|
|
top: 16.h,
|
|
bottom: controller.isVoiceInputVisible.value
|
|
? 160.h
|
|
: (controller.isInputCollapsed.value ? 70.h : 90.h),
|
|
),
|
|
itemCount: controller.messages.length,
|
|
itemBuilder: (context, index) => _buildMessage(controller.messages[index]),
|
|
physics: const AlwaysScrollableScrollPhysics(),
|
|
clipBehavior: Clip.none,
|
|
keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
|
|
)),
|
|
Obx(() {
|
|
if (!controller.isLoading.value) return const SizedBox.shrink();
|
|
return Positioned(
|
|
bottom: controller.isVoiceInputVisible.value
|
|
? 170.h
|
|
: (controller.isInputCollapsed.value ? 80.h : 100.h),
|
|
left: 0,
|
|
right: 0,
|
|
child: Container(
|
|
padding: EdgeInsets.symmetric(vertical: 8.h),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
SizedBox(
|
|
width: 16.w,
|
|
height: 16.w,
|
|
child: const CircularProgressIndicator(
|
|
strokeWidth: 2,
|
|
valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF4A6FE5)),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildInputSection() {
|
|
return Obx(() {
|
|
if (controller.isVoiceInputVisible.value) {
|
|
return Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
VoiceInputPanel(
|
|
onRecordingResult: controller.handleVoiceResult,
|
|
onClose: controller.stopVoiceInput,
|
|
onRecognizing: controller.handleRecognizing,
|
|
),
|
|
],
|
|
);
|
|
}
|
|
return _buildTextInput();
|
|
});
|
|
}
|
|
|
|
Widget _buildTextInput() {
|
|
return Container(
|
|
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
border: Border(
|
|
top: BorderSide(
|
|
color: Colors.grey[200]!,
|
|
width: 1,
|
|
),
|
|
),
|
|
),
|
|
child: Obx(() {
|
|
if (controller.isRecordingVoice.value) {
|
|
return _buildRecordingInput();
|
|
} else if (!controller.isVoiceMode.value) {
|
|
return _buildExpandedInput();
|
|
} else {
|
|
return _buildDefaultInput();
|
|
}
|
|
}),
|
|
);
|
|
}
|
|
|
|
Widget _buildDefaultInput() {
|
|
return Row(
|
|
children: [
|
|
Container(
|
|
width: 40.w,
|
|
height: 40.w,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: Colors.grey[100],
|
|
border: Border.all(
|
|
color: Colors.grey[300]!,
|
|
width: 0.5,
|
|
),
|
|
),
|
|
child: IconButton(
|
|
icon: Icon(
|
|
Icons.camera_alt,
|
|
color: Colors.grey[600],
|
|
size: 20.sp,
|
|
),
|
|
onPressed: () {
|
|
// 拍照功能
|
|
},
|
|
padding: EdgeInsets.zero,
|
|
),
|
|
),
|
|
SizedBox(width: 8.w),
|
|
Expanded(
|
|
child: GestureDetector(
|
|
onTap: () {
|
|
// 点击打开VoiceInputPanel
|
|
controller.startVoiceInput();
|
|
},
|
|
child: Container(
|
|
height: 48.h,
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey[100],
|
|
borderRadius: BorderRadius.circular(24.r),
|
|
border: Border.all(
|
|
color: Colors.grey[300]!,
|
|
width: 0.5,
|
|
),
|
|
),
|
|
child: Center(
|
|
child: Text(
|
|
'点击开始连续语音对话',
|
|
style: TextStyle(
|
|
color: Colors.grey[600],
|
|
fontSize: 16.sp,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
SizedBox(width: 8.w),
|
|
Container(
|
|
width: 40.w,
|
|
height: 40.w,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: Colors.grey[100],
|
|
border: Border.all(
|
|
color: Colors.grey[300]!,
|
|
width: 0.5,
|
|
),
|
|
),
|
|
child: IconButton(
|
|
icon: Icon(
|
|
Icons.keyboard,
|
|
color: Colors.grey[600],
|
|
size: 20.sp,
|
|
),
|
|
onPressed: controller.toggleInputMode,
|
|
padding: EdgeInsets.zero,
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildExpandedInput() {
|
|
return Row(
|
|
children: [
|
|
Container(
|
|
width: 40.w,
|
|
height: 40.w,
|
|
decoration: BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: Colors.grey[100],
|
|
border: Border.all(
|
|
color: Colors.grey[300]!,
|
|
width: 0.5,
|
|
),
|
|
),
|
|
child: IconButton(
|
|
icon: Icon(
|
|
Icons.mic,
|
|
color: const Color(0xFF4A6FE5),
|
|
size: 20.sp,
|
|
),
|
|
onPressed: controller.toggleInputMode,
|
|
padding: EdgeInsets.zero,
|
|
),
|
|
),
|
|
SizedBox(width: 8.w),
|
|
Expanded(
|
|
child: Container(
|
|
padding: EdgeInsets.symmetric(horizontal: 12.w),
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey[100],
|
|
borderRadius: BorderRadius.circular(24.r),
|
|
border: Border.all(
|
|
color: Colors.grey[300]!,
|
|
width: 0.5,
|
|
),
|
|
),
|
|
child: TextField(
|
|
controller: controller.messageController,
|
|
decoration: InputDecoration(
|
|
hintText: '输入消息...',
|
|
hintStyle: TextStyle(
|
|
color: Colors.grey[400],
|
|
fontSize: 14.sp,
|
|
),
|
|
border: InputBorder.none,
|
|
contentPadding: EdgeInsets.symmetric(vertical: 12.h),
|
|
),
|
|
maxLines: 5,
|
|
minLines: 1,
|
|
style: TextStyle(
|
|
fontSize: 14.sp,
|
|
color: Colors.black87,
|
|
),
|
|
textInputAction: TextInputAction.send,
|
|
onSubmitted: (_) => controller.sendMessage(),
|
|
),
|
|
),
|
|
),
|
|
SizedBox(width: 8.w),
|
|
Container(
|
|
width: 40.w,
|
|
height: 40.w,
|
|
decoration: const BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: Color(0xFF4A6FE5),
|
|
),
|
|
child: IconButton(
|
|
icon: Icon(
|
|
Icons.send,
|
|
color: Colors.white,
|
|
size: 20.sp,
|
|
),
|
|
onPressed: controller.sendMessage,
|
|
padding: EdgeInsets.zero,
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildRecordingInput() {
|
|
return Container(
|
|
height: 48.h,
|
|
decoration: BoxDecoration(
|
|
color: const Color(0xFF4A6FE5),
|
|
borderRadius: BorderRadius.circular(24.r),
|
|
),
|
|
child: Center(
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: List.generate(
|
|
40,
|
|
(index) => Container(
|
|
width: 4.w,
|
|
height: 4.h,
|
|
margin: EdgeInsets.symmetric(horizontal: 1.w),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(2.r),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
void _showMoreOptions() {
|
|
Get.bottomSheet(
|
|
Container(
|
|
padding: EdgeInsets.all(20.w),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(20.r),
|
|
topRight: Radius.circular(20.r),
|
|
),
|
|
),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
ListTile(
|
|
leading: const Icon(Icons.delete_outline, color: Colors.red),
|
|
title: const Text('清空对话'),
|
|
onTap: () {
|
|
Get.back();
|
|
controller.clearChat();
|
|
},
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildMessage(Message message) {
|
|
final isUser = message.role == 'user';
|
|
final isSystem = message.role == 'system';
|
|
final isRecognizing = isUser && message.content.startsWith('🎤 ');
|
|
|
|
if (isSystem) {
|
|
// 系统消息使用特殊样式
|
|
return Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
|
|
child: Container(
|
|
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
|
|
decoration: BoxDecoration(
|
|
color: Colors.grey[100],
|
|
borderRadius: BorderRadius.circular(12.r),
|
|
border: Border.all(
|
|
color: Colors.grey[300]!,
|
|
width: 0.5,
|
|
),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Icon(
|
|
Icons.info_outline,
|
|
color: Colors.grey[600],
|
|
size: 20.sp,
|
|
),
|
|
SizedBox(width: 8.w),
|
|
Expanded(
|
|
child: Text(
|
|
message.content,
|
|
style: TextStyle(
|
|
fontSize: 14.sp,
|
|
color: Colors.grey[700],
|
|
height: 1.5,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
return Padding(
|
|
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 8.h),
|
|
child: Row(
|
|
mainAxisAlignment: isUser ? MainAxisAlignment.end : MainAxisAlignment.start,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
if (!isUser) ...[
|
|
CircleAvatar(
|
|
radius: 20.r,
|
|
backgroundImage: AssetImage(controller.agentAvatar),
|
|
backgroundColor: Colors.transparent,
|
|
),
|
|
SizedBox(width: 12.w),
|
|
],
|
|
Flexible(
|
|
child: Container(
|
|
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
|
|
decoration: BoxDecoration(
|
|
color: isUser
|
|
? (isRecognizing ? Colors.purple.withOpacity(0.7) : const Color(0xFF4A6FE5))
|
|
: const Color(0xFFF5F5F5),
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(isUser ? 18.r : 4.r),
|
|
topRight: Radius.circular(isUser ? 4.r : 18.r),
|
|
bottomLeft: Radius.circular(18.r),
|
|
bottomRight: Radius.circular(18.r),
|
|
),
|
|
// 为正在识别的消息添加脉动效果
|
|
boxShadow: isRecognizing
|
|
? [
|
|
BoxShadow(
|
|
color: Colors.purple.withOpacity(0.3),
|
|
blurRadius: 8,
|
|
spreadRadius: 2,
|
|
),
|
|
]
|
|
: [],
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
if (isRecognizing) ...[
|
|
Icon(
|
|
Icons.mic,
|
|
color: Colors.white,
|
|
size: 16.sp,
|
|
),
|
|
SizedBox(width: 8.w),
|
|
],
|
|
Flexible(
|
|
child: Text(
|
|
// 如果是正在识别的消息，移除麦克风图标前缀
|
|
isRecognizing ? message.content.substring(2) : message.content,
|
|
style: TextStyle(
|
|
fontSize: 16.sp,
|
|
color: isUser ? Colors.white : Colors.black87,
|
|
height: 1.5,
|
|
),
|
|
),
|
|
),
|
|
if (isRecognizing) ...[
|
|
SizedBox(width: 8.w),
|
|
_buildPulsatingDot(),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
),
|
|
if (isUser) ...[
|
|
SizedBox(width: 12.w),
|
|
CircleAvatar(
|
|
radius: 20.r,
|
|
backgroundColor: const Color(0xFFEEF4FF),
|
|
child: Icon(
|
|
Icons.person,
|
|
color: const Color(0xFF4A6FE5),
|
|
size: 24.sp,
|
|
),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
// 创建脉动点动画
|
|
Widget _buildPulsatingDot() {
|
|
return Obx(() {
|
|
// 使用controller.isRecognizing来控制动画是否显示
|
|
if (!controller.isRecognizing.value) return const SizedBox.shrink();
|
|
|
|
return _PulsatingDot();
|
|
});
|
|
}
|
|
}
|
|
|
|
// 脉动点动画组件
|
|
class _PulsatingDot extends StatefulWidget {
|
|
@override
|
|
_PulsatingDotState createState() => _PulsatingDotState();
|
|
}
|
|
|
|
class _PulsatingDotState extends State<_PulsatingDot> with SingleTickerProviderStateMixin {
|
|
late AnimationController _animationController;
|
|
late Animation<double> _animation;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_animationController = AnimationController(
|
|
vsync: this,
|
|
duration: const Duration(milliseconds: 1000),
|
|
)..repeat(reverse: true);
|
|
|
|
_animation = Tween<double>(begin: 0.5, end: 1.0).animate(_animationController);
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
_animationController.dispose();
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return SizedBox(
|
|
width: 16.w,
|
|
height: 16.w,
|
|
child: AnimatedBuilder(
|
|
animation: _animation,
|
|
builder: (context, child) {
|
|
return Stack(
|
|
alignment: Alignment.center,
|
|
children: [
|
|
Opacity(
|
|
opacity: 1.0 - _animation.value,
|
|
child: Container(
|
|
width: 16.w * _animation.value,
|
|
height: 16.w * _animation.value,
|
|
decoration: BoxDecoration(
|
|
color: Colors.white.withOpacity(0.5),
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
),
|
|
Container(
|
|
width: 6.w,
|
|
height: 6.w,
|
|
decoration: const BoxDecoration(
|
|
color: Colors.white,
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|