From eb4d85c119d68f2d28fe0a796f2c7ea017c9980a Mon Sep 17 00:00:00 2001 From: H0llyW00dzZ Date: Sat, 10 Feb 2024 18:10:02 +0700 Subject: [PATCH] [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 Co-authored-by: movalex <11698866+movalex@users.noreply.github.com> --- app/components/chat.tsx | 13 +++++++++---- app/components/settings.tsx | 17 +++++++++++++++-- app/locales/ar.ts | 4 ++++ app/locales/bn.ts | 4 ++++ app/locales/cn.ts | 4 ++++ app/locales/cs.ts | 4 ++++ app/locales/de.ts | 4 ++++ app/locales/en.ts | 4 ++++ app/locales/es.ts | 4 ++++ app/locales/fr.ts | 4 ++++ app/locales/id.ts | 8 ++++++-- app/locales/it.ts | 4 ++++ app/locales/jp.ts | 4 ++++ app/locales/ko.ts | 4 ++++ app/locales/no.ts | 4 ++++ app/locales/pt.ts | 4 ++++ app/locales/ru.ts | 4 ++++ app/locales/sk.ts | 4 ++++ app/locales/tr.ts | 4 ++++ app/locales/tw.ts | 4 ++++ app/locales/vi.ts | 4 ++++ app/store/config.ts | 1 + 22 files changed, 103 insertions(+), 8 deletions(-) diff --git a/app/components/chat.tsx b/app/components/chat.tsx index 8723d49e0df..21bb0b21172 100644 --- a/app/components/chat.tsx +++ b/app/components/chat.tsx @@ -446,12 +446,16 @@ function useScrollToBottom() { // for auto-scroll const scrollRef = useRef(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 index 90bd2bb1c69..3d30c91bb45 100644 --- a/app/components/settings.tsx +++ b/app/components/settings.tsx @@ -1173,7 +1173,6 @@ export function Settings() { } > - - + + + updateConfig( + (config) => + (config.autoScrollMessage = e.currentTarget.checked), + ) + } + > + diff --git a/app/locales/ar.ts b/app/locales/ar.ts index 4ca6bdf4be4..f60a54a6e8e 100644 --- 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 index d4c802cdb40..9f8556d0d05 100644 --- 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 index f09648bc4cc..554d2aff987 100644 --- 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 index 45727c80106..902f5dd6437 100644 --- 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 index 2c9f6ecafe0..2c3283fd957 100644 --- 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 index 96dcebca7b4..f6bed12b47e 100644 --- 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 index 5e0db62b397..29941754d0c 100644 --- 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 index 6cc6978d4f4..ee37671b7f7 100644 --- 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 index b0a51799cfa..ea311c5ba84 100644 --- 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 index 15b4112f36e..2b2d6f668a7 100644 --- 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 index 9fd11694141..34813688cc4 100644 --- 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 index 009098f8bda..8d1f3783a22 100644 --- 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 index 4a5657ce587..e035f6f8555 100644 --- 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 index 7fe9d8c5f54..50af472ed72 100644 --- 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 index e1891dd53dc..c3447085843 100644 --- 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 index b5599c28d35..5eabfc15f9b 100644 --- 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 index 9bc6e638a66..ef378ccb310 100644 --- 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 index 9335c49db10..e87ed7f0e6d 100644 --- 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 index b3ead2d06c0..52a2453c306 100644 --- 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 index 9e5a7d4f435..15966bb867c 100644 --- 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,