Share projects (#71)

package.json

@@ -37,7 +37,7 @@
 		"globals": "^16.0.0",
 		"highlight.js": "^11.10.0",
 		"jiti": "^2.4.2",
-		"melt": "^0.20.2",
+		"melt": "^0.21.0",
 		"postcss": "^8.4.38",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.2.6",

pnpm-lock.yaml

@@ -85,8 +85,8 @@ importers:
         specifier: ^2.4.2
         version: 2.4.2
       melt:
-        specifier: ^0.20.2
-        version: 0.20.2(@floating-ui/[email protected])([email protected])
+        specifier: ^0.21.0
+        version: 0.21.0(@floating-ui/[email protected])([email protected])
       postcss:
         specifier: ^8.4.38
         version: 8.5.3
@@ -1548,8 +1548,8 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
-  melt@0.20.2:
-    resolution: {integrity: sha512-vINBKFVqFN8LVU6K7AbEwlGTOzSi5BQulxhKkIroxPWnCA3LVsQEIDZabtf9TtnzFa/th0Rm8J0N+hW1v7VJDw==}
+  melt@0.21.0:
+    resolution: {integrity: sha512-eD0gGaer3CDB8vklec8KWx9X8Gi5BqufZo4eEvRc3GNPpBvAi3i0ZCuziG+/C1jkL+a+Mi6tSKqiBMfyOdJskg==}
     peerDependencies:
       '@floating-ui/dom': ^1.6.0
       svelte: ^5.0.0
@@ -3474,7 +3474,7 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
-  melt@0.20.2(@floating-ui/[email protected])([email protected]):
+  melt@0.21.0(@floating-ui/[email protected])([email protected]):
     dependencies:
       '@floating-ui/dom': 1.6.13
       jest-axe: 9.0.0

src/app.css

@@ -68,3 +68,7 @@ html {
 body {
 	overflow: hidden;
 }
+
+body.dark {
+	color-scheme: dark;
+}

src/lib/components/inference-playground/playground.svelte

@@ -9,12 +9,17 @@
 	import { token } from "$lib/state/token.svelte.js";
 	import { isMac } from "$lib/utils/platform.js";
 	import { HfInference } from "@huggingface/inference";
+	import typia from "typia";
 	import IconExternal from "~icons/carbon/arrow-up-right";
-	import IconSettings from "~icons/carbon/settings";
 	import IconCode from "~icons/carbon/code";
 	import IconCompare from "~icons/carbon/compare";
 	import IconInfo from "~icons/carbon/information";
+	import IconSettings from "~icons/carbon/settings";
+	import IconShare from "~icons/carbon/share";
 	import { default as IconDelete } from "~icons/carbon/trash-can";
+	import { showQuotaModal } from "../quota-modal.svelte";
+	import { showShareModal } from "../share-modal.svelte";
+	import Toaster from "../toaster.svelte";
 	import { addToast } from "../toaster.svelte.js";
 	import PlaygroundConversationHeader from "./conversation-header.svelte";
 	import PlaygroundConversation from "./conversation.svelte";
@@ -23,9 +28,6 @@
 	import ModelSelectorModal from "./model-selector-modal.svelte";
 	import ModelSelector from "./model-selector.svelte";
 	import ProjectSelect from "./project-select.svelte";
-	import { showQuotaModal } from "../quota-modal.svelte";
-	import Toaster from "../toaster.svelte";
-	import typia from "typia";
 
 	const startMessageUser: ConversationMessage = { role: "user", content: "" };
 
@@ -364,22 +366,35 @@
 				</div>
 
 				<GenerationConfig bind:conversation={session.project.conversations[0]!} />
-				{#if token.value}
+
+				<div class="mt-auto flex items-center justify-end gap-4">
 					<button
-						onclick={token.reset}
-						class="mt-auto flex items-center gap-1 self-end text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
-						><svg xmlns="http://www.w3.org/2000/svg" class="text-xs" width="1em" height="1em" viewBox="0 0 32 32"
-							><path
-								fill="currentColor"
-								d="M23.216 4H26V2h-7v6h2V5.096A11.96 11.96 0 0 1 28 16c0 6.617-5.383 12-12 12v2c7.72 0 14-6.28 14-14c0-5.009-2.632-9.512-6.784-12"
-							/><path fill="currentColor" d="M16 20a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3M15 9h2v9h-2z" /><path
-								fill="currentColor"
-								d="M16 4V2C8.28 2 2 8.28 2 16c0 4.977 2.607 9.494 6.784 12H6v2h7v-6h-2v2.903A11.97 11.97 0 0 1 4 16C4 9.383 9.383 4 16 4"
-							/></svg
-						>
-						Reset token</button
+						onclick={() => showShareModal(session.project)}
+						class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
 					>
-				{/if}
+						<IconShare class="text-xs" />
+						Share
+					</button>
+					{#if token.value}
+						<button
+							onclick={token.reset}
+							class="flex items-center gap-1 text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
+						>
+							<svg xmlns="http://www.w3.org/2000/svg" class="text-xs" width="1em" height="1em" viewBox="0 0 32 32">
+								<path
+									fill="currentColor"
+									d="M23.216 4H26V2h-7v6h2V5.096A11.96 11.96 0 0 1 28 16c0 6.617-5.383 12-12 12v2c7.72 0 14-6.28 14-14c0-5.009-2.632-9.512-6.784-12"
+								/>
+								<path fill="currentColor" d="M16 20a1.5 1.5 0 1 0 0 3a1.5 1.5 0 0 0 0-3M15 9h2v9h-2z" /><path
+									fill="currentColor"
+									d="M16 4V2C8.28 2 2 8.28 2 16c0 4.977 2.607 9.494 6.784 12H6v2h7v-6h-2v2.903A11.97 11.97 0 0 1 4 16C4 9.383 9.383 4 16 4"
+								/>
+							</svg>
+							Reset token
+						</button>
+					{/if}
+				</div>
+
 				<div class="mt-auto hidden">
 					<div class="mb-3 flex items-center justify-between gap-2">
 						<label for="default-range" class="block text-sm font-medium text-gray-900 dark:text-white">API Quota</label>

src/lib/components/inference-playground/project-select.svelte

@@ -49,29 +49,31 @@
 		</div>
 	</button>
 
-	{#if isDefault}
-		<Tooltip>
-			{#snippet trigger(tooltip)}
-				<button class="btn size-[32px] p-0" {...tooltip.trigger} onclick={saveProject}>
-					<IconSave />
-				</button>
-			{/snippet}
-			Save to Project
-		</Tooltip>
-	{:else}
-		<Tooltip>
-			{#snippet trigger(tooltip)}
-				<button
-					class="btn size-[32px] p-0"
-					{...tooltip.trigger}
-					onclick={() => (session.$.activeProjectId = "default")}
-				>
-					<IconCross />
-				</button>
-			{/snippet}
-			Close project
-		</Tooltip>
-	{/if}
+	<div class="flex items-center gap-2">
+		{#if isDefault}
+			<Tooltip>
+				{#snippet trigger(tooltip)}
+					<button class="btn size-[32px] p-0" {...tooltip.trigger} onclick={saveProject}>
+						<IconSave />
+					</button>
+				{/snippet}
+				Save to Project
+			</Tooltip>
+		{:else}
+			<Tooltip>
+				{#snippet trigger(tooltip)}
+					<button
+						class="btn size-[32px] p-0"
+						{...tooltip.trigger}
+						onclick={() => (session.$.activeProjectId = "default")}
+					>
+						<IconCross />
+					</button>
+				{/snippet}
+				Close project
+			</Tooltip>
+		{/if}
+	</div>
 </div>
 
 <div {...select.content} class="rounded-lg border bg-gray-100 dark:border-gray-700 dark:bg-gray-800">

src/lib/components/local-toasts.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { autoUpdate, computePosition } from "@floating-ui/dom";
+	import { Toaster } from "melt/builders";
+	import { type Snippet } from "svelte";
+	import { fly } from "svelte/transition";
+
+	interface Props {
+		children: Snippet<[{ addToast: typeof toaster.addToast; trigger: typeof trigger }]>;
+		closeDelay?: number;
+	}
+	const { children, closeDelay = 2000 }: Props = $props();
+
+	const id = $props.id();
+
+	const trigger = {
+		id,
+	} as const;
+
+	type ToastData = {
+		content: string;
+		variant: "info" | "danger";
+	};
+
+	const toaster = new Toaster<ToastData>({
+		hover: null,
+		closeDelay: () => closeDelay,
+	});
+
+	function float(node: HTMLElement) {
+		const triggerEl = document.getElementById(trigger.id);
+		if (!triggerEl) return;
+
+		const compute = () =>
+			computePosition(triggerEl, node, {
+				placement: "top",
+				strategy: "absolute",
+			}).then(({ x, y }) => {
+				Object.assign(node.style, {
+					left: `${x}px`,
+					top: `${y - 8}px`,
+				});
+			});
+
+		return {
+			destroy: autoUpdate(triggerEl, node, compute),
+		};
+	}
+
+	const classMap: Record<ToastData["variant"], string> = {
+		info: "border border-blue-400 bg-gradient-to-b from-blue-500 to-blue-600",
+
+		danger: "border border-red-400 bg-gradient-to-b from-red-500 to-red-600",
+	};
+</script>
+
+{@render children({ trigger, addToast: toaster.addToast })}
+
+{#each toaster.toasts as toast (toast.id)}
+	<div
+		data-local-toast
+		data-variant={toast.data.variant}
+		class="rounded-full px-2 py-1 text-xs {classMap[toast.data.variant]}"
+		in:fly={{ y: 10 }}
+		out:fly={{ y: -4 }}
+		use:float
+	>
+		{toast.data.content}
+	</div>
+{/each}
+
+<style>
+	[data-local-toast] {
+		/* Float on top of the UI */
+		position: absolute;
+
+		/* Avoid layout interference */
+		width: max-content;
+		top: 0;
+		left: 0;
+	}
+</style>

src/lib/components/share-modal.svelte

@@ -0,0 +1,156 @@
+<script lang="ts" module>
+	let project = $state<Project>();
+
+	export function showShareModal(p: Project) {
+		project = p;
+	}
+
+	function close() {
+		project = undefined;
+	}
+</script>
+
+<script lang="ts">
+	import { clickOutside } from "$lib/actions/click-outside.js";
+	import { session } from "$lib/state/session.svelte";
+	import type { Project } from "$lib/types.js";
+	import { copyToClipboard } from "$lib/utils/copy.js";
+	import { decodeString, encodeObject } from "$lib/utils/encode.js";
+	import { fade, scale } from "svelte/transition";
+	import typia from "typia";
+	import IconCross from "~icons/carbon/close";
+	import IconCopy from "~icons/carbon/copy";
+	import IconSave from "~icons/carbon/save";
+	import LocalToasts from "./local-toasts.svelte";
+	import { addToast as addToastGlobally } from "./toaster.svelte.js";
+
+	let dialog: HTMLDialogElement | undefined = $state();
+
+	const open = $derived(!!project);
+	const encoded = $derived(encodeObject(project));
+	let pasted = $state("");
+
+	$effect(() => {
+		if (open) {
+			dialog?.showModal();
+		} else {
+			setTimeout(() => {
+				dialog?.close();
+				pasted = "";
+			}, 250);
+		}
+	});
+
+	const isProject = typia.createIs<Project>();
+</script>
+
+<dialog class="backdrop:bg-transparent" bind:this={dialog} onclose={() => close()}>
+	{#if open}
+		<!-- Backdrop -->
+		<div
+			class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-black/50 backdrop-blur-sm"
+			transition:fade={{ duration: 150 }}
+		>
+			<!-- Content -->
+			<div
+				class="relative w-xl rounded-xl bg-white shadow-sm dark:bg-gray-900"
+				use:clickOutside={() => close()}
+				transition:scale={{ start: 0.975, duration: 250 }}
+			>
+				<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-800">
+					<h2 class="flex items-center gap-2.5 text-lg font-semibold text-gray-900 dark:text-white">Sharing</h2>
+					<button
+						type="button"
+						class="ms-auto inline-flex h-8 w-8 items-center justify-center rounded-lg bg-transparent text-sm text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white"
+						onclick={close}
+					>
+						<div class="text-xl">
+							<IconCross />
+						</div>
+						<span class="sr-only">Close modal</span>
+					</button>
+				</div>
+				<!-- Modal body -->
+				<div class="p-4 md:p-5">
+					<h3 class="text-lg font-semibold">Share your project</h3>
+					<p>Copy an unique string that shares your entire project until this point.</p>
+					<div class="mt-4 flex gap-2">
+						<input
+							class="grow cursor-not-allowed rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400 dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+							type="text"
+							value={encoded}
+							disabled
+						/>
+						<LocalToasts>
+							{#snippet children({ addToast, trigger })}
+								<button
+									{...trigger}
+									class="btn flex items-center gap-2"
+									onclick={() => {
+										copyToClipboard(encoded);
+										addToast({ data: { content: "Copied to clipboard", variant: "info" } });
+									}}
+								>
+									<IconCopy />
+									Copy
+								</button>
+							{/snippet}
+						</LocalToasts>
+					</div>
+
+					<div class="my-4 flex items-center gap-2">
+						<div class="h-px grow bg-neutral-500" aria-hidden="true"></div>
+						<span class="text-xs text-neutral-400">or</span>
+						<div class="h-px grow bg-neutral-500" aria-hidden="true"></div>
+					</div>
+
+					<h3 class="text-lg font-semibold">Save a copied project</h3>
+					<p>Paste a copied project string, and save it for your local usage.</p>
+					<LocalToasts>
+						{#snippet children({ addToast, trigger })}
+							<form
+								class="mt-4 flex gap-2"
+								onsubmit={e => {
+									e.preventDefault();
+									const decoded = decodeString(pasted);
+									if (!isProject(decoded)) {
+										addToast({ data: { content: "String isn't valid", variant: "danger" } });
+										return;
+									}
+									session.addProject({ ...decoded, name: `Saved - ${decoded.name}`, id: crypto.randomUUID() });
+									addToastGlobally({
+										variant: "success",
+										title: "Saved project",
+										description: "The project you pasted in was successfully saved.",
+									});
+									close();
+								}}
+							>
+								<input
+									class="grow rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+									type="text"
+									bind:value={pasted}
+								/>
+								<button {...trigger} class="btn flex items-center gap-2" type="submit">
+									<IconSave />
+									Save
+								</button>
+							</form>
+						{/snippet}
+					</LocalToasts>
+				</div>
+
+				<!-- Modal footer -->
+				<!--
+				<div class="flex rounded-b border-t border-gray-200 p-4 md:p-5 dark:border-gray-800">
+					<button
+						type="submit"
+						class="ml-auto rounded-lg bg-black px-5 py-2.5 text-sm font-medium text-white hover:bg-gray-900 focus:ring-4 focus:ring-gray-300 focus:outline-hidden dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
+						>Submit</button
+					>
+				</div>
+				-->
+			</div>
+		</div>
+	{/if}
+</dialog>

src/lib/state/session.svelte.ts

@@ -150,6 +150,10 @@ class SessionState {
 
 		defaultProject.conversations = [getDefaults().defaultConversation];
 
+		this.addProject(project);
+	};
+
+	addProject = (project: Project) => {
 		this.$ = { ...this.$, projects: [...this.$.projects, project], activeProjectId: project.id };
 	};
 

src/lib/utils/copy.ts

@@ -0,0 +1,41 @@
+/**
+ * Copies a string to the clipboard, with a fallback for older browsers.
+ *
+ * @param text The string to copy to the clipboard.
+ * @returns A promise that resolves when the text has been successfully copied,
+ *          or rejects if the copy operation fails.
+ */
+export async function copyToClipboard(text: string): Promise<void> {
+	if (navigator.clipboard) {
+		try {
+			await navigator.clipboard.writeText(text);
+			return; // Resolve immediately if successful
+		} catch {
+			// Fallback to the older method
+		}
+	}
+
+	// Fallback for browsers that don't support the Clipboard API
+	try {
+		const textArea = document.createElement("textarea");
+		textArea.value = text;
+
+		// Avoid scrolling to bottom of page in MS Edge.
+		textArea.style.top = "0";
+		textArea.style.left = "0";
+		textArea.style.position = "fixed";
+
+		document.body.appendChild(textArea);
+		textArea.focus();
+		textArea.select();
+
+		const successful = document.execCommand("copy");
+		document.body.removeChild(textArea);
+
+		if (!successful) {
+			throw new Error("Failed to copy text using fallback method.");
+		}
+	} catch (err) {
+		return Promise.reject(err);
+	}
+}

src/lib/utils/encode.ts

@@ -0,0 +1,33 @@
+export function encodeObject(obj: unknown): string {
+	/**
+	 * Encodes an object to a string using JSON serialization and Base64 encoding.
+	 *
+	 * Args:
+	 *     obj: The object to encode.
+	 *
+	 * Returns:
+	 *     A string representation of the object.
+	 */
+	const jsonString: string = JSON.stringify(obj);
+	const encodedString: string = btoa(unescape(encodeURIComponent(jsonString))); // btoa expects only ASCII chars
+	return encodedString;
+}
+
+export function decodeString(encodedString: string): unknown {
+	/**
+	 * Decodes a string to an object using Base64 decoding and JSON deserialization.
+	 *
+	 * Args:
+	 *     encodedString: The string to decode.
+	 *
+	 * Returns:
+	 *     The decoded object.
+	 */
+	try {
+		const jsonString: string = decodeURIComponent(escape(atob(encodedString)));
+		const obj: unknown = JSON.parse(jsonString);
+		return obj;
+	} catch {
+		return null;
+	}
+}

src/routes/+layout.svelte

@@ -2,6 +2,7 @@
 	import DebugMenu from "$lib/components/debug-menu.svelte";
 	import Prompts from "$lib/components/prompts.svelte";
 	import QuotaModal from "$lib/components/quota-modal.svelte";
+	import ShareModal from "$lib/components/share-modal.svelte";
 	import "../app.css";
 
 	interface Props {
@@ -12,6 +13,8 @@
 </script>
 
 {@render children?.()}
+
 <DebugMenu />
 <Prompts />
 <QuotaModal />
+<ShareModal />