🐛 fix: resolve duplicate toast notifications when toggling message roles

- 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

@@ -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 {

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)}