UniqAI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-03-29 03:41:02 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Merge pull request #4335 from 5E-324/toggle-scrolling

Browse Source 
feat: Add option to toggle scrolling to bottom when switching between different branches of the conversation
This commit is contained in:
Timothy Jaeryang Baek 2024-08-04 14:11:03 +02:00 committed by GitHub
commit 5b11099a0b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 43 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/lib/components/chat/Messages.svelte
View File

@ -146,12 +146,14 @@
await tick(); await tick();
const element = document.getElementById('messages-container'); if ($settings?.scrollOnBranchChange ?? true) {
autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50; const element = document.getElementById('messages-container');
autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
setTimeout(() => { setTimeout(() => {
scrollToBottom(); scrollToBottom();
}, 100); }, 100);
}
}; };
const showNextMessage = async (message) => { const showNextMessage = async (message) => {
@ -195,12 +197,14 @@
await tick(); await tick();
const element = document.getElementById('messages-container'); if ($settings?.scrollOnBranchChange ?? true) {
autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50; const element = document.getElementById('messages-container');
autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
setTimeout(() => { setTimeout(() => {
scrollToBottom(); scrollToBottom();
}, 100); }, 100);
}
}; };
const deleteMessageHandler = async (messageId) => { const deleteMessageHandler = async (messageId) => {

29
src/lib/components/chat/Settings/Interface.svelte
View File

@ -22,6 +22,7 @@
let responseAutoCopy = false; let responseAutoCopy = false;
let widescreenMode = false; let widescreenMode = false;
let splitLargeChunks = false; let splitLargeChunks = false;
let scrollOnBranchChange = true;
let userLocation = false; let userLocation = false;
// Interface // Interface
@ -39,6 +40,11 @@
saveSettings({ splitLargeChunks: splitLargeChunks }); saveSettings({ splitLargeChunks: splitLargeChunks });
}; };
const togglesScrollOnBranchChange = async () => {
scrollOnBranchChange = !scrollOnBranchChange;
saveSettings({ scrollOnBranchChange: scrollOnBranchChange });
};
const togglewidescreenMode = async () => { const togglewidescreenMode = async () => {
widescreenMode = !widescreenMode; widescreenMode = !widescreenMode;
saveSettings({ widescreenMode: widescreenMode }); saveSettings({ widescreenMode: widescreenMode });
@ -141,6 +147,7 @@
chatBubble = $settings.chatBubble ?? true; chatBubble = $settings.chatBubble ?? true;
widescreenMode = $settings.widescreenMode ?? false; widescreenMode = $settings.widescreenMode ?? false;
splitLargeChunks = $settings.splitLargeChunks ?? false; splitLargeChunks = $settings.splitLargeChunks ?? false;
scrollOnBranchChange = $settings.scrollOnBranchChange ?? true;
chatDirection = $settings.chatDirection ?? 'LTR'; chatDirection = $settings.chatDirection ?? 'LTR';
userLocation = $settings.userLocation ?? false; userLocation = $settings.userLocation ?? false;
@ -318,6 +325,28 @@
</div> </div>
</div> </div>
<div>
<div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs">
{$i18n.t('Scroll to bottom when switching between branches')}
</div>
<button
class="p-1 px-3 text-xs flex rounded transition"
on:click={() => {
togglesScrollOnBranchChange();
}}
type="button"
>
{#if scrollOnBranchChange === true}
<span class="ml-2 self-center">{$i18n.t('On')}</span>
{:else}
<span class="ml-2 self-center">{$i18n.t('Off')}</span>
{/if}
</button>
</div>
</div>
<div> <div>
<div class=" py-0.5 flex w-full justify-between"> <div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs"> <div class=" self-center text-xs">