format

postcss.config.js

@@ -1,5 +1,5 @@
 export default {
 	plugins: {
-		'@tailwindcss/postcss': {},
+		"@tailwindcss/postcss": {},
 	},
 };

src/app.css

@@ -1,5 +1,5 @@
-@import 'highlight.js/styles/atom-one-light' layer(base);
-@import 'tailwindcss';
+@import "highlight.js/styles/atom-one-light" layer(base);
+@import "tailwindcss";
 
 @plugin '@tailwindcss/container-queries';
 
@@ -14,13 +14,13 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
+	*,
+	::after,
+	::before,
+	::backdrop,
+	::file-selector-button {
+		border-color: var(--color-gray-200, currentColor);
+	}
 }
 
 html {

src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte

@@ -460,7 +460,7 @@ print(completion.choices[0].message)`,
 					on:click={() => {
 						dispatch("closeCode");
 					}}
-					class="flex size-7 items-center justify-center rounded-lg px-3 py-2.5 text-xs font-medium text-gray-900 focus:outline-hidden focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+					class="flex size-7 items-center justify-center rounded-lg px-3 py-2.5 text-xs font-medium text-gray-900 focus:ring-4 focus:ring-gray-100 focus:outline-hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
 				>
 					✕
 				</button>
@@ -484,11 +484,11 @@ print(completion.choices[0].message)`,
 	{#each clientSnippetsByLang[selectedLanguage] as { snippets }, idx}
 		{#if idx === selectedClientIdxByLang[selectedLanguage]}
 			{#each snippets as { label, code, language, needsToken }}
-				<div class="flex items-center justify-between px-2 pb-4 pt-6">
+				<div class="flex items-center justify-between px-2 pt-6 pb-4">
 					<h2 class="font-semibold">{label}</h2>
 					<div class="flex items-center gap-x-4">
 						{#if needsToken && hfToken}
-							<label class="flex select-none items-center gap-x-1.5 text-sm">
+							<label class="flex items-center gap-x-1.5 text-sm select-none">
 								<input type="checkbox" bind:checked={showToken} />
 								<p class="leading-none">With token</p>
 							</label>

src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte

@@ -66,7 +66,7 @@
 <svelte:window on:resize={resizeMessageTextAreas} />
 
 <div
-	class="flex flex-col overflow-y-auto overflow-x-hidden @container {compareActive
+	class="@container flex flex-col overflow-x-hidden overflow-y-auto {compareActive
 		? 'max-h-[calc(100dvh-5.8rem-2.5rem-75px)] md:max-h-[calc(100dvh-5.8rem-2.5rem)]'
 		: 'max-h-[calc(100dvh-5.8rem-2.5rem-75px)] md:max-h-[calc(100dvh-5.8rem)]'}"
 	class:animate-pulse={loading && !conversation.streaming}

src/lib/components/InferencePlayground/InferencePlaygroundConversationHeader.svelte

@@ -56,7 +56,7 @@
 <div
 	class="{conversationIdx === 0
 		? 'mr-4 max-sm:ml-4'
-		: 'mx-4'} flex h-11 flex-none items-center gap-2 whitespace-nowrap rounded-lg border border-gray-200/80 bg-white pl-3 pr-2 text-sm leading-none shadow-xs *:flex-none max-sm:mt-4 dark:border-white/5 dark:bg-gray-800/70 dark:hover:bg-gray-800"
+		: 'mx-4'} flex h-11 flex-none items-center gap-2 rounded-lg border border-gray-200/80 bg-white pr-2 pl-3 text-sm leading-none whitespace-nowrap shadow-xs *:flex-none max-sm:mt-4 dark:border-white/5 dark:bg-gray-800/70 dark:hover:bg-gray-800"
 >
 	<Avatar orgName={nameSpace} size="md" />
 	<button class="flex-1! self-stretch text-left hover:underline" on:click={() => (modelSelectorOpen = true)}

src/lib/components/InferencePlayground/InferencePlaygroundGenerationConfig.svelte

@@ -104,7 +104,7 @@
 			<input type="checkbox" bind:checked={conversation.streaming} class="peer sr-only" />
 			<span class="text-sm font-medium text-gray-900 dark:text-gray-300">Streaming</span>
 			<div
-				class="peer relative h-5 w-9 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-black peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-hidden dark:border-gray-600 dark:bg-gray-700 dark:peer-checked:bg-blue-600"
+				class="peer relative h-5 w-9 rounded-full bg-gray-200 peer-checked:bg-black peer-focus:outline-hidden after:absolute after:start-[2px] after:top-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white dark:border-gray-600 dark:bg-gray-700 dark:peer-checked:bg-blue-600"
 			></div>
 		</label>
 	</div>

src/lib/components/InferencePlayground/InferencePlaygroundHFTokenModal.svelte

@@ -108,13 +108,13 @@
 					href="https://huggingface.co/settings/tokens/new?globalPermissions=inference.serverless.write&tokenType=fineGrained"
 					tabindex="-1"
 					target="_blank"
-					class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-hidden focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+					class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 focus:outline-hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
 					>Create new token</a
 				>
 
 				<button
 					type="submit"
-					class="rounded-lg bg-black px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-900 focus:outline-hidden focus:ring-4 focus:ring-gray-300 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+					class="rounded-lg bg-black px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 focus:outline-hidden dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
 					>Submit</button
 				>
 			</div>

src/lib/components/InferencePlayground/InferencePlaygroundMessage.svelte

@@ -10,10 +10,10 @@
 </script>
 
 <div
-	class="group/message group grid grid-cols-[1fr_2.5rem] items-start gap-2 px-3.5 pb-6 pt-4 hover:bg-gray-100/70 @-2xl:grid-cols-[130px_1fr_2.5rem] @2xl:grid-rows-1 @2xl:gap-4 @2xl:px-6 dark:border-gray-800 dark:hover:bg-gray-800/30 {$$props.class}"
+	class="group/message group grid grid-cols-[1fr_2.5rem] items-start gap-2 px-3.5 pt-4 pb-6 hover:bg-gray-100/70 @-2xl:grid-cols-[130px_1fr_2.5rem] @2xl:grid-rows-1 @2xl:gap-4 @2xl:px-6 dark:border-gray-800 dark:hover:bg-gray-800/30 {$$props.class}"
 	class:pointer-events-none={loading}
 >
-	<div class="col-span-2 pb-1 pt-3 text-sm font-semibold uppercase @2xl:col-span-1 @2xl:pb-2">
+	<div class="col-span-2 pt-3 pb-1 text-sm font-semibold uppercase @2xl:col-span-1 @2xl:pb-2">
 		{message.role}
 	</div>
 	<!-- svelte-ignore a11y-autofocus -->
@@ -22,7 +22,7 @@
 		{autofocus}
 		bind:value={message.content}
 		placeholder="Enter {message.role} message"
-		class="resize-none overflow-hidden rounded-sm bg-transparent px-2 py-2.5 ring-gray-100 hover:resize-y hover:bg-white focus:resize-y focus:bg-white focus:ring-3 group-hover/message:ring-3 @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
+		class="resize-none overflow-hidden rounded-sm bg-transparent px-2 py-2.5 ring-gray-100 group-hover/message:ring-3 hover:resize-y hover:bg-white focus:resize-y focus:bg-white focus:ring-3 @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
 		rows="1"
 		tabindex="2"
 		on:input={() => {
@@ -35,7 +35,7 @@
 			dispatch("delete");
 		}}
 		type="button"
-		class="mt-1.5 size-8 rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-hidden focus:ring-4 focus:ring-gray-100 group-hover/message:block sm:hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+		class="mt-1.5 size-8 rounded-lg border border-gray-200 bg-white text-xs font-medium text-gray-900 group-hover/message:block hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 focus:outline-hidden sm:hidden dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
 		>✕</button
 	>
 </div>

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -49,7 +49,7 @@
 	</label>
 
 	<button
-		class="relative flex items-center justify-between gap-6 overflow-hidden whitespace-nowrap rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight shadow-sm hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110"
+		class="relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110"
 		on:click={() => (showModelPickerModal = true)}
 	>
 		<div class="flex flex-col items-start">

src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte

@@ -103,7 +103,7 @@
 	bind:this={backdropEl}
 	on:click|stopPropagation={handleBackdropClick}
 >
-	<div class="flex w-full max-w-[600px] items-start justify-center overflow-hidden whitespace-nowrap p-10 text-left">
+	<div class="flex w-full max-w-[600px] items-start justify-center overflow-hidden p-10 text-left whitespace-nowrap">
 		<div
 			class="flex h-full w-full flex-col overflow-hidden rounded-lg border bg-white text-gray-900 shadow-md dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"
 			bind:this={containerEl}
@@ -118,7 +118,7 @@
 					on:input={e => filterModels(e.currentTarget.value)}
 				/>
 			</div>
-			<div class="max-h-[300px] overflow-y-auto overflow-x-hidden">
+			<div class="max-h-[300px] overflow-x-hidden overflow-y-auto">
 				{#if featuredModels.length}
 					<div>
 						<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Trending</div>