@aigentic/ruflo 3.7.0-alpha.69

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

@@ -0,0 +1,233 @@
+<script lang="ts">
+	import type { PageData } from "./$types";
+	import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
+
+	import { base } from "$app/paths";
+	import { page } from "$app/state";
+
+	import CarbonHelpFilled from "~icons/carbon/help-filled";
+	import LucideHammer from "~icons/lucide/hammer";
+	import LucideImage from "~icons/lucide/image";
+	import LucideSettings from "~icons/lucide/settings";
+	import IconFast from "$lib/components/icons/IconFast.svelte";
+	import IconCheap from "$lib/components/icons/IconCheap.svelte";
+	import { PROVIDERS_HUB_ORGS } from "@huggingface/inference";
+	import { useSettingsStore } from "$lib/stores/settings";
+	import { goto } from "$app/navigation";
+	interface Props {
+		data: PageData;
+	}
+
+	let { data }: Props = $props();
+
+	const settings = useSettingsStore();
+
+	const publicConfig = usePublicConfig();
+
+	// Local filter state for model search (hyphen/space insensitive)
+	let modelFilter = $state("");
+	const normalize = (s: string) => s.toLowerCase().replace(/[^a-z0-9]+/g, " ");
+	let queryTokens = $derived(normalize(modelFilter).trim().split(/\s+/).filter(Boolean));
+
+	// Filtered models list
+	let filteredModels = $derived(
+		data.models
+			.filter((el) => !el.unlisted)
+			.filter((el) => {
+				const haystack = normalize(`${el.id} ${el.name ?? ""} ${el.displayName ?? ""}`);
+				return queryTokens.every((q) => haystack.includes(q));
+			})
+	);
+</script>
+
+<svelte:head>
+	{#if publicConfig.isHuggingChat}
+		<title>{publicConfig.PUBLIC_APP_NAME} - Models</title>
+		<meta property="og:title" content="{publicConfig.PUBLIC_APP_NAME} - Models" />
+		<meta property="og:type" content="website" />
+		<meta
+			property="og:description"
+			content="Browse {publicConfig.PUBLIC_APP_NAME} available models"
+		/>
+		<meta property="og:url" content={page.url.href} />
+		<meta property="og:image" content="{publicConfig.assetPath}/thumbnail.png" />
+		<meta property="og:image:alt" content="{publicConfig.PUBLIC_APP_NAME} preview" />
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta name="twitter:title" content="{publicConfig.PUBLIC_APP_NAME} - Models" />
+		<meta
+			name="twitter:description"
+			content="Browse {publicConfig.PUBLIC_APP_NAME} available models"
+		/>
+		<meta name="twitter:image" content="{publicConfig.assetPath}/thumbnail.png" />
+		<meta name="twitter:image:alt" content="{publicConfig.PUBLIC_APP_NAME} preview" />
+	{/if}
+</svelte:head>
+
+<div class="scrollbar-custom h-full overflow-y-auto py-12 max-sm:pt-8 md:py-24">
+	<div class="pt-42 mx-auto flex flex-col px-5 xl:w-[60rem] 2xl:w-[64rem]">
+		<div class="flex items-center">
+			<h1 class="text-xl font-bold sm:text-2xl">Models</h1>
+			{#if publicConfig.isHuggingChat}
+				<a
+					href="https://huggingface.co/docs/inference-providers"
+					class="ml-auto text-gray-500 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300"
+					target="_blank"
+					aria-label="Hub discussion about models"
+				>
+					<CarbonHelpFilled />
+				</a>
+			{/if}
+		</div>
+		<h2 class="text-gray-500">
+			All models available{#if publicConfig.isHuggingChat}&nbsp;via <a
+					target="_blank"
+					href="https://huggingface.co/inference/models"
+					class="underline decoration-gray-300 hover:decoration-gray-500 dark:decoration-gray-600 dark:hover:decoration-gray-500"
+					>Inference Providers</a
+				>{/if}
+		</h2>
+
+		<!-- Filter input -->
+		<input
+			type="search"
+			bind:value={modelFilter}
+			placeholder="Search by name"
+			aria-label="Search models by name or id"
+			class="mt-4 w-full rounded-3xl border border-gray-300 bg-white px-5 py-2 text-[15px]
+				placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300
+				dark:border-gray-700 dark:bg-gray-900 dark:focus:ring-gray-700"
+		/>
+
+		<div class="mt-6 min-h-[50vh]">
+			<div
+				class="overflow-hidden rounded-2xl border border-gray-200/60 bg-white shadow-sm dark:border-gray-800 dark:bg-gray-900"
+			>
+				{#each filteredModels as model, index (model.id)}
+					{@const isActive = model.id === $settings.activeModel}
+					{@const isLast = index === filteredModels.length - 1}
+					<a
+						href="{base}/models/{model.id}"
+						aria-label="Model card for {model.displayName}"
+						class="group flex cursor-pointer items-center gap-2 p-3 sm:gap-4 sm:p-4
+							{isActive
+							? 'bg-gray-50 dark:bg-gray-800'
+							: 'bg-white hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800'}
+							{isLast ? '' : 'border-b border-gray-100 dark:border-gray-800'}"
+					>
+						<!-- Avatar -->
+						<div class="flex-shrink-0">
+							{#if model.logoUrl}
+								<img
+									alt={model.displayName}
+									class="size-8 rounded-lg border border-gray-100 bg-gray-50 object-cover dark:border-gray-700 dark:bg-gray-100 sm:size-10"
+									src={model.logoUrl}
+								/>
+							{:else}
+								<div
+									class="h-10 w-10 rounded-lg border border-gray-100 bg-gray-200 dark:border-gray-700 dark:bg-gray-700"
+									aria-hidden="true"
+								></div>
+							{/if}
+						</div>
+
+						<!-- Content -->
+						<div class="min-w-0 flex-1">
+							<div class="flex items-center gap-2">
+								<h3
+									class="truncate font-medium text-gray-900 dark:text-gray-200 max-sm:text-xs"
+									class:font-bold={isActive}
+									class:dark:text-white={isActive}
+								>
+									{model.displayName}
+								</h3>
+								{#if index === 0 && model.isRouter && !isActive}
+									<span
+										class="rounded border border-gray-200 px-1.5 py-0.5 text-[10px] font-semibold uppercase text-gray-500 dark:border-gray-700 dark:text-gray-400"
+									>
+										Default
+									</span>
+								{/if}
+							</div>
+							<p class="truncate pr-4 text-xs text-gray-500 dark:text-gray-400 sm:text-[13px]">
+								{model.isRouter
+									? "Routes your messages to the best model for your request."
+									: model.description || "-"}
+							</p>
+						</div>
+
+						<!-- Icons and badges -->
+						<div class="flex flex-shrink-0 items-center gap-1.5">
+							{#if publicConfig.isHuggingChat && !model.isRouter && $settings.providerOverrides?.[model.id] && $settings.providerOverrides[model.id] !== "auto"}
+								{@const providerOverride = $settings.providerOverrides[model.id]}
+								{@const hubOrg =
+									PROVIDERS_HUB_ORGS[providerOverride as keyof typeof PROVIDERS_HUB_ORGS]}
+								{#if providerOverride === "fastest"}
+									<div
+										title="Provider: Fastest"
+										class="rounded-md bg-green-50 p-1.5 text-green-600 dark:bg-green-900/20 dark:text-green-400"
+									>
+										<IconFast classNames="size-3 sm:size-3.5" />
+									</div>
+								{:else if providerOverride === "cheapest"}
+									<div
+										title="Provider: Cheapest"
+										class="rounded-md bg-blue-50 p-1.5 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400"
+									>
+										<IconCheap classNames="size-3 sm:size-3.5" />
+									</div>
+								{:else if hubOrg}
+									<div
+										title="Provider: {providerOverride}"
+										class="flex size-[26px] items-center justify-center rounded-md bg-gray-100 p-1 dark:bg-gray-800 sm:size-[30px]"
+									>
+										<img
+											src="https://huggingface.co/api/avatars/{hubOrg}"
+											alt={providerOverride}
+											class="size-full rounded"
+										/>
+									</div>
+								{/if}
+							{/if}
+							{#if $settings.toolsOverrides?.[model.id] ?? (model as { supportsTools?: boolean }).supportsTools}
+								<div
+									title="This model supports tool calling (functions)."
+									class="rounded-md bg-purple-50 p-1.5 text-purple-600 dark:bg-purple-900/20 dark:text-purple-400"
+								>
+									<LucideHammer class="size-3 sm:size-3.5" />
+								</div>
+							{/if}
+							{#if $settings.multimodalOverrides?.[model.id] ?? model.multimodal}
+								<div
+									title="This model is multimodal and supports image inputs natively."
+									class="rounded-md bg-blue-50 p-1.5 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400"
+								>
+									<LucideImage class="size-3 sm:size-3.5" />
+								</div>
+							{/if}
+							<button
+								type="button"
+								title="Model settings"
+								aria-label="Model settings for {model.displayName}"
+								class="rounded-md border border-gray-200 p-1.5 text-gray-500 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700"
+								onclick={(e) => {
+									e.preventDefault();
+									e.stopPropagation();
+									goto(`${base}/settings/${model.id}`);
+								}}
+							>
+								<LucideSettings class="size-3 sm:size-3.5" />
+							</button>
+							{#if isActive}
+								<span
+									class="rounded-full bg-black px-2.5 py-1 text-xs font-bold text-white shadow-md dark:bg-white dark:text-black"
+								>
+									Active
+								</span>
+							{/if}
+						</div>
+					</a>
+				{/each}
+			</div>
+		</div>
+	</div>
+</div>

package/src/ruvocal/src/routes/models/[...model]/+page.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+	import { page } from "$app/state";
+	import { base } from "$app/paths";
+	import { goto, replaceState } from "$app/navigation";
+	import { onMount, tick } from "svelte";
+	import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
+
+	import ChatWindow from "$lib/components/chat/ChatWindow.svelte";
+	import { findCurrentModel } from "$lib/utils/models";
+	import { useSettingsStore } from "$lib/stores/settings";
+	import { ERROR_MESSAGES, error } from "$lib/stores/errors";
+	import { pendingMessage } from "$lib/stores/pendingMessage";
+	import { sanitizeUrlParam } from "$lib/utils/urlParams";
+	import { loadAttachmentsFromUrls } from "$lib/utils/loadAttachmentsFromUrls";
+	import { requireAuthUser } from "$lib/utils/auth";
+
+	let { data } = $props();
+
+	let loading = $state(false);
+	let files: File[] = $state([]);
+	let draft = $state("");
+
+	const settings = useSettingsStore();
+	let modelId = $derived(page.params.model ?? "");
+	const publicConfig = usePublicConfig();
+	let modelPath = $derived(
+		modelId
+			.split("/")
+			.map((segment) => encodeURIComponent(segment))
+			.join("/")
+	);
+
+	async function createConversation(message: string) {
+		try {
+			loading = true;
+
+			const res = await fetch(`${base}/conversation`, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({
+					model: modelId,
+					preprompt: $settings.customPrompts[modelId],
+				}),
+			});
+
+			if (!res.ok) {
+				error.set("Error while creating conversation, try again.");
+				console.error("Error while creating conversation: " + (await res.text()));
+				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(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);
+		}
+
+		settings.instantSet({ activeModel: modelId });
+	});
+</script>
+
+<svelte:head>
+	<title>{modelId} - {publicConfig.PUBLIC_APP_NAME}</title>
+	<meta property="og:title" content="{modelId} - {publicConfig.PUBLIC_APP_NAME}" />
+	<meta property="og:type" content="website" />
+	<meta property="og:description" content="Use {modelId} with {publicConfig.PUBLIC_APP_NAME}" />
+	<meta
+		property="og:image"
+		content="{publicConfig.PUBLIC_ORIGIN || page.url.origin}{base}/models/{modelPath}/thumbnail.png"
+	/>
+	<meta property="og:image:alt" content="{modelId} - {publicConfig.PUBLIC_APP_NAME}" />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="648" />
+	<meta property="og:url" content={page.url.href} />
+	<meta property="og:site_name" content={publicConfig.PUBLIC_APP_NAME} />
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:title" content="{modelId} - {publicConfig.PUBLIC_APP_NAME}" />
+	<meta name="twitter:description" content="Use {modelId} with {publicConfig.PUBLIC_APP_NAME}" />
+	<meta
+		name="twitter:image"
+		content="{publicConfig.PUBLIC_ORIGIN || page.url.origin}{base}/models/{modelPath}/thumbnail.png"
+	/>
+	<meta name="twitter:image:alt" content="{modelId} - {publicConfig.PUBLIC_APP_NAME}" />
+</svelte:head>
+
+<ChatWindow
+	onmessage={(message) => createConversation(message)}
+	{loading}
+	currentModel={findCurrentModel(data.models, data.oldModels, modelId)}
+	models={data.models}
+	bind:files
+	bind:draft
+/>

package/src/ruvocal/src/routes/models/[...model]/+page.ts

@@ -0,0 +1,14 @@
+import { base } from "$app/paths";
+
+export async function load({ params, parent, fetch }) {
+	await fetch(`${base}/api/v2/models/${params.model}/subscribe`, {
+		method: "POST",
+	});
+
+	return {
+		settings: await parent().then((data) => ({
+			...data.settings,
+			activeModel: params.model,
+		})),
+	};
+}

package/src/ruvocal/src/routes/models/[...model]/thumbnail.png/+server.ts

@@ -0,0 +1,64 @@
+import ModelThumbnail from "./ModelThumbnail.svelte";
+import { redirect, type RequestHandler } from "@sveltejs/kit";
+
+import { Resvg } from "@resvg/resvg-js";
+import satori from "satori";
+import { html } from "satori-html";
+
+import InterRegular from "$lib/server/fonts/Inter-Regular.ttf";
+import InterBold from "$lib/server/fonts/Inter-Bold.ttf";
+import { base } from "$app/paths";
+import { models } from "$lib/server/models";
+import { render } from "svelte/server";
+import { config } from "$lib/server/config";
+
+export const GET: RequestHandler = (async ({ params }) => {
+	const model = models.find(({ id }) => id === params.model);
+
+	if (!model || model.unlisted) {
+		redirect(302, `${base}/`);
+	}
+	const renderedComponent = render(ModelThumbnail, {
+		props: {
+			name: model.name,
+			isHuggingChat: config.isHuggingChat,
+		},
+	});
+
+	// satori-html returns a VNode (React-like). satori's TS types expect ReactNode,
+	// so cast here to satisfy the compiler without pulling in React types.
+	const reactLike = html(
+		"<style>" + renderedComponent.head + "</style>" + renderedComponent.body
+	) as unknown as never;
+
+	const svg = await satori(reactLike, {
+		width: 1200,
+		height: 648,
+		fonts: [
+			{
+				name: "Inter",
+				data: InterRegular as unknown as ArrayBuffer,
+				weight: 500,
+			},
+			{
+				name: "Inter",
+				data: InterBold as unknown as ArrayBuffer,
+				weight: 700,
+			},
+		],
+	});
+
+	const png = new Resvg(svg, {
+		fitTo: { mode: "original" },
+	})
+		.render()
+		.asPng();
+
+	// Return a Uint8Array so BodyInit matches cleanly without generics mismatch
+	return new Response(new Uint8Array(png), {
+		headers: {
+			"Content-Type": "image/png",
+			"Cache-Control": "public, max-age=86400, s-maxage=604800, stale-while-revalidate=604800",
+		},
+	});
+}) satisfies RequestHandler;

package/src/ruvocal/src/routes/models/[...model]/thumbnail.png/ModelThumbnail.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import logo from "../../../../../static/huggingchat/fulltext-logo.svg?raw";
+
+	interface Props {
+		name: string;
+		isHuggingChat?: boolean;
+		backgroundImage?: string;
+	}
+
+	let { name, isHuggingChat = false }: Props = $props();
+</script>
+
+<div
+	class=" flex h-[648px] w-full flex-col items-center justify-center bg-black text-white"
+	style="background-image: url(https://cdn-uploads.huggingface.co/production/uploads/5f17f0a0925b9863e28ad517/L4XVRJ7MsfFDD7ROx_geO.png);"
+>
+	<h1 class="mb-8 text-7xl font-bold text-white">
+		{name.split("/")[1]}
+	</h1>
+
+	{#if isHuggingChat}
+		<div class="flex items-center text-5xl text-white">
+			<div class="mr-4 text-4xl">Chat with it on</div>
+			<!-- eslint-disable-next-line -->
+			{@html logo}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { marked } from "marked";
+	import privacy from "../../../PRIVACY.md?raw";
+</script>
+
+<div class="overflow-auto p-6">
+	<div class="prose mx-auto px-4 pb-24 pt-6 dark:prose-invert md:pt-12">
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html marked(privacy, { gfm: true })}
+	</div>
+</div>

package/src/ruvocal/src/routes/r/[id]/+page.ts

@@ -0,0 +1,34 @@
+import { redirect } from "@sveltejs/kit";
+import { useAPIClient, handleResponse } from "$lib/APIClient";
+import { base } from "$app/paths";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async ({ params, url, fetch, parent }) => {
+	const leafId = url.searchParams.get("leafId");
+	const parentData = await parent();
+
+	// If logged in, import the share and redirect to the new conversation
+	if (parentData.loginEnabled && parentData.user && params.id) {
+		const client = useAPIClient({ fetch, origin: url.origin });
+
+		let importedConversationId: string | undefined;
+		try {
+			const result = await client.conversations["import-share"]
+				.post({ shareId: params.id })
+				.then(handleResponse);
+			importedConversationId = result.conversationId;
+		} catch {
+			// Fall through to view-only mode on error
+		}
+
+		if (importedConversationId) {
+			redirect(
+				302,
+				`${base}/conversation/${importedConversationId}?leafId=${leafId ?? ""}&fromShare=${params.id}`
+			);
+		}
+	}
+
+	// Not logged in or import failed: redirect to view-only mode
+	redirect(302, `${base}/conversation/${params.id}${leafId ? `?leafId=${leafId}` : ""}`);
+};