feat: copy model link

src/lib/components/admin/Settings/Models.svelte

@@ -34,6 +34,7 @@
 	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
 	import EyeSlash from '$lib/components/icons/EyeSlash.svelte';
 	import Eye from '$lib/components/icons/Eye.svelte';
+	import { copyToClipboard } from '$lib/utils';
 
 	let shiftKey = false;
 
@@ -182,6 +183,17 @@
 		upsertModelHandler(model);
 	};
 
+	const copyLinkHandler = async (model) => {
+		const baseUrl = window.location.origin;
+		const res = await copyToClipboard(`${baseUrl}/?model=${encodeURIComponent(model.id)}`);
+
+		if (res) {
+			toast.success($i18n.t('Copied link to clipboard'));
+		} else {
+			toast.error($i18n.t('Failed to copy link'));
+		}
+	};
+
 	const exportModelHandler = async (model) => {
 		let blob = new Blob([JSON.stringify([model])], {
 			type: 'application/json'
@@ -394,6 +406,9 @@
 									hideHandler={() => {
 										hideModelHandler(model);
 									}}
+									copyLinkHandler={() => {
+										copyLinkHandler(model);
+									}}
 									onClose={() => {}}
 								>
 									<button

src/lib/components/admin/Settings/Models/ModelMenu.svelte

@@ -15,6 +15,7 @@
 	import ArrowUpCircle from '$lib/components/icons/ArrowUpCircle.svelte';
 
 	import { config } from '$lib/stores';
+	import Link from '$lib/components/icons/Link.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -23,6 +24,7 @@
 
 	export let exportHandler: Function;
 	export let hideHandler: Function;
+	export let copyLinkHandler: Function;
 
 	export let onClose: Function;
 
@@ -101,6 +103,17 @@
 				</div>
 			</DropdownMenu.Item>
 
+			<DropdownMenu.Item
+				class="flex gap-2 items-center px-3 py-2 text-sm  font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
+				on:click={() => {
+					copyLinkHandler();
+				}}
+			>
+				<Link />
+
+				<div class="flex items-center">{$i18n.t('Copy Link')}</div>
+			</DropdownMenu.Item>
+
 			<DropdownMenu.Item
 				class="flex gap-2 items-center px-3 py-2 text-sm  font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
 				on:click={() => {

src/lib/components/workspace/Models.svelte

@@ -33,7 +33,7 @@
 	import ChevronRight from '../icons/ChevronRight.svelte';
 	import Switch from '../common/Switch.svelte';
 	import Spinner from '../common/Spinner.svelte';
-	import { capitalizeFirstLetter } from '$lib/utils';
+	import { capitalizeFirstLetter, copyToClipboard } from '$lib/utils';
 	import XMark from '../icons/XMark.svelte';
 	import EyeSlash from '../icons/EyeSlash.svelte';
 	import Eye from '../icons/Eye.svelte';
@@ -141,6 +141,17 @@
 		models = await getWorkspaceModels(localStorage.token);
 	};
 
+	const copyLinkHandler = async (model) => {
+		const baseUrl = window.location.origin;
+		const res = await copyToClipboard(`${baseUrl}/?model=${encodeURIComponent(model.id)}`);
+
+		if (res) {
+			toast.success($i18n.t('Copied link to clipboard'));
+		} else {
+			toast.error($i18n.t('Failed to copy link'));
+		}
+	};
+
 	const downloadModels = async (models) => {
 		let blob = new Blob([JSON.stringify(models)], {
 			type: 'application/json'
@@ -383,6 +394,9 @@
 								hideHandler={() => {
 									hideModelHandler(model);
 								}}
+								copyLinkHandler={() => {
+									copyLinkHandler(model);
+								}}
 								deleteHandler={() => {
 									selectedModel = model;
 									showModelDeleteConfirm = true;

src/lib/components/workspace/Models/ModelMenu.svelte

@@ -15,6 +15,7 @@
 	import ArrowUpCircle from '$lib/components/icons/ArrowUpCircle.svelte';
 
 	import { config } from '$lib/stores';
+	import Link from '$lib/components/icons/Link.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -24,6 +25,7 @@
 	export let shareHandler: Function;
 	export let cloneHandler: Function;
 	export let exportHandler: Function;
+	export let copyLinkHandler: Function;
 
 	export let hideHandler: Function;
 	export let deleteHandler: Function;
@@ -104,6 +106,17 @@
 				</div>
 			</DropdownMenu.Item>
 
+			<DropdownMenu.Item
+				class="flex gap-2 items-center px-3 py-2 text-sm  font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
+				on:click={() => {
+					copyLinkHandler();
+				}}
+			>
+				<Link />
+
+				<div class="flex items-center">{$i18n.t('Copy Link')}</div>
+			</DropdownMenu.Item>
+
 			{#if $config?.features.enable_community_sharing}
 				<DropdownMenu.Item
 					class="flex gap-2 items-center px-3 py-2 text-sm  font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800  rounded-md"