🐛 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:
@@ -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);
|
||||
// }
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
||||
@@ -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>,
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user