[Cherry Pick] Head Repo [PR: ChatGPTNextWeb#3815] (#269)

* add menu settings and a rough translation * autoscroll enabled by default * update autoscroll config * use config to drive autoscroll state * update locales * Update pt.ts * check scroll on hit bottom * Feat [UI/UX] [Front End] [Chat] smooth scrolling - [+] feat(chat.tsx): implement smooth scrolling behavior in chat component Note: This adding back smooth scrolling --------- Co-authored-by: movalex <[email protected]> Co-authored-by: movalex <[email protected]>
H0llyW00dzZ · Feb 10, 2024 · eb4d85c · eb4d85c
1 parent f7a84ba
commit eb4d85c
Show file tree

Hide file tree

Showing 22 changed files with 103 additions and 8 deletions.
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
@@ -446,12 +446,16 @@ function useScrollToBottom() {
   // for auto-scroll
   const scrollRef = useRef<HTMLDivElement>(null);
   const [autoScroll, setAutoScroll] = useState(true);
-
+  const config = useAppConfig();
+  let isAutoScrollEnabled: boolean = config.autoScrollMessage;
   function scrollDomToBottom() {
     const dom = scrollRef.current;
     if (dom) {
-      // Improve Use smooth scrolling behavior
-      dom.scrollTo({ top: dom.scrollHeight, behavior: 'smooth' });
+      requestAnimationFrame(() => { // this stupid frame might conflict with smooth behavior
+        setAutoScroll(isAutoScrollEnabled);
+        // Improve Use smooth scrolling behavior
+        dom.scrollTo({ top: dom.scrollHeight, behavior: 'smooth' });
+      });
     }
   }
 
@@ -1187,7 +1191,8 @@ function _Chat() {
     }
 
     setHitBottom(isHitBottom);
-    setAutoScroll(isHitBottom);
+    let isAutoScrollEnabled: boolean = config.autoScrollMessage;
+    setAutoScroll(isAutoScrollEnabled);
   }, [setHitBottom, setAutoScroll, isMobileScreen, msgRenderIndex, setMsgRenderIndex]); // Added setMsgRenderIndex
 
   // Use the custom hook to debounce the onChatBodyScroll function

diff --git a/app/components/settings.tsx b/app/components/settings.tsx
@@ -1173,7 +1173,6 @@ export function Settings() {
               }
             ></input>
           </ListItem>
-
           <ListItem
             title={Locale.Settings.SpeedAnimation.Title}
             subTitle={Locale.Settings.SpeedAnimation.SubTitle}
@@ -1192,7 +1191,21 @@ export function Settings() {
               }
             ></InputRange>
           </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>
         </List>
 
         <SyncItems />

diff --git a/app/locales/ar.ts b/app/locales/ar.ts
@@ -140,6 +140,10 @@ const ar: PartialLocaleType = {
       Title: "عرض معاينة الـ Send",
       SubTitle: "معاينة Markdown في فقاعة",
     },
+    AutoScrollMessage: {
+      Title: "الرد التلقائي للتمرير",
+      SubTitle: "تمرير الرسالة أثناء الرد",
+    },
     Mask: {
       Splash: {
         Title: "شاشة تظهر الأقنعة",

diff --git a/app/locales/bn.ts b/app/locales/bn.ts
@@ -166,6 +166,10 @@ const bn: PartialLocaleType = {
       Title: "প্রিভিউ বুলবুল প্রেরণ করুন",
       SubTitle: "বুলবুলে মার্কডাউন প্রিভিউ করুন",
     },
+    AutoScrollMessage: {
+      Title: "অটো-স্ক্রল উত্তর",
+      SubTitle: "উত্তর দেওয়ার সময় বার্তা স্ক্রল করুন",
+    },
     Mask: {
       Splash: {
         Title: "মাস্ক স্প্ল্যাশ স্ক্রিন",

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

diff --git a/app/locales/cs.ts b/app/locales/cs.ts
@@ -96,6 +96,10 @@ const cs: PartialLocaleType = {
       Title: "Odesílat chatovací bublinu s náhledem",
       SubTitle: "Zobrazit v náhledu bubliny",
     },
+    AutoScrollMessage: {
+      Title: "Automatické rolování odpovědi",
+      SubTitle: "Rolovat zprávu při odpovídání",
+    },
     Mask: {
       Splash: {
         Title: "Úvodní obrazovka Masek",

diff --git a/app/locales/de.ts b/app/locales/de.ts
@@ -96,6 +96,10 @@ const de: PartialLocaleType = {
       Title: "Vorschau-Bubble senden",
       SubTitle: "Preview markdown in bubble",
     },
+    AutoScrollMessage: {
+      Title: "Auto-Scroll-Antwort",
+      SubTitle: "Nachricht beim Antworten scrollen",
+    },
     Mask: {
       Splash: {
         Title: "Mask Splash Screen",

diff --git a/app/locales/en.ts b/app/locales/en.ts
@@ -233,6 +233,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",

diff --git a/app/locales/es.ts b/app/locales/es.ts
@@ -96,6 +96,10 @@ const es: PartialLocaleType = {
       Title: "Enviar burbuja de vista previa",
       SubTitle: "Preview markdown in bubble",
     },
+    AutoScrollMessage: {
+      Title: "Respuesta con Auto-Desplazamiento",
+      SubTitle: "Desplazar el mensaje durante la respuesta",
+    },
     Mask: {
       Splash: {
         Title: "Mask Splash Screen",

diff --git a/app/locales/fr.ts b/app/locales/fr.ts
@@ -140,6 +140,10 @@ const fr: PartialLocaleType = {
       Title: "Aperçu de l'envoi dans une bulle",
       SubTitle: "Aperçu du Markdown dans une bulle",
     },
+    AutoScrollMessage: {
+      Title: "Réponse défilement automatique",
+      SubTitle: "Faire défiler le message lors de la réponse",
+    },
     Mask: {
       Splash: {
         Title: "Écran de masque",

diff --git a/app/locales/id.ts b/app/locales/id.ts
@@ -333,6 +333,10 @@ const id: PartialLocaleType = {
       Title: "Pratinjau Obrolan",
       SubTitle: "Pratinjau Obrolan dengan markdown",
     },
+    AutoScrollMessage: {
+      Title: "Balasan Auto-Scroll",
+      SubTitle: "Gulir pesan saat membalas",
+    },
     Mask: {
       Splash: {
         Title: "Layar Pembuka Masks",
@@ -567,8 +571,8 @@ Latex block: $$e=mc^2$$`,
   },
   Exporter: {
     Description: {
-      Title: "Hanya pesan setelah menghapus konteks yang akan ditampilkan"
-    },  
+      Title: "Hanya pesan setelah menghapus konteks yang akan ditampilkan",
+    },
     Model: "Model",
     ServiceProvider: "Penyedia Layanan",
     Messages: "Pesan",

diff --git a/app/locales/it.ts b/app/locales/it.ts
@@ -96,6 +96,10 @@ const it: PartialLocaleType = {
       Title: "Anteprima di digitazione",
       SubTitle: "Preview markdown in bubble",
     },
+    AutoScrollMessage: {
+      Title: "Risposta Auto-Scroll",
+      SubTitle: "Scorri il messaggio durante la risposta",
+    },
     Mask: {
       Splash: {
         Title: "Mask Splash Screen",

diff --git a/app/locales/jp.ts b/app/locales/jp.ts
@@ -147,6 +147,10 @@ const jp: PartialLocaleType = {
       Title: "プレビューバブルの送信",
       SubTitle: "プレビューバブルでマークダウンコンテンツをプレビュー",
     },
+    AutoScrollMessage: {
+      Title: "オートスクロール返信",
+      SubTitle: "返信中にメッセージをスクロール",
+    },
     Mask: {
       Splash: {
         Title: "キャラクターページ",

diff --git a/app/locales/ko.ts b/app/locales/ko.ts
@@ -97,6 +97,10 @@ const ko: PartialLocaleType = {
       Title: "미리 보기 버블 전송",
       SubTitle: "버블에서 마크다운 미리 보기",
     },
+    AutoScrollMessage: {
+      Title: "자동 스크롤 답장",
+      SubTitle: "답장하는 동안 메시지 스크롤",
+    },
     Mask: {
       Splash: {
         Title: "마스크 시작 화면",

diff --git a/app/locales/no.ts b/app/locales/no.ts
@@ -87,6 +87,10 @@ const no: PartialLocaleType = {
     SendKey: "Send nøkkel",
     Theme: "Tema",
     TightBorder: "Stram innramming",
+    AutoScrollMessage: {
+      Title: "Automatisk rulling av svar",
+      SubTitle: "Rull meldingen under svar",
+    },
     Prompt: {
       Disable: {
         Title: "Skru av autofullfør",

diff --git a/app/locales/pt.ts b/app/locales/pt.ts
@@ -223,6 +223,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",

diff --git a/app/locales/ru.ts b/app/locales/ru.ts
@@ -96,6 +96,10 @@ const ru: PartialLocaleType = {
       Title: "Отправить предпросмотр",
       SubTitle: "Предварительный просмотр markdown в пузыре",
     },
+    AutoScrollMessage: {
+      Title: "Автопрокрутка ответа",
+      SubTitle: "Прокрутка сообщения во время ответа",
+    },
     Mask: {
       Splash: {
         Title: "Экран заставки маски",

diff --git a/app/locales/sk.ts b/app/locales/sk.ts
@@ -184,6 +184,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",

diff --git a/app/locales/tr.ts b/app/locales/tr.ts
@@ -96,6 +96,10 @@ const tr: PartialLocaleType = {
       Title: "Mesaj Önizleme Balonu",
       SubTitle: "Preview markdown in bubble",
     },
+    AutoScrollMessage: {
+      Title: "Otomatik Kaydırma Yanıtı",
+      SubTitle: "Yanıt verirken mesajı kaydır",
+    },
     Mask: {
       Splash: {
         Title: "Mask Splash Screen",

diff --git a/app/locales/tw.ts b/app/locales/tw.ts
@@ -93,6 +93,10 @@ const tw: PartialLocaleType = {
       Title: "預覽氣泡",
       SubTitle: "在預覽氣泡中預覽 Markdown 內容",
     },
+    AutoScrollMessage: {
+      Title: "自動滾動回覆",
+      SubTitle: "回覆時滾動訊息",
+    },
     Mask: {
       Splash: {
         Title: "面具啟動頁面",

diff --git a/app/locales/vi.ts b/app/locales/vi.ts
@@ -96,6 +96,10 @@ const vi: PartialLocaleType = {
       Title: "Gửi bong bóng xem trước",
       SubTitle: "Xem trước nội dung markdown bằng bong bóng",
     },
+    AutoScrollMessage: {
+      Title: "Trả lời Tự động Cuộn",
+      SubTitle: "Cuộn tin nhắn khi trả lời",
+    },
     Mask: {
       Splash: {
         Title: "Mask Splash Screen",

diff --git a/app/store/config.ts b/app/store/config.ts
@@ -36,6 +36,7 @@ export const DEFAULT_CONFIG = {
   theme: Theme.Auto as Theme,
   tightBorder: !!getClientConfig()?.isApp,
   sendPreviewBubble: true,
+  autoScrollMessage: true,
   enableAutoGenerateTitle: true,
   sidebarWidth: DEFAULT_SIDEBAR_WIDTH,