feat: fix the retained old status bug during chat switch (casibase#926)

web/src/ChatBox.js

@@ -51,6 +51,27 @@ class ChatBox extends React.Component {
     this.addCursorPositionListener();
   }
 
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    // clear old status when the name(chat) changes
+    if (prevProps.name !== this.props.name) {
+      this.clearOldStatus();
+    }
+  }
+
+  clearOldStatus() {
+    this.recognition?.abort();
+    this.synth.cancel();
+    this.setState({
+      value: "",
+      files: [],
+      messages: this.props.messages,
+      currentReadingMessage: null,
+      isReading: false,
+      isVoiceInput: false,
+    });
+    this.cursorPosition = undefined;
+  }
+
   addCursorPositionListener() {
     const inputElement = document.querySelector(".cs-message-input__content-editor");
     const updateCursorPosition = () => {
@@ -63,7 +84,7 @@ class ChatBox extends React.Component {
         this.cursorPosition = preSelectionRange.toString().length;
         if (this.state.isVoiceInput) {
           this.recognition.abort();
-          this.recognition.onresult = this.insertVoiceMessage.call(this);
+          // this.recognition.onresult = this.insertVoiceMessage.call(this);
         }
       }
     };

web/src/ChatPage.js

@@ -531,7 +531,7 @@ class ChatPage extends BaseListPage {
               </div>
             )
           }
-          <ChatBox disableInput={this.state.disableInput} messages={this.state.messages} sendMessage={(text, fileName, regenerate = false) => {this.sendMessage(text, fileName, false, regenerate);}} account={this.props.account} dots={this.state.dots} />
+          <ChatBox disableInput={this.state.disableInput} messages={this.state.messages} sendMessage={(text, fileName, regenerate = false) => {this.sendMessage(text, fileName, false, regenerate);}} account={this.props.account} dots={this.state.dots} name={this.state.chat?.name} />
         </div>
       </div>
     );