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

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

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

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

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