Refactor AIChat component styles and functionality; replace loading i…

…con with a new animated container, update input handling to focus on the textarea when loading completes, and enhance disabled state styles for better user feedback. This update aims to improve visual consistency and user experience during chat interactions.
YaoApp · Dec 12, 2024 · 49cca73 · 49cca73
1 parent b216540
commit 49cca73
Show file tree

Hide file tree

Showing 2 changed files with 40 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
@@ -160,10 +160,12 @@
 					gap: 4px;
 				}
 
-				.loadingIcon {
-					.spinning {
-						animation: spin 1s linear infinite;
-					}
+				.loadingContainer {
+					color: #ffb800;
+					animation: breathing 1.5s ease-in-out infinite;
+					display: flex;
+					align-items: center;
+					justify-content: center;
 				}
 			}
 
@@ -251,7 +253,8 @@
 				resize: none;
 
 				&:disabled {
-					background: transparent;
+					background-color: var(--color_border_light);
+					cursor: not-allowed;
 				}
 
 				&::placeholder {
@@ -465,8 +468,9 @@
 					border-color: var(--color_border);
 					color: rgba(255, 255, 255, 0.85);
 
-					&::placeholder {
-						color: rgba(255, 255, 255, 0.25);
+					&:disabled {
+						background-color: var(--color_border_light);
+						cursor: not-allowed;
 					}
 
 					&:hover {
@@ -499,18 +503,14 @@
 	}
 }
 
-@keyframes spin {
-	from {
-		transform: rotate(0deg);
+@keyframes breathing {
+	0% {
+		opacity: 0.4;
 	}
-	to {
-		transform: rotate(360deg);
+	50% {
+		opacity: 1;
 	}
-}
-
-.input {
-	&:disabled {
-		background-color: var(--color-bg-subtle);
-		cursor: not-allowed;
+	100% {
+		opacity: 0.4;
 	}
 }
diff --git a/packages/xgen/layouts/components/Neo/components/AIChat/index.tsx b/packages/xgen/layouts/components/Neo/components/AIChat/index.tsx
@@ -158,6 +158,14 @@ const AIChat = (props: AIChatProps) => {
 		}
 	}, [])
 
+	const inputRef = useRef<HTMLTextAreaElement>(null)
+
+	useEffect(() => {
+		if (!loading && inputRef.current) {
+			inputRef.current.focus()
+		}
+	}, [loading])
+
 	return (
 		<div className={clsx(styles.aiChat, className)}>
 			{/* Header */}
@@ -224,12 +232,16 @@ const AIChat = (props: AIChatProps) => {
 									{currentPage}
 								</div>
 								{loading && (
-									<div className={styles.loadingIcon}>
-										<Icon
-											name='icon-loader'
-											size={12}
-											className={styles.spinning}
-										/>
+									<div className={styles.loadingContainer}>
+										<svg
+											width='8'
+											height='8'
+											viewBox='0 0 8 8'
+											fill='currentColor'
+											xmlns='http://www.w3.org/2000/svg'
+										>
+											<circle cx='4' cy='4' r='4' />
+										</svg>
 									</div>
 								)}
 							</div>
@@ -278,6 +290,7 @@ const AIChat = (props: AIChatProps) => {
 
 				<div className={styles.inputWrapper}>
 					<TextArea
+						ref={inputRef}
 						autoSize={{ minRows: 4, maxRows: 16 }}
 						placeholder={loading ? 'Please wait for response...' : 'Type your message here...'}
 						className={styles.input}
@@ -336,7 +349,9 @@ const AIChat = (props: AIChatProps) => {
 							? is_cn
 								? '正在响应中...'
 								: 'Waiting for response...'
-							: 'Press Enter to send'}
+							: is_cn
+							? '换行：Shift + ⏎，发送：⏎'
+							: 'Line break: Shift + ⏎, Send: ⏎'}
 					</div>
 				</div>
 			</div>