From 8ae50bab23dee3bbb0a51c96aedca9da50271f08 Mon Sep 17 00:00:00 2001
From: Merkie <merkie@post.com>
Date: Wed, 8 Nov 2023 18:34:47 -0600
Subject: [PATCH 1/3] encrypt key

---
 package-lock.json                       | 10 ++++++++--
 package.json                            |  1 +
 src/lib/ChatInput.svelte                |  7 ++++---
 src/lib/Modals/SettingsModal.svelte     | 20 ++++++++++++++------
 src/lib/Modals/SuggestTitleModal.svelte |  8 ++++----
 src/misc/cryptr.ts                      |  3 +++
 src/misc/shared.ts                      |  1 -
 src/misc/stores.ts                      | 12 ++++++++++++
 src/routes/[slug]/+page.svelte          | 13 +++++--------
 src/routes/api/ask/+server.ts           |  5 ++++-
 src/routes/api/encrypt-key/+server.ts   | 13 +++++++++++++
 src/routes/api/suggest-title/+server.ts |  5 ++++-
 12 files changed, 72 insertions(+), 26 deletions(-)
 create mode 100644 src/misc/cryptr.ts
 create mode 100644 src/routes/api/encrypt-key/+server.ts

diff --git a/package-lock.json b/package-lock.json
index 7a17930..bb37c15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,18 +1,19 @@
 {
 	"name": "@shipbit/slickgpt",
-	"version": "1.2.5",
+	"version": "1.4.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@shipbit/slickgpt",
-			"version": "1.2.5",
+			"version": "1.4.0",
 			"license": "MIT",
 			"dependencies": {
 				"@floating-ui/dom": "^1.5.3",
 				"@inqling/svelte-icons": "^4.0.2",
 				"@vercel/analytics": "^1.1.0",
 				"common-tags": "^1.8.2",
+				"cryptr": "^6.3.0",
 				"firebase": "^10.4.0",
 				"gpt3-tokenizer": "^1.1.5",
 				"highlight.js": "^11.9.0",
@@ -1832,6 +1833,11 @@
 				"node": "*"
 			}
 		},
+		"node_modules/cryptr": {
+			"version": "6.3.0",
+			"resolved": "https://registry.npmjs.org/cryptr/-/cryptr-6.3.0.tgz",
+			"integrity": "sha512-TA4byAuorT8qooU9H8YJhBwnqD151i1rcauHfJ3Divg6HmukHB2AYMp0hmjv2873J2alr4t15QqC7zAnWFrtfQ=="
+		},
 		"node_modules/css-tree": {
 			"version": "2.3.1",
 			"license": "MIT",
diff --git a/package.json b/package.json
index 2007872..44f2a4e 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
 		"@inqling/svelte-icons": "^4.0.2",
 		"@vercel/analytics": "^1.1.0",
 		"common-tags": "^1.8.2",
+		"cryptr": "^6.3.0",
 		"firebase": "^10.4.0",
 		"gpt3-tokenizer": "^1.1.5",
 		"highlight.js": "^11.9.0",
diff --git a/src/lib/ChatInput.svelte b/src/lib/ChatInput.svelte
index af22e96..1843ba5 100644
--- a/src/lib/ChatInput.svelte
+++ b/src/lib/ChatInput.svelte
@@ -17,7 +17,8 @@
 		isLoadingAnswerStore,
 		liveAnswerStore,
 		enhancedLiveAnswerStore,
-		settingsStore
+		settingsStore,
+		OpenAI_API_Key
 	} from '$misc/stores';
 	import { countTokens } from '$misc/openai';
 
@@ -93,7 +94,7 @@
 					}) as ChatCompletionMessageParam
 			),
 			settings: chat.settings,
-			openAiKey: $settingsStore.openAiApiKey
+			openAiKey: $OpenAI_API_Key
 		};
 
 		$eventSourceStore.start(payload, handleAnswer, handleError, handleAbort);
@@ -208,7 +209,7 @@
 
 	export async function editMessage(message: ChatMessage) {
 		originalMessage = message;
-		input = message.content;
+		input = message.content + '';
 		isEditMode = true;
 
 		// tick is required for the action to resize the textarea
diff --git a/src/lib/Modals/SettingsModal.svelte b/src/lib/Modals/SettingsModal.svelte
index 5ac3e83..137ad95 100644
--- a/src/lib/Modals/SettingsModal.svelte
+++ b/src/lib/Modals/SettingsModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Accordion, AccordionItem, getModalStore } from '@skeletonlabs/skeleton';
-	import { chatStore, settingsStore } from '$misc/stores';
+	import { OpenAI_API_Key, chatStore, settingsStore } from '$misc/stores';
 	import { models, OpenAiModel } from '$misc/openai';
 	import { track } from '$misc/shared';
 
@@ -59,7 +59,7 @@
 		<h3 class="h3 mb-4">Settings</h3>
 		<div class="flex-row space-y-6">
 			<!-- API key -->
-			{#if editApiKey || !$settingsStore.openAiApiKey}
+			{#if editApiKey || !$OpenAI_API_Key}
 				<label class="label">
 					<div class="flex justify-between space-x-12">
 						<span>OpenAI API key</span>
@@ -70,9 +70,17 @@
 					<input
 						required
 						class="input"
-						class:input-error={!$settingsStore.openAiApiKey}
+						class:input-error={!$OpenAI_API_Key}
 						type="text"
-						bind:value={$settingsStore.openAiApiKey}
+						on:input={async (e) => {
+							const response = await fetch('/api/encrypt-key', {
+								method: 'POST',
+								// @ts-expect-error value is a valid prop
+								body: JSON.stringify({ key: e.target.value })
+							}).then((res) => res.json());
+
+							if (response.encryptedKey) $OpenAI_API_Key = response.encryptedKey;
+						}}
 						on:blur={() => (editApiKey = false)}
 					/>
 				</label>
@@ -81,7 +89,7 @@
 					<span class="label">OpenAI API key</span>
 
 					<div class="flex justify-between items-center space-x-4">
-						<span>{maskString($settingsStore.openAiApiKey)}</span>
+						<span>{'********************'}</span>
 
 						<button class="btn btn-sm variant-ghost-secondary" on:click={() => (editApiKey = true)}>
 							Edit
@@ -91,7 +99,7 @@
 			{/if}
 
 			<!-- Model -->
-			{#if $settingsStore.openAiApiKey}
+			{#if $OpenAI_API_Key}
 				<div class="flex flex-col space-y-2">
 					<label class="label">
 						<div class="flex justify-between space-x-12">
diff --git a/src/lib/Modals/SuggestTitleModal.svelte b/src/lib/Modals/SuggestTitleModal.svelte
index d1e67c5..1a4fa9d 100644
--- a/src/lib/Modals/SuggestTitleModal.svelte
+++ b/src/lib/Modals/SuggestTitleModal.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getModalStore, ProgressRadial } from '@skeletonlabs/skeleton';
 	import { confettiAction } from 'svelte-legos';
-	import { chatStore, settingsStore } from '$misc/stores';
+	import { chatStore, OpenAI_API_Key, settingsStore } from '$misc/stores';
 	import { canSuggestTitle, suggestChatTitle, track } from '$misc/shared';
 
 	const modalStore = getModalStore();
@@ -11,14 +11,14 @@
 
 	let title = $chatStore[slug].title;
 
-	$: showAiSuggestOptions = $settingsStore.openAiApiKey && canSuggestTitle($chatStore[slug]);
+	$: showAiSuggestOptions = $OpenAI_API_Key && canSuggestTitle($chatStore[slug]);
 
 	async function handleSuggestTitle() {
-		if (!$settingsStore.openAiApiKey) {
+		if (!$OpenAI_API_Key) {
 			return;
 		}
 		isLoading = true;
-		title = await suggestChatTitle($chatStore[slug], $settingsStore.openAiApiKey);
+		title = await suggestChatTitle($chatStore[slug], $OpenAI_API_Key);
 		isLoading = false;
 		track('suggestTitleManually');
 	}
diff --git a/src/misc/cryptr.ts b/src/misc/cryptr.ts
new file mode 100644
index 0000000..fbe00ca
--- /dev/null
+++ b/src/misc/cryptr.ts
@@ -0,0 +1,3 @@
+import { SITE_SECRET } from '$env/static/private';
+import Cryptr from 'cryptr';
+export default new Cryptr(SITE_SECRET + '');
diff --git a/src/misc/shared.ts b/src/misc/shared.ts
index f1e186b..16b155a 100644
--- a/src/misc/shared.ts
+++ b/src/misc/shared.ts
@@ -28,7 +28,6 @@ export interface Chat {
 }
 
 export interface ClientSettings {
-	openAiApiKey?: string;
 	hideLanguageHint?: boolean;
 	useTitleSuggestions?: boolean;
 	defaultModel?: OpenAiModel;
diff --git a/src/misc/stores.ts b/src/misc/stores.ts
index 33d21b6..4dfbaec 100644
--- a/src/misc/stores.ts
+++ b/src/misc/stores.ts
@@ -6,6 +6,18 @@ import { EventSource } from './eventSource';
 import { ChatStorekeeper } from './chatStorekeeper';
 import type { Chat, ChatMessage, ClientSettings } from './shared';
 import { closeOpenedCodeTicks } from './markdownHelper';
+import { browser } from '$app/environment';
+
+export const OpenAI_API_Key = writable('');
+
+if (browser) {
+	if (localStorage.getItem('OpenAI_API_Key')) {
+		OpenAI_API_Key.set(localStorage.getItem('OpenAI_API_Key') + '');
+	}
+	OpenAI_API_Key.subscribe((key) => {
+		localStorage.setItem('OpenAI_API_Key', key);
+	});
+}
 
 export const settingsStore: Writable<ClientSettings> = localStorageStore('settingsStore', {});
 
diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte
index 36756df..599ed3c 100644
--- a/src/routes/[slug]/+page.svelte
+++ b/src/routes/[slug]/+page.svelte
@@ -6,7 +6,7 @@
 	import { Trash, Cog6Tooth, Share } from '@inqling/svelte-icons/heroicon-24-outline';
 	import type { PageData } from './$types';
 	import { goto } from '$app/navigation';
-	import { chatStore, isLoadingAnswerStore, settingsStore } from '$misc/stores';
+	import { OpenAI_API_Key, chatStore, isLoadingAnswerStore, settingsStore } from '$misc/stores';
 	import Toolbar from '$lib/Toolbar.svelte';
 	import ChatInput from '$lib/ChatInput.svelte';
 	import Chat from '$lib/Chat.svelte';
@@ -104,8 +104,8 @@
 
 		// has no title
 		if ($settingsStore.useTitleSuggestions) {
-			if ($settingsStore.openAiApiKey) {
-				const title = await suggestChatTitle(chat, $settingsStore.openAiApiKey);
+			if ($OpenAI_API_Key) {
+				const title = await suggestChatTitle(chat, $OpenAI_API_Key);
 				chatStore.updateChat(slug, { title });
 				showToast(toastStore, `Chat title set to: '${title}'`, 'secondary');
 			}
@@ -149,7 +149,7 @@
 				>
 					<Cog6Tooth class="w-6 h-6" />
 				</button>
-				{#if !$settingsStore.openAiApiKey}
+				{#if !$OpenAI_API_Key}
 					<span class="relative flex h-3 w-3">
 						<span
 							style="left: -10px;"
@@ -164,10 +164,7 @@
 			</span>
 
 			<!-- Share -->
-			<span
-				class="relative inline-flex"
-				style={!$settingsStore.openAiApiKey ? 'margin-left: -4px;' : ''}
-			>
+			<span class="relative inline-flex" style={!$OpenAI_API_Key ? 'margin-left: -4px;' : ''}>
 				<button
 					disabled={!chat.contextMessage.content?.length && !chat.messages?.length}
 					class="btn btn-sm inline-flex variant-ghost-tertiary"
diff --git a/src/routes/api/ask/+server.ts b/src/routes/api/ask/+server.ts
index dab9daa..529b76f 100644
--- a/src/routes/api/ask/+server.ts
+++ b/src/routes/api/ask/+server.ts
@@ -7,6 +7,7 @@ import type { RequestHandler } from './$types';
 import type { OpenAiSettings } from '$misc/openai';
 import { error } from '@sveltejs/kit';
 import { getErrorMessage, throwIfUnset } from '$misc/error';
+import cryptr from '$misc/cryptr';
 
 // this tells Vercel to run this function as https://vercel.com/docs/concepts/functions/edge-functions
 export const config: Config = {
@@ -42,9 +43,11 @@ export const POST: RequestHandler = async ({ request, fetch }) => {
 		// 		: 'https://api.openai.com/v1/completions';
 		const apiUrl = 'https://api.openai.com/v1/chat/completions';
 
+		const decryptedKey = cryptr.decrypt(openAiKey);
+
 		const response = await fetch(apiUrl, {
 			headers: {
-				Authorization: `Bearer ${openAiKey}`,
+				Authorization: `Bearer ${decryptedKey}`,
 				'Content-Type': 'application/json'
 			},
 			method: 'POST',
diff --git a/src/routes/api/encrypt-key/+server.ts b/src/routes/api/encrypt-key/+server.ts
new file mode 100644
index 0000000..1361e5d
--- /dev/null
+++ b/src/routes/api/encrypt-key/+server.ts
@@ -0,0 +1,13 @@
+import { json } from '@sveltejs/kit';
+import Cryptr from 'cryptr';
+import { SITE_SECRET } from '$env/static/private';
+import cryptr from '$misc/cryptr';
+
+export const POST = async ({ request }) => {
+	const body = await request.json();
+	if (!body.key) return json({ success: false, error: 'No key provided' });
+
+	const encryptedKey = cryptr.encrypt(body.key);
+
+	return json({ success: true, encryptedKey });
+};
diff --git a/src/routes/api/suggest-title/+server.ts b/src/routes/api/suggest-title/+server.ts
index 80fff33..cc93bd0 100644
--- a/src/routes/api/suggest-title/+server.ts
+++ b/src/routes/api/suggest-title/+server.ts
@@ -7,6 +7,7 @@ import type { RequestHandler } from './$types';
 import { OpenAiModel, defaultOpenAiSettings, type OpenAiSettings } from '$misc/openai';
 import { error } from '@sveltejs/kit';
 import { getErrorMessage, respondToClient, throwIfUnset } from '$misc/error';
+import cryptr from '$misc/cryptr';
 
 // this tells Vercel to run this function as https://vercel.com/docs/concepts/functions/edge-functions
 export const config: Config = {
@@ -47,9 +48,11 @@ export const POST: RequestHandler = async ({ request, fetch }) => {
 
 		const apiUrl = 'https://api.openai.com/v1/chat/completions';
 
+		const decryptedKey = cryptr.decrypt(openAiKey);
+
 		const response = await fetch(apiUrl, {
 			headers: {
-				Authorization: `Bearer ${openAiKey}`,
+				Authorization: `Bearer ${decryptedKey}`,
 				'Content-Type': 'application/json'
 			},
 			method: 'POST',

From fee32cc97d53d77bba1ff359d5514ca603b3fd10 Mon Sep 17 00:00:00 2001
From: Merkie <merkie@post.com>
Date: Wed, 8 Nov 2023 18:39:21 -0600
Subject: [PATCH 2/3] add SITE_SECRET to environtment variables example

---
 .env.example | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.env.example b/.env.example
index fbc271c..dab6200 100644
--- a/.env.example
+++ b/.env.example
@@ -5,4 +5,5 @@ FIREBASE_PROJECTID=
 FIREBASE_STORAGEBUCKET=
 FIREBASE_MESSAGINGSENDERID=
 FIREBASE_APPID=
-PUBLIC_DISABLE_TRACKING=true
\ No newline at end of file
+PUBLIC_DISABLE_TRACKING=true
+SITE_SECRET=changeme
\ No newline at end of file

From 14750b35a2136aecff0b5eb4bfab8ca6c19b9da5 Mon Sep 17 00:00:00 2001
From: Merkie <merkie@post.com>
Date: Wed, 8 Nov 2023 18:44:29 -0600
Subject: [PATCH 3/3] use convention for local storage

---
 src/misc/stores.ts | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/misc/stores.ts b/src/misc/stores.ts
index 4dfbaec..3e7ec60 100644
--- a/src/misc/stores.ts
+++ b/src/misc/stores.ts
@@ -8,16 +8,7 @@ import type { Chat, ChatMessage, ClientSettings } from './shared';
 import { closeOpenedCodeTicks } from './markdownHelper';
 import { browser } from '$app/environment';
 
-export const OpenAI_API_Key = writable('');
-
-if (browser) {
-	if (localStorage.getItem('OpenAI_API_Key')) {
-		OpenAI_API_Key.set(localStorage.getItem('OpenAI_API_Key') + '');
-	}
-	OpenAI_API_Key.subscribe((key) => {
-		localStorage.setItem('OpenAI_API_Key', key);
-	});
-}
+export const OpenAI_API_Key = localStorageStore('OpenAI_API_Key', '');
 
 export const settingsStore: Writable<ClientSettings> = localStorageStore('settingsStore', {});