/models tweaks (#864)

* direct link to new chat

* mobile spacing

* show model logo on new chat

* temp: hide "new chat"

* exemples tweak

Author: gary149

src/lib/components/MobileNav.svelte

@@ -12,7 +12,7 @@
 	export let isOpen = false;
 	export let title: string | undefined;
 
-	$: title = title || "New Chat";
+	$: title = title ?? "New Chat";
 
 	let closeEl: HTMLButtonElement;
 	let openEl: HTMLButtonElement;

src/lib/components/chat/ChatIntroduction.svelte

@@ -59,7 +59,18 @@
 			<div class="flex p-3">
 				<div>
 					<div class="text-sm text-gray-600 dark:text-gray-400">Current Model</div>
-					<div class="font-semibold">{currentModel.displayName}</div>
+					<div class="flex items-center gap-1.5 font-semibold max-sm:text-smd">
+						{#if currentModel.logoUrl}
+							<img
+								class=" overflown aspect-square size-4 rounded border dark:border-gray-700"
+								src={currentModel.logoUrl}
+								alt=""
+							/>
+						{:else}
+							<div class="size-4 rounded border border-transparent bg-gray-300 dark:bg-gray-800" />
+						{/if}
+						{currentModel.displayName}
+					</div>
 				</div>
 				<a
 					href="{base}/settings/{currentModel.id}"
@@ -77,7 +88,7 @@
 				{#each currentModelMetadata.promptExamples as example}
 					<button
 						type="button"
-						class="rounded-xl border bg-gray-50 p-2.5 text-gray-600 hover:bg-gray-100 sm:p-4 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+						class="rounded-xl border bg-gray-50 p-3 text-gray-600 hover:bg-gray-100 max-xl:text-sm xl:p-3.5 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
 						on:click={() => dispatch("message", example.prompt)}
 					>
 						{example.title}

src/routes/+layout.svelte

@@ -118,6 +118,10 @@
 		}
 		$settings.activeModel = $page.url.searchParams.get("model") ?? $settings.activeModel;
 	}
+
+	$: mobileNavTitle = ["/models", "/assistants", "/privacy"].includes($page.route.id ?? "")
+		? ""
+		: data.conversations.find((conv) => conv.id === $page.params.id)?.title;
 </script>
 
 <svelte:head>
@@ -173,11 +177,7 @@
 <div
 	class="grid h-full w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd md:grid-cols-[280px,1fr] md:grid-rows-[1fr] dark:text-gray-300"
 >
-	<MobileNav
-		isOpen={isNavOpen}
-		on:toggle={(ev) => (isNavOpen = ev.detail)}
-		title={data.conversations.find((conv) => conv.id === $page.params.id)?.title}
-	>
+	<MobileNav isOpen={isNavOpen} on:toggle={(ev) => (isNavOpen = ev.detail)} title={mobileNavTitle}>
 		<NavMenu
 			conversations={data.conversations}
 			user={data.user}

src/routes/assistants/+page.svelte

@@ -50,7 +50,7 @@
 	{/if}
 </svelte:head>
 
-<div class="scrollbar-custom mr-1 h-full overflow-y-auto py-12 md:py-24">
+<div class="scrollbar-custom mr-1 h-full overflow-y-auto py-12 max-sm:pt-8 md:py-24">
 	<div class="pt-42 mx-auto flex flex-col px-5 xl:w-[60rem] 2xl:w-[64rem]">
 		<div class="flex items-center">
 			<h1 class="text-2xl font-bold">Assistants</h1>

src/routes/models/+page.svelte

@@ -22,7 +22,7 @@
 	{/if}
 </svelte:head>
 
-<div class="scrollbar-custom mr-1 h-full overflow-y-auto py-12 md:py-24">
+<div class="scrollbar-custom mr-1 h-full overflow-y-auto py-12 max-sm:pt-8 md:py-24">
 	<div class="pt-42 mx-auto flex flex-col px-5 xl:w-[60rem] 2xl:w-[64rem]">
 		<div class="flex items-center">
 			<h1 class="text-2xl font-bold">Models</h1>
@@ -40,7 +40,7 @@
 		<dl class="mt-8 grid grid-cols-1 gap-3 sm:gap-5 xl:grid-cols-2">
 			{#each data.models.filter((el) => !el.unlisted) as model, index (model.id)}
 				<a
-					href="{base}/settings/{model.id}"
+					href="{base}/?model={model.id}"
 					class="relative flex flex-col gap-2 overflow-hidden rounded-xl border bg-gray-50/50 px-6 py-5 shadow hover:bg-gray-50 hover:shadow-inner dark:border-gray-800/70 dark:bg-gray-950/20 dark:hover:bg-gray-950/40"
 				>
 					<div class="flex items-center justify-between">