Feat Speed Animation [Config Response] (ChatGPTNextWeb#138)

* Feat Speed Animation [Config Response] [+] chore(config.ts): update version number to 4.3 [+] feat(config.ts): add speed_animationValidator to validate speed_animation value [+] fix(config.ts): set default value of speed_animation to 30 * Feat Speed Animation [Local Languages] [+] feat(locales): add translations for SpeedAnimation in cn.ts, en.ts, and id.ts * Feat Speed Animation [Local Languages] [pt-br] [+] feat(pt.ts): add translation for SpeedAnimation feature * Feat UI/UX Settings Page [Speed Animation] [+] feat(settings.tsx): add speed animation setting with input range component * Feat ChatGPT LLMApi [Speed Animation] [+] fix(openai.ts): add support for speed_animation configuration from app settings [+] feat(settings.tsx): update speed_animation input range in app settings [+] fix(config.ts): change default value and range for speed_animation configuration * Feat UI/UX Settings Page [Speed Animation] [Increase Max Value] [+] fix(settings.tsx): change max value of speed_animation input to 200
ryiann · Nov 22, 2023 · bf43bbb · bf43bbb
1 parent 19041a4
commit bf43bbb
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 3 deletions.
diff --git a/app/client/platforms/openai.ts b/app/client/platforms/openai.ts
@@ -218,6 +218,8 @@ export class ChatGPTApi implements LLMApi {
       },
     };
 
+    const cfgspeed_animation = useAppConfig.getState().speed_animation;       
+
     const defaultModel = modelConfig.model;
 
     const userMessages = messages.filter((msg) => msg.role === "user");
@@ -343,7 +345,7 @@ export class ChatGPTApi implements LLMApi {
           }
 
           if (remainText.length > 0) {
-            const fetchCount = Math.max(1, Math.round(remainText.length / 60));
+            const fetchCount = Math.max(1, Math.round(remainText.length / cfgspeed_animation)); // Lower values will result in faster animation
             const fetchText = remainText.slice(0, fetchCount);
             responseText += fetchText;
             remainText = remainText.slice(fetchCount);

diff --git a/app/components/settings.tsx b/app/components/settings.tsx
@@ -1118,6 +1118,26 @@ export function Settings() {
               }
             ></input>
           </ListItem>
+
+          <ListItem
+            title={Locale.Settings.SpeedAnimation.Title}
+            subTitle={Locale.Settings.SpeedAnimation.SubTitle}
+          >
+            <InputRange
+              title={`${config.speed_animation ?? 60}m/s`}
+              value={(config.speed_animation ?? 60).toFixed(60)}
+              min="1"
+              max="200" // average max to made it very slowly like while a server lag hahaha
+              step="1"
+              onChange={(e) =>
+                updateConfig(
+                  (config) =>
+                    (config.speed_animation = Number.parseInt(e.currentTarget.value)),
+                )
+              }
+            ></InputRange>
+          </ListItem>
+
         </List>
 
         <SyncItems />

diff --git a/app/locales/cn.ts b/app/locales/cn.ts
@@ -220,6 +220,10 @@ const cn = {
       Title: "自动生成标题",
       SubTitle: "根据对话内容生成合适的标题",
     },
+    SpeedAnimation: {
+      Title: "动画速度响应",
+      SubTitle: "通过控制动画期间响应文本的显示速度，您可以控制动画速度响应",
+    },
     Sync: {
       CloudState: "云端数据",
       NotSyncYet: "还没有进行过同步",

diff --git a/app/locales/en.ts b/app/locales/en.ts
@@ -222,6 +222,10 @@ const en: LocaleType = {
       Title: "Auto Generate Title",
       SubTitle: "Generate a suitable title based on the conversation content",
     },
+    SpeedAnimation: {
+      Title: "Speed Animation Response",
+      SubTitle: "A Speed Animation Response you can control how fast the response text is displayed during the animation",
+    },
     Sync: {
       CloudState: "Last Update",
       NotSyncYet: "Not sync yet",

diff --git a/app/locales/id.ts b/app/locales/id.ts
@@ -201,6 +201,10 @@ const id: PartialLocaleType = {
       Title: "Hasilkan Judul Otomatis",
       SubTitle: "Hasilkan judul yang sesuai berdasarkan konten percakapan",
     },
+    SpeedAnimation: {
+      Title: "Kecepatan Respon Animasi",
+      SubTitle: "Kecepatan Respon Animasi memungkinkan Anda mengontrol seberapa cepat teks respon ditampilkan selama animasi",
+    },
     Sync: {
       CloudState: "Pembaruan Terakhir",
       NotSyncYet: "Belum disinkronkan",

diff --git a/app/locales/pt.ts b/app/locales/pt.ts
@@ -222,6 +222,10 @@ const pt: LocaleType = {
       Title: "Gerar Título Automaticamente",
       SubTitle: "Gerar um título adequado baseado no conteúdo da conversa",
     },
+    SpeedAnimation: {
+      Title: "Velocidade de Animação da Resposta",
+      SubTitle: "Uma resposta de animação de velocidade na qual você pode controlar a rapidez com que o texto da resposta é exibido durante a animação",
+    },
     Sync: {
       CloudState: "Última Atualização",
       NotSyncYet: "Ainda não sincronizado",

diff --git a/app/store/config.ts b/app/store/config.ts
@@ -91,6 +91,7 @@ export const DEFAULT_CONFIG = {
   textmoderation: true, // text moderation default is enabled
 
   desktopShortcut: "",
+  speed_animation: 60, // Lower values will result in faster animation
 };
 
 export type ChatConfig = typeof DEFAULT_CONFIG;
@@ -167,6 +168,12 @@ export const ShortcutValidator = {
   },
 };
 
+export const speed_animationValidator = {
+  speed_animation(x: number) {
+    return limitNumber(x, 1, 100, 1); // Set the range of 1 to 100 for the speed animation
+  },
+};
+
 export const useAppConfig = createPersistStore(
   { ...DEFAULT_CONFIG },
   (set, get) => ({
@@ -201,7 +208,7 @@ export const useAppConfig = createPersistStore(
   }),
   {
     name: StoreKey.Config,
-    version: 4.2, // DALL·E Models switching version to 4.1 because in 4.0 @Yidadaa using it.
+    version: 4.3, // DALL·E Models switching version to 4.1 because in 4.0 @Yidadaa using it.
     migrate(persistedState, version) {
       const state = persistedState as ChatConfig;
 
@@ -246,7 +253,7 @@ export const useAppConfig = createPersistStore(
         };
       }
 
-      // In the wilds 🚀
+      // In the wilds 🚀 (still wip because it confusing for LLM + Generative AI Method)
 
       if (version < 4.2) {
         state.modelConfig = {
@@ -255,6 +262,12 @@ export const useAppConfig = createPersistStore(
         };
       }
 
+      // Speed Animation default is 30, Lower values will result in faster animation
+
+      if (version < 4.3) {
+        state.speed_animation = 60;
+      }
+
       return state as any;
     },
   },