From c2d833b3327241780484a77628974f55b20eaeef Mon Sep 17 00:00:00 2001 From: Peng Guanwen Date: Sat, 15 Apr 2023 22:03:33 +0800 Subject: [PATCH] Add simple mode (#113) * Add simple mode The current UI is too complicated for some first time users. This commit adds a "Advanced mode" toggle that defaults on but can be turned off. When the toggle if switched off, the simple mode is activated and following UI elements are hided: - Model parameters setting - Role switch - Save button (This means user must save *and* submit in simple mode.) * Simple mode: Fix ctrl-enter in non-sticky blocks * i18n * hide token count * add back save button * remove unused variables --------- Co-authored-by: Jing Hua --- public/locales/da/main.json | 1 + public/locales/en-US/main.json | 1 + public/locales/en/main.json | 1 + public/locales/es/main.json | 1 + public/locales/fr/main.json | 1 + public/locales/it/main.json | 1 + public/locales/ja/main.json | 1 + public/locales/ms/main.json | 1 + public/locales/nb/main.json | 1 + public/locales/sv/main.json | 1 + public/locales/zh-CN/main.json | 1 + public/locales/zh-HK/main.json | 1 + public/locales/zh-TW/main.json | 1 + .../Chat/ChatContent/ChatContent.tsx | 7 +++-- .../Chat/ChatContent/Message/Message.tsx | 12 ++++---- .../ChatContent/Message/MessageContent.tsx | 6 ++-- .../SettingsMenu/AdvencedModeToggle.tsx | 28 +++++++++++++++++++ src/components/SettingsMenu/SettingsMenu.tsx | 2 ++ src/store/config-slice.ts | 9 ++++++ src/store/store.ts | 1 + 20 files changed, 68 insertions(+), 10 deletions(-) create mode 100644 src/components/SettingsMenu/AdvencedModeToggle.tsx diff --git a/public/locales/da/main.json b/public/locales/da/main.json index 5307ecfe8..8a28b866a 100644 --- a/public/locales/da/main.json +++ b/public/locales/da/main.json @@ -24,6 +24,7 @@ "setting": "Indstillinger", "image": "Billede", "autoTitle": "Auto generer titel", + "advancedMode": "Avanceret tilstand", "prompt": "Opgave", "promptLibrary": "Opgavebibliotek", "name": "Navn", diff --git a/public/locales/en-US/main.json b/public/locales/en-US/main.json index 1cc97095b..4e9d5eb54 100644 --- a/public/locales/en-US/main.json +++ b/public/locales/en-US/main.json @@ -24,6 +24,7 @@ "setting": "Settings", "image": "Image", "autoTitle": "Auto generate title", + "advancedMode": "Advanced mode", "prompt": "Prompt", "promptLibrary": "Prompt Library", "name": "Name", diff --git a/public/locales/en/main.json b/public/locales/en/main.json index 1cc97095b..4e9d5eb54 100644 --- a/public/locales/en/main.json +++ b/public/locales/en/main.json @@ -24,6 +24,7 @@ "setting": "Settings", "image": "Image", "autoTitle": "Auto generate title", + "advancedMode": "Advanced mode", "prompt": "Prompt", "promptLibrary": "Prompt Library", "name": "Name", diff --git a/public/locales/es/main.json b/public/locales/es/main.json index 21cefe36c..10707fd1d 100644 --- a/public/locales/es/main.json +++ b/public/locales/es/main.json @@ -24,6 +24,7 @@ "setting": "Ajustes", "image": "Imagen", "autoTitle": "Generar automáticamente el título de la conversación.", + "advancedMode": "Modo avanzado", "prompt": "Prompt", "promptLibrary": "Librería de Prompts", "name": "Nombre", diff --git a/public/locales/fr/main.json b/public/locales/fr/main.json index 210e55ecc..31cc1960e 100644 --- a/public/locales/fr/main.json +++ b/public/locales/fr/main.json @@ -24,6 +24,7 @@ "setting": "Paramètres", "image": "Image", "autoTitle": "Générer le titre automatiquement", + "advancedMode": "Mode avancé", "prompt": "Incitation", "promptLibrary": "Bibliothèque de prompt", "name": "Nom", diff --git a/public/locales/it/main.json b/public/locales/it/main.json index ac19e4ca5..b03e42590 100644 --- a/public/locales/it/main.json +++ b/public/locales/it/main.json @@ -24,6 +24,7 @@ "setting": "Impostazioni", "image": "Immagine", "autoTitle": "Genera automaticamente il titolo", + "advancedMode": "Modalità avanzata", "prompt": "Prompt", "promptLibrary": "Libreria Prompt", "name": "Nome", diff --git a/public/locales/ja/main.json b/public/locales/ja/main.json index fa1681fdd..3bedf4612 100644 --- a/public/locales/ja/main.json +++ b/public/locales/ja/main.json @@ -24,6 +24,7 @@ "setting": "設定", "image": "画像", "autoTitle": "タイトルを自動生成", + "advancedMode": "上級モード", "prompt": "プロンプト", "promptLibrary": "プロンプトライブラリ", "name": "名前", diff --git a/public/locales/ms/main.json b/public/locales/ms/main.json index 8138bef1f..ab35e3009 100644 --- a/public/locales/ms/main.json +++ b/public/locales/ms/main.json @@ -24,6 +24,7 @@ "setting": "Tetapan", "image": "Imej", "autoTitle": "Jana tajuk secara automatik", + "advancedMode": "Mod lanjutan", "prompt": "Arahan", "promptLibrary": "Pustaka Arahan", "name": "Nama", diff --git a/public/locales/nb/main.json b/public/locales/nb/main.json index 9d6a7a22c..20245c885 100644 --- a/public/locales/nb/main.json +++ b/public/locales/nb/main.json @@ -24,6 +24,7 @@ "setting": "Innstillinger", "image": "Bilde", "autoTitle": "Auto generer tittel", + "advancedMode": "Avansert modus", "prompt": "Oppgave", "promptLibrary": "Oppgavebibliotek", "name": "Navn", diff --git a/public/locales/sv/main.json b/public/locales/sv/main.json index 6b9deda96..a5619d8eb 100644 --- a/public/locales/sv/main.json +++ b/public/locales/sv/main.json @@ -24,6 +24,7 @@ "setting": "Inställningar", "image": "Bild", "autoTitle": "Auto generera titel", + "advancedMode": "Avancerat läge", "prompt": "Uppmaning", "promptLibrary": "Uppmaningsbibliotek", "name": "Namn", diff --git a/public/locales/zh-CN/main.json b/public/locales/zh-CN/main.json index 299e491a7..a8c75a365 100644 --- a/public/locales/zh-CN/main.json +++ b/public/locales/zh-CN/main.json @@ -24,6 +24,7 @@ "setting": "设置", "image": "图片", "autoTitle": "自动生成标题", + "advancedMode": "高级模式", "prompt": "提示词", "promptLibrary": "提示词资料库", "name": "名称", diff --git a/public/locales/zh-HK/main.json b/public/locales/zh-HK/main.json index 75a8b97e0..6e3262f03 100644 --- a/public/locales/zh-HK/main.json +++ b/public/locales/zh-HK/main.json @@ -24,6 +24,7 @@ "setting": "設定", "image": "圖片", "autoTitle": "自動生成標題", + "advancedMode": "高級模式", "prompt": "Prompt", "promptLibrary": "Prompt 資料庫", "name": "名", diff --git a/public/locales/zh-TW/main.json b/public/locales/zh-TW/main.json index 20a597f6d..6827bfcb8 100644 --- a/public/locales/zh-TW/main.json +++ b/public/locales/zh-TW/main.json @@ -24,6 +24,7 @@ "setting": "設定", "image": "圖片", "autoTitle": "自動生成標題", + "advancedMode": "高級模式", "prompt": "提示詞", "promptLibrary": "提示詞資料庫", "name": "名稱", diff --git a/src/components/Chat/ChatContent/ChatContent.tsx b/src/components/Chat/ChatContent/ChatContent.tsx index a4a6eeddc..545d17453 100644 --- a/src/components/Chat/ChatContent/ChatContent.tsx +++ b/src/components/Chat/ChatContent/ChatContent.tsx @@ -32,6 +32,7 @@ const ChatContent = () => { ? state.chats[state.currentChatIndex].messages.length : 0 ); + const advancedMode = useStore((state) => state.advancedMode); const generating = useStore.getState().generating; const hideSideMenu = useStore((state) => state.hideSideMenu); @@ -58,8 +59,8 @@ const ChatContent = () => { className='flex flex-col items-center text-sm dark:bg-gray-800 w-full' ref={saveRef} > - - {!generating && messages?.length === 0 && ( + {advancedMode && } + {!generating && advancedMode && messages?.length === 0 && ( )} {messages?.map((message, index) => ( @@ -69,7 +70,7 @@ const ChatContent = () => { content={message.content} messageIndex={index} /> - {!generating && } + {!generating && advancedMode && } ))} diff --git a/src/components/Chat/ChatContent/Message/Message.tsx b/src/components/Chat/ChatContent/Message/Message.tsx index fbffd92c3..53904b7a3 100644 --- a/src/components/Chat/ChatContent/Message/Message.tsx +++ b/src/components/Chat/ChatContent/Message/Message.tsx @@ -27,6 +27,7 @@ const Message = React.memo( sticky?: boolean; }) => { const hideSideMenu = useStore((state) => state.hideSideMenu); + const advancedMode = useStore((state) => state.advancedMode); return (
- + {advancedMode && + } { const [isEdit, setIsEdit] = useState(sticky); + const advancedMode = useStore((state) => state.advancedMode); return (
-
+ {advancedMode &&
} {isEdit ? ( { const { t } = useTranslation(); const generating = useStore.getState().generating; + const advancedMode = useStore((state) => state.advancedMode); return (
@@ -539,7 +541,7 @@ const EditViewButtons = React.memo( )}
- {sticky && } + {sticky && advancedMode && }
); diff --git a/src/components/SettingsMenu/AdvencedModeToggle.tsx b/src/components/SettingsMenu/AdvencedModeToggle.tsx new file mode 100644 index 000000000..8533e9c06 --- /dev/null +++ b/src/components/SettingsMenu/AdvencedModeToggle.tsx @@ -0,0 +1,28 @@ +import React, { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import useStore from '@store/store'; +import Toggle from '@components/Toggle'; + +const AdvancedModeToggle = () => { + const { t } = useTranslation(); + + const setAdvancedMode = useStore((state) => state.setAdvancedMode); + + const [isChecked, setIsChecked] = useState( + useStore.getState().advancedMode + ); + + useEffect(() => { + setAdvancedMode(isChecked); + }, [isChecked]); + + return ( + + ); +}; + +export default AdvancedModeToggle; diff --git a/src/components/SettingsMenu/SettingsMenu.tsx b/src/components/SettingsMenu/SettingsMenu.tsx index 51f336a63..f3a53c408 100644 --- a/src/components/SettingsMenu/SettingsMenu.tsx +++ b/src/components/SettingsMenu/SettingsMenu.tsx @@ -8,6 +8,7 @@ import SettingIcon from '@icon/SettingIcon'; import ThemeSwitcher from '@components/Menu/MenuOptions/ThemeSwitcher'; import LanguageSelector from '@components/LanguageSelector'; import AutoTitleToggle from './AutoTitleToggle'; +import AdvancedModeToggle from './AdvencedModeToggle'; import PromptLibraryMenu from '@components/PromptLibraryMenu'; import ChatConfigMenu from '@components/ChatConfigMenu'; import EnterToSubmitToggle from './EnterToSubmitToggle'; @@ -44,6 +45,7 @@ const SettingsMenu = () => {
+
diff --git a/src/store/config-slice.ts b/src/store/config-slice.ts index 359d29c3c..d9008182d 100644 --- a/src/store/config-slice.ts +++ b/src/store/config-slice.ts @@ -8,6 +8,7 @@ export interface ConfigSlice { theme: Theme; autoTitle: boolean; hideMenuOptions: boolean; + advancedMode: boolean; defaultChatConfig: ConfigInterface; defaultSystemMessage: string; hideSideMenu: boolean; @@ -15,6 +16,7 @@ export interface ConfigSlice { setOpenConfig: (openConfig: boolean) => void; setTheme: (theme: Theme) => void; setAutoTitle: (autoTitle: boolean) => void; + setAdvancedMode: (advancedMode: boolean) => void; setDefaultChatConfig: (defaultChatConfig: ConfigInterface) => void; setDefaultSystemMessage: (defaultSystemMessage: string) => void; setHideMenuOptions: (hideMenuOptions: boolean) => void; @@ -29,6 +31,7 @@ export const createConfigSlice: StoreSlice = (set, get) => ({ hideSideMenu: false, autoTitle: false, enterToSubmit: true, + advancedMode: true, defaultChatConfig: _defaultChatConfig, defaultSystemMessage: _defaultSystemMessage, setOpenConfig: (openConfig: boolean) => { @@ -49,6 +52,12 @@ export const createConfigSlice: StoreSlice = (set, get) => ({ autoTitle: autoTitle, })); }, + setAdvancedMode: (advancedMode: boolean) => { + set((prev: ConfigSlice) => ({ + ...prev, + advancedMode: advancedMode, + })); + }, setDefaultChatConfig: (defaultChatConfig: ConfigInterface) => { set((prev: ConfigSlice) => ({ ...prev, diff --git a/src/store/store.ts b/src/store/store.ts index 03392bcc5..9098e8ef9 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -46,6 +46,7 @@ export const createPartializedState = (state: StoreState) => ({ apiEndpoint: state.apiEndpoint, theme: state.theme, autoTitle: state.autoTitle, + advancedMode: state.advancedMode, prompts: state.prompts, defaultChatConfig: state.defaultChatConfig, defaultSystemMessage: state.defaultSystemMessage,