✨ feat(playground): add role toggle feature for AI messages

- Add role toggle button in MessageActions component for assistant/system messages
- Implement handleRoleToggle function in Playground component to switch between assistant and system roles
- Add visual distinction for system messages with orange badge indicator
- Update roleInfo configuration to use consistent avatars for assistant and system roles
- Add proper tooltip texts and visual feedback for role switching
- Ensure role toggle is disabled during message generation to prevent conflicts

This feature allows users to easily switch message roles between assistant and system,
providing better control over conversation flow and message categorization in the playground interface.

web/src/pages/Playground/Playground.js

@@ -62,8 +62,7 @@ const Playground = () => {
     },
     system: {
       name: 'System',
-      avatar:
-        'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/other/logo.png',
+      avatar: getLogo(),
     },
   };
 
@@ -1025,6 +1024,22 @@ const Playground = () => {
     });
   }, [setMessage, t]);
 
+  const handleRoleToggle = useCallback((targetMessage) => {
+    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;
+      });
+    });
+  }, [setMessage, t]);
+
   const onStopGenerator = useCallback(() => {
     if (sseSourceRef.current) {
       sseSourceRef.current.close();
@@ -1127,10 +1142,11 @@ const Playground = () => {
         onMessageReset={handleMessageReset}
         onMessageCopy={handleMessageCopy}
         onMessageDelete={handleMessageDelete}
+        onRoleToggle={handleRoleToggle}
         isAnyMessageGenerating={isAnyMessageGenerating}
       />
     );
-  }, [handleMessageReset, handleMessageCopy, handleMessageDelete, styleState, message]);
+  }, [handleMessageReset, handleMessageCopy, handleMessageDelete, styleState, message, handleRoleToggle]);
 
   return (
     <div className="h-full bg-gray-50">
@@ -1189,6 +1205,7 @@ const Playground = () => {
                 onMessageCopy={handleMessageCopy}
                 onMessageReset={handleMessageReset}
                 onMessageDelete={handleMessageDelete}
+                onRoleToggle={handleRoleToggle}
                 onStopGenerator={onStopGenerator}
                 onClearMessages={() => setMessage([])}
                 onToggleDebugPanel={() => setShowDebugPanel(!showDebugPanel)}