jason/ThunderAI
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

adding action button after response and collecting the full html response in a var

Browse source
This commit is contained in:
mic 2024-07-21 22:43:28 +02:00
parent 874429e341
commit e7332225ff
1 changed files with 18 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
api_webchat/messagesArea.js
View file

@ -64,6 +64,9 @@ messagesDiv.id = 'messages';
messagesAreaTemplate.content.appendChild(messagesDiv); messagesAreaTemplate.content.appendChild(messagesDiv);
class MessagesArea extends HTMLElement { class MessagesArea extends HTMLElement {
fullTextHTML = "";
constructor() { constructor() {
super(); super();
this.accumulatingMessageEl = null; this.accumulatingMessageEl = null;
@ -95,9 +98,11 @@ class MessagesArea extends HTMLElement {
handleTokensDone() { handleTokensDone() {
this.flushAccumulatingMessage(); this.flushAccumulatingMessage();
this.addActionButtons();
} }
appendUserMessage(messageText, source="You") { appendUserMessage(messageText, source="You") {
this.fullTextHTML = "";
console.log("appendUserMessage: " + messageText); console.log("appendUserMessage: " + messageText);
const header = document.createElement('h2'); const header = document.createElement('h2');
header.textContent = source; header.textContent = source;
@ -134,7 +139,14 @@ class MessagesArea extends HTMLElement {
addActionButtons() { addActionButtons() {
const actionButtons = document.createElement('div'); const actionButtons = document.createElement('div');
actionButtons.classList.add('action-buttons'); actionButtons.classList.add('action-buttons');
const actionButton = document.createElement('button');
actionButton.textContent = 'Send';
actionButton.addEventListener('click', () => {
alert(this.fullText);
});
actionButtons.appendChild(actionButton);
this.messages.appendChild(actionButtons); this.messages.appendChild(actionButtons);
this.scrollToBottom();
} }
flushAccumulatingMessage() { flushAccumulatingMessage() {
@ -148,6 +160,8 @@ class MessagesArea extends HTMLElement {
// Convert Markdown to DOM nodes using the markdown-it library // Convert Markdown to DOM nodes using the markdown-it library
const md = window.markdownit(); const md = window.markdownit();
const html = md.render(fullText); const html = md.render(fullText);
this.fullTextHTML += html;
// Create a new DOM parser // Create a new DOM parser
const parser = new DOMParser(); const parser = new DOMParser();
@ -162,15 +176,17 @@ class MessagesArea extends HTMLElement {
Array.from(doc.body.childNodes).forEach(node => { Array.from(doc.body.childNodes).forEach(node => {
this.accumulatingMessageEl.appendChild(node); this.accumulatingMessageEl.appendChild(node);
}); });
this.accumulatingMessageEl = null; this.accumulatingMessageEl = null;
} }
} }
appendBotMessage(messageText) { appendBotMessage(messageText) {
console.log("appendBotMessage: " + messageText); console.log("appendBotMessage: " + messageText);
this.fullTextHTML = messageText;
const lastMessage = this.messages.lastElementChild; const lastMessage = this.messages.lastElementChild;
const isLastMessageFromUser = lastMessage && lastMessage.classList.contains('user'); const isLastMessageFromUser = lastMessage && lastMessage.classList.contains('user');