ruflo 3.5.2 → 3.5.4

package/src/ruvocal/src/lib/components/chat/FileDropzone.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { requireAuthUser } from "$lib/utils/auth";
+	import CarbonImage from "~icons/carbon/image";
+
+	interface Props {
+		// import EosIconsLoading from "~icons/eos-icons/loading";
+		files: File[];
+		mimeTypes?: string[];
+		onDrag?: boolean;
+		onDragInner?: boolean;
+	}
+
+	let {
+		files = $bindable(),
+		mimeTypes = [],
+		onDrag = $bindable(false),
+		onDragInner = $bindable(false),
+	}: Props = $props();
+
+	async function dropHandle(event: DragEvent) {
+		event.preventDefault();
+		if (!requireAuthUser() && event.dataTransfer && event.dataTransfer.items) {
+			// Use DataTransferItemList interface to access the file(s)
+			if (files.length > 0) {
+				files = [];
+			}
+			if (event.dataTransfer.items[0].kind === "file") {
+				for (let i = 0; i < event.dataTransfer.items.length; i++) {
+					const file = event.dataTransfer.items[i].getAsFile();
+
+					if (file) {
+						// check if the file matches the mimeTypes
+						// else abort
+						if (
+							!mimeTypes.some((mimeType: string) => {
+								const [type, subtype] = mimeType.split("/");
+								const [fileType, fileSubtype] = file.type.split("/");
+								return (
+									(type === "*" || type === fileType) &&
+									(subtype === "*" || subtype === fileSubtype)
+								);
+							})
+						) {
+							setErrorMsg(
+								`Some file type not supported. Only allowed: ${mimeTypes.join(
+									", "
+								)}. Uploaded document is of type ${file.type}`
+							);
+							files = [];
+							return;
+						}
+
+						// if file is bigger than 10MB abort
+						if (file.size > 10 * 1024 * 1024) {
+							setErrorMsg("Some file is too big. (10MB max)");
+							files = [];
+							return;
+						}
+
+						// add the file to the files array
+						files = [...files, file];
+
+						// Tools removed: no settings update for document parser
+					}
+				}
+				onDrag = false;
+			}
+		}
+	}
+
+	function setErrorMsg(errorMsg: string) {
+		onDrag = false;
+		alert(errorMsg);
+	}
+</script>
+
+<div
+	id="dropzone"
+	role="form"
+	ondrop={dropHandle}
+	ondragenter={() => (onDragInner = true)}
+	ondragleave={() => (onDragInner = false)}
+	ondragover={(e) => {
+		e.preventDefault();
+	}}
+	class="relative flex h-28 w-full max-w-4xl flex-col items-center justify-center gap-1 rounded-xl border-2 border-dotted {onDragInner
+		? 'border-blue-200 !bg-blue-600/10 text-blue-600 *:pointer-events-none dark:border-blue-600 dark:bg-blue-600/20 dark:text-blue-600'
+		: 'bg-gray-100 text-gray-500 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-400'}"
+>
+	<CarbonImage class="text-xl" />
+	<p>Drop File to add to chat</p>
+</div>

package/src/ruvocal/src/lib/components/chat/ImageLightbox.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import Portal from "../Portal.svelte";
+	import CarbonClose from "~icons/carbon/close";
+
+	interface Props {
+		src: string;
+		onclose: () => void;
+	}
+
+	let { src, onclose }: Props = $props();
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === "Escape") {
+			e.preventDefault();
+			e.stopPropagation();
+			onclose();
+		}
+	}
+
+	function handleOverlayClick(e: MouseEvent) {
+		// Close when clicking the overlay (not the image)
+		if (e.target === e.currentTarget) {
+			onclose();
+		}
+	}
+
+	onMount(() => {
+		// Prevent body scroll while lightbox is open
+		const originalOverflow = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+
+		return () => {
+			document.body.style.overflow = originalOverflow;
+		};
+	});
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<Portal>
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="fixed inset-0 z-50 grid place-items-center bg-black/90 backdrop-blur-sm"
+		onclick={handleOverlayClick}
+	>
+		<!-- Close button -->
+		<button
+			class="absolute right-3 top-3 grid size-8 place-items-center rounded-full border border-white/25 bg-white/20 text-gray-300 hover:bg-white/30 sm:right-6 sm:top-6"
+			onclick={onclose}
+			aria-label="Close"
+		>
+			<CarbonClose />
+		</button>
+
+		<!-- Image with moon-landing's resize strategy -->
+		<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+		<img
+			{src}
+			alt=""
+			class="h-auto max-h-[calc(100vh-160px)] w-auto max-w-full"
+			onclick={(e) => e.stopPropagation()}
+		/>
+	</div>
+</Portal>

package/src/ruvocal/src/lib/components/chat/MarkdownBlock.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Token } from "$lib/utils/marked";
+	import CodeBlock from "../CodeBlock.svelte";
+
+	interface Props {
+		tokens: Token[];
+		loading?: boolean;
+	}
+
+	let { tokens, loading = false }: Props = $props();
+
+	// Derive rendered tokens for memoization
+	const renderedTokens = $derived(tokens);
+</script>
+
+{#each renderedTokens as token}
+	{#if token.type === "text"}
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html token.html}
+	{:else if token.type === "code"}
+		<CodeBlock code={token.code} rawCode={token.rawCode} loading={loading && !token.isClosed} />
+	{/if}
+{/each}

package/src/ruvocal/src/lib/components/chat/MarkdownRenderer.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+	import { processBlocks, processBlocksSync, type BlockToken } from "$lib/utils/marked";
+	import MarkdownWorker from "$lib/workers/markdownWorker?worker";
+	import MarkdownBlock from "./MarkdownBlock.svelte";
+	import { browser } from "$app/environment";
+
+	import { onMount, onDestroy } from "svelte";
+	import { updateDebouncer } from "$lib/utils/updates";
+
+	interface Props {
+		content: string;
+		sources?: { title?: string; link: string }[];
+		loading?: boolean;
+	}
+
+	let { content, sources = [], loading = false }: Props = $props();
+
+	let blocks: BlockToken[] = $state(processBlocksSync(content, sources));
+	let worker: Worker | null = null;
+	let latestRequestId = 0;
+
+	function handleBlocks(result: BlockToken[], requestId: number) {
+		if (requestId !== latestRequestId) return;
+		blocks = result;
+		updateDebouncer.endRender();
+	}
+
+	$effect(() => {
+		if (!browser) {
+			blocks = processBlocksSync(content, sources);
+			return;
+		}
+
+		const requestId = ++latestRequestId;
+
+		if (worker) {
+			updateDebouncer.startRender();
+			worker.postMessage({ type: "process", content, sources, requestId });
+			return;
+		}
+
+		(async () => {
+			updateDebouncer.startRender();
+			const processed = await processBlocks(content, sources);
+			// Only apply if this is still the latest request
+			handleBlocks(processed, requestId);
+		})();
+	});
+
+	onMount(() => {
+		if (typeof Worker !== "undefined") {
+			worker = new MarkdownWorker();
+			worker.onmessage = (event: MessageEvent) => {
+				const data = event.data as { type?: string; blocks?: BlockToken[]; requestId?: number };
+				if (data?.type !== "processed" || !data.blocks || data.requestId === undefined) return;
+				handleBlocks(data.blocks, data.requestId);
+			};
+		}
+	});
+
+	onDestroy(() => {
+		worker?.terminate();
+		worker = null;
+	});
+</script>
+
+{#each blocks as block, index (loading && index === blocks.length - 1 ? `stream-${index}` : block.id)}
+	<MarkdownBlock tokens={block.tokens} {loading} />
+{/each}

package/src/ruvocal/src/lib/components/chat/MarkdownRenderer.svelte.test.ts

@@ -0,0 +1,58 @@
+import MarkdownRenderer from "./MarkdownRenderer.svelte";
+import { render } from "vitest-browser-svelte";
+import { page } from "@vitest/browser/context";
+
+import { describe, expect, it } from "vitest";
+
+describe("MarkdownRenderer", () => {
+	it("renders", () => {
+		render(MarkdownRenderer, { content: "Hello, world!" });
+		expect(page.getByText("Hello, world!")).toBeInTheDocument();
+	});
+	it("renders headings", () => {
+		render(MarkdownRenderer, { content: "# Hello, world!" });
+		expect(page.getByRole("heading", { level: 1 })).toBeInTheDocument();
+	});
+	it("renders links", () => {
+		render(MarkdownRenderer, { content: "[Hello, world!](https://example.com)" });
+		const link = page.getByRole("link", { name: "Hello, world!" });
+		expect(link).toBeInTheDocument();
+		expect(link).toHaveAttribute("href", "https://example.com");
+		expect(link).toHaveAttribute("target", "_blank");
+		expect(link).toHaveAttribute("rel", "noreferrer");
+	});
+	it("renders inline codespans", () => {
+		render(MarkdownRenderer, { content: "`foobar`" });
+		expect(page.getByRole("code")).toHaveTextContent("foobar");
+	});
+	it("renders block codes", () => {
+		render(MarkdownRenderer, { content: "```foobar```" });
+		expect(page.getByRole("code")).toHaveTextContent("foobar");
+	});
+	it("doesnt render raw html directly", () => {
+		render(MarkdownRenderer, { content: "<button>Click me</button>" });
+		expect(page.getByRole("button").elements).toHaveLength(0);
+		// htmlparser2 escapes disallowed tags
+		expect(page.getByRole("paragraph")).toHaveTextContent("<button>Click me</button>");
+	});
+	it("renders latex", () => {
+		const { baseElement } = render(MarkdownRenderer, { content: "$(oo)^2$" });
+		expect(baseElement.querySelectorAll(".katex")).toHaveLength(1);
+	});
+	it("does not render latex in code blocks", () => {
+		const { baseElement } = render(MarkdownRenderer, { content: "```\n$(oo)^2$\n```" });
+		expect(baseElement.querySelectorAll(".katex")).toHaveLength(0);
+	});
+	it("does not render latex in inline codes", () => {
+		const { baseElement } = render(MarkdownRenderer, { content: "`$oo` and `$bar`" });
+		expect(baseElement.querySelectorAll(".katex")).toHaveLength(0);
+	});
+	it("does not render latex across multiple lines", () => {
+		const { baseElement } = render(MarkdownRenderer, { content: "* $oo \n* $aa" });
+		expect(baseElement.querySelectorAll(".katex")).toHaveLength(0);
+	});
+	it("renders latex with some < and > symbols", () => {
+		const { baseElement } = render(MarkdownRenderer, { content: "$foo < bar > baz$" });
+		expect(baseElement.querySelectorAll(".katex")).toHaveLength(1);
+	});
+});

package/src/ruvocal/src/lib/components/chat/MessageAvatar.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { onDestroy } from "svelte";
+
+	let { animating = false, classNames = "" } = $props();
+
+	let blobAnim: SVGAnimateElement | undefined = $state();
+	let svgEl: SVGSVGElement | undefined = $state();
+
+	// Only trigger begin/end on transitions, and pause when not animating
+	let prevAnimating: boolean | undefined = undefined;
+	let prevBlobAnim: SVGAnimateElement | undefined = undefined;
+
+	$effect(() => {
+		if (!blobAnim) return;
+		const blobChanged = blobAnim !== prevBlobAnim;
+		const animChanged = animating !== prevAnimating;
+		if (!(blobChanged || animChanged)) return;
+
+		if (animating) {
+			// Resume animations and start once
+			svgEl?.unpauseAnimations?.();
+			blobAnim.beginElement();
+		} else {
+			// Stop current run and pause so it cannot restart from queued begins
+			blobAnim.endElement();
+			svgEl?.pauseAnimations?.();
+		}
+		prevAnimating = animating;
+		prevBlobAnim = blobAnim;
+	});
+
+	onDestroy(() => {
+		blobAnim?.endElement();
+		svgEl?.pauseAnimations?.();
+	});
+</script>
+
+<svg
+	bind:this={svgEl}
+	class={classNames}
+	id="ball"
+	width="1em"
+	height="1em"
+	viewBox="0 0 12 12"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	aria-label="Ball mask"
+>
+	<g clip-path="url(#a)">
+		<!-- circular mask -->
+		<path d="M12 6A6 6 0 1 0 0 6a6 6 0 0 0 12 0Z" fill="#fff" />
+		<mask id="b" style="mask-type:luminance" x="0" y="0" width="12" height="12">
+			<path d="M12 6A6 6 0 1 0 0 6a6 6 0 0 0 12 0Z" fill="#fff" />
+		</mask>
+
+		<!-- the blurred black shape inside the circular mask -->
+		<g filter="url(#c)" mask="url(#b)">
+			<!-- BASE state (normalized to absolute L commands) -->
+			<path id="blob" fill="#000" d="M11 1 L8 -4 L3 -8 L-6 6 L3 12 L7 11 L6 2 L11 1 Z">
+				<!-- MORPH: base -> mid -> far -> mid -> base -->
+				<animate
+					bind:this={blobAnim}
+					attributeName="d"
+					begin="indefinite"
+					end="indefinite"
+					dur="3.2s"
+					repeatCount="indefinite"
+					fill="remove"
+					calcMode="spline"
+					keyTimes="0; .33; .66; .9; 1"
+					keySplines="
+            .4 0 .2 1;
+            .4 0 .2 1;
+            .4 0 .2 1;
+            .4 0 .2 1"
+					values="
+            M11 1 L8 -4 L3 -8 L-6 6 L3 12 L7 11 L6 2 L11 1 Z;
+            M11 1 L8 -4 L3 -8 L-6 6 L3 12 L5 9  L7 4  L11 1 Z;
+            M11 1 L8 -4 L3 -8 L-6 6 L3 12 L3 6  L5 1  L11 1 Z;
+            M11 1 L8 -4 L3 -8 L-6 6 L3 12 L5 9  L7 4  L11 1 Z;
+            M11 1 L8 -4 L3 -8 L-6 6 L3 12 L7 11 L6 2 L11 1 Z"
+				/>
+			</path>
+		</g>
+	</g>
+
+	<defs>
+		<clipPath id="a"><path fill="#fff" d="M0 0h12v12H0z" /></clipPath>
+		<filter
+			id="c"
+			x="-9.4"
+			y="-10.8"
+			width="23.8"
+			height="26"
+			filterUnits="userSpaceOnUse"
+			color-interpolation-filters="sRGB"
+		>
+			<feFlood flood-opacity="0" result="BackgroundImageFix" />
+			<feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+			<feGaussianBlur stdDeviation="1.6" />
+		</filter>
+	</defs>
+</svg>

package/src/ruvocal/src/lib/components/chat/ModelSwitch.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { invalidateAll } from "$app/navigation";
+	import { page } from "$app/state";
+	import { base } from "$app/paths";
+	import type { Model } from "$lib/types/Model";
+
+	interface Props {
+		models: Model[];
+		currentModel: Model;
+	}
+
+	let { models, currentModel }: Props = $props();
+
+	let selectedModelId = $state(
+		models.map((m) => m.id).includes(currentModel.id) ? currentModel.id : models[0].id
+	);
+
+	async function handleModelChange() {
+		if (!page.params.id) return;
+
+		try {
+			const response = await fetch(`${base}/conversation/${page.params.id}`, {
+				method: "PATCH",
+				headers: {
+					"Content-Type": "application/json",
+				},
+				body: JSON.stringify({ model: selectedModelId }),
+			});
+
+			if (!response.ok) {
+				throw new Error("Failed to update model");
+			}
+
+			await invalidateAll();
+		} catch (error) {
+			console.error(error);
+		}
+	}
+</script>
+
+<div
+	class="mx-auto mt-0 flex w-fit flex-col items-center justify-center gap-2 rounded-lg border border-gray-200 bg-gray-500/20 p-4 dark:border-gray-800"
+>
+	<span>
+		This model is no longer available. Switch to a new one to continue this conversation:
+	</span>
+	<div class="flex items-center space-x-2">
+		<select
+			bind:value={selectedModelId}
+			class="rounded-md bg-gray-100 px-2 py-1 dark:bg-gray-900 max-sm:max-w-32"
+		>
+			{#each models as model}
+				<option value={model.id}>{model.name}</option>
+			{/each}
+		</select>
+		<button
+			onclick={handleModelChange}
+			disabled={selectedModelId === currentModel.id}
+			class="rounded-md bg-gray-100 px-2 py-1 dark:bg-gray-900"
+		>
+			Accept
+		</button>
+	</div>
+</div>

package/src/ruvocal/src/lib/components/chat/OpenReasoningResults.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import MarkdownRenderer from "./MarkdownRenderer.svelte";
+	import BlockWrapper from "./BlockWrapper.svelte";
+
+	interface Props {
+		content: string;
+		loading?: boolean;
+		hasNext?: boolean;
+	}
+
+	let { content, loading = false, hasNext = false }: Props = $props();
+	let isOpen = $state(false);
+	let wasLoading = $state(false);
+	let initialized = $state(false);
+
+	// Track loading transitions to auto-expand/collapse
+	$effect(() => {
+		// Auto-expand on first render if already loading
+		if (!initialized) {
+			initialized = true;
+			if (loading) {
+				isOpen = true;
+				wasLoading = true;
+				return;
+			}
+		}
+
+		if (loading && !wasLoading) {
+			// Loading started - auto-expand
+			isOpen = true;
+		} else if (!loading && wasLoading) {
+			// Loading finished - auto-collapse
+			isOpen = false;
+		}
+		wasLoading = loading;
+	});
+</script>
+
+{#snippet icon()}
+	<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 32 32">
+		<path
+			class="stroke-gray-500 dark:stroke-gray-400"
+			style="stroke-width: 1.9; fill: none; stroke-linecap: round; stroke-linejoin: round;"
+			d="M16 6v3.33M16 6c0-2.65 3.25-4.3 5.4-2.62 1.2.95 1.6 2.65.95 4.04a3.63 3.63 0 0 1 4.61.16 3.45 3.45 0 0 1 .46 4.37 5.32 5.32 0 0 1 1.87 4.75c-.22 1.66-1.39 3.6-3.07 4.14M16 6c0-2.65-3.25-4.3-5.4-2.62a3.37 3.37 0 0 0-.95 4.04 3.65 3.65 0 0 0-4.6.16 3.37 3.37 0 0 0-.49 4.27 5.57 5.57 0 0 0-1.85 4.85 5.3 5.3 0 0 0 3.07 4.15M16 9.33v17.34m0-17.34c0 2.18 1.82 4 4 4m6.22 7.5c.67 1.3.56 2.91-.27 4.11a4.05 4.05 0 0 1-4.62 1.5c0 1.53-1.05 2.9-2.66 2.9A2.7 2.7 0 0 1 16 26.66m10.22-5.83a4.05 4.05 0 0 0-3.55-2.17m-16.9 2.18a4.05 4.05 0 0 0 .28 4.1c1 1.44 2.92 2.09 4.59 1.5 0 1.52 1.12 2.88 2.7 2.88A2.7 2.7 0 0 0 16 26.67M5.78 20.85a4.04 4.04 0 0 1 3.55-2.18"
+		/>
+	</svg>
+{/snippet}
+
+<BlockWrapper
+	{icon}
+	{hasNext}
+	iconBg="bg-gray-100 dark:bg-gray-700"
+	iconRing="ring-gray-200 dark:ring-gray-600"
+>
+	<!-- Collapsed view (clickable to expand) -->
+	<button
+		type="button"
+		class="group/text w-full cursor-pointer text-left"
+		onclick={() => (isOpen = !isOpen)}
+	>
+		{#if isOpen}
+			<!-- Expanded: show full content -->
+			<div
+				class="prose prose-sm max-w-none text-sm leading-relaxed text-gray-500 dark:prose-invert dark:text-gray-400"
+			>
+				<MarkdownRenderer {content} {loading} />
+			</div>
+		{:else}
+			<!-- Collapsed: 2-line preview (plain text, strip markdown) -->
+			<div
+				class="line-clamp-2 max-h-[3.25em] text-sm leading-relaxed text-gray-500 dark:text-gray-400"
+				class:animate-pulse={loading}
+			>
+				{content
+					.replace(/[#*`~[\]]/g, "")
+					.replace(/\n+/g, " ")
+					.trim()}
+			</div>
+		{/if}
+	</button>
+</BlockWrapper>

package/src/ruvocal/src/lib/components/chat/TaskGroup.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	import type { MessageToolUpdate } from "$lib/types/MessageUpdate";
+	import ToolUpdate from "./ToolUpdate.svelte";
+	import CarbonChevronDown from "~icons/carbon/chevron-down";
+
+	interface ToolBlock {
+		uuid: string;
+		updates: MessageToolUpdate[];
+	}
+
+	interface Props {
+		step: number;
+		tools: ToolBlock[];
+		loading?: boolean;
+	}
+
+	let { step, tools, loading = false }: Props = $props();
+
+	let isCollapsed = $state(false);
+
+	let allDone = $derived(
+		tools.every((t) =>
+			t.updates.some(
+				(u) =>
+					("subtype" in u && u.subtype === "result") || ("subtype" in u && u.subtype === "error")
+			)
+		)
+	);
+
+	// Auto-collapse completed groups after 1.5s
+	$effect(() => {
+		if (allDone && !loading) {
+			const timer = setTimeout(() => {
+				isCollapsed = true;
+			}, 1500);
+			return () => clearTimeout(timer);
+		}
+	});
+</script>
+
+<div
+	class="my-2 rounded-lg border {allDone
+		? 'border-emerald-200 bg-emerald-50/50 dark:border-emerald-800/50 dark:bg-emerald-950/20'
+		: 'border-blue-200 bg-blue-50/50 dark:border-blue-800/50 dark:bg-blue-950/20'}"
+	data-exclude-from-copy
+>
+	<!-- Header -->
+	<button
+		onclick={() => (isCollapsed = !isCollapsed)}
+		class="flex w-full items-center gap-2 px-3 py-1.5 text-xs font-medium {allDone
+			? 'text-emerald-700 dark:text-emerald-400'
+			: 'text-blue-700 dark:text-blue-400'}"
+	>
+		<span
+			class="flex size-5 items-center justify-center rounded-full text-[10px] font-bold text-white {allDone
+				? 'bg-emerald-500'
+				: 'bg-blue-500'}"
+		>
+			{step}
+		</span>
+
+		{#if loading && !allDone}
+			<span class="inline-block size-3 animate-spin rounded-full border-2 border-blue-400 border-t-transparent"></span>
+			<span>Running {tools.length} tool{tools.length > 1 ? "s" : ""} in parallel...</span>
+		{:else if allDone}
+			<span>Step {step} — {tools.length} tool{tools.length > 1 ? "s" : ""} completed</span>
+		{:else}
+			<span>Step {step} — {tools.length} tool{tools.length > 1 ? "s" : ""}</span>
+		{/if}
+
+		<CarbonChevronDown
+			class="ml-auto size-3.5 transition-transform {isCollapsed ? '-rotate-90' : ''}"
+		/>
+	</button>
+
+	<!-- Content -->
+	{#if !isCollapsed}
+		<div class="space-y-1 px-2 pb-2">
+			{#each tools as tool, i}
+				<ToolUpdate
+					tool={tool.updates}
+					{loading}
+					hasNext={i < tools.length - 1}
+				/>
+			{/each}
+		</div>
+	{/if}
+</div>