ruflo 3.6.30 → 3.7.0-alpha.10

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

@@ -1,92 +1,92 @@
-<script lang="ts">
-	import { onDestroy } from "svelte";
-	import { confirm as hapticConfirm } from "$lib/utils/haptics";
-
-	import CarbonCopy from "~icons/carbon/copy";
-	import Tooltip from "./Tooltip.svelte";
-
-	interface Props {
-		classNames?: string;
-		iconClassNames?: string;
-		value: string;
-		children?: import("svelte").Snippet;
-		onClick?: () => void;
-		showTooltip?: boolean;
-	}
-
-	let {
-		classNames = "",
-		iconClassNames = "",
-		value,
-		children,
-		onClick,
-		showTooltip = true,
-	}: Props = $props();
-
-	let isSuccess = $state(false);
-	let timeout: ReturnType<typeof setTimeout>;
-
-	const unsecuredCopy = (text: string) => {
-		//Old or insecure browsers
-
-		const textArea = document.createElement("textarea");
-		textArea.value = text;
-		document.body.appendChild(textArea);
-		textArea.focus();
-		textArea.select();
-		document.execCommand("copy");
-		document.body.removeChild(textArea);
-
-		return Promise.resolve();
-	};
-
-	const copy = async (text: string) => {
-		if (window.isSecureContext && navigator.clipboard) {
-			return navigator.clipboard.writeText(text);
-		}
-		return unsecuredCopy(text);
-	};
-
-	const handleClick = async () => {
-		try {
-			await copy(value);
-			hapticConfirm();
-
-			isSuccess = true;
-			if (timeout) {
-				clearTimeout(timeout);
-			}
-			timeout = setTimeout(() => {
-				isSuccess = false;
-			}, 1000);
-		} catch (err) {
-			console.error(err);
-		}
-	};
-
-	onDestroy(() => {
-		if (timeout) {
-			clearTimeout(timeout);
-		}
-	});
-</script>
-
-<button
-	class={classNames}
-	title={"Copy to clipboard"}
-	type="button"
-	onclick={() => {
-		onClick?.();
-		handleClick();
-	}}
->
-	<div class="relative">
-		{#if children}{@render children()}{:else}
-			<CarbonCopy class={iconClassNames} />
-		{/if}
-
-		{#if showTooltip}
-			<Tooltip classNames={isSuccess ? "opacity-100" : "opacity-0"} />
-		{/if}
-	</div>
-</button>
+<script lang="ts">
+	import { onDestroy } from "svelte";
+	import { confirm as hapticConfirm } from "$lib/utils/haptics";
+
+	import CarbonCopy from "~icons/carbon/copy";
+	import Tooltip from "./Tooltip.svelte";
+
+	interface Props {
+		classNames?: string;
+		iconClassNames?: string;
+		value: string;
+		children?: import("svelte").Snippet;
+		onClick?: () => void;
+		showTooltip?: boolean;
+	}
+
+	let {
+		classNames = "",
+		iconClassNames = "",
+		value,
+		children,
+		onClick,
+		showTooltip = true,
+	}: Props = $props();
+
+	let isSuccess = $state(false);
+	let timeout: ReturnType<typeof setTimeout>;
+
+	const unsecuredCopy = (text: string) => {
+		//Old or insecure browsers
+
+		const textArea = document.createElement("textarea");
+		textArea.value = text;
+		document.body.appendChild(textArea);
+		textArea.focus();
+		textArea.select();
+		document.execCommand("copy");
+		document.body.removeChild(textArea);
+
+		return Promise.resolve();
+	};
+
+	const copy = async (text: string) => {
+		if (window.isSecureContext && navigator.clipboard) {
+			return navigator.clipboard.writeText(text);
+		}
+		return unsecuredCopy(text);
+	};
+
+	const handleClick = async () => {
+		try {
+			await copy(value);
+			hapticConfirm();
+
+			isSuccess = true;
+			if (timeout) {
+				clearTimeout(timeout);
+			}
+			timeout = setTimeout(() => {
+				isSuccess = false;
+			}, 1000);
+		} catch (err) {
+			console.error(err);
+		}
+	};
+
+	onDestroy(() => {
+		if (timeout) {
+			clearTimeout(timeout);
+		}
+	});
+</script>
+
+<button
+	class={classNames}
+	title={"Copy to clipboard"}
+	type="button"
+	onclick={() => {
+		onClick?.();
+		handleClick();
+	}}
+>
+	<div class="relative">
+		{#if children}{@render children()}{:else}
+			<CarbonCopy class={iconClassNames} />
+		{/if}
+
+		{#if showTooltip}
+			<Tooltip classNames={isSuccess ? "opacity-100" : "opacity-0"} />
+		{/if}
+	</div>
+</button>

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

@@ -1,75 +1,75 @@
-<script lang="ts">
-	import Modal from "$lib/components/Modal.svelte";
-	import { onMount } from "svelte";
-
-	interface Props {
-		open?: boolean;
-		title?: string;
-		onclose?: () => void;
-		ondelete?: () => void;
-	}
-
-	let { open = false, title = "", onclose, ondelete }: Props = $props();
-
-	let deleteButtonEl: HTMLButtonElement | undefined = $state();
-
-	function close() {
-		open = false;
-		onclose?.();
-	}
-
-	function confirmDelete() {
-		ondelete?.();
-		close();
-	}
-
-	onMount(() => {
-		setTimeout(() => {
-			deleteButtonEl?.focus();
-		}, 100);
-	});
-</script>
-
-{#if open}
-	<Modal onclose={close} width="w-[90dvh] md:w-[480px]">
-		<div class="flex w-full flex-col gap-5 p-6">
-			<div class="flex items-start justify-between">
-				<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Delete conversation</h2>
-				<button type="button" class="group outline-none" onclick={close} aria-label="Close">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 32 32"
-						class="size-5 text-gray-700 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-400"
-						><path
-							d="M24 9.41 22.59 8 16 14.59 9.41 8 8 9.41 14.59 16 8 22.59 9.41 24 16 17.41 22.59 24 24 22.59 17.41 16 24 9.41z"
-							fill="currentColor"
-						/></svg
-					>
-				</button>
-			</div>
-
-			<p class="text-sm text-gray-600 dark:text-gray-400">
-				Are you sure you want to delete "<span class="font-semibold">{title}</span>"? This action
-				cannot be undone.
-			</p>
-
-			<div class="flex items-center justify-end gap-2">
-				<button
-					type="button"
-					class="inline-flex items-center rounded-xl border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 shadow outline-none hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
-					onclick={close}
-				>
-					Cancel
-				</button>
-				<button
-					bind:this={deleteButtonEl}
-					type="button"
-					class="inline-flex items-center rounded-xl border border-red-600 bg-red-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 dark:border-red-500 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-400 dark:focus:ring-offset-gray-800"
-					onclick={confirmDelete}
-				>
-					Delete
-				</button>
-			</div>
-		</div>
-	</Modal>
-{/if}
+<script lang="ts">
+	import Modal from "$lib/components/Modal.svelte";
+	import { onMount } from "svelte";
+
+	interface Props {
+		open?: boolean;
+		title?: string;
+		onclose?: () => void;
+		ondelete?: () => void;
+	}
+
+	let { open = false, title = "", onclose, ondelete }: Props = $props();
+
+	let deleteButtonEl: HTMLButtonElement | undefined = $state();
+
+	function close() {
+		open = false;
+		onclose?.();
+	}
+
+	function confirmDelete() {
+		ondelete?.();
+		close();
+	}
+
+	onMount(() => {
+		setTimeout(() => {
+			deleteButtonEl?.focus();
+		}, 100);
+	});
+</script>
+
+{#if open}
+	<Modal onclose={close} width="w-[90dvh] md:w-[480px]">
+		<div class="flex w-full flex-col gap-5 p-6">
+			<div class="flex items-start justify-between">
+				<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Delete conversation</h2>
+				<button type="button" class="group outline-none" onclick={close} aria-label="Close">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 32 32"
+						class="size-5 text-gray-700 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-400"
+						><path
+							d="M24 9.41 22.59 8 16 14.59 9.41 8 8 9.41 14.59 16 8 22.59 9.41 24 16 17.41 22.59 24 24 22.59 17.41 16 24 9.41z"
+							fill="currentColor"
+						/></svg
+					>
+				</button>
+			</div>
+
+			<p class="text-sm text-gray-600 dark:text-gray-400">
+				Are you sure you want to delete "<span class="font-semibold">{title}</span>"? This action
+				cannot be undone.
+			</p>
+
+			<div class="flex items-center justify-end gap-2">
+				<button
+					type="button"
+					class="inline-flex items-center rounded-xl border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 shadow outline-none hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
+					onclick={close}
+				>
+					Cancel
+				</button>
+				<button
+					bind:this={deleteButtonEl}
+					type="button"
+					class="inline-flex items-center rounded-xl border border-red-600 bg-red-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2 dark:border-red-500 dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-400 dark:focus:ring-offset-gray-800"
+					onclick={confirmDelete}
+				>
+					Delete
+				</button>
+			</div>
+		</div>
+	</Modal>
+{/if}

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

@@ -1,100 +1,100 @@
-<script lang="ts">
-	import Modal from "$lib/components/Modal.svelte";
-	import { onMount } from "svelte";
-
-	interface Props {
-		open?: boolean;
-		title?: string;
-		onclose?: () => void;
-		onsave?: (payload: { title: string }) => void;
-	}
-
-	let { open = false, title = "", onclose, onsave }: Props = $props();
-
-	let newTitle = $state(title);
-	let inputEl: HTMLInputElement | undefined = $state();
-
-	$effect(() => {
-		// keep local input in sync if parent changes title while open
-		if (open) {
-			newTitle = title;
-		}
-	});
-
-	function close() {
-		open = false;
-		onclose?.();
-	}
-
-	function save() {
-		const trimmed = (newTitle ?? "").trim();
-		if (!trimmed) return;
-		onsave?.({ title: trimmed });
-		close();
-	}
-
-	onMount(() => {
-		// small delay to ensure modal mounted then focus/select
-		setTimeout(() => {
-			inputEl?.focus();
-			inputEl?.select();
-		}, 0);
-	});
-</script>
-
-{#if open}
-	<Modal onclose={close} width="w-[90dvh] md:w-[480px]">
-		<form
-			class="flex w-full flex-col gap-5 p-6"
-			onsubmit={(e) => {
-				e.preventDefault();
-				save();
-			}}
-		>
-			<div class="flex items-start justify-between">
-				<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Rename conversation</h2>
-				<button type="button" class="group" onclick={close} aria-label="Close">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 32 32"
-						class="size-5 text-gray-700 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-400"
-						><path
-							d="M24 9.41 22.59 8 16 14.59 9.41 8 8 9.41 14.59 16 8 22.59 9.41 24 16 17.41 22.59 24 24 22.59 17.41 16 24 9.41z"
-							fill="currentColor"
-						/></svg
-					>
-				</button>
-			</div>
-
-			<div class="flex flex-col gap-2">
-				<label for="conv-title" class="text-sm text-gray-600 dark:text-gray-400">Title</label>
-				<input
-					autocomplete="off"
-					id="conv-title"
-					bind:this={inputEl}
-					value={newTitle}
-					oninput={(e) => (newTitle = (e.currentTarget as HTMLInputElement).value)}
-					class="w-full rounded-xl border border-gray-200 bg-white px-3 py-2 text-[15px] text-gray-800 outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:ring-gray-700"
-					placeholder="Enter a title"
-				/>
-			</div>
-
-			<div class="flex items-center justify-end gap-2">
-				<button
-					type="button"
-					class="inline-flex items-center rounded-xl border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 shadow hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
-					onclick={close}
-				>
-					Cancel
-				</button>
-				<button
-					type="submit"
-					class="inline-flex items-center rounded-xl border border-gray-900 bg-gray-900 px-3 py-1.5 text-sm font-semibold text-white hover:bg-black disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-100 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
-					disabled={!newTitle?.trim()}
-				>
-					Save
-				</button>
-			</div>
-		</form>
-	</Modal>
-{/if}
+<script lang="ts">
+	import Modal from "$lib/components/Modal.svelte";
+	import { onMount } from "svelte";
+
+	interface Props {
+		open?: boolean;
+		title?: string;
+		onclose?: () => void;
+		onsave?: (payload: { title: string }) => void;
+	}
+
+	let { open = false, title = "", onclose, onsave }: Props = $props();
+
+	let newTitle = $state(title);
+	let inputEl: HTMLInputElement | undefined = $state();
+
+	$effect(() => {
+		// keep local input in sync if parent changes title while open
+		if (open) {
+			newTitle = title;
+		}
+	});
+
+	function close() {
+		open = false;
+		onclose?.();
+	}
+
+	function save() {
+		const trimmed = (newTitle ?? "").trim();
+		if (!trimmed) return;
+		onsave?.({ title: trimmed });
+		close();
+	}
+
+	onMount(() => {
+		// small delay to ensure modal mounted then focus/select
+		setTimeout(() => {
+			inputEl?.focus();
+			inputEl?.select();
+		}, 0);
+	});
+</script>
+
+{#if open}
+	<Modal onclose={close} width="w-[90dvh] md:w-[480px]">
+		<form
+			class="flex w-full flex-col gap-5 p-6"
+			onsubmit={(e) => {
+				e.preventDefault();
+				save();
+			}}
+		>
+			<div class="flex items-start justify-between">
+				<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Rename conversation</h2>
+				<button type="button" class="group" onclick={close} aria-label="Close">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 32 32"
+						class="size-5 text-gray-700 group-hover:text-gray-500 dark:text-gray-300 dark:group-hover:text-gray-400"
+						><path
+							d="M24 9.41 22.59 8 16 14.59 9.41 8 8 9.41 14.59 16 8 22.59 9.41 24 16 17.41 22.59 24 24 22.59 17.41 16 24 9.41z"
+							fill="currentColor"
+						/></svg
+					>
+				</button>
+			</div>
+
+			<div class="flex flex-col gap-2">
+				<label for="conv-title" class="text-sm text-gray-600 dark:text-gray-400">Title</label>
+				<input
+					autocomplete="off"
+					id="conv-title"
+					bind:this={inputEl}
+					value={newTitle}
+					oninput={(e) => (newTitle = (e.currentTarget as HTMLInputElement).value)}
+					class="w-full rounded-xl border border-gray-200 bg-white px-3 py-2 text-[15px] text-gray-800 outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-gray-200 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:ring-gray-700"
+					placeholder="Enter a title"
+				/>
+			</div>
+
+			<div class="flex items-center justify-end gap-2">
+				<button
+					type="button"
+					class="inline-flex items-center rounded-xl border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 shadow hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600"
+					onclick={close}
+				>
+					Cancel
+				</button>
+				<button
+					type="submit"
+					class="inline-flex items-center rounded-xl border border-gray-900 bg-gray-900 px-3 py-1.5 text-sm font-semibold text-white hover:bg-black disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-100 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-white"
+					disabled={!newTitle?.trim()}
+				>
+					Save
+				</button>
+			</div>
+		</form>
+	</Modal>
+{/if}

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

@@ -1,22 +1,22 @@
-<script lang="ts">
-	interface Props {
-		isCollapsed: boolean;
-		onClick: () => void;
-		classNames: string;
-	}
-
-	let { isCollapsed, classNames, onClick }: Props = $props();
-</script>
-
-<button
-	onclick={onClick}
-	title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
-	class="{classNames} group flex h-16 w-6 flex-col items-center justify-center -space-y-1 outline-none *:h-3 *:w-1 *:rounded-full *:hover:bg-gray-400 dark:*:hover:bg-gray-400 max-md:hidden {!isCollapsed
-		? '*:bg-gray-300/70 dark:*:bg-gray-600'
-		: '*:bg-gray-300/70 dark:*:bg-gray-600'}"
-	name="sidebar-toggle"
-	aria-label="Toggle sidebar navigation"
->
-	<div class={!isCollapsed ? "group-hover:rotate-[20deg]" : "group-hover:-rotate-[20deg]"}></div>
-	<div class={!isCollapsed ? "group-hover:-rotate-[20deg]" : "group-hover:rotate-[20deg]"}></div>
-</button>
+<script lang="ts">
+	interface Props {
+		isCollapsed: boolean;
+		onClick: () => void;
+		classNames: string;
+	}
+
+	let { isCollapsed, classNames, onClick }: Props = $props();
+</script>
+
+<button
+	onclick={onClick}
+	title={isCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+	class="{classNames} group flex h-16 w-6 flex-col items-center justify-center -space-y-1 outline-none *:h-3 *:w-1 *:rounded-full *:hover:bg-gray-400 dark:*:hover:bg-gray-400 max-md:hidden {!isCollapsed
+		? '*:bg-gray-300/70 dark:*:bg-gray-600'
+		: '*:bg-gray-300/70 dark:*:bg-gray-600'}"
+	name="sidebar-toggle"
+	aria-label="Toggle sidebar navigation"
+>
+	<div class={!isCollapsed ? "group-hover:rotate-[20deg]" : "group-hover:-rotate-[20deg]"}></div>
+	<div class={!isCollapsed ? "group-hover:-rotate-[20deg]" : "group-hover:rotate-[20deg]"}></div>
+</button>