forked from open-webui/open-webui
		
	Merge pull request #992 from jannikstdl/bottom-scroll
show chat in browser title + scroll to bottom
This commit is contained in:
		
						commit
						8310392c9d
					
				
					 7 changed files with 53 additions and 5 deletions
				
			
		|  | @ -14,6 +14,7 @@ | ||||||
| 		chats, | 		chats, | ||||||
| 		chatId, | 		chatId, | ||||||
| 		config, | 		config, | ||||||
|  | 		WEBUI_NAME, | ||||||
| 		tags as _tags | 		tags as _tags | ||||||
| 	} from '$lib/stores'; | 	} from '$lib/stores'; | ||||||
| 	import { copyToClipboard, splitStream } from '$lib/utils'; | 	import { copyToClipboard, splitStream } from '$lib/utils'; | ||||||
|  | @ -38,7 +39,6 @@ | ||||||
| 	import { RAGTemplate } from '$lib/utils/rag'; | 	import { RAGTemplate } from '$lib/utils/rag'; | ||||||
| 	import { LITELLM_API_BASE_URL, OPENAI_API_BASE_URL } from '$lib/constants'; | 	import { LITELLM_API_BASE_URL, OPENAI_API_BASE_URL } from '$lib/constants'; | ||||||
| 	import { WEBUI_BASE_URL } from '$lib/constants'; | 	import { WEBUI_BASE_URL } from '$lib/constants'; | ||||||
| 
 |  | ||||||
| 	let stopResponseFlag = false; | 	let stopResponseFlag = false; | ||||||
| 	let autoScroll = true; | 	let autoScroll = true; | ||||||
| 	let processing = ''; | 	let processing = ''; | ||||||
|  | @ -809,6 +809,14 @@ | ||||||
| 	}; | 	}; | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
|  | <svelte:head> | ||||||
|  | 	<title> | ||||||
|  | 		{title | ||||||
|  | 			? `${title.length > 30 ? `${title.slice(0, 30)}...` : title} | ${$WEBUI_NAME}` | ||||||
|  | 			: `${$WEBUI_NAME}`} | ||||||
|  | 	</title> | ||||||
|  | </svelte:head> | ||||||
|  | 
 | ||||||
| <div class="h-screen max-h-[100dvh] w-full flex flex-col"> | <div class="h-screen max-h-[100dvh] w-full flex flex-col"> | ||||||
| 	<Navbar {title} shareEnabled={messages.length > 0} {initNewChat} {tags} {addTag} {deleteTag} /> | 	<Navbar {title} shareEnabled={messages.length > 0} {initNewChat} {tags} {addTag} {deleteTag} /> | ||||||
| 	<div class="flex flex-col flex-auto"> | 	<div class="flex flex-col flex-auto"> | ||||||
|  |  | ||||||
|  | @ -1,6 +1,6 @@ | ||||||
| <script> | <script> | ||||||
| 	import { WEBUI_API_BASE_URL } from '$lib/constants'; | 	import { WEBUI_API_BASE_URL } from '$lib/constants'; | ||||||
| 	import { config, user } from '$lib/stores'; | 	import { WEBUI_NAME, config, user } from '$lib/stores'; | ||||||
| 	import { goto } from '$app/navigation'; | 	import { goto } from '$app/navigation'; | ||||||
| 	import { onMount } from 'svelte'; | 	import { onMount } from 'svelte'; | ||||||
| 
 | 
 | ||||||
|  | @ -61,6 +61,12 @@ | ||||||
| 	}); | 	}); | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
|  | <svelte:head> | ||||||
|  | 	<title> | ||||||
|  | 		{`Admin Panel | ${$WEBUI_NAME}`} | ||||||
|  | 	</title> | ||||||
|  | </svelte:head> | ||||||
|  | 
 | ||||||
| {#key selectedUser} | {#key selectedUser} | ||||||
| 	<EditUserModal | 	<EditUserModal | ||||||
| 		bind:show={showEditUserModal} | 		bind:show={showEditUserModal} | ||||||
|  |  | ||||||
|  | @ -14,6 +14,7 @@ | ||||||
| 		chats, | 		chats, | ||||||
| 		chatId, | 		chatId, | ||||||
| 		config, | 		config, | ||||||
|  | 		WEBUI_NAME, | ||||||
| 		tags as _tags | 		tags as _tags | ||||||
| 	} from '$lib/stores'; | 	} from '$lib/stores'; | ||||||
| 	import { copyToClipboard, splitStream, convertMessagesToHistory } from '$lib/utils'; | 	import { copyToClipboard, splitStream, convertMessagesToHistory } from '$lib/utils'; | ||||||
|  | @ -100,6 +101,7 @@ | ||||||
| 				await tick(); | 				await tick(); | ||||||
| 				loaded = true; | 				loaded = true; | ||||||
| 
 | 
 | ||||||
|  | 				window.setTimeout(() => scrollToBottom(), 0); | ||||||
| 				const chatInput = document.getElementById('chat-textarea'); | 				const chatInput = document.getElementById('chat-textarea'); | ||||||
| 				chatInput?.focus(); | 				chatInput?.focus(); | ||||||
| 			} else { | 			} else { | ||||||
|  | @ -823,6 +825,14 @@ | ||||||
| 	}); | 	}); | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
|  | <svelte:head> | ||||||
|  | 	<title> | ||||||
|  | 		{title | ||||||
|  | 			? `${title.length > 30 ? `${title.slice(0, 30)}...` : title} | ${$WEBUI_NAME}` | ||||||
|  | 			: `${$WEBUI_NAME}`} | ||||||
|  | 	</title> | ||||||
|  | </svelte:head> | ||||||
|  | 
 | ||||||
| {#if loaded} | {#if loaded} | ||||||
| 	<div class="min-h-screen max-h-screen w-full flex flex-col"> | 	<div class="min-h-screen max-h-screen w-full flex flex-col"> | ||||||
| 		<Navbar | 		<Navbar | ||||||
|  |  | ||||||
|  | @ -4,7 +4,7 @@ | ||||||
| 	const { saveAs } = fileSaver; | 	const { saveAs } = fileSaver; | ||||||
| 
 | 
 | ||||||
| 	import { onMount } from 'svelte'; | 	import { onMount } from 'svelte'; | ||||||
| 	import { documents } from '$lib/stores'; | 	import { WEBUI_NAME, documents } from '$lib/stores'; | ||||||
| 	import { createNewDoc, deleteDocByName, getDocs } from '$lib/apis/documents'; | 	import { createNewDoc, deleteDocByName, getDocs } from '$lib/apis/documents'; | ||||||
| 
 | 
 | ||||||
| 	import { SUPPORTED_FILE_TYPE, SUPPORTED_FILE_EXTENSIONS } from '$lib/constants'; | 	import { SUPPORTED_FILE_TYPE, SUPPORTED_FILE_EXTENSIONS } from '$lib/constants'; | ||||||
|  | @ -148,6 +148,12 @@ | ||||||
| 	); | 	); | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
|  | <svelte:head> | ||||||
|  | 	<title> | ||||||
|  | 		{`Documents | ${$WEBUI_NAME}`} | ||||||
|  | 	</title> | ||||||
|  | </svelte:head> | ||||||
|  | 
 | ||||||
| {#if dragged} | {#if dragged} | ||||||
| 	<div | 	<div | ||||||
| 		class="fixed w-full h-full flex z-50 touch-none pointer-events-none" | 		class="fixed w-full h-full flex z-50 touch-none pointer-events-none" | ||||||
|  |  | ||||||
|  | @ -5,7 +5,7 @@ | ||||||
| 
 | 
 | ||||||
| 	import { onMount } from 'svelte'; | 	import { onMount } from 'svelte'; | ||||||
| 
 | 
 | ||||||
| 	import { modelfiles, settings, user } from '$lib/stores'; | 	import { WEBUI_NAME, modelfiles, settings, user } from '$lib/stores'; | ||||||
| 	import { createModel, deleteModel } from '$lib/apis/ollama'; | 	import { createModel, deleteModel } from '$lib/apis/ollama'; | ||||||
| 	import { | 	import { | ||||||
| 		createNewModelfile, | 		createNewModelfile, | ||||||
|  | @ -69,6 +69,12 @@ | ||||||
| 	}); | 	}); | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
|  | <svelte:head> | ||||||
|  | 	<title> | ||||||
|  | 		{`Modelfiles | ${$WEBUI_NAME}`} | ||||||
|  | 	</title> | ||||||
|  | </svelte:head> | ||||||
|  | 
 | ||||||
| <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | ||||||
| 	<div class="flex flex-col justify-between w-full overflow-y-auto"> | 	<div class="flex flex-col justify-between w-full overflow-y-auto"> | ||||||
| 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> | 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> | ||||||
|  |  | ||||||
|  | @ -4,7 +4,7 @@ | ||||||
| 	const { saveAs } = fileSaver; | 	const { saveAs } = fileSaver; | ||||||
| 
 | 
 | ||||||
| 	import { onMount } from 'svelte'; | 	import { onMount } from 'svelte'; | ||||||
| 	import { prompts } from '$lib/stores'; | 	import { WEBUI_NAME, prompts } from '$lib/stores'; | ||||||
| 	import { createNewPrompt, deletePromptByCommand, getPrompts } from '$lib/apis/prompts'; | 	import { createNewPrompt, deletePromptByCommand, getPrompts } from '$lib/apis/prompts'; | ||||||
| 	import { error } from '@sveltejs/kit'; | 	import { error } from '@sveltejs/kit'; | ||||||
| 	import { goto } from '$app/navigation'; | 	import { goto } from '$app/navigation'; | ||||||
|  | @ -36,6 +36,12 @@ | ||||||
| 	}; | 	}; | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
|  | <svelte:head> | ||||||
|  | 	<title> | ||||||
|  | 		{`Prompts | ${$WEBUI_NAME}`} | ||||||
|  | 	</title> | ||||||
|  | </svelte:head> | ||||||
|  | 
 | ||||||
| <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> | ||||||
| 	<div class="flex flex-col justify-between w-full overflow-y-auto"> | 	<div class="flex flex-col justify-between w-full overflow-y-auto"> | ||||||
| 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> | 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> | ||||||
|  |  | ||||||
|  | @ -57,6 +57,12 @@ | ||||||
| 	}); | 	}); | ||||||
| </script> | </script> | ||||||
| 
 | 
 | ||||||
|  | <svelte:head> | ||||||
|  | 	<title> | ||||||
|  | 		{`${$WEBUI_NAME}`} | ||||||
|  | 	</title> | ||||||
|  | </svelte:head> | ||||||
|  | 
 | ||||||
| {#if loaded} | {#if loaded} | ||||||
| 	<div class="fixed m-10 z-50"> | 	<div class="fixed m-10 z-50"> | ||||||
| 		<div class="flex space-x-2"> | 		<div class="flex space-x-2"> | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue
	
	 Timothy Jaeryang Baek
						Timothy Jaeryang Baek