ruflo 3.5.2 → 3.5.3

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

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import Modal from "./Modal.svelte";
+	import CarbonClose from "~icons/carbon/close";
+	import CarbonBlockchain from "~icons/carbon/blockchain";
+
+	interface Props {
+		preprompt: string;
+	}
+
+	let { preprompt }: Props = $props();
+
+	let isOpen = $state(false);
+</script>
+
+<button
+	type="button"
+	class="mx-auto flex items-center gap-1.5 rounded-full border border-gray-100 bg-gray-50 px-3 py-1 text-xs text-gray-500 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700"
+	onclick={() => (isOpen = !isOpen)}
+	onkeydown={(e) => e.key === "Enter" && (isOpen = !isOpen)}
+>
+	<CarbonBlockchain class="text-xxs" /> Using Custom System Prompt
+</button>
+
+{#if isOpen}
+	<Modal onclose={() => (isOpen = false)} width="w-full !max-w-xl">
+		<div class="flex w-full flex-col gap-5 p-6">
+			<div
+				class="flex items-start justify-between text-xl font-semibold text-gray-800 dark:text-gray-200"
+			>
+				<h2>System Prompt</h2>
+				<button type="button" class="group" onclick={() => (isOpen = false)}>
+					<CarbonClose
+						class="mt-auto text-gray-900 group-hover:text-gray-500 dark:text-gray-200 dark:group-hover:text-gray-400"
+					/>
+				</button>
+			</div>
+			<textarea
+				disabled
+				value={preprompt}
+				class="min-h-[420px] w-full resize-none rounded-lg border bg-gray-50 p-2.5 text-gray-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 max-sm:text-sm"
+			></textarea>
+		</div>
+	</Modal>
+{/if}

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { fade } from "svelte/transition";
+	import Portal from "./Portal.svelte";
+	import IconDazzled from "$lib/components/icons/IconDazzled.svelte";
+
+	interface Props {
+		message?: string;
+	}
+
+	let { message = "" }: Props = $props();
+</script>
+
+<Portal>
+	<div
+		transition:fade|global={{ duration: 300 }}
+		class="pointer-events-none fixed right-0 top-12 z-50 bg-gradient-to-bl from-red-500/20 via-red-500/0 to-red-500/0 pb-36 pl-36 pr-2 pt-2 max-sm:text-sm md:top-0 md:pr-8 md:pt-5"
+	>
+		<div
+			class="pointer-events-auto flex items-center rounded-full bg-white/90 px-3 py-1 shadow-sm dark:bg-gray-900/80"
+		>
+			<IconDazzled classNames="text-2xl mr-2 flex-none" />
+			<h2 class="line-clamp-2 max-w-2xl font-semibold text-gray-800 dark:text-gray-200">
+				{message}
+			</h2>
+		</div>
+	</div>
+</Portal>

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+	interface Props {
+		classNames?: string;
+		label?: string;
+		position?: string;
+	}
+
+	let {
+		classNames = "",
+		label = "Copied",
+		position = "left-1/2 top-full transform -translate-x-1/2 translate-y-2",
+	}: Props = $props();
+</script>
+
+<div
+	class="
+		pointer-events-none absolute rounded bg-black px-2 py-1 font-normal leading-tight text-white shadow transition-opacity
+		{position}
+		{classNames}
+	"
+>
+	<div
+		class="absolute bottom-full left-1/2 h-0 w-0 -translate-x-1/2 transform border-4 border-t-0 border-black"
+		style="
+				border-left-color: transparent;
+				border-right-color: transparent;
+			"
+	></div>
+	{label}
+</div>

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

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import Modal from "$lib/components/Modal.svelte";
+	import RuFloUniverse from "$lib/components/RuFloUniverse.svelte";
+	import { usePublicConfig } from "$lib/utils/PublicConfig.svelte";
+
+	const publicConfig = usePublicConfig();
+
+	interface Props {
+		close: () => void;
+	}
+
+	let { close }: Props = $props();
+</script>
+
+<Modal closeOnBackdrop={false} onclose={close} width="!max-w-[420px] !m-4">
+	<div
+		class="flex w-full flex-col gap-8 bg-white bg-gradient-to-b to-transparent px-6 pb-7 dark:bg-black dark:from-white/10 dark:to-white/5"
+	>
+		<div class="relative -mx-6 h-48 select-none overflow-hidden">
+			<RuFloUniverse width={420} height={192} />
+			<div
+				class="absolute bottom-3 right-3 rounded-lg border border-indigo-500/30 bg-indigo-500/20 px-2 py-0.5 text-sm font-semibold text-indigo-400"
+			>
+				MCP Tools
+			</div>
+		</div>
+
+		<div class="text-gray-700 dark:text-gray-200">
+			<p class="text-[15px] leading-relaxed">
+				Welcome to <strong>{publicConfig.PUBLIC_APP_NAME}</strong>, your intelligent workflow
+				automation assistant.
+			</p>
+			<p class="mt-3 text-[15px] leading-relaxed">
+				Powered by AI models with MCP tool integration for search, analysis, and workflow
+				execution.
+			</p>
+		</div>
+
+		<button
+			class="k w-full rounded-xl bg-indigo-600 px-5 py-2.5 text-base font-medium text-white hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600"
+			onclick={close}
+		>
+			Start chatting
+		</button>
+	</div>
+</Modal>

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

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import type { Message } from "$lib/types/Message";
+	import CarbonChevronLeft from "~icons/carbon/chevron-left";
+	import CarbonChevronRight from "~icons/carbon/chevron-right";
+
+	interface Props {
+		message: Message;
+		alternatives?: Message["id"][];
+		loading?: boolean;
+		classNames?: string;
+		onshowAlternateMsg?: (payload: { id: Message["id"] }) => void;
+	}
+
+	let {
+		message,
+		alternatives = [],
+		loading = false,
+		classNames = "",
+		onshowAlternateMsg,
+	}: Props = $props();
+
+	let currentIdx = $derived(alternatives.findIndex((id) => id === message.id));
+
+	// API client removed as deletion UI is commented out
+</script>
+
+<div
+	class="font-white group/navbranch z-0 flex h-6 w-fit select-none items-center justify-center gap-1 whitespace-nowrap text-sm {classNames}"
+>
+	<button
+		class="inline text-lg font-thin text-gray-400 hover:text-gray-800 disabled:pointer-events-none disabled:opacity-25 dark:text-gray-500 dark:hover:text-gray-200"
+		onclick={() => onshowAlternateMsg?.({ id: alternatives[Math.max(0, currentIdx - 1)] })}
+		disabled={currentIdx === 0 || loading}
+	>
+		<CarbonChevronLeft class="text-sm" />
+	</button>
+	<span class=" text-gray-400 dark:text-gray-500">
+		{currentIdx + 1} / {alternatives.length}
+	</span>
+	<button
+		class="inline text-lg font-thin text-gray-400 hover:text-gray-800 disabled:pointer-events-none disabled:opacity-25 dark:text-gray-500 dark:hover:text-gray-200"
+		onclick={() =>
+			onshowAlternateMsg?.({
+				id: alternatives[Math.min(alternatives.length - 1, currentIdx + 1)],
+			})}
+		disabled={currentIdx === alternatives.length - 1 || loading}
+	>
+		<CarbonChevronRight class="text-sm" />
+	</button>
+	<!-- {#if !loading && message.children}
+		<button
+			class="hidden group-hover/navbranch:block"
+			onclick={() => {
+				if (confirm("Are you sure you want to delete this branch?")) {
+					client
+						.conversations({ id: page.params.id })
+						.message({ messageId: message.id })
+						.delete()
+						.then(handleResponse)
+						.then(async () => {
+							await invalidate(UrlDependency.Conversation);
+						})
+						.catch((err) => {
+							console.error(err);
+							$error = String(err);
+						});
+				}
+			}}
+		>
+			<div
+				class="flex items-center justify-center text-xs text-gray-400 hover:text-gray-800 dark:text-gray-500 dark:hover:text-gray-200"
+			>
+				<CarbonTrashCan />
+			</div>
+		</button>
+	{/if} -->
+</div>

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

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		icon: Snippet;
+		iconBg?: string;
+		iconRing?: string;
+		hasNext?: boolean;
+		loading?: boolean;
+		children: Snippet;
+	}
+
+	let {
+		icon,
+		iconBg = "bg-gray-50 dark:bg-gray-800",
+		iconRing = "ring-gray-100 dark:ring-gray-700",
+		hasNext = false,
+		loading = false,
+		children,
+	}: Props = $props();
+</script>
+
+<div class="group flex gap-2 has-[+.prose]:mb-1.5 [.prose+&]:mt-3">
+	<!-- Left column: icon + connector line -->
+	<div class="flex w-[22px] flex-shrink-0 flex-col items-center">
+		<div
+			class="relative z-0 flex h-[22px] w-[22px] items-center justify-center rounded-md ring-1 {iconBg} {iconRing}"
+		>
+			{@render icon()}
+			{#if loading}
+				<svg
+					class="pointer-events-none absolute inset-0 h-[22px] w-[22px]"
+					viewBox="0 0 22 22"
+					fill="none"
+					xmlns="http://www.w3.org/2000/svg"
+				>
+					<rect
+						x="0.5"
+						y="0.5"
+						width="21"
+						height="21"
+						rx="5.5"
+						class="loading-path stroke-current text-purple-500/20"
+						stroke-width="1"
+						fill="none"
+					/>
+				</svg>
+			{/if}
+		</div>
+		{#if hasNext}
+			<div class="my-1 w-px flex-1 bg-gray-200 dark:bg-gray-700"></div>
+		{/if}
+	</div>
+
+	<!-- Right column: content -->
+	<div class="min-w-0 flex-1 pb-2 pt-px">
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	@keyframes loading {
+		to {
+			stroke-dashoffset: -100;
+		}
+	}
+
+	.loading-path {
+		stroke-dasharray: 60 40;
+		animation: loading 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+	}
+</style>