From f7dc17a26e2053db05603cde55b6d4c0d644c94e Mon Sep 17 00:00:00 2001
From: Webifi <john@webifi.com>
Date: Wed, 31 May 2023 19:00:51 -0500
Subject: [PATCH] Display message edit/action button differently

---
 src/app.scss               | 106 +++++++++++++++++++++++
 src/lib/EditMessage.svelte | 170 ++++++++++++++-----------------------
 2 files changed, 170 insertions(+), 106 deletions(-)

diff --git a/src/app.scss b/src/app.scss
index 6dd34ec..0af55d7 100644
--- a/src/app.scss
+++ b/src/app.scss
@@ -1,5 +1,6 @@
 html {
   /* Scrollbar */
+  /* TODO: Update these to use bulma's scss variables, not css vars. */
   --scrollbarBG: transparent;
   --thumbBG: hsl(0, 0%, 60%); /* scollbar color light */
   /* Back-ground */
@@ -8,6 +9,9 @@ html {
   // --BgColorSidebarDark: rgb(28, 30, 36);
   --BgColorSidebarDark: rgb(16, 17, 22);
   --BgColorSidebarLight: hsla(0, 0%, 93%, 0.354);
+  // Tool drawer for messages
+  --chatToolDrawerSize: 40px;
+  --chatToolDrawerColor: var(--BgColorSidebarLight);
   
   /* Sizes */
   --sidebarTop: 0px;
@@ -25,6 +29,8 @@ html {
   --chatInputPaddingRight: 60px;
   --chatInputPaddingBottom: 10px;
   --chatInputPaddingLeft: 60px;
+
+  --BgColor: var(-BgColorLight) /* leave this */
 }
 
 .navbar {
@@ -34,6 +40,8 @@ html {
 @media (prefers-color-scheme: dark) {
   html {
     --thumbBG: #3f3f3f; /* scrollbar color dark */
+    --BgColor: var(-BgColorDark);
+    --chatToolDrawerColor: var(--BgColorSidebarDark);
   }
 }
 
@@ -423,5 +431,103 @@ aside.menu.main-menu .menu-expanse {
   margin-left: 8px;
 }
 
+.message-body {
+  z-index: 1;
+}
+.message-note {
+  padding-top: .6em;
+  margin-bottom: -0.6em;
+}
+.message-edit {
+  display: block;
+}
+.message-editor {
+  white-space: pre-wrap;
+  min-width: 60px;
+  min-height: 30px;
+}
+.message-display {
+  min-width: 60px;
+  min-height: 1.3em;
+}
+.button-pack .button {
+  display: block;
+  margin: 4px;
+  // border-radius: 10px;
+  opacity: .6;
+}
+.button-pack .button:hover {
+  opacity: 1;
+}
+.assistant-message .button-pack {    
+  right: auto;
+  left: -20px;
+}
+.chat-message.message {
+  position: relative;
+  transition: 0.3s;
+}
 
+// .chat-message.message:hover .button-pack, article.message:focus .button-pack {
+//   display: block;
+// }
+.chat-message.summarized {
+  opacity: 0.6;
+}
+.tool-drawer, .tool-drawer-mask {
+  position: absolute;
+  visibility: hidden;
+  width: 0%;
+  top: 0px;
+  min-height: 100%;
+  max-height: 100%;
+  overflow: hidden;
+  margin: 0px;
+  padding: 0px;
+  transition: 0.1s;
+  background-color: var(--chatToolDrawerColor);
+  border-radius: 4px;
+}
+.tool-drawer-mask {
+  border-radius: 0px 4px 4px 0px;
+}
+.user-message .tool-drawer-mask {
+  border-radius: 4px 0px 0px 4px;
+}
+.assistant-message .tool-drawer, .assistant-message .tool-drawer-mask {
+  left:100%;
+}
+.user-message .tool-drawer, .user-message .tool-drawer-mask {
+  right:100%;
+}
+.assistant-message:hover .tool-drawer,
+.assistant-message:focus .tool-drawer {
+  width: var(--chatToolDrawerSize);
+  visibility: visible;
+  max-height: 300%;
+}
+.user-message:hover .tool-drawer,
+.user-message:focus .tool-drawer {
+  width: var(--chatToolDrawerSize);
+  visibility: visible;
+  max-height: 300%;
+}
 
+.assistant-message:hover .tool-drawer-mask,
+.assistant-message:focus .tool-drawer {
+  width: var(--chatToolDrawerSize);
+  visibility: visible;
+}
+.user-message:hover .tool-drawer-mask,
+.user-message:focus .tool-drawer {
+  width: var(--chatToolDrawerSize);
+  visibility: visible;
+}
+.assistant-message:hover, .assistant-message:focus {
+  border-top-right-radius: 0px !important;
+  border-bottom-right-radius: 0px !important;
+}
+.user-message:hover, .user-message:focus {
+  border-top-left-radius: 0px !important;
+  border-bottom-left-radius: 0px !important;
+}
diff --git a/src/lib/EditMessage.svelte b/src/lib/EditMessage.svelte
index 9f5b47d..ad05626 100644
--- a/src/lib/EditMessage.svelte
+++ b/src/lib/EditMessage.svelte
@@ -160,7 +160,7 @@
 {#key message.uuid}
 <article
   id="{'message-' + message.uuid}"
-  class="message" 
+  class="message chat-message" 
   class:is-info={message.role === 'user'}
   class:is-success={message.role === 'assistant'}
   class:is-warning={message.role === 'system'}
@@ -171,64 +171,7 @@
   class:editing={editing}
 >
   <div class="message-body content">
-    <div class="button-pack">
-    {#if message.summarized}
-    <a
-      href={'#'}
-      title="Jump to summary"
-      class="msg-summary-button button is-small is-info"
-      on:click|preventDefault={() => {
-        scrollToMessage(message.summarized)
-      }}
-    >
-    <span class="icon"><Fa icon={faDiagramNext} /></span>
-    </a>
-    {/if}
-    {#if message.summary}
-    <a
-      href={'#'}
-      title="Jump to summarized"
-      class="msg-summarized-button button is-small is-info"
-      on:click|preventDefault={() => {
-        scrollToMessage(message.summary)
-      }}
-    >
-    <span class="icon"><Fa icon={faDiagramPredecessor} /></span>
-    </a>
-    {/if}
-    {#if !message.summarized}
-    <a
-      href={'#'}
-      title="Delete this message"
-      class=" msg-delete-button button is-small is-warning"
-      on:click|preventDefault={() => {
-        checkDelete()
-      }}
-    >
-    {#if waitingForDeleteConfirm}
-    <span class="icon"><Fa icon={faCircleCheck} /></span>
-    {:else}
-    <span class="icon"><Fa icon={faTrash} /></span>
-    {/if}
-    </a>
-    {/if}
-    {#if !message.summarized}
-    <a
-      href={'#'}
-      title="Truncate all and submit"
-      class=" msg-delete-button button is-small is-danger"
-      on:click|preventDefault={() => {
-        checkTruncate()
-      }}
-    >
-    {#if waitingForTruncateConfirm}
-    <span class="icon"><Fa icon={faCircleCheck} /></span>
-    {:else}
-    <span class="icon"><Fa icon={faPaperPlane} /></span>
-    {/if}
-    </a>
-    {/if}
-    </div>
+ 
     {#if editing && !noEdit}
       <form class="message-edit" on:submit|preventDefault={update} on:keydown={keydown}>
         <div id={'edit-' + message.uuid} class="message-editor" bind:innerText={message.content} contenteditable
@@ -257,53 +200,68 @@
       </p>
     {/if}
   </div>
+  <div class="tool-drawer-mask"></div>
+  <div class="tool-drawer">
+    <div class="button-pack">
+      {#if message.summarized}
+      <a
+        href={'#'}
+        title="Jump to summary"
+        class="msg-summary-button button is-small is-info"
+        on:click|preventDefault={() => {
+          scrollToMessage(message.summarized)
+        }}
+      >
+      <span class="icon"><Fa icon={faDiagramNext} /></span>
+      </a>
+      {/if}
+      {#if message.summary}
+      <a
+        href={'#'}
+        title="Jump to summarized"
+        class="msg-summarized-button button is-small is-info"
+        on:click|preventDefault={() => {
+          scrollToMessage(message.summary)
+        }}
+      >
+      <span class="icon"><Fa icon={faDiagramPredecessor} /></span>
+      </a>
+      {/if}
+      {#if !message.summarized}
+      <a
+        href={'#'}
+        title="Delete this message"
+        class=" msg-delete-button button is-small is-warning"
+        on:click|preventDefault={() => {
+          checkDelete()
+        }}
+      >
+      {#if waitingForDeleteConfirm}
+      <span class="icon"><Fa icon={faCircleCheck} /></span>
+      {:else}
+      <span class="icon"><Fa icon={faTrash} /></span>
+      {/if}
+      </a>
+      {/if}
+      {#if !message.summarized}
+      <a
+        href={'#'}
+        title="Truncate all and submit"
+        class=" msg-delete-button button is-small is-danger"
+        on:click|preventDefault={() => {
+          checkTruncate()
+        }}
+      >
+      {#if waitingForTruncateConfirm}
+      <span class="icon"><Fa icon={faCircleCheck} /></span>
+      {:else}
+      <span class="icon"><Fa icon={faPaperPlane} /></span>
+      {/if}
+      </a>
+      {/if}
+      </div>
+
+  </div>
 </article>
 {/key}
 
-<style>
-  .message-note {
-    padding-top: .6em;
-    margin-bottom: -0.6em;
-  }
-  .message-edit {
-    display: block;
-  }
-  .message-editor {
-    white-space: pre-wrap;
-    min-width: 60px;
-    min-height: 30px;
-  }
-  .message-display {
-    min-width: 60px;
-    min-height: 1.3em;
-  }
-  .button-pack .button {
-    display: block;
-    margin: 4px;
-    border-radius: 10px;
-    opacity: .8;
-  }
-  .button-pack .button:hover {
-    opacity: 1;
-  }
-  .button-pack {
-    display: none;
-    position: absolute;
-    right: -20px;
-    top: -20px;
-    text-decoration: none;
-  }
-  .assistant-message .button-pack {    
-    right: auto;
-    left: -20px;
-  }
-  .message {
-    position: relative;
-  }
-  .message:hover .button-pack, .message:focus .button-pack {
-    display: block;
-  }
-  .summarized {
-    opacity: 0.6;
-  }
-</style>