ruflo 3.5.1 → 3.5.3

package/src/ruvocal/src/hooks.server.ts

@@ -0,0 +1,32 @@
+import { building } from "$app/environment";
+import type { Handle, HandleServerError, ServerInit, HandleFetch } from "@sveltejs/kit";
+import { initServer } from "$lib/server/hooks/init";
+import { handleRequest } from "$lib/server/hooks/handle";
+import { handleServerError } from "$lib/server/hooks/error";
+import { handleFetchRequest } from "$lib/server/hooks/fetch";
+
+export const init: ServerInit = async () => {
+	if (building) return;
+	return initServer();
+};
+
+export const handle: Handle = async (input) => {
+	if (building) {
+		// During static build, still replace %gaId% placeholder with empty string
+		// to prevent the GA script from loading with an invalid ID
+		return input.resolve(input.event, {
+			transformPageChunk: ({ html }) => html.replace("%gaId%", ""),
+		});
+	}
+	return handleRequest(input);
+};
+
+export const handleError: HandleServerError = async (input) => {
+	if (building) throw input.error;
+	return handleServerError(input);
+};
+
+export const handleFetch: HandleFetch = async (input) => {
+	if (building) return input.fetch(input.request);
+	return handleFetchRequest(input);
+};

package/src/ruvocal/src/hooks.ts

@@ -0,0 +1,6 @@
+import { publicConfigTransporter } from "$lib/utils/PublicConfig.svelte";
+import type { Transport } from "@sveltejs/kit";
+
+export const transport: Transport = {
+	PublicConfig: publicConfigTransporter,
+};

package/src/ruvocal/src/lib/APIClient.ts

@@ -0,0 +1,148 @@
+import { base } from "$app/paths";
+import { browser } from "$app/environment";
+import superjson from "superjson";
+import ObjectId from "bson-objectid";
+
+superjson.registerCustom<ObjectId, string>(
+	{
+		isApplicable: (value): value is ObjectId => {
+			if (typeof value !== "string" && ObjectId.isValid(value)) {
+				const str = value.toString();
+				return /^[0-9a-fA-F]{24}$/.test(str);
+			}
+			return false;
+		},
+		serialize: (value) => value.toString(),
+		deserialize: (value) => new ObjectId(value),
+	},
+	"ObjectId"
+);
+
+type FetchFn = typeof globalThis.fetch;
+
+interface ApiResponse<T = unknown> {
+	data: T | null;
+	error: unknown;
+	status: number;
+}
+
+async function apiCall<T = unknown>(
+	fetcher: FetchFn,
+	url: string,
+	method: string,
+	body?: unknown,
+	query?: Record<string, string | number | undefined>
+): Promise<ApiResponse<T>> {
+	const u = new URL(url);
+	if (query) {
+		for (const [k, v] of Object.entries(query)) {
+			if (v !== undefined && v !== null) {
+				u.searchParams.set(k, String(v));
+			}
+		}
+	}
+
+	const init: RequestInit = { method };
+	if (body !== undefined && body !== null) {
+		init.headers = { "Content-Type": "application/json" };
+		init.body = JSON.stringify(body);
+	}
+
+	const res = await fetcher(u.toString(), init);
+	if (!res.ok) {
+		let errorBody: unknown;
+		try {
+			errorBody = await res.json();
+		} catch {
+			errorBody = await res.text().catch(() => res.statusText);
+		}
+		return { data: null, error: errorBody, status: res.status };
+	}
+
+	// Handle empty responses (e.g. POST /user/settings returns empty body)
+	const text = await res.text();
+	if (!text) {
+		return { data: null, error: null, status: res.status };
+	}
+
+	return { data: text as unknown as T, error: null, status: res.status };
+}
+
+function endpoint(fetcher: FetchFn, baseUrl: string) {
+	return {
+		get(opts?: { query?: Record<string, string | number | undefined> }) {
+			return apiCall(fetcher, baseUrl, "GET", undefined, opts?.query);
+		},
+		post(body?: unknown) {
+			return apiCall(fetcher, baseUrl, "POST", body);
+		},
+		patch(body?: unknown) {
+			return apiCall(fetcher, baseUrl, "PATCH", body);
+		},
+		delete() {
+			return apiCall(fetcher, baseUrl, "DELETE");
+		},
+	};
+}
+
+export function useAPIClient({
+	fetch: customFetch,
+	origin,
+}: {
+	fetch?: FetchFn;
+	origin?: string;
+} = {}) {
+	const fetcher = customFetch ?? globalThis.fetch;
+	const baseUrl = browser
+		? `${window.location.origin}${base}/api/v2`
+		: `${origin ?? `http://localhost:5173`}${base}/api/v2`;
+
+	return {
+		conversations: Object.assign(
+			// client.conversations({ id: "..." }) — returns endpoint for /conversations/:id
+			(params: { id: string }) => ({
+				...endpoint(fetcher, `${baseUrl}/conversations/${params.id}`),
+				message: (msgParams: { messageId: string }) =>
+					endpoint(fetcher, `${baseUrl}/conversations/${params.id}/message/${msgParams.messageId}`),
+			}),
+			// client.conversations.get(), .delete()
+			{
+				...endpoint(fetcher, `${baseUrl}/conversations`),
+				"import-share": endpoint(fetcher, `${baseUrl}/conversations/import-share`),
+			}
+		),
+		user: {
+			...endpoint(fetcher, `${baseUrl}/user`),
+			settings: endpoint(fetcher, `${baseUrl}/user/settings`),
+			reports: endpoint(fetcher, `${baseUrl}/user/reports`),
+			"billing-orgs": endpoint(fetcher, `${baseUrl}/user/billing-orgs`),
+		},
+		models: {
+			...endpoint(fetcher, `${baseUrl}/models`),
+			old: endpoint(fetcher, `${baseUrl}/models/old`),
+			refresh: endpoint(fetcher, `${baseUrl}/models/refresh`),
+		},
+		"public-config": endpoint(fetcher, `${baseUrl}/public-config`),
+		"feature-flags": endpoint(fetcher, `${baseUrl}/feature-flags`),
+		debug: {
+			config: endpoint(fetcher, `${baseUrl}/debug/config`),
+			refresh: endpoint(fetcher, `${baseUrl}/debug/refresh`),
+		},
+		export: endpoint(fetcher, `${baseUrl}/export`),
+	};
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function handleResponse(response: ApiResponse<any>): any {
+	if (response.error) {
+		throw new Error(JSON.stringify(response.error));
+	}
+
+	if (response.data === null) {
+		return null;
+	}
+
+	return superjson.parse(
+		typeof response.data === "string" ? response.data : JSON.stringify(response.data)
+	);
+}

package/src/ruvocal/src/lib/actions/clickOutside.ts

@@ -0,0 +1,18 @@
+export function clickOutside(element: HTMLElement, callbackFunction: () => void) {
+	function onClick(event: MouseEvent) {
+		if (!element.contains(event.target as Node)) {
+			callbackFunction();
+		}
+	}
+
+	document.body.addEventListener("click", onClick);
+
+	return {
+		update(newCallbackFunction: () => void) {
+			callbackFunction = newCallbackFunction;
+		},
+		destroy() {
+			document.body.removeEventListener("click", onClick);
+		},
+	};
+}

package/src/ruvocal/src/lib/actions/snapScrollToBottom.ts

@@ -0,0 +1,346 @@
+import { navigating } from "$app/state";
+import { tick } from "svelte";
+
+// Threshold to determine if user is "at bottom" - larger value prevents false detachment
+const BOTTOM_THRESHOLD = 50;
+const USER_SCROLL_DEBOUNCE_MS = 150;
+const PROGRAMMATIC_SCROLL_GRACE_MS = 100;
+const TOUCH_DETACH_THRESHOLD_PX = 10;
+
+interface ScrollDependency {
+	signal: unknown;
+	forceReattach?: number;
+}
+
+type MaybeScrollDependency = ScrollDependency | unknown;
+
+const getForceReattach = (value: MaybeScrollDependency): number => {
+	if (typeof value === "object" && value !== null && "forceReattach" in value) {
+		return (value as ScrollDependency).forceReattach ?? 0;
+	}
+	return 0;
+};
+
+/**
+ * Auto-scroll action that snaps to bottom while respecting user scroll intent.
+ *
+ * Key behaviors:
+ * 1. Uses wheel/touch events to detect actual user intent
+ * 2. Uses IntersectionObserver on a sentinel element to reliably detect "at bottom" state
+ * 3. Larger threshold to prevent edge-case false detachments
+ *
+ * @param node element to snap scroll to bottom
+ * @param dependency pass in { signal, forceReattach } - signal triggers scroll updates,
+ *                   forceReattach (counter) forces re-attachment when incremented
+ */
+export const snapScrollToBottom = (node: HTMLElement, dependency: MaybeScrollDependency) => {
+	// --- State ----------------------------------------------------------------
+
+	// Track whether user has intentionally scrolled away from bottom
+	let isDetached = false;
+
+	// Track the last forceReattach value to detect changes
+	let lastForceReattach = getForceReattach(dependency);
+
+	// Track if user is actively scrolling (via wheel/touch)
+	let userScrolling = false;
+	let userScrollTimeout: ReturnType<typeof setTimeout> | undefined;
+
+	// Track programmatic scrolls to avoid treating them as user scrolls
+	let isProgrammaticScroll = false;
+	let lastProgrammaticScrollTime = 0;
+
+	// Track previous scroll position to detect scrollbar drags
+	let prevScrollTop = node.scrollTop;
+
+	// Touch handling state
+	let touchStartY = 0;
+
+	// Observers and sentinel
+	let resizeObserver: ResizeObserver | undefined;
+	let intersectionObserver: IntersectionObserver | undefined;
+	let sentinel: HTMLDivElement | undefined;
+
+	// Track content height for early-return optimization during streaming
+	let lastScrollHeight = node.scrollHeight;
+
+	// --- Helpers --------------------------------------------------------------
+
+	const clearUserScrollTimeout = () => {
+		if (userScrollTimeout) {
+			clearTimeout(userScrollTimeout);
+			userScrollTimeout = undefined;
+		}
+	};
+
+	const distanceFromBottom = () => node.scrollHeight - node.scrollTop - node.clientHeight;
+
+	const isAtBottom = () => distanceFromBottom() <= BOTTOM_THRESHOLD;
+
+	const scrollToBottom = () => {
+		isProgrammaticScroll = true;
+		lastProgrammaticScrollTime = Date.now();
+
+		node.scrollTo({ top: node.scrollHeight });
+
+		if (typeof requestAnimationFrame === "function") {
+			requestAnimationFrame(() => {
+				isProgrammaticScroll = false;
+			});
+		} else {
+			isProgrammaticScroll = false;
+		}
+	};
+
+	const settleScrollAfterLayout = async () => {
+		if (typeof requestAnimationFrame !== "function") return;
+
+		const raf = () => new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+
+		await raf();
+		if (!userScrolling && !isDetached) {
+			scrollToBottom();
+		}
+
+		await raf();
+		if (!userScrolling && !isDetached) {
+			scrollToBottom();
+		}
+	};
+
+	const scheduleUserScrollEndCheck = () => {
+		userScrolling = true;
+		clearUserScrollTimeout();
+
+		userScrollTimeout = setTimeout(() => {
+			userScrolling = false;
+
+			// If user scrolled back to bottom, re-attach
+			if (isAtBottom()) {
+				isDetached = false;
+			}
+
+			// Re-trigger scroll if still attached, to catch content that arrived during scrolling
+			if (!isDetached) {
+				scrollToBottom();
+			}
+		}, USER_SCROLL_DEBOUNCE_MS);
+	};
+
+	const createSentinel = () => {
+		sentinel = document.createElement("div");
+		sentinel.style.height = "1px";
+		sentinel.style.width = "100%";
+		sentinel.setAttribute("aria-hidden", "true");
+		sentinel.setAttribute("data-scroll-sentinel", "");
+
+		// Find the content container (first child) and append sentinel there
+		const container = node.firstElementChild;
+		if (container) {
+			container.appendChild(sentinel);
+		} else {
+			node.appendChild(sentinel);
+		}
+	};
+
+	const setupIntersectionObserver = () => {
+		if (typeof IntersectionObserver === "undefined" || !sentinel) return;
+
+		intersectionObserver = new IntersectionObserver(
+			(entries) => {
+				const entry = entries[0];
+
+				// If sentinel is visible and user isn't actively scrolling, we're at bottom
+				if (entry?.isIntersecting && !userScrolling) {
+					isDetached = false;
+					// Immediately scroll to catch up with any content that arrived while detached
+					scrollToBottom();
+				}
+			},
+			{
+				root: node,
+				threshold: 0,
+				rootMargin: `0px 0px ${BOTTOM_THRESHOLD}px 0px`,
+			}
+		);
+
+		intersectionObserver.observe(sentinel);
+	};
+
+	const setupResizeObserver = () => {
+		if (typeof ResizeObserver === "undefined") return;
+
+		const target = node.firstElementChild ?? node;
+		resizeObserver = new ResizeObserver(() => {
+			// Don't auto-scroll if user has detached and we're not navigating
+			if (isDetached && !navigating.to) return;
+			// Don't interrupt active user scrolling
+			if (userScrolling) return;
+
+			scrollToBottom();
+		});
+
+		resizeObserver.observe(target);
+	};
+
+	// --- Action update logic --------------------------------------------------
+
+	const handleForceReattach = async (newDependency: MaybeScrollDependency) => {
+		const forceReattach = getForceReattach(newDependency);
+
+		if (forceReattach > lastForceReattach) {
+			lastForceReattach = forceReattach;
+			isDetached = false;
+			userScrolling = false;
+			clearUserScrollTimeout();
+
+			await tick();
+			scrollToBottom();
+			return true;
+		}
+
+		return false;
+	};
+
+	async function updateScroll(newDependency?: MaybeScrollDependency) {
+		// 1. Explicit force re-attach
+		if (newDependency && (await handleForceReattach(newDependency))) {
+			return;
+		}
+
+		// 2. Don't scroll if user has detached and we're not navigating
+		if (isDetached && !navigating.to) return;
+
+		// 3. Don't scroll if user is actively scrolling
+		if (userScrolling) return;
+
+		// 4. Early return if already at bottom and no content change (perf optimization for streaming)
+		const currentHeight = node.scrollHeight;
+		if (isAtBottom() && currentHeight === lastScrollHeight) {
+			return;
+		}
+		lastScrollHeight = currentHeight;
+
+		// 5. Wait for DOM to update, then scroll and settle after layout shifts
+		await tick();
+		scrollToBottom();
+		await settleScrollAfterLayout();
+	}
+
+	// --- Event handlers -------------------------------------------------------
+
+	// Detect user scroll intent via wheel events (mouse/trackpad)
+	const handleWheel = (event: WheelEvent) => {
+		const { deltaY } = event;
+
+		// User is scrolling up - detach
+		if (deltaY < 0) {
+			isDetached = true;
+		}
+
+		// User is scrolling down - check for re-attachment immediately
+		// This ensures fast re-attachment when user scrolls to bottom during fast generation
+		if (deltaY > 0 && isAtBottom()) {
+			isDetached = false;
+			userScrolling = false;
+			clearUserScrollTimeout();
+			scrollToBottom();
+			return;
+		}
+
+		scheduleUserScrollEndCheck();
+	};
+
+	// Detect user scroll intent via touch events (mobile)
+	const handleTouchStart = (event: TouchEvent) => {
+		touchStartY = event.touches[0]?.clientY ?? 0;
+	};
+
+	const handleTouchMove = (event: TouchEvent) => {
+		const touchY = event.touches[0]?.clientY ?? 0;
+		const deltaY = touchStartY - touchY;
+
+		// User is scrolling up (finger moving down)
+		if (deltaY < -TOUCH_DETACH_THRESHOLD_PX) {
+			isDetached = true;
+		}
+
+		// User is scrolling down (finger moving up) - check for re-attachment immediately
+		if (deltaY > TOUCH_DETACH_THRESHOLD_PX && isAtBottom()) {
+			isDetached = false;
+			userScrolling = false;
+			clearUserScrollTimeout();
+			scrollToBottom();
+			touchStartY = touchY;
+			return;
+		}
+
+		scheduleUserScrollEndCheck();
+		touchStartY = touchY;
+	};
+
+	// Handle scroll events to detect scrollbar usage and re-attach when at bottom
+	const handleScroll = () => {
+		const now = Date.now();
+		const timeSinceLastProgrammaticScroll = now - lastProgrammaticScrollTime;
+		const inGracePeriod =
+			isProgrammaticScroll || timeSinceLastProgrammaticScroll < PROGRAMMATIC_SCROLL_GRACE_MS;
+
+		// If not from wheel/touch, this is likely a scrollbar drag
+		if (!userScrolling) {
+			const scrollingUp = node.scrollTop < prevScrollTop;
+
+			// Always allow detach (scrolling up) - don't ignore user intent
+			if (scrollingUp) {
+				isDetached = true;
+			}
+
+			// Only re-attach when at bottom if NOT in grace period
+			// (avoids false re-attach from content resize pushing scroll position)
+			if (!inGracePeriod && isAtBottom()) {
+				isDetached = false;
+				// Immediately scroll to catch up with any content that arrived while detached
+				scrollToBottom();
+			}
+		}
+
+		prevScrollTop = node.scrollTop;
+	};
+
+	// --- Setup ----------------------------------------------------------------
+
+	node.addEventListener("wheel", handleWheel, { passive: true });
+	node.addEventListener("touchstart", handleTouchStart, { passive: true });
+	node.addEventListener("touchmove", handleTouchMove, { passive: true });
+	node.addEventListener("scroll", handleScroll, { passive: true });
+
+	createSentinel();
+	setupIntersectionObserver();
+	setupResizeObserver();
+
+	// Initial scroll if we have content
+	if (dependency) {
+		void (async () => {
+			await tick();
+			scrollToBottom();
+		})();
+	}
+
+	// --- Cleanup --------------------------------------------------------------
+
+	return {
+		update: updateScroll,
+		destroy: () => {
+			clearUserScrollTimeout();
+
+			node.removeEventListener("wheel", handleWheel);
+			node.removeEventListener("touchstart", handleTouchStart);
+			node.removeEventListener("touchmove", handleTouchMove);
+			node.removeEventListener("scroll", handleScroll);
+
+			resizeObserver?.disconnect();
+			intersectionObserver?.disconnect();
+			sentinel?.remove();
+		},
+	};
+};

package/src/ruvocal/src/lib/buildPrompt.ts

@@ -0,0 +1,33 @@
+import type { EndpointParameters } from "./server/endpoints/endpoints";
+import type { BackendModel } from "./server/models";
+
+type buildPromptOptions = Pick<EndpointParameters, "messages" | "preprompt"> & {
+	model: BackendModel;
+};
+
+export async function buildPrompt({
+	messages,
+	model,
+	preprompt,
+}: buildPromptOptions): Promise<string> {
+	const filteredMessages = messages;
+
+	if (filteredMessages[0].from === "system" && preprompt) {
+		filteredMessages[0].content = preprompt;
+	}
+
+	const prompt = model
+		.chatPromptRender({
+			messages: filteredMessages.map((m) => ({
+				...m,
+				role: m.from,
+			})),
+			preprompt,
+		})
+		// Not super precise, but it's truncated in the model's backend anyway
+		.split(" ")
+		.slice(-(model.parameters?.truncate ?? 0))
+		.join(" ");
+
+	return prompt;
+}

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

@@ -0,0 +1,20 @@
+<script lang="ts">
+	interface Props {
+		title?: string;
+		classNames?: string;
+		children?: import("svelte").Snippet;
+	}
+
+	let { title = "", classNames = "", children }: Props = $props();
+</script>
+
+<div class="flex items-center rounded-xl bg-gray-100 p-1 text-sm dark:bg-gray-800 {classNames}">
+	<span
+		class="mr-2 inline-flex items-center rounded-lg bg-gradient-to-br from-gray-300 px-2 py-1 text-xxs font-medium uppercase leading-3 text-gray-700 dark:from-gray-900 dark:text-gray-400"
+		>New</span
+	>
+	{title}
+	<div class="ml-auto shrink-0">
+		{@render children?.()}
+	</div>
+</div>