Enhance AIChat component with history functionality and improved chat…

… management. Introduced state management for displaying chat history, added handlers for history selection and closure, and updated button configurations to support new history interactions. Refactored useAIChat hook to include new chat and delete functionalities, improving overall chat management and user experience.

packages/xgen/layouts/components/Neo/components/AIChat/Header/index.tsx

@@ -1,7 +1,9 @@
+import { useState, useRef } from 'react'
 import { Button, Tooltip } from 'antd'
 import Icon from '@/widgets/Icon'
 import styles from './index.less'
 import { getLocale } from '@umijs/max'
+import History from '../History'
 
 interface HeaderProps {
 	title: string
@@ -20,6 +22,9 @@ const Header = ({
 	onFloat,
 	buttons = ['new', 'history', 'float', 'close']
 }: HeaderProps) => {
+	const [showHistory, setShowHistory] = useState(false)
+	const triggerRef = useRef<HTMLButtonElement>(null)
+
 	const locale = getLocale()
 	const is_cn = locale === 'zh-CN'
 
@@ -50,24 +55,50 @@ const Header = ({
 		}
 	}
 
+	// Add history handlers
+	const handleHistoryClick = () => {
+		setShowHistory(true)
+		onHistory?.()
+	}
+
+	const handleHistoryClose = () => {
+		setShowHistory(false)
+	}
+
+	const handleHistorySelect = (chatId: string) => {
+		// Handle chat selection
+		setShowHistory(false)
+	}
+
 	return (
 		<div className={styles.header}>
 			<div className={styles.title}>{title}</div>
 			<div className={styles.actions}>
 				{buttons.map((key) => {
-					const config = buttonConfig[key]
+					const config = {
+						...buttonConfig[key],
+						onClick: key === 'history' ? handleHistoryClick : buttonConfig[key].onClick
+					}
 					return (
 						<Tooltip key={key} title={config.title} placement='bottom'>
 							<Button
 								type='text'
 								icon={<Icon name={config.icon} size={config.size} />}
 								className={styles.actionBtn}
 								onClick={config.onClick}
+								ref={key === 'history' ? triggerRef : undefined}
 							/>
 						</Tooltip>
 					)
 				})}
 			</div>
+
+			<History
+				visible={showHistory}
+				onClose={handleHistoryClose}
+				onSelect={handleHistorySelect}
+				triggerRef={triggerRef}
+			/>
 		</div>
 	)
 }

packages/xgen/layouts/components/Neo/components/AIChat/History/index.less

@@ -0,0 +1,219 @@
+.history {
+	display: none;
+	position: fixed;
+	background: #fff;
+	border-radius: 8px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+	width: 300px;
+	height: 400px;
+	z-index: 1050;
+	flex-direction: column;
+
+	&.visible {
+		display: flex;
+	}
+
+	.header {
+		padding: 8px;
+		border-bottom: 1px solid var(--color_border);
+		display: flex;
+		gap: 8px;
+		align-items: center;
+
+		.search {
+			flex: 1;
+
+			:global {
+				.xgen-input {
+					height: var(--base_height) !important;
+					line-height: calc(var(--base_height) - 2px) !important;
+					border: 1px solid var(--color_border) !important;
+					border-radius: var(--radius) !important;
+					padding: 4px 11px !important;
+					transition: all 0.3s !important;
+
+					&:hover,
+					&:focus {
+						border-color: var(--color_main) !important;
+					}
+				}
+			}
+		}
+
+		.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);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: var(--color_text_grey);
+
+			&:hover {
+				color: var(--color_danger);
+			}
+		}
+	}
+
+	.list {
+		flex: 1;
+		overflow-y: auto;
+		padding: 8px;
+		min-height: 0;
+	}
+
+	.group {
+		margin-bottom: 4px;
+
+		.groupLabel {
+			font-size: 11px;
+			color: rgba(0, 0, 0, 0.45);
+			margin-bottom: 2px;
+			padding: 0 4px;
+		}
+	}
+
+	.chatItem {
+		padding: 0px 6px;
+		border-radius: 6px;
+		cursor: pointer;
+		transition: background-color 0.3s;
+		display: flex;
+		align-items: center;
+		font-size: 13px;
+		height: 32px;
+
+		&:hover {
+			background-color: rgba(0, 0, 0, 0.04);
+
+			.actions {
+				opacity: 1;
+			}
+		}
+
+		.titleText {
+			flex: 1;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			margin-right: 4px;
+			font-size: 13px;
+		}
+	}
+
+	.loadingMore {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 4px;
+		color: rgba(0, 0, 0, 0.45);
+		font-size: 13px;
+
+		.spinner {
+			margin-right: 8px;
+			animation: spin 1s linear infinite;
+		}
+	}
+}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+[data-theme='dark'] {
+	.history {
+		background: var(--color_bg_nav);
+		border-color: var(--color_border);
+	}
+}
+
+.editWrapper {
+	display: flex;
+	align-items: center;
+	gap: 4px;
+	width: 100%;
+
+	.ant-input {
+		flex: 1;
+		border: none !important;
+		padding: 0;
+		background: transparent;
+
+		&:focus {
+			box-shadow: none;
+		}
+	}
+
+	.editActions {
+		display: flex;
+		gap: 2px;
+		margin-left: auto;
+
+		button {
+			padding: 0;
+			width: 24px;
+			height: 24px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #666;
+			transition: all 0.2s ease;
+			background: transparent !important;
+
+			&:hover {
+				color: #1677ff;
+				transform: scale(1.1);
+			}
+
+			svg {
+				font-size: 14px;
+				transition: all 0.2s ease;
+			}
+		}
+	}
+}
+
+.titleText {
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.actions {
+	display: flex;
+	gap: 2px;
+	opacity: 0;
+	transition: opacity 0.2s;
+	margin-left: auto;
+
+	.actionBtn {
+		padding: 0;
+		width: 24px;
+		height: 24px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #666;
+		transition: all 0.2s ease;
+		background: transparent !important;
+
+		&:hover {
+			color: #1677ff;
+			transform: scale(1.1);
+		}
+
+		svg {
+			font-size: 14px;
+			transition: all 0.2s ease;
+		}
+	}
+}