From 26ef7aae383dff5d1b4bd8ce490f5286e8d41d1f Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Sun, 1 Jun 2025 17:44:36 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20resolve=20duplicate=20toa?=
 =?UTF-8?q?st=20notifications=20when=20toggling=20message=20roles?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove duplicate onRoleToggle prop passing to ChatArea component in Playground/index.js
- Move Toast notification outside setMessage callback in useMessageActions hook
- Prevent multiple event bindings that caused repeated role switch notifications
- Add early return validation for role toggle eligibility

This fixes the issue where users would see multiple success toasts when switching
between Assistant and System roles in the chat interface.

Files changed:
- web/src/pages/Playground/index.js
- web/src/hooks/useMessageActions.js
---
 web/src/hooks/useMessageActions.js | 16 +++++++++++-----
 web/src/pages/Playground/index.js  |  1 -
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/src/hooks/useMessageActions.js b/web/src/hooks/useMessageActions.js
index 2cabff73..aa43f8a5 100644
--- a/web/src/hooks/useMessageActions.js
+++ b/web/src/hooks/useMessageActions.js
@@ -163,20 +163,26 @@ export const useMessageActions = (message, setMessage, onMessageSend) => {
 
   // 切换角色
   const handleRoleToggle = useCallback((targetMessage) => {
+    if (!(targetMessage.role === 'assistant' || targetMessage.role === 'system')) {
+      return;
+    }
+
+    const newRole = targetMessage.role === 'assistant' ? 'system' : 'assistant';
+
     setMessage(prevMessages => {
       return prevMessages.map(msg => {
         if (msg.id === targetMessage.id &&
           (msg.role === 'assistant' || msg.role === 'system')) {
-          const newRole = msg.role === 'assistant' ? 'system' : 'assistant';
-          Toast.success({
-            content: t(`已切换为${newRole === 'system' ? 'System' : 'Assistant'}角色`),
-            duration: 2,
-          });
           return { ...msg, role: newRole };
         }
         return msg;
       });
     });
+
+    Toast.success({
+      content: t(`已切换为${newRole === 'system' ? 'System' : 'Assistant'}角色`),
+      duration: 2,
+    });
   }, [setMessage, t]);
 
   return {
diff --git a/web/src/pages/Playground/index.js b/web/src/pages/Playground/index.js
index a76291ed..2a37d2b7 100644
--- a/web/src/pages/Playground/index.js
+++ b/web/src/pages/Playground/index.js
@@ -413,7 +413,6 @@ const Playground = () => {
                 onMessageCopy={messageActions.handleMessageCopy}
                 onMessageReset={messageActions.handleMessageReset}
                 onMessageDelete={messageActions.handleMessageDelete}
-                onRoleToggle={messageActions.handleRoleToggle}
                 onStopGenerator={onStopGenerator}
                 onClearMessages={() => setMessage([])}
                 onToggleDebugPanel={() => setShowDebugPanel(!showDebugPanel)}