ai

chenxt
1 parent d5be7bb1
Showing 3 changed files with 599 additions and 202 deletions
src/mobile/Ai/AiChatStyles.css
src/mobile/Ai/AiChatStyles.less
src/mobile/Ai/newAi.jsx
@@ -370,6 +370,11 @@ body {
   border-radius: 25px;
   margin-bottom: 10px;
   color: white;
+  z-index: 201;
+  position: absolute;
+  bottom: 120px;
+  left: 50%;
+  transform: translateX(-50%);
 }
 .voice-mode-indicator .voice-wave {
   display: flex;
@@ -404,18 +409,20 @@ body {
   font-size: 14px;
   font-weight: 500;
 }
-.voice-mode-indicator .voice-cancel-btn {
-  padding: 4px 12px;
-  background: rgba(255, 255, 255, 0.2);
+.voice-cancel-btn {
+  padding: 8px 16px;
+  background: linear-gradient(90deg, #667eea, #764ba2);
   border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 12px;
+  border-radius: 16px;
   color: white;
-  font-size: 12px;
+  font-size: 16px;
   cursor: pointer;
   transition: all 0.2s;
-}
-.voice-mode-indicator .voice-cancel-btn:hover {
-  background: rgba(255, 255, 255, 0.3);
+  z-index: 210;
+  position: absolute;
+  bottom: 120px;
+  left: 50%;
+  transform: translateX(-50%);
 }
 @keyframes wave {
   0%,
@@ -447,7 +454,7 @@ body {
 }
 .phone-model .phone-phone {
   position: absolute;
-  bottom: 40px;
+  bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   font-size: 50px;
@@ -402,6 +402,11 @@ body {
   border-radius: 25px;
   margin-bottom: 10px;
   color: white;
+  z-index: 201;
+  position: absolute;
+  bottom: 120px;
+  left: 50%;
+  transform: translateX(-50%);
   .voice-wave {
     display: flex;
@@ -430,22 +435,25 @@ body {
     font-weight: 500;
   }
+
+}
   .voice-cancel-btn {
-    padding: 4px 12px;
-    background: rgba(255,255,255,0.2);
+    padding: 8px 16px;
+    background: linear-gradient(90deg, #667eea, #764ba2);
     border: 1px solid rgba(255,255,255,0.3);
-    border-radius: 12px;
+    border-radius: 16px;
     color: white;
-    font-size: 12px;
+    font-size: 16px;
     cursor: pointer;
     transition: all 0.2s;
+    z-index: 210;
+    position: absolute;
+    bottom: 120px;
+    left: 50%;
+    transform: translateX(-50%);
-    &:hover {
-      background: rgba(255,255,255,0.3);
-    }
+  
   }
-}
-
 @keyframes wave {
   0%, 100% { height: 20%; }
   50% { height: 100%; }
@@ -470,7 +478,7 @@ body {
   }
   .phone-phone{
     position: absolute;
-    bottom: 40px;
+    bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 50px;
@@ -17,17 +17,24 @@ const ChatInterface = () =&gt; {
   const [currentModel, setCurrentModel] = useState('general');
   const [chatHistory, setChatHistory] = useState([]);
   const [welcomeContent, setWelcomeContent] = useState('');
- vConsole = new VConsole();
+  const phoneContentRef = useRef(null);
+  //  vConsole = new VConsole();
   // 语音输入状态
   const [isRecording, setIsRecording] = useState(false);
+  const [isAiRecording, setIsAiRecording] = useState(false);
   const [isRecordingModel, setIsRecordingModel] = useState(false);
   const [isWsConnected, setIsWsConnected] = useState(false);
   const [isVoiceMode, setIsVoiceMode] = useState(false);
   const [recordingDuration, setRecordingDuration] = useState(0);
   const [isFlushing, setIsFlushing] = useState(false);
+
+  // ==================== 新增：语音模式下的临时对话展示 ====================
+  const [voiceMessages, setVoiceMessages] = useState([]); // 存储语音模式下的对话
+
   const silenceTimeoutRef = useRef(null); // 静默超时定时器
+  const resetSilenceTimeoutRef = useRef(null);
   const messagesEndRef = useRef(null);
   const inputRef = useRef(null);
@@ -37,6 +44,8 @@ const ChatInterface = () =&gt; {
   const inputNodeRef = useRef(null);
   const recordingTimerRef = useRef(null);
   const isRecordingRef = useRef(false);
+  // ==================== 关键修复：使用 ref 存储最新输入值 ====================
+  const inputValueRef = useRef(inputValue);
   // ==================== 配置 ====================
   const CONFIG = {
@@ -98,10 +107,15 @@ const ChatInterface = () =&gt; {
             if (wsRef.current) {
               wsRef.current.hasReceivedSpeech = true;
             }
-            setInputValue(prev => {
-              const separator = prev && !prev.endsWith(' ') ? ' ' : '';
-              return prev ? `${prev}${separator}${res.text}` : res.text;
-            });
+            // ==================== 关键修复：更新 ref 和 state ====================
+            const newValue = inputValueRef.current
+              ? `${inputValueRef.current} ${res.text}`.trim()
+              : res.text;
+            inputValueRef.current = newValue;
+            setInputValue(newValue);
+
+            // 重置静默检测（收到语音后重新计时2秒）
+            resetSilenceTimeout();
           }
           // 👇 新增：处理 flush 完成
@@ -113,6 +127,7 @@ const ChatInterface = () =&gt; {
               // 只有在语音模式下才清空（避免干扰手动输入）
               if (isVoiceMode) {
                 setInputValue('');
+                inputValueRef.current = '';
               }
             }, 100);
           }
@@ -126,7 +141,7 @@ const ChatInterface = () =&gt; {
       console.log("语音识别WebSocket连接断开");
       setIsWsConnected(false);
       if (isRecordingRef.current) {
-        stopRecording();
+        stopRecordingOnly();
       }
     };
@@ -138,6 +153,278 @@ const ChatInterface = () =&gt; {
     wsRef.current = ws;
   }, []);
+  // ==================== 关键修复：重置静默检测定时器 ====================
+  const resetSilenceTimeout = useCallback(() => {
+    // 清除旧的定时器
+    if (silenceTimeoutRef.current) {
+      clearTimeout(silenceTimeoutRef.current);
+    }
+
+    // 重新设置2秒静默检测
+    silenceTimeoutRef.current = setTimeout(() => {
+      console.log('2秒内未检测到语音，自动处理');
+      const latestInput = inputValueRef.current.trim();
+      console.log("🚀 ～ 当前输入值:", latestInput);
+
+      if (latestInput) {
+        handleSendMessageWithContent(latestInput);
+      } else {
+        // 没有内容：仅停止当前录音，不清空弹窗，也不关闭 isRecordingModel
+        stopRecordingOnly();
+        Toast.show('未检测到语音，请继续说话');
+
+        // 👇 关键：2秒后自动开始下一轮录音（保持连续对话）
+        setTimeout(() => {
+          if (isRecordingModel) {
+            // startRecordingForContinue();
+          }
+        }, 500);
+      }
+    }, 3000);
+  }, []);
+
+  // ==================== 关键修复：独立的发送消息函数（接收参数） ====================
+  const handleSendMessageWithContent = useCallback(async (messageContent) => {
+    if (!messageContent || isLoading) return;
+
+    // 先停止录音（不关闭弹窗）
+    stopRecordingOnly();
+
+    let currentSessionId = sessionId;
+    if (!currentSessionId) {
+      currentSessionId = generateRandomString(20);
+      setSessionId(currentSessionId);
+    }
+
+    setIsLoading(true);
+    setIsAiRecording(true);
+
+    // ==================== 修改：添加到主消息列表和语音消息列表 ====================
+    const userMsg = {
+      id: `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      type: 'user',
+      content: messageContent,
+      time: getCurrentTime(),
+      isError: false
+    };
+
+    // 添加到主消息列表（后台记录）
+    setMessages(prev => [...prev, userMsg]);
+    // 添加到语音弹窗的消息列表（展示用）
+    setVoiceMessages(prev => [...prev, userMsg]);
+
+    const newHistoryItem = { role: 'user', content: messageContent, timestamp: Date.now() };
+    setChatHistory(prev => {
+      const updated = [...prev, newHistoryItem];
+      return updated.length > CONFIG.maxHistory ? updated.slice(-CONFIG.maxHistory) : updated;
+    });
+
+    try {
+      const endpoint = currentModel === 'process' ? CONFIG.endpoints.process : CONFIG.endpoints.chat;
+      const requestData = {
+        message: messageContent,
+        modelType: currentModel,
+        sUserId,
+        sUserType,
+        sessionId: currentSessionId
+      };
+
+      const response = await fetch(`${CONFIG.backendUrl}${endpoint}`, {
+        method: 'POST',
+        headers: CONFIG.headers,
+        body: JSON.stringify(requestData)
+      });
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+      }
+
+      const data = await response.json();
+
+      if (data.data) {
+        const aiMsg = {
+          id: `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+          type: 'ai',
+          content: data.data,
+          time: getCurrentTime(),
+          isError: false
+        };
+
+        // 添加到主消息列表
+        setMessages(prev => [...prev, aiMsg]);
+        // 添加到语音弹窗的消息列表（展示用）
+        setVoiceMessages(prev => [...prev, aiMsg]);
+
+        setChatHistory(prev => {
+          const updated = [...prev, { role: 'assistant', content: data.data, timestamp: Date.now() }];
+          return updated.length > CONFIG.maxHistory ? updated.slice(-CONFIG.maxHistory) : updated;
+        });
+      }
+    } catch (error) {
+      console.error('请求失败:', error);
+      const errorMessage = `
+抱歉，请求出现错误：${error.message}
+
+**可能的原因：**
+1. Spring Boot 后端服务未启动
+2. API 接口路径不正确
+3. 网络连接问题
+
+**检查步骤：**
+1. 确保后端服务在端口 8099 运行
+2. 检查浏览器控制台查看详细错误
+3. 刷新页面重试
+      `;
+      const errorMsg = {
+        id: `msg-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+        type: 'ai',
+        content: errorMessage,
+        time: getCurrentTime(),
+        isError: true
+      };
+
+      setMessages(prev => [...prev, errorMsg]);
+      setVoiceMessages(prev => [...prev, errorMsg]);
+    } finally {
+      setIsLoading(false);
+      // setIsAiRecording(false);
+      // ==================== 关键：不关闭 isRecordingModel，只清空输入准备下一轮 ====================
+      setInputValue('');
+      inputValueRef.current = '';
+      // 重新开始录音，实现连续对话
+      setTimeout(() => {
+        if (isRecordingModel) {
+          // startRecordingForContinue();
+        }
+      }, 500);
+    }
+  }, [sessionId, currentModel, sUserId, sUserType, isLoading, isRecordingModel]);
+
+  // ==================== 连续对话的录音启动（不重复显示弹窗） ====================
+  const startRecordingForContinue = async () => {
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+      Toast.show('浏览器不支持麦克风');
+      return;
+    }
+
+    try {
+      // 重置输入值
+      setInputValue('');
+      inputValueRef.current = '';
+
+      if (!isWsConnected || !wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+        connectWebSocket();
+        await new Promise(resolve => setTimeout(resolve, 1000));
+      }
+
+      if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+        Toast.show('语音服务未连接');
+        return;
+      }
+
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();
+      inputNodeRef.current = audioContextRef.current.createMediaStreamSource(stream);
+      scriptProcessorRef.current = audioContextRef.current.createScriptProcessor(2048, 1, 1);
+
+      scriptProcessorRef.current.onaudioprocess = (event) => {
+        if (!isRecordingRef.current) return;
+        const inputData = event.inputBuffer.getChannelData(0);
+        const resampledData = resampleAudio(inputData, audioContextRef.current.sampleRate, CONFIG.sampleRate);
+        const pcmData = float32ToInt16(resampledData);
+        if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+          wsRef.current.send(pcmData);
+        }
+      };
+
+      inputNodeRef.current.connect(scriptProcessorRef.current);
+      scriptProcessorRef.current.connect(audioContextRef.current.destination);
+
+      // 关键：重置标志
+      wsRef.current.hasReceivedSpeech = false;
+
+      // 启动首次静默检测
+      silenceTimeoutRef.current = setTimeout(() => {
+        console.log('2秒内未检测到语音，自动处理（连续对话）');
+        const latestInput = inputValueRef.current.trim();
+        console.log("🚀 ～ 当前输入值:", latestInput);
+
+        if (latestInput) {
+          handleSendMessageWithContent(latestInput);
+        } else {
+          stopRecordingOnly();
+          Toast.show('请继续说话...');
+
+          // 👇 自动开始下一轮录音
+          setTimeout(() => {
+            if (isRecordingModel) {
+              // startRecordingForContinue();
+            }
+          }, 500);
+        }
+      }, 2000);
+
+      // 更新录音状态
+      isRecordingRef.current = true;
+      setIsRecording(true);
+      setIsVoiceMode(true);
+      setRecordingDuration(0);
+
+      recordingTimerRef.current = setInterval(() => {
+        setRecordingDuration(prev => prev + 1);
+      }, 1000);
+
+    } catch (e) {
+      console.error("录音启动失败:", e);
+      Toast.show('录音启动失败：' + (e.message || '未知错误'));
+      isRecordingRef.current = false;
+      setIsRecording(false);
+    }
+  };
+  useEffect(() => {
+    // 确保在语音模式下才滚动
+    if (isRecordingModel) {
+      // 使用微任务或小延迟确保 DOM 已更新
+      setTimeout(scrollToPhoneBottom, 50);
+    }
+  }, [voiceMessages, inputValue, isLoading, isRecordingModel]);
+  // ==================== 关键修复：仅停止录音（不发送消息，不关闭弹窗） ====================
+  const stopRecordingOnly = useCallback(() => {
+    console.log("仅停止录音");
+
+    // 清理静默超时
+    if (silenceTimeoutRef.current) {
+      clearTimeout(silenceTimeoutRef.current);
+      silenceTimeoutRef.current = null;
+    }
+
+    isRecordingRef.current = false;
+    setIsRecording(false);
+    setIsVoiceMode(false);
+    setIsFlushing(true);
+
+    if (recordingTimerRef.current) {
+      clearInterval(recordingTimerRef.current);
+      recordingTimerRef.current = null;
+    }
+
+    if (inputNodeRef.current) {
+      inputNodeRef.current.disconnect();
+      inputNodeRef.current = null;
+    }
+    if (scriptProcessorRef.current) {
+      scriptProcessorRef.current.disconnect();
+      scriptProcessorRef.current = null;
+    }
+    if (audioContextRef.current) {
+      audioContextRef.current.close();
+      audioContextRef.current = null;
+    }
+
+    // 发送刷新指令获取最终结果
+    sendCommand("flush");
+  }, [sendCommand]);
+
   // 断开WebSocket
   const disconnectWebSocket = useCallback(() => {
     if (wsRef.current) {
@@ -178,7 +465,7 @@ const ChatInterface = () =&gt; {
     return result;
   };
-  // 开始录音
+  // 开始录音（首次打开弹窗）
   const startRecording = async () => {
     if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
       Toast.show('浏览器不支持麦克风');
@@ -186,6 +473,12 @@ const ChatInterface = () =&gt; {
     }
     try {
+      // 清空语音消息列表（新会话开始）
+      setVoiceMessages([]);
+      // 重置输入值
+      setInputValue('');
+      inputValueRef.current = '';
+
       if (!isWsConnected) {
         connectWebSocket();
         await new Promise(resolve => setTimeout(resolve, 1000));
@@ -214,18 +507,21 @@ const ChatInterface = () =&gt; {
       inputNodeRef.current.connect(scriptProcessorRef.current);
       scriptProcessorRef.current.connect(audioContextRef.current.destination);
-      // 👇 关键：重置标志 + 启动静默检测
-      let hasReceivedSpeech = false; // 闭包变量，记录是否收到语音
-
-      // 保存到 ref，供 onmessage 使用
+      // 关键：重置标志
       wsRef.current.hasReceivedSpeech = false;
-      // 设置 3 秒静默超时
+      // ==================== 关键修复：启动首次静默检测 ====================
       silenceTimeoutRef.current = setTimeout(() => {
-        if (!wsRef.current?.hasReceivedSpeech) {
-          console.log('3秒内未检测到语音，自动停止录音');
-          Toast.show('未检测到语音，请重新尝试');
-          handleSendMessage()
+        console.log('2秒内未检测到语音，自动发送并停止录音');
+        const latestInput = inputValueRef.current.trim();
+        console.log("🚀 ~ 当前输入值:", latestInput);
+
+        if (latestInput) {
+          handleSendMessageWithContent(latestInput);
+        } else {
+          stopRecordingOnly();
+          // setIsRecordingModel(false); // 没有内容时关闭弹窗
+          Toast.show('未检测到语音输入');
         }
       }, 3000);
@@ -246,19 +542,94 @@ const ChatInterface = () =&gt; {
       setIsRecording(false);
     }
   };
+  // 用于打断/连续对话，不清空 voiceMessages
+  const startRecordingWithoutClear = async () => {
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+      Toast.show('浏览器不支持麦克风');
+      return;
+    }
+
+    try {
+      // ❌ 不清空 voiceMessages！
+      // 重置输入值（但保留历史语音消息）
+      setInputValue('');
+      inputValueRef.current = '';
+
+      if (!isWsConnected || !wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+        connectWebSocket();
+        await new Promise(resolve => setTimeout(resolve, 1000));
+      }
+
+      if (!wsRef.current || wsRef.current.readyState !== WebSocket.OPEN) {
+        Toast.show('语音服务未连接');
+        return;
+      }
+
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      audioContextRef.current = new (window.AudioContext || window.webkitAudioContext)();
+      inputNodeRef.current = audioContextRef.current.createMediaStreamSource(stream);
+      scriptProcessorRef.current = audioContextRef.current.createScriptProcessor(2048, 1, 1);
+
+      scriptProcessorRef.current.onaudioprocess = (event) => {
+        if (!isRecordingRef.current) return;
+        const inputData = event.inputBuffer.getChannelData(0);
+        const resampledData = resampleAudio(inputData, audioContextRef.current.sampleRate, CONFIG.sampleRate);
+        const pcmData = float32ToInt16(resampledData);
+        if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+          wsRef.current.send(pcmData);
+        }
+      };
+
+      inputNodeRef.current.connect(scriptProcessorRef.current);
+      scriptProcessorRef.current.connect(audioContextRef.current.destination);
+
+      wsRef.current.hasReceivedSpeech = false;
+
+      // 静默检测（可复用）
+      silenceTimeoutRef.current = setTimeout(() => {
+        const latestInput = inputValueRef.current.trim();
+        if (latestInput) {
+          handleSendMessageWithContent(latestInput);
+        } else {
+          stopRecordingOnly();
+          setIsAiRecording(true)
+          // Toast.show('请继续说话...');
+          // startRecordingForContinue()
+          // 可选：自动重试
+        }
+      }, 3000);
+
+      isRecordingRef.current = true;
+      setIsRecording(true);
+      setIsVoiceMode(true);
+      setRecordingDuration(0);
+
+      recordingTimerRef.current = setInterval(() => {
+        setRecordingDuration(prev => prev + 1);
+      }, 1000);
+
+    } catch (e) {
+      console.error("录音启动失败:", e);
+      Toast.show('录音启动失败：' + (e.message || '未知错误'));
+      isRecordingRef.current = false;
+      setIsRecording(false);
+    }
+  };
+  // 停止录音并关闭弹窗（手动挂断）
+  const stopRecordingAndClose = useCallback(() => {
+    console.log("停止录音并关闭弹窗");
-  // 停止录音
-  const stopRecording = useCallback(() => {
-    console.log("停止录音");
-    // 👇 清理静默超时
+    // 清理静默超时
     if (silenceTimeoutRef.current) {
       clearTimeout(silenceTimeoutRef.current);
       silenceTimeoutRef.current = null;
     }
+
     isRecordingRef.current = false;
     setIsRecording(false);
     setIsVoiceMode(false);
     setIsFlushing(true);
+
     if (recordingTimerRef.current) {
       clearInterval(recordingTimerRef.current);
       recordingTimerRef.current = null;
@@ -277,32 +648,42 @@ const ChatInterface = () =&gt; {
       audioContextRef.current = null;
     }
-    // 发送刷新指令获取最终结果
     sendCommand("flush");
-    setTimeout(() => {
-      setInputValue('')
-    }, 500);
+
+    // 关闭弹窗并清空
+    // setIsRecordingModel(false);
+    setVoiceMessages([]);
+    setInputValue('');
+    inputValueRef.current = '';
   }, [sendCommand]);
   // 切换录音状态（点击按钮）
   const toggleRecording = useCallback(() => {
     if (isRecordingRef.current) {
-      // 正在录音，停止
-      stopRecording();
+      // 正在录音，停止（手动停止也触发发送）
+      const latestInput = inputValueRef.current.trim();
+      if (latestInput) {
+        handleSendMessageWithContent(latestInput);
+      } else {
+        stopRecordingAndClose();
+      }
     } else {
       // 未录音，开始
       startRecording();
     }
-  }, [stopRecording]);
+  }, [stopRecordingAndClose, handleSendMessageWithContent]);
   // 取消录音并清空
   const cancelRecording = useCallback(() => {
     if (isRecordingRef.current) {
-      stopRecording();
+      stopRecordingOnly();
     }
     setInputValue('');
+    inputValueRef.current = '';
     setIsVoiceMode(false);
-  }, [stopRecording]);
+    setIsRecordingModel(false);
+    setVoiceMessages([]);
+  }, [stopRecordingOnly]);
   // 格式化录音时长
   const formatDuration = (seconds) => {
@@ -352,9 +733,9 @@ const ChatInterface = () =&gt; {
       }
       if (e.key === 'Escape') {
         setInputValue('');
+        inputValueRef.current = '';
         if (isRecordingRef.current) {
-          stopRecording();
-          setIsVoiceMode(false);
+          stopRecordingAndClose();
         }
       }
     };
@@ -367,12 +748,15 @@ const ChatInterface = () =&gt; {
       if (recordingTimerRef.current) {
         clearInterval(recordingTimerRef.current);
       }
+      if (silenceTimeoutRef.current) {
+        clearTimeout(silenceTimeoutRef.current);
+      }
     };
   }, []);
   useEffect(() => {
     scrollToBottom();
-  }, [messages, isLoading]);
+  }, [messages, isLoading, voiceMessages]);
   // ==================== 消息处理 ====================
   const addMessage = (content, type, isError = false) => {
@@ -387,15 +771,12 @@ const ChatInterface = () =&gt; {
     return newMessage.id;
   };
+  // 原有的 handleSendMessage 保留给手动输入使用
   const handleSendMessage = async () => {
     const message = inputValue.trim();
-    if (!message || isLoading) return;
+    console.log("🚀 ~ handleSendMessage ~ message:", message);
-    // 如果正在录音，先停止
-    if (isRecordingRef.current) {
-      stopRecording();
-      setIsVoiceMode(false);
-    }
+    if (!message || isLoading) return;
     let currentSessionId = sessionId;
     if (!currentSessionId) {
@@ -404,6 +785,7 @@ const ChatInterface = () =&gt; {
     }
     setInputValue('');
+    inputValueRef.current = '';
     setIsLoading(true);
     addMessage(message, 'user');
@@ -478,9 +860,9 @@ const ChatInterface = () =&gt; {
       setChatHistory([]);
       setSessionId('');
       setInputValue('');
+      inputValueRef.current = '';
       if (isRecordingRef.current) {
-        stopRecording();
-        setIsVoiceMode(false);
+        stopRecordingAndClose();
       }
     }
   };
@@ -499,38 +881,76 @@ const ChatInterface = () =&gt; {
     setMessages(prev => prev.filter(msg => msg.id !== messageId));
     setInputValue(content);
+    inputValueRef.current = content;
     setTimeout(() => handleSendMessage(), 100);
   };
   const handleModelChange = (e) => {
     setCurrentModel(e.target.value);
   };
+
+  // ==================== 渲染消息组件（复用） ====================
+  const renderMessage = (msg) => (
+    <div
+      key={msg.id}
+      className={`message ${msg.type}-message`}
+    >
+      <div className={`message-bubble ${msg.type}-bubble`}>
+        <div className="message-content">
+          {msg.type === 'ai' ? (
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={{
+                code: ({ node, inline, className, children, ...props }) => (
+                  inline ? (
+                    <code className="inline-code" {...props}>
+                      {children}
+                    </code>
+                  ) : (
+                    <pre className="code-block">
+                      <code {...props}>{children}</code>
+                    </pre>
+                  )
+                )
+              }}
+            >
+              {msg.content}
+            </ReactMarkdown>
+          ) : (
+            msg.content
+          )}
+        </div>
+        <div className="message-meta">
+          <span className="message-time">{msg.time}</span>
+          {msg.type === 'ai' && !msg.isWelcome && (
+            <div className="message-actions">
+              <button
+                className="action-btn"
+                onClick={() => handleCopyMessage(msg.content)}
+              >
+                复制
+              </button>
+              <button
+                className="action-btn"
+                onClick={() => handleRegenerateMessage(msg.id, msg.content)}
+              >
+                重新生成
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+  const scrollToPhoneBottom = () => {
+    if (phoneContentRef.current) {
+      phoneContentRef.current.scrollTop = phoneContentRef.current.scrollHeight;
+    }
+  };
   // ==================== 渲染 ====================
   return (
     <div className="ai-chat-container">
       {/* 头部 */}
-      {/* <div className="chat-header">
-        <div className="header-left">
-          <h1>小羚羊Ai-agent智能体</h1>
-          <p>AI 印刷助手</p>
-        </div>
-        <div className="header-right">
-          <select
-            className="model-selector"
-            value={currentModel}
-            onChange={handleModelChange}
-          >
-            <option value="process">小羚羊印刷行业大模型</option>
-            <option value="general">qwen2.5:14b</option>
-          </select>
-          <button
-            className="model-selectors"
-            onClick={handleClearChat}
-          >
-            清空对话
-          </button>
-        </div>
-      </div> */}
       <Button
         className="model-Button"
         onClick={handleClearChat}
@@ -543,58 +963,7 @@ const ChatInterface = () =&gt; {
         <div className="chat-main">
           {/* 消息区域 */}
           <div className="messages-container">
-            {messages.map((msg) => (
-              <div
-                key={msg.id}
-                className={`message ${msg.type}-message`}
-              >
-                <div className={`message-bubble ${msg.type}-bubble`}>
-                  <div className="message-content">
-                    {msg.type === 'ai' ? (
-                      <ReactMarkdown
-                        remarkPlugins={[remarkGfm]}
-                        components={{
-                          code: ({ node, inline, className, children, ...props }) => (
-                            inline ? (
-                              <code className="inline-code" {...props}>
-                                {children}
-                              </code>
-                            ) : (
-                              <pre className="code-block">
-                                <code {...props}>{children}</code>
-                              </pre>
-                            )
-                          )
-                        }}
-                      >
-                        {msg.content || welcomeContent}
-                      </ReactMarkdown>
-                    ) : (
-                      msg.content
-                    )}
-                  </div>
-                  <div className="message-meta">
-                    <span className="message-time">{msg.time}</span>
-                    {msg.type === 'ai' && !msg.isWelcome && (
-                      <div className="message-actions">
-                        <button
-                          className="action-btn"
-                          onClick={() => handleCopyMessage(msg.content)}
-                        >
-                          复制
-                        </button>
-                        <button
-                          className="action-btn"
-                          onClick={() => handleRegenerateMessage(msg.id, msg.content)}
-                        >
-                          重新生成
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            ))}
+            {messages.map(renderMessage)}
             {/* 打字机效果 */}
             {isLoading && (
@@ -613,28 +982,6 @@ const ChatInterface = () =&gt; {
           {/* 输入区域 */}
           <div className="input-section">
-            {/* 语音模式提示 - 仅在录音时显示 */}
-            {isRecording && (
-              <div className="voice-mode-indicator">
-                <div className="voice-wave">
-                  <span></span>
-                  <span></span>
-                  <span></span>
-                  <span></span>
-                  <span></span>
-                </div>
-                <span className="voice-text">
-                  正在录音 {formatDuration(recordingDuration)}
-                </span>
-                <button
-                  className="voice-cancel-btn"
-                  onClick={cancelRecording}
-                >
-                  取消
-                </button>
-              </div>
-            )}
-
             <div className="input-wrapper">
               <input
                 ref={inputRef}
@@ -645,6 +992,7 @@ const ChatInterface = () =&gt; {
                 onChange={(e) => {
                   if (!isRecording) {
                     setInputValue(e.target.value);
+                    inputValueRef.current = e.target.value;
                   }
                 }}
                 onKeyPress={(e) => {
@@ -662,61 +1010,95 @@ const ChatInterface = () =&gt; {
               }} />
               <LocationOutline className='input-icon' onClick={handleSendMessage}
                 disabled={isLoading || isRecording} />
-              {/* 语音按钮 - 点击切换录音状态 */}
-              {/* <button
-                className={`voice-button ${isRecording ? 'recording' : ''}`}
-                onClick={toggleRecording}
-                disabled={isLoading}
-              >
-                {isRecording ? (
-                  <>
-                    <span className="voice-text">结束录音</span>
-                  </>
-                ) : (
-                  <>
-                    <span className="voice-text">点击录音</span>
-                  </>
-                )}
-              </button>
-
-              <button
-                className={`send-button ${isLoading ? 'disabled' : ''}`}
-                onClick={handleSendMessage}
-                disabled={isLoading || isRecording}
-              >
-                发送
-              </button> */}
             </div>
           </div>
         </div>
       </div>
-      
-      {
-        isRecordingModel ?
-          <div className='phone-model'>
-            <div className='phone-zhezhao'></div>
-            <div className='phone-content'>
-              {inputValue.trim() && (
-                <div className="message user-message">
-                  <div className="message-bubble user-bubble">
-                    <div className="message-content">
-                      {inputValue}
-                    </div>
-                    <div className="message-meta">
-                      <span className="message-time">{getCurrentTime()}</span>
-                    </div>
+
+      {/* ==================== 语音对话弹窗 ==================== */}
+      {isRecordingModel && (
+        <div className='phone-model'>
+          <div className='phone-zhezhao'></div>
+
+          {/* 消息展示区域 - 展示 voiceMessages 中的对话 */}
+          <div className='phone-content' ref={phoneContentRef}>
+            {voiceMessages.map(renderMessage)}
+
+            {/* 当前正在输入的语音转文字（实时显示） */}
+            {inputValue.trim() && isRecording && (
+              <div className="message user-message">
+                <div className="message-bubble user-bubble">
+                  <div className="message-content">
+                    {inputValue}
+                  </div>
+                  <div className="message-meta">
+                    <span className="message-time">{getCurrentTime()}</span>
+                    <span style={{ fontSize: '12px', color: '#999', marginLeft: '8px' }}>
+                      (识别中...)
+                    </span>
                   </div>
                 </div>
-              )}
+              </div>
+            )}
+
+            {/* AI 思考中效果 */}
+            {isLoading && (
+              <div className="message ai-message">
+                <div className="typing-indicator">
+                  <div className="typing-dot"></div>
+                  <div className="typing-dot" style={{ animationDelay: '0.2s' }}></div>
+                  <div className="typing-dot" style={{ animationDelay: '0.4s' }}></div>
+                  <span className="typing-text">AI 正在思考...</span>
+                </div>
+              </div>
+            )}
+
+            <div ref={messagesEndRef} style={{ height: '20px' }} />
+          </div>
+
+          {/* 录音状态指示器 */}
+          {isRecording && (
+            <div className="voice-mode-indicator">
+              <div className="voice-wave">
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+                <span></span>
+              </div>
+              <span className="voice-text">
+                正在录音 {formatDuration(recordingDuration)}
+              </span>
             </div>
-            <div className='phone-phone'>
-              <PhoneFill color='red' onClick={() => {
+          )}
+
+          {/* AI 说话时的打断按钮 */}
+          {isAiRecording && (
+            <button
+              className="voice-cancel-btn"
+              onClick={() => {
+                setIsAiRecording(false);
+                setIsLoading(false);
+                startRecordingWithoutClear()
+                // startRecordingForContinue();
+              }}
+            >
+              打断
+            </button>
+          )}
+
+          {/* 挂断按钮 */}
+          <div className='phone-phone'>
+            <PhoneFill
+              color='red'
+              onClick={() => {
+                stopRecordingAndClose();
                 setIsRecordingModel(false)
-                stopRecording()
-              }} />
-            </div>
-          </div> : ''
-      }
+              }}
+            />
+          </div>
+        </div>
+      )}
     </div>
   );
 };