From 2cab25d40e581bc45327480d537fbc4fb765f416 Mon Sep 17 00:00:00 2001
From: Adil Atalay Hamamcioglu <recoskyler224@gmail.com>
Date: Mon, 1 May 2023 06:25:50 +0300
Subject: [PATCH 1/5] Deleted unnecessary file

---
 src/routes/Counter.svelte | 102 --------------------------------------
 1 file changed, 102 deletions(-)
 delete mode 100644 src/routes/Counter.svelte

diff --git a/src/routes/Counter.svelte b/src/routes/Counter.svelte
deleted file mode 100644
index 96ef556..0000000
--- a/src/routes/Counter.svelte
+++ /dev/null
@@ -1,102 +0,0 @@
-<script lang="ts">
-	import { spring } from 'svelte/motion';
-
-	let count = 0;
-
-	const displayed_count = spring();
-	$: displayed_count.set(count);
-	$: offset = modulo($displayed_count, 1);
-
-	function modulo(n: number, m: number) {
-		// handle negative numbers
-		return ((n % m) + m) % m;
-	}
-</script>
-
-<div class="counter">
-	<button on:click={() => (count -= 1)} aria-label="Decrease the counter by one">
-		<svg aria-hidden="true" viewBox="0 0 1 1">
-			<path d="M0,0.5 L1,0.5" />
-		</svg>
-	</button>
-
-	<div class="counter-viewport">
-		<div class="counter-digits" style="transform: translate(0, {100 * offset}%)">
-			<strong class="hidden" aria-hidden="true">{Math.floor($displayed_count + 1)}</strong>
-			<strong>{Math.floor($displayed_count)}</strong>
-		</div>
-	</div>
-
-	<button on:click={() => (count += 1)} aria-label="Increase the counter by one">
-		<svg aria-hidden="true" viewBox="0 0 1 1">
-			<path d="M0,0.5 L1,0.5 M0.5,0 L0.5,1" />
-		</svg>
-	</button>
-</div>
-
-<style>
-	.counter {
-		display: flex;
-		border-top: 1px solid rgba(0, 0, 0, 0.1);
-		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-		margin: 1rem 0;
-	}
-
-	.counter button {
-		width: 2em;
-		padding: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border: 0;
-		background-color: transparent;
-		touch-action: manipulation;
-		font-size: 2rem;
-	}
-
-	.counter button:hover {
-		background-color: var(--color-bg-1);
-	}
-
-	svg {
-		width: 25%;
-		height: 25%;
-	}
-
-	path {
-		vector-effect: non-scaling-stroke;
-		stroke-width: 2px;
-		stroke: #444;
-	}
-
-	.counter-viewport {
-		width: 8em;
-		height: 4em;
-		overflow: hidden;
-		text-align: center;
-		position: relative;
-	}
-
-	.counter-viewport strong {
-		position: absolute;
-		display: flex;
-		width: 100%;
-		height: 100%;
-		font-weight: 400;
-		color: var(--color-theme-1);
-		font-size: 4rem;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.counter-digits {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-	}
-
-	.hidden {
-		top: -100%;
-		user-select: none;
-	}
-</style>

From 137640f421dfdaa72c696034cae871e99ef1dee9 Mon Sep 17 00:00:00 2001
From: Adil Atalay Hamamcioglu <recoskyler224@gmail.com>
Date: Mon, 1 May 2023 06:26:06 +0300
Subject: [PATCH 2/5] UI/UX improvements

---
 src/routes/Logo.svelte | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/routes/Logo.svelte b/src/routes/Logo.svelte
index f659776..a3891cd 100644
--- a/src/routes/Logo.svelte
+++ b/src/routes/Logo.svelte
@@ -4,8 +4,11 @@
     </a>
 </div>
 
-<style>
-    .logo > a {
+<style lang="scss">
+  .logo {
+    margin-bottom: 2rem;
+
+    >a {
         color: var(--color-theme-2) !important;
         font-size: 2rem;
         font-weight: 600;
@@ -13,9 +16,10 @@
         transition: all 200ms ease-in-out;
     }
 
-    .logo > a:hover {
+    >a:hover {
         letter-spacing: 0.3ch;
         font-weight: 600;
         text-decoration: none;
     }
+  }
 </style>

From b7d83b0b26885f7f6e89e7d28fce22559badd7ea Mon Sep 17 00:00:00 2001
From: Adil Atalay Hamamcioglu <recoskyler224@gmail.com>
Date: Mon, 1 May 2023 06:26:30 +0300
Subject: [PATCH 3/5] Added horizontal divider

---
 src/routes/NavBar.svelte | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/routes/NavBar.svelte b/src/routes/NavBar.svelte
index 05081fa..9e79c04 100644
--- a/src/routes/NavBar.svelte
+++ b/src/routes/NavBar.svelte
@@ -140,6 +140,8 @@
       </button>
     </div>
 
+    <div style="width: 100%; height: 2px; background-color: rgb(255, 255, 255, 0.1); margin: 2ch 0;"></div>
+
     {#each $chats as { title }, index}
       <div class="chat-button-cont">
         <button

From 79d474c178fe1c588e79586ae200e318801f4cc2 Mon Sep 17 00:00:00 2001
From: Adil Atalay Hamamcioglu <recoskyler224@gmail.com>
Date: Mon, 1 May 2023 09:21:44 +0300
Subject: [PATCH 4/5] Added title bar and remember toggle Bug fixes

---
 src/helper.ts              |   7 ++
 src/routes/+page.svelte    | 216 ++++++++++++++++++++++++++++---------
 src/routes/Titlebar.svelte |  96 +++++++++++++++++
 3 files changed, 267 insertions(+), 52 deletions(-)
 create mode 100644 src/helper.ts
 create mode 100644 src/routes/Titlebar.svelte

diff --git a/src/helper.ts b/src/helper.ts
new file mode 100644
index 0000000..4d55a9b
--- /dev/null
+++ b/src/helper.ts
@@ -0,0 +1,7 @@
+export const trimToLength = (str: string, length: number) => {
+  if (str.trim().length <= length) return str.trim();
+
+  const trimmed = str.trim();
+
+  return trimmed.slice(0, length);
+};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b01ffaf..76a854f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -4,9 +4,12 @@
   import Header from "./Header.svelte";
   import { v4 as uuidv4 } from "uuid";
   import { selectedChat } from "./selectedChat";
+  import Titlebar from "./Titlebar.svelte";
+  import { trimToLength } from "../helper";
 
-  let prompt: String = "";
-  let lastPrompt: Date | null = null;
+  let prompt: string = "";
+  let lastPrompt: number | null = null;
+  let remember: boolean = false;
 
   if ($chats.length === 0) {
     $chats = [
@@ -19,10 +22,7 @@
   }
 
   async function submitPrompt(regenerate: boolean = false) {
-    if (
-      lastPrompt !== null &&
-      Math.abs((Date.now() - lastPrompt.getTime()) / 1000) < 3
-    ) {
+    if (lastPrompt !== null && Math.abs((Date.now() - lastPrompt) / 1000) < 3) {
       console.warn("Timed out");
 
       return;
@@ -36,7 +36,7 @@
       currentRole = "system";
 
       $chats[$selectedChat].title =
-        prompt.trim() === "" ? "New chat" : prompt.trim();
+        prompt.trim() === "" ? "New chat" : trimToLength(prompt, 255);
     }
 
     console.log(prompt);
@@ -87,12 +87,17 @@
 
     const body = {
       model: import.meta.env.VITE_MODEL,
-      messages: $chats[$selectedChat].messages
-        .filter((e) => !e.isDeleted)
-        .map((e: Prompt) => ({
-          role: e.role,
-          content: e.content,
-        })),
+      messages: remember
+        ? $chats[$selectedChat].messages
+            .filter((e) => !e.isDeleted)
+            .map((e: Prompt) => ({
+              role: e.role,
+              content: e.content,
+            }))
+        : $chats[$selectedChat].messages.slice(-1).map((e: Prompt) => ({
+            role: e.role,
+            content: e.content,
+          })),
     };
 
     const key = import.meta.env.VITE_API_KEY;
@@ -119,6 +124,8 @@
         }
       );
 
+      lastPrompt = Date.now();
+
       if (res.status !== 200) console.error(res);
 
       $chats[$selectedChat].messages = $chats[$selectedChat].messages.filter(
@@ -168,6 +175,8 @@
 </svelte:head>
 
 <main>
+  <Titlebar />
+
   <div class="main-cont">
     <div class="chat-parent">
       <div class="chat-cont" id="chat-cont">
@@ -182,7 +191,7 @@
           </button>
         {:else}
           <p class="prompt empty-prompt-hint">
-            <span> This place is emptier than my bed... </span>
+            <span> This place is emptier than my head... </span>
             <br />
             <br />
             <span>Enter a new prompt such as; </span>
@@ -298,7 +307,52 @@
               class:deleted-prompt={isDeleted}
               aria-multiline="true">{content}</pre>
 
-              <div class="prompt-actions">
+            <div class="prompt-actions">
+              <button
+                class="prompt-action"
+                class:delete={!isDeleted}
+                on:click={() => {
+                  const promptIndex = $chats[$selectedChat].messages.findIndex(
+                    (e) => e.uuid === uuid
+                  );
+
+                  if (promptIndex < 0) {
+                    console.error("Could not find prompt with UUID");
+
+                    return;
+                  }
+
+                  $chats[$selectedChat].messages[promptIndex].isDeleted =
+                    !$chats[$selectedChat].messages[promptIndex].isDeleted;
+
+                  $chats = $chats;
+                }}
+              >
+                {#if isDeleted}
+                  <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M0 0h48v48H0z" fill="none" />
+                    <path
+                      d="M28 24c0-2.21-1.79-4-4-4s-4 1.79-4 4 1.79 4 4 4 4-1.79 4-4zM24 6C14.06 6 6 14.06 6 24H0l8 8 8-8h-6c0-7.73 6.27-14 14-14s14 6.27 14 14-6.27 14-14 14c-3.03 0-5.82-.97-8.12-2.61l-2.83 2.87C16.09 40.6 19.88 42 24 42c9.94 0 18-8.06 18-18S33.94 6 24 6z"
+                      fill="#ffffff"
+                      class="fill-000000"
+                    />
+                  </svg>
+                {:else}
+                  <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M7 7h18v22H7zM3 7h26M13 3h6M13 12v10M19 12v10"
+                      fill="none"
+                      stroke="#ffffff"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2px"
+                      class="stroke-000000"
+                    />
+                  </svg>
+                {/if}
+              </button>
+
+              {#if isDeleted}
                 <button
                   class="prompt-action"
                   class:delete={!isDeleted}
@@ -313,42 +367,25 @@
                       return;
                     }
 
-                    $chats[$selectedChat].messages[promptIndex].isDeleted =
-                      !$chats[$selectedChat].messages[promptIndex].isDeleted;
+                    $chats[$selectedChat].messages.splice(promptIndex, 1);
 
                     $chats = $chats;
                   }}
                 >
-                  {#if isDeleted}
-                    <svg
-                      viewBox="0 0 48 48"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path d="M0 0h48v48H0z" fill="none" />
-                      <path
-                        d="M28 24c0-2.21-1.79-4-4-4s-4 1.79-4 4 1.79 4 4 4 4-1.79 4-4zM24 6C14.06 6 6 14.06 6 24H0l8 8 8-8h-6c0-7.73 6.27-14 14-14s14 6.27 14 14-6.27 14-14 14c-3.03 0-5.82-.97-8.12-2.61l-2.83 2.87C16.09 40.6 19.88 42 24 42c9.94 0 18-8.06 18-18S33.94 6 24 6z"
-                        fill="#ffffff"
-                        class="fill-000000"
-                      />
-                    </svg>
-                  {:else}
-                    <svg
-                      viewBox="0 0 32 32"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M7 7h18v22H7zM3 7h26M13 3h6M13 12v10M19 12v10"
-                        fill="none"
-                        stroke="#ffffff"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="2px"
-                        class="stroke-000000"
-                      />
-                    </svg>
-                  {/if}
+                  <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                      d="M7 7h18v22H7zM3 7h26M13 3h6M13 12v10M19 12v10"
+                      fill="none"
+                      stroke="#ffffff"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2px"
+                      class="stroke-000000"
+                    />
+                  </svg>
                 </button>
-              </div>
+              {/if}
+            </div>
           </div>
         {/each}
       </div>
@@ -362,6 +399,7 @@
               id="prompt-input"
               aria-multiline="true"
               aria-label="Prompt"
+              class:remembering={remember}
               on:input={(e) => (prompt = e.currentTarget.value.trim())}
               on:keyup={(e) => {
                 if (e.key === "Enter" && e.ctrlKey) {
@@ -393,9 +431,50 @@
             </button>
           </div>
         </div>
-        <span class="input-hint">
-          Press <kbd>Ctrl</kbd> + <kbd>Enter</kbd> to submit.
-        </span>
+        <div class="hintbar">
+          <div class="remember-toggle-box">
+            {#if remember}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 576 512"
+                class="toggle"
+                fill="rgb(57, 118, 169)"
+                on:click={() => {
+                  remember = !remember;
+                }}
+                on:keyup={() => {}}
+              >
+                <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+                <path
+                  d="M192 64C86 64 0 150 0 256S86 448 192 448H384c106 0 192-86 192-192s-86-192-192-192H192zm192 96a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"
+                />
+              </svg>
+
+              <span>Previous prompts will be remembered</span>
+            {:else}
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 576 512"
+                class="toggle"
+                on:click={() => {
+                  remember = !remember;
+                }}
+                on:keyup={() => {}}
+              >
+                <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+                <path
+                  d="M384 128c70.7 0 128 57.3 128 128s-57.3 128-128 128H192c-70.7 0-128-57.3-128-128s57.3-128 128-128H384zM576 256c0-106-86-192-192-192H192C86 64 0 150 0 256S86 448 192 448H384c106 0 192-86 192-192zM192 352a96 96 0 1 0 0-192 96 96 0 1 0 0 192z"
+                />
+              </svg>
+
+              <span>Only the last prompt will be submitted</span>
+            {/if}
+          </div>
+
+          <span class="input-hint">
+            Press <kbd>Ctrl</kbd> + <kbd>Enter</kbd> to submit.
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -408,14 +487,38 @@
     calc(100vw - 24ch)
   );
 
+  .hintbar {
+    display: flex;
+    flex-direction: column;
+    color: rgba(255, 255, 255, 0.5);
+    fill: rgba(255, 255, 255, 0.5);
+  }
+
+  .remember-toggle-box {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-left: 2.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .toggle {
+    width: 3ch;
+    margin-right: 1ch;
+  }
+
+  .remembering {
+    border: 2px solid rgb(57, 118, 169);
+  }
+
   .main-cont {
     display: flex;
     position: relative;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    flex: 1;
-    height: 100vh;
+    padding-top: 4rem;
+    max-height: calc(100vh - 10rem);
   }
 
   .submit {
@@ -526,12 +629,15 @@
     flex: 1;
     display: flex;
     flex-direction: column;
-    padding: 1rem;
+    padding: 2rem;
     width: $content-width;
     max-width: 64rem;
     margin: 0 auto;
     padding-left: clamp(20ch, 35ch, 50ch);
     box-sizing: border-box;
+    max-height: 100vh;
+    align-items: center;
+    justify-content: center;
   }
 
   .regen {
@@ -618,4 +724,10 @@
     grid-area: 2 / 1 / 3 / 2;
     padding-top: 1ch;
   }
+
+  .prompt-actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
 </style>
diff --git a/src/routes/Titlebar.svelte b/src/routes/Titlebar.svelte
new file mode 100644
index 0000000..0e21647
--- /dev/null
+++ b/src/routes/Titlebar.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+  import { chats } from "./chat";
+  import { selectedChat } from "./selectedChat";
+
+  let titleEditing: boolean = false;
+</script>
+
+<div class="titlebar">
+  <div class="titlebar-items">
+    {#if titleEditing}
+      <input
+        type="text"
+        maxlength={255}
+        id="chat-title-input"
+        bind:value={$chats[$selectedChat].title}
+      />
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 448 512"
+        on:keydown={() => {}}
+        on:click={() => {
+          titleEditing = !titleEditing;
+        }}
+        class="title-action"
+      >
+        <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+        <path
+          d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
+        />
+      </svg>
+    {:else}
+      <span id="chat-title" class:hidden={titleEditing}>
+        {$chats[$selectedChat].title}
+      </span>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+        on:keydown={() => {}}
+        on:click={() => {
+          titleEditing = !titleEditing;
+        }}
+        class="title-action"
+      >
+        <!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+        <path
+          d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"
+        />
+      </svg>
+    {/if}
+  </div>
+</div>
+
+<style lang="scss">
+  .titlebar {
+    color: rgba(255, 255, 255, 0.6);
+    background-color: var(--color-bg-1);
+    font-weight: 600;
+    position: fixed;
+    z-index: 200;
+    width: clamp(-54ch + 100vw, -39ch + 100vw, -24ch + 100vw);
+    top: 0;
+    right: 0;
+  }
+
+  .titlebar-items {
+    display: flex;
+    padding: 1.5rem 2rem;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .title-action {
+    width: 2ch;
+    fill: rgba(255, 255, 255, 0.5);
+    transition: all 200ms ease-out;
+    cursor: pointer;
+    padding-left: 2ch;
+
+    &:hover {
+      fill: rgba(255, 255, 255, 1);
+    }
+  }
+
+  #chat-title-input {
+    border: none;
+    outline: none;
+    color: rgba(255, 255, 255, 1);
+    background: none;
+    font-family: var(--font-body);
+    font-weight: 600;
+    margin: 0;
+    padding: 0;
+  }
+</style>

From f686425a7531e93047e0fe359167043b118d6ec6 Mon Sep 17 00:00:00 2001
From: Adil Atalay Hamamcioglu <recoskyler224@gmail.com>
Date: Mon, 1 May 2023 09:24:56 +0300
Subject: [PATCH 5/5] User pointer cursor on toggle

---
 src/routes/+page.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 76a854f..54c01ae 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -505,6 +505,7 @@
   .toggle {
     width: 3ch;
     margin-right: 1ch;
+    cursor: pointer;
   }
 
   .remembering {