Add start chat button on models & assistants. (#963)

* Add start chat on models & assistants

* bg bit darker for vis

* show "New Chat" button regardless of active

---------

Co-authored-by: Victor Mustar <victor.mustar@gmail.com>

src/routes/settings/(nav)/[...model]/+page.svelte

@@ -8,6 +8,9 @@
 	import TokensCounter from "$lib/components/TokensCounter.svelte";
 	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
 	import CarbonLink from "~icons/carbon/link";
+	import CarbonChat from "~icons/carbon/chat";
+
+	import { goto } from "$app/navigation";
 
 	const settings = useSettingsStore();
 
@@ -23,8 +26,6 @@
 		$settings.customPrompts[$page.params.model] !==
 		$page.data.models.find((el: BackendModel) => el.id === $page.params.model)?.preprompt;
 
-	$: isActive = $settings.activeModel === $page.params.model;
-
 	$: model = $page.data.models.find((el: BackendModel) => el.id === $page.params.model);
 </script>
 
@@ -88,16 +89,17 @@
 	</div>
 
 	<button
-		class="{isActive
-			? 'bg-gray-100'
-			: 'bg-black text-white'} my-8 flex items-center rounded-full px-3 py-1"
-		disabled={isActive}
+		class="my-2 flex w-fit items-center rounded-full bg-black px-3 py-1 text-base !text-white"
 		name="Activate model"
 		on:click|stopPropagation={() => {
-			$settings.activeModel = $page.params.model;
+			settings.instantSet({
+				activeModel: $page.params.model,
+			});
+			goto(`${base}/`);
 		}}
 	>
-		{isActive ? "Active model" : "Activate"}
+		<CarbonChat class="mr-1.5 text-sm" />
+		New chat
 	</button>
 
 	<div class="relative flex w-full flex-col gap-2">

src/routes/settings/(nav)/assistants/[assistantId]/+page.svelte

@@ -2,6 +2,7 @@
 	import { enhance } from "$app/forms";
 	import { base } from "$app/paths";
 	import { page } from "$app/stores";
+	import { goto } from "$app/navigation";
 	import { env as envPublic } from "$env/dynamic/public";
 	import { useSettingsStore } from "$lib/stores/settings";
 	import type { PageData } from "./$types";
@@ -11,8 +12,10 @@
 	import CarbonCopy from "~icons/carbon/copy-file";
 	import CarbonFlag from "~icons/carbon/flag";
 	import CarbonLink from "~icons/carbon/link";
+	import CarbonChat from "~icons/carbon/chat";
 	import CarbonStar from "~icons/carbon/star";
 	import CarbonTools from "~icons/carbon/tools";
+
 	import CopyToClipBoardBtn from "$lib/components/CopyToClipBoardBtn.svelte";
 	import ReportModal from "./ReportModal.svelte";
 	import IconInternet from "$lib/components/icons/IconInternet.svelte";
@@ -24,8 +27,6 @@
 
 	const settings = useSettingsStore();
 
-	$: isActive = $settings.activeModel === $page.params.assistantId;
-
 	const prefix =
 		envPublic.PUBLIC_SHARE_PREFIX || `${envPublic.PUBLIC_ORIGIN || $page.url.origin}${base}`;
 
@@ -98,16 +99,17 @@
 				class="flex items-center gap-4 whitespace-nowrap text-sm text-gray-500 hover:*:text-gray-800"
 			>
 				<button
-					class="{isActive
-						? 'bg-gray-100 text-gray-800'
-						: 'bg-black !text-white'} my-2 flex w-fit items-center rounded-full px-3 py-1 text-base"
-					disabled={isActive}
+					class="my-2 flex w-fit items-center rounded-full bg-black px-3 py-1 text-base !text-white"
 					name="Activate model"
 					on:click|stopPropagation={() => {
-						$settings.activeModel = $page.params.assistantId;
+						settings.instantSet({
+							activeModel: $page.params.assistantId,
+						});
+						goto(`${base}/`);
 					}}
 				>
-					{isActive ? "Active" : "Activate"}
+					<CarbonChat class="mr-1.5 text-sm" />
+					New chat
 				</button>
 				{#if assistant?.createdByMe}
 					<a href="{base}/settings/assistants/{assistant?._id}/edit" class="underline"