🐛 fix(playground): ensure chat interface refreshes when resetting imported messages

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.
This commit is contained in:
Apple\Apple
2025-06-02 23:24:50 +08:00
parent 18c2e5cd98
commit 0bafdf3381
2 changed files with 6 additions and 7 deletions

View File

@@ -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);
// }
};
}, []);

View File

@@ -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>,
);