From 2dc8810890833253ec7978999fe0359ba36322f3 Mon Sep 17 00:00:00 2001 From: kangfenmao Date: Mon, 22 Jul 2024 21:57:39 +0800 Subject: [PATCH] feat: add show or hide assistant sidebar --- src/renderer/src/assets/styles/index.scss | 2 +- src/renderer/src/hooks/useStore.ts | 14 +++++- src/renderer/src/pages/home/HomePage.tsx | 49 +++++++++++-------- .../src/pages/home/components/Navigation.tsx | 30 ++++++++++-- src/renderer/src/store/index.ts | 2 +- src/renderer/src/store/migrate.ts | 10 ++++ src/renderer/src/store/settings.ts | 7 ++- src/renderer/src/utils/index.ts | 5 ++ 8 files changed, 88 insertions(+), 31 deletions(-) diff --git a/src/renderer/src/assets/styles/index.scss b/src/renderer/src/assets/styles/index.scss index 4e7dddded7..1ca1235c29 100644 --- a/src/renderer/src/assets/styles/index.scss +++ b/src/renderer/src/assets/styles/index.scss @@ -12,7 +12,7 @@ --color-white-mute: #f2f2f2; --color-black: #1b1b1f; - --color-black-soft: #303030; + --color-black-soft: #262626; --color-black-mute: #363636; --color-gray-1: #515c67; diff --git a/src/renderer/src/hooks/useStore.ts b/src/renderer/src/hooks/useStore.ts index 81fba55582..5a3934fe48 100644 --- a/src/renderer/src/hooks/useStore.ts +++ b/src/renderer/src/hooks/useStore.ts @@ -1,5 +1,5 @@ import { useAppDispatch, useAppSelector } from '@renderer/store' -import { toggleRightSidebar } from '@renderer/store/settings' +import { toggleRightSidebar, toggleShowAssistants } from '@renderer/store/settings' export function useShowRightSidebar() { const showRightSidebar = useAppSelector((state) => state.settings.showRightSidebar) @@ -7,6 +7,16 @@ export function useShowRightSidebar() { return { showRightSidebar, - setShowRightSidebar: () => dispatch(toggleRightSidebar()) + toggleRightSidebar: () => dispatch(toggleRightSidebar()) + } +} + +export function useShowAssistants() { + const showAssistants = useAppSelector((state) => state.settings.showAssistants) + const dispatch = useAppDispatch() + + return { + showAssistants, + toggleShowAssistants: () => dispatch(toggleShowAssistants()) } } diff --git a/src/renderer/src/pages/home/HomePage.tsx b/src/renderer/src/pages/home/HomePage.tsx index abfb4cc7fa..1672f88cfb 100644 --- a/src/renderer/src/pages/home/HomePage.tsx +++ b/src/renderer/src/pages/home/HomePage.tsx @@ -5,15 +5,17 @@ import styled from 'styled-components' import Chat from './components/Chat' import Assistants from './components/Assistants' import { uuid } from '@renderer/utils' -import { useShowRightSidebar } from '@renderer/hooks/useStore' +import { useShowAssistants, useShowRightSidebar } from '@renderer/hooks/useStore' import { Tooltip } from 'antd' import Navigation from './components/Navigation' import { useTranslation } from 'react-i18next' +import { PlusSquareOutlined } from '@ant-design/icons' const HomePage: FC = () => { const { assistants, addAssistant } = useAssistants() const [activeAssistant, setActiveAssistant] = useState(assistants[0]) - const { showRightSidebar, setShowRightSidebar } = useShowRightSidebar() + const { showRightSidebar, toggleRightSidebar } = useShowRightSidebar() + const { showAssistants, toggleShowAssistants } = useShowAssistants() const { defaultAssistant } = useDefaultAssistant() const { t } = useTranslation() @@ -26,29 +28,36 @@ const HomePage: FC = () => { return ( - - - - - + {showAssistants && ( + + + + + + + + + )} - + - + {showAssistants && ( + + )} @@ -59,33 +68,31 @@ const Container = styled.div` display: flex; flex: 1; flex-direction: column; - height: calc(100vh - var(--navbar-height)); ` const ContentContainer = styled.div` display: flex; flex: 1; flex-direction: row; - height: 100%; ` -const NewButton = styled.div` +export const NewButton = styled.div` -webkit-app-region: none; border-radius: 4px; - width: 34px; - height: 34px; + width: 28px; + height: 28px; display: flex; flex-direction: row; justify-content: center; align-items: center; transition: all 0.2s ease-in-out; color: var(--color-icon); - .iconfont { - font-size: 22px; + .anticon { + font-size: 18px; } .icon-showsidebarhoriz, .icon-hidesidebarhoriz { - font-size: 18px; + font-size: 16px; } &:hover { background-color: var(--color-background-soft); diff --git a/src/renderer/src/pages/home/components/Navigation.tsx b/src/renderer/src/pages/home/components/Navigation.tsx index 885d0aceaf..cd8a87a610 100644 --- a/src/renderer/src/pages/home/components/Navigation.tsx +++ b/src/renderer/src/pages/home/components/Navigation.tsx @@ -7,6 +7,9 @@ import { Button, Dropdown, MenuProps } from 'antd' import { FC } from 'react' import { useTranslation } from 'react-i18next' import styled from 'styled-components' +import { NewButton } from '../HomePage' +import { useShowAssistants } from '@renderer/hooks/useStore' +import { capitalizeFirstLetter } from '@renderer/utils' interface Props { activeAssistant: Assistant @@ -17,6 +20,7 @@ const Navigation: FC = ({ activeAssistant }) => { const { model, setModel } = useAssistant(activeAssistant.id) const { providers } = useProviders() const { t } = useTranslation() + const { showAssistants, toggleShowAssistants } = useShowAssistants() const items: MenuProps['items'] = providers .filter((p) => p.models.length > 0) @@ -33,12 +37,17 @@ const Navigation: FC = ({ activeAssistant }) => { })) return ( - - {assistant?.name} + + {!showAssistants && ( + + + + )} + {assistant?.name} - + + {model ? capitalizeFirstLetter(model.name) : t('button.select_model')} + ) @@ -49,4 +58,15 @@ const DropdownMenu = styled(Dropdown)` margin-left: 10px; ` +const AssistantName = styled.span` + font-weight: bold; + margin-left: 5px; +` + +const DropdownButton = styled(Button)` + font-size: 10px; + border-radius: 15px; + padding: 0 8px; +` + export default Navigation diff --git a/src/renderer/src/store/index.ts b/src/renderer/src/store/index.ts index a51676364c..d6db383dc6 100644 --- a/src/renderer/src/store/index.ts +++ b/src/renderer/src/store/index.ts @@ -19,7 +19,7 @@ const persistedReducer = persistReducer( { key: 'cherry-studio', storage, - version: 13, + version: 14, blacklist: ['runtime'], migrate }, diff --git a/src/renderer/src/store/migrate.ts b/src/renderer/src/store/migrate.ts index aa15b19f38..ec9ab36b9b 100644 --- a/src/renderer/src/store/migrate.ts +++ b/src/renderer/src/store/migrate.ts @@ -243,6 +243,16 @@ const migrate = createMigrate({ } } } + }, + // @ts-ignore store type is unknown + '14': (state: RootState) => { + return { + ...state, + settings: { + ...state.settings, + showAssistants: true + } + } } }) diff --git a/src/renderer/src/store/settings.ts b/src/renderer/src/store/settings.ts index 7641be1150..2465482591 100644 --- a/src/renderer/src/store/settings.ts +++ b/src/renderer/src/store/settings.ts @@ -4,12 +4,14 @@ export type SendMessageShortcut = 'Enter' | 'Shift+Enter' export interface SettingsState { showRightSidebar: boolean + showAssistants: boolean sendMessageShortcut: SendMessageShortcut language: string } const initialState: SettingsState = { showRightSidebar: true, + showAssistants: true, sendMessageShortcut: 'Enter', language: navigator.language } @@ -21,6 +23,9 @@ const settingsSlice = createSlice({ toggleRightSidebar: (state) => { state.showRightSidebar = !state.showRightSidebar }, + toggleShowAssistants: (state) => { + state.showAssistants = !state.showAssistants + }, setSendMessageShortcut: (state, action: PayloadAction) => { state.sendMessageShortcut = action.payload }, @@ -30,6 +35,6 @@ const settingsSlice = createSlice({ } }) -export const { toggleRightSidebar, setSendMessageShortcut, setLanguage } = settingsSlice.actions +export const { toggleRightSidebar, toggleShowAssistants, setSendMessageShortcut, setLanguage } = settingsSlice.actions export default settingsSlice.reducer diff --git a/src/renderer/src/utils/index.ts b/src/renderer/src/utils/index.ts index 12106c3b0c..43f67b5ce9 100644 --- a/src/renderer/src/utils/index.ts +++ b/src/renderer/src/utils/index.ts @@ -198,3 +198,8 @@ export function estimateHistoryTokenCount(assistant: Assistant, msgs: Message[]) return all.usedTokens - 7 } + +// 首字母大写 +export const capitalizeFirstLetter = (str: string) => { + return str.charAt(0).toUpperCase() + str.slice(1) +}