fix: safari copy link issue

src/lib/components/chat/Messages.svelte

@@ -12,6 +12,7 @@
 	import Placeholder from './Messages/Placeholder.svelte';
 	import Spinner from '../common/Spinner.svelte';
 	import { imageGenerations } from '$lib/apis/images';
+	import { copyToClipboard } from '$lib/utils';
 
 	const i18n = getContext('i18n');
 
@@ -42,40 +43,11 @@
 		element.scrollTop = element.scrollHeight;
 	};
 
-	const copyToClipboard = (text) => {
+	const copyToClipboardWithToast = async (text) => {
-		if (!navigator.clipboard) {
+		const res = await copyToClipboard(text);
-			var textArea = document.createElement('textarea');
+		if (res) {
-			textArea.value = text;
-
-			// Avoid scrolling to bottom
-			textArea.style.top = '0';
-			textArea.style.left = '0';
-			textArea.style.position = 'fixed';
-
-			document.body.appendChild(textArea);
-			textArea.focus();
-			textArea.select();
-
-			try {
-				var successful = document.execCommand('copy');
-				var msg = successful ? 'successful' : 'unsuccessful';
-				console.log('Fallback: Copying text command was ' + msg);
-			} catch (err) {
-				console.error('Fallback: Oops, unable to copy', err);
-			}
-
-			document.body.removeChild(textArea);
-			return;
-		}
-		navigator.clipboard.writeText(text).then(
-			function () {
-				console.log('Async: Copying to clipboard was successful!');
 			toast.success($i18n.t('Copying to clipboard was successful!'));
-			},
-			function (err) {
-				console.error('Async: Could not copy text: ', err);
 		}
-		);
 	};
 
 	const confirmEditMessage = async (messageId, content) => {
@@ -330,7 +302,7 @@
 								{confirmEditMessage}
 								{showPreviousMessage}
 								{showNextMessage}
-								{copyToClipboard}
+								copyToClipboard={copyToClipboardWithToast}
 							/>
 						{:else}
 							<ResponseMessage
@@ -344,7 +316,7 @@
 								{showPreviousMessage}
 								{showNextMessage}
 								{rateMessage}
-								{copyToClipboard}
+								copyToClipboard={copyToClipboardWithToast}
 								{continueGeneration}
 								{regenerateResponse}
 								on:save={async (e) => {

src/lib/components/chat/ShareChatModal.svelte

@@ -10,17 +10,18 @@
 	import Link from '../icons/Link.svelte';
 
 	let chat = null;
+	let shareUrl = null;
 	const i18n = getContext('i18n');
 
 	const shareLocalChat = async () => {
 		const _chat = chat;
 
 		const sharedChat = await shareChatById(localStorage.token, $chatId);
-		const chatShareUrl = `${window.location.origin}/s/${sharedChat.id}`;
+		shareUrl = `${window.location.origin}/s/${sharedChat.id}`;
-
+		console.log(shareUrl);
-		toast.success($i18n.t('Copied shared chat URL to clipboard!'));
-		copyToClipboard(chatShareUrl);
 		chat = await getChatById(localStorage.token, $chatId);
+
+		return shareUrl;
 	};
 
 	const shareChat = async () => {
@@ -131,8 +132,12 @@
 							<button
 								class=" self-center flex items-center gap-1 px-3.5 py-2 rounded-xl text-sm font-medium bg-emerald-600 hover:bg-emerald-500 text-white"
 								type="button"
-								on:click={() => {
+								on:pointerdown={() => {
 									shareLocalChat();
+								}}
+								on:click={async () => {
+									copyToClipboard(shareUrl);
+									toast.success($i18n.t('Copied shared chat URL to clipboard!'));
 									show = false;
 								}}
 							>

src/lib/utils/index.ts

@@ -187,7 +187,8 @@ export const generateInitialsImage = (name) => {
 	return canvas.toDataURL();
 };
 
-export const copyToClipboard = (text) => {
+export const copyToClipboard = async (text) => {
+	let result = false;
 	if (!navigator.clipboard) {
 		const textArea = document.createElement('textarea');
 		textArea.value = text;
@@ -205,21 +206,27 @@ export const copyToClipboard = (text) => {
 			const successful = document.execCommand('copy');
 			const msg = successful ? 'successful' : 'unsuccessful';
 			console.log('Fallback: Copying text command was ' + msg);
+			result = true;
 		} catch (err) {
 			console.error('Fallback: Oops, unable to copy', err);
 		}
 
 		document.body.removeChild(textArea);
-		return;
+		return result;
 	}
-	navigator.clipboard.writeText(text).then(
+
-		function () {
+	result = await navigator.clipboard
+		.writeText(text)
+		.then(() => {
 			console.log('Async: Copying to clipboard was successful!');
-		},
+			return true;
-		function (err) {
+		})
-			console.error('Async: Could not copy text: ', err);
+		.catch((error) => {
-		}
+			console.error('Async: Could not copy text: ', error);
-	);
+			return false;
+		});
+
+	return result;
 };
 
 export const compareVersion = (latest, current) => {