Add forget history up to this point

src/App.svelte

@@ -33,6 +33,7 @@
   import { SSE } from "sse.js";
   import DeleteIcon from "./assets/delete.svg";
   import MoreIcon from "./assets/more.svg";
+  import HistoryIcon from "./assets/history.svg";
   import SendIcon from "./assets/send.svg";
   import Paragraph from "./renderers/Paragraph.svelte";
   import { encodeTokens } from "./Encoder";
@@ -95,6 +96,15 @@
     setupConfig();
   }
 
+  function setHistoryAtMessage(messageIndex: number) {
+    setSendFromIndex(messageIndex);
+  }
+
+  function forgetALLHistory() {
+    let messageCount = $conversations[$chosenConversationId].history.length;
+    setSendFromIndex(messageCount - 1);
+  }
+
   // Deletes message of index i in current conversation.
   // @param {number} i
   function deleteMessage(i: number) {
@@ -104,6 +114,11 @@
     );
     conv[$chosenConversationId].history = msgs;
     conversations.set(conv);
+
+    // adjust sendFromIndex (memory)
+    if (i < $conversations[$chosenConversationId].sendFromIndex) {
+      setSendFromIndex($conversations[$chosenConversationId].sendFromIndex - 1);
+    }
   }
 
   // Sets history in current conversation.
@@ -158,6 +173,7 @@
     let newConversation: Conversation = {
       history: [],
       conversationTokens: 0,
+      sendFromIndex: 0,
       assistantRole: $defaultAssistantRole.role,
       title: "",
     };
@@ -333,6 +349,13 @@
     return tokenCount;
   }
 
+  function setSendFromIndex(index: number) {
+    console.log("Setting memory index to " + index);
+    let conv = $conversations;
+    conv[$chosenConversationId].sendFromIndex = index;
+    conversations.set(conv);
+  }
+
   //   Adds the tokens to the current conversation and the global counter.
   //   @param {number} tokenCount : Number of tokens.
   function addTokens(tokenCount: number) {
@@ -446,32 +469,40 @@
     input = "";
     let outgoingMessage: ChatCompletionRequestMessage[];
 
+    const slicedMessageHistory = messageHistory.slice(
+      $conversations[$chosenConversationId].sendFromIndex
+    );
+
     // Select action
     switch (action) {
       case MSG_TYPES.SUMMARIZE:
-        // currentHistory = [];
-        setHistory([]);
         outgoingMessage = [
-          ...messageHistory,
+          ...slicedMessageHistory,
           {
             role: "user",
             content:
               "Please summarize our whole previous conversation as conscisely as possible. Max word count is 400.",
           },
         ];
         console.log("Chat summarized.");
+        forgetALLHistory();
         break;
       case MSG_TYPES.WITHOUT_HISTORY:
-        messageHistory = [];
         console.log("Message without history.");
+        forgetALLHistory();
+        outgoingMessage = [{ role: "user", content: currentInput }];
+        break;
       default:
+      // get only messages from sendFromIndex to the end of the array
         outgoingMessage = [
-          ...messageHistory,
+          ...slicedMessageHistory,
           { role: "user", content: currentInput },
         ];
         break;
     }
 
+    console.log("Outgoing message:", outgoingMessage);
+
     if ($streamMessages) createStream(outgoingMessage);
     else sendMessageNoStream(outgoingMessage);
     createTitle(currentInput);
@@ -523,6 +554,11 @@
     >
       <div class="flex flex-col ">
         {#each $conversations[$chosenConversationId].history as message, i}
+         {#if i === $conversations[$chosenConversationId].sendFromIndex}
+          <div class="flex flex-col items-center border-b-2 border-red-600 text-sm text-red-500">
+            <h3>Memory</h3>
+          </div>
+          {/if}
           <div
             class="message relative inline-block px-2 py-5 pb-2 {`${(() => {
               switch (message.role) {
@@ -536,6 +572,16 @@
               // This below might just be the ugliest thing I've ever seen.
             })()}`}"
           >
+
+            <button
+              title="Forget history up to this point"
+              class="forgetHistoryButton"
+              on:click={() => {
+                setHistoryAtMessage(i);
+              }}
+            >
+              <img class="icon-white w-8" alt="Delete" src={HistoryIcon} />
+            </button>
             <button
               class="deleteButton"
               on:click={() => {
@@ -656,7 +702,6 @@
   .message:hover button {
     opacity: 1;
   }
-
   .deleteButton {
     padding: 5px;
     position: absolute;
@@ -666,4 +711,14 @@
     margin: 10px;
     transition: all 0.1s ease-in-out;
   }
-</style>
+
+  .forgetHistoryButton {
+    padding: 5px;
+    position: absolute;
+    opacity: 0;
+    top: 0;
+    right: 50px;
+    margin: 10px;
+    transition: all 0.1s ease-in-out;
+  }
+</style>

src/lib/Sidebar.svelte

@@ -110,7 +110,7 @@ You are a therapist. ETC...`;
             <textarea
               bind:value={$conversations[$chosenConversationId].assistantRole}
               {placeholder}
-              class="bg-primary px-2 pt-1 mb-2 pb-3 resize-none ronded-t-none rounded-b-md focus:outline-none focus:outline-primary"
+              class="bg-primary min-h-[100px] px-2 pt-1 mb-2 pb-3 resize-none ronded-t-none rounded-b-md focus:outline-none focus:outline-primary"
             />
           {/if}
         {/each}

src/stores/stores.ts

@@ -4,6 +4,7 @@ import { type Writable, writable } from "svelte/store";
 export interface Conversation {
   history: ChatCompletionRequestMessage[];
   conversationTokens: number;
+  sendFromIndex: number;
   assistantRole: string;
   title: string;
 }
@@ -63,9 +64,20 @@ export const chosenConversationId = writable(0);
 let storedConversations = localStorage.getItem('conversations');
 let parsedConversations: Conversation[] = storedConversations !== null ? JSON.parse(storedConversations) : null;
 
+// migrate old conversations to the new format
+if (parsedConversations !== null) {
+  parsedConversations = parsedConversations.map((conversation: Conversation) => {
+    if (conversation.sendFromIndex === undefined) {  // add new field sendFromIndex: 0
+      conversation.sendFromIndex = 0;
+    }
+    return conversation;
+  });
+}
+
 export const conversations: Writable<Conversation[]> = writable(parsedConversations || [{
     history: [],
     conversationTokens: 0,
+    sendFromIndex: 0,
     assistantRole: "You are a helpful assistant.",
     title: "",
   }]);