Add share button for assistant intro page (#960) (#965)

* Add share button for assistant intro page

* Fix padding on share assistant

* gap

---------

Co-authored-by: Victor Mustar <victor.mustar@gmail.com>

src/lib/components/chat/AssistantIntroduction.svelte

@@ -4,6 +4,12 @@
 	import { base } from "$app/paths";
 	import type { Assistant } from "$lib/types/Assistant";
 	import IconInternet from "../icons/IconInternet.svelte";
+	import CarbonExport from "~icons/carbon/export";
+	import CarbonCheckmark from "~icons/carbon/checkmark";
+
+	import { share } from "$lib/utils/share";
+	import { PUBLIC_ORIGIN, PUBLIC_SHARE_PREFIX } from "$env/static/public";
+	import { page } from "$app/stores";
 
 	export let assistant: Pick<
 		Assistant,
@@ -25,6 +31,12 @@
 		(assistant?.rag?.allowedDomains?.length ?? 0) > 0 ||
 		(assistant?.rag?.allowedLinks?.length ?? 0) > 0 ||
 		assistant?.dynamicPrompt;
+
+	const prefix = PUBLIC_SHARE_PREFIX || `${PUBLIC_ORIGIN || $page.url.origin}${base}`;
+
+	$: shareUrl = `${prefix}/assistant/${assistant?._id}`;
+
+	let isCopied = false;
 </script>
 
 <div class="flex h-full w-full flex-col content-center items-center justify-center pb-52">
@@ -84,11 +96,33 @@
 		</div>
 
 		<div class="absolute right-3 top-3 md:right-4 md:top-4">
-			<a
-				href="{base}/settings/assistants/{assistant._id.toString()}"
-				class="flex items-center gap-1.5 rounded-full border bg-white py-1 pl-3 pr-2.5 text-xs text-gray-800 shadow-sm hover:shadow-inner md:text-sm dark:border-gray-700 dark:bg-gray-700 dark:text-gray-300/90 dark:hover:bg-gray-800"
-				><IconGear class="text-xxs" />Settings</a
-			>
+			<div class="flex flex-row items-center gap-1">
+				<button
+					class="flex h-7 items-center gap-1.5 rounded-full border bg-white px-2.5 py-1 text-gray-800 shadow-sm hover:shadow-inner max-sm:px-1.5 md:text-sm dark:border-gray-700 dark:bg-gray-700 dark:text-gray-300/90 dark:hover:bg-gray-800"
+					on:click={() => {
+						if (!isCopied) {
+							share(shareUrl, assistant.name);
+							isCopied = true;
+							setTimeout(() => {
+								isCopied = false;
+							}, 2000);
+						}
+					}}
+				>
+					{#if isCopied}
+						<CarbonCheckmark class="text-xxs text-green-600 max-sm:text-xs" />
+						<span class="text-green-600 max-sm:hidden"> Copied </span>
+					{:else}
+						<CarbonExport class="text-xxs max-sm:text-xs" />
+						<span class="max-sm:hidden"> Share </span>
+					{/if}
+				</button>
+				<a
+					href="{base}/settings/assistants/{assistant._id.toString()}"
+					class="flex h-7 items-center gap-1.5 rounded-full border bg-white px-2.5 py-1 text-gray-800 shadow-sm hover:shadow-inner md:text-sm dark:border-gray-700 dark:bg-gray-700 dark:text-gray-300/90 dark:hover:bg-gray-800"
+					><IconGear class="text-xxs" />Settings</a
+				>
+			</div>
 		</div>
 	</div>
 	{#if assistant.exampleInputs}