From 0afb6ed35cb2bce5d0c81c8648cf9f25f6cd59d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Hopst=C3=A4tter?= <simon.hopstaetter@shipbit.de>
Date: Fri, 31 Mar 2023 02:17:59 +0200
Subject: [PATCH 1/2] add "New Chat" button to context message

---
 src/misc/shared.ts                     | 17 +++++++-----
 src/routes/+page.svelte                |  4 +--
 src/routes/[slug]/+page.svelte         | 36 ++++++++++++--------------
 src/routes/shared/[slug]/+error.svelte |  2 +-
 4 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/misc/shared.ts b/src/misc/shared.ts
index 4218376..23be7d5 100644
--- a/src/misc/shared.ts
+++ b/src/misc/shared.ts
@@ -32,22 +32,27 @@ export interface ChatCost {
 	maxTokensForModel: number;
 }
 
-export function createNewChat() {
+export function createNewChat(template?: {
+	context?: string;
+	title?: string;
+	settings?: OpenAiSettings;
+	messages?: ChatCompletionRequestMessage[];
+}) {
 	const slug = generateSlug();
 	const chat: Chat = {
-		title: slug,
-		settings: { ...defaultOpenAiSettings },
+		title: template?.title || slug,
+		settings: { ...(template?.settings || defaultOpenAiSettings) },
 		contextMessage: {
 			role: 'system',
-			content: ''
+			content: template?.context || ''
 		},
-		messages: [],
+		messages: template?.messages || [],
 		created: new Date()
 	};
 
 	chatStore.updateChat(slug, chat);
 
-	goto(`/${slug}`);
+	goto(`/${slug}`, { invalidateAll: true });
 }
 
 export function showModalComponent(
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 746ea1c..54e7aa9 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -71,7 +71,7 @@
 		// update the local store
 		$chatStore = {};
 
-		goto('/', { replaceState: true });
+		goto('/');
 	}
 
 	$: sortedChats = Object.entries($chatStore).sort((a, b) => {
@@ -83,7 +83,7 @@
 	class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6 px-4 md:px-8"
 >
 	<!-- Add button -->
-	<button class="card p-4 grid variant-ghost-primary" on:click={createNewChat}>
+	<button class="card p-4 grid variant-ghost-primary" on:click={() => createNewChat()}>
 		<div class="flex space-x-2 md:space-x-4 items-center self-center justify-self-center">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"
diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte
index 878c610..410e468 100644
--- a/src/routes/[slug]/+page.svelte
+++ b/src/routes/[slug]/+page.svelte
@@ -11,11 +11,11 @@
 	import HintMessage from '$lib/HintMessage.svelte';
 	import TokenCost from '$lib/TokenCost.svelte';
 	import { countTokens, estimateChatCost } from '$misc/openai';
-	import { showModalComponent, track } from '$misc/shared';
+	import { createNewChat, showModalComponent, track } from '$misc/shared';
 	import snarkdown from 'snarkdown';
 
 	export let data: PageData;
-	const { slug } = data;
+	$: ({ slug } = data);
 
 	$: chat = $chatStore[slug];
 	$: cost = chat ? estimateChatCost(chat) : null;
@@ -234,25 +234,21 @@
 							<TokenCost tokens={countTokens(chat.contextMessage)} />
 						</div>
 					{/if}
-					<button
-						class="btn btn-lg self-center variant-filled-secondary"
-						on:click={() => showModalComponent('ContextModal', { slug })}
-					>
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke-width="1.5"
-							stroke="currentColor"
-							class="w-6 h-6"
+					<div class="flex flex-row md:flex-col space-x-2 space-y-2">
+						<button
+							class="btn self-center variant-filled-primary"
+							on:click={() => showModalComponent('ContextModal', { slug })}
+						>
+							Edit
+						</button>
+						<button
+							class="btn self-center variant-filled-tertiary"
+							on:click={() =>
+								createNewChat({ context: chat.contextMessage.content, settings: chat.settings })}
 						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-							/>
-						</svg>
-					</button>
+							New Chat
+						</button>
+					</div>
 				</svelte:fragment>
 			</HintMessage>
 		</svelte:fragment>
diff --git a/src/routes/shared/[slug]/+error.svelte b/src/routes/shared/[slug]/+error.svelte
index 2eac308..840dde9 100644
--- a/src/routes/shared/[slug]/+error.svelte
+++ b/src/routes/shared/[slug]/+error.svelte
@@ -10,7 +10,7 @@
 	</p>
 
 	<!-- Add button -->
-	<button class="card p-4 grid variant-ghost-primary" on:click={createNewChat}>
+	<button class="card p-4 grid variant-ghost-primary" on:click={() => createNewChat()}>
 		<div class="flex space-x-2 md:space-x-4 items-center self-center justify-self-center">
 			<svg
 				xmlns="http://www.w3.org/2000/svg"

From d7d5eb298783ada708655b843233e52b4d56edda Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Hopst=C3=A4tter?= <simon.hopstaetter@shipbit.de>
Date: Fri, 31 Mar 2023 02:21:29 +0200
Subject: [PATCH 2/2] hide button when context is empty

---
 src/routes/[slug]/+page.svelte | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/routes/[slug]/+page.svelte b/src/routes/[slug]/+page.svelte
index 410e468..17ee116 100644
--- a/src/routes/[slug]/+page.svelte
+++ b/src/routes/[slug]/+page.svelte
@@ -241,13 +241,15 @@
 						>
 							Edit
 						</button>
-						<button
-							class="btn self-center variant-filled-tertiary"
-							on:click={() =>
-								createNewChat({ context: chat.contextMessage.content, settings: chat.settings })}
-						>
-							New Chat
-						</button>
+						{#if hasContext}
+							<button
+								class="btn self-center variant-filled-tertiary"
+								on:click={() =>
+									createNewChat({ context: chat.contextMessage.content, settings: chat.settings })}
+							>
+								New Chat
+							</button>
+						{/if}
 					</div>
 				</svelte:fragment>
 			</HintMessage>