ruflo 3.10.36 → 3.10.38

package/src/ruvocal/src/lib/components/Modal.svelte

@@ -1,115 +1,115 @@
-<script lang="ts">
-	import { onDestroy, onMount } from "svelte";
-	import { cubicOut } from "svelte/easing";
-	import { fade, fly } from "svelte/transition";
-	import Portal from "./Portal.svelte";
-	import { browser } from "$app/environment";
-	import CarbonClose from "~icons/carbon/close";
-	import { tap } from "$lib/utils/haptics";
-
-	interface Props {
-		width?: string;
-		closeButton?: boolean;
-		disableFly?: boolean;
-		/** When false, clicking backdrop will not close the modal */
-		closeOnBackdrop?: boolean;
-		onclose?: () => void;
-		children?: import("svelte").Snippet;
-	}
-
-	let {
-		width = "max-w-sm",
-		children,
-		closeButton = false,
-		disableFly = false,
-		closeOnBackdrop = true,
-		onclose,
-	}: Props = $props();
-
-	let backdropEl: HTMLDivElement | undefined = $state();
-	let modalEl: HTMLDivElement | undefined = $state();
-
-	function handleKeydown(event: KeyboardEvent) {
-		// close on ESC
-		if (event.key === "Escape") {
-			event.preventDefault();
-			onclose?.();
-		}
-	}
-
-	function handleBackdropClick(event: MouseEvent) {
-		if (window?.getSelection()?.toString()) {
-			return;
-		}
-		if (event.target === backdropEl && closeOnBackdrop) {
-			onclose?.();
-		}
-	}
-
-	onMount(() => {
-		document.getElementById("app")?.setAttribute("inert", "true");
-		modalEl?.focus();
-		tap();
-		// Ensure Escape closes even if focus isn't within modal
-		window.addEventListener("keydown", handleKeydown, { capture: true });
-	});
-
-	onDestroy(() => {
-		if (!browser) return;
-		document.getElementById("app")?.removeAttribute("inert");
-		window.removeEventListener("keydown", handleKeydown, { capture: true });
-	});
-</script>
-
-<Portal>
-	<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 backdrop-blur-sm dark:bg-black/50"
-	>
-		{#if disableFly}
-			<div
-				role="dialog"
-				tabindex="-1"
-				bind:this={modalEl}
-				onkeydown={handleKeydown}
-				class={[
-					"scrollbar-custom relative mx-auto max-h-[95dvh] max-w-[90dvw] overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-2xl outline-none dark:bg-gray-800 dark:text-gray-200",
-					width,
-				]}
-			>
-				{#if closeButton}
-					<button class="absolute right-4 top-4 z-50" onclick={() => onclose?.()}>
-						<CarbonClose class="size-6 text-gray-700 dark:text-gray-300" />
-					</button>
-				{/if}
-				{@render children?.()}
-			</div>
-		{:else}
-			<div
-				role="dialog"
-				tabindex="-1"
-				bind:this={modalEl}
-				onkeydown={handleKeydown}
-				in:fly={{ y: 100 }}
-				class={[
-					"scrollbar-custom relative mx-auto max-h-[95dvh] max-w-[90dvw] overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-2xl outline-none dark:bg-gray-800 dark:text-gray-200",
-					width,
-				]}
-			>
-				{#if closeButton}
-					<button class="absolute right-4 top-4 z-50" onclick={() => onclose?.()}>
-						<CarbonClose class="size-6 text-gray-700 dark:text-gray-300" />
-					</button>
-				{/if}
-				{@render children?.()}
-			</div>
-		{/if}
-	</div>
-</Portal>
+<script lang="ts">
+	import { onDestroy, onMount } from "svelte";
+	import { cubicOut } from "svelte/easing";
+	import { fade, fly } from "svelte/transition";
+	import Portal from "./Portal.svelte";
+	import { browser } from "$app/environment";
+	import CarbonClose from "~icons/carbon/close";
+	import { tap } from "$lib/utils/haptics";
+
+	interface Props {
+		width?: string;
+		closeButton?: boolean;
+		disableFly?: boolean;
+		/** When false, clicking backdrop will not close the modal */
+		closeOnBackdrop?: boolean;
+		onclose?: () => void;
+		children?: import("svelte").Snippet;
+	}
+
+	let {
+		width = "max-w-sm",
+		children,
+		closeButton = false,
+		disableFly = false,
+		closeOnBackdrop = true,
+		onclose,
+	}: Props = $props();
+
+	let backdropEl: HTMLDivElement | undefined = $state();
+	let modalEl: HTMLDivElement | undefined = $state();
+
+	function handleKeydown(event: KeyboardEvent) {
+		// close on ESC
+		if (event.key === "Escape") {
+			event.preventDefault();
+			onclose?.();
+		}
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		if (window?.getSelection()?.toString()) {
+			return;
+		}
+		if (event.target === backdropEl && closeOnBackdrop) {
+			onclose?.();
+		}
+	}
+
+	onMount(() => {
+		document.getElementById("app")?.setAttribute("inert", "true");
+		modalEl?.focus();
+		tap();
+		// Ensure Escape closes even if focus isn't within modal
+		window.addEventListener("keydown", handleKeydown, { capture: true });
+	});
+
+	onDestroy(() => {
+		if (!browser) return;
+		document.getElementById("app")?.removeAttribute("inert");
+		window.removeEventListener("keydown", handleKeydown, { capture: true });
+	});
+</script>
+
+<Portal>
+	<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 backdrop-blur-sm dark:bg-black/50"
+	>
+		{#if disableFly}
+			<div
+				role="dialog"
+				tabindex="-1"
+				bind:this={modalEl}
+				onkeydown={handleKeydown}
+				class={[
+					"scrollbar-custom relative mx-auto max-h-[95dvh] max-w-[90dvw] overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-2xl outline-none dark:bg-gray-800 dark:text-gray-200",
+					width,
+				]}
+			>
+				{#if closeButton}
+					<button class="absolute right-4 top-4 z-50" onclick={() => onclose?.()}>
+						<CarbonClose class="size-6 text-gray-700 dark:text-gray-300" />
+					</button>
+				{/if}
+				{@render children?.()}
+			</div>
+		{:else}
+			<div
+				role="dialog"
+				tabindex="-1"
+				bind:this={modalEl}
+				onkeydown={handleKeydown}
+				in:fly={{ y: 100 }}
+				class={[
+					"scrollbar-custom relative mx-auto max-h-[95dvh] max-w-[90dvw] overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-2xl outline-none dark:bg-gray-800 dark:text-gray-200",
+					width,
+				]}
+			>
+				{#if closeButton}
+					<button class="absolute right-4 top-4 z-50" onclick={() => onclose?.()}>
+						<CarbonClose class="size-6 text-gray-700 dark:text-gray-300" />
+					</button>
+				{/if}
+				{@render children?.()}
+			</div>
+		{/if}
+	</div>
+</Portal>

package/src/ruvocal/src/lib/components/ModelCardMetadata.svelte

@@ -1,71 +1,71 @@
-<script lang="ts">
-	import CarbonEarth from "~icons/carbon/earth";
-	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
-	import BIMeta from "~icons/bi/meta";
-	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
-	class="flex items-center gap-5 rounded-xl bg-gray-100 px-3 py-2 text-xs sm:text-sm
-	{variant === 'dark'
-		? 'text-gray-600 dark:bg-gray-800 dark:text-gray-300'
-		: 'text-gray-800 dark:bg-gray-100 dark:text-gray-600'}"
->
-	<a
-		href={model.modelUrl || "https://huggingface.co/" + model.name}
-		target="_blank"
-		rel="noreferrer"
-		class="flex items-center hover:underline"
-		><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs text-gray-400" />
-		Model
-		<div class="max-sm:hidden">&nbsp;page</div></a
-	>
-	{#if model.datasetName || model.datasetUrl}
-		<a
-			href={model.datasetUrl || "https://huggingface.co/datasets/" + model.datasetName}
-			target="_blank"
-			rel="noreferrer"
-			class="flex items-center hover:underline"
-			><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs text-gray-400" />
-			Dataset
-			<div class="max-sm:hidden">&nbsp;page</div></a
-		>
-	{/if}
-	{#if model.hasInferenceAPI}
-		<a
-			href={"https://huggingface.co/playground?modelId=" + model.name}
-			target="_blank"
-			rel="noreferrer"
-			class="flex items-center hover:underline"
-			><CarbonCode class="mr-1.5 shrink-0 text-xs text-gray-400" />
-			API
-		</a>
-	{/if}
-	{#if model.websiteUrl}
-		<a
-			href={model.websiteUrl}
-			target="_blank"
-			class="ml-auto flex items-center hover:underline"
-			rel="noreferrer"
-		>
-			{#if model.name.startsWith("meta-llama/Meta-Llama")}
-				<BIMeta class="mr-1.5 shrink-0 text-xs text-gray-400" />
-				Built with Llama
-			{:else}
-				<CarbonEarth class="mr-1.5 shrink-0 text-xs text-gray-400" />
-				Website
-			{/if}
-		</a>
-	{/if}
-</div>
+<script lang="ts">
+	import CarbonEarth from "~icons/carbon/earth";
+	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
+	import BIMeta from "~icons/bi/meta";
+	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
+	class="flex items-center gap-5 rounded-xl bg-gray-100 px-3 py-2 text-xs sm:text-sm
+	{variant === 'dark'
+		? 'text-gray-600 dark:bg-gray-800 dark:text-gray-300'
+		: 'text-gray-800 dark:bg-gray-100 dark:text-gray-600'}"
+>
+	<a
+		href={model.modelUrl || "https://huggingface.co/" + model.name}
+		target="_blank"
+		rel="noreferrer"
+		class="flex items-center hover:underline"
+		><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs text-gray-400" />
+		Model
+		<div class="max-sm:hidden">&nbsp;page</div></a
+	>
+	{#if model.datasetName || model.datasetUrl}
+		<a
+			href={model.datasetUrl || "https://huggingface.co/datasets/" + model.datasetName}
+			target="_blank"
+			rel="noreferrer"
+			class="flex items-center hover:underline"
+			><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs text-gray-400" />
+			Dataset
+			<div class="max-sm:hidden">&nbsp;page</div></a
+		>
+	{/if}
+	{#if model.hasInferenceAPI}
+		<a
+			href={"https://huggingface.co/playground?modelId=" + model.name}
+			target="_blank"
+			rel="noreferrer"
+			class="flex items-center hover:underline"
+			><CarbonCode class="mr-1.5 shrink-0 text-xs text-gray-400" />
+			API
+		</a>
+	{/if}
+	{#if model.websiteUrl}
+		<a
+			href={model.websiteUrl}
+			target="_blank"
+			class="ml-auto flex items-center hover:underline"
+			rel="noreferrer"
+		>
+			{#if model.name.startsWith("meta-llama/Meta-Llama")}
+				<BIMeta class="mr-1.5 shrink-0 text-xs text-gray-400" />
+				Built with Llama
+			{:else}
+				<CarbonEarth class="mr-1.5 shrink-0 text-xs text-gray-400" />
+				Website
+			{/if}
+		</a>
+	{/if}
+</div>

package/src/ruvocal/src/lib/components/NavConversationItem.svelte

@@ -1,151 +1,151 @@
-<script lang="ts">
-	import { base } from "$app/paths";
-	import { page } from "$app/state";
-	import { tick } from "svelte";
-
-	import CarbonTrashCan from "~icons/carbon/trash-can";
-	import CarbonEdit from "~icons/carbon/edit";
-	import type { ConvSidebar } from "$lib/types/ConvSidebar";
-
-	import EditConversationModal from "$lib/components/EditConversationModal.svelte";
-	import DeleteConversationModal from "$lib/components/DeleteConversationModal.svelte";
-	import { requireAuthUser } from "$lib/utils/auth";
-
-	interface Props {
-		conv: ConvSidebar;
-		readOnly?: true;
-		ondeleteConversation?: (id: string) => void;
-		oneditConversationTitle?: (payload: { id: string; title: string }) => void;
-	}
-
-	let { conv, readOnly, ondeleteConversation, oneditConversationTitle }: Props = $props();
-
-	let deleteOpen = $state(false);
-	let renameOpen = $state(false);
-	let inlineEditing = $state(false);
-	let inlineCancelled = $state(false);
-	let inlineTitle = $state("");
-	let inputEl: HTMLInputElement | undefined = $state();
-
-	async function startInlineEdit() {
-		if (readOnly || requireAuthUser()) return;
-		inlineTitle = conv.title;
-		inlineCancelled = false;
-		inlineEditing = true;
-		await tick();
-		inputEl?.focus();
-		inputEl?.select();
-	}
-
-	function commitInlineEdit() {
-		if (!inlineEditing || inlineCancelled) return;
-		const trimmed = inlineTitle.trim();
-		inlineEditing = false;
-		if (trimmed && trimmed !== conv.title) {
-			oneditConversationTitle?.({ id: conv.id.toString(), title: trimmed });
-		}
-	}
-
-	function cancelInlineEdit() {
-		inlineCancelled = true;
-		inlineEditing = false;
-	}
-</script>
-
-<a
-	data-sveltekit-noscroll
-	data-sveltekit-preload-data="tap"
-	href="{base}/conversation/{conv.id}"
-	class="group flex h-[2.15rem] flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 max-sm:h-10
-		{conv.id === page.params.id ? 'bg-gray-100 dark:bg-gray-700' : ''}"
-	onclick={(e) => {
-		if (e.detail >= 2) {
-			e.preventDefault();
-			startInlineEdit();
-		}
-	}}
->
-	{#if inlineEditing}
-		<!-- svelte-ignore a11y_autofocus -->
-		<input
-			bind:this={inputEl}
-			type="text"
-			value={inlineTitle}
-			oninput={(e) => (inlineTitle = (e.currentTarget as HTMLInputElement).value)}
-			onkeydown={(e) => {
-				if (e.key === "Enter") {
-					e.preventDefault();
-					commitInlineEdit();
-				} else if (e.key === "Escape") {
-					e.preventDefault();
-					cancelInlineEdit();
-				}
-			}}
-			onblur={commitInlineEdit}
-			onclick={(e) => e.preventDefault()}
-			class="my-0 h-full min-w-0 flex-1 truncate border-none bg-transparent p-0 text-inherit outline-none first-letter:uppercase focus:ring-0"
-		/>
-	{:else}
-		<div class="my-2 min-w-0 flex-1 truncate first-letter:uppercase">
-			<span>{conv.title}</span>
-		</div>
-	{/if}
-
-	{#if !readOnly && !inlineEditing}
-		<button
-			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();
-				if (requireAuthUser()) return;
-				renameOpen = true;
-			}}
-		>
-			<CarbonEdit class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
-		</button>
-
-		<button
-			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 (requireAuthUser()) return;
-				if (event.shiftKey) {
-					ondeleteConversation?.(conv.id.toString());
-				} else {
-					deleteOpen = true;
-				}
-			}}
-		>
-			<CarbonTrashCan class="text-xs text-gray-400  hover:text-gray-500 dark:hover:text-gray-300" />
-		</button>
-	{/if}
-</a>
-
-<!-- Edit title modal -->
-{#if renameOpen}
-	<EditConversationModal
-		open={renameOpen}
-		title={conv.title}
-		onclose={() => (renameOpen = false)}
-		onsave={(payload) => {
-			renameOpen = false;
-			oneditConversationTitle?.({ id: conv.id.toString(), title: payload.title });
-		}}
-	/>
-{/if}
-
-<!-- Delete confirmation modal -->
-{#if deleteOpen}
-	<DeleteConversationModal
-		open={deleteOpen}
-		title={conv.title}
-		onclose={() => (deleteOpen = false)}
-		ondelete={() => {
-			deleteOpen = false;
-			ondeleteConversation?.(conv.id.toString());
-		}}
-	/>
-{/if}
+<script lang="ts">
+	import { base } from "$app/paths";
+	import { page } from "$app/state";
+	import { tick } from "svelte";
+
+	import CarbonTrashCan from "~icons/carbon/trash-can";
+	import CarbonEdit from "~icons/carbon/edit";
+	import type { ConvSidebar } from "$lib/types/ConvSidebar";
+
+	import EditConversationModal from "$lib/components/EditConversationModal.svelte";
+	import DeleteConversationModal from "$lib/components/DeleteConversationModal.svelte";
+	import { requireAuthUser } from "$lib/utils/auth";
+
+	interface Props {
+		conv: ConvSidebar;
+		readOnly?: true;
+		ondeleteConversation?: (id: string) => void;
+		oneditConversationTitle?: (payload: { id: string; title: string }) => void;
+	}
+
+	let { conv, readOnly, ondeleteConversation, oneditConversationTitle }: Props = $props();
+
+	let deleteOpen = $state(false);
+	let renameOpen = $state(false);
+	let inlineEditing = $state(false);
+	let inlineCancelled = $state(false);
+	let inlineTitle = $state("");
+	let inputEl: HTMLInputElement | undefined = $state();
+
+	async function startInlineEdit() {
+		if (readOnly || requireAuthUser()) return;
+		inlineTitle = conv.title;
+		inlineCancelled = false;
+		inlineEditing = true;
+		await tick();
+		inputEl?.focus();
+		inputEl?.select();
+	}
+
+	function commitInlineEdit() {
+		if (!inlineEditing || inlineCancelled) return;
+		const trimmed = inlineTitle.trim();
+		inlineEditing = false;
+		if (trimmed && trimmed !== conv.title) {
+			oneditConversationTitle?.({ id: conv.id.toString(), title: trimmed });
+		}
+	}
+
+	function cancelInlineEdit() {
+		inlineCancelled = true;
+		inlineEditing = false;
+	}
+</script>
+
+<a
+	data-sveltekit-noscroll
+	data-sveltekit-preload-data="tap"
+	href="{base}/conversation/{conv.id}"
+	class="group flex h-[2.15rem] flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 max-sm:h-10
+		{conv.id === page.params.id ? 'bg-gray-100 dark:bg-gray-700' : ''}"
+	onclick={(e) => {
+		if (e.detail >= 2) {
+			e.preventDefault();
+			startInlineEdit();
+		}
+	}}
+>
+	{#if inlineEditing}
+		<!-- svelte-ignore a11y_autofocus -->
+		<input
+			bind:this={inputEl}
+			type="text"
+			value={inlineTitle}
+			oninput={(e) => (inlineTitle = (e.currentTarget as HTMLInputElement).value)}
+			onkeydown={(e) => {
+				if (e.key === "Enter") {
+					e.preventDefault();
+					commitInlineEdit();
+				} else if (e.key === "Escape") {
+					e.preventDefault();
+					cancelInlineEdit();
+				}
+			}}
+			onblur={commitInlineEdit}
+			onclick={(e) => e.preventDefault()}
+			class="my-0 h-full min-w-0 flex-1 truncate border-none bg-transparent p-0 text-inherit outline-none first-letter:uppercase focus:ring-0"
+		/>
+	{:else}
+		<div class="my-2 min-w-0 flex-1 truncate first-letter:uppercase">
+			<span>{conv.title}</span>
+		</div>
+	{/if}
+
+	{#if !readOnly && !inlineEditing}
+		<button
+			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();
+				if (requireAuthUser()) return;
+				renameOpen = true;
+			}}
+		>
+			<CarbonEdit class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
+		</button>
+
+		<button
+			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 (requireAuthUser()) return;
+				if (event.shiftKey) {
+					ondeleteConversation?.(conv.id.toString());
+				} else {
+					deleteOpen = true;
+				}
+			}}
+		>
+			<CarbonTrashCan class="text-xs text-gray-400  hover:text-gray-500 dark:hover:text-gray-300" />
+		</button>
+	{/if}
+</a>
+
+<!-- Edit title modal -->
+{#if renameOpen}
+	<EditConversationModal
+		open={renameOpen}
+		title={conv.title}
+		onclose={() => (renameOpen = false)}
+		onsave={(payload) => {
+			renameOpen = false;
+			oneditConversationTitle?.({ id: conv.id.toString(), title: payload.title });
+		}}
+	/>
+{/if}
+
+<!-- Delete confirmation modal -->
+{#if deleteOpen}
+	<DeleteConversationModal
+		open={deleteOpen}
+		title={conv.title}
+		onclose={() => (deleteOpen = false)}
+		ondelete={() => {
+			deleteOpen = false;
+			ondeleteConversation?.(conv.id.toString());
+		}}
+	/>
+{/if}