From c459cec357c89ede476e4dc8474e41d77ca9e2ee Mon Sep 17 00:00:00 2001
From: lin onetwo <linonetwo012@gmail.com>
Date: Tue, 12 Aug 2025 18:28:09 +0800
Subject: [PATCH] fix: warning in test

---
 .../ChatTabContent/components/MessageBubble.tsx      | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/pages/ChatTabContent/components/MessageBubble.tsx b/src/pages/ChatTabContent/components/MessageBubble.tsx
index 92f3e36b..f5d14133 100644
--- a/src/pages/ChatTabContent/components/MessageBubble.tsx
+++ b/src/pages/ChatTabContent/components/MessageBubble.tsx
@@ -9,7 +9,9 @@ import { isMessageExpiredForAI } from '../../../services/agentInstance/utilities
 import { useAgentChatStore } from '../../Agent/store/agentChatStore/index';
 import { MessageRenderer } from './MessageRenderer';
 
-const BubbleContainer = styled(Box)<{ $user: boolean; $expired?: boolean }>`
+const BubbleContainer = styled(Box, {
+  shouldForwardProp: (property) => property !== '$user' && property !== '$expired',
+})<{ $user: boolean; $expired?: boolean }>`
   display: flex;
   gap: 12px;
   max-width: 80%;
@@ -18,14 +20,18 @@ const BubbleContainer = styled(Box)<{ $user: boolean; $expired?: boolean }>`
   transition: opacity 0.3s ease-in-out;
 `;
 
-const MessageAvatar = styled(Avatar)<{ $user: boolean; $expired?: boolean }>`
+const MessageAvatar = styled(Avatar, {
+  shouldForwardProp: (property) => property !== '$user' && property !== '$expired',
+})<{ $user: boolean; $expired?: boolean }>`
   background-color: ${props => props.$user ? props.theme.palette.primary.main : props.theme.palette.secondary.main};
   color: ${props => props.$user ? props.theme.palette.primary.contrastText : props.theme.palette.secondary.contrastText};
   opacity: ${props => props.$expired ? 0.7 : 1};
   transition: opacity 0.3s ease-in-out;
 `;
 
-const MessageContent = styled(Box)<{ $user: boolean; $streaming?: boolean; $expired?: boolean }>`
+const MessageContent = styled(Box, {
+  shouldForwardProp: (property) => property !== '$user' && property !== '$streaming' && property !== '$expired',
+})<{ $user: boolean; $streaming?: boolean; $expired?: boolean }>`
   background-color: ${props => props.$user ? props.theme.palette.primary.light : props.theme.palette.background.paper};
   color: ${props => props.$user ? props.theme.palette.primary.contrastText : props.theme.palette.text.primary};
   padding: 12px 16px;