From 0bafdf338121bac32e411e35120b019abb58972d Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Mon, 2 Jun 2025 23:24:50 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(playground):=20ensure=20chat?=
 =?UTF-8?q?=20interface=20refreshes=20when=20resetting=20imported=20messag?=
 =?UTF-8?q?es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

When using the "reset messages simultaneously" option during config import,
the conversation messages in the chat interface were not being properly reset,
while normal conversation resets worked correctly.

**Changes:**
- Modified `handleConfigReset` in `usePlaygroundState.js` to clear messages
  before setting default examples
- Added asynchronous message update to force Chat component re-render
- Ensures immediate UI refresh when resetting imported conversation data

**Root Cause:**
The direct assignment to DEFAULT_MESSAGES didn't trigger a complete
component refresh, causing the chat interface to display stale data.

**Solution:**
```javascript
// Before
setMessage(DEFAULT_MESSAGES);

// After
setMessage([]);
setTimeout(() => {
  setMessage(DEFAULT_MESSAGES);
}, 0);
```

This two-step approach forces the Chat component to unmount and remount
with fresh data, resolving the display inconsistency.
---
 web/src/hooks/usePlaygroundState.js | 9 ++++-----
 web/src/index.js                    | 4 ++--
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/web/src/hooks/usePlaygroundState.js b/web/src/hooks/usePlaygroundState.js
index 47a77208..39e68902 100644
--- a/web/src/hooks/usePlaygroundState.js
+++ b/web/src/hooks/usePlaygroundState.js
@@ -122,7 +122,10 @@ export const usePlaygroundState = () => {
 
     // 只有在明确指定时才重置消息
     if (resetMessages) {
-      setMessage(DEFAULT_MESSAGES);
+      setMessage([]);
+      setTimeout(() => {
+        setMessage(DEFAULT_MESSAGES);
+      }, 0);
     }
   }, []);
 
@@ -132,10 +135,6 @@ export const usePlaygroundState = () => {
       if (saveConfigTimeoutRef.current) {
         clearTimeout(saveConfigTimeoutRef.current);
       }
-      // 移除消息保存定时器的清理
-      // if (saveMessagesTimeoutRef.current) {
-      //   clearTimeout(saveMessagesTimeoutRef.current);
-      // }
     };
   }, []);
 
diff --git a/web/src/index.js b/web/src/index.js
index 978f39d5..1f180bbd 100644
--- a/web/src/index.js
+++ b/web/src/index.js
@@ -15,7 +15,7 @@ import './i18n/i18n.js';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 const { Sider, Content, Header, Footer } = Layout;
 root.render(
-  // <React.StrictMode>
+  <React.StrictMode>
     <StatusProvider>
       <UserProvider>
         <BrowserRouter>
@@ -27,5 +27,5 @@ root.render(
         </BrowserRouter>
       </UserProvider>
     </StatusProvider>
-  // </React.StrictMode>,
+  </React.StrictMode>,
 );