Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add settings to disable autoscroll during reply #3815

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Add settings to disable autoscroll during reply #3815

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
28f40eb
add menu settings and a rough translation
movalex Jan 10, 2024
223ff8d
autoscroll enabled by default
movalex Jan 10, 2024
e186e05
update autoscroll config
movalex Jan 10, 2024
434abbc
use config to drive autoscroll state
movalex Jan 10, 2024
4534469
update locales
movalex Jan 11, 2024
3f79e08
Update pt.ts
movalex Jan 12, 2024
8ec222b
check scroll on hit bottom
movalex Jan 20, 2024
e90c379
Merge branch 'ChatGPTNextWeb:main' into feature/add-disable-autoscrol…
movalex Feb 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions app/components/chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -379,12 +379,13 @@ 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) {
requestAnimationFrame(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just info
this requestAnimationFrame stupid complex that made performance in browser bad when there is lots of messages

Copy link
Author

@movalex movalex Feb 8, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know this repo much, but I think they've added this recently to make the show text animation smoother. If this impacts performance so bad, I guess it should be either an option or omitted completely.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know this repo much, but I think they've added this recently to make the show text animation smoother. If this impacts performance so bad, I guess it should be either an option or omitted completely.

nah this already useful which can customize the only things need to improvement it's only requestAnimationFrame << stupid typescript function

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was looking around it yesterday trying to Improve it

setAutoScroll(true);
setAutoScroll(isAutoScrollEnabled);
dom.scrollTo(0, dom.scrollHeight);
});
}
Expand Down Expand Up @@ -960,7 +961,8 @@ function _Chat() {
}

setHitBottom(isHitBottom);
setAutoScroll(isHitBottom);
let isAutoScrollEnabled: boolean = config.autoScrollMessage;
setAutoScroll(isAutoScrollEnabled);
};

function scrollToBottom() {
Expand Down
15 changes: 15 additions & 0 deletions app/components/settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -825,6 +825,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>
</List>

<SyncItems />
Expand Down
4 changes: 4 additions & 0 deletions app/locales/ar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,10 @@ const ar: PartialLocaleType = {
Title: "عرض معاينة الـ Send",
SubTitle: "معاينة Markdown في فقاعة",
},
AutoScrollMessage: {
Title: "الرد التلقائي للتمرير",
SubTitle: "تمرير الرسالة أثناء الرد",
},
Mask: {
Splash: {
Title: "شاشة تظهر الأقنعة",
Expand Down
4 changes: 4 additions & 0 deletions app/locales/bn.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,10 @@ const bn: PartialLocaleType = {
Title: "প্রিভিউ বুলবুল প্রেরণ করুন",
SubTitle: "বুলবুলে মার্কডাউন প্রিভিউ করুন",
},
AutoScrollMessage: {
Title: "অটো-স্ক্রল উত্তর",
SubTitle: "উত্তর দেওয়ার সময় বার্তা স্ক্রল করুন",
},
Mask: {
Splash: {
Title: "মাস্ক স্প্ল্যাশ স্ক্রিন",
Expand Down
4 changes: 4 additions & 0 deletions app/locales/cn.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,6 +175,10 @@ const cn = {
Title: "预览气泡",
SubTitle: "在预览气泡中预览 Markdown 内容",
},
AutoScrollMessage: {
Title: "自动滚动回复",
SubTitle: "滚动消息以进行回复",
},
AutoGenerateTitle: {
Title: "自动生成标题",
SubTitle: "根据对话内容生成合适的标题",
Expand Down
4 changes: 4 additions & 0 deletions app/locales/cs.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,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",
Expand Down
4 changes: 4 additions & 0 deletions app/locales/de.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,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",
Expand Down
4 changes: 4 additions & 0 deletions app/locales/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,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",
Expand Down
4 changes: 4 additions & 0 deletions app/locales/es.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,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",
Expand Down
4 changes: 4 additions & 0 deletions app/locales/fr.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,6 +135,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",
Expand Down
8 changes: 6 additions & 2 deletions app/locales/id.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,6 +200,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",
Expand Down Expand Up @@ -369,8 +373,8 @@ const id: PartialLocaleType = {
},
Exporter: {
Description: {
Title: "Hanya pesan setelah menghapus konteks yang akan ditampilkan"
},
Title: "Hanya pesan setelah menghapus konteks yang akan ditampilkan",
},
Model: "Model",
Messages: "Pesan",
Topic: "Topik",
Expand Down
4 changes: 4 additions & 0 deletions app/locales/it.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,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",
Expand Down
4 changes: 4 additions & 0 deletions app/locales/jp.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,10 @@ const jp: PartialLocaleType = {
Title: "プレビューバブルの送信",
SubTitle: "プレビューバブルでマークダウンコンテンツをプレビュー",
},
AutoScrollMessage: {
Title: "オートスクロール返信",
SubTitle: "返信中にメッセージをスクロール",
},
Mask: {
Splash: {
Title: "キャラクターページ",
Expand Down
4 changes: 4 additions & 0 deletions app/locales/ko.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,10 @@ const ko: PartialLocaleType = {
Title: "미리 보기 버블 전송",
SubTitle: "버블에서 마크다운 미리 보기",
},
AutoScrollMessage: {
Title: "자동 스크롤 답장",
SubTitle: "답장하는 동안 메시지 스크롤",
},
Mask: {
Splash: {
Title: "마스크 시작 화면",
Expand Down
4 changes: 4 additions & 0 deletions app/locales/no.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,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",
Expand Down
4 changes: 4 additions & 0 deletions app/locales/pt.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,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",
Expand Down
4 changes: 4 additions & 0 deletions app/locales/ru.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,10 @@ const ru: PartialLocaleType = {
Title: "Отправить предпросмотр",
SubTitle: "Предварительный просмотр markdown в пузыре",
},
AutoScrollMessage: {
Title: "Автопрокрутка ответа",
SubTitle: "Прокрутка сообщения во время ответа",
},
Mask: {
Splash: {
Title: "Экран заставки маски",
Expand Down
4 changes: 4 additions & 0 deletions app/locales/sk.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,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",
Expand Down
4 changes: 4 additions & 0 deletions app/locales/tr.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,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",
Expand Down
4 changes: 4 additions & 0 deletions app/locales/tw.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,10 @@ const tw: PartialLocaleType = {
Title: "預覽氣泡",
SubTitle: "在預覽氣泡中預覽 Markdown 內容",
},
AutoScrollMessage: {
Title: "自動滾動回覆",
SubTitle: "回覆時滾動訊息",
},
Mask: {
Splash: {
Title: "面具啟動頁面",
Expand Down
4 changes: 4 additions & 0 deletions app/locales/vi.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,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",
Expand Down
1 change: 1 addition & 0 deletions app/store/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export const DEFAULT_CONFIG = {
theme: Theme.Auto as Theme,
tightBorder: !!getClientConfig()?.isApp,
sendPreviewBubble: true,
autoScrollMessage: true,
enableAutoGenerateTitle: true,
sidebarWidth: DEFAULT_SIDEBAR_WIDTH,

Expand Down
Loading