refac

package-lock.json

@@ -45,7 +45,7 @@
 				"@xyflow/svelte": "^0.1.19",
 				"alpinejs": "^3.15.0",
 				"async": "^3.2.5",
-				"bits-ui": "^0.21.15",
+				"bits-ui": "^2.0.0",
 				"chart.js": "^4.5.0",
 				"codemirror": "^6.0.1",
 				"codemirror-lang-elixir": "^4.0.0",
@@ -1770,10 +1770,11 @@
 			}
 		},
 		"node_modules/@internationalized/date": {
-			"version": "3.8.2",
+			"version": "3.12.0",
-			"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.8.2.tgz",
+			"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.0.tgz",
-			"integrity": "sha512-/wENk7CbvLbkUvX1tu0mwq49CVkkWpkXubGel6birjRPyo6uQ4nQpnq5xZu823zRCwwn82zgHrvgF1vZyvmVgA==",
+			"integrity": "sha512-/PyIMzK29jtXaGU23qTvNZxvBXRtKbNnGDFD+PY6CZw/Y8Ex8pFUzkuCJCG9aOqmShjqhS9mPqP6Dk5onQY8rQ==",
 			"license": "Apache-2.0",
+			"peer": true,
 			"dependencies": {
 				"@swc/helpers": "^0.5.0"
 			}
@@ -2969,10 +2970,11 @@
 			"license": "MIT"
 		},
 		"node_modules/@swc/helpers": {
-			"version": "0.5.17",
+			"version": "0.5.19",
-			"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.17.tgz",
+			"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.19.tgz",
-			"integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==",
+			"integrity": "sha512-QamiFeIK3txNjgUTNppE6MiG3p7TdninpZu0E0PbqVh1a9FNLT2FRhisaa4NcaX52XVhA5l7Pk58Ft7Sqi/2sA==",
 			"license": "Apache-2.0",
+			"peer": true,
 			"dependencies": {
 				"tslib": "^2.8.0"
 			}
@@ -4982,37 +4984,27 @@
 			}
 		},
 		"node_modules/bits-ui": {
-			"version": "0.21.15",
+			"version": "2.16.3",
-			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.15.tgz",
+			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-2.16.3.tgz",
-			"integrity": "sha512-+m5WSpJnFdCcNdXSTIVC1WYBozipO03qRh03GFWgrdxoHiolCfwW71EYG4LPCWYPG6KcTZV0Cj6iHSiZ7cdKdg==",
+			"integrity": "sha512-5hJ5dEhf5yPzkRFcxzgQHScGodeo0gK0MUUXrdLlRHWaBOBGZiacWLG96j/wwFatKwZvouw7q+sn14i0fx3RIg==",
 			"license": "MIT",
 			"dependencies": {
-				"@internationalized/date": "^3.5.1",
+				"@floating-ui/core": "^1.7.1",
-				"@melt-ui/svelte": "0.76.2",
+				"@floating-ui/dom": "^1.7.1",
-				"nanoid": "^5.0.5"
+				"esm-env": "^1.1.2",
+				"runed": "^0.35.1",
+				"svelte-toolbelt": "^0.10.6",
+				"tabbable": "^6.2.0"
+			},
+			"engines": {
+				"node": ">=20"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/huntabyte"
 			},
 			"peerDependencies": {
-				"svelte": "^4.0.0 || ^5.0.0-next.118"
+				"@internationalized/date": "^3.8.1",
-			}
+				"svelte": "^5.33.0"
-		},
-		"node_modules/bits-ui/node_modules/@melt-ui/svelte": {
-			"version": "0.76.2",
-			"resolved": "https://registry.npmjs.org/@melt-ui/svelte/-/svelte-0.76.2.tgz",
-			"integrity": "sha512-7SbOa11tXUS95T3fReL+dwDs5FyJtCEqrqG3inRziDws346SYLsxOQ6HmX+4BkIsQh1R8U3XNa+EMmdMt38lMA==",
-			"license": "MIT",
-			"dependencies": {
-				"@floating-ui/core": "^1.3.1",
-				"@floating-ui/dom": "^1.4.5",
-				"@internationalized/date": "^3.5.0",
-				"dequal": "^2.0.3",
-				"focus-trap": "^7.5.2",
-				"nanoid": "^5.0.4"
-			},
-			"peerDependencies": {
-				"svelte": ">=3 <5"
 			}
 		},
 		"node_modules/bl": {
@@ -8611,6 +8603,12 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/inline-style-parser": {
+			"version": "0.2.7",
+			"resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
+			"integrity": "sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==",
+			"license": "MIT"
+		},
 		"node_modules/internmap": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
@@ -9662,6 +9660,15 @@
 			"integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
 			"license": "ISC"
 		},
+		"node_modules/lz-string": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
+			"integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
+			"license": "MIT",
+			"bin": {
+				"lz-string": "bin/bin.js"
+			}
+		},
 		"node_modules/magic-string": {
 			"version": "0.30.21",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
@@ -11691,6 +11698,30 @@
 				"queue-microtask": "^1.2.2"
 			}
 		},
+		"node_modules/runed": {
+			"version": "0.35.1",
+			"resolved": "https://registry.npmjs.org/runed/-/runed-0.35.1.tgz",
+			"integrity": "sha512-2F4Q/FZzbeJTFdIS/PuOoPRSm92sA2LhzTnv6FXhCoENb3huf5+fDuNOg1LNvGOouy3u/225qxmuJvcV3IZK5Q==",
+			"funding": [
+				"https://github.com/sponsors/huntabyte",
+				"https://github.com/sponsors/tglide"
+			],
+			"license": "MIT",
+			"dependencies": {
+				"dequal": "^2.0.3",
+				"esm-env": "^1.0.0",
+				"lz-string": "^1.5.0"
+			},
+			"peerDependencies": {
+				"@sveltejs/kit": "^2.21.0",
+				"svelte": "^5.7.0"
+			},
+			"peerDependenciesMeta": {
+				"@sveltejs/kit": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/rw": {
 			"version": "1.3.3",
 			"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
@@ -12600,6 +12631,15 @@
 			"resolved": "https://registry.npmjs.org/style-mod/-/style-mod-4.1.2.tgz",
 			"integrity": "sha512-wnD1HyVqpJUI2+eKZ+eo1UwghftP6yuFheBqqe+bWCotBjC2K1YnteJILRMs3SM4V/0dLEW1SC27MWP5y+mwmw=="
 		},
+		"node_modules/style-to-object": {
+			"version": "1.0.14",
+			"resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.14.tgz",
+			"integrity": "sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==",
+			"license": "MIT",
+			"dependencies": {
+				"inline-style-parser": "0.2.7"
+			}
+		},
 		"node_modules/stylis": {
 			"version": "4.3.6",
 			"resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
@@ -12788,6 +12828,26 @@
 				"svelte": "^3.0.0 || ^4.0.0 || ^5.0.0-next.1"
 			}
 		},
+		"node_modules/svelte-toolbelt": {
+			"version": "0.10.6",
+			"resolved": "https://registry.npmjs.org/svelte-toolbelt/-/svelte-toolbelt-0.10.6.tgz",
+			"integrity": "sha512-YWuX+RE+CnWYx09yseAe4ZVMM7e7GRFZM6OYWpBKOb++s+SQ8RBIMMe+Bs/CznBMc0QPLjr+vDBxTAkozXsFXQ==",
+			"funding": [
+				"https://github.com/sponsors/huntabyte"
+			],
+			"dependencies": {
+				"clsx": "^2.1.1",
+				"runed": "^0.35.1",
+				"style-to-object": "^1.0.8"
+			},
+			"engines": {
+				"node": ">=18",
+				"pnpm": ">=8.7.0"
+			},
+			"peerDependencies": {
+				"svelte": "^5.30.2"
+			}
+		},
 		"node_modules/svelte/node_modules/@types/estree": {
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",

package.json

@@ -89,7 +89,7 @@
 		"@xyflow/svelte": "^0.1.19",
 		"alpinejs": "^3.15.0",
 		"async": "^3.2.5",
-		"bits-ui": "^0.21.15",
+		"bits-ui": "^2.0.0",
 		"chart.js": "^4.5.0",
 		"codemirror": "^6.0.1",
 		"codemirror-lang-elixir": "^4.0.0",

src/lib/components/channel/Messages/Message/UserStatusLinkPreview.svelte

@@ -25,12 +25,14 @@
 </script>
 
 {#if user}
+	<LinkPreview.Portal>
 		<LinkPreview.Content
-		class="w-full max-w-[260px] rounded-2xl border border-gray-100  dark:border-gray-800 z-[9999] bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
+			class="w-[260px] rounded-2xl border border-gray-100  dark:border-gray-800 z-[9999] bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
 			{side}
 			{align}
 			{sideOffset}
 		>
 			<UserStatus {user} />
 		</LinkPreview.Content>
+	</LinkPreview.Portal>
 {/if}

src/lib/components/chat/Messages/Markdown/SourceToken.svelte

@@ -60,12 +60,12 @@
 					</span>
 				</button>
 			</LinkPreview.Trigger>
+			<LinkPreview.Portal>
 			<LinkPreview.Content
 				class="z-[999]"
 				align="start"
 				strategy="fixed"
 				sideOffset={6}
-				el={containerElement}
 			>
 				<div class="bg-gray-50 dark:bg-gray-850 rounded-xl p-1 cursor-pointer">
 					{#each token.citationIdentifiers ?? token.ids as identifier}
@@ -77,6 +77,7 @@
 					{/each}
 				</div>
 			</LinkPreview.Content>
+		</LinkPreview.Portal>
 		</LinkPreview.Root>
 	{/if}
 {:else}

src/lib/components/chat/ModelSelector/Selector.svelte

@@ -9,6 +9,7 @@
 
 	import Spinner from '$lib/components/common/Spinner.svelte';
 	import { flyAndScale } from '$lib/utils/transitions';
+
 	import { createEventDispatcher, onMount, getContext, tick } from 'svelte';
 	import { goto } from '$app/navigation';
 
@@ -396,7 +397,12 @@
 
 		resetView();
 	}}
-	closeFocus={false}
+	onOpenChangeComplete={(open) => {
+		if (!open) {
+			// Replaces the old closeFocus={false} behavior - prevent focus jump back to trigger
+			document.getElementById(`model-selector-${id}-button`)?.blur();
+		}
+	}}
 >
 	<DropdownMenu.Trigger
 		class="relative w-full {($settings?.highContrastMode ?? false)
@@ -430,18 +436,29 @@
 		</div>
 	</DropdownMenu.Trigger>
 
+	<DropdownMenu.Portal>
 		<DropdownMenu.Content
-		class=" z-40 {$mobile
+			forceMount
-			? `w-full`
+			trapFocus={false}
-			: `${className}`} max-w-[calc(100vw-1rem)] justify-start rounded-2xl  bg-white dark:bg-gray-850 dark:text-white shadow-lg  outline-hidden"
+			preventScroll={false}
-		transition={flyAndScale}
+			side="bottom"
-		side={$mobile ? 'bottom' : 'bottom-start'}
+			align={$mobile ? 'center' : 'start'}
 			sideOffset={2}
 			alignOffset={-1}
+		>
+			{#snippet child({ wrapperProps, props, open })}
+				{#if open}
+					<div {...wrapperProps}>
+						<div
+							{...props}
+							class="{props.class} z-40 {$mobile
+								? `w-full`
+								: `${className}`} max-w-[calc(100vw-1rem)] justify-start rounded-2xl bg-white dark:bg-gray-850 dark:text-white shadow-lg outline-hidden"
+							transition:flyAndScale
 						>
 							<slot>
 				{#if searchEnabled}
-				<div class="flex items-center gap-2.5 px-4.5 mt-3.5 mb-1.5">
+					<div class="flex items-center gap-2.5 px-4.5 pt-3.5 mb-1.5">
 						<Search className="size-4" strokeWidth="2.5" />
 
 						<input
@@ -522,7 +539,8 @@
 
 								{#if items.find((item) => item.model?.connection_type === 'external')}
 									<button
-									class="min-w-fit outline-none px-1.5 py-0.5 {selectedConnectionType === 'external'
+										class="min-w-fit outline-none px-1.5 py-0.5 {selectedConnectionType ===
+										'external'
 											? ''
 											: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize"
 										aria-pressed={selectedConnectionType === 'external'}
@@ -714,10 +732,15 @@
 					{/each}
 				</div>
 
-			<div class="mb-2.5"></div>
+				<div class="pb-2.5"></div>
 
 				<div class="hidden w-[42rem]" />
 				<div class="hidden w-[32rem]" />
 							</slot>
+						</div>
+					</div>
+				{/if}
+			{/snippet}
 		</DropdownMenu.Content>
+	</DropdownMenu.Portal>
 </DropdownMenu.Root>

src/lib/components/common/Dropdown.svelte

@@ -120,7 +120,7 @@
 		});
 	}
 
-	function handleWindowClick(event) {
+	function handleWindowPointerDown(event) {
 		if (!show || !closeOnOutsideClick) return;
 		if (triggerEl?.contains(event.target)) return;
 		if (contentEl?.contains(event.target)) return;
@@ -140,9 +140,22 @@
 		show = false;
 		onOpenChange(false);
 	}
+
+	import { onMount, onDestroy } from 'svelte';
+
+	let onPointerDown;
+	onMount(() => {
+		onPointerDown = (e) => handleWindowPointerDown(e);
+		document.addEventListener('pointerdown', onPointerDown, true);
+	});
+	onDestroy(() => {
+		if (onPointerDown) {
+			document.removeEventListener('pointerdown', onPointerDown, true);
+		}
+	});
 </script>
 
-<svelte:window on:click={handleWindowClick} on:keydown={handleKeydown} on:scroll|capture={positionContent} on:resize={positionContent} />
+<svelte:window on:keydown={handleKeydown} on:scroll|capture={positionContent} on:resize={positionContent} />
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->

src/lib/components/common/Pagination.svelte

@@ -11,7 +11,8 @@
 </script>
 
 <div class="flex justify-center">
-	<Pagination.Root bind:page {count} {perPage} let:pages>
+	<Pagination.Root bind:page {count} {perPage}>
+		{#snippet children({ pages })}
 			<div class="my-2 flex items-center">
 				<Pagination.PrevButton
 					class="mr-[25px] inline-flex size-8 items-center justify-center rounded-[9px] bg-transparent hover:bg-gray-50 dark:hover:bg-gray-850 active:scale-98 disabled:cursor-not-allowed disabled:text-gray-400 dark:disabled:text-gray-700 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent"
@@ -38,5 +39,6 @@
 					<ChevronRight className="size-4" strokeWidth="2" />
 				</Pagination.NextButton>
 			</div>
+		{/snippet}
 	</Pagination.Root>
 </div>