diff --git a/src/assets/icons/ArrowBottom.tsx b/src/assets/icons/ArrowBottom.tsx new file mode 100644 index 0000000..d895f3b --- /dev/null +++ b/src/assets/icons/ArrowBottom.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +const ArrowBottom = (props: React.SVGProps) => { + return ( + + + + ); +}; + +export default ArrowBottom; diff --git a/src/components/Menu/MenuOptions/CollapseOptions.tsx b/src/components/Menu/MenuOptions/CollapseOptions.tsx new file mode 100644 index 0000000..5dce716 --- /dev/null +++ b/src/components/Menu/MenuOptions/CollapseOptions.tsx @@ -0,0 +1,22 @@ +import ArrowBottom from '@icon/ArrowBottom'; +import useStore from '@store/store'; + +const CollapseOptions = () => { + const setHideMenuOptions = useStore((state) => state.setHideMenuOptions); + const hideMenuOptions = useStore((state) => state.hideMenuOptions); + + return ( +
setHideMenuOptions(!hideMenuOptions)} + > + +
+ ); +}; + +export default CollapseOptions; diff --git a/src/components/Menu/MenuOptions/Me.tsx b/src/components/Menu/MenuOptions/Me.tsx index fdc0911..656d2f0 100644 --- a/src/components/Menu/MenuOptions/Me.tsx +++ b/src/components/Menu/MenuOptions/Me.tsx @@ -8,7 +8,7 @@ const Me = () => { return ( diff --git a/src/components/Menu/MenuOptions/MenuOptions.tsx b/src/components/Menu/MenuOptions/MenuOptions.tsx index ee3d1f7..aa76092 100644 --- a/src/components/Menu/MenuOptions/MenuOptions.tsx +++ b/src/components/Menu/MenuOptions/MenuOptions.tsx @@ -1,22 +1,31 @@ import React from 'react'; +import useStore from '@store/store'; -import Account from './Account'; import ClearConversation from './ClearConversation'; import Api from './Api'; import Me from './Me'; import AboutMenu from '@components/AboutMenu'; import ImportExportChat from '@components/ImportExportChat'; import SettingsMenu from '@components/SettingsMenu'; +import CollapseOptions from './CollapseOptions'; const MenuOptions = () => { + const hideMenuOptions = useStore((state) => state.hideMenuOptions); return ( <> - - - - - - + +
+ + + + + + +
); }; diff --git a/src/store/config-slice.ts b/src/store/config-slice.ts index 30418a8..557f8a6 100644 --- a/src/store/config-slice.ts +++ b/src/store/config-slice.ts @@ -7,6 +7,7 @@ export interface ConfigSlice { openConfig: boolean; theme: Theme; autoTitle: boolean; + hideMenuOptions: boolean; defaultChatConfig: ConfigInterface; defaultSystemMessage: string; setOpenConfig: (openConfig: boolean) => void; @@ -14,11 +15,13 @@ export interface ConfigSlice { setAutoTitle: (autoTitle: boolean) => void; setDefaultChatConfig: (defaultChatConfig: ConfigInterface) => void; setDefaultSystemMessage: (defaultSystemMessage: string) => void; + setHideMenuOptions: (hideMenuOptions: boolean) => void; } export const createConfigSlice: StoreSlice = (set, get) => ({ openConfig: false, theme: 'dark', + hideMenuOptions: false, autoTitle: false, defaultChatConfig: _defaultChatConfig, defaultSystemMessage: _defaultSystemMessage, @@ -52,4 +55,10 @@ export const createConfigSlice: StoreSlice = (set, get) => ({ defaultSystemMessage: defaultSystemMessage, })); }, + setHideMenuOptions: (hideMenuOptions: boolean) => { + set((prev: ConfigSlice) => ({ + ...prev, + hideMenuOptions: hideMenuOptions, + })); + }, }); diff --git a/src/store/store.ts b/src/store/store.ts index e0be14d..dcce788 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -55,6 +55,7 @@ const useStore = create()( prompts: state.prompts, defaultChatConfig: state.defaultChatConfig, defaultSystemMessage: state.defaultSystemMessage, + hideMenuOptions: state.hideMenuOptions, firstVisit: state.firstVisit, }), version: 6,