fix: new chat load

src/lib/components/chat/SettingsModal.svelte

@@ -50,10 +50,12 @@
 		if (API_BASE_URL === '') {
 			API_BASE_URL = BUILD_TIME_API_BASE_URL;
 		}
-		const res = await getModels(API_BASE_URL, 'ollama');
+		const _models = await getModels(API_BASE_URL, 'ollama');
 
-		if (res) {
+		if (_models.length > 0) {
 			toast.success('Server connection verified');
+			await models.set(_models);
+
 			saveSettings({
 				API_BASE_URL: API_BASE_URL
 			});

src/lib/components/layout/Navbar.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+	import { v4 as uuidv4 } from 'uuid';
+
 	import { goto } from '$app/navigation';
+	import { chatId } from '$lib/stores';
 
 	export let title: string = 'Ollama Web UI';
 </script>
@@ -14,8 +17,10 @@
 					<div class="pr-2">
 						<button
 							class=" cursor-pointer p-1 flex dark:hover:bg-gray-700 rounded-lg transition"
-							on:click={() => {
-								location.href = '/';
+							on:click={async () => {
+								console.log('newChat');
+								goto('/');
+								await chatId.set(uuidv4());
 							}}
 						>
 							<div class=" m-auto self-center">

src/lib/components/layout/Sidebar.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { v4 as uuidv4 } from 'uuid';
+
 	import { goto, invalidateAll } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { user, db, chats, showSettings, chatId } from '$lib/stores';
@@ -168,8 +170,10 @@
 		<div class="px-2.5 flex justify-center space-x-2">
 			<button
 				class="flex-grow flex justify-between rounded-md px-3 py-1.5 my-2 hover:bg-gray-900 transition"
-				on:click={() => {
-					location.href = '/';
+				on:click={async () => {
+					goto('/');
+
+					await chatId.set(uuidv4());
 					// createNewChat();
 				}}
 			>

src/routes/(app)/+page.svelte

@@ -41,8 +41,11 @@
 	}
 
 	onMount(async () => {
-		console.log();
-		await initNewChat();
+		await chatId.set(uuidv4());
+
+		chatId.subscribe(async () => {
+			await initNewChat();
+		});
 	});
 
 	//////////////////////////
@@ -50,8 +53,6 @@
 	//////////////////////////
 
 	const initNewChat = async () => {
-		await chatId.set(uuidv4());
-
 		console.log($chatId);
 
 		autoScroll = true;

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

@@ -91,6 +91,8 @@
 			if (messages.length > 0) {
 				history.messages[messages.at(-1).id].done = true;
 			}
+			await tick();
+
 			return chat;
 		} else {
 			return null;
@@ -503,17 +505,19 @@
 	}}
 />
 
-<Navbar {title} />
-<div class="min-h-screen w-full flex justify-center">
-	<div class=" py-2.5 flex flex-col justify-between w-full">
-		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">
-			<ModelSelector bind:selectedModels disabled={messages.length > 0} />
+{#if loaded}
+	<Navbar {title} />
+	<div class="min-h-screen w-full flex justify-center">
+		<div class=" py-2.5 flex flex-col justify-between w-full">
+			<div class="max-w-2xl mx-auto w-full px-3 md:px-0 mt-10">
+				<ModelSelector bind:selectedModels disabled={messages.length > 0} />
+			</div>
+
+			<div class=" h-full mt-10 mb-32 w-full flex flex-col">
+				<Messages bind:history bind:messages bind:autoScroll {sendPrompt} {regenerateResponse} />
+			</div>
 		</div>
 
-		<div class=" h-full mt-10 mb-32 w-full flex flex-col">
-			<Messages bind:history bind:messages bind:autoScroll {sendPrompt} {regenerateResponse} />
-		</div>
+		<MessageInput bind:prompt bind:autoScroll {messages} {submitPrompt} {stopResponse} />
 	</div>
-
-	<MessageInput bind:prompt bind:autoScroll {messages} {submitPrompt} {stopResponse} />
-</div>
+{/if}