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

rf: dom queries in layout and pages

Browse source
This commit is contained in:
Carlos Daniel Vilaseca 2024-03-03 17:42:01 -05:00
parent 50acdb09de
commit b986c2aefd
7 changed files with 32 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/routes/(app)/+layout.svelte
View file

@ -37,7 +37,7 @@
let ollamaVersion = '';
let loaded = false;
let showShortcutsButton:HTMLButtonElement
let DB = null;
let localDBChats = [];
@ -184,7 +184,7 @@
if (isCtrlPressed && event.key === '/') {
event.preventDefault();
console.log('showShortcuts');
document.getElementById('show-shortcuts-button')?.click();
showShortcutsButton.click();
}
});
@ -203,6 +203,7 @@
<div class=" hidden lg:flex fixed bottom-0 right-0 px-3 py-3 z-10">
<button
id="show-shortcuts-button"
bind:this={showShortcutsButton}
class="text-gray-600 dark:text-gray-300 bg-gray-300/20 w-6 h-6 flex items-center justify-center text-xs rounded-full"
on:click={() => {
showShortcuts = !showShortcuts;

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

@ -42,7 +42,7 @@
let stopResponseFlag = false;
let autoScroll = true;
let processing = '';
let messagesContainerElement: HTMLDivElement;
let currentRequestId = null;
let selectedModels = [''];
@ -140,8 +140,7 @@
};
const scrollToBottom = () => {
const element = document.getElementById('messages-container');
element.scrollTop = element.scrollHeight;
messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
};
//////////////////////////
@ -821,8 +820,11 @@
<div
class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
id="messages-container"
bind:this={messagesContainerElement}
on:scroll={(e) => {
autoScroll = e.target.scrollHeight - e.target.scrollTop <= e.target.clientHeight + 50;
autoScroll =
messagesContainerElement.scrollHeight - messagesContainerElement.scrollTop <=
messagesContainerElement.clientHeight + 50;
}}
>
<div

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

@ -45,7 +45,7 @@
let stopResponseFlag = false;
let autoScroll = true;
let processing = '';
let messagesContainerElement: HTMLDivElement;
let currentRequestId = null;
// let chatId = $page.params.id;
@ -160,8 +160,7 @@
};
const scrollToBottom = () => {
const element = document.getElementById('messages-container');
element.scrollTop = element.scrollHeight;
messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
};
//////////////////////////
@ -852,8 +851,11 @@
<div
class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
id="messages-container"
bind:this={messagesContainerElement}
on:scroll={(e) => {
autoScroll = e.target.scrollHeight - e.target.scrollTop <= e.target.clientHeight + 50;
autoScroll =
messagesContainerElement.scrollHeight - messagesContainerElement.scrollTop <=
messagesContainerElement.clientHeight + 50;
}}
>
<div

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

@ -21,7 +21,7 @@
let inputFiles = '';
let query = '';
let documentsImportInputElement: HTMLInputElement;
let tags = [];
let showSettingsModal = false;
@ -524,6 +524,7 @@
<div class="flex space-x-2">
<input
id="documents-import-input"
bind:this={documentsImportInputElement}
bind:files={importFiles}
type="file"
accept=".json"
@ -558,9 +559,7 @@
<button
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
on:click={async () => {
document.getElementById('documents-import-input')?.click();
}}
on:click={documentsImportInputElement.click}
>
<div class=" self-center mr-2 font-medium">Import Documents Mapping</div>

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

@ -16,7 +16,7 @@
let localModelfiles = [];
let importFiles;
let modelfilesImportInputElement: HTMLInputElement;
const deleteModelHandler = async (tagName) => {
let success = null;
@ -235,6 +235,7 @@
<div class="flex space-x-1">
<input
id="modelfiles-import-input"
bind:this={modelfilesImportInputElement}
bind:files={importFiles}
type="file"
accept=".json"
@ -262,9 +263,7 @@
<button
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
on:click={async () => {
document.getElementById('modelfiles-import-input')?.click();
}}
on:click={modelfilesImportInputElement.click}
>
<div class=" self-center mr-2 font-medium">Import Modelfiles</div>

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

@ -1,4 +1,4 @@
<script>
<script lang="ts">
import { goto } from '$app/navigation';
import { onMount, tick } from 'svelte';
@ -21,7 +21,6 @@
let mode = 'chat';
let loaded = false;
let text = '';
let selectedModelId = '';
@ -30,6 +29,9 @@
let currentRequestId;
let stopResponseFlag = false;
let messagesContainerElement: HTMLDivElement;
let textCompletionAreaElement: HTMLTextAreaElement;
let system = '';
let messages = [
{
@ -39,13 +41,7 @@
];
const scrollToBottom = () => {
let element;
if (mode === 'chat') {
element = document.getElementById('messages-container');
} else {
element = document.getElementById('text-completion-textarea');
}
const element = mode === 'chat' ? messagesContainerElement : textCompletionAreaElement;
if (element) {
element.scrollTop = element?.scrollHeight;
@ -417,12 +413,14 @@
<div
class=" pb-2.5 flex flex-col justify-between w-full flex-auto overflow-auto h-0"
id="messages-container"
bind:this={messagesContainerElement}
>
<div class=" h-full w-full flex flex-col">
<div class="flex-1 p-1">
{#if mode === 'complete'}
<textarea
id="text-completion-textarea"
bind:this={textCompletionAreaElement}
class="w-full h-full p-3 bg-transparent outline outline-1 outline-gray-200 dark:outline-gray-800 resize-none rounded-lg text-sm"
bind:value={text}
placeholder="You're a helpful assistant."

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

@ -11,7 +11,7 @@
let importFiles = '';
let query = '';
let promptsImportInputElement: HTMLInputElement;
const sharePrompt = async (prompt) => {
toast.success('Redirecting you to OpenWebUI Community');
@ -208,6 +208,7 @@
<div class="flex space-x-2">
<input
id="prompts-import-input"
bind:this={promptsImportInputElement}
bind:files={importFiles}
type="file"
accept=".json"
@ -241,9 +242,7 @@
<button
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
on:click={async () => {
document.getElementById('prompts-import-input')?.click();
}}
on:click={promptsImportInputElement.click}
>
<div class=" self-center mr-2 font-medium">Import Prompts</div>
@ -266,7 +265,7 @@
<button
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 dark:text-gray-200 transition"
on:click={async () => {
// document.getElementById('modelfiles-import-input')?.click();
// promptsImportInputElement.click();
let blob = new Blob([JSON.stringify($prompts)], {
type: 'application/json'
});