deepvoice_client/lib/modules/agent/views/agent_view.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/agent_controller.dart';
import 'message_bubble.dart';

class AgentView extends StatelessWidget {
  const AgentView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final controller = Get.find<AgentController>();
    
    return Scaffold(
      appBar: AppBar(
        title: Row(
          children: [
            Container(
              width: 40,
              height: 40,
              decoration: BoxDecoration(
                color: Theme.of(context).primaryColor,
                borderRadius: BorderRadius.circular(20),
              ),
              child: const Icon(
                Icons.smart_toy_outlined,
                color: Colors.white,
              ),
            ),
            const SizedBox(width: 10),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const Text(
                  'DeepVoice AI',
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Row(
                  children: [
                    Container(
                      width: 8,
                      height: 8,
                      decoration: BoxDecoration(
                        color: Colors.green,
                        borderRadius: BorderRadius.circular(4),
                      ),
                    ),
                    const SizedBox(width: 4),
                    Text(
                      '在线',
                      style: TextStyle(
                        fontSize: 12,
                        color: Colors.green,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
        actions: [
          PopupMenuButton(
            icon: const Icon(Icons.more_vert),
            itemBuilder: (context) => [
              PopupMenuItem(
                child: const Text('清除聊天记录'),
                onTap: () => controller.clearChat(),
              ),
            ],
          ),
        ],
      ),
      body: Column(
        children: [
          // 聊天内容
          Expanded(
            child: Obx(
              () => ListView.builder(
                controller: controller.scrollController,
                reverse: false,
                padding: const EdgeInsets.all(16),
                itemCount: controller.messages.length,
                itemBuilder: (context, index) {
                  final message = controller.messages[index];
                  return MessageBubble(
                    isUser: message.isUser,
                    message: message.text,
                    timestamp: message.timestamp,
                    isRecognizing: message.isRecognizing,
                  );
                },
              ),
            ),
          ),
          
          // 输入区域
          Container(
            padding: const EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Theme.of(context).scaffoldBackgroundColor,
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.05),
                  blurRadius: 5,
                  offset: const Offset(0, -1),
                ),
              ],
            ),
            child: Row(
              children: [
                // 键盘/语音切换按钮
                Obx(() {
                  final isTextMode = controller.isTextInputMode.value;
                  return GestureDetector(
                    onTap: () {
                      controller.toggleInputMode();
                    },
                    child: Container(
                      width: 48,
                      height: 48,
                      decoration: BoxDecoration(
                        color: Colors.grey[200],
                        borderRadius: BorderRadius.circular(24),
                      ),
                      child: Icon(
                        isTextMode ? Icons.mic_none : Icons.keyboard,
                        color: Colors.grey[600],
                      ),
                    ),
                  );
                }),
                
                const SizedBox(width: 8),
                
                // 文本输入框或语音波形图
                Expanded(
                  child: Obx(() {
                    final isTextMode = controller.isTextInputMode.value;
                    
                    if (isTextMode) {
                      // 文本输入模式
                      return Container(
                        padding: const EdgeInsets.symmetric(horizontal: 16),
                        decoration: BoxDecoration(
                          color: Colors.grey[200],
                          borderRadius: BorderRadius.circular(24),
                        ),
                        child: Row(
                          children: [
                            Expanded(
                              child: TextField(
                                controller: controller.textController,
                                decoration: const InputDecoration(
                                  hintText: '输入消息...',
                                  border: InputBorder.none,
                                ),
                                onSubmitted: (_) => controller.sendTextMessage(),
                              ),
                            ),
                            GestureDetector(
                              onTap: () => controller.sendTextMessage(),
                              child: Icon(
                                Icons.send,
                                color: Theme.of(context).primaryColor,
                              ),
                            ),
                          ],
                        ),
                      );
                    } else {
                      // 语音输入模式 - 始终显示波形图
                      return GestureDetector(
                        onTap: () {
                          if (controller.isListening.value) {
                            controller.stopVoiceInput();
                          } else {
                            controller.startVoiceInput();
                          }
                        },
                        child: Container(
                          height: 48,
                          padding: const EdgeInsets.symmetric(horizontal: 16),
                          decoration: BoxDecoration(
                            color: Colors.grey[200],
                            borderRadius: BorderRadius.circular(24),
                          ),
                          child: Row(
                            children: [
                              // 语音波形图 - 始终显示
                              Expanded(
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  children: [
                                    ...List.generate(10, (index) {
                                      return _buildSoundBar(index);
                                    }),
                                    const Spacer(),
                                    // "正在聆听"文字
                                    Obx(() {
                                      final isListening = controller.isListening.value;
                                      return Row(
                                        children: [
                                          Icon(
                                            Icons.mic,
                                            size: 14,
                                            color: isListening 
                                                ? Theme.of(context).primaryColor 
                                                : Colors.grey,
                                          ),
                                          const SizedBox(width: 4),
                                          Text(
                                            '正在聆听',
                                            style: TextStyle(
                                              fontSize: 12,
                                              color: isListening 
                                                  ? Theme.of(context).primaryColor 
                                                  : Colors.grey,
                                            ),
                                          ),
                                        ],
                                      );
                                    }),
                                  ],
                                ),
                              ),
                            ],
                          ),
                        ),
                      );
                    }
                  }),
                ),
                
                const SizedBox(width: 8),
                
                // 只显示添加按钮，不再显示停止按钮
                Container(
                  width: 48,
                  height: 48,
                  decoration: BoxDecoration(
                    color: Colors.grey[200],
                    borderRadius: BorderRadius.circular(24),
                  ),
                  child: Icon(
                    Icons.add,
                    color: Colors.grey[600],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
  
  // 构建声音柱
  Widget _buildSoundBar(int index) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 1),
      child: Obx(() => _SoundBar(
        delay: index * 0.1,
        isActive: Get.find<AgentController>().isListening.value,
      )),
    );
  }
}

// 声音柱动画组件
class _SoundBar extends StatefulWidget {
  final double delay;
  final bool isActive;
  
  const _SoundBar({
    required this.delay,
    required this.isActive,
  });
  
  @override
  _SoundBarState createState() => _SoundBarState();
}

class _SoundBarState extends State<_SoundBar> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;
  
  @override
  void initState() {
    super.initState();
    
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 500),
    );
    
    _animation = Tween<double>(begin: 3, end: 15).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Curves.easeInOut,
      ),
    )..addListener(() {
      setState(() {});
    });
    
    _startOrStopAnimation();
  }
  
  @override
  void didUpdateWidget(_SoundBar oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.isActive != oldWidget.isActive) {
      _startOrStopAnimation();
    }
  }
  
  void _startOrStopAnimation() {
    if (widget.isActive) {
      Future.delayed(Duration(milliseconds: (widget.delay * 1000).toInt()), () {
        if (mounted && widget.isActive) {
          _controller.repeat(reverse: true);
        }
      });
    } else {
      _controller.reset();
      // 设置为小高度的静态状态
      _controller.animateTo(0.1, duration: Duration(milliseconds: 300));
    }
  }
  
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 2,
      height: widget.isActive ? _animation.value : 3,
      decoration: BoxDecoration(
        color: widget.isActive ? Theme.of(context).primaryColor : Colors.grey[400],
        borderRadius: BorderRadius.circular(1),
      ),
    );
  }
}