ruflo 3.5.2 → 3.5.4

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

@@ -0,0 +1,151 @@
+<script lang="ts">
+	import { base } from "$app/paths";
+	import { page } from "$app/state";
+	import { tick } from "svelte";
+
+	import CarbonTrashCan from "~icons/carbon/trash-can";
+	import CarbonEdit from "~icons/carbon/edit";
+	import type { ConvSidebar } from "$lib/types/ConvSidebar";
+
+	import EditConversationModal from "$lib/components/EditConversationModal.svelte";
+	import DeleteConversationModal from "$lib/components/DeleteConversationModal.svelte";
+	import { requireAuthUser } from "$lib/utils/auth";
+
+	interface Props {
+		conv: ConvSidebar;
+		readOnly?: true;
+		ondeleteConversation?: (id: string) => void;
+		oneditConversationTitle?: (payload: { id: string; title: string }) => void;
+	}
+
+	let { conv, readOnly, ondeleteConversation, oneditConversationTitle }: Props = $props();
+
+	let deleteOpen = $state(false);
+	let renameOpen = $state(false);
+	let inlineEditing = $state(false);
+	let inlineCancelled = $state(false);
+	let inlineTitle = $state("");
+	let inputEl: HTMLInputElement | undefined = $state();
+
+	async function startInlineEdit() {
+		if (readOnly || requireAuthUser()) return;
+		inlineTitle = conv.title;
+		inlineCancelled = false;
+		inlineEditing = true;
+		await tick();
+		inputEl?.focus();
+		inputEl?.select();
+	}
+
+	function commitInlineEdit() {
+		if (!inlineEditing || inlineCancelled) return;
+		const trimmed = inlineTitle.trim();
+		inlineEditing = false;
+		if (trimmed && trimmed !== conv.title) {
+			oneditConversationTitle?.({ id: conv.id.toString(), title: trimmed });
+		}
+	}
+
+	function cancelInlineEdit() {
+		inlineCancelled = true;
+		inlineEditing = false;
+	}
+</script>
+
+<a
+	data-sveltekit-noscroll
+	data-sveltekit-preload-data="tap"
+	href="{base}/conversation/{conv.id}"
+	class="group flex h-[2.15rem] flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 max-sm:h-10
+		{conv.id === page.params.id ? 'bg-gray-100 dark:bg-gray-700' : ''}"
+	onclick={(e) => {
+		if (e.detail >= 2) {
+			e.preventDefault();
+			startInlineEdit();
+		}
+	}}
+>
+	{#if inlineEditing}
+		<!-- svelte-ignore a11y_autofocus -->
+		<input
+			bind:this={inputEl}
+			type="text"
+			value={inlineTitle}
+			oninput={(e) => (inlineTitle = (e.currentTarget as HTMLInputElement).value)}
+			onkeydown={(e) => {
+				if (e.key === "Enter") {
+					e.preventDefault();
+					commitInlineEdit();
+				} else if (e.key === "Escape") {
+					e.preventDefault();
+					cancelInlineEdit();
+				}
+			}}
+			onblur={commitInlineEdit}
+			onclick={(e) => e.preventDefault()}
+			class="my-0 h-full min-w-0 flex-1 truncate border-none bg-transparent p-0 text-inherit outline-none first-letter:uppercase focus:ring-0"
+		/>
+	{:else}
+		<div class="my-2 min-w-0 flex-1 truncate first-letter:uppercase">
+			<span>{conv.title}</span>
+		</div>
+	{/if}
+
+	{#if !readOnly && !inlineEditing}
+		<button
+			type="button"
+			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
+			title="Edit conversation title"
+			onclick={(e) => {
+				e.preventDefault();
+				if (requireAuthUser()) return;
+				renameOpen = true;
+			}}
+		>
+			<CarbonEdit class="text-xs text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" />
+		</button>
+
+		<button
+			type="button"
+			class="flex h-5 w-5 items-center justify-center rounded md:hidden md:group-hover:flex"
+			title="Delete conversation"
+			onclick={(event) => {
+				event.preventDefault();
+				if (requireAuthUser()) return;
+				if (event.shiftKey) {
+					ondeleteConversation?.(conv.id.toString());
+				} else {
+					deleteOpen = true;
+				}
+			}}
+		>
+			<CarbonTrashCan class="text-xs text-gray-400  hover:text-gray-500 dark:hover:text-gray-300" />
+		</button>
+	{/if}
+</a>
+
+<!-- Edit title modal -->
+{#if renameOpen}
+	<EditConversationModal
+		open={renameOpen}
+		title={conv.title}
+		onclose={() => (renameOpen = false)}
+		onsave={(payload) => {
+			renameOpen = false;
+			oneditConversationTitle?.({ id: conv.id.toString(), title: payload.title });
+		}}
+	/>
+{/if}
+
+<!-- Delete confirmation modal -->
+{#if deleteOpen}
+	<DeleteConversationModal
+		open={deleteOpen}
+		title={conv.title}
+		onclose={() => (deleteOpen = false)}
+		ondelete={() => {
+			deleteOpen = false;
+			ondeleteConversation?.(conv.id.toString());
+		}}
+	/>
+{/if}

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

@@ -0,0 +1,295 @@
+<script lang="ts" module>
+	export const titles: { [key: string]: string } = {
+		today: "Today",
+		week: "This week",
+		month: "This month",
+		older: "Older",
+	} as const;
+</script>
+
+<script lang="ts">
+	import { base } from "$app/paths";
+
+	import Logo from "$lib/components/icons/Logo.svelte";
+	import IconSun from "$lib/components/icons/IconSun.svelte";
+	import IconMoon from "$lib/components/icons/IconMoon.svelte";
+	import { switchTheme, subscribeToTheme } from "$lib/switchTheme";
+	import { isAborted } from "$lib/stores/isAborted";
+	import { onDestroy } from "svelte";
+
+	import NavConversationItem from "./NavConversationItem.svelte";
+	import type { LayoutData } from "../../routes/$types";
+	import type { ConvSidebar } from "$lib/types/ConvSidebar";
+	import type { Model } from "$lib/types/Model";
+	import { page } from "$app/state";
+	import InfiniteScroll from "./InfiniteScroll.svelte";
+	import { CONV_NUM_PER_PAGE } from "$lib/constants/pagination";
+	import { browser } from "$app/environment";
+	import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
+	import { useAPIClient, handleResponse } from "$lib/APIClient";
+	import { requireAuthUser } from "$lib/utils/auth";
+	import { enabledServersCount } from "$lib/stores/mcpServers";
+	import { isPro } from "$lib/stores/isPro";
+	import IconPro from "$lib/components/icons/IconPro.svelte";
+	import MCPServerManager from "./mcp/MCPServerManager.svelte";
+
+	const publicConfig = usePublicConfig();
+	const client = useAPIClient();
+
+	interface Props {
+		conversations: ConvSidebar[];
+		user: LayoutData["user"];
+		p?: number;
+		ondeleteConversation?: (id: string) => void;
+		oneditConversationTitle?: (payload: { id: string; title: string }) => void;
+	}
+
+	let {
+		conversations = $bindable(),
+		user,
+		p = $bindable(0),
+		ondeleteConversation,
+		oneditConversationTitle,
+	}: Props = $props();
+
+	let hasMore = $state(true);
+
+	function handleNewChatClick(e: MouseEvent) {
+		isAborted.set(true);
+
+		if (requireAuthUser()) {
+			e.preventDefault();
+		}
+	}
+
+	function handleNavItemClick(e: MouseEvent) {
+		if (requireAuthUser()) {
+			e.preventDefault();
+		}
+	}
+
+	const dateRanges = [
+		new Date().setDate(new Date().getDate() - 1),
+		new Date().setDate(new Date().getDate() - 7),
+		new Date().setMonth(new Date().getMonth() - 1),
+	];
+
+	let groupedConversations = $derived({
+		today: conversations.filter(({ updatedAt }) => updatedAt.getTime() > dateRanges[0]),
+		week: conversations.filter(
+			({ updatedAt }) => updatedAt.getTime() > dateRanges[1] && updatedAt.getTime() < dateRanges[0]
+		),
+		month: conversations.filter(
+			({ updatedAt }) => updatedAt.getTime() > dateRanges[2] && updatedAt.getTime() < dateRanges[1]
+		),
+		older: conversations.filter(({ updatedAt }) => updatedAt.getTime() < dateRanges[2]),
+	});
+
+	const nModels: number = page.data.models.filter((el: Model) => !el.unlisted).length;
+
+	async function handleVisible() {
+		p++;
+		const newConvs = await client.conversations
+			.get({
+				query: {
+					p,
+				},
+			})
+			.then(handleResponse)
+			.then((r) => r.conversations)
+			.catch((): ConvSidebar[] => []);
+
+		if (newConvs.length === 0) {
+			hasMore = false;
+		}
+
+		conversations = [...conversations, ...newConvs];
+	}
+
+	$effect(() => {
+		if (conversations.length <= CONV_NUM_PER_PAGE) {
+			// reset p to 0 if there's only one page of content
+			// that would be caused by a data loading invalidation
+			p = 0;
+		}
+	});
+
+	let isDark = $state(false);
+	let unsubscribeTheme: (() => void) | undefined;
+	let showMcpModal = $state(false);
+
+	if (browser) {
+		unsubscribeTheme = subscribeToTheme(({ isDark: nextIsDark }) => {
+			isDark = nextIsDark;
+		});
+	}
+
+	onDestroy(() => {
+		unsubscribeTheme?.();
+	});
+</script>
+
+<div
+	class="sticky top-0 flex flex-none touch-none items-center justify-between px-1.5 py-3.5 max-sm:pt-0"
+>
+	<a
+		class="relative flex select-none items-center rounded-xl text-lg font-semibold"
+		href="{publicConfig.PUBLIC_ORIGIN}{base}/"
+	>
+		<Logo classNames="mr-[2px]" />
+		{publicConfig.PUBLIC_APP_NAME}
+		<!-- Quantum dots floating over "lo" -->
+		<span class="pointer-events-none absolute right-[-2px] top-[-1px] flex gap-[3px]">
+			<span class="quantum-dot qd1"></span>
+			<span class="quantum-dot qd2"></span>
+			<span class="quantum-dot qd3"></span>
+		</span>
+	</a>
+	<a
+		href={`${base}/`}
+		onclick={handleNewChatClick}
+		class="flex rounded-lg border bg-white px-2 py-0.5 text-center shadow-sm hover:shadow-none dark:border-gray-600 dark:bg-gray-700 sm:text-smd"
+		title="Ctrl/Cmd + Shift + O"
+	>
+		New Chat
+	</a>
+</div>
+
+<div
+	class="scrollbar-custom flex touch-pan-y flex-col gap-1 overflow-y-auto rounded-r-xl border border-l-0 border-gray-100 from-gray-50 px-3 pb-3 pt-2 text-[.9rem] dark:border-transparent dark:from-gray-800/30 max-sm:bg-gradient-to-t md:bg-gradient-to-l"
+>
+	<div class="flex flex-col gap-0.5">
+		{#each Object.entries(groupedConversations) as [group, convs]}
+			{#if convs.length}
+				<h4 class="mb-1.5 mt-4 pl-0.5 text-sm text-gray-400 first:mt-0 dark:text-gray-500">
+					{titles[group]}
+				</h4>
+				{#each convs as conv}
+					<NavConversationItem {conv} {oneditConversationTitle} {ondeleteConversation} />
+				{/each}
+			{/if}
+		{/each}
+	</div>
+	{#if hasMore}
+		<InfiniteScroll onvisible={handleVisible} />
+	{/if}
+</div>
+<div
+	class="flex touch-none flex-col gap-1 rounded-r-xl border border-l-0 border-gray-100 p-3 text-sm dark:border-transparent md:mt-3 md:bg-gradient-to-l md:from-gray-50 md:dark:from-gray-800/30"
+>
+	{#if user?.username || user?.email}
+		<div
+			class="group flex h-9 items-center gap-1.5 rounded-lg pl-2.5 pr-2 hover:bg-gray-100 first:hover:bg-transparent dark:hover:bg-gray-700 first:dark:hover:bg-transparent"
+		>
+			<img
+				src="https://huggingface.co/api/users/{user.username}/avatar?redirect=true"
+				class="size-3.5 rounded-full border bg-gray-500 dark:border-white/40"
+				alt=""
+			/>
+			<span
+				class="flex flex-none shrink items-center gap-1.5 truncate pr-2 text-gray-500 dark:text-gray-400"
+				>{user?.username || user?.email}</span
+			>
+
+			{#if publicConfig.isHuggingChat && $isPro === false}
+				<a
+					href="https://huggingface.co/subscribe/pro?from=HuggingChat"
+					target="_blank"
+					rel="noopener noreferrer"
+					class="ml-auto flex h-[20px] items-center gap-1 px-1.5 py-0.5 text-xs text-gray-500 dark:text-gray-400"
+				>
+					<IconPro />
+					Get PRO
+				</a>
+			{:else if publicConfig.isHuggingChat && $isPro === true}
+				<span
+					class="ml-auto flex h-[20px] items-center gap-1 px-1.5 py-0.5 text-xs text-gray-500 dark:text-gray-400"
+				>
+					<IconPro />
+					PRO
+				</span>
+			{/if}
+		</div>
+	{/if}
+	<a
+		href="{base}/models"
+		class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+		onclick={handleNavItemClick}
+	>
+		Models
+		<span
+			class="ml-auto rounded-md bg-gray-500/5 px-1.5 py-0.5 text-xs text-gray-400 dark:bg-gray-500/20 dark:text-gray-400"
+			>{nModels}</span
+		>
+	</a>
+
+	{#if user?.username || user?.email}
+		<button
+			onclick={() => (showMcpModal = true)}
+			class="flex h-9 flex-none items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+		>
+			MCP Servers
+			{#if $enabledServersCount > 0}
+				<span
+					class="ml-auto rounded-md bg-blue-600/10 px-1.5 py-0.5 text-xs text-blue-600 dark:bg-blue-600/20 dark:text-blue-400"
+				>
+					{$enabledServersCount}
+				</span>
+			{/if}
+		</button>
+	{/if}
+
+	<span class="flex gap-1">
+		<a
+			href="{base}/settings/application"
+			class="flex h-9 flex-none flex-grow items-center gap-1.5 rounded-lg pl-2.5 pr-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+			onclick={handleNavItemClick}
+		>
+			Settings
+		</a>
+		<button
+			onclick={() => {
+				switchTheme();
+			}}
+			aria-label="Toggle theme"
+			class="flex size-9 min-w-[1.5em] flex-none items-center justify-center rounded-lg p-2 text-gray-500 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700"
+		>
+			{#if browser}
+				{#if isDark}
+					<IconSun />
+				{:else}
+					<IconMoon />
+				{/if}
+			{/if}
+		</button>
+	</span>
+</div>
+
+{#if showMcpModal}
+	<MCPServerManager onclose={() => (showMcpModal = false)} />
+{/if}
+
+<style>
+	.quantum-dot {
+		display: block;
+		width: 4px;
+		height: 4px;
+		border-radius: 50%;
+	}
+	.qd1 {
+		background: #3b82f6;
+		animation: qdot 2.2s ease-in-out infinite;
+	}
+	.qd2 {
+		background: #818cf8;
+		animation: qdot 2.2s ease-in-out infinite 0.35s;
+	}
+	.qd3 {
+		background: #06b6d4;
+		animation: qdot 2.2s ease-in-out infinite 0.7s;
+	}
+	@keyframes qdot {
+		0%, 100% { transform: translateY(0); opacity: 0.4; }
+		50% { transform: translateY(-3px); opacity: 1; }
+	}
+</style>

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

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { page } from "$app/state";
+	import { getHref } from "$lib/utils/getHref";
+	import PaginationArrow from "./PaginationArrow.svelte";
+
+	interface Props {
+		classNames?: string;
+		numItemsPerPage: number;
+		numTotalItems: number;
+	}
+
+	let { classNames = "", numItemsPerPage, numTotalItems }: Props = $props();
+
+	const ELLIPSIS_IDX = -1 as const;
+
+	function getPageIndexes(pageIdx: number, nTotalPages: number) {
+		let pageIdxs: number[] = [];
+
+		const NUM_EXTRA_BUTTONS = 2; // The number of page links to show on either side of the current page link.
+
+		const minIdx = 0;
+		const maxIdx = nTotalPages - 1;
+
+		pageIdxs = [pageIdx];
+
+		// forward
+		for (let i = 1; i < NUM_EXTRA_BUTTONS + 1; i++) {
+			const newPageIdx = pageIdx + i;
+			if (newPageIdx > maxIdx) {
+				continue;
+			}
+			pageIdxs.push(newPageIdx);
+		}
+		if (maxIdx - pageIdxs[pageIdxs.length - 1] > 1) {
+			pageIdxs.push(...[ELLIPSIS_IDX, maxIdx]);
+		} else if (maxIdx - pageIdxs[pageIdxs.length - 1] === 1) {
+			pageIdxs.push(maxIdx);
+		}
+
+		// backward
+		for (let i = 1; i < NUM_EXTRA_BUTTONS + 1; i++) {
+			const newPageIdx = pageIdx - i;
+			if (newPageIdx < minIdx) {
+				continue;
+			}
+			pageIdxs.unshift(newPageIdx);
+		}
+		if (pageIdxs[0] - minIdx > 1) {
+			pageIdxs.unshift(...[minIdx, ELLIPSIS_IDX]);
+		} else if (pageIdxs[0] - minIdx === 1) {
+			pageIdxs.unshift(minIdx);
+		}
+		return pageIdxs;
+	}
+	let numTotalPages = $derived(Math.ceil(numTotalItems / numItemsPerPage));
+	let pageIndex = $derived(parseInt(page.url.searchParams.get("p") ?? "0"));
+	let pageIndexes = $derived(getPageIndexes(pageIndex, numTotalPages));
+</script>
+
+{#if numTotalPages > 1}
+	<nav>
+		<ul
+			class="flex select-none items-center justify-between space-x-2 text-gray-700 dark:text-gray-300 sm:justify-center {classNames}"
+		>
+			<li>
+				<PaginationArrow
+					href={getHref(page.url, { newKeys: { p: (pageIndex - 1).toString() } })}
+					direction="previous"
+					isDisabled={pageIndex - 1 < 0}
+				/>
+			</li>
+			{#each pageIndexes as pageIdx}
+				<li class="hidden sm:block">
+					<a
+						class="
+							rounded-lg px-2.5 py-1
+							{pageIndex === pageIdx
+							? 'bg-gray-50 font-semibold ring-1 ring-inset ring-gray-200 dark:bg-gray-800 dark:text-yellow-500 dark:ring-gray-700'
+							: ''}
+						"
+						class:pointer-events-none={pageIdx === ELLIPSIS_IDX || pageIndex === pageIdx}
+						href={getHref(page.url, { newKeys: { p: pageIdx.toString() } })}
+					>
+						{pageIdx === ELLIPSIS_IDX ? "..." : pageIdx + 1}
+					</a>
+				</li>
+			{/each}
+			<li>
+				<PaginationArrow
+					href={getHref(page.url, { newKeys: { p: (pageIndex + 1).toString() } })}
+					direction="next"
+					isDisabled={pageIndex + 1 >= numTotalPages}
+				/>
+			</li>
+		</ul>
+	</nav>
+{/if}

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import CarbonCaretLeft from "~icons/carbon/caret-left";
+	import CarbonCaretRight from "~icons/carbon/caret-right";
+
+	interface Props {
+		href: string;
+		direction: "next" | "previous";
+		isDisabled?: boolean;
+	}
+
+	let { href, direction, isDisabled = false }: Props = $props();
+</script>
+
+<a
+	class="flex items-center rounded-lg px-2.5 py-1 hover:bg-gray-50 dark:hover:bg-gray-800 {isDisabled
+		? 'pointer-events-none opacity-50'
+		: ''}"
+	{href}
+>
+	{#if direction === "previous"}
+		<CarbonCaretLeft classNames="mr-1.5" />
+		Previous
+	{:else}
+		Next
+		<CarbonCaretRight classNames="ml-1.5" />
+	{/if}
+</a>

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { onMount, onDestroy } from "svelte";
+	interface Props {
+		children?: import("svelte").Snippet;
+	}
+
+	let { children }: Props = $props();
+
+	let el: HTMLElement | undefined = $state();
+
+	onMount(() => {
+		el?.ownerDocument.body.appendChild(el);
+	});
+
+	onDestroy(() => {
+		if (el?.parentNode) {
+			el.parentNode.removeChild(el);
+		}
+	});
+</script>
+
+<div bind:this={el} class="contents" hidden>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import CarbonRotate360 from "~icons/carbon/rotate-360";
+
+	interface Props {
+		classNames?: string;
+		onClick?: () => void;
+	}
+
+	let { classNames = "", onClick }: Props = $props();
+</script>
+
+<button
+	type="button"
+	onclick={onClick}
+	class="btn flex h-7 rounded-lg border bg-white px-2 py-1 text-sm text-gray-500 shadow-sm hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 {classNames}"
+>
+	<CarbonRotate360 class="mr-1 -translate-y-px text-[.65rem]" /> Retry
+</button>