From 6bb7b2ca5d238da01c37871baa615486805e95b5 Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Fri, 20 Sep 2024 15:38:52 +0800 Subject: [PATCH] feat: improved ui effects and rendering for components - Added smooth all property transition effect to Icon component. - Added hover effect and conditional rendering for Switch Topic Sidebar button on current assistant. - Updated the existing conditional options array to consistently include both topic and settings options. - Improved hover effects on topic list items. --- src/renderer/src/assets/styles/index.scss | 2 +- src/renderer/src/components/app/Sidebar.tsx | 13 ++--- src/renderer/src/i18n/index.ts | 4 +- src/renderer/src/pages/home/Assistants.tsx | 53 ++++++------------- .../src/pages/home/Inputbar/Inputbar.tsx | 9 ++-- src/renderer/src/pages/home/Navbar.tsx | 7 ++- src/renderer/src/pages/home/RightSidebar.tsx | 12 ++++- src/renderer/src/pages/home/Topics.tsx | 35 ++++++++---- 8 files changed, 69 insertions(+), 66 deletions(-) diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss index 7bd50474..bc79844e 100644 --- a/src/renderer/src/assets/styles/index.scss +++ b/src/renderer/src/assets/styles/index.scss @@ -22,7 +22,7 @@ --color-background: #181818; --color-background-soft: var(--color-black-soft); - --color-background-mute: var(--color-black-mute); + --color-background-mute: var(--color-black-soft); --color-primary: #00b96b; --color-primary-soft: #00b96b99; diff --git a/src/renderer/src/components/app/Sidebar.tsx b/src/renderer/src/components/app/Sidebar.tsx index 1c1dd50c..04403570 100644 --- a/src/renderer/src/components/app/Sidebar.tsx +++ b/src/renderer/src/components/app/Sidebar.tsx @@ -48,12 +48,12 @@ const Sidebar: FC = () => { to('/')}> - + to('/agents')}> - + to('/translate')}> @@ -63,7 +63,7 @@ const Sidebar: FC = () => { to('/apps')}> - + to('/files')}> @@ -76,7 +76,7 @@ const Sidebar: FC = () => { to(isLocalAi ? '/settings/assistant' : '/settings/provider')}> - + @@ -128,6 +128,7 @@ const Icon = styled.div` margin-bottom: 5px; transition: background-color 0.2s ease; -webkit-app-region: none; + transition: all 0.2s ease; .iconfont, .anticon { color: var(--color-icon); @@ -139,7 +140,7 @@ const Icon = styled.div` font-size: 17px; } &:hover { - background-color: var(--color-background-mute); + background-color: var(--color-background-soft); cursor: pointer; .iconfont, .anticon { @@ -147,7 +148,7 @@ const Icon = styled.div` } } &.active { - background-color: var(--color-background-soft); + background-color: var(--color-background-mute); .iconfont, .anticon { color: var(--color-icon-white); diff --git a/src/renderer/src/i18n/index.ts b/src/renderer/src/i18n/index.ts index 39c33d90..ee099ce6 100644 --- a/src/renderer/src/i18n/index.ts +++ b/src/renderer/src/i18n/index.ts @@ -66,7 +66,7 @@ const resources = { }, chat: { save: 'Save', - 'default.name': 'Default Assistant', + 'default.name': '⭐️ Default Assistant', 'default.description': "Hello, I'm Default Assistant. You can start chatting with me right away", 'default.topic.name': 'Default Topic', 'topics.title': 'Topics', @@ -344,7 +344,7 @@ const resources = { }, chat: { save: '保存', - 'default.name': '默认助手', + 'default.name': '⭐️ 默认助手', 'default.description': '你好，我是默认助手。你可以立刻开始跟我聊天。', 'default.topic.name': '默认话题', 'topics.title': '话题', diff --git a/src/renderer/src/pages/home/Assistants.tsx b/src/renderer/src/pages/home/Assistants.tsx index 171d2cd0..382e2a57 100644 --- a/src/renderer/src/pages/home/Assistants.tsx +++ b/src/renderer/src/pages/home/Assistants.tsx @@ -186,6 +186,7 @@ const Assistants: FC = ({ list={list} onUpdate={updateAssistants} droppableProps={{ isDropDisabled: !isEmpty(search) }} + style={{ paddingBottom: dragging ? '34px' : 0 }} onDragStart={() => setDragging(true)} onDragEnd={() => setDragging(false)}> {(assistant) => { @@ -194,11 +195,11 @@ const Assistants: FC = ({ onSwitchAssistant(assistant)} className={isCurrent ? 'active' : ''}> {assistant.name || t('chat.default.name')} - EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)}> - - + {isCurrent && ( + EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)}> + + + )} {false && {assistant.topics.length}} @@ -206,10 +207,12 @@ const Assistants: FC = ({ }} {!dragging && ( - - {t('chat.add.assistant.title')} - - + + + + {t('chat.add.assistant.title')} + + )} ) @@ -230,15 +233,18 @@ const AssistantItem = styled.div` justify-content: space-between; padding: 7px 10px; position: relative; - border-radius: 6px; + border-radius: 4px; margin: 0 10px; padding-right: 35px; - cursor: pointer; font-family: Ubuntu; + cursor: pointer; .iconfont { opacity: 0; color: var(--color-text-3); } + &:hover { + background-color: var(--color-background-soft); + } &.active { background-color: var(--color-background-mute); .name { @@ -311,29 +317,4 @@ const CommandKey = styled.div` margin-right: -4px; ` -const AddButton = styled.div` - height: 34px; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - padding: 6px 10px; - margin: 0 10px; - margin-top: -2px; - color: var(--color-text-2); - transition: all 0.2s ease-in-out; - font-size: 13px; - cursor: pointer; - border-radius: 8px; - .anticon { - margin: 0 4px; - } - &:hover { - color: var(--color-text-1); - background-color: var(--color-background-soft); - } -` - -const AddButtonText = styled.span`` - export default Assistants diff --git a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx index 9db06a38..af948f08 100644 --- a/src/renderer/src/pages/home/Inputbar/Inputbar.tsx +++ b/src/renderer/src/pages/home/Inputbar/Inputbar.tsx @@ -1,6 +1,7 @@ import { ClearOutlined, ControlOutlined, + FormOutlined, FullscreenExitOutlined, FullscreenOutlined, PauseCircleOutlined, @@ -256,11 +257,6 @@ const Inputbar: FC = ({ assistant, setActiveTopic }) => { textareaRef.current?.focus() }, [assistant]) - useEffect(() => { - document.addEventListener('paste', onPaste) - return () => document.removeEventListener('paste', onPaste) - }, [onPaste]) - return ( @@ -281,13 +277,14 @@ const Inputbar: FC = ({ assistant, setActiveTopic }) => { onBlur={() => setInputFocus(false)} onInput={onInput} disabled={searching} + onPaste={(e) => onPaste(e.nativeEvent)} onClick={() => searching && dispatch(setSearching(false))} /> - + diff --git a/src/renderer/src/pages/home/Navbar.tsx b/src/renderer/src/pages/home/Navbar.tsx index ee45bcce..e1357523 100644 --- a/src/renderer/src/pages/home/Navbar.tsx +++ b/src/renderer/src/pages/home/Navbar.tsx @@ -1,3 +1,4 @@ +import { FormOutlined } from '@ant-design/icons' import { Navbar, NavbarLeft, NavbarRight } from '@renderer/components/app/Navbar' import { HStack } from '@renderer/components/Layout' import AssistantSettingPopup from '@renderer/components/Popups/AssistantSettingPopup' @@ -8,6 +9,7 @@ import { useAssistant } from '@renderer/hooks/useAssistant' import { useSettings } from '@renderer/hooks/useSettings' import { useShowAssistants, useShowTopics } from '@renderer/hooks/useStore' import { getDefaultTopic, syncAsistantToAgent } from '@renderer/services/assistant' +import { EVENT_NAMES, EventEmitter } from '@renderer/services/event' import { Assistant, Topic } from '@renderer/types' import { Switch } from 'antd' import { FC, useCallback } from 'react' @@ -41,7 +43,8 @@ const HeaderNavbar: FC = ({ activeAssistant, setActiveTopic }) => { addTopic(topic) setActiveTopic(topic) db.topics.add({ id: topic.id, messages: [] }) - window.message.success({ content: t('message.topic.added') }) + window.message.success({ content: t('message.topic.added'), key: 'topic-added' }) + setTimeout(() => EventEmitter.emit(EVENT_NAMES.SHOW_TOPIC_SIDEBAR), 0) }, [addTopic, setActiveTopic, t]) return ( @@ -52,7 +55,7 @@ const HeaderNavbar: FC = ({ activeAssistant, setActiveTopic }) => { - + )} diff --git a/src/renderer/src/pages/home/RightSidebar.tsx b/src/renderer/src/pages/home/RightSidebar.tsx index 9a4d4d57..7290eea3 100644 --- a/src/renderer/src/pages/home/RightSidebar.tsx +++ b/src/renderer/src/pages/home/RightSidebar.tsx @@ -102,8 +102,16 @@ const RightSidebar: FC = ({ activeAssistant, activeTopic, setActiveAssist options={ [ position === 'left' && topicPosition === 'left' ? assistantTab : undefined, - { label: t('common.topics'), value: 'topic', icon: }, - { label: t('settings.title'), value: 'settings', icon: } + { + label: t('common.topics'), + value: 'topic', + icon: + }, + { + label: t('settings.title'), + value: 'settings', + icon: + } ].filter(Boolean) as SegmentedProps['options'] } onChange={(value) => setTab(value as 'topic' | 'settings')} diff --git a/src/renderer/src/pages/home/Topics.tsx b/src/renderer/src/pages/home/Topics.tsx index 61d3bc22..5f590f83 100644 --- a/src/renderer/src/pages/home/Topics.tsx +++ b/src/renderer/src/pages/home/Topics.tsx @@ -136,8 +136,11 @@ const Topics: FC = ({ assistant: _assistant, activeTopic, setActiveTopic return ( onSwitchTopic(topic)}> - {topic.name} - {assistant.topics.length > 1 && ( + + # + {topic.name.replace('`', '')} + + {assistant.topics.length > 1 && isActive && ( { @@ -171,8 +174,7 @@ const Container = styled.div` const TopicListItem = styled.div` padding: 7px 10px; margin: 0 10px; - cursor: pointer; - border-radius: 6px; + border-radius: 4px; font-family: Ubuntu; font-size: 13px; display: flex; @@ -180,10 +182,18 @@ const TopicListItem = styled.div` justify-content: space-between; align-items: center; position: relative; + font-family: Ubuntu; + cursor: pointer; .menu { opacity: 0; color: var(--color-text-3); } + &:hover { + background-color: var(--color-background-soft); + .name { + opacity: 1; + } + } &.active { background-color: var(--color-background-mute); .name { @@ -214,17 +224,20 @@ const MenuButton = styled.div` flex-direction: row; justify-content: center; align-items: center; - width: 30px; - height: 24px; - min-width: 24px; - min-height: 24px; - border-radius: 4px; + min-width: 22px; + min-height: 22px; position: absolute; - right: 10px; - top: 5px; + right: 8px; + top: 6px; .anticon { font-size: 12px; } ` +const TopicHash = styled.span` + font-size: 13px; + color: var(--color-text-3); + margin-right: 2px; +` + export default Topics