From ca0979817a394263ab81f570c3f523d75a7219c1 Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 17 Dec 2024 16:01:10 +0800 Subject: [PATCH] Refactor AIChat component styles and improve theme consistency; replace 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. --- .../Neo/components/AIChat/Header/index.less | 6 +- .../Neo/components/AIChat/History/index.less | 55 ++++---- .../Neo/components/AIChat/History/index.tsx | 61 +++------ .../Neo/components/AIChat/index.less | 126 ++---------------- .../layouts/components/Neo/hooks/useAIChat.ts | 32 ++--- 5 files changed, 75 insertions(+), 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 index 1760f367..993d33f1 100644 --- 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 index a310b34d..69f63216 100644 --- 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 index c3587ce1..6aec15c0 100644 --- 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} /> -