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 <tohjinghua123@gmail.com>

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",

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",

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",

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",

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",

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",

public/locales/ja/main.json

@@ -24,6 +24,7 @@
   "setting": "設定",
   "image": "画像",
   "autoTitle": "タイトルを自動生成",
+  "advancedMode": "上級モード",
   "prompt": "プロンプト",
   "promptLibrary": "プロンプトライブラリ",
   "name": "名前",

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",

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",

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",

public/locales/zh-CN/main.json

@@ -24,6 +24,7 @@
   "setting": "设置",
   "image": "图片",
   "autoTitle": "自动生成标题",
+  "advancedMode": "高级模式",
   "prompt": "提示词",
   "promptLibrary": "提示词资料库",
   "name": "名称",

public/locales/zh-HK/main.json

@@ -24,6 +24,7 @@
   "setting": "設定",
   "image": "圖片",
   "autoTitle": "自動生成標題",
+  "advancedMode": "高級模式",
   "prompt": "Prompt",
   "promptLibrary": "Prompt 資料庫",
   "name": "名",

public/locales/zh-TW/main.json

@@ -24,6 +24,7 @@
   "setting": "設定",
   "image": "圖片",
   "autoTitle": "自動生成標題",
+  "advancedMode": "高級模式",
   "prompt": "提示詞",
   "promptLibrary": "提示詞資料庫",
   "name": "名稱",

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}
           >
-            <ChatTitle />
-            {!generating && messages?.length === 0 && (
+            {advancedMode && <ChatTitle />}
+            {!generating && advancedMode && messages?.length === 0 && (
               <NewMessageButton messageIndex={-1} />
             )}
             {messages?.map((message, index) => (
@@ -69,7 +70,7 @@ const ChatContent = () => {
                   content={message.content}
                   messageIndex={index}
                 />
-                {!generating && <NewMessageButton messageIndex={index} />}
+                {!generating && advancedMode && <NewMessageButton messageIndex={index} />}
               </React.Fragment>
             ))}
           </div>

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 (
       <div
@@ -43,11 +44,12 @@ const Message = React.memo(
         >
           <Avatar role={role} />
           <div className='w-[calc(100%-50px)] '>
-            <RoleSelector
-              role={role}
-              messageIndex={messageIndex}
-              sticky={sticky}
-            />
+            {advancedMode &&
+              <RoleSelector
+                role={role}
+                messageIndex={messageIndex}
+                sticky={sticky}
+              />}
             <MessageContent
               role={role}
               content={content}

src/components/Chat/ChatContent/Message/MessageContent.tsx

@@ -43,10 +43,11 @@ const MessageContent = ({
   sticky?: boolean;
 }) => {
   const [isEdit, setIsEdit] = useState<boolean>(sticky);
+  const advancedMode = useStore((state) => state.advancedMode);
 
   return (
     <div className='relative flex flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]'>
-      <div className='flex flex-grow flex-col gap-3'></div>
+      {advancedMode && <div className='flex flex-grow flex-col gap-3'></div>}
       {isEdit ? (
         <EditView
           content={content}
@@ -483,6 +484,7 @@ const EditViewButtons = React.memo(
   }) => {
     const { t } = useTranslation();
     const generating = useStore.getState().generating;
+    const advancedMode = useStore((state) => state.advancedMode);
 
     return (
       <div className='flex'>
@@ -539,7 +541,7 @@ const EditViewButtons = React.memo(
             </button>
           )}
         </div>
-        {sticky && <TokenCount />}
+        {sticky && advancedMode && <TokenCount />}
         <CommandPrompt _setContent={_setContent} />
       </div>
     );

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<boolean>(
+    useStore.getState().advancedMode
+  );
+
+  useEffect(() => {
+    setAdvancedMode(isChecked);
+  }, [isChecked]);
+
+  return (
+    <Toggle
+      label={t('advancedMode') as string}
+      isChecked={isChecked}
+      setIsChecked={setIsChecked}
+    />
+  );
+};
+
+export default AdvancedModeToggle;

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 = () => {
             <div className='flex flex-col gap-3'>
               <AutoTitleToggle />
               <EnterToSubmitToggle />
+              <AdvancedModeToggle />
             </div>
             <PromptLibraryMenu />
             <ChatConfigMenu />

src/store/config-slice.ts

@@ -8,13 +8,15 @@ export interface ConfigSlice {
   theme: Theme;
   autoTitle: boolean;
   hideMenuOptions: boolean;
+  advancedMode: boolean;
   defaultChatConfig: ConfigInterface;
   defaultSystemMessage: string;
   hideSideMenu: boolean;
   enterToSubmit: boolean;
   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<ConfigSlice> = (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<ConfigSlice> = (set, get) => ({
       autoTitle: autoTitle,
     }));
   },
+  setAdvancedMode: (advancedMode: boolean) => {
+    set((prev: ConfigSlice) => ({
+      ...prev,
+      advancedMode: advancedMode,
+    }));
+  },
   setDefaultChatConfig: (defaultChatConfig: ConfigInterface) => {
     set((prev: ConfigSlice) => ({
       ...prev,

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,