Prepare adding edit functionality #3

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";

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">

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);