ruflo 3.5.1 → 3.5.3

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

@@ -0,0 +1,273 @@
+<script lang="ts">
+	import { MessageToolUpdateType, type MessageToolUpdate } from "$lib/types/MessageUpdate";
+	import {
+		isMessageToolCallUpdate,
+		isMessageToolErrorUpdate,
+		isMessageToolProgressUpdate,
+		isMessageToolResultUpdate,
+	} from "$lib/utils/messageUpdates";
+	import { formatToolProgressLabel } from "$lib/utils/toolProgress";
+	import LucideHammer from "~icons/lucide/hammer";
+	import LucideCheck from "~icons/lucide/check";
+	import { ToolResultStatus, type ToolFront } from "$lib/types/Tool";
+	import { page } from "$app/state";
+	import CarbonChevronRight from "~icons/carbon/chevron-right";
+	import BlockWrapper from "./BlockWrapper.svelte";
+
+	interface Props {
+		tool: MessageToolUpdate[];
+		loading?: boolean;
+		hasNext?: boolean;
+	}
+
+	let { tool, loading = false, hasNext = false }: Props = $props();
+
+	let isOpen = $state(false);
+
+	let toolFnName = $derived(tool.find(isMessageToolCallUpdate)?.call.name);
+	let toolError = $derived(tool.some(isMessageToolErrorUpdate));
+	let toolDone = $derived(tool.some(isMessageToolResultUpdate));
+	let isExecuting = $derived(!toolDone && !toolError && loading);
+	let toolSuccess = $derived(toolDone && !toolError);
+	let toolProgress = $derived.by(() => {
+		for (let i = tool.length - 1; i >= 0; i -= 1) {
+			const update = tool[i];
+			if (isMessageToolProgressUpdate(update)) return update;
+		}
+		return undefined;
+	});
+	let progressLabel = $derived.by(() => formatToolProgressLabel(toolProgress));
+
+	const availableTools: ToolFront[] = $derived.by(
+		() => (page.data as { tools?: ToolFront[] } | undefined)?.tools ?? []
+	);
+
+	type ToolOutput = Record<string, unknown>;
+	type McpImageContent = {
+		type: "image";
+		data: string;
+		mimeType: string;
+	};
+
+	const formatValue = (value: unknown): string => {
+		if (value == null) return "";
+		if (typeof value === "object") {
+			try {
+				return JSON.stringify(value, null, 2);
+			} catch {
+				return String(value);
+			}
+		}
+		return String(value);
+	};
+
+	const getOutputText = (output: ToolOutput): string | undefined => {
+		const maybeText = output["text"];
+		if (typeof maybeText !== "string") return undefined;
+		return maybeText;
+	};
+
+	const isImageBlock = (value: unknown): value is McpImageContent => {
+		if (typeof value !== "object" || value === null) return false;
+		const obj = value as Record<string, unknown>;
+		return (
+			obj["type"] === "image" &&
+			typeof obj["data"] === "string" &&
+			typeof obj["mimeType"] === "string"
+		);
+	};
+
+	const getImageBlocks = (output: ToolOutput): McpImageContent[] => {
+		const blocks = output["content"];
+		if (!Array.isArray(blocks)) return [];
+		return blocks.filter(isImageBlock);
+	};
+
+	const getMetadataEntries = (output: ToolOutput): Array<[string, unknown]> => {
+		return Object.entries(output).filter(
+			([key, value]) => value != null && key !== "content" && key !== "text"
+		);
+	};
+
+	interface ParsedToolOutput {
+		text?: string;
+		images: McpImageContent[];
+		metadata: Array<[string, unknown]>;
+	}
+
+	const parseToolOutputs = (outputs: ToolOutput[]): ParsedToolOutput[] =>
+		outputs.map((output) => ({
+			text: getOutputText(output),
+			images: getImageBlocks(output),
+			metadata: getMetadataEntries(output),
+		}));
+
+	// Icon styling based on state
+	let iconBg = $derived(
+		toolError ? "bg-red-100 dark:bg-red-900/40" : "bg-purple-100 dark:bg-purple-900/40"
+	);
+
+	let iconRing = $derived(
+		toolError ? "ring-red-200 dark:ring-red-500/30" : "ring-purple-200 dark:ring-purple-500/30"
+	);
+</script>
+
+{#snippet icon()}
+	{#if toolSuccess}
+		<LucideCheck class="size-3.5 text-purple-600 dark:text-purple-400" />
+	{:else}
+		<LucideHammer
+			class="size-3.5 {toolError
+				? 'text-red-500 dark:text-red-400'
+				: 'text-purple-600 dark:text-purple-400'}"
+		/>
+	{/if}
+{/snippet}
+
+{#if toolFnName}
+	<BlockWrapper {icon} {iconBg} {iconRing} {hasNext} loading={isExecuting}>
+		<!-- Header row -->
+		<div class="flex w-full select-none items-center gap-2">
+			<button
+				type="button"
+				class="flex flex-1 cursor-pointer flex-col items-start gap-1 text-left"
+				onclick={() => (isOpen = !isOpen)}
+			>
+				<span
+					class="text-sm font-medium {isExecuting
+						? 'text-purple-700 dark:text-purple-300'
+						: toolError
+							? 'text-red-600 dark:text-red-400'
+							: 'text-gray-700 dark:text-gray-300'}"
+				>
+					{toolError ? "Error calling" : toolDone ? "Called" : "Calling"} tool
+					<code
+						class="rounded bg-gray-100 px-1.5 py-0.5 font-mono text-xs text-gray-500 opacity-90 dark:bg-gray-800 dark:text-gray-400"
+					>
+						{availableTools.find((entry) => entry.name === toolFnName)?.displayName ?? toolFnName}
+					</code>
+				</span>
+				{#if isExecuting && toolProgress}
+					<span class="text-xs text-gray-500 dark:text-gray-400">{progressLabel}</span>
+				{/if}
+			</button>
+
+			<button
+				type="button"
+				class="cursor-pointer"
+				onclick={() => (isOpen = !isOpen)}
+				aria-label={isOpen ? "Collapse" : "Expand"}
+			>
+				<CarbonChevronRight
+					class="size-4 text-gray-400 transition-transform duration-200 {isOpen ? 'rotate-90' : ''}"
+				/>
+			</button>
+		</div>
+
+		<!-- Expandable content -->
+		{#if isOpen}
+			<div class="mt-2 space-y-3">
+				{#each tool as update, i (`${update.subtype}-${i}`)}
+					{#if update.subtype === MessageToolUpdateType.Call}
+						<div class="space-y-1">
+							<div
+								class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500"
+							>
+								Input
+							</div>
+							<div
+								class="rounded-md border border-gray-100 bg-white p-2 text-gray-500 dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-400"
+							>
+								<pre class="whitespace-pre-wrap break-all font-mono text-xs">{formatValue(
+										update.call.parameters
+									)}</pre>
+							</div>
+						</div>
+					{:else if update.subtype === MessageToolUpdateType.Error}
+						<div class="space-y-1">
+							<div
+								class="text-[10px] font-semibold uppercase tracking-wider text-red-500 dark:text-red-400"
+							>
+								Error
+							</div>
+							<div
+								class="rounded-md border border-red-200 bg-red-50 p-2 text-red-600 dark:border-red-500/30 dark:bg-red-900/20 dark:text-red-400"
+							>
+								<pre class="whitespace-pre-wrap break-all font-mono text-xs">{update.message}</pre>
+							</div>
+						</div>
+					{:else if isMessageToolResultUpdate(update) && update.result.status === ToolResultStatus.Success && update.result.display}
+						<div class="space-y-1">
+							<div class="flex items-center gap-2">
+								<div
+									class="text-[10px] font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500"
+								>
+									Output
+								</div>
+								<svg
+									xmlns="http://www.w3.org/2000/svg"
+									width="12"
+									height="12"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									stroke-width="2"
+									stroke-linecap="round"
+									stroke-linejoin="round"
+									class="text-emerald-500"
+								>
+									<circle cx="12" cy="12" r="10"></circle>
+									<path d="m9 12 2 2 4-4"></path>
+								</svg>
+							</div>
+							<div
+								class="scrollbar-custom rounded-md border border-gray-100 bg-white p-2 text-gray-500 dark:border-gray-700 dark:bg-gray-800/50 dark:text-gray-400"
+							>
+								{#each parseToolOutputs(update.result.outputs) as parsedOutput}
+									<div class="space-y-2">
+										{#if parsedOutput.text}
+											<pre
+												class="scrollbar-custom max-h-60 overflow-y-auto whitespace-pre-wrap break-all font-mono text-xs">{parsedOutput.text}</pre>
+										{/if}
+
+										{#if parsedOutput.images.length > 0}
+											<div class="flex flex-wrap gap-2">
+												{#each parsedOutput.images as image, imageIndex}
+													<img
+														alt={`Tool result image ${imageIndex + 1}`}
+														class="max-h-60 cursor-pointer rounded border border-gray-200 dark:border-gray-700"
+														src={`data:${image.mimeType};base64,${image.data}`}
+													/>
+												{/each}
+											</div>
+										{/if}
+
+										{#if parsedOutput.metadata.length > 0}
+											<pre class="whitespace-pre-wrap break-all font-mono text-xs">{formatValue(
+													Object.fromEntries(parsedOutput.metadata)
+												)}</pre>
+										{/if}
+									</div>
+								{/each}
+							</div>
+						</div>
+					{:else if isMessageToolResultUpdate(update) && update.result.status === ToolResultStatus.Error && update.result.display}
+						<div class="space-y-1">
+							<div
+								class="text-[10px] font-semibold uppercase tracking-wider text-red-500 dark:text-red-400"
+							>
+								Error
+							</div>
+							<div
+								class="rounded-md border border-red-200 bg-red-50 p-2 text-red-600 dark:border-red-500/30 dark:bg-red-900/20 dark:text-red-400"
+							>
+								<pre class="whitespace-pre-wrap break-all font-mono text-xs">{update.result
+										.message}</pre>
+							</div>
+						</div>
+					{/if}
+				{/each}
+			</div>
+		{/if}
+	</BlockWrapper>
+{/if}

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

@@ -0,0 +1,253 @@
+<script lang="ts">
+	import { page } from "$app/state";
+	import type { MessageFile } from "$lib/types/Message";
+	import CarbonClose from "~icons/carbon/close";
+	import CarbonDocumentBlank from "~icons/carbon/document-blank";
+	import CarbonDownload from "~icons/carbon/download";
+	import CarbonDocument from "~icons/carbon/document";
+	import Modal from "../Modal.svelte";
+	import AudioPlayer from "../players/AudioPlayer.svelte";
+	import EosIconsLoading from "~icons/eos-icons/loading";
+	import { base } from "$app/paths";
+	import { TEXT_MIME_ALLOWLIST } from "$lib/constants/mime";
+
+	interface Props {
+		file: MessageFile;
+		canClose?: boolean;
+		onclose?: () => void;
+	}
+
+	let { file, canClose = true, onclose }: Props = $props();
+
+	let showModal = $state(false);
+
+	// Capture URL once at component creation to prevent reactive updates during navigation
+	let urlNotTrailing = page.url.pathname.replace(/\/$/, "");
+
+	function truncateMiddle(text: string, maxLength: number): string {
+		if (text.length <= maxLength) {
+			return text;
+		}
+
+		const halfLength = Math.floor((maxLength - 1) / 2);
+		const start = text.substring(0, halfLength);
+		const end = text.substring(text.length - halfLength);
+
+		return `${start}…${end}`;
+	}
+
+	const isImage = (mime: string) =>
+		mime.startsWith("image/") || mime === "webp" || mime === "jpeg" || mime === "png";
+
+	const isAudio = (mime: string) =>
+		mime.startsWith("audio/") || mime === "mp3" || mime === "wav" || mime === "x-wav";
+	const isVideo = (mime: string) =>
+		mime.startsWith("video/") || mime === "mp4" || mime === "x-mpeg";
+
+	function matchesAllowed(contentType: string, allowed: readonly string[]): boolean {
+		const ct = contentType.split(";")[0]?.trim().toLowerCase();
+		if (!ct) return false;
+		const [ctType, ctSubtype] = ct.split("/");
+		for (const a of allowed) {
+			const [aType, aSubtype] = a.toLowerCase().split("/");
+			const typeOk = aType === "*" || aType === ctType;
+			const subOk = aSubtype === "*" || aSubtype === ctSubtype;
+			if (typeOk && subOk) return true;
+		}
+		return false;
+	}
+
+	const isPlainText = (mime: string) =>
+		mime === "application/vnd.chatui.clipboard" || matchesAllowed(mime, TEXT_MIME_ALLOWLIST);
+
+	let isClickable = $derived(isImage(file.mime) || isPlainText(file.mime));
+</script>
+
+{#if showModal && isClickable}
+	<!-- show the image file full screen, click outside to exit -->
+	<Modal width="xl:max-w-[75dvw]" onclose={() => (showModal = false)}>
+		{#if isImage(file.mime)}
+			{#if file.type === "hash"}
+				<img
+					src={urlNotTrailing + "/output/" + file.value}
+					alt="input from user"
+					class="aspect-auto"
+				/>
+			{:else}
+				<!-- handle the case where this is a base64 encoded image -->
+				<img
+					src={`data:${file.mime};base64,${file.value}`}
+					alt="input from user"
+					class="aspect-auto"
+				/>
+			{/if}
+		{:else if isPlainText(file.mime)}
+			<div class="relative flex h-full w-full flex-col gap-2 p-4">
+				<div class="flex items-center gap-1">
+					<CarbonDocument />
+					<h3 class="text-lg font-semibold">{file.name}</h3>
+				</div>
+				{#if file.mime === "application/vnd.chatui.clipboard"}
+					<p class="text-sm text-gray-500">
+						If you prefer to inject clipboard content directly in the chat, you can disable this
+						feature in the
+						<a href={`${base}/settings`} class="underline">settings page</a>.
+					</p>
+				{/if}
+				<button
+					class="absolute right-4 top-4 text-xl text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-white"
+					onclick={() => (showModal = false)}
+				>
+					<CarbonClose class="text-xl" />
+				</button>
+				{#if file.type === "hash"}
+					{#await fetch(urlNotTrailing + "/output/" + file.value).then((res) => res.text())}
+						<div class="flex h-full w-full items-center justify-center">
+							<EosIconsLoading class="text-xl" />
+						</div>
+					{:then result}
+						<pre
+							class="w-full whitespace-pre-wrap break-words pt-0 text-xs"
+							class:font-sans={file.mime === "text/plain" ||
+								file.mime === "application/vnd.chatui.clipboard"}
+							class:font-mono={file.mime !== "text/plain" &&
+								file.mime !== "application/vnd.chatui.clipboard"}>{result}</pre>
+					{/await}
+				{:else}
+					<pre
+						class="w-full whitespace-pre-wrap break-words pt-0 text-xs"
+						class:font-sans={file.mime === "text/plain" ||
+							file.mime === "application/vnd.chatui.clipboard"}
+						class:font-mono={file.mime !== "text/plain" &&
+							file.mime !== "application/vnd.chatui.clipboard"}>{atob(file.value)}</pre>
+				{/if}
+			</div>
+		{/if}
+	</Modal>
+{/if}
+
+<div
+	onclick={() => isClickable && (showModal = true)}
+	onkeydown={(e) => {
+		if (!isClickable) {
+			return;
+		}
+		if (e.key === "Enter" || e.key === " ") {
+			showModal = true;
+		}
+	}}
+	class:clickable={isClickable}
+	role="button"
+	tabindex="0"
+>
+	<div class="group relative flex items-center rounded-xl shadow-sm">
+		{#if isImage(file.mime)}
+			<div class="h-36 overflow-hidden rounded-xl">
+				<img
+					src={file.type === "base64"
+						? `data:${file.mime};base64,${file.value}`
+						: urlNotTrailing + "/output/" + file.value}
+					alt={file.name}
+					class="h-36 bg-gray-200 object-cover dark:bg-gray-800"
+				/>
+			</div>
+		{:else if isAudio(file.mime)}
+			<AudioPlayer
+				src={file.type === "base64"
+					? `data:${file.mime};base64,${file.value}`
+					: urlNotTrailing + "/output/" + file.value}
+				name={truncateMiddle(file.name, 28)}
+			/>
+		{:else if isVideo(file.mime)}
+			<div
+				class="border-1 w-72 overflow-clip rounded-xl border-gray-200 bg-white dark:border-gray-800 dark:bg-gray-900"
+			>
+				<!-- svelte-ignore a11y_media_has_caption -->
+				<video
+					src={file.type === "base64"
+						? `data:${file.mime};base64,${file.value}`
+						: urlNotTrailing + "/output/" + file.value}
+					controls
+				></video>
+			</div>
+		{:else if isPlainText(file.mime)}
+			<div
+				class="flex h-14 w-64 items-center gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-2 dark:border-gray-800 dark:bg-gray-900 2xl:w-72"
+				class:file-hoverable={isClickable}
+			>
+				<div
+					class="grid size-10 flex-none place-items-center rounded-lg bg-gray-100 dark:bg-gray-800"
+				>
+					<CarbonDocument class="text-base text-gray-700 dark:text-gray-300" />
+				</div>
+				<dl class="flex flex-col items-start truncate leading-tight">
+					<dd class="text-sm">
+						{truncateMiddle(file.name, 28)}
+					</dd>
+					{#if file.mime === "application/vnd.chatui.clipboard"}
+						<dt class="text-xs text-gray-400">Clipboard source</dt>
+					{:else}
+						<dt class="text-xs text-gray-400">{file.mime}</dt>
+					{/if}
+				</dl>
+			</div>
+		{:else if file.mime === "application/octet-stream"}
+			<div
+				class="flex h-14 w-72 items-center gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-2 dark:border-gray-800 dark:bg-gray-900"
+				class:file-hoverable={isClickable}
+			>
+				<div
+					class="grid size-10 flex-none place-items-center rounded-lg bg-gray-100 dark:bg-gray-800"
+				>
+					<CarbonDocumentBlank class="text-base text-gray-700 dark:text-gray-300" />
+				</div>
+				<dl class="flex flex-grow flex-col truncate leading-tight">
+					<dd class="text-sm">
+						{truncateMiddle(file.name, 28)}
+					</dd>
+					<dt class="text-xs text-gray-400">File type could not be determined</dt>
+				</dl>
+				<a
+					href={file.type === "base64"
+						? `data:application/octet-stream;base64,${file.value}`
+						: urlNotTrailing + "/output/" + file.value}
+					download={file.name}
+					class="ml-auto flex-none"
+				>
+					<CarbonDownload class="text-base text-gray-700 dark:text-gray-300" />
+				</a>
+			</div>
+		{:else}
+			<div
+				class="flex h-14 w-72 items-center gap-2 overflow-hidden rounded-xl border border-gray-200 bg-white p-2 dark:border-gray-800 dark:bg-gray-900"
+				class:file-hoverable={isClickable}
+			>
+				<div
+					class="grid size-10 flex-none place-items-center rounded-lg bg-gray-100 dark:bg-gray-800"
+				>
+					<CarbonDocumentBlank class="text-base text-gray-700 dark:text-gray-300" />
+				</div>
+				<dl class="flex flex-col items-start truncate leading-tight">
+					<dd class="text-sm">
+						{truncateMiddle(file.name, 28)}
+					</dd>
+					<dt class="text-xs text-gray-400">{file.mime}</dt>
+				</dl>
+			</div>
+		{/if}
+		<!-- add a button on top that removes the image -->
+		{#if canClose}
+			<button
+				class="absolute -right-2 -top-2 z-10 grid size-6 place-items-center rounded-full border bg-black group-hover:visible dark:border-gray-700"
+				class:invisible={navigator.maxTouchPoints === 0}
+				onclick={(e) => {
+					e.preventDefault();
+					e.stopPropagation();
+					onclose?.();
+				}}
+			>
+				<CarbonClose class=" text-xs  text-white" />
+			</button>
+		{/if}
+	</div>
+</div>