Major bump to sveltekit & node-adapter versions (#1395)

* version bump

* sveltekit2 bump

* formatting

* fix imports

* fix deps

* minor bump on chat-ui itself

* better error logging

* bump svelte-check version

Author: nsarrazin

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "chat-ui",
-	"version": "0.9.1",
+	"version": "0.9.2",
 	"private": true,
 	"packageManager": "[email protected]",
 	"scripts": {
@@ -20,14 +20,15 @@
 		"@faker-js/faker": "^8.4.1",
 		"@iconify-json/carbon": "^1.1.16",
 		"@iconify-json/eos-icons": "^1.1.6",
-		"@sveltejs/adapter-node": "^1.3.1",
-		"@sveltejs/kit": "^1.30.4",
+		"@sveltejs/adapter-node": "^5.2.0",
+		"@sveltejs/kit": "^2.5.20",
 		"@tailwindcss/typography": "^0.5.9",
 		"@types/dompurify": "^3.0.5",
 		"@types/express": "^4.17.21",
 		"@types/js-yaml": "^4.0.9",
 		"@types/jsdom": "^21.1.1",
 		"@types/minimist": "^1.2.5",
+		"@types/node": "^22.1.0",
 		"@types/parquetjs": "^0.10.3",
 		"@types/sbd": "^1.0.5",
 		"@types/uuid": "^9.0.8",
@@ -44,13 +45,13 @@
 		"prettier-plugin-svelte": "^2.10.1",
 		"prettier-plugin-tailwindcss": "^0.2.7",
 		"prom-client": "^15.1.2",
-		"svelte": "^4.2.8",
-		"svelte-check": "^3.6.2",
+		"svelte": "^4.2.18",
+		"svelte-check": "^3.8.5",
 		"ts-node": "^10.9.1",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"unplugin-icons": "^0.16.1",
-		"vite": "^4.5.3",
+		"vite": "^5.3.5",
 		"vite-node": "^1.3.1",
 		"vitest": "^0.31.0"
 	},
@@ -72,6 +73,7 @@
 		"dotenv": "^16.0.3",
 		"express": "^4.19.2",
 		"file-type": "^19.0.0",
+		"google-auth-library": "^9.13.0",
 		"handlebars": "^4.7.8",
 		"highlight.js": "^11.7.0",
 		"husky": "^9.0.11",
@@ -99,12 +101,12 @@
 		"sharp": "^0.33.4",
 		"tailwind-scrollbar": "^3.0.0",
 		"tailwindcss": "^3.4.0",
-		"uuid": "^9.0.1",
+		"uuid": "^10.0.0",
 		"zod": "^3.22.3"
 	},
 	"optionalDependencies": {
-		"@anthropic-ai/sdk": "^0.17.1",
-		"@anthropic-ai/vertex-sdk": "^0.3.0",
+		"@anthropic-ai/sdk": "^0.25.0",
+		"@anthropic-ai/vertex-sdk": "^0.4.1",
 		"@google-cloud/vertexai": "^1.1.0",
 		"@google/generative-ai": "^0.14.1",
 		"aws4fetch": "^1.0.17",

package.json

@@ -35,7 +35,7 @@ if (!building) {
 	AbortedGenerations.getInstance();
 }
 
-export const handleError: HandleServerError = async ({ error, event }) => {
+export const handleError: HandleServerError = async ({ error, event, status, message }) => {
 	// handle 404
 
 	if (building) {
@@ -55,8 +55,10 @@ export const handleError: HandleServerError = async ({ error, event }) => {
 		url: event.request.url,
 		params: event.params,
 		request: event.request,
+		message,
 		error,
 		errorId,
+		status,
 	});
 
 	return {

src/hooks.server.ts

@@ -5,7 +5,7 @@
 
 <button
 	on:click
-	class="{classNames} group flex h-16 w-6 flex-col items-center justify-center -space-y-1 outline-none *:h-3 *:w-1 *:rounded-full *:hover:bg-gray-300 max-md:hidden dark:*:hover:bg-gray-600 {!isCollapsed
+	class="{classNames} group flex h-16 w-6 flex-col items-center justify-center -space-y-1 outline-none *:h-3 *:w-1 *:rounded-full *:hover:bg-gray-300 dark:*:hover:bg-gray-600 max-md:hidden {!isCollapsed
 		? '*:bg-gray-200/70 dark:*:bg-gray-800'
 		: '*:bg-gray-200 dark:*:bg-gray-700'}"
 >

src/lib/components/ExpandNavigation.svelte

@@ -31,7 +31,7 @@
 </script>
 
 <nav
-	class="flex h-12 items-center justify-between border-b bg-gray-50 px-3 md:hidden dark:border-gray-800 dark:bg-gray-800/70"
+	class="flex h-12 items-center justify-between border-b bg-gray-50 px-3 dark:border-gray-800 dark:bg-gray-800/70 md:hidden"
 >
 	<button
 		type="button"

src/lib/components/MobileNav.svelte

@@ -25,7 +25,7 @@
 		confirmDelete = false;
 	}}
 	href="{base}/conversation/{conv.id}"
-	class="group flex h-10 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-600 hover:bg-gray-100 sm:h-[2.35rem] dark:text-gray-300 dark:hover:bg-gray-700 {conv.id ===
+	class="group flex h-10 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 sm:h-[2.35rem] {conv.id ===
 	$page.params.id
 		? 'bg-gray-100 dark:bg-gray-700'
 		: ''}"

src/lib/components/NavConversationItem.svelte

@@ -57,13 +57,13 @@
 	<a
 		href={`${base}/`}
 		on:click={handleNewChatClick}
-		class="flex rounded-lg border bg-white px-2 py-0.5 text-center shadow-sm hover:shadow-none sm:text-smd dark:border-gray-600 dark:bg-gray-700"
+		class="flex rounded-lg border bg-white px-2 py-0.5 text-center shadow-sm hover:shadow-none dark:border-gray-600 dark:bg-gray-700 sm:text-smd"
 	>
 		New Chat
 	</a>
 </div>
 <div
-	class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl from-gray-50 px-3 pb-3 pt-2 text-[.9rem] max-sm:bg-gradient-to-t md:bg-gradient-to-l dark:from-gray-800/30"
+	class="scrollbar-custom flex flex-col gap-1 overflow-y-auto rounded-r-xl from-gray-50 px-3 pb-3 pt-2 text-[.9rem] dark:from-gray-800/30 max-sm:bg-gradient-to-t md:bg-gradient-to-l"
 >
 	{#each Object.entries(groupedConversations) as [group, convs]}
 		{#if convs.length}
@@ -92,7 +92,7 @@
 			{#if !user.logoutDisabled}
 				<button
 					type="submit"
-					class="ml-auto h-6 flex-none items-center gap-1.5 rounded-md border bg-white px-2 text-gray-700 shadow-sm group-hover:flex hover:shadow-none md:hidden dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-300"
+					class="ml-auto h-6 flex-none items-center gap-1.5 rounded-md border bg-white px-2 text-gray-700 shadow-sm group-hover:flex hover:shadow-none dark:border-gray-600 dark:bg-gray-600 dark:text-gray-400 dark:hover:text-gray-300 md:hidden"
 				>
 					Sign Out
 				</button>

src/lib/components/NavMenu.svelte

@@ -57,7 +57,7 @@
 {#if numTotalPages > 1}
 	<nav>
 		<ul
-			class="flex select-none items-center justify-between space-x-2 text-gray-700 sm:justify-center dark:text-gray-300 {classNames}"
+			class="flex select-none items-center justify-between space-x-2 text-gray-700 dark:text-gray-300 sm:justify-center {classNames}"
 		>
 			<li>
 				<PaginationArrow

src/lib/components/Pagination.svelte

@@ -67,7 +67,7 @@
 				/>
 			{:else}
 				<div
-					class="flex size-12 flex-none items-center justify-center rounded-full bg-gray-300 object-cover text-xl font-bold uppercase text-gray-500 max-sm:self-start sm:text-4xl md:size-32 dark:bg-gray-600"
+					class="flex size-12 flex-none items-center justify-center rounded-full bg-gray-300 object-cover text-xl font-bold uppercase text-gray-500 dark:bg-gray-600 max-sm:self-start sm:text-4xl md:size-32"
 				>
 					{assistant?.name[0]}
 				</div>
@@ -116,7 +116,7 @@
 		<div class="absolute right-3 top-3 md:right-4 md:top-4">
 			<div class="flex flex-row items-center gap-1">
 				<button
-					class="flex h-7 items-center gap-1.5 rounded-full border bg-white px-2.5 py-1 text-gray-800 shadow-sm hover:shadow-inner max-sm:px-1.5 md:text-sm dark:border-gray-700 dark:bg-gray-700 dark:text-gray-300/90 dark:hover:bg-gray-800"
+					class="flex h-7 items-center gap-1.5 rounded-full border bg-white px-2.5 py-1 text-gray-800 shadow-sm hover:shadow-inner dark:border-gray-700 dark:bg-gray-700 dark:text-gray-300/90 dark:hover:bg-gray-800 max-sm:px-1.5 md:text-sm"
 					on:click={() => {
 						if (!isCopied) {
 							share(shareUrl, assistant.name);
@@ -137,7 +137,7 @@
 				</button>
 				<a
 					href="{base}/settings/assistants/{assistant._id.toString()}"
-					class="flex h-7 items-center gap-1.5 rounded-full border bg-white px-2.5 py-1 text-gray-800 shadow-sm hover:shadow-inner md:text-sm dark:border-gray-700 dark:bg-gray-700 dark:text-gray-300/90 dark:hover:bg-gray-800"
+					class="flex h-7 items-center gap-1.5 rounded-full border bg-white px-2.5 py-1 text-gray-800 shadow-sm hover:shadow-inner dark:border-gray-700 dark:bg-gray-700 dark:text-gray-300/90 dark:hover:bg-gray-800 md:text-sm"
 					><IconGear class="text-xxs" />Settings</a
 				>
 			</div>

src/lib/components/chat/AssistantIntroduction.svelte

@@ -86,7 +86,7 @@
 				{#each currentModelMetadata.promptExamples as example}
 					<button
 						type="button"
-						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"
+						class="rounded-xl border bg-gray-50 p-3 text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 max-xl:text-sm xl:p-3.5"
 						on:click={() => dispatch("message", example.prompt)}
 					>
 						{example.title}