feat: add chatListRightItemContentStyle and chatListLeftItemContentStyle

ant-design · Jun 21, 2024 · edc0f74 · edc0f74
1 parent 7371eb3
commit edc0f74
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/src/components/ChatList/index.tsx b/src/components/ChatList/index.tsx
@@ -25,6 +25,8 @@ export type ChatListProps = {
   assistantMeta?: ProChatMetaData;
   chatListItemStyle?: React.CSSProperties;
   chatListItemContentStyle?: React.CSSProperties;
+  chatListLeftItemContentStyle?: React.CSSProperties;
+  chatListRightItemContentStyle?: React.CSSProperties;
   chatListItemTitleStyle?: React.CSSProperties;
   chatListItemAvatarStyle?: React.CSSProperties;
   chatListItemExtraStyle?: React.CSSProperties;
@@ -43,6 +45,8 @@ const ChatList: React.FC<ChatListProps> = (props) => {
     loading,
     chatListItemContentStyle,
     chatListItemTitleStyle,
+    chatListLeftItemContentStyle,
+    chatListRightItemContentStyle,
     chatListItemAvatarStyle,
     chatListItemAvatarClassName,
     chatListItemContentClassName,
@@ -85,7 +89,12 @@ const ChatList: React.FC<ChatListProps> = (props) => {
             originData={item}
             placement={item.role === 'user' ? 'right' : 'left'}
             time={item.updateAt || item.createAt}
-            chatListItemContentStyle={chatListItemContentStyle}
+            chatListItemContentStyle={{
+              ...chatListItemContentStyle,
+              ...(item.role === 'user'
+                ? chatListRightItemContentStyle
+                : chatListLeftItemContentStyle),
+            }}
             chatListItemTitleStyle={chatListItemTitleStyle}
             chatItemRenderConfig={chatItemRenderConfig}
             chatListItemAvatarStyle={chatListItemAvatarStyle}
@@ -111,7 +120,12 @@ const ChatList: React.FC<ChatListProps> = (props) => {
           originData={loadingMessage}
           placement={loadingMessage.role === 'user' ? 'right' : 'left'}
           time={loadingMessage.updateAt || loadingMessage.createAt}
-          chatListItemContentStyle={chatListItemContentStyle}
+          chatListItemContentStyle={{
+            ...chatListItemContentStyle,
+            ...(loadingMessage.role === 'user'
+              ? chatListRightItemContentStyle
+              : chatListLeftItemContentStyle),
+          }}
           chatListItemTitleStyle={chatListItemTitleStyle}
           chatItemRenderConfig={chatItemRenderConfig}
           chatListItemAvatarStyle={chatListItemAvatarStyle}

diff --git a/src/components/ProChat/index.tsx b/src/components/ProChat/index.tsx
@@ -299,6 +299,8 @@ export interface ProChatProps<
     chatSendAreaStyle?: CSSProperties;
     chatListItem?: CSSProperties;
     chatListItemContent?: CSSProperties;
+    chatListLeftItemContent?: CSSProperties;
+    chatListRightItemContent?: CSSProperties;
     chatListItemTitle?: CSSProperties;
     chatListItemExtra?: CSSProperties;
     chatListItemAvatar?: CSSProperties;
@@ -509,6 +511,8 @@ export function ProChat<
           chatListItemExtraClassName={classNames?.chatListItemExtra}
           chatListItemAvatarClassName={classNames?.chatListItemAvatar}
           chatListItemStyle={styles?.chatListItem}
+          chatListLeftItemContentStyle={styles?.chatListLeftItemContent}
+          chatListRightItemContentStyle={styles?.chatListRightItemContent}
           chatListItemContentStyle={styles?.chatListItemContent}
           chatListItemTitleStyle={styles?.chatListItemTitle}
           chatListItemExtraStyle={styles?.chatListItemExtra}