liqupan/app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 角色卡 demo

Browse Source
This commit is contained in:
liqupan
2026-01-28 20:28:38 +08:00
parent a4e7898e94
commit c09fbf4808
35 changed files with 2773 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

651
wei_ai_app/lib/screens/interaction/interaction_screen.dart
View File

@@ -2,230 +2,515 @@ import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:lucide_icons/lucide_icons.dart';
import 'package:go_router/go_router.dart';
import '../../models/character.dart';
import '../../models/message.dart';
import '../../data/mock_data.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../core/core.dart';
import 'voice_mode_overlay.dart';
class InteractionScreen extends StatefulWidget {
class InteractionScreen extends ConsumerStatefulWidget {
final String characterId;
const InteractionScreen({super.key, required this.characterId});
@override
State<InteractionScreen> createState() => _InteractionScreenState();
ConsumerState<InteractionScreen> createState() => _InteractionScreenState();
}
class _InteractionScreenState extends State<InteractionScreen> {
late Character _character;
final List<Message> _messages = List.from(mockMessages);
class _InteractionScreenState extends ConsumerState<InteractionScreen> {
CharacterModel? _character;
List<ChatMessage> _messages = [];
final TextEditingController _controller = TextEditingController();
final ScrollController _scrollController = ScrollController();
bool _isVoiceMode = false;
bool _isLoading = false;
bool _isTyping = false;
String _typingContent = '';
@override
void initState() {
super.initState();
_character = mockCharacters.firstWhere(
(c) => c.id == widget.characterId,
orElse: () => mockCharacters.first,
);
_loadCharacterAndMessages();
}
void _sendMessage() {
if (_controller.text.trim().isEmpty) return;
final newUserMsg = Message(
id: DateTime.now().toString(),
text: _controller.text,
sender: MessageSender.user,
type: MessageType.text,
timestamp: DateTime.now()
);
@override
void dispose() {
_controller.dispose();
_scrollController.dispose();
super.dispose();
}
Future<void> _loadCharacterAndMessages() async {
// 加载角色信息
final character = await CharacterRepository.getCharacterById(widget.characterId);
if (character == null) {
debugPrint('❌ 角色不存在: ${widget.characterId}');
if (mounted) context.pop();
return;
}
// 加载本地聊天记录
final session = await ChatStorageService.getSession(widget.characterId);
setState(() {
_messages.add(newUserMsg);
_controller.clear();
_character = character;
_messages = session.messages;
});
// Mock AI Reply
Future.delayed(const Duration(seconds: 2), () {
if (!mounted) return;
final newAiMsg = Message(
id: DateTime.now().toString(),
text: '我收到了你的信号: "${newUserMsg.text}"。这让我感觉很好...',
sender: MessageSender.ai,
type: MessageType.text,
timestamp: DateTime.now()
// 如果没有消息，添加问候语
if (_messages.isEmpty) {
final greeting = ChatService.getGreeting(character);
final greetingMessage = ChatMessage.assistant(greeting);
setState(() {
_messages = [greetingMessage];
});
await ChatStorageService.addMessage(widget.characterId, greetingMessage);
}
_scrollToBottom();
}
void _scrollToBottom() {
WidgetsBinding.instance.addPostFrameCallback((_) {
if (_scrollController.hasClients) {
_scrollController.animateTo(
_scrollController.position.maxScrollExtent,
duration: const Duration(milliseconds: 300),
curve: Curves.easeOut,
);
}
});
}
Future<void> _sendMessage() async {
if (_controller.text.trim().isEmpty || _character == null || _isLoading) return;
final userText = _controller.text.trim();
_controller.clear();
// 添加用户消息
final userMessage = ChatMessage.user(userText);
setState(() {
_messages = [..._messages, userMessage];
_isLoading = true;
_isTyping = true;
_typingContent = '';
});
await ChatStorageService.addMessage(widget.characterId, userMessage);
_scrollToBottom();
try {
// 调用 AI
final response = await ChatService.sendMessage(
character: _character!,
messages: _messages,
userMessage: userText,
onStream: (content) {
if (mounted) {
setState(() {
_typingContent = content;
});
_scrollToBottom();
}
},
);
// 添加 AI 回复
final aiMessage = ChatMessage.assistant(response);
setState(() {
_messages = [..._messages, aiMessage];
_isTyping = false;
_typingContent = '';
});
await ChatStorageService.addMessage(widget.characterId, aiMessage);
_scrollToBottom();
} catch (e) {
debugPrint('❌ 发送消息失败: $e');
// 显示错误消息
if (mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('发送失败: $e'),
backgroundColor: Colors.red,
),
);
setState(() {
_messages.add(newAiMsg);
_isTyping = false;
_typingContent = '';
});
});
}
} finally {
if (mounted) {
setState(() {
_isLoading = false;
});
}
}
}
@override
Widget build(BuildContext context) {
if (_character == null) {
return const Scaffold(
body: Center(
child: CircularProgressIndicator(color: Color(0xFFA855F7)),
),
);
}
final avatarUrl = CharacterRepository.getAvatarUrl(_character!.avatarPath);
return Stack(
children: [
Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
flexibleSpace: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(color: Colors.black.withOpacity(0.5)),
),
),
leading: IconButton(
icon: const Icon(LucideIcons.arrowLeft, color: Colors.white),
onPressed: () => context.pop(),
),
title: Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(_character.avatar),
radius: 16,
),
const SizedBox(width: 10),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(_character.name, style: const TextStyle(fontSize: 16, color: Colors.white)),
Row(
children: [
Container(width: 6, height: 6, decoration: const BoxDecoration(color: Color(0xFF10B981), shape: BoxShape.circle)),
const SizedBox(width: 4),
Text('Online', style: TextStyle(fontSize: 10, color: Colors.white.withOpacity(0.7))),
],
)
],
)
],
),
actions: [
IconButton(icon: const Icon(LucideIcons.moreVertical, color: Colors.white), onPressed: () {}),
],
),
body: Container(
decoration: const BoxDecoration(
color: Color(0xFF2E1065),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF2E1065), Color(0xFF0F172A)],
)
),
child: Column(
children: [
Expanded(
child: ListView.separated(
padding: const EdgeInsets.only(top: 120, bottom: 20, left: 16, right: 16),
itemCount: _messages.length,
separatorBuilder: (_, __) => const SizedBox(height: 16),
itemBuilder: (context, index) {
final msg = _messages[index];
final isMe = msg.sender == MessageSender.user;
return Align(
alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
child: Container(
constraints: BoxConstraints(maxWidth: MediaQuery.of(context).size.width * 0.75),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: isMe ? const Color(0xFFA855F7) : Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(16),
topRight: const Radius.circular(16),
bottomLeft: isMe ? const Radius.circular(16) : const Radius.circular(2),
bottomRight: isMe ? const Radius.circular(2) : const Radius.circular(16),
),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: Text(
msg.text,
style: const TextStyle(color: Colors.white, fontSize: 14, height: 1.4),
),
),
);
},
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0,
flexibleSpace: ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Container(color: Colors.black.withOpacity(0.5)),
),
),
// Input Area
ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: Container(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).padding.bottom + 10,
top: 10,
left: 16,
right: 16
),
color: Colors.black.withOpacity(0.4),
child: Row(
children: [
GestureDetector(
onTap: () => setState(() => _isVoiceMode = true),
child: Container(
width: 44,
height: 44,
leading: IconButton(
icon: const Icon(LucideIcons.arrowLeft, color: Colors.white),
onPressed: () => context.pop(),
),
title: Row(
children: [
CircleAvatar(
backgroundImage: NetworkImage(avatarUrl),
radius: 16,
onBackgroundImageError: (_, __) {},
child: _character!.avatarPath == null
? const Icon(LucideIcons.user, size: 16, color: Colors.white54)
: null,
),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
_character!.name,
style: const TextStyle(fontSize: 16, color: Colors.white),
overflow: TextOverflow.ellipsis,
),
Row(
children: [
Container(
width: 6,
height: 6,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white.withOpacity(0.1),
border: Border.all(color: Colors.white.withOpacity(0.1))
),
child: const Icon(LucideIcons.phone, color: Colors.white, size: 20),
),
),
const SizedBox(width: 8),
Expanded(
child: TextField(
controller: _controller,
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
filled: true,
fillColor: Colors.white.withOpacity(0.05),
hintText: 'Type a message...',
hintStyle: TextStyle(color: Colors.white.withOpacity(0.3)),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(24),
borderSide: BorderSide.none,
),
contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
color: _getStatusColor(_character!.status),
shape: BoxShape.circle,
),
),
),
const SizedBox(width: 8),
GestureDetector(
onTap: _sendMessage,
child: Container(
width: 44,
height: 44,
decoration: const BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(colors: [Color(0xFFA855F7), Color(0xFFEC4899)])
),
child: const Icon(LucideIcons.send, color: Colors.white, size: 20),
const SizedBox(width: 4),
Text(
_getStatusText(_character!.status),
style: TextStyle(fontSize: 10, color: Colors.white.withOpacity(0.7)),
),
)
],
),
),
),
)
],
), // Column
), // Container
), // Scaffold
if (_isVoiceMode)
VoiceModeOverlay(
character: _character,
],
),
],
),
),
],
),
actions: [
IconButton(
icon: const Icon(LucideIcons.trash2, color: Colors.white54, size: 20),
onPressed: _clearChat,
tooltip: '清除聊天记录',
),
IconButton(
icon: const Icon(LucideIcons.moreVertical, color: Colors.white),
onPressed: () {},
),
],
),
body: Container(
decoration: const BoxDecoration(
color: Color(0xFF2E1065),
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF2E1065), Color(0xFF0F172A)],
),
),
child: Column(
children: [
Expanded(
child: ListView.separated(
controller: _scrollController,
padding: const EdgeInsets.only(top: 120, bottom: 20, left: 16, right: 16),
itemCount: _messages.length + (_isTyping ? 1 : 0),
separatorBuilder: (_, __) => const SizedBox(height: 16),
itemBuilder: (context, index) {
// 如果是正在输入的消息
if (_isTyping && index == _messages.length) {
return _buildTypingBubble();
}
final msg = _messages[index];
return _buildMessageBubble(msg, avatarUrl);
},
),
),
// Input Area
_buildInputArea(),
],
),
),
),
if (_isVoiceMode && _character != null)
VoiceModeOverlay(
character: _character!,
onClose: () => setState(() => _isVoiceMode = false),
),
],
);
}
Widget _buildMessageBubble(ChatMessage msg, String avatarUrl) {
final isMe = msg.isUser;
return Row(
mainAxisAlignment: isMe ? MainAxisAlignment.end : MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (!isMe) ...[
CircleAvatar(
backgroundImage: NetworkImage(avatarUrl),
radius: 16,
onBackgroundImageError: (_, __) {},
),
const SizedBox(width: 8),
],
Flexible(
child: Container(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.7,
),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: isMe ? const Color(0xFFA855F7) : Colors.white.withOpacity(0.1),
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(16),
topRight: const Radius.circular(16),
bottomLeft: isMe ? const Radius.circular(16) : const Radius.circular(2),
bottomRight: isMe ? const Radius.circular(2) : const Radius.circular(16),
),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: Text(
msg.content,
style: const TextStyle(color: Colors.white, fontSize: 14, height: 1.4),
),
),
),
if (isMe) const SizedBox(width: 8),
],
);
}
Widget _buildTypingBubble() {
final avatarUrl = CharacterRepository.getAvatarUrl(_character!.avatarPath);
return Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
CircleAvatar(
backgroundImage: NetworkImage(avatarUrl),
radius: 16,
onBackgroundImageError: (_, __) {},
),
const SizedBox(width: 8),
Flexible(
child: Container(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * 0.7,
),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.1),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(16),
topRight: Radius.circular(16),
bottomLeft: Radius.circular(2),
bottomRight: Radius.circular(16),
),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: _typingContent.isEmpty
? Row(
mainAxisSize: MainAxisSize.min,
children: [
_buildDot(0),
_buildDot(1),
_buildDot(2),
],
)
: Text(
_typingContent,
style: const TextStyle(color: Colors.white, fontSize: 14, height: 1.4),
),
),
),
],
);
}
Widget _buildDot(int index) {
return TweenAnimationBuilder<double>(
tween: Tween(begin: 0.3, end: 1.0),
duration: Duration(milliseconds: 600 + index * 200),
curve: Curves.easeInOut,
builder: (context, value, child) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 2),
width: 8,
height: 8,
decoration: BoxDecoration(
color: Colors.white.withOpacity(value),
shape: BoxShape.circle,
),
);
},
);
}
Widget _buildInputArea() {
return ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: Container(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).padding.bottom + 10,
top: 10,
left: 16,
right: 16,
),
color: Colors.black.withOpacity(0.4),
child: Row(
children: [
GestureDetector(
onTap: () => setState(() => _isVoiceMode = true),
child: Container(
width: 44,
height: 44,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white.withOpacity(0.1),
border: Border.all(color: Colors.white.withOpacity(0.1)),
),
child: const Icon(LucideIcons.phone, color: Colors.white, size: 20),
),
),
const SizedBox(width: 8),
Expanded(
child: TextField(
controller: _controller,
style: const TextStyle(color: Colors.white),
enabled: !_isLoading,
onSubmitted: (_) => _sendMessage(),
decoration: InputDecoration(
filled: true,
fillColor: Colors.white.withOpacity(0.05),
hintText: _isLoading ? 'AI 正在思考...' : '输入消息...',
hintStyle: TextStyle(color: Colors.white.withOpacity(0.3)),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(24),
borderSide: BorderSide.none,
),
contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
),
),
),
const SizedBox(width: 8),
GestureDetector(
onTap: _isLoading ? null : _sendMessage,
child: Container(
width: 44,
height: 44,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: _isLoading
? null
: const LinearGradient(colors: [Color(0xFFA855F7), Color(0xFFEC4899)]),
color: _isLoading ? Colors.white.withOpacity(0.1) : null,
),
child: _isLoading
? const Padding(
padding: EdgeInsets.all(12),
child: CircularProgressIndicator(
strokeWidth: 2,
color: Colors.white54,
),
)
: const Icon(LucideIcons.send, color: Colors.white, size: 20),
),
),
],
),
),
),
);
}
Future<void> _clearChat() async {
final confirmed = await showDialog<bool>(
context: context,
builder: (context) => AlertDialog(
backgroundColor: const Color(0xFF2E1065),
title: const Text('清除聊天记录', style: TextStyle(color: Colors.white)),
content: const Text('确定要清除所有聊天记录吗？此操作不可恢复。',
style: TextStyle(color: Colors.white70)),
actions: [
TextButton(
onPressed: () => Navigator.pop(context, false),
child: const Text('取消', style: TextStyle(color: Colors.white54)),
),
TextButton(
onPressed: () => Navigator.pop(context, true),
child: const Text('清除', style: TextStyle(color: Colors.red)),
),
],
),
);
if (confirmed == true) {
await ChatStorageService.clearSession(widget.characterId);
final greeting = ChatService.getGreeting(_character!);
final greetingMessage = ChatMessage.assistant(greeting);
setState(() {
_messages = [greetingMessage];
});
await ChatStorageService.addMessage(widget.characterId, greetingMessage);
}
}
Color _getStatusColor(CharacterStatus status) {
switch (status) {
case CharacterStatus.online:
return const Color(0xFF10B981);
case CharacterStatus.busy:
return const Color(0xFFF59E0B);
case CharacterStatus.offline:
return Colors.grey;
}
}
String _getStatusText(CharacterStatus status) {
switch (status) {
case CharacterStatus.online:
return '在线';
case CharacterStatus.busy:
return '忙碌';
case CharacterStatus.offline:
return '离线';
}
}
}