From 2782610e5abcb2f7ad5bb25ca68f2ad232b22ff3 Mon Sep 17 00:00:00 2001 From: Max Date: Mon, 23 Dec 2024 15:49:06 +0800 Subject: [PATCH] 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. --- packages/xgen/context/app/model.ts | 29 +++++- packages/xgen/layouts/wrappers/Chat/Menu.tsx | 91 +++++++++---------- packages/xgen/layouts/wrappers/Chat/menu.less | 18 +++- packages/xgen/types/app.ts | 5 +- 4 files changed, 91 insertions(+), 52 deletions(-) diff --git a/packages/xgen/context/app/model.ts b/packages/xgen/context/app/model.ts index 2b43ebab..a6134b5e 100644 --- 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 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 index a8cd8c25..04b71321 100644 --- 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: , - path: '/chat' - }, - { - id: 2, - name: 'AI Assistants', - icon: , - path: '/apps' - }, - { - id: 3, - name: 'Admin Panel', - icon: , - path: '/settings' - }, - { - id: 4, - name: 'Settings', - icon: , - path: '/settings' - } -] +import { Icon } from '@/widgets' +import { App } from '@/types' interface Props { sidebarVisible?: boolean @@ -51,12 +18,27 @@ interface Props { const Menu: FC = ({ 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 = ({ sidebarVisible, setSidebarVisible, openSidebar }) =>
- {TEST_MENU_ITEMS.map((menu) => ( - + {quick_items.map((menu, index) => ( +
handleNavChange(menu.id)} + className={clsx('menu-item', index === currentNav && 'active')} + onClick={() => handleNavChange(menu)} > - {menu.icon} + + {menu.icon && ( + + )} +
))} diff --git a/packages/xgen/layouts/wrappers/Chat/menu.less b/packages/xgen/layouts/wrappers/Chat/menu.less index 1ae0baae..032024c2 100644 --- 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 index 2d1fbae9..505dea7e 100644 --- a/packages/xgen/types/app.ts +++ b/packages/xgen/types/app.ts @@ -233,8 +233,9 @@ export declare namespace App { } interface Menus { - items: Array - setting: Array + items: Array // Main menu + setting: Array // Setting menu + quick: Array // Quick menu } interface ChatAttachment {