ruflo 3.5.2 → 3.5.4

package/src/ruvocal/src/routes/+layout.svelte

@@ -0,0 +1,324 @@
+<script lang="ts">
+	import "../styles/main.css";
+
+	import { onDestroy, onMount, untrack } from "svelte";
+	import { goto } from "$app/navigation";
+	import { base } from "$app/paths";
+	import { page } from "$app/state";
+
+	import { error } from "$lib/stores/errors";
+	import { createSettingsStore } from "$lib/stores/settings";
+	import { loading } from "$lib/stores/loading";
+	import { setHapticsEnabled } from "$lib/utils/haptics";
+
+	import Toast from "$lib/components/Toast.svelte";
+	import NavMenu from "$lib/components/NavMenu.svelte";
+	import MobileNav from "$lib/components/MobileNav.svelte";
+	import titleUpdate from "$lib/stores/titleUpdate";
+	import WelcomeModal from "$lib/components/WelcomeModal.svelte";
+	import ExpandNavigation from "$lib/components/ExpandNavigation.svelte";
+	import { setContext } from "svelte";
+	import { handleResponse, useAPIClient } from "$lib/APIClient";
+	import { isAborted } from "$lib/stores/isAborted";
+	import { isPro } from "$lib/stores/isPro";
+	import IconShare from "$lib/components/icons/IconShare.svelte";
+	import { shareModal } from "$lib/stores/shareModal";
+	import BackgroundGenerationPoller from "$lib/components/BackgroundGenerationPoller.svelte";
+	import { requireAuthUser } from "$lib/utils/auth";
+
+	let { data = $bindable(), children } = $props();
+
+	setContext("publicConfig", data.publicConfig);
+
+	const publicConfig = data.publicConfig;
+	const client = useAPIClient();
+
+	let conversations = $state(data.conversations);
+	$effect(() => {
+		data.conversations && untrack(() => (conversations = data.conversations));
+	});
+
+	let isNavCollapsed = $state(false);
+
+	let errorToastTimeout: ReturnType<typeof setTimeout>;
+	let currentError: string | undefined = $state();
+
+	async function onError() {
+		// If a new different error comes, wait for the current error to hide first
+		if ($error && currentError && $error !== currentError) {
+			clearTimeout(errorToastTimeout);
+			currentError = undefined;
+			await new Promise((resolve) => setTimeout(resolve, 300));
+		}
+
+		currentError = $error;
+
+		errorToastTimeout = setTimeout(() => {
+			$error = undefined;
+			currentError = undefined;
+		}, 5000);
+	}
+
+	let canShare = $derived(
+		publicConfig.isHuggingChat &&
+			Boolean(page.params?.id) &&
+			page.route.id?.startsWith("/conversation/")
+	);
+
+	async function deleteConversation(id: string) {
+		client
+			.conversations({ id })
+			.delete()
+			.then(handleResponse)
+			.then(async () => {
+				conversations = conversations.filter((conv) => conv.id !== id);
+
+				if (page.params.id === id) {
+					await goto(`${base}/`, { invalidateAll: true });
+				}
+			})
+			.catch((err) => {
+				console.error(err);
+				$error = String(err);
+			});
+	}
+
+	async function editConversationTitle(id: string, title: string) {
+		client
+			.conversations({ id })
+			.patch({ title })
+			.then(handleResponse)
+			.then(async () => {
+				conversations = conversations.map((conv) => (conv.id === id ? { ...conv, title } : conv));
+			})
+			.catch((err) => {
+				console.error(err);
+				$error = String(err);
+			});
+	}
+
+	function closeWelcomeModal() {
+		if (requireAuthUser()) return;
+		settings.set({ welcomeModalSeen: true });
+	}
+
+	onDestroy(() => {
+		clearTimeout(errorToastTimeout);
+	});
+
+	$effect(() => {
+		if ($error) onError();
+	});
+
+	$effect(() => {
+		if ($titleUpdate) {
+			const convIdx = conversations.findIndex(({ id }) => id === $titleUpdate?.convId);
+
+			if (convIdx != -1) {
+				conversations[convIdx].title = $titleUpdate?.title ?? conversations[convIdx].title;
+			}
+
+			$titleUpdate = null;
+		}
+	});
+
+	const settings = createSettingsStore(data.settings);
+
+	$effect(() => {
+		setHapticsEnabled($settings.hapticsEnabled);
+	});
+
+	onMount(async () => {
+		if (publicConfig.isHuggingChat && data.user?.username) {
+			fetch(`https://huggingface.co/api/users/${data.user.username}/overview`)
+				.then((res) => res.json())
+				.then((userData) => {
+					isPro.set(userData.isPro ?? false);
+				})
+				.catch(() => {
+					// Keep isPro as null on error - don't show any badge if status is unknown
+				});
+		}
+
+		if (page.url.searchParams.has("model")) {
+			await settings
+				.instantSet({
+					activeModel: page.url.searchParams.get("model") ?? $settings.activeModel,
+				})
+				.then(async () => {
+					const query = new URLSearchParams(page.url.searchParams.toString());
+					query.delete("model");
+					await goto(`${base}/?${query.toString()}`, {
+						invalidateAll: true,
+					});
+				});
+		}
+
+		if (page.url.searchParams.has("token")) {
+			const token = page.url.searchParams.get("token");
+
+			await fetch(`${base}/api/user/validate-token`, {
+				method: "POST",
+				body: JSON.stringify({ token }),
+			}).then(() => {
+				goto(`${base}/`, { invalidateAll: true });
+			});
+		}
+
+		// Global keyboard shortcut: New Chat (Ctrl/Cmd + Shift + O)
+		const onKeydown = (e: KeyboardEvent) => {
+			// Ignore when a modal has focus (app is inert)
+			const appEl = document.getElementById("app");
+			if (appEl?.hasAttribute("inert")) return;
+
+			const oPressed = e.key?.toLowerCase() === "o";
+			const metaOrCtrl = e.metaKey || e.ctrlKey;
+			if (oPressed && e.shiftKey && metaOrCtrl) {
+				e.preventDefault();
+				isAborted.set(true);
+				if (requireAuthUser()) return;
+				goto(`${base}/`, { invalidateAll: true });
+			}
+		};
+
+		window.addEventListener("keydown", onKeydown, { capture: true });
+		onDestroy(() => window.removeEventListener("keydown", onKeydown, { capture: true }));
+	});
+
+	let mobileNavTitle = $derived(
+		["/models", "/privacy"].includes(page.route.id ?? "")
+			? ""
+			: conversations.find((conv) => conv.id === page.params.id)?.title
+	);
+
+	// Show the welcome modal once on first app load
+	let showWelcome = $derived(
+		!$settings.welcomeModalSeen &&
+			!(page.data.shared === true && page.route.id?.startsWith("/conversation/"))
+	);
+</script>
+
+<svelte:head>
+	<title>{publicConfig.PUBLIC_APP_NAME} - Chat with AI models</title>
+	<meta name="description" content={publicConfig.PUBLIC_APP_DESCRIPTION} />
+	<meta name="twitter:site" content="@huggingface" />
+
+	<!-- use those meta tags everywhere except on special listing pages -->
+	<!-- feel free to refacto if there's a better way -->
+	{#if !page.url.pathname.includes("/models/")}
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta name="twitter:title" content="{publicConfig.PUBLIC_APP_NAME} - Chat with AI models" />
+		<meta name="twitter:description" content={publicConfig.PUBLIC_APP_DESCRIPTION} />
+		<meta
+			name="twitter:image"
+			content="{publicConfig.assetPath}/thumbnail.png"
+		/>
+		<meta name="twitter:image:alt" content="{publicConfig.PUBLIC_APP_NAME} preview" />
+		<meta property="og:title" content="{publicConfig.PUBLIC_APP_NAME} - Chat with AI models" />
+		<meta property="og:type" content="website" />
+		<meta property="og:url" content="{base || '/'}" />
+		<meta property="og:image" content="{publicConfig.assetPath}/thumbnail.png" />
+		<meta property="og:description" content={publicConfig.PUBLIC_APP_DESCRIPTION} />
+		<meta property="og:site_name" content={publicConfig.PUBLIC_APP_NAME} />
+		<meta property="og:locale" content="en_US" />
+	{/if}
+	<link rel="icon" href="{publicConfig.assetPath}/icon.svg" type="image/svg+xml" />
+	{#if !publicConfig.isHuggingChat || publicConfig.PUBLIC_ORIGIN}
+		<link
+			rel="icon"
+			href="{publicConfig.assetPath}/favicon.svg"
+			type="image/svg+xml"
+			media="(prefers-color-scheme: light)"
+		/>
+		<link
+			rel="icon"
+			href="{publicConfig.assetPath}/favicon-dark.svg"
+			type="image/svg+xml"
+			media="(prefers-color-scheme: dark)"
+		/>
+	{:else}
+		<link rel="icon" href="{publicConfig.assetPath}/favicon-dev.svg" type="image/svg+xml" />
+	{/if}
+	<link rel="apple-touch-icon" href="{publicConfig.assetPath}/apple-touch-icon.png" />
+	<link rel="manifest" href="{publicConfig.assetPath}/manifest.json" />
+
+	{#if publicConfig.PUBLIC_PLAUSIBLE_SCRIPT_URL}
+		<script async src={publicConfig.PUBLIC_PLAUSIBLE_SCRIPT_URL}></script>
+	{/if}
+
+	{#if publicConfig.PUBLIC_APPLE_APP_ID}
+		<meta name="apple-itunes-app" content={`app-id=${publicConfig.PUBLIC_APPLE_APP_ID}`} />
+	{/if}
+</svelte:head>
+
+{#if showWelcome}
+	<WelcomeModal close={closeWelcomeModal} />
+{/if}
+
+<BackgroundGenerationPoller />
+
+<div
+	class="fixed grid h-dvh w-screen grid-cols-1 grid-rows-[auto,1fr] overflow-hidden text-smd {!isNavCollapsed
+		? 'md:grid-cols-[290px,1fr]'
+		: 'md:grid-cols-[0px,1fr]'} transition-[300ms] [transition-property:grid-template-columns] dark:text-gray-300 md:grid-rows-[1fr]"
+>
+	<ExpandNavigation
+		isCollapsed={isNavCollapsed}
+		onClick={() => (isNavCollapsed = !isNavCollapsed)}
+		classNames="absolute inset-y-0 z-10 my-auto {!isNavCollapsed
+			? 'left-[290px]'
+			: 'left-0'} *:transition-transform"
+	/>
+
+	{#if canShare}
+		<button
+			type="button"
+			class="hidden size-8 items-center justify-center gap-2 rounded-xl border border-gray-200 bg-white/90 text-sm font-medium text-gray-700 shadow-sm hover:bg-white/60 hover:text-gray-500 dark:border-gray-700 dark:bg-gray-800/80 dark:text-gray-200 dark:hover:bg-gray-700 md:absolute md:right-6 md:top-5 md:flex
+				{$loading ? 'cursor-not-allowed opacity-40' : ''}"
+			onclick={() => shareModal.open()}
+			aria-label="Share conversation"
+			disabled={$loading}
+		>
+			<IconShare />
+		</button>
+	{/if}
+
+	<MobileNav title={mobileNavTitle}>
+		<NavMenu
+			{conversations}
+			user={data.user}
+			ondeleteConversation={(id) => deleteConversation(id)}
+			oneditConversationTitle={(payload) => editConversationTitle(payload.id, payload.title)}
+		/>
+	</MobileNav>
+	<nav
+		class="grid max-h-dvh grid-cols-1 grid-rows-[auto,1fr,auto] overflow-hidden *:w-[290px] max-md:hidden"
+	>
+		<NavMenu
+			{conversations}
+			user={data.user}
+			ondeleteConversation={(id) => deleteConversation(id)}
+			oneditConversationTitle={(payload) => editConversationTitle(payload.id, payload.title)}
+		/>
+	</nav>
+	{#if currentError}
+		<Toast message={currentError} />
+	{/if}
+	{@render children?.()}
+
+	{#if publicConfig.PUBLIC_PLAUSIBLE_SCRIPT_URL}
+		<script>
+			(window.plausible =
+				window.plausible ||
+				function () {
+					(plausible.q = plausible.q || []).push(arguments);
+				}),
+				(plausible.init =
+					plausible.init ||
+					function (i) {
+						plausible.o = i || {};
+					});
+			plausible.init();
+		</script>
+	{/if}
+</div>

package/src/ruvocal/src/routes/+layout.ts

@@ -0,0 +1,91 @@
+import { UrlDependency } from "$lib/types/UrlDependency";
+import type { ConvSidebar } from "$lib/types/ConvSidebar";
+import { useAPIClient, handleResponse } from "$lib/APIClient";
+import { getConfigManager } from "$lib/utils/PublicConfig.svelte";
+import type { GETModelsResponse, FeatureFlags } from "$lib/server/api/types";
+
+interface ConversationListItem {
+	_id: { toString(): string };
+	title: string;
+	updatedAt: Date | string;
+	model?: string;
+}
+
+interface UserInfo {
+	id: string;
+	username?: string;
+	avatarUrl?: string;
+	email?: string;
+	isAdmin: boolean;
+	isEarlyAccess: boolean;
+}
+
+interface SettingsResponse {
+	welcomeModalSeen: boolean;
+	welcomeModalSeenAt: Date | null;
+	shareConversationsWithModelAuthors: boolean;
+	activeModel: string;
+	streamingMode: "raw" | "smooth";
+	directPaste: boolean;
+	hapticsEnabled: boolean;
+	customPrompts: Record<string, string>;
+	multimodalOverrides: Record<string, boolean>;
+	toolsOverrides: Record<string, boolean>;
+	hidePromptExamples: Record<string, boolean>;
+	providerOverrides: Record<string, string>;
+	billingOrganization?: string;
+}
+
+export const load = async ({ depends, fetch, url }) => {
+	depends(UrlDependency.ConversationList);
+
+	const client = useAPIClient({ fetch, origin: url.origin });
+
+	const [settings, models, user, publicConfig, featureFlags, conversationsData] =
+		(await Promise.all([
+			client.user.settings.get().then(handleResponse),
+			client.models.get().then(handleResponse),
+			client.user.get().then(handleResponse),
+			client["public-config"].get().then(handleResponse),
+			client["feature-flags"].get().then(handleResponse),
+			client.conversations.get({ query: { p: 0 } }).then(handleResponse),
+		])) as [
+			SettingsResponse,
+			GETModelsResponse,
+			UserInfo | null,
+			Record<string, unknown>,
+			FeatureFlags,
+			{ conversations: ConversationListItem[]; hasMore: boolean },
+		];
+
+	const defaultModel = models[0];
+
+	const { conversations: rawConversations } = conversationsData;
+	const conversations = rawConversations.map((conv: ConversationListItem) => {
+		const trimmedTitle = conv.title.trim();
+
+		conv.title = trimmedTitle;
+
+		return {
+			id: conv._id.toString(),
+			title: conv.title,
+			model: conv.model ?? defaultModel?.id,
+			updatedAt: new Date(conv.updatedAt),
+		} satisfies ConvSidebar;
+	});
+
+	return {
+		conversations,
+		models,
+		oldModels: [],
+		user,
+		settings: {
+			...settings,
+			welcomeModalSeenAt: settings.welcomeModalSeenAt
+				? new Date(settings.welcomeModalSeenAt)
+				: null,
+		},
+		publicConfig: getConfigManager(publicConfig as Record<`PUBLIC_${string}`, string>),
+		...featureFlags,
+	};
+};

package/src/ruvocal/src/routes/+page.svelte

@@ -0,0 +1,168 @@
+<script lang="ts">
+	import { goto, replaceState } from "$app/navigation";
+	import { base } from "$app/paths";
+	import { page } from "$app/state";
+	import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
+
+	const publicConfig = usePublicConfig();
+
+	import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
+	import { ERROR_MESSAGES, error } from "$lib/stores/errors";
+	import { pendingMessage } from "$lib/stores/pendingMessage";
+	import { useSettingsStore } from "$lib/stores/settings.js";
+	import { findCurrentModel } from "$lib/utils/models";
+	import { sanitizeUrlParam } from "$lib/utils/urlParams";
+	import { onMount, tick } from "svelte";
+	import { loading } from "$lib/stores/loading.js";
+	import { loadAttachmentsFromUrls } from "$lib/utils/loadAttachmentsFromUrls";
+	import { requireAuthUser } from "$lib/utils/auth";
+
+	let { data } = $props();
+
+	let hasModels = $derived(Boolean(data.models?.length));
+	let files: File[] = $state([]);
+	let draft = $state("");
+
+	const settings = useSettingsStore();
+
+	async function createConversation(message: string) {
+		try {
+			$loading = true;
+
+			// check if $settings.activeModel is a valid model
+			// else check if it's an assistant, and use that model
+			// else use the first model
+
+			const validModels = data.models.map((model) => model.id);
+
+			let model;
+			if (validModels.includes($settings.activeModel)) {
+				model = $settings.activeModel;
+			} else {
+				model = data.models[0].id;
+			}
+			const res = await fetch(`${base}/conversation`, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					model,
+					preprompt: $settings.customPrompts[$settings.activeModel],
+				}),
+			});
+
+			if (!res.ok) {
+				let errorMessage = ERROR_MESSAGES.default;
+				try {
+					const json = await res.json();
+					errorMessage = json.message || errorMessage;
+				} catch {
+					// Response wasn't JSON (e.g., HTML error page)
+					if (res.status === 401) {
+						errorMessage = "Authentication required";
+					}
+				}
+				error.set(errorMessage);
+				console.error("Error while creating conversation: ", errorMessage);
+				return;
+			}
+
+			const { conversationId } = await res.json();
+
+			// Ugly hack to use a store as temp storage, feel free to improve ^^
+			pendingMessage.set({
+				content: message,
+				files,
+			});
+
+			// invalidateAll to update list of conversations
+			await goto(`${base}/conversation/${conversationId}`, { invalidateAll: true });
+		} catch (err) {
+			error.set((err as Error).message || ERROR_MESSAGES.default);
+			console.error(err);
+		} finally {
+			$loading = false;
+		}
+	}
+
+	onMount(async () => {
+		try {
+			// Check if auth is required before processing any query params
+			const hasQ = page.url.searchParams.has("q");
+			const hasPrompt = page.url.searchParams.has("prompt");
+			const hasAttachments = page.url.searchParams.has("attachments");
+
+			if ((hasQ || hasPrompt || hasAttachments) && requireAuthUser()) {
+				return; // Redirecting to login, will return to this URL after
+			}
+
+			// Handle attachments parameter first
+			if (hasAttachments) {
+				const result = await loadAttachmentsFromUrls(page.url.searchParams);
+				files = result.files;
+
+				// Show errors if any
+				if (result.errors.length > 0) {
+					console.error("Failed to load some attachments:", result.errors);
+					error.set(
+						`Failed to load ${result.errors.length} attachment(s). Check console for details.`
+					);
+				}
+
+				// Clean up URL
+				const url = new URL(page.url);
+				url.searchParams.delete("attachments");
+				history.replaceState({}, "", url);
+			}
+
+			const query = sanitizeUrlParam(page.url.searchParams.get("q"));
+			if (query) {
+				void createConversation(query);
+				const url = new URL(page.url);
+				url.searchParams.delete("q");
+				tick().then(() => {
+					replaceState(url, page.state);
+				});
+				return;
+			}
+
+			const promptQuery = sanitizeUrlParam(page.url.searchParams.get("prompt"));
+			if (promptQuery && !draft) {
+				draft = promptQuery;
+				const url = new URL(page.url);
+				url.searchParams.delete("prompt");
+				tick().then(() => {
+					replaceState(url, page.state);
+				});
+			}
+		} catch (err) {
+			console.error("Failed to process URL parameters:", err);
+		}
+	});
+
+	let currentModel = $derived(findCurrentModel(data.models, data.oldModels, $settings.activeModel));
+</script>
+
+<svelte:head>
+	<title>{publicConfig.PUBLIC_APP_NAME}</title>
+</svelte:head>
+
+{#if hasModels}
+	<ChatWindow
+		onmessage={(message) => createConversation(message)}
+		loading={$loading}
+		{currentModel}
+		models={data.models}
+		bind:files
+		bind:draft
+	/>
+{:else}
+	<div class="mx-auto my-20 max-w-xl rounded-xl border p-6 text-center dark:border-gray-700">
+		<h2 class="mb-2 text-xl font-semibold">No models available</h2>
+		<p class="text-gray-600 dark:text-gray-300">
+			No chat models are configured. Set `OPENAI_BASE_URL` and ensure the server can reach the
+			endpoint, then reload. If unset, the app defaults to the Hugging Face router.
+		</p>
+	</div>
+{/if}

package/src/ruvocal/src/routes/.well-known/oauth-cimd/+server.ts

@@ -0,0 +1,37 @@
+import { base } from "$app/paths";
+import { OIDConfig } from "$lib/server/auth";
+import { config } from "$lib/server/config";
+
+/**
+ * See https://datatracker.ietf.org/doc/draft-ietf-oauth-client-id-metadata-document/
+ */
+export const GET = ({ url }) => {
+	if (!OIDConfig.CLIENT_ID) {
+		return new Response("Client ID not found", { status: 404 });
+	}
+	if (OIDConfig.CLIENT_ID !== "__CIMD__") {
+		return new Response(
+			`Client ID is manually set to something other than '__CIMD__': ${OIDConfig.CLIENT_ID}`,
+			{
+				status: 404,
+			}
+		);
+	}
+	return new Response(
+		JSON.stringify({
+			client_id: new URL(url, config.PUBLIC_ORIGIN || url.origin).toString(),
+			client_name: config.PUBLIC_APP_NAME,
+			client_uri: `${config.PUBLIC_ORIGIN || url.origin}${base}`,
+			redirect_uris: [
+				new URL(`${base}/login/callback`, config.PUBLIC_ORIGIN || url.origin).toString(),
+			],
+			token_endpoint_auth_method: "none",
+			scopes: OIDConfig.SCOPES,
+		}),
+		{
+			headers: {
+				"Content-Type": "application/json",
+			},
+		}
+	);
+};

package/src/ruvocal/src/routes/__debug/openai/+server.ts

@@ -0,0 +1,21 @@
+import { json } from "@sveltejs/kit";
+import { config } from "$lib/server/config";
+const DEFAULT_OPENAI_BASE = "https://router.huggingface.co/v1";
+
+export async function GET() {
+	const base = (config.OPENAI_BASE_URL || DEFAULT_OPENAI_BASE).replace(/\/$/, "");
+	try {
+		const res = await fetch(`${base}/models`);
+		const text = await res.text();
+		let length: number | null = null;
+		try {
+			const parsed = JSON.parse(text);
+			length = Array.isArray(parsed?.data) ? parsed.data.length : null;
+		} catch (_err) {
+			length = null; // ignore parse errors
+		}
+		return json({ base, status: res.status, ok: res.ok, length, sample: text.slice(0, 1000) });
+	} catch (e) {
+		return json({ base, error: String(e) });
+	}
+}