Refactor layout components to improve sidebar functionality and chat …

…experience; update Container and AIChat components to handle sidebar visibility and resizing, enhance message handling in AIChat, and adjust styles for better responsiveness and user interaction.
YaoApp · Dec 11, 2024 · f976a7f · f976a7f
1 parent 9eda83e
commit f976a7f
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 112 deletions.
diff --git a/packages/xgen/layouts/components/Container/index.tsx b/packages/xgen/layouts/components/Container/index.tsx
@@ -9,9 +9,18 @@ import styles from './index.less'
 import type { IPropsContainer } from '../../types'
 
 const Index = (props: IPropsContainer & { children: React.ReactNode }) => {
-	const sidebar_min_width = 360
-	const sidebar_max_width = 960
-	const { children, menu, visible_menu, show_name, hide_nav, sidebar_visible = false, sidebar_content } = props
+	const {
+		children,
+		menu,
+		visible_menu,
+		show_name,
+		hide_nav,
+		sidebar_visible = false,
+		sidebar_content,
+		sidebar_hidden,
+		sidebar_min_width = 360,
+		sidebar_max_width = 960
+	} = props
 	const [sidebarVisible, setSidebarVisible] = useState(sidebar_visible)
 	const [sidebarWidth, setSidebarWidth] = useState(sidebar_min_width)
 	const [isAnimating, setIsAnimating] = useState(false)
@@ -68,23 +77,25 @@ const Index = (props: IPropsContainer & { children: React.ReactNode }) => {
 				sidebarVisible && styles.with_sidebar,
 				isAnimating && styles.animating
 			])}
-			style={sidebarVisible ? { paddingRight: sidebarWidth } : undefined}
+			style={sidebarVisible && !sidebar_hidden ? { paddingRight: sidebarWidth } : undefined}
 		>
 			<div className='content_wrap w_100 border_box' style={{ paddingBottom: 90 }}>
 				<ErrorCatcher>{children}</ErrorCatcher>
 			</div>
 
-			<div
-				className={clsx(
-					styles.right_sidebar,
-					!sidebarVisible && styles.hidden,
-					isAnimating && styles.animating
-				)}
-				style={{ width: sidebarWidth }}
-			>
-				<div className={styles.resize_handle} onMouseDown={handleResizeStart} />
-				{sidebar_content}
-			</div>
+			{!sidebar_hidden && (
+				<div
+					className={clsx(
+						styles.right_sidebar,
+						!sidebarVisible && styles.hidden,
+						isAnimating && styles.animating
+					)}
+					style={{ width: sidebarWidth }}
+				>
+					<div className={styles.resize_handle} onMouseDown={handleResizeStart} />
+					{sidebar_content}
+				</div>
+			)}
 		</div>
 	)
 }

diff --git a/packages/xgen/layouts/components/Neo/Page/index.less b/packages/xgen/layouts/components/Neo/Page/index.less
@@ -4,8 +4,3 @@
 	display: flex;
 	flex-direction: column;
 }
-
-.chat {
-	flex: 1;
-	overflow: hidden;
-}
diff --git a/packages/xgen/layouts/components/Neo/Page/index.tsx b/packages/xgen/layouts/components/Neo/Page/index.tsx
@@ -1,15 +1,28 @@
 import AIChat from '../components/AIChat'
 import styles from './index.less'
 import type { IPropsNeo } from '../../../types'
+import { useState } from 'react'
+import { mockMessages } from '../Sidebar/mock'
 
 const Index = (props: IPropsNeo) => {
+	const [messages, setMessages] = useState<any[]>(mockMessages)
 	const handleSend = (message: string, files?: any[]) => {
-		console.log('Send message:', message, files)
+		setMessages([...messages, { role: 'user', content: message }])
 	}
 
 	return (
 		<div className={styles.container}>
-			<AIChat onSend={handleSend} className={styles.chat} />
+			<AIChat
+				messages={messages}
+				onSend={handleSend}
+				title='AI Assistant'
+				onNew={() => {
+					/* handle new */
+				}}
+				onClose={() => {
+					/* handle close */
+				}}
+			/>
 		</div>
 	)
 }

diff --git a/packages/xgen/layouts/components/Neo/components/AIChat/index.less b/packages/xgen/layouts/components/Neo/components/AIChat/index.less
@@ -41,7 +41,7 @@
 				align-items: center;
 				justify-content: center;
 				opacity: 0.85;
-				transition: all 0.2s;
+				transition: all 0.2s ease;
 
 				svg {
 					font-size: 15px;
@@ -52,7 +52,12 @@
 				&:hover {
 					color: var(--color_main);
 					opacity: 1;
-					background: rgba(0, 0, 0, 0.04);
+					background: none;
+					transform: scale(1.1);
+				}
+
+				&:active {
+					transform: scale(0.95);
 				}
 			}
 		}
@@ -61,17 +66,43 @@
 	.messages {
 		flex: 1;
 		min-height: 0;
-		overflow-y: auto;
+		overflow-y: overlay;
 		width: 100%;
 		padding: 20px;
 		padding-bottom: 180px;
+		padding-right: 0;
+
+		&:hover {
+			&::-webkit-scrollbar-thumb {
+				background: var(--color_border);
+
+				&:hover {
+					background: var(--color_text_grey);
+				}
+			}
+		}
+
+		&::-webkit-scrollbar {
+			width: 6px;
+			height: 6px;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background: transparent;
+			border-radius: 4px;
+			transition: all 0.2s;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: transparent;
+		}
 
 		.messageWrapper {
 			padding: 0 16px;
+			padding-right: 16px;
 			min-height: 100%;
 			display: flex;
 			flex-direction: column;
-			justify-content: flex-end;
 		}
 
 		.messageItem {
@@ -124,15 +155,6 @@
 				}
 			}
 		}
-
-		&::-webkit-scrollbar {
-			width: 4px;
-		}
-
-		&::-webkit-scrollbar-thumb {
-			background: var(--color_border);
-			border-radius: 2px;
-		}
 	}
 
 	.inputArea {
@@ -143,7 +165,7 @@
 		flex-shrink: 0;
 		max-width: calc(768px - 32px);
 		margin: 0 auto;
-		padding: 16px;
+		padding: 16px 16px 12px;
 		background: rgba(255, 255, 255, 0.98);
 		backdrop-filter: blur(10px);
 		border-radius: var(--radius);
@@ -157,7 +179,7 @@
 			.input {
 				margin-bottom: 0;
 				border-color: var(--color_border);
-				background: rgba(0, 0, 0, 0.02);
+				background: rgba(0, 0, 0, 0.03);
 				color: var(--color_text);
 				border-radius: var(--radius);
 				padding: 8px 12px;
@@ -172,7 +194,7 @@
 				&:focus {
 					border-color: var(--color_main);
 					box-shadow: none;
-					background: rgba(0, 0, 0, 0.03);
+					background: rgba(0, 0, 0, 0.04);
 				}
 			}
 
@@ -198,41 +220,48 @@
 		}
 
 		.statusBar {
-			width: 100%;
-			margin-top: 8px;
 			display: flex;
-			align-items: center;
 			justify-content: space-between;
-			padding: 0 4px;
+			align-items: center;
+			padding: 2px 12px;
+			margin-top: 8px;
+			border-top: 1px solid var(--color-border);
 
 			.leftTools {
 				display: flex;
 				gap: 4px;
 
-				:global(.ant-btn) {
-					color: var(--color_text);
-					padding: 4px;
-					height: 24px;
-					width: 24px;
-					opacity: 0.6;
+				button {
+					padding: 2px;
+					height: 20px;
+					width: 20px;
+					color: var(--color-text-quaternary);
+					transition: all 0.2s ease;
+					display: flex;
+					align-items: center;
+					justify-content: center;
 
 					&:hover {
-						opacity: 0.9;
 						color: var(--color_main);
+						transform: scale(1.1);
+					}
+
+					&:active {
+						transform: scale(0.95);
 					}
 				}
 			}
 
 			.rightInfo {
 				font-size: 12px;
-				color: var(--color_text_grey);
-				opacity: 0.6;
+				color: var(--color-text-quaternary);
+				opacity: 0.45;
 			}
 		}
 	}
 }
 
-// 添加暗色主题样式
+// 添加色主题样式
 [data-theme='dark'] {
 	.header {
 		background: rgba(47, 47, 52, 0.4);
@@ -248,7 +277,7 @@
 				color: rgba(255, 255, 255, 0.95);
 
 				&:hover {
-					background: rgba(255, 255, 255, 0.04);
+					background: none;
 					color: var(--color_main);
 				}
 			}
@@ -289,87 +318,55 @@
 		}
 
 		&::-webkit-scrollbar-thumb {
-			background: var(--color_border);
+			background: transparent;
 		}
-	}
-
-	.inputArea {
-		background: rgba(47, 47, 52, 0.45);
-		backdrop-filter: blur(12px);
-		border-color: rgba(64, 64, 70, 0.12);
-
-		.fileList {
-			.fileItem {
-				background: rgba(0, 0, 0, 0.25);
-				border-color: rgba(255, 255, 255, 0.04);
-				color: rgba(255, 255, 255, 0.95);
 
-				.fileName {
-					color: rgba(255, 255, 255, 0.95);
-
-					svg {
-						color: rgba(255, 255, 255, 0.6);
-					}
-				}
+		&:hover {
+			&::-webkit-scrollbar-thumb {
+				background: rgba(255, 255, 255, 0.08);
 
-				:global(.ant-btn) {
-					color: rgba(255, 255, 255, 0.6);
-					&:hover {
-						color: var(--color_danger);
-					}
+				&:hover {
+					background: rgba(255, 255, 255, 0.15);
 				}
 			}
 		}
+	}
 
-		.toolbar {
-			:global {
-				.ant-btn {
-					color: rgba(255, 255, 255, 0.95);
-					&:hover {
-						color: var(--color_main);
-					}
-				}
-			}
-		}
+	.inputArea {
+		background: rgba(45, 45, 50, 0.55);
+		backdrop-filter: blur(12px);
+		border: none;
 
 		.input {
-			background: rgba(0, 0, 0, 0.25);
-			border-color: rgba(255, 255, 255, 0.08);
+			background: rgba(60, 60, 70, 0.45);
+			border: none;
 			color: rgba(255, 255, 255, 0.95);
 
 			&::placeholder {
 				color: rgba(255, 255, 255, 0.35);
 			}
 
 			&:focus {
-				background: rgba(0, 0, 0, 0.35);
-				border-color: var(--color_main);
-			}
-		}
-
-		.sendBtn {
-			background: var(--color_main);
-			color: white;
-
-			&:hover {
-				opacity: 0.9;
+				background: rgba(75, 75, 85, 0.65);
+				border: none;
 			}
 		}
 
 		.statusBar {
+			border-top: none;
+
 			.leftTools {
-				:global(.ant-btn) {
-					color: rgba(255, 255, 255, 0.6);
+				button {
+					color: rgba(255, 255, 255, 0.5);
 
 					&:hover {
 						color: var(--color_main);
-						opacity: 1;
 					}
 				}
 			}
 
 			.rightInfo {
-				color: rgba(255, 255, 255, 0.4);
+				color: rgba(255, 255, 255, 0.35);
 			}
 		}
 	}