ruflo 3.5.2 → 3.5.3

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

@@ -0,0 +1,143 @@
+<script lang="ts">
+	import Modal from "./Modal.svelte";
+	import { onMount, onDestroy } from "svelte";
+	import CarbonClose from "~icons/carbon/close";
+	import { pendingChatInput } from "$lib/stores/pendingChatInput";
+
+	interface Props {
+		html: string;
+		onclose?: () => void;
+	}
+
+	let { html, onclose }: Props = $props();
+
+	let iframeEl: HTMLIFrameElement | undefined = $state();
+	let channel = $state(`preview_${Math.random().toString(36).slice(2)}`);
+	let errors: { message: string; stack?: string }[] = $state([]);
+
+	function buildSrcdoc(content: string, channel: string): string {
+		const trimmed = content.trimStart();
+		const svgPattern = /^(?:<\?xml[^>]*>\s*)?(?:<!doctype\s+svg[^>]*>\s*)?<svg[\s>]/i;
+		const baseTag = '<base target="_blank">';
+		const disabledLinkStyles = `<style>
+			a[data-chatui-link-disabled] {}
+		</style>`;
+		const endScriptTag = "</scr" + "ipt>";
+		const errorHook = `\n<script>\n(function(){\n  function send(detail){\n    try{ parent.postMessage({ type: 'chatui.preview.error', channel: '${channel}', detail: detail }, '*'); }catch(e){}\n  }\n  function markDisabled(anchor){\n    if (!anchor || anchor.dataset.chatuiLinkDisabled === 'true') return;\n    anchor.dataset.chatuiLinkDisabled = 'true';\n    var note = 'Link disabled in preview';\n    var title = anchor.getAttribute('title');\n    if (!title) {\n      anchor.setAttribute('title', note);\n    } else if (title.indexOf(note) === -1) {\n      anchor.setAttribute('title', title + ' — ' + note);\n    }\n  }\n  function disableAnchors(scope){\n    try {\n      var root = scope && scope.querySelectorAll ? scope : document;\n      var anchors = root.querySelectorAll ? root.querySelectorAll('a') : [];\n      for (var i = 0; i < anchors.length; i++) {\n        markDisabled(anchors[i]);\n      }\n    } catch (err) {}\n  }\n  function nearestAnchor(node){\n    while (node && node !== document) {\n      if (node.tagName && node.tagName.toLowerCase() === 'a') return node;\n      node = node.parentNode;\n    }\n    return null;\n  }\n  function intercept(ev){\n    var anchor = nearestAnchor(ev.target);\n    if (!anchor) return;\n    markDisabled(anchor);\n    ev.preventDefault();\n    ev.stopPropagation();\n  }\n  disableAnchors();\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', function(){ disableAnchors(); });\n  } else {\n    setTimeout(function(){ disableAnchors(); }, 0);\n  }\n  if (window.MutationObserver) {\n    var observer = new MutationObserver(function(mutations){\n      for (var i = 0; i < mutations.length; i++) {\n        var nodes = mutations[i].addedNodes;\n        for (var j = 0; j < nodes.length; j++) {\n          var node = nodes[j];\n          if (!node || node.nodeType !== 1) continue;\n          if (node.tagName && node.tagName.toLowerCase() === 'a') {\n            markDisabled(node);\n          } else {\n            disableAnchors(node);\n          }\n        }\n      }\n    });\n    observer.observe(document.documentElement, { childList: true, subtree: true });\n  }\n  window.addEventListener('click', intercept, true);\n  window.addEventListener('auxclick', intercept, true);\n  window.addEventListener('keydown', function(ev){\n    if (ev.key === 'Enter' || ev.key === ' ') {\n      intercept(ev);\n    }\n  }, true);\n  window.addEventListener('error', function(ev){\n    var msg = ev && ev.message ? ev.message : 'Script error';\n    var stack = ev && ev.error && ev.error.stack ? ev.error.stack : undefined;\n    send({ message: msg, stack: stack });\n  });\n  window.addEventListener('unhandledrejection', function(ev){\n    var r = ev && ev.reason;\n    var msg = (typeof r === 'string') ? r : (r && r.message) ? r.message : 'Unhandled promise rejection';\n    var stack = r && r.stack ? r.stack : undefined;\n    send({ message: msg, stack: stack });\n  });\n})();\n${endScriptTag}`;
+
+		if (svgPattern.test(trimmed)) {
+			const svgContent = trimmed
+				.replace(/^(<\?xml[^>]*>\s*)/i, "")
+				.replace(/^(<!doctype[^>]*>\s*)/i, "");
+			return `<!doctype html><html><head>${baseTag}${disabledLinkStyles}${errorHook}</head><body>${svgContent}</body></html>`;
+		}
+
+		const headMatch = content.match(/<head[^>]*>/i);
+		if (headMatch) {
+			return content.replace(headMatch[0], headMatch[0] + baseTag + disabledLinkStyles + errorHook);
+		}
+		const htmlTagMatch = content.match(/<html[^>]*>/i);
+		if (htmlTagMatch) {
+			return content.replace(
+				htmlTagMatch[0],
+				htmlTagMatch[0] + "\n<head>" + baseTag + disabledLinkStyles + errorHook + "</head>"
+			);
+		}
+		const doctypeMatch = content.match(/<!doctype[^>]*>/i);
+		if (doctypeMatch) {
+			const idx = content.indexOf(doctypeMatch[0]) + doctypeMatch[0].length;
+			return (
+				content.slice(0, idx) +
+				"\n<head>" +
+				baseTag +
+				disabledLinkStyles +
+				errorHook +
+				"</head>" +
+				content.slice(idx)
+			);
+		}
+		return "<head>" + baseTag + disabledLinkStyles + errorHook + "</head>\n" + content;
+	}
+
+	let srcdoc = $derived(buildSrcdoc(html, channel));
+
+	type PreviewMessage = {
+		type: string;
+		channel: string;
+		detail?: { message?: unknown; stack?: string };
+	};
+
+	function onMessage(ev: MessageEvent) {
+		if (!iframeEl || ev.source !== iframeEl.contentWindow) return;
+		const raw = ev.data as unknown;
+		if (!raw || typeof raw !== "object") return;
+		const data = raw as Partial<PreviewMessage>;
+		if (data.type !== "chatui.preview.error" || data.channel !== channel) return;
+		const detail = (data.detail ?? {}) as { message?: unknown; stack?: string };
+		errors = [...errors, { message: String(detail.message ?? "Error"), stack: detail.stack }];
+	}
+
+	onMount(() => {
+		window.addEventListener("message", onMessage);
+	});
+	onDestroy(() => {
+		window.removeEventListener("message", onMessage);
+	});
+
+	function composeText(): string {
+		const lines = errors.map((e, i) => `${i + 1}. ${e.message}${e.stack ? `\n${e.stack}` : ""}`);
+		const summary = lines[0] ?? "Unknown error";
+		return errors.length > 1
+			? `it's not working: ${summary} (+${errors.length - 1} more) - can you fix it?`
+			: `it's not working: ${summary} - can you fix it?`;
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		// Close preview on ESC key
+		if (event.key === "Escape") {
+			event.preventDefault();
+			onclose?.();
+		}
+	}
+</script>
+
+<svelte:window on:keydown={handleKeydown} />
+
+<Modal
+	width="max-w-none max-h-none w-[100dvw] h-[100dvh] !rounded-none"
+	onclose={() => onclose?.()}
+>
+	<div class="relative h-[100dvh] w-[100dvw]">
+		<iframe
+			bind:this={iframeEl}
+			title="HTML Preview"
+			class="h-full w-full"
+			sandbox="allow-scripts allow-popups"
+			referrerpolicy="no-referrer"
+			{srcdoc}
+		></iframe>
+
+		<!-- Close button with visible container -->
+		<button
+			class="btn fixed right-6 top-4 z-50 flex h-7 items-center gap-1 rounded-lg border border-gray-500/60 bg-gray-800 px-2 text-xs text-white shadow-sm backdrop-blur transition-none hover:border-gray-500 hover:bg-gray-700 active:shadow-inner"
+			title="Close preview (Esc)"
+			onclick={() => onclose?.()}
+		>
+			<CarbonClose class="size-3.5" />
+			Close preview
+		</button>
+
+		{#if errors.length > 0}
+			<button
+				class="btn fixed bottom-4 right-4 z-50 flex items-center gap-2 rounded-full border-2 border-red-500/60 bg-red-800/90 px-4 py-1.5 text-sm text-white shadow-lg"
+				title="Send error to chat"
+				onclick={() => {
+					pendingChatInput.set(composeText());
+					onclose?.();
+				}}
+			>
+				<span>Error caught ({errors.length})</span>
+			</button>
+		{/if}
+	</div>
+</Modal>

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

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	interface Props {
+		onvisible?: () => void;
+	}
+
+	let { onvisible }: Props = $props();
+
+	let loader: HTMLDivElement | undefined = $state();
+	let observer: IntersectionObserver;
+	let intervalId: ReturnType<typeof setInterval> | undefined;
+
+	onMount(() => {
+		if (!loader) {
+			return;
+		}
+
+		observer = new IntersectionObserver((entries) => {
+			entries.forEach((entry) => {
+				if (entry.isIntersecting) {
+					// Clear any existing interval
+					if (intervalId) {
+						clearInterval(intervalId);
+					}
+					// Start new interval that dispatches every 250ms
+					intervalId = setInterval(() => {
+						onvisible?.();
+					}, 250);
+				} else {
+					// Clear interval when not intersecting
+					if (intervalId) {
+						clearInterval(intervalId);
+						intervalId = undefined;
+					}
+				}
+			});
+		});
+
+		observer.observe(loader);
+
+		return () => {
+			observer.disconnect();
+			if (intervalId) {
+				clearInterval(intervalId);
+			}
+		};
+	});
+</script>
+
+<div bind:this={loader} class="h-2"></div>

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>