Added editMessage function

src/lib/components/Message.svelte

@@ -4,9 +4,12 @@
     import Markdown from 'svelte-exmarkdown'
     import { gfmPlugin } from 'svelte-exmarkdown/gfm'
 
+    import edit from '$lib/assets/controlIcons/editIcon.svg?raw'
+
     let {
         value,
         ondelete,
+        onedit,
         isLast,
     }: {
         value: Message
@@ -61,5 +64,13 @@
                 ></svg
             >
         </button>
+
+        <button
+            class="cursor-pointer w-4 h-4 stroke-current"
+            onclick={() => onedit(value)}
+            title="Edit a note"
+        >
+            {@html edit}
+        </button>
     </div>
 </div>

src/lib/index.svelte.ts

@@ -90,6 +90,10 @@ class Messages {
         delete this.inner[id]
     }
 
+    edit(message: Message, newContent: string) {
+        message.data.content = newContent
+    }
+
     get length(): number {
         return Object.keys(this.inner).length
     }

src/routes/+page.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
-    import Message from '$lib/components/Message.svelte'
-    import { createMessage, messages, type Id } from '$lib/index.svelte'
+    import MessageComponent from '$lib/components/Message.svelte'
+    import {
+        createMessage,
+        messages,
+        type Id,
+        type Message,
+    } from '$lib/index.svelte'
     import { page } from '$app/stores'
     import { goto } from '$app/navigation'
     import { browser } from '$app/environment'
@@ -30,17 +35,27 @@
     let currentChat = $derived(messages.chatFrom(leafId!, 15).toReversed())
     let lastId = $derived(messages.untilBranchOrLeaf(leafId!))
 
+    let currentEditingMessage: Message | null = $state(null)
     let textInput = $state('')
     // TODO: Make a multiline chat input that grows dynamically
     let textInputElement: HTMLInputElement | null = $state(null)
 
+    function saveMessagesOnLocalStorage() {
+        localStorage.setItem('notes', JSON.stringify(messages.export()))
+    }
+
     function appendMessage() {
+        if (currentEditingMessage) {
+            onEditMessage()
+            return
+        }
+
         let message = createMessage(textInput)
         leafId = messages.add(leafId, message)
 
         textInput = ''
 
-        localStorage.setItem('notes', JSON.stringify(messages.export()))
+        saveMessagesOnLocalStorage()
 
         let url = $page.url
         url.hash = leafId
@@ -57,16 +72,46 @@
         messages.delete(value.id)
         localStorage.setItem('notes', JSON.stringify(messages.export()))
     }
+
+    function onEditMessage() {
+        if (!currentEditingMessage) return
+
+        messages.edit(currentEditingMessage, textInput)
+
+        saveMessagesOnLocalStorage()
+
+        currentEditingMessage = null
+        textInput = ''
+
+        setTimeout(() => textInputElement?.focus(), 0)
+    }
+
+    function startEditing(value: Message) {
+        textInput = value.data.content
+        currentEditingMessage = value
+
+        textInputElement?.focus()
+    }
+
+    function startEditByShortcut(e: KeyboardEvent) {
+        if (e.key === 'ArrowUp') {
+            const lastMessage = messages.get(lastId)
+            if (lastMessage) {
+                startEditing(lastMessage)
+            }
+        }
+    }
 </script>
 
 <!-- TODO: Fullsize note editor on a separate page or in a bottom sheet -->
 <div class="container mx-auto">
     <div class="h-screen flex flex-col justify-end overflow-y-auto p-4 pb-36">
         {#if currentChat}
             {#each currentChat as message}
-                <Message
+                <MessageComponent
                     value={message}
                     ondelete={deleteMessage}
+                    onedit={startEditing}
                     isLast={message.id === lastId}
                 />
             {/each}
@@ -93,14 +138,17 @@
     </div>
 
     <footer
-        class="dark:text-white bg-slate-100 dark:bg-slate-700 border-t border-gray-300 dark:border-slate-600 p-4 absolute left-0 bottom-0 w-full"
+        class:bg-orange-100={currentEditingMessage}
+        class:bg-slate-100={!currentEditingMessage}
+        class="dark:text-white dark:bg-slate-700 border-t border-gray-300 dark:border-slate-600 p-4 absolute left-0 bottom-0 w-full"
     >
         <form
             class="flex items-center container mx-auto"
             onsubmit={appendMessage}
         >
             <input
                 type="text"
+                onkeydown={startEditByShortcut}
                 bind:this={textInputElement}
                 bind:value={textInput}
                 placeholder="Type a message..."