Add option to remove prompts

package.json

@@ -31,6 +31,7 @@
  "quilljs-markdown": "^1.2.0",
  "rxjs": "~7.8.0",
  "tslib": "^2.3.0",
+ "uuid": "^9.0.1",
  "zone.js": "~0.13.3"
  },
  "devDependencies": {
@@ -44,6 +45,7 @@
  "@types/marked": "^4.3.2",
  "@types/prismjs": "^1.26.0",
  "@types/quill": "1.3",
+ "@types/uuid": "^9.0.5",
  "jasmine-core": "~4.5.0",
  "karma": "~6.4.0",
  "karma-chrome-launcher": "~3.1.0",

src/app/custom-chat/custom-chat.component.html

@@ -3,7 +3,7 @@
  <!-- <div class="header">{{title}}</div> -->
 
  <div class="messages" #scroll>
- <ng-container *ngFor="let message of messages">
+ <ng-container *ngFor="let message of messages; trackBy: trackByFn">
  <div class="message-container">
  <div class="avatar" 
  [class.bot] = "message.sender == 'Bot'"
@@ -14,6 +14,9 @@
  <button mat-icon-button (click)="retry(message.text)">
  <mat-icon>replay</mat-icon>
  </button>
+ <button mat-icon-button (click)="delete(message.id)">
+ <mat-icon>delete</mat-icon>
+ </button>
  </span>
  <markdown ngPreserveWhitespaces emoji mermaid [mermaidOptions]="mermaidOptions" katex [katexOptions]="katexOptions"
  clipboard [clipboardButtonComponent]="clipboardButton">

src/app/custom-chat/custom-chat.component.scss

@@ -128,6 +128,11 @@
  transform: scale(0.75);
  position: absolute;
  right: 20px;
+ background-color: rgba(255,255,255,1);
+ border-radius: 50px;
+ padding: 4px;
+ box-shadow: 1px 1px 5px whitesmoke;
+ z-index: 1;
 }
 
 .message-content .btn-reply button {

src/app/custom-chat/custom-chat.component.ts

@@ -1,12 +1,12 @@
 import { Component, OnInit, Inject, ViewChild, ElementRef } from '@angular/core';
-import { environment } from '../../environments/environment.development';
 
 import { DISCUSS_SERVICE_CLIENT_TOKEN } from '../generative-ai-palm/palm.module';
 import { DiscussServiceClient } from '../generative-ai-palm/v1beta2/discuss.service';
 import { Message, MessageResponse } from '../generative-ai-palm/v1beta2/palm.types';
 
 import { KatexOptions, MermaidAPI } from 'ngx-markdown';
 import { ClipboardButtonComponent } from '../clipboard-button/clipboard-button.component';
+import * as uuid from 'uuid';
 
 declare global {
  interface Window {
@@ -61,9 +61,8 @@ export class CustomChatComponent implements OnInit {
  ) { }
 
  ngOnInit(): void {
- //this.addBotMessageLocal(`Human presence detected ⚠️. How can I help you? `);
  this.messages.push({
- type: 'md',
+ id: uuid.v4(),
  text: `
  ${this.large_text_section}
  **Markdown for improved readability**
@@ -97,7 +96,7 @@ alert(s);
  \`\`\`
 
  ` ,
- reply: false,
+ sender: '@gerardsans',
  avatar: "https://pbs.twimg.com/profile_images/1688607716653105152/iL4c9mUH_400x400.jpg",
  }); 
  }
@@ -139,10 +138,9 @@ alert(s);
  let txt = sections.join('');
 
  this.messages.push({
- type: 'md',
+ id: uuid.v4(),
  text: txt,
  sender: '@gerardsans',
- date: new Date(),
  avatar: "https://pbs.twimg.com/profile_images/1688607716653105152/iL4c9mUH_400x400.jpg",
  } as any);
  this.scrollToBottom();
@@ -177,22 +175,19 @@ alert(s);
  private addBotMessage(text: string) {
  this.palmMessages.push({ content: text }); // add robot response
  this.messages.push({
- type: 'md',
+ id: uuid.v4(),
  text: text,
  sender: 'Bot',
- reply: false,
  avatar: "/assets/sparkle_resting.gif",
  });
  //this.scrollToBottom();
  }
 
  private addBotMessageLocal(text: string) {
  this.messages.push({
- type: 'text',
+ id: uuid.v4(),
  text,
  sender: 'Bot',
- reply: true,
- date: new Date()
  });
  }
 
@@ -235,6 +230,14 @@ alert(s);
  // only if it is a user prompt (it has a sender)
  return this.messages.find((message: any) => message.text === text && message.sender);
  }
+
+ trackByFn(i: number, element: any) {
+ return element.id;
+ }
+
+ delete(id: string) {
+ this.messages = this.messages.filter((message: any) => message.id !== id);
+ }
 }
 
 window.document.addEventListener('copy', function (event) {