From 9528782ac9a707abee4f46e42cafa4061787a385 Mon Sep 17 00:00:00 2001
From: ahmedosman2001 <45076765+ahmedosman2001@users.noreply.github.com>
Date: Fri, 9 Jun 2023 13:05:01 +0100
Subject: [PATCH 1/2] Enable Previous Message Deletion

This allows users to delete previous messages from the UI and local storage. The function takes a message's token as an argument, identifies the corresponding message elements in the UI, and removes them. It also updates the conversation object in local storage by filtering out the deleted message. If there are no messages left, the conversation is deleted from the sidebar. All this happens without user refreshing the page.
---
 client/js/chat.js | 40 +++++++++++++++++++++++++++++++++-------
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/client/js/chat.js b/client/js/chat.js
index cff0be5..0c16893 100644
--- a/client/js/chat.js
+++ b/client/js/chat.js
@@ -85,6 +85,7 @@ const ask_gpt = async (message) => {
                 <div class="content" id="user_${token}"> 
                     ${format(message)}
                 </div>
+                <i class="fa fa-trash trash-icon" onclick="deleteMessage('${token}')"></i>
             </div>
         `;
 
@@ -187,8 +188,8 @@ const ask_gpt = async (message) => {
         "An error occured, please reload / refresh cache and try again.";
     }
 
-    add_message(window.conversation_id, "user", message);
-    add_message(window.conversation_id, "assistant", text);
+    add_message(window.conversation_id, "user", message, token);
+    add_message(window.conversation_id, "assistant", text, token);
 
     message_box.scrollTop = message_box.scrollHeight;
     await remove_cancel_button();
@@ -197,7 +198,7 @@ const ask_gpt = async (message) => {
     await load_conversations(20, 0);
     window.scrollTo(0, 0);
   } catch (e) {
-    add_message(window.conversation_id, "user", message);
+    add_message(window.conversation_id, "user", message, token);
 
     message_box.scrollTop = message_box.scrollHeight;
     await remove_cancel_button();
@@ -214,10 +215,10 @@ const ask_gpt = async (message) => {
       let error_message = `oops ! something went wrong, please try again / reload. [stacktrace in console]`;
 
       document.getElementById(`gpt_${window.token}`).innerHTML = error_message;
-      add_message(window.conversation_id, "assistant", error_message);
+      add_message(window.conversation_id, "assistant", error_message, token);
     } else {
       document.getElementById(`gpt_${window.token}`).innerHTML += ` [aborted]`;
-      add_message(window.conversation_id, "assistant", text + ` [aborted]`);
+      add_message(window.conversation_id, "assistant", text + ` [aborted]`, token);
     }
 
     window.scrollTo(0, 0);
@@ -316,13 +317,22 @@ const load_conversation = async (conversation_id) => {
                         : `<i class="fa-regular fa-phone-arrow-up-right"></i>`
                     }
                 </div>
-                <div class="content">
+               ${
+                  item.role == "user"
+                    ? `<div class="content" id="user_${item.token}">`
+                    : `<div class="content" id="gpt_${item.token}">`
+                }
                     ${
                       item.role == "assistant"
                         ? markdown.render(item.content)
                         : item.content
                     }
                 </div>
+                  ${
+                    item.role == "user"
+                    ? `<i class="fa fa-trash trash-icon" onclick="deleteMessage('${item.token}')"></i>`
+                    : ''
+                   }                
             </div>
         `;
   }
@@ -358,7 +368,7 @@ const add_conversation = async (conversation_id, title) => {
   }
 };
 
-const add_message = async (conversation_id, role, content) => {
+const add_message = async (conversation_id, role, content, token) => {
   before_adding = JSON.parse(
     localStorage.getItem(`conversation:${conversation_id}`)
   );
@@ -366,6 +376,7 @@ const add_message = async (conversation_id, role, content) => {
   before_adding.items.push({
     role: role,
     content: content,
+    token: token,
   });
 
   localStorage.setItem(
@@ -564,4 +575,19 @@ colorThemes.forEach((themeOption) => {
   });
 });
 
+function deleteMessage(token) {
+  const messageDivUser = document.getElementById(`user_${token}`)
+  const messageDivGpt = document.getElementById(`gpt_${token}`)
+  if (messageDivUser) messageDivUser.parentNode.remove();
+  if (messageDivGpt) messageDivGpt.parentNode.remove();
+  const conversation = JSON.parse(localStorage.getItem(`conversation:${window.conversation_id}`));
+  conversation.items = conversation.items.filter(item => item.token !== token);
+  localStorage.setItem(`conversation:${window.conversation_id}`, JSON.stringify(conversation));
+
+  const messages = document.getElementsByClassName("message");
+  if (messages.length === 0) {
+    delete_conversation(window.conversation_id);
+  };
+}
+
 document.onload = setTheme();

From 52e7de47fb245f9f2060bcc11e94a367b6f03c30 Mon Sep 17 00:00:00 2001
From: ahmedosman2001 <45076765+ahmedosman2001@users.noreply.github.com>
Date: Fri, 9 Jun 2023 13:08:37 +0100
Subject: [PATCH 2/2] Update style.css

---
 client/css/style.css | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/client/css/style.css b/client/css/style.css
index a1f6908..a0327cb 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -812,4 +812,10 @@ a:-webkit-any-link {
     --clr-card-bg: hsl(209 50% 5%);
     --colour-3: hsl(209 50% 90%);
     --conversations: hsl(209 50% 80%);
-}
\ No newline at end of file
+}
+
+.trash-icon {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+}