ti.sil/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2025-12-14 13:25:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Merge pull request #16061 from silentoplayz/fix/autoscrolling-in-FloatingButtons

Browse source 
fix: prevent error when autoscrolling in FloatingButtons
This commit is contained in:
Tim Jaeryang Baek 2025-07-30 13:01:02 +04:00 committed by GitHub
commit 47d86d3c2f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 34 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/lib/components/chat/ContentRenderer/FloatingButtons.svelte
View file

@ -4,7 +4,7 @@
import DOMPurify from 'dompurify'; import DOMPurify from 'dompurify';
import { marked } from 'marked'; import { marked } from 'marked';
import { getContext, tick } from 'svelte'; import { getContext, tick, onDestroy } from 'svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
import { chatCompletion } from '$lib/apis/openai'; import { chatCompletion } from '$lib/apis/openai';
@ -27,16 +27,19 @@
let prompt = ''; let prompt = '';
let responseContent = null; let responseContent = null;
let responseDone = false; let responseDone = false;
let controller = null;
const autoScroll = async () => { const autoScroll = async () => {
// Scroll to bottom only if the scroll is at the bottom give 50px buffer
const responseContainer = document.getElementById('response-container'); const responseContainer = document.getElementById('response-container');
if (responseContainer) {
// Scroll to bottom only if the scroll is at the bottom give 50px buffer
if ( if (
responseContainer.scrollHeight - responseContainer.clientHeight <= responseContainer.scrollHeight - responseContainer.clientHeight <=
responseContainer.scrollTop + 50 responseContainer.scrollTop + 50
) { ) {
responseContainer.scrollTop = responseContainer.scrollHeight; responseContainer.scrollTop = responseContainer.scrollHeight;
} }
}
}; };
const askHandler = async () => { const askHandler = async () => {
@ -54,7 +57,8 @@
floatingInputValue = ''; floatingInputValue = '';
responseContent = ''; responseContent = '';
const [res, controller] = await chatCompletion(localStorage.token, { let res;
[res, controller] = await chatCompletion(localStorage.token, {
model: model, model: model,
messages: [ messages: [
...messages, ...messages,
@ -116,7 +120,13 @@
}; };
// Process the stream in the background // Process the stream in the background
try {
await processStream(); await processStream();
} catch (e) {
if (e.name !== 'AbortError') {
console.error(e);
}
}
} else { } else {
toast.error('An error occurred while fetching the explanation'); toast.error('An error occurred while fetching the explanation');
} }
@ -134,7 +144,8 @@
prompt = `${quotedText}\n\nExplain`; prompt = `${quotedText}\n\nExplain`;
responseContent = ''; responseContent = '';
const [res, controller] = await chatCompletion(localStorage.token, { let res;
[res, controller] = await chatCompletion(localStorage.token, {
model: model, model: model,
messages: [ messages: [
...messages, ...messages,
@ -196,7 +207,13 @@
}; };
// Process the stream in the background // Process the stream in the background
try {
await processStream(); await processStream();
} catch (e) {
if (e.name !== 'AbortError') {
console.error(e);
}
}
} else { } else {
toast.error('An error occurred while fetching the explanation'); toast.error('An error occurred while fetching the explanation');
} }
@ -227,6 +244,12 @@
floatingInput = false; floatingInput = false;
floatingInputValue = ''; floatingInputValue = '';
}; };
onDestroy(() => {
if (controller) {
controller.abort();
}
});
</script> </script>
<div <div