add input type to settings to allow users to choose input type

client/src/Project/CurrentTabContent/ChatTab/Input/index.tsx

@@ -28,7 +28,6 @@ import { splitPath, splitUserInputAfterAutocomplete } from '../../../../utils';
 import { openTabsCache } from '../../../../services/cache';
 import { CommandBarContext } from '../../../../context/commandBarContext';
 import { UIContext } from '../../../../context/uiContext';
-import { LocaleContext } from '../../../../context/localeContext';
 import InputCore from './ProseMirror';
 import { mapEditorContentToInputValue } from './ProseMirror/utils';
 import ReactMentionsInput from './ReactMentions';
@@ -79,7 +78,7 @@ const ConversationInput = ({
   const { t } = useTranslation();
   const { envConfig } = useContext(EnvContext);
   const { isVisible } = useContext(CommandBarContext.General);
-  const { locale } = useContext(LocaleContext);
+  const { chatInputType } = useContext(UIContext.ChatInputType);
   const { setIsLeftSidebarFocused } = useContext(UIContext.Focus);
   const [initialValue, setInitialValue] = useState<
     Record<string, any> | null | undefined
@@ -301,7 +300,7 @@ const ConversationInput = ({
         <p className="body-base-b text-label-title select-none">
           <Trans>You</Trans>
         </p>
-        {locale === 'zhCN' ? (
+        {chatInputType === 'simplified' ? (
           <ReactMentionsInput
             value={value}
             onChange={onChangeReactMentionsInput}

client/src/Settings/Preferences/ChatInputTypeDropdown.tsx

@@ -0,0 +1,40 @@
+import { memo, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import DropdownSection from '../../components/Dropdown/Section';
+import SectionItem from '../../components/Dropdown/Section/SectionItem';
+import { UIContext } from '../../context/uiContext';
+
+type Props = {};
+
+const ChatInputTypeDropdown = ({}: Props) => {
+  const { t } = useTranslation();
+  const { chatInputType, setChatInputType } = useContext(
+    UIContext.ChatInputType,
+  );
+  return (
+    <div>
+      <DropdownSection borderBottom>
+        <SectionItem
+          label={t('Default')}
+          index={'default-input'}
+          isSelected={chatInputType === 'default'}
+          onClick={() => setChatInputType('default')}
+          description={t('Recommended: The classic input')}
+        />
+      </DropdownSection>
+      <DropdownSection>
+        <SectionItem
+          label={t('Simplified')}
+          index={'simple-input'}
+          isSelected={chatInputType === 'simplified'}
+          onClick={() => setChatInputType('simplified')}
+          description={t(
+            'Fallback: Use if experiencing problems with the default one',
+          )}
+        />
+      </DropdownSection>
+    </div>
+  );
+};
+
+export default memo(ChatInputTypeDropdown);

client/src/Settings/Preferences/LanguageDropdown.tsx

@@ -4,12 +4,14 @@ import SectionItem from '../../components/Dropdown/Section/SectionItem';
 import { LocaleContext } from '../../context/localeContext';
 import { localesMap } from '../../consts/general';
 import { LocaleType } from '../../types/general';
+import { UIContext } from '../../context/uiContext';
 
 type Props = {};
 
 const LanguageDropdown = ({}: Props) => {
   useTranslation();
   const { locale, setLocale } = useContext(LocaleContext);
+  const { setChatInputType } = useContext(UIContext.ChatInputType);
 
   return (
     <div>
@@ -19,7 +21,12 @@ const LanguageDropdown = ({}: Props) => {
             key={k}
             index={`lang-${k}`}
             isSelected={locale === k}
-            onClick={() => setLocale(k)}
+            onClick={() => {
+              if (k === 'zhCN') {
+                setChatInputType('simplified');
+              }
+              setLocale(k);
+            }}
             label={localesMap[k].name}
             icon={<span>{localesMap[k].icon}</span>}
           />

client/src/Settings/Preferences/index.tsx

@@ -14,6 +14,7 @@ import { localesMap, themesMap } from '../../consts/general';
 import { LocaleContext } from '../../context/localeContext';
 import ThemeDropdown from './ThemeDropdown';
 import LanguageDropdown from './LanguageDropdown';
+import ChatInputTypeDropdown from './ChatInputTypeDropdown';
 
 type Props = {};
 
@@ -27,6 +28,7 @@ const Preferences = ({}: Props) => {
   useTranslation();
   const { theme } = useContext(UIContext.Theme);
   const { locale } = useContext(LocaleContext);
+  const { chatInputType } = useContext(UIContext.ChatInputType);
 
   return (
     <div className="w-[36.25rem] flex flex-col flex-2">
@@ -82,6 +84,31 @@ const Preferences = ({}: Props) => {
           </Button>
         </Dropdown>
       </div>
+      <hr className="border-bg-divider my-8" />
+      <div className="flex items-start gap-8 w-full justify-between">
+        <div className="flex flex-col gap-2">
+          <p className="body-base-b text-label-title">
+            <Trans>Conversation input</Trans>
+          </p>
+          <p className="body-s-b text-label-muted">
+            <Trans>Select the input type to use in conversations</Trans>
+          </p>
+        </div>
+        <Dropdown
+          DropdownComponent={ChatInputTypeDropdown}
+          size="auto"
+          dropdownPlacement="bottom-end"
+        >
+          <Button variant="secondary">
+            {chatInputType === 'default' ? (
+              <Trans>Default</Trans>
+            ) : (
+              <Trans>Simplified</Trans>
+            )}
+            <ChevronDownIcon sizeClassName="w-4 h-4" />
+          </Button>
+        </Dropdown>
+      </div>
     </div>
   );
 };

client/src/context/providers/UIContextProvider.tsx

@@ -13,6 +13,7 @@ import { DeviceContext } from '../deviceContext';
 import { getConfig, refreshToken as refreshTokenApi } from '../../services/api';
 import {
   ACCESS_TOKEN_KEY,
+  CHAT_INPUT_TYPE_KEY,
   getPlainFromStorage,
   ONBOARDING_DONE_KEY,
   REFRESH_TOKEN_KEY,
@@ -21,7 +22,12 @@ import {
 } from '../../services/storage';
 import { Theme } from '../../types';
 import { EnvContext } from '../envContext';
-import { ProjectSettingSections, SettingSections } from '../../types/general';
+import {
+  ChatInputType,
+  ProjectSettingSections,
+  SettingSections,
+} from '../../types/general';
+import { LocaleContext } from '../localeContext';
 
 type Props = {};
 
@@ -41,6 +47,7 @@ export const UIContextProvider = memo(
       'onBoardingState',
     );
     const { isSelfServe } = useContext(DeviceContext);
+    const { locale } = useContext(LocaleContext);
     const { setEnvConfig, envConfig } = useContext(EnvContext);
     const [isGithubConnected, setGithubConnected] = useState(
       isSelfServe ? !!getPlainFromStorage(REFRESH_TOKEN_KEY) : false,
@@ -53,6 +60,12 @@ export const UIContextProvider = memo(
     const [theme, setTheme] = useState<Theme>(
       (getPlainFromStorage(THEME) as 'system' | null) || 'system',
     );
+    const [chatInputType, setChatInputType] = useState<ChatInputType>(
+      (getPlainFromStorage(CHAT_INPUT_TYPE_KEY) as 'default' | null) ||
+        locale === 'zhCN'
+        ? 'simplified'
+        : 'default',
+    );
     const [isLeftSidebarFocused, setIsLeftSidebarFocused] = useState(false);
     const [isUpgradeRequiredPopupOpen, setIsUpgradeRequiredPopupOpen] =
       useState(false);
@@ -110,6 +123,10 @@ export const UIContextProvider = memo(
       }
     }, [theme]);
 
+    useEffect(() => {
+      savePlainToStorage(CHAT_INPUT_TYPE_KEY, chatInputType);
+    }, [chatInputType]);
+
     const settingsContextValue = useMemo(
       () => ({
         isSettingsOpen,
@@ -182,20 +199,32 @@ export const UIContextProvider = memo(
       [isUpgradeRequiredPopupOpen],
     );
 
+    const chatInputTypeContextValue = useMemo(
+      () => ({
+        chatInputType,
+        setChatInputType,
+      }),
+      [chatInputType],
+    );
+
     return (
       <UIContext.Settings.Provider value={settingsContextValue}>
         <UIContext.ProjectSettings.Provider value={projectSettingsContextValue}>
           <UIContext.Onboarding.Provider value={onboardingContextValue}>
             <UIContext.BugReport.Provider value={bugReportContextValue}>
               <UIContext.GitHubConnected.Provider value={githubContextValue}>
                 <UIContext.Theme.Provider value={themeContextValue}>
-                  <UIContext.UpgradeRequiredPopup.Provider
-                    value={upgradePopupContextValue}
+                  <UIContext.ChatInputType.Provider
+                    value={chatInputTypeContextValue}
                   >
-                    <UIContext.Focus.Provider value={focusContextValue}>
-                      {children}
-                    </UIContext.Focus.Provider>
-                  </UIContext.UpgradeRequiredPopup.Provider>
+                    <UIContext.UpgradeRequiredPopup.Provider
+                      value={upgradePopupContextValue}
+                    >
+                      <UIContext.Focus.Provider value={focusContextValue}>
+                        {children}
+                      </UIContext.Focus.Provider>
+                    </UIContext.UpgradeRequiredPopup.Provider>
+                  </UIContext.ChatInputType.Provider>
                 </UIContext.Theme.Provider>
               </UIContext.GitHubConnected.Provider>
             </UIContext.BugReport.Provider>

client/src/context/uiContext.ts

@@ -1,6 +1,7 @@
 import { createContext, Dispatch, SetStateAction } from 'react';
 import { Theme } from '../types';
 import {
+  ChatInputType,
   OnboardingStateType,
   ProjectSettingSections,
   SettingSections,
@@ -52,4 +53,8 @@ export const UIContext = {
     isUpgradeRequiredPopupOpen: false,
     setIsUpgradeRequiredPopupOpen: (b: boolean) => {},
   }),
+  ChatInputType: createContext({
+    chatInputType: 'default' as ChatInputType,
+    setChatInputType: (t: ChatInputType) => {},
+  }),
 };

client/src/locales/en.json

@@ -530,5 +530,11 @@
 	"Add documentation": "Add documentation",
 	"<0>{{repoName}}</0> has finished indexing and can be added to your projects. Click the button to below to add it to the current project.": "<0>{{repoName}}</0> has finished indexing and can be added to your projects. Click the button to below to add it to the current project.",
 	"Start by selecting again and pressing Enter (↵) on your keyboard.": "Start by selecting again and pressing Enter (↵) on your keyboard.",
-	"{{repoName}} is currently indexing as soon as it is finished you will be able to add it to your project.": "{{repoName}} is currently indexing as soon as it is finished you will be able to add it to your project."
+	"{{repoName}} is currently indexing as soon as it is finished you will be able to add it to your project.": "{{repoName}} is currently indexing as soon as it is finished you will be able to add it to your project.",
+	"Select the input type to use in conversations": "Select the input type to use in conversations",
+	"Conversation input": "Conversation input",
+	"Default": "Default",
+	"Simplified": "Simplified",
+	"Recommended: The classic input": "Recommended: The classic input",
+	"Fallback: Use if experiencing problems with the default one": "Fallback: Use if experiencing problems with the default one"
 }

client/src/locales/es.json

@@ -529,5 +529,11 @@
 	"Restore session": "Restaurar sesion",
 	"<0>{{repoName}}</0> has finished indexing and can be added to your projects. Click the button to below to add it to the current project.": "<0>{{repoName}}</0> ha terminado de indexación y se puede agregar a sus proyectos. Haga clic en el botón a continuación para agregarlo al proyecto actual.",
 	"Start by selecting again and pressing Enter (↵) on your keyboard.": "Comience seleccionando nuevamente y presionando Enter (↵) en su teclado.",
-	"{{repoName}} is currently indexing as soon as it is finished you will be able to add it to your project.": "{{repoName}} actualmente está indexando tan pronto como esté terminado, podrá agregarlo a su proyecto."
+	"{{repoName}} is currently indexing as soon as it is finished you will be able to add it to your project.": "{{repoName}} actualmente está indexando tan pronto como esté terminado, podrá agregarlo a su proyecto.",
+	"Conversation input": "Aportación de conversación",
+	"Simplified: Choose if the default one fails": "Simplificado: elija si el predeterminado falla",
+	"Fallback: Use if experiencing problems with the default one": "Fallback: use si experimenta problemas con el predeterminado",
+	"Select the input type to use in conversations": "Seleccione el tipo de entrada a usar en conversaciones",
+	"Default": "Por defecto",
+	"Recommended: The classic input": "Recomendado: la entrada clásica"
 }

client/src/locales/it.json

@@ -511,5 +511,11 @@
 	"Let’s get you started with bloop!": "Ti cominciamo con Bloop!",
 	"<0>{{repoName}}</0> has finished indexing and can be added to your projects. Click the button to below to add it to the current project.": "<0>{{repoName}}</0> ha terminato l'indicizzazione e può essere aggiunto ai tuoi progetti. Fai clic sul pulsante sotto per aggiungerlo al progetto corrente.",
 	"Start by selecting again and pressing Enter (↵) on your keyboard.": "Inizia selezionando di nuovo e premendo Invio (↵) sulla tastiera.",
-	"{{repoName}} is currently indexing as soon as it is finished you will be able to add it to your project.": "{{repoName}} sta attualmente indicizzando non appena sarà finito, sarai in grado di aggiungerlo al tuo progetto."
+	"{{repoName}} is currently indexing as soon as it is finished you will be able to add it to your project.": "{{repoName}} sta attualmente indicizzando non appena sarà finito, sarai in grado di aggiungerlo al tuo progetto.",
+	"Default": "Predefinita",
+	"Fallback: Use if experiencing problems with the default one": "Fallback: usa se si riscontra problemi con quello predefinito",
+	"Simplified": "Semplificata",
+	"Select the input type to use in conversations": "Seleziona il tipo di input da utilizzare nelle conversazioni",
+	"Recommended: The classic input": "Consigliato: l'ingresso classico",
+	"Conversation input": "Input di conversazione"
 }

client/src/locales/ja.json

@@ -516,5 +516,11 @@
 	"In this project": "このプロジェクトで",
 	"<0>{{repoName}}</0> has finished indexing and can be added to your projects. Click the button to below to add it to the current project.": "<0>{{repoName}}</0>はインデックス作成が終了し、プロジェクトに追加できます。 以下のボタンをクリックして、現在のプロジェクトに追加します。",
 	"Start by selecting again and pressing Enter (↵) on your keyboard.": "もう一度選択して、キーボードのEnter（‡）を押すことから始めます。",
-	"{{repoName}} is currently indexing as soon as it is finished you will be able to add it to your project.": "{{repoName}}は現在、終了したらすぐにインデックスを作成しています。プロジェクトに追加できるようになります。"
+	"{{repoName}} is currently indexing as soon as it is finished you will be able to add it to your project.": "{{repoName}}は現在、終了したらすぐにインデックスを作成しています。プロジェクトに追加できるようになります。",
+	"Select the input type to use in conversations": "会話で使用する入力タイプを選択します",
+	"Fallback: Use if experiencing problems with the default one": "フォールバック：デフォルトの問題で問題が発生している場合に使用します",
+	"Simplified": "簡素化",
+	"Default": "デフォルト",
+	"Recommended: The classic input": "推奨：クラシック入力",
+	"Conversation input": "会話の入力"
 }

client/src/locales/zh-CN.json

@@ -526,5 +526,11 @@
 	"Existing studio conversations": "现有的工作室对话",
 	"<0>{{repoName}}</0> has finished indexing and can be added to your projects. Click the button to below to add it to the current project.": "<0>{{repoName}}</0>已完成索引，可以添加到您的项目中。 单击下面的按钮将其添加到当前项目中。",
 	"Start by selecting again and pressing Enter (↵) on your keyboard.": "首先选择再次选择键盘上的Enter（↵）。",
-	"{{repoName}} is currently indexing as soon as it is finished you will be able to add it to your project.": "{{repoName}}当前，一旦完成后，您就可以将其添加到项目中。"
+	"{{repoName}} is currently indexing as soon as it is finished you will be able to add it to your project.": "{{repoName}}当前，一旦完成后，您就可以将其添加到项目中。",
+	"Conversation input": "对话输入",
+	"Fallback: Use if experiencing problems with the default one": "后备：如果遇到默认一个问题，请使用",
+	"Simplified": "简化",
+	"Select the input type to use in conversations": "选择要在对话中使用的输入类型",
+	"Default": "默认",
+	"Recommended: The classic input": "推荐：经典输入"
 }

client/src/services/storage.ts

@@ -43,3 +43,4 @@ export const USER_FONT_SIZE_KEY = 'user_font_size';
 export const PROJECT_KEY = 'project';
 export const RECENT_COMMANDS_KEY = 'recent_commands';
 export const RECENT_FILES_KEY = 'recent_files';
+export const CHAT_INPUT_TYPE_KEY = 'chat_input_type';

client/src/types/general.ts

@@ -626,3 +626,5 @@ export type OnboardingStateType = {
   isCodeExplained?: boolean;
   isCodeNavigated?: boolean;
 };
+
+export type ChatInputType = 'default' | 'simplified';