ruflo 3.7.0-alpha.11 → 3.7.0-alpha.13

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

@@ -1,92 +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>
+<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

@@ -1,66 +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>
+<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

@@ -1,23 +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}
+<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

@@ -1,69 +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}
+<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

@@ -1,58 +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);
-	});
-});
+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);
+	});
+});