tdpeuter/open-webui
tdpeuter/open-webui
1
Fork 0
forked from open-webui/open-webui
Code Issues Pull requests 1 Projects 1 Releases 2 Packages 1 Activity Actions

refac: styling

Browse source
This commit is contained in:
Timothy J. Baek 2024-02-15 16:20:46 -08:00
parent db08ad964c
commit e99d69bfe2
8 changed files with 163 additions and 132 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/routes/(app)/+page.svelte
View file

@ -137,6 +137,11 @@
});
};
const scrollToBottom = () => {
const element = document.getElementById('messages-container');
element.scrollTop = element.scrollHeight;
};
//////////////////////////
// Ollama functions
//////////////////////////
@ -316,7 +321,7 @@
await tick();
// Scroll down
window.scrollTo({ top: document.body.scrollHeight });
scrollToBottom();
const messagesBody = [
$settings.system
@ -469,7 +474,7 @@
}
if (autoScroll) {
window.scrollTo({ top: document.body.scrollHeight });
scrollToBottom();
}
}
@ -508,7 +513,7 @@
await tick();
if (autoScroll) {
window.scrollTo({ top: document.body.scrollHeight });
scrollToBottom();
}
if (messages.length == 2 && messages.at(1).content !== '') {
@ -519,8 +524,7 @@
const sendPromptOpenAI = async (model, userPrompt, responseMessageId, _chatId) => {
const responseMessage = history.messages[responseMessageId];
window.scrollTo({ top: document.body.scrollHeight });
scrollToBottom();
const res = await generateOpenAIChatCompletion(localStorage.token, {
model: model,
@ -628,7 +632,7 @@
}
if (autoScroll) {
window.scrollTo({ top: document.body.scrollHeight });
scrollToBottom();
}
}
@ -672,7 +676,7 @@
await tick();
if (autoScroll) {
window.scrollTo({ top: document.body.scrollHeight });
scrollToBottom();
}
if (messages.length == 2) {
@ -783,16 +787,18 @@
};
</script>
<svelte:window
on:scroll={(e) => {
autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 40;
}}
/>
<div class="min-h-screen w-full flex flex-col">
<div class="min-h-screen max-h-screen w-full flex flex-col">
<Navbar {title} shareEnabled={messages.length > 0} {initNewChat} {tags} {addTag} {deleteTag} />
<div class="flex flex-col justify-center h-full">
<div class=" pb-2.5 flex flex-1 flex-col justify-between w-full overflow-hidden">
<div class="flex flex-col flex-auto">
<div
class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-80"
id="messages-container"
on:scroll={(e) => {
console.log(e.target.scrollHeight, e.target.scrollTop, e.target.clientHeight);
console.log(e.target.scrollHeight - e.target.scrollTop, e.target.clientHeight);
autoScroll = e.target.scrollHeight - e.target.scrollTop <= e.target.clientHeight + 50;
}}
>
<div
class="{$settings?.fullScreenMode ?? null
? 'max-w-full'
@ -801,7 +807,7 @@
<ModelSelector bind:selectedModels disabled={messages.length > 0} />
</div>
<div class=" h-full mt-14 w-full flex flex-col">
<div class=" h-full w-full flex flex-col py-8">
<Messages
chatId={$chatId}
{selectedModels}

37
src/routes/(app)/c/[id]/+page.svelte
View file

@ -153,6 +153,11 @@
}
};
const scrollToBottom = () => {
const element = document.getElementById('messages-container');
element.scrollTop = element.scrollHeight;
};
//////////////////////////
// Ollama functions
//////////////////////////
@ -330,7 +335,7 @@
await tick();
// Scroll down
window.scrollTo({ top: document.body.scrollHeight });
scrollToBottom();
const messagesBody = [
$settings.system
@ -483,7 +488,7 @@
}
if (autoScroll) {
window.scrollTo({ top: document.body.scrollHeight });
scrollToBottom();
}
}
@ -522,7 +527,7 @@
await tick();
if (autoScroll) {
window.scrollTo({ top: document.body.scrollHeight });
scrollToBottom();
}
if (messages.length == 2 && messages.at(1).content !== '') {
@ -534,7 +539,7 @@
const sendPromptOpenAI = async (model, userPrompt, responseMessageId, _chatId) => {
const responseMessage = history.messages[responseMessageId];
window.scrollTo({ top: document.body.scrollHeight });
scrollToBottom();
const res = await generateOpenAIChatCompletion(localStorage.token, {
model: model,
@ -642,7 +647,7 @@
}
if (autoScroll) {
window.scrollTo({ top: document.body.scrollHeight });
scrollToBottom();
}
}
@ -686,7 +691,7 @@
await tick();
if (autoScroll) {
window.scrollTo({ top: document.body.scrollHeight });
scrollToBottom();
}
if (messages.length == 2) {
@ -797,14 +802,8 @@
});
</script>
<svelte:window
on:scroll={(e) => {
autoScroll = window.innerHeight + window.scrollY >= document.body.offsetHeight - 40;
}}
/>
{#if loaded}
<div class="min-h-screen w-full flex flex-col">
<div class="min-h-screen max-h-screen w-full flex flex-col">
<Navbar
{title}
shareEnabled={messages.length > 0}
@ -820,8 +819,16 @@
{addTag}
{deleteTag}
/>
<div class="justify-center">
<div class=" pb-2.5 flex flex-col justify-between w-full">
<div class="flex flex-col flex-auto">
<div
class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
id="messages-container"
on:scroll={(e) => {
console.log(e.target.scrollHeight, e.target.scrollTop, e.target.clientHeight);
console.log(e.target.scrollHeight - e.target.scrollTop, e.target.clientHeight);
autoScroll = e.target.scrollHeight - e.target.scrollTop <= e.target.clientHeight + 50;
}}
>
<div
class="{$settings?.fullScreenMode ?? null
? 'max-w-full'