Spaces:

jdelavande
/

chat-ui-energy

Running on CPU Upgrade

App Files Files Community

nsarrazin HF Staff commited on Feb 7

Commit

a1a6daf

unverified ·

1 Parent(s): 973387a

chores(svelte): migration to svelte 5 (#1685)

Browse files

* chores(svelte): migration to svelte 5

* chores(svelte5): remove preventDefault & stopPropagation legacy handlers

* chores(deps): version bumps

* fix: closing modal works properly

* fix: messagte loading reactivity

* fix: loading indicator

* fix: conversation list reactivity

* fix: bug on tool logo rendering

* fix: infinite loading circular dep

* feat: hide new chat button on new chats

* fix: move apply directive to main.css

* fix: remove legacy syntax in `TokensCounter.svelte`

* fix: replace legacy `run` with Svelte 5 `$effect` in NavMenu

* fix: replace legacy `run` with Svelte 5 `$effect` in ScrollToPreviousBtn

* fix: migrate `settings/[modelId]` page to Svelte 5 syntax

* fix: replace legacy `run` with Svelte 5 `$effect` in ToolUpdate component

* fix: migrate ToolEdit component to Svelte 5 syntax

* fix: simplify login required handling in ChatInput

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

.prettierrc +0 -1
package-lock.json +0 -0
package.json +12 -11
src/app.html +1 -1
src/lib/components/AnnouncementBanner.svelte +8 -3
src/lib/components/AssistantSettings.svelte +43 -35
src/lib/components/AssistantToolPicker.svelte +22 -8
src/lib/components/CodeBlock.svelte +7 -3
src/lib/components/ContinueBtn.svelte +7 -2
src/lib/components/CopyToClipBoardBtn.svelte +15 -7
src/lib/components/DisclaimerModal.svelte +3 -1
src/lib/components/ExpandNavigation.svelte +10 -5
src/lib/components/HoverTooltip.svelte +9 -4
src/lib/components/InfiniteScroll.svelte +8 -4
src/lib/components/LoginModal.svelte +1 -1
src/lib/components/MobileNav.svelte +30 -17
src/lib/components/Modal.svelte +17 -12
src/lib/components/ModelCardMetadata.svelte +8 -5
src/lib/components/NavConversationItem.svelte +18 -8
src/lib/components/NavMenu.svelte +29 -22
src/lib/components/OpenWebSearchResults.svelte +15 -9
src/lib/components/Pagination.svelte +10 -7
src/lib/components/PaginationArrow.svelte +7 -3
src/lib/components/Portal.svelte +8 -3
src/lib/components/RetryBtn.svelte +7 -2
src/lib/components/ScrollToBottomBtn.svelte +23 -18
src/lib/components/ScrollToPreviousBtn.svelte +26 -19
src/lib/components/StopGeneratingBtn.svelte +7 -2
src/lib/components/Switch.svelte +7 -3
src/lib/components/SystemPromptModal.svelte +10 -6
src/lib/components/Toast.svelte +5 -1
src/lib/components/TokensCounter.svelte +34 -34
src/lib/components/ToolBadge.svelte +8 -2
src/lib/components/ToolLogo.svelte +43 -33
src/lib/components/ToolsMenu.svelte +26 -13
src/lib/components/Tooltip.svelte +12 -4
src/lib/components/UploadBtn.svelte +8 -4
src/lib/components/WebSearchToggle.svelte +2 -2
src/lib/components/chat/Alternatives.svelte +10 -6
src/lib/components/chat/AssistantIntroduction.svelte +29 -24
src/lib/components/chat/ChatInput.svelte +82 -53
src/lib/components/chat/ChatIntroduction.svelte +10 -4
src/lib/components/chat/ChatMessage.svelte +94 -103
src/lib/components/chat/ChatWindow.svelte +105 -65
src/lib/components/chat/FileDropzone.svelte +23 -9
src/lib/components/chat/MarkdownRenderer.svelte +7 -3
src/lib/components/chat/ModelSwitch.svelte +10 -6
src/lib/components/chat/OpenReasoningResults.svelte +7 -3
src/lib/components/chat/ToolUpdate.svelte +57 -49
src/lib/components/chat/UploadedFile.svelte +36 -20

.prettierrc CHANGED Viewed

@@ -3,6 +3,5 @@
 	"trailingComma": "es5",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
-	"pluginSearchDirs": ["."],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

 	"trailingComma": "es5",
 	"printWidth": 100,
 	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

package-lock.json CHANGED Viewed

The diff for this file is too large to render. See raw diff

package.json CHANGED Viewed

@@ -9,8 +9,8 @@
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write .",
 		"test": "vitest",
 		"updateLocalEnv": "node --loader ts-node/esm scripts/updateLocalEnv.ts",
 		"populate": "vite-node --options.transformMode.ssr='/.*/' scripts/populate.ts",
@@ -21,7 +21,8 @@
 		"@iconify-json/carbon": "^1.1.16",
 		"@iconify-json/eos-icons": "^1.1.6",
 		"@sveltejs/adapter-node": "^5.2.0",
-		"@sveltejs/kit": "^2.8.3",
 		"@tailwindcss/typography": "^0.5.9",
 		"@types/dompurify": "^3.0.5",
 		"@types/express": "^4.17.21",
@@ -40,22 +41,22 @@
 		"dompurify": "^3.1.6",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte": "^2.30.0",
 		"isomorphic-dompurify": "^2.13.0",
 		"js-yaml": "^4.1.0",
 		"minimist": "^1.2.8",
 		"mongodb-memory-server": "^10.1.2",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.10.1",
-		"prettier-plugin-tailwindcss": "^0.2.7",
 		"prom-client": "^15.1.2",
-		"svelte": "^4.2.19",
-		"svelte-check": "^3.8.5",
 		"ts-node": "^10.9.1",
 		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
 		"unplugin-icons": "^0.16.1",
-		"vite": "^5.4.14",
 		"vite-node": "^1.3.1",
 		"vitest": "^2.1.9"
 	},

 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write .",
 		"test": "vitest",
 		"updateLocalEnv": "node --loader ts-node/esm scripts/updateLocalEnv.ts",
 		"populate": "vite-node --options.transformMode.ssr='/.*/' scripts/populate.ts",
 		"@iconify-json/carbon": "^1.1.16",
 		"@iconify-json/eos-icons": "^1.1.6",
 		"@sveltejs/adapter-node": "^5.2.0",
+		"@sveltejs/kit": "^2.17.1",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/typography": "^0.5.9",
 		"@types/dompurify": "^3.0.5",
 		"@types/express": "^4.17.21",
 		"dompurify": "^3.1.6",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-svelte": "^2.45.1",
 		"isomorphic-dompurify": "^2.13.0",
 		"js-yaml": "^4.1.0",
 		"minimist": "^1.2.8",
 		"mongodb-memory-server": "^10.1.2",
+		"prettier": "^3.1.0",
+		"prettier-plugin-svelte": "^3.2.6",
+		"prettier-plugin-tailwindcss": "^0.6.11",
 		"prom-client": "^15.1.2",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
 		"ts-node": "^10.9.1",
 		"tslib": "^2.4.1",
+		"typescript": "^5.5.0",
 		"unplugin-icons": "^0.16.1",
+		"vite": "^6.1.0",
 		"vite-node": "^1.3.1",
 		"vitest": "^2.1.9"
 	},

src/app.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
 <html lang="en" class="h-full">
 	<head>
 		<meta charset="utf-8" />

+<!doctype html>
 <html lang="en" class="h-full">
 	<head>
 		<meta charset="utf-8" />

src/lib/components/AnnouncementBanner.svelte CHANGED Viewed

@@ -1,6 +1,11 @@
 <script lang="ts">
-	export let title = "";
-	export let classNames = "";
 </script>
 <div class="flex items-center rounded-xl bg-gray-100 p-1 text-sm dark:bg-gray-800 {classNames}">
@@ -10,6 +15,6 @@
 	>
 	{title}
 	<div class="ml-auto shrink-0">
-		<slot />
 	</div>
 </div>

 <script lang="ts">
+	interface Props {
+		title?: string;
+		classNames?: string;
+		children?: import("svelte").Snippet;
+	}
+	let { title = "", classNames = "", children }: Props = $props();
 </script>
 <div class="flex items-center rounded-xl bg-gray-100 p-1 text-sm dark:bg-gray-800 {classNames}">
 	>
 	{title}
 	<div class="ml-auto shrink-0">
+		{@render children?.()}
 	</div>
 </div>

src/lib/components/AssistantSettings.svelte CHANGED Viewed

@@ -31,18 +31,22 @@
 	type AssistantFront = Omit<Assistant, "_id" | "createdById"> & { _id: string };
-	export let form: ActionData;
-	export let assistant: AssistantFront | undefined = undefined;
-	export let models: Model[] = [];
-	let files: FileList | null = null;
 	const settings = useSettingsStore();
-	let modelId = "";
-	let systemPrompt = assistant?.preprompt ?? "";
-	let dynamicPrompt = assistant?.dynamicPrompt ?? false;
-	let showModelSettings = Object.values(assistant?.generateSettings ?? {}).some((v) => !!v);
-	let compress: typeof readAndCompressImage | null = null;
 	onMount(async () => {
 		const module = await import("browser-image-resizer");
@@ -51,10 +55,10 @@
 		modelId = findCurrentModel(models, assistant ? assistant.modelId : $settings.activeModel).id;
 	});
-	let inputMessage1 = assistant?.exampleInputs[0] ?? "";
-	let inputMessage2 = assistant?.exampleInputs[1] ?? "";
-	let inputMessage3 = assistant?.exampleInputs[2] ?? "";
-	let inputMessage4 = assistant?.exampleInputs[3] ?? "";
 	function resetErrors() {
 		if (form) {
@@ -83,23 +87,25 @@
 		return returnForm?.errors.find((error) => error.field === field)?.message ?? "";
 	}
-	let deleteExistingAvatar = false;
-	let loading = false;
-	let ragMode: false | "links" | "domains" | "all" = assistant?.rag?.allowAllDomains
-		? "all"
-		: assistant?.rag?.allowedLinks?.length ?? 0 > 0
-		? "links"
-		: (assistant?.rag?.allowedDomains?.length ?? 0) > 0
-		? "domains"
-		: false;
-	let tools = assistant?.tools ?? [];
 	const regex = /{{\s?(get|post|url|today)(=.*?)?\s?}}/g;
-	$: templateVariables = [...systemPrompt.matchAll(regex)];
-	$: selectedModel = models.find((m) => m.id === modelId);
 </script>
 <form
@@ -184,7 +190,7 @@
 					name="avatar"
 					id="avatar"
 					class="hidden"
-					on:change={onFilesChange}
 				/>
 				{#if (files && files[0]) || (assistant?.avatar && !deleteExistingAvatar)}
@@ -213,7 +219,9 @@
 					<div class="mx-auto w-max pt-1">
 						<button
 							type="button"
-							on:click|stopPropagation|preventDefault={() => {
 								files = null;
 								deleteExistingAvatar = true;
 							}}
@@ -253,7 +261,7 @@
 					class="h-15 w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
 					placeholder="It knows everything about python"
 					value={assistant?.description ?? ""}
-				/>
 				<p class="text-xs text-red-500">{getError("description", form)}</p>
 			</label>
@@ -268,14 +276,14 @@
 						{#each models.filter((model) => !model.unlisted) as model}
 							<option value={model.id}>{model.displayName}</option>
 						{/each}
-						<p class="text-xs text-red-500">{getError("modelId", form)}</p>
 					</select>
 					<button
 						type="button"
 						class="flex aspect-square items-center gap-2 whitespace-nowrap rounded-lg border px-3 {showModelSettings
 							? 'border-blue-500/20 bg-blue-50 text-blue-600'
 							: ''}"
-						on:click={() => (showModelSettings = !showModelSettings)}
 						><CarbonSettingsAdjust class="text-xs" /></button
 					>
 				</div>
@@ -443,7 +451,7 @@
 					<label class="mt-1">
 						<input
 							checked={!ragMode}
-							on:change={() => (ragMode = false)}
 							type="radio"
 							name="ragMode"
 							value={false}
@@ -460,7 +468,7 @@
 					<label class="mt-1">
 						<input
 							checked={ragMode === "all"}
-							on:change={() => (ragMode = "all")}
 							type="radio"
 							name="ragMode"
 							value={"all"}
@@ -476,7 +484,7 @@
 					<label class="mt-1">
 						<input
 							checked={ragMode === "domains"}
-							on:change={() => (ragMode = "domains")}
 							type="radio"
 							name="ragMode"
 							value={false}
@@ -502,7 +510,7 @@
 					<label class="mt-1">
 						<input
 							checked={ragMode === "links"}
-							on:change={() => (ragMode = "links")}
 							type="radio"
 							name="ragMode"
 							value={false}
@@ -576,7 +584,7 @@
 					class="min-h-[8lh] flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 text-sm"
 					placeholder="You'll act as..."
 					bind:value={systemPrompt}
-				/>
 				{#if modelId}
 					{@const model = models.find((_model) => _model.id === modelId)}
 					{#if model?.tokenizer && systemPrompt}

 	type AssistantFront = Omit<Assistant, "_id" | "createdById"> & { _id: string };
+	interface Props {
+		form: ActionData;
+		assistant?: AssistantFront | undefined;
+		models?: Model[];
+	}
+	let { form = $bindable(), assistant = undefined, models = [] }: Props = $props();
+	let files: FileList | null = $state(null);
 	const settings = useSettingsStore();
+	let modelId = $state("");
+	let systemPrompt = $state(assistant?.preprompt ?? "");
+	let dynamicPrompt = $state(assistant?.dynamicPrompt ?? false);
+	let showModelSettings = $state(Object.values(assistant?.generateSettings ?? {}).some((v) => !!v));
+	let compress: typeof readAndCompressImage | null = $state(null);
 	onMount(async () => {
 		const module = await import("browser-image-resizer");
 		modelId = findCurrentModel(models, assistant ? assistant.modelId : $settings.activeModel).id;
 	});
+	let inputMessage1 = $state(assistant?.exampleInputs[0] ?? "");
+	let inputMessage2 = $state(assistant?.exampleInputs[1] ?? "");
+	let inputMessage3 = $state(assistant?.exampleInputs[2] ?? "");
+	let inputMessage4 = $state(assistant?.exampleInputs[3] ?? "");
 	function resetErrors() {
 		if (form) {
 		return returnForm?.errors.find((error) => error.field === field)?.message ?? "";
 	}
+	let deleteExistingAvatar = $state(false);
+	let loading = $state(false);
+	let ragMode: false | "links" | "domains" | "all" = $state(
+		assistant?.rag?.allowAllDomains
+			? "all"
+			: (assistant?.rag?.allowedLinks?.length ?? 0 > 0)
+				? "links"
+				: (assistant?.rag?.allowedDomains?.length ?? 0) > 0
+					? "domains"
+					: false
+	);
+	let tools = $state(assistant?.tools ?? []);
 	const regex = /{{\s?(get|post|url|today)(=.*?)?\s?}}/g;
+	let templateVariables = $derived([...systemPrompt.matchAll(regex)]);
+	let selectedModel = $derived(models.find((m) => m.id === modelId));
 </script>
 <form
 					name="avatar"
 					id="avatar"
 					class="hidden"
+					onchange={onFilesChange}
 				/>
 				{#if (files && files[0]) || (assistant?.avatar && !deleteExistingAvatar)}
 					<div class="mx-auto w-max pt-1">
 						<button
 							type="button"
+							onclick={(e) => {
+								e.preventDefault();
+								e.stopPropagation();
 								files = null;
 								deleteExistingAvatar = true;
 							}}
 					class="h-15 w-full rounded-lg border-2 border-gray-200 bg-gray-100 p-2"
 					placeholder="It knows everything about python"
 					value={assistant?.description ?? ""}
+				></textarea>
 				<p class="text-xs text-red-500">{getError("description", form)}</p>
 			</label>
 						{#each models.filter((model) => !model.unlisted) as model}
 							<option value={model.id}>{model.displayName}</option>
 						{/each}
 					</select>
+					<p class="text-xs text-red-500">{getError("modelId", form)}</p>
 					<button
 						type="button"
 						class="flex aspect-square items-center gap-2 whitespace-nowrap rounded-lg border px-3 {showModelSettings
 							? 'border-blue-500/20 bg-blue-50 text-blue-600'
 							: ''}"
+						onclick={() => (showModelSettings = !showModelSettings)}
 						><CarbonSettingsAdjust class="text-xs" /></button
 					>
 				</div>
 					<label class="mt-1">
 						<input
 							checked={!ragMode}
+							onchange={() => (ragMode = false)}
 							type="radio"
 							name="ragMode"
 							value={false}
 					<label class="mt-1">
 						<input
 							checked={ragMode === "all"}
+							onchange={() => (ragMode = "all")}
 							type="radio"
 							name="ragMode"
 							value={"all"}
 					<label class="mt-1">
 						<input
 							checked={ragMode === "domains"}
+							onchange={() => (ragMode = "domains")}
 							type="radio"
 							name="ragMode"
 							value={false}
 					<label class="mt-1">
 						<input
 							checked={ragMode === "links"}
+							onchange={() => (ragMode = "links")}
 							type="radio"
 							name="ragMode"
 							value={false}
 					class="min-h-[8lh] flex-1 rounded-lg border-2 border-gray-200 bg-gray-100 p-2 text-sm"
 					placeholder="You'll act as..."
 					bind:value={systemPrompt}
+				></textarea>
 				{#if modelId}
 					{@const model = models.find((_model) => _model.id === modelId)}
 					{#if model?.tokenizer && systemPrompt}

src/lib/components/AssistantToolPicker.svelte CHANGED Viewed

@@ -15,9 +15,13 @@
 		icon: ToolLogoIcon;
 	}
-	export let toolIds: string[] = [];
-	let selectedValues: ToolSuggestion[] = [];
 	onMount(async () => {
 		selectedValues = await Promise.all(
@@ -27,10 +31,10 @@
 		await fetchSuggestions("");
 	});
-	let inputValue = "";
 	let maxValues = 3;
-	let suggestions: ToolSuggestion[] = [];
 	async function fetchSuggestions(query: string) {
 		suggestions = (await fetch(`${base}/api/tools/search?q=${query}`).then((res) =>
@@ -61,7 +65,9 @@
 			<div
 				class="flex items-center justify-center space-x-2 rounded border border-gray-300 bg-gray-200 px-2 py-1"
 			>
-				<ToolLogo color={value.color} icon={value.icon} size="sm" />
 				<div class="flex flex-col items-center justify-center py-1">
 					<a
 						href={`${base}/tools/${value._id}`}
@@ -81,7 +87,11 @@
 					{/if}
 				</div>
 				<button
-					on:click|stopPropagation|preventDefault={() => removeValue(value._id)}
 					class="text-lg text-gray-600"
 				>
 					<CarbonClose />
@@ -96,7 +106,7 @@
 		<input
 			type="text"
 			bind:value={inputValue}
-			on:input={(ev) => {
 				inputValue = ev.currentTarget.value;
 				debouncedFetch(inputValue);
 			}}
@@ -117,7 +127,11 @@
 				{:else}
 					{#each suggestions as suggestion}
 						<button
-							on:click|stopPropagation|preventDefault={() => addValue(suggestion)}
 							class="w-full cursor-pointer px-3 py-2 text-left hover:bg-blue-500 hover:text-white"
 						>
 							{suggestion.displayName}

 		icon: ToolLogoIcon;
 	}
+	interface Props {
+		toolIds?: string[];
+	}
+	let { toolIds = $bindable([]) }: Props = $props();
+	let selectedValues: ToolSuggestion[] = $state([]);
 	onMount(async () => {
 		selectedValues = await Promise.all(
 		await fetchSuggestions("");
 	});
+	let inputValue = $state("");
 	let maxValues = 3;
+	let suggestions: ToolSuggestion[] = $state([]);
 	async function fetchSuggestions(query: string) {
 		suggestions = (await fetch(`${base}/api/tools/search?q=${query}`).then((res) =>
 			<div
 				class="flex items-center justify-center space-x-2 rounded border border-gray-300 bg-gray-200 px-2 py-1"
 			>
+				{#key value.color + value.icon}
+					<ToolLogo color={value.color} icon={value.icon} size="sm" />
+				{/key}
 				<div class="flex flex-col items-center justify-center py-1">
 					<a
 						href={`${base}/tools/${value._id}`}
 					{/if}
 				</div>
 				<button
+					onclick={(e) => {
+						e.preventDefault();
+						e.stopPropagation();
+						removeValue(value._id);
+					}}
 					class="text-lg text-gray-600"
 				>
 					<CarbonClose />
 		<input
 			type="text"
 			bind:value={inputValue}
+			oninput={(ev) => {
 				inputValue = ev.currentTarget.value;
 				debouncedFetch(inputValue);
 			}}
 				{:else}
 					{#each suggestions as suggestion}
 						<button
+							onclick={(e) => {
+								e.preventDefault();
+								e.stopPropagation();
+								addValue(suggestion);
+							}}
 							class="w-full cursor-pointer px-3 py-2 text-left hover:bg-blue-500 hover:text-white"
 						>
 							{suggestion.displayName}

src/lib/components/CodeBlock.svelte CHANGED Viewed

@@ -3,10 +3,14 @@
 	import DOMPurify from "isomorphic-dompurify";
 	import hljs from "highlight.js";
-	export let code = "";
-	export let lang = "";
-	$: highlightedCode = hljs.highlightAuto(code, hljs.getLanguage(lang)?.aliases).value;
 </script>
 <div class="group relative my-4 rounded-lg">

 	import DOMPurify from "isomorphic-dompurify";
 	import hljs from "highlight.js";
+	interface Props {
+		code?: string;
+		lang?: string;
+	}
+	let { code = "", lang = "" }: Props = $props();
+	let highlightedCode = $derived(hljs.highlightAuto(code, hljs.getLanguage(lang)?.aliases).value);
 </script>
 <div class="group relative my-4 rounded-lg">

src/lib/components/ContinueBtn.svelte CHANGED Viewed

@@ -1,12 +1,17 @@
 <script lang="ts">
 	import CarbonContinue from "~icons/carbon/continue";
-	export let classNames = "";
 </script>
 <button
 	type="button"
-	on:click
 	class="btn flex h-8 rounded-lg border bg-white px-3 py-1 text-gray-500 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 {classNames}"
 >
 	<CarbonContinue class="mr-2 text-xs " /> Continue

 <script lang="ts">
 	import CarbonContinue from "~icons/carbon/continue";
+	interface Props {
+		classNames?: string;
+		onClick?: () => void;
+	}
+	let { classNames = "", onClick }: Props = $props();
 </script>
 <button
 	type="button"
+	onclick={onClick}
 	class="btn flex h-8 rounded-lg border bg-white px-3 py-1 text-gray-500 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 {classNames}"
 >
 	<CarbonContinue class="mr-2 text-xs " /> Continue

src/lib/components/CopyToClipBoardBtn.svelte CHANGED Viewed

@@ -4,10 +4,16 @@
 	import IconCopy from "./icons/IconCopy.svelte";
 	import Tooltip from "./Tooltip.svelte";
-	export let classNames = "";
-	export let value: string;
-	let isSuccess = false;
 	let timeout: ReturnType<typeof setTimeout>;
 	const unsecuredCopy = (text: string) => {
@@ -58,13 +64,15 @@
 	class={classNames}
 	title={"Copy to clipboard"}
 	type="button"
-	on:click
-	on:click={handleClick}
 >
 	<div class="relative">
-		<slot>
 			<IconCopy classNames="h-[1.14em] w-[1.14em]" />
-		</slot>
 		<Tooltip classNames={isSuccess ? "opacity-100" : "opacity-0"} />
 	</div>

 	import IconCopy from "./icons/IconCopy.svelte";
 	import Tooltip from "./Tooltip.svelte";
+	interface Props {
+		classNames?: string;
+		value: string;
+		children?: import("svelte").Snippet;
+		onClick?: () => void;
+	}
+	let { classNames = "", value, children, onClick }: Props = $props();
+	let isSuccess = $state(false);
 	let timeout: ReturnType<typeof setTimeout>;
 	const unsecuredCopy = (text: string) => {
 	class={classNames}
 	title={"Copy to clipboard"}
 	type="button"
+	onclick={() => {
+		onClick?.();
+		handleClick();
+	}}
 >
 	<div class="relative">
+		{#if children}{@render children()}{:else}
 			<IconCopy classNames="h-[1.14em] w-[1.14em]" />
+		{/if}
 		<Tooltip classNames={isSuccess ? "opacity-100" : "opacity-0"} />
 	</div>

src/lib/components/DisclaimerModal.svelte CHANGED Viewed

@@ -34,7 +34,9 @@
 				class:bg-white={$page.data.loginEnabled}
 				class:text-gray-800={$page.data.loginEnabled}
 				class:hover:bg-slate-100={$page.data.loginEnabled}
-				on:click|preventDefault|stopPropagation={() => {
 					if (!cookiesAreEnabled()) {
 						window.open(window.location.href, "_blank");
 					}

 				class:bg-white={$page.data.loginEnabled}
 				class:text-gray-800={$page.data.loginEnabled}
 				class:hover:bg-slate-100={$page.data.loginEnabled}
+				onclick={(e) => {
+					e.preventDefault();
+					e.stopPropagation();
 					if (!cookiesAreEnabled()) {
 						window.open(window.location.href, "_blank");
 					}

src/lib/components/ExpandNavigation.svelte CHANGED Viewed

@@ -1,16 +1,21 @@
 <script lang="ts">
-	export let isCollapsed: boolean;
-	export let classNames: string;
 </script>
 <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 dark:*:hover:bg-gray-600 max-md:hidden {!isCollapsed
 		? '*:bg-gray-200/70 dark:*:bg-gray-800'
 		: '*:bg-gray-200 dark:*:bg-gray-700'}"
 	name="sidebar-toggle"
 	aria-label="Toggle sidebar navigation"
 >
-	<div class={!isCollapsed ? "group-hover:rotate-[20deg]" : "group-hover:-rotate-[20deg]"} />
-	<div class={!isCollapsed ? "group-hover:-rotate-[20deg]" : "group-hover:rotate-[20deg]"} />
 </button>

 <script lang="ts">
+	interface Props {
+		isCollapsed: boolean;
+		onClick: () => void;
+		classNames: string;
+	}
+	let { isCollapsed, classNames, onClick }: Props = $props();
 </script>
 <button
+	onclick={onClick}
 	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'}"
 	name="sidebar-toggle"
 	aria-label="Toggle sidebar navigation"
 >
+	<div class={!isCollapsed ? "group-hover:rotate-[20deg]" : "group-hover:-rotate-[20deg]"}></div>
+	<div class={!isCollapsed ? "group-hover:-rotate-[20deg]" : "group-hover:rotate-[20deg]"}></div>
 </button>

src/lib/components/HoverTooltip.svelte CHANGED Viewed

@@ -1,7 +1,12 @@
 <script lang="ts">
-	export let label = "";
-	export let position: "top" | "bottom" | "left" | "right" = "bottom";
-	export let TooltipClassNames = "";
 	const positionClasses = {
 		top: "bottom-full mb-2",
@@ -12,7 +17,7 @@
 </script>
 <div class="group/tooltip inline-block md:relative">
-	<slot />
 	<div
 		class="

 <script lang="ts">
+	interface Props {
+		label?: string;
+		position?: "top" | "bottom" | "left" | "right";
+		TooltipClassNames?: string;
+		children?: import("svelte").Snippet;
+	}
+	let { label = "", position = "bottom", TooltipClassNames = "", children }: Props = $props();
 	const positionClasses = {
 		top: "bottom-full mb-2",
 </script>
 <div class="group/tooltip inline-block md:relative">
+	{@render children?.()}
 	<div
 		class="

src/lib/components/InfiniteScroll.svelte CHANGED Viewed

@@ -2,11 +2,15 @@
 	import { onMount, createEventDispatcher } from "svelte";
 	const dispatch = createEventDispatcher();
-	let loader: HTMLDivElement;
 	let observer: IntersectionObserver;
 	let intervalId: ReturnType<typeof setInterval> | undefined;
 	onMount(() => {
 		observer = new IntersectionObserver((entries) => {
 			entries.forEach((entry) => {
 				if (entry.isIntersecting) {
@@ -40,7 +44,7 @@
 </script>
 <div bind:this={loader} class="flex animate-pulse flex-col gap-4">
-	<div class="ml-2 h-5 w-4/5 gap-5 rounded bg-gray-200 dark:bg-gray-700" />
-	<div class="ml-2 h-5 w-4/5 gap-5 rounded bg-gray-200 dark:bg-gray-700" />
-	<div class="ml-2 h-5 w-4/5 gap-5 rounded bg-gray-200 dark:bg-gray-700" />
 </div>

 	import { onMount, createEventDispatcher } from "svelte";
 	const dispatch = createEventDispatcher();
+	let loader: HTMLDivElement | undefined = $state();
 	let observer: IntersectionObserver;
 	let intervalId: ReturnType<typeof setInterval> | undefined;
 	onMount(() => {
+		if (!loader) {
+			return;
+		}
 		observer = new IntersectionObserver((entries) => {
 			entries.forEach((entry) => {
 				if (entry.isIntersecting) {
 </script>
 <div bind:this={loader} class="flex animate-pulse flex-col gap-4">
+	<div class="ml-2 h-5 w-4/5 gap-5 rounded bg-gray-200 dark:bg-gray-700"></div>
+	<div class="ml-2 h-5 w-4/5 gap-5 rounded bg-gray-200 dark:bg-gray-700"></div>
+	<div class="ml-2 h-5 w-4/5 gap-5 rounded bg-gray-200 dark:bg-gray-700"></div>
 </div>

src/lib/components/LoginModal.svelte CHANGED Viewed

@@ -47,7 +47,7 @@
 			{:else}
 				<button
 					class="flex w-full items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
-					on:click={(e) => {
 						if (!cookiesAreEnabled()) {
 							e.preventDefault();
 							window.open(window.location.href, "_blank");

 			{:else}
 				<button
 					class="flex w-full items-center justify-center whitespace-nowrap rounded-full border-2 border-black bg-black px-5 py-2 text-lg font-semibold text-gray-100 transition-colors hover:bg-gray-900"
+					onclick={(e) => {
 						if (!cookiesAreEnabled()) {
 							e.preventDefault();
 							window.open(window.location.href, "_blank");

src/lib/components/MobileNav.svelte CHANGED Viewed

@@ -1,4 +1,6 @@
 <script lang="ts">
 	import { navigating } from "$app/stores";
 	import { createEventDispatcher } from "svelte";
 	import { browser } from "$app/environment";
@@ -9,25 +11,36 @@
 	import CarbonTextAlignJustify from "~icons/carbon/text-align-justify";
 	import IconNew from "$lib/components/icons/IconNew.svelte";
-	export let isOpen = false;
-	export let title: string | undefined;
-	$: title = title ?? "New Chat";
-	let closeEl: HTMLButtonElement;
-	let openEl: HTMLButtonElement;
 	const dispatch = createEventDispatcher();
-	$: if ($navigating) {
-		dispatch("toggle", false);
-	}
-	$: if (isOpen && closeEl) {
-		closeEl.focus();
-	} else if (!isOpen && browser && document.activeElement === closeEl) {
-		openEl.focus();
-	}
 </script>
 <nav
@@ -36,12 +49,12 @@
 	<button
 		type="button"
 		class="-ml-3 flex size-12 shrink-0 items-center justify-center text-lg"
-		on:click={() => dispatch("toggle", true)}
 		aria-label="Open menu"
 		bind:this={openEl}><CarbonTextAlignJustify /></button
 	>
 	{#await title}
-		<div class="flex h-full items-center justify-center" />
 	{:then title}
 		<span class="truncate px-4">{title ?? ""}</span>
 	{/await}
@@ -60,10 +73,10 @@
 		<button
 			type="button"
 			class="-mr-3 ml-auto flex size-12 items-center justify-center text-lg"
-			on:click={() => dispatch("toggle", false)}
 			aria-label="Close menu"
 			bind:this={closeEl}><CarbonClose /></button
 		>
 	</div>
-	<slot />
 </nav>

 <script lang="ts">
+	import { run } from "svelte/legacy";
 	import { navigating } from "$app/stores";
 	import { createEventDispatcher } from "svelte";
 	import { browser } from "$app/environment";
 	import CarbonTextAlignJustify from "~icons/carbon/text-align-justify";
 	import IconNew from "$lib/components/icons/IconNew.svelte";
+	interface Props {
+		isOpen?: boolean;
+		title: string | undefined;
+		children?: import("svelte").Snippet;
+	}
+	let { isOpen = false, title = $bindable(), children }: Props = $props();
+	run(() => {
+		title = title ?? "New Chat";
+	});
+	let closeEl: HTMLButtonElement | undefined = $state();
+	let openEl: HTMLButtonElement | undefined = $state();
 	const dispatch = createEventDispatcher();
+	run(() => {
+		if ($navigating) {
+			dispatch("toggle", false);
+		}
+	});
+	run(() => {
+		if (isOpen && closeEl) {
+			closeEl.focus();
+		} else if (!isOpen && browser && document.activeElement === closeEl) {
+			openEl?.focus();
+		}
+	});
 </script>
 <nav
 	<button
 		type="button"
 		class="-ml-3 flex size-12 shrink-0 items-center justify-center text-lg"
+		onclick={() => dispatch("toggle", true)}
 		aria-label="Open menu"
 		bind:this={openEl}><CarbonTextAlignJustify /></button
 	>
 	{#await title}
+		<div class="flex h-full items-center justify-center"></div>
 	{:then title}
 		<span class="truncate px-4">{title ?? ""}</span>
 	{/await}
 		<button
 			type="button"
 			class="-mr-3 ml-auto flex size-12 items-center justify-center text-lg"
+			onclick={() => dispatch("toggle", false)}
 			aria-label="Close menu"
 			bind:this={closeEl}><CarbonClose /></button
 		>
 	</div>
+	{@render children?.()}
 </nav>

src/lib/components/Modal.svelte CHANGED Viewed

@@ -5,10 +5,15 @@
 	import Portal from "./Portal.svelte";
 	import { browser } from "$app/environment";
-	export let width = "max-w-sm";
-	let backdropEl: HTMLDivElement;
-	let modalEl: HTMLDivElement;
 	const dispatch = createEventDispatcher<{ close: void }>();
@@ -31,25 +36,25 @@
 	onMount(() => {
 		document.getElementById("app")?.setAttribute("inert", "true");
-		modalEl.focus();
 	});
 	onDestroy(() => {
 		if (!browser) return;
-		// remove inert attribute if this is the last modal
-		if (document.querySelectorAll('[role="dialog"]:not(#app *)').length === 1) {
-			document.getElementById("app")?.removeAttribute("inert");
-		}
 	});
 </script>
 <Portal>
-	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 	<div
 		role="presentation"
 		tabindex="-1"
 		bind:this={backdropEl}
-		on:click|stopPropagation={handleBackdropClick}
 		transition:fade|local={{ easing: cubicOut, duration: 300 }}
 		class="fixed inset-0 z-40 flex items-center justify-center bg-black/80 p-8 backdrop-blur-sm dark:bg-black/50"
 	>
@@ -57,10 +62,10 @@
 			role="dialog"
 			tabindex="-1"
 			bind:this={modalEl}
-			on:keydown={handleKeydown}
 			class="max-h-[90dvh] overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-2xl outline-none sm:-mt-10 {width}"
 		>
-			<slot />
 		</div>
 	</div>
 </Portal>

 	import Portal from "./Portal.svelte";
 	import { browser } from "$app/environment";
+	interface Props {
+		width?: string;
+		children?: import("svelte").Snippet;
+	}
+	let { width = "max-w-sm", children }: Props = $props();
+	let backdropEl: HTMLDivElement | undefined = $state();
+	let modalEl: HTMLDivElement | undefined = $state();
 	const dispatch = createEventDispatcher<{ close: void }>();
 	onMount(() => {
 		document.getElementById("app")?.setAttribute("inert", "true");
+		modalEl?.focus();
 	});
 	onDestroy(() => {
 		if (!browser) return;
+		document.getElementById("app")?.removeAttribute("inert");
 	});
 </script>
 <Portal>
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 	<div
 		role="presentation"
 		tabindex="-1"
 		bind:this={backdropEl}
+		onclick={(e) => {
+			e.stopPropagation();
+			handleBackdropClick(e);
+		}}
 		transition:fade|local={{ easing: cubicOut, duration: 300 }}
 		class="fixed inset-0 z-40 flex items-center justify-center bg-black/80 p-8 backdrop-blur-sm dark:bg-black/50"
 	>
 			role="dialog"
 			tabindex="-1"
 			bind:this={modalEl}
+			onkeydown={handleKeydown}
 			class="max-h-[90dvh] overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-2xl outline-none sm:-mt-10 {width}"
 		>
+			{@render children?.()}
 		</div>
 	</div>
 </Portal>

src/lib/components/ModelCardMetadata.svelte CHANGED Viewed

@@ -5,12 +5,15 @@
 	import CarbonCode from "~icons/carbon/code";
 	import type { Model } from "$lib/types/Model";
-	export let model: Pick<
-		Model,
-		"name" | "datasetName" | "websiteUrl" | "modelUrl" | "datasetUrl" | "hasInferenceAPI"
-	>;
-	export let variant: "light" | "dark" = "light";
 </script>
 <div

 	import CarbonCode from "~icons/carbon/code";
 	import type { Model } from "$lib/types/Model";
+	interface Props {
+		model: Pick<
+			Model,
+			"name" | "datasetName" | "websiteUrl" | "modelUrl" | "datasetUrl" | "hasInferenceAPI"
+		>;
+		variant?: "light" | "dark";
+	}
+	let { model, variant = "light" }: Props = $props();
 </script>
 <div

src/lib/components/NavConversationItem.svelte CHANGED Viewed

@@ -9,9 +9,13 @@
 	import CarbonEdit from "~icons/carbon/edit";
 	import type { ConvSidebar } from "$lib/types/ConvSidebar";
-	export let conv: ConvSidebar;
-	let confirmDelete = false;
 	const dispatch = createEventDispatcher<{
 		deleteConversation: string;
@@ -21,7 +25,7 @@
 <a
 	data-sveltekit-noscroll
-	on:mouseleave={() => {
 		confirmDelete = false;
 	}}
 	href="{base}/conversation/{conv.id}"
@@ -44,7 +48,7 @@
 		{:else if conv.assistantId}
 			<div
 				class="mr-1.5 flex size-4 flex-none items-center justify-center rounded-full bg-gray-300 text-xs font-bold uppercase text-gray-500"
-			/>
 			{conv.title.replace(/\p{Emoji}/gu, "")}
 		{:else}
 			{conv.title}
@@ -56,7 +60,10 @@
 			type="button"
 			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
 			title="Cancel delete action"
-			on:click|preventDefault={() => (confirmDelete = false)}
 		>
 			<CarbonClose class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
 		</button>
@@ -64,7 +71,8 @@
 			type="button"
 			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
 			title="Confirm delete action"
-			on:click|preventDefault={() => {
 				confirmDelete = false;
 				dispatch("deleteConversation", conv.id);
 			}}
@@ -76,7 +84,8 @@
 			type="button"
 			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
 			title="Edit conversation title"
-			on:click|preventDefault={() => {
 				const newTitle = prompt("Edit this conversation title:", conv.title);
 				if (!newTitle) return;
 				dispatch("editConversationTitle", { id: conv.id, title: newTitle });
@@ -89,7 +98,8 @@
 			type="button"
 			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
 			title="Delete conversation"
-			on:click|preventDefault={(event) => {
 				if (event.shiftKey) {
 					dispatch("deleteConversation", conv.id);
 				} else {

 	import CarbonEdit from "~icons/carbon/edit";
 	import type { ConvSidebar } from "$lib/types/ConvSidebar";
+	interface Props {
+		conv: ConvSidebar;
+	}
+	let { conv }: Props = $props();
+	let confirmDelete = $state(false);
 	const dispatch = createEventDispatcher<{
 		deleteConversation: string;
 <a
 	data-sveltekit-noscroll
+	onmouseleave={() => {
 		confirmDelete = false;
 	}}
 	href="{base}/conversation/{conv.id}"
 		{:else if conv.assistantId}
 			<div
 				class="mr-1.5 flex size-4 flex-none items-center justify-center rounded-full bg-gray-300 text-xs font-bold uppercase text-gray-500"
+			></div>
 			{conv.title.replace(/\p{Emoji}/gu, "")}
 		{:else}
 			{conv.title}
 			type="button"
 			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
 			title="Cancel delete action"
+			onclick={(e) => {
+				e.preventDefault();
+				confirmDelete = false;
+			}}
 		>
 			<CarbonClose class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
 		</button>
 			type="button"
 			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
 			title="Confirm delete action"
+			onclick={(e) => {
+				e.preventDefault();
 				confirmDelete = false;
 				dispatch("deleteConversation", conv.id);
 			}}
 			type="button"
 			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
 			title="Edit conversation title"
+			onclick={(e) => {
+				e.preventDefault();
 				const newTitle = prompt("Edit this conversation title:", conv.title);
 				if (!newTitle) return;
 				dispatch("editConversationTitle", { id: conv.id, title: newTitle });
 			type="button"
 			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
 			title="Delete conversation"
+			onclick={(event) => {
+				event.preventDefault();
 				if (event.shiftKey) {
 					dispatch("deleteConversation", conv.id);
 				} else {

src/lib/components/NavMenu.svelte CHANGED Viewed

@@ -14,13 +14,16 @@
 	import type { Conversation } from "$lib/types/Conversation";
 	import { CONV_NUM_PER_PAGE } from "$lib/constants/pagination";
-	export let conversations: ConvSidebar[];
-	export let canLogin: boolean;
-	export let user: LayoutData["user"];
-	export let p = 0;
-	let hasMore = true;
 	function handleNewChatClick() {
 		isAborted.set(true);
@@ -32,7 +35,7 @@
 		new Date().setMonth(new Date().getMonth() - 1),
 	];
-	$: groupedConversations = {
 		today: conversations.filter(({ updatedAt }) => updatedAt.getTime() > dateRanges[0]),
 		week: conversations.filter(
 			({ updatedAt }) => updatedAt.getTime() > dateRanges[1] && updatedAt.getTime() < dateRanges[0]
@@ -41,7 +44,7 @@
 			({ updatedAt }) => updatedAt.getTime() > dateRanges[2] && updatedAt.getTime() < dateRanges[1]
 		),
 		older: conversations.filter(({ updatedAt }) => updatedAt.getTime() < dateRanges[2]),
-	};
 	const titles: { [key: string]: string } = {
 		today: "Today",
@@ -73,11 +76,13 @@
 		conversations = [...conversations, ...newConvs];
 	}
-	$: if (conversations.length <= CONV_NUM_PER_PAGE) {
-		// reset p to 0 if there's only one page of content
-		// that would be caused by a data loading invalidation
-		p = 0;
-	}
 </script>
 <div class="sticky top-0 flex flex-none items-center justify-between px-1.5 py-3.5 max-sm:pt-0">
@@ -88,13 +93,15 @@
 		<Logo classNames="mr-1" />
 		{envPublic.PUBLIC_APP_NAME}
 	</a>
-	<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 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] dark:from-gray-800/30 max-sm:bg-gradient-to-t md:bg-gradient-to-l"
@@ -103,9 +110,9 @@
 		{#if $page.data.nConversations > 0}
 			<div class="overflow-y-hidden">
 				<div class="flex animate-pulse flex-col gap-4">
-					<div class="h-4 w-24 rounded bg-gray-200 dark:bg-gray-700" />
 					{#each Array(100) as _}
-						<div class="ml-2 h-5 w-4/5 gap-5 rounded bg-gray-200 dark:bg-gray-700" />
 					{/each}
 				</div>
 			</div>
@@ -162,7 +169,7 @@
 		</form>
 	{/if}
 	<button
-		on:click={switchTheme}
 		type="button"
 		class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
 	>

 	import type { Conversation } from "$lib/types/Conversation";
 	import { CONV_NUM_PER_PAGE } from "$lib/constants/pagination";
+	interface Props {
+		conversations: ConvSidebar[];
+		canLogin: boolean;
+		user: LayoutData["user"];
+		p?: number;
+	}
+	let { conversations = $bindable(), canLogin, user, p = $bindable(0) }: Props = $props();
+	let hasMore = $state(true);
 	function handleNewChatClick() {
 		isAborted.set(true);
 		new Date().setMonth(new Date().getMonth() - 1),
 	];
+	let groupedConversations = $derived({
 		today: conversations.filter(({ updatedAt }) => updatedAt.getTime() > dateRanges[0]),
 		week: conversations.filter(
 			({ updatedAt }) => updatedAt.getTime() > dateRanges[1] && updatedAt.getTime() < dateRanges[0]
 			({ updatedAt }) => updatedAt.getTime() > dateRanges[2] && updatedAt.getTime() < dateRanges[1]
 		),
 		older: conversations.filter(({ updatedAt }) => updatedAt.getTime() < dateRanges[2]),
+	});
 	const titles: { [key: string]: string } = {
 		today: "Today",
 		conversations = [...conversations, ...newConvs];
 	}
+	$effect(() => {
+		if (conversations.length <= CONV_NUM_PER_PAGE) {
+			// reset p to 0 if there's only one page of content
+			// that would be caused by a data loading invalidation
+			p = 0;
+		}
+	});
 </script>
 <div class="sticky top-0 flex flex-none items-center justify-between px-1.5 py-3.5 max-sm:pt-0">
 		<Logo classNames="mr-1" />
 		{envPublic.PUBLIC_APP_NAME}
 	</a>
+	{#if $page.url.pathname !== base + "/"}
+		<a
+			href={`${base}/`}
+			onclick={handleNewChatClick}
+			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>
+	{/if}
 </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] dark:from-gray-800/30 max-sm:bg-gradient-to-t md:bg-gradient-to-l"
 		{#if $page.data.nConversations > 0}
 			<div class="overflow-y-hidden">
 				<div class="flex animate-pulse flex-col gap-4">
+					<div class="h-4 w-24 rounded bg-gray-200 dark:bg-gray-700"></div>
 					{#each Array(100) as _}
+						<div class="ml-2 h-5 w-4/5 gap-5 rounded bg-gray-200 dark:bg-gray-700"></div>
 					{/each}
 				</div>
 			</div>
 		</form>
 	{/if}
 	<button
+		onclick={switchTheme}
 		type="button"
 		class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
 	>

src/lib/components/OpenWebSearchResults.svelte CHANGED Viewed

@@ -10,16 +10,22 @@
 	import IconInternet from "./icons/IconInternet.svelte";
 	import CarbonCaretDown from "~icons/carbon/caret-down";
-	export let webSearchMessages: MessageWebSearchUpdate[] = [];
-	$: sources = webSearchMessages.find(isMessageWebSearchSourcesUpdate)?.sources;
-	$: lastMessage = webSearchMessages
-		.filter((update) => update.subtype !== MessageWebSearchUpdateType.Sources)
-		.at(-1) as MessageWebSearchUpdate;
-	$: errored = webSearchMessages.some(
-		(update) => update.subtype === MessageWebSearchUpdateType.Error
 	);
-	$: loading = !sources && !errored;
 </script>
 <details
@@ -80,7 +86,7 @@
 									class="-ml-1.5 h-3 w-3 flex-none rounded-full bg-gray-200 dark:bg-gray-600 {loading
 										? 'group-last:animate-pulse group-last:bg-gray-300 group-last:dark:bg-gray-500'
 										: ''}"
-								/>
 								<h3 class="text-md -mt-1.5 pl-2.5 text-gray-800 dark:text-gray-100">
 									{message.message}
 								</h3>

 	import IconInternet from "./icons/IconInternet.svelte";
 	import CarbonCaretDown from "~icons/carbon/caret-down";
+	interface Props {
+		webSearchMessages?: MessageWebSearchUpdate[];
+	}
+	let { webSearchMessages = [] }: Props = $props();
+	let sources = $derived(webSearchMessages.find(isMessageWebSearchSourcesUpdate)?.sources);
+	let lastMessage = $derived(
+		webSearchMessages
+			.filter((update) => update.subtype !== MessageWebSearchUpdateType.Sources)
+			.at(-1) as MessageWebSearchUpdate
 	);
+	let errored = $derived(
+		webSearchMessages.some((update) => update.subtype === MessageWebSearchUpdateType.Error)
+	);
+	let loading = $derived(!sources && !errored);
 </script>
 <details
 									class="-ml-1.5 h-3 w-3 flex-none rounded-full bg-gray-200 dark:bg-gray-600 {loading
 										? 'group-last:animate-pulse group-last:bg-gray-300 group-last:dark:bg-gray-500'
 										: ''}"
+								></div>
 								<h3 class="text-md -mt-1.5 pl-2.5 text-gray-800 dark:text-gray-100">
 									{message.message}
 								</h3>

src/lib/components/Pagination.svelte CHANGED Viewed

@@ -3,15 +3,15 @@
 	import { getHref } from "$lib/utils/getHref";
 	import PaginationArrow from "./PaginationArrow.svelte";
-	export let classNames = "";
-	export let numItemsPerPage: number;
-	export let numTotalItems: number;
-	const ELLIPSIS_IDX = -1 as const;
-	$: numTotalPages = Math.ceil(numTotalItems / numItemsPerPage);
-	$: pageIndex = parseInt($page.url.searchParams.get("p") ?? "0");
-	$: pageIndexes = getPageIndexes(pageIndex, numTotalPages);
 	function getPageIndexes(pageIdx: number, nTotalPages: number) {
 		let pageIdxs: number[] = [];
@@ -52,6 +52,9 @@
 		}
 		return pageIdxs;
 	}
 </script>
 {#if numTotalPages > 1}

 	import { getHref } from "$lib/utils/getHref";
 	import PaginationArrow from "./PaginationArrow.svelte";
+	interface Props {
+		classNames?: string;
+		numItemsPerPage: number;
+		numTotalItems: number;
+	}
+	let { classNames = "", numItemsPerPage, numTotalItems }: Props = $props();
+	const ELLIPSIS_IDX = -1 as const;
 	function getPageIndexes(pageIdx: number, nTotalPages: number) {
 		let pageIdxs: number[] = [];
 		}
 		return pageIdxs;
 	}
+	let numTotalPages = $derived(Math.ceil(numTotalItems / numItemsPerPage));
+	let pageIndex = $derived(parseInt($page.url.searchParams.get("p") ?? "0"));
+	let pageIndexes = $derived(getPageIndexes(pageIndex, numTotalPages));
 </script>
 {#if numTotalPages > 1}

src/lib/components/PaginationArrow.svelte CHANGED Viewed

@@ -2,9 +2,13 @@
 	import CarbonCaretLeft from "~icons/carbon/caret-left";
 	import CarbonCaretRight from "~icons/carbon/caret-right";
-	export let href: string;
-	export let direction: "next" | "previous";
-	export let isDisabled = false;
 </script>
 <a

 	import CarbonCaretLeft from "~icons/carbon/caret-left";
 	import CarbonCaretRight from "~icons/carbon/caret-right";
+	interface Props {
+		href: string;
+		direction: "next" | "previous";
+		isDisabled?: boolean;
+	}
+	let { href, direction, isDisabled = false }: Props = $props();
 </script>
 <a

src/lib/components/Portal.svelte CHANGED Viewed

@@ -1,10 +1,15 @@
 <script lang="ts">
 	import { onMount, onDestroy } from "svelte";
-	let el: HTMLElement;
 	onMount(() => {
-		el.ownerDocument.body.appendChild(el);
 	});
 	onDestroy(() => {
@@ -15,5 +20,5 @@
 </script>
 <div bind:this={el} class="contents" hidden>
-	<slot />
 </div>

 <script lang="ts">
 	import { onMount, onDestroy } from "svelte";
+	interface Props {
+		children?: import("svelte").Snippet;
+	}
+	let { children }: Props = $props();
+	let el: HTMLElement | undefined = $state();
 	onMount(() => {
+		el?.ownerDocument.body.appendChild(el);
 	});
 	onDestroy(() => {
 </script>
 <div bind:this={el} class="contents" hidden>
+	{@render children?.()}
 </div>

src/lib/components/RetryBtn.svelte CHANGED Viewed

@@ -1,12 +1,17 @@
 <script lang="ts">
 	import CarbonRotate360 from "~icons/carbon/rotate-360";
-	export let classNames = "";
 </script>
 <button
 	type="button"
-	on:click
 	class="btn flex h-8 rounded-lg border bg-white px-3 py-1 text-gray-500 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 {classNames}"
 >
 	<CarbonRotate360 class="mr-2 text-xs " /> Retry

 <script lang="ts">
 	import CarbonRotate360 from "~icons/carbon/rotate-360";
+	interface Props {
+		classNames?: string;
+		onClick?: () => void;
+	}
+	let { classNames = "", onClick }: Props = $props();
 </script>
 <button
 	type="button"
+	onclick={onClick}
 	class="btn flex h-8 rounded-lg border bg-white px-3 py-1 text-gray-500 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 {classNames}"
 >
 	<CarbonRotate360 class="mr-2 text-xs " /> Retry

src/lib/components/ScrollToBottomBtn.svelte CHANGED Viewed

@@ -1,27 +1,19 @@
 <script lang="ts">
 	import { fade } from "svelte/transition";
 	import { onDestroy } from "svelte";
 	import IconChevron from "./icons/IconChevron.svelte";
-	export let scrollNode: HTMLElement;
-	export { className as class };
-	let visible = false;
-	let className = "";
-	let observer: ResizeObserver | null = null;
-	$: if (scrollNode) {
-		destroy();
-		if (window.ResizeObserver) {
-			observer = new ResizeObserver(() => {
-				updateVisibility();
-			});
-			observer.observe(scrollNode);
-		}
-		scrollNode.addEventListener("scroll", updateVisibility);
 	}
 	function updateVisibility() {
 		if (!scrollNode) return;
 		visible =
@@ -34,12 +26,25 @@
 	}
 	onDestroy(destroy);
 </script>
 {#if visible}
 	<button
 		transition:fade={{ duration: 150 }}
-		on:click={() => scrollNode.scrollTo({ top: scrollNode.scrollHeight, behavior: "smooth" })}
 		class="btn absolute flex h-[41px] w-[41px] rounded-full border bg-white shadow-md transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:shadow-gray-950 dark:hover:bg-gray-600 {className}"
 		><IconChevron classNames="mt-[2px]" /></button
 	>

 <script lang="ts">
+	import { run } from "svelte/legacy";
 	import { fade } from "svelte/transition";
 	import { onDestroy } from "svelte";
 	import IconChevron from "./icons/IconChevron.svelte";
+	let visible = $state(false);
+	interface Props {
+		scrollNode: HTMLElement;
+		class?: string;
 	}
+	let { scrollNode, class: className = "" }: Props = $props();
+	let observer: ResizeObserver | null = $state(null);
 	function updateVisibility() {
 		if (!scrollNode) return;
 		visible =
 	}
 	onDestroy(destroy);
+	run(() => {
+		if (scrollNode) {
+			destroy();
+			if (window.ResizeObserver) {
+				observer = new ResizeObserver(() => {
+					updateVisibility();
+				});
+				observer.observe(scrollNode);
+			}
+			scrollNode.addEventListener("scroll", updateVisibility);
+		}
+	});
 </script>
 {#if visible}
 	<button
 		transition:fade={{ duration: 150 }}
+		onclick={() => scrollNode.scrollTo({ top: scrollNode.scrollHeight, behavior: "smooth" })}
 		class="btn absolute flex h-[41px] w-[41px] rounded-full border bg-white shadow-md transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:shadow-gray-950 dark:hover:bg-gray-600 {className}"
 		><IconChevron classNames="mt-[2px]" /></button
 	>

src/lib/components/ScrollToPreviousBtn.svelte CHANGED Viewed

@@ -1,27 +1,17 @@
 <script lang="ts">
 	import { fade } from "svelte/transition";
-	import { onDestroy } from "svelte";
 	import IconChevron from "./icons/IconChevron.svelte";
-	export let scrollNode: HTMLElement;
-	export { className as class };
-	let visible = false;
-	let className = "";
-	let observer: ResizeObserver | null = null;
-	$: if (scrollNode) {
-		destroy();
-		if (window.ResizeObserver) {
-			observer = new ResizeObserver(() => {
-				updateVisibility();
-			});
-			observer.observe(scrollNode);
-		}
-		scrollNode.addEventListener("scroll", updateVisibility);
 	}
 	function updateVisibility() {
 		if (!scrollNode) return;
 		visible =
@@ -57,12 +47,29 @@
 	}
 	onDestroy(destroy);
 </script>
 {#if visible}
 	<button
 		transition:fade={{ duration: 150 }}
-		on:click={scrollToPrevious}
 		class="btn absolute flex h-[41px] w-[41px] rounded-full border bg-white shadow-md transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:shadow-gray-950 dark:hover:bg-gray-600 {className}"
 	>
 		<IconChevron classNames="rotate-180 mt-[2px]" />

 <script lang="ts">
 	import { fade } from "svelte/transition";
+	import { onDestroy, untrack } from "svelte";
 	import IconChevron from "./icons/IconChevron.svelte";
+	let visible = $state(false);
+	interface Props {
+		scrollNode: HTMLElement;
+		class?: string;
 	}
+	let { scrollNode, class: className = "" }: Props = $props();
+	let observer: ResizeObserver | null = $state(null);
 	function updateVisibility() {
 		if (!scrollNode) return;
 		visible =
 	}
 	onDestroy(destroy);
+	$effect(() => {
+		scrollNode &&
+			untrack(() => {
+				if (scrollNode) {
+					destroy();
+					if (window.ResizeObserver) {
+						observer = new ResizeObserver(() => {
+							updateVisibility();
+						});
+						observer.observe(scrollNode);
+					}
+					scrollNode.addEventListener("scroll", updateVisibility);
+				}
+			});
+	});
 </script>
 {#if visible}
 	<button
 		transition:fade={{ duration: 150 }}
+		onclick={scrollToPrevious}
 		class="btn absolute flex h-[41px] w-[41px] rounded-full border bg-white shadow-md transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:shadow-gray-950 dark:hover:bg-gray-600 {className}"
 	>
 		<IconChevron classNames="rotate-180 mt-[2px]" />

src/lib/components/StopGeneratingBtn.svelte CHANGED Viewed

@@ -1,12 +1,17 @@
 <script lang="ts">
 	import CarbonStopFilledAlt from "~icons/carbon/stop-filled-alt";
-	export let classNames = "";
 </script>
 <button
 	type="button"
-	on:click
 	class="btn flex h-8 rounded-lg border bg-white px-3 py-1 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 {classNames}"
 >
 	<CarbonStopFilledAlt class="-ml-1 mr-1 h-[1.25rem] w-[1.1875rem] text-gray-300" /> Stop generating

 <script lang="ts">
 	import CarbonStopFilledAlt from "~icons/carbon/stop-filled-alt";
+	interface Props {
+		classNames?: string;
+		onClick?: () => void;
+	}
+	let { classNames = "", onClick }: Props = $props();
 </script>
 <button
 	type="button"
+	onclick={onClick}
 	class="btn flex h-8 rounded-lg border bg-white px-3 py-1 shadow-sm transition-all hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:hover:bg-gray-600 {classNames}"
 >
 	<CarbonStopFilledAlt class="-ml-1 mr-1 h-[1.25rem] w-[1.1875rem] text-gray-300" /> Stop generating

src/lib/components/Switch.svelte CHANGED Viewed

@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let checked: boolean;
-	export let name: string;
 </script>
 <input bind:checked type="checkbox" {name} class="peer pointer-events-none absolute opacity-0" />
@@ -12,5 +16,5 @@
 	tabindex="0"
 	class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-gray-300 p-1 shadow-inner ring-gray-400 transition-all peer-checked:bg-blue-600 peer-focus-visible:ring peer-focus-visible:ring-offset-1 hover:bg-gray-400 dark:bg-gray-600 peer-checked:[&>div]:translate-x-3.5"
 >
-	<div class="h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-all" />
 </div>

 <script lang="ts">
+	interface Props {
+		checked: boolean;
+		name: string;
+	}
+	let { checked = $bindable(), name }: Props = $props();
 </script>
 <input bind:checked type="checkbox" {name} class="peer pointer-events-none absolute opacity-0" />
 	tabindex="0"
 	class="relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-gray-300 p-1 shadow-inner ring-gray-400 transition-all peer-checked:bg-blue-600 peer-focus-visible:ring peer-focus-visible:ring-offset-1 hover:bg-gray-400 dark:bg-gray-600 peer-checked:[&>div]:translate-x-3.5"
 >
+	<div class="h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-all"></div>
 </div>

src/lib/components/SystemPromptModal.svelte CHANGED Viewed

@@ -3,16 +3,20 @@
 	import CarbonClose from "~icons/carbon/close";
 	import CarbonBlockchain from "~icons/carbon/blockchain";
-	export let preprompt: string;
-	let isOpen = false;
 </script>
 <button
 	type="button"
 	class="mx-auto flex items-center gap-1.5 rounded-full border border-gray-100 bg-gray-50 px-3 py-1 text-xs text-gray-500 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
-	on:click={() => (isOpen = !isOpen)}
-	on:keydown={(e) => e.key === "Enter" && (isOpen = !isOpen)}
 >
 	<CarbonBlockchain class="text-xxs" /> Using Custom System Prompt
 </button>
@@ -22,7 +26,7 @@
 		<div class="flex w-full flex-col gap-5 p-6">
 			<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
 				<h2>System Prompt</h2>
-				<button type="button" class="group" on:click={() => (isOpen = false)}>
 					<CarbonClose class="mt-auto text-gray-900 group-hover:text-gray-500" />
 				</button>
 			</div>
@@ -30,7 +34,7 @@
 				disabled
 				value={preprompt}
 				class="min-h-[420px] w-full resize-none rounded-lg border bg-gray-50 p-2.5 text-gray-600 max-sm:text-sm"
-			/>
 		</div>
 	</Modal>
 {/if}

 	import CarbonClose from "~icons/carbon/close";
 	import CarbonBlockchain from "~icons/carbon/blockchain";
+	interface Props {
+		preprompt: string;
+	}
+	let { preprompt }: Props = $props();
+	let isOpen = $state(false);
 </script>
 <button
 	type="button"
 	class="mx-auto flex items-center gap-1.5 rounded-full border border-gray-100 bg-gray-50 px-3 py-1 text-xs text-gray-500 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+	onclick={() => (isOpen = !isOpen)}
+	onkeydown={(e) => e.key === "Enter" && (isOpen = !isOpen)}
 >
 	<CarbonBlockchain class="text-xxs" /> Using Custom System Prompt
 </button>
 		<div class="flex w-full flex-col gap-5 p-6">
 			<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
 				<h2>System Prompt</h2>
+				<button type="button" class="group" onclick={() => (isOpen = false)}>
 					<CarbonClose class="mt-auto text-gray-900 group-hover:text-gray-500" />
 				</button>
 			</div>
 				disabled
 				value={preprompt}
 				class="min-h-[420px] w-full resize-none rounded-lg border bg-gray-50 p-2.5 text-gray-600 max-sm:text-sm"
+			></textarea>
 		</div>
 	</Modal>
 {/if}

src/lib/components/Toast.svelte CHANGED Viewed

@@ -3,7 +3,11 @@
 	import IconDazzled from "$lib/components/icons/IconDazzled.svelte";
-	export let message = "";
 </script>
 <div

 	import IconDazzled from "$lib/components/icons/IconDazzled.svelte";
+	interface Props {
+		message?: string;
+	}
+	let { message = "" }: Props = $props();
 </script>
 <div

src/lib/components/TokensCounter.svelte CHANGED Viewed

@@ -2,43 +2,43 @@
 	import type { Model } from "$lib/types/Model";
 	import { getTokenizer } from "$lib/utils/getTokenizer";
 	import type { PreTrainedTokenizer } from "@huggingface/transformers";
-	export let classNames = "";
-	export let prompt = "";
-	export let modelTokenizer: Exclude<Model["tokenizer"], undefined>;
-	export let truncate: number | undefined = undefined;
-	let tokenizer: PreTrainedTokenizer | undefined = undefined;
-	async function tokenizeText(_prompt: string) {
-		if (!tokenizer) {
-			return;
-		}
-		const { input_ids } = await tokenizer(_prompt);
-		return input_ids.size;
-	}
-	$: (async () => {
-		tokenizer = await getTokenizer(modelTokenizer);
-	})();
 </script>
-{#if tokenizer}
-	{#await tokenizeText(prompt) then nTokens}
-		{@const exceedLimit = nTokens > (truncate || Infinity)}
-		<div class={classNames}>
-			<p
-				class="peer text-sm {exceedLimit
-					? 'text-red-500 opacity-100'
-					: 'opacity-60 hover:opacity-90'}"
-			>
-				{nTokens}{truncate ? `/${truncate}` : ""}
-			</p>
-			<div
-				class="invisible absolute -top-6 right-0 whitespace-nowrap rounded bg-black px-1 text-sm text-white peer-hover:visible"
-			>
-				Tokens usage
-			</div>
-		</div>
-	{/await}
-{/if}

 	import type { Model } from "$lib/types/Model";
 	import { getTokenizer } from "$lib/utils/getTokenizer";
 	import type { PreTrainedTokenizer } from "@huggingface/transformers";
+	import { untrack } from "svelte";
+	interface Props {
+		classNames?: string;
+		prompt?: string;
+		modelTokenizer: Exclude<Model["tokenizer"], undefined>;
+		truncate?: number | undefined;
+	}
+	let { classNames = "", prompt = "", modelTokenizer, truncate = undefined }: Props = $props();
+	let tokenizer: Promise<PreTrainedTokenizer> = $derived(getTokenizer(modelTokenizer));
+	let nTokens = $state(0);
+	$effect(() => {
+		prompt &&
+			untrack(() => {
+				tokenizer.then((tokenizer) => {
+					const { input_ids } = tokenizer(prompt);
+					nTokens = input_ids.size;
+				});
+			});
+	});
+	let exceedLimit = $derived(nTokens > (truncate || Infinity));
 </script>
+<div class={classNames}>
+	<p
+		class="peer text-sm {exceedLimit ? 'text-red-500 opacity-100' : 'opacity-60 hover:opacity-90'}"
+	>
+		{nTokens}{truncate ? `/${truncate}` : ""}
+	</p>
+	<div
+		class="invisible absolute -top-6 right-0 whitespace-nowrap rounded bg-black px-1 text-sm text-white peer-hover:visible"
+	>
+		Tokens usage
+	</div>
+</div>

src/lib/components/ToolBadge.svelte CHANGED Viewed

@@ -3,7 +3,11 @@
 	import { base } from "$app/paths";
 	import { browser } from "$app/environment";
-	export let toolId: string;
 </script>
 <div
@@ -11,7 +15,9 @@
 >
 	{#if browser}
 		{#await fetch(`${base}/api/tools/${toolId}`).then((res) => res.json()) then value}
-			<ToolLogo color={value.color} icon={value.icon} size="sm" />
 			<div class="flex flex-col items-center justify-center py-1">
 				<a
 					href={`${base}/tools/${value._id}`}

 	import { base } from "$app/paths";
 	import { browser } from "$app/environment";
+	interface Props {
+		toolId: string;
+	}
+	let { toolId }: Props = $props();
 </script>
 <div
 >
 	{#if browser}
 		{#await fetch(`${base}/api/tools/${toolId}`).then((res) => res.json()) then value}
+			{#key value.color + value.icon}
+				<ToolLogo color={value.color} icon={value.icon} size="sm" />
+			{/key}
 			<div class="flex flex-col items-center justify-center py-1">
 				<a
 					href={`${base}/tools/${value._id}`}

src/lib/components/ToolLogo.svelte CHANGED Viewed

@@ -11,28 +11,34 @@
 	import CarbonSpeaker from "~icons/carbon/volume-up";
 	import CarbonVideo from "~icons/carbon/video";
-	export let color: string;
-	export let icon: string;
-	export let size: "xs" | "sm" | "md" | "lg" = "md";
-	$: gradientColor = (() => {
-		switch (color) {
-			case "purple":
-				return "#653789";
-			case "blue":
-				return "#375889";
-			case "green":
-				return "#37894E";
-			case "yellow":
-				return "#897C37";
-			case "red":
-				return "#893737";
-			default:
-				return "#FFF";
-		}
-	})();
-	let iconEl = CarbonWikis;
 	switch (icon) {
 		case "wikis":
@@ -70,18 +76,22 @@
 			break;
 	}
-	$: sizeClass = (() => {
-		switch (size) {
-			case "xs":
-				return "size-4";
-			case "sm":
-				return "size-8";
-			case "md":
-				return "size-14";
-			case "lg":
-				return "size-24";
-		}
-	})();
 </script>
 <div class="flex {sizeClass} relative items-center justify-center">
@@ -100,5 +110,5 @@
 		</defs>
 		<rect width="100%" height="100%" fill="url(#gradient-{gradientColor})" mask="url(#mask)" />
 	</svg>
-	<svelte:component this={iconEl} class="relative {sizeClass} scale-50 text-clip text-gray-200" />
 </div>

 	import CarbonSpeaker from "~icons/carbon/volume-up";
 	import CarbonVideo from "~icons/carbon/video";
+	interface Props {
+		color: string;
+		icon: string;
+		size?: "xs" | "sm" | "md" | "lg";
+	}
+	let { color, icon, size = "md" }: Props = $props();
+	let gradientColor = $derived(
+		(() => {
+			switch (color) {
+				case "purple":
+					return "#653789";
+				case "blue":
+					return "#375889";
+				case "green":
+					return "#37894E";
+				case "yellow":
+					return "#897C37";
+				case "red":
+					return "#893737";
+				default:
+					return "#FFF";
+			}
+		})()
+	);
+	let iconEl = $state(CarbonWikis);
 	switch (icon) {
 		case "wikis":
 			break;
 	}
+	let sizeClass = $derived(
+		(() => {
+			switch (size) {
+				case "xs":
+					return "size-4";
+				case "sm":
+					return "size-8";
+				case "md":
+					return "size-14";
+				case "lg":
+					return "size-24";
+			}
+		})()
+	);
+	const SvelteComponent = $derived(iconEl);
 </script>
 <div class="flex {sizeClass} relative items-center justify-center">
 		</defs>
 		<rect width="100%" height="100%" fill="url(#gradient-{gradientColor})" mask="url(#mask)" />
 	</svg>
+	<SvelteComponent class="relative {sizeClass} scale-50 text-clip text-gray-200" />
 </div>

src/lib/components/ToolsMenu.svelte CHANGED Viewed

@@ -9,17 +9,23 @@
 	import CarbonInformation from "~icons/carbon/information";
 	import CarbonGlobe from "~icons/carbon/earth-filled";
-	export let loading = false;
 	const settings = useSettingsStore();
-	let detailsEl: HTMLDetailsElement;
 	// active tools are all the checked tools, either from settings or on by default
-	$: activeToolCount = $page.data.tools.filter(
-		(tool: ToolFront) =>
-			// community tools are always on by default
-			tool.type === "community" || $settings?.tools?.includes(tool._id)
-	).length;
 	async function setAllTools(value: boolean) {
 		const configToolsIds = $page.data.tools
@@ -37,16 +43,16 @@
 		}
 	}
-	$: allToolsEnabled = activeToolCount === $page.data.tools.length;
-	$: tools = $page.data.tools;
 </script>
 <details
 	class="group relative bottom-0 h-full min-h-8"
 	bind:this={detailsEl}
 	use:clickOutside={() => {
-		if (detailsEl.hasAttribute("open")) {
 			detailsEl.removeAttribute("open");
 		}
 	}}
@@ -75,7 +81,10 @@
 				{/if}
 				<button
 					class="ml-auto text-xs underline"
-					on:click|stopPropagation={() => setAllTools(!allToolsEnabled)}
 				>
 					{#if allToolsEnabled}
 						Disable all
@@ -104,7 +113,9 @@
 							id={tool._id}
 							checked={true}
 							class="rounded-xs font-semibold accent-purple-500 hover:accent-purple-600"
-							on:click|stopPropagation|preventDefault={async () => {
 								await settings.instantSet({
 									tools: $settings?.tools?.filter((t) => t !== tool._id) ?? [],
 								});
@@ -116,7 +127,9 @@
 							id={tool._id}
 							checked={isChecked}
 							disabled={loading}
-							on:click|stopPropagation={async () => {
 								if (isChecked) {
 									await settings.instantSet({
 										tools: ($settings?.tools ?? []).filter((t) => t !== tool._id),

 	import CarbonInformation from "~icons/carbon/information";
 	import CarbonGlobe from "~icons/carbon/earth-filled";
+	interface Props {
+		loading?: boolean;
+	}
+	let { loading = false }: Props = $props();
 	const settings = useSettingsStore();
+	let detailsEl: HTMLDetailsElement | undefined = $state();
 	// active tools are all the checked tools, either from settings or on by default
+	let activeToolCount = $derived(
+		$page.data.tools.filter(
+			(tool: ToolFront) =>
+				// community tools are always on by default
+				tool.type === "community" || $settings?.tools?.includes(tool._id)
+		).length
+	);
 	async function setAllTools(value: boolean) {
 		const configToolsIds = $page.data.tools
 		}
 	}
+	let allToolsEnabled = $derived(activeToolCount === $page.data.tools.length);
+	let tools = $derived($page.data.tools);
 </script>
 <details
 	class="group relative bottom-0 h-full min-h-8"
 	bind:this={detailsEl}
 	use:clickOutside={() => {
+		if (detailsEl?.hasAttribute("open")) {
 			detailsEl.removeAttribute("open");
 		}
 	}}
 				{/if}
 				<button
 					class="ml-auto text-xs underline"
+					onclick={(e) => {
+						e.stopPropagation();
+						setAllTools(!allToolsEnabled);
+					}}
 				>
 					{#if allToolsEnabled}
 						Disable all
 							id={tool._id}
 							checked={true}
 							class="rounded-xs font-semibold accent-purple-500 hover:accent-purple-600"
+							onclick={async (e) => {
+								e.preventDefault();
+								e.stopPropagation();
 								await settings.instantSet({
 									tools: $settings?.tools?.filter((t) => t !== tool._id) ?? [],
 								});
 							id={tool._id}
 							checked={isChecked}
 							disabled={loading}
+							onclick={async (e) => {
+								e.preventDefault();
+								e.stopPropagation();
 								if (isChecked) {
 									await settings.instantSet({
 										tools: ($settings?.tools ?? []).filter((t) => t !== tool._id),

src/lib/components/Tooltip.svelte CHANGED Viewed

@@ -1,7 +1,15 @@
 <script lang="ts">
-	export let classNames = "";
-	export let label = "Copied";
-	export let position = "left-1/2 top-full transform -translate-x-1/2 translate-y-2";
 </script>
 <div
@@ -17,6 +25,6 @@
 				border-left-color: transparent;
 				border-right-color: transparent;
 			"
-	/>
 	{label}
 </div>

 <script lang="ts">
+	interface Props {
+		classNames?: string;
+		label?: string;
+		position?: string;
+	}
+	let {
+		classNames = "",
+		label = "Copied",
+		position = "left-1/2 top-full transform -translate-x-1/2 translate-y-2",
+	}: Props = $props();
 </script>
 <div
 				border-left-color: transparent;
 				border-right-color: transparent;
 			"
+	></div>
 	{label}
 </div>

src/lib/components/UploadBtn.svelte CHANGED Viewed

@@ -1,9 +1,13 @@
 <script lang="ts">
 	import CarbonUpload from "~icons/carbon/upload";
-	export let classNames = "";
-	export let files: File[];
-	export let mimeTypes: string[];
 	/**
 	 * Due to a bug with Svelte, we cannot use bind:files with multiple
@@ -23,7 +27,7 @@
 		class="absolute w-full cursor-pointer opacity-0"
 		aria-label="Upload file"
 		type="file"
-		on:change={onFileChange}
 		accept={mimeTypes.join(",")}
 	/>
 	<CarbonUpload class="mr-2 text-xxs" /> Upload file

 <script lang="ts">
 	import CarbonUpload from "~icons/carbon/upload";
+	interface Props {
+		classNames?: string;
+		files: File[];
+		mimeTypes: string[];
+	}
+	let { classNames = "", files = $bindable(), mimeTypes }: Props = $props();
 	/**
 	 * Due to a bug with Svelte, we cannot use bind:files with multiple
 		class="absolute w-full cursor-pointer opacity-0"
 		aria-label="Upload file"
 		type="file"
+		onchange={onFileChange}
 		accept={mimeTypes.join(",")}
 	/>
 	<CarbonUpload class="mr-2 text-xxs" /> Upload file

src/lib/components/WebSearchToggle.svelte CHANGED Viewed

@@ -8,8 +8,8 @@
 <div
 	class="flex h-8 cursor-pointer select-none items-center gap-2 rounded-lg border bg-white p-1.5 shadow-sm hover:shadow-none dark:border-gray-800 dark:bg-gray-900"
-	on:click={toggle}
-	on:keydown={toggle}
 	aria-checked={$webSearchParameters.useSearch}
 	aria-label="Web Search Toggle"
 	role="switch"

 <div
 	class="flex h-8 cursor-pointer select-none items-center gap-2 rounded-lg border bg-white p-1.5 shadow-sm hover:shadow-none dark:border-gray-800 dark:bg-gray-900"
+	onclick={toggle}
+	onkeydown={toggle}
 	aria-checked={$webSearchParameters.useSearch}
 	aria-label="Web Search Toggle"
 	role="switch"

src/lib/components/chat/Alternatives.svelte CHANGED Viewed

@@ -7,11 +7,15 @@
 	import { enhance } from "$app/forms";
 	import { createEventDispatcher } from "svelte";
-	export let message: Message;
-	export let alternatives: Message["id"][] = [];
-	export let loading = false;
-	$: currentIdx = alternatives.findIndex((id) => id === message.id);
 	const dispatch = createEventDispatcher<{
 		showAlternateMsg: { id: Message["id"] };
@@ -23,7 +27,7 @@
 >
 	<button
 		class="inline text-lg font-thin text-gray-400 hover:text-gray-800 disabled:pointer-events-none disabled:opacity-25 dark:text-gray-500 dark:hover:text-gray-200"
-		on:click={() => dispatch("showAlternateMsg", { id: alternatives[Math.max(0, currentIdx - 1)] })}
 		disabled={currentIdx === 0 || loading}
 	>
 		<CarbonChevronLeft class="text-sm" />
@@ -33,7 +37,7 @@
 	</span>
 	<button
 		class="inline text-lg font-thin text-gray-400 hover:text-gray-800 disabled:pointer-events-none disabled:opacity-25 dark:text-gray-500 dark:hover:text-gray-200"
-		on:click={() =>
 			dispatch("showAlternateMsg", {
 				id: alternatives[Math.min(alternatives.length - 1, currentIdx + 1)],
 			})}

 	import { enhance } from "$app/forms";
 	import { createEventDispatcher } from "svelte";
+	interface Props {
+		message: Message;
+		alternatives?: Message["id"][];
+		loading?: boolean;
+	}
+	let { message, alternatives = [], loading = false }: Props = $props();
+	let currentIdx = $derived(alternatives.findIndex((id) => id === message.id));
 	const dispatch = createEventDispatcher<{
 		showAlternateMsg: { id: Message["id"] };
 >
 	<button
 		class="inline text-lg font-thin text-gray-400 hover:text-gray-800 disabled:pointer-events-none disabled:opacity-25 dark:text-gray-500 dark:hover:text-gray-200"
+		onclick={() => dispatch("showAlternateMsg", { id: alternatives[Math.max(0, currentIdx - 1)] })}
 		disabled={currentIdx === 0 || loading}
 	>
 		<CarbonChevronLeft class="text-sm" />
 	</span>
 	<button
 		class="inline text-lg font-thin text-gray-400 hover:text-gray-800 disabled:pointer-events-none disabled:opacity-25 dark:text-gray-500 dark:hover:text-gray-200"
+		onclick={() =>
 			dispatch("showAlternateMsg", {
 				id: alternatives[Math.min(alternatives.length - 1, currentIdx + 1)],
 			})}

src/lib/components/chat/AssistantIntroduction.svelte CHANGED Viewed

@@ -18,36 +18,41 @@
 	import { env as envPublic } from "$env/dynamic/public";
 	import { page } from "$app/stores";
-	export let models: Model[];
-	export let assistant: Pick<
-		Assistant,
-		| "avatar"
-		| "name"
-		| "rag"
-		| "dynamicPrompt"
-		| "modelId"
-		| "createdByName"
-		| "exampleInputs"
-		| "_id"
-		| "description"
-		| "userCount"
-		| "tools"
-	>;
 	const dispatch = createEventDispatcher<{ message: string }>();
-	$: hasRag =
 		assistant?.rag?.allowAllDomains ||
-		(assistant?.rag?.allowedDomains?.length ?? 0) > 0 ||
-		(assistant?.rag?.allowedLinks?.length ?? 0) > 0 ||
-		assistant?.dynamicPrompt;
 	const prefix =
 		envPublic.PUBLIC_SHARE_PREFIX || `${envPublic.PUBLIC_ORIGIN || $page.url.origin}${base}`;
-	$: shareUrl = `${prefix}/assistant/${assistant?._id}`;
-	let isCopied = false;
 	const settings = useSettingsStore();
 </script>
@@ -128,7 +133,7 @@
 			<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 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);
 							isCopied = true;
@@ -154,7 +159,7 @@
 			</div>
 		</div>
 		<button
-			on:click={() => {
 				settings.instantSet({
 					activeModel: models[0].name,
 				});
@@ -177,7 +182,7 @@
 						<button
 							type="button"
 							class="truncate whitespace-nowrap rounded-xl border bg-gray-50 px-3 py-2 text-left text-smd text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
-							on:click={() => dispatch("message", example)}
 						>
 							{example}
 						</button>

 	import { env as envPublic } from "$env/dynamic/public";
 	import { page } from "$app/stores";
+	interface Props {
+		models: Model[];
+		assistant: Pick<
+			Assistant,
+			| "avatar"
+			| "name"
+			| "rag"
+			| "dynamicPrompt"
+			| "modelId"
+			| "createdByName"
+			| "exampleInputs"
+			| "_id"
+			| "description"
+			| "userCount"
+			| "tools"
+		>;
+	}
+	let { models, assistant }: Props = $props();
 	const dispatch = createEventDispatcher<{ message: string }>();
+	let hasRag = $derived(
 		assistant?.rag?.allowAllDomains ||
+			(assistant?.rag?.allowedDomains?.length ?? 0) > 0 ||
+			(assistant?.rag?.allowedLinks?.length ?? 0) > 0 ||
+			assistant?.dynamicPrompt
+	);
 	const prefix =
 		envPublic.PUBLIC_SHARE_PREFIX || `${envPublic.PUBLIC_ORIGIN || $page.url.origin}${base}`;
+	let shareUrl = $derived(`${prefix}/assistant/${assistant?._id}`);
+	let isCopied = $state(false);
 	const settings = useSettingsStore();
 </script>
 			<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 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"
+					onclick={() => {
 						if (!isCopied) {
 							share(shareUrl, assistant.name);
 							isCopied = true;
 			</div>
 		</div>
 		<button
+			onclick={() => {
 				settings.instantSet({
 					activeModel: models[0].name,
 				});
 						<button
 							type="button"
 							class="truncate whitespace-nowrap rounded-xl border bg-gray-50 px-3 py-2 text-left text-smd text-gray-600 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+							onclick={() => dispatch("message", example)}
 						>
 							{example}
 						</button>

src/lib/components/chat/ChatInput.svelte CHANGED Viewed

@@ -23,18 +23,35 @@
 	import IconAdd from "~icons/carbon/add";
 	import { captureScreen } from "$lib/utils/screenshot";
 	import IconScreenshot from "../icons/IconScreenshot.svelte";
-	export let files: File[] = [];
-	export let mimeTypes: string[] = [];
-	export let value = "";
-	export let placeholder = "";
-	export let loading = false;
-	export let disabled = false;
-	export let assistant: Assistant | undefined = undefined;
-	export let modelHasTools = false;
-	export let modelIsMultimodal = false;
 	const onFileChange = async (e: Event) => {
 		if (!e.target) return;
@@ -48,20 +65,20 @@
 		}
 	};
-	let textareaElement: HTMLTextAreaElement;
-	let isCompositionOn = false;
 	const dispatch = createEventDispatcher<{ submit: void }>();
 	onMount(() => {
 		if (!isVirtualKeyboard()) {
-			textareaElement.focus();
 		}
 		function onFormSubmit() {
 			adjustTextareaHeight();
 		}
-		const formEl = textareaElement.closest("form");
 		formEl?.addEventListener("submit", onFormSubmit);
 		return () => {
 			formEl?.removeEventListener("submit", onFormSubmit);
@@ -84,6 +101,10 @@
 	}
 	function adjustTextareaHeight() {
 		textareaElement.style.height = "auto";
 		textareaElement.style.height = `${textareaElement.scrollHeight}px`;
@@ -109,24 +130,29 @@
 	// tool section
-	$: webSearchIsOn = modelHasTools
-		? ($settings.tools?.includes(webSearchToolId) ?? false) ||
-		  ($settings.tools?.includes(fetchUrlToolId) ?? false)
-		: $webSearchParameters.useSearch;
-	$: imageGenIsOn = $settings.tools?.includes(imageGenToolId) ?? false;
-	$: documentParserIsOn =
-		modelHasTools && files.length > 0 && files.some((file) => file.type.startsWith("application/"));
-	$: extraTools = $page.data.tools
-		.filter((t: ToolFront) => $settings.tools?.includes(t._id))
-		.filter(
-			(t: ToolFront) =>
-				![documentParserToolId, imageGenToolId, webSearchToolId, fetchUrlToolId].includes(t._id)
-		) satisfies ToolFront[];
 </script>
-<div class="flex min-h-full flex-1 flex-col" on:paste>
 	<textarea
 		rows="1"
 		tabindex="0"
@@ -135,14 +161,19 @@
 		class:text-gray-400={disabled}
 		bind:value
 		bind:this={textareaElement}
-		on:keydown={handleKeydown}
-		on:compositionstart={() => (isCompositionOn = true)}
-		on:compositionend={() => (isCompositionOn = false)}
-		on:input={adjustTextareaHeight}
-		on:beforeinput
 		{placeholder}
 		{disabled}
-	/>
 	{#if !assistant}
 		<div
@@ -159,7 +190,8 @@
 					class="base-tool"
 					class:active-tool={webSearchIsOn}
 					disabled={loading}
-					on:click|preventDefault={async () => {
 						if (modelHasTools) {
 							if (webSearchIsOn) {
 								await settings.instantSet({
@@ -195,7 +227,8 @@
 						class="base-tool"
 						class:active-tool={imageGenIsOn}
 						disabled={loading}
-						on:click|preventDefault={async () => {
 							if (modelHasTools) {
 								if (imageGenIsOn) {
 									await settings.instantSet({
@@ -227,7 +260,7 @@
 						return m.split("/")[1];
 					})
 					.join(", ")}
-				<form class="flex items-center">
 					<HoverTooltip
 						label={mimeTypesString.includes("*")
 							? "Upload any file"
@@ -241,7 +274,7 @@
 								class="absolute hidden size-0"
 								aria-label="Upload file"
 								type="file"
-								on:change={onFileChange}
 								accept={mimeTypes.join(",")}
 							/>
 							<IconPaperclip classNames="text-xl" />
@@ -250,7 +283,7 @@
 							{/if}
 						</label>
 					</HoverTooltip>
-				</form>
 				{#if mimeTypes.includes("image/*")}
 					<HoverTooltip
 						label="Capture screenshot"
@@ -259,7 +292,8 @@
 					>
 						<button
 							class="base-tool"
-							on:click|preventDefault={async () => {
 								const screenshot = await captureScreen();
 								// Convert base64 to blob
@@ -282,11 +316,14 @@
 					<button
 						class="active-tool base-tool"
 						disabled={loading}
-						on:click|preventDefault={async () => {
 							goto(`${base}/tools/${tool._id}`);
 						}}
 					>
-						<ToolLogo icon={tool.icon} color={tool.color} size="xs" />
 						{tool.displayName}
 					</button>
 				{/each}
@@ -308,22 +345,14 @@
 			{/if}
 		</div>
 	{/if}
-	<slot />
 </div>
 <style lang="postcss">
-	pre,
-	textarea {
 		font-family: inherit;
 		box-sizing: border-box;
 		line-height: 1.5;
 	}
-	.base-tool {
-		@apply flex h-[1.6rem] items-center gap-[.2rem] whitespace-nowrap border border-transparent text-xs outline-none transition-all focus:outline-none active:outline-none dark:hover:text-gray-300 sm:hover:text-purple-600;
-	}
-	.active-tool {
-		@apply rounded-full !border-purple-200 bg-purple-100 pl-1 pr-2 text-purple-600 hover:text-purple-600  dark:!border-purple-700 dark:bg-purple-600/40 dark:text-purple-200;
-	}
 </style>

 	import IconAdd from "~icons/carbon/add";
 	import { captureScreen } from "$lib/utils/screenshot";
 	import IconScreenshot from "../icons/IconScreenshot.svelte";
+	import { loginModalOpen } from "$lib/stores/loginModal";
+	interface Props {
+		files?: File[];
+		mimeTypes?: string[];
+		value?: string;
+		placeholder?: string;
+		loading?: boolean;
+		disabled?: boolean;
+		assistant?: Assistant | undefined;
+		modelHasTools?: boolean;
+		modelIsMultimodal?: boolean;
+		children?: import("svelte").Snippet;
+		onPaste?: (e: ClipboardEvent) => void;
+	}
+	let {
+		files = $bindable([]),
+		mimeTypes = [],
+		value = $bindable(""),
+		placeholder = "",
+		loading = false,
+		disabled = false,
+		assistant = undefined,
+		modelHasTools = false,
+		modelIsMultimodal = false,
+		children,
+		onPaste,
+	}: Props = $props();
 	const onFileChange = async (e: Event) => {
 		if (!e.target) return;
 		}
 	};
+	let textareaElement: HTMLTextAreaElement | undefined = $state();
+	let isCompositionOn = $state(false);
 	const dispatch = createEventDispatcher<{ submit: void }>();
 	onMount(() => {
 		if (!isVirtualKeyboard()) {
+			textareaElement?.focus();
 		}
 		function onFormSubmit() {
 			adjustTextareaHeight();
 		}
+		const formEl = textareaElement?.closest("form");
 		formEl?.addEventListener("submit", onFormSubmit);
 		return () => {
 			formEl?.removeEventListener("submit", onFormSubmit);
 	}
 	function adjustTextareaHeight() {
+		if (!textareaElement) {
+			return;
+		}
 		textareaElement.style.height = "auto";
 		textareaElement.style.height = `${textareaElement.scrollHeight}px`;
 	// tool section
+	let webSearchIsOn = $derived(
+		modelHasTools
+			? ($settings.tools?.includes(webSearchToolId) ?? false) ||
+					($settings.tools?.includes(fetchUrlToolId) ?? false)
+			: $webSearchParameters.useSearch
+	);
+	let imageGenIsOn = $derived($settings.tools?.includes(imageGenToolId) ?? false);
+	let documentParserIsOn = $derived(
+		modelHasTools && files.length > 0 && files.some((file) => file.type.startsWith("application/"))
+	);
+	let extraTools = $derived(
+		$page.data.tools
+			.filter((t: ToolFront) => $settings.tools?.includes(t._id))
+			.filter(
+				(t: ToolFront) =>
+					![documentParserToolId, imageGenToolId, webSearchToolId, fetchUrlToolId].includes(t._id)
+			) satisfies ToolFront[]
+	);
 </script>
+<div class="flex min-h-full flex-1 flex-col" onpaste={onPaste}>
 	<textarea
 		rows="1"
 		tabindex="0"
 		class:text-gray-400={disabled}
 		bind:value
 		bind:this={textareaElement}
+		onkeydown={handleKeydown}
+		oncompositionstart={() => (isCompositionOn = true)}
+		oncompositionend={() => (isCompositionOn = false)}
+		oninput={adjustTextareaHeight}
+		onbeforeinput={(ev) => {
+			if ($page.data.loginRequired) {
+				ev.preventDefault();
+				$loginModalOpen = true;
+			}
+		}}
 		{placeholder}
 		{disabled}
+	></textarea>
 	{#if !assistant}
 		<div
 					class="base-tool"
 					class:active-tool={webSearchIsOn}
 					disabled={loading}
+					onclick={async (e) => {
+						e.preventDefault();
 						if (modelHasTools) {
 							if (webSearchIsOn) {
 								await settings.instantSet({
 						class="base-tool"
 						class:active-tool={imageGenIsOn}
 						disabled={loading}
+						onclick={async (e) => {
+							e.preventDefault();
 							if (modelHasTools) {
 								if (imageGenIsOn) {
 									await settings.instantSet({
 						return m.split("/")[1];
 					})
 					.join(", ")}
+				<div class="flex items-center">
 					<HoverTooltip
 						label={mimeTypesString.includes("*")
 							? "Upload any file"
 								class="absolute hidden size-0"
 								aria-label="Upload file"
 								type="file"
+								onchange={onFileChange}
 								accept={mimeTypes.join(",")}
 							/>
 							<IconPaperclip classNames="text-xl" />
 							{/if}
 						</label>
 					</HoverTooltip>
+				</div>
 				{#if mimeTypes.includes("image/*")}
 					<HoverTooltip
 						label="Capture screenshot"
 					>
 						<button
 							class="base-tool"
+							onclick={async (e) => {
+								e.preventDefault();
 								const screenshot = await captureScreen();
 								// Convert base64 to blob
 					<button
 						class="active-tool base-tool"
 						disabled={loading}
+						onclick={async (e) => {
+							e.preventDefault();
 							goto(`${base}/tools/${tool._id}`);
 						}}
 					>
+						{#key tool.icon + tool.color}
+							<ToolLogo icon={tool.icon} color={tool.color} size="xs" />
+						{/key}
 						{tool.displayName}
 					</button>
 				{/each}
 			{/if}
 		</div>
 	{/if}
+	{@render children?.()}
 </div>
 <style lang="postcss">
+	:global(pre),
+	:global(textarea) {
 		font-family: inherit;
 		box-sizing: border-box;
 		line-height: 1.5;
 	}
 </style>

src/lib/components/chat/ChatIntroduction.svelte CHANGED Viewed

@@ -9,7 +9,11 @@
 	import { base } from "$app/paths";
 	import JSON5 from "json5";
-	export let currentModel: Model;
 	const announcementBanners = envPublic.PUBLIC_ANNOUNCEMENT_BANNERS
 		? JSON5.parse(envPublic.PUBLIC_ANNOUNCEMENT_BANNERS)
@@ -58,7 +62,9 @@
 								alt=""
 							/>
 						{:else}
-							<div class="size-4 rounded border border-transparent bg-gray-300 dark:bg-gray-800" />
 						{/if}
 						{currentModel.displayName}
 					</div>
@@ -81,12 +87,12 @@
 					<button
 						type="button"
 						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}
 					</button>
 				{/each}
 			</div>
 		</div>{/if}
-	<div class="h-40 sm:h-24" />
 </div>

 	import { base } from "$app/paths";
 	import JSON5 from "json5";
+	interface Props {
+		currentModel: Model;
+	}
+	let { currentModel }: Props = $props();
 	const announcementBanners = envPublic.PUBLIC_ANNOUNCEMENT_BANNERS
 		? JSON5.parse(envPublic.PUBLIC_ANNOUNCEMENT_BANNERS)
 								alt=""
 							/>
 						{:else}
+							<div
+								class="size-4 rounded border border-transparent bg-gray-300 dark:bg-gray-800"
+							></div>
 						{/if}
 						{currentModel.displayName}
 					</div>
 					<button
 						type="button"
 						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"
+						onclick={() => dispatch("message", example.prompt)}
 					>
 						{example.title}
 					</button>
 				{/each}
 			</div>
 		</div>{/if}
+	<div class="h-40 sm:h-24"></div>
 </div>

src/lib/components/chat/ChatMessage.svelte CHANGED Viewed

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { Message } from "$lib/types/Message";
-	import { afterUpdate, createEventDispatcher, tick } from "svelte";
-	import { deepestChild } from "$lib/utils/deepestChild";
 	import { page } from "$app/stores";
 	import CopyToClipBoardBtn from "../CopyToClipBoardBtn.svelte";
@@ -25,117 +26,106 @@
 	} from "$lib/types/MessageUpdate";
 	import { base } from "$app/paths";
 	import ToolUpdate from "./ToolUpdate.svelte";
-	import { useSettingsStore } from "$lib/stores/settings";
 	import MarkdownRenderer from "./MarkdownRenderer.svelte";
 	import OpenReasoningResults from "./OpenReasoningResults.svelte";
 	import Alternatives from "./Alternatives.svelte";
 	import Vote from "./Vote.svelte";
-	export let message: Message;
-	export let loading = false;
-	export let isAuthor = true;
-	export let readOnly = false;
-	export let isTapped = false;
-	export let alternatives: Message["id"][] = [];
-	export let editMsdgId: Message["id"] | null = null;
-	export let isLast = false;
 	const dispatch = createEventDispatcher<{
 		retry: { content?: string; id: Message["id"] };
 	}>();
-	let contentEl: HTMLElement;
-	let loadingEl: IconLoading;
-	let pendingTimeout: ReturnType<typeof setTimeout>;
-	let isCopied = false;
-	$: emptyLoad =
-		!message.content && (webSearchIsDone || (searchUpdates && searchUpdates.length === 0));
-	const settings = useSettingsStore();
-	afterUpdate(() => {
-		if ($settings.disableStream) {
-			return;
-		}
-		loadingEl?.$destroy();
-		clearTimeout(pendingTimeout);
-		// Add loading animation to the last message if update takes more than 600ms
-		if (isLast && loading && emptyLoad) {
-			pendingTimeout = setTimeout(() => {
-				if (contentEl) {
-					loadingEl = new IconLoading({
-						target: deepestChild(contentEl),
-						props: { classNames: "loading inline ml-2 first:ml-0" },
-					});
-				}
-			}, 600);
-		}
-	});
 	function handleKeyDown(e: KeyboardEvent) {
 		if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-			editFormEl.requestSubmit();
 		}
 	}
-	$: searchUpdates = (message.updates?.filter(({ type }) => type === MessageUpdateType.WebSearch) ??
-		[]) as MessageWebSearchUpdate[];
-	$: reasoningUpdates = (message.updates?.filter(
-		({ type }) => type === MessageUpdateType.Reasoning
-	) ?? []) as MessageReasoningUpdate[];
-	$: messageFinalAnswer = message.updates?.find(
-		({ type }) => type === MessageUpdateType.FinalAnswer
-	) as MessageFinalAnswerUpdate;
 	// filter all updates with type === "tool" then group them by uuid field
-	$: toolUpdates = message.updates
-		?.filter(({ type }) => type === "tool")
-		.reduce((acc, update) => {
-			if (update.type !== "tool") {
-				return acc;
-			}
-			acc[update.uuid] = acc[update.uuid] ?? [];
-			acc[update.uuid].push(update);
-			return acc;
-		}, {} as Record<string, MessageToolUpdate[]>);
-	$: urlNotTrailing = $page.url.pathname.replace(/\/$/, "");
-	$: downloadLink = urlNotTrailing + `/message/${message.id}/prompt`;
-	let webSearchIsDone = true;
-	$: webSearchIsDone = searchUpdates.some(
-		(update) => update.subtype === MessageWebSearchUpdateType.Finished
 	);
-	$: webSearchSources = searchUpdates?.find(
-		(update): update is MessageWebSearchSourcesUpdate =>
-			update.subtype === MessageWebSearchUpdateType.Sources
-	)?.sources;
-	$: if (isCopied) {
-		setTimeout(() => {
-			isCopied = false;
-		}, 1000);
-	}
-	$: editMode = editMsdgId === message.id;
-	let editContentEl: HTMLTextAreaElement;
-	let editFormEl: HTMLFormElement;
-	$: if (editMode) {
-		tick();
-		if (editContentEl) {
-			editContentEl.value = message.content;
-			editContentEl?.focus();
 		}
-	}
 </script>
 {#if message.from === "assistant"}
@@ -144,8 +134,8 @@
 		data-message-id={message.id}
 		data-message-role="assistant"
 		role="presentation"
-		on:click={() => (isTapped = !isTapped)}
-		on:keydown={() => (isTapped = !isTapped)}
 	>
 		{#if $page.data?.assistant?.avatar}
 			<img
@@ -199,7 +189,7 @@
 				bind:this={contentEl}
 				class:mt-2={reasoningUpdates.length > 0 || searchUpdates.length > 0}
 			>
-				{#if isLast && loading && $settings.disableStream}
 					<IconLoading classNames="loading inline ml-2 first:ml-0" />
 				{/if}
@@ -269,14 +259,14 @@
 					class="btn rounded-sm p-1 text-sm text-gray-400 hover:text-gray-500 focus:ring-0 dark:text-gray-400 dark:hover:text-gray-300"
 					title="Retry"
 					type="button"
-					on:click={() => {
 						dispatch("retry", { id: message.id });
 					}}
 				>
 					<CarbonRotate360 />
 				</button>
 				<CopyToClipBoardBtn
-					on:click={() => {
 						isCopied = true;
 					}}
 					classNames="btn rounded-sm p-1 text-sm text-gray-400 hover:text-gray-500 focus:ring-0 dark:text-gray-400 dark:hover:text-gray-300"
@@ -295,8 +285,8 @@
 		data-message-id={message.id}
 		data-message-type="user"
 		role="presentation"
-		on:click={() => (isTapped = !isTapped)}
-		on:keydown={() => (isTapped = !isTapped)}
 	>
 		<div class="flex w-full flex-col gap-2">
 			{#if message.files?.length}
@@ -318,8 +308,9 @@
 					<form
 						class="flex w-full flex-col"
 						bind:this={editFormEl}
-						on:submit|preventDefault={() => {
-							dispatch("retry", { content: editContentEl.value, id: message.id });
 							editMsdgId = null;
 						}}
 					>
@@ -328,9 +319,9 @@
 							rows="5"
 							bind:this={editContentEl}
 							value={message.content.trim()}
-							on:keydown={handleKeyDown}
 							required
-						/>
 						<div class="flex w-full flex-row flex-nowrap items-center justify-center gap-2 pt-2">
 							<button
 								type="submit"
@@ -346,7 +337,7 @@
 							<button
 								type="button"
 								class="btn rounded-sm p-2 text-sm text-gray-400 hover:text-gray-500 focus:ring-0 dark:text-gray-400 dark:hover:text-gray-300"
-								on:click={() => {
 									editMsdgId = null;
 								}}
 							>
@@ -379,7 +370,7 @@
 									class="cursor-pointer rounded-lg border border-gray-100 bg-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-400 dark:hover:text-gray-300 md:hidden lg:-right-2"
 									title="Branch"
 									type="button"
-									on:click={() => (editMsdgId = message.id)}
 								>
 									<CarbonPen />
 								</button>

 <script lang="ts">
+	import { run } from "svelte/legacy";
 	import type { Message } from "$lib/types/Message";
+	import { createEventDispatcher, tick } from "svelte";
 	import { page } from "$app/stores";
 	import CopyToClipBoardBtn from "../CopyToClipBoardBtn.svelte";
 	} from "$lib/types/MessageUpdate";
 	import { base } from "$app/paths";
 	import ToolUpdate from "./ToolUpdate.svelte";
 	import MarkdownRenderer from "./MarkdownRenderer.svelte";
 	import OpenReasoningResults from "./OpenReasoningResults.svelte";
 	import Alternatives from "./Alternatives.svelte";
 	import Vote from "./Vote.svelte";
+	interface Props {
+		message: Message;
+		loading?: boolean;
+		isAuthor?: boolean;
+		readOnly?: boolean;
+		isTapped?: boolean;
+		alternatives?: Message["id"][];
+		editMsdgId?: Message["id"] | null;
+		isLast?: boolean;
+	}
+	let {
+		message,
+		loading = false,
+		isAuthor = true,
+		readOnly = false,
+		isTapped = $bindable(false),
+		alternatives = [],
+		editMsdgId = $bindable(null),
+		isLast = false,
+	}: Props = $props();
 	const dispatch = createEventDispatcher<{
 		retry: { content?: string; id: Message["id"] };
 	}>();
+	let contentEl: HTMLElement | undefined = $state();
+	let isCopied = $state(false);
 	function handleKeyDown(e: KeyboardEvent) {
 		if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+			editFormEl?.requestSubmit();
 		}
 	}
+	let editContentEl: HTMLTextAreaElement | undefined = $state();
+	let editFormEl: HTMLFormElement | undefined = $state();
+	let searchUpdates = $derived(
+		(message.updates?.filter(({ type }) => type === MessageUpdateType.WebSearch) ??
+			[]) as MessageWebSearchUpdate[]
+	);
+	let reasoningUpdates = $derived(
+		(message.updates?.filter(({ type }) => type === MessageUpdateType.Reasoning) ??
+			[]) as MessageReasoningUpdate[]
+	);
+	let messageFinalAnswer = $derived(
+		message.updates?.find(
+			({ type }) => type === MessageUpdateType.FinalAnswer
+		) as MessageFinalAnswerUpdate
+	);
 	// filter all updates with type === "tool" then group them by uuid field
+	let toolUpdates = $derived(
+		message.updates
+			?.filter(({ type }) => type === "tool")
+			.reduce(
+				(acc, update) => {
+					if (update.type !== "tool") {
+						return acc;
+					}
+					acc[update.uuid] = acc[update.uuid] ?? [];
+					acc[update.uuid].push(update);
+					return acc;
+				},
+				{} as Record<string, MessageToolUpdate[]>
+			)
 	);
+	let urlNotTrailing = $derived($page.url.pathname.replace(/\/$/, ""));
+	let downloadLink = $derived(urlNotTrailing + `/message/${message.id}/prompt`);
+	let webSearchSources = $derived(
+		searchUpdates?.find(
+			(update): update is MessageWebSearchSourcesUpdate =>
+				update.subtype === MessageWebSearchUpdateType.Sources
+		)?.sources
+	);
+	run(() => {
+		if (isCopied) {
+			setTimeout(() => {
+				isCopied = false;
+			}, 1000);
 		}
+	});
+	let editMode = $derived(editMsdgId === message.id);
+	run(() => {
+		if (editMode) {
+			tick();
+			if (editContentEl) {
+				editContentEl.value = message.content;
+				editContentEl?.focus();
+			}
+		}
+	});
 </script>
 {#if message.from === "assistant"}
 		data-message-id={message.id}
 		data-message-role="assistant"
 		role="presentation"
+		onclick={() => (isTapped = !isTapped)}
+		onkeydown={() => (isTapped = !isTapped)}
 	>
 		{#if $page.data?.assistant?.avatar}
 			<img
 				bind:this={contentEl}
 				class:mt-2={reasoningUpdates.length > 0 || searchUpdates.length > 0}
 			>
+				{#if isLast && loading && message.content.length === 0}
 					<IconLoading classNames="loading inline ml-2 first:ml-0" />
 				{/if}
 					class="btn rounded-sm p-1 text-sm text-gray-400 hover:text-gray-500 focus:ring-0 dark:text-gray-400 dark:hover:text-gray-300"
 					title="Retry"
 					type="button"
+					onclick={() => {
 						dispatch("retry", { id: message.id });
 					}}
 				>
 					<CarbonRotate360 />
 				</button>
 				<CopyToClipBoardBtn
+					onClick={() => {
 						isCopied = true;
 					}}
 					classNames="btn rounded-sm p-1 text-sm text-gray-400 hover:text-gray-500 focus:ring-0 dark:text-gray-400 dark:hover:text-gray-300"
 		data-message-id={message.id}
 		data-message-type="user"
 		role="presentation"
+		onclick={() => (isTapped = !isTapped)}
+		onkeydown={() => (isTapped = !isTapped)}
 	>
 		<div class="flex w-full flex-col gap-2">
 			{#if message.files?.length}
 					<form
 						class="flex w-full flex-col"
 						bind:this={editFormEl}
+						onsubmit={(e) => {
+							e.preventDefault();
+							dispatch("retry", { content: editContentEl?.value, id: message.id });
 							editMsdgId = null;
 						}}
 					>
 							rows="5"
 							bind:this={editContentEl}
 							value={message.content.trim()}
+							onkeydown={handleKeyDown}
 							required
+						></textarea>
 						<div class="flex w-full flex-row flex-nowrap items-center justify-center gap-2 pt-2">
 							<button
 								type="submit"
 							<button
 								type="button"
 								class="btn rounded-sm p-2 text-sm text-gray-400 hover:text-gray-500 focus:ring-0 dark:text-gray-400 dark:hover:text-gray-300"
+								onclick={() => {
 									editMsdgId = null;
 								}}
 							>
 									class="cursor-pointer rounded-lg border border-gray-100 bg-gray-100 p-1 text-xs text-gray-400 group-hover:block hover:text-gray-500 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-400 dark:hover:text-gray-300 md:hidden lg:-right-2"
 									title="Branch"
 									type="button"
+									onclick={() => (editMsdgId = message.id)}
 								>
 									<CarbonPen />
 								</button>

src/lib/components/chat/ChatWindow.svelte CHANGED Viewed

@@ -1,4 +1,7 @@
 <script lang="ts">
 	import type { Message, MessageFile } from "$lib/types/Message";
 	import { createEventDispatcher, onDestroy, tick } from "svelte";
@@ -35,26 +38,43 @@
 	import type { ToolFront } from "$lib/types/Tool";
 	import { loginModalOpen } from "$lib/stores/loginModal";
-	export let messages: Message[] = [];
-	export let messagesAlternatives: Message["id"][][] = [];
-	export let loading = false;
-	export let pending = false;
-	export let shared = false;
-	export let currentModel: Model;
-	export let models: Model[];
-	export let assistant: Assistant | undefined = undefined;
-	export let preprompt: string | undefined = undefined;
-	export let files: File[] = [];
-	$: isReadOnly = !models.some((model) => model.id === currentModel.id);
-	let message: string;
 	let timeout: ReturnType<typeof setTimeout>;
-	let isSharedRecently = false;
-	let editMsdgId: Message["id"] | null = null;
-	$: pastedLongContent = false;
-	$: $page.params.id && (isSharedRecently = false);
 	const dispatch = createEventDispatcher<{
 		message: string;
@@ -72,7 +92,7 @@
 	let lastTarget: EventTarget | null = null;
-	let onDrag = false;
 	const onDragEnter = (e: DragEvent) => {
 		lastTarget = e.target;
@@ -122,15 +142,23 @@
 		}
 	};
-	$: lastMessage = browser && (messages.at(-1) as Message);
-	$: lastIsError =
 		lastMessage &&
-		!loading &&
-		(lastMessage.from === "user" ||
-			lastMessage.updates?.findIndex((u) => u.type === "status" && u.status === "error") !== -1);
-	$: sources = files?.map<Promise<MessageFile>>((file) =>
-		file2base64(file).then((value) => ({ type: "base64", value, mime: file.type, name: file.name }))
 	);
 	function onShare() {
@@ -154,47 +182,62 @@
 		}
 	});
-	let chatContainer: HTMLElement;
 	async function scrollToBottom() {
 		await tick();
 		chatContainer.scrollTop = chatContainer.scrollHeight;
 	}
 	// If last message is from user, scroll to bottom
-	$: if (lastMessage && lastMessage.from === "user") {
-		scrollToBottom();
-	}
 	const settings = useSettingsStore();
-	$: mimeTypesFromActiveTools = $page.data.tools
-		.filter((tool: ToolFront) => {
-			if (assistant) {
-				return assistant.tools?.includes(tool._id);
-			}
-			if (currentModel.tools) {
-				return $settings?.tools?.includes(tool._id) ?? tool.isOnByDefault;
-			}
-			return false;
-		})
-		.flatMap((tool: ToolFront) => tool.mimeTypes ?? []);
-	$: activeMimeTypes = Array.from(
-		new Set([
-			...mimeTypesFromActiveTools, // fetch mime types from active tools either from tool settings or active assistant
-			...(currentModel.tools && !assistant ? ["application/pdf"] : []), // if its a tool model, we can always enable document parser so we always accept pdfs
-			...(currentModel.multimodal ? currentModel.multimodalAcceptedMimetypes ?? ["image/*"] : []), // if its a multimodal model, we always accept images
-		])
 	);
-	$: isFileUploadEnabled = activeMimeTypes.length > 0;
 </script>
 <svelte:window
-	on:dragenter={onDragEnter}
-	on:dragleave={onDragLeave}
-	on:dragover|preventDefault
-	on:drop|preventDefault={() => (onDrag = false)}
 />
 <div class="relative min-h-0 min-w-0">
@@ -326,11 +369,11 @@
 		<div class="w-full">
 			<div class="flex w-full *:mb-3">
 				{#if loading}
-					<StopGeneratingBtn classNames="ml-auto" on:click={() => dispatch("stop")} />
 				{:else if lastIsError}
 					<RetryBtn
 						classNames="ml-auto"
-						on:click={() => {
 							if (lastMessage && lastMessage.ancestors) {
 								dispatch("retry", {
 									id: lastMessage.id,
@@ -341,7 +384,7 @@
 				{:else if messages && lastMessage && lastMessage.interrupted && !isReadOnly}
 					<div class="ml-auto gap-2">
 						<ContinueBtn
-							on:click={() => {
 								if (lastMessage && lastMessage.ancestors) {
 									dispatch("continue", {
 										id: lastMessage?.id,
@@ -355,7 +398,10 @@
 			<form
 				tabindex="-1"
 				aria-label={isFileUploadEnabled ? "file dropzone" : undefined}
-				on:submit|preventDefault={handleSubmit}
 				class="relative flex w-full max-w-4xl flex-1 items-center rounded-xl border bg-gray-100 dark:border-gray-600 dark:bg-gray-700
             {isReadOnly ? 'opacity-30' : ''}"
 			>
@@ -377,13 +423,7 @@
 								bind:files
 								mimeTypes={activeMimeTypes}
 								on:submit={handleSubmit}
-								on:beforeinput={(ev) => {
-									if ($page.data.loginRequired) {
-										ev.preventDefault();
-										$loginModalOpen = true;
-									}
-								}}
-								on:paste={onPaste}
 								disabled={isReadOnly || lastIsError}
 								modelHasTools={currentModel.tools}
 								modelIsMultimodal={currentModel.multimodal}
@@ -463,7 +503,7 @@
 						class="flex flex-none items-center hover:text-gray-400 max-sm:rounded-lg max-sm:bg-gray-50 max-sm:px-2.5 dark:max-sm:bg-gray-800"
 						type="button"
 						class:hover:underline={!isSharedRecently}
-						on:click={onShare}
 						disabled={isSharedRecently}
 					>
 						{#if isSharedRecently}

 <script lang="ts">
+	import { run, createBubbler } from "svelte/legacy";
+	const bubble = createBubbler();
 	import type { Message, MessageFile } from "$lib/types/Message";
 	import { createEventDispatcher, onDestroy, tick } from "svelte";
 	import type { ToolFront } from "$lib/types/Tool";
 	import { loginModalOpen } from "$lib/stores/loginModal";
+	interface Props {
+		messages?: Message[];
+		messagesAlternatives?: Message["id"][][];
+		loading?: boolean;
+		pending?: boolean;
+		shared?: boolean;
+		currentModel: Model;
+		models: Model[];
+		assistant?: Assistant | undefined;
+		preprompt?: string | undefined;
+		files?: File[];
+	}
+	let {
+		messages = [],
+		messagesAlternatives = [],
+		loading = false,
+		pending = false,
+		shared = false,
+		currentModel,
+		models,
+		assistant = undefined,
+		preprompt = undefined,
+		files = $bindable([]),
+	}: Props = $props();
+	let isReadOnly = $derived(!models.some((model) => model.id === currentModel.id));
+	let message: string = $state("");
 	let timeout: ReturnType<typeof setTimeout>;
+	let isSharedRecently = $state(false);
+	let editMsdgId: Message["id"] | null = $state(null);
+	let pastedLongContent = $state(false);
+	run(() => {
+		$page.params.id && (isSharedRecently = false);
+	});
 	const dispatch = createEventDispatcher<{
 		message: string;
 	let lastTarget: EventTarget | null = null;
+	let onDrag = $state(false);
 	const onDragEnter = (e: DragEvent) => {
 		lastTarget = e.target;
 		}
 	};
+	let lastMessage = $derived(browser && (messages.at(-1) as Message));
+	let lastIsError = $derived(
 		lastMessage &&
+			!loading &&
+			(lastMessage.from === "user" ||
+				lastMessage.updates?.findIndex((u) => u.type === "status" && u.status === "error") !== -1)
+	);
+	let sources = $derived(
+		files?.map<Promise<MessageFile>>((file) =>
+			file2base64(file).then((value) => ({
+				type: "base64",
+				value,
+				mime: file.type,
+				name: file.name,
+			}))
+		)
 	);
 	function onShare() {
 		}
 	});
+	let chatContainer: HTMLElement | undefined = $state();
 	async function scrollToBottom() {
 		await tick();
+		if (!chatContainer) return;
 		chatContainer.scrollTop = chatContainer.scrollHeight;
 	}
 	// If last message is from user, scroll to bottom
+	run(() => {
+		if (lastMessage && lastMessage.from === "user") {
+			scrollToBottom();
+		}
+	});
 	const settings = useSettingsStore();
+	let mimeTypesFromActiveTools = $derived(
+		$page.data.tools
+			.filter((tool: ToolFront) => {
+				if (assistant) {
+					return assistant.tools?.includes(tool._id);
+				}
+				if (currentModel.tools) {
+					return $settings?.tools?.includes(tool._id) ?? tool.isOnByDefault;
+				}
+				return false;
+			})
+			.flatMap((tool: ToolFront) => tool.mimeTypes ?? [])
+	);
+	let activeMimeTypes = $derived(
+		Array.from(
+			new Set([
+				...mimeTypesFromActiveTools, // fetch mime types from active tools either from tool settings or active assistant
+				...(currentModel.tools && !assistant ? ["application/pdf"] : []), // if its a tool model, we can always enable document parser so we always accept pdfs
+				...(currentModel.multimodal
+					? (currentModel.multimodalAcceptedMimetypes ?? ["image/*"])
+					: []), // if its a multimodal model, we always accept images
+			])
+		)
 	);
+	let isFileUploadEnabled = $derived(activeMimeTypes.length > 0);
 </script>
 <svelte:window
+	ondragenter={onDragEnter}
+	ondragleave={onDragLeave}
+	ondragover={(e) => {
+		e.preventDefault();
+		bubble("dragover");
+	}}
+	ondrop={(e) => {
+		e.preventDefault();
+		onDrag = false;
+	}}
 />
 <div class="relative min-h-0 min-w-0">
 		<div class="w-full">
 			<div class="flex w-full *:mb-3">
 				{#if loading}
+					<StopGeneratingBtn classNames="ml-auto" onClick={() => dispatch("stop")} />
 				{:else if lastIsError}
 					<RetryBtn
 						classNames="ml-auto"
+						onClick={() => {
 							if (lastMessage && lastMessage.ancestors) {
 								dispatch("retry", {
 									id: lastMessage.id,
 				{:else if messages && lastMessage && lastMessage.interrupted && !isReadOnly}
 					<div class="ml-auto gap-2">
 						<ContinueBtn
+							onClick={() => {
 								if (lastMessage && lastMessage.ancestors) {
 									dispatch("continue", {
 										id: lastMessage?.id,
 			<form
 				tabindex="-1"
 				aria-label={isFileUploadEnabled ? "file dropzone" : undefined}
+				onsubmit={(e) => {
+					e.preventDefault();
+					handleSubmit();
+				}}
 				class="relative flex w-full max-w-4xl flex-1 items-center rounded-xl border bg-gray-100 dark:border-gray-600 dark:bg-gray-700
             {isReadOnly ? 'opacity-30' : ''}"
 			>
 								bind:files
 								mimeTypes={activeMimeTypes}
 								on:submit={handleSubmit}
+								{onPaste}
 								disabled={isReadOnly || lastIsError}
 								modelHasTools={currentModel.tools}
 								modelIsMultimodal={currentModel.multimodal}
 						class="flex flex-none items-center hover:text-gray-400 max-sm:rounded-lg max-sm:bg-gray-50 max-sm:px-2.5 dark:max-sm:bg-gray-800"
 						type="button"
 						class:hover:underline={!isSharedRecently}
+						onclick={onShare}
 						disabled={isSharedRecently}
 					>
 						{#if isSharedRecently}

src/lib/components/chat/FileDropzone.svelte CHANGED Viewed

@@ -1,14 +1,25 @@
 <script lang="ts">
 	import { useSettingsStore } from "$lib/stores/settings";
 	import { documentParserToolId } from "$lib/utils/toolIds";
 	import CarbonImage from "~icons/carbon/image";
-	// import EosIconsLoading from "~icons/eos-icons/loading";
-	export let files: File[];
-	export let mimeTypes: string[] = [];
-	export let onDrag = false;
-	export let onDragInner = false;
 	const settings = useSettingsStore();
@@ -74,10 +85,13 @@
 <div
 	id="dropzone"
 	role="form"
-	on:drop={dropHandle}
-	on:dragenter={() => (onDragInner = true)}
-	on:dragleave={() => (onDragInner = false)}
-	on:dragover|preventDefault
 	class="relative flex h-28 w-full max-w-4xl flex-col items-center justify-center gap-1 rounded-xl border-2 border-dotted {onDragInner
 		? 'border-blue-200 !bg-blue-500/10 text-blue-600 *:pointer-events-none dark:border-blue-600 dark:bg-blue-500/20 dark:text-blue-500'
 		: 'bg-gray-100 text-gray-500 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-400'}"

 <script lang="ts">
+	import { createBubbler } from "svelte/legacy";
+	const bubble = createBubbler();
 	import { useSettingsStore } from "$lib/stores/settings";
 	import { documentParserToolId } from "$lib/utils/toolIds";
 	import CarbonImage from "~icons/carbon/image";
+	interface Props {
+		// import EosIconsLoading from "~icons/eos-icons/loading";
+		files: File[];
+		mimeTypes?: string[];
+		onDrag?: boolean;
+		onDragInner?: boolean;
+	}
+	let {
+		files = $bindable(),
+		mimeTypes = [],
+		onDrag = $bindable(false),
+		onDragInner = $bindable(false),
+	}: Props = $props();
 	const settings = useSettingsStore();
 <div
 	id="dropzone"
 	role="form"
+	ondrop={dropHandle}
+	ondragenter={() => (onDragInner = true)}
+	ondragleave={() => (onDragInner = false)}
+	ondragover={(e) => {
+		e.preventDefault();
+		bubble("dragover");
+	}}
 	class="relative flex h-28 w-full max-w-4xl flex-col items-center justify-center gap-1 rounded-xl border-2 border-dotted {onDragInner
 		? 'border-blue-200 !bg-blue-500/10 text-blue-600 *:pointer-events-none dark:border-blue-600 dark:bg-blue-500/20 dark:text-blue-500'
 		: 'bg-gray-100 text-gray-500 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-400'}"

src/lib/components/chat/MarkdownRenderer.svelte CHANGED Viewed

@@ -7,8 +7,12 @@
 	import type { Tokens, TokenizerExtension, RendererExtension } from "marked";
 	import CodeBlock from "../CodeBlock.svelte";
-	export let content: string;
-	export let sources: WebSearchSource[] = [];
 	interface katexBlockToken extends Tokens.Generic {
 		type: "katexBlock";
@@ -135,7 +139,7 @@
 					"&": "&amp;",
 					"'": "&#39;",
 					'"': "&quot;",
-				}[x] || x)
 		);
 	}

 	import type { Tokens, TokenizerExtension, RendererExtension } from "marked";
 	import CodeBlock from "../CodeBlock.svelte";
+	interface Props {
+		content: string;
+		sources?: WebSearchSource[];
+	}
+	let { content, sources = [] }: Props = $props();
 	interface katexBlockToken extends Tokens.Generic {
 		type: "katexBlock";
 					"&": "&amp;",
 					"'": "&#39;",
 					'"': "&quot;",
+				})[x] || x
 		);
 	}

src/lib/components/chat/ModelSwitch.svelte CHANGED Viewed

@@ -4,12 +4,16 @@
 	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;
@@ -50,7 +54,7 @@
 			{/each}
 		</select>
 		<button
-			on:click={handleModelChange}
 			disabled={selectedModelId === currentModel.id}
 			class="rounded-md bg-gray-100 px-2 py-1 dark:bg-gray-900"
 		>

 	import { base } from "$app/paths";
 	import type { Model } from "$lib/types/Model";
+	interface Props {
+		models: Model[];
+		currentModel: Model;
+	}
+	let { models, currentModel }: Props = $props();
+	let selectedModelId = $state(
+		models.map((m) => m.id).includes(currentModel.id) ? currentModel.id : models[0].id
+	);
 	async function handleModelChange() {
 		if (!$page.params.id) return;
 			{/each}
 		</select>
 		<button
+			onclick={handleModelChange}
 			disabled={selectedModelId === currentModel.id}
 			class="rounded-md bg-gray-100 px-2 py-1 dark:bg-gray-900"
 		>

src/lib/components/chat/OpenReasoningResults.svelte CHANGED Viewed

@@ -2,9 +2,13 @@
 	import MarkdownRenderer from "./MarkdownRenderer.svelte";
 	import CarbonCaretDown from "~icons/carbon/caret-down";
-	export let summary: string;
-	export let content: string;
-	export let loading: boolean = false;
 </script>
 <details

 	import MarkdownRenderer from "./MarkdownRenderer.svelte";
 	import CarbonCaretDown from "~icons/carbon/caret-down";
+	interface Props {
+		summary: string;
+		content: string;
+		loading?: boolean;
+	}
+	let { summary, content, loading = false }: Props = $props();
 </script>
 <details

src/lib/components/chat/ToolUpdate.svelte CHANGED Viewed

@@ -12,35 +12,41 @@
 	import { onDestroy } from "svelte";
 	import { browser } from "$app/environment";
-	export let tool: MessageToolUpdate[];
-	export let loading: boolean = false;
 	const toolFnName = tool.find(isMessageToolCallUpdate)?.call.name;
-	$: toolError = tool.some(isMessageToolErrorUpdate);
-	$: toolDone = tool.some(isMessageToolResultUpdate);
-	$: eta = tool.find((el) => el.subtype === MessageToolUpdateType.ETA)?.eta;
 	const availableTools: ToolFront[] = $page.data.tools;
-	let loadingBarEl: HTMLDivElement;
-	let animation: Animation | undefined = undefined;
-	let isShowingLoadingBar = false;
-	$: !toolError &&
-		!toolDone &&
-		loading &&
-		loadingBarEl &&
-		eta &&
-		(() => {
-			loadingBarEl.classList.remove("hidden");
-			isShowingLoadingBar = true;
-			animation = loadingBarEl.animate([{ width: "0%" }, { width: "calc(100%+1rem)" }], {
-				duration: eta * 1000,
-				fill: "forwards",
-			});
-		})();
 	onDestroy(() => {
 		if (animation) {
@@ -49,28 +55,30 @@
 	});
 	// go to 100% quickly if loading is done
-	$: (!loading || toolDone || toolError) &&
-		browser &&
-		loadingBarEl &&
-		isShowingLoadingBar &&
-		(() => {
-			isShowingLoadingBar = false;
-			loadingBarEl.classList.remove("hidden");
-			animation?.cancel();
-			animation = loadingBarEl.animate(
-				[{ width: loadingBarEl.style.width }, { width: "calc(100%+1rem)" }],
-				{
-					duration: 300,
-					fill: "forwards",
-				}
-			);
-			setTimeout(() => {
-				loadingBarEl.classList.add("hidden");
-			}, 300);
-		})();
 </script>
 {#if toolFnName && toolFnName !== "websearch"}
@@ -84,7 +92,7 @@
 			<div
 				bind:this={loadingBarEl}
 				class="absolute -m-1 hidden h-full w-[calc(100%+1rem)] rounded-lg bg-purple-500/5 transition-all dark:bg-purple-500/10"
-			/>
 			<div
 				class="relative grid size-[22px] place-items-center rounded bg-purple-600/10 dark:bg-purple-600/20"
@@ -122,7 +130,7 @@
 			{#if toolUpdate.subtype === MessageToolUpdateType.Call}
 				<div class="mt-1 flex items-center gap-2 opacity-80">
 					<h3 class="text-sm">Parameters</h3>
-					<div class="h-px flex-1 bg-gradient-to-r from-gray-500/20" />
 				</div>
 				<ul class="py-1 text-sm">
 					{#each Object.entries(toolUpdate.call.parameters ?? {}) as [k, v]}
@@ -137,13 +145,13 @@
 			{:else if toolUpdate.subtype === MessageToolUpdateType.Error}
 				<div class="mt-1 flex items-center gap-2 opacity-80">
 					<h3 class="text-sm">Error</h3>
-					<div class="h-px flex-1 bg-gradient-to-r from-gray-500/20" />
 				</div>
 				<p class="text-sm">{toolUpdate.message}</p>
 			{:else if isMessageToolResultUpdate(toolUpdate) && toolUpdate.result.status === ToolResultStatus.Success && toolUpdate.result.display}
 				<div class="mt-1 flex items-center gap-2 opacity-80">
 					<h3 class="text-sm">Result</h3>
-					<div class="h-px flex-1 bg-gradient-to-r from-gray-500/20" />
 				</div>
 				<ul class="py-1 text-sm">
 					{#each toolUpdate.result.outputs as output}

 	import { onDestroy } from "svelte";
 	import { browser } from "$app/environment";
+	interface Props {
+		tool: MessageToolUpdate[];
+		loading?: boolean;
+	}
+	let { tool, loading = false }: Props = $props();
 	const toolFnName = tool.find(isMessageToolCallUpdate)?.call.name;
+	let toolError = $derived(tool.some(isMessageToolErrorUpdate));
+	let toolDone = $derived(tool.some(isMessageToolResultUpdate));
+	let eta = $derived(tool.find((el) => el.subtype === MessageToolUpdateType.ETA)?.eta);
 	const availableTools: ToolFront[] = $page.data.tools;
+	let loadingBarEl: HTMLDivElement | undefined = $state();
+	let animation: Animation | undefined = $state(undefined);
+	let isShowingLoadingBar = $state(false);
+	$effect(() => {
+		!toolError &&
+			!toolDone &&
+			loading &&
+			loadingBarEl &&
+			eta &&
+			(() => {
+				loadingBarEl.classList.remove("hidden");
+				isShowingLoadingBar = true;
+				animation = loadingBarEl.animate([{ width: "0%" }, { width: "calc(100%+1rem)" }], {
+					duration: eta * 1000,
+					fill: "forwards",
+				});
+			})();
+	});
 	onDestroy(() => {
 		if (animation) {
 	});
 	// go to 100% quickly if loading is done
+	$effect(() => {
+		(!loading || toolDone || toolError) &&
+			browser &&
+			loadingBarEl &&
+			isShowingLoadingBar &&
+			(() => {
+				isShowingLoadingBar = false;
+				loadingBarEl.classList.remove("hidden");
+				animation?.cancel();
+				animation = loadingBarEl.animate(
+					[{ width: loadingBarEl.style.width }, { width: "calc(100%+1rem)" }],
+					{
+						duration: 300,
+						fill: "forwards",
+					}
+				);
+				setTimeout(() => {
+					loadingBarEl?.classList.add("hidden");
+				}, 300);
+			})();
+	});
 </script>
 {#if toolFnName && toolFnName !== "websearch"}
 			<div
 				bind:this={loadingBarEl}
 				class="absolute -m-1 hidden h-full w-[calc(100%+1rem)] rounded-lg bg-purple-500/5 transition-all dark:bg-purple-500/10"
+			></div>
 			<div
 				class="relative grid size-[22px] place-items-center rounded bg-purple-600/10 dark:bg-purple-600/20"
 			{#if toolUpdate.subtype === MessageToolUpdateType.Call}
 				<div class="mt-1 flex items-center gap-2 opacity-80">
 					<h3 class="text-sm">Parameters</h3>
+					<div class="h-px flex-1 bg-gradient-to-r from-gray-500/20"></div>
 				</div>
 				<ul class="py-1 text-sm">
 					{#each Object.entries(toolUpdate.call.parameters ?? {}) as [k, v]}
 			{:else if toolUpdate.subtype === MessageToolUpdateType.Error}
 				<div class="mt-1 flex items-center gap-2 opacity-80">
 					<h3 class="text-sm">Error</h3>
+					<div class="h-px flex-1 bg-gradient-to-r from-gray-500/20"></div>
 				</div>
 				<p class="text-sm">{toolUpdate.message}</p>
 			{:else if isMessageToolResultUpdate(toolUpdate) && toolUpdate.result.status === ToolResultStatus.Success && toolUpdate.result.display}
 				<div class="mt-1 flex items-center gap-2 opacity-80">
 					<h3 class="text-sm">Result</h3>
+					<div class="h-px flex-1 bg-gradient-to-r from-gray-500/20"></div>
 				</div>
 				<ul class="py-1 text-sm">
 					{#each toolUpdate.result.outputs as output}

src/lib/components/chat/UploadedFile.svelte CHANGED Viewed

@@ -11,11 +11,16 @@
 	import EosIconsLoading from "~icons/eos-icons/loading";
 	import { base } from "$app/paths";
-	export let file: MessageFile;
-	export let canClose = true;
-	$: showModal = false;
-	$: urlNotTrailing = $page.url.pathname.replace(/\/$/, "");
 	const dispatch = createEventDispatcher<{ close: void }>();
@@ -47,7 +52,7 @@
 		mime === "application/xml" ||
 		mime === "application/vnd.chatui.clipboard";
-	$: isClickable = isImage(file.mime) || isPlainText(file.mime);
 </script>
 {#if showModal && isClickable}
@@ -80,7 +85,7 @@
 				{/if}
 				<button
 					class="absolute right-4 top-4 text-xl text-gray-500 hover:text-gray-800"
-					on:click={() => (showModal = false)}
 				>
 					<CarbonClose class="text-xl" />
 				</button>
@@ -110,7 +115,20 @@
 	</Modal>
 {/if}
-<button on:click={() => (showModal = true)} disabled={!isClickable} class:clickable={isClickable}>
 	<div class="group relative flex items-center rounded-xl shadow-sm">
 		{#if isImage(file.mime)}
 			<div class="size-48 overflow-hidden rounded-xl">
@@ -133,18 +151,18 @@
 			<div
 				class="border-1 w-72 overflow-clip rounded-xl border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900"
 			>
-				<!-- svelte-ignore a11y-media-has-caption -->
 				<video
 					src={file.type === "base64"
 						? `data:${file.mime};base64,${file.value}`
 						: urlNotTrailing + "/output/" + file.value}
 					controls
-				/>
 			</div>
 		{:else if isPlainText(file.mime)}
 			<div
 				class="flex h-14 w-72 items-center gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-2 dark:border-gray-800 dark:bg-gray-900"
-				class:hoverable={isClickable}
 			>
 				<div
 					class="grid size-10 flex-none place-items-center rounded-lg bg-gray-100 dark:bg-gray-800"
@@ -165,7 +183,7 @@
 		{:else if file.mime === "octet-stream"}
 			<div
 				class="flex h-14 w-72 items-center gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-2 dark:border-gray-800 dark:bg-gray-900"
-				class:hoverable={isClickable}
 			>
 				<div
 					class="grid size-10 flex-none place-items-center rounded-lg bg-gray-100 dark:bg-gray-800"
@@ -191,7 +209,7 @@
 		{:else}
 			<div
 				class="flex h-14 w-72 items-center gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-2 dark:border-gray-800 dark:bg-gray-900"
-				class:hoverable={isClickable}
 			>
 				<div
 					class="grid size-10 flex-none place-items-center rounded-lg bg-gray-100 dark:bg-gray-800"
@@ -211,16 +229,14 @@
 			<button
 				class="absolute -right-2 -top-2 z-10 grid size-6 place-items-center rounded-full border bg-black group-hover:visible dark:border-gray-700"
 				class:invisible={navigator.maxTouchPoints === 0}
-				on:click|stopPropagation|preventDefault={() => dispatch("close")}
 			>
 				<CarbonClose class=" text-xs  text-white" />
 			</button>
 		{/if}
 	</div>
-</button>
-<style lang="postcss">
-	.hoverable {
-		@apply hover:bg-gray-500/10;
-	}
-</style>

 	import EosIconsLoading from "~icons/eos-icons/loading";
 	import { base } from "$app/paths";
+	interface Props {
+		file: MessageFile;
+		canClose?: boolean;
+	}
+	let { file, canClose = true }: Props = $props();
+	let showModal = $state(false);
+	let urlNotTrailing = $derived($page.url.pathname.replace(/\/$/, ""));
 	const dispatch = createEventDispatcher<{ close: void }>();
 		mime === "application/xml" ||
 		mime === "application/vnd.chatui.clipboard";
+	let isClickable = $derived(isImage(file.mime) || isPlainText(file.mime));
 </script>
 {#if showModal && isClickable}
 				{/if}
 				<button
 					class="absolute right-4 top-4 text-xl text-gray-500 hover:text-gray-800"
+					onclick={() => (showModal = false)}
 				>
 					<CarbonClose class="text-xl" />
 				</button>
 	</Modal>
 {/if}
+<div
+	onclick={() => isClickable && (showModal = true)}
+	onkeydown={(e) => {
+		if (!isClickable) {
+			return;
+		}
+		if (e.key === "Enter" || e.key === " ") {
+			showModal = true;
+		}
+	}}
+	class:clickable={isClickable}
+	role="button"
+	tabindex="0"
+>
 	<div class="group relative flex items-center rounded-xl shadow-sm">
 		{#if isImage(file.mime)}
 			<div class="size-48 overflow-hidden rounded-xl">
 			<div
 				class="border-1 w-72 overflow-clip rounded-xl border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900"
 			>
+				<!-- svelte-ignore a11y_media_has_caption -->
 				<video
 					src={file.type === "base64"
 						? `data:${file.mime};base64,${file.value}`
 						: urlNotTrailing + "/output/" + file.value}
 					controls
+				></video>
 			</div>
 		{:else if isPlainText(file.mime)}
 			<div
 				class="flex h-14 w-72 items-center gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-2 dark:border-gray-800 dark:bg-gray-900"
+				class:file-hoverable={isClickable}
 			>
 				<div
 					class="grid size-10 flex-none place-items-center rounded-lg bg-gray-100 dark:bg-gray-800"
 		{:else if file.mime === "octet-stream"}
 			<div
 				class="flex h-14 w-72 items-center gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-2 dark:border-gray-800 dark:bg-gray-900"
+				class:file-hoverable={isClickable}
 			>
 				<div
 					class="grid size-10 flex-none place-items-center rounded-lg bg-gray-100 dark:bg-gray-800"
 		{:else}
 			<div
 				class="flex h-14 w-72 items-center gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-2 dark:border-gray-800 dark:bg-gray-900"
+				class:file-hoverable={isClickable}
 			>
 				<div
 					class="grid size-10 flex-none place-items-center rounded-lg bg-gray-100 dark:bg-gray-800"
 			<button
 				class="absolute -right-2 -top-2 z-10 grid size-6 place-items-center rounded-full border bg-black group-hover:visible dark:border-gray-700"
 				class:invisible={navigator.maxTouchPoints === 0}
+				onclick={(e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					dispatch("close");
+				}}
 			>
 				<CarbonClose class=" text-xs  text-white" />
 			</button>
 		{/if}
 	</div>
+</div>