bhetherman/open-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-07-23 12:25:17 -04:00
parent 62491debfa
commit 1513ddaf58
2 changed files with 31 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/chat/Messages.svelte
+27 -14
View File
@@ -49,6 +49,7 @@
export let topPadding = false;
export let bottomPadding = false;
export let autoScroll;
export let messagesContainerId = 'messages-container';
export let onSelect = (e) => {};
export let onInsertToNote: ((content: string) => void) | null = null;
@@ -56,14 +57,18 @@
export let messagesCount: number | null = 8;
let messagesLoading = false;
const getMessagesContainer = () => document.getElementById(messagesContainerId);
onDestroy(() => {
cancelAnimationFrame(pendingRebuild);
});
const loadMoreMessages = async () => {
// scroll slightly down to disable continuous loading
const element = document.getElementById('messages-container');
element.scrollTop = element.scrollTop + 100;
const element = getMessagesContainer();
if (element) {
element.scrollTop = element.scrollTop + 100;
}
messagesLoading = true;
messagesCount += 8;
@@ -135,7 +140,7 @@
}
const scrollToBottom = () => {
const element = document.getElementById('messages-container');
const element = getMessagesContainer();
if (element) {
element.scrollTop = element.scrollHeight;
@@ -215,8 +220,10 @@
// Optional auto-scroll
if ($settings?.scrollOnBranchChange ?? true) {
const element = document.getElementById('messages-container');
autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
const element = getMessagesContainer();
autoScroll = element
? element.scrollHeight - element.scrollTop <= element.clientHeight + 50
: false;
setTimeout(() => {
scrollToBottom();
@@ -262,8 +269,10 @@
await tick();
if ($settings?.scrollOnBranchChange ?? true) {
const element = document.getElementById('messages-container');
autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
const element = getMessagesContainer();
autoScroll = element
? element.scrollHeight - element.scrollTop <= element.clientHeight + 50
: false;
setTimeout(() => {
scrollToBottom();
@@ -313,8 +322,10 @@
await tick();
if ($settings?.scrollOnBranchChange ?? true) {
const element = document.getElementById('messages-container');
autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
const element = getMessagesContainer();
autoScroll = element
? element.scrollHeight - element.scrollTop <= element.clientHeight + 50
: false;
setTimeout(() => {
scrollToBottom();
@@ -485,11 +496,13 @@
const triggerScroll = () => {
if (autoScroll) {
const element = document.getElementById('messages-container');
autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
setTimeout(() => {
scrollToBottom();
}, 100);
const element = getMessagesContainer();
if (element) {
autoScroll = element.scrollHeight - element.scrollTop <= element.clientHeight + 50;
setTimeout(() => {
scrollToBottom();
}, 100);
}
}
};
</script>
src/lib/components/layout/Sidebar/ChatHoverPreview.svelte
+4
View File
@@ -26,6 +26,8 @@
let requestedChatId = '';
let loadToken = 0;
$: messagesContainerId = `chat-hover-preview-messages-${chatId}`;
const scrollPreviewToBottom = async () => {
await tick();
requestAnimationFrame(() => {
@@ -103,6 +105,7 @@
</div>
</div>
<div
id={messagesContainerId}
bind:this={messagesContainerElement}
class="max-h-[min(15rem,calc(100vh-4rem))] overflow-y-auto bg-white scrollbar-hover @container dark:bg-gray-850"
>
@@ -130,6 +133,7 @@
atSelectedModel={null}
{history}
autoScroll={true}
{messagesContainerId}
messagesCount={8}
sendMessage={() => {}}
continueResponse={() => {}}