From cd2b9b9a88d861ec12e0d7ab5bc6338bb6957961 Mon Sep 17 00:00:00 2001
From: Niek van der Maas <mail@niekvandermaas.nl>
Date: Fri, 3 Mar 2023 17:20:10 +0100
Subject: [PATCH] Prepare adding edit functionality #3

---
 src/app.scss           | 6 ++++++
 src/lib/Chat.svelte    | 7 +++++--
 src/lib/Storage.svelte | 8 ++++++++
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 14243aa..68c1804 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -21,6 +21,12 @@ a.is-disabled {
   filter: grayscale(100%);
 }
 
+/*
+.usermessage:hover .editbutton {
+  display: block !important;
+}
+*/
+
 $footer-padding: 3rem 1.5rem;
 
 @import "/node_modules/bulma/bulma.sass";
\ No newline at end of file
diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte
index 303466c..4429de2 100644
--- a/src/lib/Chat.svelte
+++ b/src/lib/Chat.svelte
@@ -127,8 +127,11 @@
 
 {#each chat.messages as message}
   {#if message.role === "user"}
-    <article class="message is-info has-text-right">
-      <div class="message-body">{@html marked(message.content)}</div>
+    <article class="message is-info has-text-right usermessage">
+      <div class="message-body">
+        <div class="greyscale is-pulled-right ml-2 is-hidden editbutton">✏️</div>
+        {@html marked(message.content)}
+      </div>
     </article>
   {:else if message.role === "system"}
     <article class="message is-danger">
diff --git a/src/lib/Storage.svelte b/src/lib/Storage.svelte
index 505f6c7..9d6f714 100644
--- a/src/lib/Storage.svelte
+++ b/src/lib/Storage.svelte
@@ -32,6 +32,14 @@
     chatsStorage.set(chats);
   };
 
+  export const editMessage = (chatId: number, index: number, newMessage: Message) => {
+    const chats = get(chatsStorage);
+    const chat = chats.find((chat) => chat.id === chatId);
+    chat.messages[index] = newMessage;
+    chat.messages.splice(index + 1); // remove the rest of the messages
+    chatsStorage.set(chats);
+  };
+
   export const clearMessages = (chatId: number) => {
     const chats = get(chatsStorage);
     const chat = chats.find((chat) => chat.id === chatId);