feat: copy content on insecure connections (HTTP)

src/i18n/en/index.ts

@@ -153,7 +153,9 @@ const en = {
 	version: 'Version',
 	vocabOnly: 'Vocab only',
 	writePromptToStart: 'Write a prompt to start a new session',
-	you: 'You'
+	you: 'You',
+	copiedNotPrivate: 'Content copied, but your connection is not private',
+	notCopiedNotPrivate: "Couldn't copy content. Connection is not private"
 } satisfies BaseTranslation;
 
 export default en;

src/i18n/i18n-types.ts

@@ -620,6 +620,14 @@ type RootTranslation = {
 	 * Y​o​u
 	 */
 	you: string
+	/**
+	 * C​o​n​t​e​n​t​ ​c​o​p​i​e​d​,​ ​b​u​t​ ​y​o​u​r​ ​c​o​n​n​e​c​t​i​o​n​ ​i​s​ ​n​o​t​ ​p​r​i​v​a​t​e
+	 */
+	copiedNotPrivate: string
+	/**
+	 * C​o​u​l​d​n​'​t​ ​c​o​p​y​ ​c​o​n​t​e​n​t​.​ ​C​o​n​n​e​c​t​i​o​n​ ​i​s​ ​n​o​t​ ​p​r​i​v​a​t​e
+	 */
+	notCopiedNotPrivate: string
 }
 
 export type TranslationFunctions = {
@@ -1220,6 +1228,14 @@ The completion in progress will stop
 	 * You
 	 */
 	you: () => LocalizedString
+	/**
+	 * Content copied, but your connection is not private
+	 */
+	copiedNotPrivate: () => LocalizedString
+	/**
+	 * Couldn't copy content. Connection is not private
+	 */
+	notCopiedNotPrivate: () => LocalizedString
 }
 
 export type Formatters = {}

src/lib/components/ButtonCopy.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { Files } from 'lucide-svelte';
+	import { toast } from 'svelte-sonner';
 
 	import LL from '$i18n/i18n-svelte';
 
@@ -8,7 +9,25 @@
 	export let content: string;
 
 	function copyContent() {
-		navigator.clipboard.writeText(content);
+		if (navigator.clipboard && window.isSecureContext) {
+			navigator.clipboard.writeText(content);
+		} else {
+			// HACK
+			// This is a workaround to copy text content on HTTP connections.
+			// https://developer.mozilla.org/en-US/docs/Web/API/ClipboardItem
+			const textArea = document.createElement('textarea');
+			textArea.value = content;
+			document.body.appendChild(textArea);
+			textArea.select();
+			try {
+				document.execCommand('copy');
+				toast.warning($LL.copiedNotPrivate());
+			} catch (e) {
+				console.error(e);
+				toast.error($LL.notCopiedNotPrivate());
+			}
+			document.body.removeChild(textArea);
+		}
 	}
 </script>
 

tests/session-interaction.test.ts

@@ -131,6 +131,28 @@ test.describe('Session interaction', () => {
 		);
 	});
 
+	test('can copy text on an insecure connection', async ({ page }) => {
+		// Mock insecure context before navigating
+		await page.addInitScript(() => {
+			Object.defineProperty(window, 'isSecureContext', { value: false });
+		});
+
+		await page.goto('/');
+		await mockCompletionResponse(page, MOCK_SESSION_1_RESPONSE_1);
+		await page.getByText('Sessions', { exact: true }).click();
+		await page.getByTestId('new-session').click();
+		await chooseModel(page, MOCK_API_TAGS_RESPONSE.models[0].name);
+		await promptTextarea.fill('Who would win in a fight between Emma Watson and Jessica Alba?');
+		await page.getByText('Run').click();
+		await expect(page.locator('.session__history').getByTitle('Copy')).toHaveCount(2);
+
+		const toastWarning = page.getByText('Content copied, but your connection is not private');
+		await expect(toastWarning).not.toBeVisible();
+
+		await page.locator('.session__history').getByTitle('Copy').first().click();
+		await expect(toastWarning).toBeVisible();
+	});
+
 	test('can copy the whole session content to clipboard', async ({ page }) => {
 		await page.goto('/');
 		await page.evaluate(() => navigator.clipboard.writeText(''));