@aigentic/ruflo 3.7.0-alpha.69

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

@@ -0,0 +1,300 @@
+<script lang="ts" module>
+	let isOpen = $state(false);
+
+	export function closeMobileNav() {
+		isOpen = false;
+	}
+
+	export function openMobileNav() {
+		isOpen = true;
+	}
+</script>
+
+<script lang="ts">
+	import { browser } from "$app/environment";
+	import { beforeNavigate } from "$app/navigation";
+	import { onMount, onDestroy } from "svelte";
+	import { base } from "$app/paths";
+	import { page } from "$app/state";
+	import IconNew from "$lib/components/icons/IconNew.svelte";
+	import IconShare from "$lib/components/icons/IconShare.svelte";
+	import IconBurger from "$lib/components/icons/IconBurger.svelte";
+	import { Spring } from "svelte/motion";
+	import { shareModal } from "$lib/stores/shareModal";
+	import { loading } from "$lib/stores/loading";
+	import { requireAuthUser } from "$lib/utils/auth";
+	import { tap } from "$lib/utils/haptics";
+
+	interface Props {
+		title: string | undefined;
+		children?: import("svelte").Snippet;
+	}
+
+	let { title = $bindable(), children }: Props = $props();
+
+	let closeEl: HTMLButtonElement | undefined = $state();
+	let openEl: HTMLButtonElement | undefined = $state();
+
+	const isHuggingChat = $derived(Boolean(page.data?.publicConfig?.isHuggingChat));
+	const canShare = $derived(
+		isHuggingChat &&
+			!$loading &&
+			Boolean(page.params?.id) &&
+			page.route.id?.startsWith("/conversation/")
+	);
+
+	// Define the width for the drawer (less than 100% to create the gap)
+	const drawerWidthPercentage = 85;
+
+	$effect(() => {
+		title ??= "New Chat";
+	});
+
+	beforeNavigate(() => {
+		isOpen = false;
+	});
+
+	let shouldFocusClose = $derived(isOpen && closeEl);
+	let shouldRefocusOpen = $derived(!isOpen && browser && document.activeElement === closeEl);
+
+	$effect(() => {
+		if (shouldFocusClose) {
+			closeEl?.focus();
+		} else if (shouldRefocusOpen) {
+			openEl?.focus();
+		}
+	});
+
+	// Function to close the drawer when background is tapped
+	function closeDrawer() {
+		isOpen = false;
+	}
+
+	// Swipe gesture support for opening/closing the nav with live feedback
+	// Thresholds from vaul drawer library
+	const VELOCITY_THRESHOLD = 0.4; // px/ms - if exceeded, snap in swipe direction
+	const DIRECTION_LOCK_THRESHOLD = 10; // px - movement needed to lock direction
+
+	let touchstart: Touch | null = null;
+	let lastTouchX: number | null = null;
+	let dragStartTime: number = 0;
+	let isDragging = $state(false);
+	let dragOffset = $state(-100); // percentage: -100 (closed) to 0 (open)
+	let dragStartedOpen = false;
+
+	// Direction lock: null = undecided, 'horizontal' = drawer drag, 'vertical' = scroll
+	let directionLock: "horizontal" | "vertical" | null = null;
+	let potentialDrag = false;
+
+	// Spring target: follows dragOffset during drag, follows isOpen after drag ends
+	const springTarget = $derived(isDragging ? dragOffset : isOpen ? 0 : -100);
+	const tween = Spring.of(() => springTarget, { stiffness: 0.2, damping: 0.8 });
+
+	function onTouchStart(e: TouchEvent) {
+		// Ignore touch events when a modal is open (app is inert)
+		if (document.getElementById("app")?.hasAttribute("inert")) return;
+
+		const touch = e.changedTouches[0];
+		touchstart = touch;
+		dragStartTime = Date.now();
+		directionLock = null;
+
+		const drawerWidth = window.innerWidth * (drawerWidthPercentage / 100);
+		const touchOnDrawer = isOpen && touch.clientX < drawerWidth;
+
+		// Check if touch is on an interactive element (don't block taps on buttons/links)
+		const target = e.target as HTMLElement;
+		const isInteractive = target.closest("button, a, input, [role='button']");
+
+		// Potential drag scenarios - never start isDragging until direction is locked
+		// Exception: overlay tap (no scroll content, so no direction conflict)
+		if (!isOpen && touch.clientX < 40) {
+			// Opening gesture - wait for direction lock before starting drag
+			// Prevent Safari's back navigation gesture on iOS (but not on interactive elements)
+			if (!isInteractive) {
+				e.preventDefault();
+			}
+			potentialDrag = true;
+			dragStartedOpen = false;
+		} else if (isOpen && !touchOnDrawer) {
+			// Touch on overlay - can start immediately (no scroll conflict)
+			potentialDrag = true;
+			isDragging = true;
+			dragStartedOpen = true;
+			dragOffset = 0;
+			directionLock = "horizontal";
+		} else if (isOpen && touchOnDrawer) {
+			// Touch on drawer content - wait for direction lock
+			potentialDrag = true;
+			dragStartedOpen = true;
+		}
+	}
+
+	function onTouchMove(e: TouchEvent) {
+		if (!touchstart || !potentialDrag) return;
+
+		const touch = e.changedTouches[0];
+		const deltaX = touch.clientX - touchstart.clientX;
+		const deltaY = touch.clientY - touchstart.clientY;
+
+		// Determine direction lock if not yet decided
+		if (directionLock === null) {
+			const absX = Math.abs(deltaX);
+			const absY = Math.abs(deltaY);
+
+			if (absX > DIRECTION_LOCK_THRESHOLD || absY > DIRECTION_LOCK_THRESHOLD) {
+				if (absX > absY) {
+					// Horizontal movement - commit to drawer drag
+					directionLock = "horizontal";
+					isDragging = true;
+					dragOffset = dragStartedOpen ? 0 : -100;
+				} else {
+					// Vertical movement - abort potential drag, let content scroll
+					directionLock = "vertical";
+					potentialDrag = false;
+					return;
+				}
+			} else {
+				return;
+			}
+		}
+
+		if (directionLock !== "horizontal") return;
+
+		const drawerWidth = window.innerWidth * (drawerWidthPercentage / 100);
+
+		if (dragStartedOpen) {
+			dragOffset = Math.max(-100, Math.min(0, (deltaX / drawerWidth) * 100));
+		} else {
+			dragOffset = Math.max(-100, Math.min(0, -100 + (deltaX / drawerWidth) * 100));
+		}
+
+		lastTouchX = touch.clientX;
+	}
+
+	function onTouchEnd(e: TouchEvent) {
+		if (!potentialDrag) return;
+
+		if (!isDragging || !touchstart) {
+			resetDragState();
+			return;
+		}
+
+		const touch = e.changedTouches[0];
+		const timeTaken = Date.now() - dragStartTime;
+		const distMoved = touch.clientX - touchstart.clientX;
+		const velocity = Math.abs(distMoved) / timeTaken;
+
+		// Determine snap direction based on velocity first, then final movement direction
+		if (velocity > VELOCITY_THRESHOLD) {
+			isOpen = distMoved > 0;
+		} else {
+			// For slow drags, use the final movement direction (allows "change of mind")
+			const finalDirection = lastTouchX !== null ? touch.clientX - lastTouchX : distMoved;
+			isOpen = finalDirection > 0;
+		}
+
+		tap();
+		resetDragState();
+	}
+
+	function onTouchCancel() {
+		if (isDragging) {
+			isOpen = dragStartedOpen;
+		}
+		resetDragState();
+	}
+
+	function resetDragState() {
+		isDragging = false;
+		potentialDrag = false;
+		touchstart = null;
+		lastTouchX = null;
+		directionLock = null;
+	}
+
+	onMount(() => {
+		// touchstart needs passive: false to allow preventDefault() for Safari back gesture
+		window.addEventListener("touchstart", onTouchStart, { passive: false });
+		window.addEventListener("touchmove", onTouchMove, { passive: true });
+		window.addEventListener("touchend", onTouchEnd, { passive: true });
+		window.addEventListener("touchcancel", onTouchCancel, { passive: true });
+	});
+
+	onDestroy(() => {
+		if (browser) {
+			window.removeEventListener("touchstart", onTouchStart);
+			window.removeEventListener("touchmove", onTouchMove);
+			window.removeEventListener("touchend", onTouchEnd);
+			window.removeEventListener("touchcancel", onTouchCancel);
+		}
+	});
+</script>
+
+<nav
+	class="mx-4 mt-4 flex h-12 items-center justify-between rounded-b-xl border-b bg-gray-50 px-3 dark:border-gray-800 dark:bg-gray-800/30 dark:shadow-xl max-md:rounded-xl max-md:border md:hidden"
+>
+	<button
+		type="button"
+		class="-ml-3 flex size-12 shrink-0 items-center justify-center text-lg"
+		onclick={() => (isOpen = true)}
+		aria-label="Open menu"
+		bind:this={openEl}><IconBurger /></button
+	>
+	<div class="flex h-full items-center justify-center overflow-hidden">
+		{#if page.params?.id}
+			<span class="max-w-full truncate px-4 first-letter:uppercase" data-testid="chat-title"
+				>{title}</span
+			>
+		{/if}
+	</div>
+	<div class="-mr-3 flex items-center">
+		{#if isHuggingChat}
+			<button
+				type="button"
+				class="flex h-12 w-6 shrink-0 items-center justify-center text-lg"
+				disabled={!canShare}
+				onclick={() => {
+					if (!canShare) return;
+					shareModal.open();
+				}}
+				aria-label="Share conversation"
+			>
+				<IconShare classNames={!canShare ? "opacity-40" : ""} />
+			</button>
+		{/if}
+		<a
+			href="{base}/"
+			class="flex size-12 shrink-0 items-center justify-center text-lg"
+			onclick={(e) => {
+				if (requireAuthUser()) {
+					e.preventDefault();
+				}
+			}}
+		>
+			<IconNew />
+		</a>
+	</div>
+</nav>
+
+<!-- Mobile drawer overlay - shows when drawer is open or dragging -->
+{#if isOpen || isDragging}
+	<button
+		type="button"
+		class="fixed inset-0 z-20 cursor-default bg-black/30 md:hidden"
+		style="opacity: {Math.max(0, Math.min(1, (100 + tween.current) / 100))}; will-change: opacity;"
+		onclick={closeDrawer}
+		aria-label="Close mobile navigation"
+	></button>
+{/if}
+
+<nav
+	style="transform: translateX({isDragging
+		? dragOffset
+		: tween.current}%); width: {drawerWidthPercentage}%; will-change: transform;"
+	class:shadow-[5px_0_15px_0_rgba(0,0,0,0.3)]={isOpen || isDragging}
+	class="fixed bottom-0 left-0 top-0 z-30 grid max-h-dvh grid-cols-1
+	grid-rows-[auto,1fr,auto,auto] rounded-r-xl bg-white pt-4 dark:bg-gray-900 md:hidden"
+>
+	{@render children?.()}
+</nav>

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

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { onDestroy, onMount } from "svelte";
+	import { cubicOut } from "svelte/easing";
+	import { fade, fly } from "svelte/transition";
+	import Portal from "./Portal.svelte";
+	import { browser } from "$app/environment";
+	import CarbonClose from "~icons/carbon/close";
+	import { tap } from "$lib/utils/haptics";
+
+	interface Props {
+		width?: string;
+		closeButton?: boolean;
+		disableFly?: boolean;
+		/** When false, clicking backdrop will not close the modal */
+		closeOnBackdrop?: boolean;
+		onclose?: () => void;
+		children?: import("svelte").Snippet;
+	}
+
+	let {
+		width = "max-w-sm",
+		children,
+		closeButton = false,
+		disableFly = false,
+		closeOnBackdrop = true,
+		onclose,
+	}: Props = $props();
+
+	let backdropEl: HTMLDivElement | undefined = $state();
+	let modalEl: HTMLDivElement | undefined = $state();
+
+	function handleKeydown(event: KeyboardEvent) {
+		// close on ESC
+		if (event.key === "Escape") {
+			event.preventDefault();
+			onclose?.();
+		}
+	}
+
+	function handleBackdropClick(event: MouseEvent) {
+		if (window?.getSelection()?.toString()) {
+			return;
+		}
+		if (event.target === backdropEl && closeOnBackdrop) {
+			onclose?.();
+		}
+	}
+
+	onMount(() => {
+		document.getElementById("app")?.setAttribute("inert", "true");
+		modalEl?.focus();
+		tap();
+		// Ensure Escape closes even if focus isn't within modal
+		window.addEventListener("keydown", handleKeydown, { capture: true });
+	});
+
+	onDestroy(() => {
+		if (!browser) return;
+		document.getElementById("app")?.removeAttribute("inert");
+		window.removeEventListener("keydown", handleKeydown, { capture: true });
+	});
+</script>
+
+<Portal>
+	<div
+		role="presentation"
+		tabindex="-1"
+		bind:this={backdropEl}
+		onclick={(e) => {
+			e.stopPropagation();
+			handleBackdropClick(e);
+		}}
+		transition:fade|local={{ easing: cubicOut, duration: 300 }}
+		class="fixed inset-0 z-40 flex items-center justify-center bg-black/80 backdrop-blur-sm dark:bg-black/50"
+	>
+		{#if disableFly}
+			<div
+				role="dialog"
+				tabindex="-1"
+				bind:this={modalEl}
+				onkeydown={handleKeydown}
+				class={[
+					"scrollbar-custom relative mx-auto max-h-[95dvh] max-w-[90dvw] overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-2xl outline-none dark:bg-gray-800 dark:text-gray-200",
+					width,
+				]}
+			>
+				{#if closeButton}
+					<button class="absolute right-4 top-4 z-50" onclick={() => onclose?.()}>
+						<CarbonClose class="size-6 text-gray-700 dark:text-gray-300" />
+					</button>
+				{/if}
+				{@render children?.()}
+			</div>
+		{:else}
+			<div
+				role="dialog"
+				tabindex="-1"
+				bind:this={modalEl}
+				onkeydown={handleKeydown}
+				in:fly={{ y: 100 }}
+				class={[
+					"scrollbar-custom relative mx-auto max-h-[95dvh] max-w-[90dvw] overflow-y-auto overflow-x-hidden rounded-2xl bg-white shadow-2xl outline-none dark:bg-gray-800 dark:text-gray-200",
+					width,
+				]}
+			>
+				{#if closeButton}
+					<button class="absolute right-4 top-4 z-50" onclick={() => onclose?.()}>
+						<CarbonClose class="size-6 text-gray-700 dark:text-gray-300" />
+					</button>
+				{/if}
+				{@render children?.()}
+			</div>
+		{/if}
+	</div>
+</Portal>

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

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import CarbonEarth from "~icons/carbon/earth";
+	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
+	import BIMeta from "~icons/bi/meta";
+	import CarbonCode from "~icons/carbon/code";
+	import type { Model } from "$lib/types/Model";
+
+	interface Props {
+		model: Pick<
+			Model,
+			"name" | "datasetName" | "websiteUrl" | "modelUrl" | "datasetUrl" | "hasInferenceAPI"
+		>;
+		variant?: "light" | "dark";
+	}
+
+	let { model, variant = "light" }: Props = $props();
+</script>
+
+<div
+	class="flex items-center gap-5 rounded-xl bg-gray-100 px-3 py-2 text-xs sm:text-sm
+	{variant === 'dark'
+		? 'text-gray-600 dark:bg-gray-800 dark:text-gray-300'
+		: 'text-gray-800 dark:bg-gray-100 dark:text-gray-600'}"
+>
+	<a
+		href={model.modelUrl || "https://huggingface.co/" + model.name}
+		target="_blank"
+		rel="noreferrer"
+		class="flex items-center hover:underline"
+		><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs text-gray-400" />
+		Model
+		<div class="max-sm:hidden">&nbsp;page</div></a
+	>
+	{#if model.datasetName || model.datasetUrl}
+		<a
+			href={model.datasetUrl || "https://huggingface.co/datasets/" + model.datasetName}
+			target="_blank"
+			rel="noreferrer"
+			class="flex items-center hover:underline"
+			><CarbonArrowUpRight class="mr-1.5 shrink-0 text-xs text-gray-400" />
+			Dataset
+			<div class="max-sm:hidden">&nbsp;page</div></a
+		>
+	{/if}
+	{#if model.hasInferenceAPI}
+		<a
+			href={"https://huggingface.co/playground?modelId=" + model.name}
+			target="_blank"
+			rel="noreferrer"
+			class="flex items-center hover:underline"
+			><CarbonCode class="mr-1.5 shrink-0 text-xs text-gray-400" />
+			API
+		</a>
+	{/if}
+	{#if model.websiteUrl}
+		<a
+			href={model.websiteUrl}
+			target="_blank"
+			class="ml-auto flex items-center hover:underline"
+			rel="noreferrer"
+		>
+			{#if model.name.startsWith("meta-llama/Meta-Llama")}
+				<BIMeta class="mr-1.5 shrink-0 text-xs text-gray-400" />
+				Built with Llama
+			{:else}
+				<CarbonEarth class="mr-1.5 shrink-0 text-xs text-gray-400" />
+				Website
+			{/if}
+		</a>
+	{/if}
+</div>

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}