Merge pull request #95 from ollama-webui/dev

feat: scroll to bottom button added

src/routes/+page.svelte

@@ -259,6 +259,7 @@
 	const createNewChat = async (init = false) => {
 		if (init || messages.length > 0) {
 			chatId = uuidv4();
+			autoScroll = true;
 			messages = [];
 			title = '';
 
@@ -1331,11 +1332,37 @@
 			</div>
 
 			<div class="fixed bottom-0 w-full">
-				<div class=" bg-gradient-to-t from-white dark:from-gray-800 from-40% pt-5">
+				<div class="  pt-5">
-					<div class="max-w-3xl px-2.5 pt-2.5 pb-2 -mb-0.5 mx-auto inset-x-0">
+					<div class="max-w-3xl px-2.5 pt-2.5 -mb-0.5 mx-auto inset-x-0">
 						{#if messages.length == 0 && suggestions !== 'false'}
 							<Suggestions {submitPrompt} />
 						{/if}
+
+						{#if autoScroll === false}
+							<div class=" flex justify-center mb-4">
+								<button
+									class=" bg-white/20 p-1.5 rounded-full"
+									on:click={() => {
+										window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+									}}
+								>
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 20 20"
+										fill="currentColor"
+										class="w-5 h-5"
+									>
+										<path
+											fill-rule="evenodd"
+											d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+								</button>
+							</div>
+						{/if}
+
+						<div class="bg-gradient-to-t from-white dark:from-gray-800 from-40% pb-2">
 							<form
 								class=" flex relative w-full"
 								on:submit|preventDefault={() => {
@@ -1509,6 +1536,7 @@
 				</div>
 			</div>
 		</div>
+	</div>
 </div>
 
 <style>