ruflo 3.5.2 → 3.5.3

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

@@ -0,0 +1,168 @@
+<script lang="ts">
+	import { browser, dev } from "$app/environment";
+	import { invalidate } from "$app/navigation";
+
+	import {
+		type BackgroundGeneration,
+		backgroundGenerationEntries,
+		removeBackgroundGeneration,
+	} from "$lib/stores/backgroundGenerations";
+	import { handleResponse, useAPIClient } from "$lib/APIClient";
+	import { UrlDependency } from "$lib/types/UrlDependency";
+	import type { Message } from "$lib/types/Message";
+	import { isAssistantGenerationTerminal } from "$lib/utils/generationState";
+
+	const POLL_INTERVAL_MS = 1000;
+	const MAX_POLL_DURATION_MS = 3 * 60_000;
+
+	const client = useAPIClient();
+	const pollers = new Map<string, () => void>();
+	const inflight = new Set<string>();
+	const assistantSnapshots = new Map<string, string>();
+	const failureCounts = new Map<string, number>();
+
+	$effect.root(() => {
+		if (!browser) {
+			pollers.clear();
+			return;
+		}
+
+		let destroyed = false;
+
+		const log = (...args: unknown[]) => {
+			if (dev) {
+				console.log("background generation", ...args);
+			}
+		};
+
+		const stopPoller = (id: string, reason?: string) => {
+			const stop = pollers.get(id);
+			if (!stop) return;
+
+			stop();
+			pollers.delete(id);
+			inflight.delete(id);
+			assistantSnapshots.delete(id);
+			failureCounts.delete(id);
+			log("stop", id, reason);
+		};
+
+		const pollOnce = async (id: string) => {
+			if (destroyed || inflight.has(id)) return;
+
+			const entry = backgroundGenerationEntries.find((candidate) => candidate.id === id);
+			if (entry && Date.now() - entry.startedAt > MAX_POLL_DURATION_MS) {
+				removeBackgroundGeneration(id);
+				stopPoller(id, "timed out");
+				log("timeout", id);
+				await invalidate(UrlDependency.ConversationList);
+				await invalidate(UrlDependency.Conversation);
+				return;
+			}
+
+			inflight.add(id);
+			log("poll", id);
+
+			try {
+				const response = await client.conversations({ id }).get({ query: {} });
+				const conversation = handleResponse(response) as {
+					messages?: Message[];
+				} | null;
+				const messages: Message[] = conversation?.messages ?? [];
+				const lastAssistant = [...messages]
+					.reverse()
+					.find((message: Message) => message.from === "assistant");
+
+				const isTerminal = isAssistantGenerationTerminal(lastAssistant);
+
+				const snapshot = lastAssistant
+					? JSON.stringify({
+							id: lastAssistant.id,
+							updatedAt: lastAssistant.updatedAt,
+							contentLength: lastAssistant.content?.length ?? 0,
+							updatesLength: lastAssistant.updates?.length ?? 0,
+						})
+					: "__none__";
+				const previousSnapshot = assistantSnapshots.get(id);
+				let shouldInvalidateConversation = false;
+
+				if (lastAssistant) {
+					assistantSnapshots.set(id, snapshot);
+					if (snapshot !== previousSnapshot) {
+						shouldInvalidateConversation = true;
+					}
+				} else if (assistantSnapshots.has(id)) {
+					assistantSnapshots.delete(id);
+					shouldInvalidateConversation = true;
+				}
+
+				if (lastAssistant && isTerminal) {
+					removeBackgroundGeneration(id);
+					assistantSnapshots.delete(id);
+					failureCounts.delete(id);
+					shouldInvalidateConversation = true;
+					log("complete", id, "terminal");
+					await invalidate(UrlDependency.ConversationList);
+				}
+
+				if (shouldInvalidateConversation) {
+					await invalidate(UrlDependency.Conversation);
+				}
+
+				failureCounts.delete(id);
+			} catch (err) {
+				console.error("Background generation poll failed", id, err);
+				const failures = (failureCounts.get(id) ?? 0) + 1;
+				failureCounts.set(id, failures);
+				if (failures >= 3) {
+					removeBackgroundGeneration(id);
+					assistantSnapshots.delete(id);
+					failureCounts.delete(id);
+					log("failures", id, failures);
+					await invalidate(UrlDependency.ConversationList);
+				}
+			} finally {
+				inflight.delete(id);
+			}
+		};
+
+		const startPoller = (entry: BackgroundGeneration) => {
+			if (pollers.has(entry.id)) return;
+
+			const intervalId = setInterval(() => {
+				void pollOnce(entry.id);
+			}, POLL_INTERVAL_MS);
+
+			pollers.set(entry.id, () => clearInterval(intervalId));
+			void pollOnce(entry.id);
+			log("start", entry.id);
+		};
+
+		$effect(() => {
+			const entries = backgroundGenerationEntries;
+
+			if (destroyed) return;
+
+			const activeIds = new Set(entries.map((entry) => entry.id));
+
+			for (const id of pollers.keys()) {
+				if (!activeIds.has(id)) {
+					stopPoller(id);
+				}
+			}
+
+			for (const entry of entries) {
+				startPoller(entry);
+			}
+		});
+
+		return () => {
+			destroyed = true;
+			for (const stop of pollers.values()) stop();
+			pollers.clear();
+			inflight.clear();
+			assistantSnapshots.clear();
+			failureCounts.clear();
+		};
+	});
+</script>

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

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import CopyToClipBoardBtn from "./CopyToClipBoardBtn.svelte";
+	import DOMPurify from "isomorphic-dompurify";
+	import HtmlPreviewModal from "./HtmlPreviewModal.svelte";
+	import PlayFilledAlt from "~icons/carbon/play-filled-alt";
+	import EosIconsLoading from "~icons/eos-icons/loading";
+
+	interface Props {
+		code?: string;
+		rawCode?: string;
+		loading?: boolean;
+	}
+
+	let { code = "", rawCode = "", loading = false }: Props = $props();
+
+	let previewOpen = $state(false);
+
+	function hasStrictHtml5Doctype(input: string): boolean {
+		if (!input) return false;
+		const withoutBOM = input.replace(/^\uFEFF/, "");
+		const trimmed = withoutBOM.trimStart();
+		// Strict HTML5 doctype: <!doctype html> with optional whitespace before >
+		return /^<!doctype\s+html\s*>/i.test(trimmed);
+	}
+
+	function isSvgDocument(input: string): boolean {
+		const trimmed = input.trimStart();
+		return /^(?:<\?xml[^>]*>\s*)?(?:<!doctype\s+svg[^>]*>\s*)?<svg[\s>]/i.test(trimmed);
+	}
+
+	let showPreview = $derived(hasStrictHtml5Doctype(rawCode) || isSvgDocument(rawCode));
+</script>
+
+<div class="group relative my-4 rounded-lg">
+	<div class="pointer-events-none sticky top-0 w-full">
+		<div
+			class="pointer-events-auto absolute right-2 top-2 flex items-center gap-1.5 md:right-3 md:top-3"
+		>
+			{#if showPreview}
+				<button
+					class="btn h-7 gap-1 rounded-lg border px-2 text-xs shadow-sm backdrop-blur transition-none hover:border-gray-500 active:shadow-inner disabled:cursor-not-allowed disabled:opacity-80 dark:border-gray-600 dark:bg-gray-600/50 dark:hover:border-gray-500"
+					disabled={loading}
+					onclick={() => {
+						if (!loading) {
+							previewOpen = true;
+						}
+					}}
+					title="Preview HTML"
+					aria-label="Preview HTML"
+				>
+					{#if loading}
+						<EosIconsLoading class="size-3.5" />
+					{:else}
+						<PlayFilledAlt class="size-3.5" />
+					{/if}
+					Preview
+				</button>
+			{/if}
+			<CopyToClipBoardBtn
+				iconClassNames="size-3"
+				classNames="btn transition-none rounded-lg border size-7 text-sm shadow-sm dark:bg-gray-600/50 backdrop-blur dark:hover:border-gray-500  active:shadow-inner dark:border-gray-600  hover:border-gray-500"
+				value={rawCode}
+			/>
+		</div>
+	</div>
+	<pre class="scrollbar-custom overflow-auto px-5 font-mono transition-[height]"><code
+			><!-- eslint-disable svelte/no-at-html-tags -->{@html DOMPurify.sanitize(code)}</code
+		></pre>
+
+	{#if previewOpen}
+		<HtmlPreviewModal html={rawCode} onclose={() => (previewOpen = false)} />
+	{/if}
+</div>

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

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { onDestroy } from "svelte";
+	import { confirm as hapticConfirm } from "$lib/utils/haptics";
+
+	import CarbonCopy from "~icons/carbon/copy";
+	import Tooltip from "./Tooltip.svelte";
+
+	interface Props {
+		classNames?: string;
+		iconClassNames?: string;
+		value: string;
+		children?: import("svelte").Snippet;
+		onClick?: () => void;
+		showTooltip?: boolean;
+	}
+
+	let {
+		classNames = "",
+		iconClassNames = "",
+		value,
+		children,
+		onClick,
+		showTooltip = true,
+	}: Props = $props();
+
+	let isSuccess = $state(false);
+	let timeout: ReturnType<typeof setTimeout>;
+
+	const unsecuredCopy = (text: string) => {
+		//Old or insecure browsers
+
+		const textArea = document.createElement("textarea");
+		textArea.value = text;
+		document.body.appendChild(textArea);
+		textArea.focus();
+		textArea.select();
+		document.execCommand("copy");
+		document.body.removeChild(textArea);
+
+		return Promise.resolve();
+	};
+
+	const copy = async (text: string) => {
+		if (window.isSecureContext && navigator.clipboard) {
+			return navigator.clipboard.writeText(text);
+		}
+		return unsecuredCopy(text);
+	};
+
+	const handleClick = async () => {
+		try {
+			await copy(value);
+			hapticConfirm();
+
+			isSuccess = true;
+			if (timeout) {
+				clearTimeout(timeout);
+			}
+			timeout = setTimeout(() => {
+				isSuccess = false;
+			}, 1000);
+		} catch (err) {
+			console.error(err);
+		}
+	};
+
+	onDestroy(() => {
+		if (timeout) {
+			clearTimeout(timeout);
+		}
+	});
+</script>
+
+<button
+	class={classNames}
+	title={"Copy to clipboard"}
+	type="button"
+	onclick={() => {
+		onClick?.();
+		handleClick();
+	}}
+>
+	<div class="relative">
+		{#if children}{@render children()}{:else}
+			<CarbonCopy class={iconClassNames} />
+		{/if}
+
+		{#if showTooltip}
+			<Tooltip classNames={isSuccess ? "opacity-100" : "opacity-0"} />
+		{/if}
+	</div>
+</button>

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

@@ -0,0 +1,75 @@
+<script lang="ts">
+	import Modal from "$lib/components/Modal.svelte";
+	import { onMount } from "svelte";
+
+	interface Props {
+		open?: boolean;
+		title?: string;
+		onclose?: () => void;
+		ondelete?: () => void;
+	}
+
+	let { open = false, title = "", onclose, ondelete }: Props = $props();
+
+	let deleteButtonEl: HTMLButtonElement | undefined = $state();
+
+	function close() {
+		open = false;
+		onclose?.();
+	}
+
+	function confirmDelete() {
+		ondelete?.();
+		close();
+	}
+
+	onMount(() => {
+		setTimeout(() => {
+			deleteButtonEl?.focus();
+		}, 100);
+	});
+</script>
+
+{#if open}
+	<Modal onclose={close} width="w-[90dvh] md:w-[480px]">
+		<div class="flex w-full flex-col gap-5 p-6">
+			<div class="flex items-start justify-between">
+				<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Delete conversation</h2>
+				<button type="button" class="group outline-none" 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>
+
+			<p class="text-sm text-gray-600 dark:text-gray-400">
+				Are you sure you want to delete "<span class="font-semibold">{title}</span>"? This action
+				cannot be undone.
+			</p>
+
+			<div class="flex items-center justify-end gap-2">
+				<button
+					type="button"
+					class="inline-flex items-center rounded-xl border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 shadow outline-none hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
+					onclick={close}
+				>
+					Cancel
+				</button>
+				<button
+					bind:this={deleteButtonEl}
+					type="button"
+					class="inline-flex items-center rounded-xl border border-red-600 bg-red-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 dark:border-red-500 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-400 dark:focus:ring-offset-gray-800"
+					onclick={confirmDelete}
+				>
+					Delete
+				</button>
+			</div>
+		</div>
+	</Modal>
+{/if}

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

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import Modal from "$lib/components/Modal.svelte";
+	import { onMount } from "svelte";
+
+	interface Props {
+		open?: boolean;
+		title?: string;
+		onclose?: () => void;
+		onsave?: (payload: { title: string }) => void;
+	}
+
+	let { open = false, title = "", onclose, onsave }: Props = $props();
+
+	let newTitle = $state(title);
+	let inputEl: HTMLInputElement | undefined = $state();
+
+	$effect(() => {
+		// keep local input in sync if parent changes title while open
+		if (open) {
+			newTitle = title;
+		}
+	});
+
+	function close() {
+		open = false;
+		onclose?.();
+	}
+
+	function save() {
+		const trimmed = (newTitle ?? "").trim();
+		if (!trimmed) return;
+		onsave?.({ title: trimmed });
+		close();
+	}
+
+	onMount(() => {
+		// small delay to ensure modal mounted then focus/select
+		setTimeout(() => {
+			inputEl?.focus();
+			inputEl?.select();
+		}, 0);
+	});
+</script>
+
+{#if open}
+	<Modal onclose={close} width="w-[90dvh] md:w-[480px]">
+		<form
+			class="flex w-full flex-col gap-5 p-6"
+			onsubmit={(e) => {
+				e.preventDefault();
+				save();
+			}}
+		>
+			<div class="flex items-start justify-between">
+				<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Rename conversation</h2>
+				<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="flex flex-col gap-2">
+				<label for="conv-title" class="text-sm text-gray-600 dark:text-gray-400">Title</label>
+				<input
+					autocomplete="off"
+					id="conv-title"
+					bind:this={inputEl}
+					value={newTitle}
+					oninput={(e) => (newTitle = (e.currentTarget as HTMLInputElement).value)}
+					class="w-full rounded-xl border border-gray-200 bg-white px-3 py-2 text-[15px] text-gray-800 outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:ring-gray-700"
+					placeholder="Enter a title"
+				/>
+			</div>
+
+			<div class="flex items-center justify-end gap-2">
+				<button
+					type="button"
+					class="inline-flex items-center 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 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
+					onclick={close}
+				>
+					Cancel
+				</button>
+				<button
+					type="submit"
+					class="inline-flex items-center rounded-xl border border-gray-900 bg-gray-900 px-3 py-1.5 text-sm font-semibold text-white hover:bg-black disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-100 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
+					disabled={!newTitle?.trim()}
+				>
+					Save
+				</button>
+			</div>
+		</form>
+	</Modal>
+{/if}

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	interface Props {
+		isCollapsed: boolean;
+		onClick: () => void;
+		classNames: string;
+	}
+
+	let { isCollapsed, classNames, onClick }: Props = $props();
+</script>
+
+<button
+	onclick={onClick}
+	title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+	class="{classNames} group flex h-16 w-6 flex-col items-center justify-center -space-y-1 outline-none *:h-3 *:w-1 *:rounded-full *:hover:bg-gray-400 dark:*:hover:bg-gray-400 max-md:hidden {!isCollapsed
+		? '*:bg-gray-300/70 dark:*:bg-gray-600'
+		: '*:bg-gray-300/70 dark:*:bg-gray-600'}"
+	name="sidebar-toggle"
+	aria-label="Toggle sidebar navigation"
+>
+	<div class={!isCollapsed ? "group-hover:rotate-[20deg]" : "group-hover:-rotate-[20deg]"}></div>
+	<div class={!isCollapsed ? "group-hover:-rotate-[20deg]" : "group-hover:rotate-[20deg]"}></div>
+</button>

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

@@ -0,0 +1,44 @@
+<script lang="ts">
+	interface Props {
+		label?: string;
+		position?: "top" | "bottom" | "left" | "right";
+		TooltipClassNames?: string;
+		children?: import("svelte").Snippet;
+	}
+
+	let { label = "", position = "bottom", TooltipClassNames = "", children }: Props = $props();
+
+	const positionClasses = {
+		top: "bottom-full mb-2",
+		bottom: "top-full mt-2",
+		left: "right-full mr-2 top-1/2 -translate-y-1/2",
+		right: "left-full ml-2 top-1/2 -translate-y-1/2",
+	};
+</script>
+
+<div class="group/tooltip inline-block md:relative">
+	{@render children?.()}
+
+	<div
+		class="
+		invisible
+		absolute
+		z-10
+		w-64
+		whitespace-normal
+		rounded-md
+		bg-black
+		p-2
+		text-center
+		text-white
+		group-hover/tooltip:visible
+		group-active/tooltip:visible
+		max-sm:left-1/2
+		max-sm:-translate-x-1/2
+		{positionClasses[position]}
+		{TooltipClassNames}
+	  "
+	>
+		{label}
+	</div>
+</div>