Enhance Chat Menu functionality and styling

- Introduced a quick menu in the GlobalModel to provide users with immediate access to key features like Chat, AI Assistants, and Settings. - Updated the Menu component to dynamically render quick menu items, improving navigation efficiency. - Refined menu item styling in the LESS file for better visual feedback on hover and active states. - Simplified the state management for active menu items, enhancing user interaction and experience. These changes contribute to a more intuitive and responsive Chat interface, improving overall usability.
YaoApp · Dec 23, 2024 · 2782610 · 2782610
1 parent 6459cfb
commit 2782610
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 52 deletions.
diff --git a/packages/xgen/context/app/model.ts b/packages/xgen/context/app/model.ts
@@ -19,7 +19,7 @@ export default class GlobalModel {
 	locale_messages = {} as LocaleMessages
 	app_info = {} as App.Info
 	user = (local.user || {}) as App.User
-	menus = (local.menus || { items: [], setting: {} }) as App.Menus
+	menus = (local.menus || { items: [], setting: {}, quick: [] }) as App.Menus
 	menu = (local.menu || []) as Array<App.Menu>
 
 	in_setting = (local.in_setting || false) as boolean
@@ -86,6 +86,33 @@ export default class GlobalModel {
 			})
 		}
 
+		// Default quick menu
+		if (!menus.quick || menus.quick.length === 0) {
+			menus.quick = [
+				{
+					id: 0,
+					key: '/chat',
+					name: 'Chat with Assistant',
+					path: '/chat',
+					icon: 'material-sms'
+				},
+				{
+					id: 1,
+					key: '/assistants',
+					name: 'AI Assistants',
+					path: '/assistants',
+					icon: 'material-robot_2'
+				},
+				{
+					id: 2,
+					key: '/setting',
+					name: 'Settings',
+					path: '/setting',
+					icon: 'material-settings'
+				}
+			]
+		}
+
 		setKeys(menus.items, '', in_setting || false)
 		setKeys(menus.setting, '', true)
 		this.menus = menus

diff --git a/packages/xgen/layouts/wrappers/Chat/Menu.tsx b/packages/xgen/layouts/wrappers/Chat/Menu.tsx
@@ -1,46 +1,13 @@
-import { FC, useState, useEffect } from 'react'
+import { FC, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import { container } from 'tsyringe'
 import { GlobalModel } from '@/context/app'
 import { Tooltip } from 'antd'
-import { MessageOutlined, SettingOutlined, DashboardOutlined, RobotOutlined } from '@ant-design/icons'
+import { useNavigate } from 'react-router-dom'
 import clsx from 'clsx'
 import './menu.less'
-
-interface MenuItem {
-	id: number
-	name: string
-	icon: React.ReactNode
-	path?: string
-}
-
-// Test data for menu items
-const TEST_MENU_ITEMS: MenuItem[] = [
-	{
-		id: 1,
-		name: 'Chat with Assistant',
-		icon: <MessageOutlined />,
-		path: '/chat'
-	},
-	{
-		id: 2,
-		name: 'AI Assistants',
-		icon: <RobotOutlined />,
-		path: '/apps'
-	},
-	{
-		id: 3,
-		name: 'Admin Panel',
-		icon: <DashboardOutlined />,
-		path: '/settings'
-	},
-	{
-		id: 4,
-		name: 'Settings',
-		icon: <SettingOutlined />,
-		path: '/settings'
-	}
-]
+import { Icon } from '@/widgets'
+import { App } from '@/types'
 
 interface Props {
 	sidebarVisible?: boolean
@@ -51,12 +18,27 @@ interface Props {
 
 const Menu: FC<Props> = ({ sidebarVisible, setSidebarVisible, openSidebar }) => {
 	const global = container.resolve(GlobalModel)
-	const [currentNav, setCurrentNav] = useState(1)
+	const [currentNav, setCurrentNav] = useState(0)
+	const quick_items = global.menus?.quick || []
+	const navigate = useNavigate()
+	if (quick_items.length == 0) {
+		return null
+	}
+
+	const NavigateTo = (path: string) => {
+		navigate(path)
+		setSidebarVisible?.(true)
+	}
 
-	const handleNavChange = (id: number) => {
-		const menuItem = TEST_MENU_ITEMS.find((item) => item.id === id)
-		id === 3 && openSidebar?.('/id=3', menuItem?.name)
-		id === 4 && setSidebarVisible?.(true)
+	const handleNavChange = (menu: App.Menu) => {
+		// const menuItem = TEST_MENU_ITEMS.find((item) => item.id === id)
+		// id === 3 && openSidebar?.('/id=3', menuItem?.name)
+		// id === 4 && setSidebarVisible?.(true)
+		if (menu.path === '/chat') {
+			setCurrentNav(0)
+			return
+		}
+		NavigateTo(menu.path)
 	}
 
 	return (
@@ -69,13 +51,28 @@ const Menu: FC<Props> = ({ sidebarVisible, setSidebarVisible, openSidebar }) =>
 				</Tooltip>
 
 				<div className='menu-items'>
-					{TEST_MENU_ITEMS.map((menu) => (
-						<Tooltip key={menu.id} title={menu.name} placement='right'>
+					{quick_items.map((menu, index) => (
+						<Tooltip key={index} title={menu.name} placement='right'>
 							<div
-								className={clsx('menu-item', menu.id === currentNav && 'active')}
-								onClick={() => handleNavChange(menu.id)}
+								className={clsx('menu-item', index === currentNav && 'active')}
+								onClick={() => handleNavChange(menu)}
 							>
-								<span className='menu-icon'>{menu.icon}</span>
+								<span className='menu-icon'>
+									{menu.icon && (
+										<Icon
+											name={
+												typeof menu.icon === 'string'
+													? menu.icon
+													: menu.icon.name
+											}
+											size={
+												typeof menu.icon === 'string'
+													? 24
+													: menu.icon.size
+											}
+										/>
+									)}
+								</span>
 							</div>
 						</Tooltip>
 					))}

diff --git a/packages/xgen/layouts/wrappers/Chat/menu.less b/packages/xgen/layouts/wrappers/Chat/menu.less
@@ -71,20 +71,34 @@
 		cursor: pointer;
 		border-radius: var(--radius);
 		color: var(--color_text);
-		transition: all 0.3s ease;
+		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 		margin: 0 auto;
 
 		&:hover {
 			background: var(--color_bg_hover);
+			i {
+				color: var(--color_main) !important;
+				transform: scale(1.1);
+			}
 		}
 
 		&.active {
 			color: var(--color_main);
 			background: var(--color_bg_hover);
+			i {
+				color: var(--color_main) !important;
+			}
 		}
 
 		.menu-icon {
-			font-size: 20px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			i {
+				color: var(--color_text_grey);
+				transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+			}
 		}
 	}
 }
diff --git a/packages/xgen/types/app.ts b/packages/xgen/types/app.ts
@@ -233,8 +233,9 @@ export declare namespace App {
 	}
 
 	interface Menus {
-		items: Array<App.Menu>
-		setting: Array<App.Menu>
+		items: Array<App.Menu> // Main menu
+		setting: Array<App.Menu> // Setting menu
+		quick: Array<App.Menu> // Quick menu
 	}
 
 	interface ChatAttachment {