Merge 644e3ea841 into 3809375694

app/components/chat.tsx

@@ -449,7 +449,6 @@ export function ChatAction(props: {
     </div>
   );
 }
-
 function useScrollToBottom(
   scrollRef: RefObject<HTMLDivElement>,
   detach: boolean = false,
@@ -457,15 +456,18 @@ function useScrollToBottom(
 ) {
   // for auto-scroll
   const [autoScroll, setAutoScroll] = useState(true);
+  const config = useAppConfig();
+  const isAutoScrollEnabled: boolean = config.autoScrollMessage;
+
   const scrollDomToBottom = useCallback(() => {
     const dom = scrollRef.current;
     if (dom) {
       requestAnimationFrame(() => {
-        setAutoScroll(true);
+        setAutoScroll(isAutoScrollEnabled);
         dom.scrollTo(0, dom.scrollHeight);
       });
     }
-  }, [scrollRef]);
+  }, [scrollRef, isAutoScrollEnabled]);
 
   // auto scroll
   useEffect(() => {
@@ -490,7 +492,6 @@ function useScrollToBottom(
     scrollDomToBottom,
   };
 }
-
 export function ChatActions(props: {
   uploadImage: () => void;
   setAttachImages: (images: string[]) => void;
@@ -1420,7 +1421,8 @@ function _Chat() {
     }
 
     setHitBottom(isHitBottom);
-    setAutoScroll(isHitBottom);
+    let isAutoScrollEnabled: boolean = config.autoScrollMessage;
+    setAutoScroll(isAutoScrollEnabled);
   };
 
   function scrollToBottom() {

app/components/settings.tsx

@@ -1666,7 +1666,21 @@ export function Settings() {
               }
             ></input>
           </ListItem>
-
+          <ListItem
+            title={Locale.Settings.AutoScrollMessage.Title}
+            subTitle={Locale.Settings.AutoScrollMessage.SubTitle}
+          >
+            <input
+              type="checkbox"
+              checked={config.autoScrollMessage}
+              onChange={(e) =>
+                updateConfig(
+                  (config) =>
+                    (config.autoScrollMessage = e.currentTarget.checked),
+                )
+              }
+            ></input>
+          </ListItem>
           <ListItem
             title={Locale.Mask.Config.Artifacts.Title}
             subTitle={Locale.Mask.Config.Artifacts.SubTitle}

app/locales/ar.ts

@@ -242,6 +242,10 @@ const ar: PartialLocaleType = {
       },
       ImportFailed: "فشل الاستيراد",
     },
+    AutoScrollMessage: {
+      Title: "الرد التلقائي للتمرير",
+      SubTitle: "تمرير الرسالة أثناء الرد",
+    },
     Mask: {
       Splash: {
         Title: "صفحة بدء القناع",

app/locales/bn.ts

@@ -245,6 +245,10 @@ const bn: PartialLocaleType = {
       },
       ImportFailed: "আমদানি ব্যর্থ",
     },
+    AutoScrollMessage: {
+      Title: "অটো-স্ক্রল উত্তর",
+      SubTitle: "উত্তর দেওয়ার সময় বার্তা স্ক্রল করুন",
+    },
     Mask: {
       Splash: {
         Title: "মাস্ক লঞ্চ পেজ",

app/locales/cn.ts

@@ -216,6 +216,10 @@ const cn = {
       Title: "预览气泡",
       SubTitle: "在预览气泡中预览 Markdown 内容",
     },
+    AutoScrollMessage: {
+      Title: "自动滚动回复",
+      SubTitle: "滚动消息以进行回复",
+    },
     AutoGenerateTitle: {
       Title: "自动生成标题",
       SubTitle: "根据对话内容生成合适的标题",

app/locales/cs.ts

@@ -244,6 +244,10 @@ const cs: PartialLocaleType = {
       },
       ImportFailed: "Import selhal",
     },
+    AutoScrollMessage: {
+      Title: "Automatické rolování odpovědi",
+      SubTitle: "Rolovat zprávu při odpovídání",
+    },
     Mask: {
       Splash: {
         Title: "Úvodní stránka masky",

app/locales/de.ts

@@ -249,6 +249,10 @@ const de: PartialLocaleType = {
       },
       ImportFailed: "Import fehlgeschlagen",
     },
+    AutoScrollMessage: {
+      Title: "Auto-Scroll-Antwort",
+      SubTitle: "Nachricht beim Antworten scrollen",
+    },
     Mask: {
       Splash: {
         Title: "Masken-Startseite",

app/locales/en.ts

@@ -218,6 +218,10 @@ const en: LocaleType = {
       Title: "Send Preview Bubble",
       SubTitle: "Preview markdown in bubble",
     },
+    AutoScrollMessage: {
+      Title: "Auto-Scroll Reply",
+      SubTitle: "Scroll the message during reply",
+    },
     AutoGenerateTitle: {
       Title: "Auto Generate Title",
       SubTitle: "Generate a suitable title based on the conversation content",

app/locales/es.ts

@@ -252,6 +252,10 @@ const es: PartialLocaleType = {
       },
       ImportFailed: "Importación fallida",
     },
+    AutoScrollMessage: {
+      Title: "Respuesta con Auto-Desplazamiento",
+      SubTitle: "Desplazar el mensaje durante la respuesta",
+    },
     Mask: {
       Splash: {
         Title: "Pantalla de inicio de máscara",

app/locales/fr.ts

@@ -252,6 +252,10 @@ const fr: PartialLocaleType = {
       },
       ImportFailed: "Échec de l'importation",
     },
+    AutoScrollMessage: {
+      Title: "Réponse défilement automatique",
+      SubTitle: "Faire défiler le message lors de la réponse",
+    },
     Mask: {
       Splash: {
         Title: "Page de démarrage du masque",

app/locales/id.ts

@@ -245,6 +245,10 @@ const id: PartialLocaleType = {
       },
       ImportFailed: "Impor Gagal",
     },
+    AutoScrollMessage: {
+      Title: "Balasan Auto-Scroll",
+      SubTitle: "Gulir pesan saat membalas",
+    },
     Mask: {
       Splash: {
         Title: "Halaman Awal Masker",

app/locales/it.ts

@@ -253,6 +253,10 @@ const it: PartialLocaleType = {
       },
       ImportFailed: "Importazione fallita",
     },
+    AutoScrollMessage: {
+      Title: "Risposta Auto-Scroll",
+      SubTitle: "Scorri il messaggio durante la risposta",
+    },
     Mask: {
       Splash: {
         Title: "Pagina di avvio delle maschere",

app/locales/jp.ts

@@ -244,6 +244,10 @@ const jp: PartialLocaleType = {
       },
       ImportFailed: "インポートに失敗しました",
     },
+    AutoScrollMessage: {
+      Title: "オートスクロール返信",
+      SubTitle: "返信中にメッセージをスクロール",
+    },
     Mask: {
       Splash: {
         Title: "マスク起動画面",

app/locales/ko.ts

@@ -243,6 +243,10 @@ const ko: PartialLocaleType = {
       },
       ImportFailed: "가져오기 실패",
     },
+    AutoScrollMessage: {
+      Title: "자동 스크롤 답장",
+      SubTitle: "답장하는 동안 메시지 스크롤",
+    },
     Mask: {
       Splash: {
         Title: "마스크 시작 페이지",

app/locales/pt.ts

@@ -195,6 +195,10 @@ const pt: PartialLocaleType = {
       Title: "Bolha de Pré-visualização de Envio",
       SubTitle: "Pré-visualizar markdown na bolha",
     },
+    AutoScrollMessage: {
+      Title: "Resposta de rolagem automática",
+      SubTitle: "Rolar a mensagem enquanto responde",
+    },
     AutoGenerateTitle: {
       Title: "Gerar Título Automaticamente",
       SubTitle: "Gerar um título adequado baseado no conteúdo da conversa",

app/locales/ru.ts

@@ -246,6 +246,10 @@ const ru: PartialLocaleType = {
       },
       ImportFailed: "Не удалось импортировать",
     },
+    AutoScrollMessage: {
+      Title: "Автопрокрутка ответа",
+      SubTitle: "Прокрутка сообщения во время ответа",
+    },
     Mask: {
       Splash: {
         Title: "Стартовая страница масок",

app/locales/sk.ts

@@ -196,6 +196,10 @@ const sk: PartialLocaleType = {
       Title: "Bublina náhľadu odoslania",
       SubTitle: "Náhľad markdownu v bubline",
     },
+    AutoScrollMessage: {
+      Title: "Odpoveď s automatickým posúvaním",
+      SubTitle: "Posúvať správu počas odpovedania",
+    },
     AutoGenerateTitle: {
       Title: "Automaticky generovať názov",
       SubTitle: "Generovať vhodný názov na základe obsahu konverzácie",

app/locales/tr.ts

@@ -244,6 +244,10 @@ const tr: PartialLocaleType = {
       },
       ImportFailed: "İçeri aktarma başarısız",
     },
+    AutoScrollMessage: {
+      Title: "Otomatik Kaydırma Yanıtı",
+      SubTitle: "Yanıt verirken mesajı kaydır",
+    },
     Mask: {
       Splash: {
         Title: "Maske Başlangıç Sayfası",

app/locales/tw.ts

@@ -203,6 +203,10 @@ const tw = {
       Title: "預覽氣泡",
       SubTitle: "在預覽氣泡中預覽 Markdown 內容",
     },
+    AutoScrollMessage: {
+      Title: "自動滾動回覆",
+      SubTitle: "回覆時滾動訊息",
+    },
     AutoGenerateTitle: {
       Title: "自動產生標題",
       SubTitle: "根據對話內容產生合適的標題",

app/locales/vi.ts

@@ -244,6 +244,10 @@ const vi: PartialLocaleType = {
       },
       ImportFailed: "Nhập không thành công",
     },
+    AutoScrollMessage: {
+      Title: "Trả lời Tự động Cuộn",
+      SubTitle: "Cuộn tin nhắn khi trả lời",
+    },
     Mask: {
       Splash: {
         Title: "Trang khởi động mặt nạ",

app/store/config.ts

@@ -48,6 +48,7 @@ export const DEFAULT_CONFIG = {
   theme: Theme.Auto as Theme,
   tightBorder: !!config?.isApp,
   sendPreviewBubble: true,
+  autoScrollMessage: true,
   enableAutoGenerateTitle: true,
   sidebarWidth: DEFAULT_SIDEBAR_WIDTH,