diff --git a/src/Pages/My-rental-housing/MyRentalHousing.css b/src/Pages/My-rental-housing/MyRentalHousing.css
index 05bb7cc60db91f11c697154ae2215938a6d6c1e6..a5215ceef5d9c08cc3ec99eafb35fab03c54cee2 100644
--- a/src/Pages/My-rental-housing/MyRentalHousing.css
+++ b/src/Pages/My-rental-housing/MyRentalHousing.css
@@ -1,71 +1,92 @@
 .MyHouse {
-    font-family: sans-serif;
-    font-size: 14px;
-  }
-  
-  .MyHouse_top {
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    background-color: #f5f5f5;
-  }
-  
-  .back-icon {
-    cursor: pointer;
-  }
-  
-  .title-text {
-    font-size: 16px;
-    margin-left: 10px;
-  }
-  
-  .MyHouse_content {
-    width: 100%;
-    height: 700px;
-    border: 1px solid #ccc;
-    margin-top: 80px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-  }
-  
-  .chat-container {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .chat-messages {
-    flex-grow: 1;
-    overflow-y: auto;
-    padding: 10px;
-  }
-  
-  .chat-message.user {
-    background-color: #e6f7ff;
-    border-radius: 10px;
-    padding: 10px;
-    margin-bottom: 10px;
-  }
-  
-  .chat-message.assistant {
-    background-color: #f0f0f0;
-    border-radius: 10px;
-    padding: 10px;
-    margin-bottom: 10px;
-  }
-  
-  .chat-input {
-    display: flex;
-    padding: 10px;
-    background-color: #f5f5f5;
-  }
-  
-  .chat-input input {
-    flex-grow: 1;
-    border: 1px solid #ccc;
-    padding: 5px;
-    border-radius: 5px;
-  }
-  
-  .chat-input button {
-    margin-left: 10px;
-  }
\ No newline at end of file
+  font-family: 'Arial', sans-serif; /* 使用更常见的字体 */
+  font-size: 14px;
+}
+
+.MyHouse_top {
+  display: flex;
+  align-items: center;
+  padding: 15px; /* 增加顶部栏的内边距 */
+  background-color: #e0e0e0; /* 调整背景色更柔和 */
+}
+
+.back-icon {
+  cursor: pointer;
+  width: 30px; /* 固定图标宽度，使布局更稳定 */
+  height: 30px;
+  color: #333; /* 调整图标颜色 */
+}
+
+.title-text {
+  font-size: 18px; /* 增大标题字体 */
+  margin-left: 15px;
+  color: #333; /* 调整标题颜色 */
+}
+
+.MyHouse_content {
+  width: 100%;
+  height: 760px;
+  border: 1px solid #ccc;
+  margin-top: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 增强阴影效果 */
+}
+
+.chat-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.chat-messages {
+  flex-grow: 1;
+  overflow-y: auto;
+  padding: 15px; /* 增加消息区域内边距 */
+}
+
+.chat-message.user {
+  background-color: #d1e9f7; /* 调整用户消息背景色 */
+  border-radius: 15px; /* 增大圆角 */
+  padding: 15px;
+  margin-bottom: 15px;
+  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1); /* 添加用户消息阴影 */
+}
+
+.chat-message.assistant {
+  background-color: #e8e8e8; /* 调整 AI 消息背景色 */
+  border-radius: 15px;
+  padding: 15px;
+  margin-bottom: 15px;
+  box-shadow: 0 2px 4px rgba(128, 128, 128, 0.1); /* 添加 AI 消息阴影 */
+}
+
+.chat-input {
+  display: flex;
+  padding: 15px; /* 增加输入区域内边距 */
+  background-color: #f0f0f0;
+  position: relative;
+}
+
+.chat-input input {
+  flex-grow: 1;
+  border: 1px solid #999; /* 调整输入框边框颜色 */
+  padding: 8px; /* 增加输入框内边距 */
+  border-radius: 8px; /* 增大输入框圆角 */
+}
+
+.chat-input button {
+  margin-left: 15px;
+  padding: 8px 15px; /* 增加按钮内边距 */
+  border-radius: 8px; /* 增大按钮圆角 */
+  background-color: #007bff;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.chat-message.right {
+  text-align: right;
+}
+
+.chat-message.left {
+  text-align: left;
+}
\ No newline at end of file
diff --git a/src/Pages/My-rental-housing/MyRentalHousing.jsx b/src/Pages/My-rental-housing/MyRentalHousing.jsx
index f656eeef62b3f11e404092f86dfb63b24848c51e..1ac06b8d7a6d404e01379ad61435d8d16fdb4a05 100644
--- a/src/Pages/My-rental-housing/MyRentalHousing.jsx
+++ b/src/Pages/My-rental-housing/MyRentalHousing.jsx
@@ -1,17 +1,29 @@
 import React, { useState } from 'react';
-import { ArrowLeft } from '@nutui/icons-react';
+import { ArrowLeft, Microphone, MicrophoneMute } from '@nutui/icons-react';
 import { Button, Input } from '@nutui/nutui-react';
 import './MyRentalHousing.css';
+import { useEffect } from 'react';
+
+// 判断浏览器是否支持语音识别
+const hasSpeechRecognition = 'webkitSpeechRecognition' in window || 'SpeechRecognition' in window;
 
 export default function MyRentalHousing() {
+  // 定义消息列表的状态
   const [messages, setMessages] = useState([]);
+  // 定义输入框的值的状态
   const [inputValue, setInputValue] = useState('');
+  // 定义是否正在加载的状态
+  const [isLoading, setIsLoading] = useState(false);
+  // 定义麦克风是否禁用状态
+  const [isMicrophoneMuted, setIsMicrophoneMuted] = useState(false);
 
+  // 处理发送消息
   const handleSendMessage = async () => {
     if (inputValue.trim()!== '') {
       const newMessage = { role: 'user', content: inputValue };
       setMessages([...messages, newMessage]);
       setInputValue('');
+      setIsLoading(true);
 
       try {
         const response = await fetch('http://localhost:3000/jwh/chat', {
@@ -24,21 +36,75 @@ export default function MyRentalHousing() {
 
         if (response.ok) {
           const data = await response.json();
-          const aiResponse = { role: 'assistant', content: data.result };
-          setMessages([...messages, newMessage, aiResponse]);
+          const aiResponseContent = data.result;
+          let displayedContent = '';
+          const interval = setInterval(() => {
+            if (displayedContent.length < aiResponseContent.length) {
+              displayedContent = aiResponseContent.slice(0, displayedContent.length + 1);
+              const aiResponse = { role: 'assistant', content: displayedContent };
+              setMessages([...messages, newMessage, aiResponse]);
+            } else {
+              clearInterval(interval);
+              setIsLoading(false);
+            }
+          }, 100);
         } else {
           console.error('Error fetching AI response');
+          setIsLoading(false);
         }
       } catch (error) {
         console.error('Error:', error);
+        setIsLoading(false);
       }
     }
   };
 
+  // 处理输入框的值的变化
   const handleInputChange = (event) => {
     setInputValue(event);
   };
 
+  // 处理麦克风图标点击事件
+  const handleMicrophoneClick = () => {
+    setIsMicrophoneMuted(!isMicrophoneMuted);
+    if (hasSpeechRecognition) {
+      if (!isMicrophoneMuted) {
+        startSpeechRecognition();
+      } else {
+        stopSpeechRecognition();
+      }
+    }
+  };
+
+  // 开始语音识别
+  const startSpeechRecognition = () => {
+    if (hasSpeechRecognition) {
+      const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+      recognition.lang = 'zh-CN';
+      recognition.continuous = false; // 设置为连续识别
+      recognition.interimResults = true; // 设置为返回临时结果
+      recognition.timeout = 10000; // 设置超时时间，单位为毫秒
+      
+
+      recognition.onresult = (event) => { 
+        const transcript = event.results[0][0].transcript;
+        setInputValue(transcript);
+      };
+
+      recognition.start();
+    } else {
+      console.log('语音输入不支持');
+    }
+  };
+
+  // 停止语音识别
+  const stopSpeechRecognition = () => {
+    if (hasSpeechRecognition) {
+      const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
+      recognition.stop();
+    }
+  };
+
   return (
     <div>
       <div className='MyHouse'>
@@ -50,21 +116,35 @@ export default function MyRentalHousing() {
           <div className="chat-container">
             <div className="chat-messages">
               {messages.map((message, index) => (
-                <div key={index} className={`chat-message ${message.role}`}>
-                  <span style={{ fontSize: '14px' }}>{message.content}</span>
+                <div key={index} className={`chat-message ${message.role}`} style={{ fontSize: '14px' }}>
+                  {message.content}
                 </div>
               ))}
+              {isLoading && (
+                <div style={{ textAlign: 'center', marginTop: '10px', color: '#17d56b' }}>回复中...</div>
+              )}
             </div>
             <div className="chat-input">
+              {!isMicrophoneMuted? (
+                <MicrophoneMute
+                  style={{ position: 'absolute', zIndex: '21', top: '23px', right: '102px' }}
+                  onClick={handleMicrophoneClick}
+                />
+              ) : (
+                <Microphone
+                  style={{ position: 'absolute', zIndex: '20', top: '23px', right: '102px' }}
+                  onClick={handleMicrophoneClick}
+                />
+              )}
               <Input
                 placeholder="输入消息..."
                 value={inputValue}
                 onChange={handleInputChange}
-                style={{ borderRadius: '8px', border: '1px solid #ccc', padding: '8px', height:'30px' }}
+                style={{ borderRadius: '8px', border: '1px solid #ccc', padding: '8px', height: '30px' }}
               />
               <Button
                 type="primary"
-                style={{ borderRadius: '8px', backgroundColor: '#007BFF', color: '#fff', padding: '8px 16px', height:'30px' }}
+                style={{ borderRadius: '8px', backgroundColor: '#007BFF', color: '#fff', padding: '8px 16px', height: '30px' }}
                 onClick={handleSendMessage}
               >发送</Button>
             </div>