Refactor AIChat component styles and functionality; update avatar han…

…dling to support dynamic bot avatars, enhance message layout with improved padding and shadow effects, and adjust color variables for consistency. This update aims to improve user experience and visual appeal in the chat interface.
YaoApp · Dec 12, 2024 · 90a4556 · 90a4556
1 parent 2d4e577
commit 90a4556
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 25 deletions.
diff --git a/packages/xgen/layouts/components/Neo/components/AIChat/index.less b/packages/xgen/layouts/components/Neo/components/AIChat/index.less
@@ -47,13 +47,12 @@
 	.messages {
 		flex: 1;
 		overflow-y: auto;
-		padding: 16px 12px;
+		padding: 16px 16px;
 
 		.messageWrapper {
 			display: flex;
 			flex-direction: column;
 			gap: 16px;
-			max-width: 800px;
 			margin: 0 auto;
 			width: 100%;
 		}
@@ -68,44 +67,54 @@
 				flex-direction: row-reverse;
 
 				.avatar {
-					flex: 0 0 24px;
-					background: #1677ff;
-					color: #fff;
+					display: none;
 				}
 
 				.content {
-					background: #1677ff;
+					background: var(--color_main);
 					color: #fff;
 				}
 			}
 
 			&.assistant {
 				margin-right: auto;
+				max-width: 95%;
 
 				.avatar {
 					flex: 0 0 24px;
-					background: #f5f5f5;
+					background: var(--color_bg_nav);
 					color: #666;
 				}
 
 				.content {
-					background: #f5f5f5;
+					background: var(--color_bg_nav);
 				}
 			}
 
 			.avatar {
-				width: 24px;
-				height: 24px;
-				min-width: 24px;
+				width: 32px;
+				height: 32px;
+				min-width: 32px;
 				border-radius: 50%;
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				overflow: hidden;
+				background: var(--color_bg_nav);
 
-				svg {
-					width: 16px;
-					height: 16px;
+				img {
+					width: 100%;
+					height: 100%;
+					object-fit: contain;
+					padding: 4px;
+				}
+
+				:global {
+					.logo {
+						width: 100%;
+						height: 100%;
+						padding: 4px;
+					}
 				}
 			}
 
@@ -239,6 +248,8 @@
 		.inputWrapper {
 			margin-top: 0;
 			position: relative;
+			box-shadow: 0 0 0 1px var(--color_border_soft);
+			border-radius: 8px;
 
 			.input {
 				padding: 8px;
@@ -340,23 +351,23 @@
 			.messageItem {
 				&.user {
 					.avatar {
-						background: #1677ff;
+						background: var(--color_main);
 					}
 
 					.content {
-						background: #1677ff;
+						background: var(--color_main);
 						color: #fff;
 					}
 				}
 
 				&.assistant {
 					.avatar {
-						background: rgba(255, 255, 255, 0.08);
+						background: var(--color_bg_nav);
 						color: rgba(255, 255, 255, 0.65);
 					}
 
 					.content {
-						background: rgba(255, 255, 255, 0.08);
+						background: var(--color_bg_nav);
 						color: rgba(255, 255, 255, 0.85);
 					}
 				}
@@ -408,6 +419,8 @@
 			}
 
 			.inputWrapper {
+				box-shadow: 0 0 0 1px var(--color_border_soft);
+
 				.input {
 					background: rgba(255, 255, 255, 0.04);
 					border-color: rgba(255, 255, 255, 0.08);

diff --git a/packages/xgen/layouts/components/Neo/components/AIChat/index.tsx b/packages/xgen/layouts/components/Neo/components/AIChat/index.tsx
@@ -1,10 +1,11 @@
 import { Input, Button, Upload } from 'antd'
 import clsx from 'clsx'
-import { UploadSimple, Sparkle, Robot, User } from 'phosphor-react'
+import { UploadSimple, Sparkle } from 'phosphor-react'
 import { useState, useEffect, useRef } from 'react'
 import Icon from '@/widgets/Icon'
 import styles from './index.less'
 import { getLocale } from '@umijs/max'
+import Logo from '@/layouts/components/ColumnOne/Menu/Logo'
 
 const { TextArea } = Input
 
@@ -31,6 +32,7 @@ interface AIChatProps {
 	showCurrentPage?: boolean
 	contextFiles?: ContextFile[]
 	onRemoveContextFile?: (file: ContextFile) => void
+	botAvatar?: string
 }
 
 const AIChat = ({
@@ -43,7 +45,8 @@ const AIChat = ({
 	currentPage,
 	showCurrentPage = true,
 	contextFiles = [],
-	onRemoveContextFile
+	onRemoveContextFile,
+	botAvatar
 }: AIChatProps) => {
 	const [selectedFiles, setSelectedFiles] = useState<any[]>([])
 	const [inputValue, setInputValue] = useState('')
@@ -115,11 +118,12 @@ const AIChat = ({
 							})}
 						>
 							<div className={styles.avatar}>
-								{msg.role === 'user' ? (
-									<User size={16} weight='fill' />
-								) : (
-									<Robot size={16} weight='fill' />
-								)}
+								{msg.role === 'assistant' &&
+									(botAvatar ? (
+										<img src={botAvatar} alt='bot' />
+									) : (
+										<Logo logo={undefined} />
+									))}
 							</div>
 							<div className={styles.content}>{msg.content}</div>
 						</div>