From aa49d2a3602be8f68d46e568e1465300bc171daf Mon Sep 17 00:00:00 2001
From: "Apple\\Apple" <zeraturing@foxmail.com>
Date: Sun, 1 Jun 2025 17:19:45 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix:=20Role=20switching=20not=20?=
 =?UTF-8?q?updating=20UI=20immediately=20in=20playground?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix role toggle functionality where switching message roles (assistant/system)
did not update the UI immediately and required page refresh to see changes.

Changes:
- Add message.role comparison in OptimizedMessageContent memo function
- Add message.role comparison in OptimizedMessageActions memo function

The issue was caused by React.memo optimization that wasn't tracking role
changes, preventing re-renders when only the message role property changed.
Now role switches are reflected immediately in both message content display
and action button states.

Fixes: Role switching requires page refresh to display correctly
---
 web/src/components/playground/OptimizedComponents.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/src/components/playground/OptimizedComponents.js b/web/src/components/playground/OptimizedComponents.js
index 16c2feab..baf39273 100644
--- a/web/src/components/playground/OptimizedComponents.js
+++ b/web/src/components/playground/OptimizedComponents.js
@@ -11,6 +11,7 @@ export const OptimizedMessageContent = React.memo(MessageContent, (prevProps, ne
     prevProps.message.id === nextProps.message.id &&
     prevProps.message.content === nextProps.message.content &&
     prevProps.message.status === nextProps.message.status &&
+    prevProps.message.role === nextProps.message.role &&
     prevProps.message.isReasoningExpanded === nextProps.message.isReasoningExpanded &&
     prevProps.isEditing === nextProps.isEditing &&
     prevProps.editValue === nextProps.editValue &&
@@ -22,6 +23,7 @@ export const OptimizedMessageContent = React.memo(MessageContent, (prevProps, ne
 export const OptimizedMessageActions = React.memo(MessageActions, (prevProps, nextProps) => {
   return (
     prevProps.message.id === nextProps.message.id &&
+    prevProps.message.role === nextProps.message.role &&
     prevProps.isAnyMessageGenerating === nextProps.isAnyMessageGenerating &&
     prevProps.isEditing === nextProps.isEditing
   );