From 507a35853c30b63f53116853ad611ec26d6db5c3 Mon Sep 17 00:00:00 2001
From: Niek van der Maas <mail@niekvandermaas.nl>
Date: Sun, 5 Mar 2023 15:12:42 +0100
Subject: [PATCH] Add chat renaming support, fix #8

---
 src/app.scss           |  8 +++++++-
 src/lib/Chat.svelte    | 16 ++++++++++++++--
 src/lib/Sidebar.svelte |  2 +-
 src/lib/Storage.svelte |  1 +
 src/lib/Types.svelte   |  1 +
 5 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 49e3507..9522ea3 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -22,11 +22,17 @@ a.is-disabled {
 }
 
 /* Show the edit button on hover of the user message */
-.usermessage:hover > .message-body > .editbutton {
+.usermessage:hover .editbutton {
   /* TODO: add when ready: display: block !important; */
   text-decoration: none !important;
 }
 
+/* Show the edit button on hover of the chat name */
+.chatname:hover .editbutton {
+  display: inline !important;
+  text-decoration: none !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 cbe62d9..273541d 100644
--- a/src/lib/Chat.svelte
+++ b/src/lib/Chat.svelte
@@ -106,9 +106,21 @@
 </script>
 
 <nav class="level is-mobile">
-  <div class="level-left">
+  <div class="level-left chatname">
     <div class="level-item">
-      <p class="subtitle is-5">Chat {chatId}</p>
+      <p class="subtitle is-5">
+        {chat.name}
+        <a
+          href={"#"}
+          class="greyscale ml-2 is-hidden editbutton"
+          on:click|preventDefault={() => {
+            chat.name = prompt("Enter a new name for this chat", chat.name);
+            chatsStorage.set($chatsStorage);
+          }}
+        >
+          ✏️
+        </a>
+      </p>
     </div>
   </div>
 
diff --git a/src/lib/Sidebar.svelte b/src/lib/Sidebar.svelte
index b7f80fa..344d163 100644
--- a/src/lib/Sidebar.svelte
+++ b/src/lib/Sidebar.svelte
@@ -22,7 +22,7 @@
                 class="panel-block {!apiKey ? 'is-disabled' : ''} {activeChatId === chat.id
                   ? 'has-background-light'
                   : ''}"
-                on:click|preventDefault={() => (activeChatId = chat.id)}>Chat {chat.id}</a
+                on:click|preventDefault={() => (activeChatId = chat.id)}>{chat.name}</a
               >
             </li>
           {/each}
diff --git a/src/lib/Storage.svelte b/src/lib/Storage.svelte
index 9d6f714..c11108d 100644
--- a/src/lib/Storage.svelte
+++ b/src/lib/Storage.svelte
@@ -15,6 +15,7 @@
     // Add a new chat
     chats.push({
       id: chatId,
+      name: `Chat ${chatId}`,
       messages: [],
     });
     chatsStorage.set(chats);
diff --git a/src/lib/Types.svelte b/src/lib/Types.svelte
index 8fc367f..7a5f608 100644
--- a/src/lib/Types.svelte
+++ b/src/lib/Types.svelte
@@ -1,6 +1,7 @@
 <script context="module" lang="ts">
   export type Chat = {
     id: number;
+    name: string;
     messages: Message[];
   };