ruflo 3.10.45 → 3.11.0

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

@@ -1,47 +1,47 @@
-<script lang="ts">
-	import { fade } from "svelte/transition";
-	import IconChevron from "./icons/IconChevron.svelte";
-
-	interface Props {
-		scrollNode: HTMLElement;
-		class?: string;
-	}
-
-	let { scrollNode, class: className = "" }: Props = $props();
-
-	let visible = $state(false);
-	let observer: ResizeObserver | null = $state(null);
-
-	function updateVisibility() {
-		if (!scrollNode) return;
-		visible =
-			Math.ceil(scrollNode.scrollTop) + 200 < scrollNode.scrollHeight - scrollNode.clientHeight;
-	}
-
-	function destroy() {
-		observer?.disconnect();
-		scrollNode?.removeEventListener("scroll", updateVisibility);
-	}
-	const cleanup = $effect.root(() => {
-		$effect(() => {
-			if (scrollNode) {
-				if (window.ResizeObserver) {
-					observer = new ResizeObserver(() => updateVisibility());
-					observer.observe(scrollNode);
-					cleanup();
-				}
-				scrollNode?.addEventListener("scroll", updateVisibility);
-			}
-		});
-		return () => destroy();
-	});
-</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
-	>
-{/if}
+<script lang="ts">
+	import { fade } from "svelte/transition";
+	import IconChevron from "./icons/IconChevron.svelte";
+
+	interface Props {
+		scrollNode: HTMLElement;
+		class?: string;
+	}
+
+	let { scrollNode, class: className = "" }: Props = $props();
+
+	let visible = $state(false);
+	let observer: ResizeObserver | null = $state(null);
+
+	function updateVisibility() {
+		if (!scrollNode) return;
+		visible =
+			Math.ceil(scrollNode.scrollTop) + 200 < scrollNode.scrollHeight - scrollNode.clientHeight;
+	}
+
+	function destroy() {
+		observer?.disconnect();
+		scrollNode?.removeEventListener("scroll", updateVisibility);
+	}
+	const cleanup = $effect.root(() => {
+		$effect(() => {
+			if (scrollNode) {
+				if (window.ResizeObserver) {
+					observer = new ResizeObserver(() => updateVisibility());
+					observer.observe(scrollNode);
+					cleanup();
+				}
+				scrollNode?.addEventListener("scroll", updateVisibility);
+			}
+		});
+		return () => destroy();
+	});
+</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
+	>
+{/if}

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

@@ -1,77 +1,77 @@
-<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 =
-			Math.ceil(scrollNode.scrollTop) + 200 < scrollNode.scrollHeight - scrollNode.clientHeight &&
-			scrollNode.scrollTop > 200;
-	}
-
-	function scrollToPrevious() {
-		if (!scrollNode) return;
-		const messages = scrollNode.querySelectorAll("[data-message-id]");
-		const scrollTop = scrollNode.scrollTop;
-		let previousMessage: Element | null = null;
-
-		for (let i = messages.length - 1; i >= 0; i--) {
-			const messageTop =
-				messages[i].getBoundingClientRect().top +
-				scrollTop -
-				scrollNode.getBoundingClientRect().top;
-			if (messageTop < scrollTop - 1) {
-				previousMessage = messages[i];
-				break;
-			}
-		}
-
-		if (previousMessage) {
-			previousMessage.scrollIntoView({ behavior: "smooth", block: "start" });
-		}
-	}
-
-	function destroy() {
-		observer?.disconnect();
-		scrollNode?.removeEventListener("scroll", updateVisibility);
-	}
-
-	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]" />
-	</button>
-{/if}
+<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 =
+			Math.ceil(scrollNode.scrollTop) + 200 < scrollNode.scrollHeight - scrollNode.clientHeight &&
+			scrollNode.scrollTop > 200;
+	}
+
+	function scrollToPrevious() {
+		if (!scrollNode) return;
+		const messages = scrollNode.querySelectorAll("[data-message-id]");
+		const scrollTop = scrollNode.scrollTop;
+		let previousMessage: Element | null = null;
+
+		for (let i = messages.length - 1; i >= 0; i--) {
+			const messageTop =
+				messages[i].getBoundingClientRect().top +
+				scrollTop -
+				scrollNode.getBoundingClientRect().top;
+			if (messageTop < scrollTop - 1) {
+				previousMessage = messages[i];
+				break;
+			}
+		}
+
+		if (previousMessage) {
+			previousMessage.scrollIntoView({ behavior: "smooth", block: "start" });
+		}
+	}
+
+	function destroy() {
+		observer?.disconnect();
+		scrollNode?.removeEventListener("scroll", updateVisibility);
+	}
+
+	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]" />
+	</button>
+{/if}

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

@@ -1,182 +1,182 @@
-<script lang="ts">
-	import Modal from "$lib/components/Modal.svelte";
-	import { base } from "$app/paths";
-	import { page } from "$app/state";
-	import CarbonLink from "~icons/carbon/link";
-	import CarbonCheckmark from "~icons/carbon/checkmark";
-	import EosIconsLoading from "~icons/eos-icons/loading";
-	import CopyToClipBoardBtn from "$lib/components/CopyToClipBoardBtn.svelte";
-	import { onMount } from "svelte";
-	import { createShareLink } from "$lib/createShareLink";
-
-	interface Props {
-		open?: boolean;
-		onclose?: () => void;
-		oncopied?: () => void;
-	}
-
-	let { open = false, onclose, oncopied }: Props = $props();
-
-	let creating = $state(false);
-	let createdUrl: string | null = $state(null);
-	let errorMsg: string | null = $state(null);
-	let justCopied = $state(false);
-
-	async function handleCreate() {
-		try {
-			creating = true;
-			errorMsg = null;
-			createdUrl = await createShareLink(page.params.id ?? "");
-		} catch (e) {
-			errorMsg = (e as Error).message || "Could not create link";
-		} finally {
-			creating = false;
-		}
-	}
-
-	function close() {
-		open = false;
-		onclose?.();
-	}
-
-	// If the current page is already a shared chat (7-char id), pre-fill the link
-	onMount(async () => {
-		if (page.params.id && page.params.id.length === 7) {
-			try {
-				createdUrl = await createShareLink(page.params.id);
-			} catch (e) {
-				// ignore
-			}
-		}
-	});
-
-	function withLeafId(url: string | null): string | null {
-		if (!url) return url;
-		try {
-			const leafId = localStorage.getItem("leafId");
-			if (!leafId) return url;
-			const u = new URL(url);
-			u.searchParams.set("leafId", leafId);
-			return u.toString();
-		} catch (e) {
-			return url;
-		}
-	}
-</script>
-
-{#if open}
-	<Modal onclose={close} width="w-[90dvh] md:w-[500px]">
-		<div class="flex w-full flex-col gap-3 p-5 sm:gap-5 sm:p-6">
-			<!-- Header + copy -->
-			{#if createdUrl}
-				<div class="flex items-start justify-between">
-					<div class="text-xl font-semibold text-gray-800 dark:text-gray-200">
-						Public link created
-					</div>
-					<button type="button" class="group" onclick={close} aria-label="Close">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 32 32"
-							class="size-5 text-gray-700 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-400"
-						>
-							<path
-								d="M24 9.41 22.59 8 16 14.59 9.41 8 8 9.41 14.59 16 8 22.59 9.41 24 16 17.41 22.59 24 24 22.59 17.41 16 24 9.41z"
-								fill="currentColor"
-							/>
-						</svg>
-					</button>
-				</div>
-				<div class="text-sm text-gray-600 dark:text-gray-400">
-					A public link to your chat has been created.
-				</div>
-			{:else}
-				<div class="flex items-start justify-between">
-					<div class="text-xl font-semibold text-gray-800 dark:text-gray-200">
-						Share public link to chat
-					</div>
-					<button type="button" class="group" onclick={close} aria-label="Close">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 32 32"
-							class="size-5 text-gray-700 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-400"
-						>
-							<path
-								d="M24 9.41 22.59 8 16 14.59 9.41 8 8 9.41 14.59 16 8 22.59 9.41 24 16 17.41 22.59 24 24 22.59 17.41 16 24 9.41z"
-								fill="currentColor"
-							/>
-						</svg>
-					</button>
-				</div>
-				<div class="text-sm text-gray-600 dark:text-gray-400">
-					Any messages you add after sharing stay private.
-				</div>
-			{/if}
-
-			{#if errorMsg}
-				<div
-					class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-700 dark:bg-red-500/10 dark:text-red-300"
-				>
-					{errorMsg}
-				</div>
-			{/if}
-
-			<!-- URL row -->
-			<div
-				class="flex h-12 items-center gap-2 whitespace-nowrap rounded-2xl border border-gray-200 bg-gray-50 p-2.5 dark:border-gray-700 dark:bg-gray-800"
-			>
-				<input
-					class="w-full truncate bg-transparent text-[15px] text-gray-700 outline-none placeholder:text-gray-400 dark:text-gray-200 dark:placeholder:text-gray-500 max-sm:text-sm"
-					readonly
-					value={createdUrl ??
-						`${page.data.publicConfig.PUBLIC_SHARE_PREFIX || `${page.data.publicConfig.PUBLIC_ORIGIN || page.url.origin}${base}`}/r/...`}
-				/>
-
-				{#if createdUrl}
-					<CopyToClipBoardBtn
-						classNames="inline-flex items-center rounded-xl -mr-1 border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 shadow enabled:hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 dark:enabled:hover:bg-gray-600"
-						showTooltip={false}
-						value={withLeafId(createdUrl) ?? createdUrl}
-						onClick={() => {
-							justCopied = true;
-							oncopied?.();
-							setTimeout(() => (justCopied = false), 1200);
-						}}
-					>
-						{#snippet children()}
-							<span class="inline-flex items-center gap-1.5">
-								{#if justCopied}
-									<CarbonCheckmark class="text-[.95em] text-green-600 dark:text-green-400" />
-									Copied
-								{:else}
-									<!-- Use the copy icon provided by CopyToClipBoardBtn default otherwise -->
-									<svg width="1em" height="1em" viewBox="0 0 32 32" class="text-[.95em]"
-										><path
-											fill="currentColor"
-											d="M28 10v18H10V10zm-2 2H12v14h14zm-4-8v2H6v14H4V4z"
-										/></svg
-									>
-									Copy link
-								{/if}
-							</span>
-						{/snippet}
-					</CopyToClipBoardBtn>
-				{:else}
-					<button
-						class="-mr-1 inline-flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 shadow hover:bg-gray-50 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
-						type="button"
-						disabled={creating}
-						onclick={handleCreate}
-					>
-						{#if creating}
-							<EosIconsLoading class="text-[1.05em]" />
-							Creating…
-						{:else}
-							<CarbonLink class="text-[1.05em]" />
-							Create link
-						{/if}
-					</button>
-				{/if}
-			</div>
-		</div>
-	</Modal>
-{/if}
+<script lang="ts">
+	import Modal from "$lib/components/Modal.svelte";
+	import { base } from "$app/paths";
+	import { page } from "$app/state";
+	import CarbonLink from "~icons/carbon/link";
+	import CarbonCheckmark from "~icons/carbon/checkmark";
+	import EosIconsLoading from "~icons/eos-icons/loading";
+	import CopyToClipBoardBtn from "$lib/components/CopyToClipBoardBtn.svelte";
+	import { onMount } from "svelte";
+	import { createShareLink } from "$lib/createShareLink";
+
+	interface Props {
+		open?: boolean;
+		onclose?: () => void;
+		oncopied?: () => void;
+	}
+
+	let { open = false, onclose, oncopied }: Props = $props();
+
+	let creating = $state(false);
+	let createdUrl: string | null = $state(null);
+	let errorMsg: string | null = $state(null);
+	let justCopied = $state(false);
+
+	async function handleCreate() {
+		try {
+			creating = true;
+			errorMsg = null;
+			createdUrl = await createShareLink(page.params.id ?? "");
+		} catch (e) {
+			errorMsg = (e as Error).message || "Could not create link";
+		} finally {
+			creating = false;
+		}
+	}
+
+	function close() {
+		open = false;
+		onclose?.();
+	}
+
+	// If the current page is already a shared chat (7-char id), pre-fill the link
+	onMount(async () => {
+		if (page.params.id && page.params.id.length === 7) {
+			try {
+				createdUrl = await createShareLink(page.params.id);
+			} catch (e) {
+				// ignore
+			}
+		}
+	});
+
+	function withLeafId(url: string | null): string | null {
+		if (!url) return url;
+		try {
+			const leafId = localStorage.getItem("leafId");
+			if (!leafId) return url;
+			const u = new URL(url);
+			u.searchParams.set("leafId", leafId);
+			return u.toString();
+		} catch (e) {
+			return url;
+		}
+	}
+</script>
+
+{#if open}
+	<Modal onclose={close} width="w-[90dvh] md:w-[500px]">
+		<div class="flex w-full flex-col gap-3 p-5 sm:gap-5 sm:p-6">
+			<!-- Header + copy -->
+			{#if createdUrl}
+				<div class="flex items-start justify-between">
+					<div class="text-xl font-semibold text-gray-800 dark:text-gray-200">
+						Public link created
+					</div>
+					<button type="button" class="group" onclick={close} aria-label="Close">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 32 32"
+							class="size-5 text-gray-700 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-400"
+						>
+							<path
+								d="M24 9.41 22.59 8 16 14.59 9.41 8 8 9.41 14.59 16 8 22.59 9.41 24 16 17.41 22.59 24 24 22.59 17.41 16 24 9.41z"
+								fill="currentColor"
+							/>
+						</svg>
+					</button>
+				</div>
+				<div class="text-sm text-gray-600 dark:text-gray-400">
+					A public link to your chat has been created.
+				</div>
+			{:else}
+				<div class="flex items-start justify-between">
+					<div class="text-xl font-semibold text-gray-800 dark:text-gray-200">
+						Share public link to chat
+					</div>
+					<button type="button" class="group" onclick={close} aria-label="Close">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 32 32"
+							class="size-5 text-gray-700 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-400"
+						>
+							<path
+								d="M24 9.41 22.59 8 16 14.59 9.41 8 8 9.41 14.59 16 8 22.59 9.41 24 16 17.41 22.59 24 24 22.59 17.41 16 24 9.41z"
+								fill="currentColor"
+							/>
+						</svg>
+					</button>
+				</div>
+				<div class="text-sm text-gray-600 dark:text-gray-400">
+					Any messages you add after sharing stay private.
+				</div>
+			{/if}
+
+			{#if errorMsg}
+				<div
+					class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700 dark:border-red-700 dark:bg-red-500/10 dark:text-red-300"
+				>
+					{errorMsg}
+				</div>
+			{/if}
+
+			<!-- URL row -->
+			<div
+				class="flex h-12 items-center gap-2 whitespace-nowrap rounded-2xl border border-gray-200 bg-gray-50 p-2.5 dark:border-gray-700 dark:bg-gray-800"
+			>
+				<input
+					class="w-full truncate bg-transparent text-[15px] text-gray-700 outline-none placeholder:text-gray-400 dark:text-gray-200 dark:placeholder:text-gray-500 max-sm:text-sm"
+					readonly
+					value={createdUrl ??
+						`${page.data.publicConfig.PUBLIC_SHARE_PREFIX || `${page.data.publicConfig.PUBLIC_ORIGIN || page.url.origin}${base}`}/r/...`}
+				/>
+
+				{#if createdUrl}
+					<CopyToClipBoardBtn
+						classNames="inline-flex items-center rounded-xl -mr-1 border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 shadow enabled:hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 dark:enabled:hover:bg-gray-600"
+						showTooltip={false}
+						value={withLeafId(createdUrl) ?? createdUrl}
+						onClick={() => {
+							justCopied = true;
+							oncopied?.();
+							setTimeout(() => (justCopied = false), 1200);
+						}}
+					>
+						{#snippet children()}
+							<span class="inline-flex items-center gap-1.5">
+								{#if justCopied}
+									<CarbonCheckmark class="text-[.95em] text-green-600 dark:text-green-400" />
+									Copied
+								{:else}
+									<!-- Use the copy icon provided by CopyToClipBoardBtn default otherwise -->
+									<svg width="1em" height="1em" viewBox="0 0 32 32" class="text-[.95em]"
+										><path
+											fill="currentColor"
+											d="M28 10v18H10V10zm-2 2H12v14h14zm-4-8v2H6v14H4V4z"
+										/></svg
+									>
+									Copy link
+								{/if}
+							</span>
+						{/snippet}
+					</CopyToClipBoardBtn>
+				{:else}
+					<button
+						class="-mr-1 inline-flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 shadow hover:bg-gray-50 disabled:opacity-50 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
+						type="button"
+						disabled={creating}
+						onclick={handleCreate}
+					>
+						{#if creating}
+							<EosIconsLoading class="text-[1.05em]" />
+							Creating…
+						{:else}
+							<CarbonLink class="text-[1.05em]" />
+							Create link
+						{/if}
+					</button>
+				{/if}
+			</div>
+		</div>
+	</Modal>
+{/if}