feat(conv): let user switch models on conversations with deprecated models (#1462)

* feat(conv): let user switch models on conversations with deprecated models

* lint

* fix checks

Author: nsarrazin

src/lib/components/chat/ChatWindow.svelte

@@ -35,6 +35,7 @@
 	import UploadedFile from "./UploadedFile.svelte";
 	import { useSettingsStore } from "$lib/stores/settings";
 	import type { ToolFront } from "$lib/types/Tool";
+	import ModelSwitch from "./ModelSwitch.svelte";
 
 	export let messages: Message[] = [];
 	export let loading = false;
@@ -279,6 +280,9 @@
 						on:vote
 						on:continue
 					/>
+					{#if isReadOnly}
+						<ModelSwitch {models} {currentModel} />
+					{/if}
 				</div>
 			{:else if pending}
 				<ChatMessage
@@ -403,9 +407,7 @@
 							<ChatInput value="Sorry, something went wrong. Please try again." disabled={true} />
 						{:else}
 							<ChatInput
-								placeholder={isReadOnly
-									? "This conversation is read-only. Start a new one to continue!"
-									: "Ask anything"}
+								placeholder={isReadOnly ? "This conversation is read-only." : "Ask anything"}
 								bind:value={message}
 								on:submit={handleSubmit}
 								on:beforeinput={(ev) => {

src/lib/components/chat/ModelSwitch.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	import { invalidateAll } from "$app/navigation";
+	import { page } from "$app/stores";
+	import { base } from "$app/paths";
+	import type { Model } from "$lib/types/Model";
+
+	export let models: Model[];
+	export let currentModel: Model;
+
+	let selectedModelId = models.map((m) => m.id).includes(currentModel.id)
+		? currentModel.id
+		: models[0].id;
+
+	async function handleModelChange() {
+		if (!$page.params.id) return;
+
+		try {
+			const response = await fetch(`${base}/conversation/${$page.params.id}`, {
+				method: "PATCH",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({ model: selectedModelId }),
+			});
+
+			if (!response.ok) {
+				throw new Error("Failed to update model");
+			}
+
+			await invalidateAll();
+		} catch (error) {
+			console.error(error);
+		}
+	}
+</script>
+
+<div
+	class="mx-auto mt-0 flex w-fit flex-col items-center justify-center gap-2 rounded-lg border border-gray-200 bg-gray-500/20 p-4 dark:border-gray-800"
+>
+	<span>
+		This model is no longer available. Switch to a new one to continue this conversation:
+	</span>
+	<div class="flex items-center space-x-2">
+		<select
+			bind:value={selectedModelId}
+			class="rounded-md bg-gray-100 px-2 py-1 dark:bg-gray-900 max-sm:max-w-32"
+		>
+			{#each models as model}
+				<option value={model.id}>{model.name}</option>
+			{/each}
+		</select>
+		<button
+			on:click={handleModelChange}
+			disabled={selectedModelId === currentModel.id}
+			class="rounded-md bg-gray-100 px-2 py-1 dark:bg-gray-900"
+		>
+			Accept
+		</button>
+	</div>
+</div>

src/lib/server/models.ts

@@ -321,7 +321,7 @@ export const models: ProcessedModel[] = await Promise.all(
 );
 
 // super ugly but not sure how to make typescript happier
-const validModelIdSchema = z.enum(models.map((m) => m.id) as [string, ...string[]]);
+export const validModelIdSchema = z.enum(models.map((m) => m.id) as [string, ...string[]]);
 
 export const defaultModel = models[0];
 

src/routes/conversation/[id]/+server.ts

@@ -2,7 +2,7 @@ import { env } from "$env/dynamic/private";
 import { startOfHour } from "date-fns";
 import { authCondition, requiresUser } from "$lib/server/auth";
 import { collections } from "$lib/server/database";
-import { models } from "$lib/server/models";
+import { models, validModelIdSchema } from "$lib/server/models";
 import { ERROR_MESSAGES } from "$lib/stores/errors";
 import type { Message } from "$lib/types/Message";
 import { error } from "@sveltejs/kit";
@@ -513,8 +513,11 @@ export async function DELETE({ locals, params }) {
 }
 
 export async function PATCH({ request, locals, params }) {
-	const { title } = z
-		.object({ title: z.string().trim().min(1).max(100) })
+	const values = z
+		.object({
+			title: z.string().trim().min(1).max(100).optional(),
+			model: validModelIdSchema.optional(),
+		})
 		.parse(await request.json());
 
 	const convId = new ObjectId(params.id);
@@ -533,9 +536,7 @@ export async function PATCH({ request, locals, params }) {
 			_id: convId,
 		},
 		{
-			$set: {
-				title,
-			},
+			$set: values,
 		}
 	);