From 90a4556d72425a304e0d5ae97a891833c1e62fb7 Mon Sep 17 00:00:00 2001
From: Max <shadow.iqka@qq.com>
Date: Thu, 12 Dec 2024 14:03:13 +0800
Subject: [PATCH] Refactor AIChat component styles and functionality; update
 avatar handling 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.

---
 .../Neo/components/AIChat/index.less          | 49 ++++++++++++-------
 .../Neo/components/AIChat/index.tsx           | 18 ++++---
 2 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/packages/xgen/layouts/components/Neo/components/AIChat/index.less b/packages/xgen/layouts/components/Neo/components/AIChat/index.less
index e60e87aa..4522ab58 100644
--- 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
index 69e65797..6042c090 100644
--- 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>