Refactor AIChat component styles and improve theme consistency; repla…

…ce hardcoded colors with CSS variables for better theming support. Update input and header styles for enhanced visual coherence and user interaction. Remove deprecated code and streamline chat history management, ensuring a more robust and maintainable chat experience.
YaoApp · Dec 17, 2024 · ca09798 · ca09798
1 parent 6c3d431
commit ca09798
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 205 deletions.
diff --git a/packages/xgen/layouts/components/Neo/components/AIChat/Header/index.less b/packages/xgen/layouts/components/Neo/components/AIChat/Header/index.less
@@ -3,7 +3,7 @@
 	align-items: center;
 	justify-content: space-between;
 	padding: 12px 16px;
-	border-bottom: 1px solid #f0f0f0;
+	border-bottom: 1px solid var(--color_border_light);
 
 	.title {
 		font-size: 16px;
@@ -41,10 +41,10 @@
 
 [data-theme='dark'] {
 	.header {
-		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+		border-bottom: 1px solid var(--color_border_light);
 
 		.title {
-			color: var(--color_title);
+			color: var(--color_text);
 		}
 
 		.actions {

diff --git a/packages/xgen/layouts/components/Neo/components/AIChat/History/index.less b/packages/xgen/layouts/components/Neo/components/AIChat/History/index.less
@@ -1,9 +1,9 @@
 .history {
 	display: none;
 	position: fixed;
-	background: #fff;
+	background: var(--color_bg_menu);
 	border-radius: 8px;
-	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	box-shadow: var(--shadow);
 	width: 300px;
 	height: 400px;
 	z-index: 1050;
@@ -14,14 +14,14 @@
 	}
 
 	.header {
-		padding: 8px;
-		border-bottom: 1px solid var(--color_border);
 		display: flex;
-		gap: 8px;
 		align-items: center;
+		padding: 12px;
+		border-bottom: 1px solid var(--color_border_light);
 
 		.search {
 			flex: 1;
+			margin-right: 8px;
 
 			:global {
 				.xgen-input {
@@ -40,20 +40,25 @@
 			}
 		}
 
-		.clearBtn,
 		.closeBtn {
-			padding: 4px;
-			min-height: var(--base_height) !important;
-			height: var(--base_height) !important;
-			max-height: var(--base_height) !important;
-			width: var(--base_height);
+			padding: 0;
+			width: 24px;
+			height: 24px;
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			color: var(--color_text_grey);
+			color: var(--color_text);
+			transition: all 0.2s ease;
+			background: transparent !important;
 
 			&:hover {
-				color: var(--color_danger);
+				color: var(--color_main);
+				transform: scale(1.1);
+			}
+
+			svg {
+				font-size: 14px;
+				transition: all 0.2s ease;
 			}
 		}
 	}
@@ -70,7 +75,7 @@
 
 		.groupLabel {
 			font-size: 11px;
-			color: rgba(0, 0, 0, 0.45);
+			color: var(--color_text_grey);
 			margin-bottom: 2px;
 			padding: 0 4px;
 		}
@@ -87,7 +92,7 @@
 		height: 32px;
 
 		&:hover {
-			background-color: rgba(0, 0, 0, 0.04);
+			background-color: var(--color_border_soft);
 
 			.actions {
 				opacity: 1;
@@ -101,6 +106,7 @@
 			white-space: nowrap;
 			margin-right: 4px;
 			font-size: 13px;
+			color: var(--color_text);
 		}
 	}
 
@@ -109,7 +115,7 @@
 		align-items: center;
 		justify-content: center;
 		padding: 4px;
-		color: rgba(0, 0, 0, 0.45);
+		color: var(--color_text_grey);
 		font-size: 13px;
 
 		.spinner {
@@ -128,13 +134,6 @@
 	}
 }
 
-[data-theme='dark'] {
-	.history {
-		background: var(--color_bg_nav);
-		border-color: var(--color_border);
-	}
-}
-
 .editWrapper {
 	display: flex;
 	align-items: center;
@@ -146,6 +145,7 @@
 		border: none !important;
 		padding: 0;
 		background: transparent;
+		color: var(--color_text);
 
 		&:focus {
 			box-shadow: none;
@@ -164,13 +164,12 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			color: #666;
+			color: var(--color_text_grey);
 			transition: all 0.2s ease;
 			background: transparent !important;
 
 			&:hover {
-				color: #1677ff;
-				transform: scale(1.1);
+				color: var(--color_main);
 			}
 
 			svg {
@@ -202,12 +201,12 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		color: #666;
+		color: var(--color_text_grey);
 		transition: all 0.2s ease;
 		background: transparent !important;
 
 		&:hover {
-			color: #1677ff;
+			color: var(--color_main);
 			transform: scale(1.1);
 		}
 

diff --git a/packages/xgen/layouts/components/Neo/components/AIChat/History/index.tsx b/packages/xgen/layouts/components/Neo/components/AIChat/History/index.tsx
@@ -4,27 +4,8 @@ import Icon from '@/widgets/Icon'
 import styles from './index.less'
 import { getLocale } from '@umijs/max'
 import { useMemoizedFn } from 'ahooks'
-import { App } from '@/types'
+import useAIChat, { ChatGroup, ChatResponse } from '../../../hooks/useAIChat'
 import clsx from 'clsx'
-import useAIChat from '../../../hooks/useAIChat'
-
-interface ChatItem {
-	chat_id: string
-	title: string | null
-}
-
-interface ChatGroup {
-	label: string
-	chats: ChatItem[]
-}
-
-interface ChatResponse {
-	groups: ChatGroup[]
-	page: number
-	pagesize: number
-	total: number
-	last_page: number
-}
 
 interface HistoryProps {
 	visible: boolean
@@ -50,7 +31,7 @@ const History = ({ visible, onClose, onSelect, triggerRef }: HistoryProps) => {
 	const is_cn = locale === 'zh-CN'
 
 	// Get methods from useAIChat hook
-	const { getChats, deleteChat, updateChat, deleteAllChats } = useAIChat({})
+	const { getChats, deleteChat, updateChat } = useAIChat({})
 
 	// Load chats
 	const loadChats = useMemoizedFn(async (search?: string, pageNum: number = 1) => {
@@ -111,25 +92,6 @@ const History = ({ visible, onClose, onSelect, triggerRef }: HistoryProps) => {
 		}
 	})
 
-	// Handle delete all chats
-	const handleDeleteAll = useMemoizedFn(() => {
-		Modal.confirm({
-			title: is_cn ? '确认删除' : 'Confirm Delete',
-			content: is_cn ? '确定要删除所有会话吗？' : 'Are you sure you want to delete all chats?',
-			okText: is_cn ? '确定' : 'OK',
-			cancelText: is_cn ? '取消' : 'Cancel',
-			onOk: async () => {
-				try {
-					await deleteAllChats()
-					message.success(is_cn ? '清空成功' : 'Cleared successfully')
-					loadChats()
-				} catch (error) {
-					message.error(is_cn ? '清空失败' : 'Failed to clear')
-				}
-			}
-		})
-	})
-
 	useEffect(() => {
 		if (visible) {
 			loadChats()
@@ -179,12 +141,6 @@ const History = ({ visible, onClose, onSelect, triggerRef }: HistoryProps) => {
 					onChange={(e) => handleSearch(e.target.value)}
 					className={styles.search}
 				/>
-				<Button
-					type='text'
-					className={styles.clearBtn}
-					onClick={handleDeleteAll}
-					icon={<Icon name='material-delete' size={16} />}
-				/>
 				<Button
 					type='text'
 					className={styles.closeBtn}
@@ -231,6 +187,19 @@ const History = ({ visible, onClose, onSelect, triggerRef }: HistoryProps) => {
 														})
 													}
 													onClick={(e) => e.stopPropagation()}
+													onPressEnter={(e) => {
+														e.stopPropagation()
+														handleUpdateTitle(
+															chat.chat_id,
+															editingChat.tempTitle
+														)
+													}}
+													onKeyDown={(e) => {
+														if (e.key === 'Escape') {
+															e.stopPropagation()
+															setEditingChat(null)
+														}
+													}}
 													aria-label={
 														is_cn
 															? '编辑会话标题'