Refactor AIChat assistant section with dedicated Assistant component

YaoApp · Feb 9, 2025 · 939d335 · 939d335
1 parent 57e4f38
commit 939d335
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 69 deletions.
diff --git a/packages/xgen/layouts/components/Neo/components/AIChat/Assistant/index.less b/packages/xgen/layouts/components/Neo/components/AIChat/Assistant/index.less
@@ -0,0 +1,59 @@
+.assistantInfo {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding-right: 12px;
+	border-right: 1px solid var(--color_border_light);
+	position: relative;
+
+	.avatarWrapper {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+
+		.avatar {
+			width: 20px;
+			height: 20px;
+			border-radius: 50%;
+			object-fit: cover;
+			transform: scale(1.2);
+			background-color: var(--color_bg_hover);
+			transform-origin: center;
+		}
+
+		.assistantName {
+			font-size: 12px;
+			color: var(--color_text);
+			font-weight: 500;
+		}
+	}
+
+	.deleteBtn {
+		cursor: pointer;
+		color: var(--color_text_grey);
+		transition: all 0.2s ease;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 16px;
+		height: 16px;
+		border-radius: 50%;
+
+		&.disabled {
+			cursor: not-allowed;
+			opacity: 0.5;
+			pointer-events: none;
+		}
+
+		&:hover {
+			background: var(--color_danger_bg);
+			color: var(--color_danger);
+		}
+	}
+
+	&:hover {
+		.deleteBtn {
+			background: var(--color_border_light);
+		}
+	}
+}
diff --git a/packages/xgen/layouts/components/Neo/components/AIChat/Assistant/index.tsx b/packages/xgen/layouts/components/Neo/components/AIChat/Assistant/index.tsx
@@ -0,0 +1,42 @@
+import Icon from '@/widgets/Icon'
+import styles from './index.less'
+import clsx from 'clsx'
+
+interface AssistantProps {
+	assistant: {
+		assistant_id: string
+		assistant_name: string
+		assistant_avatar?: string
+		canDelete?: boolean
+	}
+	loading?: boolean
+	onDelete?: () => void
+}
+
+const Assistant = ({ assistant, loading, onDelete }: AssistantProps) => {
+	const { assistant_name, assistant_avatar } = assistant
+
+	return (
+		<div className={styles.assistantInfo}>
+			<div className={styles.avatarWrapper}>
+				<img
+					src={assistant_avatar || `https://api.dicebear.com/7.x/bottts/svg?seed=${assistant_name}`}
+					alt='Assistant'
+					className={styles.avatar}
+				/>
+				<div className={styles.assistantName}>{assistant_name}</div>
+			</div>
+			{assistant.canDelete ||
+				(assistant.canDelete === undefined && (
+					<div
+						className={clsx(styles.deleteBtn, { [styles.disabled]: loading })}
+						onClick={!loading ? onDelete : undefined}
+					>
+						<Icon name='material-close' size={12} />
+					</div>
+				))}
+		</div>
+	)
+}
+
+export default Assistant
diff --git a/packages/xgen/layouts/components/Neo/components/AIChat/index.less b/packages/xgen/layouts/components/Neo/components/AIChat/index.less
@@ -157,61 +157,6 @@
 				flex: 1;
 				gap: 12px;
 
-				/* Assistant Info */
-				.assistantInfo {
-					display: flex;
-					align-items: center;
-					gap: 8px;
-					padding-right: 12px;
-					border-right: 1px solid var(--color_border_light);
-					position: relative;
-
-					.avatarWrapper {
-						display: flex;
-						align-items: center;
-						gap: 8px;
-
-						.avatar {
-							width: 20px;
-							height: 20px;
-							border-radius: 50%;
-							object-fit: cover;
-							transform: scale(1.2);
-							background-color: var(--color_bg_hover);
-							transform-origin: center;
-						}
-
-						.assistantName {
-							font-size: 12px;
-							color: var(--color_text);
-							font-weight: 500;
-						}
-					}
-
-					.deleteBtn {
-						cursor: pointer;
-						color: var(--color_text_grey);
-						transition: all 0.2s ease;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						width: 16px;
-						height: 16px;
-						border-radius: 50%;
-
-						&:hover {
-							background: var(--color_danger_bg);
-							color: var(--color_danger);
-						}
-					}
-
-					&:hover {
-						.deleteBtn {
-							background: var(--color_border_light);
-						}
-					}
-				}
-
 				/* Page Info */
 				.pageInfo {
 					display: flex;

diff --git a/packages/xgen/layouts/components/Neo/components/AIChat/index.tsx b/packages/xgen/layouts/components/Neo/components/AIChat/index.tsx
@@ -15,6 +15,7 @@ import ChatItem from '../ChatItem'
 import { isValidUrl } from '@/utils'
 import DefaultHeader from './Header'
 import MentionTextArea from './MentionTextArea'
+import Assistant from './Assistant'
 
 interface AIChatProps {
 	messages?: App.ChatInfo[]
@@ -479,6 +480,14 @@ const AIChat = (props: AIChatProps) => {
 		}
 	}
 
+	// Add mock data for assistant
+	const mockAssistant = {
+		assistant_id: assistant_id || 'default-neo',
+		assistant_name: 'Neo Assistant',
+		assistant_avatar: 'https://api.dicebear.com/7.x/bottts/svg?seed=Neo'
+		// canDelete: false
+	}
+
 	return (
 		<div className={clsx(styles.aiChat, className)}>
 			{header || (
@@ -560,20 +569,7 @@ const AIChat = (props: AIChatProps) => {
 					<div className={styles.currentPage}>
 						{/* Assistant Info Section */}
 						<div className={styles.leftSection}>
-							<div className={styles.assistantInfo}>
-								<div className={styles.avatarWrapper}>
-									<img
-										src='https://api.dicebear.com/7.x/bottts/svg?seed=Neo'
-										alt='Assistant'
-										className={styles.avatar}
-									/>
-									<div className={styles.assistantName}>Neo Assistant</div>
-								</div>
-								<div className={styles.deleteBtn}>
-									<Icon name='material-close' size={12} />
-								</div>
-							</div>
-
+							<Assistant assistant={mockAssistant} loading={loading} onDelete={() => {}} />
 							{/* Current Page Info */}
 							{showCurrentPage && currentPage && (
 								<div className={styles.pageInfo}>