Add clear button to chat

gramps-project · Aug 28, 2024 · 40bb58b · 40bb58b
1 parent 80d11cf
commit 40bb58b
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 35 deletions.
diff --git a/src/components/GrampsjsChat.js b/src/components/GrampsjsChat.js
@@ -1,4 +1,5 @@
 import {html, css, LitElement} from 'lit'
+import '@material/mwc-button'
 
 import {sharedStyles} from '../SharedStyles.js'
 import {GrampsjsTranslateMixin} from '../mixins/GrampsjsTranslateMixin.js'
@@ -34,6 +35,7 @@ class GrampsjsChat extends GrampsjsTranslateMixin(LitElement) {
           flex-direction: column;
           justify-content: flex-end;
           overflow: hidden;
+          clear: left;
         }
 
         .conversation {
@@ -85,6 +87,14 @@ class GrampsjsChat extends GrampsjsTranslateMixin(LitElement) {
             opacity: 1;
           }
         }
+
+        .clear-btn {
+          position: relative;
+          float: left;
+          top: 20px;
+          left: 0px;
+          margin: 1px solid red;
+        }
       `,
     ]
   }
@@ -104,40 +114,52 @@ class GrampsjsChat extends GrampsjsTranslateMixin(LitElement) {
 
   render() {
     return html`
-      <div class="outer">
-        <div class="container">
-          <div class="conversation">
-            ${this.loading
-              ? html` <grampsjs-chat-message
-                  type="ai"
-                  .strings="${this.strings}"
-                >
-                  <div class="loading" slot="no-wrap">
-                    <div class="dot"></div>
-                    <div class="dot"></div>
-                    <div class="dot"></div></div
-                ></grampsjs-chat-message>`
-              : ''}
-            ${this.messages
-              .toReversed()
-              .map(
-                message => html`
-                  <grampsjs-chat-message
-                    type="${message.role}"
-                    .strings="${this.strings}"
-                    >${renderMarkdownLinks(
-                      message.message
-                    )}</grampsjs-chat-message
-                  >
-                `
-              )}
-          </div>
-          <div class="prompt">
-            <grampsjs-chat-prompt
-              ?loading="${this.loading}"
-              @chat:prompt="${this._handlePrompt}"
-              .strings="${this.strings}"
-            ></grampsjs-chat-prompt>
+    <div class="clear-btn">
+        <mwc-button
+          raised
+          label="${this._('Clear')}"
+          icon="clear_all"
+          @click="${this._handleClear}"
+          ?disabled=${this.messages.length === 0}
+        ></mwc-button>
+        </div>
+        <div class="outer">
+          <div class="container">
+            <div class="conversation">
+              ${
+                this.loading
+                  ? html` <grampsjs-chat-message
+                      type="ai"
+                      .strings="${this.strings}"
+                    >
+                      <div class="loading" slot="no-wrap">
+                        <div class="dot"></div>
+                        <div class="dot"></div>
+                        <div class="dot"></div></div
+                    ></grampsjs-chat-message>`
+                  : ''
+              }
+              ${this.messages
+                .toReversed()
+                .map(
+                  message => html`
+                    <grampsjs-chat-message
+                      type="${message.role}"
+                      .strings="${this.strings}"
+                      >${renderMarkdownLinks(
+                        message.message
+                      )}</grampsjs-chat-message
+                    >
+                  `
+                )}
+            </div>
+            <div class="prompt">
+              <grampsjs-chat-prompt
+                ?loading="${this.loading}"
+                @chat:prompt="${this._handlePrompt}"
+                .strings="${this.strings}"
+              ></grampsjs-chat-prompt>
+            </div>
           </div>
         </div>
       </div>
@@ -206,6 +228,11 @@ class GrampsjsChat extends GrampsjsTranslateMixin(LitElement) {
     setChatHistory(this.messages)
   }
 
+  _handleClear() {
+    this.messages = []
+    setChatHistory(this.messages)
+  }
+
   _scrollToLastMessage() {
     const conversationDiv = this.renderRoot.querySelector('.conversation')
     if (conversationDiv != null) {

diff --git a/src/components/GrampsjsChatPrompt.js b/src/components/GrampsjsChatPrompt.js
@@ -28,7 +28,7 @@ class GrampsjsChatPrompt extends GrampsjsTranslateMixin(LitElement) {
         }
 
         md-filled-icon-button.send {
-          --md-filled-icon-button-container-color: rgba(109, 76, 65, 0.8);
+          --md-filled-icon-button-container-color: rgba(109, 76, 65, 1);
           position: relative;
           margin-left: 16px;
           margin-top: 9px;