ai语音弹窗

chenxt
1 parent bc257923
Showing 6 changed files with 175 additions and 58 deletions
src/mobile/Ai/AiChatStyles.css
src/mobile/Ai/AiChatStyles.less
src/mobile/Ai/newAi.jsx
src/mobile/common/CommobileList.js
src/routes/mobile/IndexMobile.js
src/utils/config.js
@@ -78,7 +78,7 @@ body {
   height: 120px;
   position: fixed;
   top: 39px;
-  z-index: 999;
+  z-index: 200;
   width: 100%;
 }
 .header-left h1 {
@@ -97,7 +97,12 @@ body {
   width: 40%;
   flex-wrap: wrap;
 }
-.model-selectors,
+.model-Button {
+  position: fixed;
+  right: 10px;
+  top: 50px;
+  z-index: 200;
+}
 .model-selector {
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.2);
@@ -128,7 +133,7 @@ body {
   flex: 1;
   overflow: hidden;
   min-height: 0;
-  margin-top: 160px;
+  margin-top: 100px;
 }
 .chat-main {
   flex: 1;
@@ -258,13 +263,17 @@ body {
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
-  z-index: 999;
+  z-index: 200;
   width: 100%;
 }
 .input-wrapper {
   display: flex;
   gap: 10px;
   position: relative;
+  align-items: center;
+}
+.input-icon {
+  font-size: 30px;
 }
 .message-input {
   padding: 15px 20px;
@@ -273,7 +282,7 @@ body {
   font-size: 16px;
   outline: none;
   transition: border-color 0.3s;
-  width: 60%;
+  width: 80%;
 }
 .message-input:focus {
   border-color: #667eea;
@@ -417,3 +426,40 @@ body {
     height: 100%;
   }
 }
+.phone-model {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 201;
+  width: 100%;
+  height: 100%;
+}
+.phone-model .phone-zhezhao {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 200;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+.phone-model .phone-phone {
+  position: absolute;
+  bottom: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 50px;
+  z-index: 210;
+}
+.phone-model .phone-content {
+  position: absolute;
+  width: 90%;
+  height: 70%;
+  background-color: #f3f3f3;
+  z-index: 210;
+  left: 50%;
+  top: 10%;
+  transform: translateX(-50%);
+}
@@ -71,7 +71,7 @@ body {
   height: 120px;
   position: fixed;
   top: 39px;
-  z-index: 999;
+  z-index: 200;
   width: 100%;
 }
  
@@ -93,7 +93,12 @@ body {
   width: 40%;
   flex-wrap: wrap;
 }
-.model-selectors,
+.model-Button {
+  position: fixed;
+   right: 10px;
+  top: 50px;
+  z-index: 200;
+}
 .model-selector {
   background: rgba(255,255,255,0.1);
   border: 1px solid rgba(255,255,255,0.2);
@@ -126,7 +131,7 @@ body {
   flex: 1;
   overflow: hidden;
   min-height: 0;
-  margin-top: 160px;
+  margin-top: 100px;
 }
  
 .chat-main {
@@ -277,7 +282,7 @@ body {
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
-  z-index: 999;
+  z-index: 200;
   width: 100%;
 }
  
@@ -285,8 +290,11 @@ body {
   display: flex;
   gap: 10px;
   position: relative;
+  align-items: center;
+}
+.input-icon{
+  font-size: 30px;
 }
-
 .message-input {
   padding: 15px 20px;
   border: 2px solid #e9ecef;
@@ -294,7 +302,7 @@ body {
   font-size: 16px;
   outline: none;
   transition: border-color 0.3s;
-  width: 60%;
+  width: 80%;
 }
  
 .message-input:focus {
@@ -441,4 +449,41 @@ body {
 @keyframes wave {
   0%, 100% { height: 20%; }
   50% { height: 100%; }
+}
+.phone-model{
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 201;
+  width: 100%;
+  height: 100%;
+  .phone-zhezhao{
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 200;
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+  }
+  .phone-phone{
+    position: absolute;
+    bottom: 40px;
+    left: 50%;
+    transform: translateX(-50%);
+    font-size: 50px;
+    z-index: 210;
+  }
+  .phone-content{
+    position: absolute;
+    width: 90%;
+    height: 70%;
+    background-color: #f3f3f3;
+    z-index: 210;
+    left: 50%;
+    top: 10%;
+    transform: translateX(-50%);
+  }
 }
 \ No newline at end of file
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
-import { AudioOutline, AudioFill } from "antd-mobile-icons";
+import { Button } from "antd-mobile";
+import { LocationOutline, PhoneFill } from "antd-mobile-icons";
 import './AiChatStyles.less';
  
 const ChatInterface = () => {
@@ -17,6 +18,7 @@ const ChatInterface = () =&gt; {
   const [welcomeContent, setWelcomeContent] = useState('');
  
   // 语音输入状态
+  const [isVoiceModel, setIsVoiceModel] = useState(false);
   const [isRecording, setIsRecording] = useState(false);
   const [isWsConnected, setIsWsConnected] = useState(false);
   const [isVoiceMode, setIsVoiceMode] = useState(false);
@@ -205,9 +207,6 @@ const ChatInterface = () =&gt; {
       recordingTimerRef.current = setInterval(() => {
         setRecordingDuration(prev => prev + 1);
       }, 1000);
-
-      console.log("录音已开始");
-
     } catch (e) {
       console.error("录音启动失败:", e);
       alert("录音启动失败：" + e.message);
@@ -407,17 +406,17 @@ const ChatInterface = () =&gt; {
     } catch (error) {
       console.error('请求失败:', error);
       const errorMessage = `
-抱歉，请求出现错误：${error.message}
+        抱歉，请求出现错误：${error.message}
  
-**可能的原因：**
-1. Spring Boot 后端服务未启动
-2. API 接口路径不正确
-3. 网络连接问题
+        **可能的原因：**
+        1. Spring Boot 后端服务未启动
+        2. API 接口路径不正确
+        3. 网络连接问题
  
-**检查步骤：**
-1. 确保后端服务在端口 8099 运行
-2. 检查浏览器控制台查看详细错误
-3. 刷新页面重试
+        **检查步骤：**
+        1. 确保后端服务在端口 8099 运行
+        2. 检查浏览器控制台查看详细错误
+        3. 刷新页面重试
       `;
       addMessage(errorMessage, 'ai', true);
     } finally {
@@ -466,33 +465,21 @@ const ChatInterface = () =&gt; {
   const handleModelChange = (e) => {
     setCurrentModel(e.target.value);
   };
+  // 录音弹窗
+  const handlePhone = () => {
+    setIsVoiceModel(true)
+    startRecording();
+  }
  
   // ==================== 渲染 ====================
   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}
+      >
+        清空对话
+      </Button>
  
       {/* 主体 */}
       <div className="chat-body">
@@ -570,7 +557,7 @@ const ChatInterface = () =&gt; {
           {/* 输入区域 */}
           <div className="input-section">
             {/* 语音模式提示 - 仅在录音时显示 */}
-            {isRecording && (
+            {/* {isRecording && (
               <div className="voice-mode-indicator">
                 <div className="voice-wave">
                   <span></span>
@@ -589,7 +576,7 @@ const ChatInterface = () =&gt; {
                   取消
                 </button>
               </div>
-            )}
+            )} */}
  
             <div className="input-wrapper">
               <input
@@ -612,37 +599,76 @@ const ChatInterface = () =&gt; {
                 disabled={isLoading}
                 readOnly={isRecording}
               />
+              <PhoneFill className='input-icon' onClick={handlePhone} />
  
+              <LocationOutline className='input-icon' onClick={handleSendMessage}
+                disabled={isLoading || isRecording} />
               {/* 语音按钮 - 点击切换录音状态 */}
-              <button
+              {/* <button
                 className={`voice-button ${isRecording ? 'recording' : ''}`}
                 onClick={toggleRecording}
                 disabled={isLoading}
               >
                 {isRecording ? (
                   <>
-                    {/* <AudioFill className="voice-icon" /> */}
                     <span className="voice-text">结束录音</span>
                   </>
                 ) : (
                   <>
-                    {/* <AudioOutline className="voice-icon" /> */}
                     <span className="voice-text">点击录音</span>
                   </>
                 )}
-              </button>
+              </button> */}
  
-              <button
+              {/* <button
                 className={`send-button ${isLoading ? 'disabled' : ''}`}
                 onClick={handleSendMessage}
                 disabled={isLoading || isRecording}
               >
                 发送
-              </button>
+              </button> */}
             </div>
           </div>
         </div>
       </div>
+      {
+        isVoiceModel ?
+          <div className='phone-model phone-zhezhao'>
+            <div className='phone-zhezhao'></div>
+            <div className='phone-content'>
+
+            </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>
+                <button
+                  className="voice-cancel-btn"
+                  onClick={cancelRecording}
+                >
+                  取消
+                </button>
+              </div>
+            )}
+            <div className='phone-phone' onClick={() => {
+              stopRecording()
+              setIsVoiceModel(false)
+            }}>
+              <PhoneFill color='red' />
+            </div>
+
+          </div> : ''
+      }
+
     </div>
   );
 };
@@ -136,7 +136,7 @@ class CommobileList extends React.Component {
           {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
            onClick={() => this.props.onCopyToClick(rowData)} */}
           {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-          <li key={rowID} style={{ listStyle: 'none' }} onDoubleClick={() => this.handleDoubleClick(rowData)} >
+          <li key={rowID} style={{ listStyle: 'none' }} >
             {
               true ?
                 <div style={{ display: 'flex', justifyContent: 'space-between' }}>
@@ -515,7 +515,7 @@ class IndexMobile extends React.Component {
                 commonBusiness.clearSocketData({ token, value: {}, sModelsId: 100 });
                 this.setState({
                   selectedTab: "ai",
-                  title: ai,
+                  title: '小羚羊智能体',
                 });
                 history.push("/indexMobile/ai");
               }}
@@ -9,7 +9,7 @@ const API = process.env.API;
 const bHttps = false;
 export const webSite = {
   faceAddress: isDev ? '//km5cjx.gnway.cc:36867/xlyFace' : '//' + location.host + '/xlyFace',
-  ipAddress: localStorage.ipAddress ? localStorage.ipAddress : isDev ? '//km5cjx.gnway.cc:37845/xlyEntry/' : '//' + location.host + '/xlyEntry/',
+  ipAddress: localStorage.ipAddress ? localStorage.ipAddress : isDev ? '//118.178.19.35:9198/xlyEntry_saas/' : '//' + location.host + '/xlyEntry/',
  
   // ipAddress: localStorage.ipAddress ? localStorage.ipAddress : isDev ? '//118.178.19.35:8088/xlyEntry/' : '//' + location.host + '/xlyEntry/',
   // ipAddress: localStorage.ipAddress ? localStorage.ipAddress : isDev ? '//km5cjx.gnway.cc:36867/xlyEntry/' : '//' + location.host + '/xlyEntry/',