From b0a638bfb53f4199f636acada554839744a5da69 Mon Sep 17 00:00:00 2001
From: Niek van der Maas <mail@niekvandermaas.nl>
Date: Fri, 3 Mar 2023 19:22:16 +0100
Subject: [PATCH] Better edit message button

---
 src/app.scss        |  8 ++++----
 src/lib/Chat.svelte | 11 ++++++++++-
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 68c1804..49e3507 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -21,11 +21,11 @@ a.is-disabled {
   filter: grayscale(100%);
 }
 
-/*
-.usermessage:hover .editbutton {
-  display: block !important;
+/* Show the edit button on hover of the user message */
+.usermessage:hover > .message-body > .editbutton {
+  /* TODO: add when ready: display: block !important; */
+  text-decoration: none !important;
 }
-*/
 
 $footer-padding: 3rem 1.5rem;
 
diff --git a/src/lib/Chat.svelte b/src/lib/Chat.svelte
index 4429de2..3e69c1c 100644
--- a/src/lib/Chat.svelte
+++ b/src/lib/Chat.svelte
@@ -129,7 +129,16 @@
   {#if message.role === "user"}
     <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>
+        <a
+          href={"#"}
+          class="greyscale is-pulled-right ml-2 is-hidden editbutton"
+          on:click={() => {
+            input.value = message.content;
+            input.focus();
+          }}
+        >
+          ✏️
+        </a>
         {@html marked(message.content)}
       </div>
     </article>