ruflo 3.6.30 → 3.7.0-alpha.10

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

@@ -1,69 +1,69 @@
-<script lang="ts">
-	import CarbonStopFilledAlt from "~icons/carbon/stop-filled-alt";
-
-	interface Props {
-		classNames?: string;
-		onClick?: () => void;
-		showBorder?: boolean;
-	}
-
-	let { classNames = "", onClick, showBorder = false }: Props = $props();
-</script>
-
-<button
-	type="button"
-	onclick={onClick}
-	class={`btn stop-generating-btn ${showBorder ? "stop-generating-btn--spinning" : ""} ${classNames}`}
-	aria-label="Stop generating"
->
-	<span class="sr-only">Stop generating</span>
-	<CarbonStopFilledAlt class="size-3.5 text-gray-500" />
-</button>
-
-<style lang="postcss">
-	.stop-generating-btn {
-		position: relative;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: 9999px;
-		--stop-generating-ring-color: rgba(31, 41, 55, 0.35);
-	}
-
-	.stop-generating-btn :global(svg) {
-		display: block;
-	}
-
-	.stop-generating-btn::after {
-		content: "";
-		position: absolute;
-		inset: -2px;
-		border-radius: inherit;
-		pointer-events: none;
-		background: transparent;
-	}
-
-	.stop-generating-btn--spinning::after {
-		background: conic-gradient(
-			from 0deg,
-			transparent 0deg 240deg,
-			var(--stop-generating-ring-color) 240deg 360deg
-		);
-		mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
-		animation: stop-generating-rotate 1.2s linear infinite;
-	}
-
-	:global(.dark) .stop-generating-btn {
-		--stop-generating-ring-color: rgba(255, 255, 255, 0.2);
-	}
-
-	@keyframes stop-generating-rotate {
-		from {
-			transform: rotate(0deg);
-		}
-
-		to {
-			transform: rotate(360deg);
-		}
-	}
-</style>
+<script lang="ts">
+	import CarbonStopFilledAlt from "~icons/carbon/stop-filled-alt";
+
+	interface Props {
+		classNames?: string;
+		onClick?: () => void;
+		showBorder?: boolean;
+	}
+
+	let { classNames = "", onClick, showBorder = false }: Props = $props();
+</script>
+
+<button
+	type="button"
+	onclick={onClick}
+	class={`btn stop-generating-btn ${showBorder ? "stop-generating-btn--spinning" : ""} ${classNames}`}
+	aria-label="Stop generating"
+>
+	<span class="sr-only">Stop generating</span>
+	<CarbonStopFilledAlt class="size-3.5 text-gray-500" />
+</button>
+
+<style lang="postcss">
+	.stop-generating-btn {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 9999px;
+		--stop-generating-ring-color: rgba(31, 41, 55, 0.35);
+	}
+
+	.stop-generating-btn :global(svg) {
+		display: block;
+	}
+
+	.stop-generating-btn::after {
+		content: "";
+		position: absolute;
+		inset: -2px;
+		border-radius: inherit;
+		pointer-events: none;
+		background: transparent;
+	}
+
+	.stop-generating-btn--spinning::after {
+		background: conic-gradient(
+			from 0deg,
+			transparent 0deg 240deg,
+			var(--stop-generating-ring-color) 240deg 360deg
+		);
+		mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px));
+		animation: stop-generating-rotate 1.2s linear infinite;
+	}
+
+	:global(.dark) .stop-generating-btn {
+		--stop-generating-ring-color: rgba(255, 255, 255, 0.2);
+	}
+
+	@keyframes stop-generating-rotate {
+		from {
+			transform: rotate(0deg);
+		}
+
+		to {
+			transform: rotate(360deg);
+		}
+	}
+</style>

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

@@ -1,87 +1,87 @@
-<script lang="ts">
-	import Modal from "$lib/components/Modal.svelte";
-	import { isPro } from "$lib/stores/isPro";
-	import IconPro from "$lib/components/icons/IconPro.svelte";
-	import IconDazzled from "$lib/components/icons/IconDazzled.svelte";
-
-	interface Props {
-		close: () => void;
-	}
-
-	let { close }: Props = $props();
-</script>
-
-<Modal closeOnBackdrop={false} onclose={close} width="!max-w-[420px] !m-4">
-	<div
-		class="flex w-full flex-col gap-8 bg-white bg-gradient-to-b to-transparent px-6 pb-7 dark:bg-black dark:from-white/10 dark:to-white/5"
-	>
-		<div
-			class="-mx-6 grid h-48 select-none place-items-center bg-gradient-to-t from-black/5 dark:from-white/10"
-		>
-			<div class="flex flex-col items-center justify-center gap-2.5 px-8 text-center">
-				<div
-					class="flex size-14 items-center justify-center rounded-full text-3xl {$isPro
-						? 'bg-gradient-to-br from-yellow-500/15 via-orange-500/15 to-red-500/15'
-						: 'bg-gradient-to-br from-pink-500/15 from-15% via-green-500/15 to-yellow-500/15'}"
-				>
-					{#if $isPro}
-						<IconDazzled />
-					{:else}
-						<IconPro classNames="!mr-0" />
-					{/if}
-				</div>
-				<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
-					{$isPro ? "Out of Credits" : "Upgrade Required"}
-				</h2>
-			</div>
-		</div>
-
-		<div class="text-gray-700 dark:text-gray-200">
-			{#if $isPro}
-				<p class="text-[15px] leading-relaxed">
-					You've used all your available credits. Purchase additional credits to continue using
-					HuggingChat.
-				</p>
-				<p class="mt-3 text-[15px] italic leading-relaxed opacity-75">
-					Your credits can be used in other HF services and external apps via Inference Providers.
-				</p>
-			{:else}
-				<p class="text-[15px] leading-relaxed">
-					You've reached your message limit. Upgrade to Hugging Face PRO to continue using
-					HuggingChat.
-				</p>
-				<p class="mt-3 text-[15px] italic leading-relaxed opacity-75">
-					It's also possible to use your PRO credits in your favorite AI tools.
-				</p>
-			{/if}
-		</div>
-
-		<div class="flex flex-col gap-2.5">
-			{#if $isPro}
-				<a
-					href="https://huggingface.co/settings/billing?add-credits=true"
-					target="_blank"
-					rel="noopener noreferrer"
-					class="w-full rounded-xl bg-black px-5 py-2.5 text-center text-base font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200"
-				>
-					Purchase Credits
-				</a>
-			{:else}
-				<a
-					href="https://huggingface.co/subscribe/pro?from=HuggingChat"
-					target="_blank"
-					rel="noopener noreferrer"
-					class="w-full rounded-xl bg-black px-5 py-2.5 text-center text-base font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200"
-				>
-					Upgrade to Pro
-				</a>
-			{/if}
-			<button
-				class="w-full rounded-xl bg-gray-200 px-5 py-2.5 text-base font-medium text-gray-700 hover:bg-gray-300/80 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10"
-				onclick={close}
-			>
-				Maybe later
-			</button>
-		</div>
-	</div>
-</Modal>
+<script lang="ts">
+	import Modal from "$lib/components/Modal.svelte";
+	import { isPro } from "$lib/stores/isPro";
+	import IconPro from "$lib/components/icons/IconPro.svelte";
+	import IconDazzled from "$lib/components/icons/IconDazzled.svelte";
+
+	interface Props {
+		close: () => void;
+	}
+
+	let { close }: Props = $props();
+</script>
+
+<Modal closeOnBackdrop={false} onclose={close} width="!max-w-[420px] !m-4">
+	<div
+		class="flex w-full flex-col gap-8 bg-white bg-gradient-to-b to-transparent px-6 pb-7 dark:bg-black dark:from-white/10 dark:to-white/5"
+	>
+		<div
+			class="-mx-6 grid h-48 select-none place-items-center bg-gradient-to-t from-black/5 dark:from-white/10"
+		>
+			<div class="flex flex-col items-center justify-center gap-2.5 px-8 text-center">
+				<div
+					class="flex size-14 items-center justify-center rounded-full text-3xl {$isPro
+						? 'bg-gradient-to-br from-yellow-500/15 via-orange-500/15 to-red-500/15'
+						: 'bg-gradient-to-br from-pink-500/15 from-15% via-green-500/15 to-yellow-500/15'}"
+				>
+					{#if $isPro}
+						<IconDazzled />
+					{:else}
+						<IconPro classNames="!mr-0" />
+					{/if}
+				</div>
+				<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">
+					{$isPro ? "Out of Credits" : "Upgrade Required"}
+				</h2>
+			</div>
+		</div>
+
+		<div class="text-gray-700 dark:text-gray-200">
+			{#if $isPro}
+				<p class="text-[15px] leading-relaxed">
+					You've used all your available credits. Purchase additional credits to continue using
+					HuggingChat.
+				</p>
+				<p class="mt-3 text-[15px] italic leading-relaxed opacity-75">
+					Your credits can be used in other HF services and external apps via Inference Providers.
+				</p>
+			{:else}
+				<p class="text-[15px] leading-relaxed">
+					You've reached your message limit. Upgrade to Hugging Face PRO to continue using
+					HuggingChat.
+				</p>
+				<p class="mt-3 text-[15px] italic leading-relaxed opacity-75">
+					It's also possible to use your PRO credits in your favorite AI tools.
+				</p>
+			{/if}
+		</div>
+
+		<div class="flex flex-col gap-2.5">
+			{#if $isPro}
+				<a
+					href="https://huggingface.co/settings/billing?add-credits=true"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="w-full rounded-xl bg-black px-5 py-2.5 text-center text-base font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200"
+				>
+					Purchase Credits
+				</a>
+			{:else}
+				<a
+					href="https://huggingface.co/subscribe/pro?from=HuggingChat"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="w-full rounded-xl bg-black px-5 py-2.5 text-center text-base font-medium text-white hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200"
+				>
+					Upgrade to Pro
+				</a>
+			{/if}
+			<button
+				class="w-full rounded-xl bg-gray-200 px-5 py-2.5 text-base font-medium text-gray-700 hover:bg-gray-300/80 dark:bg-white/5 dark:text-gray-200 dark:hover:bg-white/10"
+				onclick={close}
+			>
+				Maybe later
+			</button>
+		</div>
+	</div>
+</Modal>

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

@@ -1,36 +1,36 @@
-<script lang="ts">
-	import { tap } from "$lib/utils/haptics";
-
-	interface Props {
-		checked: boolean;
-		name: string;
-	}
-
-	let { checked = $bindable(), name }: Props = $props();
-
-	function toggle() {
-		checked = !checked;
-		tap();
-	}
-
-	function onKeydown(e: KeyboardEvent) {
-		if (e.key === " " || e.key === "Enter") {
-			e.preventDefault();
-			toggle();
-		}
-	}
-</script>
-
-<input bind:checked type="checkbox" {name} class="peer pointer-events-none absolute opacity-0" />
-<div
-	aria-checked={checked}
-	aria-roledescription="switch"
-	aria-label="switch"
-	role="switch"
-	tabindex="0"
-	onclick={toggle}
-	onkeydown={onKeydown}
-	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 peer-checked:bg-blue-600 hover:bg-gray-400 peer-checked:hover:bg-blue-600 focus-visible:ring focus-visible:ring-offset-1 dark:bg-gray-600 dark:ring-gray-700 dark:hover:bg-gray-500 dark:peer-checked:hover:bg-blue-600 peer-checked:[&>div]:translate-x-3.5"
->
-	<div class="h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform"></div>
-</div>
+<script lang="ts">
+	import { tap } from "$lib/utils/haptics";
+
+	interface Props {
+		checked: boolean;
+		name: string;
+	}
+
+	let { checked = $bindable(), name }: Props = $props();
+
+	function toggle() {
+		checked = !checked;
+		tap();
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (e.key === " " || e.key === "Enter") {
+			e.preventDefault();
+			toggle();
+		}
+	}
+</script>
+
+<input bind:checked type="checkbox" {name} class="peer pointer-events-none absolute opacity-0" />
+<div
+	aria-checked={checked}
+	aria-roledescription="switch"
+	aria-label="switch"
+	role="switch"
+	tabindex="0"
+	onclick={toggle}
+	onkeydown={onKeydown}
+	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 peer-checked:bg-blue-600 hover:bg-gray-400 peer-checked:hover:bg-blue-600 focus-visible:ring focus-visible:ring-offset-1 dark:bg-gray-600 dark:ring-gray-700 dark:hover:bg-gray-500 dark:peer-checked:hover:bg-blue-600 peer-checked:[&>div]:translate-x-3.5"
+>
+	<div class="h-3.5 w-3.5 rounded-full bg-white shadow-sm transition-transform"></div>
+</div>

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

@@ -1,44 +1,44 @@
-<script lang="ts">
-	import Modal from "./Modal.svelte";
-	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>
-
-{#if isOpen}
-	<Modal onclose={() => (isOpen = false)} width="w-full !max-w-xl">
-		<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 dark:text-gray-200"
-			>
-				<h2>System Prompt</h2>
-				<button type="button" class="group" onclick={() => (isOpen = false)}>
-					<CarbonClose
-						class="mt-auto text-gray-900 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
-					/>
-				</button>
-			</div>
-			<textarea
-				disabled
-				value={preprompt}
-				class="min-h-[420px] w-full resize-none rounded-lg border bg-gray-50 p-2.5 text-gray-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 max-sm:text-sm"
-			></textarea>
-		</div>
-	</Modal>
-{/if}
+<script lang="ts">
+	import Modal from "./Modal.svelte";
+	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>
+
+{#if isOpen}
+	<Modal onclose={() => (isOpen = false)} width="w-full !max-w-xl">
+		<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 dark:text-gray-200"
+			>
+				<h2>System Prompt</h2>
+				<button type="button" class="group" onclick={() => (isOpen = false)}>
+					<CarbonClose
+						class="mt-auto text-gray-900 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
+					/>
+				</button>
+			</div>
+			<textarea
+				disabled
+				value={preprompt}
+				class="min-h-[420px] w-full resize-none rounded-lg border bg-gray-50 p-2.5 text-gray-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 max-sm:text-sm"
+			></textarea>
+		</div>
+	</Modal>
+{/if}

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

@@ -1,27 +1,27 @@
-<script lang="ts">
-	import { fade } from "svelte/transition";
-	import Portal from "./Portal.svelte";
-	import IconDazzled from "$lib/components/icons/IconDazzled.svelte";
-
-	interface Props {
-		message?: string;
-	}
-
-	let { message = "" }: Props = $props();
-</script>
-
-<Portal>
-	<div
-		transition:fade|global={{ duration: 300 }}
-		class="pointer-events-none fixed right-0 top-12 z-50 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pb-36 pl-36 pr-2 pt-2 max-sm:text-sm md:top-0 md:pr-8 md:pt-5"
-	>
-		<div
-			class="pointer-events-auto flex items-center rounded-full bg-white/90 px-3 py-1 shadow-sm dark:bg-gray-900/80"
-		>
-			<IconDazzled classNames="text-2xl mr-2 flex-none" />
-			<h2 class="line-clamp-2 max-w-2xl font-semibold text-gray-800 dark:text-gray-200">
-				{message}
-			</h2>
-		</div>
-	</div>
-</Portal>
+<script lang="ts">
+	import { fade } from "svelte/transition";
+	import Portal from "./Portal.svelte";
+	import IconDazzled from "$lib/components/icons/IconDazzled.svelte";
+
+	interface Props {
+		message?: string;
+	}
+
+	let { message = "" }: Props = $props();
+</script>
+
+<Portal>
+	<div
+		transition:fade|global={{ duration: 300 }}
+		class="pointer-events-none fixed right-0 top-12 z-50 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pb-36 pl-36 pr-2 pt-2 max-sm:text-sm md:top-0 md:pr-8 md:pt-5"
+	>
+		<div
+			class="pointer-events-auto flex items-center rounded-full bg-white/90 px-3 py-1 shadow-sm dark:bg-gray-900/80"
+		>
+			<IconDazzled classNames="text-2xl mr-2 flex-none" />
+			<h2 class="line-clamp-2 max-w-2xl font-semibold text-gray-800 dark:text-gray-200">
+				{message}
+			</h2>
+		</div>
+	</div>
+</Portal>

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

@@ -1,30 +1,30 @@
-<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
-	class="
-		pointer-events-none absolute rounded bg-black px-2 py-1 font-normal leading-tight text-white shadow transition-opacity
-		{position}
-		{classNames}
-	"
->
-	<div
-		class="absolute bottom-full left-1/2 h-0 w-0 -translate-x-1/2 transform border-4 border-t-0 border-black"
-		style="
-				border-left-color: transparent;
-				border-right-color: transparent;
-			"
-	></div>
-	{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
+	class="
+		pointer-events-none absolute rounded bg-black px-2 py-1 font-normal leading-tight text-white shadow transition-opacity
+		{position}
+		{classNames}
+	"
+>
+	<div
+		class="absolute bottom-full left-1/2 h-0 w-0 -translate-x-1/2 transform border-4 border-t-0 border-black"
+		style="
+				border-left-color: transparent;
+				border-right-color: transparent;
+			"
+	></div>
+	{label}
+</div>